@ember-eui/core 15.0.0 → 16.0.1

package/dist/components/eui-button-group-button.js

@@ -1,36 +1,135 @@
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import didInsert from '@ember/render-modifiers/modifiers/did-insert';
-import { eq, and, notEq } from 'ember-truth-helpers';
-import randomId from '../-private/random-id.js';
-import classNames from '../helpers/class-names.js';
-import EuiButton from './eui-button.js';
-import EuiImage from './eui-inner-text.js';
+import euiDisabledElement from '../-private/eui-disabled-element.js';
+import { randomId } from '../-private/random-id.js';
+import ScreenReaderOnlyModifier from '../modifiers/screen-reader-only.js';
+import { getEuiThemeContext } from '../utils/emotion/consume.js';
+import { euiButtonGroupButtonStyles } from '../utils/eui/buttons-misc.js';
+import { useEuiBorealisStyles, euiClass } from '../utils/eui/styles.js';
+import { a2 as euiFocusRing, a3 as euiButtonDisplayStyles, a4 as euiButtonDisplaysColors } from '../styles.generated-SYAxYhey.js';
+import EuiButtonContent from './eui-button-content.js';
+import EuiImage$1 from './eui-inner-text.js';
+import EuiToolTip from './eui-tool-tip.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
+import { n } from 'decorator-transforms/runtime-esm';
 
-const handleClick = (isNotLabel, onChange, id) => {
-  if (isNotLabel) {
-    onChange(id);
-  }
-};
-const EuiButtonGroupButton = setComponentTemplate(precompileTemplate("{{#let (if @isDisabled \"button\" @element) (randomId) (classNames (if @isSelected \"euiButtonGroupButton-isSelected\") (if @isIconOnly \"euiButtonGroupButton-isIconOnly\")) as |element newId classes|}}\n  {{#let (notEq @element \"label\") as |isNotLabel|}}\n    <EuiInnerText as |setInnerTextRef innerText|>\n      <EuiButton @baseClassName=\"euiButtonGroupButton\" class={{classes}} @element={{element}} @fill={{and (notEq @size \"compressed\") @isSelected}} @isDisabled={{@isDisabled}} @size={{if (eq @size \"compressed\") \"s\" @size}} @color={{@color}} @contentClasses={{@contentClasses}} @iconSide={{@iconSide}} @iconType={{@iconType}} @iconSize={{@iconSize}} @iconClasses={{@iconClasses}} @isLoading={{@isLoading}} @textClasses={{classNames @textClasses (if @isIconOnly \"euiScreenReaderOnly\" \"euiButtonGroupButton__textShift\")}} @isSelected={{if isNotLabel @isSelected}} type={{if isNotLabel @type}} for={{if (eq element \"label\") newId}} id={{if isNotLabel newId}} title={{innerText}} {{on \"click\" (fn handleClick isNotLabel @onChange @id)}} {{didInsert setInnerTextRef}} ...attributes>\n        {{#if (eq element \"label\")}}\n          <input id={{newId}} class=\"euiScreenReaderOnly\" name={{@name}} checked={{@isSelected}} disabled={{@isDisabled}} value={{@value}} type=\"radio\" {{on \"change\" (fn @onChange @id @value)}} />\n        {{/if}}\n        {{@label}}\n      </EuiButton>\n    </EuiInnerText>\n  {{/let}}\n{{/let}}", {
+const COLORS = new Set(['text', 'accent', 'accentSecondary', 'primary', 'success', 'warning', 'danger', 'neutral', 'risk']);
+/** The option's element, rendered with or without a tooltip anchor. */const GroupButtonElement = setComponentTemplate(precompileTemplate("{{#let @button.args @button.inputId as |args inputId|}}\n  {{#let (element @button.tagName) as |Tag|}}\n    <EuiInnerText as |setInnerTextRef innerText|>\n      <Tag class={{@button.classes}} disabled={{@button.disabledAttr}} aria-disabled={{@button.ariaDisabled}} aria-pressed={{@button.pressed}} type={{@button.type}} for={{if @button.isButton undefined inputId}} id={{if @button.isButton inputId}} title={{@button.titleFor innerText}} {{euiDisabledElement args.isDisabled args.hasAriaDisabled}} {{on \"click\" @button.onClick}} {{didInsert setInnerTextRef}} ...attributes>\n        {{#unless @button.isButton}}\n          <input id={{inputId}} name={{args.name}} checked={{args.isSelected}} value={{args.value}} type=\"radio\" {{screenReaderOnly}} {{on \"change\" (fn args.onChange args.id args.value)}} />\n        {{/unless}}\n        <EuiButtonContent class={{args.contentClasses}} @size={{@button.size}} @isDisabled={{args.isDisabled}} @isLoading={{args.isLoading}} @iconType={{args.iconType}} @iconSide={{args.iconSide}} @iconSize={{args.iconSize}} @iconClasses={{args.iconClasses}} @textClasses=\"euiButtonGroupButton__text {{args.textClasses}}\" @textCss={{@button.textCss}} @textDataText={{innerText}}>{{args.label}}</EuiButtonContent>\n      </Tag>\n    </EuiInnerText>\n  {{/let}}\n{{/let}}", {
   strictMode: true,
   scope: () => ({
-    randomId,
-    classNames,
-    notEq,
-    EuiInnerText: EuiImage,
-    EuiButton,
-    and,
-    eq,
+    EuiInnerText: EuiImage$1,
+    euiDisabledElement,
     on,
+    didInsert,
+    screenReaderOnly: ScreenReaderOnlyModifier,
     fn,
-    handleClick,
-    didInsert
+    EuiButtonContent
   })
 }), templateOnly());
+/** One option of an `EuiButtonGroup`. */
+class EuiButtonGroupButton extends Component {
+  inputId = randomId();
+  get context() {
+    return getEuiThemeContext(this);
+  }
+  get isLabel() {
+    return this.args.element === 'label';
+  }
+  get tagName() {
+    return this.isLabel && !this.args.isDisabled ? 'label' : 'button';
+  }
+  get isButton() {
+    return this.tagName === 'button';
+  }
+  get size() {
+    return this.args.size === 'm' ? 'm' : 's';
+  }
+  get color() {
+    const color = this.args.color === 'ghost' ? 'text' : this.args.color;
+    return color && COLORS.has(color) ? color : 'primary';
+  }
+  get pressed() {
+    return this.isLabel || this.args.isSelected === undefined ? undefined : String(this.args.isSelected);
+  }
+  get type() {
+    return this.isButton ? this.args.type ?? 'button' : undefined;
+  }
+  /** Native `disabled`, unless `@hasAriaDisabled` swaps it for `aria-disabled`. */
+  get disabledAttr() {
+    if (!this.isButton || this.args.hasAriaDisabled) return undefined;
+    return this.args.isDisabled;
+  }
+  get ariaDisabled() {
+    return this.args.hasAriaDisabled && this.args.isDisabled ? 'true' : undefined;
+  }
+  /** Upstream `title`: the option's own, else the button's text. */
+  titleFor = innerText => this.args.title !== undefined ? this.args.title : innerText;
+  get classes() {
+    const context = this.context;
+    const theme = context.upstream.euiTheme;
+    const display = useEuiBorealisStyles(context, euiButtonDisplayStyles);
+    const group = useEuiBorealisStyles(context, euiButtonGroupButtonStyles);
+    const colors = useEuiBorealisStyles(context, euiButtonDisplaysColors);
+    const {
+      isDisabled,
+      isSelected,
+      isIconOnly
+    } = this.args;
+    const size = this.size;
+    const color = isDisabled ? 'disabled' : this.color;
+    const displayName = isSelected && color !== 'text' ? 'fill' : 'empty';
+    const css = euiClass(context,
+    // React's global reset, scoped (`border` comes from the group styles).
+    {
+      boxSizing: 'border-box',
+      margin: 0,
+      padding: 0,
+      fontFamily: theme.font.family,
+      textDecoration: 'none'
+    }, `&:focus { ${euiFocusRing(context.upstream)} }`,
+    // A single selection option is a <label> around a hidden radio: show
+    // the focus ring of the radio on the label.
+    `&:has(> input:focus-visible) { outline: ${theme.focus.width} solid ${theme.focus.color}; outline-style: auto; outline-offset: 0; }`, display.euiButtonDisplay, display[size], isDisabled && display.isDisabled, group.euiButtonGroupButton, isIconOnly && group.iconOnly.iconOnly, isIconOnly && group.iconOnly[size], group[size], isSelected && color === 'text' && group.isSelected, isDisabled && isSelected ? group.disabledAndSelected : colors[displayName][color]);
+    return ['euiButtonGroupButton', isSelected && 'euiButtonGroupButton-isSelected', isIconOnly && 'euiButtonGroupButton-isIconOnly', css].filter(Boolean).join(' ');
+  }
+  static {
+    n(this.prototype, "classes", [cached]);
+  }
+  get textCss() {
+    const group = useEuiBorealisStyles(this.context, euiButtonGroupButtonStyles);
+    return this.args.isIconOnly ? group.text.euiButtonGroupButton__iconOnly : group.text.euiButtonGroupButton__text;
+  }
+  static {
+    n(this.prototype, "textCss", [cached]);
+  }
+  get toolTipAnchorClass() {
+    return ['euiButtonGroup__tooltipWrapper', this.args.isSelected && 'euiButtonGroup__tooltipWrapper-isSelected'].filter(Boolean).join(' ');
+  }
+  /** Upstream's `anchorProps.css` on the tooltip anchor. */
+  get toolTipAnchorCss() {
+    return useEuiBorealisStyles(this.context, euiButtonGroupButtonStyles).tooltipWrapper;
+  }
+  static {
+    n(this.prototype, "toolTipAnchorCss", [cached]);
+  }
+  onClick = () => {
+    if (!this.isLabel) this.args.onChange(this.args.id);
+  };
+  static {
+    setComponentTemplate(precompileTemplate("{{#if @toolTipContent}}\n  <EuiToolTip @content={{@toolTipContent}} @position={{@toolTipProps.position}} @title={{@toolTipProps.title}} @delay={{@toolTipProps.delay}} @anchorClassName={{this.toolTipAnchorClass}} @anchorCss={{this.toolTipAnchorCss}}>\n    <GroupButtonElement @button={{this}} ...attributes />\n  </EuiToolTip>\n{{else}}\n  <GroupButtonElement @button={{this}} ...attributes />\n{{/if}}", {
+      strictMode: true,
+      scope: () => ({
+        EuiToolTip,
+        GroupButtonElement
+      })
+    }), this);
+  }
+}
 
 export { EuiButtonGroupButton as default };
 //# sourceMappingURL=eui-button-group-button.js.map

package/dist/components/eui-button-group-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-button-group-button.js","sources":["../../src/components/eui-button-group-button.gts"],"sourcesContent":["import { fn } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport didInsert from '@ember/render-modifiers/modifiers/did-insert';\n\nimport { and, eq, notEq } from 'ember-truth-helpers';\n\nimport randomId from '../-private/random-id.ts';\nimport classNames from '../helpers/class-names.ts';\nimport EuiButton from './eui-button.gts';\nimport EuiInnerText from './eui-inner-text.gts';\n\nimport type { EuiButtonSignature } from './eui-button';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiButtonGroupButtonSignature {\n  Element: EuiButtonSignature['Element'];\n  Args: {\n    /** Id of the option, passed to `@onChange`. */\n    id: string;\n    /** Value of the option, passed to `@onChange` for single selection. */\n    value?: string;\n    /**\n     * `'label'` wraps a hidden radio input (single selection groups),\n     * `'button'` renders a toggle button (multi selection groups).\n     */\n    element?: 'label' | 'button';\n    /** `name` of the radio input, shared by the group's buttons. */\n    name?: string;\n    /** The button's text (visually hidden with `@isIconOnly`). */\n    label?: string;\n    /** Disables the button. */\n    isDisabled?: boolean;\n    /** Whether the option is selected. */\n    isSelected?: boolean;\n    /** Shows only the icon; the label is kept for screen readers. */\n    isIconOnly?: boolean;\n    /** `'s'`, `'m'` or `'compressed'`. */\n    size?: EuiButtonSignature['Args']['size'];\n    /** Color of the selected button, see `EuiButtonGroup`. */\n    color?: EuiButtonSignature['Args']['color'];\n    /** Classes for the element wrapping the icon and text. */\n    contentClasses?: EuiButtonSignature['Args']['contentClasses'];\n    /** `'right'` puts the icon after the text. */\n    iconSide?: EuiButtonSignature['Args']['iconSide'];\n    /** Icon of the button; anything `EuiIcon`'s `@type` accepts. */\n    iconType?: EuiButtonSignature['Args']['iconType'];\n    /** Size of the icon. */\n    iconSize?: EuiButtonSignature['Args']['iconSize'];\n    /** Extra classes for the icon. */\n    iconClasses?: EuiButtonSignature['Args']['iconClasses'];\n    /** Shows a spinner instead of the icon. */\n    isLoading?: EuiButtonSignature['Args']['isLoading'];\n    /** Classes for the element wrapping the text. */\n    textClasses?: EuiButtonSignature['Args']['textClasses'];\n    /** `type` of the button (multi selection only). */\n    type?: EuiButtonSignature['Args']['type'];\n    /**\n     * Called with the option's `id` (and `value` for single selection) when\n     * it is clicked.\n     */\n    onChange: (id: string, value?: string) => void;\n  };\n}\n\nconst handleClick = (\n  isNotLabel: boolean,\n  onChange: (id: string, value?: string) => void,\n  id: string\n) => {\n  if (isNotLabel) {\n    onChange(id);\n  }\n};\n\nconst EuiButtonGroupButton: TemplateOnlyComponent<EuiButtonGroupButtonSignature> =\n  <template>\n    {{#let\n      (if @isDisabled \"button\" @element)\n      (randomId)\n      (classNames\n        (if @isSelected \"euiButtonGroupButton-isSelected\")\n        (if @isIconOnly \"euiButtonGroupButton-isIconOnly\")\n      )\n      as |element newId classes|\n    }}\n      {{#let (notEq @element \"label\") as |isNotLabel|}}\n        <EuiInnerText as |setInnerTextRef innerText|>\n          <EuiButton\n            @baseClassName=\"euiButtonGroupButton\"\n            class={{classes}}\n            @element={{element}}\n            @fill={{and (notEq @size \"compressed\") @isSelected}}\n            @isDisabled={{@isDisabled}}\n            @size={{if (eq @size \"compressed\") \"s\" @size}}\n            @color={{@color}}\n            @contentClasses={{@contentClasses}}\n            @iconSide={{@iconSide}}\n            @iconType={{@iconType}}\n            @iconSize={{@iconSize}}\n            @iconClasses={{@iconClasses}}\n            @isLoading={{@isLoading}}\n            @textClasses={{classNames\n              @textClasses\n              (if\n                @isIconOnly\n                \"euiScreenReaderOnly\"\n                \"euiButtonGroupButton__textShift\"\n              )\n            }}\n            @isSelected={{if isNotLabel @isSelected}}\n            type={{if isNotLabel @type}}\n            for={{if (eq element \"label\") newId}}\n            id={{if isNotLabel newId}}\n            title={{innerText}}\n            {{on \"click\" (fn handleClick isNotLabel @onChange @id)}}\n            {{didInsert setInnerTextRef}}\n            ...attributes\n          >\n            {{#if (eq element \"label\")}}\n              <input\n                id={{newId}}\n                class=\"euiScreenReaderOnly\"\n                name={{@name}}\n                checked={{@isSelected}}\n                disabled={{@isDisabled}}\n                value={{@value}}\n                type=\"radio\"\n                {{on \"change\" (fn @onChange @id @value)}}\n              />\n            {{/if}}\n            {{@label}}\n          </EuiButton>\n        </EuiInnerText>\n      {{/let}}\n    {{/let}}\n  </template>;\n\nexport default EuiButtonGroupButton;\n"],"names":["handleClick","isNotLabel","onChange","id","EuiButtonGroupButton","setComponentTemplate","precompileTemplate","strictMode","scope","randomId","classNames","notEq","EuiInnerText","EuiButton","and","eq","on","fn","didInsert","templateOnly"],"mappings":";;;;;;;;;;;;AAgEA,MAAMA,WAAA,GAAcA,CAClBC,UAAmB,EACnBC,QAA8C,EAC9CC,EAAU,KAAA;AAEV,EAAA,IAAIF,UAAA,EAAY;IACdC,QAAA,CAASC,EAAA,CAAA;AACX,EAAA;AACF,CAAA;AAEA,MAAMC,oBAA4C,GAAAC,oBAAA,CAChDC,kBAAA,CAAA,u6CAAA,EA4DA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,QAAA;IAAAC,UAAA;IAAAC,KAAA;kBAAAC,QAAA;IAAAC,SAAA;IAAAC,GAAA;IAAAC,EAAA;IAAAC,EAAA;IAAAC,EAAA;IAAAjB,WAAA;AAAAkB,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}
+{"version":3,"file":"eui-button-group-button.js","sources":["../../src/components/eui-button-group-button.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\nimport { fn } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport didInsert from '@ember/render-modifiers/modifiers/did-insert';\n\nimport euiDisabledElement from '../-private/eui-disabled-element.ts';\nimport { randomId } from '../-private/random-id.ts';\nimport screenReaderOnly from '../modifiers/screen-reader-only.ts';\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport { euiButtonGroupButtonStyles } from '../utils/eui/buttons-misc.ts';\nimport { euiClass, useEuiBorealisStyles } from '../utils/eui/styles.ts';\nimport type { EuiCss } from '../utils/eui/styles.ts';\nimport {\n  euiButtonDisplayStyles,\n  euiButtonDisplaysColors,\n  euiFocusRing\n} from '../utils/eui/styles.generated.ts';\nimport EuiButtonContent from './eui-button-content.gts';\nimport EuiInnerText from './eui-inner-text.gts';\nimport EuiToolTip from './eui-tool-tip.gts';\n\nimport type { EuiButtonSignature } from './eui-button';\nimport type { EuiButtonContentSignature } from './eui-button-content';\nimport type { EuiTooltipArgs } from './eui-tool-tip';\nimport type { TOC } from '@ember/component/template-only';\n\n/** Upstream `EuiButtonGroup` colors (`BUTTON_COLORS`). */\nconst COLORS = new Set([\n  'text',\n  'accent',\n  'accentSecondary',\n  'primary',\n  'success',\n  'warning',\n  'danger',\n  'neutral',\n  'risk'\n]);\n\nexport interface EuiButtonGroupButtonSignature {\n  Element: EuiButtonSignature['Element'];\n  Args: {\n    /** Id of the option, passed to `@onChange`. */\n    id: string;\n    /** Value of the option, passed to `@onChange` for single selection. */\n    value?: string;\n    /**\n     * `'label'` wraps a visually hidden radio input (single selection\n     * groups), `'button'` renders a toggle button (multi selection groups).\n     * Defaults to `'button'`. A disabled option always renders a button.\n     */\n    element?: 'label' | 'button';\n    /** `name` of the radio input, shared by the group's buttons. */\n    name?: string;\n    /** The button's text (visually hidden with `@isIconOnly`). */\n    label?: string;\n    /** Disables the button. */\n    isDisabled?: boolean;\n    /**\n     * Beta: a disabled button gets `aria-disabled=\"true\"` instead of\n     * `disabled`, so it stays focusable (e.g. for its tooltip).\n     */\n    hasAriaDisabled?: boolean;\n    /**\n     * Native browser tooltip. Defaults to the button's text; pass `''` to\n     * unset it.\n     */\n    title?: string;\n    /** Whether the option is selected. */\n    isSelected?: boolean;\n    /** Shows only the icon; the label is kept for screen readers. */\n    isIconOnly?: boolean;\n    /** `'s'`, `'m'` or `'compressed'` (same height as `'s'`). */\n    size?: 's' | 'm' | 'compressed';\n    /** Color of the selected button, see `EuiButtonGroup`. */\n    color?: string;\n    /** Classes for the element wrapping the icon and text. */\n    contentClasses?: string;\n    /** `'right'` puts the icon after the text. */\n    iconSide?: EuiButtonContentSignature['Args']['iconSide'];\n    /** Icon of the button; anything `EuiIcon`'s `@type` accepts. */\n    iconType?: EuiButtonContentSignature['Args']['iconType'];\n    /** Size of the icon. */\n    iconSize?: EuiButtonContentSignature['Args']['iconSize'];\n    /** Extra classes for the icon. */\n    iconClasses?: string;\n    /** Shows a spinner instead of the icon. */\n    isLoading?: boolean;\n    /** Classes for the element wrapping the text. */\n    textClasses?: string;\n    /** `type` of the button (multi selection only). */\n    type?: string;\n    /** Tooltip text shown on hover and focus. */\n    toolTipContent?: string;\n    /** `EuiToolTip` options for `@toolTipContent`. */\n    toolTipProps?: Pick<EuiTooltipArgs, 'position' | 'title' | 'delay'>;\n    /**\n     * Called with the option's `id` (and `value` for single selection) when\n     * it is clicked.\n     */\n    onChange: (id: string, value?: string) => void;\n  };\n}\n\ninterface GroupButtonElementSignature {\n  Element: EuiButtonGroupButtonSignature['Element'];\n  Args: { button: EuiButtonGroupButton };\n}\n\n/** The option's element, rendered with or without a tooltip anchor. */\nconst GroupButtonElement: TOC<GroupButtonElementSignature> = <template>\n  {{#let @button.args @button.inputId as |args inputId|}}\n    {{#let (element @button.tagName) as |Tag|}}\n      <EuiInnerText as |setInnerTextRef innerText|>\n        <Tag\n          class={{@button.classes}}\n          disabled={{@button.disabledAttr}}\n          aria-disabled={{@button.ariaDisabled}}\n          aria-pressed={{@button.pressed}}\n          type={{@button.type}}\n          for={{if @button.isButton undefined inputId}}\n          id={{if @button.isButton inputId}}\n          title={{@button.titleFor innerText}}\n          {{euiDisabledElement args.isDisabled args.hasAriaDisabled}}\n          {{on \"click\" @button.onClick}}\n          {{didInsert setInnerTextRef}}\n          ...attributes\n        >\n          {{#unless @button.isButton}}\n            <input\n              id={{inputId}}\n              name={{args.name}}\n              checked={{args.isSelected}}\n              value={{args.value}}\n              type=\"radio\"\n              {{screenReaderOnly}}\n              {{on \"change\" (fn args.onChange args.id args.value)}}\n            />\n          {{/unless}}\n          <EuiButtonContent\n            class={{args.contentClasses}}\n            @size={{@button.size}}\n            @isDisabled={{args.isDisabled}}\n            @isLoading={{args.isLoading}}\n            @iconType={{args.iconType}}\n            @iconSide={{args.iconSide}}\n            @iconSize={{args.iconSize}}\n            @iconClasses={{args.iconClasses}}\n            @textClasses=\"euiButtonGroupButton__text {{args.textClasses}}\"\n            @textCss={{@button.textCss}}\n            @textDataText={{innerText}}\n          >{{args.label}}</EuiButtonContent>\n        </Tag>\n      </EuiInnerText>\n    {{/let}}\n  {{/let}}\n</template>;\n\n/** One option of an `EuiButtonGroup`. */\nexport default class EuiButtonGroupButton extends Component<EuiButtonGroupButtonSignature> {\n  inputId = randomId();\n\n  get context() {\n    return getEuiThemeContext(this);\n  }\n  get isLabel() {\n    return this.args.element === 'label';\n  }\n  get tagName() {\n    return this.isLabel && !this.args.isDisabled ? 'label' : 'button';\n  }\n  get isButton() {\n    return this.tagName === 'button';\n  }\n  get size(): 's' | 'm' {\n    return this.args.size === 'm' ? 'm' : 's';\n  }\n  get color() {\n    const color = this.args.color === 'ghost' ? 'text' : this.args.color;\n    return color && COLORS.has(color) ? color : 'primary';\n  }\n  get pressed() {\n    return this.isLabel || this.args.isSelected === undefined\n      ? undefined\n      : String(this.args.isSelected);\n  }\n  get type() {\n    return this.isButton ? (this.args.type ?? 'button') : undefined;\n  }\n  /** Native `disabled`, unless `@hasAriaDisabled` swaps it for `aria-disabled`. */\n  get disabledAttr() {\n    if (!this.isButton || this.args.hasAriaDisabled) return undefined;\n    return this.args.isDisabled;\n  }\n  get ariaDisabled() {\n    return this.args.hasAriaDisabled && this.args.isDisabled\n      ? 'true'\n      : undefined;\n  }\n  /** Upstream `title`: the option's own, else the button's text. */\n  titleFor = (innerText: string | undefined) =>\n    this.args.title !== undefined ? this.args.title : innerText;\n\n  @cached\n  get classes() {\n    const context = this.context;\n    const theme = context.upstream.euiTheme;\n    const display = useEuiBorealisStyles(context, euiButtonDisplayStyles);\n    const group = useEuiBorealisStyles(context, euiButtonGroupButtonStyles);\n    const colors = useEuiBorealisStyles(context, euiButtonDisplaysColors);\n    const { isDisabled, isSelected, isIconOnly } = this.args;\n    const size = this.size;\n    const color = isDisabled ? 'disabled' : this.color;\n    const displayName = isSelected && color !== 'text' ? 'fill' : 'empty';\n    const css = euiClass(\n      context,\n      // React's global reset, scoped (`border` comes from the group styles).\n      {\n        boxSizing: 'border-box',\n        margin: 0,\n        padding: 0,\n        fontFamily: theme.font.family,\n        textDecoration: 'none'\n      },\n      `&:focus { ${euiFocusRing(context.upstream)} }`,\n      // A single selection option is a <label> around a hidden radio: show\n      // the focus ring of the radio on the label.\n      `&:has(> input:focus-visible) { outline: ${theme.focus.width} solid ${theme.focus.color}; outline-style: auto; outline-offset: 0; }`,\n      display.euiButtonDisplay,\n      display[size],\n      isDisabled && display.isDisabled,\n      group.euiButtonGroupButton,\n      isIconOnly && group.iconOnly.iconOnly,\n      isIconOnly && group.iconOnly[size],\n      group[size],\n      isSelected && color === 'text' && group.isSelected,\n      isDisabled && isSelected\n        ? group.disabledAndSelected\n        : colors[displayName]![color]\n    );\n    return [\n      'euiButtonGroupButton',\n      isSelected && 'euiButtonGroupButton-isSelected',\n      isIconOnly && 'euiButtonGroupButton-isIconOnly',\n      css\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  @cached\n  get textCss() {\n    const group = useEuiBorealisStyles(this.context, euiButtonGroupButtonStyles);\n    return this.args.isIconOnly\n      ? group.text.euiButtonGroupButton__iconOnly\n      : group.text.euiButtonGroupButton__text;\n  }\n\n  get toolTipAnchorClass() {\n    return [\n      'euiButtonGroup__tooltipWrapper',\n      this.args.isSelected && 'euiButtonGroup__tooltipWrapper-isSelected'\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  /** Upstream's `anchorProps.css` on the tooltip anchor. */\n  @cached\n  get toolTipAnchorCss(): EuiCss {\n    return useEuiBorealisStyles(this.context, euiButtonGroupButtonStyles)\n      .tooltipWrapper;\n  }\n\n  onClick = () => {\n    if (!this.isLabel) this.args.onChange(this.args.id);\n  };\n\n  <template>\n    {{#if @toolTipContent}}\n      <EuiToolTip\n        @content={{@toolTipContent}}\n        @position={{@toolTipProps.position}}\n        @title={{@toolTipProps.title}}\n        @delay={{@toolTipProps.delay}}\n        @anchorClassName={{this.toolTipAnchorClass}}\n        @anchorCss={{this.toolTipAnchorCss}}\n      >\n        <GroupButtonElement @button={{this}} ...attributes />\n      </EuiToolTip>\n    {{else}}\n      <GroupButtonElement @button={{this}} ...attributes />\n    {{/if}}\n  </template>\n}\n"],"names":["COLORS","Set","GroupButtonElement","setComponentTemplate","precompileTemplate","strictMode","scope","EuiInnerText","euiDisabledElement","on","didInsert","screenReaderOnly","fn","EuiButtonContent","templateOnly","EuiButtonGroupButton","Component","inputId","randomId","context","getEuiThemeContext","isLabel","args","element","tagName","isDisabled","isButton","size","color","has","pressed","isSelected","undefined","String","type","disabledAttr","hasAriaDisabled","ariaDisabled","titleFor","innerText","title","classes","theme","upstream","euiTheme","display","useEuiBorealisStyles","euiButtonDisplayStyles","group","euiButtonGroupButtonStyles","colors","euiButtonDisplaysColors","isIconOnly","displayName","css","euiClass","boxSizing","margin","padding","fontFamily","font","family","textDecoration","euiFocusRing","focus","width","euiButtonDisplay","euiButtonGroupButton","iconOnly","disabledAndSelected","filter","Boolean","join","n","prototype","cached","textCss","text","euiButtonGroupButton__iconOnly","euiButtonGroupButton__text","toolTipAnchorClass","toolTipAnchorCss","tooltipWrapper","onClick","onChange","id","EuiToolTip"],"mappings":"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"}

package/dist/components/eui-button-group.js

@@ -1,28 +1,204 @@
-import { get } from '@ember/helper';
-import { notEq, eq, and } from 'ember-truth-helpers';
-import randomId from '../-private/random-id.js';
-import argOrDefault from '../helpers/arg-or-default.js';
-import classNames from '../helpers/class-names.js';
-import screenReaderOnly from '../modifiers/screen-reader-only.js';
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
+import { hash } from '@ember/helper';
+import { randomId } from '../-private/random-id.js';
+import ScreenReaderOnlyModifier from '../modifiers/screen-reader-only.js';
+import { getEuiThemeContext } from '../utils/emotion/consume.js';
+import { euiClass, useEuiBorealisStyles } from '../utils/eui/styles.js';
+import { a7 as euiButtonGroupStyles, a8 as euiButtonGroupButtonsStyles } from '../styles.generated-SYAxYhey.js';
+import EuiButton from './eui-button.js';
+import EuiButtonEmpty from './eui-button-empty.js';
 import EuiButtonGroupButton from './eui-button-group-button.js';
+import EuiButtonIcon from './eui-button-icon.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import templateOnly from '@ember/component/template-only';
+import { n } from 'decorator-transforms/runtime-esm';
 
-const EuiButtonGroup = setComponentTemplate(precompileTemplate("{{#let (argOrDefault @buttonSize \"s\") (argOrDefault @color \"text\") (argOrDefault @isFullWidth false) (argOrDefault @isDisabled false) (argOrDefault @type \"single\") as |buttonSize color isFullWidth isDisabled type|}}\n  {{#let (if (and (eq buttonSize \"compressed\") (eq color \"ghost\")) \"text\" color) (eq type \"single\") as |resolvedColor typeIsSingle|}}\n\n    <fieldset class={{classNames \"euiButtonGroup\" (if isFullWidth \"euiButtonGroup--fullWidth\") (if isDisabled \"euiButtonGroup--isDisabled\") @className componentName=\"EuiButtonGroup\" size=(argOrDefault buttonSize \"s\") color=resolvedColor}} disabled={{isDisabled}} ...attributes>\n      <legend {{screenReaderOnly}}>{{@legend}}</legend>\n      <div class=\"euiButtonGroup__buttons\">\n        {{#let (argOrDefault @name (randomId)) as |name|}}\n          {{#each @options as |option|}}\n            <EuiButtonGroupButton @name={{name}} @isDisabled={{if (notEq option.isDisabled undefined) option.isDisabled isDisabled}} @element={{if typeIsSingle \"label\" \"button\"}} @isSelected={{if typeIsSingle (eq option.id @idSelected) (get @idToSelectedMap option.id)}} @color={{resolvedColor}} @size={{buttonSize}} @isIconOnly={{@isIconOnly}} @onChange={{@onChange}} @iconType={{option.iconType}} @value={{option.value}} @label={{option.label}} @id={{option.id}} @isLoading={{option.isLoading}} @iconSide={{option.iconSide}} @iconSize={{option.iconSize}} @textClasses={{option.textClasses}} @contentClasses={{option.contentClasses}} @iconClasses={{option.iconClasses}} @type={{option.type}} class={{option.className}} aria-label={{option.aria-label}} />\n          {{/each}}\n        {{/let}}\n      </div>\n    </fieldset>\n  {{/let}}\n{{/let}}", {
-  strictMode: true,
-  scope: () => ({
-    argOrDefault,
-    and,
-    eq,
-    classNames,
-    screenReaderOnly,
-    randomId,
-    EuiButtonGroupButton,
-    notEq,
-    get
-  })
-}), templateOnly());
+/**
+ * A group of buttons. With `@options`: toggle buttons picking one option or
+ * several. With a block: the yielded buttons in a row, a segmented control
+ * or a selection control (upstream's children API).
+ */
+class EuiButtonGroup extends Component {
+  defaultName = randomId();
+  get context() {
+    return getEuiThemeContext(this);
+  }
+  /** Upstream renders the `options` API when `options` is passed. */
+  get isOptionsMode() {
+    return Boolean(this.args.options);
+  }
+  get buttonSize() {
+    return this.args.buttonSize ?? 's';
+  }
+  get size() {
+    return this.buttonSize === 'm' ? 'm' : 's';
+  }
+  get color() {
+    const color = this.args.color ?? 'text';
+    // Compressed ghost groups were always text; latest EUI has no ghost.
+    return color === 'ghost' ? 'text' : color;
+  }
+  get typeIsSingle() {
+    return (this.args.type ?? 'single') === 'single';
+  }
+  get name() {
+    return this.args.name ?? this.defaultName;
+  }
+  /** Options API: `disabled` on the fieldset, or `aria-disabled` instead. */
+  get fieldsetDisabled() {
+    return this.args.hasAriaDisabled ? undefined : this.args.isDisabled;
+  }
+  get fieldsetAriaDisabled() {
+    return this.args.hasAriaDisabled ? String(Boolean(this.args.isDisabled)) : undefined;
+  }
+  get classes() {
+    const context = this.context;
+    return ['euiButtonGroup', this.args.isDisabled && 'euiButtonGroup-isDisabled', this.args.className, euiClass(context,
+    // React's global reset for <fieldset>.
+    {
+      boxSizing: 'border-box',
+      margin: 0,
+      padding: 0,
+      border: 'none',
+      minInlineSize: 'auto'
+    }, euiButtonGroupStyles.euiButtonGroup, this.args.isFullWidth && euiButtonGroupStyles.fullWidth, this.args.css)].filter(Boolean).join(' ');
+  }
+  static {
+    n(this.prototype, "classes", [cached]);
+  }
+  get buttonsClasses() {
+    const context = this.context;
+    const styles = useEuiBorealisStyles(context, euiButtonGroupButtonsStyles);
+    return `euiButtonGroup__buttons ${euiClass(context, {
+      boxSizing: 'border-box'
+    }, styles.euiButtonGroup__buttons, this.args.isFullWidth && styles.fullWidth, styles.size[this.size])}`;
+  }
+  static {
+    n(this.prototype, "buttonsClasses", [cached]);
+  }
+  isSelected = option => this.typeIsSingle ? option.id === this.args.idSelected : this.args.idToSelectedMap?.[option.id];
+  optionDisabled = option => option.isDisabled !== undefined ? option.isDisabled : this.args.isDisabled;
+  optionHasAriaDisabled = option => option.hasAriaDisabled !== undefined ? option.hasAriaDisabled : this.args.hasAriaDisabled;
+  onChange = (id, value) => {
+    this.args.onChange?.(id, value);
+  };
+  // Children API (a block instead of `@options`).
+  get variant() {
+    return this.args.variant ?? 'default';
+  }
+  get isSegmented() {
+    return this.variant === 'segmented';
+  }
+  get isSelection() {
+    return this.variant === 'selection';
+  }
+  get hasSegmentedStyle() {
+    return this.isSegmented || this.isSelection;
+  }
+  get layout() {
+    return this.args.layout ?? 'horizontal';
+  }
+  get display() {
+    return this.args.display ?? 'regular';
+  }
+  get gutterSize() {
+    return this.args.gutterSize ?? 's';
+  }
+  get dataDisplay() {
+    return this.isSelection ? this.display : undefined;
+  }
+  get dataLayout() {
+    return this.hasSegmentedStyle ? this.layout : undefined;
+  }
+  get dataDividers() {
+    return this.hasSegmentedStyle && this.args.showDividers ? 'true' : undefined;
+  }
+  get ariaDisabled() {
+    return this.args.isDisabled ? 'true' : undefined;
+  }
+  get containerClasses() {
+    const context = this.context;
+    const styles = useEuiBorealisStyles(context, euiButtonGroupButtonsStyles);
+    return `euiButtonGroup__container ${euiClass(context, {
+      boxSizing: 'border-box'
+    }, styles.euiButtonGroup__container, this.args.isFullWidth && this.layout !== 'vertical' && styles.fullWidth)}`;
+  }
+  static {
+    n(this.prototype, "containerClasses", [cached]);
+  }
+  get childrenButtonsClasses() {
+    const context = this.context;
+    const styles = useEuiBorealisStyles(context, euiButtonGroupButtonsStyles);
+    const gutterSize = this.gutterSize;
+    const hasGutterSize = this.variant === 'default' && gutterSize !== 'none';
+    return `euiButtonGroup__buttons ${euiClass(context, {
+      boxSizing: 'border-box'
+    }, styles.euiButtonGroup__buttons, hasGutterSize && styles.gutterSize[gutterSize], this.hasSegmentedStyle && this.args.wrap === false && styles.noWrap)}`;
+  }
+  /** Upstream `useEuiButtonGroupSelection`: purely controlled by the args. */
+  static {
+    n(this.prototype, "childrenButtonsClasses", [cached]);
+  }
+  isIdSelected = id => this.args.type === 'multi' ? Boolean(this.args.idToSelectedMap?.[id]) : id === this.args.idSelected;
+  getSelectionProps = (id, isDisabled) => {
+    const selected = this.isIdSelected(id);
+    const isInverse = this.display === 'inverse';
+    const hasFill = selected && this.display === 'highlighted' || Boolean(selected && isDisabled);
+    return {
+      isSelected: selected,
+      fill: isInverse ? false : hasFill,
+      display: isInverse ? 'base' : hasFill ? 'fill' : undefined,
+      onSelect: () => this.args.onChange?.(id)
+    };
+  };
+  /** Upstream `EuiButtonContext` value; its getters keep the args tracked. */
+  buttonContext = createButtonContext(this);
+  static {
+    setComponentTemplate(precompileTemplate("{{#if this.isOptionsMode}}\n  <fieldset class={{this.classes}} disabled={{this.fieldsetDisabled}} aria-disabled={{this.fieldsetAriaDisabled}} ...attributes>\n    <legend {{screenReaderOnly}}>{{@legend}}</legend>\n    <div class={{this.buttonsClasses}}>\n      {{#each @options as |option|}}\n        <EuiButtonGroupButton @name={{this.name}} @isDisabled={{this.optionDisabled option}} @hasAriaDisabled={{this.optionHasAriaDisabled option}} @element={{if this.typeIsSingle \"label\" \"button\"}} @isSelected={{this.isSelected option}} @color={{this.color}} @size={{this.buttonSize}} @isIconOnly={{@isIconOnly}} @onChange={{this.onChange}} @iconType={{option.iconType}} @value={{option.value}} @label={{option.label}} @id={{option.id}} @isLoading={{option.isLoading}} @iconSide={{option.iconSide}} @iconSize={{option.iconSize}} @textClasses={{option.textClasses}} @contentClasses={{option.contentClasses}} @iconClasses={{option.iconClasses}} @type={{option.type}} @title={{option.title}} @toolTipContent={{option.toolTipContent}} @toolTipProps={{option.toolTipProps}} class={{option.className}} aria-label={{option.aria-label}} />\n      {{/each}}\n    </div>\n  </fieldset>\n{{else}}\n  <div class={{this.classes}} role=\"group\" data-variant={{this.variant}} data-size={{this.size}} data-display={{this.dataDisplay}} data-layout={{this.dataLayout}} data-dividers={{this.dataDividers}} aria-label={{@legend}} aria-disabled={{this.ariaDisabled}} ...attributes>\n    <div class={{this.containerClasses}}>\n      <div class={{this.childrenButtonsClasses}}>\n        {{yield (hash Button=(component EuiButton buttonContext=this.buttonContext) ButtonEmpty=(component EuiButtonEmpty buttonContext=this.buttonContext) ButtonIcon=(component EuiButtonIcon buttonContext=this.buttonContext))}}\n      </div>\n    </div>\n  </div>\n{{/if}}", {
+      strictMode: true,
+      scope: () => ({
+        screenReaderOnly: ScreenReaderOnlyModifier,
+        EuiButtonGroupButton,
+        hash,
+        EuiButton,
+        EuiButtonEmpty,
+        EuiButtonIcon
+      })
+    }), this);
+  }
+}
+function createButtonContext(group) {
+  return {
+    get size() {
+      return group.size;
+    },
+    get isDisabled() {
+      return group.args.isDisabled ? true : undefined;
+    },
+    get hasAriaDisabled() {
+      return group.args.hasAriaDisabled ? true : undefined;
+    },
+    get fullWidth() {
+      return Boolean(group.args.isFullWidth);
+    },
+    get color() {
+      return group.hasSegmentedStyle ? 'text' : undefined;
+    },
+    get display() {
+      return group.isSegmented ? 'base' : undefined;
+    },
+    get fill() {
+      return group.isSegmented ? false : undefined;
+    },
+    get getSelectionProps() {
+      return group.isSelection ? group.getSelectionProps : undefined;
+    },
+    get wrapInItem() {
+      return group.hasSegmentedStyle;
+    }
+  };
+}
 
 export { EuiButtonGroup, EuiButtonGroup as default };
 //# sourceMappingURL=eui-button-group.js.map

package/dist/components/eui-button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-button-group.js","sources":["../../src/components/eui-button-group.gts"],"sourcesContent":["import { get } from '@ember/helper';\n\nimport { and, eq } from 'ember-truth-helpers';\nimport { notEq } from 'ember-truth-helpers';\n\nimport randomId from '../-private/random-id.ts';\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport screenReaderOnly from '../modifiers/screen-reader-only.ts';\nimport EuiButtonGroupButton from './eui-button-group-button.gts';\n\nimport type { EuiButtonGroupButtonSignature } from './eui-button-group-button';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface Option {\n  /** Disables this option. Defaults to the group's `@isDisabled`. */\n  isDisabled?: boolean;\n  /** Icon of the option; required for `@isIconOnly` groups. */\n  iconType?: EuiButtonGroupButtonSignature['Args']['iconType'];\n  /** Value passed to `@onChange` (single selection only). */\n  value?: EuiButtonGroupButtonSignature['Args']['value'];\n  /**\n   * Text of the option. Always set it: with `@isIconOnly` it is hidden but\n   * read by screen readers.\n   */\n  label?: EuiButtonGroupButtonSignature['Args']['label'];\n  /** Unique id of the option, used by `@idSelected` / `@idToSelectedMap`. */\n  id: EuiButtonGroupButtonSignature['Args']['id'];\n  /** Shows a spinner instead of the icon. */\n  isLoading?: EuiButtonGroupButtonSignature['Args']['isLoading'];\n  /** `'right'` puts the icon after the text. */\n  iconSide?: EuiButtonGroupButtonSignature['Args']['iconSide'];\n  /** Size of the icon. */\n  iconSize?: EuiButtonGroupButtonSignature['Args']['iconSize'];\n  /** Classes for the element wrapping the text. */\n  textClasses?: EuiButtonGroupButtonSignature['Args']['textClasses'];\n  /** Classes for the element wrapping the icon and text. */\n  contentClasses?: EuiButtonGroupButtonSignature['Args']['contentClasses'];\n  /** Extra classes for the icon. */\n  iconClasses?: EuiButtonGroupButtonSignature['Args']['iconClasses'];\n  /** `type` of the button (multi selection only). */\n  type?: EuiButtonGroupButtonSignature['Args']['type'];\n  /** Class for the option's button. */\n  className?: string;\n  /** Accessible label of the option's button. */\n  'aria-label'?: string;\n}\n\nexport interface EuiButtonGroupSignature {\n  Element: HTMLFieldSetElement;\n  Args: {\n    /**\n     * `'s'`, `'m'`, or `'compressed'` (for forms, e.g. inside an\n     * `EuiFormRow` with `@display=\"rowCompressed\"`). Defaults to `'s'`.\n     */\n    buttonSize?: 's' | 'm' | 'compressed';\n    /**\n     * Color of the selected buttons: `'primary'`, `'text'`, `'ghost'`,\n     * `'success'`, `'warning'` or `'danger'`. Defaults to `'text'`.\n     */\n    color?: 'primary' | 'text' | 'ghost' | 'success' | 'warning' | 'danger';\n    /** Stretches the group, and its buttons evenly, to its container's width. */\n    isFullWidth?: boolean;\n    /** Disables every option. */\n    isDisabled?: boolean;\n    /**\n     * `'single'`: one option selected at a time, set with `@idSelected`\n     * (radio buttons). `'multi'`: each option toggles, set with\n     * `@idToSelectedMap`. Defaults to `'single'`.\n     */\n    type?: 'single' | 'multi';\n    /**\n     * Describes the group for screen readers (visually hidden legend).\n     * Required for accessibility.\n     */\n    legend?: string;\n    /** `name` of the radio inputs (single selection). Defaults to a random id. */\n    name?: string;\n    /** Extra class(es) for the fieldset. */\n    className?: string;\n    /** Shows only the options' icons; their labels stay for screen readers. */\n    isIconOnly?: EuiButtonGroupButtonSignature['Args']['isIconOnly'];\n    /**\n     * Called with the clicked option's `id` (and its `value` for `'single'`).\n     * Update `@idSelected` / `@idToSelectedMap` here.\n     */\n    onChange: EuiButtonGroupButtonSignature['Args']['onChange'];\n    /** Id of the selected option (`@type=\"single\"`). */\n    idSelected?: Option['id'];\n    /**\n     * Selected state by option id, e.g. `{ bold: true, italic: false }`\n     * (`@type=\"multi\"`).\n     */\n    idToSelectedMap?: {\n      [key: string]: EuiButtonGroupButtonSignature['Args']['isSelected'];\n    };\n    /** The buttons: `[{ id: 'left', label: 'Left', iconType: 'editorAlignLeft' }]`. */\n    options?: Array<Option>;\n  };\n}\n\nexport const EuiButtonGroup: TemplateOnlyComponent<EuiButtonGroupSignature> =\n  <template>\n    {{#let\n      (argOrDefault @buttonSize \"s\")\n      (argOrDefault @color \"text\")\n      (argOrDefault @isFullWidth false)\n      (argOrDefault @isDisabled false)\n      (argOrDefault @type \"single\")\n      as |buttonSize color isFullWidth isDisabled type|\n    }}\n      {{#let\n        (if (and (eq buttonSize \"compressed\") (eq color \"ghost\")) \"text\" color)\n        (eq type \"single\")\n        as |resolvedColor typeIsSingle|\n      }}\n\n        <fieldset\n          class={{classNames\n            \"euiButtonGroup\"\n            (if isFullWidth \"euiButtonGroup--fullWidth\")\n            (if isDisabled \"euiButtonGroup--isDisabled\")\n            @className\n            componentName=\"EuiButtonGroup\"\n            size=(argOrDefault buttonSize \"s\")\n            color=resolvedColor\n          }}\n          disabled={{isDisabled}}\n          ...attributes\n        >\n          <legend {{screenReaderOnly}}>{{@legend}}</legend>\n          <div class=\"euiButtonGroup__buttons\">\n            {{#let (argOrDefault @name (randomId)) as |name|}}\n              {{#each @options as |option|}}\n                <EuiButtonGroupButton\n                  @name={{name}}\n                  @isDisabled={{if\n                    (notEq option.isDisabled undefined)\n                    option.isDisabled\n                    isDisabled\n                  }}\n                  @element={{if typeIsSingle \"label\" \"button\"}}\n                  @isSelected={{if\n                    typeIsSingle\n                    (eq option.id @idSelected)\n                    (get @idToSelectedMap option.id)\n                  }}\n                  @color={{resolvedColor}}\n                  @size={{buttonSize}}\n                  @isIconOnly={{@isIconOnly}}\n                  @onChange={{@onChange}}\n                  @iconType={{option.iconType}}\n                  @value={{option.value}}\n                  @label={{option.label}}\n                  @id={{option.id}}\n                  @isLoading={{option.isLoading}}\n                  @iconSide={{option.iconSide}}\n                  @iconSize={{option.iconSize}}\n                  @textClasses={{option.textClasses}}\n                  @contentClasses={{option.contentClasses}}\n                  @iconClasses={{option.iconClasses}}\n                  @type={{option.type}}\n                  class={{option.className}}\n                  aria-label={{option.aria-label}}\n                />\n              {{/each}}\n            {{/let}}\n          </div>\n        </fieldset>\n      {{/let}}\n    {{/let}}\n  </template>;\n\nexport default EuiButtonGroup;\n"],"names":["EuiButtonGroup","setComponentTemplate","precompileTemplate","strictMode","scope","argOrDefault","and","eq","classNames","screenReaderOnly","randomId","EuiButtonGroupButton","notEq","get","templateOnly"],"mappings":";;;;;;;;;;;MAqGaA,cAAsC,GAAAC,oBAAA,CACjDC,kBAAA,CAAA,orDAAA,EAqEA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,YAAA;IAAAC,GAAA;IAAAC,EAAA;IAAAC,UAAA;IAAAC,gBAAA;IAAAC,QAAA;IAAAC,oBAAA;IAAAC,KAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}
+{"version":3,"file":"eui-button-group.js","sources":["../../src/components/eui-button-group.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\nimport { hash } from '@ember/helper';\n\nimport { randomId } from '../-private/random-id.ts';\nimport screenReaderOnly from '../modifiers/screen-reader-only.ts';\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport { euiClass, useEuiBorealisStyles } from '../utils/eui/styles.ts';\nimport {\n  euiButtonGroupButtonsStyles,\n  euiButtonGroupStyles\n} from '../utils/eui/styles.generated.ts';\nimport EuiButton from './eui-button.gts';\nimport EuiButtonEmpty from './eui-button-empty.gts';\nimport EuiButtonGroupButton from './eui-button-group-button.gts';\nimport EuiButtonIcon from './eui-button-icon.gts';\n\nimport type { EuiButtonGroupButtonSignature } from './eui-button-group-button';\nimport type { EuiCss } from '../utils/eui/styles.ts';\nimport type {\n  EuiButtonContext,\n  EuiButtonSelectionProps\n} from '../-private/eui-button-context.ts';\nimport type { WithBoundArgs } from '@glint/template';\n\n/** Upstream `BUTTON_GROUP_GUTTER_SIZES`. */\nexport type EuiButtonGroupGutterSize = 'none' | 'xs' | 's' | 'm' | 'l' | 'xl';\n\nexport interface Option {\n  /** Disables this option. Defaults to the group's `@isDisabled`. */\n  isDisabled?: boolean;\n  /**\n   * Beta: renders this option's disabled state with `aria-disabled`.\n   * Defaults to the group's `@hasAriaDisabled`.\n   */\n  hasAriaDisabled?: boolean;\n  /**\n   * Native browser tooltip of the option. Defaults to its label; pass `''`\n   * to unset it.\n   */\n  title?: string;\n  /** Icon of the option; required for `@isIconOnly` groups. */\n  iconType?: EuiButtonGroupButtonSignature['Args']['iconType'];\n  /** Value passed to `@onChange` (single selection only). */\n  value?: EuiButtonGroupButtonSignature['Args']['value'];\n  /**\n   * Text of the option. Always set it: with `@isIconOnly` it is hidden but\n   * read by screen readers.\n   */\n  label?: EuiButtonGroupButtonSignature['Args']['label'];\n  /** Unique id of the option, used by `@idSelected` / `@idToSelectedMap`. */\n  id: EuiButtonGroupButtonSignature['Args']['id'];\n  /** Shows a spinner instead of the icon. */\n  isLoading?: EuiButtonGroupButtonSignature['Args']['isLoading'];\n  /** `'right'` puts the icon after the text. */\n  iconSide?: EuiButtonGroupButtonSignature['Args']['iconSide'];\n  /** Size of the icon. */\n  iconSize?: EuiButtonGroupButtonSignature['Args']['iconSize'];\n  /** Classes for the element wrapping the text. */\n  textClasses?: EuiButtonGroupButtonSignature['Args']['textClasses'];\n  /** Classes for the element wrapping the icon and text. */\n  contentClasses?: EuiButtonGroupButtonSignature['Args']['contentClasses'];\n  /** Extra classes for the icon. */\n  iconClasses?: EuiButtonGroupButtonSignature['Args']['iconClasses'];\n  /** `type` of the button (multi selection only). */\n  type?: EuiButtonGroupButtonSignature['Args']['type'];\n  /** Class for the option's button. */\n  className?: string;\n  /** Accessible label of the option's button. */\n  'aria-label'?: string;\n  /** Tooltip text shown on hover and focus of the option. */\n  toolTipContent?: EuiButtonGroupButtonSignature['Args']['toolTipContent'];\n  /** `EuiToolTip` `position`, `title` and `delay` for `toolTipContent`. */\n  toolTipProps?: EuiButtonGroupButtonSignature['Args']['toolTipProps'];\n}\n\n/** The buttons a block `EuiButtonGroup` yields, wired to the group. */\nexport interface EuiButtonGroupBlockParams {\n  Button: WithBoundArgs<typeof EuiButton, 'buttonContext'>;\n  ButtonEmpty: WithBoundArgs<typeof EuiButtonEmpty, 'buttonContext'>;\n  ButtonIcon: WithBoundArgs<typeof EuiButtonIcon, 'buttonContext'>;\n}\n\nexport interface EuiButtonGroupSignature {\n  /** A `<fieldset>` with `@options`, a `<div role=\"group\">` with a block. */\n  Element: HTMLFieldSetElement | HTMLDivElement;\n  Args: {\n    /**\n     * Extra styles composed last into this component's class (like upstream's\n     * `css` prop). Prefer this to an extra class when styling it from a parent.\n     */\n    css?: EuiCss;\n    /**\n     * `'s'`, `'m'`, or `'compressed'` (for forms, e.g. inside an\n     * `EuiFormRow` with `@display=\"rowCompressed\"`; renders as `'s'`).\n     * With a block it sets the size of every yielded button. Defaults to\n     * `'s'`.\n     */\n    buttonSize?: 's' | 'm' | 'compressed';\n    /**\n     * Color of the selected buttons: `'text'`, `'primary'`, `'accent'`,\n     * `'accentSecondary'`, `'success'`, `'warning'`, `'danger'`,\n     * `'neutral'` or `'risk'`. `'ghost'` is still accepted and renders as\n     * `'text'` (latest EUI dropped it). Defaults to `'text'`.\n     */\n    color?:\n      | 'text'\n      | 'primary'\n      | 'accent'\n      | 'accentSecondary'\n      | 'success'\n      | 'warning'\n      | 'danger'\n      | 'neutral'\n      | 'risk'\n      | 'ghost';\n    /** Stretches the group, and its buttons evenly, to its container's width. */\n    isFullWidth?: boolean;\n    /** Disables every option (with a block: every yielded button). */\n    isDisabled?: boolean;\n    /**\n     * Beta: renders the disabled state with `aria-disabled` instead of the\n     * native `disabled` attribute, so the buttons stay focusable (e.g. for\n     * tooltips) while clicks and key presses are blocked.\n     */\n    hasAriaDisabled?: boolean;\n    /**\n     * `'single'`: one option selected at a time, set with `@idSelected`\n     * (radio buttons). `'multi'`: each option toggles, set with\n     * `@idToSelectedMap`. Also applies to `@variant=\"selection\"` blocks.\n     * Defaults to `'single'`.\n     */\n    type?: 'single' | 'multi';\n    /**\n     * Describes the group for screen readers (visually hidden legend, or\n     * the `aria-label` of the `role=\"group\"` element with a block).\n     * Required for accessibility.\n     */\n    legend?: string;\n    /** `name` of the radio inputs (single selection). Defaults to a random id. */\n    name?: string;\n    /** Extra class(es) for the fieldset. */\n    className?: string;\n    /** Shows only the options' icons; their labels stay for screen readers. */\n    isIconOnly?: EuiButtonGroupButtonSignature['Args']['isIconOnly'];\n    /**\n     * Called with the clicked option's `id` (and its `value` for `'single'`).\n     * Update `@idSelected` / `@idToSelectedMap` here. Required with\n     * `@options`; with a block it is only called by `@variant=\"selection\"`.\n     */\n    onChange?: EuiButtonGroupButtonSignature['Args']['onChange'];\n    /** Id of the selected option (`@type=\"single\"`). */\n    idSelected?: Option['id'];\n    /**\n     * Selected state by option id, e.g. `{ bold: true, italic: false }`\n     * (`@type=\"multi\"`).\n     */\n    idToSelectedMap?: {\n      [key: string]: EuiButtonGroupButtonSignature['Args']['isSelected'];\n    };\n    /**\n     * The buttons: `[{ id: 'left', label: 'Left', iconType: 'editorAlignLeft' }]`.\n     * Without it, the group renders its block (the yielded buttons).\n     */\n    options?: Array<Option>;\n    /**\n     * Block only. `'default'`: a row of buttons spaced by `@gutterSize`.\n     * `'segmented'`: one connected, inset control (only `Button` or only\n     * `ButtonIcon` children). `'selection'`: segmented toggle buttons; give\n     * each one an `@id` and use `@type`, `@idSelected` /\n     * `@idToSelectedMap` and `@onChange`. Defaults to `'default'`.\n     */\n    variant?: 'default' | 'segmented' | 'selection';\n    /**\n     * Block with `@variant=\"default\"` only: gap between the buttons,\n     * `'none'`, `'xs'`, `'s'`, `'m'`, `'l'` or `'xl'`. Defaults to `'s'`.\n     */\n    gutterSize?: EuiButtonGroupGutterSize;\n    /** Segmented and selection blocks only: lines between the buttons. */\n    showDividers?: boolean;\n    /**\n     * Segmented and selection blocks only: `'vertical'` stacks the buttons\n     * (use it with `ButtonIcon` children only). Defaults to `'horizontal'`.\n     */\n    layout?: 'horizontal' | 'vertical';\n    /**\n     * Segmented and selection blocks only: `false` shrinks (truncates)\n     * the buttons instead of wrapping them. Defaults to `true`.\n     */\n    wrap?: boolean;\n    /**\n     * `@variant=\"selection\"` only: `'regular'` (subdued toggle state),\n     * `'highlighted'` (filled toggle state) or `'inverse'` (light toggle\n     * state on a subdued background). Defaults to `'regular'`.\n     */\n    display?: 'regular' | 'highlighted' | 'inverse';\n  };\n  Blocks: {\n    /**\n     * Without `@options`: the buttons, as the yielded `Button`,\n     * `ButtonEmpty` and `ButtonIcon` (they inherit `@buttonSize`,\n     * `@isDisabled`, `@hasAriaDisabled` and the variant's styling). They can\n     * be wrapped, e.g. in `EuiToolTip` or `EuiPopover`.\n     */\n    default: [EuiButtonGroupBlockParams];\n  };\n}\n\n/**\n * A group of buttons. With `@options`: toggle buttons picking one option or\n * several. With a block: the yielded buttons in a row, a segmented control\n * or a selection control (upstream's children API).\n */\nexport default class EuiButtonGroup extends Component<EuiButtonGroupSignature> {\n  defaultName = randomId();\n\n  get context() {\n    return getEuiThemeContext(this);\n  }\n  /** Upstream renders the `options` API when `options` is passed. */\n  get isOptionsMode() {\n    return Boolean(this.args.options);\n  }\n  get buttonSize() {\n    return this.args.buttonSize ?? 's';\n  }\n  get size(): 's' | 'm' {\n    return this.buttonSize === 'm' ? 'm' : 's';\n  }\n  get color() {\n    const color = this.args.color ?? 'text';\n    // Compressed ghost groups were always text; latest EUI has no ghost.\n    return color === 'ghost' ? 'text' : color;\n  }\n  get typeIsSingle() {\n    return (this.args.type ?? 'single') === 'single';\n  }\n  get name() {\n    return this.args.name ?? this.defaultName;\n  }\n\n  /** Options API: `disabled` on the fieldset, or `aria-disabled` instead. */\n  get fieldsetDisabled() {\n    return this.args.hasAriaDisabled ? undefined : this.args.isDisabled;\n  }\n  get fieldsetAriaDisabled() {\n    return this.args.hasAriaDisabled\n      ? String(Boolean(this.args.isDisabled))\n      : undefined;\n  }\n\n  @cached\n  get classes() {\n    const context = this.context;\n    return [\n      'euiButtonGroup',\n      this.args.isDisabled && 'euiButtonGroup-isDisabled',\n      this.args.className,\n      euiClass(\n        context,\n        // React's global reset for <fieldset>.\n        {\n          boxSizing: 'border-box',\n          margin: 0,\n          padding: 0,\n          border: 'none',\n          minInlineSize: 'auto'\n        },\n        euiButtonGroupStyles.euiButtonGroup,\n        this.args.isFullWidth && euiButtonGroupStyles.fullWidth,\n        this.args.css\n      )\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  @cached\n  get buttonsClasses() {\n    const context = this.context;\n    const styles = useEuiBorealisStyles(context, euiButtonGroupButtonsStyles);\n    return `euiButtonGroup__buttons ${euiClass(\n      context,\n      { boxSizing: 'border-box' },\n      styles.euiButtonGroup__buttons,\n      this.args.isFullWidth && styles.fullWidth,\n      styles.size[this.size]\n    )}`;\n  }\n\n  isSelected = (option: Option): boolean | undefined =>\n    this.typeIsSingle\n      ? option.id === this.args.idSelected\n      : this.args.idToSelectedMap?.[option.id];\n\n  optionDisabled = (option: Option): boolean | undefined =>\n    option.isDisabled !== undefined ? option.isDisabled : this.args.isDisabled;\n\n  optionHasAriaDisabled = (option: Option): boolean | undefined =>\n    option.hasAriaDisabled !== undefined\n      ? option.hasAriaDisabled\n      : this.args.hasAriaDisabled;\n\n  onChange = (id: string, value?: string) => {\n    this.args.onChange?.(id, value);\n  };\n\n  // Children API (a block instead of `@options`).\n\n  get variant() {\n    return this.args.variant ?? 'default';\n  }\n  get isSegmented() {\n    return this.variant === 'segmented';\n  }\n  get isSelection() {\n    return this.variant === 'selection';\n  }\n  get hasSegmentedStyle() {\n    return this.isSegmented || this.isSelection;\n  }\n  get layout() {\n    return this.args.layout ?? 'horizontal';\n  }\n  get display() {\n    return this.args.display ?? 'regular';\n  }\n  get gutterSize(): EuiButtonGroupGutterSize {\n    return this.args.gutterSize ?? 's';\n  }\n  get dataDisplay() {\n    return this.isSelection ? this.display : undefined;\n  }\n  get dataLayout() {\n    return this.hasSegmentedStyle ? this.layout : undefined;\n  }\n  get dataDividers() {\n    return this.hasSegmentedStyle && this.args.showDividers ? 'true' : undefined;\n  }\n  get ariaDisabled() {\n    return this.args.isDisabled ? 'true' : undefined;\n  }\n\n  @cached\n  get containerClasses() {\n    const context = this.context;\n    const styles = useEuiBorealisStyles(context, euiButtonGroupButtonsStyles);\n    return `euiButtonGroup__container ${euiClass(\n      context,\n      { boxSizing: 'border-box' },\n      styles.euiButtonGroup__container,\n      this.args.isFullWidth && this.layout !== 'vertical' && styles.fullWidth\n    )}`;\n  }\n\n  @cached\n  get childrenButtonsClasses() {\n    const context = this.context;\n    const styles = useEuiBorealisStyles(context, euiButtonGroupButtonsStyles);\n    const gutterSize = this.gutterSize;\n    const hasGutterSize = this.variant === 'default' && gutterSize !== 'none';\n    return `euiButtonGroup__buttons ${euiClass(\n      context,\n      { boxSizing: 'border-box' },\n      styles.euiButtonGroup__buttons,\n      hasGutterSize &&\n        styles.gutterSize[gutterSize as Exclude<typeof gutterSize, 'none'>],\n      this.hasSegmentedStyle && this.args.wrap === false && styles.noWrap\n    )}`;\n  }\n\n  /** Upstream `useEuiButtonGroupSelection`: purely controlled by the args. */\n  isIdSelected = (id: string): boolean =>\n    this.args.type === 'multi'\n      ? Boolean(this.args.idToSelectedMap?.[id])\n      : id === this.args.idSelected;\n\n  getSelectionProps = (\n    id: string,\n    isDisabled?: boolean\n  ): EuiButtonSelectionProps => {\n    const selected = this.isIdSelected(id);\n    const isInverse = this.display === 'inverse';\n    const hasFill =\n      (selected && this.display === 'highlighted') ||\n      Boolean(selected && isDisabled);\n    return {\n      isSelected: selected,\n      fill: isInverse ? false : hasFill,\n      display: isInverse ? 'base' : hasFill ? 'fill' : undefined,\n      onSelect: () => this.args.onChange?.(id)\n    };\n  };\n\n  /** Upstream `EuiButtonContext` value; its getters keep the args tracked. */\n  buttonContext: EuiButtonContext = createButtonContext(this);\n\n  <template>\n    {{#if this.isOptionsMode}}\n      <fieldset\n        class={{this.classes}}\n        disabled={{this.fieldsetDisabled}}\n        aria-disabled={{this.fieldsetAriaDisabled}}\n        ...attributes\n      >\n        <legend {{screenReaderOnly}}>{{@legend}}</legend>\n        <div class={{this.buttonsClasses}}>\n          {{#each @options as |option|}}\n            <EuiButtonGroupButton\n              @name={{this.name}}\n              @isDisabled={{this.optionDisabled option}}\n              @hasAriaDisabled={{this.optionHasAriaDisabled option}}\n              @element={{if this.typeIsSingle \"label\" \"button\"}}\n              @isSelected={{this.isSelected option}}\n              @color={{this.color}}\n              @size={{this.buttonSize}}\n              @isIconOnly={{@isIconOnly}}\n              @onChange={{this.onChange}}\n              @iconType={{option.iconType}}\n              @value={{option.value}}\n              @label={{option.label}}\n              @id={{option.id}}\n              @isLoading={{option.isLoading}}\n              @iconSide={{option.iconSide}}\n              @iconSize={{option.iconSize}}\n              @textClasses={{option.textClasses}}\n              @contentClasses={{option.contentClasses}}\n              @iconClasses={{option.iconClasses}}\n              @type={{option.type}}\n              @title={{option.title}}\n              @toolTipContent={{option.toolTipContent}}\n              @toolTipProps={{option.toolTipProps}}\n              class={{option.className}}\n              aria-label={{option.aria-label}}\n            />\n          {{/each}}\n        </div>\n      </fieldset>\n    {{else}}\n      <div\n        class={{this.classes}}\n        role=\"group\"\n        data-variant={{this.variant}}\n        data-size={{this.size}}\n        data-display={{this.dataDisplay}}\n        data-layout={{this.dataLayout}}\n        data-dividers={{this.dataDividers}}\n        aria-label={{@legend}}\n        aria-disabled={{this.ariaDisabled}}\n        ...attributes\n      >\n        <div class={{this.containerClasses}}>\n          <div class={{this.childrenButtonsClasses}}>\n            {{yield\n              (hash\n                Button=(component EuiButton buttonContext=this.buttonContext)\n                ButtonEmpty=(component\n                  EuiButtonEmpty buttonContext=this.buttonContext\n                )\n                ButtonIcon=(component\n                  EuiButtonIcon buttonContext=this.buttonContext\n                )\n              )\n            }}\n          </div>\n        </div>\n      </div>\n    {{/if}}\n  </template>\n}\n\nfunction createButtonContext(group: EuiButtonGroup): EuiButtonContext {\n  return {\n    get size() {\n      return group.size;\n    },\n    get isDisabled() {\n      return group.args.isDisabled ? (true as const) : undefined;\n    },\n    get hasAriaDisabled() {\n      return group.args.hasAriaDisabled ? (true as const) : undefined;\n    },\n    get fullWidth() {\n      return Boolean(group.args.isFullWidth);\n    },\n    get color() {\n      return group.hasSegmentedStyle ? 'text' : undefined;\n    },\n    get display() {\n      return group.isSegmented ? ('base' as const) : undefined;\n    },\n    get fill() {\n      return group.isSegmented ? false : undefined;\n    },\n    get getSelectionProps() {\n      return group.isSelection ? group.getSelectionProps : undefined;\n    },\n    get wrapInItem() {\n      return group.hasSegmentedStyle;\n    }\n  };\n}\n\n/** Named export kept for compatibility. */\nexport { EuiButtonGroup };\n"],"names":["EuiButtonGroup","Component","defaultName","randomId","context","getEuiThemeContext","isOptionsMode","Boolean","args","options","buttonSize","size","color","typeIsSingle","type","name","fieldsetDisabled","hasAriaDisabled","undefined","isDisabled","fieldsetAriaDisabled","String","classes","className","euiClass","boxSizing","margin","padding","border","minInlineSize","euiButtonGroupStyles","euiButtonGroup","isFullWidth","fullWidth","css","filter","join","n","prototype","cached","buttonsClasses","styles","useEuiBorealisStyles","euiButtonGroupButtonsStyles","euiButtonGroup__buttons","isSelected","option","id","idSelected","idToSelectedMap","optionDisabled","optionHasAriaDisabled","onChange","value","variant","isSegmented","isSelection","hasSegmentedStyle","layout","display","gutterSize","dataDisplay","dataLayout","dataDividers","showDividers","ariaDisabled","containerClasses","euiButtonGroup__container","childrenButtonsClasses","hasGutterSize","wrap","noWrap","isIdSelected","getSelectionProps","selected","isInverse","hasFill","fill","onSelect","buttonContext","createButtonContext","setComponentTemplate","precompileTemplate","strictMode","scope","screenReaderOnly","EuiButtonGroupButton","hash","EuiButton","EuiButtonEmpty","EuiButtonIcon","group","wrapInItem"],"mappings":"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"}