@hashicorp/design-system-components 6.3.0 → 6.4.0-rc-20260709205038
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -15,6 +15,7 @@ export interface HdsFilterBarSignature {
|
|
|
15
15
|
isLiveFilter?: boolean;
|
|
16
16
|
hasSearch?: boolean;
|
|
17
17
|
searchPlaceholder?: string;
|
|
18
|
+
searchAriaLabel?: string;
|
|
18
19
|
onFilter?: (filters: HdsFilterBarFilters) => void;
|
|
19
20
|
};
|
|
20
21
|
Blocks: {
|
|
@@ -37,6 +38,7 @@ export default class HdsFilterBar extends Component<HdsFilterBarSignature> {
|
|
|
37
38
|
private _setUpFilterBar;
|
|
38
39
|
get searchValue(): string;
|
|
39
40
|
get searchPlaceholder(): string;
|
|
41
|
+
get searchAriaLabel(): string;
|
|
40
42
|
get hasActiveFilters(): boolean;
|
|
41
43
|
onFilter: (filters: HdsFilterBarFilters) => void;
|
|
42
44
|
clearFilters: () => void;
|
|
@@ -59,6 +59,11 @@ class HdsFilterBar extends Component {
|
|
|
59
59
|
default: 'Search'
|
|
60
60
|
});
|
|
61
61
|
}
|
|
62
|
+
get searchAriaLabel() {
|
|
63
|
+
return this.args.searchAriaLabel || this.hdsIntl.t('hds.components.filter-bar.search.aria-label', {
|
|
64
|
+
default: 'Search'
|
|
65
|
+
});
|
|
66
|
+
}
|
|
62
67
|
get hasActiveFilters() {
|
|
63
68
|
return Object.keys(this.args.filters).length > 0;
|
|
64
69
|
}
|
|
@@ -247,7 +252,7 @@ class HdsFilterBar extends Component {
|
|
|
247
252
|
return [];
|
|
248
253
|
};
|
|
249
254
|
static {
|
|
250
|
-
setComponentTemplate(precompileTemplate("<div class=\"hds-filter-bar\" ...attributes {{this._setUpFilterBar}}>\n {{#if @isLiveFilter}}\n <span class=\"sr-only\">{{hdsT \"hds.components.filter-bar.live-filtering\" default=\"Filters will be applied automatically as selections are made\"}}</span>\n {{/if}}\n <HdsLayoutFlex @align=\"center\" @gap=\"8\" class=\"hds-filter-bar__actions\">\n <HdsButton @text={{hdsT \"hds.components.filter-bar.applied-filters.toggle-button\" default=\"View applied filters\"}} @color=\"secondary\" @size=\"small\" @icon={{if this._isExpanded \"unfold-close\" \"unfold-open\"}} @isIconOnly={{true}} id={{this._appliedFiltersButtonId}} aria-controls={{this._appliedFiltersContentId}} aria-expanded={{if this._isExpanded \"true\" \"false\"}} class=\"hds-filter-bar__applied-filters-toggle-button\" {{on \"click\" this.toggleExpand}} />\n {{yield (hash FiltersDropdown=(component HdsFilterBarFiltersDropdown filters=@filters isLiveFilter=@isLiveFilter onFilter=this.onFilter))}}\n {{#if @hasSearch}}\n <HdsFormTextInputBase @type=\"search\" @value={{this.searchValue}} class=\"hds-filter-bar__search\" placeholder={{this.searchPlaceholder}} aria-label={{
|
|
255
|
+
setComponentTemplate(precompileTemplate("<div class=\"hds-filter-bar\" ...attributes {{this._setUpFilterBar}}>\n {{#if @isLiveFilter}}\n <span class=\"sr-only\">{{hdsT \"hds.components.filter-bar.live-filtering\" default=\"Filters will be applied automatically as selections are made\"}}</span>\n {{/if}}\n <HdsLayoutFlex @align=\"center\" @gap=\"8\" class=\"hds-filter-bar__actions\">\n <HdsButton @text={{hdsT \"hds.components.filter-bar.applied-filters.toggle-button\" default=\"View applied filters\"}} @color=\"secondary\" @size=\"small\" @icon={{if this._isExpanded \"unfold-close\" \"unfold-open\"}} @isIconOnly={{true}} id={{this._appliedFiltersButtonId}} aria-controls={{this._appliedFiltersContentId}} aria-expanded={{if this._isExpanded \"true\" \"false\"}} class=\"hds-filter-bar__applied-filters-toggle-button\" {{on \"click\" this.toggleExpand}} />\n {{yield (hash FiltersDropdown=(component HdsFilterBarFiltersDropdown filters=@filters isLiveFilter=@isLiveFilter onFilter=this.onFilter))}}\n {{#if @hasSearch}}\n <HdsFormTextInputBase @type=\"search\" @value={{this.searchValue}} class=\"hds-filter-bar__search\" placeholder={{this.searchPlaceholder}} aria-label={{this.searchAriaLabel}} name=\"search\" {{on \"change\" this.onSearch}} />\n {{/if}}\n <HdsLayoutFlex @gap=\"8\" @align=\"center\" class=\"hds-filter-bar__actions__right\">\n {{yield (hash ActionsGeneric=HdsYield)}}\n {{yield (hash ActionsDropdown=HdsFilterBarActionsDropdown)}}\n </HdsLayoutFlex>\n </HdsLayoutFlex>\n <div class=\"hds-filter-bar__applied-filters-list\" id={{this._appliedFiltersContentId}}>\n {{#if this._isExpanded}}\n <HdsSeparator @spacing=\"0\" />\n <div class=\"hds-filter-bar__applied-filters-list__content\">\n {{#if this.hasActiveFilters}}\n <HdsFilterBarAppliedFilters @filters={{@filters}} @onFilterDismiss={{this._onFilterDismiss}} />\n <HdsButton class=\"hds-filter-bar__clear-button\" @text={{hdsT \"hds.components.filter-bar.applied-filters.clear-filters\" default=\"Clear all filters\"}} @color=\"tertiary\" @icon=\"x\" @size=\"small\" {{on \"click\" this.clearFilters}} />\n {{else}}\n <HdsTextBody @size={{100}} @color=\"faint\">\n {{hdsT \"hds.components.filter-bar.applied-filters.no-filters-applied\" default=\"No filters applied\"}}\n </HdsTextBody>\n {{/if}}\n </div>\n {{/if}}\n </div>\n</div>", {
|
|
251
256
|
strictMode: true,
|
|
252
257
|
scope: () => ({
|
|
253
258
|
hdsT: HdsTHelper,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/hds/filter-bar/index.gts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2021, 2026\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { service } from '@ember/service';\nimport { isArray } from '@ember/array';\nimport { modifier } from 'ember-modifier';\nimport { guidFor } from '@ember/object/internals';\nimport { hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\n\nimport type { WithBoundArgs } from '@glint/template';\n\nimport { NUMERICAL_SELECTORS_TEXT } from './filter-group/numerical.gts';\nimport { DATE_SELECTORS_TEXT } from './filter-group/date.gts';\nimport hdsT from '../../../helpers/hds-t.ts';\nimport HdsYield from '../yield/index.gts';\nimport HdsFilterBarActionsDropdown from './actions-dropdown.gts';\nimport HdsFilterBarFiltersDropdown from './filters-dropdown.gts';\nimport HdsLayoutFlex from '../layout/flex/index.gts';\nimport HdsFormTextInputBase from '../form/text-input/base.gts';\nimport HdsButton from '../button/index.gts';\nimport HdsSeparator from '../separator/index.gts';\nimport HdsTextBody from '../text/body.gts';\nimport HdsFilterBarAppliedFilters from './applied-filters.gts';\n\nimport type HdsIntlService from '../../../services/hds-intl.ts';\nimport type {\n HdsFilterBarFilters,\n HdsFilterBarFilter,\n HdsFilterBarFilterType,\n HdsFilterBarData,\n HdsFilterBarGenericFilterData,\n} from './types.ts';\n\nexport interface HdsFilterBarSignature {\n Args: {\n filters: HdsFilterBarFilters;\n isLiveFilter?: boolean;\n hasSearch?: boolean;\n searchPlaceholder?: string;\n onFilter?: (filters: HdsFilterBarFilters) => void;\n };\n Blocks: {\n default?: [\n {\n FiltersDropdown?: WithBoundArgs<\n typeof HdsFilterBarFiltersDropdown,\n 'filters' | 'isLiveFilter' | 'onFilter'\n >;\n ActionsDropdown?: WithBoundArgs<\n typeof HdsFilterBarActionsDropdown,\n never\n >;\n ActionsGeneric?: typeof HdsYield;\n },\n ];\n };\n Element: HTMLDivElement;\n}\n\nexport default class HdsFilterBar extends Component<HdsFilterBarSignature> {\n @service hdsIntl!: HdsIntlService;\n\n @tracked _isExpanded: boolean = this.hasActiveFilters;\n\n private _dropdownToggleElement!: HTMLDivElement;\n private _appliedFiltersButtonId = 'applied-filters-button-' + guidFor(this);\n private _appliedFiltersContentId = 'applied-filters-content-' + guidFor(this);\n\n private _setUpFilterBar = modifier((element: HTMLDivElement) => {\n this._dropdownToggleElement = element.querySelector(\n '.hds-filter-bar__filters-dropdown .hds-dropdown-toggle-button'\n ) as HTMLDivElement;\n\n // Align the expanded state with the presence of active filters\n this._isExpanded = this.hasActiveFilters;\n });\n\n get searchValue(): string {\n const { filters } = this.args;\n if (filters['search']) {\n return this._getFilterValueText(filters['search']);\n }\n return '';\n }\n\n get searchPlaceholder(): string {\n return (\n this.args.searchPlaceholder ||\n this.hdsIntl.t('hds.components.filter-bar.search.placeholder', {\n default: 'Search',\n })\n );\n }\n\n get hasActiveFilters(): boolean {\n return Object.keys(this.args.filters).length > 0;\n }\n\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 clearFilters = (): void => {\n const { onFilter } = this.args;\n if (onFilter && typeof onFilter === 'function') {\n onFilter({});\n this._isExpanded = false;\n }\n this._dropdownToggleElement?.focus();\n };\n\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 = this._copyFilters(filters);\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 toggleExpand = (): void => {\n this._isExpanded = !this._isExpanded;\n };\n\n private _copyFilters = (\n filters: HdsFilterBarFilters\n ): HdsFilterBarFilters => {\n const newFilters = {} as HdsFilterBarFilters;\n\n // Note: Due to the filters being an Ember object, structuredClone cannot be used here.\n // Further investigation will be done in a follow-up task: https://hashicorp.atlassian.net/browse/HDS-5907\n Object.keys(filters).forEach((k) => {\n newFilters[k] = JSON.parse(\n JSON.stringify(filters[k])\n ) as HdsFilterBarFilter;\n });\n\n return newFilters;\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 = this._copyFilters(filters);\n\n if (\n (keyFilter.type === 'multi-select' && isArray(keyFilter.data)) ||\n (keyFilter.type === 'generic' && isArray(keyFilter.data))\n ) {\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: keyFilter.type,\n text: keyFilter.text,\n data: newKeyfilter,\n };\n }\n } else {\n delete newFilters[key];\n }\n\n this.onFilter({ ...newFilters });\n }\n this._dropdownToggleElement?.focus();\n };\n\n private _filterData = (\n data: HdsFilterBarData\n ): HdsFilterBarGenericFilterData => {\n const result = {\n value: '',\n } as HdsFilterBarGenericFilterData;\n if ('value' in data) {\n result.value = data.value;\n }\n if ('label' in data) {\n result.label = data.label;\n }\n return result;\n };\n\n private _getFilterValueText = (filter: HdsFilterBarFilter): string => {\n const result = this._filterData(filter.data);\n const resultLabel = result?.label as string;\n const resultValue = result?.value as string;\n return resultLabel ?? resultValue;\n };\n\n private _getFilterKeyText = (\n key: string,\n data: HdsFilterBarFilter\n ): string => {\n if (data.text) {\n return data.text;\n } else {\n return key;\n }\n };\n\n private _getNumericalFilterValueText = (\n filter: HdsFilterBarFilter\n ): 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.tag.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 _getDateFilterValueText = (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.tag.date-filter.separator',\n {\n default: 'and',\n }\n );\n const startDateText = this._formatDateFilterText(\n data.value.start as string,\n filter.type\n );\n const endDateText = this._formatDateFilterText(\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._formatDateFilterText(\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 _formatDateFilterText = (\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 _getGenericFilterValueText = (filter: HdsFilterBarFilter): string => {\n if ('dismissTagText' in filter) {\n return filter.dismissTagText ?? '';\n } else {\n return '';\n }\n };\n\n private _getMultiSelectFilterData = (\n data: HdsFilterBarData\n ): { value: unknown; label?: string }[] => {\n if (isArray(data)) {\n return data.map((item) => this._filterData(item));\n }\n return [];\n };\n\n <template>\n <div class=\"hds-filter-bar\" ...attributes {{this._setUpFilterBar}}>\n {{#if @isLiveFilter}}\n <span class=\"sr-only\">{{hdsT\n \"hds.components.filter-bar.live-filtering\"\n default=\"Filters will be applied automatically as selections are made\"\n }}</span>\n {{/if}}\n <HdsLayoutFlex @align=\"center\" @gap=\"8\" class=\"hds-filter-bar__actions\">\n <HdsButton\n @text={{hdsT\n \"hds.components.filter-bar.applied-filters.toggle-button\"\n default=\"View applied filters\"\n }}\n @color=\"secondary\"\n @size=\"small\"\n @icon={{if this._isExpanded \"unfold-close\" \"unfold-open\"}}\n @isIconOnly={{true}}\n id={{this._appliedFiltersButtonId}}\n aria-controls={{this._appliedFiltersContentId}}\n aria-expanded={{if this._isExpanded \"true\" \"false\"}}\n class=\"hds-filter-bar__applied-filters-toggle-button\"\n {{on \"click\" this.toggleExpand}}\n />\n {{yield\n (hash\n FiltersDropdown=(component\n HdsFilterBarFiltersDropdown\n filters=@filters\n isLiveFilter=@isLiveFilter\n onFilter=this.onFilter\n )\n )\n }}\n {{#if @hasSearch}}\n <HdsFormTextInputBase\n @type=\"search\"\n @value={{this.searchValue}}\n class=\"hds-filter-bar__search\"\n placeholder={{this.searchPlaceholder}}\n aria-label={{hdsT\n \"hds.components.filter-bar.search.aria-label\"\n default=\"Search\"\n }}\n name=\"search\"\n {{on \"change\" this.onSearch}}\n />\n {{/if}}\n <HdsLayoutFlex\n @gap=\"8\"\n @align=\"center\"\n class=\"hds-filter-bar__actions__right\"\n >\n {{yield (hash ActionsGeneric=HdsYield)}}\n {{yield (hash ActionsDropdown=HdsFilterBarActionsDropdown)}}\n </HdsLayoutFlex>\n </HdsLayoutFlex>\n <div\n class=\"hds-filter-bar__applied-filters-list\"\n id={{this._appliedFiltersContentId}}\n >\n {{#if this._isExpanded}}\n <HdsSeparator @spacing=\"0\" />\n <div class=\"hds-filter-bar__applied-filters-list__content\">\n {{#if this.hasActiveFilters}}\n <HdsFilterBarAppliedFilters\n @filters={{@filters}}\n @onFilterDismiss={{this._onFilterDismiss}}\n />\n <HdsButton\n class=\"hds-filter-bar__clear-button\"\n @text={{hdsT\n \"hds.components.filter-bar.applied-filters.clear-filters\"\n default=\"Clear all filters\"\n }}\n @color=\"tertiary\"\n @icon=\"x\"\n @size=\"small\"\n {{on \"click\" this.clearFilters}}\n />\n {{else}}\n <HdsTextBody @size={{100}} @color=\"faint\">\n {{hdsT\n \"hds.components.filter-bar.applied-filters.no-filters-applied\"\n default=\"No filters applied\"\n }}\n </HdsTextBody>\n {{/if}}\n </div>\n {{/if}}\n </div>\n </div>\n </template>\n}\n"],"names":["HdsFilterBar","Component","g","prototype","service","i","tracked","hasActiveFilters","_dropdownToggleElement","_appliedFiltersButtonId","guidFor","_appliedFiltersContentId","_setUpFilterBar","modifier","element","querySelector","_isExpanded","searchValue","filters","args","_getFilterValueText","searchPlaceholder","hdsIntl","t","default","Object","keys","length","onFilter","clearFilters","focus","onSearch","event","input","target","value","newFilters","_copyFilters","type","text","data","toggleExpand","forEach","k","JSON","parse","stringify","_onFilterDismiss","key","filterValue","keyFilter","isArray","newKeyfilter","filter","item","_filterData","result","label","resultLabel","resultValue","_getFilterKeyText","_getNumericalFilterValueText","selector","separatorText","NUMERICAL_SELECTORS_TEXT","start","end","_getDateFilterValueText","startDateText","_formatDateFilterText","endDateText","DATE_SELECTORS_TEXT","dateText","dateString","filterType","date","Date","options","dateStyle","timeStyle","newDate","Intl","DateTimeFormat","undefined","format","_getGenericFilterValueText","dismissTagText","_getMultiSelectFilterData","map","setComponentTemplate","precompileTemplate","strictMode","scope","hdsT","HdsLayoutFlex","HdsButton","on","hash","HdsFilterBarFiltersDropdown","HdsFormTextInputBase","HdsYield","HdsFilterBarActionsDropdown","HdsSeparator","HdsFilterBarAppliedFilters","HdsTextBody"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/hds/filter-bar/index.gts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2021, 2026\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { service } from '@ember/service';\nimport { isArray } from '@ember/array';\nimport { modifier } from 'ember-modifier';\nimport { guidFor } from '@ember/object/internals';\nimport { hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\n\nimport type { WithBoundArgs } from '@glint/template';\n\nimport { NUMERICAL_SELECTORS_TEXT } from './filter-group/numerical.gts';\nimport { DATE_SELECTORS_TEXT } from './filter-group/date.gts';\nimport hdsT from '../../../helpers/hds-t.ts';\nimport HdsYield from '../yield/index.gts';\nimport HdsFilterBarActionsDropdown from './actions-dropdown.gts';\nimport HdsFilterBarFiltersDropdown from './filters-dropdown.gts';\nimport HdsLayoutFlex from '../layout/flex/index.gts';\nimport HdsFormTextInputBase from '../form/text-input/base.gts';\nimport HdsButton from '../button/index.gts';\nimport HdsSeparator from '../separator/index.gts';\nimport HdsTextBody from '../text/body.gts';\nimport HdsFilterBarAppliedFilters from './applied-filters.gts';\n\nimport type HdsIntlService from '../../../services/hds-intl.ts';\nimport type {\n HdsFilterBarFilters,\n HdsFilterBarFilter,\n HdsFilterBarFilterType,\n HdsFilterBarData,\n HdsFilterBarGenericFilterData,\n} from './types.ts';\n\nexport interface HdsFilterBarSignature {\n Args: {\n filters: HdsFilterBarFilters;\n isLiveFilter?: boolean;\n hasSearch?: boolean;\n searchPlaceholder?: string;\n searchAriaLabel?: string;\n onFilter?: (filters: HdsFilterBarFilters) => void;\n };\n Blocks: {\n default?: [\n {\n FiltersDropdown?: WithBoundArgs<\n typeof HdsFilterBarFiltersDropdown,\n 'filters' | 'isLiveFilter' | 'onFilter'\n >;\n ActionsDropdown?: WithBoundArgs<\n typeof HdsFilterBarActionsDropdown,\n never\n >;\n ActionsGeneric?: typeof HdsYield;\n },\n ];\n };\n Element: HTMLDivElement;\n}\n\nexport default class HdsFilterBar extends Component<HdsFilterBarSignature> {\n @service hdsIntl!: HdsIntlService;\n\n @tracked _isExpanded: boolean = this.hasActiveFilters;\n\n private _dropdownToggleElement!: HTMLDivElement;\n private _appliedFiltersButtonId = 'applied-filters-button-' + guidFor(this);\n private _appliedFiltersContentId = 'applied-filters-content-' + guidFor(this);\n\n private _setUpFilterBar = modifier((element: HTMLDivElement) => {\n this._dropdownToggleElement = element.querySelector(\n '.hds-filter-bar__filters-dropdown .hds-dropdown-toggle-button'\n ) as HTMLDivElement;\n\n // Align the expanded state with the presence of active filters\n this._isExpanded = this.hasActiveFilters;\n });\n\n get searchValue(): string {\n const { filters } = this.args;\n if (filters['search']) {\n return this._getFilterValueText(filters['search']);\n }\n return '';\n }\n\n get searchPlaceholder(): string {\n return (\n this.args.searchPlaceholder ||\n this.hdsIntl.t('hds.components.filter-bar.search.placeholder', {\n default: 'Search',\n })\n );\n }\n\n get searchAriaLabel(): string {\n return (\n this.args.searchAriaLabel ||\n this.hdsIntl.t('hds.components.filter-bar.search.aria-label', {\n default: 'Search',\n })\n );\n }\n\n get hasActiveFilters(): boolean {\n return Object.keys(this.args.filters).length > 0;\n }\n\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 clearFilters = (): void => {\n const { onFilter } = this.args;\n if (onFilter && typeof onFilter === 'function') {\n onFilter({});\n this._isExpanded = false;\n }\n this._dropdownToggleElement?.focus();\n };\n\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 = this._copyFilters(filters);\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 toggleExpand = (): void => {\n this._isExpanded = !this._isExpanded;\n };\n\n private _copyFilters = (\n filters: HdsFilterBarFilters\n ): HdsFilterBarFilters => {\n const newFilters = {} as HdsFilterBarFilters;\n\n // Note: Due to the filters being an Ember object, structuredClone cannot be used here.\n // Further investigation will be done in a follow-up task: https://hashicorp.atlassian.net/browse/HDS-5907\n Object.keys(filters).forEach((k) => {\n newFilters[k] = JSON.parse(\n JSON.stringify(filters[k])\n ) as HdsFilterBarFilter;\n });\n\n return newFilters;\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 = this._copyFilters(filters);\n\n if (\n (keyFilter.type === 'multi-select' && isArray(keyFilter.data)) ||\n (keyFilter.type === 'generic' && isArray(keyFilter.data))\n ) {\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: keyFilter.type,\n text: keyFilter.text,\n data: newKeyfilter,\n };\n }\n } else {\n delete newFilters[key];\n }\n\n this.onFilter({ ...newFilters });\n }\n this._dropdownToggleElement?.focus();\n };\n\n private _filterData = (\n data: HdsFilterBarData\n ): HdsFilterBarGenericFilterData => {\n const result = {\n value: '',\n } as HdsFilterBarGenericFilterData;\n if ('value' in data) {\n result.value = data.value;\n }\n if ('label' in data) {\n result.label = data.label;\n }\n return result;\n };\n\n private _getFilterValueText = (filter: HdsFilterBarFilter): string => {\n const result = this._filterData(filter.data);\n const resultLabel = result?.label as string;\n const resultValue = result?.value as string;\n return resultLabel ?? resultValue;\n };\n\n private _getFilterKeyText = (\n key: string,\n data: HdsFilterBarFilter\n ): string => {\n if (data.text) {\n return data.text;\n } else {\n return key;\n }\n };\n\n private _getNumericalFilterValueText = (\n filter: HdsFilterBarFilter\n ): 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.tag.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 _getDateFilterValueText = (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.tag.date-filter.separator',\n {\n default: 'and',\n }\n );\n const startDateText = this._formatDateFilterText(\n data.value.start as string,\n filter.type\n );\n const endDateText = this._formatDateFilterText(\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._formatDateFilterText(\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 _formatDateFilterText = (\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 _getGenericFilterValueText = (filter: HdsFilterBarFilter): string => {\n if ('dismissTagText' in filter) {\n return filter.dismissTagText ?? '';\n } else {\n return '';\n }\n };\n\n private _getMultiSelectFilterData = (\n data: HdsFilterBarData\n ): { value: unknown; label?: string }[] => {\n if (isArray(data)) {\n return data.map((item) => this._filterData(item));\n }\n return [];\n };\n\n <template>\n <div class=\"hds-filter-bar\" ...attributes {{this._setUpFilterBar}}>\n {{#if @isLiveFilter}}\n <span class=\"sr-only\">{{hdsT\n \"hds.components.filter-bar.live-filtering\"\n default=\"Filters will be applied automatically as selections are made\"\n }}</span>\n {{/if}}\n <HdsLayoutFlex @align=\"center\" @gap=\"8\" class=\"hds-filter-bar__actions\">\n <HdsButton\n @text={{hdsT\n \"hds.components.filter-bar.applied-filters.toggle-button\"\n default=\"View applied filters\"\n }}\n @color=\"secondary\"\n @size=\"small\"\n @icon={{if this._isExpanded \"unfold-close\" \"unfold-open\"}}\n @isIconOnly={{true}}\n id={{this._appliedFiltersButtonId}}\n aria-controls={{this._appliedFiltersContentId}}\n aria-expanded={{if this._isExpanded \"true\" \"false\"}}\n class=\"hds-filter-bar__applied-filters-toggle-button\"\n {{on \"click\" this.toggleExpand}}\n />\n {{yield\n (hash\n FiltersDropdown=(component\n HdsFilterBarFiltersDropdown\n filters=@filters\n isLiveFilter=@isLiveFilter\n onFilter=this.onFilter\n )\n )\n }}\n {{#if @hasSearch}}\n <HdsFormTextInputBase\n @type=\"search\"\n @value={{this.searchValue}}\n class=\"hds-filter-bar__search\"\n placeholder={{this.searchPlaceholder}}\n aria-label={{this.searchAriaLabel}}\n name=\"search\"\n {{on \"change\" this.onSearch}}\n />\n {{/if}}\n <HdsLayoutFlex\n @gap=\"8\"\n @align=\"center\"\n class=\"hds-filter-bar__actions__right\"\n >\n {{yield (hash ActionsGeneric=HdsYield)}}\n {{yield (hash ActionsDropdown=HdsFilterBarActionsDropdown)}}\n </HdsLayoutFlex>\n </HdsLayoutFlex>\n <div\n class=\"hds-filter-bar__applied-filters-list\"\n id={{this._appliedFiltersContentId}}\n >\n {{#if this._isExpanded}}\n <HdsSeparator @spacing=\"0\" />\n <div class=\"hds-filter-bar__applied-filters-list__content\">\n {{#if this.hasActiveFilters}}\n <HdsFilterBarAppliedFilters\n @filters={{@filters}}\n @onFilterDismiss={{this._onFilterDismiss}}\n />\n <HdsButton\n class=\"hds-filter-bar__clear-button\"\n @text={{hdsT\n \"hds.components.filter-bar.applied-filters.clear-filters\"\n default=\"Clear all filters\"\n }}\n @color=\"tertiary\"\n @icon=\"x\"\n @size=\"small\"\n {{on \"click\" this.clearFilters}}\n />\n {{else}}\n <HdsTextBody @size={{100}} @color=\"faint\">\n {{hdsT\n \"hds.components.filter-bar.applied-filters.no-filters-applied\"\n default=\"No filters applied\"\n }}\n </HdsTextBody>\n {{/if}}\n </div>\n {{/if}}\n </div>\n </div>\n </template>\n}\n"],"names":["HdsFilterBar","Component","g","prototype","service","i","tracked","hasActiveFilters","_dropdownToggleElement","_appliedFiltersButtonId","guidFor","_appliedFiltersContentId","_setUpFilterBar","modifier","element","querySelector","_isExpanded","searchValue","filters","args","_getFilterValueText","searchPlaceholder","hdsIntl","t","default","searchAriaLabel","Object","keys","length","onFilter","clearFilters","focus","onSearch","event","input","target","value","newFilters","_copyFilters","type","text","data","toggleExpand","forEach","k","JSON","parse","stringify","_onFilterDismiss","key","filterValue","keyFilter","isArray","newKeyfilter","filter","item","_filterData","result","label","resultLabel","resultValue","_getFilterKeyText","_getNumericalFilterValueText","selector","separatorText","NUMERICAL_SELECTORS_TEXT","start","end","_getDateFilterValueText","startDateText","_formatDateFilterText","endDateText","DATE_SELECTORS_TEXT","dateText","dateString","filterType","date","Date","options","dateStyle","timeStyle","newDate","Intl","DateTimeFormat","undefined","format","_getGenericFilterValueText","dismissTagText","_getMultiSelectFilterData","map","setComponentTemplate","precompileTemplate","strictMode","scope","hdsT","HdsLayoutFlex","HdsButton","on","hash","HdsFilterBarFiltersDropdown","HdsFormTextInputBase","HdsYield","HdsFilterBarActionsDropdown","HdsSeparator","HdsFilterBarAppliedFilters","HdsTextBody"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hashicorp/design-system-components",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.4.0-rc-20260709205038",
|
|
4
4
|
"description": "Helios Design System Components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"hashicorp",
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
"@types/luxon": "^3.4.2",
|
|
76
76
|
"@types/prismjs": "^1.26.5",
|
|
77
77
|
"babel-plugin-ember-template-compilation": "^2.4.1",
|
|
78
|
-
"concurrently": "^9.
|
|
78
|
+
"concurrently": "^9.2.3",
|
|
79
79
|
"ember-basic-dropdown": "^8.8.0",
|
|
80
80
|
"ember-intl": "^8.0.0",
|
|
81
81
|
"ember-source": "^6.4.0",
|