@ember-eui/core 14.1.4 → 16.0.0

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

@@ -0,0 +1,127 @@
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
+import { htmlSafe } from '@ember/template';
+import { getTokenName } from '@elastic/eui-theme-common';
+import { provide } from 'ember-provide-consume-context';
+import { EUI_SPLIT_BUTTON_CONTEXT } from '../-private/eui-split-button-context.js';
+import { getEuiThemeContext } from '../utils/emotion/consume.js';
+import { splitButtonStyles, splitButtonDividerStyles } from '../utils/eui/split-button.js';
+import { d1 as getEuiButtonColorValues, d2 as getEuiFilledButtonColorValues } from '../styles.generated-SYAxYhey.js';
+import { euiClass } from '../utils/eui/styles.js';
+import EuiSplitButtonActionPrimary from './eui-split-button/eui-split-button-action-primary.js';
+import EuiSplitButtonActionSecondary from './eui-split-button/eui-split-button-action-secondary.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { n } from 'decorator-transforms/runtime-esm';
+
+/**
+ * A primary action and a secondary icon action (often opening a popover of
+ * related actions) joined into one control (upstream `EuiSplitButton`).
+ */
+class EuiSplitButton extends Component {
+  actions = {
+    ActionPrimary: EuiSplitButtonActionPrimary,
+    ActionSecondary: EuiSplitButtonActionSecondary
+  };
+  get context() {
+    return getEuiThemeContext(this);
+  }
+  get size() {
+    const size = this.args.size;
+    return size === 'xs' || size === 's' ? size : 'm';
+  }
+  get color() {
+    return this.args.color ?? 'primary';
+  }
+  get fill() {
+    return Boolean(this.args.fill);
+  }
+  get splitButtonContext() {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const split = this;
+    return {
+      get size() {
+        return split.size;
+      },
+      get color() {
+        return split.color;
+      },
+      get fill() {
+        return split.fill;
+      },
+      get isDisabled() {
+        return split.args.isDisabled;
+      },
+      get hasAriaDisabled() {
+        return split.args.hasAriaDisabled;
+      },
+      get isLoading() {
+        return split.args.isLoading;
+      },
+      get dividerClass() {
+        return split.dividerClass;
+      }
+    };
+  }
+  static {
+    n(this.prototype, "splitButtonContext", [provide(EUI_SPLIT_BUTTON_CONTEXT)]);
+  }
+  get colors() {
+    const color = this.args.isDisabled ? 'disabled' : this.color;
+    const theme = this.context.upstream;
+    return {
+      filled: getEuiFilledButtonColorValues(theme, color),
+      base: getEuiButtonColorValues(theme, color)
+    };
+  }
+  /** Upstream `dividerColor` (also the `--euiSplitButtonBorderColor`). */
+  static {
+    n(this.prototype, "colors", [cached]);
+  }
+  get dividerColor() {
+    const {
+      euiTheme
+    } = this.context.upstream;
+    const color = this.color;
+    if (color === 'warning' && this.fill) return this.colors.filled.color;
+    const token = color === 'text' ? 'borderBasePlain' : getTokenName('borderBase', color);
+    return euiTheme.colors[token];
+  }
+  static {
+    n(this.prototype, "dividerColor", [cached]);
+  }
+  get classes() {
+    const context = this.context;
+    const styles = splitButtonStyles(context, this.fill ? this.colors.filled.backgroundColor : this.colors.base.backgroundColor);
+    return `euiSplitButton ${euiClass(context, {
+      boxSizing: 'border-box'
+    }, styles.euiSplitButton, (this.color === 'text' || Boolean(context.upstream.highContrastMode)) && styles.hasBorder, this.args.css)}`;
+  }
+  static {
+    n(this.prototype, "classes", [cached]);
+  }
+  get dividerClass() {
+    const context = this.context;
+    const styles = splitButtonDividerStyles(context, context.upstream.highContrastMode && this.fill ? this.colors.filled.color : this.dividerColor);
+    return `euiSplitButton__divider ${euiClass(context, {
+      boxSizing: 'border-box'
+    }, styles.divider)}`;
+  }
+  static {
+    n(this.prototype, "dividerClass", [cached]);
+  }
+  get style() {
+    return htmlSafe(`--euiSplitButtonBorderColor: ${this.dividerColor}`);
+  }
+  static {
+    n(this.prototype, "style", [cached]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div role=\"group\" class={{this.classes}} data-size={{this.size}} data-fill={{if this.fill \"true\"}} style={{this.style}} ...attributes>\n  {{yield this.actions}}\n</div>", {
+      strictMode: true
+    }), this);
+  }
+}
+
+export { EuiSplitButton as default };
+//# sourceMappingURL=eui-split-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eui-split-button.js","sources":["../../src/components/eui-split-button.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\nimport { htmlSafe } from '@ember/template';\nimport { getTokenName } from '@elastic/eui-theme-common';\nimport { provide } from 'ember-provide-consume-context';\n\nimport { EUI_SPLIT_BUTTON_CONTEXT } from '../-private/eui-split-button-context.ts';\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport {\n  splitButtonDividerStyles,\n  splitButtonStyles\n} from '../utils/eui/split-button.ts';\nimport {\n  getEuiButtonColorValues,\n  getEuiFilledButtonColorValues\n} from '../utils/eui/styles.generated.ts';\nimport { euiClass } from '../utils/eui/styles.ts';\nimport EuiSplitButtonActionPrimary from './eui-split-button/eui-split-button-action-primary.gts';\nimport EuiSplitButtonActionSecondary from './eui-split-button/eui-split-button-action-secondary.gts';\n\nimport type { EuiSplitButtonContext } from '../-private/eui-split-button-context.ts';\nimport type { EuiCss } from '../utils/eui/styles.ts';\n\ntype ButtonColorValues = { backgroundColor: string; color: string };\n\nexport interface EuiSplitButtonSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** `'s'` or `'m'` (32/40px). Defaults to `'m'`. */\n    size?: 'xs' | 's' | 'm';\n    /**\n     * `'primary'`, `'accent'`, `'accentSecondary'`, `'neutral'`,\n     * `'success'`, `'warning'`, `'risk'`, `'danger'` or `'text'`. Defaults\n     * to `'primary'`.\n     */\n    color?: string;\n    /** Solid background. Defaults to `false`. */\n    fill?: boolean;\n    /** Disables both actions. */\n    isDisabled?: boolean;\n    /**\n     * Beta: renders the disabled actions with `aria-disabled` instead of\n     * `disabled`, so they stay focusable (e.g. for a tooltip).\n     */\n    hasAriaDisabled?: boolean;\n    /** Shows a loading spinner in both actions and disables them. */\n    isLoading?: boolean;\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  Blocks: {\n    /**\n     * The two actions, in this order: `<split.ActionPrimary>` then\n     * `<split.ActionSecondary>`.\n     */\n    default: [\n      {\n        ActionPrimary: typeof EuiSplitButtonActionPrimary;\n        ActionSecondary: typeof EuiSplitButtonActionSecondary;\n      }\n    ];\n  };\n}\n\n/**\n * A primary action and a secondary icon action (often opening a popover of\n * related actions) joined into one control (upstream `EuiSplitButton`).\n */\nexport default class EuiSplitButton extends Component<EuiSplitButtonSignature> {\n  actions = {\n    ActionPrimary: EuiSplitButtonActionPrimary,\n    ActionSecondary: EuiSplitButtonActionSecondary\n  };\n\n  get context() {\n    return getEuiThemeContext(this);\n  }\n  get size(): 'xs' | 's' | 'm' {\n    const size = this.args.size;\n    return size === 'xs' || size === 's' ? size : 'm';\n  }\n  get color() {\n    return this.args.color ?? 'primary';\n  }\n  get fill() {\n    return Boolean(this.args.fill);\n  }\n\n  @provide(EUI_SPLIT_BUTTON_CONTEXT)\n  get splitButtonContext(): EuiSplitButtonContext {\n    // eslint-disable-next-line @typescript-eslint/no-this-alias\n    const split = this;\n    return {\n      get size() {\n        return split.size;\n      },\n      get color() {\n        return split.color;\n      },\n      get fill() {\n        return split.fill;\n      },\n      get isDisabled() {\n        return split.args.isDisabled;\n      },\n      get hasAriaDisabled() {\n        return split.args.hasAriaDisabled;\n      },\n      get isLoading() {\n        return split.args.isLoading;\n      },\n      get dividerClass() {\n        return split.dividerClass;\n      }\n    };\n  }\n\n  @cached\n  get colors(): { filled: ButtonColorValues; base: ButtonColorValues } {\n    const color = this.args.isDisabled ? 'disabled' : this.color;\n    const theme = this.context.upstream;\n    return {\n      filled: getEuiFilledButtonColorValues(theme, color),\n      base: getEuiButtonColorValues(theme, color)\n    };\n  }\n\n  /** Upstream `dividerColor` (also the `--euiSplitButtonBorderColor`). */\n  @cached\n  get dividerColor(): string {\n    const { euiTheme } = this.context.upstream;\n    const color = this.color;\n    if (color === 'warning' && this.fill) return this.colors.filled.color;\n    const token =\n      color === 'text' ? 'borderBasePlain' : getTokenName('borderBase', color);\n    return (euiTheme.colors as unknown as Record<string, string>)[token]!;\n  }\n\n  @cached\n  get classes() {\n    const context = this.context;\n    const styles = splitButtonStyles(\n      context,\n      this.fill\n        ? this.colors.filled.backgroundColor\n        : this.colors.base.backgroundColor\n    );\n    return `euiSplitButton ${euiClass(\n      context,\n      { boxSizing: 'border-box' },\n      styles.euiSplitButton,\n      (this.color === 'text' || Boolean(context.upstream.highContrastMode)) &&\n        styles.hasBorder,\n      this.args.css\n    )}`;\n  }\n\n  @cached\n  get dividerClass() {\n    const context = this.context;\n    const styles = splitButtonDividerStyles(\n      context,\n      context.upstream.highContrastMode && this.fill\n        ? this.colors.filled.color\n        : this.dividerColor\n    );\n    return `euiSplitButton__divider ${euiClass(\n      context,\n      { boxSizing: 'border-box' },\n      styles.divider\n    )}`;\n  }\n\n  @cached\n  get style() {\n    return htmlSafe(`--euiSplitButtonBorderColor: ${this.dividerColor}`);\n  }\n\n  <template>\n    <div\n      role=\"group\"\n      class={{this.classes}}\n      data-size={{this.size}}\n      data-fill={{if this.fill \"true\"}}\n      style={{this.style}}\n      ...attributes\n    >\n      {{yield this.actions}}\n    </div>\n  </template>\n}\n"],"names":["EuiSplitButton","Component","actions","ActionPrimary","EuiSplitButtonActionPrimary","ActionSecondary","EuiSplitButtonActionSecondary","context","getEuiThemeContext","size","args","color","fill","Boolean","splitButtonContext","split","isDisabled","hasAriaDisabled","isLoading","dividerClass","n","prototype","provide","EUI_SPLIT_BUTTON_CONTEXT","colors","theme","upstream","filled","getEuiFilledButtonColorValues","base","getEuiButtonColorValues","cached","dividerColor","euiTheme","token","getTokenName","classes","styles","splitButtonStyles","backgroundColor","euiClass","boxSizing","euiSplitButton","highContrastMode","hasBorder","css","splitButtonDividerStyles","divider","style","htmlSafe","setComponentTemplate","precompileTemplate","strictMode"],"mappings":";;;;;;;;;;;;;;;;AAmEA;;;;AAIe,MAAMA,cAAA,SAAuBC,SAAA,CAAU;AACpDC,EAAAA,OAAA,GAAU;AACRC,IAAAA,aAAA,EAAeC,2BAAA;AACfC,IAAAA,eAAA,EAAiBC;GACnB;EAEA,IAAIC,OAAAA,GAAU;IACZ,OAAOC,mBAAmB,IAAI,CAAA;AAChC,EAAA;EACA,IAAIC,IAAAA,GAAyB;AAC3B,IAAA,MAAMA,IAAA,GAAO,IAAI,CAACC,IAAI,CAACD,IAAI;IAC3B,OAAOA,IAAA,KAAS,IAAA,IAAQA,IAAA,KAAS,GAAA,GAAMA,IAAA,GAAO,GAAA;AAChD,EAAA;EACA,IAAIE,KAAAA,GAAQ;AACV,IAAA,OAAO,IAAI,CAACD,IAAI,CAACC,KAAK,IAAI,SAAA;AAC5B,EAAA;EACA,IAAIC,IAAAA,GAAO;AACT,IAAA,OAAOC,OAAA,CAAQ,IAAI,CAACH,IAAI,CAACE,IAAI,CAAA;AAC/B,EAAA;EAEA,IACIE,qBAA4C;AAC9C;IACA,MAAMC,QAAQ,IAAI;IAClB,OAAO;MACL,IAAIN,IAAAA,GAAO;QACT,OAAOM,MAAMN,IAAI;MACnB,CAAA;MACA,IAAIE,KAAAA,GAAQ;QACV,OAAOI,MAAMJ,KAAK;MACpB,CAAA;MACA,IAAIC,IAAAA,GAAO;QACT,OAAOG,MAAMH,IAAI;MACnB,CAAA;MACA,IAAII,UAAAA,GAAa;AACf,QAAA,OAAOD,KAAA,CAAML,IAAI,CAACM,UAAU;MAC9B,CAAA;MACA,IAAIC,eAAAA,GAAkB;AACpB,QAAA,OAAOF,KAAA,CAAML,IAAI,CAACO,eAAe;MACnC,CAAA;MACA,IAAIC,SAAAA,GAAY;AACd,QAAA,OAAOH,KAAA,CAAML,IAAI,CAACQ,SAAS;MAC7B,CAAA;MACA,IAAIC,YAAAA,GAAe;QACjB,OAAOJ,MAAMI,YAAY;AAC3B,MAAA;KACF;AACF,EAAA;AAAA,EAAA;AAAAC,IAAAA,CAAA,MAAAC,SAAA,EAAA,oBAAA,EAAA,CA3BCC,OAAA,CAAQC,wBAAA,CAAA,CAAA,CAAA;AAAA;EA6BT,IACIC,MAAAA,GAAiE;AACnE,IAAA,MAAMb,KAAA,GAAQ,IAAI,CAACD,IAAI,CAACM,UAAU,GAAG,UAAA,GAAa,IAAI,CAACL,KAAK;AAC5D,IAAA,MAAMc,KAAA,GAAQ,IAAI,CAAClB,OAAO,CAACmB,QAAQ;IACnC,OAAO;AACLC,MAAAA,MAAA,EAAQC,8BAA8BH,KAAA,EAAOd,KAAA,CAAA;AAC7CkB,MAAAA,IAAA,EAAMC,wBAAwBL,KAAA,EAAOd,KAAA;KACvC;AACF,EAAA;AAEA;AAAA,EAAA;IAAAS,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,QAAA,EAAA,CAVCU,MAAA,CAAA,CAAA;AAAA;EAWD,IACIC,YAAAA,GAAuB;IACzB,MAAM;AAAEC,MAAAA;AAAQ,KAAE,GAAG,IAAI,CAAC1B,OAAO,CAACmB,QAAQ;AAC1C,IAAA,MAAMf,KAAA,GAAQ,IAAI,CAACA,KAAK;AACxB,IAAA,IAAIA,KAAA,KAAU,SAAA,IAAa,IAAI,CAACC,IAAI,EAAE,OAAO,IAAI,CAACY,MAAM,CAACG,MAAM,CAAChB,KAAK;AACrE,IAAA,MAAMuB,KAAA,GACJvB,KAAA,KAAU,MAAA,GAAS,iBAAA,GAAoBwB,aAAa,YAAA,EAAcxB,KAAA,CAAA;AACpE,IAAA,OAAQsB,QAAA,CAAST,MAAM,CAAuCU,KAAA,CAAM;AACtE,EAAA;AAAA,EAAA;IAAAd,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,cAAA,EAAA,CARCU,MAAA,CAAA,CAAA;AAAA;EAUD,IACIK,OAAAA,GAAU;AACZ,IAAA,MAAM7B,OAAA,GAAU,IAAI,CAACA,OAAO;IAC5B,MAAM8B,MAAA,GAASC,kBACb/B,OAAA,EACA,IAAI,CAACK,IAAI,GACL,IAAI,CAACY,MAAM,CAACG,MAAM,CAACY,eAAe,GAClC,IAAI,CAACf,MAAM,CAACK,IAAI,CAACU,eAAe,CAAA;AAEtC,IAAA,OAAO,CAAA,eAAA,EAAkBC,QAAA,CACvBjC,OAAA,EACA;AAAEkC,MAAAA,SAAA,EAAW;AAAa,KAAA,EAC1BJ,MAAA,CAAOK,cAAc,EACrB,CAAC,IAAI,CAAC/B,KAAK,KAAK,MAAA,IAAUE,OAAA,CAAQN,OAAA,CAAQmB,QAAQ,CAACiB,gBAAgB,CAAC,KAClEN,MAAA,CAAOO,SAAS,EAClB,IAAI,CAAClC,IAAI,CAACmC,GAAG,CAAA,CAAA,CACZ;AACL,EAAA;AAAA,EAAA;IAAAzB,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CAjBCU,MAAA,CAAA,CAAA;AAAA;EAmBD,IACIZ,YAAAA,GAAe;AACjB,IAAA,MAAMZ,OAAA,GAAU,IAAI,CAACA,OAAO;IAC5B,MAAM8B,MAAA,GAASS,yBACbvC,OAAA,EACAA,OAAA,CAAQmB,QAAQ,CAACiB,gBAAgB,IAAI,IAAI,CAAC/B,IAAI,GAC1C,IAAI,CAACY,MAAM,CAACG,MAAM,CAAChB,KAAK,GACxB,IAAI,CAACqB,YAAY,CAAA;AAEvB,IAAA,OAAO,CAAA,wBAAA,EAA2BQ,QAAA,CAChCjC,OAAA,EACA;AAAEkC,MAAAA,SAAA,EAAW;AAAa,KAAA,EAC1BJ,MAAA,CAAOU,OAAO,CAAA,CAAA,CACb;AACL,EAAA;AAAA,EAAA;IAAA3B,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,cAAA,EAAA,CAdCU,MAAA,CAAA,CAAA;AAAA;EAgBD,IACIiB,KAAAA,GAAQ;AACV,IAAA,OAAOC,SAAS,CAAA,6BAAA,EAAgC,IAAI,CAACjB,YAAY,EAAE,CAAA;AACrE,EAAA;AAAA,EAAA;IAAAZ,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,OAAA,EAAA,CAHCU,MAAA,CAAA,CAAA;AAAA;AAKD,EAAA;IAAAmB,oBAAA,CAAAC,kBAAA,CAAA,8KAAA,EAWA;MAAAC,UAAA,EAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

package/dist/components/eui-split-panel/inner.js

@@ -1,16 +1,41 @@
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
+import { euiSplitPanelContext } from '../../-private/eui-split-panel-context.js';
 import argOrDefault from '../../helpers/arg-or-default.js';
+import { getEuiThemeContext } from '../../utils/emotion/consume.js';
+import { useEuiBorealisStyles } from '../../utils/eui/styles.js';
+import { d3 as euiBreakpoint, d4 as euiSplitPanelInnerStyles } from '../../styles.generated-SYAxYhey.js';
 import EuiPanel from '../eui-panel.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 EuiSplitPanelInner = setComponentTemplate(precompileTemplate("<EuiPanel class=\"euiSplitPanel__inner\" @hasShadow={{argOrDefault @hasShadow false}} @color={{argOrDefault @color \"transparent\"}} @borderRadius={{argOrDefault @borderRadius \"none\"}} @hasBorder={{argOrDefault @hasBorder false}} @paddingSize={{@paddingSize}} ...attributes>\n  {{yield}}\n</EuiPanel>", {
-  strictMode: true,
-  scope: () => ({
-    EuiPanel,
-    argOrDefault
-  })
-}), templateOnly());
+// Undoes the row divider where a responsive row has collapsed to a column.
+const NO_ROW_DIVIDER = '&:not(:last-child){border-inline-end:none;}';
+/** Upstream `EuiSplitPanel.Inner` (EUI 123.1.0). */
+class EuiSplitPanelInner extends Component {
+  get css() {
+    const outer = euiSplitPanelContext(this);
+    const context = getEuiThemeContext(this);
+    const styles = useEuiBorealisStyles(context, euiSplitPanelInnerStyles);
+    const direction = outer?.borderDirection;
+    // A collapsed responsive row draws column dividers instead.
+    const collapse = direction === 'row' ? outer.collapseOn.map(size => `${euiBreakpoint(context.upstream, [size])}{${styles.highContrastBorders.column}${context.upstream.highContrastMode === 'preferred' ? NO_ROW_DIVIDER : ''}}`).join('') : undefined;
+    return [styles.euiSplitPanelInner, direction && styles.highContrastBorders[direction], collapse, this.args.css];
+  }
+  static {
+    n(this.prototype, "css", [cached]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<EuiPanel class=\"euiSplitPanel__inner\" @css={{this.css}} @hasShadow={{argOrDefault @hasShadow false}} @color={{argOrDefault @color \"transparent\"}} @borderRadius={{argOrDefault @borderRadius \"none\"}} @hasBorder={{argOrDefault @hasBorder false}} @paddingSize={{@paddingSize}} @grow={{@grow}} ...attributes>\n  {{yield}}\n</EuiPanel>", {
+      strictMode: true,
+      scope: () => ({
+        EuiPanel,
+        argOrDefault
+      })
+    }), this);
+  }
+}
 
 export { EuiSplitPanelInner as default };
 //# sourceMappingURL=inner.js.map

package/dist/components/eui-split-panel/inner.js.map

@@ -1 +1 @@
-{"version":3,"file":"inner.js","sources":["../../../src/components/eui-split-panel/inner.gts"],"sourcesContent":["import argOrDefault from '../../helpers/arg-or-default.ts';\nimport EuiPanel from '../eui-panel.gts';\n\nimport type { EuiPanelSignature } from '../eui-panel';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** One section of an EuiSplitPanelOuter, e.g. a header or footer with its own color. */\nexport interface EuiSplitPanelInnerSignature {\n  Element: EuiPanelSignature['Element'];\n  Args: {\n    /** Adds a shadow. Defaults to `false`. */\n    hasShadow?: EuiPanelSignature['Args']['hasShadow'];\n    /** Background, any `EuiPanel` color. Defaults to `'transparent'`. */\n    color?: EuiPanelSignature['Args']['color'];\n    /** Border radius. Defaults to `'none'`. */\n    borderRadius?: EuiPanelSignature['Args']['borderRadius'];\n    /** Adds a border. Defaults to `false`. */\n    hasBorder?: EuiPanelSignature['Args']['hasBorder'];\n    /** Padding, any `EuiPanel` padding size. */\n    paddingSize?: EuiPanelSignature['Args']['paddingSize'];\n  };\n  Blocks: {\n    /** The section's content. */\n    default: [];\n  };\n}\n\nconst EuiSplitPanelInner: TemplateOnlyComponent<EuiSplitPanelInnerSignature> =\n  <template>\n    <EuiPanel\n      class=\"euiSplitPanel__inner\"\n      @hasShadow={{argOrDefault @hasShadow false}}\n      @color={{argOrDefault @color \"transparent\"}}\n      @borderRadius={{argOrDefault @borderRadius \"none\"}}\n      @hasBorder={{argOrDefault @hasBorder false}}\n      @paddingSize={{@paddingSize}}\n      ...attributes\n    >\n      {{yield}}\n    </EuiPanel>\n  </template>;\n\nexport default EuiSplitPanelInner;\n"],"names":["EuiSplitPanelInner","setComponentTemplate","precompileTemplate","strictMode","scope","EuiPanel","argOrDefault","templateOnly"],"mappings":";;;;;;AA2BA,MAAMA,kBAA0C,GAAAC,oBAAA,CAC9CC,kBAAA,CAAA,gTAAA,EAYA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,QAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}
+{"version":3,"file":"inner.js","sources":["../../../src/components/eui-split-panel/inner.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\n\nimport { euiSplitPanelContext } from '../../-private/eui-split-panel-context.ts';\nimport argOrDefault from '../../helpers/arg-or-default.ts';\nimport { getEuiThemeContext } from '../../utils/emotion/consume.ts';\nimport { useEuiBorealisStyles } from '../../utils/eui/styles.ts';\nimport {\n  euiBreakpoint,\n  euiSplitPanelInnerStyles\n} from '../../utils/eui/styles.generated.ts';\nimport EuiPanel from '../eui-panel.gts';\n\nimport type { EuiCss } from '../../utils/eui/styles.ts';\nimport type { EuiPanelSignature } from '../eui-panel';\n\n/** One section of an EuiSplitPanelOuter, e.g. a header or footer with its own color. */\nexport interface EuiSplitPanelInnerSignature {\n  Element: EuiPanelSignature['Element'];\n  Args: {\n    /** Adds a shadow. Defaults to `false`. */\n    hasShadow?: EuiPanelSignature['Args']['hasShadow'];\n    /** Background, any `EuiPanel` color. Defaults to `'transparent'`. */\n    color?: EuiPanelSignature['Args']['color'];\n    /** Border radius. Defaults to `'none'`. */\n    borderRadius?: EuiPanelSignature['Args']['borderRadius'];\n    /** Adds a border. Defaults to `false`. */\n    hasBorder?: EuiPanelSignature['Args']['hasBorder'];\n    /** Padding, any `EuiPanel` padding size. Defaults to `'m'`. */\n    paddingSize?: EuiPanelSignature['Args']['paddingSize'];\n    /** Grows to share the outer panel's space. Defaults to `true`. */\n    grow?: EuiPanelSignature['Args']['grow'];\n    /**\n     * Extra styles composed last into the panel's class (like upstream's\n     * `css` prop).\n     */\n    css?: EuiCss;\n  };\n  Blocks: {\n    /** The section's content. */\n    default: [];\n  };\n}\n\n// Undoes the row divider where a responsive row has collapsed to a column.\nconst NO_ROW_DIVIDER = '&:not(:last-child){border-inline-end:none;}';\n\n/** Upstream `EuiSplitPanel.Inner` (EUI 123.1.0). */\nexport default class EuiSplitPanelInner extends Component<EuiSplitPanelInnerSignature> {\n  @cached\n  get css(): EuiCss {\n    const outer = euiSplitPanelContext(this);\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiSplitPanelInnerStyles);\n    const direction = outer?.borderDirection;\n    // A collapsed responsive row draws column dividers instead.\n    const collapse =\n      direction === 'row'\n        ? outer!.collapseOn\n            .map(\n              (size) =>\n                `${euiBreakpoint(context.upstream, [size])}{${\n                  styles.highContrastBorders.column\n                }${context.upstream.highContrastMode === 'preferred' ? NO_ROW_DIVIDER : ''}}`\n            )\n            .join('')\n        : undefined;\n    return [\n      styles.euiSplitPanelInner,\n      direction && styles.highContrastBorders[direction],\n      collapse,\n      this.args.css\n    ];\n  }\n\n  <template>\n    <EuiPanel\n      class=\"euiSplitPanel__inner\"\n      @css={{this.css}}\n      @hasShadow={{argOrDefault @hasShadow false}}\n      @color={{argOrDefault @color \"transparent\"}}\n      @borderRadius={{argOrDefault @borderRadius \"none\"}}\n      @hasBorder={{argOrDefault @hasBorder false}}\n      @paddingSize={{@paddingSize}}\n      @grow={{@grow}}\n      ...attributes\n    >\n      {{yield}}\n    </EuiPanel>\n  </template>\n}\n"],"names":["NO_ROW_DIVIDER","EuiSplitPanelInner","Component","css","outer","euiSplitPanelContext","context","getEuiThemeContext","styles","useEuiBorealisStyles","euiSplitPanelInnerStyles","direction","borderDirection","collapse","collapseOn","map","size","euiBreakpoint","upstream","highContrastBorders","column","highContrastMode","join","undefined","euiSplitPanelInner","args","n","prototype","cached","setComponentTemplate","precompileTemplate","strictMode","scope","EuiPanel","argOrDefault"],"mappings":";;;;;;;;;;;;AA4CA;AACA,MAAMA,cAAA,GAAiB,6CAAA;AAEvB;AACe,MAAMC,kBAAA,SAA2BC,SAAA,CAAU;EACxD,IACIC,MAAc;AAChB,IAAA,MAAMC,KAAA,GAAQC,qBAAqB,IAAI,CAAA;AACvC,IAAA,MAAMC,OAAA,GAAUC,mBAAmB,IAAI,CAAA;AACvC,IAAA,MAAMC,MAAA,GAASC,qBAAqBH,OAAA,EAASI,wBAAA,CAAA;AAC7C,IAAA,MAAMC,YAAYP,KAAA,EAAOQ,eAAA;AACzB;IACA,MAAMC,QAAA,GACJF,SAAA,KAAc,KAAA,GACVP,KAAA,CAAOU,UAAU,CACdC,GAAG,CACDC,IAAA,IACC,CAAA,EAAGC,aAAA,CAAcX,OAAA,CAAQY,QAAQ,EAAE,CAACF,IAAA,CAAK,CAAA,IACvCR,MAAA,CAAOW,mBAAmB,CAACC,MAAM,CAAA,EAChCd,QAAQY,QAAQ,CAACG,gBAAgB,KAAK,WAAA,GAAcrB,iBAAiB,EAAA,CAAA,CAAA,CAAK,CAAA,CAEhFsB,IAAI,CAAC,EAAA,CAAA,GACRC,SAAA;IACN,OAAO,CACLf,MAAA,CAAOgB,kBAAkB,EACzBb,SAAA,IAAaH,MAAA,CAAOW,mBAAmB,CAACR,SAAA,CAAU,EAClDE,QAAA,EACA,IAAI,CAACY,IAAI,CAACtB,GAAG,CACd;AACH,EAAA;AAAA,EAAA;IAAAuB,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,KAAA,EAAA,CAxBCC,MAAA,CAAA,CAAA;AAAA;AA0BD,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,kVAAA,EAcA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,QAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

package/dist/components/eui-split-panel/outer.js

@@ -1,27 +1,59 @@
-import { not, eq } from 'ember-truth-helpers';
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
+import { provide } from 'ember-provide-consume-context';
 import argOrDefault from '../../helpers/arg-or-default.js';
-import classNames from '../../helpers/class-names.js';
-import useState from '../../helpers/use-state.js';
-import useIsWithinBreakpoints from '../../modifiers/use-is-within-breakpoints.js';
+import { EUI_SPLIT_PANEL_CONTEXT } from '../../-private/eui-split-panel-context.js';
+import { getEuiThemeContext } from '../../utils/emotion/consume.js';
+import { d5 as euiSplitPanelOuterStyles, d3 as euiBreakpoint } from '../../styles.generated-SYAxYhey.js';
 import EuiPanel from '../eui-panel.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 DEFAULT_SIZES = ['xs', 's'];
-const EuiSplitPanelOuter = setComponentTemplate(precompileTemplate("{{#let (argOrDefault @direction \"column\") (argOrDefault @responsive DEFAULT_SIZES) (useState false) as |direction responsive isResponsive|}}\n  <EuiPanel class={{classNames \"euiSplitPanel\" (if (eq direction \"row\") \"euiSplitPanel--row\") (if isResponsive.value \"euiSplitPanel-isResponsive\")}} @grow={{argOrDefault @grow false}} @paddingSize={{argOrDefault @paddingSize \"none\"}} @hasShadow={{@hasShadow}} @color={{@color}} @borderRadius={{@borderRadius}} @hasBorder={{@hasBorder}} {{useIsWithinBreakpoints sizes=responsive isActive=(not (not responsive)) setIsWithinBreakpointsValue=isResponsive.setState}} ...attributes>\n    {{yield}}\n  </EuiPanel>\n{{/let}}", {
-  strictMode: true,
-  scope: () => ({
-    argOrDefault,
-    DEFAULT_SIZES,
-    useState,
-    EuiPanel,
-    classNames,
-    eq,
-    useIsWithinBreakpoints,
-    not
-  })
-}), templateOnly());
+/**
+ * Upstream `EuiSplitPanel.Outer` (EUI 123.1.0). Upstream picks the direction
+ * in JS with `useIsWithinBreakpoints`; here the responsive collapse is a
+ * media query per breakpoint (same widths), so it needs no resize listener.
+ */
+class EuiSplitPanelOuter extends Component {
+  get splitPanelContext() {
+    return this;
+  }
+  static {
+    n(this.prototype, "splitPanelContext", [provide(EUI_SPLIT_PANEL_CONTEXT)]);
+  }
+  get direction() {
+    return this.args.direction === 'row' ? 'row' : 'column';
+  }
+  get collapseOn() {
+    if (this.direction !== 'row') return [];
+    const responsive = this.args.responsive ?? DEFAULT_SIZES;
+    return responsive === false ? [] : responsive;
+  }
+  /** Upstream `_canRenderHighContrastBorder` on the outer panel's own props. */
+  get borderDirection() {
+    return this.args.color === 'transparent' && !this.args.hasBorder ? undefined : this.direction;
+  }
+  get css() {
+    const upstream = getEuiThemeContext(this).upstream;
+    const styles = euiSplitPanelOuterStyles;
+    const collapse = Object.fromEntries(this.collapseOn.map(size => [euiBreakpoint(upstream, [size]), styles.column]));
+    return [styles.euiSplitPanelOuter, styles[this.direction], collapse, this.args.css];
+  }
+  static {
+    n(this.prototype, "css", [cached]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<EuiPanel class=\"euiSplitPanel\" @css={{this.css}} @grow={{argOrDefault @grow false}} @paddingSize={{argOrDefault @paddingSize \"none\"}} @hasShadow={{@hasShadow}} @color={{@color}} @borderRadius={{@borderRadius}} @hasBorder={{@hasBorder}} ...attributes>\n  {{yield}}\n</EuiPanel>", {
+      strictMode: true,
+      scope: () => ({
+        EuiPanel,
+        argOrDefault
+      })
+    }), this);
+  }
+}
 
 export { EuiSplitPanelOuter as default };
 //# sourceMappingURL=outer.js.map

package/dist/components/eui-split-panel/outer.js.map

@@ -1 +1 @@
-{"version":3,"file":"outer.js","sources":["../../../src/components/eui-split-panel/outer.gts"],"sourcesContent":["import { eq, not } from 'ember-truth-helpers';\n\nimport argOrDefault from '../../helpers/arg-or-default.ts';\nimport classNames from '../../helpers/class-names.ts';\nimport useState from '../../helpers/use-state.ts';\nimport useIsWithinBreakpoints from '../../modifiers/use-is-within-breakpoints.ts';\nimport EuiPanel from '../eui-panel.gts';\n\nimport type { Named } from '../../modifiers/use-is-within-breakpoints.ts';\nimport type { EuiPanelSignature } from '../eui-panel';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** A panel split into sections (`EuiSplitPanelInner`) with different colors or padding. */\nexport interface EuiSplitPanelOuterSignature {\n  Element: EuiPanelSignature['Element'];\n  Args: {\n    /** `'column'` stacks the sections, `'row'` puts them side by side. Defaults to `'column'`. */\n    direction?: 'column' | 'row';\n    /**\n     * Screen sizes on which a `'row'` split panel stacks its sections.\n     * Defaults to `['xs', 's']`; pass `false` to never stack.\n     */\n    responsive?: Named['sizes'];\n    /** Grows to fill a flex parent. Defaults to `false`. */\n    grow?: boolean;\n    /** Padding of the outer panel. Defaults to `'none'`. */\n    paddingSize?: EuiPanelSignature['Args']['paddingSize'];\n    /** Adds a shadow. */\n    hasShadow?: EuiPanelSignature['Args']['hasShadow'];\n    /** Background, any `EuiPanel` color. */\n    color?: EuiPanelSignature['Args']['color'];\n    /** Border radius. */\n    borderRadius?: EuiPanelSignature['Args']['borderRadius'];\n    /** Adds a border. */\n    hasBorder?: EuiPanelSignature['Args']['hasBorder'];\n  };\n  Blocks: {\n    /** The `EuiSplitPanelInner` sections. */\n    default: [];\n  };\n}\n\nconst DEFAULT_SIZES: Named['sizes'] = ['xs', 's'];\n\nconst EuiSplitPanelOuter: TemplateOnlyComponent<EuiSplitPanelOuterSignature> =\n  <template>\n    {{#let\n      (argOrDefault @direction \"column\")\n      (argOrDefault @responsive DEFAULT_SIZES)\n      (useState false)\n      as |direction responsive isResponsive|\n    }}\n      <EuiPanel\n        class={{classNames\n          \"euiSplitPanel\"\n          (if (eq direction \"row\") \"euiSplitPanel--row\")\n          (if isResponsive.value \"euiSplitPanel-isResponsive\")\n        }}\n        @grow={{argOrDefault @grow false}}\n        @paddingSize={{argOrDefault @paddingSize \"none\"}}\n        @hasShadow={{@hasShadow}}\n        @color={{@color}}\n        @borderRadius={{@borderRadius}}\n        @hasBorder={{@hasBorder}}\n        {{useIsWithinBreakpoints\n          sizes=responsive\n          isActive=(not (not responsive))\n          setIsWithinBreakpointsValue=isResponsive.setState\n        }}\n        ...attributes\n      >\n        {{yield}}\n      </EuiPanel>\n    {{/let}}\n  </template>;\n\nexport default EuiSplitPanelOuter;\n"],"names":["DEFAULT_SIZES","EuiSplitPanelOuter","setComponentTemplate","precompileTemplate","strictMode","scope","argOrDefault","useState","EuiPanel","classNames","eq","useIsWithinBreakpoints","not","templateOnly"],"mappings":";;;;;;;;;;AA0CA,MAAMA,aAAqB,GAAW,CAAC,IAAA,EAAM,GAAA,CAAI;AAEjD,MAAMC,kBAA0C,GAAAC,oBAAA,CAC9CC,kBAAA,CAAA,gqBAAA,EA6BA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,YAAA;IAAAN,aAAA;IAAAO,QAAA;IAAAC,QAAA;IAAAC,UAAA;IAAAC,EAAA;IAAAC,sBAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}
+{"version":3,"file":"outer.js","sources":["../../../src/components/eui-split-panel/outer.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\n\nimport { provide } from 'ember-provide-consume-context';\n\nimport argOrDefault from '../../helpers/arg-or-default.ts';\nimport { EUI_SPLIT_PANEL_CONTEXT } from '../../-private/eui-split-panel-context.ts';\nimport { getEuiThemeContext } from '../../utils/emotion/consume.ts';\nimport {\n  euiBreakpoint,\n  euiSplitPanelOuterStyles\n} from '../../utils/eui/styles.generated.ts';\nimport EuiPanel from '../eui-panel.gts';\n\nimport type { EuiSplitPanelContext } from '../../-private/eui-split-panel-context.ts';\nimport type { EuiBreakpointSize } from '../../utils/breakpoint.ts';\nimport type { EuiCss } from '../../utils/eui/styles.ts';\nimport type { EuiPanelSignature } from '../eui-panel';\n\n/** A panel split into sections (`EuiSplitPanelInner`) with different colors or padding. */\nexport interface EuiSplitPanelOuterSignature {\n  Element: EuiPanelSignature['Element'];\n  Args: {\n    /** `'column'` stacks the sections, `'row'` puts them side by side. Defaults to `'column'`. */\n    direction?: 'column' | 'row';\n    /**\n     * Screen sizes on which a `'row'` split panel stacks its sections.\n     * Defaults to `['xs', 's']`; pass `false` to never stack.\n     */\n    responsive?: EuiBreakpointSize[] | false;\n    /** Grows to fill a flex parent. Defaults to `false`. */\n    grow?: boolean;\n    /** Padding of the outer panel. Defaults to `'none'`. */\n    paddingSize?: EuiPanelSignature['Args']['paddingSize'];\n    /** Adds a shadow (only without a border). Defaults to `false`. */\n    hasShadow?: EuiPanelSignature['Args']['hasShadow'];\n    /** Background, any `EuiPanel` color. Defaults to `'plain'`. */\n    color?: EuiPanelSignature['Args']['color'];\n    /** Border radius. Defaults to `'m'`. */\n    borderRadius?: EuiPanelSignature['Args']['borderRadius'];\n    /** Adds a border. Defaults to `true` (EuiPanel's default). */\n    hasBorder?: EuiPanelSignature['Args']['hasBorder'];\n    /**\n     * Extra styles composed last into the panel's class (like upstream's\n     * `css` prop).\n     */\n    css?: EuiCss;\n  };\n  Blocks: {\n    /** The `EuiSplitPanelInner` sections. */\n    default: [];\n  };\n}\n\nconst DEFAULT_SIZES: EuiBreakpointSize[] = ['xs', 's'];\n\n/**\n * Upstream `EuiSplitPanel.Outer` (EUI 123.1.0). Upstream picks the direction\n * in JS with `useIsWithinBreakpoints`; here the responsive collapse is a\n * media query per breakpoint (same widths), so it needs no resize listener.\n */\nexport default class EuiSplitPanelOuter\n  extends Component<EuiSplitPanelOuterSignature>\n  implements EuiSplitPanelContext\n{\n  @provide(EUI_SPLIT_PANEL_CONTEXT)\n  get splitPanelContext(): EuiSplitPanelContext {\n    return this;\n  }\n\n  get direction(): 'row' | 'column' {\n    return this.args.direction === 'row' ? 'row' : 'column';\n  }\n\n  get collapseOn(): readonly EuiBreakpointSize[] {\n    if (this.direction !== 'row') return [];\n    const responsive = this.args.responsive ?? DEFAULT_SIZES;\n    return responsive === false ? [] : responsive;\n  }\n\n  /** Upstream `_canRenderHighContrastBorder` on the outer panel's own props. */\n  get borderDirection(): 'row' | 'column' | undefined {\n    return this.args.color === 'transparent' && !this.args.hasBorder\n      ? undefined\n      : this.direction;\n  }\n\n  @cached\n  get css(): EuiCss {\n    const upstream = getEuiThemeContext(this).upstream;\n    const styles = euiSplitPanelOuterStyles;\n    const collapse = Object.fromEntries(\n      this.collapseOn.map((size) => [\n        euiBreakpoint(upstream, [size]),\n        styles.column\n      ])\n    );\n    return [\n      styles.euiSplitPanelOuter,\n      styles[this.direction],\n      collapse,\n      this.args.css\n    ];\n  }\n\n  <template>\n    <EuiPanel\n      class=\"euiSplitPanel\"\n      @css={{this.css}}\n      @grow={{argOrDefault @grow false}}\n      @paddingSize={{argOrDefault @paddingSize \"none\"}}\n      @hasShadow={{@hasShadow}}\n      @color={{@color}}\n      @borderRadius={{@borderRadius}}\n      @hasBorder={{@hasBorder}}\n      ...attributes\n    >\n      {{yield}}\n    </EuiPanel>\n  </template>\n}\n"],"names":["DEFAULT_SIZES","EuiSplitPanelOuter","Component","splitPanelContext","n","prototype","provide","EUI_SPLIT_PANEL_CONTEXT","direction","args","collapseOn","responsive","borderDirection","color","hasBorder","undefined","css","upstream","getEuiThemeContext","styles","euiSplitPanelOuterStyles","collapse","Object","fromEntries","map","size","euiBreakpoint","column","euiSplitPanelOuter","cached","setComponentTemplate","precompileTemplate","strictMode","scope","EuiPanel","argOrDefault"],"mappings":";;;;;;;;;;;;AAsDA,MAAMA,aAAe,GAAsB,CAAC,IAAA,EAAM,GAAA,CAAI;AAEtD;;;;AAIC;AACc,MAAMC,kBAAA,SACXC,SAAA,CACG;EAEX,IACIC,oBAA0C;AAC5C,IAAA,OAAO,IAAI;AACb,EAAA;AAAA,EAAA;AAAAC,IAAAA,CAAA,MAAAC,SAAA,EAAA,mBAAA,EAAA,CAHCC,OAAA,CAAQC,uBAAA,CAAA,CAAA,CAAA;AAAA;EAKT,IAAIC,SAAAA,GAA8B;IAChC,OAAO,IAAI,CAACC,IAAI,CAACD,SAAS,KAAK,QAAQ,KAAA,GAAQ,QAAA;AACjD,EAAA;EAEA,IAAIE,aAA2C;AAC7C,IAAA,IAAI,IAAI,CAACF,SAAS,KAAK,KAAA,EAAO,OAAO,EAAE;IACvC,MAAMG,aAAa,IAAI,CAACF,IAAI,CAACE,UAAU,IAAIX,aAAA;AAC3C,IAAA,OAAOW,UAAA,KAAe,KAAA,GAAQ,EAAE,GAAGA,UAAA;AACrC,EAAA;AAEA;EACA,IAAIC,eAAAA,GAAgD;AAClD,IAAA,OAAO,IAAI,CAACH,IAAI,CAACI,KAAK,KAAK,aAAA,IAAiB,CAAC,IAAI,CAACJ,IAAI,CAACK,SAAS,GAC5DC,SAAA,GACA,IAAI,CAACP,SAAS;AACpB,EAAA;EAEA,IACIQ,MAAc;AAChB,IAAA,MAAMC,QAAA,GAAWC,kBAAA,CAAmB,IAAI,CAAA,CAAED,QAAQ;IAClD,MAAME,MAAA,GAASC,wBAAA;AACf,IAAA,MAAMC,QAAA,GAAWC,MAAA,CAAOC,WAAW,CACjC,IAAI,CAACb,UAAU,CAACc,GAAG,CAAEC,IAAA,IAAS,CAC5BC,aAAA,CAAcT,QAAA,EAAU,CAACQ,IAAA,CAAK,CAAA,EAC9BN,MAAA,CAAOQ,MAAM,CACd,CAAA,CAAA;AAEH,IAAA,OAAO,CACLR,MAAA,CAAOS,kBAAkB,EACzBT,MAAM,CAAC,IAAI,CAACX,SAAS,CAAC,EACtBa,QAAA,EACA,IAAI,CAACZ,IAAI,CAACO,GAAG,CACd;AACH,EAAA;AAAA,EAAA;IAAAZ,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,KAAA,EAAA,CAhBCwB,MAAA,CAAA,CAAA;AAAA;AAkBD,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,2RAAA,EAcA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,QAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

package/dist/components/eui-stat/description.js

@@ -1,14 +1,12 @@
-import { element } from 'ember-element-helper';
-import EuiTextComponent from '../eui-text.js';
+import EuiText from '../eui-text.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const EuiStatDescription = setComponentTemplate(precompileTemplate("{{#if @descriptionElement}}\n  {{#let (element @descriptionElement) as |DescriptionElement|}}\n    <EuiText class=\"euiStat__description\" @size=\"s\">\n      <DescriptionElement aria-hidden=\"true\">\n        {{yield}}\n      </DescriptionElement>\n    </EuiText>\n  {{/let}}\n\n{{else}}\n  <EuiText class=\"euiStat__description\" @size=\"s\">\n    <p aria-hidden=\"true\">\n      {{yield}}\n    </p>\n  </EuiText>\n{{/if}}", {
+/** Upstream: `<EuiText size="s" className="euiStat__description">` around the element. */const EuiStatDescription = setComponentTemplate(precompileTemplate("{{#let (element (if @descriptionElement @descriptionElement \"p\")) as |DescriptionElement|}}\n  <EuiText class=\"euiStat__description\" @size=\"s\">\n    <DescriptionElement>{{yield}}</DescriptionElement>\n  </EuiText>\n{{/let}}", {
   strictMode: true,
   scope: () => ({
-    element,
-    EuiText: EuiTextComponent
+    EuiText
   })
 }), templateOnly());
 

package/dist/components/eui-stat/description.js.map

@@ -1 +1 @@
-{"version":3,"file":"description.js","sources":["../../../src/components/eui-stat/description.gts"],"sourcesContent":["\nimport { element } from 'ember-element-helper';\n\nimport EuiText from '../eui-text.gts';\n\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** @private The description of an EuiStat. */\nexport interface EuiStatDescriptionSignature {\n  Args: {\n    /**\n     * The element to use for the description. Defaults to `p`.\n     */\n    descriptionElement?: keyof HTMLElementTagNameMap;\n  };\n  Blocks: {\n    /** The text. */\n    default: [];\n  };\n}\n\nconst EuiStatDescription: TemplateOnlyComponent<EuiStatDescriptionSignature> =\n  <template>\n    {{#if @descriptionElement}}\n      {{#let (element @descriptionElement) as |DescriptionElement|}}\n        <EuiText class=\"euiStat__description\" @size=\"s\">\n          <DescriptionElement aria-hidden=\"true\">\n            {{yield}}\n          </DescriptionElement>\n        </EuiText>\n      {{/let}}\n\n    {{else}}\n      <EuiText class=\"euiStat__description\" @size=\"s\">\n        <p aria-hidden=\"true\">\n          {{yield}}\n        </p>\n      </EuiText>\n    {{/if}}\n  </template>;\n\nexport default EuiStatDescription;\n"],"names":["EuiStatDescription","setComponentTemplate","precompileTemplate","strictMode","scope","element","EuiText","templateOnly"],"mappings":";;;;;;AAqBA,MAAMA,kBAA0C,GAAAC,oBAAA,CAC9CC,kBAAA,CAAA,0aAAA,EAiBA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,OAAA;AAAAC,aAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}
+{"version":3,"file":"description.js","sources":["../../../src/components/eui-stat/description.gts"],"sourcesContent":["import EuiText from '../eui-text.gts';\n\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** @private The description of an EuiStat. */\nexport interface EuiStatDescriptionSignature {\n  Args: {\n    /**\n     * The element to use for the description. Defaults to `p`.\n     */\n    descriptionElement?: keyof HTMLElementTagNameMap;\n  };\n  Blocks: {\n    /** The text. */\n    default: [];\n  };\n}\n\n/** Upstream: `<EuiText size=\"s\" className=\"euiStat__description\">` around the element. */\nconst EuiStatDescription: TemplateOnlyComponent<EuiStatDescriptionSignature> =\n  <template>\n    {{#let\n      (element (if @descriptionElement @descriptionElement \"p\"))\n      as |DescriptionElement|\n    }}\n      <EuiText class=\"euiStat__description\" @size=\"s\">\n        <DescriptionElement>{{yield}}</DescriptionElement>\n      </EuiText>\n    {{/let}}\n  </template>;\n\nexport default EuiStatDescription;\n"],"names":["EuiStatDescription","setComponentTemplate","precompileTemplate","strictMode","scope","EuiText","templateOnly"],"mappings":";;;;;AAkBA,gGACMA,kBAA0C,GAAAC,oBAAA,CAC9CC,kBAAA,CAAA,uOAAA,EASA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}

package/dist/components/eui-stat/title.js

@@ -1,20 +1,56 @@
-import { hash } from '@ember/helper';
-import { element } from 'ember-element-helper';
-import style from 'ember-style-modifier/modifiers/style';
-import EuiTitle from '../eui-title.js';
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
+import { service } from '@ember/service';
+import { getEuiThemeContext } from '../../utils/emotion/consume.js';
+import { useEuiBorealisStyles, euiClass } from '../../utils/eui/styles.js';
+import { D as euiTitleStyles, ev as euiStatTitleStyles } from '../../styles.generated-SYAxYhey.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import templateOnly from '@ember/component/template-only';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
 
-const EuiStatTitle = setComponentTemplate(precompileTemplate("{{#if @titleElement}}\n  {{#let (element @titleElement) as |TitleElement|}}\n    <EuiTitle @size={{@titleSize}} ...attributes>\n      <TitleElement aria-hidden=\"true\" {{style (if @isColorClass (hash color=@titleColor))}}>\n        {{yield}}\n      </TitleElement>\n    </EuiTitle>\n  {{/let}}\n{{else}}\n  <EuiTitle @size={{@titleSize}} ...attributes>\n    <p aria-hidden=\"true\" {{style (if @isColorClass (hash color=@titleColor))}}>\n      {{yield}}\n    </p>\n  </EuiTitle>\n{{/if}}", {
-  strictMode: true,
-  scope: () => ({
-    element,
-    EuiTitle,
-    style,
-    hash
-  })
-}), templateOnly());
+const STAT_TITLE_COLORS = ['default', 'subdued', 'primary', 'success', 'warning', 'danger', 'accent'];
 
-export { EuiStatTitle as default };
+/** @private The title of an EuiStat. */
+
+class EuiStatTitle extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  get tagName() {
+    return this.args.titleElement ?? 'p';
+  }
+  get classes() {
+    const context = getEuiThemeContext(this);
+    const title = useEuiBorealisStyles(context, euiTitleStyles);
+    const stat = useEuiBorealisStyles(context, euiStatTitleStyles);
+    const color = this.args.titleColor ?? 'default';
+    const named = STAT_TITLE_COLORS.includes(color);
+    // Upstream EuiTitle clones its classes onto the title element; the stat
+    // `css` follows. Custom colors are a class instead of an inline style.
+    return euiClass(context,
+    // React's global reset zeroes the element box and sets the font.
+    {
+      boxSizing: 'border-box',
+      margin: 0,
+      padding: 0,
+      fontFamily: context.upstream.euiTheme.font.family
+    }, title.euiTitle, title[this.args.titleSize ?? 'l'], stat.euiStat__title, named ? stat[color] : {
+      color
+    }, this.args.isLoading && stat.isLoading);
+  }
+  static {
+    n(this.prototype, "classes", [cached]);
+  }
+  get loadingLabel() {
+    return this.args.isLoading ? this.euiI18n.lookupToken('euiStat.loadingText', 'Statistic is loading') : undefined;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("{{#let (element this.tagName) as |TitleElement|}}\n  <TitleElement class=\"euiTitle euiStat__title {{this.classes}}\" aria-label={{this.loadingLabel}} ...attributes>{{yield}}</TitleElement>\n{{/let}}", {
+      strictMode: true
+    }), this);
+  }
+}
+
+export { STAT_TITLE_COLORS, EuiStatTitle as default };
 //# sourceMappingURL=title.js.map

package/dist/components/eui-stat/title.js.map

@@ -1 +1 @@
-{"version":3,"file":"title.js","sources":["../../../src/components/eui-stat/title.gts"],"sourcesContent":["import { hash } from '@ember/helper';\n\nimport { element } from 'ember-element-helper';\nimport style from 'ember-style-modifier/modifiers/style';\n\nimport EuiTitle from '../eui-title.gts';\n\nimport type { EuiTitleSignature } from '../eui-title';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** @private The title of an EuiStat. */\nexport interface EuiStatTitleSignature {\n  Element: any;\n  Args: {\n    /** Size, any `EuiTitle` size. */\n    titleSize?: EuiTitleSignature['Args']['size'];\n    /** A CSS color, when it is not one of the named colors. */\n    titleColor?: string;\n    /** Tag of the title. Defaults to `'p'`. */\n    titleElement?: string;\n    /** Whether `@titleColor` is a named color (a class). */\n    isColorClass?: boolean;\n  };\n  Blocks: {\n    /** The text. */\n    default: [];\n  };\n}\n\nconst EuiStatTitle: TemplateOnlyComponent<EuiStatTitleSignature> = <template>\n  {{#if @titleElement}}\n    {{#let (element @titleElement) as |TitleElement|}}\n      <EuiTitle @size={{@titleSize}} ...attributes>\n        <TitleElement\n          aria-hidden=\"true\"\n          {{style (if @isColorClass (hash color=@titleColor))}}\n        >\n          {{yield}}\n        </TitleElement>\n      </EuiTitle>\n    {{/let}}\n  {{else}}\n    <EuiTitle @size={{@titleSize}} ...attributes>\n      <p\n        aria-hidden=\"true\"\n        {{style (if @isColorClass (hash color=@titleColor))}}\n      >\n        {{yield}}\n      </p>\n    </EuiTitle>\n  {{/if}}\n</template>;\n\nexport default EuiStatTitle;\n"],"names":["EuiStatTitle","setComponentTemplate","precompileTemplate","strictMode","scope","element","EuiTitle","style","hash","templateOnly"],"mappings":";;;;;;;;AA6BA,MAAMA,YAAoC,GAAAC,oBAAA,CAAyBC,kBAAA,CAAA,0eAAA,EAsBnE;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,OAAA;IAAAC,QAAA;IAAAC,KAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}
+{"version":3,"file":"title.js","sources":["../../../src/components/eui-stat/title.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\nimport { service } from '@ember/service';\n\nimport { getEuiThemeContext } from '../../utils/emotion/consume.ts';\nimport { euiClass, useEuiBorealisStyles } from '../../utils/eui/styles.ts';\nimport {\n  euiStatTitleStyles,\n  euiTitleStyles\n} from '../../utils/eui/styles.generated.ts';\n\nimport type EuiI18n from '../../services/eui-i18n';\nimport type { EuiTitleSignature } from '../eui-title';\n\n/** Upstream's named stat title colors (`stat.js` `COLORS`). */\nexport const STAT_TITLE_COLORS = [\n  'default',\n  'subdued',\n  'primary',\n  'success',\n  'warning',\n  'danger',\n  'accent'\n] as const;\n\nexport type EuiStatTitleColor = (typeof STAT_TITLE_COLORS)[number];\n\n/** @private The title of an EuiStat. */\nexport interface EuiStatTitleSignature {\n  Element: any;\n  Args: {\n    /** Size, any `EuiTitle` size. Defaults to `'l'`. */\n    titleSize?: EuiTitleSignature['Args']['size'];\n    /** A named stat color or any CSS color. Defaults to `'default'`. */\n    titleColor?: EuiStatTitleColor | string;\n    /** Tag of the title. Defaults to `'p'`. */\n    titleElement?: string;\n    /** Pulses the title and labels it \"Statistic is loading\". */\n    isLoading?: boolean;\n    /** @deprecated Has no effect; named colors are detected from `@titleColor`. */\n    isColorClass?: boolean;\n  };\n  Blocks: {\n    /** The text. */\n    default: [];\n  };\n}\n\nexport default class EuiStatTitle extends Component<EuiStatTitleSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  get tagName(): string {\n    return this.args.titleElement ?? 'p';\n  }\n\n  @cached\n  get classes() {\n    const context = getEuiThemeContext(this);\n    const title = useEuiBorealisStyles(context, euiTitleStyles);\n    const stat = useEuiBorealisStyles(context, euiStatTitleStyles);\n    const color = this.args.titleColor ?? 'default';\n    const named = (STAT_TITLE_COLORS as readonly string[]).includes(color);\n    // Upstream EuiTitle clones its classes onto the title element; the stat\n    // `css` follows. Custom colors are a class instead of an inline style.\n    return euiClass(\n      context,\n      // React's global reset zeroes the element box and sets the font.\n      {\n        boxSizing: 'border-box',\n        margin: 0,\n        padding: 0,\n        fontFamily: context.upstream.euiTheme.font.family\n      },\n      title.euiTitle,\n      title[this.args.titleSize ?? 'l'],\n      stat.euiStat__title,\n      named ? stat[color as EuiStatTitleColor] : { color },\n      this.args.isLoading && stat.isLoading\n    );\n  }\n\n  get loadingLabel(): string | undefined {\n    return this.args.isLoading\n      ? this.euiI18n.lookupToken('euiStat.loadingText', 'Statistic is loading')\n      : undefined;\n  }\n\n  <template>\n    {{#let (element this.tagName) as |TitleElement|}}\n      <TitleElement\n        class=\"euiTitle euiStat__title {{this.classes}}\"\n        aria-label={{this.loadingLabel}}\n        ...attributes\n      >{{yield}}</TitleElement>\n    {{/let}}\n  </template>\n}\n"],"names":["STAT_TITLE_COLORS","EuiStatTitle","Component","g","prototype","service","i","tagName","args","titleElement","classes","context","getEuiThemeContext","title","useEuiBorealisStyles","euiTitleStyles","stat","euiStatTitleStyles","color","titleColor","named","includes","euiClass","boxSizing","margin","padding","fontFamily","upstream","euiTheme","font","family","euiTitle","titleSize","euiStat__title","isLoading","n","cached","loadingLabel","euiI18n","lookupToken","undefined","setComponentTemplate","precompileTemplate","strictMode"],"mappings":";;;;;;;;;;MAeaA,iBAAA,GAAoB,CAC/B,SAAA,EACA,SAAA,EACA,SAAA,EACA,SAAA,EACA,SAAA,EACA,QAAA,EACA,QAAA;;AAKF;;AAqBe,MAAMC,qBAAqBC,SAAA,CAAU;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CACjDC,OAAA,CAAA,CAAA;AAAA;EAAA,QAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,SAAA,CAAA,EAAA,MAAA;EAED,IAAIC,OAAAA,GAAkB;AACpB,IAAA,OAAO,IAAI,CAACC,IAAI,CAACC,YAAY,IAAI,GAAA;AACnC,EAAA;EAEA,IACIC,OAAAA,GAAU;AACZ,IAAA,MAAMC,OAAA,GAAUC,mBAAmB,IAAI,CAAA;AACvC,IAAA,MAAMC,KAAA,GAAQC,qBAAqBH,OAAA,EAASI,cAAA,CAAA;AAC5C,IAAA,MAAMC,IAAA,GAAOF,qBAAqBH,OAAA,EAASM,kBAAA,CAAA;IAC3C,MAAMC,QAAQ,IAAI,CAACV,IAAI,CAACW,UAAU,IAAI,SAAA;AACtC,IAAA,MAAMC,QAASpB,iBAAA,CAAwCqB,QAAQ,CAACH,KAAA,CAAA;AAChE;AACA;IACA,OAAOI,QAAA,CACLX;AACA;AACA,IAAA;AACEY,MAAAA,SAAA,EAAW,YAAA;AACXC,MAAAA,MAAA,EAAQ,CAAA;AACRC,MAAAA,OAAA,EAAS,CAAA;MACTC,UAAA,EAAYf,QAAQgB,QAAQ,CAACC,QAAQ,CAACC,IAAI,CAACC;KAC7C,EACAjB,KAAA,CAAMkB,QAAQ,EACdlB,KAAK,CAAC,IAAI,CAACL,IAAI,CAACwB,SAAS,IAAI,GAAA,CAAI,EACjChB,KAAKiB,cAAc,EACnBb,QAAQJ,IAAI,CAACE,KAAA,CAA2B,GAAG;AAAEA,MAAAA;KAAM,EACnD,IAAI,CAACV,IAAI,CAAC0B,SAAS,IAAIlB,KAAKkB,SAAS,CAAA;AAEzC,EAAA;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAA/B,SAAA,EAAA,SAAA,EAAA,CAxBCgC,MAAA,CAAA,CAAA;AAAA;EA0BD,IAAIC,YAAAA,GAAmC;AACrC,IAAA,OAAO,IAAI,CAAC7B,IAAI,CAAC0B,SAAS,GACtB,IAAI,CAACI,OAAO,CAACC,WAAW,CAAC,uBAAuB,sBAAA,CAAA,GAChDC,SAAA;AACN,EAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,yMAAA,EAQA;MAAAC,UAAA,EAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

package/dist/components/eui-stat.js

@@ -1,33 +1,39 @@
-import { helper } from '@ember/component/helper';
-import argOrDefault from '../helpers/arg-or-default.js';
-import classNames from '../helpers/class-names.js';
-import screenReaderOnly from '../modifiers/screen-reader-only.js';
-import { colorMapping } from '../utils/css-mappings/eui-stat.js';
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
+import { getEuiThemeContext } from '../utils/emotion/consume.js';
+import { useEuiBorealisStyles, euiClass } from '../utils/eui/styles.js';
+import { d6 as euiStatStyles } from '../styles.generated-SYAxYhey.js';
 import EuiStatDescription from './eui-stat/description.js';
 import EuiStatTitle from './eui-stat/title.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 isColorClass = helper(([input]) => {
-  if (!input) return false;
-  return colorMapping.hasOwnProperty(input);
-});
-const useScreenReader = helper(([title, description]) => {
-  return typeof title === 'string' && typeof description === 'string';
-});
-const EuiStat = setComponentTemplate(precompileTemplate("{{#let (classNames textAlign=(argOrDefault @textAlign \"left\") componentName=\"EuiStat\") (classNames \"euiStat__title\" (if @isLoading \"euiStat__title-isLoading\") color=(argOrDefault @titleColor \"default\") addBase=false componentName=\"EuiStat\") (argOrDefault @reverse false) (argOrDefault @titleSize \"l\") as |classes titleClasses reverse titleSize|}}\n  <div class={{classes}} ...attributes>\n    {{#if reverse}}\n      <EuiStatTitle class={{titleClasses}} @titleElement={{@titleElement}} @titleSize={{titleSize}} @isColorClass={{isColorClass @titleColor}}>\n        {{#if @isLoading}}\n          --\n        {{else}}\n          {{#if (has-block \"title\")}}\n            {{yield to=\"title\"}}\n          {{else}}\n            {{@title}}\n          {{/if}}\n        {{/if}}\n      </EuiStatTitle>\n      <EuiStatDescription @descriptionElement={{@descriptionElement}}>\n        {{#if (has-block \"description\")}}\n          {{yield to=\"description\"}}\n        {{else}}\n          {{@description}}\n        {{/if}}\n      </EuiStatDescription>\n    {{else}}\n      <EuiStatDescription @descriptionElement={{@descriptionElement}}>\n        {{#if (has-block \"description\")}}\n          {{yield to=\"description\"}}\n        {{else}}\n          {{@description}}\n        {{/if}}\n      </EuiStatDescription>\n      <EuiStatTitle class={{titleClasses}} @titleElement={{@titleElement}} @titleSize={{titleSize}} @isColorClass={{isColorClass @titleColor}}>\n        {{#if @isLoading}}\n          --\n        {{else}}\n          {{#if (has-block \"title\")}}\n            {{yield to=\"title\"}}\n          {{else}}\n            {{@title}}\n          {{/if}}\n        {{/if}}\n      </EuiStatTitle>\n    {{/if}}\n    {{#if (useScreenReader @title @description)}}\n      <p {{screenReaderOnly}}>\n        {{#if reverse}}\n          {{@title}}\n          {{@description}}\n        {{else}}\n          {{@description}}\n          {{@title}}\n        {{/if}}\n      </p>\n    {{/if}}\n    {{yield}}\n  </div>\n{{/let}}", {
-  strictMode: true,
-  scope: () => ({
-    classNames,
-    argOrDefault,
-    EuiStatTitle,
-    isColorClass,
-    EuiStatDescription,
-    useScreenReader,
-    screenReaderOnly
-  })
-}), templateOnly());
+const BOX_SIZING = {
+  boxSizing: 'border-box'
+};
+
+/** A key number with a description, e.g. on a dashboard. */
+
+/** Native Ember stat on the upstream EUI 123 / Borealis factories. */class EuiStat extends Component {
+  get classes() {
+    const context = getEuiThemeContext(this);
+    const styles = useEuiBorealisStyles(context, euiStatStyles);
+    return euiClass(context, BOX_SIZING, styles.euiStat, styles[this.args.textAlign ?? 'left']);
+  }
+  static {
+    n(this.prototype, "classes", [cached]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"euiStat {{this.classes}}\" ...attributes>\n  {{#unless @reverse}}\n    <EuiStatDescription @descriptionElement={{@descriptionElement}}>\n      {{#if (has-block \"description\")}}\n        {{yield to=\"description\"}}\n      {{else}}\n        {{@description}}\n      {{/if}}\n    </EuiStatDescription>\n  {{/unless}}\n  <EuiStatTitle @titleElement={{@titleElement}} @titleSize={{@titleSize}} @titleColor={{@titleColor}} @isLoading={{@isLoading}}>\n    {{#if @isLoading}}\n      --\n    {{else if (has-block \"title\")}}\n      {{yield to=\"title\"}}\n    {{else}}\n      {{@title}}\n    {{/if}}\n  </EuiStatTitle>\n  {{#if @reverse}}\n    <EuiStatDescription @descriptionElement={{@descriptionElement}}>\n      {{#if (has-block \"description\")}}\n        {{yield to=\"description\"}}\n      {{else}}\n        {{@description}}\n      {{/if}}\n    </EuiStatDescription>\n  {{/if}}\n  {{yield}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        EuiStatDescription,
+        EuiStatTitle
+      })
+    }), this);
+  }
+}
 
 export { EuiStat as default };
 //# sourceMappingURL=eui-stat.js.map

package/dist/components/eui-stat.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-stat.js","sources":["../../src/components/eui-stat.gts"],"sourcesContent":["import { helper } from '@ember/component/helper';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport screenReaderOnly from '../modifiers/screen-reader-only.ts';\nimport { colorMapping } from '../utils/css-mappings/eui-stat.ts';\nimport EuiStatDescription from './eui-stat/description.gts';\nimport EuiStatTitle from './eui-stat/title.gts';\n\nimport type {textAlignMapping } from '../utils/css-mappings/eui-stat.ts';\nimport type { EuiStatDescriptionSignature } from './eui-stat/description';\nimport type { EuiStatTitleSignature } from './eui-stat/title';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** A key number with a description, e.g. on a dashboard. */\nexport interface EuiStatSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** `'left'`, `'center'` or `'right'`. Defaults to `'left'`. */\n    textAlign?: keyof typeof textAlignMapping;\n    /** The number or value, e.g. \"1,234\". Use the `<:title>` block for markup. */\n    title?: string;\n    /** What it measures, e.g. \"Total users\". Use the `<:description>` block for markup. */\n    description?: string;\n    /**\n     * Color of the title: `'default'`, `'subdued'`, `'primary'`,\n     * `'success'`, `'danger'`, `'accent'`, or any CSS color.\n     * Defaults to `'default'`.\n     */\n    titleColor?: keyof typeof colorMapping;\n    /** Size of the title, any `EuiTitle` size. Defaults to `'l'`. */\n    titleSize?: EuiStatTitleSignature['Args']['titleSize'];\n    /** Shows \"--\" instead of the title, e.g. while it loads. */\n    isLoading?: boolean;\n    /** Puts the title above the description. Defaults to `false`. */\n    reverse?: boolean;\n    /** @deprecated Has no effect. */\n    screenReader?: boolean;\n    /** Tag of the title. Defaults to `'p'`. */\n    titleElement?: string;\n    /** Tag of the description. Defaults to `'p'`. */\n    descriptionElement?: EuiStatDescriptionSignature['Args']['descriptionElement'];\n  };\n  Blocks: {\n    /** The title, instead of `@title`. */\n    title: [];\n    /** The description, instead of `@description`. */\n    description: [];\n    /** Extra content after the stat, e.g. a trend. */\n    default: [];\n  };\n}\n\nconst isColorClass = helper(([input]: [string | undefined]) => {\n  if (!input) return false;\n\n  return colorMapping.hasOwnProperty(input);\n});\n\nconst useScreenReader = helper(\n  ([title, description]: [string | undefined, string | undefined]) => {\n    return typeof title === 'string' && typeof description === 'string';\n  }\n);\n\nconst EuiStat: TemplateOnlyComponent<EuiStatSignature> = <template>\n  {{#let\n    (classNames\n      textAlign=(argOrDefault @textAlign \"left\") componentName=\"EuiStat\"\n    )\n    (classNames\n      \"euiStat__title\"\n      (if @isLoading \"euiStat__title-isLoading\")\n      color=(argOrDefault @titleColor \"default\")\n      addBase=false\n      componentName=\"EuiStat\"\n    )\n    (argOrDefault @reverse false)\n    (argOrDefault @titleSize \"l\")\n    as |classes titleClasses reverse titleSize|\n  }}\n    <div class={{classes}} ...attributes>\n      {{#if reverse}}\n        <EuiStatTitle\n          class={{titleClasses}}\n          @titleElement={{@titleElement}}\n          @titleSize={{titleSize}}\n          @isColorClass={{isColorClass @titleColor}}\n        >\n          {{#if @isLoading}}\n            --\n          {{else}}\n            {{#if (has-block \"title\")}}\n              {{yield to=\"title\"}}\n            {{else}}\n              {{@title}}\n            {{/if}}\n          {{/if}}\n        </EuiStatTitle>\n        <EuiStatDescription @descriptionElement={{@descriptionElement}}>\n          {{#if (has-block \"description\")}}\n            {{yield to=\"description\"}}\n          {{else}}\n            {{@description}}\n          {{/if}}\n        </EuiStatDescription>\n      {{else}}\n        <EuiStatDescription @descriptionElement={{@descriptionElement}}>\n          {{#if (has-block \"description\")}}\n            {{yield to=\"description\"}}\n          {{else}}\n            {{@description}}\n          {{/if}}\n        </EuiStatDescription>\n        <EuiStatTitle\n          class={{titleClasses}}\n          @titleElement={{@titleElement}}\n          @titleSize={{titleSize}}\n          @isColorClass={{isColorClass @titleColor}}\n        >\n          {{#if @isLoading}}\n            --\n          {{else}}\n            {{#if (has-block \"title\")}}\n              {{yield to=\"title\"}}\n            {{else}}\n              {{@title}}\n            {{/if}}\n          {{/if}}\n        </EuiStatTitle>\n      {{/if}}\n      {{#if (useScreenReader @title @description)}}\n        <p {{screenReaderOnly}}>\n          {{#if reverse}}\n            {{@title}}\n            {{@description}}\n          {{else}}\n            {{@description}}\n            {{@title}}\n          {{/if}}\n        </p>\n      {{/if}}\n      {{yield}}\n    </div>\n  {{/let}}\n</template>;\n\nexport default EuiStat;\n"],"names":["isColorClass","helper","input","colorMapping","hasOwnProperty","useScreenReader","title","description","EuiStat","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","argOrDefault","EuiStatTitle","EuiStatDescription","screenReaderOnly","templateOnly"],"mappings":";;;;;;;;;;;AAqDA,MAAMA,YAAA,GAAeC,OAAO,CAAC,CAACC,MAA4B,KAAA;AACxD,EAAA,IAAI,CAACA,OAAO,OAAO,KAAA;AAEnB,EAAA,OAAOC,YAAA,CAAaC,cAAc,CAACF,KAAA,CAAA;AACrC,CAAA,CAAA;AAEA,MAAMG,eAAA,GAAkBJ,MAAA,CACtB,CAAC,CAACK,KAAA,EAAOC,WAAA,CAAsD,KAAA;EAC7D,OAAO,OAAOD,KAAA,KAAU,QAAA,IAAY,OAAOC,WAAA,KAAgB,QAAA;AAC7D,CAAA,CAAA;AAGF,MAAMC,OAA+B,GAAAC,oBAAA,CAAoBC,kBAAA,CAAA,s+DAAA,EAgFzD;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,UAAA;IAAAC,YAAA;IAAAC,YAAA;IAAAf,YAAA;IAAAgB,kBAAA;IAAAX,eAAA;AAAAY,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}
+{"version":3,"file":"eui-stat.js","sources":["../../src/components/eui-stat.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\n\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport { euiClass, useEuiBorealisStyles } from '../utils/eui/styles.ts';\nimport { euiStatStyles } from '../utils/eui/styles.generated.ts';\nimport EuiStatDescription from './eui-stat/description.gts';\nimport EuiStatTitle from './eui-stat/title.gts';\n\nimport type { EuiStatDescriptionSignature } from './eui-stat/description';\nimport type { EuiStatTitleColor, EuiStatTitleSignature } from './eui-stat/title';\n\nconst BOX_SIZING = { boxSizing: 'border-box' } as const;\n\nexport type EuiStatTextAlign = 'left' | 'center' | 'right';\n\n/** A key number with a description, e.g. on a dashboard. */\nexport interface EuiStatSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /**\n     * `'left'`, `'center'` or `'right'` (logical, so left/right flip in RTL).\n     * Defaults to `'left'`.\n     */\n    textAlign?: EuiStatTextAlign;\n    /** The number or value, e.g. \"1,234\". Use the `<:title>` block for markup. */\n    title?: string;\n    /** What it measures, e.g. \"Total users\". Use the `<:description>` block for markup. */\n    description?: string;\n    /**\n     * Color of the title: `'default'`, `'subdued'`, `'primary'`,\n     * `'success'`, `'warning'`, `'danger'`, `'accent'`, or any CSS color.\n     * Defaults to `'default'`.\n     */\n    titleColor?: EuiStatTitleColor | string;\n    /** Size of the title, any `EuiTitle` size. Defaults to `'l'`. */\n    titleSize?: EuiStatTitleSignature['Args']['titleSize'];\n    /**\n     * Shows \"--\" instead of the title, pulses it (unless reduced motion is\n     * requested) and labels it \"Statistic is loading\" (i18n token\n     * `euiStat.loadingText`).\n     */\n    isLoading?: boolean;\n    /** Puts the title above the description. Defaults to `false`. */\n    reverse?: boolean;\n    /** @deprecated Has no effect. */\n    screenReader?: boolean;\n    /** Tag of the title. Defaults to `'p'`. */\n    titleElement?: string;\n    /** Tag of the description. Defaults to `'p'`. */\n    descriptionElement?: EuiStatDescriptionSignature['Args']['descriptionElement'];\n  };\n  Blocks: {\n    /** The title, instead of `@title`. */\n    title: [];\n    /** The description, instead of `@description`. */\n    description: [];\n    /** Extra content after the stat, e.g. a trend. */\n    default: [];\n  };\n}\n\n/** Native Ember stat on the upstream EUI 123 / Borealis factories. */\nexport default class EuiStat extends Component<EuiStatSignature> {\n  @cached\n  get classes() {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiStatStyles);\n    return euiClass(\n      context,\n      BOX_SIZING,\n      styles.euiStat,\n      styles[this.args.textAlign ?? 'left']\n    );\n  }\n\n  <template>\n    <div class=\"euiStat {{this.classes}}\" ...attributes>\n      {{#unless @reverse}}\n        <EuiStatDescription @descriptionElement={{@descriptionElement}}>\n          {{#if (has-block \"description\")}}\n            {{yield to=\"description\"}}\n          {{else}}\n            {{@description}}\n          {{/if}}\n        </EuiStatDescription>\n      {{/unless}}\n      <EuiStatTitle\n        @titleElement={{@titleElement}}\n        @titleSize={{@titleSize}}\n        @titleColor={{@titleColor}}\n        @isLoading={{@isLoading}}\n      >\n        {{#if @isLoading}}\n          --\n        {{else if (has-block \"title\")}}\n          {{yield to=\"title\"}}\n        {{else}}\n          {{@title}}\n        {{/if}}\n      </EuiStatTitle>\n      {{#if @reverse}}\n        <EuiStatDescription @descriptionElement={{@descriptionElement}}>\n          {{#if (has-block \"description\")}}\n            {{yield to=\"description\"}}\n          {{else}}\n            {{@description}}\n          {{/if}}\n        </EuiStatDescription>\n      {{/if}}\n      {{yield}}\n    </div>\n  </template>\n}\n"],"names":["BOX_SIZING","boxSizing","EuiStat","Component","classes","context","getEuiThemeContext","styles","useEuiBorealisStyles","euiStatStyles","euiClass","euiStat","args","textAlign","n","prototype","cached","setComponentTemplate","precompileTemplate","strictMode","scope","EuiStatDescription","EuiStatTitle"],"mappings":";;;;;;;;;;;AAYA,MAAMA,UAAA,GAAa;AAAEC,EAAAA,SAAA,EAAW;AAAa,CAAA;;AAI7C;;AA8CA,sEACe,MAAMC,OAAA,SAAgBC,SAAA,CAAU;EAC7C,IACIC,OAAAA,GAAU;AACZ,IAAA,MAAMC,OAAA,GAAUC,mBAAmB,IAAI,CAAA;AACvC,IAAA,MAAMC,MAAA,GAASC,qBAAqBH,OAAA,EAASI,aAAA,CAAA;IAC7C,OAAOC,QAAA,CACLL,OAAA,EACAL,UAAA,EACAO,MAAA,CAAOI,OAAO,EACdJ,MAAM,CAAC,IAAI,CAACK,IAAI,CAACC,SAAS,IAAI,MAAA,CAAO,CAAA;AAEzC,EAAA;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CAVCC,MAAA,CAAA,CAAA;AAAA;AAYD,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,k5BAAA,EAoCA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,kBAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}