@ember-eui/core 13.0.5 → 14.1.0

package/dist/components/eui-resizable-container.js

@@ -0,0 +1,291 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { modifier } from 'ember-modifier';
+import { sizesOnly, pxToPercent, getPanelMinSize, getPointerPosition, getSiblingPanel } from '../-private/resizable.js';
+import ResizeObserver from '../modifiers/resize-observer.js';
+import EuiResizableButton from './eui-resizable-container/button.js';
+import EuiResizablePanel from './eui-resizable-container/panel.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
+
+class EuiResizableContainer extends Component {
+  static {
+    g(this.prototype, "panels", [tracked], function () {
+      return {};
+    });
+  }
+  #panels = (i(this, "panels"), void 0);
+  static {
+    g(this.prototype, "resizers", [tracked], function () {
+      return {};
+    });
+  }
+  #resizers = (i(this, "resizers"), void 0);
+  static {
+    g(this.prototype, "isDragging", [tracked], function () {
+      return false;
+    });
+  }
+  #isDragging = (i(this, "isDragging"), void 0);
+  currentResizerPos = -1;
+  prevPanelId = null;
+  nextPanelId = null;
+  containerSize = 1;
+  element;
+  get isHorizontal() {
+    return (this.args.direction ?? 'horizontal') === 'horizontal';
+  }
+  get classes() {
+    return `euiResizableContainer euiResizableContainer--${this.isHorizontal ? 'horizontal' : 'vertical'}`;
+  }
+  measure() {
+    if (!this.element) return;
+    const {
+      width,
+      height
+    } = this.element.getBoundingClientRect();
+    this.containerSize = this.isHorizontal ? width : height;
+  }
+  changed() {
+    this.args.onPanelWidthChange?.(sizesOnly(this.panels));
+  }
+  /* registration ---------------------------------------------------------- */
+  registerPanel = panel => {
+    this.panels = {
+      ...this.panels,
+      [panel.id]: panel
+    };
+  };
+  deregisterPanel = panelId => {
+    const {
+      [panelId]: _removed,
+      ...panels
+    } = this.panels;
+    this.panels = panels;
+  };
+  registerResizer = resizer => {
+    this.resizers = {
+      ...this.resizers,
+      [resizer.id]: resizer
+    };
+  };
+  deregisterResizer = resizerId => {
+    const {
+      [resizerId]: _removed,
+      ...resizers
+    } = this.resizers;
+    this.resizers = resizers;
+  };
+  /* resizing -------------------------------------------------------------- */
+  resize(prevPanelId, nextPanelId, deltaPx) {
+    const prevPanel = this.panels[prevPanelId];
+    const nextPanel = this.panels[nextPanelId];
+    if (!prevPanel || !nextPanel) return false;
+    this.measure();
+    const prevSize = pxToPercent(prevPanel.getSizePx() + deltaPx, this.containerSize);
+    const nextSize = pxToPercent(nextPanel.getSizePx() - deltaPx, this.containerSize);
+    if (prevSize < getPanelMinSize(prevPanel.minSize, this.containerSize) || nextSize < getPanelMinSize(nextPanel.minSize, this.containerSize)) {
+      return false;
+    }
+    this.panels = {
+      ...this.panels,
+      [prevPanelId]: {
+        ...prevPanel,
+        size: prevSize
+      },
+      [nextPanelId]: {
+        ...nextPanel,
+        size: nextSize
+      }
+    };
+    this.changed();
+    return true;
+  }
+  onResizerMouseDown(event) {
+    const button = event.currentTarget;
+    const prevPanel = button.previousElementSibling;
+    const nextPanel = button.nextElementSibling;
+    if (!prevPanel || !nextPanel) return;
+    this.isDragging = true;
+    this.currentResizerPos = getPointerPosition(event, this.isHorizontal);
+    this.prevPanelId = prevPanel.id;
+    this.nextPanelId = nextPanel.id;
+  }
+  static {
+    n(this.prototype, "onResizerMouseDown", [action]);
+  }
+  onMouseMove(event) {
+    if (!this.isDragging || !this.prevPanelId || !this.nextPanelId) return;
+    const position = getPointerPosition(event, this.isHorizontal);
+    if (this.resize(this.prevPanelId, this.nextPanelId, position - this.currentResizerPos)) {
+      this.currentResizerPos = position;
+    }
+  }
+  static {
+    n(this.prototype, "onMouseMove", [action]);
+  }
+  onMouseUp() {
+    this.isDragging = false;
+    this.currentResizerPos = -1;
+    this.prevPanelId = null;
+    this.nextPanelId = null;
+  }
+  static {
+    n(this.prototype, "onMouseUp", [action]);
+  }
+  onResizerKeyDown(event) {
+    const button = event.currentTarget;
+    const {
+      key
+    } = event;
+    const forward = key === 'ArrowDown' || key === 'ArrowRight';
+    const backward = key === 'ArrowUp' || key === 'ArrowLeft';
+    const matchesDirection = this.isHorizontal ? key === 'ArrowLeft' || key === 'ArrowRight' : key === 'ArrowUp' || key === 'ArrowDown';
+    const prevPanelId = button.previousElementSibling?.id;
+    const nextPanelId = button.nextElementSibling?.id;
+    if (!(forward || backward) || !matchesDirection || !prevPanelId || !nextPanelId) return;
+    event.preventDefault();
+    this.resize(prevPanelId, nextPanelId, forward ? 10 : -10);
+  }
+  static {
+    n(this.prototype, "onResizerKeyDown", [action]);
+  }
+  onResizerFocus(resizerId) {
+    this.resizers = Object.fromEntries(Object.values(this.resizers).map(resizer => [resizer.id, {
+      ...resizer,
+      isFocused: resizer.id === resizerId
+    }]));
+  }
+  static {
+    n(this.prototype, "onResizerFocus", [action]);
+  }
+  onResizerBlur() {
+    this.resizers = Object.fromEntries(Object.values(this.resizers).map(resizer => [resizer.id, {
+      ...resizer,
+      isFocused: false
+    }]));
+  }
+  static {
+    n(this.prototype, "onResizerBlur", [action]);
+  }
+  onContainerResize() {
+    this.measure();
+  }
+  /* collapsing ------------------------------------------------------------ */
+  static {
+    n(this.prototype, "onContainerResize", [action]);
+  }
+  togglePanel(panelId, options) {
+    const current = this.panels[panelId];
+    const element = document.getElementById(panelId);
+    if (!current || !element) return;
+    this.measure();
+    const panels = this.panels;
+    const shouldCollapse = !current.isCollapsed;
+    const prevResizer = element.previousElementSibling;
+    const prevPanel = prevResizer?.previousElementSibling;
+    const nextResizer = element.nextElementSibling;
+    const nextPanel = nextResizer?.nextElementSibling;
+    const resizersToDisable = {};
+    if (prevResizer && prevPanel && panels[prevPanel.id]) {
+      resizersToDisable[prevResizer.id] = panels[prevPanel.id].isCollapsed ? true : shouldCollapse;
+    }
+    if (nextResizer && nextPanel && panels[nextPanel.id]) {
+      resizersToDisable[nextResizer.id] = panels[nextPanel.id].isCollapsed ? true : shouldCollapse;
+    }
+    let others = {};
+    if (prevPanel && panels[prevPanel.id] && !panels[prevPanel.id].isCollapsed && options.direction === 'right') {
+      others[prevPanel.id] = panels[prevPanel.id];
+    }
+    if (nextPanel && panels[nextPanel.id] && !panels[nextPanel.id].isCollapsed && options.direction === 'left') {
+      others[nextPanel.id] = panels[nextPanel.id];
+    }
+    let siblings = Object.keys(others).length;
+    // several neighbours are collapsed: look further for an open panel
+    if (!siblings) {
+      const maybePrev = getSiblingPanel(element, 'prev');
+      const maybeNext = getSiblingPanel(element, 'next');
+      const validPrev = maybePrev ? panels[maybePrev.id] : undefined;
+      const validNext = maybeNext ? panels[maybeNext.id] : undefined;
+      if (validPrev && options.direction === 'right') {
+        others[validPrev.id] = validPrev;
+      } else if (validNext && options.direction === 'left') {
+        others[validNext.id] = validNext;
+      } else {
+        if (validPrev) others[validPrev.id] = validPrev;
+        if (validNext) others[validNext.id] = validNext;
+      }
+      siblings = Object.keys(others).length;
+    }
+    // collapsed panels keep room for the toggle button (24px)
+    let newSize = shouldCollapse ? pxToPercent(current.mode ? 24 : 0, this.containerSize) : current.prevSize;
+    const delta = shouldCollapse ? (current.size - newSize) / siblings : (newSize - current.size) / siblings * -1;
+    const collapsedSize = Object.values(panels).reduce((sum, panel) => panel.id !== panelId && panel.isCollapsed ? sum + panel.size : sum, 0);
+    // reopening the only open panel: give it all the room left
+    if (!shouldCollapse && !siblings) newSize = 100 - collapsedSize;
+    let updated;
+    if (delta < 0 && Object.values(others).some(panel => panel.size + delta < getPanelMinSize(panel.minSize, this.containerSize))) {
+      // not enough room next to it: share the space evenly between open panels
+      others = Object.fromEntries(Object.values(panels).filter(panel => panel.id !== panelId && !panel.isCollapsed).map(panel => [panel.id, panel]));
+      newSize = (100 - collapsedSize) / (Object.keys(others).length + 1);
+      updated = Object.fromEntries(Object.values(others).map(panel => [panel.id, {
+        ...panel,
+        size: newSize
+      }]));
+    } else {
+      updated = Object.fromEntries(Object.values(others).map(panel => [panel.id, {
+        ...panel,
+        size: panel.size + delta
+      }]));
+    }
+    this.panels = {
+      ...panels,
+      ...updated,
+      [panelId]: {
+        ...current,
+        size: newSize,
+        isCollapsed: shouldCollapse,
+        prevSize: shouldCollapse ? current.size : newSize
+      }
+    };
+    this.resizers = Object.fromEntries(Object.values(this.resizers).map(resizer => [resizer.id, {
+      ...resizer,
+      isFocused: false,
+      isDisabled: resizersToDisable[resizer.id] ?? resizer.isDisabled
+    }]));
+    this.changed();
+  }
+  static {
+    n(this.prototype, "togglePanel", [action]);
+  }
+  onPanelToggle(panelId, options) {
+    this.togglePanel(panelId, options);
+    this.args.onToggleCollapsed?.(panelId, options);
+  }
+  static {
+    n(this.prototype, "onPanelToggle", [action]);
+  }
+  registerElement = modifier(element => {
+    this.element = element;
+    this.measure();
+  });
+  static {
+    setComponentTemplate(precompileTemplate("{{!-- template-lint-disable no-invalid-interactive --}}\n<div class={{this.classes}} {{on \"mousemove\" this.onMouseMove}} {{on \"mouseup\" this.onMouseUp}} {{on \"mouseleave\" this.onMouseUp}} {{on \"touchmove\" this.onMouseMove}} {{on \"touchend\" this.onMouseUp}} {{resizeObserver onResize=this.onContainerResize}} {{this.registerElement}} ...attributes>\n  {{yield (hash Panel=(component EuiResizablePanel container=this) Button=(component EuiResizableButton container=this) togglePanel=this.togglePanel)}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        on,
+        resizeObserver: ResizeObserver,
+        hash,
+        EuiResizablePanel,
+        EuiResizableButton
+      })
+    }), this);
+  }
+}
+
+export { EuiResizableContainer as default };
+//# sourceMappingURL=eui-resizable-container.js.map

package/dist/components/eui-resizable-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-resizable-container.js","sources":["../../src/components/eui-resizable-container.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\n\nimport { modifier } from 'ember-modifier';\n\nimport {\n  getPanelMinSize,\n  getPointerPosition,\n  getSiblingPanel,\n  pxToPercent,\n  sizesOnly\n} from '../-private/resizable.ts';\nimport resizeObserver from '../modifiers/resize-observer.ts';\nimport EuiResizableButton from './eui-resizable-container/button.gts';\nimport EuiResizablePanel from './eui-resizable-container/panel.gts';\n\nimport type { PanelState, ResizerState } from '../-private/resizable.ts';\nimport type { EuiResizableButtonSignature } from './eui-resizable-container/button';\nimport type { EuiResizablePanelSignature } from './eui-resizable-container/panel';\nimport type { ComponentLike } from '@glint/template';\n\nexport interface ToggleOptions {\n  /** Which way the panel collapses: toward the `'left'` or the `'right'`. */\n  direction: 'left' | 'right';\n}\n\n/**\n * Panels separated by draggable resize buttons, side by side\n * (`'horizontal'`) or stacked (`'vertical'`), like an IDE's sidebar and\n * editor. It yields `{ Panel, Button, togglePanel }`: alternate\n * `<c.Panel>`s and `<c.Button />`s as its direct children. Panels can be\n * collapsible (`@mode=\"collapsible\"` next to a `@mode=\"main\"` one).\n */\nexport interface EuiResizableContainerSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** `'horizontal'` (side by side) or `'vertical'` (stacked). Defaults to `'horizontal'`. */\n    direction?: 'horizontal' | 'vertical';\n    /** Called with every panel's size (`{ [panelId]: percent }`) after a change. */\n    onPanelWidthChange?: (sizes: Record<string, number>) => void;\n    /** Called when a panel is collapsed or expanded. */\n    onToggleCollapsed?: (panelId: string, options: ToggleOptions) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        /** A panel; see `EuiResizablePanel`'s arguments. */\n        Panel: ComponentLike<{\n          Element: HTMLDivElement;\n          Args: Omit<EuiResizablePanelSignature['Args'], 'container'>;\n          Blocks: EuiResizablePanelSignature['Blocks'];\n        }>;\n        /** The draggable separator between two panels. */\n        Button: ComponentLike<{\n          Element: HTMLButtonElement;\n          Args: Omit<EuiResizableButtonSignature['Args'], 'container'>;\n        }>;\n        /** Collapses or expands a panel by id, e.g. from a button elsewhere. */\n        togglePanel: (panelId: string, options: ToggleOptions) => void;\n      }\n    ];\n  };\n}\n\nexport default class EuiResizableContainer extends Component<EuiResizableContainerSignature> {\n  @tracked panels: Record<string, PanelState> = {};\n  @tracked resizers: Record<string, ResizerState> = {};\n  @tracked isDragging = false;\n\n  currentResizerPos = -1;\n  prevPanelId: string | null = null;\n  nextPanelId: string | null = null;\n  containerSize = 1;\n  element?: HTMLElement;\n\n  get isHorizontal(): boolean {\n    return (this.args.direction ?? 'horizontal') === 'horizontal';\n  }\n\n  get classes(): string {\n    return `euiResizableContainer euiResizableContainer--${this.isHorizontal ? 'horizontal' : 'vertical'}`;\n  }\n\n  measure(): void {\n    if (!this.element) return;\n\n    const { width, height } = this.element.getBoundingClientRect();\n\n    this.containerSize = this.isHorizontal ? width : height;\n  }\n\n  changed(): void {\n    this.args.onPanelWidthChange?.(sizesOnly(this.panels));\n  }\n\n  /* registration ---------------------------------------------------------- */\n\n  registerPanel = (panel: PanelState): void => {\n    this.panels = { ...this.panels, [panel.id]: panel };\n  };\n\n  deregisterPanel = (panelId: string): void => {\n    const { [panelId]: _removed, ...panels } = this.panels;\n\n    this.panels = panels;\n  };\n\n  registerResizer = (resizer: ResizerState): void => {\n    this.resizers = { ...this.resizers, [resizer.id]: resizer };\n  };\n\n  deregisterResizer = (resizerId: string): void => {\n    const { [resizerId]: _removed, ...resizers } = this.resizers;\n\n    this.resizers = resizers;\n  };\n\n  /* resizing -------------------------------------------------------------- */\n\n  resize(prevPanelId: string, nextPanelId: string, deltaPx: number): boolean {\n    const prevPanel = this.panels[prevPanelId];\n    const nextPanel = this.panels[nextPanelId];\n\n    if (!prevPanel || !nextPanel) return false;\n\n    this.measure();\n\n    const prevSize = pxToPercent(prevPanel.getSizePx() + deltaPx, this.containerSize);\n    const nextSize = pxToPercent(nextPanel.getSizePx() - deltaPx, this.containerSize);\n\n    if (\n      prevSize < getPanelMinSize(prevPanel.minSize, this.containerSize) ||\n      nextSize < getPanelMinSize(nextPanel.minSize, this.containerSize)\n    ) {\n      return false;\n    }\n\n    this.panels = {\n      ...this.panels,\n      [prevPanelId]: { ...prevPanel, size: prevSize },\n      [nextPanelId]: { ...nextPanel, size: nextSize }\n    };\n    this.changed();\n\n    return true;\n  }\n\n  @action\n  onResizerMouseDown(event: MouseEvent | TouchEvent): void {\n    const button = event.currentTarget as HTMLElement;\n    const prevPanel = button.previousElementSibling;\n    const nextPanel = button.nextElementSibling;\n\n    if (!prevPanel || !nextPanel) return;\n\n    this.isDragging = true;\n    this.currentResizerPos = getPointerPosition(event, this.isHorizontal);\n    this.prevPanelId = prevPanel.id;\n    this.nextPanelId = nextPanel.id;\n  }\n\n  @action\n  onMouseMove(event: MouseEvent | TouchEvent): void {\n    if (!this.isDragging || !this.prevPanelId || !this.nextPanelId) return;\n\n    const position = getPointerPosition(event, this.isHorizontal);\n\n    if (this.resize(this.prevPanelId, this.nextPanelId, position - this.currentResizerPos)) {\n      this.currentResizerPos = position;\n    }\n  }\n\n  @action\n  onMouseUp(): void {\n    this.isDragging = false;\n    this.currentResizerPos = -1;\n    this.prevPanelId = null;\n    this.nextPanelId = null;\n  }\n\n  @action\n  onResizerKeyDown(event: KeyboardEvent): void {\n    const button = event.currentTarget as HTMLElement;\n    const { key } = event;\n    const forward = key === 'ArrowDown' || key === 'ArrowRight';\n    const backward = key === 'ArrowUp' || key === 'ArrowLeft';\n    const matchesDirection = this.isHorizontal\n      ? key === 'ArrowLeft' || key === 'ArrowRight'\n      : key === 'ArrowUp' || key === 'ArrowDown';\n    const prevPanelId = button.previousElementSibling?.id;\n    const nextPanelId = button.nextElementSibling?.id;\n\n    if (!(forward || backward) || !matchesDirection || !prevPanelId || !nextPanelId) return;\n\n    event.preventDefault();\n    this.resize(prevPanelId, nextPanelId, forward ? 10 : -10);\n  }\n\n  @action\n  onResizerFocus(resizerId: string): void {\n    this.resizers = Object.fromEntries(\n      Object.values(this.resizers).map((resizer) => [\n        resizer.id,\n        { ...resizer, isFocused: resizer.id === resizerId }\n      ])\n    );\n  }\n\n  @action\n  onResizerBlur(): void {\n    this.resizers = Object.fromEntries(\n      Object.values(this.resizers).map((resizer) => [resizer.id, { ...resizer, isFocused: false }])\n    );\n  }\n\n  @action\n  onContainerResize(): void {\n    this.measure();\n  }\n\n  /* collapsing ------------------------------------------------------------ */\n\n  @action\n  togglePanel(panelId: string, options: ToggleOptions): void {\n    const current = this.panels[panelId];\n    const element = document.getElementById(panelId);\n\n    if (!current || !element) return;\n\n    this.measure();\n\n    const panels = this.panels;\n    const shouldCollapse = !current.isCollapsed;\n    const prevResizer = element.previousElementSibling;\n    const prevPanel = prevResizer?.previousElementSibling;\n    const nextResizer = element.nextElementSibling;\n    const nextPanel = nextResizer?.nextElementSibling;\n    const resizersToDisable: Record<string, boolean> = {};\n\n    if (prevResizer && prevPanel && panels[prevPanel.id]) {\n      resizersToDisable[prevResizer.id] = panels[prevPanel.id]!.isCollapsed ? true : shouldCollapse;\n    }\n    if (nextResizer && nextPanel && panels[nextPanel.id]) {\n      resizersToDisable[nextResizer.id] = panels[nextPanel.id]!.isCollapsed ? true : shouldCollapse;\n    }\n\n    let others: Record<string, PanelState> = {};\n\n    if (prevPanel && panels[prevPanel.id] && !panels[prevPanel.id]!.isCollapsed && options.direction === 'right') {\n      others[prevPanel.id] = panels[prevPanel.id]!;\n    }\n    if (nextPanel && panels[nextPanel.id] && !panels[nextPanel.id]!.isCollapsed && options.direction === 'left') {\n      others[nextPanel.id] = panels[nextPanel.id]!;\n    }\n\n    let siblings = Object.keys(others).length;\n\n    // several neighbours are collapsed: look further for an open panel\n    if (!siblings) {\n      const maybePrev = getSiblingPanel(element, 'prev');\n      const maybeNext = getSiblingPanel(element, 'next');\n      const validPrev = maybePrev ? panels[maybePrev.id] : undefined;\n      const validNext = maybeNext ? panels[maybeNext.id] : undefined;\n\n      if (validPrev && options.direction === 'right') {\n        others[validPrev.id] = validPrev;\n      } else if (validNext && options.direction === 'left') {\n        others[validNext.id] = validNext;\n      } else {\n        if (validPrev) others[validPrev.id] = validPrev;\n        if (validNext) others[validNext.id] = validNext;\n      }\n\n      siblings = Object.keys(others).length;\n    }\n\n    // collapsed panels keep room for the toggle button (24px)\n    let newSize = shouldCollapse\n      ? pxToPercent(current.mode ? 24 : 0, this.containerSize)\n      : current.prevSize;\n    const delta = shouldCollapse\n      ? (current.size - newSize) / siblings\n      : ((newSize - current.size) / siblings) * -1;\n    const collapsedSize = Object.values(panels).reduce(\n      (sum, panel) => (panel.id !== panelId && panel.isCollapsed ? sum + panel.size : sum),\n      0\n    );\n\n    // reopening the only open panel: give it all the room left\n    if (!shouldCollapse && !siblings) newSize = 100 - collapsedSize;\n\n    let updated: Record<string, PanelState>;\n\n    if (\n      delta < 0 &&\n      Object.values(others).some(\n        (panel) => panel.size + delta < getPanelMinSize(panel.minSize, this.containerSize)\n      )\n    ) {\n      // not enough room next to it: share the space evenly between open panels\n      others = Object.fromEntries(\n        Object.values(panels)\n          .filter((panel) => panel.id !== panelId && !panel.isCollapsed)\n          .map((panel) => [panel.id, panel])\n      );\n      newSize = (100 - collapsedSize) / (Object.keys(others).length + 1);\n      updated = Object.fromEntries(\n        Object.values(others).map((panel) => [panel.id, { ...panel, size: newSize }])\n      );\n    } else {\n      updated = Object.fromEntries(\n        Object.values(others).map((panel) => [panel.id, { ...panel, size: panel.size + delta }])\n      );\n    }\n\n    this.panels = {\n      ...panels,\n      ...updated,\n      [panelId]: {\n        ...current,\n        size: newSize,\n        isCollapsed: shouldCollapse,\n        prevSize: shouldCollapse ? current.size : newSize\n      }\n    };\n    this.resizers = Object.fromEntries(\n      Object.values(this.resizers).map((resizer) => [\n        resizer.id,\n        {\n          ...resizer,\n          isFocused: false,\n          isDisabled: resizersToDisable[resizer.id] ?? resizer.isDisabled\n        }\n      ])\n    );\n    this.changed();\n  }\n\n  @action\n  onPanelToggle(panelId: string, options: ToggleOptions): void {\n    this.togglePanel(panelId, options);\n    this.args.onToggleCollapsed?.(panelId, options);\n  }\n\n  registerElement = modifier((element: HTMLElement) => {\n    this.element = element;\n    this.measure();\n  });\n\n  <template>\n    {{! template-lint-disable no-invalid-interactive }}\n    <div\n      class={{this.classes}}\n      {{on \"mousemove\" this.onMouseMove}}\n      {{on \"mouseup\" this.onMouseUp}}\n      {{on \"mouseleave\" this.onMouseUp}}\n      {{on \"touchmove\" this.onMouseMove}}\n      {{on \"touchend\" this.onMouseUp}}\n      {{resizeObserver onResize=this.onContainerResize}}\n      {{this.registerElement}}\n      ...attributes\n    >\n      {{yield\n        (hash\n          Panel=(component EuiResizablePanel container=this)\n          Button=(component EuiResizableButton container=this)\n          togglePanel=this.togglePanel\n        )\n      }}\n    </div>\n  </template>\n}\n"],"names":["EuiResizableContainer","Component","g","prototype","tracked","i","currentResizerPos","prevPanelId","nextPanelId","containerSize","element","isHorizontal","args","direction","classes","measure","width","height","getBoundingClientRect","changed","onPanelWidthChange","sizesOnly","panels","registerPanel","panel","id","deregisterPanel","panelId","_removed","registerResizer","resizer","resizers","deregisterResizer","resizerId","resize","deltaPx","prevPanel","nextPanel","prevSize","pxToPercent","getSizePx","nextSize","getPanelMinSize","minSize","size","onResizerMouseDown","event","button","currentTarget","previousElementSibling","nextElementSibling","isDragging","getPointerPosition","n","action","onMouseMove","position","onMouseUp","onResizerKeyDown","key","forward","backward","matchesDirection","preventDefault","onResizerFocus","Object","fromEntries","values","map","isFocused","onResizerBlur","onContainerResize","togglePanel","options","current","document","getElementById","shouldCollapse","isCollapsed","prevResizer","nextResizer","resizersToDisable","others","siblings","keys","length","maybePrev","getSiblingPanel","maybeNext","validPrev","undefined","validNext","newSize","mode","delta","collapsedSize","reduce","sum","updated","some","filter","isDisabled","onPanelToggle","onToggleCollapsed","registerElement","modifier","setComponentTemplate","precompileTemplate","strictMode","scope","on","resizeObserver","hash","EuiResizablePanel","EuiResizableButton"],"mappings":"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"}

package/dist/components/eui-saturation.js

@@ -0,0 +1,163 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { schedule } from '@ember/runloop';
+import { service } from '@ember/service';
+import { modifier } from 'ember-modifier';
+import { getEventPosition } 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, n } from 'decorator-transforms/runtime-esm';
+
+class EuiSaturation extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  static {
+    g(this.prototype, "dragged", [tracked]);
+  }
+  #dragged = (i(this, "dragged"), void 0); // the indicator follows the pointer; otherwise it shows @color
+  static {
+    g(this.prototype, "boxSize", [tracked], function () {
+      return {
+        width: 0,
+        height: 0
+      };
+    });
+  }
+  #boxSize = (i(this, "boxSize"), void 0);
+  box;
+  get color() {
+    return this.args.color ?? [1, 0, 0];
+  }
+  get indicator() {
+    if (this.dragged && this.dragged.forColor === this.color.join()) return this.dragged;
+    const [, s, v] = this.color;
+    return {
+      left: s * this.boxSize.width,
+      top: (1 - v) * this.boxSize.height
+    };
+  }
+  get roleDescription() {
+    return this.euiI18n.lookupToken('euiSaturation.ariaLabel', 'HSV color mode saturation and value 2-axis slider');
+  }
+  get instructions() {
+    return this.euiI18n.lookupToken('euiSaturation.screenReaderInstructions', "Arrow keys to navigate the square color gradient. Coordinates will be used to calculate HSV color mode 'saturation' and 'value' numbers, in the range of 0 to 1. Left and right to change the saturation. Up and down change the value.");
+  }
+  update({
+    left,
+    top,
+    width,
+    height
+  }) {
+    const color = [this.color[0], left / width, 1 - top / height];
+    this.dragged = {
+      left,
+      top,
+      forColor: color.join()
+    };
+    this.args.onChange(color);
+  }
+  moveTo(event) {
+    if (!this.box) return;
+    this.update(getEventPosition({
+      x: event.clientX,
+      y: event.clientY
+    }, this.box));
+  }
+  onMouseDown(event) {
+    this.moveTo(event);
+    const move = e => this.moveTo(e);
+    const up = () => {
+      document.removeEventListener('mousemove', move);
+      document.removeEventListener('mouseup', up);
+    };
+    document.addEventListener('mousemove', move);
+    document.addEventListener('mouseup', up);
+  }
+  static {
+    n(this.prototype, "onMouseDown", [action]);
+  }
+  onTouch(event) {
+    const touch = event.touches[0];
+    if (touch) this.moveTo(touch);
+  }
+  static {
+    n(this.prototype, "onTouch", [action]);
+  }
+  onKeyDown(event) {
+    if (!this.box) return;
+    const {
+      width,
+      height
+    } = this.box.getBoundingClientRect();
+    let {
+      left,
+      top
+    } = this.indicator;
+    switch (event.key) {
+      case 'ArrowDown':
+        top = Math.min(top + height / 100, height);
+        break;
+      case 'ArrowUp':
+        top = Math.max(top - height / 100, 0);
+        break;
+      case 'ArrowLeft':
+        left = Math.max(left - width / 100, 0);
+        break;
+      case 'ArrowRight':
+        left = Math.min(left + width / 100, width);
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    this.update({
+      left,
+      top,
+      width,
+      height
+    });
+  }
+  static {
+    n(this.prototype, "onKeyDown", [action]);
+  }
+  registerBox = modifier(element => {
+    this.box = element;
+    const measure = () => {
+      const {
+        width,
+        height
+      } = element.getBoundingClientRect();
+      if (width !== this.boxSize.width || height !== this.boxSize.height) {
+        this.boxSize = {
+          width,
+          height
+        };
+      }
+    };
+    // measured after rendering, once laid out
+    schedule('afterRender', measure);
+  });
+  static {
+    setComponentTemplate(precompileTemplate("{{!-- template-lint-disable no-invalid-interactive --}}\n<div class=\"euiSaturation\" data-test-subj=\"euiSaturation\" tabindex=\"-1\" style={{cssStyle (hash background=(hueBackground this.color))}} {{on \"mousedown\" this.onMouseDown}} {{on \"touchstart\" this.onTouch}} {{on \"touchmove\" this.onTouch}} {{on \"keydown\" this.onKeyDown}} ...attributes>\n  <div class=\"euiSaturation__lightness\" {{this.registerBox}}>\n    <div class=\"euiSaturation__saturation\"></div>\n  </div>\n  <button type=\"button\" id=\"{{@id}}-saturationIndicator\" class=\"euiSaturation__indicator\" style={{cssStyle (hash left=this.indicator.left top=this.indicator.top)}} aria-roledescription={{this.roleDescription}} aria-label={{@hex}} aria-describedby=\"{{@id}}-instructions\"></button>\n  <span hidden aria-live=\"assertive\">{{@hex}}</span>\n  <span hidden id=\"{{@id}}-instructions\">{{this.instructions}}</span>\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        cssStyle,
+        hash,
+        hueBackground,
+        on
+      })
+    }), this);
+  }
+}
+function hueBackground(color) {
+  return `hsl(${color[0]}, 100%, 50%)`;
+}
+
+export { EuiSaturation as default };
+//# sourceMappingURL=eui-saturation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eui-saturation.js","sources":["../../src/components/eui-saturation.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport { schedule } from '@ember/runloop';\nimport { service } from '@ember/service';\n\nimport { modifier } from 'ember-modifier';\n\nimport { getEventPosition } from '../-private/color.ts';\nimport cssStyle from '../-private/css-style.ts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type { HSV } from '../-private/color.ts';\n\n/**\n * The saturation / value square of `EuiColorPicker`: drag (or use the\n * arrow keys) to pick how vivid and how light the color is. Rendered for\n * you by the color picker.\n */\nexport interface EuiSaturationSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** The color as HSV: `[hue, saturation, value]`. Defaults to `[1, 0, 0]`. */\n    color?: HSV;\n    /** The current color as hex, for screen readers. */\n    hex?: string;\n    /** Prefix of the ids inside. */\n    id?: string;\n    /** Called with the new `[hue, saturation, value]`. */\n    onChange: (color: HSV) => void;\n  };\n}\n\nexport default class EuiSaturation extends Component<EuiSaturationSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  // the indicator follows the pointer; otherwise it shows @color\n  @tracked dragged?: { left: number; top: number; forColor: string };\n  @tracked boxSize = { width: 0, height: 0 };\n\n  box?: HTMLElement;\n\n  get color(): HSV {\n    return this.args.color ?? [1, 0, 0];\n  }\n\n  get indicator(): { left: number; top: number } {\n    if (this.dragged && this.dragged.forColor === this.color.join()) return this.dragged;\n\n    const [, s, v] = this.color;\n\n    return { left: s * this.boxSize.width, top: (1 - v) * this.boxSize.height };\n  }\n\n  get roleDescription(): string {\n    return this.euiI18n.lookupToken(\n      'euiSaturation.ariaLabel',\n      'HSV color mode saturation and value 2-axis slider'\n    );\n  }\n\n  get instructions(): string {\n    return this.euiI18n.lookupToken(\n      'euiSaturation.screenReaderInstructions',\n      \"Arrow keys to navigate the square color gradient. Coordinates will be used to calculate HSV color mode 'saturation' and 'value' numbers, in the range of 0 to 1. Left and right to change the saturation. Up and down change the value.\"\n    );\n  }\n\n  update({ left, top, width, height }: { left: number; top: number; width: number; height: number }): void {\n    const color: HSV = [this.color[0], left / width, 1 - top / height];\n\n    this.dragged = { left, top, forColor: color.join() };\n    this.args.onChange(color);\n  }\n\n  moveTo(event: { clientX: number; clientY: number }): void {\n    if (!this.box) return;\n\n    this.update(getEventPosition({ x: event.clientX, y: event.clientY }, this.box));\n  }\n\n  @action\n  onMouseDown(event: MouseEvent): void {\n    this.moveTo(event);\n\n    const move = (e: MouseEvent) => this.moveTo(e);\n    const up = () => {\n      document.removeEventListener('mousemove', move);\n      document.removeEventListener('mouseup', up);\n    };\n\n    document.addEventListener('mousemove', move);\n    document.addEventListener('mouseup', up);\n  }\n\n  @action\n  onTouch(event: TouchEvent): void {\n    const touch = event.touches[0];\n\n    if (touch) this.moveTo(touch);\n  }\n\n  @action\n  onKeyDown(event: KeyboardEvent): void {\n    if (!this.box) return;\n\n    const { width, height } = this.box.getBoundingClientRect();\n    let { left, top } = this.indicator;\n\n    switch (event.key) {\n      case 'ArrowDown':\n        top = Math.min(top + height / 100, height);\n        break;\n      case 'ArrowUp':\n        top = Math.max(top - height / 100, 0);\n        break;\n      case 'ArrowLeft':\n        left = Math.max(left - width / 100, 0);\n        break;\n      case 'ArrowRight':\n        left = Math.min(left + width / 100, width);\n        break;\n      default:\n        return;\n    }\n\n    event.preventDefault();\n    this.update({ left, top, width, height });\n  }\n\n  registerBox = modifier((element: HTMLElement) => {\n    this.box = element;\n\n    const measure = () => {\n      const { width, height } = element.getBoundingClientRect();\n\n      if (width !== this.boxSize.width || height !== this.boxSize.height) {\n        this.boxSize = { width, height };\n      }\n    };\n\n    // measured after rendering, once laid out\n    schedule('afterRender', measure);\n  });\n\n  <template>\n    {{! template-lint-disable no-invalid-interactive }}\n    <div\n      class=\"euiSaturation\"\n      data-test-subj=\"euiSaturation\"\n      tabindex=\"-1\"\n      style={{cssStyle (hash background=(hueBackground this.color))}}\n      {{on \"mousedown\" this.onMouseDown}}\n      {{on \"touchstart\" this.onTouch}}\n      {{on \"touchmove\" this.onTouch}}\n      {{on \"keydown\" this.onKeyDown}}\n      ...attributes\n    >\n      <div class=\"euiSaturation__lightness\" {{this.registerBox}}>\n        <div class=\"euiSaturation__saturation\"></div>\n      </div>\n      <button\n        type=\"button\"\n        id=\"{{@id}}-saturationIndicator\"\n        class=\"euiSaturation__indicator\"\n        style={{cssStyle (hash left=this.indicator.left top=this.indicator.top)}}\n        aria-roledescription={{this.roleDescription}}\n        aria-label={{@hex}}\n        aria-describedby=\"{{@id}}-instructions\"\n      ></button>\n      <span hidden aria-live=\"assertive\">{{@hex}}</span>\n      <span hidden id=\"{{@id}}-instructions\">{{this.instructions}}</span>\n    </div>\n  </template>\n}\n\nfunction hueBackground(color: HSV): string {\n  return `hsl(${color[0]}, 100%, 50%)`;\n}\n"],"names":["EuiSaturation","Component","g","prototype","service","i","tracked","width","height","box","color","args","indicator","dragged","forColor","join","s","v","left","boxSize","top","roleDescription","euiI18n","lookupToken","instructions","update","onChange","moveTo","event","getEventPosition","x","clientX","y","clientY","onMouseDown","move","e","up","document","removeEventListener","addEventListener","n","action","onTouch","touch","touches","onKeyDown","getBoundingClientRect","key","Math","min","max","preventDefault","registerBox","modifier","element","measure","schedule","setComponentTemplate","precompileTemplate","strictMode","scope","cssStyle","hash","hueBackground","on"],"mappings":";;;;;;;;;;;;;;AAmCe,MAAMA,sBAAsBC,SAAA,CAAU;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CAClDC,OAAA,CAAA,CAAA;AAAA;EAAA,QAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,SAAA,CAAA,EAAA,MAAA;AAAA,EAAA;IAAAH,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CAGAG,OAAA,CAAA,CAAA;AAAA;EAAA,QAAA,IAAAD,CAAA,CAAA,IAAA,EAAA,SAAA,CAAA,EAAA,MAAA,EAAA;AADD,EAAA;IAAAH,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CAECG,OAAA,CAAA,EAAA,YAAA;MAAA,OAAkB;AAAEC,QAAAA,KAAA,EAAO,CAAA;AAAGC,QAAAA,MAAA,EAAQ;OAAE;AAAA,IAAA,CAAA,CAAA;AAAA;EAAA,QAAA,IAAAH,CAAA,CAAA,IAAA,EAAA,SAAA,CAAA,EAAA,MAAA;EAEzCI,GAAA;EAEA,IAAIC,QAAa;AACf,IAAA,OAAO,IAAI,CAACC,IAAI,CAACD,KAAK,IAAI,CAAC,CAAA,EAAG,CAAA,EAAG,CAAA,CAAE;AACrC,EAAA;EAEA,IAAIE,SAAAA,GAA2C;IAC7C,IAAI,IAAI,CAACC,OAAO,IAAI,IAAI,CAACA,OAAO,CAACC,QAAQ,KAAK,IAAI,CAACJ,KAAK,CAACK,IAAI,IAAI,OAAO,IAAI,CAACF,OAAO;IAEpF,MAAM,GAAGG,CAAA,EAAGC,CAAA,CAAE,GAAG,IAAI,CAACP,KAAK;IAE3B,OAAO;AAAEQ,MAAAA,IAAA,EAAMF,CAAA,GAAI,IAAI,CAACG,OAAO,CAACZ,KAAK;MAAEa,GAAA,EAAK,CAAC,IAAIH,CAAC,IAAI,IAAI,CAACE,OAAO,CAACX;KAAO;AAC5E,EAAA;EAEA,IAAIa,eAAAA,GAA0B;IAC5B,OAAO,IAAI,CAACC,OAAO,CAACC,WAAW,CAC7B,yBAAA,EACA,mDAAA,CAAA;AAEJ,EAAA;EAEA,IAAIC,YAAAA,GAAuB;IACzB,OAAO,IAAI,CAACF,OAAO,CAACC,WAAW,CAC7B,wCAAA,EACA,yOAAA,CAAA;AAEJ,EAAA;AAEAE,EAAAA,MAAAA,CAAO;IAAEP,IAAI;IAAEE,GAAG;IAAEb,KAAK;AAAEC,IAAAA;AAAsE,GAAA,EAAQ;AACvG,IAAA,MAAME,KAAO,GAAM,CAAC,IAAI,CAACA,KAAK,CAAC,CAAA,CAAE,EAAEQ,IAAA,GAAOX,KAAA,EAAO,CAAA,GAAIa,GAAA,GAAMZ,MAAA,CAAO;IAElE,IAAI,CAACK,OAAO,GAAG;MAAEK,IAAA;MAAME,GAAA;AAAKN,MAAAA,QAAA,EAAUJ,MAAMK,IAAI;KAAG;AACnD,IAAA,IAAI,CAACJ,IAAI,CAACe,QAAQ,CAAChB,KAAA,CAAA;AACrB,EAAA;EAEAiB,MAAAA,CAAOC,KAA2C,EAAQ;AACxD,IAAA,IAAI,CAAC,IAAI,CAACnB,GAAG,EAAE;AAEf,IAAA,IAAI,CAACgB,MAAM,CAACI,gBAAA,CAAiB;MAAEC,CAAA,EAAGF,MAAMG,OAAO;MAAEC,CAAA,EAAGJ,MAAMK;AAAQ,KAAA,EAAG,IAAI,CAACxB,GAAG,CAAA,CAAA;AAC/E,EAAA;EAGAyB,WAAAA,CAAYN,KAAiB,EAAQ;AACnC,IAAA,IAAI,CAACD,MAAM,CAACC,KAAA,CAAA;IAEZ,MAAMO,OAAQC,KAAkB,IAAI,CAACT,MAAM,CAACS,CAAA,CAAA;IAC5C,MAAMC,EAAA,GAAKA,MAAA;AACTC,MAAAA,QAAA,CAASC,mBAAmB,CAAC,WAAA,EAAaJ,IAAA,CAAA;AAC1CG,MAAAA,QAAA,CAASC,mBAAmB,CAAC,SAAA,EAAWF,EAAA,CAAA;IAC1C,CAAA;AAEAC,IAAAA,QAAA,CAASE,gBAAgB,CAAC,WAAA,EAAaL,IAAA,CAAA;AACvCG,IAAAA,QAAA,CAASE,gBAAgB,CAAC,SAAA,EAAWH,EAAA,CAAA;AACvC,EAAA;AAAA,EAAA;IAAAI,CAAA,CAAA,IAAA,CAAAtC,SAAA,EAAA,aAAA,EAAA,CAZCuC,MAAA,CAAA,CAAA;AAAA;EAeDC,OAAAA,CAAQf,KAAiB,EAAQ;AAC/B,IAAA,MAAMgB,KAAA,GAAQhB,KAAA,CAAMiB,OAAO,CAAC,CAAA,CAAE;AAE9B,IAAA,IAAID,KAAA,EAAO,IAAI,CAACjB,MAAM,CAACiB,KAAA,CAAA;AACzB,EAAA;AAAA,EAAA;IAAAH,CAAA,CAAA,IAAA,CAAAtC,SAAA,EAAA,SAAA,EAAA,CALCuC,MAAA,CAAA,CAAA;AAAA;EAQDI,SAAAA,CAAUlB,KAAoB,EAAQ;AACpC,IAAA,IAAI,CAAC,IAAI,CAACnB,GAAG,EAAE;IAEf,MAAM;MAAEF,KAAK;AAAEC,MAAAA;AAAM,KAAE,GAAG,IAAI,CAACC,GAAG,CAACsC,qBAAqB,EAAA;IACxD,IAAI;MAAE7B,IAAI;AAAEE,MAAAA;KAAK,GAAG,IAAI,CAACR,SAAS;IAElC,QAAQgB,MAAMoB,GAAG;AACf,MAAA,KAAK,WAAA;AACH5B,QAAAA,GAAA,GAAM6B,IAAA,CAAKC,GAAG,CAAC9B,GAAA,GAAMZ,SAAS,GAAA,EAAKA,MAAA,CAAA;AACnC,QAAA;AACF,MAAA,KAAK,SAAA;AACHY,QAAAA,GAAA,GAAM6B,IAAA,CAAKE,GAAG,CAAC/B,GAAA,GAAMZ,SAAS,GAAA,EAAK,CAAA,CAAA;AACnC,QAAA;AACF,MAAA,KAAK,WAAA;AACHU,QAAAA,IAAA,GAAO+B,IAAA,CAAKE,GAAG,CAACjC,IAAA,GAAOX,QAAQ,GAAA,EAAK,CAAA,CAAA;AACpC,QAAA;AACF,MAAA,KAAK,YAAA;AACHW,QAAAA,IAAA,GAAO+B,IAAA,CAAKC,GAAG,CAAChC,IAAA,GAAOX,QAAQ,GAAA,EAAKA,KAAA,CAAA;AACpC,QAAA;AACF,MAAA;AACE,QAAA;AACJ;IAEAqB,KAAA,CAAMwB,cAAc,EAAA;IACpB,IAAI,CAAC3B,MAAM,CAAC;MAAEP,IAAA;MAAME,GAAA;MAAKb,KAAA;AAAOC,MAAAA;AAAO,KAAA,CAAA;AACzC,EAAA;AAAA,EAAA;IAAAiC,CAAA,CAAA,IAAA,CAAAtC,SAAA,EAAA,WAAA,EAAA,CA1BCuC,MAAA,CAAA,CAAA;AAAA;AA4BDW,EAAAA,WAAA,GAAcC,QAAA,CAAUC,OAAS,IAAA;IAC/B,IAAI,CAAC9C,GAAG,GAAG8C,OAAA;IAEX,MAAMC,OAAA,GAAUA,MAAA;MACd,MAAM;QAAEjD,KAAK;AAAEC,QAAAA;AAAM,OAAE,GAAG+C,QAAQR,qBAAqB,EAAA;AAEvD,MAAA,IAAIxC,KAAA,KAAU,IAAI,CAACY,OAAO,CAACZ,KAAK,IAAIC,MAAA,KAAW,IAAI,CAACW,OAAO,CAACX,MAAM,EAAE;QAClE,IAAI,CAACW,OAAO,GAAG;UAAEZ,KAAA;AAAOC,UAAAA;SAAO;AACjC,MAAA;IACF,CAAA;AAEA;AACAiD,IAAAA,QAAA,CAAS,aAAA,EAAeD,OAAA,CAAA;AAC1B,EAAA,CAAA,CAAA;AAEA,EAAA;IAAAE,oBAAA,CAAAC,kBAAA,CAAA,84BAAA,EA4BA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,QAAA;QAAAC,IAAA;QAAAC,aAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;AAEA,SAASD,aAAAA,CAActD,KAAU,EAAS;AACxC,EAAA,OAAO,CAAA,IAAA,EAAOA,KAAK,CAAC,CAAA,CAAE,CAAA,YAAA,CAAc;AACtC;;"}

package/dist/components/eui-screen-reader-only.js

@@ -0,0 +1,15 @@
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+
+/**
+ * Hides its content visually but keeps it for screen readers, e.g. a
+ * table caption or the text of an icon-only control. To hide one element
+ * without a wrapper, use the `screenReaderOnly` modifier instead.
+ */
+const EuiScreenReaderOnly = setComponentTemplate(precompileTemplate("<span class={{if @showOnFocus \"euiScreenReaderOnly--showOnFocus\" \"euiScreenReaderOnly\"}} ...attributes>{{yield}}</span>", {
+  strictMode: true
+}), templateOnly());
+
+export { EuiScreenReaderOnly as default };
+//# sourceMappingURL=eui-screen-reader-only.js.map

package/dist/components/eui-screen-reader-only.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-screen-reader-only.js","sources":["../../src/components/eui-screen-reader-only.gts"],"sourcesContent":["import type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/**\n * Hides its content visually but keeps it for screen readers, e.g. a\n * table caption or the text of an icon-only control. To hide one element\n * without a wrapper, use the `screenReaderOnly` modifier instead.\n */\nexport interface EuiScreenReaderOnlySignature {\n  Element: HTMLSpanElement;\n  Args: {\n    /**\n     * Shows the content while something in it has keyboard focus, e.g. a\n     * \"Skip to content\" link.\n     */\n    showOnFocus?: boolean;\n  };\n  Blocks: {\n    /** The content read by screen readers. */\n    default: [];\n  };\n}\n\nconst EuiScreenReaderOnly: TemplateOnlyComponent<EuiScreenReaderOnlySignature> =\n  <template>\n    <span\n      class={{if\n        @showOnFocus\n        \"euiScreenReaderOnly--showOnFocus\"\n        \"euiScreenReaderOnly\"\n      }}\n      ...attributes\n    >{{yield}}</span>\n  </template>;\n\nexport default EuiScreenReaderOnly;\n"],"names":["EuiScreenReaderOnly","setComponentTemplate","precompileTemplate","strictMode","templateOnly"],"mappings":";;;;AAEA;;;;AAIC;AAgBD,MAAMA,mBAA2C,GAAAC,oBAAA,CAC/CC,kBAAA,CAAA,6HAAA,EASA;EAAAC,UAAA,EAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}

package/dist/components/eui-select.js

@@ -10,7 +10,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const EuiSelect = setComponentTemplate(precompileTemplate("\n  {{#let (and (not (argOrDefault @isFakePrependBlock false)) (has-block \"prepend\")) (and (not (argOrDefault @isFakeAppendBlock false)) (has-block \"append\")) (argOrDefault @id (randomId)) as |hasPrepend hasAppend inputId|}}\n    {{#let (classNames (if @fullWidth \"euiSelect--fullWidth\") (if @compressed \"euiSelect--compressed\") (if (or hasPrepend hasAppend) \"euiSelect--inGroup\") (if @isLoading \"euiSelect--isLoading\") \"euiSelect\") (argOrDefault @hasNoInitialSelection false) as |classes hasNoInitialSelection|}}\n\n      <EuiFormControlLayout @clear={{@clear}} @icon=\"arrowDown\" @iconSide=\"right\" @fullWidth={{@fullWidth}} @isLoading={{@isLoading}} @compressed={{@compressed}} @disabled={{@disabled}} @useGroup={{or hasPrepend hasAppend}}>\n        <:prepend as |prependClasses|>\n          {{yield prependClasses inputId to=\"prepend\"}}\n        </:prepend>\n        <:field>\n          <select id={{inputId}} class={{classes}} disabled={{@disabled}} {{validatableControl @isInvalid}} {{didInsert (optional @inputRef)}} ...attributes>\n            {{#if hasNoInitialSelection}}\n              {{!-- template-lint-disable--}}\n              <option value disabled hidden style=\"display: none\" selected={{not @value}}></option>\n              {{!-- template-lint-enable--}}\n            {{/if}}\n            {{#each @options as |opt|}}\n              <option value={{opt.value}} selected={{eq @value opt.value}} disabled={{eq opt.disabled true}}>\n                {{opt.text}}\n              </option>\n            {{/each}}\n          </select>\n        </:field>\n        <:append as |appendClasses|>\n          {{yield appendClasses inputId to=\"append\"}}\n        </:append>\n      </EuiFormControlLayout>\n    {{/let}}\n  {{/let}}\n", {
+const EuiSelect = setComponentTemplate(precompileTemplate("{{#let (and (not (argOrDefault @isFakePrependBlock false)) (has-block \"prepend\")) (and (not (argOrDefault @isFakeAppendBlock false)) (has-block \"append\")) (argOrDefault @id (randomId)) as |hasPrepend hasAppend inputId|}}\n  {{#let (classNames (if @fullWidth \"euiSelect--fullWidth\") (if @compressed \"euiSelect--compressed\") (if (or hasPrepend hasAppend) \"euiSelect--inGroup\") (if @isLoading \"euiSelect--isLoading\") \"euiSelect\") (argOrDefault @hasNoInitialSelection false) as |classes hasNoInitialSelection|}}\n\n    <EuiFormControlLayout @clear={{@clear}} @icon=\"arrowDown\" @iconSide=\"right\" @fullWidth={{@fullWidth}} @isLoading={{@isLoading}} @compressed={{@compressed}} @disabled={{@disabled}} @useGroup={{or hasPrepend hasAppend}}>\n      <:prepend as |prependClasses|>\n        {{yield prependClasses inputId to=\"prepend\"}}\n      </:prepend>\n      <:field>\n        <select id={{inputId}} class={{classes}} disabled={{@disabled}} {{validatableControl @isInvalid}} {{didInsert (optional @inputRef)}} ...attributes>\n          {{#if hasNoInitialSelection}}\n            {{!-- template-lint-disable--}}\n            <option value disabled hidden style=\"display: none\" selected={{not @value}}></option>\n            {{!-- template-lint-enable--}}\n          {{/if}}\n          {{#each @options as |opt|}}\n            <option value={{opt.value}} selected={{eq @value opt.value}} disabled={{eq opt.disabled true}}>\n              {{opt.text}}\n            </option>\n          {{/each}}\n        </select>\n      </:field>\n      <:append as |appendClasses|>\n        {{yield appendClasses inputId to=\"append\"}}\n      </:append>\n    </EuiFormControlLayout>\n  {{/let}}\n{{/let}}", {
   strictMode: true,
   scope: () => ({
     and,

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

@@ -1 +1 @@
-{"version":3,"file":"eui-select.js","sources":["../../src/components/eui-select.gts"],"sourcesContent":["import didInsert from '@ember/render-modifiers/modifiers/did-insert';\n\nimport optional from '@nullvoxpopuli/ember-composable-helpers/helpers/optional';\nimport { and, eq, not, or } from 'ember-truth-helpers';\n\nimport randomId from '../-private/random-id.ts';\nimport EuiFormControlLayout from '../components/eui-form-control-layout.gts';\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport validatableControl from '../modifiers/validatable-control.ts';\n\nimport type { EuiFormControlLayoutSignature } from '../components/eui-form-control-layout';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiSelectSignature {\n  Element: HTMLSelectElement;\n  Args: {\n    id?: string;\n    options: {\n      value: string | number;\n      text: string | number;\n      disabled?: boolean;\n    }[];\n    value?: string | number;\n    fullWidth?: boolean;\n    compressed?: boolean;\n    isLoading?: boolean;\n    disabled?: boolean;\n    hasNoInitialSelection?: boolean;\n    isInvalid?: boolean;\n    clear?: (v: any) => void;\n    inputRef?: (element: HTMLSelectElement) => void;\n    isFakePrependBlock?: boolean;\n    isFakeAppendBlock?: boolean;\n  };\n  Blocks: {\n    prepend: [...EuiFormControlLayoutSignature['Blocks']['prepend'], string];\n    append: [...EuiFormControlLayoutSignature['Blocks']['append'], string];\n  };\n}\n\nconst EuiSelect: TemplateOnlyComponent<EuiSelectSignature> = <template>\n  {{#let\n    (and (not (argOrDefault @isFakePrependBlock false)) (has-block \"prepend\"))\n    (and (not (argOrDefault @isFakeAppendBlock false)) (has-block \"append\"))\n    (argOrDefault @id (randomId))\n    as |hasPrepend hasAppend inputId|\n  }}\n    {{#let\n      (classNames\n        (if @fullWidth \"euiSelect--fullWidth\")\n        (if @compressed \"euiSelect--compressed\")\n        (if (or hasPrepend hasAppend) \"euiSelect--inGroup\")\n        (if @isLoading \"euiSelect--isLoading\")\n        \"euiSelect\"\n      )\n      (argOrDefault @hasNoInitialSelection false)\n      as |classes hasNoInitialSelection|\n    }}\n\n      <EuiFormControlLayout\n        @clear={{@clear}}\n        @icon=\"arrowDown\"\n        @iconSide=\"right\"\n        @fullWidth={{@fullWidth}}\n        @isLoading={{@isLoading}}\n        @compressed={{@compressed}}\n        @disabled={{@disabled}}\n        @useGroup={{or hasPrepend hasAppend}}\n      >\n        <:prepend as |prependClasses|>\n          {{yield prependClasses inputId to=\"prepend\"}}\n        </:prepend>\n        <:field>\n          <select\n            id={{inputId}}\n            class={{classes}}\n            disabled={{@disabled}}\n            {{validatableControl @isInvalid}}\n            {{didInsert (optional @inputRef)}}\n            ...attributes\n          >\n            {{#if hasNoInitialSelection}}\n              {{! template-lint-disable}}\n              <option\n                value=\"\"\n                disabled\n                hidden\n                style=\"display: none\"\n                selected={{not @value}}\n              ></option>\n              {{! template-lint-enable}}\n            {{/if}}\n            {{#each @options as |opt|}}\n              <option\n                value={{opt.value}}\n                selected={{eq @value opt.value}}\n                disabled={{eq opt.disabled true}}\n              >\n                {{opt.text}}\n              </option>\n            {{/each}}\n          </select>\n        </:field>\n        <:append as |appendClasses|>\n          {{yield appendClasses inputId to=\"append\"}}\n        </:append>\n      </EuiFormControlLayout>\n    {{/let}}\n  {{/let}}\n</template>;\n\nexport default EuiSelect;\n"],"names":["EuiSelect","setComponentTemplate","precompileTemplate","strictMode","scope","and","not","argOrDefault","randomId","classNames","or","EuiFormControlLayout","validatableControl","didInsert","optional","eq","templateOnly"],"mappings":";;;;;;;;;;;;AAyCA,MAAMA,SAAuD,GAAAC,oBAAA,CAAAC,kBAAA,CAqE7D,kuDAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,GAAA;IAAAC,GAAA;IAAAC,YAAA;IAAAC,QAAA;IAAAC,UAAA;IAAAC,EAAA;IAAAC,oBAAA;IAAAC,kBAAA;IAAAC,SAAA;IAAAC,QAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-select.js","sources":["../../src/components/eui-select.gts"],"sourcesContent":["import didInsert from '@ember/render-modifiers/modifiers/did-insert';\n\nimport optional from '@nullvoxpopuli/ember-composable-helpers/helpers/optional';\nimport { and, eq, not, or } from 'ember-truth-helpers';\n\nimport randomId from '../-private/random-id.ts';\nimport EuiFormControlLayout from '../components/eui-form-control-layout.gts';\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport validatableControl from '../modifiers/validatable-control.ts';\n\nimport type { EuiFormControlLayoutSignature } from '../components/eui-form-control-layout';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** A native `<select>` styled like EUI's inputs. For search or multiple values use EuiComboBox. */\nexport interface EuiSelectSignature {\n  Element: HTMLSelectElement;\n  Args: {\n    /** Id of the select. Defaults to a random id. */\n    id?: string;\n    /** The options: `[{ value: 'a', text: 'Option A', disabled? }]`. */\n    options: {\n      value: string | number;\n      text: string | number;\n      disabled?: boolean;\n    }[];\n    /** The selected option's `value`. Update it from `{{on \"change\" …}}`. */\n    value?: string | number;\n    /** Stretches the select to its container's width. */\n    fullWidth?: boolean;\n    /** Shorter select, for dense forms. */\n    compressed?: boolean;\n    /** Shows a spinner. */\n    isLoading?: boolean;\n    /** Disables the select. */\n    disabled?: boolean;\n    /**\n     * Adds an empty first option, selected while `@value` is empty, so no\n     * option is preselected. Defaults to `false`.\n     */\n    hasNoInitialSelection?: boolean;\n    /** Shows the invalid state and marks it invalid for native form validation. */\n    isInvalid?: boolean;\n    /** Shows a clear (\"x\") button calling this function. */\n    clear?: (v: any) => void;\n    /** Called with the `<select>` element once rendered. */\n    inputRef?: (element: HTMLSelectElement) => void;\n    /** @private Ignore the `<:prepend>` block. */\n    isFakePrependBlock?: boolean;\n    /** @private Ignore the `<:append>` block. */\n    isFakeAppendBlock?: boolean;\n  };\n  Blocks: {\n    /** Content before the select; yields the class to put on it and the id. */\n    prepend: [...EuiFormControlLayoutSignature['Blocks']['prepend'], string];\n    /** Content after the select; yields the class to put on it and the id. */\n    append: [...EuiFormControlLayoutSignature['Blocks']['append'], string];\n  };\n}\n\nconst EuiSelect: TemplateOnlyComponent<EuiSelectSignature> = <template>\n  {{#let\n    (and (not (argOrDefault @isFakePrependBlock false)) (has-block \"prepend\"))\n    (and (not (argOrDefault @isFakeAppendBlock false)) (has-block \"append\"))\n    (argOrDefault @id (randomId))\n    as |hasPrepend hasAppend inputId|\n  }}\n    {{#let\n      (classNames\n        (if @fullWidth \"euiSelect--fullWidth\")\n        (if @compressed \"euiSelect--compressed\")\n        (if (or hasPrepend hasAppend) \"euiSelect--inGroup\")\n        (if @isLoading \"euiSelect--isLoading\")\n        \"euiSelect\"\n      )\n      (argOrDefault @hasNoInitialSelection false)\n      as |classes hasNoInitialSelection|\n    }}\n\n      <EuiFormControlLayout\n        @clear={{@clear}}\n        @icon=\"arrowDown\"\n        @iconSide=\"right\"\n        @fullWidth={{@fullWidth}}\n        @isLoading={{@isLoading}}\n        @compressed={{@compressed}}\n        @disabled={{@disabled}}\n        @useGroup={{or hasPrepend hasAppend}}\n      >\n        <:prepend as |prependClasses|>\n          {{yield prependClasses inputId to=\"prepend\"}}\n        </:prepend>\n        <:field>\n          <select\n            id={{inputId}}\n            class={{classes}}\n            disabled={{@disabled}}\n            {{validatableControl @isInvalid}}\n            {{didInsert (optional @inputRef)}}\n            ...attributes\n          >\n            {{#if hasNoInitialSelection}}\n              {{! template-lint-disable}}\n              <option\n                value=\"\"\n                disabled\n                hidden\n                style=\"display: none\"\n                selected={{not @value}}\n              ></option>\n              {{! template-lint-enable}}\n            {{/if}}\n            {{#each @options as |opt|}}\n              <option\n                value={{opt.value}}\n                selected={{eq @value opt.value}}\n                disabled={{eq opt.disabled true}}\n              >\n                {{opt.text}}\n              </option>\n            {{/each}}\n          </select>\n        </:field>\n        <:append as |appendClasses|>\n          {{yield appendClasses inputId to=\"append\"}}\n        </:append>\n      </EuiFormControlLayout>\n    {{/let}}\n  {{/let}}\n</template>;\n\nexport default EuiSelect;\n"],"names":["EuiSelect","setComponentTemplate","precompileTemplate","strictMode","scope","and","not","argOrDefault","randomId","classNames","or","EuiFormControlLayout","validatableControl","didInsert","optional","eq","templateOnly"],"mappings":";;;;;;;;;;;;AA4DA,MAAMA,SAAiC,GAAAC,oBAAA,CAAsBC,kBAAA,CAAA,0qDAAA,EAqE7D;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,GAAA;IAAAC,GAAA;IAAAC,YAAA;IAAAC,QAAA;IAAAC,UAAA;IAAAC,EAAA;IAAAC,oBAAA;IAAAC,kBAAA;IAAAC,SAAA;IAAAC,QAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}