@ember-eui/core 13.0.5 → 14.1.0

package/dist/components/eui-collapsible-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-collapsible-nav.js","sources":["../../src/components/eui-collapsible-nav.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { throttle } from '@ember/runloop';\n\nimport { modifier as modBuilder } from 'ember-modifier';\nimport { and, not, or } from 'ember-truth-helpers';\n\nimport randomId from '../-private/random-id.ts';\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport { isWithinMinBreakpoint } from '../utils/breakpoint.ts';\nimport EuiFlyout from './eui-flyout.gts';\n\nimport type { EuiBreakpointSize } from '../utils/breakpoint.ts';\nimport type { EuiFlyoutSignature } from './eui-flyout';\nimport type { ModifierLike } from '@glint/template';\n\nexport type EuiCollapsibleNavArgs = {\n  id?: string;\n  /**\n   * ReactNode to render as this component's content\n   */\n  children?: Component;\n  /**\n   * Shows the navigation flyout\n   */\n  isOpen?: boolean;\n  /**\n   * Keeps navigation flyout visible and push `<body>` content via padding\n   */\n  isDocked?: boolean;\n  /**\n   * Named breakpoint or pixel value for customizing the minimum window width to enable docking\n   */\n  dockedBreakpoint?: EuiBreakpointSize | number;\n  /**\n   * Keeps the display of toggle button when in docked state\n   */\n  showButtonIfDocked?: boolean;\n\n  as: string;\n\n  size?: EuiFlyoutSignature['Args']['size'];\n\n  side?: 'left' | 'right';\n\n  role?: null | string;\n\n  ownFocus?: boolean;\n\n  outsideClickCloses?: boolean;\n\n  closeButtonPosition?: 'outside' | 'inside';\n\n  paddingSize?: string;\n\n  onClose: EuiFlyoutSignature['Args']['onClose'];\n};\n\nconst triggerHandlersModifier = modBuilder(\n  (\n    element: Element,\n    _pos,\n    { flyoutID, isOpen }: { flyoutID: string; isOpen: boolean }\n  ) => {\n    element.setAttribute('aria-controls', flyoutID);\n    element.setAttribute('aria-expanded', isOpen ? 'true' : '');\n    element.setAttribute('aria-pressed', isOpen ? 'true' : '');\n\n    const fn = (e: Event) => {\n      e.stopImmediatePropagation();\n    };\n\n    element.addEventListener('touchend', fn);\n    element.addEventListener('mouseup', fn, true);\n\n    return () => {\n      element.removeEventListener('touchend', fn);\n      element.removeEventListener('mouseup', fn, true);\n    };\n  }\n);\n\nconst onWindowResizeModifier = modBuilder(\n  (\n    _ele: HTMLElement,\n    _pos,\n    {\n      isDocked = false,\n      functionToCallOnWindowResize\n    }: { isDocked?: boolean; functionToCallOnWindowResize: () => void }\n  ) => {\n    if (isDocked) {\n      window.addEventListener('resize', functionToCallOnWindowResize);\n    }\n\n    return () => {\n      if (isDocked) {\n        window.removeEventListener('resize', functionToCallOnWindowResize);\n      }\n    };\n  }\n);\n\nexport interface EuiCollapsibleNavSignature {\n  Element: EuiFlyoutSignature['Element'];\n  Args: EuiCollapsibleNavArgs;\n  Blocks: {\n    default: [];\n    button: [\n      ModifierLike<{\n        Element: Element;\n      }>\n    ];\n    content: [];\n  };\n}\nexport default class EuiCollapsibleNavComponent extends Component<EuiCollapsibleNavSignature> {\n  @tracked windowIsLargeEnoughToPush = isWithinMinBreakpoint(\n    typeof window === 'undefined' ? -Infinity : window.innerWidth,\n    this.dockedBreakpoint\n  );\n\n  get isDocked() {\n    return this.args.isDocked ?? false;\n  }\n\n  get navIsDocked() {\n    return this.isDocked && this.windowIsLargeEnoughToPush;\n  }\n\n  get dockedBreakpoint() {\n    return this.args.dockedBreakpoint ?? 'l';\n  }\n\n  get showButtonIfDocked() {\n    return this.args.showButtonIfDocked ?? false;\n  }\n\n  get as() {\n    return this.args.as ?? 'nav';\n  }\n\n  get size() {\n    if (this.args.size && typeof this.args.size !== 'string') {\n      return `${this.args.size}px`;\n    }\n\n    return this.args.size ?? '320px';\n  }\n\n  get side() {\n    return this.args.side ?? 'left';\n  }\n\n  get role() {\n    return this.args.role ?? null;\n  }\n\n  get ownFocus() {\n    return this.args.ownFocus ?? true;\n  }\n\n  get outsideClickCloses() {\n    return this.args.outsideClickCloses ?? true;\n  }\n\n  get closeButtonPosition() {\n    return this.args.closeButtonPosition ?? 'outside';\n  }\n\n  get paddingSize() {\n    return this.args.paddingSize ?? 'none';\n  }\n\n  @action\n  functionToCallOnWindowResize() {\n    throttle(() => {\n      if (isWithinMinBreakpoint(window.innerWidth, this.dockedBreakpoint)) {\n        this.windowIsLargeEnoughToPush = true;\n      } else {\n        this.windowIsLargeEnoughToPush = false;\n      }\n    }, 50);\n  }\n\n  <template>\n    <span\n      {{onWindowResizeModifier\n        isDocked=this.isDocked\n        functionToCallOnWindowResize=this.functionToCallOnWindowResize\n      }}\n    ></span>\n    {{#let (argOrDefault @id (randomId)) as |flyoutID|}}\n\n      {{#if (not (and this.navIsDocked (not this.showButtonIfDocked)))}}\n        {{yield\n          (modifier triggerHandlersModifier isOpen=@isOpen flyoutID=flyoutID)\n          to=\"button\"\n        }}\n      {{/if}}\n\n      {{#if (or @isOpen this.navIsDocked)}}\n        <EuiFlyout\n          id={{flyoutID}}\n          class=\"euiCollapsibleNav\"\n          @as={{this.as}}\n          @size={{this.size}}\n          @side={{this.side}}\n          @role={{this.role}}\n          @ownFocus={{this.ownFocus}}\n          @outsideClickCloses={{this.outsideClickCloses}}\n          @closeButtonPosition={{this.closeButtonPosition}}\n          @paddingSize={{this.paddingSize}}\n          @type={{if this.navIsDocked \"push\" \"overlay\"}}\n          @hideCloseButton={{this.navIsDocked}}\n          @pushMinBreakpoint={{this.dockedBreakpoint}}\n          @onClose={{@onClose}}\n          ...attributes\n        >\n          {{yield to=\"content\"}}\n        </EuiFlyout>\n      {{/if}}\n    {{/let}}\n  </template>\n}\n"],"names":["triggerHandlersModifier","modBuilder","element","_pos","flyoutID","isOpen","setAttribute","fn","e","stopImmediatePropagation","addEventListener","removeEventListener","onWindowResizeModifier","_ele","isDocked","functionToCallOnWindowResize","window","EuiCollapsibleNavComponent","Component","g","prototype","tracked","isWithinMinBreakpoint","Infinity","innerWidth","dockedBreakpoint","i","void 0","args","navIsDocked","windowIsLargeEnoughToPush","showButtonIfDocked","as","size","side","role","ownFocus","outsideClickCloses","closeButtonPosition","paddingSize","throttle","n","action","setComponentTemplate","precompileTemplate","strictMode","scope","argOrDefault","randomId","not","and","or","EuiFlyout"],"mappings":"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"}
+{"version":3,"file":"eui-collapsible-nav.js","sources":["../../src/components/eui-collapsible-nav.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { throttle } from '@ember/runloop';\n\nimport { modifier as modBuilder } from 'ember-modifier';\nimport { and, not, or } from 'ember-truth-helpers';\n\nimport randomId from '../-private/random-id.ts';\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport { isWithinMinBreakpoint } from '../utils/breakpoint.ts';\nimport EuiFlyout from './eui-flyout.gts';\n\nimport type { EuiBreakpointSize } from '../utils/breakpoint.ts';\nimport type { EuiFlyoutSignature } from './eui-flyout';\nimport type { ModifierLike } from '@glint/template';\n\nexport type EuiCollapsibleNavArgs = {\n  /** Id of the nav flyout, which the button controls. Defaults to a random id. */\n  id?: string;\n  /**\n   * @deprecated Has no effect, use the `<:content>` block.\n   */\n  children?: Component;\n  /**\n   * Shows the navigation flyout. Toggle it from the `<:button>` block's\n   * button and set it to `false` in `@onClose`.\n   */\n  isOpen?: boolean;\n  /**\n   * Keeps navigation flyout visible and push `<body>` content via padding,\n   * on windows at least `@dockedBreakpoint` wide. Defaults to `false`.\n   */\n  isDocked?: boolean;\n  /**\n   * Named breakpoint (`'xs'`, `'s'`, `'m'`, `'l'`, `'xl'`) or pixel value:\n   * the minimum window width for docking. Defaults to `'l'`.\n   */\n  dockedBreakpoint?: EuiBreakpointSize | number;\n  /**\n   * Keeps the display of toggle button when in docked state.\n   * Defaults to `false`.\n   */\n  showButtonIfDocked?: boolean;\n  /** Tag of the flyout. Defaults to `'nav'`. */\n  as: string;\n  /** Width of the nav, a number in px or any CSS width. Defaults to `320px`. */\n  size?: EuiFlyoutSignature['Args']['size'];\n  /** Side of the window: `'left'` or `'right'`. Defaults to `'left'`. */\n  side?: 'left' | 'right';\n  /** `role` of the flyout. Defaults to none (the `<nav>` is a landmark). */\n  role?: null | string;\n  /** Traps focus in the open (not docked) nav. Defaults to `true`. */\n  ownFocus?: boolean;\n  /** Clicking outside the open nav calls `@onClose`. Defaults to `true`. */\n  outsideClickCloses?: boolean;\n  /**\n   * Close button `'outside'` or `'inside'` the flyout (hidden while docked).\n   * Defaults to `'outside'`.\n   */\n  closeButtonPosition?: 'outside' | 'inside';\n  /** Padding inside the nav, any `EuiFlyout` padding size. Defaults to `'none'`. */\n  paddingSize?: string;\n  /** Called to close the nav (close button, Escape, outside click). */\n  onClose: EuiFlyoutSignature['Args']['onClose'];\n};\n\nconst triggerHandlersModifier = modBuilder(\n  (\n    element: Element,\n    _pos,\n    { flyoutID, isOpen }: { flyoutID: string; isOpen: boolean }\n  ) => {\n    element.setAttribute('aria-controls', flyoutID);\n    element.setAttribute('aria-expanded', isOpen ? 'true' : 'false');\n    element.setAttribute('aria-pressed', isOpen ? 'true' : 'false');\n\n    const fn = (e: Event) => {\n      e.stopImmediatePropagation();\n    };\n\n    element.addEventListener('touchend', fn);\n    element.addEventListener('mouseup', fn, true);\n\n    return () => {\n      element.removeEventListener('touchend', fn);\n      element.removeEventListener('mouseup', fn, true);\n    };\n  }\n);\n\nconst onWindowResizeModifier = modBuilder(\n  (\n    _ele: HTMLElement,\n    _pos,\n    {\n      isDocked = false,\n      functionToCallOnWindowResize\n    }: { isDocked?: boolean; functionToCallOnWindowResize: () => void }\n  ) => {\n    if (isDocked) {\n      window.addEventListener('resize', functionToCallOnWindowResize);\n    }\n\n    return () => {\n      if (isDocked) {\n        window.removeEventListener('resize', functionToCallOnWindowResize);\n      }\n    };\n  }\n);\n\nexport interface EuiCollapsibleNavSignature {\n  Element: EuiFlyoutSignature['Element'];\n  Args: EuiCollapsibleNavArgs;\n  Blocks: {\n    /** Unused, use `<:button>` and `<:content>`. */\n    default: [];\n    /**\n     * The toggle button, usually an `EuiHeaderSectionItemButton`. Apply the\n     * yielded modifier to it for the `aria-controls` / `aria-expanded`\n     * attributes: `<:button as |navButton|><EuiButton {{navButton}} …>`.\n     * Hidden while docked unless `@showButtonIfDocked`.\n     */\n    button: [\n      ModifierLike<{\n        Element: Element;\n      }>\n    ];\n    /** The navigation, e.g. `EuiCollapsibleNavGroup`s and `EuiListGroup`s. */\n    content: [];\n  };\n}\nexport default class EuiCollapsibleNavComponent extends Component<EuiCollapsibleNavSignature> {\n  @tracked windowIsLargeEnoughToPush = isWithinMinBreakpoint(\n    typeof window === 'undefined' ? -Infinity : window.innerWidth,\n    this.dockedBreakpoint\n  );\n\n  get isDocked() {\n    return this.args.isDocked ?? false;\n  }\n\n  get navIsDocked() {\n    return this.isDocked && this.windowIsLargeEnoughToPush;\n  }\n\n  get dockedBreakpoint() {\n    return this.args.dockedBreakpoint ?? 'l';\n  }\n\n  get showButtonIfDocked() {\n    return this.args.showButtonIfDocked ?? false;\n  }\n\n  get as() {\n    return this.args.as ?? 'nav';\n  }\n\n  get size() {\n    if (this.args.size && typeof this.args.size !== 'string') {\n      return `${this.args.size}px`;\n    }\n\n    return this.args.size ?? '320px';\n  }\n\n  get side() {\n    return this.args.side ?? 'left';\n  }\n\n  get role() {\n    return this.args.role ?? null;\n  }\n\n  get ownFocus() {\n    return this.args.ownFocus ?? true;\n  }\n\n  get outsideClickCloses() {\n    return this.args.outsideClickCloses ?? true;\n  }\n\n  get closeButtonPosition() {\n    return this.args.closeButtonPosition ?? 'outside';\n  }\n\n  get paddingSize() {\n    return this.args.paddingSize ?? 'none';\n  }\n\n  @action\n  functionToCallOnWindowResize() {\n    throttle(() => {\n      if (isWithinMinBreakpoint(window.innerWidth, this.dockedBreakpoint)) {\n        this.windowIsLargeEnoughToPush = true;\n      } else {\n        this.windowIsLargeEnoughToPush = false;\n      }\n    }, 50);\n  }\n\n  <template>\n    <span\n      {{onWindowResizeModifier\n        isDocked=this.isDocked\n        functionToCallOnWindowResize=this.functionToCallOnWindowResize\n      }}\n    ></span>\n    {{#let (argOrDefault @id (randomId)) as |flyoutID|}}\n\n      {{#if (not (and this.navIsDocked (not this.showButtonIfDocked)))}}\n        {{yield\n          (modifier triggerHandlersModifier isOpen=@isOpen flyoutID=flyoutID)\n          to=\"button\"\n        }}\n      {{/if}}\n\n      {{#if (or @isOpen this.navIsDocked)}}\n        <EuiFlyout\n          id={{flyoutID}}\n          class=\"euiCollapsibleNav\"\n          @as={{this.as}}\n          @size={{this.size}}\n          @side={{this.side}}\n          @role={{this.role}}\n          @ownFocus={{this.ownFocus}}\n          @outsideClickCloses={{this.outsideClickCloses}}\n          @closeButtonPosition={{this.closeButtonPosition}}\n          @paddingSize={{this.paddingSize}}\n          @type={{if this.navIsDocked \"push\" \"overlay\"}}\n          @hideCloseButton={{this.navIsDocked}}\n          @pushMinBreakpoint={{this.dockedBreakpoint}}\n          @onClose={{@onClose}}\n          ...attributes\n        >\n          {{yield to=\"content\"}}\n        </EuiFlyout>\n      {{/if}}\n    {{/let}}\n  </template>\n}\n"],"names":["triggerHandlersModifier","modBuilder","element","_pos","flyoutID","isOpen","setAttribute","fn","e","stopImmediatePropagation","addEventListener","removeEventListener","onWindowResizeModifier","_ele","isDocked","functionToCallOnWindowResize","window","EuiCollapsibleNavComponent","Component","g","prototype","tracked","isWithinMinBreakpoint","Infinity","innerWidth","dockedBreakpoint","i","args","navIsDocked","windowIsLargeEnoughToPush","showButtonIfDocked","as","size","side","role","ownFocus","outsideClickCloses","closeButtonPosition","paddingSize","throttle","n","action","setComponentTemplate","precompileTemplate","strictMode","scope","argOrDefault","randomId","not","and","or","EuiFlyout"],"mappings":"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"}

package/dist/components/eui-color-palette-display.js

@@ -0,0 +1,39 @@
+import { hash } from '@ember/helper';
+import { getFixedLinearGradient, getLinearGradient } from '../-private/color.js';
+import cssStyle from '../-private/css-style.js';
+import EuiScreenReaderOnly from './eui-screen-reader-only.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+
+const SIZES = {
+  xs: 'euiColorPaletteDisplay--sizeExtraSmall',
+  s: 'euiColorPaletteDisplay--sizeSmall',
+  m: 'euiColorPaletteDisplay--sizeMedium'
+};
+/**
+ * Shows a color palette as a bar: `'fixed'` blocks of solid color or a
+ * `'gradient'`, e.g. to preview the palette of a chart.
+ */
+
+function classes(size = 's') {
+  return `euiColorPaletteDisplay ${SIZES[size]}`;
+}
+function isGradient(type) {
+  return type === 'gradient';
+}
+const EuiColorPaletteDisplay = setComponentTemplate(precompileTemplate("{{#if (isGradient @type)}}\n  {{#if @title}}\n    <EuiScreenReaderOnly>{{@title}}</EuiScreenReaderOnly>\n  {{/if}}\n  <span class={{classes @size}} aria-hidden=\"true\" style={{cssStyle (hash background=(getLinearGradient @palette))}} ...attributes></span>\n{{else}}\n  <span class={{classes @size}} ...attributes>\n    {{#if @title}}\n      <EuiScreenReaderOnly>{{@title}}</EuiScreenReaderOnly>\n    {{/if}}\n    <span aria-hidden=\"true\" class=\"euiColorPaletteDisplayFixed__bleedArea\">\n      {{#each (getFixedLinearGradient @palette) as |item|}}\n        <span style={{cssStyle (hash backgroundColor=item.color width=item.width)}}></span>\n      {{/each}}\n    </span>\n  </span>\n{{/if}}", {
+  strictMode: true,
+  scope: () => ({
+    isGradient,
+    EuiScreenReaderOnly,
+    classes,
+    cssStyle,
+    hash,
+    getLinearGradient,
+    getFixedLinearGradient
+  })
+}), templateOnly());
+
+export { EuiColorPaletteDisplay as default };
+//# sourceMappingURL=eui-color-palette-display.js.map

package/dist/components/eui-color-palette-display.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-color-palette-display.js","sources":["../../src/components/eui-color-palette-display.gts"],"sourcesContent":["import { hash } from '@ember/helper';\n\nimport { getFixedLinearGradient, getLinearGradient } from '../-private/color.ts';\nimport cssStyle from '../-private/css-style.ts';\nimport EuiScreenReaderOnly from './eui-screen-reader-only.gts';\n\nimport type { ColorStop } from '../-private/color.ts';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nconst SIZES = {\n  xs: 'euiColorPaletteDisplay--sizeExtraSmall',\n  s: 'euiColorPaletteDisplay--sizeSmall',\n  m: 'euiColorPaletteDisplay--sizeMedium'\n};\n\n/**\n * Shows a color palette as a bar: `'fixed'` blocks of solid color or a\n * `'gradient'`, e.g. to preview the palette of a chart.\n */\nexport interface EuiColorPaletteDisplaySignature {\n  Element: HTMLSpanElement;\n  Args: {\n    /**\n     * The colors: an array of colors (evenly spread), or of\n     * `{ stop, color }` color stops.\n     */\n    palette: (string | ColorStop)[];\n    /** `'fixed'` (solid blocks) or `'gradient'`. Defaults to `'fixed'`. */\n    type?: 'fixed' | 'gradient';\n    /** Height of the bar: `'xs'`, `'s'` or `'m'`. Defaults to `'s'`. */\n    size?: 'xs' | 's' | 'm';\n    /** Name of the palette, read by screen readers. */\n    title?: string;\n  };\n}\n\nfunction classes(size: keyof typeof SIZES = 's'): string {\n  return `euiColorPaletteDisplay ${SIZES[size]}`;\n}\n\nfunction isGradient(type?: string): boolean {\n  return type === 'gradient';\n}\n\nconst EuiColorPaletteDisplay: TemplateOnlyComponent<EuiColorPaletteDisplaySignature> =\n  <template>\n    {{#if (isGradient @type)}}\n      {{#if @title}}\n        <EuiScreenReaderOnly>{{@title}}</EuiScreenReaderOnly>\n      {{/if}}\n      <span\n        class={{classes @size}}\n        aria-hidden=\"true\"\n        style={{cssStyle (hash background=(getLinearGradient @palette))}}\n        ...attributes\n      ></span>\n    {{else}}\n      <span class={{classes @size}} ...attributes>\n        {{#if @title}}\n          <EuiScreenReaderOnly>{{@title}}</EuiScreenReaderOnly>\n        {{/if}}\n        <span aria-hidden=\"true\" class=\"euiColorPaletteDisplayFixed__bleedArea\">\n          {{#each (getFixedLinearGradient @palette) as |item|}}\n            <span\n              style={{cssStyle\n                (hash backgroundColor=item.color width=item.width)\n              }}\n            ></span>\n          {{/each}}\n        </span>\n      </span>\n    {{/if}}\n  </template>;\n\nexport default EuiColorPaletteDisplay;\n"],"names":["SIZES","xs","s","m","classes","size","isGradient","type","EuiColorPaletteDisplay","setComponentTemplate","precompileTemplate","strictMode","scope","EuiScreenReaderOnly","cssStyle","hash","getLinearGradient","getFixedLinearGradient","templateOnly"],"mappings":";;;;;;;;AASA,MAAMA,KAAA,GAAQ;AACZC,EAAAA,EAAA,EAAI,wCAAA;AACJC,EAAAA,CAAA,EAAG,mCAAA;AACHC,EAAAA,CAAA,EAAG;AACL,CAAA;AAEA;;;AAGC;;AAkBD,SAASC,OAAAA,CAAQC,IAAmB,GAAQ,GAAG,EAAS;AACtD,EAAA,OAAO,CAAA,uBAAA,EAA0BL,KAAK,CAACK,KAAK,CAAA,CAAE;AAChD;AAEA,SAASC,UAAAA,CAAWC,IAAa,EAAU;EACzC,OAAOA,IAAA,KAAS,UAAA;AAClB;AAEA,MAAMC,sBAA8C,GAAAC,oBAAA,CAClDC,kBAAA,CAAA,wrBAAA,EA2BA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAN,UAAA;IAAAO,mBAAA;IAAAT,OAAA;IAAAU,QAAA;IAAAC,IAAA;IAAAC,iBAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}

package/dist/components/eui-color-palette-picker.js

@@ -0,0 +1,48 @@
+import Component from '@glimmer/component';
+import EuiColorPaletteDisplay from './eui-color-palette-display.js';
+import EuiSuperSelect from './eui-super-select.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+/**
+ * A select of color palettes (e.g. for charts), showing each palette as a
+ * bar of colors. Built on `EuiSuperSelect`.
+ */
+class EuiColorPalettePicker extends Component {
+  get options() {
+    return this.args.palettes.map(palette => ({
+      value: String(palette.value),
+      inputDisplay: palette.title,
+      palette
+    }));
+  }
+  showTitleOnly = palette => palette.type === 'text' || this.args.selectionDisplay === 'title';
+  static {
+    setComponentTemplate(precompileTemplate("<EuiSuperSelect @options={{this.options}} @valueOfSelected={{@valueOfSelected}} @onChange={{@onChange}} @hasDividers={{true}} @compressed={{@compressed}} @fullWidth={{@fullWidth}} @isInvalid={{@isInvalid}} @isLoading={{@isLoading}} ...attributes>\n  <:inputDisplay as |option|>\n    {{#let (paletteOf option) as |palette|}}\n      {{#if (this.showTitleOnly palette)}}\n        {{palette.title}}\n      {{else}}\n        <EuiColorPaletteDisplay @type={{fixedOrGradient palette.type}} @palette={{paletteColors palette}} @title={{palette.title}} />\n      {{/if}}\n    {{/let}}\n  </:inputDisplay>\n  <:dropdownDisplay as |option|>\n    {{#let (paletteOf option) as |palette|}}\n      <div class=\"euiColorPalettePicker__item\">\n        {{#if (isText palette.type)}}\n          {{palette.title}}\n        {{else}}\n          {{#if palette.title}}\n            {{!-- the display's screen reader title names the option --}}\n            <div aria-hidden=\"true\" class=\"euiColorPalettePicker__itemTitle\">{{palette.title}}</div>\n          {{/if}}\n          <EuiColorPaletteDisplay @type={{fixedOrGradient palette.type}} @palette={{paletteColors palette}} @title={{palette.title}} />\n        {{/if}}\n      </div>\n    {{/let}}\n  </:dropdownDisplay>\n</EuiSuperSelect>", {
+      strictMode: true,
+      scope: () => ({
+        EuiSuperSelect,
+        paletteOf,
+        EuiColorPaletteDisplay,
+        fixedOrGradient,
+        paletteColors,
+        isText
+      })
+    }), this);
+  }
+}
+function paletteOf(option) {
+  return option.palette;
+}
+function paletteColors(palette) {
+  return palette.palette ?? [];
+}
+function fixedOrGradient(type) {
+  return type === 'gradient' ? 'gradient' : 'fixed';
+}
+function isText(type) {
+  return type === 'text';
+}
+
+export { EuiColorPalettePicker as default };
+//# sourceMappingURL=eui-color-palette-picker.js.map

package/dist/components/eui-color-palette-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-color-palette-picker.js","sources":["../../src/components/eui-color-palette-picker.gts"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport EuiColorPaletteDisplay from './eui-color-palette-display.gts';\nimport EuiSuperSelect from './eui-super-select.gts';\n\nimport type { ColorStop } from '../-private/color.ts';\nimport type { EuiSuperSelectOption } from './eui-super-select';\n\nexport interface EuiColorPalettePickerPalette {\n  /** The value passed to `@onChange` when chosen. */\n  value: string;\n  /** Name of the palette. */\n  title?: string;\n  /**\n   * `'fixed'` (solid blocks), `'gradient'`, or `'text'` for an option\n   * that is only its title (e.g. \"Custom\").\n   */\n  type: 'fixed' | 'gradient' | 'text';\n  /** The colors or `{ stop, color }` stops (not for `'text'`). */\n  palette?: (string | ColorStop)[];\n}\n\n/**\n * A select of color palettes (e.g. for charts), showing each palette as a\n * bar of colors. Built on `EuiSuperSelect`.\n */\nexport interface EuiColorPalettePickerSignature {\n  Element: HTMLButtonElement;\n  Args: {\n    /** The palettes to choose from. */\n    palettes: EuiColorPalettePickerPalette[];\n    /** Value of the selected palette. */\n    valueOfSelected?: string;\n    /** Called with the chosen palette's value. */\n    onChange: (value: string) => void;\n    /**\n     * Show the selected palette as its `'palette'` (colors) or its\n     * `'title'`. Defaults to `'palette'`.\n     */\n    selectionDisplay?: 'palette' | 'title';\n    /** Smaller, for dense forms. */\n    compressed?: boolean;\n    /** Takes the container's full width. */\n    fullWidth?: boolean;\n    /** Invalid look. */\n    isInvalid?: boolean;\n    /** Shows a spinner. */\n    isLoading?: boolean;\n  };\n}\n\ntype PaletteOption = EuiSuperSelectOption & { palette: EuiColorPalettePickerPalette };\n\nexport default class EuiColorPalettePicker extends Component<EuiColorPalettePickerSignature> {\n  get options(): PaletteOption[] {\n    return this.args.palettes.map((palette) => ({\n      value: String(palette.value),\n      inputDisplay: palette.title,\n      palette\n    }));\n  }\n\n  showTitleOnly = (palette: EuiColorPalettePickerPalette): boolean =>\n    palette.type === 'text' || this.args.selectionDisplay === 'title';\n\n  <template>\n    <EuiSuperSelect\n      @options={{this.options}}\n      @valueOfSelected={{@valueOfSelected}}\n      @onChange={{@onChange}}\n      @hasDividers={{true}}\n      @compressed={{@compressed}}\n      @fullWidth={{@fullWidth}}\n      @isInvalid={{@isInvalid}}\n      @isLoading={{@isLoading}}\n      ...attributes\n    >\n      <:inputDisplay as |option|>\n        {{#let (paletteOf option) as |palette|}}\n          {{#if (this.showTitleOnly palette)}}\n            {{palette.title}}\n          {{else}}\n            <EuiColorPaletteDisplay\n              @type={{fixedOrGradient palette.type}}\n              @palette={{paletteColors palette}}\n              @title={{palette.title}}\n            />\n          {{/if}}\n        {{/let}}\n      </:inputDisplay>\n      <:dropdownDisplay as |option|>\n        {{#let (paletteOf option) as |palette|}}\n          <div class=\"euiColorPalettePicker__item\">\n            {{#if (isText palette.type)}}\n              {{palette.title}}\n            {{else}}\n              {{#if palette.title}}\n                {{! the display's screen reader title names the option }}\n                <div aria-hidden=\"true\" class=\"euiColorPalettePicker__itemTitle\">{{palette.title}}</div>\n              {{/if}}\n              <EuiColorPaletteDisplay\n                @type={{fixedOrGradient palette.type}}\n                @palette={{paletteColors palette}}\n                @title={{palette.title}}\n              />\n            {{/if}}\n          </div>\n        {{/let}}\n      </:dropdownDisplay>\n    </EuiSuperSelect>\n  </template>\n}\n\nfunction paletteOf(option: EuiSuperSelectOption<unknown>): EuiColorPalettePickerPalette {\n  return (option as PaletteOption).palette;\n}\n\nfunction paletteColors(palette: EuiColorPalettePickerPalette): (string | ColorStop)[] {\n  return palette.palette ?? [];\n}\n\nfunction fixedOrGradient(type: string): 'fixed' | 'gradient' {\n  return type === 'gradient' ? 'gradient' : 'fixed';\n}\n\nfunction isText(type: string): boolean {\n  return type === 'text';\n}\n"],"names":["EuiColorPalettePicker","Component","options","args","palettes","map","palette","value","String","inputDisplay","title","showTitleOnly","type","selectionDisplay","setComponentTemplate","precompileTemplate","strictMode","scope","EuiSuperSelect","paletteOf","EuiColorPaletteDisplay","fixedOrGradient","paletteColors","isText","option"],"mappings":";;;;;;AAsBA;;;AAGC;AA4Bc,MAAMA,8BAA8BC,SAAA,CAAU;EAC3D,IAAIC,UAA2B;IAC7B,OAAO,IAAI,CAACC,IAAI,CAACC,QAAQ,CAACC,GAAG,CAAEC,OAAA,KAAa;AAC1CC,MAAAA,KAAA,EAAOC,MAAA,CAAOF,QAAQC,KAAK,CAAA;MAC3BE,YAAA,EAAcH,QAAQI,KAAK;AAC3BJ,MAAAA;AACF,KAAC,CAAA,CAAA;AACH,EAAA;AAEAK,EAAAA,aAAA,GAAiBL,OAAS,IACxBA,OAAA,CAAQM,IAAI,KAAK,MAAA,IAAU,IAAI,CAACT,IAAI,CAACU,gBAAgB,KAAK,OAAA;AAE5D,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,svCAAA,EA6CA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,cAAA;QAAAC,SAAA;QAAAC,sBAAA;QAAAC,eAAA;QAAAC,aAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;AAEA,SAASJ,SAAAA,CAAUK,MAAqC,EAAG;EACzD,OAAQA,MAAA,CAAyBlB,OAAO;AAC1C;AAEA,SAASgB,aAAAA,CAAchB,OAAqC,EAAa;AACvE,EAAA,OAAOA,OAAA,CAAQA,OAAO,IAAI,EAAE;AAC9B;AAEA,SAASe,eAAAA,CAAgBT,IAAY,EAAa;AAChD,EAAA,OAAOA,IAAA,KAAS,aAAa,UAAA,GAAa,OAAA;AAC5C;AAEA,SAASW,MAAAA,CAAOX,IAAY,EAAU;EACpC,OAAOA,IAAA,KAAS,MAAA;AAClB;;"}

package/dist/components/eui-color-picker-swatch.js

@@ -0,0 +1,35 @@
+import Component from '@glimmer/component';
+import { hash } from '@ember/helper';
+import { service } from '@ember/service';
+import { getChromaColor } from '../-private/color.js';
+import cssStyle from '../-private/css-style.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i } from 'decorator-transforms/runtime-esm';
+
+class EuiColorPickerSwatch extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  get background() {
+    return getChromaColor(this.args.color, true)?.css() ?? 'transparent';
+  }
+  get label() {
+    return this.euiI18n.lookupToken('euiColorPickerSwatch.ariaLabel', 'Select {color} as the color', {
+      color: this.args.color
+    });
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<button type=\"button\" class=\"euiColorPickerSwatch\" aria-label={{this.label}} style={{cssStyle (hash background=this.background)}} ...attributes></button>", {
+      strictMode: true,
+      scope: () => ({
+        cssStyle,
+        hash
+      })
+    }), this);
+  }
+}
+
+export { EuiColorPickerSwatch as default };
+//# sourceMappingURL=eui-color-picker-swatch.js.map

package/dist/components/eui-color-picker-swatch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-color-picker-swatch.js","sources":["../../src/components/eui-color-picker-swatch.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { hash } from '@ember/helper';\nimport { service } from '@ember/service';\n\nimport { getChromaColor } from '../-private/color.ts';\nimport cssStyle from '../-private/css-style.ts';\n\nimport type EuiI18n from '../services/eui-i18n';\n\n/**\n * A button showing a color, to pick it; the swatches of `EuiColorPicker`.\n * Add `{{on \"click\" …}}` to handle the choice.\n */\nexport interface EuiColorPickerSwatchSignature {\n  Element: HTMLButtonElement;\n  Args: {\n    /** The color: a hex string or `'r, g, b(, a)'`. */\n    color?: string;\n  };\n}\n\nexport default class EuiColorPickerSwatch extends Component<EuiColorPickerSwatchSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  get background(): string {\n    return getChromaColor(this.args.color, true)?.css() ?? 'transparent';\n  }\n\n  get label(): string {\n    return this.euiI18n.lookupToken('euiColorPickerSwatch.ariaLabel', 'Select {color} as the color', {\n      color: this.args.color\n    });\n  }\n\n  <template>\n    <button\n      type=\"button\"\n      class=\"euiColorPickerSwatch\"\n      aria-label={{this.label}}\n      style={{cssStyle (hash background=this.background)}}\n      ...attributes\n    ></button>\n  </template>\n}\n"],"names":["EuiColorPickerSwatch","Component","g","prototype","service","i","background","getChromaColor","args","color","css","label","euiI18n","lookupToken","setComponentTemplate","precompileTemplate","strictMode","scope","cssStyle","hash"],"mappings":";;;;;;;;;AAqBe,MAAMA,6BAA6BC,SAAA,CAAU;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CACzDC,OAAA,CAAA,CAAA;AAAA;EAAA,QAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,SAAA,CAAA,EAAA,MAAA;EAED,IAAIC,UAAAA,GAAqB;AACvB,IAAA,OAAOC,cAAA,CAAe,IAAI,CAACC,IAAI,CAACC,KAAK,EAAE,OAAOC,GAAA,EAAA,IAAS,aAAA;AACzD,EAAA;EAEA,IAAIC,KAAAA,GAAgB;IAClB,OAAO,IAAI,CAACC,OAAO,CAACC,WAAW,CAAC,kCAAkC,6BAAA,EAA+B;AAC/FJ,MAAAA,KAAA,EAAO,IAAI,CAACD,IAAI,CAACC;AACnB,KAAA,CAAA;AACF,EAAA;AAEA,EAAA;IAAAK,oBAAA,CAAAC,kBAAA,CAAA,+JAAA,EAQA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,QAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

package/dist/components/eui-color-picker.js

@@ -0,0 +1,371 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { hash, fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { next } from '@ember/runloop';
+import { service } from '@ember/service';
+import chroma from 'chroma-js';
+import { modifier } from 'ember-modifier';
+import { getChromaColor, HSV_FALLBACK, parseColor, HEX_FALLBACK, VISUALIZATION_COLORS, RGB_FALLBACK, RGB_JOIN } from '../-private/color.js';
+import cssStyle from '../-private/css-style.js';
+import { randomId } from '../-private/random-id.js';
+import EuiColorPickerSwatch from './eui-color-picker-swatch.js';
+import EuiFieldText from './eui-field-text.js';
+import EuiFormRow from './eui-form-row.js';
+import EuiHue from './eui-hue.js';
+import EuiPopoverComponent from './eui-popover.js';
+import EuiRangeComponent from './eui-range.js';
+import EuiSaturation from './eui-saturation.js';
+import EuiSpacer from './eui-spacer.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
+
+function hsvOf(color, fallbackHue = 0) {
+  if (!color) return HSV_FALLBACK;
+  const [h, s, v] = color.hsv();
+  // black, white and grays have no hue
+  return [isNaN(h) ? fallbackHue : h, s, v];
+}
+class EuiColorPicker extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  static {
+    g(this.prototype, "isColorSelectorShown", [tracked], function () {
+      return false;
+    });
+  }
+  #isColorSelectorShown = (i(this, "isColorSelectorShown"), void 0);
+  static {
+    g(this.prototype, "colorAsHsv", [tracked]);
+  }
+  #colorAsHsv = (i(this, "colorAsHsv"), void 0);
+  static {
+    g(this.prototype, "alphaInput", [tracked]);
+  }
+  #alphaInput = (i(this, "alphaInput"), void 0);
+  ownId = `euiColorPicker_${randomId()}`;
+  prevColor;
+  input;
+  saturation;
+  firstSwatch;
+  constructor(owner, args) {
+    super(owner, args);
+    const color = getChromaColor(args.color, args.showAlpha);
+    this.prevColor = color ? color.rgba().join() : null;
+    this.colorAsHsv = color ? hsvOf(color) : HSV_FALLBACK;
+  }
+  get id() {
+    return this.args.id ?? this.ownId;
+  }
+  get mode() {
+    return this.args.mode ?? 'default';
+  }
+  get secondaryInputDisplay() {
+    return this.args.secondaryInputDisplay ?? 'none';
+  }
+  get chromaColor() {
+    return getChromaColor(this.args.color, this.args.showAlpha);
+  }
+  get preferredFormat() {
+    if (this.args.format) return this.args.format;
+    const parsed = parseColor(this.args.color);
+    return parsed !== null && typeof parsed === 'object' ? 'rgba' : 'hex';
+  }
+  get alphaChannel() {
+    return this.chromaColor ? this.chromaColor.alpha() : 1;
+  }
+  get alphaRangeValue() {
+    return Number(this.alphaInput ?? (this.alphaChannel * 100).toFixed());
+  }
+  /** The color as HSV; the hue is kept for colors without one. */
+  get usableHsv() {
+    const color = this.chromaColor;
+    if (color && color.rgba().join() !== this.prevColor) {
+      return hsvOf(color, this.colorAsHsv[0]);
+    }
+    return this.colorAsHsv;
+  }
+  get hex() {
+    return this.chromaColor?.hex();
+  }
+  get inputValue() {
+    return this.args.color ? this.args.color.toUpperCase() : HEX_FALLBACK;
+  }
+  get placeholder() {
+    if (this.args.color) return undefined;
+    return this.args.placeholder ?? this.euiI18n.lookupToken('euiColorPicker.transparent', 'Transparent');
+  }
+  get showPicker() {
+    return this.mode !== 'swatch' && this.mode !== 'secondaryInput';
+  }
+  get showSwatches() {
+    return this.mode !== 'picker' && this.mode !== 'secondaryInput';
+  }
+  get swatches() {
+    return this.args.swatches ?? VISUALIZATION_COLORS;
+  }
+  get canClear() {
+    return Boolean(this.args.isClearable && this.args.color && !this.args.readOnly && !this.args.disabled);
+  }
+  get panelClasses() {
+    return ['euiColorPicker__popoverPanel', this.mode === 'picker' && this.secondaryInputDisplay !== 'bottom' && 'euiColorPicker__popoverPanel--pickerOnly'].filter(Boolean).join(' ');
+  }
+  get labels() {
+    const t = (token, text) => this.euiI18n.lookupToken(`euiColorPicker.${token}`, text);
+    return {
+      popover: t('popoverLabel', 'Color selection dialog'),
+      color: t('colorLabel', 'Color value'),
+      error: t('colorErrorMessage', 'Invalid color value'),
+      alpha: t('alphaLabel', 'Alpha channel (opacity) value'),
+      open: t('openLabel', 'Press the escape key to close the popover'),
+      closed: t('closeLabel', 'Press the down key to open a popover containing color options')
+    };
+  }
+  output(text) {
+    const color = getChromaColor(text, true);
+    if (!color) return {
+      rgba: RGB_FALLBACK,
+      hex: HEX_FALLBACK,
+      isValid: false
+    };
+    // without @showAlpha a transparent color is returned but invalid
+    return {
+      rgba: color.rgba(),
+      hex: color.hex(),
+      isValid: this.args.showAlpha ? true : color.alpha() === 1
+    };
+  }
+  change(text) {
+    const output = this.output(text);
+    if (output.isValid) this.prevColor = output.rgba.join();
+    this.args.onChange(text, output);
+  }
+  updateColorAsHsv(hsv) {
+    this.colorAsHsv = [isNaN(hsv[0]) ? this.usableHsv[0] : hsv[0], hsv[1], hsv[2]];
+  }
+  updateWithHsv(hsv) {
+    const color = chroma.hsv(...hsv).alpha(this.alphaChannel);
+    const text = this.preferredFormat === 'rgba' ? (this.alphaChannel < 1 ? color.rgba() : color.rgb()).join(RGB_JOIN) : color.hex();
+    this.change(text);
+    this.updateColorAsHsv(hsv);
+  }
+  showColorSelector() {
+    if (this.isColorSelectorShown || this.args.readOnly) return;
+    this.args.onFocus?.();
+    this.isColorSelectorShown = true;
+  }
+  static {
+    n(this.prototype, "showColorSelector", [action]);
+  }
+  closeColorSelector() {
+    this.args.onBlur?.();
+    this.isColorSelectorShown = false;
+  }
+  static {
+    n(this.prototype, "closeColorSelector", [action]);
+  }
+  toggle() {
+    if (this.isColorSelectorShown) this.closeColorSelector();else this.showColorSelector();
+  }
+  /** Closes the popover and returns to the field, to keep adjusting. */
+  static {
+    n(this.prototype, "toggle", [action]);
+  }
+  finalSelection() {
+    this.input?.focus();
+    next(this, this.closeColorSelector);
+  }
+  static {
+    n(this.prototype, "finalSelection", [action]);
+  }
+  onInputClick() {
+    this.showColorSelector();
+  }
+  static {
+    n(this.prototype, "onInputClick", [action]);
+  }
+  onInputKeyDown(event) {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      this.toggle();
+    }
+  }
+  static {
+    n(this.prototype, "onInputKeyDown", [action]);
+  }
+  onInputBlur() {
+    // closing the popover calls onBlur already
+    if (!this.isColorSelectorShown) this.args.onBlur?.();
+  }
+  /** Arrow down opens the popover, then moves into it. */
+  static {
+    n(this.prototype, "onInputBlur", [action]);
+  }
+  onLayoutKeyDown(event) {
+    if (event.key !== 'ArrowDown') return;
+    event.preventDefault();
+    if (!this.isColorSelectorShown) {
+      this.showColorSelector();
+      return;
+    }
+    (this.mode !== 'swatch' ? this.saturation : this.firstSwatch)?.focus();
+  }
+  /** Enter in the picker confirms the color. */
+  static {
+    n(this.prototype, "onLayoutKeyDown", [action]);
+  }
+  onPickerKeyDown(event) {
+    if (event.key !== 'Enter') return;
+    if (this.isColorSelectorShown) this.finalSelection();else this.showColorSelector();
+  }
+  static {
+    n(this.prototype, "onPickerKeyDown", [action]);
+  }
+  onColorInput(event) {
+    const text = event.target.value;
+    const color = getChromaColor(text, this.args.showAlpha);
+    this.change(text);
+    if (color) this.updateColorAsHsv(hsvOf(color, this.usableHsv[0]));
+  }
+  static {
+    n(this.prototype, "onColorInput", [action]);
+  }
+  clear() {
+    this.change('');
+    if (this.secondaryInputDisplay === 'none' && this.isColorSelectorShown) {
+      this.closeColorSelector();
+    }
+  }
+  static {
+    n(this.prototype, "clear", [action]);
+  }
+  onSaturationChange([, s, v]) {
+    this.updateWithHsv([this.usableHsv[0], s, v]);
+  }
+  static {
+    n(this.prototype, "onSaturationChange", [action]);
+  }
+  onHueChange(hue) {
+    const [, s, v] = this.usableHsv;
+    this.updateWithHsv([hue, s, v]);
+  }
+  static {
+    n(this.prototype, "onHueChange", [action]);
+  }
+  onSwatchClick(swatch) {
+    const color = getChromaColor(swatch, this.args.showAlpha);
+    this.change(swatch);
+    if (color) this.updateColorAsHsv(hsvOf(color, this.usableHsv[0]));
+    this.finalSelection();
+  }
+  static {
+    n(this.prototype, "onSwatchClick", [action]);
+  }
+  onAlphaChange(event, isValid) {
+    const value = event.target.value;
+    this.alphaInput = value;
+    if (!isValid) return;
+    const alpha = parseInt(value, 10) / 100;
+    const color = this.chromaColor ? this.chromaColor.alpha(alpha) : null;
+    const hex = color ? color.hex() : HEX_FALLBACK;
+    const rgba = color ? color.rgba() : RGB_FALLBACK;
+    const text = this.preferredFormat === 'rgba' ? (alpha < 1 ? rgba : rgba.slice(0, 3)).join(RGB_JOIN) : hex;
+    this.alphaInput = undefined;
+    this.args.onChange(text, {
+      hex,
+      rgba,
+      isValid: Boolean(color)
+    });
+  }
+  static {
+    n(this.prototype, "onAlphaChange", [action]);
+  }
+  registerInput = element => {
+    this.input = element ?? undefined;
+  };
+  registerSaturation = modifier(element => {
+    this.saturation = element;
+  });
+  registerFirstSwatch = modifier((element, [index]) => {
+    if (index === 0) this.firstSwatch = element;
+  });
+  static {
+    setComponentTemplate(precompileTemplate("{{#if (isInline @display)}}\n  <div class=\"euiColorPicker\" ...attributes>\n    <Composite @picker={{this}} @isInvalid={{@isInvalid}} @disabled={{@disabled}} @readOnly={{@readOnly}} @compressed={{@compressed}} @showAlpha={{@showAlpha}} />\n  </div>\n{{else}}\n  <EuiPopover class=\"euiColorPicker__popoverAnchor\" @isOpen={{this.isColorSelectorShown}} @closePopover={{this.finalSelection}} @panelClassName={{this.panelClasses}} @display={{if (has-block \"button\") \"inlineBlock\" \"block\"}} @attachToAnchor={{if (has-block \"button\") false true}} @anchorPosition=\"downLeft\" @panelPaddingSize=\"s\" @ownFocus={{false}} @initialFocus={{false}} @ariaLabel={{this.labels.popover}}>\n    <:button>\n      {{#if (has-block \"button\")}}\n        {{yield this.toggle to=\"button\"}}\n      {{else}}\n        {{!-- the chosen color reaches the swatch icon through currentColor --}}\n        <div style={{cssStyle (hash color=(cssColor this.chromaColor))}} {{on \"keydown\" this.onLayoutKeyDown}}>\n          {{#if (or2 (has-block \"prepend\") (has-block \"append\"))}}\n            <EuiFieldText class=\"euiColorPicker__input euiColorPicker__input--inGroup\" id={{this.id}} autocomplete=\"off\" aria-label={{if this.isColorSelectorShown this.labels.open this.labels.closed}} @value={{this.inputValue}} @placeholder={{this.placeholder}} @icon={{if this.chromaColor \"swatchInput\" \"stopSlash\"}} @clear={{if this.canClear this.clear}} @isInvalid={{@isInvalid}} @compressed={{@compressed}} @disabled={{@disabled}} @readOnly={{@readOnly}} @fullWidth={{@fullWidth}} @inputRef={{this.registerInput}} {{on \"click\" this.onInputClick}} {{on \"keydown\" this.onInputKeyDown}} {{on \"blur\" this.onInputBlur}} {{on \"input\" this.onColorInput}}>\n              <:prepend as |className inputId|>{{yield className inputId to=\"prepend\"}}</:prepend>\n              <:append as |className inputId|>{{yield className inputId to=\"append\"}}</:append>\n            </EuiFieldText>\n          {{else}}\n            <EuiFieldText class=\"euiColorPicker__input\" id={{this.id}} autocomplete=\"off\" aria-label={{if this.isColorSelectorShown this.labels.open this.labels.closed}} @value={{this.inputValue}} @placeholder={{this.placeholder}} @icon={{if this.chromaColor \"swatchInput\" \"stopSlash\"}} @clear={{if this.canClear this.clear}} @isInvalid={{@isInvalid}} @compressed={{@compressed}} @disabled={{@disabled}} @readOnly={{@readOnly}} @fullWidth={{@fullWidth}} @inputRef={{this.registerInput}} {{on \"click\" this.onInputClick}} {{on \"keydown\" this.onInputKeyDown}} {{on \"blur\" this.onInputBlur}} {{on \"input\" this.onColorInput}} />\n          {{/if}}\n        </div>\n      {{/if}}\n    </:button>\n    <:content>\n      <div class=\"euiColorPicker\" data-test-subj=\"euiColorPickerPopover\" ...attributes>\n        <Composite @picker={{this}} @isInvalid={{@isInvalid}} @disabled={{@disabled}} @readOnly={{@readOnly}} @compressed={{@compressed}} @showAlpha={{@showAlpha}} />\n      </div>\n    </:content>\n  </EuiPopover>\n{{/if}}", {
+      strictMode: true,
+      scope: () => ({
+        isInline,
+        Composite,
+        EuiPopover: EuiPopoverComponent,
+        cssStyle,
+        hash,
+        cssColor,
+        on,
+        or2,
+        EuiFieldText
+      })
+    }), this);
+  }
+}
+/** The saturation square, hue slider, swatches and secondary input. */class Composite extends Component {
+  get picker() {
+    return this.args.picker;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("{{#if (eq2 this.picker.secondaryInputDisplay \"top\")}}\n  <SecondaryInput @picker={{this.picker}} @isInvalid={{@isInvalid}} @disabled={{@disabled}} @readOnly={{@readOnly}} @compressed={{@compressed}} />\n  <EuiSpacer @size=\"s\" />\n{{/if}}\n{{#if this.picker.showPicker}}\n  <div {{on \"keydown\" this.picker.onPickerKeyDown}}>\n    <EuiSaturation @id={{this.picker.id}} @color={{this.picker.usableHsv}} @hex={{this.picker.hex}} @onChange={{this.picker.onSaturationChange}} {{this.picker.registerSaturation}} />\n    <EuiHue @id={{this.picker.id}} @hue={{hueOf this.picker.usableHsv}} @hex={{this.picker.hex}} @onChange={{this.picker.onHueChange}} />\n  </div>\n{{/if}}\n{{#if this.picker.showSwatches}}\n  <ul class=\"euiColorPicker__swatches\">\n    {{#each this.picker.swatches as |swatch index|}}\n      <li class=\"euiColorPicker__swatch-item\">\n        <EuiColorPickerSwatch class=\"euiColorPicker__swatchSelect\" @color={{swatch}} {{on \"click\" (fn this.picker.onSwatchClick swatch)}} {{this.picker.registerFirstSwatch index}} />\n      </li>\n    {{/each}}\n  </ul>\n{{/if}}\n{{#if (eq2 this.picker.secondaryInputDisplay \"bottom\")}}\n  {{#if (notEq2 this.picker.mode \"picker\")}}\n    <EuiSpacer @size=\"s\" />\n  {{/if}}\n  <SecondaryInput @picker={{this.picker}} @isInvalid={{@isInvalid}} @disabled={{@disabled}} @readOnly={{@readOnly}} @compressed={{@compressed}} />\n{{/if}}\n{{#if @showAlpha}}\n  <EuiSpacer @size=\"s\" />\n  <EuiRange class=\"euiColorPicker__alphaRange\" data-test-subj=\"euiColorPickerAlpha\" aria-label={{this.picker.labels.alpha}} @compressed={{true}} @showInput={{true}} @min={{0}} @max={{100}} @value={{this.picker.alphaRangeValue}} @onChange={{this.picker.onAlphaChange}} />\n{{/if}}", {
+      strictMode: true,
+      scope: () => ({
+        eq2,
+        SecondaryInput,
+        EuiSpacer,
+        on,
+        EuiSaturation,
+        EuiHue,
+        hueOf,
+        EuiColorPickerSwatch,
+        fn,
+        notEq2,
+        EuiRange: EuiRangeComponent
+      })
+    }), this);
+  }
+}
+class SecondaryInput extends Component {
+  get picker() {
+    return this.args.picker;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<EuiFormRow @display=\"rowCompressed\" @isInvalid={{@isInvalid}} @error={{if @isInvalid this.picker.labels.error}}>\n  <EuiFieldText data-test-subj=\"euiColorPickerInput_{{this.picker.secondaryInputDisplay}}\" autocomplete=\"off\" aria-label={{this.picker.labels.color}} @compressed={{true}} @value={{this.picker.inputValue}} @placeholder={{this.picker.placeholder}} @clear={{if this.picker.canClear this.picker.clear}} @isInvalid={{@isInvalid}} @disabled={{@disabled}} @readOnly={{@readOnly}} {{on \"input\" this.picker.onColorInput}} />\n</EuiFormRow>", {
+      strictMode: true,
+      scope: () => ({
+        EuiFormRow,
+        EuiFieldText,
+        on
+      })
+    }), this);
+  }
+}
+function hueOf(hsv) {
+  return hsv[0];
+}
+function isInline(display) {
+  return display === 'inline';
+}
+function cssColor(color) {
+  return color ? color.css() : undefined;
+}
+function or2(a, b) {
+  return Boolean(a || b);
+}
+function eq2(a, b) {
+  return a === b;
+}
+function notEq2(a, b) {
+  return a !== b;
+}
+
+export { EuiColorPicker as default };
+//# sourceMappingURL=eui-color-picker.js.map