@hashicorp/design-system-components 5.0.0 → 5.1.0-rc-20251125151324

package/dist/components/hds/filter-bar/filter-group/numerical.js

@@ -0,0 +1,163 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { guidFor } from '@ember/object/internals';
+import { service } from '@ember/service';
+import { HdsFilterBarNumericalFilterSelectorValues } from '../types.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { g, i, n } from 'decorator-transforms/runtime';
+import { setComponentTemplate } from '@ember/component';
+
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<div class=\"hds-filter-bar__filter-group__numerical\">\n  <Hds::Layout::Flex class=\"hds-filter-bar__filter-group__fields\" @direction=\"column\" @gap=\"16\">\n    <Hds::Form::Select::Field\n      @id={{this._selectorInputId}}\n      class=\"hds-filter-bar__filter-group__field\"\n      {{on \"change\" this.onSelectorChange}}\n      as |F|\n    >\n      <F.Label>\n        {{hds-t \"hds.components.filter-bar.filter-group.numerical.label\" default=\"Number is\"}}\n      </F.Label>\n      <F.Options>\n        <option value=\"\">{{hds-t\n            \"hds.components.filter-bar.filter-group.numerical.selector-input.default-value\"\n            default=\"Pick a selector\"\n          }}</option>\n        {{#each this._selectorValues as |selectorValue|}}\n          <option value={{selectorValue}} selected={{eq selectorValue this._selector}}>{{this._selectorText\n              selectorValue\n            }}</option>\n        {{/each}}\n      </F.Options>\n    </Hds::Form::Select::Field>\n    {{#if (eq this._selector \"between\")}}\n      <Hds::Layout::Flex @gap=\"8\">\n        <Hds::Form::TextInput::Base\n          @id={{this._betweenValueStartInputId}}\n          @type=\"text\"\n          @value={{this.stringBetweenValueStart}}\n          placeholder={{hds-t \"hds.components.filter-bar.between-value-inputs.start-placeholder\" default=\"Start\"}}\n          class=\"hds-filter-bar__filter-group__field\"\n          {{on \"change\" this.onBetweenValueStartChange}}\n        />\n        <Hds::Form::TextInput::Base\n          @id={{this._betweenValueEndInputId}}\n          @type=\"text\"\n          @value={{this.stringBetweenValueEnd}}\n          placeholder={{hds-t \"hds.components.filter-bar.between-value-inputs.end-placeholder\" default=\"End\"}}\n          class=\"hds-filter-bar__filter-group__field\"\n          {{on \"change\" this.onBetweenValueEndChange}}\n        />\n      </Hds::Layout::Flex>\n    {{else}}\n      <Hds::Form::TextInput::Base\n        @id={{this._valueInputId}}\n        @type=\"text\"\n        @value={{this.stringValue}}\n        placeholder={{hds-t\n          \"hds.components.filter-bar.filter-group.numerical.value-input.placeholder\"\n          default=\"Enter a value\"\n        }}\n        class=\"hds-filter-bar__filter-group__field\"\n        {{on \"change\" this.onValueChange}}\n      />\n    {{/if}}\n  </Hds::Layout::Flex>\n  <div class=\"hds-filter-bar__filter-group__clear\">\n    <Hds::Button\n      @text={{hds-t \"hds.components.filter-bar.filter-group.numerical.clear\" default=\"Clear filter\"}}\n      @color=\"tertiary\"\n      @icon=\"rotate-ccw\"\n      @isInline={{true}}\n      {{on \"click\" this.onClear}}\n    />\n  </div>\n</div>");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+const NUMERICAL_SELECTORS = Object.values(HdsFilterBarNumericalFilterSelectorValues);
+const NUMERICAL_SELECTORS_TEXT = {
+  [HdsFilterBarNumericalFilterSelectorValues.lessThan]: '<',
+  [HdsFilterBarNumericalFilterSelectorValues.lessThanOrEqualTo]: '≤',
+  [HdsFilterBarNumericalFilterSelectorValues.equalTo]: '=',
+  [HdsFilterBarNumericalFilterSelectorValues.greaterThanOrEqualTo]: '≥',
+  [HdsFilterBarNumericalFilterSelectorValues.greaterThan]: '>',
+  [HdsFilterBarNumericalFilterSelectorValues.between]: 'between'
+};
+const NUMERICAL_SELECTORS_INPUT_TEXT = {
+  [HdsFilterBarNumericalFilterSelectorValues.lessThan]: 'Less than (<)',
+  [HdsFilterBarNumericalFilterSelectorValues.lessThanOrEqualTo]: 'Less than or equal to (≤)',
+  [HdsFilterBarNumericalFilterSelectorValues.equalTo]: 'Equal to (=)',
+  [HdsFilterBarNumericalFilterSelectorValues.greaterThanOrEqualTo]: 'Greater than or equal to (≥)',
+  [HdsFilterBarNumericalFilterSelectorValues.greaterThan]: 'Greater than (>)',
+  [HdsFilterBarNumericalFilterSelectorValues.between]: 'Between'
+};
+class HdsFilterBarFilterGroupNumerical extends Component {
+  static {
+    g(this.prototype, "hdsIntl", [service]);
+  }
+  #hdsIntl = (i(this, "hdsIntl"), void 0);
+  static {
+    g(this.prototype, "_selector", [tracked]);
+  }
+  #_selector = (i(this, "_selector"), void 0);
+  static {
+    g(this.prototype, "_value", [tracked]);
+  }
+  #_value = (i(this, "_value"), void 0);
+  static {
+    g(this.prototype, "_betweenValueStart", [tracked]);
+  }
+  #_betweenValueStart = (i(this, "_betweenValueStart"), void 0);
+  static {
+    g(this.prototype, "_betweenValueEnd", [tracked]);
+  }
+  #_betweenValueEnd = (i(this, "_betweenValueEnd"), void 0);
+  _selectorValues = NUMERICAL_SELECTORS;
+  _selectorInputId = 'selector-input-' + guidFor(this);
+  _valueInputId = 'value-input-' + guidFor(this);
+  _betweenValueStartInputId = 'between-value-start-input-' + guidFor(this);
+  _betweenValueEndInputId = 'between-value-end-input-' + guidFor(this);
+  constructor(owner, args) {
+    super(owner, args);
+    const {
+      keyFilter
+    } = this.args;
+    if (keyFilter && keyFilter.type === 'numerical') {
+      const data = keyFilter.data;
+      this._selector = data?.selector;
+      if (data.selector === 'between') {
+        if (data.value && typeof data.value === 'object') {
+          this._betweenValueStart = Number(data.value.start);
+          this._betweenValueEnd = Number(data.value.end);
+        }
+      } else {
+        this._value = Number(data.value);
+      }
+    }
+  }
+  get stringValue() {
+    return this._value !== undefined ? this._value.toString() : undefined;
+  }
+  get stringBetweenValueStart() {
+    return this._betweenValueStart !== undefined ? this._betweenValueStart.toString() : undefined;
+  }
+  get stringBetweenValueEnd() {
+    return this._betweenValueEnd !== undefined ? this._betweenValueEnd.toString() : undefined;
+  }
+  onSelectorChange(event) {
+    const select = event.target;
+    this._selector = select.value;
+    if (this._selector === 'between') {
+      this._value = undefined;
+    } else {
+      this._betweenValueStart = undefined;
+      this._betweenValueEnd = undefined;
+    }
+    this._onChange();
+  }
+  static {
+    n(this.prototype, "onSelectorChange", [action]);
+  }
+  onValueChange(event) {
+    const input = event.target;
+    this._value = parseFloat(input.value);
+    this._onChange();
+  }
+  static {
+    n(this.prototype, "onValueChange", [action]);
+  }
+  onBetweenValueStartChange(event) {
+    const input = event.target;
+    this._betweenValueStart = parseFloat(input.value);
+    this._onChange();
+  }
+  static {
+    n(this.prototype, "onBetweenValueStartChange", [action]);
+  }
+  onBetweenValueEndChange(event) {
+    const input = event.target;
+    this._betweenValueEnd = parseFloat(input.value);
+    this._onChange();
+  }
+  static {
+    n(this.prototype, "onBetweenValueEndChange", [action]);
+  }
+  onClear() {
+    this._resetInputValues();
+    this._onChange();
+  }
+  static {
+    n(this.prototype, "onClear", [action]);
+  }
+  _onChange() {
+    const {
+      onChange
+    } = this.args;
+    if (onChange && typeof onChange === 'function') {
+      if (this._selector === 'between' && this._betweenValueStart !== undefined && this._betweenValueEnd !== undefined) {
+        onChange(this._selector, {
+          start: this._betweenValueStart,
+          end: this._betweenValueEnd
+        });
+      } else {
+        onChange(this._selector, this._value);
+      }
+    }
+  }
+  _selectorText = selector => {
+    return this.hdsIntl.t(`hds.components.filter-bar.filter-group.numerical.selector-input.${selector}`, {
+      default: NUMERICAL_SELECTORS_INPUT_TEXT[selector]
+    });
+  };
+  _resetInputValues = () => {
+    this._selector = undefined;
+    this._value = undefined;
+    this._betweenValueStart = undefined;
+    this._betweenValueEnd = undefined;
+  };
+}
+setComponentTemplate(TEMPLATE, HdsFilterBarFilterGroupNumerical);
+
+export { NUMERICAL_SELECTORS, NUMERICAL_SELECTORS_INPUT_TEXT, NUMERICAL_SELECTORS_TEXT, HdsFilterBarFilterGroupNumerical as default };
+//# sourceMappingURL=numerical.js.map

package/dist/components/hds/filter-bar/filter-group/numerical.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"numerical.js","sources":["../../../../../src/components/hds/filter-bar/filter-group/numerical.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\nimport { tracked } from '@glimmer/tracking';\nimport type Owner from '@ember/owner';\nimport { guidFor } from '@ember/object/internals';\nimport { service } from '@ember/service';\n\nimport type HdsIntlService from '../../../../services/hds-intl';\nimport type {\n  HdsFilterBarFilter,\n  HdsFilterBarNumericalFilterSelector,\n  HdsFilterBarNumericalFilterValue,\n} from '../types.ts';\nimport { HdsFilterBarNumericalFilterSelectorValues } from '../types.ts';\n\nexport const NUMERICAL_SELECTORS: HdsFilterBarNumericalFilterSelector[] =\n  Object.values(HdsFilterBarNumericalFilterSelectorValues);\n\nexport const NUMERICAL_SELECTORS_TEXT: Record<\n  HdsFilterBarNumericalFilterSelector,\n  string\n> = {\n  [HdsFilterBarNumericalFilterSelectorValues.lessThan]: '<',\n  [HdsFilterBarNumericalFilterSelectorValues.lessThanOrEqualTo]: '≤',\n  [HdsFilterBarNumericalFilterSelectorValues.equalTo]: '=',\n  [HdsFilterBarNumericalFilterSelectorValues.greaterThanOrEqualTo]: '≥',\n  [HdsFilterBarNumericalFilterSelectorValues.greaterThan]: '>',\n  [HdsFilterBarNumericalFilterSelectorValues.between]: 'between',\n};\n\nexport const NUMERICAL_SELECTORS_INPUT_TEXT: Record<\n  HdsFilterBarNumericalFilterSelector,\n  string\n> = {\n  [HdsFilterBarNumericalFilterSelectorValues.lessThan]: 'Less than (<)',\n  [HdsFilterBarNumericalFilterSelectorValues.lessThanOrEqualTo]:\n    'Less than or equal to (≤)',\n  [HdsFilterBarNumericalFilterSelectorValues.equalTo]: 'Equal to (=)',\n  [HdsFilterBarNumericalFilterSelectorValues.greaterThanOrEqualTo]:\n    'Greater than or equal to (≥)',\n  [HdsFilterBarNumericalFilterSelectorValues.greaterThan]: 'Greater than (>)',\n  [HdsFilterBarNumericalFilterSelectorValues.between]: 'Between',\n};\n\nexport interface HdsFilterBarFilterGroupNumericalSignature {\n  Args: {\n    keyFilter: HdsFilterBarFilter | undefined;\n    onChange?: (\n      selector?: HdsFilterBarNumericalFilterSelector,\n      value?: HdsFilterBarNumericalFilterValue\n    ) => void;\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsFilterBarFilterGroupNumerical extends Component<HdsFilterBarFilterGroupNumericalSignature> {\n  @service hdsIntl!: HdsIntlService;\n\n  @tracked private _selector: HdsFilterBarNumericalFilterSelector | undefined;\n  @tracked private _value: number | undefined;\n  @tracked private _betweenValueStart: number | undefined;\n  @tracked private _betweenValueEnd: number | undefined;\n\n  private _selectorValues = NUMERICAL_SELECTORS;\n  private _selectorInputId = 'selector-input-' + guidFor(this);\n  private _valueInputId = 'value-input-' + guidFor(this);\n  private _betweenValueStartInputId =\n    'between-value-start-input-' + guidFor(this);\n  private _betweenValueEndInputId = 'between-value-end-input-' + guidFor(this);\n\n  constructor(\n    owner: Owner,\n    args: HdsFilterBarFilterGroupNumericalSignature['Args']\n  ) {\n    super(owner, args);\n\n    const { keyFilter } = this.args;\n    if (keyFilter && keyFilter.type === 'numerical') {\n      const data = keyFilter.data;\n      this._selector = data?.selector;\n      if (data.selector === 'between') {\n        if (data.value && typeof data.value === 'object') {\n          this._betweenValueStart = Number(data.value.start);\n          this._betweenValueEnd = Number(data.value.end);\n        }\n      } else {\n        this._value = Number(data.value);\n      }\n    }\n  }\n\n  get stringValue(): string | undefined {\n    return this._value !== undefined ? this._value.toString() : undefined;\n  }\n\n  get stringBetweenValueStart(): string | undefined {\n    return this._betweenValueStart !== undefined\n      ? this._betweenValueStart.toString()\n      : undefined;\n  }\n\n  get stringBetweenValueEnd(): string | undefined {\n    return this._betweenValueEnd !== undefined\n      ? this._betweenValueEnd.toString()\n      : undefined;\n  }\n\n  @action\n  onSelectorChange(event: Event): void {\n    const select = event.target as HTMLSelectElement;\n    this._selector = select.value as HdsFilterBarNumericalFilterSelector;\n    if (this._selector === 'between') {\n      this._value = undefined;\n    } else {\n      this._betweenValueStart = undefined;\n      this._betweenValueEnd = undefined;\n    }\n    this._onChange();\n  }\n\n  @action\n  onValueChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this._value = parseFloat(input.value);\n    this._onChange();\n  }\n\n  @action\n  onBetweenValueStartChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this._betweenValueStart = parseFloat(input.value);\n    this._onChange();\n  }\n\n  @action\n  onBetweenValueEndChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this._betweenValueEnd = parseFloat(input.value);\n    this._onChange();\n  }\n\n  @action\n  onClear(): void {\n    this._resetInputValues();\n    this._onChange();\n  }\n\n  private _onChange(): void {\n    const { onChange } = this.args;\n    if (onChange && typeof onChange === 'function') {\n      if (\n        this._selector === 'between' &&\n        this._betweenValueStart !== undefined &&\n        this._betweenValueEnd !== undefined\n      ) {\n        onChange(this._selector, {\n          start: this._betweenValueStart,\n          end: this._betweenValueEnd,\n        });\n      } else {\n        onChange(this._selector, this._value);\n      }\n    }\n  }\n\n  private _selectorText = (\n    selector: HdsFilterBarNumericalFilterSelector\n  ): string => {\n    return this.hdsIntl.t(\n      `hds.components.filter-bar.filter-group.numerical.selector-input.${selector}`,\n      {\n        default: NUMERICAL_SELECTORS_INPUT_TEXT[selector],\n      }\n    );\n  };\n\n  private _resetInputValues = (): void => {\n    this._selector = undefined;\n    this._value = undefined;\n    this._betweenValueStart = undefined;\n    this._betweenValueEnd = undefined;\n  };\n}\n"],"names":["NUMERICAL_SELECTORS","Object","values","HdsFilterBarNumericalFilterSelectorValues","NUMERICAL_SELECTORS_TEXT","lessThan","lessThanOrEqualTo","equalTo","greaterThanOrEqualTo","greaterThan","between","NUMERICAL_SELECTORS_INPUT_TEXT","HdsFilterBarFilterGroupNumerical","Component","g","prototype","service","i","void 0","tracked","_selectorValues","_selectorInputId","guidFor","_valueInputId","_betweenValueStartInputId","_betweenValueEndInputId","constructor","owner","args","keyFilter","type","data","_selector","selector","value","_betweenValueStart","Number","start","_betweenValueEnd","end","_value","stringValue","undefined","toString","stringBetweenValueStart","stringBetweenValueEnd","onSelectorChange","event","select","target","_onChange","n","action","onValueChange","input","parseFloat","onBetweenValueStartChange","onBetweenValueEndChange","onClear","_resetInputValues","onChange","_selectorText","hdsIntl","t","default","setComponentTemplate","TEMPLATE"],"mappings":"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"}

package/dist/components/hds/filter-bar/filter-group/radio.js

@@ -0,0 +1,40 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { precompileTemplate } from '@ember/template-compilation';
+import { n } from 'decorator-transforms/runtime';
+import { setComponentTemplate } from '@ember/component';
+
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<li class=\"hds-filter-bar__filter-group__selection-option\">\n  <Hds::Form::Radio::Field checked={{this.isChecked}} @value={{@value}} {{on \"change\" this.onChange}} as |F|>\n    <F.Label>{{yield}}</F.Label>\n  </Hds::Form::Radio::Field>\n</li>");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+class HdsFilterBarFilterGroupRadio extends Component {
+  onChange(event) {
+    const {
+      onChange
+    } = this.args;
+    if (onChange && typeof onChange === 'function') {
+      onChange(event);
+    }
+  }
+  static {
+    n(this.prototype, "onChange", [action]);
+  }
+  get isChecked() {
+    const {
+      keyFilter,
+      value
+    } = this.args;
+    if (keyFilter && keyFilter.type === 'single-select' && value && 'value' in keyFilter.data) {
+      return keyFilter.data.value === value;
+    }
+    return false;
+  }
+}
+setComponentTemplate(TEMPLATE, HdsFilterBarFilterGroupRadio);
+
+export { HdsFilterBarFilterGroupRadio as default };
+//# sourceMappingURL=radio.js.map

package/dist/components/hds/filter-bar/filter-group/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sources":["../../../../../src/components/hds/filter-bar/filter-group/radio.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\n\nimport type { HdsFilterBarFilter } from '../types.ts';\n\nexport interface HdsFilterBarFilterGroupRadioSignature {\n  Args: {\n    value?: string;\n    keyFilter: HdsFilterBarFilter | undefined;\n    onChange?: (event: Event) => void;\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsFilterBarFilterGroupRadio extends Component<HdsFilterBarFilterGroupRadioSignature> {\n  @action\n  onChange(event: Event): void {\n    const { onChange } = this.args;\n    if (onChange && typeof onChange === 'function') {\n      onChange(event);\n    }\n  }\n\n  get isChecked(): boolean {\n    const { keyFilter, value } = this.args;\n    if (\n      keyFilter &&\n      keyFilter.type === 'single-select' &&\n      value &&\n      'value' in keyFilter.data\n    ) {\n      return keyFilter.data.value === value;\n    }\n    return false;\n  }\n}\n"],"names":["HdsFilterBarFilterGroupRadio","Component","onChange","event","args","n","prototype","action","isChecked","keyFilter","value","type","data","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;;AAmBe,MAAMA,4BAA4B,SAASC,SAAS,CAAwC;EAEzGC,QAAQA,CAACC,KAAY,EAAQ;IAC3B,MAAM;AAAED,MAAAA;KAAU,GAAG,IAAI,CAACE,IAAI;AAC9B,IAAA,IAAIF,QAAQ,IAAI,OAAOA,QAAQ,KAAK,UAAU,EAAE;MAC9CA,QAAQ,CAACC,KAAK,CAAC;AACjB,IAAA;AACF,EAAA;AAAC,EAAA;IAAAE,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,UAAA,EAAA,CANAC,MAAM,CAAA,CAAA;AAAA;EAQP,IAAIC,SAASA,GAAY;IACvB,MAAM;MAAEC,SAAS;AAAEC,MAAAA;KAAO,GAAG,IAAI,CAACN,IAAI;AACtC,IAAA,IACEK,SAAS,IACTA,SAAS,CAACE,IAAI,KAAK,eAAe,IAClCD,KAAK,IACL,OAAO,IAAID,SAAS,CAACG,IAAI,EACzB;AACA,MAAA,OAAOH,SAAS,CAACG,IAAI,CAACF,KAAK,KAAKA,KAAK;AACvC,IAAA;AACA,IAAA,OAAO,KAAK;AACd,EAAA;AACF;AAACG,oBAAA,CAAAC,QAAA,EArBoBd,4BAA4B,CAAA;;;;"}

package/dist/components/hds/filter-bar/index.js

@@ -0,0 +1,237 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { service } from '@ember/service';
+import '../dropdown/index.js';
+import '../yield/index.js';
+import './dropdown.js';
+import { isArray } from '@ember/array';
+import { NUMERICAL_SELECTORS_TEXT } from './filter-group/numerical.js';
+import { DATE_SELECTORS_TEXT } from './filter-group/date.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { g, i, n } from 'decorator-transforms/runtime';
+import { setComponentTemplate } from '@ember/component';
+
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<div class=\"hds-filter-bar\" ...attributes>\n  <Hds::Layout::Flex @align=\"end\" @gap=\"8\" class=\"hds-filter-bar__actions\">\n    <Hds::Button\n      @text={{if\n        this._isExpanded\n        (hds-t \"hds.components.filter-bar.expand-collapse-button.collapse\" default=\"Collapse filters\")\n        (hds-t \"hds.components.filter-bar.expand-collapse-button.expand\" default=\"Expand filters\")\n      }}\n      @color=\"secondary\"\n      @size=\"small\"\n      @icon={{if this._isExpanded \"unfold-close\" \"unfold-open\"}}\n      @isIconOnly={{true}}\n      {{on \"click\" this.toggleExpand}}\n    />\n    {{yield\n      (hash\n        Dropdown=(component\n          \"hds/filter-bar/dropdown\" filters=@filters isLiveFilter=@isLiveFilter onFilter=this.onFilter\n        )\n      )\n    }}\n    {{#if @hasSearch}}\n      <Hds::Form::TextInput::Base\n        @type=\"search\"\n        @width=\"320px\"\n        @value={{this.searchValue}}\n        class=\"hds-filter-bar__search\"\n        placeholder={{hds-t \"hds.components.filter-bar.search.placeholder\" default=\"Search\"}}\n        aria-label={{hds-t \"hds.components.filter-bar.search.aria-label\" default=\"Search filters\"}}\n        name=\"search\"\n        {{on \"change\" this.onSearch}}\n      />\n    {{/if}}\n    <Hds::Layout::Flex @gap=\"8\" @align=\"center\" class=\"hds-filter-bar__actions__right\">\n      {{yield (hash ActionsGeneric=(component \"hds/yield\"))}}\n      {{yield (hash ActionsDropdown=(component \"hds/dropdown\"))}}\n    </Hds::Layout::Flex>\n  </Hds::Layout::Flex>\n  {{#if this._isExpanded}}\n    <div class=\"hds-filter-bar__filters\">\n      {{#if this.hasActiveFilters}}\n        {{#each-in @filters as |key filter|}}\n          {{#if filter.data}}\n            {{#if (eq filter.type \"single-select\")}}\n              <Hds::Tag\n                @text=\"{{this._filterKeyText key filter}}: {{this._filterText filter}}\"\n                @onDismiss={{fn this.onFilterDismiss key}}\n              />\n            {{else if (eq filter.type \"numerical\")}}\n              <Hds::Tag\n                @text=\"{{this._filterKeyText key filter}} {{this._numericalFilterText filter}}\"\n                @onDismiss={{fn this.onFilterDismiss key}}\n              />\n            {{else if (or (eq filter.type \"date\") (eq filter.type \"datetime\") (eq filter.type \"time\"))}}\n              <Hds::Tag\n                @text=\"{{this._filterKeyText key filter}} {{this._dateFilterText filter}}\"\n                @onDismiss={{fn this.onFilterDismiss key}}\n              />\n            {{else if (eq filter.type \"search\")}}\n              <Hds::Tag\n                @text=\"{{this._filterKeyText key filter}}: {{this._filterText filter}}\"\n                @onDismiss={{fn this.onFilterDismiss key}}\n              />\n            {{else if (eq filter.type \"generic\")}}\n              <Hds::Tag\n                @text=\"{{this._filterKeyText key filter}} {{this._genericFilterText filter}}\"\n                @onDismiss={{fn this.onFilterDismiss key}}\n              />\n            {{else if (eq filter.type \"multi-select\")}}\n              {{#each (this._filterArrayData filter.data) as |item|}}\n                <Hds::Tag\n                  @text=\"{{this._filterKeyText key filter}}: {{item.value}}\"\n                  @onDismiss={{fn this.onFilterDismiss key item.value}}\n                />\n              {{/each}}\n            {{/if}}\n          {{/if}}\n        {{/each-in}}\n        <Hds::Button\n          class=\"hds-filter-bar__clear-button\"\n          @text=\"Clear all filters\"\n          @color=\"tertiary\"\n          @icon=\"x\"\n          @size=\"small\"\n          {{on \"click\" this.clearFilters}}\n        />\n      {{else}}\n        <Hds::Text::Body @size={{100}} @color=\"faint\">\n          {{hds-t \"hds.components.filter-bar.no-filters-applied\" default=\"No filters applied\"}}\n        </Hds::Text::Body>\n      {{/if}}\n    </div>\n  {{/if}}\n</div>");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+class HdsFilterBar extends Component {
+  static {
+    g(this.prototype, "hdsIntl", [service]);
+  }
+  #hdsIntl = (i(this, "hdsIntl"), void 0);
+  static {
+    g(this.prototype, "_isExpanded", [tracked], function () {
+      return false;
+    });
+  }
+  #_isExpanded = (i(this, "_isExpanded"), void 0);
+  get searchValue() {
+    const {
+      filters
+    } = this.args;
+    if (filters['search']) {
+      return this._filterText(filters['search']);
+    }
+    return '';
+  }
+  onFilter(filters) {
+    const {
+      onFilter
+    } = this.args;
+    if (onFilter && typeof onFilter === 'function') {
+      onFilter(filters);
+      if (Object.keys(filters).length > 0) {
+        this._isExpanded = true;
+      } else {
+        this._isExpanded = false;
+      }
+    }
+  }
+  static {
+    n(this.prototype, "onFilter", [action]);
+  }
+  clearFilters() {
+    const {
+      onFilter
+    } = this.args;
+    if (onFilter && typeof onFilter === 'function') {
+      onFilter({});
+      this._isExpanded = false;
+    }
+  }
+  static {
+    n(this.prototype, "clearFilters", [action]);
+  }
+  onSearch(event) {
+    const {
+      filters
+    } = this.args;
+    const input = event.target;
+    const value = input?.value;
+    const newFilters = {};
+    Object.keys(filters).forEach(k => {
+      newFilters[k] = JSON.parse(JSON.stringify(filters[k]));
+    });
+    if (value.length > 0) {
+      newFilters['search'] = {
+        type: 'search',
+        text: 'Search',
+        data: {
+          value
+        }
+      };
+    } else {
+      delete newFilters['search'];
+    }
+    this.onFilter({
+      ...newFilters
+    });
+  }
+  static {
+    n(this.prototype, "onSearch", [action]);
+  }
+  toggleExpand() {
+    this._isExpanded = !this._isExpanded;
+  }
+  static {
+    n(this.prototype, "toggleExpand", [action]);
+  }
+  get hasActiveFilters() {
+    return Object.keys(this.args.filters).length > 0;
+  }
+  onFilterDismiss = (key, filterValue) => {
+    const {
+      filters
+    } = this.args;
+    if (filters && filters[key]) {
+      const keyFilter = filters[key];
+      const newFilters = {};
+      Object.keys(filters).forEach(k => {
+        newFilters[k] = JSON.parse(JSON.stringify(filters[k]));
+      });
+      if (keyFilter.type === 'multi-select' && isArray(keyFilter.data)) {
+        const newKeyfilter = keyFilter.data?.filter(item => item.value !== filterValue);
+        if (newKeyfilter.length === 0) {
+          delete newFilters[key];
+        } else {
+          newFilters[key] = {
+            type: 'multi-select',
+            text: keyFilter.text,
+            data: newKeyfilter
+          };
+        }
+      } else {
+        delete newFilters[key];
+      }
+      this.onFilter({
+        ...newFilters
+      });
+    }
+  };
+  _filterData = data => {
+    if ('value' in data) {
+      return {
+        value: data.value
+      };
+    }
+    return {
+      value: ''
+    };
+  };
+  _filterText = filter => {
+    const result = this._filterData(filter.data);
+    const resultText = result?.value;
+    return resultText ?? '';
+  };
+  _filterArrayData = data => {
+    if (isArray(data)) {
+      return data.map(item => this._filterData(item));
+    }
+    return [];
+  };
+  _filterKeyText = (key, data) => {
+    if (data.text) {
+      return data.text;
+    } else {
+      return key;
+    }
+  };
+  _numericalFilterText = filter => {
+    const data = filter.data;
+    if (filter.type === 'numerical' && 'selector' in data && 'value' in data) {
+      const selector = data.selector;
+      if (selector === 'between' && typeof data.value === 'object' && data.value !== null) {
+        const separatorText = this.hdsIntl.t('hds.components.filter-bar.filter-text.numerical-filter.separator', {
+          default: 'and'
+        });
+        return `${NUMERICAL_SELECTORS_TEXT[selector]} ${data.value.start} ${separatorText} ${data.value.end}`;
+      } else if (typeof data.value !== 'object') {
+        return `${NUMERICAL_SELECTORS_TEXT[selector]} ${data.value}`;
+      }
+      return '';
+    } else {
+      return '';
+    }
+  };
+  _dateFilterText = filter => {
+    const data = filter.data;
+    if ((filter.type === 'date' || filter.type === 'datetime' || filter.type === 'time') && 'selector' in data && 'value' in data) {
+      const selector = data.selector;
+      if (selector === 'between' && typeof data.value === 'object' && data.value !== null) {
+        const separatorText = this.hdsIntl.t('hds.components.filter-bar.filter-text.date-filter.separator', {
+          default: 'and'
+        });
+        const startDateText = this._dateDisplayText(data.value.start, filter.type);
+        const endDateText = this._dateDisplayText(data.value.end, filter.type);
+        return `${DATE_SELECTORS_TEXT[selector]} ${startDateText} ${separatorText} ${endDateText}`;
+      } else if (data.value !== null && typeof data.value !== 'object') {
+        const dateText = this._dateDisplayText(data.value, filter.type);
+        return `${DATE_SELECTORS_TEXT[selector]} ${dateText}`;
+      }
+      return '';
+    } else {
+      return '';
+    }
+  };
+  _dateDisplayText = (dateString, filterType) => {
+    let date;
+    if (filterType === 'time') {
+      date = new Date(`1970-01-01T${dateString}`);
+    } else {
+      date = new Date(dateString);
+    }
+    let options = {};
+    if (filterType === 'date') {
+      options = {
+        dateStyle: 'short'
+      };
+    } else if (filterType === 'time') {
+      options = {
+        timeStyle: 'short'
+      };
+    } else {
+      options = {
+        dateStyle: 'short',
+        timeStyle: 'short'
+      };
+    }
+    const newDate = new Intl.DateTimeFormat(undefined, options);
+    return newDate.format(date);
+  };
+  _genericFilterText = filter => {
+    if ('dismissTagText' in filter) {
+      return filter.dismissTagText ?? '';
+    } else {
+      return '';
+    }
+  };
+}
+setComponentTemplate(TEMPLATE, HdsFilterBar);
+
+export { HdsFilterBar as default };
+//# sourceMappingURL=index.js.map

package/dist/components/hds/filter-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/hds/filter-bar/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\nimport { tracked } from '@glimmer/tracking';\nimport { service } from '@ember/service';\n\nimport type { WithBoundArgs } from '@glint/template';\n\nimport type HdsIntlService from '../../../services/hds-intl';\nimport type {\n  HdsFilterBarFilters,\n  HdsFilterBarFilter,\n  HdsFilterBarFilterType,\n  HdsFilterBarData,\n  HdsFilterBarGenericFilterData,\n} from './types.ts';\nimport HdsDropdown from '../dropdown/index.ts';\nimport HdsYield from '../yield/index.ts';\nimport HdsFilterBarDropdown from './dropdown.ts';\nimport { isArray } from '@ember/array';\n\nimport { NUMERICAL_SELECTORS_TEXT } from './filter-group/numerical.ts';\nimport { DATE_SELECTORS_TEXT } from './filter-group/date.ts';\n\nexport interface HdsFilterBarSignature {\n  Args: {\n    filters: HdsFilterBarFilters;\n    isLiveFilter?: boolean;\n    hasSearch?: boolean;\n    onFilter?: (filters: HdsFilterBarFilters) => void;\n  };\n  Blocks: {\n    default?: [\n      {\n        ActionsDropdown?: WithBoundArgs<typeof HdsDropdown, never>;\n        ActionsGeneric?: WithBoundArgs<typeof HdsYield, never>;\n        Dropdown?: WithBoundArgs<\n          typeof HdsFilterBarDropdown,\n          'filters' | 'isLiveFilter' | 'onFilter'\n        >;\n      },\n    ];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsFilterBar extends Component<HdsFilterBarSignature> {\n  @service hdsIntl!: HdsIntlService;\n\n  @tracked _isExpanded: boolean = false;\n\n  get searchValue(): string {\n    const { filters } = this.args;\n    if (filters['search']) {\n      return this._filterText(filters['search']);\n    }\n    return '';\n  }\n\n  @action\n  onFilter(filters: HdsFilterBarFilters): void {\n    const { onFilter } = this.args;\n    if (onFilter && typeof onFilter === 'function') {\n      onFilter(filters);\n\n      if (Object.keys(filters).length > 0) {\n        this._isExpanded = true;\n      } else {\n        this._isExpanded = false;\n      }\n    }\n  }\n\n  @action\n  clearFilters(): void {\n    const { onFilter } = this.args;\n    if (onFilter && typeof onFilter === 'function') {\n      onFilter({});\n      this._isExpanded = false;\n    }\n  }\n\n  @action\n  onSearch(event: Event): void {\n    const { filters } = this.args;\n    const input = event.target as HTMLInputElement;\n    const value = input?.value;\n\n    const newFilters = {} as HdsFilterBarFilters;\n\n    Object.keys(filters).forEach((k) => {\n      newFilters[k] = JSON.parse(\n        JSON.stringify(filters[k])\n      ) as HdsFilterBarFilter;\n    });\n\n    if (value.length > 0) {\n      newFilters['search'] = {\n        type: 'search',\n        text: 'Search',\n        data: { value },\n      };\n    } else {\n      delete newFilters['search'];\n    }\n\n    this.onFilter({ ...newFilters });\n  }\n\n  @action\n  toggleExpand(): void {\n    this._isExpanded = !this._isExpanded;\n  }\n\n  get hasActiveFilters(): boolean {\n    return Object.keys(this.args.filters).length > 0;\n  }\n\n  private onFilterDismiss = (key: string, filterValue?: unknown): void => {\n    const { filters } = this.args;\n    if (filters && filters[key]) {\n      const keyFilter: HdsFilterBarFilter = filters[key];\n      const newFilters = {} as HdsFilterBarFilters;\n\n      Object.keys(filters).forEach((k) => {\n        newFilters[k] = JSON.parse(\n          JSON.stringify(filters[k])\n        ) as HdsFilterBarFilter;\n      });\n\n      if (keyFilter.type === 'multi-select' && isArray(keyFilter.data)) {\n        const newKeyfilter = keyFilter.data?.filter(\n          (item) => item.value !== filterValue\n        );\n        if (newKeyfilter.length === 0) {\n          delete newFilters[key];\n        } else {\n          newFilters[key] = {\n            type: 'multi-select',\n            text: keyFilter.text,\n            data: newKeyfilter,\n          };\n        }\n      } else {\n        delete newFilters[key];\n      }\n\n      this.onFilter({ ...newFilters });\n    }\n  };\n\n  private _filterData = (\n    data: HdsFilterBarData\n  ): HdsFilterBarGenericFilterData => {\n    if ('value' in data) {\n      return { value: data.value };\n    }\n    return { value: '' };\n  };\n\n  private _filterText = (filter: HdsFilterBarFilter): string => {\n    const result = this._filterData(filter.data);\n    const resultText = result?.value as string;\n    return resultText ?? '';\n  };\n\n  private _filterArrayData = (data: HdsFilterBarData): { value: unknown }[] => {\n    if (isArray(data)) {\n      return data.map((item) => this._filterData(item));\n    }\n    return [];\n  };\n\n  private _filterKeyText = (key: string, data: HdsFilterBarFilter): string => {\n    if (data.text) {\n      return data.text;\n    } else {\n      return key;\n    }\n  };\n\n  private _numericalFilterText = (filter: HdsFilterBarFilter): string => {\n    const data = filter.data;\n\n    if (filter.type === 'numerical' && 'selector' in data && 'value' in data) {\n      const selector = data.selector as keyof typeof NUMERICAL_SELECTORS_TEXT;\n      if (\n        selector === 'between' &&\n        typeof data.value === 'object' &&\n        data.value !== null\n      ) {\n        const separatorText = this.hdsIntl.t(\n          'hds.components.filter-bar.filter-text.numerical-filter.separator',\n          {\n            default: 'and',\n          }\n        );\n        return `${NUMERICAL_SELECTORS_TEXT[selector]} ${data.value.start} ${separatorText} ${data.value.end}`;\n      } else if (typeof data.value !== 'object') {\n        return `${NUMERICAL_SELECTORS_TEXT[selector]} ${data.value}`;\n      }\n      return '';\n    } else {\n      return '';\n    }\n  };\n\n  private _dateFilterText = (filter: HdsFilterBarFilter): string => {\n    const data = filter.data;\n\n    if (\n      (filter.type === 'date' ||\n        filter.type === 'datetime' ||\n        filter.type === 'time') &&\n      'selector' in data &&\n      'value' in data\n    ) {\n      const selector = data.selector as keyof typeof DATE_SELECTORS_TEXT;\n      if (\n        selector === 'between' &&\n        typeof data.value === 'object' &&\n        data.value !== null\n      ) {\n        const separatorText = this.hdsIntl.t(\n          'hds.components.filter-bar.filter-text.date-filter.separator',\n          {\n            default: 'and',\n          }\n        );\n        const startDateText = this._dateDisplayText(\n          data.value.start as string,\n          filter.type\n        );\n        const endDateText = this._dateDisplayText(\n          data.value.end as string,\n          filter.type\n        );\n        return `${DATE_SELECTORS_TEXT[selector]} ${startDateText} ${separatorText} ${endDateText}`;\n      } else if (data.value !== null && typeof data.value !== 'object') {\n        const dateText = this._dateDisplayText(\n          data.value as string,\n          filter.type\n        );\n        return `${DATE_SELECTORS_TEXT[selector]} ${dateText}`;\n      }\n      return '';\n    } else {\n      return '';\n    }\n  };\n\n  private _dateDisplayText = (\n    dateString: string,\n    filterType: HdsFilterBarFilterType\n  ): string => {\n    let date;\n    if (filterType === 'time') {\n      date = new Date(`1970-01-01T${dateString}`);\n    } else {\n      date = new Date(dateString);\n    }\n\n    let options = {};\n    if (filterType === 'date') {\n      options = { dateStyle: 'short' };\n    } else if (filterType === 'time') {\n      options = { timeStyle: 'short' };\n    } else {\n      options = { dateStyle: 'short', timeStyle: 'short' };\n    }\n\n    const newDate = new Intl.DateTimeFormat(undefined, options);\n    return newDate.format(date);\n  };\n\n  private _genericFilterText = (filter: HdsFilterBarFilter): string => {\n    if ('dismissTagText' in filter) {\n      return filter.dismissTagText ?? '';\n    } else {\n      return '';\n    }\n  };\n}\n"],"names":["HdsFilterBar","Component","g","prototype","service","i","void 0","tracked","searchValue","filters","args","_filterText","onFilter","Object","keys","length","_isExpanded","n","action","clearFilters","onSearch","event","input","target","value","newFilters","forEach","k","JSON","parse","stringify","type","text","data","toggleExpand","hasActiveFilters","onFilterDismiss","key","filterValue","keyFilter","isArray","newKeyfilter","filter","item","_filterData","result","resultText","_filterArrayData","map","_filterKeyText","_numericalFilterText","selector","separatorText","hdsIntl","t","default","NUMERICAL_SELECTORS_TEXT","start","end","_dateFilterText","startDateText","_dateDisplayText","endDateText","DATE_SELECTORS_TEXT","dateText","dateString","filterType","date","Date","options","dateStyle","timeStyle","newDate","Intl","DateTimeFormat","undefined","format","_genericFilterText","dismissTagText","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;;AA+Ce,MAAMA,YAAY,SAASC,SAAS,CAAwB;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CACxEC,OAAO,CAAA,CAAA;AAAA;AAAA,EAAA,QAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,SAAA,CAAA,EAAAC,MAAA;AAAA,EAAA;IAAAJ,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,aAAA,EAAA,CAEPI,OAAO,CAAA,EAAA,YAAA;AAAA,MAAA,OAAwB,KAAK;AAAA,IAAA,CAAA,CAAA;AAAA;AAAA,EAAA,YAAA,IAAAF,CAAA,CAAA,IAAA,EAAA,aAAA,CAAA,EAAAC,MAAA;EAErC,IAAIE,WAAWA,GAAW;IACxB,MAAM;AAAEC,MAAAA;KAAS,GAAG,IAAI,CAACC,IAAI;AAC7B,IAAA,IAAID,OAAO,CAAC,QAAQ,CAAC,EAAE;MACrB,OAAO,IAAI,CAACE,WAAW,CAACF,OAAO,CAAC,QAAQ,CAAC,CAAC;AAC5C,IAAA;AACA,IAAA,OAAO,EAAE;AACX,EAAA;EAGAG,QAAQA,CAACH,OAA4B,EAAQ;IAC3C,MAAM;AAAEG,MAAAA;KAAU,GAAG,IAAI,CAACF,IAAI;AAC9B,IAAA,IAAIE,QAAQ,IAAI,OAAOA,QAAQ,KAAK,UAAU,EAAE;MAC9CA,QAAQ,CAACH,OAAO,CAAC;MAEjB,IAAII,MAAM,CAACC,IAAI,CAACL,OAAO,CAAC,CAACM,MAAM,GAAG,CAAC,EAAE;QACnC,IAAI,CAACC,WAAW,GAAG,IAAI;AACzB,MAAA,CAAC,MAAM;QACL,IAAI,CAACA,WAAW,GAAG,KAAK;AAC1B,MAAA;AACF,IAAA;AACF,EAAA;AAAC,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAd,SAAA,EAAA,UAAA,EAAA,CAZAe,MAAM,CAAA,CAAA;AAAA;AAePC,EAAAA,YAAYA,GAAS;IACnB,MAAM;AAAEP,MAAAA;KAAU,GAAG,IAAI,CAACF,IAAI;AAC9B,IAAA,IAAIE,QAAQ,IAAI,OAAOA,QAAQ,KAAK,UAAU,EAAE;MAC9CA,QAAQ,CAAC,EAAE,CAAC;MACZ,IAAI,CAACI,WAAW,GAAG,KAAK;AAC1B,IAAA;AACF,EAAA;AAAC,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAd,SAAA,EAAA,cAAA,EAAA,CAPAe,MAAM,CAAA,CAAA;AAAA;EAUPE,QAAQA,CAACC,KAAY,EAAQ;IAC3B,MAAM;AAAEZ,MAAAA;KAAS,GAAG,IAAI,CAACC,IAAI;AAC7B,IAAA,MAAMY,KAAK,GAAGD,KAAK,CAACE,MAA0B;AAC9C,IAAA,MAAMC,KAAK,GAAGF,KAAK,EAAEE,KAAK;IAE1B,MAAMC,UAAU,GAAG,EAAyB;IAE5CZ,MAAM,CAACC,IAAI,CAACL,OAAO,CAAC,CAACiB,OAAO,CAAEC,CAAC,IAAK;AAClCF,MAAAA,UAAU,CAACE,CAAC,CAAC,GAAGC,IAAI,CAACC,KAAK,CACxBD,IAAI,CAACE,SAAS,CAACrB,OAAO,CAACkB,CAAC,CAAC,CAC3B,CAAuB;AACzB,IAAA,CAAC,CAAC;AAEF,IAAA,IAAIH,KAAK,CAACT,MAAM,GAAG,CAAC,EAAE;MACpBU,UAAU,CAAC,QAAQ,CAAC,GAAG;AACrBM,QAAAA,IAAI,EAAE,QAAQ;AACdC,QAAAA,IAAI,EAAE,QAAQ;AACdC,QAAAA,IAAI,EAAE;AAAET,UAAAA;AAAM;OACf;AACH,IAAA,CAAC,MAAM;MACL,OAAOC,UAAU,CAAC,QAAQ,CAAC;AAC7B,IAAA;IAEA,IAAI,CAACb,QAAQ,CAAC;MAAE,GAAGa;AAAW,KAAC,CAAC;AAClC,EAAA;AAAC,EAAA;IAAAR,CAAA,CAAA,IAAA,CAAAd,SAAA,EAAA,UAAA,EAAA,CAzBAe,MAAM,CAAA,CAAA;AAAA;AA4BPgB,EAAAA,YAAYA,GAAS;AACnB,IAAA,IAAI,CAAClB,WAAW,GAAG,CAAC,IAAI,CAACA,WAAW;AACtC,EAAA;AAAC,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAd,SAAA,EAAA,cAAA,EAAA,CAHAe,MAAM,CAAA,CAAA;AAAA;EAKP,IAAIiB,gBAAgBA,GAAY;AAC9B,IAAA,OAAOtB,MAAM,CAACC,IAAI,CAAC,IAAI,CAACJ,IAAI,CAACD,OAAO,CAAC,CAACM,MAAM,GAAG,CAAC;AAClD,EAAA;AAEQqB,EAAAA,eAAe,GAAGA,CAACC,GAAW,EAAEC,WAAqB,KAAW;IACtE,MAAM;AAAE7B,MAAAA;KAAS,GAAG,IAAI,CAACC,IAAI;AAC7B,IAAA,IAAID,OAAO,IAAIA,OAAO,CAAC4B,GAAG,CAAC,EAAE;AAC3B,MAAA,MAAME,SAA6B,GAAG9B,OAAO,CAAC4B,GAAG,CAAC;MAClD,MAAMZ,UAAU,GAAG,EAAyB;MAE5CZ,MAAM,CAACC,IAAI,CAACL,OAAO,CAAC,CAACiB,OAAO,CAAEC,CAAC,IAAK;AAClCF,QAAAA,UAAU,CAACE,CAAC,CAAC,GAAGC,IAAI,CAACC,KAAK,CACxBD,IAAI,CAACE,SAAS,CAACrB,OAAO,CAACkB,CAAC,CAAC,CAC3B,CAAuB;AACzB,MAAA,CAAC,CAAC;AAEF,MAAA,IAAIY,SAAS,CAACR,IAAI,KAAK,cAAc,IAAIS,OAAO,CAACD,SAAS,CAACN,IAAI,CAAC,EAAE;AAChE,QAAA,MAAMQ,YAAY,GAAGF,SAAS,CAACN,IAAI,EAAES,MAAM,CACxCC,IAAI,IAAKA,IAAI,CAACnB,KAAK,KAAKc,WAC3B,CAAC;AACD,QAAA,IAAIG,YAAY,CAAC1B,MAAM,KAAK,CAAC,EAAE;UAC7B,OAAOU,UAAU,CAACY,GAAG,CAAC;AACxB,QAAA,CAAC,MAAM;UACLZ,UAAU,CAACY,GAAG,CAAC,GAAG;AAChBN,YAAAA,IAAI,EAAE,cAAc;YACpBC,IAAI,EAAEO,SAAS,CAACP,IAAI;AACpBC,YAAAA,IAAI,EAAEQ;WACP;AACH,QAAA;AACF,MAAA,CAAC,MAAM;QACL,OAAOhB,UAAU,CAACY,GAAG,CAAC;AACxB,MAAA;MAEA,IAAI,CAACzB,QAAQ,CAAC;QAAE,GAAGa;AAAW,OAAC,CAAC;AAClC,IAAA;EACF,CAAC;EAEOmB,WAAW,GACjBX,IAAsB,IACY;IAClC,IAAI,OAAO,IAAIA,IAAI,EAAE;MACnB,OAAO;QAAET,KAAK,EAAES,IAAI,CAACT;OAAO;AAC9B,IAAA;IACA,OAAO;AAAEA,MAAAA,KAAK,EAAE;KAAI;EACtB,CAAC;EAEOb,WAAW,GAAI+B,MAA0B,IAAa;IAC5D,MAAMG,MAAM,GAAG,IAAI,CAACD,WAAW,CAACF,MAAM,CAACT,IAAI,CAAC;AAC5C,IAAA,MAAMa,UAAU,GAAGD,MAAM,EAAErB,KAAe;IAC1C,OAAOsB,UAAU,IAAI,EAAE;EACzB,CAAC;EAEOC,gBAAgB,GAAId,IAAsB,IAA2B;AAC3E,IAAA,IAAIO,OAAO,CAACP,IAAI,CAAC,EAAE;AACjB,MAAA,OAAOA,IAAI,CAACe,GAAG,CAAEL,IAAI,IAAK,IAAI,CAACC,WAAW,CAACD,IAAI,CAAC,CAAC;AACnD,IAAA;AACA,IAAA,OAAO,EAAE;EACX,CAAC;AAEOM,EAAAA,cAAc,GAAGA,CAACZ,GAAW,EAAEJ,IAAwB,KAAa;IAC1E,IAAIA,IAAI,CAACD,IAAI,EAAE;MACb,OAAOC,IAAI,CAACD,IAAI;AAClB,IAAA,CAAC,MAAM;AACL,MAAA,OAAOK,GAAG;AACZ,IAAA;EACF,CAAC;EAEOa,oBAAoB,GAAIR,MAA0B,IAAa;AACrE,IAAA,MAAMT,IAAI,GAAGS,MAAM,CAACT,IAAI;AAExB,IAAA,IAAIS,MAAM,CAACX,IAAI,KAAK,WAAW,IAAI,UAAU,IAAIE,IAAI,IAAI,OAAO,IAAIA,IAAI,EAAE;AACxE,MAAA,MAAMkB,QAAQ,GAAGlB,IAAI,CAACkB,QAAiD;AACvE,MAAA,IACEA,QAAQ,KAAK,SAAS,IACtB,OAAOlB,IAAI,CAACT,KAAK,KAAK,QAAQ,IAC9BS,IAAI,CAACT,KAAK,KAAK,IAAI,EACnB;QACA,MAAM4B,aAAa,GAAG,IAAI,CAACC,OAAO,CAACC,CAAC,CAClC,kEAAkE,EAClE;AACEC,UAAAA,OAAO,EAAE;AACX,SACF,CAAC;AACD,QAAA,OAAO,GAAGC,wBAAwB,CAACL,QAAQ,CAAC,CAAA,CAAA,EAAIlB,IAAI,CAACT,KAAK,CAACiC,KAAK,CAAA,CAAA,EAAIL,aAAa,CAAA,CAAA,EAAInB,IAAI,CAACT,KAAK,CAACkC,GAAG,CAAA,CAAE;MACvG,CAAC,MAAM,IAAI,OAAOzB,IAAI,CAACT,KAAK,KAAK,QAAQ,EAAE;QACzC,OAAO,CAAA,EAAGgC,wBAAwB,CAACL,QAAQ,CAAC,CAAA,CAAA,EAAIlB,IAAI,CAACT,KAAK,CAAA,CAAE;AAC9D,MAAA;AACA,MAAA,OAAO,EAAE;AACX,IAAA,CAAC,MAAM;AACL,MAAA,OAAO,EAAE;AACX,IAAA;EACF,CAAC;EAEOmC,eAAe,GAAIjB,MAA0B,IAAa;AAChE,IAAA,MAAMT,IAAI,GAAGS,MAAM,CAACT,IAAI;IAExB,IACE,CAACS,MAAM,CAACX,IAAI,KAAK,MAAM,IACrBW,MAAM,CAACX,IAAI,KAAK,UAAU,IAC1BW,MAAM,CAACX,IAAI,KAAK,MAAM,KACxB,UAAU,IAAIE,IAAI,IAClB,OAAO,IAAIA,IAAI,EACf;AACA,MAAA,MAAMkB,QAAQ,GAAGlB,IAAI,CAACkB,QAA4C;AAClE,MAAA,IACEA,QAAQ,KAAK,SAAS,IACtB,OAAOlB,IAAI,CAACT,KAAK,KAAK,QAAQ,IAC9BS,IAAI,CAACT,KAAK,KAAK,IAAI,EACnB;QACA,MAAM4B,aAAa,GAAG,IAAI,CAACC,OAAO,CAACC,CAAC,CAClC,6DAA6D,EAC7D;AACEC,UAAAA,OAAO,EAAE;AACX,SACF,CAAC;AACD,QAAA,MAAMK,aAAa,GAAG,IAAI,CAACC,gBAAgB,CACzC5B,IAAI,CAACT,KAAK,CAACiC,KAAK,EAChBf,MAAM,CAACX,IACT,CAAC;AACD,QAAA,MAAM+B,WAAW,GAAG,IAAI,CAACD,gBAAgB,CACvC5B,IAAI,CAACT,KAAK,CAACkC,GAAG,EACdhB,MAAM,CAACX,IACT,CAAC;QACD,OAAO,CAAA,EAAGgC,mBAAmB,CAACZ,QAAQ,CAAC,CAAA,CAAA,EAAIS,aAAa,CAAA,CAAA,EAAIR,aAAa,CAAA,CAAA,EAAIU,WAAW,CAAA,CAAE;AAC5F,MAAA,CAAC,MAAM,IAAI7B,IAAI,CAACT,KAAK,KAAK,IAAI,IAAI,OAAOS,IAAI,CAACT,KAAK,KAAK,QAAQ,EAAE;AAChE,QAAA,MAAMwC,QAAQ,GAAG,IAAI,CAACH,gBAAgB,CACpC5B,IAAI,CAACT,KAAK,EACVkB,MAAM,CAACX,IACT,CAAC;AACD,QAAA,OAAO,GAAGgC,mBAAmB,CAACZ,QAAQ,CAAC,CAAA,CAAA,EAAIa,QAAQ,CAAA,CAAE;AACvD,MAAA;AACA,MAAA,OAAO,EAAE;AACX,IAAA,CAAC,MAAM;AACL,MAAA,OAAO,EAAE;AACX,IAAA;EACF,CAAC;AAEOH,EAAAA,gBAAgB,GAAGA,CACzBI,UAAkB,EAClBC,UAAkC,KACvB;AACX,IAAA,IAAIC,IAAI;IACR,IAAID,UAAU,KAAK,MAAM,EAAE;AACzBC,MAAAA,IAAI,GAAG,IAAIC,IAAI,CAAC,CAAA,WAAA,EAAcH,UAAU,EAAE,CAAC;AAC7C,IAAA,CAAC,MAAM;AACLE,MAAAA,IAAI,GAAG,IAAIC,IAAI,CAACH,UAAU,CAAC;AAC7B,IAAA;IAEA,IAAII,OAAO,GAAG,EAAE;IAChB,IAAIH,UAAU,KAAK,MAAM,EAAE;AACzBG,MAAAA,OAAO,GAAG;AAAEC,QAAAA,SAAS,EAAE;OAAS;AAClC,IAAA,CAAC,MAAM,IAAIJ,UAAU,KAAK,MAAM,EAAE;AAChCG,MAAAA,OAAO,GAAG;AAAEE,QAAAA,SAAS,EAAE;OAAS;AAClC,IAAA,CAAC,MAAM;AACLF,MAAAA,OAAO,GAAG;AAAEC,QAAAA,SAAS,EAAE,OAAO;AAAEC,QAAAA,SAAS,EAAE;OAAS;AACtD,IAAA;IAEA,MAAMC,OAAO,GAAG,IAAIC,IAAI,CAACC,cAAc,CAACC,SAAS,EAAEN,OAAO,CAAC;AAC3D,IAAA,OAAOG,OAAO,CAACI,MAAM,CAACT,IAAI,CAAC;EAC7B,CAAC;EAEOU,kBAAkB,GAAInC,MAA0B,IAAa;IACnE,IAAI,gBAAgB,IAAIA,MAAM,EAAE;AAC9B,MAAA,OAAOA,MAAM,CAACoC,cAAc,IAAI,EAAE;AACpC,IAAA,CAAC,MAAM;AACL,MAAA,OAAO,EAAE;AACX,IAAA;EACF,CAAC;AACH;AAACC,oBAAA,CAAAC,QAAA,EA5OoBhF,YAAY,CAAA;;;;"}