@ember-eui/core 13.0.5 → 14.1.0

package/dist/components/eui-refresh-interval.js

@@ -0,0 +1,162 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import { randomId } from '../-private/random-id.js';
+import EuiButton from './eui-button.js';
+import EuiFieldNumber from './eui-field-number.js';
+import EuiFlexGroup from './eui-flex-group.js';
+import EuiFlexItem from './eui-flex-item.js';
+import EuiScreenReaderOnly from './eui-screen-reader-only.js';
+import EuiSelect from './eui-select.js';
+import EuiSpacer from './eui-spacer.js';
+import EuiTitle from './eui-title.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
+
+const SECOND = 1000;
+const MINUTE = SECOND * 60;
+const HOUR = MINUTE * 60;
+function fromMilliseconds(ms) {
+  const round = value => parseFloat(value.toFixed(2));
+  if (ms > HOUR) return {
+    units: 'h',
+    value: round(ms / HOUR)
+  };
+  if (ms > MINUTE) return {
+    units: 'm',
+    value: round(ms / MINUTE)
+  };
+  return {
+    units: 's',
+    value: round(ms / SECOND)
+  };
+}
+function toMilliseconds(units, value) {
+  return Math.round(value * {
+    h: HOUR,
+    m: MINUTE,
+    s: SECOND
+  }[units]);
+}
+/**
+ * "Refresh every [5] [minutes] [Start / Stop]": sets how often data
+ * refreshes. `EuiSuperDatePicker` shows it in its quick select popover
+ * when given `@onRefreshChange`; it also works on its own.
+ */
+
+class EuiRefreshInterval extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  static {
+    g(this.prototype, "value", [tracked]);
+  }
+  #value = (i(this, "value"), void 0); // the fields, which may be empty or invalid while typing
+  static {
+    g(this.prototype, "units", [tracked]);
+  }
+  #units = (i(this, "units"), void 0);
+  legendId = `euiRefreshInterval_${randomId()}`;
+  descriptionId = `euiRefreshInterval_${randomId()}`;
+  constructor(owner, args) {
+    super(owner, args);
+    const {
+      value,
+      units
+    } = fromMilliseconds(args.refreshInterval ?? 1000);
+    this.value = value;
+    this.units = units;
+  }
+  get isPaused() {
+    return this.args.isPaused ?? true;
+  }
+  t = (token, text, values) => this.euiI18n.lookupToken(token, text, values);
+  get unitOptions() {
+    return [{
+      value: 's',
+      text: this.t('euiTimeOptions.seconds', 'Seconds')
+    }, {
+      value: 'm',
+      text: this.t('euiTimeOptions.minutes', 'Minutes')
+    }, {
+      value: 'h',
+      text: this.t('euiTimeOptions.hours', 'Hours')
+    }];
+  }
+  get description() {
+    return this.t('euiRefreshInterval.fullDescription', 'Refresh interval currently set to {optionValue} {optionText}.', {
+      optionValue: this.value,
+      optionText: this.unitOptions.find(option => option.value === this.units)?.text ?? ''
+    });
+  }
+  get isInvalid() {
+    return this.value === '' || this.value <= 0;
+  }
+  apply() {
+    if (this.value === '') return;
+    const refreshInterval = toMilliseconds(this.units, this.value);
+    this.args.applyRefreshInterval({
+      refreshInterval,
+      isPaused: refreshInterval <= 0 ? true : this.isPaused
+    });
+  }
+  onValueInput(event) {
+    const value = parseFloat(event.target.value);
+    this.value = isNaN(value) ? '' : value;
+    this.apply();
+  }
+  static {
+    n(this.prototype, "onValueInput", [action]);
+  }
+  onUnitsChange(event) {
+    this.units = event.target.value;
+    this.apply();
+  }
+  static {
+    n(this.prototype, "onUnitsChange", [action]);
+  }
+  onKeyDown(event) {
+    // Enter starts refreshing
+    if (event.key !== 'Enter' || this.isInvalid || this.value === '') return;
+    this.args.applyRefreshInterval({
+      refreshInterval: toMilliseconds(this.units, this.value),
+      isPaused: false
+    });
+  }
+  static {
+    n(this.prototype, "onKeyDown", [action]);
+  }
+  toggle() {
+    if (this.value === '') return;
+    this.args.applyRefreshInterval({
+      refreshInterval: toMilliseconds(this.units, this.value),
+      isPaused: !this.isPaused
+    });
+  }
+  static {
+    n(this.prototype, "toggle", [action]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<fieldset ...attributes>\n  <EuiTitle @size=\"xxxs\" @tagName=\"legend\" id={{this.legendId}}>\n    {{this.t \"euiRefreshInterval.legend\" \"Refresh every\"}}\n  </EuiTitle>\n  <EuiSpacer @size=\"s\" />\n  <EuiFlexGroup @gutterSize=\"s\" @responsive={{false}}>\n    <EuiFlexItem>\n      <EuiFieldNumber @compressed={{true}} @value={{this.value}} aria-label=\"Refresh interval value\" aria-describedby=\"{{this.descriptionId}} {{this.legendId}}\" data-test-subj=\"superDatePickerRefreshIntervalInput\" {{on \"input\" this.onValueInput}} {{on \"keydown\" this.onKeyDown}} />\n    </EuiFlexItem>\n    <EuiFlexItem>\n      <EuiSelect @compressed={{true}} @value={{this.units}} @options={{this.unitOptions}} aria-label=\"Refresh interval units\" aria-describedby=\"{{this.descriptionId}} {{this.legendId}}\" data-test-subj=\"superDatePickerRefreshIntervalUnitsSelect\" {{on \"change\" this.onUnitsChange}} {{on \"keydown\" this.onKeyDown}} />\n    </EuiFlexItem>\n    <EuiFlexItem @grow={{false}}>\n      <EuiButton class=\"euiRefreshInterval__startButton\" @iconType={{if this.isPaused \"play\" \"stop\"}} @size=\"s\" @isDisabled={{this.isInvalid}} data-test-subj=\"superDatePickerToggleRefreshButton\" aria-describedby={{this.descriptionId}} {{on \"click\" this.toggle}}>\n        {{#if this.isPaused}}\n          {{this.t \"euiRefreshInterval.start\" \"Start\"}}\n        {{else}}\n          {{this.t \"euiRefreshInterval.stop\" \"Stop\"}}\n        {{/if}}\n      </EuiButton>\n    </EuiFlexItem>\n  </EuiFlexGroup>\n  <EuiScreenReaderOnly><p id={{this.descriptionId}}>{{this.description}}</p></EuiScreenReaderOnly>\n</fieldset>", {
+      strictMode: true,
+      scope: () => ({
+        EuiTitle,
+        EuiSpacer,
+        EuiFlexGroup,
+        EuiFlexItem,
+        EuiFieldNumber,
+        on,
+        EuiSelect,
+        EuiButton,
+        EuiScreenReaderOnly
+      })
+    }), this);
+  }
+}
+
+export { EuiRefreshInterval as default };
+//# sourceMappingURL=eui-refresh-interval.js.map

package/dist/components/eui-refresh-interval.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-refresh-interval.js","sources":["../../src/components/eui-refresh-interval.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport { service } from '@ember/service';\n\nimport { randomId } from '../-private/random-id.ts';\nimport EuiButton from './eui-button.gts';\nimport EuiFieldNumber from './eui-field-number.gts';\nimport EuiFlexGroup from './eui-flex-group.gts';\nimport EuiFlexItem from './eui-flex-item.gts';\nimport EuiScreenReaderOnly from './eui-screen-reader-only.gts';\nimport EuiSelect from './eui-select.gts';\nimport EuiSpacer from './eui-spacer.gts';\nimport EuiTitle from './eui-title.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type Owner from '@ember/owner';\n\ntype Units = 's' | 'm' | 'h';\n\nconst SECOND = 1000;\nconst MINUTE = SECOND * 60;\nconst HOUR = MINUTE * 60;\n\nfunction fromMilliseconds(ms: number): { value: number; units: Units } {\n  const round = (value: number) => parseFloat(value.toFixed(2));\n\n  if (ms > HOUR) return { units: 'h', value: round(ms / HOUR) };\n  if (ms > MINUTE) return { units: 'm', value: round(ms / MINUTE) };\n\n  return { units: 's', value: round(ms / SECOND) };\n}\n\nfunction toMilliseconds(units: Units, value: number): number {\n  return Math.round(value * { h: HOUR, m: MINUTE, s: SECOND }[units]);\n}\n\n/**\n * \"Refresh every [5] [minutes] [Start / Stop]\": sets how often data\n * refreshes. `EuiSuperDatePicker` shows it in its quick select popover\n * when given `@onRefreshChange`; it also works on its own.\n */\nexport interface EuiRefreshIntervalSignature {\n  Element: HTMLFieldSetElement;\n  Args: {\n    /** Whether refreshing is stopped. Defaults to `true`. */\n    isPaused?: boolean;\n    /** The interval in milliseconds. Defaults to `1000`. */\n    refreshInterval?: number;\n    /** Called with `{ refreshInterval, isPaused }` after a change. */\n    applyRefreshInterval: (args: { refreshInterval: number; isPaused: boolean }) => void;\n  };\n}\n\nexport default class EuiRefreshInterval extends Component<EuiRefreshIntervalSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  // the fields, which may be empty or invalid while typing\n  @tracked value: number | '';\n  @tracked units: Units;\n\n  legendId = `euiRefreshInterval_${randomId()}`;\n  descriptionId = `euiRefreshInterval_${randomId()}`;\n\n  constructor(owner: Owner, args: EuiRefreshIntervalSignature['Args']) {\n    super(owner, args);\n\n    const { value, units } = fromMilliseconds(args.refreshInterval ?? 1000);\n\n    this.value = value;\n    this.units = units;\n  }\n\n  get isPaused(): boolean {\n    return this.args.isPaused ?? true;\n  }\n\n  t = (token: string, text: string, values?: Record<string, unknown>): string =>\n    this.euiI18n.lookupToken(token, text, values);\n\n  get unitOptions(): { value: Units; text: string }[] {\n    return [\n      { value: 's', text: this.t('euiTimeOptions.seconds', 'Seconds') },\n      { value: 'm', text: this.t('euiTimeOptions.minutes', 'Minutes') },\n      { value: 'h', text: this.t('euiTimeOptions.hours', 'Hours') }\n    ];\n  }\n\n  get description(): string {\n    return this.t(\n      'euiRefreshInterval.fullDescription',\n      'Refresh interval currently set to {optionValue} {optionText}.',\n      {\n        optionValue: this.value,\n        optionText: this.unitOptions.find((option) => option.value === this.units)?.text ?? ''\n      }\n    );\n  }\n\n  get isInvalid(): boolean {\n    return this.value === '' || this.value <= 0;\n  }\n\n  apply(): void {\n    if (this.value === '') return;\n\n    const refreshInterval = toMilliseconds(this.units, this.value);\n\n    this.args.applyRefreshInterval({\n      refreshInterval,\n      isPaused: refreshInterval <= 0 ? true : this.isPaused\n    });\n  }\n\n  @action\n  onValueInput(event: Event): void {\n    const value = parseFloat((event.target as HTMLInputElement).value);\n\n    this.value = isNaN(value) ? '' : value;\n    this.apply();\n  }\n\n  @action\n  onUnitsChange(event: Event): void {\n    this.units = (event.target as HTMLSelectElement).value as Units;\n    this.apply();\n  }\n\n  @action\n  onKeyDown(event: KeyboardEvent): void {\n    // Enter starts refreshing\n    if (event.key !== 'Enter' || this.isInvalid || this.value === '') return;\n\n    this.args.applyRefreshInterval({\n      refreshInterval: toMilliseconds(this.units, this.value),\n      isPaused: false\n    });\n  }\n\n  @action\n  toggle(): void {\n    if (this.value === '') return;\n\n    this.args.applyRefreshInterval({\n      refreshInterval: toMilliseconds(this.units, this.value),\n      isPaused: !this.isPaused\n    });\n  }\n\n  <template>\n    <fieldset ...attributes>\n      <EuiTitle @size=\"xxxs\" @tagName=\"legend\" id={{this.legendId}}>\n        {{this.t \"euiRefreshInterval.legend\" \"Refresh every\"}}\n      </EuiTitle>\n      <EuiSpacer @size=\"s\" />\n      <EuiFlexGroup @gutterSize=\"s\" @responsive={{false}}>\n        <EuiFlexItem>\n          <EuiFieldNumber\n            @compressed={{true}}\n            @value={{this.value}}\n            aria-label=\"Refresh interval value\"\n            aria-describedby=\"{{this.descriptionId}} {{this.legendId}}\"\n            data-test-subj=\"superDatePickerRefreshIntervalInput\"\n            {{on \"input\" this.onValueInput}}\n            {{on \"keydown\" this.onKeyDown}}\n          />\n        </EuiFlexItem>\n        <EuiFlexItem>\n          <EuiSelect\n            @compressed={{true}}\n            @value={{this.units}}\n            @options={{this.unitOptions}}\n            aria-label=\"Refresh interval units\"\n            aria-describedby=\"{{this.descriptionId}} {{this.legendId}}\"\n            data-test-subj=\"superDatePickerRefreshIntervalUnitsSelect\"\n            {{on \"change\" this.onUnitsChange}}\n            {{on \"keydown\" this.onKeyDown}}\n          />\n        </EuiFlexItem>\n        <EuiFlexItem @grow={{false}}>\n          <EuiButton\n            class=\"euiRefreshInterval__startButton\"\n            @iconType={{if this.isPaused \"play\" \"stop\"}}\n            @size=\"s\"\n            @isDisabled={{this.isInvalid}}\n            data-test-subj=\"superDatePickerToggleRefreshButton\"\n            aria-describedby={{this.descriptionId}}\n            {{on \"click\" this.toggle}}\n          >\n            {{#if this.isPaused}}\n              {{this.t \"euiRefreshInterval.start\" \"Start\"}}\n            {{else}}\n              {{this.t \"euiRefreshInterval.stop\" \"Stop\"}}\n            {{/if}}\n          </EuiButton>\n        </EuiFlexItem>\n      </EuiFlexGroup>\n      <EuiScreenReaderOnly><p id={{this.descriptionId}}>{{this.description}}</p></EuiScreenReaderOnly>\n    </fieldset>\n  </template>\n}\n"],"names":["SECOND","MINUTE","HOUR","fromMilliseconds","ms","round","value","parseFloat","toFixed","units","toMilliseconds","Math","h","m","s","EuiRefreshInterval","Component","g","prototype","service","i","tracked","legendId","randomId","descriptionId","constructor","owner","args","refreshInterval","isPaused","t","token","text","values","euiI18n","lookupToken","unitOptions","description","optionValue","optionText","find","option","isInvalid","apply","applyRefreshInterval","onValueInput","event","target","isNaN","n","action","onUnitsChange","onKeyDown","key","toggle","setComponentTemplate","precompileTemplate","strictMode","scope","EuiTitle","EuiSpacer","EuiFlexGroup","EuiFlexItem","EuiFieldNumber","on","EuiSelect","EuiButton","EuiScreenReaderOnly"],"mappings":"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"}

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

@@ -0,0 +1,66 @@
+import Component from '@glimmer/component';
+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 { randomId } from '../../-private/random-id.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
+
+class EuiResizableButton extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  ownId = `resizable-button_${randomId()}`;
+  get id() {
+    return this.args.id ?? this.ownId;
+  }
+  get container() {
+    return this.args.container;
+  }
+  get isDisabled() {
+    return Boolean(this.args.disabled || this.container.resizers[this.id]?.isDisabled);
+  }
+  get classes() {
+    return ['euiResizableButton', this.container.isHorizontal ? 'euiResizableButton--horizontal' : 'euiResizableButton--vertical', this.isDisabled && 'euiResizableButton--disabled'].filter(Boolean).join(' ');
+  }
+  get label() {
+    return this.container.isHorizontal ? this.euiI18n.lookupToken('euiResizableButton.horizontalResizerAriaLabel', 'Press left or right to adjust panels size') : this.euiI18n.lookupToken('euiResizableButton.verticalResizerAriaLabel', 'Press up or down to adjust panels size');
+  }
+  focusSelf(event) {
+    event.currentTarget.focus();
+  }
+  static {
+    n(this.prototype, "focusSelf", [action]);
+  }
+  onFocus() {
+    this.container.onResizerFocus(this.id);
+  }
+  static {
+    n(this.prototype, "onFocus", [action]);
+  }
+  register = modifier(() => {
+    const id = this.id;
+    // after rendering: registering updates the container's state
+    schedule('afterRender', () => this.container.registerResizer({
+      id,
+      isFocused: false,
+      isDisabled: this.args.disabled ?? false
+    }));
+    return () => schedule('afterRender', () => this.container.deregisterResizer(id));
+  });
+  static {
+    setComponentTemplate(precompileTemplate("<button id={{this.id}} type=\"button\" class={{this.classes}} aria-label={{this.label}} data-test-subj=\"euiResizableButton\" disabled={{this.isDisabled}} {{this.register}} {{on \"click\" this.focusSelf}} {{on \"focus\" this.onFocus}} {{on \"blur\" this.container.onResizerBlur}} {{on \"mousedown\" this.container.onResizerMouseDown}} {{on \"touchstart\" this.container.onResizerMouseDown}} {{on \"keydown\" this.container.onResizerKeyDown}} ...attributes></button>", {
+      strictMode: true,
+      scope: () => ({
+        on
+      })
+    }), this);
+  }
+}
+
+export { EuiResizableButton as default };
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../../src/components/eui-resizable-container/button.gts"],"sourcesContent":["import Component from '@glimmer/component';\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 { randomId } from '../../-private/random-id.ts';\n\nimport type EuiI18n from '../../services/eui-i18n';\nimport type EuiResizableContainer from '../eui-resizable-container.gts';\n\n/**\n * The draggable separator between two panels of an\n * `EuiResizableContainer` (yielded as `Button`). Drag it, or focus it and\n * use the arrow keys.\n */\nexport interface EuiResizableButtonSignature {\n  Element: HTMLButtonElement;\n  Args: {\n    /** Id of the button. Defaults to a random id. */\n    id?: string;\n    /** Disables resizing at this button. */\n    disabled?: boolean;\n    /** @private The container, set by `EuiResizableContainer`. */\n    container: EuiResizableContainer;\n  };\n}\n\nexport default class EuiResizableButton extends Component<EuiResizableButtonSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  ownId = `resizable-button_${randomId()}`;\n\n  get id(): string {\n    return this.args.id ?? this.ownId;\n  }\n\n  get container(): EuiResizableContainer {\n    return this.args.container;\n  }\n\n  get isDisabled(): boolean {\n    return Boolean(this.args.disabled || this.container.resizers[this.id]?.isDisabled);\n  }\n\n  get classes(): string {\n    return [\n      'euiResizableButton',\n      this.container.isHorizontal ? 'euiResizableButton--horizontal' : 'euiResizableButton--vertical',\n      this.isDisabled && 'euiResizableButton--disabled'\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  get label(): string {\n    return this.container.isHorizontal\n      ? this.euiI18n.lookupToken(\n          'euiResizableButton.horizontalResizerAriaLabel',\n          'Press left or right to adjust panels size'\n        )\n      : this.euiI18n.lookupToken(\n          'euiResizableButton.verticalResizerAriaLabel',\n          'Press up or down to adjust panels size'\n        );\n  }\n\n  @action\n  focusSelf(event: MouseEvent): void {\n    (event.currentTarget as HTMLElement).focus();\n  }\n\n  @action\n  onFocus(): void {\n    this.container.onResizerFocus(this.id);\n  }\n\n  register = modifier(() => {\n    const id = this.id;\n\n    // after rendering: registering updates the container's state\n    schedule('afterRender', () =>\n      this.container.registerResizer({ id, isFocused: false, isDisabled: this.args.disabled ?? false })\n    );\n\n    return () => schedule('afterRender', () => this.container.deregisterResizer(id));\n  });\n\n  <template>\n    <button\n      id={{this.id}}\n      type=\"button\"\n      class={{this.classes}}\n      aria-label={{this.label}}\n      data-test-subj=\"euiResizableButton\"\n      disabled={{this.isDisabled}}\n      {{this.register}}\n      {{on \"click\" this.focusSelf}}\n      {{on \"focus\" this.onFocus}}\n      {{on \"blur\" this.container.onResizerBlur}}\n      {{on \"mousedown\" this.container.onResizerMouseDown}}\n      {{on \"touchstart\" this.container.onResizerMouseDown}}\n      {{on \"keydown\" this.container.onResizerKeyDown}}\n      ...attributes\n    ></button>\n  </template>\n}\n"],"names":["EuiResizableButton","Component","g","prototype","service","i","ownId","randomId","id","args","container","isDisabled","Boolean","disabled","resizers","classes","isHorizontal","filter","join","label","euiI18n","lookupToken","focusSelf","event","currentTarget","focus","n","action","onFocus","onResizerFocus","register","modifier","schedule","registerResizer","isFocused","deregisterResizer","setComponentTemplate","precompileTemplate","strictMode","scope","on"],"mappings":";;;;;;;;;;;AA8Be,MAAMA,2BAA2BC,SAAA,CAAU;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CACvDC,OAAA,CAAA,CAAA;AAAA;EAAA,QAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,SAAA,CAAA,EAAA,MAAA;AAEDC,EAAAA,KAAA,GAAQ,CAAA,iBAAA,EAAoBC,QAAA,EAAA,CAAA,CAAY;EAExC,IAAIC,EAAAA,GAAa;IACf,OAAO,IAAI,CAACC,IAAI,CAACD,EAAE,IAAI,IAAI,CAACF,KAAK;AACnC,EAAA;EAEA,IAAII,YAAmC;AACrC,IAAA,OAAO,IAAI,CAACD,IAAI,CAACC,SAAS;AAC5B,EAAA;EAEA,IAAIC,UAAAA,GAAsB;IACxB,OAAOC,QAAQ,IAAI,CAACH,IAAI,CAACI,QAAQ,IAAI,IAAI,CAACH,SAAS,CAACI,QAAQ,CAAC,IAAI,CAACN,EAAE,CAAC,EAAEG,UAAA,CAAA;AACzE,EAAA;EAEA,IAAII,OAAAA,GAAkB;AACpB,IAAA,OAAO,CACL,oBAAA,EACA,IAAI,CAACL,SAAS,CAACM,YAAY,GAAG,gCAAA,GAAmC,8BAAA,EACjE,IAAI,CAACL,UAAU,IAAI,8BAAA,CACpB,CACEM,MAAM,CAACL,OAAA,CAAA,CACPM,IAAI,CAAC,GAAA,CAAA;AACV,EAAA;EAEA,IAAIC,KAAAA,GAAgB;IAClB,OAAO,IAAI,CAACT,SAAS,CAACM,YAAY,GAC9B,IAAI,CAACI,OAAO,CAACC,WAAW,CACtB,+CAAA,EACA,+CAEF,IAAI,CAACD,OAAO,CAACC,WAAW,CACtB,6CAAA,EACA,wCAAA,CAAA;AAER,EAAA;EAGAC,SAAAA,CAAUC,KAAiB,EAAQ;AAChCA,IAAAA,KAAA,CAAMC,aAAa,CAAiBC,KAAK,EAAA;AAC5C,EAAA;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAvB,SAAA,EAAA,WAAA,EAAA,CAHCwB,MAAA,CAAA,CAAA;AAAA;AAMDC,EAAAA,OAAAA,GAAgB;IACd,IAAI,CAAClB,SAAS,CAACmB,cAAc,CAAC,IAAI,CAACrB,EAAE,CAAA;AACvC,EAAA;AAAA,EAAA;IAAAkB,CAAA,CAAA,IAAA,CAAAvB,SAAA,EAAA,SAAA,EAAA,CAHCwB,MAAA,CAAA,CAAA;AAAA;EAKDG,QAAA,GAAWC,QAAA,CAAS,MAAA;AAClB,IAAA,MAAMvB,EAAA,GAAK,IAAI,CAACA,EAAE;AAElB;IACAwB,QAAA,CAAS,eAAe,MACtB,IAAI,CAACtB,SAAS,CAACuB,eAAe,CAAC;MAAEzB,EAAA;AAAI0B,MAAAA,SAAA,EAAW,KAAA;AAAOvB,MAAAA,UAAA,EAAY,IAAI,CAACF,IAAI,CAACI,QAAQ,IAAI;AAAM,KAAA,CAAA,CAAA;AAGjG,IAAA,OAAO,MAAMmB,SAAS,aAAA,EAAe,MAAM,IAAI,CAACtB,SAAS,CAACyB,iBAAiB,CAAC3B,EAAA,CAAA,CAAA;AAC9E,EAAA,CAAA,CAAA;AAEA,EAAA;IAAA4B,oBAAA,CAAAC,kBAAA,CAAA,mdAAA,EAiBA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

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

@@ -0,0 +1,27 @@
+import EuiButtonIcon from '../eui-button-icon.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+
+function icon(externalPosition, direction, isCollapsed) {
+  const horizontal = direction === 'horizontal';
+  if (externalPosition === 'before') {
+    return isCollapsed ? horizontal ? 'menuLeft' : 'menuUp' : horizontal ? 'menuRight' : 'menuDown';
+  }
+  return isCollapsed ? horizontal ? 'menuRight' : 'menuDown' : horizontal ? 'menuLeft' : 'menuUp';
+}
+function classes(direction, externalPosition, internalPosition = 'middle', isVisible, isCollapsed) {
+  return ['euiResizableToggleButton', `euiResizableToggleButton--${direction}`, `euiResizableToggleButton--${externalPosition}`, `euiResizableToggleButton--${internalPosition}`, isVisible && 'euiResizableToggleButton-isVisible', isCollapsed && 'euiResizableToggleButton-isCollapsed'].filter(Boolean).join(' ');
+}
+/** @private The button collapsing or expanding a resizable panel. */
+const EuiResizableCollapseButton = setComponentTemplate(precompileTemplate("<EuiButtonIcon class={{classes @direction @externalPosition @internalPosition @isVisible @isCollapsed}} @display={{if @isCollapsed \"empty\" \"fill\"}} @color={{if @isCollapsed \"text\" \"ghost\"}} @iconType={{icon @externalPosition @direction @isCollapsed}} ...attributes />", {
+  strictMode: true,
+  scope: () => ({
+    EuiButtonIcon,
+    classes,
+    icon
+  })
+}), templateOnly());
+
+export { EuiResizableCollapseButton as default };
+//# sourceMappingURL=collapse-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collapse-button.js","sources":["../../../src/components/eui-resizable-container/collapse-button.gts"],"sourcesContent":["import EuiButtonIcon from '../eui-button-icon.gts';\n\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\ninterface CollapseButtonSignature {\n  Element: HTMLButtonElement | HTMLAnchorElement;\n  Args: {\n    externalPosition: 'before' | 'after';\n    internalPosition?: 'top' | 'middle' | 'bottom' | 'left' | 'right';\n    direction: 'horizontal' | 'vertical';\n    isVisible?: boolean;\n    isCollapsed?: boolean;\n  };\n}\n\nfunction icon(externalPosition: string, direction: string, isCollapsed?: boolean): string {\n  const horizontal = direction === 'horizontal';\n\n  if (externalPosition === 'before') {\n    return isCollapsed ? (horizontal ? 'menuLeft' : 'menuUp') : horizontal ? 'menuRight' : 'menuDown';\n  }\n\n  return isCollapsed ? (horizontal ? 'menuRight' : 'menuDown') : horizontal ? 'menuLeft' : 'menuUp';\n}\n\nfunction classes(\n  direction: string,\n  externalPosition: string,\n  internalPosition = 'middle',\n  isVisible?: boolean,\n  isCollapsed?: boolean\n): string {\n  return [\n    'euiResizableToggleButton',\n    `euiResizableToggleButton--${direction}`,\n    `euiResizableToggleButton--${externalPosition}`,\n    `euiResizableToggleButton--${internalPosition}`,\n    isVisible && 'euiResizableToggleButton-isVisible',\n    isCollapsed && 'euiResizableToggleButton-isCollapsed'\n  ]\n    .filter(Boolean)\n    .join(' ');\n}\n\n/** @private The button collapsing or expanding a resizable panel. */\nconst EuiResizableCollapseButton: TemplateOnlyComponent<CollapseButtonSignature> = <template>\n  <EuiButtonIcon\n    class={{classes @direction @externalPosition @internalPosition @isVisible @isCollapsed}}\n    @display={{if @isCollapsed \"empty\" \"fill\"}}\n    @color={{if @isCollapsed \"text\" \"ghost\"}}\n    @iconType={{icon @externalPosition @direction @isCollapsed}}\n    ...attributes\n  />\n</template>;\n\nexport default EuiResizableCollapseButton;\n"],"names":["icon","externalPosition","direction","isCollapsed","horizontal","classes","internalPosition","isVisible","filter","Boolean","join","EuiResizableCollapseButton","setComponentTemplate","precompileTemplate","strictMode","scope","EuiButtonIcon","templateOnly"],"mappings":";;;;;AAeA,SAASA,IAAAA,CAAKC,gBAAwB,EAAEC,SAAiB,EAAEC,WAAqB,EAAS;AACvF,EAAA,MAAMC,aAAaF,SAAA,KAAc,YAAA;EAEjC,IAAID,qBAAqB,QAAA,EAAU;AACjC,IAAA,OAAOE,cAAeC,UAAA,GAAa,aAAa,QAAQ,GAAIA,aAAa,WAAA,GAAc,UAAA;AACzF,EAAA;AAEA,EAAA,OAAOD,cAAeC,UAAA,GAAa,cAAc,UAAU,GAAIA,aAAa,UAAA,GAAa,QAAA;AAC3F;AAEA,SAASC,QACPH,SAAiB,EACjBD,gBAAwB,EACxBK,gBAAA,GAAmB,QAAQ,EAC3BC,SAAmB,EACnBJ,WAAqB,EACd;AACP,EAAA,OAAO,CACL,0BAAA,EACA,CAAA,0BAAA,EAA6BD,SAAA,CAAA,CAAW,EACxC,CAAA,0BAAA,EAA6BD,gBAAA,CAAA,CAAkB,EAC/C,CAAA,0BAAA,EAA6BK,gBAAA,EAAkB,EAC/CC,SAAA,IAAa,oCAAA,EACbJ,WAAA,IAAe,sCAAA,CAChB,CACEK,MAAM,CAACC,OAAA,CAAA,CACPC,IAAI,CAAC,GAAA,CAAA;AACV;AAEA;AACA,MAAMC,0BAAkD,GAAAC,oBAAA,CAA2BC,kBAAA,CAAA,qRAAA,EAQnF;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,aAAA;IAAAX,OAAA;AAAAL,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAiB,YAAA,EAAA;;"}

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

@@ -0,0 +1,190 @@
+import Component from '@glimmer/component';
+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 cssStyle from '../../-private/css-style.js';
+import { randomId } from '../../-private/random-id.js';
+import { PANEL_PADDING } from '../../-private/resizable.js';
+import EuiPanel from '../eui-panel.js';
+import EuiResizableCollapseButton from './collapse-button.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
+
+const WRAPPER_PADDING = {
+  none: undefined,
+  s: 'euiResizablePanel--paddingSmall',
+  m: 'euiResizablePanel--paddingMedium',
+  l: 'euiResizablePanel--paddingLarge'
+};
+class EuiResizablePanel extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  ownId = `resizable-panel_${randomId()}`;
+  element;
+  // ids of the resize buttons before and after it
+  resizerIds = ['', ''];
+  get id() {
+    return this.args.id ?? this.ownId;
+  }
+  get container() {
+    return this.args.container;
+  }
+  get state() {
+    return this.container.panels[this.id];
+  }
+  get modeType() {
+    const mode = this.args.mode;
+    return Array.isArray(mode) ? mode[0] : mode;
+  }
+  get togglePosition() {
+    const mode = this.args.mode;
+    return (Array.isArray(mode) ? mode[1].position : undefined) ?? 'middle';
+  }
+  get isCollapsible() {
+    return this.modeType === 'collapsible';
+  }
+  get isCollapsed() {
+    return this.state?.isCollapsed ?? false;
+  }
+  get position() {
+    return this.state?.position ?? 'middle';
+  }
+  get size() {
+    return this.args.size ?? this.state?.size ?? this.args.initialSize ?? 0;
+  }
+  get style() {
+    const horizontal = this.container.isHorizontal;
+    return cssStyle({
+      width: horizontal ? `${this.size}%` : '100%',
+      height: horizontal ? 'auto' : `${this.size}%`
+    });
+  }
+  get classes() {
+    return ['euiResizablePanel', WRAPPER_PADDING[this.args.wrapperPadding ?? 'none'], this.isCollapsible && 'euiResizablePanel--collapsible', this.isCollapsed && 'euiResizablePanel-isCollapsed', `euiResizablePanel--${this.position}`].filter(Boolean).join(' ');
+  }
+  get contentClasses() {
+    return this.args.scrollable === false ? 'euiResizablePanel__content' : 'euiResizablePanel__content euiResizablePanel__content--scrollable';
+  }
+  /** Which way a middle panel collapses: toward its main neighbour. */
+  get direction() {
+    if (this.position !== 'middle' || !(this.isCollapsible || this.isCollapsed)) return null;
+    const panels = this.container.panels;
+    const ids = Object.keys(panels);
+    const index = ids.indexOf(this.id);
+    const prev = panels[ids[index - 1] ?? ''];
+    const next = panels[ids[index + 1] ?? ''];
+    const prevMode = prev?.mode;
+    const nextMode = next?.mode;
+    if (prevMode === 'main') return 'right';
+    if (nextMode === 'main') return 'left';
+    if (prevMode && prevMode !== 'collapsible') return 'right';
+    if (nextMode && nextMode !== 'collapsible') return 'left';
+    if (prev && next) return prev.size > next.size ? 'right' : 'left';
+    if (prev) return 'right';
+    if (next) return 'left';
+    return null;
+  }
+  get toggle() {
+    const canToggle = this.isCollapsible || this.modeType === 'custom' || this.modeType === undefined;
+    const showsToggle = this.isCollapsible || this.isCollapsed;
+    if (!canToggle || !showsToggle) return null;
+    if (this.position === 'last' || this.position === 'middle' && this.direction === 'right') {
+      return {
+        externalPosition: 'before',
+        resizerId: this.resizerIds[0]
+      };
+    }
+    if (this.position === 'first' || this.position === 'middle' && this.direction === 'left') {
+      return {
+        externalPosition: 'after',
+        resizerId: this.resizerIds[1]
+      };
+    }
+    return null;
+  }
+  get hasVisibleToggle() {
+    return this.modeType !== 'main' && this.isCollapsed || this.isCollapsible;
+  }
+  get toggleLabel() {
+    return this.euiI18n.lookupToken('euiResizablePanel.toggleButtonAriaLabel', 'Press to toggle this panel');
+  }
+  resizer = id => this.container.resizers[id];
+  onToggleClick(externalPosition, event) {
+    this.container.onPanelToggle(this.id, {
+      direction: externalPosition === 'before' ? 'right' : 'left'
+    });
+    // a mouse click should not leave the focus ring
+    if (event.detail) event.currentTarget.blur();
+  }
+  static {
+    n(this.prototype, "onToggleClick", [action]);
+  }
+  register = modifier((element, [size, minSize, mode]) => {
+    this.element = element;
+    const id = this.id;
+    const initSize = size ?? this.args.initialSize ?? 0;
+    const padding = `${PANEL_PADDING[this.args.paddingSize ?? 'm'] * 2}px`;
+    const horizontal = this.container.isHorizontal;
+    schedule('afterRender', () => {
+      this.resizerIds = [element.previousElementSibling?.id ?? '', element.nextElementSibling?.id ?? ''];
+      const siblings = Array.from(element.parentElement?.children ?? []).filter(el => el.classList.contains('euiResizablePanel'));
+      const position = siblings[0] === element ? 'first' : siblings[siblings.length - 1] === element ? 'last' : 'middle';
+      this.container.registerPanel({
+        id,
+        size: initSize,
+        prevSize: initSize,
+        getSizePx: () => {
+          const rect = element.getBoundingClientRect();
+          return horizontal ? rect.width : rect.height;
+        },
+        minSize: [minSize ?? '0px', padding],
+        mode: this.modeType,
+        isCollapsed: false,
+        position
+      });
+    });
+    return () => schedule('afterRender', () => this.container.deregisterPanel(id));
+  });
+  static {
+    setComponentTemplate(precompileTemplate("<div id={{this.id}} class={{this.classes}} style={{this.style}} {{this.register @size @minSize @mode}}>\n  {{#if this.hasVisibleToggle}}\n    {{#let this.toggle as |toggle|}}\n      {{#if (isBefore toggle)}}\n        <EuiResizableCollapseButton aria-label={{this.toggleLabel}} @externalPosition=\"before\" @direction={{if this.container.isHorizontal \"horizontal\" \"vertical\"}} @internalPosition={{this.togglePosition}} @isVisible={{resizerVisible (this.resizer (resizerIdOf toggle))}} @isCollapsed={{resizerDisabled (this.resizer (resizerIdOf toggle))}} {{on \"click\" (fnToggle this.onToggleClick \"before\")}} />\n      {{/if}}\n    {{/let}}\n  {{/if}}\n  <EuiPanel class={{this.contentClasses}} @hasShadow={{if @hasShadow true false}} @borderRadius={{if @borderRadius @borderRadius \"none\"}} @color={{if @color @color \"transparent\"}} @paddingSize={{if this.isCollapsed \"none\" (if @paddingSize @paddingSize \"m\")}} ...attributes>\n    {{yield}}\n  </EuiPanel>\n  {{#if this.hasVisibleToggle}}\n    {{#let this.toggle as |toggle|}}\n      {{#if (isAfter toggle)}}\n        <EuiResizableCollapseButton aria-label={{this.toggleLabel}} @externalPosition=\"after\" @direction={{if this.container.isHorizontal \"horizontal\" \"vertical\"}} @internalPosition={{this.togglePosition}} @isVisible={{resizerVisible (this.resizer (resizerIdOf toggle))}} @isCollapsed={{resizerDisabled (this.resizer (resizerIdOf toggle))}} {{on \"click\" (fnToggle this.onToggleClick \"after\")}} />\n      {{/if}}\n    {{/let}}\n  {{/if}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        isBefore,
+        EuiResizableCollapseButton,
+        resizerVisible,
+        resizerIdOf,
+        resizerDisabled,
+        on,
+        fnToggle,
+        EuiPanel,
+        isAfter
+      })
+    }), this);
+  }
+}
+function isBefore(toggle) {
+  return toggle?.externalPosition === 'before';
+}
+function isAfter(toggle) {
+  return toggle?.externalPosition === 'after';
+}
+function resizerIdOf(toggle) {
+  return toggle?.resizerId ?? '';
+}
+function resizerVisible(resizer) {
+  return Boolean(resizer && (resizer.isFocused || resizer.isDisabled));
+}
+function resizerDisabled(resizer) {
+  return Boolean(resizer?.isDisabled);
+}
+function fnToggle(handler, position) {
+  return event => handler(position, event);
+}
+
+export { EuiResizablePanel as default };
+//# sourceMappingURL=panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","sources":["../../../src/components/eui-resizable-container/panel.gts"],"sourcesContent":["import Component from '@glimmer/component';\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 cssStyle from '../../-private/css-style.ts';\nimport { randomId } from '../../-private/random-id.ts';\nimport { PANEL_PADDING } from '../../-private/resizable.ts';\nimport EuiPanel from '../eui-panel.gts';\nimport EuiResizableCollapseButton from './collapse-button.gts';\n\nimport type EuiI18n from '../../services/eui-i18n';\nimport type { PanelModeType, PanelPosition } from '../../-private/resizable.ts';\nimport type EuiResizableContainer from '../eui-resizable-container.gts';\nimport type { EuiPanelSignature } from '../eui-panel';\n\ntype Mode = PanelModeType | [PanelModeType, { position?: 'top' | 'middle' | 'bottom' | 'left' | 'right' }];\n\n/**\n * A panel of an `EuiResizableContainer` (yielded as `Panel`), sized in\n * percent of the container.\n */\nexport interface EuiResizablePanelSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Id of the panel, e.g. to toggle it. Defaults to a random id. */\n    id?: string;\n    /** Starting size in percent of the container. */\n    initialSize?: number;\n    /** Controlled size in percent (update it from `@onPanelWidthChange`). */\n    size?: number;\n    /** Smallest size, e.g. `'20%'` or `'200px'`. Defaults to `'0px'`. */\n    minSize?: string;\n    /** Scrolls its content when it overflows. Defaults to `true`. */\n    scrollable?: boolean;\n    /**\n     * `'collapsible'` (with a toggle button, next to a `'main'` panel),\n     * `'main'`, or `['collapsible', { position }]` to place the toggle\n     * (`'top'`, `'middle'`, `'bottom'`).\n     */\n    mode?: Mode;\n    /** Padding inside the panel: `'none'`, `'s'`, `'m'` or `'l'`. Defaults to `'m'`. */\n    paddingSize?: 'none' | 's' | 'm' | 'l';\n    /** Padding around the panel: `'none'`, `'s'`, `'m'` or `'l'`. Defaults to `'none'`. */\n    wrapperPadding?: 'none' | 's' | 'm' | 'l';\n    /** Background, any `EuiPanel` color. Defaults to `'transparent'`. */\n    color?: EuiPanelSignature['Args']['color'];\n    /** Adds a shadow. */\n    hasShadow?: boolean;\n    /** `'none'` or `'m'` rounded corners. Defaults to `'none'`. */\n    borderRadius?: EuiPanelSignature['Args']['borderRadius'];\n    /** @private The container, set by `EuiResizableContainer`. */\n    container: EuiResizableContainer;\n  };\n  Blocks: {\n    /** The panel's content. */\n    default: [];\n  };\n}\n\nconst WRAPPER_PADDING = {\n  none: undefined,\n  s: 'euiResizablePanel--paddingSmall',\n  m: 'euiResizablePanel--paddingMedium',\n  l: 'euiResizablePanel--paddingLarge'\n};\n\nexport default class EuiResizablePanel extends Component<EuiResizablePanelSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  ownId = `resizable-panel_${randomId()}`;\n  element?: HTMLElement;\n  // ids of the resize buttons before and after it\n  resizerIds: [string, string] = ['', ''];\n\n  get id(): string {\n    return this.args.id ?? this.ownId;\n  }\n\n  get container(): EuiResizableContainer {\n    return this.args.container;\n  }\n\n  get state() {\n    return this.container.panels[this.id];\n  }\n\n  get modeType(): PanelModeType | undefined {\n    const mode = this.args.mode;\n\n    return Array.isArray(mode) ? mode[0] : mode;\n  }\n\n  get togglePosition(): 'top' | 'middle' | 'bottom' | 'left' | 'right' {\n    const mode = this.args.mode;\n\n    return (Array.isArray(mode) ? mode[1].position : undefined) ?? 'middle';\n  }\n\n  get isCollapsible(): boolean {\n    return this.modeType === 'collapsible';\n  }\n\n  get isCollapsed(): boolean {\n    return this.state?.isCollapsed ?? false;\n  }\n\n  get position(): PanelPosition {\n    return this.state?.position ?? 'middle';\n  }\n\n  get size(): number {\n    return this.args.size ?? this.state?.size ?? this.args.initialSize ?? 0;\n  }\n\n  get style() {\n    const horizontal = this.container.isHorizontal;\n\n    return cssStyle({\n      width: horizontal ? `${this.size}%` : '100%',\n      height: horizontal ? 'auto' : `${this.size}%`\n    });\n  }\n\n  get classes(): string {\n    return [\n      'euiResizablePanel',\n      WRAPPER_PADDING[this.args.wrapperPadding ?? 'none'],\n      this.isCollapsible && 'euiResizablePanel--collapsible',\n      this.isCollapsed && 'euiResizablePanel-isCollapsed',\n      `euiResizablePanel--${this.position}`\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  get contentClasses(): string {\n    return this.args.scrollable === false\n      ? 'euiResizablePanel__content'\n      : 'euiResizablePanel__content euiResizablePanel__content--scrollable';\n  }\n\n  /** Which way a middle panel collapses: toward its main neighbour. */\n  get direction(): 'left' | 'right' | null {\n    if (this.position !== 'middle' || !(this.isCollapsible || this.isCollapsed)) return null;\n\n    const panels = this.container.panels;\n    const ids = Object.keys(panels);\n    const index = ids.indexOf(this.id);\n    const prev = panels[ids[index - 1] ?? ''];\n    const next = panels[ids[index + 1] ?? ''];\n    const prevMode = prev?.mode;\n    const nextMode = next?.mode;\n\n    if (prevMode === 'main') return 'right';\n    if (nextMode === 'main') return 'left';\n    if (prevMode && prevMode !== 'collapsible') return 'right';\n    if (nextMode && nextMode !== 'collapsible') return 'left';\n    if (prev && next) return prev.size > next.size ? 'right' : 'left';\n    if (prev) return 'right';\n    if (next) return 'left';\n\n    return null;\n  }\n\n  get toggle(): { externalPosition: 'before' | 'after'; resizerId: string } | null {\n    const canToggle = this.isCollapsible || this.modeType === 'custom' || this.modeType === undefined;\n    const showsToggle = this.isCollapsible || this.isCollapsed;\n\n    if (!canToggle || !showsToggle) return null;\n\n    if (this.position === 'last' || (this.position === 'middle' && this.direction === 'right')) {\n      return { externalPosition: 'before', resizerId: this.resizerIds[0] };\n    }\n\n    if (this.position === 'first' || (this.position === 'middle' && this.direction === 'left')) {\n      return { externalPosition: 'after', resizerId: this.resizerIds[1] };\n    }\n\n    return null;\n  }\n\n  get hasVisibleToggle(): boolean {\n    return (this.modeType !== 'main' && this.isCollapsed) || this.isCollapsible;\n  }\n\n  get toggleLabel(): string {\n    return this.euiI18n.lookupToken('euiResizablePanel.toggleButtonAriaLabel', 'Press to toggle this panel');\n  }\n\n  resizer = (id: string) => this.container.resizers[id];\n\n  @action\n  onToggleClick(externalPosition: 'before' | 'after', event: MouseEvent): void {\n    this.container.onPanelToggle(this.id, { direction: externalPosition === 'before' ? 'right' : 'left' });\n\n    // a mouse click should not leave the focus ring\n    if (event.detail) (event.currentTarget as HTMLElement).blur();\n  }\n\n  register = modifier((element: HTMLElement, [size, minSize, mode]: [number | undefined, string | undefined, unknown]) => {\n    this.element = element;\n    void mode;\n\n    const id = this.id;\n    const initSize = size ?? this.args.initialSize ?? 0;\n    const padding = `${PANEL_PADDING[this.args.paddingSize ?? 'm'] * 2}px`;\n    const horizontal = this.container.isHorizontal;\n\n    schedule('afterRender', () => {\n      this.resizerIds = [element.previousElementSibling?.id ?? '', element.nextElementSibling?.id ?? ''];\n\n      const siblings = Array.from(element.parentElement?.children ?? []).filter((el) =>\n        el.classList.contains('euiResizablePanel')\n      );\n      const position: PanelPosition =\n        siblings[0] === element ? 'first' : siblings[siblings.length - 1] === element ? 'last' : 'middle';\n\n      this.container.registerPanel({\n        id,\n        size: initSize,\n        prevSize: initSize,\n        getSizePx: () => {\n          const rect = element.getBoundingClientRect();\n\n          return horizontal ? rect.width : rect.height;\n        },\n        minSize: [minSize ?? '0px', padding],\n        mode: this.modeType,\n        isCollapsed: false,\n        position\n      });\n    });\n\n    return () => schedule('afterRender', () => this.container.deregisterPanel(id));\n  });\n\n  <template>\n    <div\n      id={{this.id}}\n      class={{this.classes}}\n      style={{this.style}}\n      {{this.register @size @minSize @mode}}\n    >\n      {{#if this.hasVisibleToggle}}\n        {{#let this.toggle as |toggle|}}\n          {{#if (isBefore toggle)}}\n            <EuiResizableCollapseButton\n              aria-label={{this.toggleLabel}}\n              @externalPosition=\"before\"\n              @direction={{if this.container.isHorizontal \"horizontal\" \"vertical\"}}\n              @internalPosition={{this.togglePosition}}\n              @isVisible={{resizerVisible (this.resizer (resizerIdOf toggle))}}\n              @isCollapsed={{resizerDisabled (this.resizer (resizerIdOf toggle))}}\n              {{on \"click\" (fnToggle this.onToggleClick \"before\")}}\n            />\n          {{/if}}\n        {{/let}}\n      {{/if}}\n      <EuiPanel\n        class={{this.contentClasses}}\n        @hasShadow={{if @hasShadow true false}}\n        @borderRadius={{if @borderRadius @borderRadius \"none\"}}\n        @color={{if @color @color \"transparent\"}}\n        @paddingSize={{if this.isCollapsed \"none\" (if @paddingSize @paddingSize \"m\")}}\n        ...attributes\n      >\n        {{yield}}\n      </EuiPanel>\n      {{#if this.hasVisibleToggle}}\n        {{#let this.toggle as |toggle|}}\n          {{#if (isAfter toggle)}}\n            <EuiResizableCollapseButton\n              aria-label={{this.toggleLabel}}\n              @externalPosition=\"after\"\n              @direction={{if this.container.isHorizontal \"horizontal\" \"vertical\"}}\n              @internalPosition={{this.togglePosition}}\n              @isVisible={{resizerVisible (this.resizer (resizerIdOf toggle))}}\n              @isCollapsed={{resizerDisabled (this.resizer (resizerIdOf toggle))}}\n              {{on \"click\" (fnToggle this.onToggleClick \"after\")}}\n            />\n          {{/if}}\n        {{/let}}\n      {{/if}}\n    </div>\n  </template>\n}\n\ntype Toggle = EuiResizablePanel['toggle'];\n\nfunction isBefore(toggle: Toggle): boolean {\n  return toggle?.externalPosition === 'before';\n}\n\nfunction isAfter(toggle: Toggle): boolean {\n  return toggle?.externalPosition === 'after';\n}\n\nfunction resizerIdOf(toggle: Toggle): string {\n  return toggle?.resizerId ?? '';\n}\n\nfunction resizerVisible(resizer?: { isFocused: boolean; isDisabled: boolean }): boolean {\n  return Boolean(resizer && (resizer.isFocused || resizer.isDisabled));\n}\n\nfunction resizerDisabled(resizer?: { isDisabled: boolean }): boolean {\n  return Boolean(resizer?.isDisabled);\n}\n\nfunction fnToggle(\n  handler: (position: 'before' | 'after', event: MouseEvent) => void,\n  position: 'before' | 'after'\n): (event: MouseEvent) => void {\n  return (event) => handler(position, event);\n}\n\n"],"names":["WRAPPER_PADDING","none","undefined","s","m","l","EuiResizablePanel","Component","g","prototype","service","i","ownId","randomId","element","resizerIds","id","args","container","state","panels","modeType","mode","Array","isArray","togglePosition","position","isCollapsible","isCollapsed","size","initialSize","style","horizontal","isHorizontal","cssStyle","width","height","classes","wrapperPadding","filter","Boolean","join","contentClasses","scrollable","direction","ids","Object","keys","index","indexOf","prev","next","prevMode","nextMode","toggle","canToggle","showsToggle","externalPosition","resizerId","hasVisibleToggle","toggleLabel","euiI18n","lookupToken","resizer","resizers","onToggleClick","event","onPanelToggle","detail","currentTarget","blur","n","action","register","modifier","minSize","initSize","padding","PANEL_PADDING","paddingSize","schedule","previousElementSibling","nextElementSibling","siblings","from","parentElement","children","el","classList","contains","length","registerPanel","prevSize","getSizePx","rect","getBoundingClientRect","deregisterPanel","setComponentTemplate","precompileTemplate","strictMode","scope","isBefore","EuiResizableCollapseButton","resizerVisible","resizerIdOf","resizerDisabled","on","fnToggle","EuiPanel","isAfter","isFocused","isDisabled","handler"],"mappings":"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"}