@ember-eui/core 14.0.0 → 14.1.0

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":"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"}

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.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,0qDAAA,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;;"}

package/dist/components/eui-selectable-list-item.js

@@ -1,20 +1,86 @@
-import { eq, not, and } from 'ember-truth-helpers';
-import classNames from '../helpers/class-names.js';
-import typeOf from '../helpers/type-of.js';
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import EuiBadge from './eui-badge.js';
+import EuiIcon from './eui-icon.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';
+import { g, i } from 'decorator-transforms/runtime-esm';
 
-const EuiSelectableListItem = setComponentTemplate(precompileTemplate("{{!-- TODO: not fully implemented --}}\n<li role=\"option\" aria-selected={{if (and (not @disabled) (eq (typeOf @checked) \"string\")) \"true\" \"false\"}} class={{classNames componentName=\"EuiSelectableListItem\" isFocused=@isFocused}} aria-disabled={{if @disabled \"true\"}} ...attributes>\n  <span class=\"euiSelectableListItem__content\">\n    {{!-- {{optionIcon}} --}}\n    {{!-- {{prependNode}} --}}\n    <span class=\"euiSelectableListItem__text\">\n      {{yield}}\n      {{!-- {{state}} --}}\n      {{!-- {{children}} --}}\n      {{!-- {{instruction}} --}}\n    </span>\n    {{!-- {{appendNode}} --}}\n  </span>\n</li>", {
-  strictMode: true,
-  scope: () => ({
-    and,
-    not,
-    eq,
-    typeOf,
-    classNames
-  })
-}), templateOnly());
+class EuiSelectableListItem extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  get isChecked() {
+    return typeof this.args.checked === 'string' || this.args.checked === true;
+  }
+  get icon() {
+    const {
+      checked
+    } = this.args;
+    if (checked === 'off') return 'cross';
+    return checked ? 'check' : 'empty';
+  }
+  get showIcons() {
+    return this.args.showIcons !== false;
+  }
+  get focusBadge() {
+    const badge = this.args.onFocusBadge;
+    return typeof badge === 'object' ? badge : {};
+  }
+  get hasPrepend() {
+    return this.args.hasPrepend ?? Boolean(this.args.prepend);
+  }
+  get hasAppend() {
+    return this.args.hasAppend ?? Boolean(this.args.append);
+  }
+  get showFocusBadge() {
+    return this.args.onFocusBadge !== false && Boolean(this.args.isFocused) && !this.args.disabled;
+  }
+  get exclusionState() {
+    if (!this.args.allowExclusions) return undefined;
+    if (this.args.checked === 'on') {
+      return {
+        state: this.euiI18n.lookupToken('euiSelectableListItem.includedOption', 'Included option.'),
+        instruction: this.euiI18n.lookupToken('euiSelectableListItem.includedOptionInstructions', 'To exclude this option, press enter.')
+      };
+    }
+    if (this.args.checked === 'off') {
+      return {
+        state: this.euiI18n.lookupToken('euiSelectableListItem.excludedOption', 'Excluded option.'),
+        instruction: this.euiI18n.lookupToken('euiSelectableListItem.excludedOptionInstructions', 'To deselect this option, press enter.')
+      };
+    }
+    return undefined;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<li role=\"option\" aria-selected={{if (and2 (not2 @disabled) this.isChecked) \"true\" \"false\"}} class=\"euiSelectableListItem\n    {{if @isFocused \"euiSelectableListItem-isFocused\"}}\" aria-disabled={{if @disabled \"true\"}} ...attributes>\n  <span class=\"euiSelectableListItem__content\">\n    {{#if this.showIcons}}\n      <EuiIcon class=\"euiSelectableListItem__icon\" @type={{this.icon}} @color={{if @checked \"text\"}} />\n    {{/if}}\n    {{#if (or2 this.hasPrepend (and2 (has-block \"prepend\") (isUndefined @hasPrepend)))}}\n      <span class=\"euiSelectableListItem__prepend\">\n        {{~#if (has-block \"prepend\")}}{{yield to=\"prepend\"}}{{else}}{{@prepend}}{{/if~}}\n      </span>\n    {{/if}}\n    <span class=\"euiSelectableListItem__text\">\n      {{#if this.exclusionState}}\n        <EuiScreenReaderOnly>{{this.exclusionState.state}}</EuiScreenReaderOnly>\n      {{/if}}\n      {{yield}}\n      {{#if this.exclusionState}}\n        <EuiScreenReaderOnly>{{this.exclusionState.instruction}}</EuiScreenReaderOnly>\n      {{/if}}\n    </span>\n    {{#if (or2 (or2 this.hasAppend (and2 (has-block \"append\") (isUndefined @hasAppend))) this.showFocusBadge)}}\n      <span class=\"euiSelectableListItem__append\">\n        {{#if (has-block \"append\")}}\n          {{yield to=\"append\"}}\n        {{else}}\n          {{@append}}\n        {{/if}}\n        {{#if this.showFocusBadge}}\n          <EuiBadge class=\"euiSelectableListItem__onFocusBadge\" @iconType=\"returnKey\" @iconSide={{if this.focusBadge.iconSide this.focusBadge.iconSide \"left\"}} @color=\"hollow\" aria-hidden=\"true\">{{this.focusBadge.text}}</EuiBadge>\n        {{/if}}\n      </span>\n    {{/if}}\n  </span>\n</li>", {
+      strictMode: true,
+      scope: () => ({
+        and2,
+        not2,
+        EuiIcon,
+        or2,
+        isUndefined,
+        EuiScreenReaderOnly,
+        EuiBadge
+      })
+    }), this);
+  }
+}
+function and2(a, b) {
+  return Boolean(a && b);
+}
+function or2(a, b) {
+  return Boolean(a || b);
+}
+function isUndefined(a) {
+  return a === undefined;
+}
+function not2(a) {
+  return !a;
+}
 
 export { EuiSelectableListItem as default };
 //# sourceMappingURL=eui-selectable-list-item.js.map

package/dist/components/eui-selectable-list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-selectable-list-item.js","sources":["../../src/components/eui-selectable-list-item.gts"],"sourcesContent":["import { and,eq, not } from 'ember-truth-helpers';\n\nimport classNames from '../helpers/class-names.ts';\nimport typeOf from '../helpers/type-of.ts';\n\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiSelectableListItemSignature {\n  Element: HTMLLIElement;\n  Args: {\n    isFocused?: boolean;\n    disabled?: boolean;\n    checked?: boolean | 'on' | 'off';\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nconst EuiSelectableListItem: TemplateOnlyComponent<EuiSelectableListItemSignature> =\n  <template>\n    {{! TODO: not fully implemented }}\n    <li\n      role=\"option\"\n      aria-selected={{if\n        (and (not @disabled) (eq (typeOf @checked) \"string\"))\n        \"true\"\n        \"false\"\n      }}\n      class={{classNames\n        componentName=\"EuiSelectableListItem\"\n        isFocused=@isFocused\n      }}\n      aria-disabled={{if @disabled \"true\"}}\n      ...attributes\n    >\n      <span class=\"euiSelectableListItem__content\">\n        {{!-- {{optionIcon}} --}}\n        {{!-- {{prependNode}} --}}\n        <span class=\"euiSelectableListItem__text\">\n          {{yield}}\n          {{!-- {{state}} --}}\n          {{!-- {{children}} --}}\n          {{!-- {{instruction}} --}}\n        </span>\n        {{!-- {{appendNode}} --}}\n      </span>\n    </li>\n  </template>;\n\nexport default EuiSelectableListItem;\n"],"names":["EuiSelectableListItem","setComponentTemplate","precompileTemplate","strictMode","scope","and","not","eq","typeOf","classNames","templateOnly"],"mappings":";;;;;;;AAmBA,MAAMA,qBACJ,GAAAC,oBAAA,CAAAC,kBAAA,CA4BA,snBAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,GAAA;IAAAC,GAAA;IAAAC,EAAA;IAAAC,MAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-selectable-list-item.js","sources":["../../src/components/eui-selectable-list-item.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { service } from '@ember/service';\n\nimport EuiBadge from './eui-badge.gts';\nimport EuiIcon from './eui-icon.gts';\nimport EuiScreenReaderOnly from './eui-screen-reader-only.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\n\n/**\n * One option of an `EuiSelectable` list: a check mark (or a cross when\n * excluded), the label, and optional prepend / append content. Usually\n * rendered for you by `EuiSelectable`.\n */\nexport interface EuiSelectableListItemSignature {\n  Element: HTMLLIElement;\n  Args: {\n    /** Highlights it as the keyboard's current option. */\n    isFocused?: boolean;\n    /** Disables the option. */\n    disabled?: boolean;\n    /** `'on'` (check mark), `'off'` (cross, excluded) or nothing. */\n    checked?: boolean | 'on' | 'off';\n    /** Shows the check mark / cross column. Defaults to `true`. */\n    showIcons?: boolean;\n    /** Text before the label. Use the `<:prepend>` block for markup. */\n    prepend?: string;\n    /** Text after the label. Use the `<:append>` block for markup. */\n    append?: string;\n    /** Tells screen readers that Enter includes / excludes the option. */\n    allowExclusions?: boolean;\n    /**\n     * Shows a \"return key\" badge on the focused option, to hint that\n     * Enter selects it: `true`, `false`, or `{ text, iconSide }` for a\n     * badge with text (e.g. \"Go to\"). Defaults to `true`.\n     */\n    onFocusBadge?: boolean | { text?: string; iconSide?: 'left' | 'right' };\n    /** Renders the prepend wrapper (for blocks that may be empty). */\n    hasPrepend?: boolean;\n    /** Renders the append wrapper (for blocks that may be empty). */\n    hasAppend?: boolean;\n  };\n  Blocks: {\n    /** The label. */\n    default: [];\n    /** Content before the label, e.g. an icon or avatar. */\n    prepend: [];\n    /** Content after the label, e.g. a count badge. */\n    append: [];\n  };\n}\n\nexport default class EuiSelectableListItem extends Component<EuiSelectableListItemSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  get isChecked(): boolean {\n    return typeof this.args.checked === 'string' || this.args.checked === true;\n  }\n\n  get icon(): string {\n    const { checked } = this.args;\n\n    if (checked === 'off') return 'cross';\n\n    return checked ? 'check' : 'empty';\n  }\n\n  get showIcons(): boolean {\n    return this.args.showIcons !== false;\n  }\n\n  get focusBadge(): { text?: string; iconSide?: 'left' | 'right' } {\n    const badge = this.args.onFocusBadge;\n\n    return typeof badge === 'object' ? badge : {};\n  }\n\n  get hasPrepend(): boolean {\n    return this.args.hasPrepend ?? Boolean(this.args.prepend);\n  }\n\n  get hasAppend(): boolean {\n    return this.args.hasAppend ?? Boolean(this.args.append);\n  }\n\n  get showFocusBadge(): boolean {\n    return this.args.onFocusBadge !== false && Boolean(this.args.isFocused) && !this.args.disabled;\n  }\n\n  get exclusionState(): { state: string; instruction: string } | undefined {\n    if (!this.args.allowExclusions) return undefined;\n\n    if (this.args.checked === 'on') {\n      return {\n        state: this.euiI18n.lookupToken('euiSelectableListItem.includedOption', 'Included option.'),\n        instruction: this.euiI18n.lookupToken(\n          'euiSelectableListItem.includedOptionInstructions',\n          'To exclude this option, press enter.'\n        )\n      };\n    }\n\n    if (this.args.checked === 'off') {\n      return {\n        state: this.euiI18n.lookupToken('euiSelectableListItem.excludedOption', 'Excluded option.'),\n        instruction: this.euiI18n.lookupToken(\n          'euiSelectableListItem.excludedOptionInstructions',\n          'To deselect this option, press enter.'\n        )\n      };\n    }\n\n    return undefined;\n  }\n\n  <template>\n    <li\n      role=\"option\"\n      aria-selected={{if (and2 (not2 @disabled) this.isChecked) \"true\" \"false\"}}\n      class=\"euiSelectableListItem\n        {{if @isFocused 'euiSelectableListItem-isFocused'}}\"\n      aria-disabled={{if @disabled \"true\"}}\n      ...attributes\n    >\n      <span class=\"euiSelectableListItem__content\">\n        {{#if this.showIcons}}\n          <EuiIcon\n            class=\"euiSelectableListItem__icon\"\n            @type={{this.icon}}\n            @color={{if @checked \"text\"}}\n          />\n        {{/if}}\n        {{#if (or2 this.hasPrepend (and2 (has-block \"prepend\") (isUndefined @hasPrepend)))}}\n          <span class=\"euiSelectableListItem__prepend\">\n            {{~#if (has-block \"prepend\")}}{{yield to=\"prepend\"}}{{else}}{{@prepend}}{{/if~}}\n          </span>\n        {{/if}}\n        <span class=\"euiSelectableListItem__text\">\n          {{#if this.exclusionState}}\n            <EuiScreenReaderOnly>{{this.exclusionState.state}}</EuiScreenReaderOnly>\n          {{/if}}\n          {{yield}}\n          {{#if this.exclusionState}}\n            <EuiScreenReaderOnly>{{this.exclusionState.instruction}}</EuiScreenReaderOnly>\n          {{/if}}\n        </span>\n        {{#if\n          (or2\n            (or2 this.hasAppend (and2 (has-block \"append\") (isUndefined @hasAppend)))\n            this.showFocusBadge\n          )\n        }}\n          <span class=\"euiSelectableListItem__append\">\n            {{#if (has-block \"append\")}}\n              {{yield to=\"append\"}}\n            {{else}}\n              {{@append}}\n            {{/if}}\n            {{#if this.showFocusBadge}}\n              <EuiBadge\n                class=\"euiSelectableListItem__onFocusBadge\"\n                @iconType=\"returnKey\"\n                @iconSide={{if this.focusBadge.iconSide this.focusBadge.iconSide \"left\"}}\n                @color=\"hollow\"\n                aria-hidden=\"true\"\n              >{{this.focusBadge.text}}</EuiBadge>\n            {{/if}}\n          </span>\n        {{/if}}\n      </span>\n    </li>\n  </template>\n}\n\nfunction and2(a: unknown, b: unknown): boolean {\n  return Boolean(a && b);\n}\n\nfunction or2(a: unknown, b: unknown): boolean {\n  return Boolean(a || b);\n}\n\nfunction isUndefined(a: unknown): boolean {\n  return a === undefined;\n}\n\nfunction not2(a: unknown): boolean {\n  return !a;\n}\n"],"names":["EuiSelectableListItem","Component","g","prototype","service","i","isChecked","args","checked","icon","showIcons","focusBadge","badge","onFocusBadge","hasPrepend","Boolean","prepend","hasAppend","append","showFocusBadge","isFocused","disabled","exclusionState","allowExclusions","undefined","state","euiI18n","lookupToken","instruction","setComponentTemplate","precompileTemplate","strictMode","scope","and2","not2","EuiIcon","or2","isUndefined","EuiScreenReaderOnly","EuiBadge","a","b"],"mappings":"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"}

package/dist/components/eui-selectable-list.js

@@ -0,0 +1,106 @@
+import Component from '@glimmer/component';
+import { fn, hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { modifier } from 'ember-modifier';
+import cssStyle from '../-private/css-style.js';
+import EuiHighlight from './eui-highlight.js';
+import EuiSelectableListItem from './eui-selectable-list-item.js';
+import { toggleOption } from '../-private/selectable-options.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { n } from 'decorator-transforms/runtime-esm';
+
+const MAX_VISIBLE_OPTIONS = 7;
+/**
+ * The list of an `EuiSelectable`: renders the options, checks and
+ * unchecks them on click, and scrolls the keyboard's current option into
+ * view. Usually rendered for you by `EuiSelectable`.
+ */
+
+class EuiSelectableList extends Component {
+  get optionArray() {
+    return this.args.visibleOptions ?? this.args.options;
+  }
+  get rowHeight() {
+    return this.args.rowHeight ?? 32;
+  }
+  get isFullHeight() {
+    return this.args.height === 'full';
+  }
+  get listHeight() {
+    if (this.isFullHeight) return undefined;
+    if (typeof this.args.height === 'number') return this.args.height;
+    const count = this.optionArray.length;
+    // show half of the last one to hint there is more to scroll to
+    return count > MAX_VISIBLE_OPTIONS ? (MAX_VISIBLE_OPTIONS - 0.5) * this.rowHeight : count * this.rowHeight;
+  }
+  get classes() {
+    return ['euiSelectableList', this.isFullHeight && 'euiSelectableList-fullHeight', this.args.bordered && 'euiSelectableList-bordered'].filter(Boolean).join(' ');
+  }
+  get isMultiSelectable() {
+    return !this.args.searchable && !this.args.singleSelection;
+  }
+  get groupLabelCount() {
+    return this.optionArray.filter(option => option.isGroupLabel).length;
+  }
+  optionId = index => this.args.makeOptionId?.(index);
+  isFocused = index => this.args.activeOptionIndex === index;
+  posInSet = index => index + 1 - this.groupLabelCount;
+  onOptionMouseDown(index) {
+    this.args.setActiveOptionIndex?.(index);
+  }
+  static {
+    n(this.prototype, "onOptionMouseDown", [action]);
+  }
+  onOptionClick(option) {
+    this.toggleOption(option);
+  }
+  static {
+    n(this.prototype, "onOptionClick", [action]);
+  }
+  toggleOption(option) {
+    const options = toggleOption(this.args.options, option, {
+      allowExclusions: this.args.allowExclusions,
+      singleSelection: this.args.singleSelection
+    });
+    if (options) this.args.onOptionClick(options);
+  }
+  /** Keeps the keyboard's current option in view. */
+  scrollActiveIntoView = modifier((list, [index]) => {
+    if (index === undefined || index < 0) return;
+    const item = list.querySelectorAll(':scope > ul > li')[index];
+    item?.scrollIntoView?.({
+      block: 'nearest'
+    });
+  });
+  static {
+    setComponentTemplate(precompileTemplate("<div class={{this.classes}} ...attributes>\n  <div class=\"euiSelectableList__list\" tabindex=\"-1\" style={{cssStyle (hash height=this.listHeight overflowY=\"auto\" position=\"relative\")}} {{this.scrollActiveIntoView @activeOptionIndex}}>\n    <ul id={{@listId}} role=\"listbox\" tabindex={{unless @searchable \"0\"}} aria-multiselectable={{if this.isMultiSelectable \"true\"}}>\n      {{#let (flag @hasOption (has-block \"option\")) (flag @hasOptionPrepend (has-block \"optionPrepend\")) (flag @hasOptionAppend (has-block \"optionAppend\")) as |customOption customPrepend customAppend|}}\n      {{#each this.optionArray as |option index|}}\n        {{#if option.isGroupLabel}}\n          <li role=\"presentation\" class=\"euiSelectableList__groupLabel\" style={{cssStyle (hash height=this.rowHeight)}}>{{option.prepend}}{{option.label}}{{option.append}}</li>\n        {{else}}\n          <EuiSelectableListItem id={{this.optionId index}} class={{option.className}} style={{cssStyle (hash height=this.rowHeight)}} title={{if option.searchableLabel option.searchableLabel option.label}} aria-posinset={{this.posInSet index}} aria-setsize={{sub this.optionArray.length this.groupLabelCount}} @isFocused={{this.isFocused index}} @checked={{option.checked}} @disabled={{option.disabled}} @hasPrepend={{or2 customPrepend option.prepend}} @hasAppend={{or2 customAppend option.append}} @showIcons={{@showIcons}} @onFocusBadge={{@onFocusBadge}} @allowExclusions={{@allowExclusions}} {{on \"mousedown\" (fn this.onOptionMouseDown index)}} {{on \"click\" (fn this.onOptionClick option)}}>\n            <:default>\n              {{#if customOption}}\n                {{yield option (if @searchValue @searchValue \"\") to=\"option\"}}\n              {{else}}\n                <EuiHighlight @text={{option.label}} @search={{@searchValue}} />\n              {{/if}}\n            </:default>\n            <:prepend>\n              {{~#if customPrepend}}{{yield option to=\"optionPrepend\"}}{{else}}{{option.prepend}}{{/if~}}\n            </:prepend>\n            <:append>\n              {{~#if customAppend}}{{yield option to=\"optionAppend\"}}{{else}}{{option.append}}{{/if~}}\n            </:append>\n          </EuiSelectableListItem>\n        {{/if}}\n      {{/each}}\n      {{/let}}\n    </ul>\n  </div>\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        cssStyle,
+        hash,
+        flag,
+        EuiSelectableListItem,
+        sub,
+        or2,
+        on,
+        fn,
+        EuiHighlight
+      })
+    }), this);
+  }
+}
+// an explicit flag (blocks forwarded by EuiSelectable) or the block itself
+function flag(explicit, hasBlock) {
+  return explicit ?? hasBlock;
+}
+function or2(a, b) {
+  return Boolean(a || b);
+}
+function sub(a, b) {
+  return a - b;
+}
+
+export { EuiSelectableList as default };
+//# sourceMappingURL=eui-selectable-list.js.map

package/dist/components/eui-selectable-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-selectable-list.js","sources":["../../src/components/eui-selectable-list.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { fn, hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\n\nimport { modifier } from 'ember-modifier';\n\nimport cssStyle from '../-private/css-style.ts';\nimport EuiHighlight from './eui-highlight.gts';\nimport EuiSelectableListItem from './eui-selectable-list-item.gts';\n\nimport { toggleOption } from '../-private/selectable-options.ts';\n\nimport type { EuiSelectableOption } from '../-private/selectable-options.ts';\n\nexport type { EuiSelectableOption };\n\nconst MAX_VISIBLE_OPTIONS = 7;\n\n/**\n * The list of an `EuiSelectable`: renders the options, checks and\n * unchecks them on click, and scrolls the keyboard's current option into\n * view. Usually rendered for you by `EuiSelectable`.\n */\nexport interface EuiSelectableListSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** All options; `@onOptionClick` gets them with the change applied. */\n    options: EuiSelectableOption[];\n    /** The options to show (e.g. those matching a search). Defaults to all. */\n    visibleOptions?: EuiSelectableOption[];\n    /** The search, highlighted in the labels. */\n    searchValue?: string;\n    /** Index (in the visible options) of the keyboard's current option. */\n    activeOptionIndex?: number;\n    /** Called when an option is pressed, to make it the current one. */\n    setActiveOptionIndex?: (index: number) => void;\n    /** Called with all options after one is checked or unchecked. */\n    onOptionClick: (options: EuiSelectableOption[]) => void;\n    /**\n     * `true`: one option at most; `'always'`: exactly one (it cannot be\n     * unchecked).\n     */\n    singleSelection?: boolean | 'always';\n    /** Pressing a checked option excludes it (`checked: 'off'`) first. */\n    allowExclusions?: boolean;\n    /** Shows the check mark column. Defaults to `true`. */\n    showIcons?: boolean;\n    /**\n     * Shows the \"return key\" badge on the current option: `true`, `false`\n     * or `{ text, iconSide }`. Defaults to `true`.\n     */\n    onFocusBadge?: boolean | { text?: string; iconSide?: 'left' | 'right' };\n    /** Adds a border around the list. */\n    bordered?: boolean;\n    /** Height of each option in px. Defaults to `32`. */\n    rowHeight?: number;\n    /**\n     * Height of the list in px, or `'full'` to fill its container. By\n     * default it shows up to 7 options (and half of the next one).\n     */\n    height?: number | 'full';\n    /** `id` of the `<ul role=\"listbox\">`. */\n    listId?: string;\n    /** Id of each option's `<li>`, for `aria-activedescendant`. */\n    makeOptionId?: (index: number) => string;\n    /** The list is driven from a search field (which keeps focus). */\n    searchable?: boolean;\n    /** @private Whether `<:option>` is given (when blocks are forwarded). */\n    hasOption?: boolean;\n    /** @private Whether `<:optionPrepend>` is given. */\n    hasOptionPrepend?: boolean;\n    /** @private Whether `<:optionAppend>` is given. */\n    hasOptionAppend?: boolean;\n  };\n  Blocks: {\n    /** Renders an option's label yourself; yields the option and the search. */\n    option: [option: EuiSelectableOption, searchValue: string];\n    /** Content before each label (e.g. an icon); yields the option. */\n    optionPrepend: [option: EuiSelectableOption];\n    /** Content after each label (e.g. a badge); yields the option. */\n    optionAppend: [option: EuiSelectableOption];\n  };\n}\n\nexport default class EuiSelectableList extends Component<EuiSelectableListSignature> {\n  get optionArray(): EuiSelectableOption[] {\n    return this.args.visibleOptions ?? this.args.options;\n  }\n\n  get rowHeight(): number {\n    return this.args.rowHeight ?? 32;\n  }\n\n  get isFullHeight(): boolean {\n    return this.args.height === 'full';\n  }\n\n  get listHeight(): number | undefined {\n    if (this.isFullHeight) return undefined;\n    if (typeof this.args.height === 'number') return this.args.height;\n\n    const count = this.optionArray.length;\n\n    // show half of the last one to hint there is more to scroll to\n    return count > MAX_VISIBLE_OPTIONS\n      ? (MAX_VISIBLE_OPTIONS - 0.5) * this.rowHeight\n      : count * this.rowHeight;\n  }\n\n  get classes(): string {\n    return [\n      'euiSelectableList',\n      this.isFullHeight && 'euiSelectableList-fullHeight',\n      this.args.bordered && 'euiSelectableList-bordered'\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  get isMultiSelectable(): boolean {\n    return !this.args.searchable && !this.args.singleSelection;\n  }\n\n  get groupLabelCount(): number {\n    return this.optionArray.filter((option) => option.isGroupLabel).length;\n  }\n\n  optionId = (index: number): string | undefined => this.args.makeOptionId?.(index);\n\n  isFocused = (index: number): boolean => this.args.activeOptionIndex === index;\n\n  posInSet = (index: number): number => index + 1 - this.groupLabelCount;\n\n  @action\n  onOptionMouseDown(index: number): void {\n    this.args.setActiveOptionIndex?.(index);\n  }\n\n  @action\n  onOptionClick(option: EuiSelectableOption): void {\n    this.toggleOption(option);\n  }\n\n  toggleOption(option: EuiSelectableOption): void {\n    const options = toggleOption(this.args.options, option, {\n      allowExclusions: this.args.allowExclusions,\n      singleSelection: this.args.singleSelection\n    });\n\n    if (options) this.args.onOptionClick(options);\n  }\n\n  /** Keeps the keyboard's current option in view. */\n  scrollActiveIntoView = modifier((list: HTMLElement, [index]: [number | undefined]) => {\n    if (index === undefined || index < 0) return;\n\n    const item = list.querySelectorAll<HTMLElement>(':scope > ul > li')[index];\n\n    item?.scrollIntoView?.({ block: 'nearest' });\n  });\n\n  <template>\n    <div class={{this.classes}} ...attributes>\n      <div\n        class=\"euiSelectableList__list\"\n        tabindex=\"-1\"\n        style={{cssStyle\n          (hash height=this.listHeight overflowY=\"auto\" position=\"relative\")\n        }}\n        {{this.scrollActiveIntoView @activeOptionIndex}}\n      >\n        <ul\n          id={{@listId}}\n          role=\"listbox\"\n          tabindex={{unless @searchable \"0\"}}\n          aria-multiselectable={{if this.isMultiSelectable \"true\"}}\n        >\n          {{#let\n            (flag @hasOption (has-block \"option\"))\n            (flag @hasOptionPrepend (has-block \"optionPrepend\"))\n            (flag @hasOptionAppend (has-block \"optionAppend\"))\n            as |customOption customPrepend customAppend|\n          }}\n          {{#each this.optionArray as |option index|}}\n            {{#if option.isGroupLabel}}\n              <li\n                role=\"presentation\"\n                class=\"euiSelectableList__groupLabel\"\n                style={{cssStyle (hash height=this.rowHeight)}}\n              >{{option.prepend}}{{option.label}}{{option.append}}</li>\n            {{else}}\n              <EuiSelectableListItem\n                id={{this.optionId index}}\n                class={{option.className}}\n                style={{cssStyle (hash height=this.rowHeight)}}\n                title={{if option.searchableLabel option.searchableLabel option.label}}\n                aria-posinset={{this.posInSet index}}\n                aria-setsize={{sub this.optionArray.length this.groupLabelCount}}\n                @isFocused={{this.isFocused index}}\n                @checked={{option.checked}}\n                @disabled={{option.disabled}}\n                @hasPrepend={{or2 customPrepend option.prepend}}\n                @hasAppend={{or2 customAppend option.append}}\n                @showIcons={{@showIcons}}\n                @onFocusBadge={{@onFocusBadge}}\n                @allowExclusions={{@allowExclusions}}\n                {{on \"mousedown\" (fn this.onOptionMouseDown index)}}\n                {{on \"click\" (fn this.onOptionClick option)}}\n              >\n                <:default>\n                  {{#if customOption}}\n                    {{yield option (if @searchValue @searchValue \"\") to=\"option\"}}\n                  {{else}}\n                    <EuiHighlight @text={{option.label}} @search={{@searchValue}} />\n                  {{/if}}\n                </:default>\n                <:prepend>\n                  {{~#if customPrepend}}{{yield option to=\"optionPrepend\"}}{{else}}{{option.prepend}}{{/if~}}\n                </:prepend>\n                <:append>\n                  {{~#if customAppend}}{{yield option to=\"optionAppend\"}}{{else}}{{option.append}}{{/if~}}\n                </:append>\n              </EuiSelectableListItem>\n            {{/if}}\n          {{/each}}\n          {{/let}}\n        </ul>\n      </div>\n    </div>\n  </template>\n}\n\n// an explicit flag (blocks forwarded by EuiSelectable) or the block itself\nfunction flag(explicit: boolean | undefined, hasBlock: boolean): boolean {\n  return explicit ?? hasBlock;\n}\n\nfunction or2(a: unknown, b: unknown): boolean {\n  return Boolean(a || b);\n}\n\nfunction sub(a: number, b: number): number {\n  return a - b;\n}\n"],"names":["MAX_VISIBLE_OPTIONS","EuiSelectableList","Component","optionArray","args","visibleOptions","options","rowHeight","isFullHeight","height","listHeight","undefined","count","length","classes","bordered","filter","Boolean","join","isMultiSelectable","searchable","singleSelection","groupLabelCount","option","isGroupLabel","optionId","index","makeOptionId","isFocused","activeOptionIndex","posInSet","onOptionMouseDown","setActiveOptionIndex","n","prototype","action","onOptionClick","toggleOption","allowExclusions","scrollActiveIntoView","modifier","list","item","querySelectorAll","scrollIntoView","block","setComponentTemplate","precompileTemplate","strictMode","scope","cssStyle","hash","flag","EuiSelectableListItem","sub","or2","on","fn","EuiHighlight","explicit","hasBlock","a","b"],"mappings":"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"}

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

@@ -0,0 +1,14 @@
+import EuiTextComponent from './eui-text.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+
+const EuiSelectableMessage = setComponentTemplate(precompileTemplate("<EuiText class=\"euiSelectableMessage\n    {{if @bordered \"euiSelectableMessage--bordered\"}}\" @color=\"subdued\" @size=\"xs\" ...attributes>{{yield}}</EuiText>", {
+  strictMode: true,
+  scope: () => ({
+    EuiText: EuiTextComponent
+  })
+}), templateOnly());
+
+export { EuiSelectableMessage as default };
+//# sourceMappingURL=eui-selectable-message.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eui-selectable-message.js","sources":["../../src/components/eui-selectable-message.gts"],"sourcesContent":["import EuiText from './eui-text.gts';\n\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/**\n * A message shown by `EuiSelectable` instead of its list: while loading,\n * when nothing matches the search, or when there are no options.\n */\nexport interface EuiSelectableMessageSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Adds the list's border, for bordered lists. */\n    bordered?: boolean;\n  };\n  Blocks: {\n    /** The message. */\n    default: [];\n  };\n}\n\nconst EuiSelectableMessage: TemplateOnlyComponent<EuiSelectableMessageSignature> =\n  <template>\n    <EuiText\n      class=\"euiSelectableMessage\n        {{if @bordered 'euiSelectableMessage--bordered'}}\"\n      @color=\"subdued\"\n      @size=\"xs\"\n      ...attributes\n    >{{yield}}</EuiText>\n  </template>;\n\nexport default EuiSelectableMessage;\n"],"names":["EuiSelectableMessage","setComponentTemplate","precompileTemplate","strictMode","scope","EuiText","templateOnly"],"mappings":";;;;;AAoBA,MAAMA,oBAA4C,GAAAC,oBAAA,CAChDC,kBAAA,CAAA,oKAAA,EAQA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;AAAAC,aAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}

package/dist/components/eui-selectable-search.js

@@ -0,0 +1,33 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { getMatchingOptions } from '../-private/selectable-options.js';
+import EuiFieldSearch from './eui-field-search.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { n } from 'decorator-transforms/runtime-esm';
+
+class EuiSelectableSearch extends Component {
+  searchValue = this.initialValue;
+  get initialValue() {
+    return this.args.defaultValue ?? '';
+  }
+  onSearch(value) {
+    if (value === this.searchValue) return;
+    this.searchValue = value;
+    this.args.onChange(getMatchingOptions(this.args.options, value, this.args.isPreFiltered), value);
+  }
+  static {
+    n(this.prototype, "onSearch", [action]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<EuiFieldSearch class=\"euiSelectableSearch\" @placeholder={{@placeholder}} @value={{this.initialValue}} @incremental={{true}} @fullWidth={{true}} @compressed={{@compressed}} @isLoading={{@isLoading}} @onSearch={{this.onSearch}} autocomplete=\"off\" aria-haspopup=\"listbox\" role={{if @listId \"combobox\"}} aria-autocomplete={{if @listId \"list\"}} aria-expanded={{if @listId \"true\"}} aria-controls={{@listId}} ...attributes />", {
+      strictMode: true,
+      scope: () => ({
+        EuiFieldSearch
+      })
+    }), this);
+  }
+}
+
+export { EuiSelectableSearch as default };
+//# sourceMappingURL=eui-selectable-search.js.map

package/dist/components/eui-selectable-search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-selectable-search.js","sources":["../../src/components/eui-selectable-search.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { action } from '@ember/object';\n\nimport { getMatchingOptions } from '../-private/selectable-options.ts';\nimport EuiFieldSearch from './eui-field-search.gts';\n\nimport type { EuiSelectableOption } from '../-private/selectable-options.ts';\n\n/**\n * The search field of an `EuiSelectable`: filters the options as you type.\n * Usually rendered for you by `EuiSelectable` with `@searchable={{true}}`.\n */\nexport interface EuiSelectableSearchSignature {\n  Element: HTMLInputElement;\n  Args: {\n    /** The options to filter. */\n    options: EuiSelectableOption[];\n    /** Called with the matching options and the search. */\n    onChange: (matchingOptions: EuiSelectableOption[], searchValue: string) => void;\n    /** Placeholder of the field. */\n    placeholder?: string;\n    /** Initial search. */\n    defaultValue?: string;\n    /** Every option matches (they were already filtered, e.g. by a server). */\n    isPreFiltered?: boolean;\n    /** `id` of the list, to link the field to it for screen readers. */\n    listId?: string;\n    /** Smaller field. */\n    compressed?: boolean;\n    /** Shows a spinner. */\n    isLoading?: boolean;\n  };\n}\n\nexport default class EuiSelectableSearch extends Component<EuiSelectableSearchSignature> {\n  searchValue = this.initialValue;\n\n  get initialValue(): string {\n    return this.args.defaultValue ?? '';\n  }\n\n  @action\n  onSearch(value: string): void {\n    if (value === this.searchValue) return;\n\n    this.searchValue = value;\n    this.args.onChange(getMatchingOptions(this.args.options, value, this.args.isPreFiltered), value);\n  }\n\n  <template>\n    <EuiFieldSearch\n      class=\"euiSelectableSearch\"\n      @placeholder={{@placeholder}}\n      @value={{this.initialValue}}\n      @incremental={{true}}\n      @fullWidth={{true}}\n      @compressed={{@compressed}}\n      @isLoading={{@isLoading}}\n      @onSearch={{this.onSearch}}\n      autocomplete=\"off\"\n      aria-haspopup=\"listbox\"\n      role={{if @listId \"combobox\"}}\n      aria-autocomplete={{if @listId \"list\"}}\n      aria-expanded={{if @listId \"true\"}}\n      aria-controls={{@listId}}\n      ...attributes\n    />\n  </template>\n}\n"],"names":["EuiSelectableSearch","Component","searchValue","initialValue","args","defaultValue","onSearch","value","onChange","getMatchingOptions","options","isPreFiltered","n","prototype","action","setComponentTemplate","precompileTemplate","strictMode","scope","EuiFieldSearch"],"mappings":";;;;;;;;AAkCe,MAAMA,4BAA4BC,SAAA,CAAU;EACzDC,WAAA,GAAc,IAAI,CAACC,YAAY;EAE/B,IAAIA,YAAAA,GAAuB;AACzB,IAAA,OAAO,IAAI,CAACC,IAAI,CAACC,YAAY,IAAI,EAAA;AACnC,EAAA;EAGAC,QAAAA,CAASC,KAAa,EAAQ;AAC5B,IAAA,IAAIA,KAAA,KAAU,IAAI,CAACL,WAAW,EAAE;IAEhC,IAAI,CAACA,WAAW,GAAGK,KAAA;IACnB,IAAI,CAACH,IAAI,CAACI,QAAQ,CAACC,kBAAA,CAAmB,IAAI,CAACL,IAAI,CAACM,OAAO,EAAEH,KAAA,EAAO,IAAI,CAACH,IAAI,CAACO,aAAa,CAAA,EAAGJ,KAAA,CAAA;AAC5F,EAAA;AAAA,EAAA;IAAAK,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,UAAA,EAAA,CANCC,MAAA,CAAA,CAAA;AAAA;AAQD,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,ibAAA,EAkBA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}