@guildofgleks/ui 21.11.0 → 21.12.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.
@@ -1175,7 +1175,7 @@ class AccordionComponent {
1175
1175
  handleRovingFocusKeydown(event, headers);
1176
1176
  }
1177
1177
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1178
- 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 }, ripple: { classPropertyName: "ripple", publicName: "ripple", 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 gogRipple\r\n [rippleDisabled]=\"!rippleEnabled()\"\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,.gog-accordion__item--disabled .gog-accordion__header:active{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%;min-block-size:24px;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)));line-height:var(--gog-accordion-line-height);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-hover-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:active{background-color:var(--gog-accordion-press-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)));line-height:var(--gog-accordion-chevron-line-height);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;--gog-skeleton-base: var(--gog-border-color)}@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: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { 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 });
1178
+ 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 }, ripple: { classPropertyName: "ripple", publicName: "ripple", 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 gogRipple\r\n [rippleDisabled]=\"!rippleEnabled()\"\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,.gog-accordion__item--disabled .gog-accordion__header:active{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%;min-block-size:24px;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)));line-height:var(--gog-accordion-line-height);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-hover-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:active{background-color:var(--gog-accordion-press-bg)}.gog-accordion__header:focus-visible{outline:var(--gog-accordion-focus-ring-width) solid var(--gog-accordion-focus-ring-color);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)));line-height:var(--gog-accordion-chevron-line-height);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;--gog-skeleton-base: var(--gog-border-color)}@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: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { 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 });
1179
1179
  }
1180
1180
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AccordionComponent, decorators: [{
1181
1181
  type: Component,
@@ -1188,7 +1188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
1188
1188
  * already do this; see the loading-state rule in `api-design.instructions.md`.
1189
1189
  */
1190
1190
  '[attr.aria-busy]': 'loading() ? "true" : null',
1191
- }, 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 gogRipple\r\n [rippleDisabled]=\"!rippleEnabled()\"\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,.gog-accordion__item--disabled .gog-accordion__header:active{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%;min-block-size:24px;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)));line-height:var(--gog-accordion-line-height);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-hover-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:active{background-color:var(--gog-accordion-press-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)));line-height:var(--gog-accordion-chevron-line-height);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;--gog-skeleton-base: var(--gog-border-color)}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}}\n"] }]
1191
+ }, 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 gogRipple\r\n [rippleDisabled]=\"!rippleEnabled()\"\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,.gog-accordion__item--disabled .gog-accordion__header:active{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%;min-block-size:24px;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)));line-height:var(--gog-accordion-line-height);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-hover-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:active{background-color:var(--gog-accordion-press-bg)}.gog-accordion__header:focus-visible{outline:var(--gog-accordion-focus-ring-width) solid var(--gog-accordion-focus-ring-color);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)));line-height:var(--gog-accordion-chevron-line-height);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;--gog-skeleton-base: var(--gog-border-color)}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}}\n"] }]
1192
1192
  }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", 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 }] }] } });
1193
1193
 
1194
1194
  /**
@@ -6940,13 +6940,13 @@ class ChipComponent {
6940
6940
  this.gogRemove.emit();
6941
6941
  }
6942
6942
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6943
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ChipComponent, isStandalone: true, selector: "gog-chip", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, removeAriaLabel: { classPropertyName: "removeAriaLabel", publicName: "removeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null }, avatarAlt: { classPropertyName: "avatarAlt", publicName: "avatarAlt", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", gogClick: "gogClick", gogRemove: "gogRemove" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div\r\n class=\"gog-chip__surface\"\r\n [attr.aria-label]=\"ariaLabel() || null\"\r\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n [attr.role]=\"isInteractive() ? 'button' : null\"\r\n [attr.aria-pressed]=\"ariaPressed()\"\r\n [attr.tabindex]=\"isInteractive() ? 0 : null\"\r\n [style.cursor]=\"isInteractive() ? 'pointer' : 'default'\"\r\n (click)=\"onChipClick($event)\"\r\n (keydown)=\"onKeydown($event)\"\r\n gogRipple\r\n [rippleDisabled]=\"!rippleEnabled()\"\r\n>\r\n @if (avatarUrl()) {\r\n <img class=\"gog-chip__avatar\" [src]=\"avatarUrl()\" [alt]=\"avatarAlt()\" />\r\n }\r\n\r\n @if (iconName()) {\r\n <gog-icon class=\"gog-chip__icon\" [ariaHidden]=\"true\" [name]=\"iconName() ?? 'check'\" />\r\n }\r\n\r\n <span class=\"gog-chip__content\">\r\n <ng-content></ng-content>\r\n </span>\r\n\r\n @if (removable() && !disabled()) {\r\n <button\r\n class=\"gog-chip__remove\"\r\n type=\"button\"\r\n [attr.aria-label]=\"removeAriaLabel()\"\r\n (click)=\"onRemoveClick($event)\"\r\n >\r\n <gog-icon name=\"close\" />\r\n </button>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;max-width:100%;contain:layout style}.gog-chip__surface{display:inline-flex;align-items:center;gap:var(--gog-chip-gap, var(--gog-chip-size-gap, var(--gog-chip-md-gap)));box-sizing:border-box;width:fit-content;max-width:100%;min-block-size:24px;overflow:hidden;padding:var(--gog-chip-padding-block, var(--gog-chip-size-padding-block, var(--gog-chip-md-padding-block))) var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline)));border:var(--gog-chip-border-width) var(--gog-chip-border-style) var(--gog-chip-border);border-radius:var(--gog-chip-radius);background-color:var(--gog-chip-bg);color:var(--gog-chip-color);font-family:var(--gog-chip-font-family);font-size:var(--gog-chip-font-size, var(--gog-chip-size-font-size, var(--gog-chip-md-font-size)));font-weight:var(--gog-chip-font-weight);line-height:var(--gog-chip-line-height);white-space:nowrap;-webkit-user-select:none;user-select:none}.gog-chip__surface:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--clickable) .gog-chip__surface:hover:not([aria-disabled=true]){background-color:var(--gog-chip-hover-bg)}:host(.gog-chip--clickable) .gog-chip__surface:active:not([aria-disabled=true]){background-color:var(--gog-chip-press-bg)}:host(.gog-chip--selected) .gog-chip__surface{box-shadow:var(--gog-chip-selected-shadow)}.gog-chip__surface[aria-disabled=true]{opacity:var(--gog-chip-disabled-opacity);pointer-events:none}.gog-chip__content{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:var(--gog-chip-line-height)}.gog-chip__avatar{width:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));height:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));border-radius:50%;object-fit:cover;flex-shrink:0}.gog-chip__icon{flex-shrink:0;font-size:var(--gog-chip-icon-size, var(--gog-chip-size-icon-size, var(--gog-chip-md-icon-size)))}.gog-chip__remove{display:inline-grid;place-items:center;width:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));height:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));padding:0;border:0;border-radius:50%;background:transparent;color:var(--gog-chip-remove-color);font-size:var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size)));cursor:pointer;flex-shrink:0;position:relative}.gog-chip__remove:before{content:\"\";position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;min-inline-size:24px;min-block-size:24px;inline-size:100%;block-size:100%}.gog-chip__remove:hover:not(:disabled){color:var(--gog-chip-remove-hover-color)}.gog-chip__remove:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--xsm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-xsm-font-size);--gog-chip-size-padding-block: var(--gog-chip-xsm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-xsm-padding-inline);--gog-chip-size-gap: var(--gog-chip-xsm-gap);--gog-chip-size-avatar-size: var(--gog-chip-xsm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-xsm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-xsm-remove-size)}:host(.gog-chip--sm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-sm-font-size);--gog-chip-size-padding-block: var(--gog-chip-sm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-sm-padding-inline);--gog-chip-size-gap: var(--gog-chip-sm-gap);--gog-chip-size-avatar-size: var(--gog-chip-sm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-sm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-sm-remove-size)}:host(.gog-chip--md) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-md-font-size);--gog-chip-size-padding-block: var(--gog-chip-md-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-md-padding-inline);--gog-chip-size-gap: var(--gog-chip-md-gap);--gog-chip-size-avatar-size: var(--gog-chip-md-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-md-icon-size);--gog-chip-size-remove-size: var(--gog-chip-md-remove-size)}:host(.gog-chip--lg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-lg-font-size);--gog-chip-size-padding-block: var(--gog-chip-lg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-lg-padding-inline);--gog-chip-size-gap: var(--gog-chip-lg-gap);--gog-chip-size-avatar-size: var(--gog-chip-lg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-lg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-lg-remove-size)}:host(.gog-chip--slg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-slg-font-size);--gog-chip-size-padding-block: var(--gog-chip-slg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-slg-padding-inline);--gog-chip-size-gap: var(--gog-chip-slg-gap);--gog-chip-size-avatar-size: var(--gog-chip-slg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-slg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-slg-remove-size)}:host(.gog-chip--pill) .gog-chip__surface{border-radius:var(--gog-chip-pill-radius)}:host(.gog-chip--rounded) .gog-chip__surface{border-radius:var(--gog-chip-radius)}:host(.gog-chip--has-avatar) .gog-chip__surface{padding-inline-start:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-avatar-inset-ratio))}:host(.gog-chip--removable) .gog-chip__surface{padding-inline-end:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-remove-inset-ratio))}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-chip__surface{width:100%}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6943
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ChipComponent, isStandalone: true, selector: "gog-chip", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, removeAriaLabel: { classPropertyName: "removeAriaLabel", publicName: "removeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null }, avatarAlt: { classPropertyName: "avatarAlt", publicName: "avatarAlt", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", gogClick: "gogClick", gogRemove: "gogRemove" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div\r\n class=\"gog-chip__surface\"\r\n [attr.aria-label]=\"ariaLabel() || null\"\r\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n [attr.role]=\"isInteractive() ? 'button' : null\"\r\n [attr.aria-pressed]=\"ariaPressed()\"\r\n [attr.tabindex]=\"isInteractive() ? 0 : null\"\r\n [style.cursor]=\"isInteractive() ? 'pointer' : 'default'\"\r\n (click)=\"onChipClick($event)\"\r\n (keydown)=\"onKeydown($event)\"\r\n gogRipple\r\n [rippleDisabled]=\"!rippleEnabled()\"\r\n>\r\n @if (avatarUrl()) {\r\n <img class=\"gog-chip__avatar\" [src]=\"avatarUrl()\" [alt]=\"avatarAlt()\" />\r\n }\r\n\r\n @if (iconName()) {\r\n <gog-icon class=\"gog-chip__icon\" [ariaHidden]=\"true\" [name]=\"iconName() ?? 'check'\" />\r\n }\r\n\r\n <span class=\"gog-chip__content\">\r\n <ng-content></ng-content>\r\n </span>\r\n\r\n @if (removable() && !disabled()) {\r\n <button\r\n class=\"gog-chip__remove\"\r\n type=\"button\"\r\n [attr.aria-label]=\"removeAriaLabel()\"\r\n (click)=\"onRemoveClick($event)\"\r\n >\r\n <gog-icon name=\"close\" />\r\n </button>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;max-width:100%;contain:layout style}.gog-chip__surface{display:inline-flex;align-items:center;gap:var(--gog-chip-gap, var(--gog-chip-size-gap, var(--gog-chip-md-gap)));box-sizing:border-box;width:fit-content;max-width:100%;min-block-size:24px;overflow:hidden;padding:var(--gog-chip-padding-block, var(--gog-chip-size-padding-block, var(--gog-chip-md-padding-block))) var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline)));border:var(--gog-chip-border-width) var(--gog-chip-border-style) var(--gog-chip-border);border-radius:var(--gog-chip-radius);background-color:var(--gog-chip-bg);color:var(--gog-chip-color);font-family:var(--gog-chip-font-family);font-size:var(--gog-chip-font-size, var(--gog-chip-size-font-size, var(--gog-chip-md-font-size)));font-weight:var(--gog-chip-font-weight);line-height:var(--gog-chip-line-height);white-space:nowrap;-webkit-user-select:none;user-select:none}.gog-chip__surface:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-focus-ring-color);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--clickable) .gog-chip__surface:hover:not([aria-disabled=true]){background-color:var(--gog-chip-hover-bg)}:host(.gog-chip--clickable) .gog-chip__surface:active:not([aria-disabled=true]){background-color:var(--gog-chip-press-bg)}:host(.gog-chip--selected) .gog-chip__surface{box-shadow:var(--gog-chip-selected-shadow)}.gog-chip__surface[aria-disabled=true]{opacity:var(--gog-chip-disabled-opacity);pointer-events:none}.gog-chip__content{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:var(--gog-chip-line-height)}.gog-chip__avatar{width:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));height:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));border-radius:50%;object-fit:cover;flex-shrink:0}.gog-chip__icon{flex-shrink:0;font-size:var(--gog-chip-icon-size, var(--gog-chip-size-icon-size, var(--gog-chip-md-icon-size)))}.gog-chip__remove{display:inline-grid;place-items:center;width:calc(1em * var(--gog-chip-remove-scale));height:calc(1em * var(--gog-chip-remove-scale));padding:0;border:0;border-radius:50%;background:transparent;color:var(--gog-chip-remove-color);font-size:var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size)));cursor:pointer;flex-shrink:0;position:relative}.gog-chip__remove:before{content:\"\";position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;min-inline-size:24px;min-block-size:24px;inline-size:100%;block-size:100%}.gog-chip__remove:hover:not(:disabled){color:var(--gog-chip-remove-hover-color)}.gog-chip__remove:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-focus-ring-color);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--xsm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-xsm-font-size);--gog-chip-size-padding-block: var(--gog-chip-xsm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-xsm-padding-inline);--gog-chip-size-gap: var(--gog-chip-xsm-gap);--gog-chip-size-avatar-size: var(--gog-chip-xsm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-xsm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-xsm-remove-size)}:host(.gog-chip--sm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-sm-font-size);--gog-chip-size-padding-block: var(--gog-chip-sm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-sm-padding-inline);--gog-chip-size-gap: var(--gog-chip-sm-gap);--gog-chip-size-avatar-size: var(--gog-chip-sm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-sm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-sm-remove-size)}:host(.gog-chip--md) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-md-font-size);--gog-chip-size-padding-block: var(--gog-chip-md-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-md-padding-inline);--gog-chip-size-gap: var(--gog-chip-md-gap);--gog-chip-size-avatar-size: var(--gog-chip-md-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-md-icon-size);--gog-chip-size-remove-size: var(--gog-chip-md-remove-size)}:host(.gog-chip--lg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-lg-font-size);--gog-chip-size-padding-block: var(--gog-chip-lg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-lg-padding-inline);--gog-chip-size-gap: var(--gog-chip-lg-gap);--gog-chip-size-avatar-size: var(--gog-chip-lg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-lg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-lg-remove-size)}:host(.gog-chip--slg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-slg-font-size);--gog-chip-size-padding-block: var(--gog-chip-slg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-slg-padding-inline);--gog-chip-size-gap: var(--gog-chip-slg-gap);--gog-chip-size-avatar-size: var(--gog-chip-slg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-slg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-slg-remove-size)}:host(.gog-chip--pill) .gog-chip__surface{border-radius:var(--gog-chip-pill-radius)}:host(.gog-chip--rounded) .gog-chip__surface{border-radius:var(--gog-chip-radius)}:host(.gog-chip--has-avatar) .gog-chip__surface{padding-inline-start:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-avatar-inset-ratio))}:host(.gog-chip--removable) .gog-chip__surface{padding-inline-end:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-remove-inset-ratio))}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-chip__surface{width:100%}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6944
6944
  }
6945
6945
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChipComponent, decorators: [{
6946
6946
  type: Component,
6947
6947
  args: [{ selector: 'gog-chip', imports: [GogRippleDirective, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
6948
6948
  '[class]': 'hostClasses()',
6949
- }, template: "<div\r\n class=\"gog-chip__surface\"\r\n [attr.aria-label]=\"ariaLabel() || null\"\r\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n [attr.role]=\"isInteractive() ? 'button' : null\"\r\n [attr.aria-pressed]=\"ariaPressed()\"\r\n [attr.tabindex]=\"isInteractive() ? 0 : null\"\r\n [style.cursor]=\"isInteractive() ? 'pointer' : 'default'\"\r\n (click)=\"onChipClick($event)\"\r\n (keydown)=\"onKeydown($event)\"\r\n gogRipple\r\n [rippleDisabled]=\"!rippleEnabled()\"\r\n>\r\n @if (avatarUrl()) {\r\n <img class=\"gog-chip__avatar\" [src]=\"avatarUrl()\" [alt]=\"avatarAlt()\" />\r\n }\r\n\r\n @if (iconName()) {\r\n <gog-icon class=\"gog-chip__icon\" [ariaHidden]=\"true\" [name]=\"iconName() ?? 'check'\" />\r\n }\r\n\r\n <span class=\"gog-chip__content\">\r\n <ng-content></ng-content>\r\n </span>\r\n\r\n @if (removable() && !disabled()) {\r\n <button\r\n class=\"gog-chip__remove\"\r\n type=\"button\"\r\n [attr.aria-label]=\"removeAriaLabel()\"\r\n (click)=\"onRemoveClick($event)\"\r\n >\r\n <gog-icon name=\"close\" />\r\n </button>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;max-width:100%;contain:layout style}.gog-chip__surface{display:inline-flex;align-items:center;gap:var(--gog-chip-gap, var(--gog-chip-size-gap, var(--gog-chip-md-gap)));box-sizing:border-box;width:fit-content;max-width:100%;min-block-size:24px;overflow:hidden;padding:var(--gog-chip-padding-block, var(--gog-chip-size-padding-block, var(--gog-chip-md-padding-block))) var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline)));border:var(--gog-chip-border-width) var(--gog-chip-border-style) var(--gog-chip-border);border-radius:var(--gog-chip-radius);background-color:var(--gog-chip-bg);color:var(--gog-chip-color);font-family:var(--gog-chip-font-family);font-size:var(--gog-chip-font-size, var(--gog-chip-size-font-size, var(--gog-chip-md-font-size)));font-weight:var(--gog-chip-font-weight);line-height:var(--gog-chip-line-height);white-space:nowrap;-webkit-user-select:none;user-select:none}.gog-chip__surface:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--clickable) .gog-chip__surface:hover:not([aria-disabled=true]){background-color:var(--gog-chip-hover-bg)}:host(.gog-chip--clickable) .gog-chip__surface:active:not([aria-disabled=true]){background-color:var(--gog-chip-press-bg)}:host(.gog-chip--selected) .gog-chip__surface{box-shadow:var(--gog-chip-selected-shadow)}.gog-chip__surface[aria-disabled=true]{opacity:var(--gog-chip-disabled-opacity);pointer-events:none}.gog-chip__content{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:var(--gog-chip-line-height)}.gog-chip__avatar{width:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));height:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));border-radius:50%;object-fit:cover;flex-shrink:0}.gog-chip__icon{flex-shrink:0;font-size:var(--gog-chip-icon-size, var(--gog-chip-size-icon-size, var(--gog-chip-md-icon-size)))}.gog-chip__remove{display:inline-grid;place-items:center;width:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));height:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));padding:0;border:0;border-radius:50%;background:transparent;color:var(--gog-chip-remove-color);font-size:var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size)));cursor:pointer;flex-shrink:0;position:relative}.gog-chip__remove:before{content:\"\";position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;min-inline-size:24px;min-block-size:24px;inline-size:100%;block-size:100%}.gog-chip__remove:hover:not(:disabled){color:var(--gog-chip-remove-hover-color)}.gog-chip__remove:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--xsm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-xsm-font-size);--gog-chip-size-padding-block: var(--gog-chip-xsm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-xsm-padding-inline);--gog-chip-size-gap: var(--gog-chip-xsm-gap);--gog-chip-size-avatar-size: var(--gog-chip-xsm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-xsm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-xsm-remove-size)}:host(.gog-chip--sm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-sm-font-size);--gog-chip-size-padding-block: var(--gog-chip-sm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-sm-padding-inline);--gog-chip-size-gap: var(--gog-chip-sm-gap);--gog-chip-size-avatar-size: var(--gog-chip-sm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-sm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-sm-remove-size)}:host(.gog-chip--md) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-md-font-size);--gog-chip-size-padding-block: var(--gog-chip-md-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-md-padding-inline);--gog-chip-size-gap: var(--gog-chip-md-gap);--gog-chip-size-avatar-size: var(--gog-chip-md-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-md-icon-size);--gog-chip-size-remove-size: var(--gog-chip-md-remove-size)}:host(.gog-chip--lg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-lg-font-size);--gog-chip-size-padding-block: var(--gog-chip-lg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-lg-padding-inline);--gog-chip-size-gap: var(--gog-chip-lg-gap);--gog-chip-size-avatar-size: var(--gog-chip-lg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-lg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-lg-remove-size)}:host(.gog-chip--slg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-slg-font-size);--gog-chip-size-padding-block: var(--gog-chip-slg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-slg-padding-inline);--gog-chip-size-gap: var(--gog-chip-slg-gap);--gog-chip-size-avatar-size: var(--gog-chip-slg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-slg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-slg-remove-size)}:host(.gog-chip--pill) .gog-chip__surface{border-radius:var(--gog-chip-pill-radius)}:host(.gog-chip--rounded) .gog-chip__surface{border-radius:var(--gog-chip-radius)}:host(.gog-chip--has-avatar) .gog-chip__surface{padding-inline-start:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-avatar-inset-ratio))}:host(.gog-chip--removable) .gog-chip__surface{padding-inline-end:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-remove-inset-ratio))}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-chip__surface{width:100%}\n"] }]
6949
+ }, template: "<div\r\n class=\"gog-chip__surface\"\r\n [attr.aria-label]=\"ariaLabel() || null\"\r\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n [attr.role]=\"isInteractive() ? 'button' : null\"\r\n [attr.aria-pressed]=\"ariaPressed()\"\r\n [attr.tabindex]=\"isInteractive() ? 0 : null\"\r\n [style.cursor]=\"isInteractive() ? 'pointer' : 'default'\"\r\n (click)=\"onChipClick($event)\"\r\n (keydown)=\"onKeydown($event)\"\r\n gogRipple\r\n [rippleDisabled]=\"!rippleEnabled()\"\r\n>\r\n @if (avatarUrl()) {\r\n <img class=\"gog-chip__avatar\" [src]=\"avatarUrl()\" [alt]=\"avatarAlt()\" />\r\n }\r\n\r\n @if (iconName()) {\r\n <gog-icon class=\"gog-chip__icon\" [ariaHidden]=\"true\" [name]=\"iconName() ?? 'check'\" />\r\n }\r\n\r\n <span class=\"gog-chip__content\">\r\n <ng-content></ng-content>\r\n </span>\r\n\r\n @if (removable() && !disabled()) {\r\n <button\r\n class=\"gog-chip__remove\"\r\n type=\"button\"\r\n [attr.aria-label]=\"removeAriaLabel()\"\r\n (click)=\"onRemoveClick($event)\"\r\n >\r\n <gog-icon name=\"close\" />\r\n </button>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;max-width:100%;contain:layout style}.gog-chip__surface{display:inline-flex;align-items:center;gap:var(--gog-chip-gap, var(--gog-chip-size-gap, var(--gog-chip-md-gap)));box-sizing:border-box;width:fit-content;max-width:100%;min-block-size:24px;overflow:hidden;padding:var(--gog-chip-padding-block, var(--gog-chip-size-padding-block, var(--gog-chip-md-padding-block))) var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline)));border:var(--gog-chip-border-width) var(--gog-chip-border-style) var(--gog-chip-border);border-radius:var(--gog-chip-radius);background-color:var(--gog-chip-bg);color:var(--gog-chip-color);font-family:var(--gog-chip-font-family);font-size:var(--gog-chip-font-size, var(--gog-chip-size-font-size, var(--gog-chip-md-font-size)));font-weight:var(--gog-chip-font-weight);line-height:var(--gog-chip-line-height);white-space:nowrap;-webkit-user-select:none;user-select:none}.gog-chip__surface:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-focus-ring-color);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--clickable) .gog-chip__surface:hover:not([aria-disabled=true]){background-color:var(--gog-chip-hover-bg)}:host(.gog-chip--clickable) .gog-chip__surface:active:not([aria-disabled=true]){background-color:var(--gog-chip-press-bg)}:host(.gog-chip--selected) .gog-chip__surface{box-shadow:var(--gog-chip-selected-shadow)}.gog-chip__surface[aria-disabled=true]{opacity:var(--gog-chip-disabled-opacity);pointer-events:none}.gog-chip__content{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:var(--gog-chip-line-height)}.gog-chip__avatar{width:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));height:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));border-radius:50%;object-fit:cover;flex-shrink:0}.gog-chip__icon{flex-shrink:0;font-size:var(--gog-chip-icon-size, var(--gog-chip-size-icon-size, var(--gog-chip-md-icon-size)))}.gog-chip__remove{display:inline-grid;place-items:center;width:calc(1em * var(--gog-chip-remove-scale));height:calc(1em * var(--gog-chip-remove-scale));padding:0;border:0;border-radius:50%;background:transparent;color:var(--gog-chip-remove-color);font-size:var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size)));cursor:pointer;flex-shrink:0;position:relative}.gog-chip__remove:before{content:\"\";position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;min-inline-size:24px;min-block-size:24px;inline-size:100%;block-size:100%}.gog-chip__remove:hover:not(:disabled){color:var(--gog-chip-remove-hover-color)}.gog-chip__remove:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-focus-ring-color);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--xsm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-xsm-font-size);--gog-chip-size-padding-block: var(--gog-chip-xsm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-xsm-padding-inline);--gog-chip-size-gap: var(--gog-chip-xsm-gap);--gog-chip-size-avatar-size: var(--gog-chip-xsm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-xsm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-xsm-remove-size)}:host(.gog-chip--sm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-sm-font-size);--gog-chip-size-padding-block: var(--gog-chip-sm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-sm-padding-inline);--gog-chip-size-gap: var(--gog-chip-sm-gap);--gog-chip-size-avatar-size: var(--gog-chip-sm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-sm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-sm-remove-size)}:host(.gog-chip--md) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-md-font-size);--gog-chip-size-padding-block: var(--gog-chip-md-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-md-padding-inline);--gog-chip-size-gap: var(--gog-chip-md-gap);--gog-chip-size-avatar-size: var(--gog-chip-md-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-md-icon-size);--gog-chip-size-remove-size: var(--gog-chip-md-remove-size)}:host(.gog-chip--lg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-lg-font-size);--gog-chip-size-padding-block: var(--gog-chip-lg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-lg-padding-inline);--gog-chip-size-gap: var(--gog-chip-lg-gap);--gog-chip-size-avatar-size: var(--gog-chip-lg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-lg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-lg-remove-size)}:host(.gog-chip--slg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-slg-font-size);--gog-chip-size-padding-block: var(--gog-chip-slg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-slg-padding-inline);--gog-chip-size-gap: var(--gog-chip-slg-gap);--gog-chip-size-avatar-size: var(--gog-chip-slg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-slg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-slg-remove-size)}:host(.gog-chip--pill) .gog-chip__surface{border-radius:var(--gog-chip-pill-radius)}:host(.gog-chip--rounded) .gog-chip__surface{border-radius:var(--gog-chip-radius)}:host(.gog-chip--has-avatar) .gog-chip__surface{padding-inline-start:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-avatar-inset-ratio))}:host(.gog-chip--removable) .gog-chip__surface{padding-inline-end:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-remove-inset-ratio))}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-chip__surface{width:100%}\n"] }]
6950
6950
  }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], removeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeAriaLabel", required: false }] }], avatarUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarUrl", required: false }] }], avatarAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarAlt", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }], gogClick: [{ type: i0.Output, args: ["gogClick"] }], gogRemove: [{ type: i0.Output, args: ["gogRemove"] }] } });
6951
6951
 
6952
6952
  /**
@@ -7038,14 +7038,14 @@ class SelectComponent extends GogDropdownBase {
7038
7038
  this.close();
7039
7039
  }
7040
7040
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
7041
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SelectComponent, isStandalone: true, selector: "gog-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--gog-select-min-width": "minWidth()" } }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n context, which traps the panel's z-index inside it and lets whatever follows on the page\n paint over the open dropdown.\n-->\n<div\n class=\"gog-select\"\n [class.gog-select--clearable]=\"showClear()\"\n [class]=\"sizeClass()\"\n [class.gog-select--disabled]=\"isDisabled()\"\n [class.gog-select--open]=\"isOpen()\"\n [class.gog-select--float-in]=\"resolvedFloatLabel() === 'in'\"\n [class.gog-select--float-on]=\"resolvedFloatLabel() === 'on'\"\n [class.gog-select--float-over]=\"resolvedFloatLabel() === 'over'\"\n [class.gog-select--floated]=\"isFloatLabelFloated()\"\n>\n <!--\n Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\n not a labelable element, so `for` pointing at it is silently ignored by browsers and\n assistive tech alike.\n -->\n @if (label() && resolvedFloatLabel() === 'none') {\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\n }\n\n <div class=\"gog-select__field\">\n @if (label() && isFloatLabelActive()) {\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n <label class=\"gog-select__label gog-select__label--float\" [id]=\"labelId()\">{{\n label()\n }}</label>\n }\n <button\n type=\"button\"\n class=\"gog-select__control\"\n [id]=\"triggerId()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-describedby]=\"errorId()\"\n (click)=\"toggle()\"\n (focus)=\"onFocusIn()\"\n (blur)=\"onFocusOut()\"\n (keydown.enter)=\"toggle(); $event.preventDefault()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n (keydown.escape)=\"close()\"\n (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n >\n <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\n {{ selectedLabel() || effectivePlaceholder() }}\n </span>\n\n <span\n class=\"gog-select__chevron\"\n [class.gog-select__chevron--auto-rotate]=\"!chevronSlot()\"\n aria-hidden=\"true\"\n >\n <gog-icon [template]=\"chevronSlot()?.templateRef ?? null\" name=\"chevron-down\" />\n </span>\n </button>\n\n <!--\n A sibling of the trigger, not a child: `.gog-select__control` is a <button>, and nesting\n one button inside another is invalid HTML. It is positioned over the trigger's right edge\n by the stylesheet, which also reserves room for it so it never covers the value text.\n -->\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"gog-select__clear gog-inline-center\"\n [attr.aria-label]=\"resolvedClearLabel()\"\n (click)=\"clearValue($event)\"\n >\n <gog-icon name=\"close\" />\n </button>\n }\n\n @if (isOpen() && !resolvedAppendToBody()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n }\n </div>\n\n @if (hasError()) {\n <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\n {{ visibleError() }}\n </span>\n }\n</div>\n\n<!--\n One template for both render modes. When `appendToBody` is set it is stamped into\n <body> by the overlay, which is why the portal-only modifier and the resolved\n coordinates are applied conditionally: outside the component's subtree the panel can\n no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n <div\n [id]=\"listboxId()\"\n class=\"gog-select__dropdown\"\n [class.gog-select__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\n [class.gog-select__dropdown--portal]=\"resolvedAppendToBody()\"\n [class]=\"panelSizeClass()\"\n [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\n [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\n [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\n [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\n [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\n [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n (click)=\"$event.stopPropagation()\"\n >\n <!--\n Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\n focus moved between options via the arrow keys (roving-focus.ts), which already\n scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\n needed here.\n -->\n @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\n <div class=\"gog-select__filter gog-select__filter--top\">\n <input\n type=\"text\"\n class=\"gog-select__filter-input\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"filterQuery()\"\n (input)=\"onFilterInput($event)\"\n (click)=\"$event.stopPropagation()\"\n (keydown.escape)=\"close(); focusTrigger()\"\n />\n </div>\n }\n <gog-scroll\n size=\"thin\"\n [focusable]=\"false\"\n overscrollBehavior=\"contain\"\n class=\"gog-select__scroll\"\n >\n @if (visibleOptions().length === 0) {\n <p class=\"gog-select__empty\">{{ filterEmptyMessage() }}</p>\n }\n @for (option of visibleOptions(); track valueOf(option)) {\n <!--\n tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\n focus is moved between options with the arrow keys, not by tabbing through every\n one of them. Programmatic .focus() still works on a negative tabindex.\n -->\n <button\n type=\"button\"\n class=\"gog-select__option\"\n role=\"option\"\n tabindex=\"-1\"\n [attr.aria-selected]=\"isSelected(option)\"\n [attr.aria-disabled]=\"isOptionDisabled(option)\"\n [class.gog-select__option--selected]=\"isSelected(option)\"\n [class.gog-select__option--disabled]=\"isOptionDisabled(option)\"\n (click)=\"selectOption(option, $event)\"\n (keydown)=\"onOptionKeydown($event)\"\n gogRipple\n [rippleDisabled]=\"!rippleEnabled() || isOptionDisabled(option)\"\n >\n @if (optionSlot(); as slot) {\n <ng-container\n *ngTemplateOutlet=\"\n slot.templateRef;\n context: optionContext(option, isSelected(option))\n \"\n />\n } @else {\n <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\n @if (isSelected(option)) {\n <gog-icon name=\"check\" />\n }\n </span>\n <span class=\"gog-select__option-label\">{{ labelOf(option) }}</span>\n }\n </button>\n }\n </gog-scroll>\n @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\n <div class=\"gog-select__filter gog-select__filter--bottom\">\n <input\n type=\"text\"\n class=\"gog-select__filter-input\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"filterQuery()\"\n (input)=\"onFilterInput($event)\"\n (click)=\"$event.stopPropagation()\"\n (keydown.escape)=\"close(); focusTrigger()\"\n />\n </div>\n }\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:fit-content}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);line-height:var(--gog-select-label-line-height);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding-block:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-select-chevron-inset);display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron--auto-rotate{transition:transform var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--open .gog-select__chevron--auto-rotate{transform:rotate(180deg)}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-select-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow:hidden;box-shadow:var(--gog-select-panel-shadow)}.gog-select__scroll{flex:1;min-height:0}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover:not(.gog-select__option--disabled){background-color:var(--gog-select-option-hover-bg)}.gog-select__option:active:not(.gog-select__option--disabled){background-color:var(--gog-select-option-press-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);line-height:var(--gog-select-error-line-height);color:var(--gog-select-error-color)}.gog-select__label--float{position:absolute;inset-inline-start:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-select-placeholder-color);font-size:var(--gog-select-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-select-transition-duration) var(--gog-easing),font-size var(--gog-select-transition-duration) var(--gog-easing),color var(--gog-select-transition-duration) var(--gog-easing),top var(--gog-select-transition-duration) var(--gog-easing),background-color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--float-in,.gog-select--float-on{--gog-select-float-top-padding: calc(var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-select-float-label-reserve))}.gog-select--float-in .gog-select__control,.gog-select--float-on .gog-select__control{padding-top:var(--gog-select-float-top-padding)}.gog-select--float-in .gog-select__label--float,.gog-select--float-on .gog-select__label--float{top:var(--gog-select-float-top-padding);transform:none}.gog-select--float-in.gog-select--floated .gog-select__label--float{top:var(--gog-select-float-label-in-top);transform:translateY(0);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-on.gog-select--floated .gog-select__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);background-color:var(--gog-select-float-label-on-bg, var(--gog-select-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-select--float-over.gog-select--floated .gog-select__label--float{top:calc(-1 * var(--gog-select-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-over .gog-select__field{margin-top:var(--gog-select-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option,.gog-select__chevron--auto-rotate,.gog-select__label--float{transition:none}}.gog-select__clear{position:absolute;top:50%;inset-inline-end:var(--gog-select-chevron-inset);transform:translateY(-50%);width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-select-clear-radius);background:transparent;color:var(--gog-select-clear-color);line-height:var(--gog-select-clear-line-height);cursor:pointer;transition:color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__clear:hover{color:var(--gog-select-clear-hover-color)}.gog-select__clear:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__clear gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-clear-icon-ratio))}.gog-select--clearable .gog-select__control{padding-inline-end:calc(var(--gog-select-chevron-inset) + var(--gog-select-clear-gap) + var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))))}.gog-select__filter{position:sticky;top:0;z-index:1;padding:var(--gog-select-filter-padding);background:var(--gog-select-panel-bg)}.gog-select__filter-input{width:100%;padding:var(--gog-select-filter-input-padding-y) var(--gog-select-filter-input-padding-x);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-input-color);background:var(--gog-select-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-select-filter-input-border);border-radius:var(--gog-select-filter-input-radius);outline:none}.gog-select__filter-input:focus{border-color:var(--gog-select-focus-border)}.gog-select__empty{margin:0;padding:var(--gog-select-filter-empty-padding);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-empty-color);text-align:center}.gog-select__filter--top{border-bottom:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}.gog-select__filter--bottom{top:auto;bottom:0;border-top:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-select__control{min-width:var(--gog-select-min-width)}.gog-select__dropdown--portal{max-width:var(--gog-select-panel-max-width)}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack", "horizontalWheel"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7041
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SelectComponent, isStandalone: true, selector: "gog-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--gog-select-min-width": "minWidth()" } }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n paint over the open dropdown.\r\n-->\r\n<div\r\n class=\"gog-select\"\r\n [class.gog-select--clearable]=\"showClear()\"\r\n [class]=\"sizeClass()\"\r\n [class.gog-select--disabled]=\"isDisabled()\"\r\n [class.gog-select--open]=\"isOpen()\"\r\n [class.gog-select--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n [class.gog-select--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n [class.gog-select--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n [class.gog-select--floated]=\"isFloatLabelFloated()\"\r\n>\r\n <!--\r\n Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\r\n not a labelable element, so `for` pointing at it is silently ignored by browsers and\r\n assistive tech alike.\r\n -->\r\n @if (label() && resolvedFloatLabel() === 'none') {\r\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n }\r\n\r\n <div class=\"gog-select__field\">\r\n @if (label() && isFloatLabelActive()) {\r\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n <label class=\"gog-select__label gog-select__label--float\" [id]=\"labelId()\">{{\r\n label()\r\n }}</label>\r\n }\r\n <button\r\n type=\"button\"\r\n class=\"gog-select__control\"\r\n [id]=\"triggerId()\"\r\n [disabled]=\"isDisabled()\"\r\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n [attr.aria-controls]=\"listboxId()\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-haspopup]=\"'listbox'\"\r\n [attr.aria-invalid]=\"hasError()\"\r\n [attr.aria-describedby]=\"errorId()\"\r\n (click)=\"toggle()\"\r\n (focus)=\"onFocusIn()\"\r\n (blur)=\"onFocusOut()\"\r\n (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n (keydown.escape)=\"close()\"\r\n (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n >\r\n <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\r\n {{ selectedLabel() || effectivePlaceholder() }}\r\n </span>\r\n\r\n <span\r\n class=\"gog-select__chevron\"\r\n [class.gog-select__chevron--auto-rotate]=\"!chevronSlot()\"\r\n aria-hidden=\"true\"\r\n >\r\n <gog-icon [template]=\"chevronSlot()?.templateRef ?? null\" name=\"chevron-down\" />\r\n </span>\r\n </button>\r\n\r\n <!--\r\n A sibling of the trigger, not a child: `.gog-select__control` is a <button>, and nesting\r\n one button inside another is invalid HTML. It is positioned over the trigger's right edge\r\n by the stylesheet, which also reserves room for it so it never covers the value text.\r\n -->\r\n @if (showClear()) {\r\n <button\r\n type=\"button\"\r\n class=\"gog-select__clear gog-inline-center\"\r\n [attr.aria-label]=\"resolvedClearLabel()\"\r\n (click)=\"clearValue($event)\"\r\n >\r\n <gog-icon name=\"close\" />\r\n </button>\r\n }\r\n\r\n @if (isOpen() && !resolvedAppendToBody()) {\r\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n }\r\n </div>\r\n\r\n @if (hasError()) {\r\n <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n {{ visibleError() }}\r\n </span>\r\n }\r\n</div>\r\n\r\n<!--\r\n One template for both render modes. When `appendToBody` is set it is stamped into\r\n <body> by the overlay, which is why the portal-only modifier and the resolved\r\n coordinates are applied conditionally: outside the component's subtree the panel can\r\n no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n <div\r\n [id]=\"listboxId()\"\r\n class=\"gog-select__dropdown\"\r\n [class.gog-select__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n [class.gog-select__dropdown--portal]=\"resolvedAppendToBody()\"\r\n [class]=\"panelSizeClass()\"\r\n [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n role=\"listbox\"\r\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <!--\r\n Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n focus moved between options via the arrow keys (roving-focus.ts), which already\r\n scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n needed here.\r\n -->\r\n @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n <div class=\"gog-select__filter gog-select__filter--top\">\r\n <input\r\n type=\"text\"\r\n class=\"gog-select__filter-input\"\r\n [placeholder]=\"filterPlaceholder()\"\r\n [value]=\"filterQuery()\"\r\n (input)=\"onFilterInput($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown.escape)=\"close(); focusTrigger()\"\r\n />\r\n </div>\r\n }\r\n <gog-scroll\r\n size=\"thin\"\r\n [focusable]=\"false\"\r\n overscrollBehavior=\"contain\"\r\n class=\"gog-select__scroll\"\r\n >\r\n <div class=\"gog-select__options\">\r\n @if (visibleOptions().length === 0) {\r\n <p class=\"gog-select__empty\">{{ filterEmptyMessage() }}</p>\r\n }\r\n @for (option of visibleOptions(); track valueOf(option)) {\r\n <!--\r\n tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\r\n focus is moved between options with the arrow keys, not by tabbing through every\r\n one of them. Programmatic .focus() still works on a negative tabindex.\r\n -->\r\n <button\r\n type=\"button\"\r\n class=\"gog-select__option\"\r\n role=\"option\"\r\n tabindex=\"-1\"\r\n [attr.aria-selected]=\"isSelected(option)\"\r\n [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n [class.gog-select__option--selected]=\"isSelected(option)\"\r\n [class.gog-select__option--disabled]=\"isOptionDisabled(option)\"\r\n (click)=\"selectOption(option, $event)\"\r\n (keydown)=\"onOptionKeydown($event)\"\r\n gogRipple\r\n [rippleDisabled]=\"!rippleEnabled() || isOptionDisabled(option)\"\r\n >\r\n @if (optionSlot(); as slot) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n slot.templateRef;\r\n context: optionContext(option, isSelected(option))\r\n \"\r\n />\r\n } @else {\r\n <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\r\n @if (isSelected(option)) {\r\n <gog-icon name=\"check\" />\r\n }\r\n </span>\r\n <span class=\"gog-select__option-label\">{{ labelOf(option) }}</span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n </gog-scroll>\r\n @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n <div class=\"gog-select__filter gog-select__filter--bottom\">\r\n <input\r\n type=\"text\"\r\n class=\"gog-select__filter-input\"\r\n [placeholder]=\"filterPlaceholder()\"\r\n [value]=\"filterQuery()\"\r\n (input)=\"onFilterInput($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown.escape)=\"close(); focusTrigger()\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:fit-content}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);line-height:var(--gog-select-label-line-height);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding-block:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-select-chevron-inset);display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron--auto-rotate{transition:transform var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--open .gog-select__chevron--auto-rotate{transform:rotate(180deg)}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-select-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-panel-radius);max-height:var(--gog-select-panel-max-height);overflow:hidden;box-shadow:var(--gog-select-panel-shadow)}.gog-select__scroll{flex:1;min-height:0}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-select__options{display:flex;flex-direction:column;padding:var(--gog-select-options-padding)}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;border-radius:var(--gog-select-option-radius);transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover:not(.gog-select__option--disabled){background-color:var(--gog-select-option-hover-bg)}.gog-select__option:active:not(.gog-select__option--disabled){background-color:var(--gog-select-option-press-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);line-height:var(--gog-select-error-line-height);color:var(--gog-select-error-color)}.gog-select__label--float{position:absolute;inset-inline-start:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-select-placeholder-color);font-size:var(--gog-select-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-select-transition-duration) var(--gog-easing),font-size var(--gog-select-transition-duration) var(--gog-easing),color var(--gog-select-transition-duration) var(--gog-easing),top var(--gog-select-transition-duration) var(--gog-easing),background-color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--float-in,.gog-select--float-on{--gog-select-float-top-padding: calc(var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-select-float-label-reserve))}.gog-select--float-in .gog-select__control,.gog-select--float-on .gog-select__control{padding-top:var(--gog-select-float-top-padding)}.gog-select--float-in .gog-select__label--float,.gog-select--float-on .gog-select__label--float{top:var(--gog-select-float-top-padding);transform:none}.gog-select--float-in.gog-select--floated .gog-select__label--float{top:var(--gog-select-float-label-in-top);transform:translateY(0);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-on.gog-select--floated .gog-select__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);background-color:var(--gog-select-float-label-on-bg, var(--gog-select-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-select--float-over.gog-select--floated .gog-select__label--float{top:calc(-1 * var(--gog-select-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-over .gog-select__field{margin-top:var(--gog-select-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option,.gog-select__chevron--auto-rotate,.gog-select__label--float{transition:none}}.gog-select__clear{position:absolute;top:50%;inset-inline-end:var(--gog-select-chevron-inset);transform:translateY(-50%);width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-select-clear-radius);background:transparent;color:var(--gog-select-clear-color);line-height:var(--gog-select-clear-line-height);cursor:pointer;transition:color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__clear:hover{color:var(--gog-select-clear-hover-color)}.gog-select__clear:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__clear gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-clear-icon-ratio))}.gog-select--clearable .gog-select__control{padding-inline-end:calc(var(--gog-select-chevron-inset) + var(--gog-select-clear-gap) + var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))))}.gog-select__filter{position:sticky;top:0;z-index:1;padding:var(--gog-select-filter-padding);background:var(--gog-select-panel-bg)}.gog-select__filter-input{width:100%;padding:var(--gog-select-filter-input-padding-y) var(--gog-select-filter-input-padding-x);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-input-color);background:var(--gog-select-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-select-filter-input-border);border-radius:var(--gog-select-filter-input-radius);outline:none}.gog-select__filter-input:focus{border-color:var(--gog-select-focus-border)}.gog-select__empty{margin:0;padding:var(--gog-select-filter-empty-padding);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-empty-color);text-align:center}.gog-select__filter--top{border-bottom:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}.gog-select__filter--bottom{top:auto;bottom:0;border-top:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-select__control{min-width:var(--gog-select-min-width)}.gog-select__dropdown--portal{max-width:var(--gog-select-panel-max-width)}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack", "horizontalWheel"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7042
7042
  }
7043
7043
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, decorators: [{
7044
7044
  type: Component,
7045
7045
  args: [{ selector: 'gog-select', imports: [GogRippleDirective, IconComponent, NgTemplateOutlet, ScrollComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
7046
7046
  // Only bites when the control has opted out of full width; otherwise the container decides.
7047
7047
  '[style.--gog-select-min-width]': 'minWidth()',
7048
- }, template: "<!--\n Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n context, which traps the panel's z-index inside it and lets whatever follows on the page\n paint over the open dropdown.\n-->\n<div\n class=\"gog-select\"\n [class.gog-select--clearable]=\"showClear()\"\n [class]=\"sizeClass()\"\n [class.gog-select--disabled]=\"isDisabled()\"\n [class.gog-select--open]=\"isOpen()\"\n [class.gog-select--float-in]=\"resolvedFloatLabel() === 'in'\"\n [class.gog-select--float-on]=\"resolvedFloatLabel() === 'on'\"\n [class.gog-select--float-over]=\"resolvedFloatLabel() === 'over'\"\n [class.gog-select--floated]=\"isFloatLabelFloated()\"\n>\n <!--\n Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\n not a labelable element, so `for` pointing at it is silently ignored by browsers and\n assistive tech alike.\n -->\n @if (label() && resolvedFloatLabel() === 'none') {\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\n }\n\n <div class=\"gog-select__field\">\n @if (label() && isFloatLabelActive()) {\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n <label class=\"gog-select__label gog-select__label--float\" [id]=\"labelId()\">{{\n label()\n }}</label>\n }\n <button\n type=\"button\"\n class=\"gog-select__control\"\n [id]=\"triggerId()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-describedby]=\"errorId()\"\n (click)=\"toggle()\"\n (focus)=\"onFocusIn()\"\n (blur)=\"onFocusOut()\"\n (keydown.enter)=\"toggle(); $event.preventDefault()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n (keydown.escape)=\"close()\"\n (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n >\n <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\n {{ selectedLabel() || effectivePlaceholder() }}\n </span>\n\n <span\n class=\"gog-select__chevron\"\n [class.gog-select__chevron--auto-rotate]=\"!chevronSlot()\"\n aria-hidden=\"true\"\n >\n <gog-icon [template]=\"chevronSlot()?.templateRef ?? null\" name=\"chevron-down\" />\n </span>\n </button>\n\n <!--\n A sibling of the trigger, not a child: `.gog-select__control` is a <button>, and nesting\n one button inside another is invalid HTML. It is positioned over the trigger's right edge\n by the stylesheet, which also reserves room for it so it never covers the value text.\n -->\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"gog-select__clear gog-inline-center\"\n [attr.aria-label]=\"resolvedClearLabel()\"\n (click)=\"clearValue($event)\"\n >\n <gog-icon name=\"close\" />\n </button>\n }\n\n @if (isOpen() && !resolvedAppendToBody()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n }\n </div>\n\n @if (hasError()) {\n <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\n {{ visibleError() }}\n </span>\n }\n</div>\n\n<!--\n One template for both render modes. When `appendToBody` is set it is stamped into\n <body> by the overlay, which is why the portal-only modifier and the resolved\n coordinates are applied conditionally: outside the component's subtree the panel can\n no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n <div\n [id]=\"listboxId()\"\n class=\"gog-select__dropdown\"\n [class.gog-select__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\n [class.gog-select__dropdown--portal]=\"resolvedAppendToBody()\"\n [class]=\"panelSizeClass()\"\n [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\n [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\n [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\n [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\n [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\n [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n (click)=\"$event.stopPropagation()\"\n >\n <!--\n Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\n focus moved between options via the arrow keys (roving-focus.ts), which already\n scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\n needed here.\n -->\n @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\n <div class=\"gog-select__filter gog-select__filter--top\">\n <input\n type=\"text\"\n class=\"gog-select__filter-input\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"filterQuery()\"\n (input)=\"onFilterInput($event)\"\n (click)=\"$event.stopPropagation()\"\n (keydown.escape)=\"close(); focusTrigger()\"\n />\n </div>\n }\n <gog-scroll\n size=\"thin\"\n [focusable]=\"false\"\n overscrollBehavior=\"contain\"\n class=\"gog-select__scroll\"\n >\n @if (visibleOptions().length === 0) {\n <p class=\"gog-select__empty\">{{ filterEmptyMessage() }}</p>\n }\n @for (option of visibleOptions(); track valueOf(option)) {\n <!--\n tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\n focus is moved between options with the arrow keys, not by tabbing through every\n one of them. Programmatic .focus() still works on a negative tabindex.\n -->\n <button\n type=\"button\"\n class=\"gog-select__option\"\n role=\"option\"\n tabindex=\"-1\"\n [attr.aria-selected]=\"isSelected(option)\"\n [attr.aria-disabled]=\"isOptionDisabled(option)\"\n [class.gog-select__option--selected]=\"isSelected(option)\"\n [class.gog-select__option--disabled]=\"isOptionDisabled(option)\"\n (click)=\"selectOption(option, $event)\"\n (keydown)=\"onOptionKeydown($event)\"\n gogRipple\n [rippleDisabled]=\"!rippleEnabled() || isOptionDisabled(option)\"\n >\n @if (optionSlot(); as slot) {\n <ng-container\n *ngTemplateOutlet=\"\n slot.templateRef;\n context: optionContext(option, isSelected(option))\n \"\n />\n } @else {\n <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\n @if (isSelected(option)) {\n <gog-icon name=\"check\" />\n }\n </span>\n <span class=\"gog-select__option-label\">{{ labelOf(option) }}</span>\n }\n </button>\n }\n </gog-scroll>\n @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\n <div class=\"gog-select__filter gog-select__filter--bottom\">\n <input\n type=\"text\"\n class=\"gog-select__filter-input\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"filterQuery()\"\n (input)=\"onFilterInput($event)\"\n (click)=\"$event.stopPropagation()\"\n (keydown.escape)=\"close(); focusTrigger()\"\n />\n </div>\n }\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:fit-content}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);line-height:var(--gog-select-label-line-height);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding-block:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-select-chevron-inset);display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron--auto-rotate{transition:transform var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--open .gog-select__chevron--auto-rotate{transform:rotate(180deg)}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-select-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow:hidden;box-shadow:var(--gog-select-panel-shadow)}.gog-select__scroll{flex:1;min-height:0}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover:not(.gog-select__option--disabled){background-color:var(--gog-select-option-hover-bg)}.gog-select__option:active:not(.gog-select__option--disabled){background-color:var(--gog-select-option-press-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);line-height:var(--gog-select-error-line-height);color:var(--gog-select-error-color)}.gog-select__label--float{position:absolute;inset-inline-start:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-select-placeholder-color);font-size:var(--gog-select-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-select-transition-duration) var(--gog-easing),font-size var(--gog-select-transition-duration) var(--gog-easing),color var(--gog-select-transition-duration) var(--gog-easing),top var(--gog-select-transition-duration) var(--gog-easing),background-color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--float-in,.gog-select--float-on{--gog-select-float-top-padding: calc(var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-select-float-label-reserve))}.gog-select--float-in .gog-select__control,.gog-select--float-on .gog-select__control{padding-top:var(--gog-select-float-top-padding)}.gog-select--float-in .gog-select__label--float,.gog-select--float-on .gog-select__label--float{top:var(--gog-select-float-top-padding);transform:none}.gog-select--float-in.gog-select--floated .gog-select__label--float{top:var(--gog-select-float-label-in-top);transform:translateY(0);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-on.gog-select--floated .gog-select__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);background-color:var(--gog-select-float-label-on-bg, var(--gog-select-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-select--float-over.gog-select--floated .gog-select__label--float{top:calc(-1 * var(--gog-select-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-over .gog-select__field{margin-top:var(--gog-select-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option,.gog-select__chevron--auto-rotate,.gog-select__label--float{transition:none}}.gog-select__clear{position:absolute;top:50%;inset-inline-end:var(--gog-select-chevron-inset);transform:translateY(-50%);width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-select-clear-radius);background:transparent;color:var(--gog-select-clear-color);line-height:var(--gog-select-clear-line-height);cursor:pointer;transition:color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__clear:hover{color:var(--gog-select-clear-hover-color)}.gog-select__clear:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__clear gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-clear-icon-ratio))}.gog-select--clearable .gog-select__control{padding-inline-end:calc(var(--gog-select-chevron-inset) + var(--gog-select-clear-gap) + var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))))}.gog-select__filter{position:sticky;top:0;z-index:1;padding:var(--gog-select-filter-padding);background:var(--gog-select-panel-bg)}.gog-select__filter-input{width:100%;padding:var(--gog-select-filter-input-padding-y) var(--gog-select-filter-input-padding-x);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-input-color);background:var(--gog-select-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-select-filter-input-border);border-radius:var(--gog-select-filter-input-radius);outline:none}.gog-select__filter-input:focus{border-color:var(--gog-select-focus-border)}.gog-select__empty{margin:0;padding:var(--gog-select-filter-empty-padding);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-empty-color);text-align:center}.gog-select__filter--top{border-bottom:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}.gog-select__filter--bottom{top:auto;bottom:0;border-top:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-select__control{min-width:var(--gog-select-min-width)}.gog-select__dropdown--portal{max-width:var(--gog-select-panel-max-width)}\n"] }]
7048
+ }, template: "<!--\r\n Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n paint over the open dropdown.\r\n-->\r\n<div\r\n class=\"gog-select\"\r\n [class.gog-select--clearable]=\"showClear()\"\r\n [class]=\"sizeClass()\"\r\n [class.gog-select--disabled]=\"isDisabled()\"\r\n [class.gog-select--open]=\"isOpen()\"\r\n [class.gog-select--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n [class.gog-select--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n [class.gog-select--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n [class.gog-select--floated]=\"isFloatLabelFloated()\"\r\n>\r\n <!--\r\n Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\r\n not a labelable element, so `for` pointing at it is silently ignored by browsers and\r\n assistive tech alike.\r\n -->\r\n @if (label() && resolvedFloatLabel() === 'none') {\r\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n }\r\n\r\n <div class=\"gog-select__field\">\r\n @if (label() && isFloatLabelActive()) {\r\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n <label class=\"gog-select__label gog-select__label--float\" [id]=\"labelId()\">{{\r\n label()\r\n }}</label>\r\n }\r\n <button\r\n type=\"button\"\r\n class=\"gog-select__control\"\r\n [id]=\"triggerId()\"\r\n [disabled]=\"isDisabled()\"\r\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n [attr.aria-controls]=\"listboxId()\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-haspopup]=\"'listbox'\"\r\n [attr.aria-invalid]=\"hasError()\"\r\n [attr.aria-describedby]=\"errorId()\"\r\n (click)=\"toggle()\"\r\n (focus)=\"onFocusIn()\"\r\n (blur)=\"onFocusOut()\"\r\n (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n (keydown.escape)=\"close()\"\r\n (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n >\r\n <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\r\n {{ selectedLabel() || effectivePlaceholder() }}\r\n </span>\r\n\r\n <span\r\n class=\"gog-select__chevron\"\r\n [class.gog-select__chevron--auto-rotate]=\"!chevronSlot()\"\r\n aria-hidden=\"true\"\r\n >\r\n <gog-icon [template]=\"chevronSlot()?.templateRef ?? null\" name=\"chevron-down\" />\r\n </span>\r\n </button>\r\n\r\n <!--\r\n A sibling of the trigger, not a child: `.gog-select__control` is a <button>, and nesting\r\n one button inside another is invalid HTML. It is positioned over the trigger's right edge\r\n by the stylesheet, which also reserves room for it so it never covers the value text.\r\n -->\r\n @if (showClear()) {\r\n <button\r\n type=\"button\"\r\n class=\"gog-select__clear gog-inline-center\"\r\n [attr.aria-label]=\"resolvedClearLabel()\"\r\n (click)=\"clearValue($event)\"\r\n >\r\n <gog-icon name=\"close\" />\r\n </button>\r\n }\r\n\r\n @if (isOpen() && !resolvedAppendToBody()) {\r\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n }\r\n </div>\r\n\r\n @if (hasError()) {\r\n <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n {{ visibleError() }}\r\n </span>\r\n }\r\n</div>\r\n\r\n<!--\r\n One template for both render modes. When `appendToBody` is set it is stamped into\r\n <body> by the overlay, which is why the portal-only modifier and the resolved\r\n coordinates are applied conditionally: outside the component's subtree the panel can\r\n no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n <div\r\n [id]=\"listboxId()\"\r\n class=\"gog-select__dropdown\"\r\n [class.gog-select__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n [class.gog-select__dropdown--portal]=\"resolvedAppendToBody()\"\r\n [class]=\"panelSizeClass()\"\r\n [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n role=\"listbox\"\r\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <!--\r\n Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n focus moved between options via the arrow keys (roving-focus.ts), which already\r\n scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n needed here.\r\n -->\r\n @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n <div class=\"gog-select__filter gog-select__filter--top\">\r\n <input\r\n type=\"text\"\r\n class=\"gog-select__filter-input\"\r\n [placeholder]=\"filterPlaceholder()\"\r\n [value]=\"filterQuery()\"\r\n (input)=\"onFilterInput($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown.escape)=\"close(); focusTrigger()\"\r\n />\r\n </div>\r\n }\r\n <gog-scroll\r\n size=\"thin\"\r\n [focusable]=\"false\"\r\n overscrollBehavior=\"contain\"\r\n class=\"gog-select__scroll\"\r\n >\r\n <div class=\"gog-select__options\">\r\n @if (visibleOptions().length === 0) {\r\n <p class=\"gog-select__empty\">{{ filterEmptyMessage() }}</p>\r\n }\r\n @for (option of visibleOptions(); track valueOf(option)) {\r\n <!--\r\n tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\r\n focus is moved between options with the arrow keys, not by tabbing through every\r\n one of them. Programmatic .focus() still works on a negative tabindex.\r\n -->\r\n <button\r\n type=\"button\"\r\n class=\"gog-select__option\"\r\n role=\"option\"\r\n tabindex=\"-1\"\r\n [attr.aria-selected]=\"isSelected(option)\"\r\n [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n [class.gog-select__option--selected]=\"isSelected(option)\"\r\n [class.gog-select__option--disabled]=\"isOptionDisabled(option)\"\r\n (click)=\"selectOption(option, $event)\"\r\n (keydown)=\"onOptionKeydown($event)\"\r\n gogRipple\r\n [rippleDisabled]=\"!rippleEnabled() || isOptionDisabled(option)\"\r\n >\r\n @if (optionSlot(); as slot) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n slot.templateRef;\r\n context: optionContext(option, isSelected(option))\r\n \"\r\n />\r\n } @else {\r\n <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\r\n @if (isSelected(option)) {\r\n <gog-icon name=\"check\" />\r\n }\r\n </span>\r\n <span class=\"gog-select__option-label\">{{ labelOf(option) }}</span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n </gog-scroll>\r\n @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n <div class=\"gog-select__filter gog-select__filter--bottom\">\r\n <input\r\n type=\"text\"\r\n class=\"gog-select__filter-input\"\r\n [placeholder]=\"filterPlaceholder()\"\r\n [value]=\"filterQuery()\"\r\n (input)=\"onFilterInput($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown.escape)=\"close(); focusTrigger()\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:fit-content}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);line-height:var(--gog-select-label-line-height);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding-block:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-select-chevron-inset);display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron--auto-rotate{transition:transform var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--open .gog-select__chevron--auto-rotate{transform:rotate(180deg)}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-select-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-panel-radius);max-height:var(--gog-select-panel-max-height);overflow:hidden;box-shadow:var(--gog-select-panel-shadow)}.gog-select__scroll{flex:1;min-height:0}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-select__options{display:flex;flex-direction:column;padding:var(--gog-select-options-padding)}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;border-radius:var(--gog-select-option-radius);transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover:not(.gog-select__option--disabled){background-color:var(--gog-select-option-hover-bg)}.gog-select__option:active:not(.gog-select__option--disabled){background-color:var(--gog-select-option-press-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);line-height:var(--gog-select-error-line-height);color:var(--gog-select-error-color)}.gog-select__label--float{position:absolute;inset-inline-start:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-select-placeholder-color);font-size:var(--gog-select-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-select-transition-duration) var(--gog-easing),font-size var(--gog-select-transition-duration) var(--gog-easing),color var(--gog-select-transition-duration) var(--gog-easing),top var(--gog-select-transition-duration) var(--gog-easing),background-color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--float-in,.gog-select--float-on{--gog-select-float-top-padding: calc(var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-select-float-label-reserve))}.gog-select--float-in .gog-select__control,.gog-select--float-on .gog-select__control{padding-top:var(--gog-select-float-top-padding)}.gog-select--float-in .gog-select__label--float,.gog-select--float-on .gog-select__label--float{top:var(--gog-select-float-top-padding);transform:none}.gog-select--float-in.gog-select--floated .gog-select__label--float{top:var(--gog-select-float-label-in-top);transform:translateY(0);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-on.gog-select--floated .gog-select__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);background-color:var(--gog-select-float-label-on-bg, var(--gog-select-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-select--float-over.gog-select--floated .gog-select__label--float{top:calc(-1 * var(--gog-select-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-over .gog-select__field{margin-top:var(--gog-select-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option,.gog-select__chevron--auto-rotate,.gog-select__label--float{transition:none}}.gog-select__clear{position:absolute;top:50%;inset-inline-end:var(--gog-select-chevron-inset);transform:translateY(-50%);width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-select-clear-radius);background:transparent;color:var(--gog-select-clear-color);line-height:var(--gog-select-clear-line-height);cursor:pointer;transition:color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__clear:hover{color:var(--gog-select-clear-hover-color)}.gog-select__clear:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__clear gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-clear-icon-ratio))}.gog-select--clearable .gog-select__control{padding-inline-end:calc(var(--gog-select-chevron-inset) + var(--gog-select-clear-gap) + var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))))}.gog-select__filter{position:sticky;top:0;z-index:1;padding:var(--gog-select-filter-padding);background:var(--gog-select-panel-bg)}.gog-select__filter-input{width:100%;padding:var(--gog-select-filter-input-padding-y) var(--gog-select-filter-input-padding-x);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-input-color);background:var(--gog-select-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-select-filter-input-border);border-radius:var(--gog-select-filter-input-radius);outline:none}.gog-select__filter-input:focus{border-color:var(--gog-select-focus-border)}.gog-select__empty{margin:0;padding:var(--gog-select-filter-empty-padding);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-empty-color);text-align:center}.gog-select__filter--top{border-bottom:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}.gog-select__filter--bottom{top:auto;bottom:0;border-top:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-select__control{min-width:var(--gog-select-min-width)}.gog-select__dropdown--portal{max-width:var(--gog-select-panel-max-width)}\n"] }]
7049
7049
  }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTpl', { isSignal: true }] }] } });
7050
7050
 
7051
7051
  const DEFAULT_GAP$2 = 4;
@@ -8116,7 +8116,7 @@ class MultiselectComponent extends GogDropdownBase {
8116
8116
  return this.showControls() ? CONTROLS_ROW_HEIGHT : 0;
8117
8117
  }
8118
8118
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
8119
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiselectComponent, isStandalone: true, selector: "gog-multiselect", inputs: { showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, clearAllLabel: { classPropertyName: "clearAllLabel", publicName: "clearAllLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--gog-multiselect-min-width": "minWidth()" } }, queries: [{ propertyName: "clearIconSlot", first: true, predicate: GogMultiselectClearIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }, { propertyName: "valueRef", first: true, predicate: ["valueEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n context, which traps the panel's z-index inside it and lets whatever follows on the page\n paint over the open dropdown.\n-->\n<div\n class=\"gog-ms-wrapper\"\n [class]=\"sizeClass()\"\n [class.gog-ms-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\n [class.gog-ms-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\n [class.gog-ms-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\n [class.gog-ms-wrapper--floated]=\"isFloatLabelFloated()\"\n>\n <!--\n Associated with aria-labelledby rather than `for`: the trigger is a div with\n role=\"combobox\", not a labelable element. Without this the trigger had no accessible\n name at all whenever `label` was set, because that also suppresses the aria-label.\n -->\n @if (label() && resolvedFloatLabel() === 'none') {\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\n }\n\n <div\n [gogTooltip]=\"summary().hidden > 0 ? selectedListTpl : null\"\n class=\"gog-ms\"\n role=\"combobox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-disabled]=\"isDisabled()\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n [class.gog-ms--open]=\"isOpen()\"\n [class.gog-ms--disabled]=\"isDisabled()\"\n [class.gog-ms--error]=\"hasError()\"\n (click)=\"toggle()\"\n (focus)=\"onFocusIn()\"\n (blur)=\"onFocusOut()\"\n (keydown.enter)=\"toggle(); $event.preventDefault()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n (keydown.escape)=\"close()\"\n (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n >\n @if (label() && isFloatLabelActive()) {\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n <label class=\"gog-ms__label gog-ms__label--float\" [id]=\"labelId()\">{{ label() }}</label>\n }\n <span #valueEl class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\n {{ summary().text || effectivePlaceholder() }}\n </span>\n <!--\n Only what fits is shown; the rest is collapsed into a count. The tooltip is the way to read\n the whole selection back, so it is bound only while something is actually hidden.\n -->\n @if (summary().hidden > 0) {\n <span class=\"gog-ms__overflow\" aria-hidden=\"true\">+{{ summary().hidden }}</span>\n }\n\n <span class=\"gog-ms__actions\">\n <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\n <gog-icon\n [template]=\"chevronSlot()?.templateRef ?? null\"\n [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\n />\n </span>\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"gog-ms__clear gog-inline-center\"\n (click)=\"clearValue($event)\"\n [attr.aria-label]=\"resolvedClearLabel()\"\n >\n <gog-icon [template]=\"clearIconSlot()?.templateRef ?? null\" name=\"close\" />\n </button>\n }\n </span>\n </div>\n\n @if (isOpen() && !resolvedAppendToBody()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n }\n\n @if (visibleError()) {\n <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\n }\n</div>\n\n<!--\n One template for both render modes. When `appendToBody` is set it is stamped into\n <body> by the overlay, which is why the portal-only modifier and the resolved\n coordinates are applied conditionally: outside the component's subtree the panel can\n no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n <div\n [id]=\"listboxId()\"\n class=\"gog-ms__dropdown\"\n [class.gog-ms__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\n [class.gog-ms__dropdown--portal]=\"resolvedAppendToBody()\"\n [class]=\"panelSizeClass()\"\n [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\n [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\n [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\n [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\n [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\n [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (showControls() && controlsPosition() === 'top') {\n <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n }\n <!--\n Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\n focus moved between options via the arrow keys (roving-focus.ts), which already\n scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\n needed here.\n -->\n @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\n <div class=\"gog-ms__filter gog-ms__filter--top\">\n <input\n type=\"text\"\n class=\"gog-ms__filter-input\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"filterQuery()\"\n (input)=\"onFilterInput($event)\"\n (click)=\"$event.stopPropagation()\"\n (keydown.escape)=\"close(); focusTrigger()\"\n />\n </div>\n }\n <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-ms__scroll\">\n <div class=\"gog-ms__options\">\n @if (visibleOptions().length === 0) {\n <p class=\"gog-ms__empty\">{{ filterEmptyMessage() }}</p>\n }\n @for (option of visibleOptions(); track valueOf(option)) {\n <!--\n tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\n expects: focus moves between options with the arrow keys, not by tabbing\n through every one. Programmatic .focus() still works on a negative tabindex.\n -->\n <button\n type=\"button\"\n class=\"gog-ms__option\"\n role=\"option\"\n tabindex=\"-1\"\n [attr.aria-selected]=\"isSelected(option)\"\n [attr.aria-disabled]=\"isOptionDisabled(option)\"\n [class.gog-ms__option--selected]=\"isSelected(option)\"\n [class.gog-ms__option--disabled]=\"isOptionDisabled(option)\"\n (click)=\"toggleOption(option, $event)\"\n (keydown)=\"onOptionKeydown($event)\"\n gogRipple\n [rippleDisabled]=\"!rippleEnabled() || isOptionDisabled(option)\"\n >\n @if (optionSlot(); as slot) {\n <ng-container\n *ngTemplateOutlet=\"\n slot.templateRef;\n context: optionContext(option, isSelected(option))\n \"\n />\n } @else {\n <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\n <gog-icon [name]=\"isSelected(option) ? 'checkbox-checked' : 'checkbox'\" />\n </span>\n {{ labelOf(option) }}\n }\n </button>\n }\n </div>\n </gog-scroll>\n @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\n <div class=\"gog-ms__filter gog-ms__filter--bottom\">\n <input\n type=\"text\"\n class=\"gog-ms__filter-input\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"filterQuery()\"\n (input)=\"onFilterInput($event)\"\n (click)=\"$event.stopPropagation()\"\n (keydown.escape)=\"close(); focusTrigger()\"\n />\n </div>\n }\n @if (showControls() && controlsPosition() === 'bottom') {\n <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n }\n </div>\n</ng-template>\n\n<ng-template #controlsRowTpl>\n <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\n <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">{{\n resolvedSelectAllLabel()\n }}</gog-button>\n <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">{{\n resolvedClearAllLabel()\n }}</gog-button>\n </div>\n</ng-template>\n\n<!-- Full selection, shown as a tooltip when the trigger can only fit part of it. -->\n<ng-template #selectedListTpl>\n <ul class=\"gog-ms__tooltip-list\">\n @for (label of selectedLabels(); track label) {\n <li>{{ label }}</li>\n }\n </ul>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-multiselect-gap);position:relative;width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-ms-wrapper{width:fit-content}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-multiselect-size-padding-y: var(--gog-field-xsm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-xsm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-multiselect-size-padding-y: var(--gog-field-sm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-sm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-multiselect-size-padding-y: var(--gog-field-lg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-lg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-multiselect-size-padding-y: var(--gog-field-slg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-slg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-multiselect-label-font-family);font-size:var(--gog-multiselect-label-font-size);line-height:var(--gog-multiselect-label-line-height);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);cursor:pointer}.gog-ms{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-multiselect-field-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border);border-radius:var(--gog-multiselect-radius);color:var(--gog-multiselect-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-multiselect-transition-duration) var(--gog-easing),box-shadow var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-multiselect-focus-border)}.gog-ms:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-multiselect-border-color);box-shadow:var(--gog-multiselect-focus-glow)}.gog-ms--disabled{opacity:var(--gog-multiselect-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-multiselect-error-color)}.gog-ms__value{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));flex:1;align-self:baseline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-multiselect-value-color)}.gog-ms__value--placeholder{color:var(--gog-multiselect-placeholder-color)}.gog-ms{padding-inline-end:var(--gog-multiselect-actions-inset)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-multiselect-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-multiselect-clear-radius);background:transparent;color:var(--gog-multiselect-placeholder-color);line-height:var(--gog-multiselect-clear-line-height);cursor:pointer;transition:color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-multiselect-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-multiselect-border-color);transition:transform var(--gog-multiselect-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-multiselect-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-multiselect-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-multiselect-panel-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-panel-border);border-radius:var(--gog-multiselect-radius);max-height:var(--gog-multiselect-panel-max-height);overflow:hidden;box-shadow:var(--gog-multiselect-panel-shadow)}.gog-ms__scroll{flex:1;min-height:0}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-multiselect-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-ms__controls{flex-shrink:0;display:flex;gap:var(--gog-multiselect-controls-gap);padding:var(--gog-multiselect-controls-padding);background-color:var(--gog-multiselect-panel-bg);border-bottom:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__controls--bottom{border-bottom:0;border-top:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-multiselect-options-padding);gap:var(--gog-multiselect-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-multiselect-option-gap-inline);padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-multiselect-option-radius);transition:background-color var(--gog-multiselect-option-transition-duration) var(--gog-easing);color:var(--gog-multiselect-option-color)}.gog-ms__option--disabled{opacity:var(--gog-multiselect-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover:not(.gog-ms__option--disabled){background-color:var(--gog-multiselect-option-hover-bg)}.gog-ms__option:active:not(.gog-ms__option--disabled){background-color:var(--gog-multiselect-option-press-bg)}.gog-ms__option--selected{color:var(--gog-multiselect-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:calc(var(--gog-multiselect-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));height:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-icon-ratio));color:var(--gog-multiselect-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-multiselect-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-error-font-size);line-height:var(--gog-multiselect-error-line-height);color:var(--gog-multiselect-error-color);margin-top:var(--gog-multiselect-error-offset)}.gog-ms__label--float{position:absolute;inset-inline-start:var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-multiselect-placeholder-color);font-size:var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-multiselect-transition-duration) var(--gog-easing),font-size var(--gog-multiselect-transition-duration) var(--gog-easing),color var(--gog-multiselect-transition-duration) var(--gog-easing),top var(--gog-multiselect-transition-duration) var(--gog-easing),background-color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms-wrapper--float-in,.gog-ms-wrapper--float-on{--gog-multiselect-float-top-padding: calc(var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-multiselect-float-label-reserve))}.gog-ms-wrapper--float-in .gog-ms,.gog-ms-wrapper--float-on .gog-ms{padding-top:var(--gog-multiselect-float-top-padding)}.gog-ms-wrapper--float-in .gog-ms__label--float,.gog-ms-wrapper--float-on .gog-ms__label--float{top:var(--gog-multiselect-float-top-padding);transform:none}.gog-ms-wrapper--float-in.gog-ms-wrapper--floated .gog-ms__label--float{top:var(--gog-multiselect-float-label-in-top);transform:translateY(0);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-on.gog-ms-wrapper--floated .gog-ms__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);background-color:var(--gog-multiselect-float-label-on-bg, var(--gog-multiselect-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-ms-wrapper--float-over.gog-ms-wrapper--floated .gog-ms__label--float{top:calc(-1 * var(--gog-multiselect-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-over .gog-ms{margin-top:var(--gog-multiselect-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark,.gog-ms__label--float{transition:none}}.gog-ms__filter{position:sticky;top:0;z-index:1;padding:var(--gog-multiselect-filter-padding);background:var(--gog-multiselect-panel-bg)}.gog-ms__filter-input{width:100%;padding:var(--gog-multiselect-filter-input-padding-y) var(--gog-multiselect-filter-input-padding-x);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-input-color);background:var(--gog-multiselect-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-multiselect-filter-input-border);border-radius:var(--gog-multiselect-filter-input-radius);outline:none}.gog-ms__filter-input:focus{border-color:var(--gog-multiselect-focus-border)}.gog-ms__empty{margin:0;padding:var(--gog-multiselect-filter-empty-padding);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-empty-color);text-align:center}.gog-ms__filter--top{border-bottom:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}.gog-ms__filter--bottom{top:auto;bottom:0;border-top:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-ms{min-width:var(--gog-multiselect-min-width)}.gog-ms__dropdown--portal{max-width:var(--gog-multiselect-panel-max-width)}.gog-ms__overflow{flex-shrink:0;align-self:baseline;margin-inline-start:var(--gog-multiselect-overflow-gap);font-size:var(--gog-multiselect-overflow-font-size);line-height:var(--gog-multiselect-overflow-line-height);color:var(--gog-multiselect-overflow-color)}.gog-ms__tooltip-list{margin:0;padding-inline-start:1.1em;text-align:start}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "severity", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel", "ariaPressed", "ariaExpanded", "ariaControls", "ariaHasPopup"], outputs: ["gogClick"] }, { kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack", "horizontalWheel"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { kind: "directive", type: GogTooltipDirective, selector: "[gogTooltip]", inputs: ["gogTooltip", "gogTooltipPosition", "gogTooltipShowDelay", "gogTooltipHideDelay", "gogTooltipDisabled", "gogTooltipClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
8119
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiselectComponent, isStandalone: true, selector: "gog-multiselect", inputs: { showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, clearAllLabel: { classPropertyName: "clearAllLabel", publicName: "clearAllLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--gog-multiselect-min-width": "minWidth()" } }, queries: [{ propertyName: "clearIconSlot", first: true, predicate: GogMultiselectClearIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }, { propertyName: "valueRef", first: true, predicate: ["valueEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n context, which traps the panel's z-index inside it and lets whatever follows on the page\n paint over the open dropdown.\n-->\n<div\n class=\"gog-ms-wrapper\"\n [class]=\"sizeClass()\"\n [class.gog-ms-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\n [class.gog-ms-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\n [class.gog-ms-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\n [class.gog-ms-wrapper--floated]=\"isFloatLabelFloated()\"\n>\n <!--\n Associated with aria-labelledby rather than `for`: the trigger is a div with\n role=\"combobox\", not a labelable element. Without this the trigger had no accessible\n name at all whenever `label` was set, because that also suppresses the aria-label.\n -->\n @if (label() && resolvedFloatLabel() === 'none') {\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\n }\n\n <div\n [gogTooltip]=\"summary().hidden > 0 ? selectedListTpl : null\"\n class=\"gog-ms\"\n role=\"combobox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-disabled]=\"isDisabled()\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n [class.gog-ms--open]=\"isOpen()\"\n [class.gog-ms--disabled]=\"isDisabled()\"\n [class.gog-ms--error]=\"hasError()\"\n (click)=\"toggle()\"\n (focus)=\"onFocusIn()\"\n (blur)=\"onFocusOut()\"\n (keydown.enter)=\"toggle(); $event.preventDefault()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n (keydown.escape)=\"close()\"\n (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n >\n @if (label() && isFloatLabelActive()) {\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n <label class=\"gog-ms__label gog-ms__label--float\" [id]=\"labelId()\">{{ label() }}</label>\n }\n <span #valueEl class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\n {{ summary().text || effectivePlaceholder() }}\n </span>\n <!--\n Only what fits is shown; the rest is collapsed into a count. The tooltip is the way to read\n the whole selection back, so it is bound only while something is actually hidden.\n -->\n @if (summary().hidden > 0) {\n <span class=\"gog-ms__overflow\" aria-hidden=\"true\">+{{ summary().hidden }}</span>\n }\n\n <span class=\"gog-ms__actions\">\n <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\n <gog-icon\n [template]=\"chevronSlot()?.templateRef ?? null\"\n [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\n />\n </span>\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"gog-ms__clear gog-inline-center\"\n (click)=\"clearValue($event)\"\n [attr.aria-label]=\"resolvedClearLabel()\"\n >\n <gog-icon [template]=\"clearIconSlot()?.templateRef ?? null\" name=\"close\" />\n </button>\n }\n </span>\n </div>\n\n @if (isOpen() && !resolvedAppendToBody()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n }\n\n @if (visibleError()) {\n <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\n }\n</div>\n\n<!--\n One template for both render modes. When `appendToBody` is set it is stamped into\n <body> by the overlay, which is why the portal-only modifier and the resolved\n coordinates are applied conditionally: outside the component's subtree the panel can\n no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n <div\n [id]=\"listboxId()\"\n class=\"gog-ms__dropdown\"\n [class.gog-ms__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\n [class.gog-ms__dropdown--portal]=\"resolvedAppendToBody()\"\n [class]=\"panelSizeClass()\"\n [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\n [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\n [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\n [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\n [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\n [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (showControls() && controlsPosition() === 'top') {\n <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n }\n <!--\n Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\n focus moved between options via the arrow keys (roving-focus.ts), which already\n scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\n needed here.\n -->\n @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\n <div class=\"gog-ms__filter gog-ms__filter--top\">\n <input\n type=\"text\"\n class=\"gog-ms__filter-input\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"filterQuery()\"\n (input)=\"onFilterInput($event)\"\n (click)=\"$event.stopPropagation()\"\n (keydown.escape)=\"close(); focusTrigger()\"\n />\n </div>\n }\n <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-ms__scroll\">\n <div class=\"gog-ms__options\">\n @if (visibleOptions().length === 0) {\n <p class=\"gog-ms__empty\">{{ filterEmptyMessage() }}</p>\n }\n @for (option of visibleOptions(); track valueOf(option)) {\n <!--\n tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\n expects: focus moves between options with the arrow keys, not by tabbing\n through every one. Programmatic .focus() still works on a negative tabindex.\n -->\n <button\n type=\"button\"\n class=\"gog-ms__option\"\n role=\"option\"\n tabindex=\"-1\"\n [attr.aria-selected]=\"isSelected(option)\"\n [attr.aria-disabled]=\"isOptionDisabled(option)\"\n [class.gog-ms__option--selected]=\"isSelected(option)\"\n [class.gog-ms__option--disabled]=\"isOptionDisabled(option)\"\n (click)=\"toggleOption(option, $event)\"\n (keydown)=\"onOptionKeydown($event)\"\n gogRipple\n [rippleDisabled]=\"!rippleEnabled() || isOptionDisabled(option)\"\n >\n @if (optionSlot(); as slot) {\n <ng-container\n *ngTemplateOutlet=\"\n slot.templateRef;\n context: optionContext(option, isSelected(option))\n \"\n />\n } @else {\n <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\n <gog-icon [name]=\"isSelected(option) ? 'checkbox-checked' : 'checkbox'\" />\n </span>\n {{ labelOf(option) }}\n }\n </button>\n }\n </div>\n </gog-scroll>\n @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\n <div class=\"gog-ms__filter gog-ms__filter--bottom\">\n <input\n type=\"text\"\n class=\"gog-ms__filter-input\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"filterQuery()\"\n (input)=\"onFilterInput($event)\"\n (click)=\"$event.stopPropagation()\"\n (keydown.escape)=\"close(); focusTrigger()\"\n />\n </div>\n }\n @if (showControls() && controlsPosition() === 'bottom') {\n <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n }\n </div>\n</ng-template>\n\n<ng-template #controlsRowTpl>\n <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\n <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">{{\n resolvedSelectAllLabel()\n }}</gog-button>\n <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">{{\n resolvedClearAllLabel()\n }}</gog-button>\n </div>\n</ng-template>\n\n<!-- Full selection, shown as a tooltip when the trigger can only fit part of it. -->\n<ng-template #selectedListTpl>\n <ul class=\"gog-ms__tooltip-list\">\n @for (label of selectedLabels(); track label) {\n <li>{{ label }}</li>\n }\n </ul>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-multiselect-gap);position:relative;width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-ms-wrapper{width:fit-content}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-multiselect-size-padding-y: var(--gog-field-xsm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-xsm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-multiselect-size-padding-y: var(--gog-field-sm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-sm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-multiselect-size-padding-y: var(--gog-field-lg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-lg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-multiselect-size-padding-y: var(--gog-field-slg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-slg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-multiselect-label-font-family);font-size:var(--gog-multiselect-label-font-size);line-height:var(--gog-multiselect-label-line-height);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);cursor:pointer}.gog-ms{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-multiselect-field-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border);border-radius:var(--gog-multiselect-radius);color:var(--gog-multiselect-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-multiselect-transition-duration) var(--gog-easing),box-shadow var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-multiselect-focus-border)}.gog-ms:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-multiselect-border-color);box-shadow:var(--gog-multiselect-focus-glow)}.gog-ms--disabled{opacity:var(--gog-multiselect-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-multiselect-error-color)}.gog-ms__value{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));flex:1;align-self:baseline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-multiselect-value-color)}.gog-ms__value--placeholder{color:var(--gog-multiselect-placeholder-color)}.gog-ms{padding-inline-end:var(--gog-multiselect-actions-inset)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-multiselect-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-multiselect-clear-radius);background:transparent;color:var(--gog-multiselect-placeholder-color);line-height:var(--gog-multiselect-clear-line-height);cursor:pointer;transition:color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-multiselect-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-multiselect-border-color);transition:transform var(--gog-multiselect-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-multiselect-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-multiselect-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-multiselect-panel-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-panel-border);border-radius:var(--gog-multiselect-panel-radius);max-height:var(--gog-multiselect-panel-max-height);overflow:hidden;box-shadow:var(--gog-multiselect-panel-shadow)}.gog-ms__scroll{flex:1;min-height:0}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-multiselect-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-ms__controls{flex-shrink:0;display:flex;gap:var(--gog-multiselect-controls-gap);padding:var(--gog-multiselect-controls-padding);background-color:var(--gog-multiselect-panel-bg);border-bottom:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__controls--bottom{border-bottom:0;border-top:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-multiselect-options-padding);gap:var(--gog-multiselect-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-multiselect-option-gap-inline);padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-multiselect-option-radius);transition:background-color var(--gog-multiselect-option-transition-duration) var(--gog-easing);color:var(--gog-multiselect-option-color)}.gog-ms__option--disabled{opacity:var(--gog-multiselect-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover:not(.gog-ms__option--disabled){background-color:var(--gog-multiselect-option-hover-bg)}.gog-ms__option:active:not(.gog-ms__option--disabled){background-color:var(--gog-multiselect-option-press-bg)}.gog-ms__option--selected{color:var(--gog-multiselect-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:calc(var(--gog-multiselect-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));height:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-icon-ratio));color:var(--gog-multiselect-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-multiselect-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-error-font-size);line-height:var(--gog-multiselect-error-line-height);color:var(--gog-multiselect-error-color);margin-top:var(--gog-multiselect-error-offset)}.gog-ms__label--float{position:absolute;inset-inline-start:var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-multiselect-placeholder-color);font-size:var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-multiselect-transition-duration) var(--gog-easing),font-size var(--gog-multiselect-transition-duration) var(--gog-easing),color var(--gog-multiselect-transition-duration) var(--gog-easing),top var(--gog-multiselect-transition-duration) var(--gog-easing),background-color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms-wrapper--float-in,.gog-ms-wrapper--float-on{--gog-multiselect-float-top-padding: calc(var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-multiselect-float-label-reserve))}.gog-ms-wrapper--float-in .gog-ms,.gog-ms-wrapper--float-on .gog-ms{padding-top:var(--gog-multiselect-float-top-padding)}.gog-ms-wrapper--float-in .gog-ms__label--float,.gog-ms-wrapper--float-on .gog-ms__label--float{top:var(--gog-multiselect-float-top-padding);transform:none}.gog-ms-wrapper--float-in.gog-ms-wrapper--floated .gog-ms__label--float{top:var(--gog-multiselect-float-label-in-top);transform:translateY(0);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-on.gog-ms-wrapper--floated .gog-ms__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);background-color:var(--gog-multiselect-float-label-on-bg, var(--gog-multiselect-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-ms-wrapper--float-over.gog-ms-wrapper--floated .gog-ms__label--float{top:calc(-1 * var(--gog-multiselect-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-over .gog-ms{margin-top:var(--gog-multiselect-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark,.gog-ms__label--float{transition:none}}.gog-ms__filter{position:sticky;top:0;z-index:1;padding:var(--gog-multiselect-filter-padding);background:var(--gog-multiselect-panel-bg)}.gog-ms__filter-input{width:100%;padding:var(--gog-multiselect-filter-input-padding-y) var(--gog-multiselect-filter-input-padding-x);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-input-color);background:var(--gog-multiselect-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-multiselect-filter-input-border);border-radius:var(--gog-multiselect-filter-input-radius);outline:none}.gog-ms__filter-input:focus{border-color:var(--gog-multiselect-focus-border)}.gog-ms__empty{margin:0;padding:var(--gog-multiselect-filter-empty-padding);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-empty-color);text-align:center}.gog-ms__filter--top{border-bottom:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}.gog-ms__filter--bottom{top:auto;bottom:0;border-top:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-ms{min-width:var(--gog-multiselect-min-width)}.gog-ms__dropdown--portal{max-width:var(--gog-multiselect-panel-max-width)}.gog-ms__overflow{flex-shrink:0;align-self:baseline;margin-inline-start:var(--gog-multiselect-overflow-gap);font-size:var(--gog-multiselect-overflow-font-size);line-height:var(--gog-multiselect-overflow-line-height);color:var(--gog-multiselect-overflow-color)}.gog-ms__tooltip-list{margin:0;padding-inline-start:1.1em;text-align:start}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "severity", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel", "ariaPressed", "ariaExpanded", "ariaControls", "ariaHasPopup"], outputs: ["gogClick"] }, { kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack", "horizontalWheel"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { kind: "directive", type: GogTooltipDirective, selector: "[gogTooltip]", inputs: ["gogTooltip", "gogTooltipPosition", "gogTooltipShowDelay", "gogTooltipHideDelay", "gogTooltipDisabled", "gogTooltipClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
8120
8120
  }
8121
8121
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiselectComponent, decorators: [{
8122
8122
  type: Component,
@@ -8130,7 +8130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
8130
8130
  ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
8131
8131
  // Only bites when the control has opted out of full width; otherwise the container decides.
8132
8132
  '[style.--gog-multiselect-min-width]': 'minWidth()',
8133
- }, template: "<!--\n Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n context, which traps the panel's z-index inside it and lets whatever follows on the page\n paint over the open dropdown.\n-->\n<div\n class=\"gog-ms-wrapper\"\n [class]=\"sizeClass()\"\n [class.gog-ms-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\n [class.gog-ms-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\n [class.gog-ms-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\n [class.gog-ms-wrapper--floated]=\"isFloatLabelFloated()\"\n>\n <!--\n Associated with aria-labelledby rather than `for`: the trigger is a div with\n role=\"combobox\", not a labelable element. Without this the trigger had no accessible\n name at all whenever `label` was set, because that also suppresses the aria-label.\n -->\n @if (label() && resolvedFloatLabel() === 'none') {\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\n }\n\n <div\n [gogTooltip]=\"summary().hidden > 0 ? selectedListTpl : null\"\n class=\"gog-ms\"\n role=\"combobox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-disabled]=\"isDisabled()\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n [class.gog-ms--open]=\"isOpen()\"\n [class.gog-ms--disabled]=\"isDisabled()\"\n [class.gog-ms--error]=\"hasError()\"\n (click)=\"toggle()\"\n (focus)=\"onFocusIn()\"\n (blur)=\"onFocusOut()\"\n (keydown.enter)=\"toggle(); $event.preventDefault()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n (keydown.escape)=\"close()\"\n (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n >\n @if (label() && isFloatLabelActive()) {\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n <label class=\"gog-ms__label gog-ms__label--float\" [id]=\"labelId()\">{{ label() }}</label>\n }\n <span #valueEl class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\n {{ summary().text || effectivePlaceholder() }}\n </span>\n <!--\n Only what fits is shown; the rest is collapsed into a count. The tooltip is the way to read\n the whole selection back, so it is bound only while something is actually hidden.\n -->\n @if (summary().hidden > 0) {\n <span class=\"gog-ms__overflow\" aria-hidden=\"true\">+{{ summary().hidden }}</span>\n }\n\n <span class=\"gog-ms__actions\">\n <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\n <gog-icon\n [template]=\"chevronSlot()?.templateRef ?? null\"\n [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\n />\n </span>\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"gog-ms__clear gog-inline-center\"\n (click)=\"clearValue($event)\"\n [attr.aria-label]=\"resolvedClearLabel()\"\n >\n <gog-icon [template]=\"clearIconSlot()?.templateRef ?? null\" name=\"close\" />\n </button>\n }\n </span>\n </div>\n\n @if (isOpen() && !resolvedAppendToBody()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n }\n\n @if (visibleError()) {\n <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\n }\n</div>\n\n<!--\n One template for both render modes. When `appendToBody` is set it is stamped into\n <body> by the overlay, which is why the portal-only modifier and the resolved\n coordinates are applied conditionally: outside the component's subtree the panel can\n no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n <div\n [id]=\"listboxId()\"\n class=\"gog-ms__dropdown\"\n [class.gog-ms__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\n [class.gog-ms__dropdown--portal]=\"resolvedAppendToBody()\"\n [class]=\"panelSizeClass()\"\n [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\n [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\n [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\n [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\n [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\n [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (showControls() && controlsPosition() === 'top') {\n <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n }\n <!--\n Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\n focus moved between options via the arrow keys (roving-focus.ts), which already\n scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\n needed here.\n -->\n @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\n <div class=\"gog-ms__filter gog-ms__filter--top\">\n <input\n type=\"text\"\n class=\"gog-ms__filter-input\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"filterQuery()\"\n (input)=\"onFilterInput($event)\"\n (click)=\"$event.stopPropagation()\"\n (keydown.escape)=\"close(); focusTrigger()\"\n />\n </div>\n }\n <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-ms__scroll\">\n <div class=\"gog-ms__options\">\n @if (visibleOptions().length === 0) {\n <p class=\"gog-ms__empty\">{{ filterEmptyMessage() }}</p>\n }\n @for (option of visibleOptions(); track valueOf(option)) {\n <!--\n tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\n expects: focus moves between options with the arrow keys, not by tabbing\n through every one. Programmatic .focus() still works on a negative tabindex.\n -->\n <button\n type=\"button\"\n class=\"gog-ms__option\"\n role=\"option\"\n tabindex=\"-1\"\n [attr.aria-selected]=\"isSelected(option)\"\n [attr.aria-disabled]=\"isOptionDisabled(option)\"\n [class.gog-ms__option--selected]=\"isSelected(option)\"\n [class.gog-ms__option--disabled]=\"isOptionDisabled(option)\"\n (click)=\"toggleOption(option, $event)\"\n (keydown)=\"onOptionKeydown($event)\"\n gogRipple\n [rippleDisabled]=\"!rippleEnabled() || isOptionDisabled(option)\"\n >\n @if (optionSlot(); as slot) {\n <ng-container\n *ngTemplateOutlet=\"\n slot.templateRef;\n context: optionContext(option, isSelected(option))\n \"\n />\n } @else {\n <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\n <gog-icon [name]=\"isSelected(option) ? 'checkbox-checked' : 'checkbox'\" />\n </span>\n {{ labelOf(option) }}\n }\n </button>\n }\n </div>\n </gog-scroll>\n @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\n <div class=\"gog-ms__filter gog-ms__filter--bottom\">\n <input\n type=\"text\"\n class=\"gog-ms__filter-input\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"filterQuery()\"\n (input)=\"onFilterInput($event)\"\n (click)=\"$event.stopPropagation()\"\n (keydown.escape)=\"close(); focusTrigger()\"\n />\n </div>\n }\n @if (showControls() && controlsPosition() === 'bottom') {\n <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n }\n </div>\n</ng-template>\n\n<ng-template #controlsRowTpl>\n <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\n <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">{{\n resolvedSelectAllLabel()\n }}</gog-button>\n <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">{{\n resolvedClearAllLabel()\n }}</gog-button>\n </div>\n</ng-template>\n\n<!-- Full selection, shown as a tooltip when the trigger can only fit part of it. -->\n<ng-template #selectedListTpl>\n <ul class=\"gog-ms__tooltip-list\">\n @for (label of selectedLabels(); track label) {\n <li>{{ label }}</li>\n }\n </ul>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-multiselect-gap);position:relative;width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-ms-wrapper{width:fit-content}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-multiselect-size-padding-y: var(--gog-field-xsm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-xsm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-multiselect-size-padding-y: var(--gog-field-sm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-sm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-multiselect-size-padding-y: var(--gog-field-lg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-lg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-multiselect-size-padding-y: var(--gog-field-slg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-slg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-multiselect-label-font-family);font-size:var(--gog-multiselect-label-font-size);line-height:var(--gog-multiselect-label-line-height);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);cursor:pointer}.gog-ms{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-multiselect-field-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border);border-radius:var(--gog-multiselect-radius);color:var(--gog-multiselect-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-multiselect-transition-duration) var(--gog-easing),box-shadow var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-multiselect-focus-border)}.gog-ms:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-multiselect-border-color);box-shadow:var(--gog-multiselect-focus-glow)}.gog-ms--disabled{opacity:var(--gog-multiselect-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-multiselect-error-color)}.gog-ms__value{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));flex:1;align-self:baseline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-multiselect-value-color)}.gog-ms__value--placeholder{color:var(--gog-multiselect-placeholder-color)}.gog-ms{padding-inline-end:var(--gog-multiselect-actions-inset)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-multiselect-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-multiselect-clear-radius);background:transparent;color:var(--gog-multiselect-placeholder-color);line-height:var(--gog-multiselect-clear-line-height);cursor:pointer;transition:color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-multiselect-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-multiselect-border-color);transition:transform var(--gog-multiselect-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-multiselect-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-multiselect-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-multiselect-panel-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-panel-border);border-radius:var(--gog-multiselect-radius);max-height:var(--gog-multiselect-panel-max-height);overflow:hidden;box-shadow:var(--gog-multiselect-panel-shadow)}.gog-ms__scroll{flex:1;min-height:0}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-multiselect-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-ms__controls{flex-shrink:0;display:flex;gap:var(--gog-multiselect-controls-gap);padding:var(--gog-multiselect-controls-padding);background-color:var(--gog-multiselect-panel-bg);border-bottom:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__controls--bottom{border-bottom:0;border-top:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-multiselect-options-padding);gap:var(--gog-multiselect-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-multiselect-option-gap-inline);padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-multiselect-option-radius);transition:background-color var(--gog-multiselect-option-transition-duration) var(--gog-easing);color:var(--gog-multiselect-option-color)}.gog-ms__option--disabled{opacity:var(--gog-multiselect-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover:not(.gog-ms__option--disabled){background-color:var(--gog-multiselect-option-hover-bg)}.gog-ms__option:active:not(.gog-ms__option--disabled){background-color:var(--gog-multiselect-option-press-bg)}.gog-ms__option--selected{color:var(--gog-multiselect-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:calc(var(--gog-multiselect-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));height:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-icon-ratio));color:var(--gog-multiselect-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-multiselect-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-error-font-size);line-height:var(--gog-multiselect-error-line-height);color:var(--gog-multiselect-error-color);margin-top:var(--gog-multiselect-error-offset)}.gog-ms__label--float{position:absolute;inset-inline-start:var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-multiselect-placeholder-color);font-size:var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-multiselect-transition-duration) var(--gog-easing),font-size var(--gog-multiselect-transition-duration) var(--gog-easing),color var(--gog-multiselect-transition-duration) var(--gog-easing),top var(--gog-multiselect-transition-duration) var(--gog-easing),background-color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms-wrapper--float-in,.gog-ms-wrapper--float-on{--gog-multiselect-float-top-padding: calc(var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-multiselect-float-label-reserve))}.gog-ms-wrapper--float-in .gog-ms,.gog-ms-wrapper--float-on .gog-ms{padding-top:var(--gog-multiselect-float-top-padding)}.gog-ms-wrapper--float-in .gog-ms__label--float,.gog-ms-wrapper--float-on .gog-ms__label--float{top:var(--gog-multiselect-float-top-padding);transform:none}.gog-ms-wrapper--float-in.gog-ms-wrapper--floated .gog-ms__label--float{top:var(--gog-multiselect-float-label-in-top);transform:translateY(0);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-on.gog-ms-wrapper--floated .gog-ms__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);background-color:var(--gog-multiselect-float-label-on-bg, var(--gog-multiselect-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-ms-wrapper--float-over.gog-ms-wrapper--floated .gog-ms__label--float{top:calc(-1 * var(--gog-multiselect-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-over .gog-ms{margin-top:var(--gog-multiselect-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark,.gog-ms__label--float{transition:none}}.gog-ms__filter{position:sticky;top:0;z-index:1;padding:var(--gog-multiselect-filter-padding);background:var(--gog-multiselect-panel-bg)}.gog-ms__filter-input{width:100%;padding:var(--gog-multiselect-filter-input-padding-y) var(--gog-multiselect-filter-input-padding-x);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-input-color);background:var(--gog-multiselect-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-multiselect-filter-input-border);border-radius:var(--gog-multiselect-filter-input-radius);outline:none}.gog-ms__filter-input:focus{border-color:var(--gog-multiselect-focus-border)}.gog-ms__empty{margin:0;padding:var(--gog-multiselect-filter-empty-padding);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-empty-color);text-align:center}.gog-ms__filter--top{border-bottom:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}.gog-ms__filter--bottom{top:auto;bottom:0;border-top:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-ms{min-width:var(--gog-multiselect-min-width)}.gog-ms__dropdown--portal{max-width:var(--gog-multiselect-panel-max-width)}.gog-ms__overflow{flex-shrink:0;align-self:baseline;margin-inline-start:var(--gog-multiselect-overflow-gap);font-size:var(--gog-multiselect-overflow-font-size);line-height:var(--gog-multiselect-overflow-line-height);color:var(--gog-multiselect-overflow-color)}.gog-ms__tooltip-list{margin:0;padding-inline-start:1.1em;text-align:start}\n"] }]
8133
+ }, template: "<!--\n Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n context, which traps the panel's z-index inside it and lets whatever follows on the page\n paint over the open dropdown.\n-->\n<div\n class=\"gog-ms-wrapper\"\n [class]=\"sizeClass()\"\n [class.gog-ms-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\n [class.gog-ms-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\n [class.gog-ms-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\n [class.gog-ms-wrapper--floated]=\"isFloatLabelFloated()\"\n>\n <!--\n Associated with aria-labelledby rather than `for`: the trigger is a div with\n role=\"combobox\", not a labelable element. Without this the trigger had no accessible\n name at all whenever `label` was set, because that also suppresses the aria-label.\n -->\n @if (label() && resolvedFloatLabel() === 'none') {\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\n }\n\n <div\n [gogTooltip]=\"summary().hidden > 0 ? selectedListTpl : null\"\n class=\"gog-ms\"\n role=\"combobox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-disabled]=\"isDisabled()\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n [class.gog-ms--open]=\"isOpen()\"\n [class.gog-ms--disabled]=\"isDisabled()\"\n [class.gog-ms--error]=\"hasError()\"\n (click)=\"toggle()\"\n (focus)=\"onFocusIn()\"\n (blur)=\"onFocusOut()\"\n (keydown.enter)=\"toggle(); $event.preventDefault()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n (keydown.escape)=\"close()\"\n (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n >\n @if (label() && isFloatLabelActive()) {\n <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n <label class=\"gog-ms__label gog-ms__label--float\" [id]=\"labelId()\">{{ label() }}</label>\n }\n <span #valueEl class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\n {{ summary().text || effectivePlaceholder() }}\n </span>\n <!--\n Only what fits is shown; the rest is collapsed into a count. The tooltip is the way to read\n the whole selection back, so it is bound only while something is actually hidden.\n -->\n @if (summary().hidden > 0) {\n <span class=\"gog-ms__overflow\" aria-hidden=\"true\">+{{ summary().hidden }}</span>\n }\n\n <span class=\"gog-ms__actions\">\n <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\n <gog-icon\n [template]=\"chevronSlot()?.templateRef ?? null\"\n [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\n />\n </span>\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"gog-ms__clear gog-inline-center\"\n (click)=\"clearValue($event)\"\n [attr.aria-label]=\"resolvedClearLabel()\"\n >\n <gog-icon [template]=\"clearIconSlot()?.templateRef ?? null\" name=\"close\" />\n </button>\n }\n </span>\n </div>\n\n @if (isOpen() && !resolvedAppendToBody()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n }\n\n @if (visibleError()) {\n <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\n }\n</div>\n\n<!--\n One template for both render modes. When `appendToBody` is set it is stamped into\n <body> by the overlay, which is why the portal-only modifier and the resolved\n coordinates are applied conditionally: outside the component's subtree the panel can\n no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n <div\n [id]=\"listboxId()\"\n class=\"gog-ms__dropdown\"\n [class.gog-ms__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\n [class.gog-ms__dropdown--portal]=\"resolvedAppendToBody()\"\n [class]=\"panelSizeClass()\"\n [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\n [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\n [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\n [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\n [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\n [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-labelledby]=\"label() ? labelId() : null\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (showControls() && controlsPosition() === 'top') {\n <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n }\n <!--\n Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\n focus moved between options via the arrow keys (roving-focus.ts), which already\n scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\n needed here.\n -->\n @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\n <div class=\"gog-ms__filter gog-ms__filter--top\">\n <input\n type=\"text\"\n class=\"gog-ms__filter-input\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"filterQuery()\"\n (input)=\"onFilterInput($event)\"\n (click)=\"$event.stopPropagation()\"\n (keydown.escape)=\"close(); focusTrigger()\"\n />\n </div>\n }\n <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-ms__scroll\">\n <div class=\"gog-ms__options\">\n @if (visibleOptions().length === 0) {\n <p class=\"gog-ms__empty\">{{ filterEmptyMessage() }}</p>\n }\n @for (option of visibleOptions(); track valueOf(option)) {\n <!--\n tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\n expects: focus moves between options with the arrow keys, not by tabbing\n through every one. Programmatic .focus() still works on a negative tabindex.\n -->\n <button\n type=\"button\"\n class=\"gog-ms__option\"\n role=\"option\"\n tabindex=\"-1\"\n [attr.aria-selected]=\"isSelected(option)\"\n [attr.aria-disabled]=\"isOptionDisabled(option)\"\n [class.gog-ms__option--selected]=\"isSelected(option)\"\n [class.gog-ms__option--disabled]=\"isOptionDisabled(option)\"\n (click)=\"toggleOption(option, $event)\"\n (keydown)=\"onOptionKeydown($event)\"\n gogRipple\n [rippleDisabled]=\"!rippleEnabled() || isOptionDisabled(option)\"\n >\n @if (optionSlot(); as slot) {\n <ng-container\n *ngTemplateOutlet=\"\n slot.templateRef;\n context: optionContext(option, isSelected(option))\n \"\n />\n } @else {\n <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\n <gog-icon [name]=\"isSelected(option) ? 'checkbox-checked' : 'checkbox'\" />\n </span>\n {{ labelOf(option) }}\n }\n </button>\n }\n </div>\n </gog-scroll>\n @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\n <div class=\"gog-ms__filter gog-ms__filter--bottom\">\n <input\n type=\"text\"\n class=\"gog-ms__filter-input\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"filterQuery()\"\n (input)=\"onFilterInput($event)\"\n (click)=\"$event.stopPropagation()\"\n (keydown.escape)=\"close(); focusTrigger()\"\n />\n </div>\n }\n @if (showControls() && controlsPosition() === 'bottom') {\n <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n }\n </div>\n</ng-template>\n\n<ng-template #controlsRowTpl>\n <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\n <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">{{\n resolvedSelectAllLabel()\n }}</gog-button>\n <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">{{\n resolvedClearAllLabel()\n }}</gog-button>\n </div>\n</ng-template>\n\n<!-- Full selection, shown as a tooltip when the trigger can only fit part of it. -->\n<ng-template #selectedListTpl>\n <ul class=\"gog-ms__tooltip-list\">\n @for (label of selectedLabels(); track label) {\n <li>{{ label }}</li>\n }\n </ul>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-multiselect-gap);position:relative;width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-ms-wrapper{width:fit-content}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-multiselect-size-padding-y: var(--gog-field-xsm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-xsm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-multiselect-size-padding-y: var(--gog-field-sm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-sm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-multiselect-size-padding-y: var(--gog-field-lg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-lg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-multiselect-size-padding-y: var(--gog-field-slg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-slg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-multiselect-label-font-family);font-size:var(--gog-multiselect-label-font-size);line-height:var(--gog-multiselect-label-line-height);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);cursor:pointer}.gog-ms{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-multiselect-field-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border);border-radius:var(--gog-multiselect-radius);color:var(--gog-multiselect-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-multiselect-transition-duration) var(--gog-easing),box-shadow var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-multiselect-focus-border)}.gog-ms:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-multiselect-border-color);box-shadow:var(--gog-multiselect-focus-glow)}.gog-ms--disabled{opacity:var(--gog-multiselect-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-multiselect-error-color)}.gog-ms__value{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));flex:1;align-self:baseline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-multiselect-value-color)}.gog-ms__value--placeholder{color:var(--gog-multiselect-placeholder-color)}.gog-ms{padding-inline-end:var(--gog-multiselect-actions-inset)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-multiselect-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-multiselect-clear-radius);background:transparent;color:var(--gog-multiselect-placeholder-color);line-height:var(--gog-multiselect-clear-line-height);cursor:pointer;transition:color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-multiselect-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-multiselect-border-color);transition:transform var(--gog-multiselect-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-multiselect-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-multiselect-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-multiselect-panel-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-panel-border);border-radius:var(--gog-multiselect-panel-radius);max-height:var(--gog-multiselect-panel-max-height);overflow:hidden;box-shadow:var(--gog-multiselect-panel-shadow)}.gog-ms__scroll{flex:1;min-height:0}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-multiselect-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-ms__controls{flex-shrink:0;display:flex;gap:var(--gog-multiselect-controls-gap);padding:var(--gog-multiselect-controls-padding);background-color:var(--gog-multiselect-panel-bg);border-bottom:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__controls--bottom{border-bottom:0;border-top:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-multiselect-options-padding);gap:var(--gog-multiselect-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-multiselect-option-gap-inline);padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-multiselect-option-radius);transition:background-color var(--gog-multiselect-option-transition-duration) var(--gog-easing);color:var(--gog-multiselect-option-color)}.gog-ms__option--disabled{opacity:var(--gog-multiselect-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover:not(.gog-ms__option--disabled){background-color:var(--gog-multiselect-option-hover-bg)}.gog-ms__option:active:not(.gog-ms__option--disabled){background-color:var(--gog-multiselect-option-press-bg)}.gog-ms__option--selected{color:var(--gog-multiselect-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:calc(var(--gog-multiselect-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));height:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-icon-ratio));color:var(--gog-multiselect-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-multiselect-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-error-font-size);line-height:var(--gog-multiselect-error-line-height);color:var(--gog-multiselect-error-color);margin-top:var(--gog-multiselect-error-offset)}.gog-ms__label--float{position:absolute;inset-inline-start:var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-multiselect-placeholder-color);font-size:var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-multiselect-transition-duration) var(--gog-easing),font-size var(--gog-multiselect-transition-duration) var(--gog-easing),color var(--gog-multiselect-transition-duration) var(--gog-easing),top var(--gog-multiselect-transition-duration) var(--gog-easing),background-color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms-wrapper--float-in,.gog-ms-wrapper--float-on{--gog-multiselect-float-top-padding: calc(var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-multiselect-float-label-reserve))}.gog-ms-wrapper--float-in .gog-ms,.gog-ms-wrapper--float-on .gog-ms{padding-top:var(--gog-multiselect-float-top-padding)}.gog-ms-wrapper--float-in .gog-ms__label--float,.gog-ms-wrapper--float-on .gog-ms__label--float{top:var(--gog-multiselect-float-top-padding);transform:none}.gog-ms-wrapper--float-in.gog-ms-wrapper--floated .gog-ms__label--float{top:var(--gog-multiselect-float-label-in-top);transform:translateY(0);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-on.gog-ms-wrapper--floated .gog-ms__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);background-color:var(--gog-multiselect-float-label-on-bg, var(--gog-multiselect-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-ms-wrapper--float-over.gog-ms-wrapper--floated .gog-ms__label--float{top:calc(-1 * var(--gog-multiselect-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-over .gog-ms{margin-top:var(--gog-multiselect-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark,.gog-ms__label--float{transition:none}}.gog-ms__filter{position:sticky;top:0;z-index:1;padding:var(--gog-multiselect-filter-padding);background:var(--gog-multiselect-panel-bg)}.gog-ms__filter-input{width:100%;padding:var(--gog-multiselect-filter-input-padding-y) var(--gog-multiselect-filter-input-padding-x);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-input-color);background:var(--gog-multiselect-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-multiselect-filter-input-border);border-radius:var(--gog-multiselect-filter-input-radius);outline:none}.gog-ms__filter-input:focus{border-color:var(--gog-multiselect-focus-border)}.gog-ms__empty{margin:0;padding:var(--gog-multiselect-filter-empty-padding);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-empty-color);text-align:center}.gog-ms__filter--top{border-bottom:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}.gog-ms__filter--bottom{top:auto;bottom:0;border-top:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-ms{min-width:var(--gog-multiselect-min-width)}.gog-ms__dropdown--portal{max-width:var(--gog-multiselect-panel-max-width)}.gog-ms__overflow{flex-shrink:0;align-self:baseline;margin-inline-start:var(--gog-multiselect-overflow-gap);font-size:var(--gog-multiselect-overflow-font-size);line-height:var(--gog-multiselect-overflow-line-height);color:var(--gog-multiselect-overflow-color)}.gog-ms__tooltip-list{margin:0;padding-inline-start:1.1em;text-align:start}\n"] }]
8134
8134
  }], ctorParameters: () => [], propDecorators: { showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], controlsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlsPosition", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], clearAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllLabel", required: false }] }], clearIconSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogMultiselectClearIconDirective), { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTpl', { isSignal: true }] }], valueRef: [{ type: i0.ViewChild, args: ['valueEl', { isSignal: true }] }] } });
8135
8135
  /** One shared 2D context; creating a canvas per measurement is what makes this approach slow. */
8136
8136
  let measureContext = null;
@@ -9436,6 +9436,22 @@ const GOG_TOKEN_GROUPS = [
9436
9436
  '--gog-field-float-label-reserve',
9437
9437
  ],
9438
9438
  },
9439
+ {
9440
+ section: 'Elevation',
9441
+ layer: 'foundation',
9442
+ tokens: [
9443
+ '--gog-elevation-ambient-alpha',
9444
+ '--gog-elevation-contact-blur',
9445
+ '--gog-elevation-highlight-alpha',
9446
+ '--gog-elevation-highlight-ink',
9447
+ '--gog-elevation-ink',
9448
+ '--gog-elevation-key-alpha',
9449
+ '--gog-elevation-key-blur',
9450
+ '--gog-elevation-key-x',
9451
+ '--gog-elevation-key-y',
9452
+ '--gog-elevation-ring-width',
9453
+ ],
9454
+ },
9439
9455
  {
9440
9456
  section: 'Icon & spinner',
9441
9457
  layer: 'foundation',
@@ -9453,12 +9469,7 @@ const GOG_TOKEN_GROUPS = [
9453
9469
  {
9454
9470
  section: 'Toast stack',
9455
9471
  layer: 'foundation',
9456
- tokens: [
9457
- '--gog-toast-enter-distance',
9458
- '--gog-toast-min-width',
9459
- '--gog-toast-shadow',
9460
- '--gog-toast-z-index',
9461
- ],
9472
+ tokens: ['--gog-toast-enter-distance', '--gog-toast-min-width', '--gog-toast-z-index'],
9462
9473
  },
9463
9474
  {
9464
9475
  section: 'Overlay stacking',
@@ -9476,13 +9487,21 @@ const GOG_TOKEN_GROUPS = [
9476
9487
  '--gog-accent-text-color',
9477
9488
  '--gog-background-color',
9478
9489
  '--gog-border-color',
9479
- '--gog-card-elevated-shadow',
9490
+ '--gog-control-boundary-color',
9480
9491
  '--gog-danger-color',
9492
+ '--gog-elevation-ambient-alpha',
9493
+ '--gog-elevation-contact-blur',
9494
+ '--gog-elevation-highlight-alpha',
9495
+ '--gog-elevation-highlight-ink',
9496
+ '--gog-elevation-ink',
9497
+ '--gog-elevation-key-alpha',
9498
+ '--gog-elevation-key-blur',
9499
+ '--gog-elevation-key-x',
9500
+ '--gog-elevation-key-y',
9501
+ '--gog-elevation-ring-width',
9481
9502
  '--gog-hover-color',
9482
9503
  '--gog-info-color',
9483
9504
  '--gog-muted-text-color',
9484
- '--gog-panel-elevated-shadow',
9485
- '--gog-panel-shadow',
9486
9505
  '--gog-primary-color',
9487
9506
  '--gog-secondary-color',
9488
9507
  '--gog-spinner-overlay-bg',
@@ -9492,6 +9511,26 @@ const GOG_TOKEN_GROUPS = [
9492
9511
  '--gog-warning-color',
9493
9512
  ],
9494
9513
  },
9514
+ {
9515
+ section: 'The elevation ladder',
9516
+ layer: 'component',
9517
+ tokens: [
9518
+ '--gog-dialog-shadow',
9519
+ '--gog-elevation-0',
9520
+ '--gog-elevation-1',
9521
+ '--gog-elevation-2',
9522
+ '--gog-elevation-3',
9523
+ '--gog-elevation-4',
9524
+ '--gog-elevation-5',
9525
+ '--gog-elevation-contact',
9526
+ '--gog-elevation-highlight',
9527
+ '--gog-elevation-ring',
9528
+ '--gog-panel-elevated-shadow',
9529
+ '--gog-panel-shadow',
9530
+ '--gog-toast-shadow',
9531
+ '--gog-toggle-thumb-shadow',
9532
+ ],
9533
+ },
9495
9534
  {
9496
9535
  section: 'Text on a status fill',
9497
9536
  layer: 'component',
@@ -9588,6 +9627,7 @@ const GOG_TOKEN_GROUPS = [
9588
9627
  '--gog-accordion-chevron-line-height',
9589
9628
  '--gog-accordion-chevron-transition-duration',
9590
9629
  '--gog-accordion-disabled-opacity',
9630
+ '--gog-accordion-focus-ring-color',
9591
9631
  '--gog-accordion-focus-ring-width',
9592
9632
  '--gog-accordion-font-family',
9593
9633
  '--gog-accordion-header-bg',
@@ -9994,6 +10034,7 @@ const GOG_TOKEN_GROUPS = [
9994
10034
  '--gog-chip-border-width',
9995
10035
  '--gog-chip-color',
9996
10036
  '--gog-chip-disabled-opacity',
10037
+ '--gog-chip-focus-ring-color',
9997
10038
  '--gog-chip-focus-ring-offset',
9998
10039
  '--gog-chip-focus-ring-width',
9999
10040
  '--gog-chip-font-family',
@@ -10091,7 +10132,6 @@ const GOG_TOKEN_GROUPS = [
10091
10132
  '--gog-dialog-max-height',
10092
10133
  '--gog-dialog-min-width',
10093
10134
  '--gog-dialog-radius',
10094
- '--gog-dialog-shadow',
10095
10135
  '--gog-dialog-title-font-size',
10096
10136
  '--gog-dialog-title-line-height',
10097
10137
  ],
@@ -10407,6 +10447,7 @@ const GOG_TOKEN_GROUPS = [
10407
10447
  '--gog-multiselect-panel-max-height',
10408
10448
  '--gog-multiselect-panel-max-width',
10409
10449
  '--gog-multiselect-panel-offset',
10450
+ '--gog-multiselect-panel-radius',
10410
10451
  '--gog-multiselect-panel-shadow',
10411
10452
  '--gog-multiselect-placeholder-color',
10412
10453
  '--gog-multiselect-radius',
@@ -10644,12 +10685,15 @@ const GOG_TOKEN_GROUPS = [
10644
10685
  '--gog-select-option-height',
10645
10686
  '--gog-select-option-hover-bg',
10646
10687
  '--gog-select-option-press-bg',
10688
+ '--gog-select-option-radius',
10647
10689
  '--gog-select-option-selected-color',
10648
10690
  '--gog-select-option-transition-duration',
10691
+ '--gog-select-options-padding',
10649
10692
  '--gog-select-panel-bg',
10650
10693
  '--gog-select-panel-max-height',
10651
10694
  '--gog-select-panel-max-width',
10652
10695
  '--gog-select-panel-offset',
10696
+ '--gog-select-panel-radius',
10653
10697
  '--gog-select-panel-shadow',
10654
10698
  '--gog-select-placeholder-color',
10655
10699
  '--gog-select-radius',
@@ -11009,7 +11053,6 @@ const GOG_TOKEN_GROUPS = [
11009
11053
  '--gog-toggle-thumb-inset',
11010
11054
  '--gog-toggle-thumb-off-bg',
11011
11055
  '--gog-toggle-thumb-on-bg',
11012
- '--gog-toggle-thumb-shadow',
11013
11056
  '--gog-toggle-track-off-bg',
11014
11057
  '--gog-toggle-track-on-bg',
11015
11058
  '--gog-toggle-transition-duration',