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

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

@@ -0,0 +1,164 @@
+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 { HdsFilterBarDateFilterSelectorValues } 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__date\">\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      {{on \"change\" this.onSelectorChange}}\n      class=\"hds-filter-bar__filter-group__field\"\n      as |F|\n    >\n      <F.Label>{{this.selectorLabelText}}</F.Label>\n      <F.Options>\n        <option value=\"\">{{hds-t\n            \"hds.components.filter-bar.date.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\" @direction={{if (eq @type \"datetime\") \"column\" \"row\"}}>\n        <Hds::Form::TextInput::Base\n          @id={{this._betweenValueStartInputId}}\n          @type={{this.inputType}}\n          @value={{this._betweenValueStart}}\n          placeholder={{hds-t \"hds.components.filter-bar.between-value-inputs.date.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={{this.inputType}}\n          @value={{this._betweenValueEnd}}\n          placeholder={{hds-t \"hds.components.filter-bar.between-value-inputs.date.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={{this.inputType}}\n        @value={{this._value}}\n        placeholder={{hds-t \"hds.components.filter-bar.date.value-input.placeholder\" default=\"Enter a value\"}}\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.date.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 DATE_SELECTORS = Object.values(HdsFilterBarDateFilterSelectorValues);
+const DATE_SELECTORS_TEXT = {
+  [HdsFilterBarDateFilterSelectorValues.before]: 'before',
+  [HdsFilterBarDateFilterSelectorValues.exactly]: 'exactly',
+  [HdsFilterBarDateFilterSelectorValues.after]: 'after',
+  [HdsFilterBarDateFilterSelectorValues.between]: 'between'
+};
+const DATE_SELECTORS_INPUT_TEXT = {
+  [HdsFilterBarDateFilterSelectorValues.before]: 'Before',
+  [HdsFilterBarDateFilterSelectorValues.exactly]: 'Exactly',
+  [HdsFilterBarDateFilterSelectorValues.after]: 'After',
+  [HdsFilterBarDateFilterSelectorValues.between]: 'Between'
+};
+class HdsFilterBarFilterGroupDate 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 = DATE_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 === 'date' || keyFilter.type === 'time' || keyFilter.type === 'datetime')) {
+      const data = keyFilter.data;
+      this._selector = data.selector;
+      if (data.selector === 'between') {
+        if (data.value && typeof data.value === 'object' && 'start' in data.value && 'end' in data.value) {
+          this._betweenValueStart = data.value.start;
+          this._betweenValueEnd = data.value.end;
+        }
+      } else {
+        this._value = data.value;
+      }
+    }
+  }
+  get type() {
+    return this.args.type || 'date';
+  }
+  get inputType() {
+    if (this.type === 'datetime') {
+      return 'datetime-local';
+    }
+    return this.type;
+  }
+  get selectorLabelText() {
+    return this.hdsIntl.t(`hds.components.filter-bar.date.${this.type}.label`, {
+      default: 'Date is'
+    });
+  }
+  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 = input.value;
+    this._onChange();
+  }
+  static {
+    n(this.prototype, "onValueChange", [action]);
+  }
+  onBetweenValueStartChange(event) {
+    const input = event.target;
+    this._betweenValueStart = input.value;
+    this._onChange();
+  }
+  static {
+    n(this.prototype, "onBetweenValueStartChange", [action]);
+  }
+  onBetweenValueEndChange(event) {
+    const input = event.target;
+    this._betweenValueEnd = 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.date.selector-input.${selector}`, {
+      default: DATE_SELECTORS_INPUT_TEXT[selector]
+    });
+  };
+  _resetInputValues = () => {
+    this._selector = undefined;
+    this._value = undefined;
+    this._betweenValueStart = undefined;
+    this._betweenValueEnd = undefined;
+  };
+}
+setComponentTemplate(TEMPLATE, HdsFilterBarFilterGroupDate);
+
+export { DATE_SELECTORS, DATE_SELECTORS_INPUT_TEXT, DATE_SELECTORS_TEXT, HdsFilterBarFilterGroupDate as default };
+//# sourceMappingURL=date.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date.js","sources":["../../../../../src/components/hds/filter-bar/filter-group/date.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 { HdsFormTextInputTypes } from '../../form/text-input/types.ts';\n\nimport type {\n  HdsFilterBarFilter,\n  HdsFilterBarDateFilterSelector,\n  HdsFilterBarDateFilterValue,\n} from '../types.ts';\nimport { HdsFilterBarDateFilterSelectorValues } from '../types.ts';\n\nexport const DATE_SELECTORS: HdsFilterBarDateFilterSelector[] = Object.values(\n  HdsFilterBarDateFilterSelectorValues\n);\n\nexport const DATE_SELECTORS_TEXT: Record<\n  HdsFilterBarDateFilterSelector,\n  string\n> = {\n  [HdsFilterBarDateFilterSelectorValues.before]: 'before',\n  [HdsFilterBarDateFilterSelectorValues.exactly]: 'exactly',\n  [HdsFilterBarDateFilterSelectorValues.after]: 'after',\n  [HdsFilterBarDateFilterSelectorValues.between]: 'between',\n};\n\nexport const DATE_SELECTORS_INPUT_TEXT: Record<\n  HdsFilterBarDateFilterSelector,\n  string\n> = {\n  [HdsFilterBarDateFilterSelectorValues.before]: 'Before',\n  [HdsFilterBarDateFilterSelectorValues.exactly]: 'Exactly',\n  [HdsFilterBarDateFilterSelectorValues.after]: 'After',\n  [HdsFilterBarDateFilterSelectorValues.between]: 'Between',\n};\n\nexport interface HdsFilterBarFilterGroupDateSignature {\n  Args: {\n    keyFilter: HdsFilterBarFilter | undefined;\n    type?: 'date' | 'time' | 'datetime';\n    onChange?: (\n      selector?: HdsFilterBarDateFilterSelector,\n      value?: HdsFilterBarDateFilterValue\n    ) => void;\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsFilterBarFilterGroupDate extends Component<HdsFilterBarFilterGroupDateSignature> {\n  @service hdsIntl!: HdsIntlService;\n\n  @tracked private _selector: HdsFilterBarDateFilterSelector | undefined;\n  @tracked private _value: string | undefined;\n  @tracked private _betweenValueStart: string | undefined;\n  @tracked private _betweenValueEnd: string | undefined;\n\n  private _selectorValues = DATE_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: HdsFilterBarFilterGroupDateSignature['Args']\n  ) {\n    super(owner, args);\n\n    const { keyFilter } = this.args;\n    if (\n      keyFilter &&\n      (keyFilter.type === 'date' ||\n        keyFilter.type === 'time' ||\n        keyFilter.type === 'datetime')\n    ) {\n      const data = keyFilter.data;\n      this._selector = data.selector;\n      if (data.selector === 'between') {\n        if (\n          data.value &&\n          typeof data.value === 'object' &&\n          'start' in data.value &&\n          'end' in data.value\n        ) {\n          this._betweenValueStart = data.value.start;\n          this._betweenValueEnd = data.value.end;\n        }\n      } else {\n        this._value = data.value as string;\n      }\n    }\n  }\n\n  get type(): 'date' | 'time' | 'datetime' {\n    return this.args.type || 'date';\n  }\n\n  get inputType(): HdsFormTextInputTypes {\n    if (this.type === 'datetime') {\n      return 'datetime-local';\n    }\n    return this.type;\n  }\n\n  get selectorLabelText(): string {\n    return this.hdsIntl.t(`hds.components.filter-bar.date.${this.type}.label`, {\n      default: 'Date is',\n    });\n  }\n\n  @action\n  onSelectorChange(event: Event): void {\n    const select = event.target as HTMLSelectElement;\n    this._selector = select.value as HdsFilterBarDateFilterSelector;\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 = input.value;\n    this._onChange();\n  }\n\n  @action\n  onBetweenValueStartChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this._betweenValueStart = input.value;\n    this._onChange();\n  }\n\n  @action\n  onBetweenValueEndChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this._betweenValueEnd = 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: HdsFilterBarDateFilterSelector\n  ): string => {\n    return this.hdsIntl.t(\n      `hds.components.filter-bar.date.selector-input.${selector}`,\n      {\n        default: DATE_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":["DATE_SELECTORS","Object","values","HdsFilterBarDateFilterSelectorValues","DATE_SELECTORS_TEXT","before","exactly","after","between","DATE_SELECTORS_INPUT_TEXT","HdsFilterBarFilterGroupDate","Component","g","prototype","service","i","void 0","tracked","_selectorValues","_selectorInputId","guidFor","_valueInputId","_betweenValueStartInputId","_betweenValueEndInputId","constructor","owner","args","keyFilter","type","data","_selector","selector","value","_betweenValueStart","start","_betweenValueEnd","end","_value","inputType","selectorLabelText","hdsIntl","t","default","onSelectorChange","event","select","target","undefined","_onChange","n","action","onValueChange","input","onBetweenValueStartChange","onBetweenValueEndChange","onClear","_resetInputValues","onChange","_selectorText","setComponentTemplate","TEMPLATE"],"mappings":"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"}

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

@@ -0,0 +1,43 @@
+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<div class=\"hds-filter-bar__filter-group__filter-generic\">\n  <Hds::Layout::Flex class=\"hds-filter-bar__filter-group__fields\" @direction=\"column\" @gap=\"16\">\n    {{yield (hash updateFilter=this.updateFilter)}}\n  </Hds::Layout::Flex>\n  <div class=\"hds-filter-bar__filter-group__clear\">\n    <Hds::Button\n      @text={{hds-t \"hds.components.filter-bar.date.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
+ */
+
+class HdsFilterBarFilterGroupGeneric extends Component {
+  updateFilter(filter) {
+    console.log('Update filter action triggered', filter);
+    const {
+      onChange
+    } = this.args;
+    if (onChange && typeof onChange === 'function') {
+      onChange(filter);
+    }
+  }
+  static {
+    n(this.prototype, "updateFilter", [action]);
+  }
+  onClear() {
+    console.log('Clear action triggered');
+    const {
+      onChange
+    } = this.args;
+    if (onChange && typeof onChange === 'function') {
+      onChange();
+    }
+  }
+  static {
+    n(this.prototype, "onClear", [action]);
+  }
+}
+setComponentTemplate(TEMPLATE, HdsFilterBarFilterGroupGeneric);
+
+export { HdsFilterBarFilterGroupGeneric as default };
+//# sourceMappingURL=generic.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"generic.js","sources":["../../../../../src/components/hds/filter-bar/filter-group/generic.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 {\n  HdsFilterBarFilter,\n  HdsFilterBarGenericFilter,\n} from '../types.ts';\n\nexport interface HdsFilterBarFilterGroupGenericSignature {\n  Args: {\n    keyFilter: HdsFilterBarFilter | undefined;\n    onChange?: (filter?: HdsFilterBarGenericFilter) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        updateFilter: (filter: HdsFilterBarGenericFilter) => void;\n      },\n    ];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsFilterBarFilterGroupGeneric extends Component<HdsFilterBarFilterGroupGenericSignature> {\n  @action\n  updateFilter(filter: HdsFilterBarGenericFilter): void {\n    console.log('Update filter action triggered', filter);\n    const { onChange } = this.args;\n    if (onChange && typeof onChange === 'function') {\n      onChange(filter);\n    }\n  }\n\n  @action\n  onClear(): void {\n    console.log('Clear action triggered');\n    const { onChange } = this.args;\n    if (onChange && typeof onChange === 'function') {\n      onChange();\n    }\n  }\n}\n"],"names":["HdsFilterBarFilterGroupGeneric","Component","updateFilter","filter","console","log","onChange","args","n","prototype","action","onClear","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;;AAyBe,MAAMA,8BAA8B,SAASC,SAAS,CAA0C;EAE7GC,YAAYA,CAACC,MAAiC,EAAQ;AACpDC,IAAAA,OAAO,CAACC,GAAG,CAAC,gCAAgC,EAAEF,MAAM,CAAC;IACrD,MAAM;AAAEG,MAAAA;KAAU,GAAG,IAAI,CAACC,IAAI;AAC9B,IAAA,IAAID,QAAQ,IAAI,OAAOA,QAAQ,KAAK,UAAU,EAAE;MAC9CA,QAAQ,CAACH,MAAM,CAAC;AAClB,IAAA;AACF,EAAA;AAAC,EAAA;IAAAK,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,cAAA,EAAA,CAPAC,MAAM,CAAA,CAAA;AAAA;AAUPC,EAAAA,OAAOA,GAAS;AACdP,IAAAA,OAAO,CAACC,GAAG,CAAC,wBAAwB,CAAC;IACrC,MAAM;AAAEC,MAAAA;KAAU,GAAG,IAAI,CAACC,IAAI;AAC9B,IAAA,IAAID,QAAQ,IAAI,OAAOA,QAAQ,KAAK,UAAU,EAAE;AAC9CA,MAAAA,QAAQ,EAAE;AACZ,IAAA;AACF,EAAA;AAAC,EAAA;IAAAE,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CAPAC,MAAM,CAAA,CAAA;AAAA;AAQT;AAACE,oBAAA,CAAAC,QAAA,EAlBoBb,8BAA8B,CAAA;;;;"}

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

@@ -0,0 +1,226 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { modifier } from 'ember-modifier';
+import '../tabs/tab.js';
+import '../tabs/panel.js';
+import './generic.js';
+import './checkbox.js';
+import './radio.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{{#let @tab as |Tab|}}\n  <Tab @numFilters={{this.numFilters}}>\n    {{@text}}\n  </Tab>\n{{/let}}\n{{#let @panel as |Panel|}}\n  <Panel {{this._setUpFilterPanel}}>\n    {{#if @searchEnabled}}\n      <div class=\"hds-filter-bar__filter-group__search\">\n        <Hds::Form::TextInput::Base\n          @type=\"search\"\n          placeholder={{hds-t \"components.filter-bar.filter-group.search-input-placeholder\" default=\"Search\"}}\n          {{on \"input\" this.onSearch}}\n        />\n      </div>\n    {{/if}}\n    {{#if (eq @type \"numerical\")}}\n      <Hds::FilterBar::FilterGroup::Numerical @keyFilter={{this.keyFilter}} @onChange={{this.onNumericalChange}} />\n    {{else if (eq @type \"date\")}}\n      <Hds::FilterBar::FilterGroup::Date @keyFilter={{this.keyFilter}} @onChange={{this.onDateChange}} @type=\"date\" />\n    {{else if (eq @type \"datetime\")}}\n      <Hds::FilterBar::FilterGroup::Date\n        @keyFilter={{this.keyFilter}}\n        @onChange={{this.onDateChange}}\n        @type=\"datetime\"\n      />\n    {{else if (eq @type \"time\")}}\n      <Hds::FilterBar::FilterGroup::Date @keyFilter={{this.keyFilter}} @onChange={{this.onDateChange}} @type=\"time\" />\n    {{else if (eq @type \"generic\")}}\n      {{yield\n        (hash\n          Generic=(component\n            \"hds/filter-bar/filter-group/generic\" keyFilter=this.keyFilter onChange=this.onGenericChange\n          )\n        )\n      }}\n    {{else}}\n      <div class=\"hds-filter-bar__filter-group__values-list\">\n        <div class=\"hds-filter-bar__filter-group__clear\">\n          <Hds::Button\n            @text={{hds-t \"hds.components.filter-bar.filter-group.clear\" default=\"Clear selection\"}}\n            @color=\"tertiary\"\n            @icon=\"rotate-ccw\"\n            {{on \"click\" this.onClear}}\n          />\n        </div>\n        <ul class=\"hds-filter-bar__filter-group__list\">\n          {{yield\n            (hash\n              Checkbox=(component\n                \"hds/filter-bar/filter-group/checkbox\" keyFilter=this.keyFilter onChange=this.onSelectionChange\n              )\n              Radio=(component\n                \"hds/filter-bar/filter-group/radio\" keyFilter=this.keyFilter onChange=this.onSelectionChange\n              )\n            )\n          }}\n        </ul>\n      </div>\n    {{/if}}\n  </Panel>\n{{/let}}");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+class HdsFilterBarFilterGroup extends Component {
+  static {
+    g(this.prototype, "internalFilters", [tracked], function () {
+      return [];
+    });
+  }
+  #internalFilters = (i(this, "internalFilters"), void 0);
+  _panelElement;
+  _setUpFilterPanel = modifier(element => {
+    this._panelElement = element;
+    if (this.keyFilter) {
+      this.internalFilters = JSON.parse(JSON.stringify(this.keyFilter.data));
+    }
+  });
+  get type() {
+    const {
+      type
+    } = this.args;
+    if (!type) {
+      return 'multi-select';
+    }
+    return type;
+  }
+  get keyFilter() {
+    const {
+      filters,
+      key
+    } = this.args;
+    if (!filters) {
+      return undefined;
+    }
+    return filters[key];
+  }
+  get numFilters() {
+    const {
+      filters,
+      key
+    } = this.args;
+    if (filters && key in filters) {
+      const keyFilters = filters[key]?.data;
+      if (Array.isArray(keyFilters)) {
+        return keyFilters.length;
+      } else if (keyFilters) {
+        return 1;
+      }
+    }
+    return 0;
+  }
+  onSelectionChange(event) {
+    const addFilter = value => {
+      const newFilter = {
+        value: value
+      };
+      if (this.type === 'single-select') {
+        this.internalFilters = newFilter;
+      } else {
+        if (Array.isArray(this.internalFilters)) {
+          this.internalFilters.push(newFilter);
+        } else {
+          this.internalFilters = [newFilter];
+        }
+      }
+    };
+    const removeFilter = value => {
+      if (this.type === 'single-select') {
+        this.internalFilters = undefined;
+      } else {
+        if (Array.isArray(this.internalFilters)) {
+          const newFilter = [];
+          this.internalFilters.forEach(filter => {
+            if (filter.value != value) {
+              newFilter.push(filter);
+            }
+          });
+          this.internalFilters = newFilter;
+        } else {
+          this.internalFilters = [];
+        }
+      }
+    };
+    const input = event.target;
+    if (input.checked) {
+      addFilter(input.value);
+    } else {
+      removeFilter(input.value);
+    }
+    const {
+      onChange
+    } = this.args;
+    if (onChange && typeof onChange === 'function') {
+      onChange(this.args.key, this.formattedFilters);
+    }
+  }
+  static {
+    n(this.prototype, "onSelectionChange", [action]);
+  }
+  onNumericalChange(selector, value) {
+    const addFilter = () => {
+      const newFilter = {
+        selector: selector,
+        value: value
+      };
+      return newFilter;
+    };
+    if (selector && value) {
+      this.internalFilters = addFilter();
+    } else {
+      this.internalFilters = undefined;
+    }
+    const {
+      onChange
+    } = this.args;
+    if (onChange && typeof onChange === 'function') {
+      onChange(this.args.key, this.formattedFilters);
+    }
+  }
+  static {
+    n(this.prototype, "onNumericalChange", [action]);
+  }
+  onDateChange(selector, value) {
+    const addFilter = () => {
+      const newFilter = {
+        selector: selector,
+        value: value
+      };
+      return newFilter;
+    };
+    if (selector && value) {
+      this.internalFilters = addFilter();
+    } else {
+      this.internalFilters = undefined;
+    }
+    const {
+      onChange
+    } = this.args;
+    if (onChange && typeof onChange === 'function') {
+      onChange(this.args.key, this.formattedFilters);
+    }
+  }
+  static {
+    n(this.prototype, "onDateChange", [action]);
+  }
+  onGenericChange(filter) {
+    if (filter) {
+      this.internalFilters = filter.data;
+      filter.text = this.args.text;
+    } else {
+      this.internalFilters = undefined;
+    }
+    const {
+      onChange
+    } = this.args;
+    if (onChange && typeof onChange === 'function') {
+      onChange(this.args.key, filter);
+    }
+  }
+  static {
+    n(this.prototype, "onGenericChange", [action]);
+  }
+  onClear() {
+    this.internalFilters = undefined;
+    const {
+      onChange
+    } = this.args;
+    if (onChange && typeof onChange === 'function') {
+      onChange(this.args.key, this.formattedFilters);
+    }
+  }
+  static {
+    n(this.prototype, "onClear", [action]);
+  }
+  get formattedFilters() {
+    if (this.internalFilters === undefined || Array.isArray(this.internalFilters) && this.internalFilters.length === 0) {
+      return undefined;
+    }
+    return {
+      type: this.type,
+      text: this.args.text,
+      data: this.internalFilters
+    };
+  }
+  get classNames() {
+    const classes = ['hds-filter-bar__filter-group'];
+    classes.push(`hds-filter-bar__dropdown--type-${this.type}`);
+    return classes.join(' ');
+  }
+  onSearch = event => {
+    const listItems = this._panelElement.querySelectorAll('.hds-filter-bar__filter-group__selection-option');
+    const input = event.target;
+    listItems.forEach(item => {
+      if (item.textContent) {
+        const text = item.textContent.toLowerCase();
+        const searchText = input.value.toLowerCase();
+        if (text.includes(searchText)) {
+          item.classList.remove('hds-filter-bar__filter-group__selection-option--hidden');
+        } else {
+          item.classList.add('hds-filter-bar__filter-group__selection-option--hidden');
+        }
+      }
+    });
+  };
+}
+setComponentTemplate(TEMPLATE, HdsFilterBarFilterGroup);
+
+export { HdsFilterBarFilterGroup as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/hds/filter-bar/filter-group/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 { modifier } from 'ember-modifier';\nimport type { WithBoundArgs } from '@glint/template';\n\nimport HdsFilterBarTabsTab from '../tabs/tab.ts';\nimport HdsFilterBarTabsPanel from '../tabs/panel.ts';\nimport type { HdsTabsPanelSignature } from '../../tabs/panel.ts';\n\nimport HdsFilterBarFilterGroupGeneric from './generic.ts';\nimport HdsFilterBarFilterGroupCheckbox from './checkbox.ts';\nimport HdsFilterBarFilterGroupRadio from './radio.ts';\n\nimport type {\n  HdsFilterBarFilter,\n  HdsFilterBarFilters,\n  HdsFilterBarFilterType,\n  HdsFilterBarData,\n  HdsFilterBarGenericFilter,\n  HdsFilterBarGenericFilterData,\n  HdsFilterBarNumericalFilterData,\n  HdsFilterBarNumericalFilterSelector,\n  HdsFilterBarNumericalFilterValue,\n  HdsFilterBarDateFilterData,\n  HdsFilterBarDateFilterSelector,\n  HdsFilterBarDateFilterValue,\n} from '../types.ts';\n\nexport interface HdsFilterBarFilterGroupSignature {\n  Args: {\n    tab?: WithBoundArgs<typeof HdsFilterBarTabsTab, never>;\n    panel?: WithBoundArgs<typeof HdsFilterBarTabsPanel, never>;\n    key: string;\n    text: string;\n    type?: HdsFilterBarFilterType;\n    filters: HdsFilterBarFilters;\n    searchEnabled?: boolean;\n    onChange: (key: string, keyFilter?: HdsFilterBarFilter) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        Generic?: WithBoundArgs<\n          typeof HdsFilterBarFilterGroupGeneric,\n          'keyFilter'\n        >;\n        Checkbox?: WithBoundArgs<\n          typeof HdsFilterBarFilterGroupCheckbox,\n          'keyFilter' | 'onChange'\n        >;\n        Radio?: WithBoundArgs<\n          typeof HdsFilterBarFilterGroupRadio,\n          'keyFilter' | 'onChange'\n        >;\n      },\n    ];\n  };\n  Element: HdsTabsPanelSignature['Element'];\n}\n\nexport default class HdsFilterBarFilterGroup extends Component<HdsFilterBarFilterGroupSignature> {\n  @tracked internalFilters: HdsFilterBarData | undefined = [];\n\n  private _panelElement!: HdsTabsPanelSignature['Element'];\n\n  private _setUpFilterPanel = modifier(\n    (element: HdsTabsPanelSignature['Element']) => {\n      this._panelElement = element;\n\n      if (this.keyFilter) {\n        this.internalFilters = JSON.parse(\n          JSON.stringify(this.keyFilter.data)\n        ) as HdsFilterBarData;\n      }\n    }\n  );\n\n  get type(): HdsFilterBarFilterType {\n    const { type } = this.args;\n\n    if (!type) {\n      return 'multi-select';\n    }\n    return type;\n  }\n\n  get keyFilter(): HdsFilterBarFilter | undefined {\n    const { filters, key } = this.args;\n\n    if (!filters) {\n      return undefined;\n    }\n    return filters[key];\n  }\n\n  get numFilters(): number {\n    const { filters, key } = this.args;\n    if (filters && key in filters) {\n      const keyFilters = filters[key]?.data;\n      if (Array.isArray(keyFilters)) {\n        return keyFilters.length;\n      } else if (keyFilters) {\n        return 1;\n      }\n    }\n    return 0;\n  }\n\n  @action\n  onSelectionChange(event: Event): void {\n    const addFilter = (value: unknown): void => {\n      const newFilter = {\n        value: value,\n      } as HdsFilterBarGenericFilterData;\n      if (this.type === 'single-select') {\n        this.internalFilters = newFilter;\n      } else {\n        if (Array.isArray(this.internalFilters)) {\n          this.internalFilters.push(newFilter);\n        } else {\n          this.internalFilters = [newFilter];\n        }\n      }\n    };\n\n    const removeFilter = (value: string): void => {\n      if (this.type === 'single-select') {\n        this.internalFilters = undefined;\n      } else {\n        if (Array.isArray(this.internalFilters)) {\n          const newFilter = [] as HdsFilterBarGenericFilterData[];\n          this.internalFilters.forEach((filter) => {\n            if (filter.value != value) {\n              newFilter.push(filter);\n            }\n          });\n          this.internalFilters = newFilter;\n        } else {\n          this.internalFilters = [];\n        }\n      }\n    };\n\n    const input = event.target as HTMLInputElement;\n\n    if (input.checked) {\n      addFilter(input.value);\n    } else {\n      removeFilter(input.value);\n    }\n\n    const { onChange } = this.args;\n    if (onChange && typeof onChange === 'function') {\n      onChange(this.args.key, this.formattedFilters);\n    }\n  }\n\n  @action\n  onNumericalChange(\n    selector?: HdsFilterBarNumericalFilterSelector,\n    value?: HdsFilterBarNumericalFilterValue\n  ): void {\n    const addFilter = (): HdsFilterBarData => {\n      const newFilter = {\n        selector: selector,\n        value: value,\n      } as HdsFilterBarNumericalFilterData;\n      return newFilter;\n    };\n\n    if (selector && value) {\n      this.internalFilters = addFilter();\n    } else {\n      this.internalFilters = undefined;\n    }\n\n    const { onChange } = this.args;\n    if (onChange && typeof onChange === 'function') {\n      onChange(this.args.key, this.formattedFilters);\n    }\n  }\n\n  @action\n  onDateChange(\n    selector?: HdsFilterBarDateFilterSelector,\n    value?: HdsFilterBarDateFilterValue\n  ): void {\n    const addFilter = (): HdsFilterBarData => {\n      const newFilter = {\n        selector: selector,\n        value: value,\n      } as HdsFilterBarDateFilterData;\n      return newFilter;\n    };\n\n    if (selector && value) {\n      this.internalFilters = addFilter();\n    } else {\n      this.internalFilters = undefined;\n    }\n\n    const { onChange } = this.args;\n    if (onChange && typeof onChange === 'function') {\n      onChange(this.args.key, this.formattedFilters);\n    }\n  }\n\n  @action\n  onGenericChange(filter?: HdsFilterBarGenericFilter): void {\n    if (filter) {\n      this.internalFilters = filter.data;\n      filter.text = this.args.text;\n    } else {\n      this.internalFilters = undefined;\n    }\n\n    const { onChange } = this.args;\n    if (onChange && typeof onChange === 'function') {\n      onChange(this.args.key, filter);\n    }\n  }\n\n  @action\n  onClear(): void {\n    this.internalFilters = undefined;\n\n    const { onChange } = this.args;\n    if (onChange && typeof onChange === 'function') {\n      onChange(this.args.key, this.formattedFilters);\n    }\n  }\n\n  get formattedFilters(): HdsFilterBarFilter | undefined {\n    if (\n      this.internalFilters === undefined ||\n      (Array.isArray(this.internalFilters) && this.internalFilters.length === 0)\n    ) {\n      return undefined;\n    }\n    return {\n      type: this.type,\n      text: this.args.text,\n      data: this.internalFilters,\n    } as HdsFilterBarFilter;\n  }\n\n  get classNames(): string {\n    const classes = ['hds-filter-bar__filter-group'];\n\n    classes.push(`hds-filter-bar__dropdown--type-${this.type}`);\n\n    return classes.join(' ');\n  }\n\n  private onSearch = (event: Event) => {\n    const listItems = this._panelElement.querySelectorAll(\n      '.hds-filter-bar__filter-group__selection-option'\n    );\n    const input = event.target as HTMLInputElement;\n    listItems.forEach((item) => {\n      if (item.textContent) {\n        const text = item.textContent.toLowerCase();\n        const searchText = input.value.toLowerCase();\n        if (text.includes(searchText)) {\n          item.classList.remove(\n            'hds-filter-bar__filter-group__selection-option--hidden'\n          );\n        } else {\n          item.classList.add(\n            'hds-filter-bar__filter-group__selection-option--hidden'\n          );\n        }\n      }\n    });\n  };\n}\n"],"names":["HdsFilterBarFilterGroup","Component","g","prototype","tracked","i","void 0","_panelElement","_setUpFilterPanel","modifier","element","keyFilter","internalFilters","JSON","parse","stringify","data","type","args","filters","key","undefined","numFilters","keyFilters","Array","isArray","length","onSelectionChange","event","addFilter","value","newFilter","push","removeFilter","forEach","filter","input","target","checked","onChange","formattedFilters","n","action","onNumericalChange","selector","onDateChange","onGenericChange","text","onClear","classNames","classes","join","onSearch","listItems","querySelectorAll","item","textContent","toLowerCase","searchText","includes","classList","remove","add","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;;AA+De,MAAMA,uBAAuB,SAASC,SAAS,CAAmC;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,iBAAA,EAAA,CAC9FC,OAAO,CAAA,EAAA,YAAA;AAAA,MAAA,OAAiD,EAAE;AAAA,IAAA,CAAA,CAAA;AAAA;AAAA,EAAA,gBAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,iBAAA,CAAA,EAAAC,MAAA;EAEnDC,aAAa;AAEbC,EAAAA,iBAAiB,GAAGC,QAAQ,CACjCC,OAAyC,IAAK;IAC7C,IAAI,CAACH,aAAa,GAAGG,OAAO;IAE5B,IAAI,IAAI,CAACC,SAAS,EAAE;AAClB,MAAA,IAAI,CAACC,eAAe,GAAGC,IAAI,CAACC,KAAK,CAC/BD,IAAI,CAACE,SAAS,CAAC,IAAI,CAACJ,SAAS,CAACK,IAAI,CACpC,CAAqB;AACvB,IAAA;AACF,EAAA,CACF,CAAC;EAED,IAAIC,IAAIA,GAA2B;IACjC,MAAM;AAAEA,MAAAA;KAAM,GAAG,IAAI,CAACC,IAAI;IAE1B,IAAI,CAACD,IAAI,EAAE;AACT,MAAA,OAAO,cAAc;AACvB,IAAA;AACA,IAAA,OAAOA,IAAI;AACb,EAAA;EAEA,IAAIN,SAASA,GAAmC;IAC9C,MAAM;MAAEQ,OAAO;AAAEC,MAAAA;KAAK,GAAG,IAAI,CAACF,IAAI;IAElC,IAAI,CAACC,OAAO,EAAE;AACZ,MAAA,OAAOE,SAAS;AAClB,IAAA;IACA,OAAOF,OAAO,CAACC,GAAG,CAAC;AACrB,EAAA;EAEA,IAAIE,UAAUA,GAAW;IACvB,MAAM;MAAEH,OAAO;AAAEC,MAAAA;KAAK,GAAG,IAAI,CAACF,IAAI;AAClC,IAAA,IAAIC,OAAO,IAAIC,GAAG,IAAID,OAAO,EAAE;AAC7B,MAAA,MAAMI,UAAU,GAAGJ,OAAO,CAACC,GAAG,CAAC,EAAEJ,IAAI;AACrC,MAAA,IAAIQ,KAAK,CAACC,OAAO,CAACF,UAAU,CAAC,EAAE;QAC7B,OAAOA,UAAU,CAACG,MAAM;MAC1B,CAAC,MAAM,IAAIH,UAAU,EAAE;AACrB,QAAA,OAAO,CAAC;AACV,MAAA;AACF,IAAA;AACA,IAAA,OAAO,CAAC;AACV,EAAA;EAGAI,iBAAiBA,CAACC,KAAY,EAAQ;IACpC,MAAMC,SAAS,GAAIC,KAAc,IAAW;AAC1C,MAAA,MAAMC,SAAS,GAAG;AAChBD,QAAAA,KAAK,EAAEA;OACyB;AAClC,MAAA,IAAI,IAAI,CAACb,IAAI,KAAK,eAAe,EAAE;QACjC,IAAI,CAACL,eAAe,GAAGmB,SAAS;AAClC,MAAA,CAAC,MAAM;QACL,IAAIP,KAAK,CAACC,OAAO,CAAC,IAAI,CAACb,eAAe,CAAC,EAAE;AACvC,UAAA,IAAI,CAACA,eAAe,CAACoB,IAAI,CAACD,SAAS,CAAC;AACtC,QAAA,CAAC,MAAM;AACL,UAAA,IAAI,CAACnB,eAAe,GAAG,CAACmB,SAAS,CAAC;AACpC,QAAA;AACF,MAAA;IACF,CAAC;IAED,MAAME,YAAY,GAAIH,KAAa,IAAW;AAC5C,MAAA,IAAI,IAAI,CAACb,IAAI,KAAK,eAAe,EAAE;QACjC,IAAI,CAACL,eAAe,GAAGS,SAAS;AAClC,MAAA,CAAC,MAAM;QACL,IAAIG,KAAK,CAACC,OAAO,CAAC,IAAI,CAACb,eAAe,CAAC,EAAE;UACvC,MAAMmB,SAAS,GAAG,EAAqC;AACvD,UAAA,IAAI,CAACnB,eAAe,CAACsB,OAAO,CAAEC,MAAM,IAAK;AACvC,YAAA,IAAIA,MAAM,CAACL,KAAK,IAAIA,KAAK,EAAE;AACzBC,cAAAA,SAAS,CAACC,IAAI,CAACG,MAAM,CAAC;AACxB,YAAA;AACF,UAAA,CAAC,CAAC;UACF,IAAI,CAACvB,eAAe,GAAGmB,SAAS;AAClC,QAAA,CAAC,MAAM;UACL,IAAI,CAACnB,eAAe,GAAG,EAAE;AAC3B,QAAA;AACF,MAAA;IACF,CAAC;AAED,IAAA,MAAMwB,KAAK,GAAGR,KAAK,CAACS,MAA0B;IAE9C,IAAID,KAAK,CAACE,OAAO,EAAE;AACjBT,MAAAA,SAAS,CAACO,KAAK,CAACN,KAAK,CAAC;AACxB,IAAA,CAAC,MAAM;AACLG,MAAAA,YAAY,CAACG,KAAK,CAACN,KAAK,CAAC;AAC3B,IAAA;IAEA,MAAM;AAAES,MAAAA;KAAU,GAAG,IAAI,CAACrB,IAAI;AAC9B,IAAA,IAAIqB,QAAQ,IAAI,OAAOA,QAAQ,KAAK,UAAU,EAAE;MAC9CA,QAAQ,CAAC,IAAI,CAACrB,IAAI,CAACE,GAAG,EAAE,IAAI,CAACoB,gBAAgB,CAAC;AAChD,IAAA;AACF,EAAA;AAAC,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAtC,SAAA,EAAA,mBAAA,EAAA,CA/CAuC,MAAM,CAAA,CAAA;AAAA;AAkDPC,EAAAA,iBAAiBA,CACfC,QAA8C,EAC9Cd,KAAwC,EAClC;IACN,MAAMD,SAAS,GAAGA,MAAwB;AACxC,MAAA,MAAME,SAAS,GAAG;AAChBa,QAAAA,QAAQ,EAAEA,QAAQ;AAClBd,QAAAA,KAAK,EAAEA;OAC2B;AACpC,MAAA,OAAOC,SAAS;IAClB,CAAC;IAED,IAAIa,QAAQ,IAAId,KAAK,EAAE;AACrB,MAAA,IAAI,CAAClB,eAAe,GAAGiB,SAAS,EAAE;AACpC,IAAA,CAAC,MAAM;MACL,IAAI,CAACjB,eAAe,GAAGS,SAAS;AAClC,IAAA;IAEA,MAAM;AAAEkB,MAAAA;KAAU,GAAG,IAAI,CAACrB,IAAI;AAC9B,IAAA,IAAIqB,QAAQ,IAAI,OAAOA,QAAQ,KAAK,UAAU,EAAE;MAC9CA,QAAQ,CAAC,IAAI,CAACrB,IAAI,CAACE,GAAG,EAAE,IAAI,CAACoB,gBAAgB,CAAC;AAChD,IAAA;AACF,EAAA;AAAC,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAtC,SAAA,EAAA,mBAAA,EAAA,CAvBAuC,MAAM,CAAA,CAAA;AAAA;AA0BPG,EAAAA,YAAYA,CACVD,QAAyC,EACzCd,KAAmC,EAC7B;IACN,MAAMD,SAAS,GAAGA,MAAwB;AACxC,MAAA,MAAME,SAAS,GAAG;AAChBa,QAAAA,QAAQ,EAAEA,QAAQ;AAClBd,QAAAA,KAAK,EAAEA;OACsB;AAC/B,MAAA,OAAOC,SAAS;IAClB,CAAC;IAED,IAAIa,QAAQ,IAAId,KAAK,EAAE;AACrB,MAAA,IAAI,CAAClB,eAAe,GAAGiB,SAAS,EAAE;AACpC,IAAA,CAAC,MAAM;MACL,IAAI,CAACjB,eAAe,GAAGS,SAAS;AAClC,IAAA;IAEA,MAAM;AAAEkB,MAAAA;KAAU,GAAG,IAAI,CAACrB,IAAI;AAC9B,IAAA,IAAIqB,QAAQ,IAAI,OAAOA,QAAQ,KAAK,UAAU,EAAE;MAC9CA,QAAQ,CAAC,IAAI,CAACrB,IAAI,CAACE,GAAG,EAAE,IAAI,CAACoB,gBAAgB,CAAC;AAChD,IAAA;AACF,EAAA;AAAC,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAtC,SAAA,EAAA,cAAA,EAAA,CAvBAuC,MAAM,CAAA,CAAA;AAAA;EA0BPI,eAAeA,CAACX,MAAkC,EAAQ;AACxD,IAAA,IAAIA,MAAM,EAAE;AACV,MAAA,IAAI,CAACvB,eAAe,GAAGuB,MAAM,CAACnB,IAAI;AAClCmB,MAAAA,MAAM,CAACY,IAAI,GAAG,IAAI,CAAC7B,IAAI,CAAC6B,IAAI;AAC9B,IAAA,CAAC,MAAM;MACL,IAAI,CAACnC,eAAe,GAAGS,SAAS;AAClC,IAAA;IAEA,MAAM;AAAEkB,MAAAA;KAAU,GAAG,IAAI,CAACrB,IAAI;AAC9B,IAAA,IAAIqB,QAAQ,IAAI,OAAOA,QAAQ,KAAK,UAAU,EAAE;MAC9CA,QAAQ,CAAC,IAAI,CAACrB,IAAI,CAACE,GAAG,EAAEe,MAAM,CAAC;AACjC,IAAA;AACF,EAAA;AAAC,EAAA;IAAAM,CAAA,CAAA,IAAA,CAAAtC,SAAA,EAAA,iBAAA,EAAA,CAbAuC,MAAM,CAAA,CAAA;AAAA;AAgBPM,EAAAA,OAAOA,GAAS;IACd,IAAI,CAACpC,eAAe,GAAGS,SAAS;IAEhC,MAAM;AAAEkB,MAAAA;KAAU,GAAG,IAAI,CAACrB,IAAI;AAC9B,IAAA,IAAIqB,QAAQ,IAAI,OAAOA,QAAQ,KAAK,UAAU,EAAE;MAC9CA,QAAQ,CAAC,IAAI,CAACrB,IAAI,CAACE,GAAG,EAAE,IAAI,CAACoB,gBAAgB,CAAC;AAChD,IAAA;AACF,EAAA;AAAC,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAtC,SAAA,EAAA,SAAA,EAAA,CARAuC,MAAM,CAAA,CAAA;AAAA;EAUP,IAAIF,gBAAgBA,GAAmC;IACrD,IACE,IAAI,CAAC5B,eAAe,KAAKS,SAAS,IACjCG,KAAK,CAACC,OAAO,CAAC,IAAI,CAACb,eAAe,CAAC,IAAI,IAAI,CAACA,eAAe,CAACc,MAAM,KAAK,CAAE,EAC1E;AACA,MAAA,OAAOL,SAAS;AAClB,IAAA;IACA,OAAO;MACLJ,IAAI,EAAE,IAAI,CAACA,IAAI;AACf8B,MAAAA,IAAI,EAAE,IAAI,CAAC7B,IAAI,CAAC6B,IAAI;MACpB/B,IAAI,EAAE,IAAI,CAACJ;KACZ;AACH,EAAA;EAEA,IAAIqC,UAAUA,GAAW;AACvB,IAAA,MAAMC,OAAO,GAAG,CAAC,8BAA8B,CAAC;IAEhDA,OAAO,CAAClB,IAAI,CAAC,CAAA,+BAAA,EAAkC,IAAI,CAACf,IAAI,EAAE,CAAC;AAE3D,IAAA,OAAOiC,OAAO,CAACC,IAAI,CAAC,GAAG,CAAC;AAC1B,EAAA;EAEQC,QAAQ,GAAIxB,KAAY,IAAK;IACnC,MAAMyB,SAAS,GAAG,IAAI,CAAC9C,aAAa,CAAC+C,gBAAgB,CACnD,iDACF,CAAC;AACD,IAAA,MAAMlB,KAAK,GAAGR,KAAK,CAACS,MAA0B;AAC9CgB,IAAAA,SAAS,CAACnB,OAAO,CAAEqB,IAAI,IAAK;MAC1B,IAAIA,IAAI,CAACC,WAAW,EAAE;QACpB,MAAMT,IAAI,GAAGQ,IAAI,CAACC,WAAW,CAACC,WAAW,EAAE;QAC3C,MAAMC,UAAU,GAAGtB,KAAK,CAACN,KAAK,CAAC2B,WAAW,EAAE;AAC5C,QAAA,IAAIV,IAAI,CAACY,QAAQ,CAACD,UAAU,CAAC,EAAE;AAC7BH,UAAAA,IAAI,CAACK,SAAS,CAACC,MAAM,CACnB,wDACF,CAAC;AACH,QAAA,CAAC,MAAM;AACLN,UAAAA,IAAI,CAACK,SAAS,CAACE,GAAG,CAChB,wDACF,CAAC;AACH,QAAA;AACF,MAAA;AACF,IAAA,CAAC,CAAC;EACJ,CAAC;AACH;AAACC,oBAAA,CAAAC,QAAA,EAvNoBhE,uBAAuB,CAAA;;;;"}