@ember-eui/core 14.1.4 → 16.0.0

package/dist/components/eui-page-content.js

@@ -1,20 +1,51 @@
-import { eq } from 'ember-truth-helpers';
-import argOrDefault from '../helpers/arg-or-default.js';
-import classNames from '../helpers/class-names.js';
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
 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 EuiPageContent = setComponentTemplate(precompileTemplate("{{#let (argOrDefault @role \"main\") as |role|}}\n  <EuiPanel role={{if (eq role null) undefined role}} class={{classNames (if (eq @borderRadius \"none\") \"euiPageContent--borderRadiusNone\") componentName=\"EuiPageContent\" verticalPosition=@verticalPosition horizontalPosition=@horizontalPosition}} @hasShadow={{@hasShadow}} @hasBorder={{@hasBorder}} @paddingSize={{argOrDefault @paddingSize \"l\"}} @borderRadius={{@borderRadius}} @color={{@color}} @grow={{@grow}} ...attributes>\n    {{yield}}\n  </EuiPanel>\n{{/let}}", {
-  strictMode: true,
-  scope: () => ({
-    argOrDefault,
-    EuiPanel,
-    eq,
-    classNames
-  })
-}), templateOnly());
+class EuiPageContent extends Component {
+  get role() {
+    const {
+      role
+    } = this.args;
+    if (role === null) return undefined;
+    return role ?? 'main';
+  }
+  get grow() {
+    if (this.args.grow !== undefined) return this.args.grow;
+    return !(this.args.verticalPosition === 'center' || this.args.horizontalPosition === 'center');
+  }
+  /** Positions inside EuiPageBody's flex column (upstream removed this API). */
+  get positionCss() {
+    const {
+      verticalPosition,
+      horizontalPosition
+    } = this.args;
+    return [verticalPosition === 'center' && {
+      alignSelf: 'center',
+      marginBlock: 'auto'
+    }, verticalPosition === 'bottom' && {
+      marginBlockStart: 'auto'
+    }, horizontalPosition === 'center' && {
+      marginInline: 'auto',
+      inlineSize: 'auto',
+      maxInlineSize: '100%'
+    }];
+  }
+  static {
+    n(this.prototype, "positionCss", [cached]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<EuiPanel role={{this.role}} class=\"euiPageContent\" @css={{this.positionCss}} @hasShadow={{@hasShadow}} @hasBorder={{@hasBorder}} @paddingSize={{if @paddingSize @paddingSize \"l\"}} @borderRadius={{@borderRadius}} @color={{@color}} @grow={{this.grow}} ...attributes>\n  {{yield}}\n</EuiPanel>", {
+      strictMode: true,
+      scope: () => ({
+        EuiPanel
+      })
+    }), this);
+  }
+}
 
 export { EuiPageContent as default };
 //# sourceMappingURL=eui-page-content.js.map

package/dist/components/eui-page-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-page-content.js","sources":["../../src/components/eui-page-content.gts"],"sourcesContent":["import { eq } from 'ember-truth-helpers';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport EuiPanel from './eui-panel.gts';\n\nimport type { EuiPanelSignature } from './eui-panel';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** A panel holding the page's main content, inside EuiPageBody. */\nexport interface EuiPageContentSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** `role` of the content. Defaults to `'main'`; pass `null` for none. */\n    role?: string | null;\n    /** Vertically centers (`'center'`) or bottom-aligns the content panel. */\n    verticalPosition?: 'center' | 'bottom';\n    /** Horizontally centers the content panel (e.g. an empty prompt). */\n    horizontalPosition?: 'center';\n    /** Adds a shadow. */\n    hasShadow?: boolean;\n    /** Adds a border. */\n    hasBorder?: boolean;\n    /** Padding, any `EuiPanel` padding size. Defaults to `'l'`. */\n    paddingSize?: EuiPanelSignature['Args']['paddingSize'];\n    /** Border radius: `'none'` or `'m'`. */\n    borderRadius?: EuiPanelSignature['Args']['borderRadius'];\n    /** Background, any `EuiPanel` color. */\n    color?: EuiPanelSignature['Args']['color'];\n    /** Fills the remaining height. */\n    grow?: boolean;\n  };\n  Blocks: {\n    /** `EuiPageContentHeader` and `EuiPageContentBody`, or any content. */\n    default: [];\n  };\n}\n\nconst EuiPageContent: TemplateOnlyComponent<EuiPageContentSignature> =\n  <template>\n    {{#let (argOrDefault @role \"main\") as |role|}}\n      <EuiPanel\n        role={{if (eq role null) undefined role}}\n        class={{classNames\n          (if (eq @borderRadius \"none\") \"euiPageContent--borderRadiusNone\")\n          componentName=\"EuiPageContent\"\n          verticalPosition=@verticalPosition\n          horizontalPosition=@horizontalPosition\n        }}\n        @hasShadow={{@hasShadow}}\n        @hasBorder={{@hasBorder}}\n        @paddingSize={{argOrDefault @paddingSize \"l\"}}\n        @borderRadius={{@borderRadius}}\n        @color={{@color}}\n        @grow={{@grow}}\n        ...attributes\n      >\n        {{yield}}\n      </EuiPanel>\n    {{/let}}\n  </template>;\n\nexport default EuiPageContent;\n"],"names":["EuiPageContent","setComponentTemplate","precompileTemplate","strictMode","scope","argOrDefault","EuiPanel","eq","classNames","templateOnly"],"mappings":";;;;;;;;AAsCA,MAAMA,cAAsC,GAAAC,oBAAA,CAC1CC,kBAAA,CAAA,6gBAAA,EAqBA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,YAAA;IAAAC,QAAA;IAAAC,EAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}
+{"version":3,"file":"eui-page-content.js","sources":["../../src/components/eui-page-content.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\nimport type { EuiCss } from '../utils/eui/styles.ts';\nimport EuiPanel from './eui-panel.gts';\n\nimport type { EuiPanelSignature } from './eui-panel';\n\n/** A panel holding the page's main content, inside EuiPageBody. */\nexport interface EuiPageContentSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** `role` of the content. Defaults to `'main'`; pass `null` for none. */\n    role?: string | null;\n    /** Vertically centers (`'center'`) or bottom-aligns the content panel. */\n    verticalPosition?: 'center' | 'bottom';\n    /** Horizontally centers the content panel (e.g. an empty prompt). */\n    horizontalPosition?: 'center';\n    /** Adds a shadow. Defaults to `false`. */\n    hasShadow?: boolean;\n    /** Adds a border. Defaults to `true`. */\n    hasBorder?: boolean;\n    /** Padding, any `EuiPanel` padding size. Defaults to `'l'`. */\n    paddingSize?: EuiPanelSignature['Args']['paddingSize'];\n    /** Border radius: `'none'` or `'m'`. */\n    borderRadius?: EuiPanelSignature['Args']['borderRadius'];\n    /** Background, any `EuiPanel` color. */\n    color?: EuiPanelSignature['Args']['color'];\n    /** Fills the remaining height. */\n    grow?: boolean;\n  };\n  Blocks: {\n    /** `EuiPageContentHeader` and `EuiPageContentBody`, or any content. */\n    default: [];\n  };\n}\n\nexport default class EuiPageContent extends Component<EuiPageContentSignature> {\n  get role() {\n    const { role } = this.args;\n    if (role === null) return undefined;\n    return role ?? 'main';\n  }\n\n  get grow() {\n    if (this.args.grow !== undefined) return this.args.grow;\n    return !(\n      this.args.verticalPosition === 'center' ||\n      this.args.horizontalPosition === 'center'\n    );\n  }\n\n  /** Positions inside EuiPageBody's flex column (upstream removed this API). */\n  @cached\n  get positionCss(): EuiCss {\n    const { verticalPosition, horizontalPosition } = this.args;\n    return [\n      verticalPosition === 'center' && {\n        alignSelf: 'center',\n        marginBlock: 'auto'\n      },\n      verticalPosition === 'bottom' && { marginBlockStart: 'auto' },\n      horizontalPosition === 'center' && {\n        marginInline: 'auto',\n        inlineSize: 'auto',\n        maxInlineSize: '100%'\n      }\n    ];\n  }\n\n  <template>\n    <EuiPanel\n      role={{this.role}}\n      class=\"euiPageContent\"\n      @css={{this.positionCss}}\n      @hasShadow={{@hasShadow}}\n      @hasBorder={{@hasBorder}}\n      @paddingSize={{if @paddingSize @paddingSize \"l\"}}\n      @borderRadius={{@borderRadius}}\n      @color={{@color}}\n      @grow={{this.grow}}\n      ...attributes\n    >\n      {{yield}}\n    </EuiPanel>\n  </template>\n}\n"],"names":["EuiPageContent","Component","role","args","undefined","grow","verticalPosition","horizontalPosition","positionCss","alignSelf","marginBlock","marginBlockStart","marginInline","inlineSize","maxInlineSize","n","prototype","cached","setComponentTemplate","precompileTemplate","strictMode","scope","EuiPanel"],"mappings":";;;;;;;AAoCe,MAAMA,uBAAuBC,SAAA,CAAU;EACpD,IAAIC,IAAAA,GAAO;IACT,MAAM;AAAEA,MAAAA;KAAM,GAAG,IAAI,CAACC,IAAI;AAC1B,IAAA,IAAID,IAAA,KAAS,MAAM,OAAOE,SAAA;IAC1B,OAAOF,IAAA,IAAQ,MAAA;AACjB,EAAA;EAEA,IAAIG,IAAAA,GAAO;AACT,IAAA,IAAI,IAAI,CAACF,IAAI,CAACE,IAAI,KAAKD,SAAA,EAAW,OAAO,IAAI,CAACD,IAAI,CAACE,IAAI;AACvD,IAAA,OAAO,EACL,IAAI,CAACF,IAAI,CAACG,gBAAgB,KAAK,QAAA,IAC/B,IAAI,CAACH,IAAI,CAACI,kBAAkB,KAAK,QACnC,CAAA;AACF,EAAA;AAEA;EACA,IACIC,cAAsB;IACxB,MAAM;MAAEF,gBAAgB;AAAEC,MAAAA;KAAoB,GAAG,IAAI,CAACJ,IAAI;AAC1D,IAAA,OAAO,CACLG,gBAAA,KAAqB,QAAA,IAAY;AAC/BG,MAAAA,SAAA,EAAW,QAAA;AACXC,MAAAA,WAAA,EAAa;AACf,KAAA,EACAJ,gBAAA,KAAqB,QAAA,IAAY;AAAEK,MAAAA,gBAAA,EAAkB;AAAO,KAAA,EAC5DJ,kBAAA,KAAuB,QAAA,IAAY;AACjCK,MAAAA,YAAA,EAAc,MAAA;AACdC,MAAAA,UAAA,EAAY,MAAA;AACZC,MAAAA,aAAA,EAAe;AACjB,KAAA,CACD;AACH,EAAA;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,aAAA,EAAA,CAfCC,MAAA,CAAA,CAAA;AAAA;AAiBD,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,wSAAA,EAeA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

package/dist/components/eui-page-header-content.js

@@ -1,14 +1,17 @@
 import Component from '@glimmer/component';
-import { array } from '@ember/helper';
+import { cached } from '@glimmer/tracking';
+import { hash } from '@ember/helper';
 import { on } from '@ember/modifier';
 import optional from '@nullvoxpopuli/ember-composable-helpers/helpers/optional';
 import style from 'ember-style-modifier/modifiers/style';
-import { eq, not, or, and } from 'ember-truth-helpers';
-import argOrDefault, { argOrDefaultDecorator } from '../helpers/arg-or-default.js';
+import { not, or, and } from 'ember-truth-helpers';
+import argOrDefault from '../helpers/arg-or-default.js';
 import classNames from '../helpers/class-names.js';
-import inlineStyles from '../helpers/inline-styles.js';
-import useState from '../helpers/use-state.js';
-import useIsWithinBreakpoints from '../modifiers/use-is-within-breakpoints.js';
+import { getEuiThemeContext } from '../utils/emotion/consume.js';
+import { euiPageBoxSizing, euiPagePadding, euiPageRestrictWidthStyle, euiScreenReaderOnlyCss } from '../utils/eui/page-layout.js';
+import spreadAttributes from '../-private/eui-spread-attributes.js';
+import { useEuiBorealisStyles, euiClass } from '../utils/eui/styles.js';
+import { bP as euiMaxBreakpoint, cl as euiPageHeaderContentStyles, cm as euiPageHeaderStyles } from '../styles.generated-SYAxYhey.js';
 import EuiBreadcrumbs from './eui-breadcrumbs.js';
 import EuiFlexGroup from './eui-flex-group.js';
 import EuiFlexItem from './eui-flex-item.js';
@@ -16,67 +19,175 @@ import EuiIcon from './eui-icon.js';
 import EuiSpacer from './eui-spacer.js';
 import EuiTab from './eui-tab.js';
 import EuiTabs from './eui-tabs.js';
-import EuiTextComponent from './eui-text.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 { g, i } from 'decorator-transforms/runtime-esm';
+import templateOnly from '@ember/component/template-only';
+import { n } from 'decorator-transforms/runtime-esm';
 
 const TEMPLATES = ['default', 'centeredBody', 'centeredContent', 'empty'];
 
 /** @private The layout inside EuiPageHeader; use EuiPageHeader. */
 
+const ALIGN_ITEMS = {
+  top: 'flexStart',
+  bottom: 'flexEnd',
+  center: 'center',
+  stretch: 'stretch'
+};
+const BREADCRUMB_ARGS = ['responsive', 'truncate', 'max', 'type', 'lastBreadcrumbIsCurrentPage'];
+const TABS_ARGS = ['display'];
+const TITLE_ARGS = ['textTransform'];
+const ICON_ARGS = ['size', 'color', 'title', 'titleId'];
+const GROUP_ARGS = ['gutterSize', 'alignItems', 'justifyContent', 'direction', 'wrap', 'responsive', 'tagName'];
+const HeaderTabs = setComponentTemplate(precompileTemplate("<EuiTabs @display={{@tabsProps.display}} @size=\"m\" @bottomBorder={{false}} class={{@tabsProps.className}} {{spreadAttributes @tabsProps TABS_ARGS}}>\n  {{#each @tabs as |tab|}}\n    <EuiTab @id={{tab.id}} @disabled={{tab.disabled}} @isSelected={{tab.isSelected}} @href={{tab.href}} {{on \"click\" (optional tab.onClick)}}>\n      {{tab.label}}\n    </EuiTab>\n  {{/each}}\n</EuiTabs>", {
+  strictMode: true,
+  scope: () => ({
+    EuiTabs,
+    spreadAttributes,
+    TABS_ARGS,
+    EuiTab,
+    on,
+    optional
+  })
+}), templateOnly());
+/**
+ * Upstream `EuiPageHeaderContent` (`euiPageHeaderContentStyles`): the
+ * header's layout, padding and bottom border.
+ */
 class EuiPageHeaderContent extends Component {
+  get context() {
+    return getEuiThemeContext(this);
+  }
+  get styles() {
+    return useEuiBorealisStyles(this.context, euiPageHeaderContentStyles);
+  }
+  /** Upstream's padding/border rules, which depend on what is rendered. */
+  static {
+    n(this.prototype, "styles", [cached]);
+  }
+  layout = present => {
+    const {
+      tabs
+    } = this.args;
+    const hasTabs = !!tabs;
+    const title = !!present.title;
+    const onlyChildren = !hasTabs && !title && !present.right && !present.description && !!present.children;
+    const onlyTabs = hasTabs && !title && !present.right && !present.description && !present.children;
+    let paddingSize = this.args.paddingSize ?? 'none';
+    let bottomBorder = this.args.bottomBorder;
+    let sides = 'vertical';
+    if (onlyTabs) {
+      paddingSize = 'none';
+    } else if (hasTabs && !title) {
+      sides = 'bottom';
+    } else if (hasTabs && title) {
+      sides = 'top';
+      bottomBorder = bottomBorder === false ? false : true;
+    } else if (paddingSize === 'none' && bottomBorder) {
+      sides = 'bottom';
+      paddingSize = 'l';
+    }
+    const context = this.context;
+    const styles = this.styles;
+    const pageHeader = useEuiBorealisStyles(context, euiPageHeaderStyles);
+    const responsive = this.args.responsive ?? true;
+    return {
+      onlyChildren,
+      tabsAsTitle: hasTabs && !title,
+      tabsAtBottom: hasTabs && title,
+      root: euiClass(context, euiPageBoxSizing, styles.euiPageHeaderContent, bottomBorder && pageHeader.border, euiPagePadding(context.upstream, paddingSize, sides)),
+      childrenOnly: euiClass(context, euiPageBoxSizing, styles.childrenOnly.flex, styles[this.args.alignItems ?? 'center'], responsive && {
+        [euiMaxBreakpoint(context.upstream, 'm')]: responsive === 'reverse' ? styles.childrenOnly.responsiveReverse : styles.childrenOnly.responsive
+      })
+    };
+  };
+  get widthStyle() {
+    return euiPageRestrictWidthStyle(this.args.restrictWidth);
+  }
+  // Upstream's `css` on the EuiFlexGroup/EuiFlexItem children.
+  get topCss() {
+    return this.styles.euiPageHeaderContent__top;
+  }
+  static {
+    n(this.prototype, "topCss", [cached]);
+  }
+  get leftCss() {
+    return this.styles.euiPageHeaderContent__leftSideItems;
+  }
+  /**
+  * Upstream renders the right side first at small breakpoints with
+  * `responsive="reverse"`; Ember keeps the DOM order and reorders it
+  * visually below the same breakpoint.
+  */
   static {
-    g(this.prototype, "minHeight", [argOrDefaultDecorator(460)]);
+    n(this.prototype, "leftCss", [cached]);
+  }
+  get rightCss() {
+    const upstream = this.context.upstream;
+    return [this.styles.euiPageHeaderContent__rightSideItems, {
+      '& > .euiFlexItem': this.styles.euiPageHeaderContent__rightSideItem
+    }, this.args.responsive === 'reverse' && {
+      [euiMaxBreakpoint(upstream, 'm')]: {
+        order: -1
+      }
+    }, this.args.rightSideGroupProps?.css];
   }
-  #minHeight = (i(this, "minHeight"), void 0); // Defaults
   static {
-    g(this.prototype, "fullHeight", [argOrDefaultDecorator(false)]);
+    n(this.prototype, "rightCss", [cached]);
+  }
+  breadcrumbArgs = BREADCRUMB_ARGS;
+  titleArgs = TITLE_ARGS;
+  iconArgs = ICON_ARGS;
+  groupArgs = GROUP_ARGS;
+  /** Upstream's `iconProps.css` composed after the title icon styles. */
+  get iconCss() {
+    return [this.titleIconCss, this.args.iconProps?.css];
+  }
+  /** Upstream's `iconProps.css`, composed into EuiIcon's own class. */
+  static {
+    n(this.prototype, "iconCss", [cached]);
+  }
+  get titleIconCss() {
+    return this.styles.euiPageHeaderContent__titleIcon;
   }
-  #fullHeight = (i(this, "fullHeight"), void 0);
   static {
-    g(this.prototype, "template", [argOrDefaultDecorator('default')]);
+    n(this.prototype, "titleIconCss", [cached]);
   }
-  #template = (i(this, "template"), void 0);
-  get classes() {
-    return 'euiPageTemplate '.concat(this.fullHeightClass);
+  get screenReaderOnlyClass() {
+    return euiClass(this.context, euiScreenReaderOnlyCss);
   }
-  get fullHeightClass() {
-    return this.fullHeight && this.canFullHeight ? 'eui-fullHeight eui-yScroll' : '';
+  static {
+    n(this.prototype, "screenReaderOnlyClass", [cached]);
   }
-  get canFullHeight() {
-    return this.template === 'default' || this.template === 'empty';
+  get selectedTabLabel() {
+    return this.args.tabs?.find(tab => tab.isSelected === true)?.label;
   }
   static {
-    setComponentTemplate(precompileTemplate("{{#let (argOrDefault @responsive true) (argOrDefault @alignItems \"top\") (useState false) (and (argOrDefault @hasDescriptionBlock true) (has-block \"description\")) (and (argOrDefault @hasRightSideItemsBlock true) (has-block \"rightSideItems\")) (or (and (argOrDefault @hasPageTitleBlock true) (has-block \"pageTitle\")) @pageTitle) (and (argOrDefault @hasDefaultBlock true) (has-block \"default\")) as |responsive alignItems isResponsiveBreakpoint hasDescriptionBlock hasRightSideItemsBlock hasPageTitleBlock hasDefaultBlock|}}\n  <div class={{classNames \"euiPageHeaderContent\" (if @restrictWidth \"euiPanel--restrictWidth-custom\" \"\")}} {{style (inlineStyles width=@restrictWidth)}} {{useIsWithinBreakpoints sizes=(array \"xs\" \"s\") isActive=(not (not responsive)) setIsWithinBreakpointsValue=isResponsiveBreakpoint.setState}} ...attributes>\n    {{#if @breadcrumbs}}\n      <EuiBreadcrumbs @breadcrumbs={{@breadcrumbs}} class={{@breadcrumbProps.className}} />\n      <EuiSpacer @size=\"s\" />\n    {{/if}}\n    {{#if (or (eq alignItems \"top\") isResponsiveBreakpoint.value)}}\n      <EuiFlexGroup class=\"euiPageHeaderContent__top\" @responsive={{not (not responsive)}} @alignItems={{if hasPageTitleBlock \"flexStart\" \"baseline\"}} @gutterSize=\"l\">\n        {{#if (and isResponsiveBreakpoint.value (eq responsive \"reverse\"))}}\n          {{#if hasRightSideItemsBlock}}\n            <EuiFlexItem @grow={{false}}>\n              <EuiFlexGroup @wrap={{true}} @responsive={{false}} class={{classNames \"euiPageHeaderContent__rightSideItems\" @rightSideGroupProps.className}}>\n                {{yield (component EuiFlexItem grow=false) to=\"rightSideItems\"}}\n              </EuiFlexGroup>\n            </EuiFlexItem>\n          {{/if}}\n          <EuiFlexItem>\n            {{#if (and (not hasPageTitleBlock) @tabs)}}\n              <EuiTabs @size=\"xl\" @display=\"condensed\" @bottomBorder={{false}}>\n                {{#each @tabs as |tab|}}\n                  <EuiTab @id={{tab.id}} @disabled={{tab.disabled}} @isSelected={{tab.isSelected}} @href={{tab.href}} {{on \"click\" (optional tab.onClick)}}>\n                    {{tab.label}}\n                  </EuiTab>\n                {{/each}}\n              </EuiTabs>\n            {{/if}}\n            {{#if hasPageTitleBlock}}\n              <EuiTitle class={{@pageTitleProps.className}} @size=\"l\" @tagName=\"h1\">\n                {{#if @iconType}}\n                  <EuiIcon @size=\"xl\" @type={{@iconType}} @iconClasses={{classNames \"euiPageHeaderContent__titleIcon\" @iconProps.className}} />\n                {{/if}}\n\n                {{@pageTitle}}\n                {{yield to=\"pageTitle\"}}\n\n              </EuiTitle>\n            {{/if}}\n\n            {{#if hasDescriptionBlock}}\n              {{#if (or hasPageTitleBlock @tabs)}}\n                <EuiSpacer />\n              {{/if}}\n              <EuiText @grow={{false}}>\n                {{@description}}\n                {{yield to=\"description\"}}\n              </EuiText>\n            {{/if}}\n          </EuiFlexItem>\n        {{else}}\n          <EuiFlexItem>\n            {{#if (and (not hasPageTitleBlock) @tabs)}}\n              <EuiTabs @size=\"xl\" @display=\"condensed\" @bottomBorder={{false}}>\n                {{#each @tabs as |tab|}}\n                  <EuiTab @id={{tab.id}} @disabled={{tab.disabled}} @isSelected={{tab.isSelected}} @href={{tab.href}} {{on \"click\" (optional tab.onClick)}}>\n                    {{tab.label}}\n                  </EuiTab>\n                {{/each}}\n              </EuiTabs>\n            {{/if}}\n            {{#if hasPageTitleBlock}}\n              <EuiTitle class={{@pageTitleProps.className}} @size=\"l\" @tagName=\"h1\">\n                {{#if @iconType}}\n                  <EuiIcon @size=\"xl\" @type={{@iconType}} @iconClasses={{classNames \"euiPageHeaderContent__titleIcon\" @iconProps.className}} />\n                {{/if}}\n\n                {{@pageTitle}}\n                {{yield to=\"pageTitle\"}}\n              </EuiTitle>\n            {{/if}}\n\n            {{#if hasDescriptionBlock}}\n              {{#if (or hasPageTitleBlock @tabs)}}\n                <EuiSpacer />\n              {{/if}}\n              <EuiText @grow={{false}}>\n                {{@description}}\n                {{yield to=\"description\"}}\n              </EuiText>\n            {{/if}}\n          </EuiFlexItem>\n          {{#if hasRightSideItemsBlock}}\n            <EuiFlexItem @grow={{false}}>\n              <EuiFlexGroup @wrap={{true}} @responsive={{false}} class={{classNames \"euiPageHeaderContent__rightSideItems\" @rightSideGroupProps.className}}>\n                {{yield (component EuiFlexItem grow=false) to=\"rightSideItems\"}}\n              </EuiFlexGroup>\n            </EuiFlexItem>\n          {{/if}}\n        {{/if}}\n      </EuiFlexGroup>\n      {{#if (or hasDefaultBlock (and hasPageTitleBlock @tabs))}}\n        <div class=\"euiPageHeaderContent__bottom\">\n          <EuiSpacer />\n          {{yield to=\"default\"}}\n          {{#if hasPageTitleBlock}}\n            <EuiTabs @size=\"l\" @display=\"condensed\" @bottomBorder={{false}}>\n              {{#each @tabs as |tab|}}\n                <EuiTab @id={{tab.id}} @disabled={{tab.disabled}} @isSelected={{tab.isSelected}} @href={{tab.href}} {{on \"click\" (optional tab.onClick)}}>\n                  {{tab.label}}\n                </EuiTab>\n              {{/each}}\n            </EuiTabs>\n          {{/if}}\n        </div>\n      {{/if}}\n    {{else}}\n      <EuiFlexGroup class=\"euiPageHeaderContent__top\" @responsive={{not (not responsive)}} {{!--@glint-expect-error--}} @alignItems={{if (eq alignItems \"bottom\") \"flexEnd\" alignItems}} @gutterSize=\"l\">\n        <EuiFlexItem>\n          {{#if (and (not hasPageTitleBlock) @tabs)}}\n            <EuiTabs @size=\"xl\" @display=\"condensed\" @bottomBorder={{false}}>\n              {{#each @tabs as |tab|}}\n                <EuiTab @id={{tab.id}} @disabled={{tab.disabled}} @isSelected={{tab.isSelected}} @href={{tab.href}} {{on \"click\" (optional tab.onClick)}}>\n                  {{tab.label}}\n                </EuiTab>\n              {{/each}}\n            </EuiTabs>\n          {{/if}}\n          {{#if hasPageTitleBlock}}\n            <EuiTitle class={{@pageTitleProps.className}} @size=\"l\" @tagName=\"h1\">\n              {{#if @iconType}}\n                <EuiIcon @size=\"xl\" @type={{@iconType}} @iconClasses={{classNames \"euiPageHeaderContent__titleIcon\" @iconProps.className}} />\n              {{/if}}\n\n              {{@pageTitle}}\n              {{yield to=\"pageTitle\"}}\n            </EuiTitle>\n          {{/if}}\n\n          {{#if hasDescriptionBlock}}\n            {{#if (or hasPageTitleBlock @tabs)}}\n              <EuiSpacer />\n            {{/if}}\n            <EuiText @grow={{false}}>\n              {{@description}}\n              {{yield to=\"description\"}}\n            </EuiText>\n          {{/if}}\n          {{#if (or hasDefaultBlock (and hasPageTitleBlock @tabs))}}\n            <div class=\"euiPageHeaderContent__bottom\">\n              <EuiSpacer />\n              {{yield to=\"default\"}}\n              {{#if hasPageTitleBlock}}\n                <EuiTabs @size=\"l\" @display=\"condensed\" @bottomBorder={{false}}>\n                  {{#each @tabs as |tab|}}\n                    <EuiTab @id={{tab.id}} @disabled={{tab.disabled}} @isSelected={{tab.isSelected}} @href={{tab.href}} {{on \"click\" (optional tab.onClick)}}>\n                      {{tab.label}}\n                    </EuiTab>\n                  {{/each}}\n                </EuiTabs>\n              {{/if}}\n            </div>\n          {{/if}}\n        </EuiFlexItem>\n        {{#if hasRightSideItemsBlock}}\n          <EuiFlexItem @grow={{false}}>\n            <EuiFlexGroup @wrap={{true}} @responsive={{false}} @gutterSize=\"m\" class={{classNames \"euiPageHeaderContent__rightSideItems\" @rightSideGroupProps.className}}>\n              {{yield (component EuiFlexItem grow=false) to=\"rightSideItems\"}}\n            </EuiFlexGroup>\n          </EuiFlexItem>\n        {{/if}}\n      </EuiFlexGroup>\n    {{/if}}\n  </div>\n{{/let}}", {
+    setComponentTemplate(precompileTemplate("{{#let (argOrDefault @responsive true) (and (argOrDefault @hasDescriptionBlock true) (has-block \"description\")) (and (argOrDefault @hasRightSideItemsBlock true) (has-block \"rightSideItems\")) (or (and (argOrDefault @hasPageTitleBlock true) (has-block \"pageTitle\")) @pageTitle) (and (argOrDefault @hasDefaultBlock true) (has-block \"default\")) as |responsive hasDescriptionBlock hasRightSideItemsBlock hasPageTitleBlock hasDefaultBlock|}}\n  {{#let (this.layout (hash title=hasPageTitleBlock description=(or hasDescriptionBlock @description) right=hasRightSideItemsBlock children=hasDefaultBlock)) as |layout|}}\n    <div class=\"euiPageHeaderContent {{layout.root}}\" {{style this.widthStyle}} ...attributes>\n      {{#if layout.onlyChildren}}\n        <div class={{layout.childrenOnly}}>\n          {{yield to=\"default\"}}\n        </div>\n      {{else}}\n        {{#if @breadcrumbs}}\n          <EuiBreadcrumbs @breadcrumbs={{@breadcrumbs}} @responsive={{@breadcrumbProps.responsive}} @truncate={{@breadcrumbProps.truncate}} @max={{@breadcrumbProps.max}} @type={{@breadcrumbProps.type}} @lastBreadcrumbIsCurrentPage={{@breadcrumbProps.lastBreadcrumbIsCurrentPage}} @css={{@breadcrumbProps.css}} class={{@breadcrumbProps.className}} {{spreadAttributes @breadcrumbProps this.breadcrumbArgs}} />\n          <EuiSpacer @size=\"s\" />\n        {{/if}}\n        <EuiFlexGroup class=\"euiPageHeaderContent__top\" @css={{this.topCss}} @responsive={{not (not responsive)}} @alignItems={{if @alignItems (this.alignItems @alignItems)}} @gutterSize=\"l\" @wrap={{true}}>\n          <EuiFlexItem @grow={{2}} @css={{this.leftCss}}>\n            {{#if layout.tabsAsTitle}}\n              <h1 class={{this.screenReaderOnlyClass}}>\n                {{this.selectedTabLabel}}\n              </h1>\n              {{!-- @glint-expect-error tabs is set when tabsAsTitle --}}\n              <HeaderTabs @tabs={{@tabs}} @tabsProps={{@tabsProps}} />\n            {{else if hasPageTitleBlock}}\n              <EuiTitle class={{@pageTitleProps.className}} @size=\"l\" @tagName=\"h1\" @textTransform={{@pageTitleProps.textTransform}} @css={{@pageTitleProps.css}} {{spreadAttributes @pageTitleProps this.titleArgs}}>\n                {{#if @iconType}}\n                  <EuiIcon @size={{if @iconProps.size @iconProps.size \"xl\"}} @type={{@iconType}} @color={{@iconProps.color}} @title={{@iconProps.title}} @titleId={{@iconProps.titleId}} {{spreadAttributes @iconProps this.iconArgs}} @iconClasses={{classNames \"euiPageHeaderContent__titleIcon\" @iconProps.className}} @css={{this.iconCss}} />\n                {{/if}}\n                {{@pageTitle}}\n                {{yield to=\"pageTitle\"}}\n              </EuiTitle>\n            {{/if}}\n\n            {{#if (or hasDescriptionBlock @description)}}\n              {{#if (or hasPageTitleBlock @tabs)}}\n                <EuiSpacer />\n              {{/if}}\n              <EuiText @grow={{false}}>\n                {{#if @description}}\n                  <p>{{@description}}</p>\n                {{/if}}\n                {{#if hasDescriptionBlock}}\n                  {{yield to=\"description\"}}\n                {{/if}}\n              </EuiText>\n            {{/if}}\n\n            {{#if hasDefaultBlock}}\n              <EuiSpacer />\n              {{yield to=\"default\"}}\n            {{/if}}\n          </EuiFlexItem>\n          {{#if hasRightSideItemsBlock}}\n            <EuiFlexGroup @gutterSize={{if @rightSideGroupProps.gutterSize @rightSideGroupProps.gutterSize \"m\"}} @responsive={{argOrDefault @rightSideGroupProps.responsive false}} @wrap={{argOrDefault @rightSideGroupProps.wrap true}} @alignItems={{@rightSideGroupProps.alignItems}} @justifyContent={{@rightSideGroupProps.justifyContent}} @direction={{@rightSideGroupProps.direction}} @tagName={{@rightSideGroupProps.tagName}} class={{classNames \"euiPageHeaderContent__rightSideItems\" @rightSideGroupProps.className}} @css={{this.rightCss}} {{spreadAttributes @rightSideGroupProps this.groupArgs}}>\n              {{yield (component EuiFlexItem grow=false) to=\"rightSideItems\"}}\n            </EuiFlexGroup>\n          {{/if}}\n        </EuiFlexGroup>\n        {{#if layout.tabsAtBottom}}\n          <div class=\"euiPageHeaderContent__bottom\">\n            <EuiSpacer />\n            {{!-- @glint-expect-error tabs is set when tabsAtBottom --}}\n            <HeaderTabs @tabs={{@tabs}} @tabsProps={{@tabsProps}} />\n          </div>\n        {{/if}}\n      {{/if}}\n    </div>\n  {{/let}}\n{{/let}}", {
       strictMode: true,
       scope: () => ({
         argOrDefault,
-        useState,
         and,
         or,
-        classNames,
+        hash,
         style,
-        inlineStyles,
-        useIsWithinBreakpoints,
-        array,
-        not,
         EuiBreadcrumbs,
+        spreadAttributes,
         EuiSpacer,
-        eq,
         EuiFlexGroup,
+        not,
         EuiFlexItem,
-        EuiTabs,
-        EuiTab,
-        on,
-        optional,
+        HeaderTabs,
         EuiTitle,
         EuiIcon,
-        EuiText: EuiTextComponent
+        classNames,
+        EuiText
       })
     }), this);
   }
+  alignItems = value => ALIGN_ITEMS[value];
 }
 
 export { TEMPLATES, EuiPageHeaderContent as default };

package/dist/components/eui-page-header-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-page-header-content.js","sources":["../../src/components/eui-page-header-content.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { array } from '@ember/helper';\nimport { on } from '@ember/modifier';\n\nimport optional from '@nullvoxpopuli/ember-composable-helpers/helpers/optional';\nimport style from 'ember-style-modifier/modifiers/style';\nimport { and, eq, not, or } from 'ember-truth-helpers';\n\nimport argOrDefault, {\n  argOrDefaultDecorator\n} from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport inlineStyles from '../helpers/inline-styles.ts';\nimport useState from '../helpers/use-state.ts';\nimport useIsWithinBreakpoints from '../modifiers/use-is-within-breakpoints.ts';\nimport EuiBreadcrumbs from './eui-breadcrumbs.gts';\nimport EuiFlexGroup from './eui-flex-group.gts';\nimport EuiFlexItem from './eui-flex-item.gts';\nimport EuiIcon from './eui-icon.gts';\nimport EuiSpacer from './eui-spacer.gts';\nimport EuiTab from './eui-tab.gts';\nimport EuiTabs from './eui-tabs.gts';\nimport EuiText from './eui-text.gts';\nimport EuiTitle from './eui-title.gts';\n\nimport type { paddingSizeMapping } from '../utils/css-mappings/eui-page-content-body.ts';\nimport type { EuiButtomBarArgs } from './eui-bottom-bar';\nimport type { EuiBreadcrumbsSignature } from './eui-breadcrumbs';\nimport type { EuiIconSignature } from './eui-icon';\nimport type { IEuiTab } from './eui-tab';\nimport type { WithBoundArgs } from '@glint/template';\n\nexport const TEMPLATES = [\n  'default',\n  'centeredBody',\n  'centeredContent',\n  'empty'\n] as const;\n\ntype Tab = IEuiTab & {\n  label?: string;\n  onClick?: () => void;\n};\n\nexport type EuiPageHeaderContentProps = {\n  /** @deprecated Has no effect (EuiPageTemplate arg). */\n  template?: (typeof TEMPLATES)[number];\n  /** @deprecated Has no effect (EuiPageTemplate arg). */\n  bottomBarProps?: EuiButtomBarArgs;\n  /** @deprecated Has no effect (EuiPageTemplate arg). */\n  fullHeight?: boolean;\n  /** @deprecated Has no effect (EuiPageTemplate arg). */\n  minHeight?: number;\n\n  /** Max width of the content, see EuiPageHeader. */\n  restrictWidth?: boolean | string | number;\n\n  /** Adds a border below the tabs. */\n  bottomBorder?: boolean;\n\n  /** @deprecated Has no effect (EuiPageTemplate arg). */\n  bodyBottomBorder?: boolean;\n\n  /** @deprecated Has no effect (EuiPageTemplate arg). */\n  bodyProps?: {\n    paddingSize?: keyof typeof paddingSizeMapping;\n  };\n  /** @deprecated Has no effect (EuiPageTemplate arg). */\n  contentProps?: {\n    paddingSize?: keyof typeof paddingSizeMapping;\n  };\n\n  /** See EuiPageHeader's `@alignItems`. Defaults to `'top'`. */\n  alignItems?: 'top' | 'bottom' | 'center' | 'stretch';\n\n  /** See EuiPageHeader's `@responsive`. Defaults to `true`. */\n  responsive?: boolean | 'reverse';\n\n  /** @private Render the `<:description>` block. Defaults to `true`. */\n  hasDescriptionBlock?: boolean;\n\n  /** @private Render the `<:rightSideItems>` block. Defaults to `true`. */\n  hasRightSideItemsBlock?: boolean;\n\n  /** @private Render the `<:pageTitle>` block. Defaults to `true`. */\n  hasPageTitleBlock?: boolean;\n\n  /** @private Render the `<:default>` block. Defaults to `true`. */\n  hasDefaultBlock?: boolean;\n\n  /** The page's title. */\n  pageTitle?: string;\n\n  /** Breadcrumbs above the title. */\n  breadcrumbs?: EuiBreadcrumbsSignature['Args']['breadcrumbs'];\n\n  /** Props for the breadcrumbs: `{ className }`. */\n  breadcrumbProps?: {\n    className?: string;\n  };\n\n  /** Props for the right side items group: `{ className }`. */\n  rightSideGroupProps?: {\n    className?: string;\n  };\n\n  /** Props for the title: `{ className }`. */\n  pageTitleProps?: {\n    className?: string;\n  };\n\n  /** Icon before the title. */\n  iconType?: EuiIconSignature['Args']['type'];\n\n  /** Text under the title. */\n  description?: string;\n\n  /** Props for the icon: `{ className }`. */\n  iconProps?: {\n    className?: string;\n  };\n\n  /** Tabs, see EuiPageHeader's `@tabs`. */\n  tabs?: Tab[];\n};\n\n/** @private The layout inside EuiPageHeader; use EuiPageHeader. */\nexport interface EuiPageHeaderContentSignature {\n  Element: HTMLDivElement;\n  Args: EuiPageHeaderContentProps;\n  Blocks: {\n    /** Extra content. */\n    default: [];\n    /** The title. */\n    pageTitle: [];\n    /** The description. */\n    description: [];\n    /** Right side items; yields an `EuiFlexItem` to wrap each in. */\n    rightSideItems: [WithBoundArgs<typeof EuiFlexItem, 'grow'>?];\n  };\n}\n\nexport default class EuiPageHeaderContent extends Component<EuiPageHeaderContentSignature> {\n  // Defaults\n  @argOrDefaultDecorator(460) minHeight!: number;\n  @argOrDefaultDecorator(false) fullHeight!: boolean;\n  @argOrDefaultDecorator('default') template!: (typeof TEMPLATES)[number];\n\n  get classes() {\n    return 'euiPageTemplate '.concat(this.fullHeightClass);\n  }\n\n  get fullHeightClass() {\n    return this.fullHeight && this.canFullHeight\n      ? 'eui-fullHeight eui-yScroll'\n      : '';\n  }\n\n  get canFullHeight() {\n    return this.template === 'default' || this.template === 'empty';\n  }\n\n  <template>\n    {{#let\n      (argOrDefault @responsive true)\n      (argOrDefault @alignItems \"top\")\n      (useState false)\n      (and (argOrDefault @hasDescriptionBlock true) (has-block \"description\"))\n      (and\n        (argOrDefault @hasRightSideItemsBlock true) (has-block \"rightSideItems\")\n      )\n      (or\n        (and (argOrDefault @hasPageTitleBlock true) (has-block \"pageTitle\"))\n        @pageTitle\n      )\n      (and (argOrDefault @hasDefaultBlock true) (has-block \"default\"))\n      as |responsive alignItems isResponsiveBreakpoint hasDescriptionBlock hasRightSideItemsBlock hasPageTitleBlock hasDefaultBlock|\n    }}\n      <div\n        class={{classNames\n          \"euiPageHeaderContent\"\n          (if @restrictWidth \"euiPanel--restrictWidth-custom\" \"\")\n        }}\n        {{style (inlineStyles width=@restrictWidth)}}\n        {{useIsWithinBreakpoints\n          sizes=(array \"xs\" \"s\")\n          isActive=(not (not responsive))\n          setIsWithinBreakpointsValue=isResponsiveBreakpoint.setState\n        }}\n        ...attributes\n      >\n        {{#if @breadcrumbs}}\n          <EuiBreadcrumbs\n            @breadcrumbs={{@breadcrumbs}}\n            class={{@breadcrumbProps.className}}\n          />\n          <EuiSpacer @size=\"s\" />\n        {{/if}}\n        {{#if (or (eq alignItems \"top\") isResponsiveBreakpoint.value)}}\n          <EuiFlexGroup\n            class=\"euiPageHeaderContent__top\"\n            @responsive={{not (not responsive)}}\n            @alignItems={{if hasPageTitleBlock \"flexStart\" \"baseline\"}}\n            @gutterSize=\"l\"\n          >\n            {{#if (and isResponsiveBreakpoint.value (eq responsive \"reverse\"))}}\n              {{#if hasRightSideItemsBlock}}\n                <EuiFlexItem @grow={{false}}>\n                  <EuiFlexGroup\n                    @wrap={{true}}\n                    @responsive={{false}}\n                    class={{classNames\n                      \"euiPageHeaderContent__rightSideItems\"\n                      @rightSideGroupProps.className\n                    }}\n                  >\n                    {{yield\n                      (component EuiFlexItem grow=false)\n                      to=\"rightSideItems\"\n                    }}\n                  </EuiFlexGroup>\n                </EuiFlexItem>\n              {{/if}}\n              <EuiFlexItem>\n                {{#if (and (not hasPageTitleBlock) @tabs)}}\n                  <EuiTabs\n                    @size=\"xl\"\n                    @display=\"condensed\"\n                    @bottomBorder={{false}}\n                  >\n                    {{#each @tabs as |tab|}}\n                      <EuiTab\n                        @id={{tab.id}}\n                        @disabled={{tab.disabled}}\n                        @isSelected={{tab.isSelected}}\n                        @href={{tab.href}}\n                        {{on \"click\" (optional tab.onClick)}}\n                      >\n                        {{tab.label}}\n                      </EuiTab>\n                    {{/each}}\n                  </EuiTabs>\n                {{/if}}\n                {{#if hasPageTitleBlock}}\n                  <EuiTitle\n                    class={{@pageTitleProps.className}}\n                    @size=\"l\"\n                    @tagName=\"h1\"\n                  >\n                    {{#if @iconType}}\n                      <EuiIcon\n                        @size=\"xl\"\n                        @type={{@iconType}}\n                        @iconClasses={{classNames\n                          \"euiPageHeaderContent__titleIcon\"\n                          @iconProps.className\n                        }}\n                      />\n                    {{/if}}\n\n                    {{@pageTitle}}\n                    {{yield to=\"pageTitle\"}}\n\n                  </EuiTitle>\n                {{/if}}\n\n                {{#if hasDescriptionBlock}}\n                  {{#if (or hasPageTitleBlock @tabs)}}\n                    <EuiSpacer />\n                  {{/if}}\n                  <EuiText @grow={{false}}>\n                    {{@description}}\n                    {{yield to=\"description\"}}\n                  </EuiText>\n                {{/if}}\n              </EuiFlexItem>\n            {{else}}\n              <EuiFlexItem>\n                {{#if (and (not hasPageTitleBlock) @tabs)}}\n                  <EuiTabs\n                    @size=\"xl\"\n                    @display=\"condensed\"\n                    @bottomBorder={{false}}\n                  >\n                    {{#each @tabs as |tab|}}\n                      <EuiTab\n                        @id={{tab.id}}\n                        @disabled={{tab.disabled}}\n                        @isSelected={{tab.isSelected}}\n                        @href={{tab.href}}\n                        {{on \"click\" (optional tab.onClick)}}\n                      >\n                        {{tab.label}}\n                      </EuiTab>\n                    {{/each}}\n                  </EuiTabs>\n                {{/if}}\n                {{#if hasPageTitleBlock}}\n                  <EuiTitle\n                    class={{@pageTitleProps.className}}\n                    @size=\"l\"\n                    @tagName=\"h1\"\n                  >\n                    {{#if @iconType}}\n                      <EuiIcon\n                        @size=\"xl\"\n                        @type={{@iconType}}\n                        @iconClasses={{classNames\n                          \"euiPageHeaderContent__titleIcon\"\n                          @iconProps.className\n                        }}\n                      />\n                    {{/if}}\n\n                    {{@pageTitle}}\n                    {{yield to=\"pageTitle\"}}\n                  </EuiTitle>\n                {{/if}}\n\n                {{#if hasDescriptionBlock}}\n                  {{#if (or hasPageTitleBlock @tabs)}}\n                    <EuiSpacer />\n                  {{/if}}\n                  <EuiText @grow={{false}}>\n                    {{@description}}\n                    {{yield to=\"description\"}}\n                  </EuiText>\n                {{/if}}\n              </EuiFlexItem>\n              {{#if hasRightSideItemsBlock}}\n                <EuiFlexItem @grow={{false}}>\n                  <EuiFlexGroup\n                    @wrap={{true}}\n                    @responsive={{false}}\n                    class={{classNames\n                      \"euiPageHeaderContent__rightSideItems\"\n                      @rightSideGroupProps.className\n                    }}\n                  >\n                    {{yield\n                      (component EuiFlexItem grow=false)\n                      to=\"rightSideItems\"\n                    }}\n                  </EuiFlexGroup>\n                </EuiFlexItem>\n              {{/if}}\n            {{/if}}\n          </EuiFlexGroup>\n          {{#if (or hasDefaultBlock (and hasPageTitleBlock @tabs))}}\n            <div class=\"euiPageHeaderContent__bottom\">\n              <EuiSpacer />\n              {{yield to=\"default\"}}\n              {{#if hasPageTitleBlock}}\n                <EuiTabs @size=\"l\" @display=\"condensed\" @bottomBorder={{false}}>\n                  {{#each @tabs as |tab|}}\n                    <EuiTab\n                      @id={{tab.id}}\n                      @disabled={{tab.disabled}}\n                      @isSelected={{tab.isSelected}}\n                      @href={{tab.href}}\n                      {{on \"click\" (optional tab.onClick)}}\n                    >\n                      {{tab.label}}\n                    </EuiTab>\n                  {{/each}}\n                </EuiTabs>\n              {{/if}}\n            </div>\n          {{/if}}\n        {{else}}\n          <EuiFlexGroup\n            class=\"euiPageHeaderContent__top\"\n            @responsive={{not (not responsive)}}\n            {{!@glint-expect-error}}\n            @alignItems={{if (eq alignItems \"bottom\") \"flexEnd\" alignItems}}\n            @gutterSize=\"l\"\n          >\n            <EuiFlexItem>\n              {{#if (and (not hasPageTitleBlock) @tabs)}}\n                <EuiTabs\n                  @size=\"xl\"\n                  @display=\"condensed\"\n                  @bottomBorder={{false}}\n                >\n                  {{#each @tabs as |tab|}}\n                    <EuiTab\n                      @id={{tab.id}}\n                      @disabled={{tab.disabled}}\n                      @isSelected={{tab.isSelected}}\n                      @href={{tab.href}}\n                      {{on \"click\" (optional tab.onClick)}}\n                    >\n                      {{tab.label}}\n                    </EuiTab>\n                  {{/each}}\n                </EuiTabs>\n              {{/if}}\n              {{#if hasPageTitleBlock}}\n                <EuiTitle\n                  class={{@pageTitleProps.className}}\n                  @size=\"l\"\n                  @tagName=\"h1\"\n                >\n                  {{#if @iconType}}\n                    <EuiIcon\n                      @size=\"xl\"\n                      @type={{@iconType}}\n                      @iconClasses={{classNames\n                        \"euiPageHeaderContent__titleIcon\"\n                        @iconProps.className\n                      }}\n                    />\n                  {{/if}}\n\n                  {{@pageTitle}}\n                  {{yield to=\"pageTitle\"}}\n                </EuiTitle>\n              {{/if}}\n\n              {{#if hasDescriptionBlock}}\n                {{#if (or hasPageTitleBlock @tabs)}}\n                  <EuiSpacer />\n                {{/if}}\n                <EuiText @grow={{false}}>\n                  {{@description}}\n                  {{yield to=\"description\"}}\n                </EuiText>\n              {{/if}}\n              {{#if (or hasDefaultBlock (and hasPageTitleBlock @tabs))}}\n                <div class=\"euiPageHeaderContent__bottom\">\n                  <EuiSpacer />\n                  {{yield to=\"default\"}}\n                  {{#if hasPageTitleBlock}}\n                    <EuiTabs\n                      @size=\"l\"\n                      @display=\"condensed\"\n                      @bottomBorder={{false}}\n                    >\n                      {{#each @tabs as |tab|}}\n                        <EuiTab\n                          @id={{tab.id}}\n                          @disabled={{tab.disabled}}\n                          @isSelected={{tab.isSelected}}\n                          @href={{tab.href}}\n                          {{on \"click\" (optional tab.onClick)}}\n                        >\n                          {{tab.label}}\n                        </EuiTab>\n                      {{/each}}\n                    </EuiTabs>\n                  {{/if}}\n                </div>\n              {{/if}}\n            </EuiFlexItem>\n            {{#if hasRightSideItemsBlock}}\n              <EuiFlexItem @grow={{false}}>\n                <EuiFlexGroup\n                  @wrap={{true}}\n                  @responsive={{false}}\n                  @gutterSize=\"m\"\n                  class={{classNames\n                    \"euiPageHeaderContent__rightSideItems\"\n                    @rightSideGroupProps.className\n                  }}\n                >\n                  {{yield\n                    (component EuiFlexItem grow=false)\n                    to=\"rightSideItems\"\n                  }}\n                </EuiFlexGroup>\n              </EuiFlexItem>\n            {{/if}}\n          </EuiFlexGroup>\n        {{/if}}\n      </div>\n    {{/let}}\n  </template>\n}\n"],"names":["TEMPLATES","EuiPageHeaderContent","Component","g","prototype","argOrDefaultDecorator","i","classes","concat","fullHeightClass","fullHeight","canFullHeight","template","setComponentTemplate","precompileTemplate","strictMode","scope","argOrDefault","useState","and","or","classNames","style","inlineStyles","useIsWithinBreakpoints","array","not","EuiBreadcrumbs","EuiSpacer","eq","EuiFlexGroup","EuiFlexItem","EuiTabs","EuiTab","on","optional","EuiTitle","EuiIcon","EuiText"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgCO,MAAMA,SAAA,GAAY,CACvB,SAAA,EACA,cAAA,EACA,iBAAA,EACA,OAAA;;AA0FF;;AAgBe,MAAMC,6BAA6BC,SAAA,CAAU;AAAA,EAAA;AAAAC,IAAAA,CAAA,MAAAC,SAAA,EAAA,WAAA,EAAA,CAEzDC,qBAAA,CAAsB,GAAA,CAAA,CAAA,CAAA;AAAA;EAAA,UAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,WAAA,CAAA,EAAA,MAAA,EAAA;AADvB,EAAA;AAAAH,IAAAA,CAAA,MAAAC,SAAA,EAAA,YAAA,EAAA,CAECC,qBAAA,CAAsB,KAAA,CAAA,CAAA,CAAA;AAAA;EAAA,WAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,YAAA,CAAA,EAAA,MAAA;AAAA,EAAA;AAAAH,IAAAA,CAAA,MAAAC,SAAA,EAAA,UAAA,EAAA,CACtBC,qBAAA,CAAsB,SAAA,CAAA,CAAA,CAAA;AAAA;EAAA,SAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,UAAA,CAAA,EAAA,MAAA;EAEvB,IAAIC,OAAAA,GAAU;AACZ,IAAA,OAAO,kBAAA,CAAmBC,MAAM,CAAC,IAAI,CAACC,eAAe,CAAA;AACvD,EAAA;EAEA,IAAIA,eAAAA,GAAkB;IACpB,OAAO,IAAI,CAACC,UAAU,IAAI,IAAI,CAACC,aAAa,GACxC,4BAAA,GACA,EAAA;AACN,EAAA;EAEA,IAAIA,aAAAA,GAAgB;IAClB,OAAO,IAAI,CAACC,QAAQ,KAAK,aAAa,IAAI,CAACA,QAAQ,KAAK,OAAA;AAC1D,EAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,y+PAAA,EA0TA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,YAAA;QAAAC,QAAA;QAAAC,GAAA;QAAAC,EAAA;QAAAC,UAAA;QAAAC,KAAA;QAAAC,YAAA;QAAAC,sBAAA;QAAAC,KAAA;QAAAC,GAAA;QAAAC,cAAA;QAAAC,SAAA;QAAAC,EAAA;QAAAC,YAAA;QAAAC,WAAA;QAAAC,OAAA;QAAAC,MAAA;QAAAC,EAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,OAAA;AAAAC,iBAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}
+{"version":3,"file":"eui-page-header-content.js","sources":["../../src/components/eui-page-header-content.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\nimport { hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\n\nimport optional from '@nullvoxpopuli/ember-composable-helpers/helpers/optional';\nimport style from 'ember-style-modifier/modifiers/style';\nimport { and, not, or } from 'ember-truth-helpers';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport {\n  euiPageBoxSizing,\n  euiPagePadding,\n  euiPageRestrictWidthStyle,\n  euiScreenReaderOnlyCss\n} from '../utils/eui/page-layout.ts';\nimport spreadAttributes from '../-private/eui-spread-attributes.ts';\nimport { euiClass, useEuiBorealisStyles } from '../utils/eui/styles.ts';\nimport type { EuiCss } from '../utils/eui/styles.ts';\nimport {\n  euiMaxBreakpoint,\n  euiPageHeaderContentStyles,\n  euiPageHeaderStyles\n} from '../utils/eui/styles.generated.ts';\nimport EuiBreadcrumbs from './eui-breadcrumbs.gts';\nimport EuiFlexGroup from './eui-flex-group.gts';\nimport EuiFlexItem from './eui-flex-item.gts';\nimport EuiIcon from './eui-icon.gts';\nimport EuiSpacer from './eui-spacer.gts';\nimport EuiTab from './eui-tab.gts';\nimport EuiTabs from './eui-tabs.gts';\nimport EuiText from './eui-text.gts';\nimport EuiTitle from './eui-title.gts';\n\nimport type { EuiPagePaddingSize } from '../utils/eui/page-layout.ts';\nimport type { EuiButtomBarArgs } from './eui-bottom-bar';\nimport type { EuiBreadcrumbsSignature } from './eui-breadcrumbs';\nimport type { EuiTabsSignature } from './eui-tabs';\nimport type { EuiTitleSignature } from './eui-title';\nimport type { EuiFlexGroupSignature } from './eui-flex-group';\nimport type { EuiFlexGroupAlignItems } from './eui-flex-group';\nimport type { EuiIconSignature } from './eui-icon';\nimport type { IEuiTab } from './eui-tab';\nimport type { TOC } from '@ember/component/template-only';\nimport type { WithBoundArgs } from '@glint/template';\n\nexport const TEMPLATES = [\n  'default',\n  'centeredBody',\n  'centeredContent',\n  'empty'\n] as const;\n\ntype Tab = IEuiTab & {\n  label?: string;\n  onClick?: () => void;\n};\n\nexport type EuiPageHeaderContentProps = {\n  /** @deprecated Has no effect (EuiPageTemplate arg). */\n  template?: (typeof TEMPLATES)[number];\n  /** @deprecated Has no effect (EuiPageTemplate arg). */\n  bottomBarProps?: EuiButtomBarArgs;\n  /** @deprecated Has no effect (EuiPageTemplate arg). */\n  fullHeight?: boolean;\n  /** @deprecated Has no effect (EuiPageTemplate arg). */\n  minHeight?: number;\n\n  /** Max width of the content, centered; see EuiPageHeader. */\n  restrictWidth?: boolean | string | number;\n\n  /**\n   * Block padding (top and bottom; only top above bottom tabs, only\n   * bottom below title tabs), see EuiPageHeader. Defaults to `'none'`.\n   */\n  paddingSize?: EuiPagePaddingSize;\n\n  /**\n   * Adds a border below the content. Without padding, it also gets an\n   * `l` bottom padding, as upstream.\n   */\n  bottomBorder?: boolean;\n\n  /** @deprecated Has no effect (EuiPageTemplate arg). */\n  bodyBottomBorder?: boolean;\n\n  /** @deprecated Has no effect (EuiPageTemplate arg). */\n  bodyProps?: {\n    paddingSize?: 'none' | 's' | 'm' | 'l';\n  };\n  /** @deprecated Has no effect (EuiPageTemplate arg). */\n  contentProps?: {\n    paddingSize?: 'none' | 's' | 'm' | 'l';\n  };\n\n  /** See EuiPageHeader's `@alignItems`. */\n  alignItems?: 'top' | 'bottom' | 'center' | 'stretch';\n\n  /** See EuiPageHeader's `@responsive`. Defaults to `true`. */\n  responsive?: boolean | 'reverse';\n\n  /** @private Render the `<:description>` block. Defaults to `true`. */\n  hasDescriptionBlock?: boolean;\n\n  /** @private Render the `<:rightSideItems>` block. Defaults to `true`. */\n  hasRightSideItemsBlock?: boolean;\n\n  /** @private Render the `<:pageTitle>` block. Defaults to `true`. */\n  hasPageTitleBlock?: boolean;\n\n  /** @private Render the `<:default>` block. Defaults to `true`. */\n  hasDefaultBlock?: boolean;\n\n  /** The page's title. */\n  pageTitle?: string;\n\n  /** Breadcrumbs above the title. */\n  breadcrumbs?: EuiBreadcrumbsSignature['Args']['breadcrumbs'];\n\n  /**\n   * Props for the breadcrumbs: `className`, the `EuiBreadcrumbs` args\n   * (`responsive`, `truncate`, `max`, `type`, `lastBreadcrumbIsCurrentPage`,\n   * `css`) and any other key as an attribute (`aria-label`, `data-test-subj`).\n   */\n  breadcrumbProps?: Partial<\n    Omit<EuiBreadcrumbsSignature['Args'], 'breadcrumbs'>\n  > & { className?: string; [attribute: string]: unknown };\n\n  /**\n   * Props for the right side items group: `className`, the `EuiFlexGroup`\n   * args (`gutterSize`, `alignItems`, `justifyContent`, `direction`, `wrap`,\n   * `responsive`, `css`) and any other key as an attribute.\n   */\n  rightSideGroupProps?: Partial<EuiFlexGroupSignature['Args']> & {\n    className?: string;\n    [attribute: string]: unknown;\n  };\n\n  /**\n   * Props for the title: `className`, `textTransform`, `css` and any other\n   * key as an attribute (they land on the `<h1>`).\n   */\n  pageTitleProps?: Partial<\n    Pick<EuiTitleSignature['Args'], 'textTransform' | 'css'>\n  > & { className?: string; [attribute: string]: unknown };\n\n  /** Icon before the title. */\n  iconType?: EuiIconSignature['Args']['type'];\n\n  /** Text under the title. */\n  description?: string;\n\n  /**\n   * Props for the icon: `className`, the `EuiIcon` args (`size`, `color`,\n   * `title`, `titleId`, `css`) and any other key as an attribute.\n   */\n  iconProps?: Partial<Omit<EuiIconSignature['Args'], 'type'>> & {\n    className?: string;\n    [attribute: string]: unknown;\n  };\n\n  /**\n   * Props for the tabs: `className`, `display` and any other key as an\n   * attribute (`aria-label`, `data-test-subj`).\n   */\n  tabsProps?: Partial<Pick<EuiTabsSignature['Args'], 'display'>> & {\n    className?: string;\n    [attribute: string]: unknown;\n  };\n\n  /** Tabs, see EuiPageHeader's `@tabs`. */\n  tabs?: Tab[];\n};\n\n/** @private The layout inside EuiPageHeader; use EuiPageHeader. */\nexport interface EuiPageHeaderContentSignature {\n  Element: HTMLDivElement;\n  Args: EuiPageHeaderContentProps;\n  Blocks: {\n    /** Extra content. */\n    default: [];\n    /** The title. */\n    pageTitle: [];\n    /** The description. */\n    description: [];\n    /** Right side items; yields an `EuiFlexItem` to wrap each in. */\n    rightSideItems: [WithBoundArgs<typeof EuiFlexItem, 'grow'>?];\n  };\n}\n\ninterface Presence {\n  title: unknown;\n  description: unknown;\n  right: unknown;\n  children: unknown;\n}\n\nconst ALIGN_ITEMS: Record<string, EuiFlexGroupAlignItems> = {\n  top: 'flexStart',\n  bottom: 'flexEnd',\n  center: 'center',\n  stretch: 'stretch'\n};\n\nconst BREADCRUMB_ARGS = [\n  'responsive',\n  'truncate',\n  'max',\n  'type',\n  'lastBreadcrumbIsCurrentPage'\n] as const;\nconst TABS_ARGS = ['display'] as const;\nconst TITLE_ARGS = ['textTransform'] as const;\nconst ICON_ARGS = ['size', 'color', 'title', 'titleId'] as const;\nconst GROUP_ARGS = [\n  'gutterSize',\n  'alignItems',\n  'justifyContent',\n  'direction',\n  'wrap',\n  'responsive',\n  'tagName'\n] as const;\n\nconst HeaderTabs: TOC<{\n  Args: { tabs: Tab[]; tabsProps?: EuiPageHeaderContentProps['tabsProps'] };\n}> = <template>\n  <EuiTabs\n    @display={{@tabsProps.display}}\n    @size=\"m\"\n    @bottomBorder={{false}}\n    class={{@tabsProps.className}}\n    {{spreadAttributes @tabsProps TABS_ARGS}}\n  >\n    {{#each @tabs as |tab|}}\n      <EuiTab\n        @id={{tab.id}}\n        @disabled={{tab.disabled}}\n        @isSelected={{tab.isSelected}}\n        @href={{tab.href}}\n        {{on \"click\" (optional tab.onClick)}}\n      >\n        {{tab.label}}\n      </EuiTab>\n    {{/each}}\n  </EuiTabs>\n</template>;\n\n/**\n * Upstream `EuiPageHeaderContent` (`euiPageHeaderContentStyles`): the\n * header's layout, padding and bottom border.\n */\nexport default class EuiPageHeaderContent extends Component<EuiPageHeaderContentSignature> {\n  get context() {\n    return getEuiThemeContext(this);\n  }\n\n  @cached\n  get styles() {\n    return useEuiBorealisStyles(this.context, euiPageHeaderContentStyles);\n  }\n\n  /** Upstream's padding/border rules, which depend on what is rendered. */\n  layout = (present: Presence) => {\n    const { tabs } = this.args;\n    const hasTabs = !!tabs;\n    const title = !!present.title;\n    const onlyChildren =\n      !hasTabs &&\n      !title &&\n      !present.right &&\n      !present.description &&\n      !!present.children;\n    const onlyTabs =\n      hasTabs &&\n      !title &&\n      !present.right &&\n      !present.description &&\n      !present.children;\n    let paddingSize = this.args.paddingSize ?? 'none';\n    let bottomBorder = this.args.bottomBorder;\n    let sides: 'vertical' | 'top' | 'bottom' = 'vertical';\n    if (onlyTabs) {\n      paddingSize = 'none';\n    } else if (hasTabs && !title) {\n      sides = 'bottom';\n    } else if (hasTabs && title) {\n      sides = 'top';\n      bottomBorder = bottomBorder === false ? false : true;\n    } else if (paddingSize === 'none' && bottomBorder) {\n      sides = 'bottom';\n      paddingSize = 'l';\n    }\n    const context = this.context;\n    const styles = this.styles;\n    const pageHeader = useEuiBorealisStyles(context, euiPageHeaderStyles);\n    const responsive = this.args.responsive ?? true;\n    return {\n      onlyChildren,\n      tabsAsTitle: hasTabs && !title,\n      tabsAtBottom: hasTabs && title,\n      root: euiClass(\n        context,\n        euiPageBoxSizing,\n        styles.euiPageHeaderContent,\n        bottomBorder && pageHeader.border,\n        euiPagePadding(context.upstream, paddingSize, sides)\n      ),\n      childrenOnly: euiClass(\n        context,\n        euiPageBoxSizing,\n        styles.childrenOnly.flex,\n        styles[this.args.alignItems ?? 'center'],\n        responsive && {\n          [euiMaxBreakpoint(context.upstream, 'm') as string]:\n            responsive === 'reverse'\n              ? styles.childrenOnly.responsiveReverse\n              : styles.childrenOnly.responsive\n        }\n      )\n    };\n  };\n\n  get widthStyle() {\n    return euiPageRestrictWidthStyle(this.args.restrictWidth);\n  }\n\n  // Upstream's `css` on the EuiFlexGroup/EuiFlexItem children.\n  @cached\n  get topCss(): EuiCss {\n    return this.styles.euiPageHeaderContent__top;\n  }\n\n  @cached\n  get leftCss(): EuiCss {\n    return this.styles.euiPageHeaderContent__leftSideItems;\n  }\n\n  /**\n   * Upstream renders the right side first at small breakpoints with\n   * `responsive=\"reverse\"`; Ember keeps the DOM order and reorders it\n   * visually below the same breakpoint.\n   */\n  @cached\n  get rightCss(): EuiCss {\n    const upstream = this.context.upstream;\n    return [\n      this.styles.euiPageHeaderContent__rightSideItems,\n      { '& > .euiFlexItem': this.styles.euiPageHeaderContent__rightSideItem },\n      this.args.responsive === 'reverse' && {\n        [euiMaxBreakpoint(upstream, 'm') as string]: { order: -1 }\n      },\n      this.args.rightSideGroupProps?.css\n    ];\n  }\n\n  breadcrumbArgs = BREADCRUMB_ARGS;\n  titleArgs = TITLE_ARGS;\n  iconArgs = ICON_ARGS;\n  groupArgs = GROUP_ARGS;\n\n  /** Upstream's `iconProps.css` composed after the title icon styles. */\n  @cached\n  get iconCss(): EuiCss {\n    return [this.titleIconCss, this.args.iconProps?.css];\n  }\n\n  /** Upstream's `iconProps.css`, composed into EuiIcon's own class. */\n  @cached\n  get titleIconCss(): EuiCss {\n    return this.styles.euiPageHeaderContent__titleIcon;\n  }\n\n  @cached\n  get screenReaderOnlyClass() {\n    return euiClass(this.context, euiScreenReaderOnlyCss);\n  }\n\n  get selectedTabLabel() {\n    return this.args.tabs?.find((tab) => tab.isSelected === true)?.label;\n  }\n\n  <template>\n    {{#let\n      (argOrDefault @responsive true)\n      (and (argOrDefault @hasDescriptionBlock true) (has-block \"description\"))\n      (and\n        (argOrDefault @hasRightSideItemsBlock true) (has-block \"rightSideItems\")\n      )\n      (or\n        (and (argOrDefault @hasPageTitleBlock true) (has-block \"pageTitle\"))\n        @pageTitle\n      )\n      (and (argOrDefault @hasDefaultBlock true) (has-block \"default\"))\n      as |responsive hasDescriptionBlock hasRightSideItemsBlock hasPageTitleBlock hasDefaultBlock|\n    }}\n      {{#let\n        (this.layout\n          (hash\n            title=hasPageTitleBlock\n            description=(or hasDescriptionBlock @description)\n            right=hasRightSideItemsBlock\n            children=hasDefaultBlock\n          )\n        )\n        as |layout|\n      }}\n        <div\n          class=\"euiPageHeaderContent {{layout.root}}\"\n          {{style this.widthStyle}}\n          ...attributes\n        >\n          {{#if layout.onlyChildren}}\n            <div class={{layout.childrenOnly}}>\n              {{yield to=\"default\"}}\n            </div>\n          {{else}}\n            {{#if @breadcrumbs}}\n              <EuiBreadcrumbs\n                @breadcrumbs={{@breadcrumbs}}\n                @responsive={{@breadcrumbProps.responsive}}\n                @truncate={{@breadcrumbProps.truncate}}\n                @max={{@breadcrumbProps.max}}\n                @type={{@breadcrumbProps.type}}\n                @lastBreadcrumbIsCurrentPage={{@breadcrumbProps.lastBreadcrumbIsCurrentPage}}\n                @css={{@breadcrumbProps.css}}\n                class={{@breadcrumbProps.className}}\n                {{spreadAttributes @breadcrumbProps this.breadcrumbArgs}}\n              />\n              <EuiSpacer @size=\"s\" />\n            {{/if}}\n            <EuiFlexGroup\n              class=\"euiPageHeaderContent__top\"\n              @css={{this.topCss}}\n              @responsive={{not (not responsive)}}\n              @alignItems={{if @alignItems (this.alignItems @alignItems)}}\n              @gutterSize=\"l\"\n              @wrap={{true}}\n            >\n              <EuiFlexItem @grow={{2}} @css={{this.leftCss}}>\n                {{#if layout.tabsAsTitle}}\n                  <h1 class={{this.screenReaderOnlyClass}}>\n                    {{this.selectedTabLabel}}\n                  </h1>\n                  {{! @glint-expect-error tabs is set when tabsAsTitle }}\n                  <HeaderTabs @tabs={{@tabs}} @tabsProps={{@tabsProps}} />\n                {{else if hasPageTitleBlock}}\n                  <EuiTitle\n                    class={{@pageTitleProps.className}}\n                    @size=\"l\"\n                    @tagName=\"h1\"\n                    @textTransform={{@pageTitleProps.textTransform}}\n                    @css={{@pageTitleProps.css}}\n                    {{spreadAttributes @pageTitleProps this.titleArgs}}\n                  >\n                    {{#if @iconType}}\n                      <EuiIcon\n                        @size={{if @iconProps.size @iconProps.size \"xl\"}}\n                        @type={{@iconType}}\n                        @color={{@iconProps.color}}\n                        @title={{@iconProps.title}}\n                        @titleId={{@iconProps.titleId}}\n                        {{spreadAttributes @iconProps this.iconArgs}}\n                        @iconClasses={{classNames\n                          \"euiPageHeaderContent__titleIcon\"\n                          @iconProps.className\n                        }}\n                        @css={{this.iconCss}}\n                      />\n                    {{/if}}\n                    {{@pageTitle}}\n                    {{yield to=\"pageTitle\"}}\n                  </EuiTitle>\n                {{/if}}\n\n                {{#if (or hasDescriptionBlock @description)}}\n                  {{#if (or hasPageTitleBlock @tabs)}}\n                    <EuiSpacer />\n                  {{/if}}\n                  <EuiText @grow={{false}}>\n                    {{#if @description}}\n                      <p>{{@description}}</p>\n                    {{/if}}\n                    {{#if hasDescriptionBlock}}\n                      {{yield to=\"description\"}}\n                    {{/if}}\n                  </EuiText>\n                {{/if}}\n\n                {{#if hasDefaultBlock}}\n                  <EuiSpacer />\n                  {{yield to=\"default\"}}\n                {{/if}}\n              </EuiFlexItem>\n              {{#if hasRightSideItemsBlock}}\n                <EuiFlexGroup\n                  @gutterSize={{if\n                    @rightSideGroupProps.gutterSize\n                    @rightSideGroupProps.gutterSize\n                    \"m\"\n                  }}\n                  @responsive={{argOrDefault\n                    @rightSideGroupProps.responsive\n                    false\n                  }}\n                  @wrap={{argOrDefault @rightSideGroupProps.wrap true}}\n                  @alignItems={{@rightSideGroupProps.alignItems}}\n                  @justifyContent={{@rightSideGroupProps.justifyContent}}\n                  @direction={{@rightSideGroupProps.direction}}\n                  @tagName={{@rightSideGroupProps.tagName}}\n                  class={{classNames\n                    \"euiPageHeaderContent__rightSideItems\"\n                    @rightSideGroupProps.className\n                  }}\n                  @css={{this.rightCss}}\n                  {{spreadAttributes @rightSideGroupProps this.groupArgs}}\n                >\n                  {{yield\n                    (component EuiFlexItem grow=false)\n                    to=\"rightSideItems\"\n                  }}\n                </EuiFlexGroup>\n              {{/if}}\n            </EuiFlexGroup>\n            {{#if layout.tabsAtBottom}}\n              <div class=\"euiPageHeaderContent__bottom\">\n                <EuiSpacer />\n                {{! @glint-expect-error tabs is set when tabsAtBottom }}\n                <HeaderTabs @tabs={{@tabs}} @tabsProps={{@tabsProps}} />\n              </div>\n            {{/if}}\n          {{/if}}\n        </div>\n      {{/let}}\n    {{/let}}\n  </template>\n\n  alignItems = (value: string) => ALIGN_ITEMS[value];\n}\n"],"names":["TEMPLATES","ALIGN_ITEMS","top","bottom","center","stretch","BREADCRUMB_ARGS","TABS_ARGS","TITLE_ARGS","ICON_ARGS","GROUP_ARGS","HeaderTabs","setComponentTemplate","precompileTemplate","strictMode","scope","EuiTabs","spreadAttributes","EuiTab","on","optional","templateOnly","EuiPageHeaderContent","Component","context","getEuiThemeContext","styles","useEuiBorealisStyles","euiPageHeaderContentStyles","n","prototype","cached","layout","present","tabs","args","hasTabs","title","onlyChildren","right","description","children","onlyTabs","paddingSize","bottomBorder","sides","pageHeader","euiPageHeaderStyles","responsive","tabsAsTitle","tabsAtBottom","root","euiClass","euiPageBoxSizing","euiPageHeaderContent","border","euiPagePadding","upstream","childrenOnly","flex","alignItems","euiMaxBreakpoint","responsiveReverse","widthStyle","euiPageRestrictWidthStyle","restrictWidth","topCss","euiPageHeaderContent__top","leftCss","euiPageHeaderContent__leftSideItems","rightCss","euiPageHeaderContent__rightSideItems","euiPageHeaderContent__rightSideItem","order","rightSideGroupProps","css","breadcrumbArgs","titleArgs","iconArgs","groupArgs","iconCss","titleIconCss","iconProps","euiPageHeaderContent__titleIcon","screenReaderOnlyClass","euiScreenReaderOnlyCss","selectedTabLabel","find","tab","isSelected","label","argOrDefault","and","or","hash","style","EuiBreadcrumbs","EuiSpacer","EuiFlexGroup","not","EuiFlexItem","EuiTitle","EuiIcon","classNames","EuiText","value"],"mappings":"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"}

package/dist/components/eui-page-header.js

@@ -1,29 +1,48 @@
-import { concat } from '@ember/helper';
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
 import style from 'ember-style-modifier/modifiers/style';
 import { not, eq, or, and } from 'ember-truth-helpers';
 import argOrDefault from '../helpers/arg-or-default.js';
-import classNames from '../helpers/class-names.js';
-import euiPageRestrictWidth from '../helpers/eui-page-restrict-width.js';
+import { getEuiThemeContext } from '../utils/emotion/consume.js';
+import { euiPagePadding, euiPageBoxSizing } from '../utils/eui/page-layout.js';
+import { useEuiBorealisStyles, euiClass } from '../utils/eui/styles.js';
+import { i as euiBackgroundColor, cm as euiPageHeaderStyles } from '../styles.generated-SYAxYhey.js';
 import EuiPageHeaderContent from './eui-page-header-content.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 EuiPageHeader = setComponentTemplate(precompileTemplate("{{#let (euiPageRestrictWidth (argOrDefault @restrictWidth false) @style) (argOrDefault @responsive true) (and (argOrDefault @hasDefaultBlock true) (has-block \"default\")) (or (and (argOrDefault @hasDescriptionBlock true) (has-block \"description\")) @description) (or (and (argOrDefault @hasPageTitleBlock true) (has-block \"pageTitle\")) @pageTitle) (or (and (argOrDefault @hasRightSideItemsBlock true) (has-block \"rightSideItems\")) @rightSideItems) as |styling responsive hasDefaultBlock hasDescriptionBlock hasPageTitleBlock hasRightSideItemsBlock|}}\n  {{#let (classNames (if styling.widthClassName (concat \"euiPageHeader--\" styling.widthClassName)) (if @bottomBorder \"euiPageHeader--bottomBorder\") (if responsive \"euiPageHeader--responsive\") (if (eq responsive \"reverse\") \"euiPageHeader--responsiveReverse\") (if (and hasPageTitleBlock @tabs) \"euiPageHeader--tabsAtBottom\") (if (and @tabs (not hasPageTitleBlock) (not hasRightSideItemsBlock) (not hasDescriptionBlock) (not hasDefaultBlock)) \"euiPageHeader--onlyTabs\") (if @alignItems (concat \"euiPageHeader--\" @alignItems) \"euiPageHeader--center\") componentName=\"EuiPageHeader\" paddingSize=@paddingSize) as |classes|}}\n    {{#if (and (not @tabs) (not hasPageTitleBlock) (not hasDescriptionBlock) (not hasRightSideItemsBlock))}}\n      <header class={{classes}} {{style styling.newStyle}} ...attributes>\n        {{yield to=\"default\"}}\n      </header>\n    {{else}}\n      {{!--template-lint-disable--}}\n      <header class={{classes}} {{style styling.newStyle}} ...attributes>\n        <EuiPageHeaderContent @alignItems={{@alignItems}} @responsive={{responsive}} @pageTitle={{@pageTitle}} @pageTitleProps={{@pageTitleProps}} @iconType={{@iconType}} @breadcrumbs={{@breadcrumbs}} @tabs={{@tabs}} @description={{@description}} @restrictWidth={{@restrictWidth}} @hasDescriptionBlock={{not (not hasDescriptionBlock)}} @hasPageTitleBlock={{not (not hasPageTitleBlock)}} @hasRightSideItemsBlock={{not (not hasRightSideItemsBlock)}} @hasDefaultBlock={{not (not hasDefaultBlock)}}>\n          <:pageTitle>\n            {{yield to=\"pageTitle\"}}\n          </:pageTitle>\n          <:rightSideItems as |item|>\n            {{yield item to=\"rightSideItems\"}}\n          </:rightSideItems>\n          <:description>\n            {{yield to=\"description\"}}\n          </:description>\n          <:default>\n            {{yield to=\"default\"}}\n          </:default>\n        </EuiPageHeaderContent>\n      </header>\n    {{/if}}\n  {{/let}}\n{{/let}}", {
-  strictMode: true,
-  scope: () => ({
-    euiPageRestrictWidth,
-    argOrDefault,
-    and,
-    or,
-    classNames,
-    concat,
-    eq,
-    not,
-    style,
-    EuiPageHeaderContent
-  })
-}), templateOnly());
+/** Upstream `EuiPageHeader` (`euiPageHeaderStyles`) on the Borealis theme. */class EuiPageHeader extends Component {
+  get classes() {
+    const context = getEuiThemeContext(this);
+    const upstream = context.upstream;
+    const styles = useEuiBorealisStyles(context, euiPageHeaderStyles);
+    // Same order as upstream's `cssStyles`.
+    return euiClass(context, euiPageBoxSizing, styles.euiPageHeader, euiPagePadding(upstream, this.args.paddingSize ?? 'none', 'horizontal'), this.args.bottomBorder === 'extended' && styles.border, {
+      backgroundColor: euiBackgroundColor(upstream, this.args.color ?? 'transparent')
+    });
+  }
+  static {
+    n(this.prototype, "classes", [cached]);
+  }
+  get inlineStyle() {
+    return this.args.style ?? {};
+  }
+  static {
+    setComponentTemplate(precompileTemplate("{{#let (argOrDefault @responsive true) (and (argOrDefault @hasDefaultBlock true) (has-block \"default\")) (or (and (argOrDefault @hasDescriptionBlock true) (has-block \"description\")) @description) (or (and (argOrDefault @hasPageTitleBlock true) (has-block \"pageTitle\")) @pageTitle) (and (argOrDefault @hasRightSideItemsBlock true) (has-block \"rightSideItems\")) as |responsive hasDefaultBlock hasDescriptionBlock hasPageTitleBlock hasRightSideItemsBlock|}}\n  <header class=\"euiPageHeader {{this.classes}}\" {{style this.inlineStyle}} ...attributes>\n    <EuiPageHeaderContent @alignItems={{@alignItems}} @responsive={{responsive}} @paddingSize={{@paddingSize}} @bottomBorder={{if (eq @bottomBorder \"extended\") false @bottomBorder}} @pageTitle={{@pageTitle}} @pageTitleProps={{@pageTitleProps}} @iconProps={{@iconProps}} @tabsProps={{@tabsProps}} @breadcrumbProps={{@breadcrumbProps}} @rightSideGroupProps={{@rightSideGroupProps}} @iconType={{@iconType}} @breadcrumbs={{@breadcrumbs}} @tabs={{@tabs}} @description={{@description}} @restrictWidth={{@restrictWidth}} @hasDescriptionBlock={{not (not hasDescriptionBlock)}} @hasPageTitleBlock={{not (not hasPageTitleBlock)}} @hasRightSideItemsBlock={{not (not hasRightSideItemsBlock)}} @hasDefaultBlock={{not (not hasDefaultBlock)}}>\n      <:pageTitle>\n        {{yield to=\"pageTitle\"}}\n      </:pageTitle>\n      <:rightSideItems as |item|>\n        {{yield item to=\"rightSideItems\"}}\n      </:rightSideItems>\n      <:description>\n        {{yield to=\"description\"}}\n      </:description>\n      <:default>\n        {{yield to=\"default\"}}\n      </:default>\n    </EuiPageHeaderContent>\n  </header>\n{{/let}}", {
+      strictMode: true,
+      scope: () => ({
+        argOrDefault,
+        and,
+        or,
+        style,
+        EuiPageHeaderContent,
+        eq,
+        not
+      })
+    }), this);
+  }
+}
 
 export { EuiPageHeader as default };
 //# sourceMappingURL=eui-page-header.js.map

package/dist/components/eui-page-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-page-header.js","sources":["../../src/components/eui-page-header.gts"],"sourcesContent":["import { concat } from '@ember/helper';\n\nimport style from 'ember-style-modifier/modifiers/style';\nimport { and,eq, not, or } from 'ember-truth-helpers';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport euiPageRestrictWidth from '../helpers/eui-page-restrict-width.ts';\nimport EuiPageHeaderContent from './eui-page-header-content.gts';\n\nimport type { paddingSizeMapping } from '../utils/css-mappings/eui-page-content-body.ts';\nimport type { EuiIconSignature } from './eui-icon';\nimport type { EuiPageHeaderContentSignature } from './eui-page-header-content';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/**\n * The top of a page: breadcrumbs, title (with icon), description, tabs and\n * actions on the right.\n */\nexport interface EuiPageHeaderSignature {\n  Element: Element;\n  Args: {\n    /** Padding around the header: `'none'`, `'s'`, `'m'` or `'l'`. */\n    paddingSize?: keyof typeof paddingSizeMapping;\n    /** Adds a border below the header. */\n    bottomBorder?: boolean;\n    /**\n     * Max width of the header: `true` for EUI's default, a number in px or\n     * any CSS width. Defaults to `false` (full width).\n     */\n    restrictWidth?: boolean | 'full' | number | string;\n    /**\n     * Vertical alignment of the title and the right side items: `'top'`,\n     * `'bottom'`, `'center'` or `'stretch'`. Defaults to `'center'`.\n     */\n    alignItems?: EuiPageHeaderContentSignature['Args']['alignItems'];\n    /**\n     * Stacks the right side items under the title on small screens;\n     * `'reverse'` puts them above it. Defaults to `true`.\n     */\n    responsive?: boolean | 'reverse';\n    /** Icon before the title, e.g. the app's logo. */\n    iconType?: EuiIconSignature['Args']['type'];\n    /** Breadcrumbs above the title, see `EuiBreadcrumbs`'s `@breadcrumbs`. */\n    breadcrumbs?: any[];\n    /**\n     * Tabs under the title (or as the title, without `@pageTitle`):\n     * `[{ label: 'Overview', isSelected: true, onClick }, …]`, also taking\n     * `id`, `href` and `disabled`.\n     */\n    tabs?: any[];\n    /** Text under the title. Use the `<:description>` block for markup. */\n    description?: string;\n    /** The page's title (an `<h1>`). Use the `<:pageTitle>` block for markup. */\n    pageTitle?: string;\n\n    /** Props for the title: `{ className }`. */\n    pageTitleProps?: EuiPageHeaderContentSignature['Args']['pageTitleProps'];\n\n    /**\n     * @deprecated Has no effect on its own: put the items in the\n     * `<:rightSideItems>` block.\n     */\n    rightSideItems?: any[];\n    /** @deprecated Has no effect, use the `<:default>` block. */\n    default?: any[];\n    /** @private Render the `<:default>` block. Defaults to `true`. */\n    hasDefaultBlock?: boolean;\n    /** @private Render the `<:description>` block. Defaults to `true`. */\n    hasDescriptionBlock?: boolean;\n    /** @private Render the `<:pageTitle>` block. Defaults to `true`. */\n    hasPageTitleBlock?: boolean;\n    /** @private Render the `<:rightSideItems>` block. Defaults to `true`. */\n    hasRightSideItemsBlock?: boolean;\n\n    /** Inline styles, merged with the max width. */\n    style?: {\n      [key: string]: string;\n    };\n  };\n  Blocks: {\n    /** Extra content under the title and description. */\n    default: [];\n    /** The description, instead of `@description`. */\n    description: [];\n    /** The title, instead of `@pageTitle`. */\n    pageTitle: [];\n    /**\n     * Actions on the right, e.g. buttons. Wrap each in the yielded item:\n     * `<:rightSideItems as |Item|><Item><EuiButton …/></Item></:rightSideItems>`.\n     */\n    rightSideItems: EuiPageHeaderContentSignature['Blocks']['rightSideItems'];\n  };\n}\n\nconst EuiPageHeader: TemplateOnlyComponent<EuiPageHeaderSignature> = <template>\n  {{#let\n    (euiPageRestrictWidth (argOrDefault @restrictWidth false) @style)\n    (argOrDefault @responsive true)\n    (and (argOrDefault @hasDefaultBlock true) (has-block \"default\"))\n    (or\n      (and (argOrDefault @hasDescriptionBlock true) (has-block \"description\"))\n      @description\n    )\n    (or\n      (and (argOrDefault @hasPageTitleBlock true) (has-block \"pageTitle\"))\n      @pageTitle\n    )\n    (or\n      (and\n        (argOrDefault @hasRightSideItemsBlock true) (has-block \"rightSideItems\")\n      )\n      @rightSideItems\n    )\n    as |styling responsive hasDefaultBlock hasDescriptionBlock hasPageTitleBlock hasRightSideItemsBlock|\n  }}\n    {{#let\n      (classNames\n        (if\n          styling.widthClassName\n          (concat \"euiPageHeader--\" styling.widthClassName)\n        )\n        (if @bottomBorder \"euiPageHeader--bottomBorder\")\n        (if responsive \"euiPageHeader--responsive\")\n        (if (eq responsive \"reverse\") \"euiPageHeader--responsiveReverse\")\n        (if (and hasPageTitleBlock @tabs) \"euiPageHeader--tabsAtBottom\")\n        (if\n          (and\n            @tabs\n            (not hasPageTitleBlock)\n            (not hasRightSideItemsBlock)\n            (not hasDescriptionBlock)\n            (not hasDefaultBlock)\n          )\n          \"euiPageHeader--onlyTabs\"\n        )\n        (if\n          @alignItems\n          (concat \"euiPageHeader--\" @alignItems)\n          \"euiPageHeader--center\"\n        )\n        componentName=\"EuiPageHeader\"\n        paddingSize=@paddingSize\n      )\n      as |classes|\n    }}\n      {{#if\n        (and\n          (not @tabs)\n          (not hasPageTitleBlock)\n          (not hasDescriptionBlock)\n          (not hasRightSideItemsBlock)\n        )\n      }}\n        <header class={{classes}} {{style styling.newStyle}} ...attributes>\n          {{yield to=\"default\"}}\n        </header>\n      {{else}}\n        {{!template-lint-disable}}\n        <header class={{classes}} {{style styling.newStyle}} ...attributes>\n          <EuiPageHeaderContent\n            @alignItems={{@alignItems}}\n            @responsive={{responsive}}\n            @pageTitle={{@pageTitle}}\n            @pageTitleProps={{@pageTitleProps}}\n            @iconType={{@iconType}}\n            @breadcrumbs={{@breadcrumbs}}\n            @tabs={{@tabs}}\n            @description={{@description}}\n            @restrictWidth={{@restrictWidth}}\n            @hasDescriptionBlock={{not (not hasDescriptionBlock)}}\n            @hasPageTitleBlock={{not (not hasPageTitleBlock)}}\n            @hasRightSideItemsBlock={{not (not hasRightSideItemsBlock)}}\n            @hasDefaultBlock={{not (not hasDefaultBlock)}}\n          >\n            <:pageTitle>\n              {{yield to=\"pageTitle\"}}\n            </:pageTitle>\n            <:rightSideItems as |item|>\n              {{yield item to=\"rightSideItems\"}}\n            </:rightSideItems>\n            <:description>\n              {{yield to=\"description\"}}\n            </:description>\n            <:default>\n              {{yield to=\"default\"}}\n            </:default>\n          </EuiPageHeaderContent>\n        </header>\n      {{/if}}\n    {{/let}}\n  {{/let}}\n</template>;\n\nexport default EuiPageHeader;\n"],"names":["EuiPageHeader","setComponentTemplate","precompileTemplate","strictMode","scope","euiPageRestrictWidth","argOrDefault","and","or","classNames","concat","eq","not","style","EuiPageHeaderContent","templateOnly"],"mappings":";;;;;;;;;;;AA+FA,MAAMA,aAAqC,GAAAC,oBAAA,CAA0BC,kBAAA,CAAA,g+EAAA,EAiGrE;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,oBAAA;IAAAC,YAAA;IAAAC,GAAA;IAAAC,EAAA;IAAAC,UAAA;IAAAC,MAAA;IAAAC,EAAA;IAAAC,GAAA;IAAAC,KAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}
+{"version":3,"file":"eui-page-header.js","sources":["../../src/components/eui-page-header.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\n\nimport style from 'ember-style-modifier/modifiers/style';\nimport { and, eq, not, or } from 'ember-truth-helpers';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport {\n  euiPageBoxSizing,\n  euiPagePadding\n} from '../utils/eui/page-layout.ts';\nimport { euiClass, useEuiBorealisStyles } from '../utils/eui/styles.ts';\nimport {\n  euiBackgroundColor,\n  euiPageHeaderStyles\n} from '../utils/eui/styles.generated.ts';\nimport EuiPageHeaderContent from './eui-page-header-content.gts';\n\nimport type { EuiPagePaddingSize } from '../utils/eui/page-layout.ts';\nimport type { EuiIconSignature } from './eui-icon';\nimport type { EuiPageHeaderContentSignature } from './eui-page-header-content';\n\n/**\n * The top of a page: breadcrumbs, title (with icon), description, tabs and\n * actions on the right.\n */\nexport interface EuiPageHeaderSignature {\n  Element: Element;\n  Args: {\n    /**\n     * Padding: `'none'`, `'xs'`, `'s'`, `'m'`, `'l'` or `'xl'`. Inline\n     * padding goes on the header, block padding on its content (see\n     * `@bottomBorder`). Defaults to `'none'`.\n     */\n    paddingSize?: EuiPagePaddingSize;\n    /**\n     * Adds a border below the content (`true`, within the max width) or\n     * across the whole header (`'extended'`). With no padding, a `true`\n     * border also gets an `l` bottom padding, as upstream. Title + tabs\n     * headers get the border unless this is `false`.\n     */\n    bottomBorder?: boolean | 'extended';\n    /**\n     * Max width of the header's content, centered: `true` for EUI's\n     * default (1200px), a number in px or any CSS width. The header itself\n     * stays full width. Defaults to `false`.\n     */\n    restrictWidth?: boolean | number | string;\n    /**\n     * Background: `'transparent'`, `'plain'`, `'subdued'`, … (EuiPanel\n     * colors). Defaults to `'transparent'`.\n     */\n    color?: string;\n    /**\n     * Vertical alignment of the title and the right side items: `'top'`,\n     * `'bottom'`, `'center'` or `'stretch'`. Defaults to stretching the\n     * items (centered for a header with only a default block).\n     */\n    alignItems?: EuiPageHeaderContentSignature['Args']['alignItems'];\n    /**\n     * Stacks the right side items under the title below the theme's `m`\n     * breakpoint; `'reverse'` puts them above it. Defaults to `true`.\n     */\n    responsive?: boolean | 'reverse';\n    /** Icon before the title, e.g. the app's logo. */\n    iconType?: EuiIconSignature['Args']['type'];\n    /** Breadcrumbs above the title, see `EuiBreadcrumbs`'s `@breadcrumbs`. */\n    breadcrumbs?: any[];\n    /**\n     * Tabs under the title (or as the title, without `@pageTitle`):\n     * `[{ label: 'Overview', isSelected: true, onClick }, …]`, also taking\n     * `id`, `href` and `disabled`.\n     */\n    tabs?: any[];\n    /** Text under the title. Use the `<:description>` block for markup. */\n    description?: string;\n    /** The page's title (an `<h1>`). Use the `<:pageTitle>` block for markup. */\n    pageTitle?: string;\n\n    /**\n     * Props for the title: `className`, `textTransform`, `css` and any other\n     * key as an attribute of the `<h1>` (`aria-label`, `data-test-subj`).\n     */\n    pageTitleProps?: EuiPageHeaderContentSignature['Args']['pageTitleProps'];\n    /**\n     * Props for the icon: `className`, `size`, `color`, `title`, `titleId`,\n     * `css` and any other key as an attribute.\n     */\n    iconProps?: EuiPageHeaderContentSignature['Args']['iconProps'];\n    /** Props for the tabs: `className`, `display` and any attribute. */\n    tabsProps?: EuiPageHeaderContentSignature['Args']['tabsProps'];\n    /**\n     * Props for the breadcrumbs: `className`, `EuiBreadcrumbs` args and any\n     * attribute.\n     */\n    breadcrumbProps?: EuiPageHeaderContentSignature['Args']['breadcrumbProps'];\n    /**\n     * Props for the right side items group: `className`, `EuiFlexGroup`\n     * args and any attribute.\n     */\n    rightSideGroupProps?: EuiPageHeaderContentSignature['Args']['rightSideGroupProps'];\n\n    /**\n     * @deprecated Has no effect on its own: put the items in the\n     * `<:rightSideItems>` block.\n     */\n    rightSideItems?: any[];\n    /** @deprecated Has no effect, use the `<:default>` block. */\n    default?: any[];\n    /** @private Render the `<:default>` block. Defaults to `true`. */\n    hasDefaultBlock?: boolean;\n    /** @private Render the `<:description>` block. Defaults to `true`. */\n    hasDescriptionBlock?: boolean;\n    /** @private Render the `<:pageTitle>` block. Defaults to `true`. */\n    hasPageTitleBlock?: boolean;\n    /** @private Render the `<:rightSideItems>` block. Defaults to `true`. */\n    hasRightSideItemsBlock?: boolean;\n\n    /** Inline styles of the header (the max width goes on its content). */\n    style?: {\n      [key: string]: string;\n    };\n  };\n  Blocks: {\n    /** Extra content under the title and description. */\n    default: [];\n    /** The description, instead of `@description`. */\n    description: [];\n    /** The title, instead of `@pageTitle`. */\n    pageTitle: [];\n    /**\n     * Actions on the right, e.g. buttons. Wrap each in the yielded item:\n     * `<:rightSideItems as |Item|><Item><EuiButton …/></Item></:rightSideItems>`.\n     */\n    rightSideItems: EuiPageHeaderContentSignature['Blocks']['rightSideItems'];\n  };\n}\n\n/** Upstream `EuiPageHeader` (`euiPageHeaderStyles`) on the Borealis theme. */\nexport default class EuiPageHeader extends Component<EuiPageHeaderSignature> {\n  @cached\n  get classes() {\n    const context = getEuiThemeContext(this);\n    const upstream = context.upstream;\n    const styles = useEuiBorealisStyles(context, euiPageHeaderStyles);\n    // Same order as upstream's `cssStyles`.\n    return euiClass(\n      context,\n      euiPageBoxSizing,\n      styles.euiPageHeader,\n      euiPagePadding(upstream, this.args.paddingSize ?? 'none', 'horizontal'),\n      this.args.bottomBorder === 'extended' && styles.border,\n      {\n        backgroundColor: euiBackgroundColor(\n          upstream,\n          this.args.color ?? 'transparent'\n        )\n      }\n    );\n  }\n\n  get inlineStyle() {\n    return this.args.style ?? {};\n  }\n\n  <template>\n    {{#let\n      (argOrDefault @responsive true)\n      (and (argOrDefault @hasDefaultBlock true) (has-block \"default\"))\n      (or\n        (and (argOrDefault @hasDescriptionBlock true) (has-block \"description\"))\n        @description\n      )\n      (or\n        (and (argOrDefault @hasPageTitleBlock true) (has-block \"pageTitle\"))\n        @pageTitle\n      )\n      (and\n        (argOrDefault @hasRightSideItemsBlock true) (has-block \"rightSideItems\")\n      )\n      as |responsive hasDefaultBlock hasDescriptionBlock hasPageTitleBlock hasRightSideItemsBlock|\n    }}\n      <header\n        class=\"euiPageHeader {{this.classes}}\"\n        {{style this.inlineStyle}}\n        ...attributes\n      >\n        <EuiPageHeaderContent\n          @alignItems={{@alignItems}}\n          @responsive={{responsive}}\n          @paddingSize={{@paddingSize}}\n          @bottomBorder={{if (eq @bottomBorder \"extended\") false @bottomBorder}}\n          @pageTitle={{@pageTitle}}\n          @pageTitleProps={{@pageTitleProps}}\n          @iconProps={{@iconProps}}\n          @tabsProps={{@tabsProps}}\n          @breadcrumbProps={{@breadcrumbProps}}\n          @rightSideGroupProps={{@rightSideGroupProps}}\n          @iconType={{@iconType}}\n          @breadcrumbs={{@breadcrumbs}}\n          @tabs={{@tabs}}\n          @description={{@description}}\n          @restrictWidth={{@restrictWidth}}\n          @hasDescriptionBlock={{not (not hasDescriptionBlock)}}\n          @hasPageTitleBlock={{not (not hasPageTitleBlock)}}\n          @hasRightSideItemsBlock={{not (not hasRightSideItemsBlock)}}\n          @hasDefaultBlock={{not (not hasDefaultBlock)}}\n        >\n          <:pageTitle>\n            {{yield to=\"pageTitle\"}}\n          </:pageTitle>\n          <:rightSideItems as |item|>\n            {{yield item to=\"rightSideItems\"}}\n          </:rightSideItems>\n          <:description>\n            {{yield to=\"description\"}}\n          </:description>\n          <:default>\n            {{yield to=\"default\"}}\n          </:default>\n        </EuiPageHeaderContent>\n      </header>\n    {{/let}}\n  </template>\n}\n"],"names":["EuiPageHeader","Component","classes","context","getEuiThemeContext","upstream","styles","useEuiBorealisStyles","euiPageHeaderStyles","euiClass","euiPageBoxSizing","euiPageHeader","euiPagePadding","args","paddingSize","bottomBorder","border","backgroundColor","euiBackgroundColor","color","n","prototype","cached","inlineStyle","style","setComponentTemplate","precompileTemplate","strictMode","scope","argOrDefault","and","or","EuiPageHeaderContent","eq","not"],"mappings":";;;;;;;;;;;;;;AA2IA,8EACe,MAAMA,aAAA,SAAsBC,SAAA,CAAU;EACnD,IACIC,OAAAA,GAAU;AACZ,IAAA,MAAMC,OAAA,GAAUC,mBAAmB,IAAI,CAAA;AACvC,IAAA,MAAMC,QAAA,GAAWF,QAAQE,QAAQ;AACjC,IAAA,MAAMC,MAAA,GAASC,qBAAqBJ,OAAA,EAASK,mBAAA,CAAA;AAC7C;AACA,IAAA,OAAOC,QAAA,CACLN,OAAA,EACAO,gBAAA,EACAJ,MAAA,CAAOK,aAAa,EACpBC,cAAA,CAAeP,QAAA,EAAU,IAAI,CAACQ,IAAI,CAACC,WAAW,IAAI,MAAA,EAAQ,YAAA,CAAA,EAC1D,IAAI,CAACD,IAAI,CAACE,YAAY,KAAK,UAAA,IAAcT,MAAA,CAAOU,MAAM,EACtD;MACEC,eAAA,EAAiBC,mBACfb,QAAA,EACA,IAAI,CAACQ,IAAI,CAACM,KAAK,IAAI,aAAA;AAEvB,KAAA,CAAA;AAEJ,EAAA;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CAnBCC,MAAA,CAAA,CAAA;AAAA;EAqBD,IAAIC,WAAAA,GAAc;AAChB,IAAA,OAAO,IAAI,CAACV,IAAI,CAACW,KAAK,IAAI,EAAC;AAC7B,EAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,+oDAAA,EA0DA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,YAAA;QAAAC,GAAA;QAAAC,EAAA;QAAAP,KAAA;QAAAQ,oBAAA;QAAAC,EAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}