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

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

@@ -0,0 +1,162 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import '../dropdown/index.js';
+import './filters-dropdown.js';
+import { isArray } from '@ember/array';
+import { SELECTORS_DISPLAY_SYMBOL } from './range.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  <div class=\"hds-filter-bar__actions\">\n    {{yield\n      (hash FiltersDropdown=(component \"hds/filter-bar/filters-dropdown\" onFilter=this.onFilter filters=@filters))\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    <div class=\"hds-filter-bar__actions__right\">\n      {{yield (hash ActionsDropdown=(component \"hds/dropdown\"))}}\n      {{#if this.hasActiveFilters}}\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      {{/if}}\n    </div>\n  </div>\n  {{#if (and this.hasActiveFilters this._isExpanded)}}\n    <div class=\"hds-filter-bar__filters\">\n      {{#each-in @filters as |key filter|}}\n        {{#if filter.data}}\n          {{#if (and (eq filter.type \"single-select\"))}}\n            <Hds::Tag\n              @text=\"{{this._filterKeyText key filter}}: {{this._filterText filter.data}}\"\n              @onDismiss={{fn this.onFilterDismiss key}}\n            />\n          {{else if (eq filter.type \"range\")}}\n            <Hds::Tag\n              @text=\"{{this._filterKeyText key filter}} {{this._rangeFilterText filter.data}}\"\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.data}}\"\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    </div>\n  {{/if}}\n</div>");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+class HdsFilterBar extends Component {
+  static {
+    g(this.prototype, "_isExpanded", [tracked], function () {
+      return true;
+    });
+  }
+  #_isExpanded = (i(this, "_isExpanded"), void 0);
+  get searchValue() {
+    const {
+      filters
+    } = this.args;
+    if (filters['search']) {
+      return this._filterText(filters['search'].data);
+    }
+    return '';
+  }
+  onFilter(filters) {
+    const {
+      onFilter
+    } = this.args;
+    if (onFilter && typeof onFilter === 'function') {
+      onFilter(filters);
+    }
+  }
+  static {
+    n(this.prototype, "onFilter", [action]);
+  }
+  clearFilters() {
+    const {
+      onFilter
+    } = this.args;
+    if (onFilter && typeof onFilter === 'function') {
+      onFilter({});
+    }
+  }
+  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 = data => {
+    const result = this._filterData(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;
+    }
+  };
+  _rangeFilterText = data => {
+    if ('selector' in data && 'value' in data) {
+      return `${SELECTORS_DISPLAY_SYMBOL[data.selector]} ${data.value}`;
+    } 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';\n\nimport type { WithBoundArgs } from '@glint/template';\n\nimport type {\n  HdsFilterBarFilters,\n  HdsFilterBarFilter,\n  HdsFilterBarData,\n  HdsFilterBarGenericFilterData,\n} from './types.ts';\nimport HdsDropdown from '../dropdown/index.ts';\nimport HdsFilterBarFiltersDropdown from './filters-dropdown.ts';\nimport { isArray } from '@ember/array';\n\nimport { SELECTORS_DISPLAY_SYMBOL } from './range.ts';\n\nexport interface HdsFilterBarSignature {\n  Args: {\n    filters: HdsFilterBarFilters;\n    hasSearch?: boolean;\n    onFilter?: (filters: HdsFilterBarFilters) => void;\n  };\n  Blocks: {\n    default?: [\n      {\n        ActionsDropdown?: WithBoundArgs<typeof HdsDropdown, never>;\n        FiltersDropdown?: WithBoundArgs<\n          typeof HdsFilterBarFiltersDropdown,\n          'filters' | 'onFilter'\n        >;\n      },\n    ];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsFilterBar extends Component<HdsFilterBarSignature> {\n  @tracked _isExpanded: boolean = true;\n\n  get searchValue(): string {\n    const { filters } = this.args;\n    if (filters['search']) {\n      return this._filterText(filters['search'].data);\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  }\n\n  @action\n  clearFilters(): void {\n    const { onFilter } = this.args;\n    if (onFilter && typeof onFilter === 'function') {\n      onFilter({});\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 = (data: HdsFilterBarData): string => {\n    const result = this._filterData(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 _rangeFilterText = (data: HdsFilterBarData): string => {\n    if ('selector' in data && 'value' in data) {\n      return `${SELECTORS_DISPLAY_SYMBOL[data.selector]} ${data.value}`;\n    } else {\n      return '';\n    }\n  };\n}\n"],"names":["HdsFilterBar","Component","g","prototype","tracked","i","void 0","searchValue","filters","args","_filterText","data","onFilter","n","action","clearFilters","onSearch","event","input","target","value","newFilters","Object","keys","forEach","k","JSON","parse","stringify","length","type","text","toggleExpand","_isExpanded","hasActiveFilters","onFilterDismiss","key","filterValue","keyFilter","isArray","newKeyfilter","filter","item","_filterData","result","resultText","_filterArrayData","map","_filterKeyText","_rangeFilterText","SELECTORS_DISPLAY_SYMBOL","selector","setComponentTemplate","TEMPLATE"],"mappings":"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"}

package/dist/components/hds/filter-bar/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__filters-dropdown__filter-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 HdsFilterBarRadio 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 && value && 'value' in keyFilter) {
+      return keyFilter.value === value;
+    }
+    return false;
+  }
+}
+setComponentTemplate(TEMPLATE, HdsFilterBarRadio);
+
+export { HdsFilterBarRadio as default };
+//# sourceMappingURL=radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sources":["../../../../src/components/hds/filter-bar/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 { HdsFilterBarData } from './types.ts';\n\nexport interface HdsFilterBarRadioSignature {\n  Args: {\n    value?: string;\n    keyFilter: HdsFilterBarData | undefined;\n    onChange?: (event: Event) => void;\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsFilterBarRadio extends Component<HdsFilterBarRadioSignature> {\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 (keyFilter && value && 'value' in keyFilter) {\n      return keyFilter.value === value;\n    }\n    return false;\n  }\n}\n"],"names":["HdsFilterBarRadio","Component","onChange","event","args","n","prototype","action","isChecked","keyFilter","value","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;;AAmBe,MAAMA,iBAAiB,SAASC,SAAS,CAA6B;EAEnFC,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,IAAIK,SAAS,IAAIC,KAAK,IAAI,OAAO,IAAID,SAAS,EAAE;AAC9C,MAAA,OAAOA,SAAS,CAACC,KAAK,KAAKA,KAAK;AAClC,IAAA;AACA,IAAA,OAAO,KAAK;AACd,EAAA;AACF;AAACC,oBAAA,CAAAC,QAAA,EAhBoBZ,iBAAiB,CAAA;;;;"}

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

@@ -0,0 +1,88 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { guidFor } from '@ember/object/internals';
+import { HdsFilterBarRangeFilterSelectorValues } 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__filters-dropdown__filter-range\">\n  <Hds::Form::Label>\n    {{hds-t \"hds.components.filter-bar.range.label\" default=\"Number is\"}}\n  </Hds::Form::Label>\n  <Hds::Layout::Flex @direction=\"column\" @gap=\"16\">\n    <Hds::Form::Select::Base @id={{this._selectorInputId}} {{on \"change\" this.onSelectorChange}} as |F|>\n      <F.Options>\n        <option value=\"\">{{hds-t\n            \"hds.components.filter-bar.range.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::Base>\n    <Hds::Form::TextInput::Base\n      @id={{this._valueInputId}}\n      @type=\"text\"\n      @value={{this.stringValue}}\n      placeholder=\"Enter a number\"\n      {{on \"change\" this.onValueChange}}\n    />\n  </Hds::Layout::Flex>\n</div>");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+const SELECTORS = Object.values(HdsFilterBarRangeFilterSelectorValues);
+const SELECTORS_DISPLAY_TEXT = {
+  [HdsFilterBarRangeFilterSelectorValues.lessThan]: 'Less than',
+  [HdsFilterBarRangeFilterSelectorValues.lessThanOrEqualTo]: 'Less than or equal to',
+  [HdsFilterBarRangeFilterSelectorValues.equalTo]: 'Equal to',
+  [HdsFilterBarRangeFilterSelectorValues.greaterThanOrEqualTo]: 'Greater than or equal to',
+  [HdsFilterBarRangeFilterSelectorValues.greaterThan]: 'Greater than'
+};
+const SELECTORS_DISPLAY_SYMBOL = {
+  [HdsFilterBarRangeFilterSelectorValues.lessThan]: '<',
+  [HdsFilterBarRangeFilterSelectorValues.lessThanOrEqualTo]: '<=',
+  [HdsFilterBarRangeFilterSelectorValues.equalTo]: '=',
+  [HdsFilterBarRangeFilterSelectorValues.greaterThanOrEqualTo]: '>=',
+  [HdsFilterBarRangeFilterSelectorValues.greaterThan]: '>'
+};
+class HdsFilterBarRange extends Component {
+  static {
+    g(this.prototype, "_selector", [tracked]);
+  }
+  #_selector = (i(this, "_selector"), void 0);
+  static {
+    g(this.prototype, "_value", [tracked]);
+  }
+  #_value = (i(this, "_value"), void 0);
+  _selectorValues = SELECTORS;
+  _selectorInputId = 'selector-input-' + guidFor(this);
+  _valueInputId = 'value-input-' + guidFor(this);
+  constructor(owner, args) {
+    super(owner, args);
+    const {
+      keyFilter
+    } = this.args;
+    if (keyFilter && 'selector' in keyFilter) {
+      this._selector = keyFilter.selector;
+      this._value = keyFilter.value;
+    }
+  }
+  get stringValue() {
+    return this._value !== undefined ? this._value.toString() : undefined;
+  }
+  selectorText(selector) {
+    return SELECTORS_DISPLAY_TEXT[selector];
+  }
+  onSelectorChange(event) {
+    const select = event.target;
+    this._selector = select.value;
+    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]);
+  }
+  _onChange() {
+    const {
+      onChange
+    } = this.args;
+    if (onChange && typeof onChange === 'function') {
+      onChange(this._selector, this._value);
+    }
+  }
+}
+setComponentTemplate(TEMPLATE, HdsFilterBarRange);
+
+export { SELECTORS, SELECTORS_DISPLAY_SYMBOL, SELECTORS_DISPLAY_TEXT, HdsFilterBarRange as default };
+//# sourceMappingURL=range.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"range.js","sources":["../../../../src/components/hds/filter-bar/range.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';\n\nimport type {\n  HdsFilterBarData,\n  HdsFilterBarRangeFilterSelector,\n} from './types.ts';\nimport { HdsFilterBarRangeFilterSelectorValues } from './types.ts';\n\nexport const SELECTORS: HdsFilterBarRangeFilterSelector[] = Object.values(\n  HdsFilterBarRangeFilterSelectorValues\n);\n\nexport const SELECTORS_DISPLAY_TEXT: Record<\n  HdsFilterBarRangeFilterSelector,\n  string\n> = {\n  [HdsFilterBarRangeFilterSelectorValues.lessThan]: 'Less than',\n  [HdsFilterBarRangeFilterSelectorValues.lessThanOrEqualTo]:\n    'Less than or equal to',\n  [HdsFilterBarRangeFilterSelectorValues.equalTo]: 'Equal to',\n  [HdsFilterBarRangeFilterSelectorValues.greaterThanOrEqualTo]:\n    'Greater than or equal to',\n  [HdsFilterBarRangeFilterSelectorValues.greaterThan]: 'Greater than',\n};\n\nexport const SELECTORS_DISPLAY_SYMBOL: Record<\n  HdsFilterBarRangeFilterSelector,\n  string\n> = {\n  [HdsFilterBarRangeFilterSelectorValues.lessThan]: '<',\n  [HdsFilterBarRangeFilterSelectorValues.lessThanOrEqualTo]: '<=',\n  [HdsFilterBarRangeFilterSelectorValues.equalTo]: '=',\n  [HdsFilterBarRangeFilterSelectorValues.greaterThanOrEqualTo]: '>=',\n  [HdsFilterBarRangeFilterSelectorValues.greaterThan]: '>',\n};\n\nexport interface HdsFilterBarRangeSignature {\n  Args: {\n    keyFilter: HdsFilterBarData | undefined;\n    onChange?: (\n      selector?: HdsFilterBarRangeFilterSelector,\n      value?: number\n    ) => void;\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsFilterBarRange extends Component<HdsFilterBarRangeSignature> {\n  @tracked private _selector: HdsFilterBarRangeFilterSelector | undefined;\n  @tracked private _value: number | undefined;\n\n  private _selectorValues = SELECTORS;\n  private _selectorInputId = 'selector-input-' + guidFor(this);\n  private _valueInputId = 'value-input-' + guidFor(this);\n\n  constructor(owner: Owner, args: HdsFilterBarRangeSignature['Args']) {\n    super(owner, args);\n\n    const { keyFilter } = this.args;\n    if (keyFilter && 'selector' in keyFilter) {\n      this._selector = keyFilter.selector;\n      this._value = keyFilter.value;\n    }\n  }\n\n  get stringValue(): string | undefined {\n    return this._value !== undefined ? this._value.toString() : undefined;\n  }\n\n  selectorText(selector: HdsFilterBarRangeFilterSelector): string {\n    return SELECTORS_DISPLAY_TEXT[selector];\n  }\n\n  @action\n  onSelectorChange(event: Event): void {\n    const select = event.target as HTMLSelectElement;\n    this._selector = select.value as HdsFilterBarRangeFilterSelector;\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  private _onChange(): void {\n    const { onChange } = this.args;\n    if (onChange && typeof onChange === 'function') {\n      onChange(this._selector, this._value);\n    }\n  }\n}\n"],"names":["SELECTORS","Object","values","HdsFilterBarRangeFilterSelectorValues","SELECTORS_DISPLAY_TEXT","lessThan","lessThanOrEqualTo","equalTo","greaterThanOrEqualTo","greaterThan","SELECTORS_DISPLAY_SYMBOL","HdsFilterBarRange","Component","g","prototype","tracked","i","void 0","_selectorValues","_selectorInputId","guidFor","_valueInputId","constructor","owner","args","keyFilter","_selector","selector","_value","value","stringValue","undefined","toString","selectorText","onSelectorChange","event","select","target","_onChange","n","action","onValueChange","input","parseFloat","onChange","setComponentTemplate","TEMPLATE"],"mappings":"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"}

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

@@ -0,0 +1,182 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { schedule } from '@ember/runloop';
+import { modifier } from 'ember-modifier';
+import './tab.js';
+import './panel.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__tabs\" ...attributes {{this._setUpFilterBarTabs}}>\n  <ol class=\"hds-filter-bar__tabs__list\" aria-label={{@ariaLabel}} role=\"tablist\">\n    {{yield\n      (hash\n        Tab=(component\n          \"hds/filter-bar/tabs/tab\"\n          selectedTabIndex=this._selectedTabIndex\n          tabIds=this._tabIds\n          panelIds=this._panelIds\n          didInsertNode=this.didInsertTab\n          willDestroyNode=this.willDestroyTab\n          onClick=this.onClick\n          onKeyUp=this.onKeyUp\n        )\n      )\n    }}\n  </ol>\n  {{yield\n    (hash\n      Panel=(component\n        \"hds/filter-bar/tabs/panel\"\n        selectedTabIndex=this._selectedTabIndex\n        tabIds=this._tabIds\n        panelIds=this._panelIds\n        didInsertNode=this.didInsertPanel\n        willDestroyNode=this.willDestroyPanel\n      )\n    )\n  }}\n</div>");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+const TAB_ELEMENT_SELECTOR = '.hds-filter-bar__tabs__tab__button';
+const PANEL_ELEMENT_SELECTOR = '.hds-filter-bar__tabs__panel';
+class HdsFilterBarTabs extends Component {
+  static {
+    g(this.prototype, "_tabIds", [tracked], function () {
+      return [];
+    });
+  }
+  #_tabIds = (i(this, "_tabIds"), void 0);
+  static {
+    g(this.prototype, "_tabNodes", [tracked], function () {
+      return [];
+    });
+  }
+  #_tabNodes = (i(this, "_tabNodes"), void 0);
+  static {
+    g(this.prototype, "_panelNodes", [tracked], function () {
+      return [];
+    });
+  }
+  #_panelNodes = (i(this, "_panelNodes"), void 0);
+  static {
+    g(this.prototype, "_panelIds", [tracked], function () {
+      return [];
+    });
+  }
+  #_panelIds = (i(this, "_panelIds"), void 0);
+  static {
+    g(this.prototype, "_selectedTabIndex", [tracked], function () {
+      return 0;
+    });
+  }
+  #_selectedTabIndex = (i(this, "_selectedTabIndex"), void 0);
+  static {
+    g(this.prototype, "_selectedTabId", [tracked]);
+  }
+  #_selectedTabId = (i(this, "_selectedTabId"), void 0);
+  _element;
+  _setUpFilterBarTabs = modifier(element => {
+    const {
+      selectedTabIndex
+    } = this.args;
+    if (selectedTabIndex) {
+      this._selectedTabIndex = selectedTabIndex;
+    }
+    this._element = element;
+    return () => {};
+  });
+  didInsertTab() {
+    // eslint-disable-next-line ember/no-runloop
+    schedule('afterRender', () => {
+      this.updateTabs();
+    });
+  }
+  static {
+    n(this.prototype, "didInsertTab", [action]);
+  }
+  willDestroyTab(element) {
+    // eslint-disable-next-line ember/no-runloop
+    schedule('afterRender', () => {
+      this._tabNodes = this._tabNodes.filter(node => node.id !== element.id);
+      this._tabIds = this._tabIds.filter(tabId => tabId !== element.id);
+    });
+  }
+  static {
+    n(this.prototype, "willDestroyTab", [action]);
+  }
+  didInsertPanel() {
+    // eslint-disable-next-line ember/no-runloop
+    schedule('afterRender', () => {
+      this.updatePanels();
+    });
+  }
+  static {
+    n(this.prototype, "didInsertPanel", [action]);
+  }
+  willDestroyPanel(element) {
+    // eslint-disable-next-line ember/no-runloop
+    schedule('afterRender', () => {
+      this._panelNodes = this._panelNodes.filter(node => node.id !== element.id);
+      this._panelIds = this._panelIds.filter(panelId => panelId !== element.id);
+    });
+  }
+  static {
+    n(this.prototype, "willDestroyPanel", [action]);
+  }
+  onClick(event, tabIndex) {
+    console.log('onClick event in Tabs:', event, tabIndex);
+    this._selectedTabIndex = tabIndex;
+
+    // invoke the callback function if it's provided as argument
+    if (typeof this.args.onClickTab === 'function') {
+      this.args.onClickTab(event, tabIndex);
+    }
+  }
+  static {
+    n(this.prototype, "onClick", [action]);
+  }
+  onKeyUp(event, tabIndex) {
+    const leftArrow = 'ArrowLeft';
+    const rightArrow = 'ArrowRight';
+    const upArrow = 'ArrowUp';
+    const downArrow = 'ArrowDown';
+    const enterKey = 'Enter';
+    const spaceKey = ' ';
+    if (event.key === rightArrow || event.key === downArrow) {
+      const nextTabIndex = (tabIndex + 1) % this._tabIds.length;
+      this.focusTab(nextTabIndex, event);
+    } else if (event.key === leftArrow || event.key === upArrow) {
+      const prevTabIndex = (tabIndex + this._tabIds.length - 1) % this._tabIds.length;
+      this.focusTab(prevTabIndex, event);
+    } else if (event.key === enterKey || event.key === spaceKey) {
+      this._selectedTabIndex = tabIndex;
+    }
+    // scroll selected tab into view (it may be out of view when activated using a keyboard with `prev/next`)
+    const parentNode = this._tabNodes[this._selectedTabIndex]?.parentNode;
+    if (parentNode instanceof HTMLElement) {
+      parentNode.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }
+  }
+
+  // Focus tab for keyboard & mouse navigation:
+  static {
+    n(this.prototype, "onKeyUp", [action]);
+  }
+  focusTab(tabIndex, event) {
+    event.preventDefault();
+    this._tabNodes[tabIndex]?.focus();
+  }
+
+  // Update the tab arrays based on how they are ordered in the DOM
+  updateTabs() {
+    const tabs = this._element.querySelectorAll(TAB_ELEMENT_SELECTOR);
+    let newTabIds = [];
+    let newTabNodes = [];
+    tabs.forEach(tab => {
+      newTabIds = [...newTabIds, tab.id];
+      newTabNodes = [...newTabNodes, tab];
+    });
+    this._tabIds = newTabIds;
+    this._tabNodes = newTabNodes;
+  }
+
+  // Update the panel arrays based on how they are ordered in the DOM
+  updatePanels() {
+    const panels = this._element.querySelectorAll(PANEL_ELEMENT_SELECTOR);
+    let newPanelIds = [];
+    let newPanelNodes = [];
+    panels.forEach(panel => {
+      newPanelIds = [...newPanelIds, panel.id];
+      newPanelNodes = [...newPanelNodes, panel];
+    });
+    this._panelIds = newPanelIds;
+    this._panelNodes = newPanelNodes;
+  }
+}
+setComponentTemplate(TEMPLATE, HdsFilterBarTabs);
+
+export { HdsFilterBarTabs as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/hds/filter-bar/tabs/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { schedule } from '@ember/runloop';\nimport { modifier } from 'ember-modifier';\nimport type { WithBoundArgs } from '@glint/template';\nimport HdsFilterBarTabsTabComponent from './tab.ts';\nimport HdsFilterBarTabsPanelComponent from './panel.ts';\n\nconst TAB_ELEMENT_SELECTOR = '.hds-filter-bar__tabs__tab__button';\nconst PANEL_ELEMENT_SELECTOR = '.hds-filter-bar__tabs__panel';\n\nexport interface HdsFilterBarTabsSignature {\n  Args: {\n    selectedTabIndex?: number;\n    ariaLabel: string;\n    onClickTab?: (event: MouseEvent, tabIndex: number) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        Tab?: WithBoundArgs<\n          typeof HdsFilterBarTabsTabComponent,\n          | 'selectedTabIndex'\n          | 'tabIds'\n          | 'panelIds'\n          | 'didInsertNode'\n          | 'willDestroyNode'\n          | 'onClick'\n          | 'onKeyUp'\n        >;\n        Panel?: WithBoundArgs<\n          typeof HdsFilterBarTabsPanelComponent,\n          | 'selectedTabIndex'\n          | 'tabIds'\n          | 'panelIds'\n          | 'didInsertNode'\n          | 'willDestroyNode'\n        >;\n      },\n    ];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsFilterBarTabs extends Component<HdsFilterBarTabsSignature> {\n  @tracked private _tabIds: string[] = [];\n  @tracked private _tabNodes: HTMLElement[] = [];\n  @tracked private _panelNodes: HTMLElement[] = [];\n  @tracked private _panelIds: string[] = [];\n  @tracked private _selectedTabIndex: number = 0;\n  @tracked private _selectedTabId?: string;\n\n  private _element!: HTMLDivElement;\n\n  private _setUpFilterBarTabs = modifier((element: HTMLDivElement) => {\n    const { selectedTabIndex } = this.args;\n\n    if (selectedTabIndex) {\n      this._selectedTabIndex = selectedTabIndex;\n    }\n\n    this._element = element;\n\n    return () => {};\n  });\n\n  @action\n  didInsertTab(): void {\n    // eslint-disable-next-line ember/no-runloop\n    schedule('afterRender', (): void => {\n      this.updateTabs();\n    });\n  }\n\n  @action\n  willDestroyTab(element: HTMLElement): void {\n    // eslint-disable-next-line ember/no-runloop\n    schedule('afterRender', (): void => {\n      this._tabNodes = this._tabNodes.filter(\n        (node): boolean => node.id !== element.id\n      );\n      this._tabIds = this._tabIds.filter(\n        (tabId): boolean => tabId !== element.id\n      );\n    });\n  }\n\n  @action\n  didInsertPanel(): void {\n    // eslint-disable-next-line ember/no-runloop\n    schedule('afterRender', (): void => {\n      this.updatePanels();\n    });\n  }\n\n  @action\n  willDestroyPanel(element: HTMLElement): void {\n    // eslint-disable-next-line ember/no-runloop\n    schedule('afterRender', (): void => {\n      this._panelNodes = this._panelNodes.filter(\n        (node): boolean => node.id !== element.id\n      );\n      this._panelIds = this._panelIds.filter(\n        (panelId): boolean => panelId !== element.id\n      );\n    });\n  }\n\n  @action\n  onClick(event: MouseEvent, tabIndex: number): void {\n    console.log('onClick event in Tabs:', event, tabIndex);\n    this._selectedTabIndex = tabIndex;\n\n    // invoke the callback function if it's provided as argument\n    if (typeof this.args.onClickTab === 'function') {\n      this.args.onClickTab(event, tabIndex);\n    }\n  }\n\n  @action\n  onKeyUp(event: KeyboardEvent, tabIndex: number): void {\n    const leftArrow = 'ArrowLeft';\n    const rightArrow = 'ArrowRight';\n    const upArrow = 'ArrowUp';\n    const downArrow = 'ArrowDown';\n    const enterKey = 'Enter';\n    const spaceKey = ' ';\n\n    if (event.key === rightArrow || event.key === downArrow) {\n      const nextTabIndex = (tabIndex + 1) % this._tabIds.length;\n      this.focusTab(nextTabIndex, event);\n    } else if (event.key === leftArrow || event.key === upArrow) {\n      const prevTabIndex =\n        (tabIndex + this._tabIds.length - 1) % this._tabIds.length;\n      this.focusTab(prevTabIndex, event);\n    } else if (event.key === enterKey || event.key === spaceKey) {\n      this._selectedTabIndex = tabIndex;\n    }\n    // scroll selected tab into view (it may be out of view when activated using a keyboard with `prev/next`)\n    const parentNode = this._tabNodes[this._selectedTabIndex]?.parentNode;\n    if (parentNode instanceof HTMLElement) {\n      parentNode.scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n        inline: 'nearest',\n      });\n    }\n  }\n\n  // Focus tab for keyboard & mouse navigation:\n  focusTab(tabIndex: number, event: KeyboardEvent): void {\n    event.preventDefault();\n    this._tabNodes[tabIndex]?.focus();\n  }\n\n  // Update the tab arrays based on how they are ordered in the DOM\n  private updateTabs(): void {\n    const tabs = this._element.querySelectorAll(TAB_ELEMENT_SELECTOR);\n    let newTabIds: string[] = [];\n    let newTabNodes: HTMLElement[] = [];\n    tabs.forEach((tab) => {\n      newTabIds = [...newTabIds, tab.id];\n      newTabNodes = [...newTabNodes, tab as HTMLElement];\n    });\n    this._tabIds = newTabIds;\n    this._tabNodes = newTabNodes;\n  }\n\n  // Update the panel arrays based on how they are ordered in the DOM\n  private updatePanels(): void {\n    const panels = this._element.querySelectorAll(PANEL_ELEMENT_SELECTOR);\n    let newPanelIds: string[] = [];\n    let newPanelNodes: HTMLElement[] = [];\n    panels.forEach((panel) => {\n      newPanelIds = [...newPanelIds, panel.id];\n      newPanelNodes = [...newPanelNodes, panel as HTMLElement];\n    });\n    this._panelIds = newPanelIds;\n    this._panelNodes = newPanelNodes;\n  }\n}\n"],"names":["TAB_ELEMENT_SELECTOR","PANEL_ELEMENT_SELECTOR","HdsFilterBarTabs","Component","g","prototype","tracked","i","void 0","_element","_setUpFilterBarTabs","modifier","element","selectedTabIndex","args","_selectedTabIndex","didInsertTab","schedule","updateTabs","n","action","willDestroyTab","_tabNodes","filter","node","id","_tabIds","tabId","didInsertPanel","updatePanels","willDestroyPanel","_panelNodes","_panelIds","panelId","onClick","event","tabIndex","console","log","onClickTab","onKeyUp","leftArrow","rightArrow","upArrow","downArrow","enterKey","spaceKey","key","nextTabIndex","length","focusTab","prevTabIndex","parentNode","HTMLElement","scrollIntoView","behavior","block","inline","preventDefault","focus","tabs","querySelectorAll","newTabIds","newTabNodes","forEach","tab","panels","newPanelIds","newPanelNodes","panel","setComponentTemplate","TEMPLATE"],"mappings":"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"}

package/dist/components/hds/filter-bar/tabs/panel.js

@@ -0,0 +1,67 @@
+import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
+import { action } from '@ember/object';
+import { modifier } from 'ember-modifier';
+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<section\n  class=\"hds-filter-bar__tabs__panel\"\n  ...attributes\n  role=\"tabpanel\"\n  id={{this._panelId}}\n  hidden={{not this.isVisible}}\n  aria-labelledby={{this.coupledTabId}}\n  {{this._setUpPanel this.didInsertNode this.willDestroyNode}}\n>\n  {{#if this.isVisible}}\n    {{yield}}\n  {{/if}}\n</section>");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+class HdsFilterBarTabsPanel extends Component {
+  _panelId = 'panel-' + guidFor(this);
+  _elementId;
+  _setUpPanel = modifier((element, [insertCallbackFunction, destroyCallbackFunction]) => {
+    if (typeof insertCallbackFunction === 'function') {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      insertCallbackFunction(element);
+    }
+    return () => {
+      if (typeof destroyCallbackFunction === 'function') {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        destroyCallbackFunction(element);
+      }
+    };
+  });
+  get nodeIndex() {
+    return this.args.panelIds?.indexOf(this._panelId);
+  }
+  get coupledTabId() {
+    return this.nodeIndex !== undefined ? this.args.tabIds?.[this.nodeIndex] : undefined;
+  }
+  get isVisible() {
+    return this.nodeIndex === this.args.selectedTabIndex;
+  }
+  didInsertNode(element) {
+    const {
+      didInsertNode
+    } = this.args;
+    if (typeof didInsertNode === 'function') {
+      this._elementId = element.id;
+      didInsertNode();
+    }
+  }
+  static {
+    n(this.prototype, "didInsertNode", [action]);
+  }
+  willDestroyNode(element) {
+    const {
+      willDestroyNode
+    } = this.args;
+    if (typeof willDestroyNode === 'function') {
+      willDestroyNode(element);
+    }
+  }
+  static {
+    n(this.prototype, "willDestroyNode", [action]);
+  }
+}
+setComponentTemplate(TEMPLATE, HdsFilterBarTabsPanel);
+
+export { HdsFilterBarTabsPanel as default };
+//# sourceMappingURL=panel.js.map

package/dist/components/hds/filter-bar/tabs/panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","sources":["../../../../../src/components/hds/filter-bar/tabs/panel.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { guidFor } from '@ember/object/internals';\nimport { action } from '@ember/object';\nimport { modifier } from 'ember-modifier';\n\nexport interface HdsFilterBarTabsPanelSignature {\n  Args: {\n    selectedTabIndex?: number;\n    tabIds?: string[];\n    panelIds?: string[];\n    didInsertNode?: () => void;\n    willDestroyNode?: (element: HTMLElement) => void;\n  };\n  Blocks: {\n    default: [];\n  };\n  Element: HTMLElement;\n}\n\nexport default class HdsFilterBarTabsPanel extends Component<HdsFilterBarTabsPanelSignature> {\n  private _panelId = 'panel-' + guidFor(this);\n  private _elementId?: string;\n\n  private _setUpPanel = modifier(\n    (\n      element: HTMLElement,\n      [insertCallbackFunction, destroyCallbackFunction]\n    ) => {\n      if (typeof insertCallbackFunction === 'function') {\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n        insertCallbackFunction(element);\n      }\n\n      return () => {\n        if (typeof destroyCallbackFunction === 'function') {\n          // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n          destroyCallbackFunction(element);\n        }\n      };\n    }\n  );\n\n  get nodeIndex(): number | undefined {\n    return this.args.panelIds?.indexOf(this._panelId);\n  }\n\n  get coupledTabId(): string | undefined {\n    return this.nodeIndex !== undefined\n      ? this.args.tabIds?.[this.nodeIndex]\n      : undefined;\n  }\n\n  get isVisible(): boolean {\n    return this.nodeIndex === this.args.selectedTabIndex;\n  }\n\n  @action\n  didInsertNode(element: HTMLElement): void {\n    const { didInsertNode } = this.args;\n\n    if (typeof didInsertNode === 'function') {\n      this._elementId = element.id;\n      didInsertNode();\n    }\n  }\n\n  @action\n  willDestroyNode(element: HTMLElement): void {\n    const { willDestroyNode } = this.args;\n\n    if (typeof willDestroyNode === 'function') {\n      willDestroyNode(element);\n    }\n  }\n}\n"],"names":["HdsFilterBarTabsPanel","Component","_panelId","guidFor","_elementId","_setUpPanel","modifier","element","insertCallbackFunction","destroyCallbackFunction","nodeIndex","args","panelIds","indexOf","coupledTabId","undefined","tabIds","isVisible","selectedTabIndex","didInsertNode","id","n","prototype","action","willDestroyNode","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;;AAqBe,MAAMA,qBAAqB,SAASC,SAAS,CAAiC;AACnFC,EAAAA,QAAQ,GAAG,QAAQ,GAAGC,OAAO,CAAC,IAAI,CAAC;EACnCC,UAAU;EAEVC,WAAW,GAAGC,QAAQ,CAC5B,CACEC,OAAoB,EACpB,CAACC,sBAAsB,EAAEC,uBAAuB,CAAC,KAC9C;AACH,IAAA,IAAI,OAAOD,sBAAsB,KAAK,UAAU,EAAE;AAChD;MACAA,sBAAsB,CAACD,OAAO,CAAC;AACjC,IAAA;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,OAAOE,uBAAuB,KAAK,UAAU,EAAE;AACjD;QACAA,uBAAuB,CAACF,OAAO,CAAC;AAClC,MAAA;IACF,CAAC;AACH,EAAA,CACF,CAAC;EAED,IAAIG,SAASA,GAAuB;IAClC,OAAO,IAAI,CAACC,IAAI,CAACC,QAAQ,EAAEC,OAAO,CAAC,IAAI,CAACX,QAAQ,CAAC;AACnD,EAAA;EAEA,IAAIY,YAAYA,GAAuB;AACrC,IAAA,OAAO,IAAI,CAACJ,SAAS,KAAKK,SAAS,GAC/B,IAAI,CAACJ,IAAI,CAACK,MAAM,GAAG,IAAI,CAACN,SAAS,CAAC,GAClCK,SAAS;AACf,EAAA;EAEA,IAAIE,SAASA,GAAY;IACvB,OAAO,IAAI,CAACP,SAAS,KAAK,IAAI,CAACC,IAAI,CAACO,gBAAgB;AACtD,EAAA;EAGAC,aAAaA,CAACZ,OAAoB,EAAQ;IACxC,MAAM;AAAEY,MAAAA;KAAe,GAAG,IAAI,CAACR,IAAI;AAEnC,IAAA,IAAI,OAAOQ,aAAa,KAAK,UAAU,EAAE;AACvC,MAAA,IAAI,CAACf,UAAU,GAAGG,OAAO,CAACa,EAAE;AAC5BD,MAAAA,aAAa,EAAE;AACjB,IAAA;AACF,EAAA;AAAC,EAAA;IAAAE,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,eAAA,EAAA,CARAC,MAAM,CAAA,CAAA;AAAA;EAWPC,eAAeA,CAACjB,OAAoB,EAAQ;IAC1C,MAAM;AAAEiB,MAAAA;KAAiB,GAAG,IAAI,CAACb,IAAI;AAErC,IAAA,IAAI,OAAOa,eAAe,KAAK,UAAU,EAAE;MACzCA,eAAe,CAACjB,OAAO,CAAC;AAC1B,IAAA;AACF,EAAA;AAAC,EAAA;IAAAc,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,iBAAA,EAAA,CAPAC,MAAM,CAAA,CAAA;AAAA;AAQT;AAACE,oBAAA,CAAAC,QAAA,EAvDoB1B,qBAAqB,CAAA;;;;"}