@guildofgleks/ui 21.7.1 → 21.7.2

package/CHANGELOG.md

@@ -4,6 +4,18 @@ All notable changes to `@guildofgleks/ui` are documented here. Format follows
 [Keep a Changelog](https://keepachangelog.com/en/1.0.0/); this project has not yet
 reached 1.0, so breaking changes may land in minor versions.
 
+## [21.7.2] - 30.08.2026
+
+### Fixed
+
+- **`gog-multiselect`'s `+N` overflow chip now sits on the same baseline as the selection text.**
+  `.gog-ms` centers its children by box height (`align-items: center`), and the chip's smaller
+  font-size (`--gog-multiselect-overflow-font-size`, 14px against the value's 16px) put its
+  visual center visibly above the value text's baseline rather than resting on it. `.gog-ms__value`
+  and `.gog-ms__overflow` now both set `align-self: baseline`, leaving `.gog-ms__actions`
+  box-centered as before so the trigger's icons are unaffected. An "Overflow summary" example was
+  added to the multiselect showcase page, since the bug had no live example to be caught by.
+
 ## [21.7.1] - 29.08.2026
 
 ### Fixed

package/fesm2022/guildofgleks-ui.mjs

@@ -7896,7 +7896,7 @@ class MultiselectComponent extends GogDropdownBase {
         return this.showControls() ? CONTROLS_ROW_HEIGHT : 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiselectComponent, isStandalone: true, selector: "gog-multiselect", inputs: { showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, 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: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-ms-wrapper\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-ms-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-ms-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-ms-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-ms-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\r\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\r\n    name at all whenever `label` was set, because that also suppresses the aria-label.\r\n  -->\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div\r\n    [gogTooltip]=\"summary().hidden > 0 ? selectedListTpl : null\"\r\n    class=\"gog-ms\"\r\n    role=\"combobox\"\r\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    aria-haspopup=\"listbox\"\r\n    [attr.aria-controls]=\"listboxId()\"\r\n    [attr.aria-disabled]=\"isDisabled()\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n    [class.gog-ms--open]=\"isOpen()\"\r\n    [class.gog-ms--disabled]=\"isDisabled()\"\r\n    [class.gog-ms--error]=\"hasError()\"\r\n    (click)=\"toggle()\"\r\n    (focus)=\"onFocusIn()\"\r\n    (blur)=\"onFocusOut()\"\r\n    (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.escape)=\"close()\"\r\n    (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n    (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n  >\r\n    @if (label() && isFloatLabelActive()) {\r\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n      <label class=\"gog-ms__label gog-ms__label--float\" [id]=\"labelId()\">{{ label() }}</label>\r\n    }\r\n    <span #valueEl class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\r\n      {{ summary().text || effectivePlaceholder() }}\r\n    </span>\r\n    <!--\r\n      Only what fits is shown; the rest is collapsed into a count. The tooltip is the way to read\r\n      the whole selection back, so it is bound only while something is actually hidden.\r\n    -->\r\n    @if (summary().hidden > 0) {\r\n      <span class=\"gog-ms__overflow\" aria-hidden=\"true\">+{{ summary().hidden }}</span>\r\n    }\r\n\r\n    <span class=\"gog-ms__actions\">\r\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\r\n        <gog-icon\r\n          [template]=\"chevronSlot()?.templateRef ?? null\"\r\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\r\n        />\r\n      </span>\r\n      @if (showClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-ms__clear gog-inline-center\"\r\n          (click)=\"clearValue($event)\"\r\n          [attr.aria-label]=\"resolvedClearLabel()\"\r\n        >\r\n          <gog-icon [template]=\"clearIconSlot()?.templateRef ?? null\" name=\"close\" />\r\n        </button>\r\n      }\r\n    </span>\r\n  </div>\r\n\r\n  @if (isOpen() && !resolvedAppendToBody()) {\r\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n  }\r\n\r\n  @if (visibleError()) {\r\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-ms__dropdown\"\r\n    [class.gog-ms__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-ms__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    aria-multiselectable=\"true\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    @if (showControls() && controlsPosition() === 'top') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--top\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-ms__scroll\">\r\n      <div class=\"gog-ms__options\">\r\n        @if (visibleOptions().length === 0) {\r\n          <p class=\"gog-ms__empty\">{{ filterEmptyMessage() }}</p>\r\n        }\r\n        @for (option of visibleOptions(); track valueOf(option)) {\r\n          <!--\r\n            tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\r\n            expects: focus moves between options with the arrow keys, not by tabbing\r\n            through every one. Programmatic .focus() still works on a negative tabindex.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-ms__option\"\r\n            role=\"option\"\r\n            tabindex=\"-1\"\r\n            [attr.aria-selected]=\"isSelected(option)\"\r\n            [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n            [class.gog-ms__option--selected]=\"isSelected(option)\"\r\n            [class.gog-ms__option--disabled]=\"isOptionDisabled(option)\"\r\n            (click)=\"toggleOption(option, $event)\"\r\n            (keydown)=\"onOptionKeydown($event)\"\r\n            gogRipple\r\n            [rippleDisabled]=\"!rippleEnabled()\"\r\n          >\r\n            @if (optionSlot(); as slot) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  slot.templateRef;\r\n                  context: optionContext(option, isSelected(option))\r\n                \"\r\n              />\r\n            } @else {\r\n              <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\r\n                <gog-icon [name]=\"isSelected(option) ? 'checkbox-checked' : 'checkbox'\" />\r\n              </span>\r\n              {{ labelOf(option) }}\r\n            }\r\n          </button>\r\n        }\r\n      </div>\r\n    </gog-scroll>\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--bottom\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    @if (showControls() && controlsPosition() === 'bottom') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #controlsRowTpl>\r\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">{{\r\n      resolvedSelectAllLabel()\r\n    }}</gog-button>\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">{{\r\n      resolvedClearAllLabel()\r\n    }}</gog-button>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Full selection, shown as a tooltip when the trigger can only fit part of it. -->\r\n<ng-template #selectedListTpl>\r\n  <ul class=\"gog-ms__tooltip-list\">\r\n    @for (label of selectedLabels(); track label) {\r\n      <li>{{ label }}</li>\r\n    }\r\n  </ul>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-multiselect-gap);position:relative;width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-ms-wrapper{width:fit-content}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-multiselect-size-padding-y: var(--gog-field-xsm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-xsm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-multiselect-size-padding-y: var(--gog-field-sm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-sm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-multiselect-size-padding-y: var(--gog-field-lg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-lg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-multiselect-size-padding-y: var(--gog-field-slg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-slg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-multiselect-label-font-family);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);cursor:pointer}.gog-ms{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-multiselect-field-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border);border-radius:var(--gog-multiselect-radius);color:var(--gog-multiselect-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-multiselect-transition-duration) var(--gog-easing),box-shadow var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-multiselect-focus-border)}.gog-ms:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-multiselect-border-color);box-shadow:var(--gog-multiselect-focus-glow)}.gog-ms--disabled{opacity:var(--gog-multiselect-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-multiselect-error-color)}.gog-ms__value{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-multiselect-value-color)}.gog-ms__value--placeholder{color:var(--gog-multiselect-placeholder-color)}.gog-ms{padding-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:1;cursor:pointer;transition:color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-multiselect-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-multiselect-border-color);transition:transform var(--gog-multiselect-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-multiselect-panel-offset));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{background-color:var(--gog-multiselect-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-multiselect-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:calc(var(--gog-multiselect-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));height:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-icon-ratio));color:var(--gog-multiselect-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-multiselect-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-error-font-size);color:var(--gog-multiselect-error-color);margin-top:var(--gog-multiselect-error-offset)}.gog-ms__label--float{position:absolute;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;margin-inline-start:var(--gog-multiselect-overflow-gap);font-size:var(--gog-multiselect-overflow-font-size);color:var(--gog-multiselect-overflow-color)}.gog-ms__tooltip-list{margin:0;padding-inline-start:1.1em;text-align:start}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel"], 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"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { kind: "directive", type: GogTooltipDirective, selector: "[gogTooltip]", inputs: ["gogTooltip", "gogTooltipPosition", "gogTooltipShowDelay", "gogTooltipHideDelay", "gogTooltipDisabled", "gogTooltipClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiselectComponent, isStandalone: true, selector: "gog-multiselect", inputs: { showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, 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: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-ms-wrapper\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-ms-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-ms-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-ms-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-ms-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\r\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\r\n    name at all whenever `label` was set, because that also suppresses the aria-label.\r\n  -->\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div\r\n    [gogTooltip]=\"summary().hidden > 0 ? selectedListTpl : null\"\r\n    class=\"gog-ms\"\r\n    role=\"combobox\"\r\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    aria-haspopup=\"listbox\"\r\n    [attr.aria-controls]=\"listboxId()\"\r\n    [attr.aria-disabled]=\"isDisabled()\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n    [class.gog-ms--open]=\"isOpen()\"\r\n    [class.gog-ms--disabled]=\"isDisabled()\"\r\n    [class.gog-ms--error]=\"hasError()\"\r\n    (click)=\"toggle()\"\r\n    (focus)=\"onFocusIn()\"\r\n    (blur)=\"onFocusOut()\"\r\n    (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.escape)=\"close()\"\r\n    (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n    (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n  >\r\n    @if (label() && isFloatLabelActive()) {\r\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n      <label class=\"gog-ms__label gog-ms__label--float\" [id]=\"labelId()\">{{ label() }}</label>\r\n    }\r\n    <span #valueEl class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\r\n      {{ summary().text || effectivePlaceholder() }}\r\n    </span>\r\n    <!--\r\n      Only what fits is shown; the rest is collapsed into a count. The tooltip is the way to read\r\n      the whole selection back, so it is bound only while something is actually hidden.\r\n    -->\r\n    @if (summary().hidden > 0) {\r\n      <span class=\"gog-ms__overflow\" aria-hidden=\"true\">+{{ summary().hidden }}</span>\r\n    }\r\n\r\n    <span class=\"gog-ms__actions\">\r\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\r\n        <gog-icon\r\n          [template]=\"chevronSlot()?.templateRef ?? null\"\r\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\r\n        />\r\n      </span>\r\n      @if (showClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-ms__clear gog-inline-center\"\r\n          (click)=\"clearValue($event)\"\r\n          [attr.aria-label]=\"resolvedClearLabel()\"\r\n        >\r\n          <gog-icon [template]=\"clearIconSlot()?.templateRef ?? null\" name=\"close\" />\r\n        </button>\r\n      }\r\n    </span>\r\n  </div>\r\n\r\n  @if (isOpen() && !resolvedAppendToBody()) {\r\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n  }\r\n\r\n  @if (visibleError()) {\r\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-ms__dropdown\"\r\n    [class.gog-ms__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-ms__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    aria-multiselectable=\"true\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    @if (showControls() && controlsPosition() === 'top') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--top\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-ms__scroll\">\r\n      <div class=\"gog-ms__options\">\r\n        @if (visibleOptions().length === 0) {\r\n          <p class=\"gog-ms__empty\">{{ filterEmptyMessage() }}</p>\r\n        }\r\n        @for (option of visibleOptions(); track valueOf(option)) {\r\n          <!--\r\n            tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\r\n            expects: focus moves between options with the arrow keys, not by tabbing\r\n            through every one. Programmatic .focus() still works on a negative tabindex.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-ms__option\"\r\n            role=\"option\"\r\n            tabindex=\"-1\"\r\n            [attr.aria-selected]=\"isSelected(option)\"\r\n            [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n            [class.gog-ms__option--selected]=\"isSelected(option)\"\r\n            [class.gog-ms__option--disabled]=\"isOptionDisabled(option)\"\r\n            (click)=\"toggleOption(option, $event)\"\r\n            (keydown)=\"onOptionKeydown($event)\"\r\n            gogRipple\r\n            [rippleDisabled]=\"!rippleEnabled()\"\r\n          >\r\n            @if (optionSlot(); as slot) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  slot.templateRef;\r\n                  context: optionContext(option, isSelected(option))\r\n                \"\r\n              />\r\n            } @else {\r\n              <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\r\n                <gog-icon [name]=\"isSelected(option) ? 'checkbox-checked' : 'checkbox'\" />\r\n              </span>\r\n              {{ labelOf(option) }}\r\n            }\r\n          </button>\r\n        }\r\n      </div>\r\n    </gog-scroll>\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--bottom\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    @if (showControls() && controlsPosition() === 'bottom') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #controlsRowTpl>\r\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">{{\r\n      resolvedSelectAllLabel()\r\n    }}</gog-button>\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">{{\r\n      resolvedClearAllLabel()\r\n    }}</gog-button>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Full selection, shown as a tooltip when the trigger can only fit part of it. -->\r\n<ng-template #selectedListTpl>\r\n  <ul class=\"gog-ms__tooltip-list\">\r\n    @for (label of selectedLabels(); track label) {\r\n      <li>{{ label }}</li>\r\n    }\r\n  </ul>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-multiselect-gap);position:relative;width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-ms-wrapper{width:fit-content}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-multiselect-size-padding-y: var(--gog-field-xsm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-xsm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-multiselect-size-padding-y: var(--gog-field-sm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-sm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-multiselect-size-padding-y: var(--gog-field-lg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-lg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-multiselect-size-padding-y: var(--gog-field-slg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-slg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-multiselect-label-font-family);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);cursor:pointer}.gog-ms{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-multiselect-field-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border);border-radius:var(--gog-multiselect-radius);color:var(--gog-multiselect-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-multiselect-transition-duration) var(--gog-easing),box-shadow var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-multiselect-focus-border)}.gog-ms:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-multiselect-border-color);box-shadow:var(--gog-multiselect-focus-glow)}.gog-ms--disabled{opacity:var(--gog-multiselect-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-multiselect-error-color)}.gog-ms__value{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));flex:1;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:1;cursor:pointer;transition:color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-multiselect-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-multiselect-border-color);transition:transform var(--gog-multiselect-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-multiselect-panel-offset));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{background-color:var(--gog-multiselect-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-multiselect-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:calc(var(--gog-multiselect-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));height:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-icon-ratio));color:var(--gog-multiselect-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-multiselect-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-error-font-size);color:var(--gog-multiselect-error-color);margin-top:var(--gog-multiselect-error-offset)}.gog-ms__label--float{position:absolute;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);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", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel"], 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"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { kind: "directive", type: GogTooltipDirective, selector: "[gogTooltip]", inputs: ["gogTooltip", "gogTooltipPosition", "gogTooltipShowDelay", "gogTooltipHideDelay", "gogTooltipDisabled", "gogTooltipClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiselectComponent, decorators: [{
             type: Component,
@@ -7910,7 +7910,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         // Only bites when the control has opted out of full width; otherwise the container decides.
                         '[style.--gog-multiselect-min-width]': 'minWidth()',
-                    }, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-ms-wrapper\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-ms-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-ms-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-ms-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-ms-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\r\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\r\n    name at all whenever `label` was set, because that also suppresses the aria-label.\r\n  -->\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div\r\n    [gogTooltip]=\"summary().hidden > 0 ? selectedListTpl : null\"\r\n    class=\"gog-ms\"\r\n    role=\"combobox\"\r\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    aria-haspopup=\"listbox\"\r\n    [attr.aria-controls]=\"listboxId()\"\r\n    [attr.aria-disabled]=\"isDisabled()\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n    [class.gog-ms--open]=\"isOpen()\"\r\n    [class.gog-ms--disabled]=\"isDisabled()\"\r\n    [class.gog-ms--error]=\"hasError()\"\r\n    (click)=\"toggle()\"\r\n    (focus)=\"onFocusIn()\"\r\n    (blur)=\"onFocusOut()\"\r\n    (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.escape)=\"close()\"\r\n    (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n    (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n  >\r\n    @if (label() && isFloatLabelActive()) {\r\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n      <label class=\"gog-ms__label gog-ms__label--float\" [id]=\"labelId()\">{{ label() }}</label>\r\n    }\r\n    <span #valueEl class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\r\n      {{ summary().text || effectivePlaceholder() }}\r\n    </span>\r\n    <!--\r\n      Only what fits is shown; the rest is collapsed into a count. The tooltip is the way to read\r\n      the whole selection back, so it is bound only while something is actually hidden.\r\n    -->\r\n    @if (summary().hidden > 0) {\r\n      <span class=\"gog-ms__overflow\" aria-hidden=\"true\">+{{ summary().hidden }}</span>\r\n    }\r\n\r\n    <span class=\"gog-ms__actions\">\r\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\r\n        <gog-icon\r\n          [template]=\"chevronSlot()?.templateRef ?? null\"\r\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\r\n        />\r\n      </span>\r\n      @if (showClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-ms__clear gog-inline-center\"\r\n          (click)=\"clearValue($event)\"\r\n          [attr.aria-label]=\"resolvedClearLabel()\"\r\n        >\r\n          <gog-icon [template]=\"clearIconSlot()?.templateRef ?? null\" name=\"close\" />\r\n        </button>\r\n      }\r\n    </span>\r\n  </div>\r\n\r\n  @if (isOpen() && !resolvedAppendToBody()) {\r\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n  }\r\n\r\n  @if (visibleError()) {\r\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-ms__dropdown\"\r\n    [class.gog-ms__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-ms__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    aria-multiselectable=\"true\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    @if (showControls() && controlsPosition() === 'top') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--top\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-ms__scroll\">\r\n      <div class=\"gog-ms__options\">\r\n        @if (visibleOptions().length === 0) {\r\n          <p class=\"gog-ms__empty\">{{ filterEmptyMessage() }}</p>\r\n        }\r\n        @for (option of visibleOptions(); track valueOf(option)) {\r\n          <!--\r\n            tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\r\n            expects: focus moves between options with the arrow keys, not by tabbing\r\n            through every one. Programmatic .focus() still works on a negative tabindex.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-ms__option\"\r\n            role=\"option\"\r\n            tabindex=\"-1\"\r\n            [attr.aria-selected]=\"isSelected(option)\"\r\n            [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n            [class.gog-ms__option--selected]=\"isSelected(option)\"\r\n            [class.gog-ms__option--disabled]=\"isOptionDisabled(option)\"\r\n            (click)=\"toggleOption(option, $event)\"\r\n            (keydown)=\"onOptionKeydown($event)\"\r\n            gogRipple\r\n            [rippleDisabled]=\"!rippleEnabled()\"\r\n          >\r\n            @if (optionSlot(); as slot) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  slot.templateRef;\r\n                  context: optionContext(option, isSelected(option))\r\n                \"\r\n              />\r\n            } @else {\r\n              <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\r\n                <gog-icon [name]=\"isSelected(option) ? 'checkbox-checked' : 'checkbox'\" />\r\n              </span>\r\n              {{ labelOf(option) }}\r\n            }\r\n          </button>\r\n        }\r\n      </div>\r\n    </gog-scroll>\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--bottom\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    @if (showControls() && controlsPosition() === 'bottom') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #controlsRowTpl>\r\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">{{\r\n      resolvedSelectAllLabel()\r\n    }}</gog-button>\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">{{\r\n      resolvedClearAllLabel()\r\n    }}</gog-button>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Full selection, shown as a tooltip when the trigger can only fit part of it. -->\r\n<ng-template #selectedListTpl>\r\n  <ul class=\"gog-ms__tooltip-list\">\r\n    @for (label of selectedLabels(); track label) {\r\n      <li>{{ label }}</li>\r\n    }\r\n  </ul>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-multiselect-gap);position:relative;width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-ms-wrapper{width:fit-content}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-multiselect-size-padding-y: var(--gog-field-xsm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-xsm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-multiselect-size-padding-y: var(--gog-field-sm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-sm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-multiselect-size-padding-y: var(--gog-field-lg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-lg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-multiselect-size-padding-y: var(--gog-field-slg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-slg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-multiselect-label-font-family);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);cursor:pointer}.gog-ms{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-multiselect-field-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border);border-radius:var(--gog-multiselect-radius);color:var(--gog-multiselect-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-multiselect-transition-duration) var(--gog-easing),box-shadow var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-multiselect-focus-border)}.gog-ms:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-multiselect-border-color);box-shadow:var(--gog-multiselect-focus-glow)}.gog-ms--disabled{opacity:var(--gog-multiselect-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-multiselect-error-color)}.gog-ms__value{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-multiselect-value-color)}.gog-ms__value--placeholder{color:var(--gog-multiselect-placeholder-color)}.gog-ms{padding-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:1;cursor:pointer;transition:color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-multiselect-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-multiselect-border-color);transition:transform var(--gog-multiselect-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-multiselect-panel-offset));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{background-color:var(--gog-multiselect-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-multiselect-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:calc(var(--gog-multiselect-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));height:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-icon-ratio));color:var(--gog-multiselect-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-multiselect-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-error-font-size);color:var(--gog-multiselect-error-color);margin-top:var(--gog-multiselect-error-offset)}.gog-ms__label--float{position:absolute;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;margin-inline-start:var(--gog-multiselect-overflow-gap);font-size:var(--gog-multiselect-overflow-font-size);color:var(--gog-multiselect-overflow-color)}.gog-ms__tooltip-list{margin:0;padding-inline-start:1.1em;text-align:start}\n"] }]
+                    }, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-ms-wrapper\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-ms-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-ms-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-ms-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-ms-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\r\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\r\n    name at all whenever `label` was set, because that also suppresses the aria-label.\r\n  -->\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div\r\n    [gogTooltip]=\"summary().hidden > 0 ? selectedListTpl : null\"\r\n    class=\"gog-ms\"\r\n    role=\"combobox\"\r\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    aria-haspopup=\"listbox\"\r\n    [attr.aria-controls]=\"listboxId()\"\r\n    [attr.aria-disabled]=\"isDisabled()\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n    [class.gog-ms--open]=\"isOpen()\"\r\n    [class.gog-ms--disabled]=\"isDisabled()\"\r\n    [class.gog-ms--error]=\"hasError()\"\r\n    (click)=\"toggle()\"\r\n    (focus)=\"onFocusIn()\"\r\n    (blur)=\"onFocusOut()\"\r\n    (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.escape)=\"close()\"\r\n    (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n    (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n  >\r\n    @if (label() && isFloatLabelActive()) {\r\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n      <label class=\"gog-ms__label gog-ms__label--float\" [id]=\"labelId()\">{{ label() }}</label>\r\n    }\r\n    <span #valueEl class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\r\n      {{ summary().text || effectivePlaceholder() }}\r\n    </span>\r\n    <!--\r\n      Only what fits is shown; the rest is collapsed into a count. The tooltip is the way to read\r\n      the whole selection back, so it is bound only while something is actually hidden.\r\n    -->\r\n    @if (summary().hidden > 0) {\r\n      <span class=\"gog-ms__overflow\" aria-hidden=\"true\">+{{ summary().hidden }}</span>\r\n    }\r\n\r\n    <span class=\"gog-ms__actions\">\r\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\r\n        <gog-icon\r\n          [template]=\"chevronSlot()?.templateRef ?? null\"\r\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\r\n        />\r\n      </span>\r\n      @if (showClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-ms__clear gog-inline-center\"\r\n          (click)=\"clearValue($event)\"\r\n          [attr.aria-label]=\"resolvedClearLabel()\"\r\n        >\r\n          <gog-icon [template]=\"clearIconSlot()?.templateRef ?? null\" name=\"close\" />\r\n        </button>\r\n      }\r\n    </span>\r\n  </div>\r\n\r\n  @if (isOpen() && !resolvedAppendToBody()) {\r\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n  }\r\n\r\n  @if (visibleError()) {\r\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-ms__dropdown\"\r\n    [class.gog-ms__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-ms__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    aria-multiselectable=\"true\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    @if (showControls() && controlsPosition() === 'top') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--top\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-ms__scroll\">\r\n      <div class=\"gog-ms__options\">\r\n        @if (visibleOptions().length === 0) {\r\n          <p class=\"gog-ms__empty\">{{ filterEmptyMessage() }}</p>\r\n        }\r\n        @for (option of visibleOptions(); track valueOf(option)) {\r\n          <!--\r\n            tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\r\n            expects: focus moves between options with the arrow keys, not by tabbing\r\n            through every one. Programmatic .focus() still works on a negative tabindex.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-ms__option\"\r\n            role=\"option\"\r\n            tabindex=\"-1\"\r\n            [attr.aria-selected]=\"isSelected(option)\"\r\n            [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n            [class.gog-ms__option--selected]=\"isSelected(option)\"\r\n            [class.gog-ms__option--disabled]=\"isOptionDisabled(option)\"\r\n            (click)=\"toggleOption(option, $event)\"\r\n            (keydown)=\"onOptionKeydown($event)\"\r\n            gogRipple\r\n            [rippleDisabled]=\"!rippleEnabled()\"\r\n          >\r\n            @if (optionSlot(); as slot) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  slot.templateRef;\r\n                  context: optionContext(option, isSelected(option))\r\n                \"\r\n              />\r\n            } @else {\r\n              <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\r\n                <gog-icon [name]=\"isSelected(option) ? 'checkbox-checked' : 'checkbox'\" />\r\n              </span>\r\n              {{ labelOf(option) }}\r\n            }\r\n          </button>\r\n        }\r\n      </div>\r\n    </gog-scroll>\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--bottom\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    @if (showControls() && controlsPosition() === 'bottom') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #controlsRowTpl>\r\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">{{\r\n      resolvedSelectAllLabel()\r\n    }}</gog-button>\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">{{\r\n      resolvedClearAllLabel()\r\n    }}</gog-button>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Full selection, shown as a tooltip when the trigger can only fit part of it. -->\r\n<ng-template #selectedListTpl>\r\n  <ul class=\"gog-ms__tooltip-list\">\r\n    @for (label of selectedLabels(); track label) {\r\n      <li>{{ label }}</li>\r\n    }\r\n  </ul>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-multiselect-gap);position:relative;width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-ms-wrapper{width:fit-content}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-multiselect-size-padding-y: var(--gog-field-xsm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-xsm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-multiselect-size-padding-y: var(--gog-field-sm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-sm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-multiselect-size-padding-y: var(--gog-field-lg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-lg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-multiselect-size-padding-y: var(--gog-field-slg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-slg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-multiselect-label-font-family);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);cursor:pointer}.gog-ms{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-multiselect-field-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border);border-radius:var(--gog-multiselect-radius);color:var(--gog-multiselect-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-multiselect-transition-duration) var(--gog-easing),box-shadow var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-multiselect-focus-border)}.gog-ms:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-multiselect-border-color);box-shadow:var(--gog-multiselect-focus-glow)}.gog-ms--disabled{opacity:var(--gog-multiselect-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-multiselect-error-color)}.gog-ms__value{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));flex:1;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:1;cursor:pointer;transition:color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-multiselect-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-multiselect-border-color);transition:transform var(--gog-multiselect-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-multiselect-panel-offset));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{background-color:var(--gog-multiselect-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-multiselect-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:calc(var(--gog-multiselect-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));height:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-icon-ratio));color:var(--gog-multiselect-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-multiselect-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-error-font-size);color:var(--gog-multiselect-error-color);margin-top:var(--gog-multiselect-error-offset)}.gog-ms__label--float{position:absolute;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);color:var(--gog-multiselect-overflow-color)}.gog-ms__tooltip-list{margin:0;padding-inline-start:1.1em;text-align:start}\n"] }]
         }], 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 }] }] } });
 /** One shared 2D context; creating a canvas per measurement is what makes this approach slow. */
 let measureContext = null;