@ember-eui/core 15.0.0 → 16.0.1

package/dist/components/eui-empty-prompt.js

@@ -1,37 +1,125 @@
-import { concat } from '@ember/helper';
-import { eq, gte } from 'ember-truth-helpers';
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
+import { or, and } from 'ember-truth-helpers';
 import argOrDefault from '../helpers/arg-or-default.js';
-import classNames from '../helpers/class-names.js';
-import EuiFlexGroup from './eui-flex-group.js';
-import EuiFlexItem from './eui-flex-item.js';
+import { getEuiThemeContext } from '../utils/emotion/consume.js';
+import { useEuiBorealisStyles, euiClass } from '../utils/eui/styles.js';
+import { aX as euiEmptyPromptStyles, aY as euiFlexGroupStyles } from '../styles.generated-SYAxYhey.js';
+import EuiFlexItem, { euiFlexRootReset } from './eui-flex-item.js';
 import EuiIcon from './eui-icon.js';
 import EuiPanel from './eui-panel.js';
 import EuiSpacer from './eui-spacer.js';
-import EuiTextComponent from './eui-text.js';
-import EuiTextColor from './eui-text-color.js';
+import EuiText from './eui-text.js';
 import EuiTitle from './eui-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 EuiEmptyPrompt = setComponentTemplate(precompileTemplate("{{#let (argOrDefault @layout \"vertical\") as |layout|}}\n  <EuiPanel class={{classNames (if layout (concat \"euiEmptyPrompt--\" layout) \"euiEmptyPrompt--vertical\") componentName=\"EuiEmptyPrompt\" paddingSize=(argOrDefault @paddingSize \"l\")}} @paddingSize=\"none\" @color={{argOrDefault @color \"transparent\"}} @hasBorder={{@hasBorder}} @hasShadow={{false}} ...attributes>\n    <div class=\"euiEmptyPrompt__main\">\n      {{#if (has-block \"icon\")}}\n        <div class=\"euiEmptyPrompt__icon\">{{yield to=\"icon\"}}</div>\n      {{else if @iconType}}\n        <div class=\"euiEmptyPrompt__icon\">\n          <EuiIcon @type={{@iconType}} @size=\"xxl\" @color={{if @iconColor @iconColor (if @color @color \"subdued\")}} />\n        </div>\n      {{/if}}\n      <div class=\"euiEmptyPrompt__content\">\n        {{#if (has-block \"content\")}}\n          <div class=\"euiEmptyPrompt__contentInner\">{{yield to=\"content\"}}</div>\n        {{else}}\n          <div class=\"euiEmptyPrompt__contentInner\">\n            {{#if @title}}\n              <EuiTitle @size={{argOrDefault @titleSize \"m\"}}>{{@title}}</EuiTitle>\n            {{/if}}\n            {{#if @body}}\n              <EuiTextColor @color=\"subdued\">\n                {{#if @title}}\n                  <EuiSpacer @size=\"m\" />\n                {{/if}}\n                <EuiText>\n                  {{@body}}\n                </EuiText>\n              </EuiTextColor>\n            {{/if}}\n            {{#if @actions.length}}\n              <EuiSpacer @size=\"l\" />\n            {{/if}}\n            {{#if (gte @actions.length 2)}}\n              <EuiFlexGroup class=\"euiEmptyPrompt__actions\" @gutterSize=\"m\" @alignItems=\"center\" @justifyContent=\"center\" @direction={{if (eq layout \"vertical\") \"column\" \"row\"}}>\n                {{#each @actions as |oneAction|}}\n                  <EuiFlexItem @grow={{false}}>\n                    {{oneAction}}\n                  </EuiFlexItem>\n                {{/each}}\n              </EuiFlexGroup>\n            {{else}}\n              {{#each @actions as |oneAction|}}\n                {{oneAction}}\n              {{/each}}\n            {{/if}}\n          </div>\n        {{/if}}\n      </div>\n    </div>\n\n    {{#if (has-block \"footer\")}}\n      <div class=\"euiEmptyPrompt__footer\">\n        {{yield to=\"footer\"}}\n      </div>\n    {{else}}\n      {{#if @footer}}\n        <div class=\"euiEmptyPrompt__footer\">\n          {{@footer}}\n        </div>\n      {{/if}}\n    {{/if}}\n  </EuiPanel>\n{{/let}}", {
-  strictMode: true,
-  scope: () => ({
-    argOrDefault,
-    EuiPanel,
-    classNames,
-    concat,
-    EuiIcon,
-    EuiTitle,
-    EuiTextColor,
-    EuiSpacer,
-    EuiText: EuiTextComponent,
-    gte,
-    EuiFlexGroup,
-    eq,
-    EuiFlexItem
-  })
-}), templateOnly());
+const FLEX_RESET = euiFlexRootReset(undefined);
+/** Upstream's named EuiIcon colors (`icon/named_colors.js`). */
+const NAMED_ICON_COLORS = ['default', 'primary', 'neutral', 'success', 'accent', 'accentSecondary', 'warning', 'risk', 'danger', 'text', 'subdued', 'ghost', 'inherit'];
+/**
+ * A message filling an empty page or section: an icon, a title, some text
+ * and actions, e.g. when a list has no items yet or a page failed to load.
+ */
+
+/** Native Ember empty prompt on the upstream EUI 123 / Borealis factories. */class EuiEmptyPrompt extends Component {
+  get context() {
+    return getEuiThemeContext(this);
+  }
+  static {
+    n(this.prototype, "context", [cached]);
+  }
+  get styles() {
+    return useEuiBorealisStyles(this.context, euiEmptyPromptStyles);
+  }
+  static {
+    n(this.prototype, "styles", [cached]);
+  }
+  get layout() {
+    return this.args.layout === 'horizontal' ? 'horizontal' : 'vertical';
+  }
+  get paddingSize() {
+    return this.args.paddingSize ?? 'l';
+  }
+  get color() {
+    return this.args.color ?? 'transparent';
+  }
+  get panelColor() {
+    return this.color;
+  }
+  get hasBorder() {
+    return this.args.hasBorder ?? this.color === 'plain';
+  }
+  /** Upstream: an EuiPanel with the prompt's styles as its `css`. */
+  get panelCss() {
+    return [this.styles.euiEmptyPrompt, this.styles[this.layout]];
+  }
+  static {
+    n(this.prototype, "panelCss", [cached]);
+  }
+  get mainClass() {
+    const main = this.styles.main;
+    return euiClass(this.context, main.euiEmptyPrompt__main, main[this.layout], main[this.paddingSize], this.layout === 'horizontal' && main.horizontalPadding[this.paddingSize]);
+  }
+  static {
+    n(this.prototype, "mainClass", [cached]);
+  }
+  get iconClass() {
+    const icon = this.styles.icon;
+    return euiClass(this.context, icon.euiEmptyPrompt__icon, icon[this.layout]);
+  }
+  static {
+    n(this.prototype, "iconClass", [cached]);
+  }
+  get contentClass() {
+    const content = this.styles.content;
+    return euiClass(this.context, content.euiEmptyPrompt__content, content[this.layout]);
+  }
+  /** Upstream's EuiFlexGroup (gutter m, centered, column/row) plus the prompt's actions `css`, as one class. */
+  static {
+    n(this.prototype, "contentClass", [cached]);
+  }
+  get actionsClass() {
+    const flex = useEuiBorealisStyles(this.context, euiFlexGroupStyles);
+    const actions = this.styles.actions;
+    const vertical = this.layout === 'vertical';
+    return euiClass(this.context, FLEX_RESET, flex.euiFlexGroup, vertical ? undefined : flex.responsive, flex.gutterSizes.m, flex.justifyContent.center, flex.alignItems.center, flex.direction[vertical ? 'column' : 'row'], actions.euiEmptyPrompt__actions, actions[this.layout]);
+  }
+  static {
+    n(this.prototype, "actionsClass", [cached]);
+  }
+  get footerClass() {
+    const footer = this.styles.footer;
+    return euiClass(this.context, this.styles.footer.euiEmptyPrompt__footer, footer[this.paddingSize], footer[this.color], this.color === 'transparent' && !this.hasBorder && this.styles.footer.roundedBorders);
+  }
+  static {
+    n(this.prototype, "footerClass", [cached]);
+  }
+  get iconColor() {
+    if (this.args.iconColor) return this.args.iconColor;
+    return NAMED_ICON_COLORS.includes(this.color) ? this.color : 'subdued';
+  }
+  get hasActions() {
+    return Boolean(this.args.actions?.length);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<EuiPanel class=\"euiEmptyPrompt\" @color={{this.panelColor}} @hasBorder={{this.hasBorder}} @hasShadow={{if @hasShadow true false}} @paddingSize=\"none\" @borderRadius=\"m\" @grow={{false}} @css={{this.panelCss}} ...attributes>\n  {{#let (and (argOrDefault @hasIconBlock true) (has-block \"icon\")) (and (argOrDefault @hasTitleBlock true) (has-block \"title\")) (and (argOrDefault @hasBodyBlock true) (has-block \"body\")) (and (argOrDefault @hasActionsBlock true) (has-block \"actions\")) (and (argOrDefault @hasFooterBlock true) (has-block \"footer\")) as |hasIconBlock hasTitleBlock hasBodyBlock hasActionsBlock hasFooterBlock|}}\n    {{#let (or hasTitleBlock @title) (or hasBodyBlock @body) as |hasTitle hasBody|}}\n      <div class=\"euiEmptyPrompt__main {{this.mainClass}}\">\n        {{#if hasIconBlock}}\n          <div class=\"euiEmptyPrompt__icon {{this.iconClass}}\">{{yield to=\"icon\"}}</div>\n        {{else if @iconType}}\n          <div class=\"euiEmptyPrompt__icon {{this.iconClass}}\">\n            <EuiIcon @type={{@iconType}} @size=\"xxl\" @color={{this.iconColor}} />\n          </div>\n        {{/if}}\n        <div class=\"euiEmptyPrompt__content {{this.contentClass}}\">\n          {{#if (has-block \"content\")}}\n            {{yield to=\"content\"}}\n          {{else}}\n            {{#if hasTitleBlock}}\n              <EuiTitle @size={{if @titleSize @titleSize \"m\"}}>{{yield to=\"title\"}}</EuiTitle>\n            {{else if @title}}\n              <EuiTitle @size={{if @titleSize @titleSize \"m\"}}>{{@title}}</EuiTitle>\n            {{/if}}\n            {{#if hasBody}}\n              {{#if hasTitle}}\n                <EuiSpacer @size=\"s\" />\n              {{/if}}\n              <EuiText @color=\"subdued\">\n                {{#if hasBodyBlock}}{{yield to=\"body\"}}{{else}}{{@body}}{{/if}}\n              </EuiText>\n            {{/if}}\n            {{#if (or hasActionsBlock this.hasActions)}}\n              {{#if (or hasTitle hasBody)}}\n                <EuiSpacer @size=\"l\" />\n              {{/if}}\n              <div class=\"euiFlexGroup euiEmptyPrompt__actions {{this.actionsClass}}\">\n                {{#if hasActionsBlock}}\n                  {{yield (component EuiFlexItem grow=false) to=\"actions\"}}\n                {{else}}\n                  {{#each @actions as |Action|}}\n                    <EuiFlexItem @grow={{false}}>\n                      <Action />\n                    </EuiFlexItem>\n                  {{/each}}\n                {{/if}}\n              </div>\n            {{/if}}\n          {{/if}}\n        </div>\n      </div>\n      {{#if hasFooterBlock}}\n        <div class=\"euiEmptyPrompt__footer {{this.footerClass}}\">\n          {{yield to=\"footer\"}}\n        </div>\n      {{else if @footer}}\n        <div class=\"euiEmptyPrompt__footer {{this.footerClass}}\">\n          {{@footer}}\n        </div>\n      {{/if}}\n    {{/let}}\n  {{/let}}\n</EuiPanel>", {
+      strictMode: true,
+      scope: () => ({
+        EuiPanel,
+        and,
+        argOrDefault,
+        or,
+        EuiIcon,
+        EuiTitle,
+        EuiSpacer,
+        EuiText,
+        EuiFlexItem
+      })
+    }), this);
+  }
+}
 
 export { EuiEmptyPrompt as default };
 //# sourceMappingURL=eui-empty-prompt.js.map

package/dist/components/eui-empty-prompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-empty-prompt.js","sources":["../../src/components/eui-empty-prompt.gts"],"sourcesContent":["import { concat } from '@ember/helper';\n\nimport { eq,gte } from 'ember-truth-helpers';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport EuiFlexGroup from './eui-flex-group.gts';\nimport EuiFlexItem from './eui-flex-item.gts';\nimport EuiIcon from './eui-icon.gts';\nimport EuiPanel from './eui-panel.gts';\nimport EuiSpacer from './eui-spacer.gts';\nimport EuiText from './eui-text.gts';\nimport EuiTextColor from './eui-text-color.gts';\nimport EuiTitle from './eui-title.gts';\n\nimport type { EuiIconSignature } from './eui-icon';\nimport type { EuiPanelSignature } from './eui-panel';\nimport type { EuiTitleSignature } from './eui-title';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\nimport type { ComponentLike } from '@glint/template';\n\n/**\n * A message filling an empty page or section: an icon, a title, some text\n * and actions, e.g. when a list has no items yet or a page failed to load.\n */\nexport interface EuiEmptyPromptSignature {\n  Element: EuiPanelSignature['Element'];\n  Args: {\n    /**\n     * `'vertical'` centers everything in a column; `'horizontal'` puts the\n     * icon beside the text. Defaults to `'vertical'`.\n     */\n    layout?: 'vertical' | 'horizontal';\n    /** Padding around the content, any `EuiPanel` padding size. Defaults to `'l'`. */\n    paddingSize?: EuiPanelSignature['Args']['paddingSize'];\n    /**\n     * Background, any `EuiPanel` color (`'plain'`, `'subdued'`, `'danger'`,\n     * …). Defaults to `'transparent'`.\n     */\n    color?: EuiPanelSignature['Args']['color'];\n    /** Adds a border around the prompt. */\n    hasBorder?: EuiPanelSignature['Args']['hasBorder'];\n    /** Large icon above the title, e.g. `'search'` or `'logoKibana'`. */\n    iconType?: EuiIconSignature['Args']['type'];\n    /** Color of the icon. Defaults to `@color`, or `'subdued'`. */\n    iconColor?: EuiIconSignature['Args']['color'];\n    /** Title, e.g. \"No dashboards yet\". */\n    title?: string;\n    /** Size of the title, any `EuiTitle` size. Defaults to `'m'`. */\n    titleSize?: EuiTitleSignature['Args']['size'];\n    /** Text explaining the situation and what to do. */\n    body?: string;\n    /**\n     * Components rendered as the prompt's actions (e.g. a primary\n     * `EuiButton` and an `EuiButtonEmpty`), laid out in a row or column.\n     * Use the `<:content>` block for full control.\n     */\n    actions?: ComponentLike[];\n    /** Text in a footer, e.g. a link to the docs. Use the `<:footer>` block for markup. */\n    footer?: string;\n  };\n  Blocks: {\n    /** Custom content instead of the `@iconType` icon, e.g. an `EuiImage`. */\n    icon?: [];\n    /** Replaces the title, body and actions with your own content. */\n    content?: [];\n    /** The footer, instead of `@footer`. */\n    footer?: [];\n  };\n}\n\nconst EuiEmptyPrompt: TemplateOnlyComponent<EuiEmptyPromptSignature> =\n  <template>\n    {{#let (argOrDefault @layout \"vertical\") as |layout|}}\n      <EuiPanel\n        class={{classNames\n          (if\n            layout (concat \"euiEmptyPrompt--\" layout) \"euiEmptyPrompt--vertical\"\n          )\n          componentName=\"EuiEmptyPrompt\"\n          paddingSize=(argOrDefault @paddingSize \"l\")\n        }}\n        @paddingSize=\"none\"\n        @color={{argOrDefault @color \"transparent\"}}\n        @hasBorder={{@hasBorder}}\n        @hasShadow={{false}}\n        ...attributes\n      >\n        <div class=\"euiEmptyPrompt__main\">\n          {{#if (has-block \"icon\")}}\n            <div class=\"euiEmptyPrompt__icon\">{{yield to=\"icon\"}}</div>\n          {{else if @iconType}}\n            <div class=\"euiEmptyPrompt__icon\">\n              <EuiIcon\n                @type={{@iconType}}\n                @size=\"xxl\"\n                @color={{if @iconColor @iconColor (if @color @color \"subdued\")}}\n              />\n            </div>\n          {{/if}}\n          <div class=\"euiEmptyPrompt__content\">\n            {{#if (has-block \"content\")}}\n              <div class=\"euiEmptyPrompt__contentInner\">{{yield\n                  to=\"content\"\n                }}</div>\n            {{else}}\n              <div class=\"euiEmptyPrompt__contentInner\">\n                {{#if @title}}\n                  <EuiTitle\n                    @size={{argOrDefault @titleSize \"m\"}}\n                  >{{@title}}</EuiTitle>\n                {{/if}}\n                {{#if @body}}\n                  <EuiTextColor @color=\"subdued\">\n                    {{#if @title}}\n                      <EuiSpacer @size=\"m\" />\n                    {{/if}}\n                    <EuiText>\n                      {{@body}}\n                    </EuiText>\n                  </EuiTextColor>\n                {{/if}}\n                {{#if @actions.length}}\n                  <EuiSpacer @size=\"l\" />\n                {{/if}}\n                {{#if (gte @actions.length 2)}}\n                  <EuiFlexGroup\n                    class=\"euiEmptyPrompt__actions\"\n                    @gutterSize=\"m\"\n                    @alignItems=\"center\"\n                    @justifyContent=\"center\"\n                    @direction={{if (eq layout \"vertical\") \"column\" \"row\"}}\n                  >\n                    {{#each @actions as |oneAction|}}\n                      <EuiFlexItem @grow={{false}}>\n                        {{oneAction}}\n                      </EuiFlexItem>\n                    {{/each}}\n                  </EuiFlexGroup>\n                {{else}}\n                  {{#each @actions as |oneAction|}}\n                    {{oneAction}}\n                  {{/each}}\n                {{/if}}\n              </div>\n            {{/if}}\n          </div>\n        </div>\n\n        {{#if (has-block \"footer\")}}\n          <div class=\"euiEmptyPrompt__footer\">\n            {{yield to=\"footer\"}}\n          </div>\n        {{else}}\n          {{#if @footer}}\n            <div class=\"euiEmptyPrompt__footer\">\n              {{@footer}}\n            </div>\n          {{/if}}\n        {{/if}}\n      </EuiPanel>\n    {{/let}}\n  </template>;\n\nexport default EuiEmptyPrompt;\n"],"names":["EuiEmptyPrompt","setComponentTemplate","precompileTemplate","strictMode","scope","argOrDefault","EuiPanel","classNames","concat","EuiIcon","EuiTitle","EuiTextColor","EuiSpacer","EuiText","gte","EuiFlexGroup","eq","EuiFlexItem","templateOnly"],"mappings":";;;;;;;;;;;;;;;;AAuEA,MAAMA,cAAsC,GAAAC,oBAAA,CAC1CC,kBAAA,CAAA,6+EAAA,EA0FA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,YAAA;IAAAC,QAAA;IAAAC,UAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,QAAA;IAAAC,YAAA;IAAAC,SAAA;aAAAC,gBAAA;IAAAC,GAAA;IAAAC,YAAA;IAAAC,EAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}
+{"version":3,"file":"eui-empty-prompt.js","sources":["../../src/components/eui-empty-prompt.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\n\nimport { and, or } from 'ember-truth-helpers';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport { euiClass, useEuiBorealisStyles } from '../utils/eui/styles.ts';\nimport type { EuiCss } from '../utils/eui/styles.ts';\nimport {\n  euiEmptyPromptStyles,\n  euiFlexGroupStyles\n} from '../utils/eui/styles.generated.ts';\nimport { euiFlexRootReset } from './eui-flex-item.gts';\nimport EuiFlexItem from './eui-flex-item.gts';\nimport EuiIcon from './eui-icon.gts';\nimport EuiPanel from './eui-panel.gts';\nimport EuiSpacer from './eui-spacer.gts';\nimport EuiText from './eui-text.gts';\nimport EuiTitle from './eui-title.gts';\n\nimport type { EuiIconSignature } from './eui-icon';\nimport type { EuiPanelSignature } from './eui-panel';\nimport type { EuiTitleSignature } from './eui-title';\nimport type { ComponentLike } from '@glint/template';\n\ntype Layout = 'vertical' | 'horizontal';\ntype PaddingSize = 'none' | 's' | 'm' | 'l';\n\nconst FLEX_RESET = euiFlexRootReset(undefined);\n\n/** Upstream's named EuiIcon colors (`icon/named_colors.js`). */\nconst NAMED_ICON_COLORS = [\n  'default',\n  'primary',\n  'neutral',\n  'success',\n  'accent',\n  'accentSecondary',\n  'warning',\n  'risk',\n  'danger',\n  'text',\n  'subdued',\n  'ghost',\n  'inherit'\n];\n\n/**\n * A message filling an empty page or section: an icon, a title, some text\n * and actions, e.g. when a list has no items yet or a page failed to load.\n */\nexport interface EuiEmptyPromptSignature {\n  Element: EuiPanelSignature['Element'];\n  Args: {\n    /**\n     * `'vertical'` centers everything in a column; `'horizontal'` puts the\n     * icon beside the text on large screens (it stacks below the `l`\n     * breakpoint). Defaults to `'vertical'`.\n     */\n    layout?: Layout;\n    /** Padding around the content: `'none'`, `'s'`, `'m'` or `'l'`. Defaults to `'l'`. */\n    paddingSize?: PaddingSize;\n    /**\n     * Background, any `EuiPanel` color (`'plain'`, `'subdued'`, `'danger'`,\n     * …). Defaults to `'transparent'`.\n     */\n    color?: EuiPanelSignature['Args']['color'];\n    /** Adds a border around the prompt. Defaults to `true` for `'plain'`, `false` otherwise. */\n    hasBorder?: boolean;\n    /**\n     * Adds a shadow to the panel (upstream EuiPanel's `hasShadow`), only\n     * shown on a `'plain'` panel without a border. Defaults to `false`.\n     */\n    hasShadow?: boolean;\n    /** Large icon above the title, e.g. `'magnify'` or `'logoKibana'`. */\n    iconType?: EuiIconSignature['Args']['type'];\n    /**\n     * Color of the icon. Defaults to `@color` when it is a named icon color\n     * (e.g. `'danger'`), or `'subdued'`.\n     */\n    iconColor?: EuiIconSignature['Args']['color'];\n    /** Title, e.g. \"No dashboards yet\". */\n    title?: string;\n    /** Size of the title, any `EuiTitle` size. Defaults to `'m'`. */\n    titleSize?: EuiTitleSignature['Args']['size'];\n    /** Text explaining the situation and what to do. */\n    body?: string;\n    /**\n     * Components rendered as the prompt's actions (e.g. a primary\n     * `EuiButton` and an `EuiButtonEmpty`), laid out in a column (vertical)\n     * or row (horizontal). Use the `<:content>` block for full control.\n     */\n    actions?: ComponentLike[];\n    /** Text in a footer, e.g. a link to the docs. Use the `<:footer>` block for markup. */\n    footer?: string;\n    /** @private Render the `<:icon>` block. Defaults to `true`. */\n    hasIconBlock?: boolean;\n    /** @private Render the `<:title>` block. Defaults to `true`. */\n    hasTitleBlock?: boolean;\n    /** @private Render the `<:body>` block. Defaults to `true`. */\n    hasBodyBlock?: boolean;\n    /** @private Render the `<:actions>` block. Defaults to `true`. */\n    hasActionsBlock?: boolean;\n    /** @private Render the `<:footer>` block. Defaults to `true`. */\n    hasFooterBlock?: boolean;\n  };\n  Blocks: {\n    /** Custom content instead of the `@iconType` icon, e.g. an `EuiImage`. */\n    icon?: [];\n    /**\n     * The title, inside an `EuiTitle` of `@titleSize`, instead of `@title`;\n     * bring your own heading, e.g. `<h2>No dashboards</h2>`.\n     */\n    title?: [];\n    /** The body, inside a subdued `EuiText`, instead of `@body`. */\n    body?: [];\n    /**\n     * Actions, instead of `@actions`, laid out like them. Wrap each in the\n     * yielded item: `<:actions as |Item|><Item><EuiButton …/></Item></:actions>`.\n     */\n    actions?: [ComponentLike<{ Blocks: { default: [] } }>];\n    /** Replaces the title, body and actions with your own content. */\n    content?: [];\n    /** The footer, instead of `@footer`. */\n    footer?: [];\n  };\n}\n\n/** Native Ember empty prompt on the upstream EUI 123 / Borealis factories. */\nexport default class EuiEmptyPrompt extends Component<EuiEmptyPromptSignature> {\n  @cached\n  get context() {\n    return getEuiThemeContext(this);\n  }\n\n  @cached\n  get styles() {\n    return useEuiBorealisStyles(this.context, euiEmptyPromptStyles);\n  }\n\n  get layout(): Layout {\n    return this.args.layout === 'horizontal' ? 'horizontal' : 'vertical';\n  }\n\n  get paddingSize(): PaddingSize {\n    return this.args.paddingSize ?? 'l';\n  }\n\n  get color(): string {\n    return this.args.color ?? 'transparent';\n  }\n\n  get panelColor(): EuiPanelSignature['Args']['color'] {\n    return this.color as EuiPanelSignature['Args']['color'];\n  }\n\n  get hasBorder(): boolean {\n    return this.args.hasBorder ?? this.color === 'plain';\n  }\n\n  /** Upstream: an EuiPanel with the prompt's styles as its `css`. */\n  @cached\n  get panelCss(): EuiCss {\n    return [this.styles.euiEmptyPrompt, this.styles[this.layout]];\n  }\n\n  @cached\n  get mainClass() {\n    const main = this.styles.main;\n    return euiClass(\n      this.context,\n      main.euiEmptyPrompt__main,\n      main[this.layout],\n      main[this.paddingSize],\n      this.layout === 'horizontal' && main.horizontalPadding[this.paddingSize]\n    );\n  }\n\n  @cached\n  get iconClass() {\n    const icon = this.styles.icon;\n    return euiClass(this.context, icon.euiEmptyPrompt__icon, icon[this.layout]);\n  }\n\n  @cached\n  get contentClass() {\n    const content = this.styles.content;\n    return euiClass(\n      this.context,\n      content.euiEmptyPrompt__content,\n      content[this.layout]\n    );\n  }\n\n  /** Upstream's EuiFlexGroup (gutter m, centered, column/row) plus the prompt's actions `css`, as one class. */\n  @cached\n  get actionsClass() {\n    const flex = useEuiBorealisStyles(this.context, euiFlexGroupStyles);\n    const actions = this.styles.actions;\n    const vertical = this.layout === 'vertical';\n    return euiClass(\n      this.context,\n      FLEX_RESET,\n      flex.euiFlexGroup,\n      vertical ? undefined : flex.responsive,\n      flex.gutterSizes.m,\n      flex.justifyContent.center,\n      flex.alignItems.center,\n      flex.direction[vertical ? 'column' : 'row'],\n      actions.euiEmptyPrompt__actions,\n      actions[this.layout]\n    );\n  }\n\n  @cached\n  get footerClass() {\n    const footer = this.styles.footer as Record<string, unknown>;\n    return euiClass(\n      this.context,\n      this.styles.footer.euiEmptyPrompt__footer,\n      footer[this.paddingSize] as never,\n      footer[this.color] as never,\n      this.color === 'transparent' &&\n        !this.hasBorder &&\n        this.styles.footer.roundedBorders\n    );\n  }\n\n  get iconColor(): string {\n    if (this.args.iconColor) return this.args.iconColor;\n    return NAMED_ICON_COLORS.includes(this.color) ? this.color : 'subdued';\n  }\n\n  get hasActions(): boolean {\n    return Boolean(this.args.actions?.length);\n  }\n\n  <template>\n    <EuiPanel\n      class=\"euiEmptyPrompt\"\n      @color={{this.panelColor}}\n      @hasBorder={{this.hasBorder}}\n      @hasShadow={{if @hasShadow true false}}\n      @paddingSize=\"none\"\n      @borderRadius=\"m\"\n      @grow={{false}}\n      @css={{this.panelCss}}\n      ...attributes\n    >\n      {{#let\n        (and (argOrDefault @hasIconBlock true) (has-block \"icon\"))\n        (and (argOrDefault @hasTitleBlock true) (has-block \"title\"))\n        (and (argOrDefault @hasBodyBlock true) (has-block \"body\"))\n        (and (argOrDefault @hasActionsBlock true) (has-block \"actions\"))\n        (and (argOrDefault @hasFooterBlock true) (has-block \"footer\"))\n        as |hasIconBlock hasTitleBlock hasBodyBlock hasActionsBlock hasFooterBlock|\n      }}\n        {{#let\n          (or hasTitleBlock @title)\n          (or hasBodyBlock @body)\n          as |hasTitle hasBody|\n        }}\n          <div class=\"euiEmptyPrompt__main {{this.mainClass}}\">\n            {{#if hasIconBlock}}\n              <div class=\"euiEmptyPrompt__icon {{this.iconClass}}\">{{yield\n                  to=\"icon\"\n                }}</div>\n            {{else if @iconType}}\n              <div class=\"euiEmptyPrompt__icon {{this.iconClass}}\">\n                <EuiIcon\n                  @type={{@iconType}}\n                  @size=\"xxl\"\n                  @color={{this.iconColor}}\n                />\n              </div>\n            {{/if}}\n            <div class=\"euiEmptyPrompt__content {{this.contentClass}}\">\n              {{#if (has-block \"content\")}}\n                {{yield to=\"content\"}}\n              {{else}}\n                {{#if hasTitleBlock}}\n                  <EuiTitle @size={{if @titleSize @titleSize \"m\"}}>{{yield\n                      to=\"title\"\n                    }}</EuiTitle>\n                {{else if @title}}\n                  <EuiTitle\n                    @size={{if @titleSize @titleSize \"m\"}}\n                  >{{@title}}</EuiTitle>\n                {{/if}}\n                {{#if hasBody}}\n                  {{#if hasTitle}}\n                    <EuiSpacer @size=\"s\" />\n                  {{/if}}\n                  <EuiText @color=\"subdued\">\n                    {{#if hasBodyBlock}}{{yield to=\"body\"}}{{else}}{{@body}}{{/if}}\n                  </EuiText>\n                {{/if}}\n                {{#if (or hasActionsBlock this.hasActions)}}\n                  {{#if (or hasTitle hasBody)}}\n                    <EuiSpacer @size=\"l\" />\n                  {{/if}}\n                  <div\n                    class=\"euiFlexGroup euiEmptyPrompt__actions {{this.actionsClass}}\"\n                  >\n                    {{#if hasActionsBlock}}\n                      {{yield (component EuiFlexItem grow=false) to=\"actions\"}}\n                    {{else}}\n                      {{#each @actions as |Action|}}\n                        <EuiFlexItem @grow={{false}}>\n                          <Action />\n                        </EuiFlexItem>\n                      {{/each}}\n                    {{/if}}\n                  </div>\n                {{/if}}\n              {{/if}}\n            </div>\n          </div>\n          {{#if hasFooterBlock}}\n            <div class=\"euiEmptyPrompt__footer {{this.footerClass}}\">\n              {{yield to=\"footer\"}}\n            </div>\n          {{else if @footer}}\n            <div class=\"euiEmptyPrompt__footer {{this.footerClass}}\">\n              {{@footer}}\n            </div>\n          {{/if}}\n        {{/let}}\n      {{/let}}\n    </EuiPanel>\n  </template>\n}\n"],"names":["FLEX_RESET","euiFlexRootReset","undefined","NAMED_ICON_COLORS","EuiEmptyPrompt","Component","context","getEuiThemeContext","n","prototype","cached","styles","useEuiBorealisStyles","euiEmptyPromptStyles","layout","args","paddingSize","color","panelColor","hasBorder","panelCss","euiEmptyPrompt","mainClass","main","euiClass","euiEmptyPrompt__main","horizontalPadding","iconClass","icon","euiEmptyPrompt__icon","contentClass","content","euiEmptyPrompt__content","actionsClass","flex","euiFlexGroupStyles","actions","vertical","euiFlexGroup","responsive","gutterSizes","m","justifyContent","center","alignItems","direction","euiEmptyPrompt__actions","footerClass","footer","euiEmptyPrompt__footer","roundedBorders","iconColor","includes","hasActions","Boolean","length","setComponentTemplate","precompileTemplate","strictMode","scope","EuiPanel","and","argOrDefault","or","EuiIcon","EuiTitle","EuiSpacer","EuiText","EuiFlexItem"],"mappings":"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"}

package/dist/components/eui-error-message.js

@@ -0,0 +1,73 @@
+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 { aZ as euiErrorBoundaryStyles } from '../styles.generated-SYAxYhey.js';
+import EuiCodeBlockComponent from './eui-code-block.js';
+import EuiTitle from './eui-title.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
+
+function euiErrorMessageText(error) {
+  if (!(error instanceof Error)) return String(error);
+  const {
+    message,
+    stack
+  } = error;
+  const index = stack?.indexOf(message) ?? -1;
+  const rest = index > -1 ? stack?.substring(index + message.length + 1) : stack;
+  return `Error: ${message}\n${rest ?? ''}`;
+}
+/**
+ * Upstream `EuiErrorMessage`, the fallback `EuiErrorBoundary` renders: a
+ * danger-striped panel with an "Error" title and the error text in a code
+ * block. Ember has no render error boundaries, so render it yourself where
+ * an error was caught, e.g. in a route's `error` template.
+ */
+class EuiErrorMessage extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  get classes() {
+    const context = getEuiThemeContext(this);
+    const styles = useEuiBorealisStyles(context, euiErrorBoundaryStyles);
+    return `euiErrorBoundary ${euiClass(context, styles.euiErrorBoundary,
+    // Glimmer keeps the whitespace around component markup (JSX drops it):
+    // collapse it in the code block and keep the error text preformatted
+    {
+      '& .euiCodeBlock__code': {
+        whiteSpace: 'normal'
+      },
+      '& .euiErrorBoundary__text': {
+        display: 'block',
+        whiteSpace: 'pre-wrap'
+      }
+    }, this.args.css)}`;
+  }
+  static {
+    n(this.prototype, "classes", [cached]);
+  }
+  get text() {
+    if (this.args.errorMessage !== undefined) return this.args.errorMessage;
+    if (this.args.error !== undefined) return euiErrorMessageText(this.args.error);
+    return undefined;
+  }
+  get title() {
+    return this.euiI18n.lookupToken('euiErrorBoundary.error', 'Error');
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class={{this.classes}} data-test-subj=\"euiErrorBoundary\" ...attributes>\n  {{!-- the title makes the block rich content, rendered as-is (upstream) --}}\n  <EuiCodeBlock><EuiTitle @size=\"xs\"><p>{{this.title}}</p></EuiTitle><span class=\"euiErrorBoundary__text\">{{this.text}}</span></EuiCodeBlock>\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        EuiCodeBlock: EuiCodeBlockComponent,
+        EuiTitle
+      })
+    }), this);
+  }
+}
+
+export { EuiErrorMessage as default, euiErrorMessageText };
+//# sourceMappingURL=eui-error-message.js.map

package/dist/components/eui-error-message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-error-message.js","sources":["../../src/components/eui-error-message.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 { euiErrorBoundaryStyles } from '../utils/eui/styles.generated.ts';\nimport EuiCodeBlock from './eui-code-block.gts';\nimport EuiTitle from './eui-title.gts';\n\nimport type EuiI18n from '../services/eui-i18n.ts';\nimport type { EuiCss } from '../utils/eui/styles.ts';\n\n/**\n * Upstream `EuiErrorBoundary`'s message text: \"Error: message\" followed by\n * the stack without its first line (only Chrome repeats the message there).\n */\nexport function euiErrorMessageText(error: unknown): string {\n  if (!(error instanceof Error)) return String(error);\n  const { message, stack } = error;\n  const index = stack?.indexOf(message) ?? -1;\n  const rest =\n    index > -1 ? stack?.substring(index + message.length + 1) : stack;\n  return `Error: ${message}\\n${rest ?? ''}`;\n}\n\nexport interface EuiErrorMessageSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** The text to show, as upstream's `errorMessage` (e.g. a message and stack). */\n    errorMessage?: string;\n    /**\n     * Ember EUI: an error to show instead, formatted like upstream's\n     * `EuiErrorBoundary` formats a caught error (message and stack). Handy in\n     * a route's `error` template: `<EuiErrorMessage @error={{@model}} />`.\n     */\n    error?: unknown;\n    /** Extra styles composed last into the panel's class (upstream's `css`). */\n    css?: EuiCss;\n  };\n}\n\n/**\n * Upstream `EuiErrorMessage`, the fallback `EuiErrorBoundary` renders: a\n * danger-striped panel with an \"Error\" title and the error text in a code\n * block. Ember has no render error boundaries, so render it yourself where\n * an error was caught, e.g. in a route's `error` template.\n */\nexport default class EuiErrorMessage extends Component<EuiErrorMessageSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  @cached\n  get classes(): string {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiErrorBoundaryStyles);\n    return `euiErrorBoundary ${euiClass(\n      context,\n      styles.euiErrorBoundary,\n      // Glimmer keeps the whitespace around component markup (JSX drops it):\n      // collapse it in the code block and keep the error text preformatted\n      {\n        '& .euiCodeBlock__code': { whiteSpace: 'normal' },\n        '& .euiErrorBoundary__text': { display: 'block', whiteSpace: 'pre-wrap' }\n      },\n      this.args.css\n    )}`;\n  }\n\n  get text(): string | undefined {\n    if (this.args.errorMessage !== undefined) return this.args.errorMessage;\n    if (this.args.error !== undefined) return euiErrorMessageText(this.args.error);\n    return undefined;\n  }\n\n  get title(): string {\n    return this.euiI18n.lookupToken('euiErrorBoundary.error', 'Error');\n  }\n\n  <template>\n    <div class={{this.classes}} data-test-subj=\"euiErrorBoundary\" ...attributes>\n      {{! the title makes the block rich content, rendered as-is (upstream) }}\n      <EuiCodeBlock><EuiTitle @size=\"xs\"><p>{{this.title}}</p></EuiTitle><span class=\"euiErrorBoundary__text\">{{this.text}}</span></EuiCodeBlock>\n    </div>\n  </template>\n}\n"],"names":["euiErrorMessageText","error","Error","String","message","stack","index","indexOf","rest","substring","length","EuiErrorMessage","Component","g","prototype","service","i","classes","context","getEuiThemeContext","styles","useEuiBorealisStyles","euiErrorBoundaryStyles","euiClass","euiErrorBoundary","whiteSpace","display","args","css","n","cached","text","errorMessage","undefined","title","euiI18n","lookupToken","setComponentTemplate","precompileTemplate","strictMode","scope","EuiCodeBlock","EuiTitle"],"mappings":";;;;;;;;;;;;AAiBO,SAASA,mBAAAA,CAAoBC,KAAc,EAAS;EACzD,IAAI,EAAEA,KAAA,YAAiBC,KAAK,CAAA,EAAG,OAAOC,MAAA,CAAOF,KAAA,CAAA;EAC7C,MAAM;IAAEG,OAAO;AAAEC,IAAAA;GAAO,GAAGJ,KAAA;EAC3B,MAAMK,KAAA,GAAQD,KAAA,EAAOE,OAAA,CAAQH,OAAA,CAAA,IAAY,EAAC;EAC1C,MAAMI,IAAA,GACJF,KAAA,GAAQ,EAAC,GAAID,KAAA,EAAOI,UAAUH,KAAA,GAAQF,OAAA,CAAQM,MAAM,GAAG,CAAA,CAAA,GAAKL,KAAA;AAC9D,EAAA,OAAO,UAAUD,YAAYI,QAAQ,EAAA,CAAA,CAAI;AAC3C;AAkBA;;;;;;AAMe,MAAMG,eAAA,SAAwBC,SAAA,CAAU;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CACpDC,OAAA,CAAA,CAAA;AAAA;EAAA,QAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,SAAA,CAAA,EAAA,MAAA;EAED,IACIC,OAAAA,GAAkB;AACpB,IAAA,MAAMC,OAAA,GAAUC,mBAAmB,IAAI,CAAA;AACvC,IAAA,MAAMC,MAAA,GAASC,qBAAqBH,OAAA,EAASI,sBAAA,CAAA;AAC7C,IAAA,OAAO,oBAAoBC,QAAA,CACzBL,SACAE,MAAA,CAAOI,gBAAgB;AACvB;AACA;AACA,IAAA;AACE,MAAA,uBAAA,EAAyB;AAAEC,QAAAA,UAAA,EAAY;OAAS;AAChD,MAAA,2BAAA,EAA6B;AAAEC,QAAAA,OAAA,EAAS,OAAA;AAASD,QAAAA,UAAA,EAAY;AAAW;AAC1E,KAAA,EACA,IAAI,CAACE,IAAI,CAACC,GAAG,CAAA,CAAA,CACZ;AACL,EAAA;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAf,SAAA,EAAA,SAAA,EAAA,CAfCgB,MAAA,CAAA,CAAA;AAAA;EAiBD,IAAIC,IAAAA,GAA2B;AAC7B,IAAA,IAAI,IAAI,CAACJ,IAAI,CAACK,YAAY,KAAKC,SAAA,EAAW,OAAO,IAAI,CAACN,IAAI,CAACK,YAAY;AACvE,IAAA,IAAI,IAAI,CAACL,IAAI,CAAC1B,KAAK,KAAKgC,SAAA,EAAW,OAAOjC,mBAAA,CAAoB,IAAI,CAAC2B,IAAI,CAAC1B,KAAK,CAAA;AAC7E,IAAA,OAAOgC,SAAA;AACT,EAAA;EAEA,IAAIC,KAAAA,GAAgB;IAClB,OAAO,IAAI,CAACC,OAAO,CAACC,WAAW,CAAC,wBAAA,EAA0B,OAAA,CAAA;AAC5D,EAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,2TAAA,EAKA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;sBAAAC,qBAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

package/dist/components/eui-expression.js

@@ -1,18 +1,27 @@
-import { hash } from '@ember/helper';
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
 import { on } from '@ember/modifier';
 import cssStyle from '../-private/css-style.js';
+import spreadAttributes from '../-private/eui-spread-attributes.js';
+import { getEuiThemeContext } from '../utils/emotion/consume.js';
+import { useEuiBorealisStyles, euiClass } from '../utils/eui/styles.js';
+import { a_ as euiExpressionValueStyles, a$ as euiExpressionStyles, b0 as euiExpressionDescriptionStyles, b1 as euiExpressionIconStyles } from '../styles.generated-SYAxYhey.js';
 import EuiIcon from './eui-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 COLORS = {
-  subdued: 'euiExpression--subdued',
-  primary: 'euiExpression--primary',
-  success: 'euiExpression--success',
-  accent: 'euiExpression--accent',
-  warning: 'euiExpression--warning',
-  danger: 'euiExpression--danger'
+/** Keys of a part's props that are not attributes. */const PART_ARGS = ['style'];
+const EXPRESSION_COLORS = ['subdued', 'primary', 'success', 'accent', 'warning', 'danger'];
+/** Scoped button reset (no React global reset); upstream rules follow. */const BUTTON_RESET = {
+  boxSizing: 'border-box',
+  margin: 0,
+  border: 'none',
+  background: 'none',
+  fontSize: 'inherit'
+};
+const SPAN_RESET = {
+  boxSizing: 'border-box'
 };
 /**
  * One part of a sentence-like query or rule, e.g. **WHEN** `avg()` or
@@ -20,25 +29,85 @@ const COLORS = {
  * button, usually opening a popover to edit the value.
  */
 
-function classes(color = 'success', isInvalid, isActive, clickable, uppercase = true, display, textWrap) {
-  return ['euiExpression', isActive && 'euiExpression-isActive', clickable && 'euiExpression-isClickable', uppercase && 'euiExpression-isUppercase', display === 'columns' && 'euiExpression--columns', COLORS[isInvalid ? 'danger' : color], textWrap === 'truncate' && 'euiExpression--truncate'].filter(Boolean).join(' ');
-}
 function noop() {}
-const EuiExpression = setComponentTemplate(precompileTemplate("{{#let (element (if @onClick \"button\" \"span\")) as |Tag|}}\n  <Tag class={{classes @color @isInvalid @isActive (if @onClick true false) @uppercase @display @textWrap}} type={{if @onClick \"button\"}} {{on \"click\" (if @onClick @onClick noop)}} ...attributes>\n    <span class=\"euiExpression__description\" style={{if (isColumns @display) (cssStyle (hash flexBasis=(if @descriptionWidth @descriptionWidth \"20%\")))}}>\n      {{~#if (has-block \"description\")~}}\n        {{yield to=\"description\"}}\n      {{~else~}}\n        {{@description}}\n      {{~/if~}}\n    </span>\n    {{#if (has-block \"value\")}}\n      <span class=\"euiExpression__value\">{{yield to=\"value\"}}</span>\n    {{else if @value}}\n      <span class=\"euiExpression__value\">{{@value}}</span>\n    {{/if}}\n    {{#if @isInvalid}}\n      <EuiIcon class=\"euiExpression__icon\" @type=\"alert\" @color=\"danger\" />\n    {{/if}}\n  </Tag>\n{{/let}}", {
-  strictMode: true,
-  scope: () => ({
-    classes,
-    on,
-    noop,
-    isColumns,
-    cssStyle,
-    hash,
-    EuiIcon
-  })
-}), templateOnly());
-function isColumns(display) {
-  return display === 'columns';
+class EuiExpression extends Component {
+  get color() {
+    const color = this.args.color;
+    return color && EXPRESSION_COLORS.includes(color) ? color : 'success';
+  }
+  get isColumns() {
+    return this.args.display === 'columns';
+  }
+  get isTruncate() {
+    return this.args.textWrap === 'truncate';
+  }
+  /** Upstream root: `button` when clickable, else `span`. */
+  get classes() {
+    const context = getEuiThemeContext(this);
+    const styles = useEuiBorealisStyles(context, euiExpressionStyles);
+    const color = this.color;
+    const clickable = Boolean(this.args.onClick);
+    const parts = [clickable ? BUTTON_RESET : SPAN_RESET, styles.euiExpression, clickable && styles.isClickable, styles[color], this.args.isActive && styles.isActive.base, this.args.isActive && styles.isActive[color], this.isColumns && styles.columns, this.isTruncate && styles.truncate];
+    return `euiExpression ${euiClass(context, ...parts)}`;
+  }
+  static {
+    n(this.prototype, "classes", [cached]);
+  }
+  get descriptionClasses() {
+    const context = getEuiThemeContext(this);
+    const styles = useEuiBorealisStyles(context, euiExpressionDescriptionStyles);
+    const props = this.args.descriptionProps;
+    return `euiExpression__description${props?.className ? ` ${props.className}` : ''} ${euiClass(context, styles.euiExpression__description, this.args.isInvalid ? styles.danger : styles[this.color], (this.args.uppercase ?? true) && styles.isUppercase, this.isTruncate && styles.truncate, this.isColumns && styles.columns, props?.css)}`;
+  }
+  static {
+    n(this.prototype, "descriptionClasses", [cached]);
+  }
+  get valueClasses() {
+    const context = getEuiThemeContext(this);
+    const styles = euiExpressionValueStyles;
+    const props = this.args.valueProps;
+    return `euiExpression__value${props?.className ? ` ${props.className}` : ''} ${euiClass(context, styles.euiExpression__value, this.isTruncate && styles.truncate, this.isColumns && styles.columns, props?.css)}`;
+  }
+  /** Composed into EuiIcon's own class through `@css`. */
+  static {
+    n(this.prototype, "valueClasses", [cached]);
+  }
+  get iconCss() {
+    const context = getEuiThemeContext(this);
+    const styles = useEuiBorealisStyles(context, euiExpressionIconStyles);
+    return [styles.euiExpression__icon, this.isColumns && styles.columns];
+  }
+  /** Upstream: the columns width, then `descriptionProps.style`. */
+  static {
+    n(this.prototype, "iconCss", [cached]);
+  }
+  get descriptionStyle() {
+    const custom = this.args.descriptionProps?.style;
+    if (!this.isColumns && !custom) return undefined;
+    return cssStyle({
+      ...(this.isColumns ? {
+        flexBasis: this.args.descriptionWidth ?? '20%'
+      } : {}),
+      ...custom
+    });
+  }
+  get valueStyle() {
+    const custom = this.args.valueProps?.style;
+    return custom ? cssStyle(custom) : undefined;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("{{#let (element (if @onClick \"button\" \"span\")) as |Tag|}}\n  <Tag class={{this.classes}} type={{if @onClick \"button\"}} {{on \"click\" (if @onClick @onClick noop)}} ...attributes>\n    <span class={{this.descriptionClasses}} style={{this.descriptionStyle}} {{spreadAttributes @descriptionProps PART_ARGS}}>\n      {{~#if (has-block \"description\")~}}\n        {{yield to=\"description\"}}\n      {{~else~}}\n        {{@description}}\n      {{~/if~}}\n    </span>\n    {{#if (has-block \"value\")}}\n      <span class={{this.valueClasses}} style={{this.valueStyle}} {{spreadAttributes @valueProps PART_ARGS}}>{{yield to=\"value\"}}</span>\n    {{else if @value}}\n      <span class={{this.valueClasses}} style={{this.valueStyle}} {{spreadAttributes @valueProps PART_ARGS}}>{{@value}}</span>\n    {{/if}}\n    {{#if @isInvalid}}\n      <EuiIcon class=\"euiExpression__icon\" @type=\"warning\" @color=\"danger\" @css={{this.iconCss}} />\n    {{/if}}\n  </Tag>\n{{/let}}", {
+      strictMode: true,
+      scope: () => ({
+        on,
+        noop,
+        spreadAttributes,
+        PART_ARGS,
+        EuiIcon
+      })
+    }), this);
+  }
 }
 
-export { EuiExpression as default };
+export { EXPRESSION_COLORS, EuiExpression as default };
 //# sourceMappingURL=eui-expression.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"eui-expression.js","sources":["../../src/components/eui-expression.gts"],"sourcesContent":["import { hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\n\n\nimport cssStyle from '../-private/css-style.ts';\nimport EuiIcon from './eui-icon.gts';\n\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nconst COLORS = {\n  subdued: 'euiExpression--subdued',\n  primary: 'euiExpression--primary',\n  success: 'euiExpression--success',\n  accent: 'euiExpression--accent',\n  warning: 'euiExpression--warning',\n  danger: 'euiExpression--danger'\n};\n\n/**\n * One part of a sentence-like query or rule, e.g. **WHEN** `avg()` or\n * **IS ABOVE** `100`: a description and a value. With `@onClick` it is a\n * button, usually opening a popover to edit the value.\n */\nexport interface EuiExpressionSignature {\n  Element: HTMLButtonElement | HTMLSpanElement;\n  Args: {\n    /** First part, e.g. \"when\". Use the `<:description>` block for markup. */\n    description?: string;\n    /** Second part, e.g. \"avg()\". Use the `<:value>` block for markup. */\n    value?: string;\n    /**\n     * Color of the description: `'subdued'`, `'primary'`, `'success'`,\n     * `'accent'`, `'warning'` or `'danger'`. Defaults to `'success'`.\n     */\n    color?: 'subdued' | 'primary' | 'success' | 'accent' | 'warning' | 'danger';\n    /** Uppercases the description. Defaults to `true`. */\n    uppercase?: boolean;\n    /** Solid underline, e.g. while its popover is open. */\n    isActive?: boolean;\n    /** Shows it in danger color with an alert icon. */\n    isInvalid?: boolean;\n    /** Makes it a `<button>` with a dashed underline. */\n    onClick?: (event: MouseEvent) => void;\n    /**\n     * `'inline'` (in a sentence) or `'columns'` (description and value in\n     * two columns, to stack several). Defaults to `'inline'`.\n     */\n    display?: 'inline' | 'columns';\n    /** Width of the description in columns display. Defaults to `'20%'`. */\n    descriptionWidth?: number | string;\n    /** `'break-word'` or `'truncate'` long values. Defaults to `'break-word'`. */\n    textWrap?: 'break-word' | 'truncate';\n  };\n  Blocks: {\n    /** Markup for the description, instead of `@description`. */\n    description: [];\n    /** Markup for the value, instead of `@value`. */\n    value: [];\n  };\n}\n\nfunction classes(\n  color: keyof typeof COLORS = 'success',\n  isInvalid?: boolean,\n  isActive?: boolean,\n  clickable?: boolean,\n  uppercase = true,\n  display?: string,\n  textWrap?: string\n): string {\n  return [\n    'euiExpression',\n    isActive && 'euiExpression-isActive',\n    clickable && 'euiExpression-isClickable',\n    uppercase && 'euiExpression-isUppercase',\n    display === 'columns' && 'euiExpression--columns',\n    COLORS[isInvalid ? 'danger' : color],\n    textWrap === 'truncate' && 'euiExpression--truncate'\n  ]\n    .filter(Boolean)\n    .join(' ');\n}\n\nfunction noop(): void {}\n\nconst EuiExpression: TemplateOnlyComponent<EuiExpressionSignature> = <template>\n  {{#let (element (if @onClick \"button\" \"span\")) as |Tag|}}\n    <Tag\n      class={{classes\n        @color\n        @isInvalid\n        @isActive\n        (if @onClick true false)\n        @uppercase\n        @display\n        @textWrap\n      }}\n      type={{if @onClick \"button\"}}\n      {{on \"click\" (if @onClick @onClick noop)}}\n      ...attributes\n    >\n      <span\n        class=\"euiExpression__description\"\n        style={{if\n          (isColumns @display)\n          (cssStyle\n            (hash flexBasis=(if @descriptionWidth @descriptionWidth \"20%\"))\n          )\n        }}\n      >\n        {{~#if (has-block \"description\")~}}\n          {{yield to=\"description\"}}\n        {{~else~}}\n          {{@description}}\n        {{~/if~}}\n      </span>\n      {{#if (has-block \"value\")}}\n        <span class=\"euiExpression__value\">{{yield to=\"value\"}}</span>\n      {{else if @value}}\n        <span class=\"euiExpression__value\">{{@value}}</span>\n      {{/if}}\n      {{#if @isInvalid}}\n        <EuiIcon class=\"euiExpression__icon\" @type=\"alert\" @color=\"danger\" />\n      {{/if}}\n    </Tag>\n  {{/let}}\n</template>;\n\nfunction isColumns(display?: string): boolean {\n  return display === 'columns';\n}\n\nexport default EuiExpression;\n"],"names":["COLORS","subdued","primary","success","accent","warning","danger","classes","color","isInvalid","isActive","clickable","uppercase","display","textWrap","filter","Boolean","join","noop","EuiExpression","setComponentTemplate","precompileTemplate","strictMode","scope","on","isColumns","cssStyle","hash","EuiIcon","templateOnly"],"mappings":";;;;;;;;AASA,MAAMA,MAAA,GAAS;AACbC,EAAAA,OAAA,EAAS,wBAAA;AACTC,EAAAA,OAAA,EAAS,wBAAA;AACTC,EAAAA,OAAA,EAAS,wBAAA;AACTC,EAAAA,MAAA,EAAQ,uBAAA;AACRC,EAAAA,OAAA,EAAS,wBAAA;AACTC,EAAAA,MAAA,EAAQ;AACV,CAAA;AAEA;;;;AAIC;;AAuCD,SAASC,OAAAA,CACPC,KAAoB,GAAS,SAAS,EACtCC,SAAmB,EACnBC,QAAkB,EAClBC,SAAmB,EACnBC,SAAA,GAAY,IAAI,EAChBC,OAAgB,EAChBC,QAAiB,EACV;EACP,OAAO,CACL,eAAA,EACAJ,QAAA,IAAY,wBAAA,EACZC,SAAA,IAAa,2BAAA,EACbC,SAAA,IAAa,2BAAA,EACbC,OAAA,KAAY,SAAA,IAAa,wBAAA,EACzBb,MAAM,CAACS,SAAA,GAAY,QAAA,GAAWD,KAAA,CAAM,EACpCM,QAAA,KAAa,UAAA,IAAc,yBAAA,CAC5B,CACEC,MAAM,CAACC,OAAA,CAAA,CACPC,IAAI,CAAC,GAAA,CAAA;AACV;AAEA,SAASC,IAAAA,GAAY,CAAE;AAEvB,MAAMC,aAAqC,GAAAC,oBAAA,CAA0BC,kBAAA,CAAA,i6BAAA,EAyCrE;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAhB,OAAA;IAAAiB,EAAA;IAAAN,IAAA;IAAAO,SAAA;IAAAC,QAAA;IAAAC,IAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;AAEV,SAASJ,SAAAA,CAAUZ,OAAgB,EAAU;EAC3C,OAAOA,OAAA,KAAY,SAAA;AACrB;;"}
+{"version":3,"file":"eui-expression.js","sources":["../../src/components/eui-expression.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\nimport { on } from '@ember/modifier';\n\nimport cssStyle from '../-private/css-style.ts';\nimport spreadAttributes from '../-private/eui-spread-attributes.ts';\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport { euiClass, useEuiBorealisStyles } from '../utils/eui/styles.ts';\nimport {\n  euiExpressionDescriptionStyles,\n  euiExpressionIconStyles,\n  euiExpressionStyles,\n  euiExpressionValueStyles\n} from '../utils/eui/styles.generated.ts';\nimport EuiIcon from './eui-icon.gts';\n\nimport type { CssProperties } from '../-private/css-style.ts';\nimport type { EuiCss } from '../utils/eui/styles.ts';\nimport type { CSSInterpolation } from '@emotion/css/create-instance';\n\n/**\n * Upstream `descriptionProps` / `valueProps`: props of the description or\n * value `<span>`.\n */\nexport interface EuiExpressionPartProps {\n  /** Extra class of the span. */\n  className?: string;\n  /** Styles composed last into the span's class (upstream `css`). */\n  css?: EuiCss;\n  /** Inline styles, as an object (`{ fontStyle: 'italic' }`). */\n  style?: CssProperties;\n  /** Other keys (`id`, `aria-*`, `data-*`, …) become attributes of the span. */\n  [attribute: string]: unknown;\n}\n\n/** Keys of a part's props that are not attributes. */\nconst PART_ARGS = ['style'] as const;\n\nexport const EXPRESSION_COLORS = [\n  'subdued',\n  'primary',\n  'success',\n  'accent',\n  'warning',\n  'danger'\n] as const;\n\nexport type EuiExpressionColor = (typeof EXPRESSION_COLORS)[number];\n\n/** Scoped button reset (no React global reset); upstream rules follow. */\nconst BUTTON_RESET = {\n  boxSizing: 'border-box',\n  margin: 0,\n  border: 'none',\n  background: 'none',\n  fontSize: 'inherit'\n} as const;\n\nconst SPAN_RESET = { boxSizing: 'border-box' } as const;\n\n/**\n * One part of a sentence-like query or rule, e.g. **WHEN** `avg()` or\n * **IS ABOVE** `100`: a description and a value. With `@onClick` it is a\n * button, usually opening a popover to edit the value.\n */\nexport interface EuiExpressionSignature {\n  Element: HTMLButtonElement | HTMLSpanElement;\n  Args: {\n    /** First part, e.g. \"when\". Use the `<:description>` block for markup. */\n    description?: string;\n    /** Second part, e.g. \"avg()\". Use the `<:value>` block for markup. */\n    value?: string;\n    /**\n     * Color of the description: `'subdued'`, `'primary'`, `'success'`,\n     * `'accent'`, `'warning'` or `'danger'`. Defaults to `'success'`.\n     */\n    color?: 'subdued' | 'primary' | 'success' | 'accent' | 'warning' | 'danger';\n    /** Uppercases the description. Defaults to `true`. */\n    uppercase?: boolean;\n    /** Solid underline, e.g. while its popover is open. */\n    isActive?: boolean;\n    /** Shows it in danger color with an alert icon. */\n    isInvalid?: boolean;\n    /** Makes it a `<button>` with a dashed underline. */\n    onClick?: (event: MouseEvent) => void;\n    /**\n     * `'inline'` (in a sentence) or `'columns'` (description and value in\n     * two columns, to stack several). Defaults to `'inline'`.\n     */\n    display?: 'inline' | 'columns';\n    /** Width of the description in columns display. Defaults to `'20%'`. */\n    descriptionWidth?: number | string;\n    /** `'break-word'` or `'truncate'` long values. Defaults to `'break-word'`. */\n    textWrap?: 'break-word' | 'truncate';\n    /**\n     * Props of the description `<span>` (upstream `descriptionProps`):\n     * `className`, `css`, `style` (an object) and any attribute.\n     */\n    descriptionProps?: EuiExpressionPartProps;\n    /** Props of the value `<span>` (upstream `valueProps`), see `@descriptionProps`. */\n    valueProps?: EuiExpressionPartProps;\n  };\n  Blocks: {\n    /** Markup for the description, instead of `@description`. */\n    description: [];\n    /** Markup for the value, instead of `@value`. */\n    value: [];\n  };\n}\n\nfunction noop(): void {}\n\nexport default class EuiExpression extends Component<EuiExpressionSignature> {\n  get color(): EuiExpressionColor {\n    const color = this.args.color;\n\n    return color && (EXPRESSION_COLORS as readonly string[]).includes(color)\n      ? color\n      : 'success';\n  }\n\n  get isColumns(): boolean {\n    return this.args.display === 'columns';\n  }\n\n  get isTruncate(): boolean {\n    return this.args.textWrap === 'truncate';\n  }\n\n  /** Upstream root: `button` when clickable, else `span`. */\n  @cached\n  get classes(): string {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiExpressionStyles);\n    const color = this.color;\n    const clickable = Boolean(this.args.onClick);\n    const parts: CSSInterpolation[] = [\n      clickable ? BUTTON_RESET : SPAN_RESET,\n      styles.euiExpression,\n      clickable && styles.isClickable,\n      styles[color],\n      this.args.isActive && styles.isActive.base,\n      this.args.isActive && styles.isActive[color],\n      this.isColumns && styles.columns,\n      this.isTruncate && styles.truncate\n    ];\n\n    return `euiExpression ${euiClass(context, ...parts)}`;\n  }\n\n  @cached\n  get descriptionClasses(): string {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiExpressionDescriptionStyles);\n\n    const props = this.args.descriptionProps;\n\n    return `euiExpression__description${\n      props?.className ? ` ${props.className}` : ''\n    } ${euiClass(\n      context,\n      styles.euiExpression__description,\n      this.args.isInvalid ? styles.danger : styles[this.color],\n      (this.args.uppercase ?? true) && styles.isUppercase,\n      this.isTruncate && styles.truncate,\n      this.isColumns && styles.columns,\n      props?.css\n    )}`;\n  }\n\n  @cached\n  get valueClasses(): string {\n    const context = getEuiThemeContext(this);\n    const styles = euiExpressionValueStyles;\n\n    const props = this.args.valueProps;\n\n    return `euiExpression__value${\n      props?.className ? ` ${props.className}` : ''\n    } ${euiClass(\n      context,\n      styles.euiExpression__value,\n      this.isTruncate && styles.truncate,\n      this.isColumns && styles.columns,\n      props?.css\n    )}`;\n  }\n\n  /** Composed into EuiIcon's own class through `@css`. */\n  @cached\n  get iconCss(): CSSInterpolation {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiExpressionIconStyles);\n\n    return [styles.euiExpression__icon, this.isColumns && styles.columns];\n  }\n\n  /** Upstream: the columns width, then `descriptionProps.style`. */\n  get descriptionStyle() {\n    const custom = this.args.descriptionProps?.style;\n    if (!this.isColumns && !custom) return undefined;\n    return cssStyle({\n      ...(this.isColumns\n        ? { flexBasis: this.args.descriptionWidth ?? '20%' }\n        : {}),\n      ...custom\n    });\n  }\n\n  get valueStyle() {\n    const custom = this.args.valueProps?.style;\n    return custom ? cssStyle(custom) : undefined;\n  }\n\n  <template>\n    {{#let (element (if @onClick \"button\" \"span\")) as |Tag|}}\n      <Tag\n        class={{this.classes}}\n        type={{if @onClick \"button\"}}\n        {{on \"click\" (if @onClick @onClick noop)}}\n        ...attributes\n      >\n        <span\n          class={{this.descriptionClasses}}\n          style={{this.descriptionStyle}}\n          {{spreadAttributes @descriptionProps PART_ARGS}}\n        >\n          {{~#if (has-block \"description\")~}}\n            {{yield to=\"description\"}}\n          {{~else~}}\n            {{@description}}\n          {{~/if~}}\n        </span>\n        {{#if (has-block \"value\")}}\n          <span\n            class={{this.valueClasses}}\n            style={{this.valueStyle}}\n            {{spreadAttributes @valueProps PART_ARGS}}\n          >{{yield to=\"value\"}}</span>\n        {{else if @value}}\n          <span\n            class={{this.valueClasses}}\n            style={{this.valueStyle}}\n            {{spreadAttributes @valueProps PART_ARGS}}\n          >{{@value}}</span>\n        {{/if}}\n        {{#if @isInvalid}}\n          <EuiIcon\n            class=\"euiExpression__icon\"\n            @type=\"warning\"\n            @color=\"danger\"\n            @css={{this.iconCss}}\n          />\n        {{/if}}\n      </Tag>\n    {{/let}}\n  </template>\n}\n"],"names":["PART_ARGS","EXPRESSION_COLORS","BUTTON_RESET","boxSizing","margin","border","background","fontSize","SPAN_RESET","noop","EuiExpression","Component","color","args","includes","isColumns","display","isTruncate","textWrap","classes","context","getEuiThemeContext","styles","useEuiBorealisStyles","euiExpressionStyles","clickable","Boolean","onClick","parts","euiExpression","isClickable","isActive","base","columns","truncate","euiClass","n","prototype","cached","descriptionClasses","euiExpressionDescriptionStyles","props","descriptionProps","className","euiExpression__description","isInvalid","danger","uppercase","isUppercase","css","valueClasses","euiExpressionValueStyles","valueProps","euiExpression__value","iconCss","euiExpressionIconStyles","euiExpression__icon","descriptionStyle","custom","style","undefined","cssStyle","flexBasis","descriptionWidth","valueStyle","setComponentTemplate","precompileTemplate","strictMode","scope","on","spreadAttributes","EuiIcon"],"mappings":";;;;;;;;;;;;;AAmCA,sDACA,MAAMA,SAAA,GAAY,CAAC,OAAA,CAAQ;AAEpB,MAAMC,iBAAA,GAAoB,CAC/B,SAAA,EACA,SAAA,EACA,SAAA,EACA,QAAA,EACA,SAAA,EACA,QAAA;AAKF,0EACA,MAAMC,YAAA,GAAe;AACnBC,EAAAA,SAAA,EAAW,YAAA;AACXC,EAAAA,MAAA,EAAQ,CAAA;AACRC,EAAAA,MAAA,EAAQ,MAAA;AACRC,EAAAA,UAAA,EAAY,MAAA;AACZC,EAAAA,QAAA,EAAU;AACZ,CAAA;AAEA,MAAMC,UAAA,GAAa;AAAEL,EAAAA,SAAA,EAAW;AAAa,CAAA;AAE7C;;;;AAIC;;AA8CD,SAASM,IAAAA,GAAY,CAAE;AAER,MAAMC,sBAAsBC,SAAA,CAAU;EACnD,IAAIC,QAA4B;AAC9B,IAAA,MAAMA,KAAA,GAAQ,IAAI,CAACC,IAAI,CAACD,KAAK;IAE7B,OAAOA,KAAA,IAAUX,iBAAA,CAAwCa,QAAQ,CAACF,KAAA,CAAA,GAC9DA,KAAA,GACA,SAAA;AACN,EAAA;EAEA,IAAIG,SAAAA,GAAqB;AACvB,IAAA,OAAO,IAAI,CAACF,IAAI,CAACG,OAAO,KAAK,SAAA;AAC/B,EAAA;EAEA,IAAIC,UAAAA,GAAsB;AACxB,IAAA,OAAO,IAAI,CAACJ,IAAI,CAACK,QAAQ,KAAK,UAAA;AAChC,EAAA;AAEA;EACA,IACIC,OAAAA,GAAkB;AACpB,IAAA,MAAMC,OAAA,GAAUC,mBAAmB,IAAI,CAAA;AACvC,IAAA,MAAMC,MAAA,GAASC,qBAAqBH,OAAA,EAASI,mBAAA,CAAA;AAC7C,IAAA,MAAMZ,KAAA,GAAQ,IAAI,CAACA,KAAK;IACxB,MAAMa,YAAYC,OAAA,CAAQ,IAAI,CAACb,IAAI,CAACc,OAAO,CAAA;AAC3C,IAAA,MAAMC,KAAO,GAAqB,CAChCH,SAAA,GAAYvB,YAAA,GAAeM,UAAA,EAC3Bc,MAAA,CAAOO,aAAa,EACpBJ,SAAA,IAAaH,OAAOQ,WAAW,EAC/BR,MAAM,CAACV,KAAA,CAAM,EACb,IAAI,CAACC,IAAI,CAACkB,QAAQ,IAAIT,MAAA,CAAOS,QAAQ,CAACC,IAAI,EAC1C,IAAI,CAACnB,IAAI,CAACkB,QAAQ,IAAIT,MAAA,CAAOS,QAAQ,CAACnB,KAAA,CAAM,EAC5C,IAAI,CAACG,SAAS,IAAIO,MAAA,CAAOW,OAAO,EAChC,IAAI,CAAChB,UAAU,IAAIK,MAAA,CAAOY,QAAQ,CACnC;IAED,OAAO,CAAA,cAAA,EAAiBC,QAAA,CAASf,YAAYQ,KAAA,CAAA,CAAA,CAAQ;AACvD,EAAA;AAAA,EAAA;IAAAQ,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CAlBCC,MAAA,CAAA,CAAA;AAAA;EAoBD,IACIC,kBAAAA,GAA6B;AAC/B,IAAA,MAAMnB,OAAA,GAAUC,mBAAmB,IAAI,CAAA;AACvC,IAAA,MAAMC,MAAA,GAASC,qBAAqBH,OAAA,EAASoB,8BAAA,CAAA;AAE7C,IAAA,MAAMC,KAAA,GAAQ,IAAI,CAAC5B,IAAI,CAAC6B,gBAAgB;AAExC,IAAA,OAAO,CAAA,0BAAA,EACLD,KAAA,EAAOE,SAAA,GAAY,CAAA,CAAA,EAAIF,KAAA,CAAME,SAAS,CAAA,CAAE,GAAG,EAAA,CAAA,CAAA,EACzCR,QAAA,CACFf,OAAA,EACAE,MAAA,CAAOsB,0BAA0B,EACjC,IAAI,CAAC/B,IAAI,CAACgC,SAAS,GAAGvB,MAAA,CAAOwB,MAAM,GAAGxB,MAAM,CAAC,IAAI,CAACV,KAAK,CAAC,EACxD,CAAC,IAAI,CAACC,IAAI,CAACkC,SAAS,IAAI,IAAI,KAAKzB,OAAO0B,WAAW,EACnD,IAAI,CAAC/B,UAAU,IAAIK,MAAA,CAAOY,QAAQ,EAClC,IAAI,CAACnB,SAAS,IAAIO,MAAA,CAAOW,OAAO,EAChCQ,OAAOQ,GAAA,CAAA,CAAA,CACN;AACL,EAAA;AAAA,EAAA;IAAAb,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,oBAAA,EAAA,CAlBCC,MAAA,CAAA,CAAA;AAAA;EAoBD,IACIY,YAAAA,GAAuB;AACzB,IAAA,MAAM9B,OAAA,GAAUC,mBAAmB,IAAI,CAAA;IACvC,MAAMC,MAAA,GAAS6B,wBAAA;AAEf,IAAA,MAAMV,KAAA,GAAQ,IAAI,CAAC5B,IAAI,CAACuC,UAAU;AAElC,IAAA,OAAO,uBACLX,KAAA,EAAOE,YAAY,CAAA,CAAA,EAAIF,KAAA,CAAME,SAAS,CAAA,CAAE,GAAG,EAAA,CAAA,CAAA,EACzCR,QAAA,CACFf,OAAA,EACAE,MAAA,CAAO+B,oBAAoB,EAC3B,IAAI,CAACpC,UAAU,IAAIK,OAAOY,QAAQ,EAClC,IAAI,CAACnB,SAAS,IAAIO,MAAA,CAAOW,OAAO,EAChCQ,OAAOQ,GAAA,CAAA,CAAA,CACN;AACL,EAAA;AAEA;AAAA,EAAA;IAAAb,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,cAAA,EAAA,CAlBCC,MAAA,CAAA,CAAA;AAAA;EAmBD,IACIgB,UAA4B;AAC9B,IAAA,MAAMlC,OAAA,GAAUC,mBAAmB,IAAI,CAAA;AACvC,IAAA,MAAMC,MAAA,GAASC,qBAAqBH,OAAA,EAASmC,uBAAA,CAAA;AAE7C,IAAA,OAAO,CAACjC,MAAA,CAAOkC,mBAAmB,EAAE,IAAI,CAACzC,SAAS,IAAIO,MAAA,CAAOW,OAAO,CAAC;AACvE,EAAA;AAEA;AAAA,EAAA;IAAAG,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CARCC,MAAA,CAAA,CAAA;AAAA;EASD,IAAImB,gBAAAA,GAAmB;IACrB,MAAMC,SAAS,IAAI,CAAC7C,IAAI,CAAC6B,gBAAgB,EAAEiB,KAAA;IAC3C,IAAI,CAAC,IAAI,CAAC5C,SAAS,IAAI,CAAC2C,QAAQ,OAAOE,SAAA;AACvC,IAAA,OAAOC,QAAA,CAAS;MACd,IAAI,IAAI,CAAC9C,SAAS,GACd;AAAE+C,QAAAA,SAAA,EAAW,IAAI,CAACjD,IAAI,CAACkD,gBAAgB,IAAI;OAAM,GACjD,EAAE,CAAC;MACP,GAAGL;AACL,KAAA,CAAA;AACF,EAAA;EAEA,IAAIM,UAAAA,GAAa;IACf,MAAMN,SAAS,IAAI,CAAC7C,IAAI,CAACuC,UAAU,EAAEO,KAAA;AACrC,IAAA,OAAOD,MAAA,GAASG,SAASH,MAAA,CAAA,GAAUE,SAAA;AACrC,EAAA;AAEA,EAAA;IAAAK,oBAAA,CAAAC,kBAAA,CAAA,88BAAA,EA0CA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,EAAA;QAAA5D,IAAA;QAAA6D,gBAAA;QAAAtE,SAAA;AAAAuE,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}