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

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.
Files changed (73) hide show
  1. package/declarations/components/hds/dropdown/list-item/checkbox.d.ts +1 -0
  2. package/declarations/components/hds/dropdown/list-item/radio.d.ts +1 -0
  3. package/declarations/components/hds/filter-bar/{filters-dropdown.d.ts → dropdown.d.ts} +7 -5
  4. package/declarations/components/hds/filter-bar/filter-group/checkbox.d.ts +22 -0
  5. package/declarations/components/hds/filter-bar/filter-group/date.d.ts +47 -0
  6. package/declarations/components/hds/filter-bar/filter-group/generic.d.ts +24 -0
  7. package/declarations/components/hds/filter-bar/filter-group/index.d.ts +51 -0
  8. package/declarations/components/hds/filter-bar/filter-group/numerical.d.ts +45 -0
  9. package/declarations/components/hds/filter-bar/filter-group/radio.d.ts +22 -0
  10. package/declarations/components/hds/filter-bar/index.d.ts +11 -3
  11. package/declarations/components/hds/filter-bar/tabs/tab.d.ts +1 -0
  12. package/declarations/components/hds/filter-bar/types.d.ts +47 -12
  13. package/declarations/components/hds/form/text-input/field.d.ts +1 -1
  14. package/declarations/components.d.ts +7 -5
  15. package/declarations/template-registry.d.ts +19 -13
  16. package/dist/_app_/components/hds/filter-bar/{checkbox.js → dropdown.js} +1 -1
  17. package/dist/_app_/components/hds/filter-bar/filter-group/checkbox.js +1 -0
  18. package/dist/_app_/components/hds/filter-bar/{filters-dropdown.js → filter-group/date.js} +1 -1
  19. package/dist/_app_/components/hds/filter-bar/{range.js → filter-group/generic.js} +1 -1
  20. package/dist/_app_/components/hds/filter-bar/filter-group/numerical.js +1 -0
  21. package/dist/_app_/components/hds/filter-bar/{radio.js → filter-group/radio.js} +1 -1
  22. package/dist/_app_/components/hds/filter-bar/filter-group.js +1 -1
  23. package/dist/components/hds/advanced-table/index.js +1 -1
  24. package/dist/components/hds/dropdown/list-item/checkbox.js.map +1 -1
  25. package/dist/components/hds/dropdown/list-item/radio.js.map +1 -1
  26. package/dist/components/hds/filter-bar/{filters-dropdown.js → dropdown.js} +25 -30
  27. package/dist/components/hds/filter-bar/dropdown.js.map +1 -0
  28. package/dist/components/hds/filter-bar/{checkbox.js → filter-group/checkbox.js} +9 -8
  29. package/dist/components/hds/filter-bar/filter-group/checkbox.js.map +1 -0
  30. package/dist/components/hds/filter-bar/filter-group/date.js +164 -0
  31. package/dist/components/hds/filter-bar/filter-group/date.js.map +1 -0
  32. package/dist/components/hds/filter-bar/filter-group/generic.js +43 -0
  33. package/dist/components/hds/filter-bar/filter-group/generic.js.map +1 -0
  34. package/dist/components/hds/filter-bar/{filter-group.js → filter-group/index.js} +67 -13
  35. package/dist/components/hds/filter-bar/filter-group/index.js.map +1 -0
  36. package/dist/components/hds/filter-bar/filter-group/numerical.js +163 -0
  37. package/dist/components/hds/filter-bar/filter-group/numerical.js.map +1 -0
  38. package/dist/components/hds/filter-bar/{radio.js → filter-group/radio.js} +9 -8
  39. package/dist/components/hds/filter-bar/filter-group/radio.js.map +1 -0
  40. package/dist/components/hds/filter-bar/index.js +96 -18
  41. package/dist/components/hds/filter-bar/index.js.map +1 -1
  42. package/dist/components/hds/filter-bar/tabs/index.js +0 -1
  43. package/dist/components/hds/filter-bar/tabs/index.js.map +1 -1
  44. package/dist/components/hds/filter-bar/tabs/tab.js +1 -2
  45. package/dist/components/hds/filter-bar/tabs/tab.js.map +1 -1
  46. package/dist/components/hds/filter-bar/types.js +20 -9
  47. package/dist/components/hds/filter-bar/types.js.map +1 -1
  48. package/dist/components.js +8 -6
  49. package/dist/components.js.map +1 -1
  50. package/dist/helpers/hds-link-to-query.js +0 -1
  51. package/dist/helpers/hds-link-to-query.js.map +1 -1
  52. package/dist/styles/@hashicorp/design-system-components.css +190 -1621
  53. package/dist/styles/components/app-header.scss +6 -9
  54. package/dist/styles/components/filter-bar.scss +95 -86
  55. package/dist/styles/components/side-nav/header.scss +4 -12
  56. package/dist/styles/mixins/_interactive-dark-theme.scss +7 -4
  57. package/package.json +7 -5
  58. package/translations/hds/components/filter-bar/date/en-us.yaml +18 -0
  59. package/translations/hds/components/filter-bar/en-us.yaml +6 -0
  60. package/translations/hds/components/filter-bar/filter-group/en-us.yaml +1 -0
  61. package/translations/hds/components/filter-bar/filter-group/numerical/en-us.yaml +15 -0
  62. package/translations/hds/components/filter-bar/filters-dropdown/en-us.yaml +1 -1
  63. package/declarations/components/hds/filter-bar/checkbox.d.ts +0 -21
  64. package/declarations/components/hds/filter-bar/filter-group.d.ts +0 -46
  65. package/declarations/components/hds/filter-bar/radio.d.ts +0 -21
  66. package/declarations/components/hds/filter-bar/range.d.ts +0 -33
  67. package/dist/components/hds/filter-bar/checkbox.js.map +0 -1
  68. package/dist/components/hds/filter-bar/filter-group.js.map +0 -1
  69. package/dist/components/hds/filter-bar/filters-dropdown.js.map +0 -1
  70. package/dist/components/hds/filter-bar/radio.js.map +0 -1
  71. package/dist/components/hds/filter-bar/range.js +0 -88
  72. package/dist/components/hds/filter-bar/range.js.map +0 -1
  73. package/translations/hds/components/filter-bar/range/en-us.yaml +0 -3
@@ -106,16 +106,13 @@
106
106
  }
107
107
 
108
108
  // Dropdown & Button color theming overrides
109
+ // Note: We need to apply dark theme styles to .hds-dropdown-toggle-button & .hds-dropdown-toggle-icon
110
+ // so we use a partial classname selector to cover both cases
111
+
109
112
  .hds-button,
110
- .hds-dropdown-toggle-button,
111
- .hds-dropdown-toggle-icon {
112
- // Apply dark theme to child interactive components not within a nested dropdown
113
- &:not(
114
- .hds-dropdown * *,
115
- .ember-basic-dropdown-trigger * *,
116
- .ember-basic-dropdown-content * *,
117
- .hds-dialog-primitive__wrapper *
118
- ) {
113
+ button[class*="hds-dropdown-toggle"] {
114
+ // Apply dark theme to child interactive components not within a nested content container
115
+ &:not(.hds-dropdown__content *, .ember-basic-dropdown-content *, .hds-dialog-primitive__wrapper *) {
119
116
  @include hds-interactive-dark-theme();
120
117
 
121
118
  // disabled state:
@@ -14,84 +14,33 @@
14
14
  background-color: var(--token-color-surface-faint);
15
15
  border: 1px solid var(--token-color-border-primary);
16
16
  border-radius: var(--token-border-radius-medium);
17
+ }
17
18
 
18
- .hds-filter-bar__filters {
19
- display: flex;
20
- flex-wrap: wrap;
21
- gap: 8px 12px;
22
- align-items: end;
23
- padding-top: 8px;
24
- border-top: 1px solid var(--token-color-border-primary);
25
-
26
- .hds-dropdown__list .hds-form-text-input {
27
- width: auto;
28
- }
29
- }
30
-
31
- .hds-filter-bar__actions {
32
- display: flex;
33
- flex-direction: row;
34
- gap: 8px;
35
- align-items: end;
36
- }
19
+ .hds-filter-bar__filters {
20
+ display: flex;
21
+ flex-wrap: wrap;
22
+ gap: 8px 12px;
23
+ align-items: end;
24
+ padding-top: 8px;
25
+ border-top: 1px solid var(--token-color-border-primary);
37
26
  }
38
27
 
39
28
  .hds-filter-bar__actions__right {
40
- display: flex;
41
- flex-direction: row;
42
- gap: 8px;
43
29
  margin-left: auto;
44
30
  }
45
31
 
46
32
  .hds-filter-bar__search {
47
- --token-form-control-padding: 4px;
48
- }
49
-
50
- // FILTERS DROPDOWN
51
- //
52
-
53
- .hds-filter-bar__filters-dropdown__filter-group .hds-form-field--layout-flag {
54
- padding: 8px 12px;
33
+ --token-form-control-padding: 3px;
55
34
  }
56
35
 
57
- .hds-filter-bar__filters-dropdown .hds-dropdown__list,
58
- .hds-filter-bar__filters-dropdown .hds-dropdown-list-item {
59
- padding: 0;
60
- }
61
-
62
- .hds-filter-bar__filters-dropdown .hds-layout-flex {
63
- margin: 8px 0;
64
- }
65
-
66
- .hds-filter-bar__filters-dropdown .hds-button-set {
67
- gap: 8px;
68
- }
36
+ // FILTER BAR > DROPDOWN
69
37
 
70
- .hds-filter-bar__filters-dropdown__filter-group__list {
71
- flex: 1 1 auto;
72
- margin: 0;
38
+ .hds-filter-bar__dropdown .hds-dropdown__list,
39
+ .hds-filter-bar__dropdown .hds-dropdown-list-item {
73
40
  padding: 0;
74
- overflow-y: auto;
75
- list-style: none;
76
- overscroll-behavior: contain;
77
- }
78
-
79
- .hds-filter-bar__filters-dropdown__filters-count,
80
- .hds-filter-bar__filters-dropdown__filter-group__filters-count {
81
- margin-left: 8px;
82
- }
83
-
84
- .hds-filter-bar__filters-dropdown__filter-option {
85
- display: block;
86
- padding: 8px 0;
87
-
88
- &--hidden {
89
- display: none;
90
- }
91
41
  }
92
42
 
93
- // TABS
94
- //
43
+ // FILTER BAR > TABS
95
44
 
96
45
  .hds-filter-bar__tabs {
97
46
  display: flex;
@@ -109,21 +58,10 @@
109
58
  border-top-left-radius: var(--token-border-radius-medium);
110
59
  }
111
60
 
112
- .hds-filter-bar__tabs__panel:not([hidden]) {
113
- display: flex;
114
- flex-direction: column;
115
- gap: 8px;
116
- width: 50%;
117
- padding: 16px;
118
- background-color: var(--token-color-surface-primary);
119
- border-top-right-radius: var(--token-border-radius-medium);
120
- }
121
-
122
61
  .hds-filter-bar__tabs__tab__button {
123
62
  display: flex;
124
63
  gap: 16px;
125
64
  align-items: center;
126
- justify-content: space-between;
127
65
  width: 100%;
128
66
  padding: 8px 12px;
129
67
  color: var(--token-color-foreground-primary);
@@ -132,24 +70,95 @@
132
70
  border: none;
133
71
  border-radius: var(--token-border-radius-small);
134
72
 
135
- .hds-icon {
136
- fill: var(--token-color-foreground-primary);
137
- }
138
-
139
73
  &.mock-hover,
140
- &:hover,
141
- &.mock-focus,
142
- &:focus {
74
+ &:hover {
143
75
  background-color: var(--token-color-surface-interactive-hover);
144
76
  cursor: pointer;
145
77
  }
78
+
79
+ &.mock-active,
80
+ &:active {
81
+ background-color: var(--token-color-surface-interactive-active);
82
+ }
83
+ }
84
+
85
+ .hds-filter-bar__tabs__tab__text {
86
+ width: 100%;
146
87
  }
147
88
 
148
89
  .hds-filter-bar__tabs__tab--is-selected .hds-filter-bar__tabs__tab__button {
149
- color: var(--token-color-foreground-strong);
150
- background-color: var(--token-color-surface-interactive-active);
90
+ color: var(--token-color-foreground-action);
91
+ background-color: var(--token-color-surface-strong);
92
+
93
+ &.mock-hover,
94
+ &:hover {
95
+ background-color: var(--token-color-palette-neutral-200);
96
+ }
151
97
 
152
- .hds-icon {
153
- fill: var(--token-color-foreground-strong);
98
+ &.mock-active,
99
+ &:active {
100
+ background-color: var(--token-color-palette-neutral-300);
154
101
  }
155
102
  }
103
+
104
+ .hds-filter-bar__tabs__panel:not([hidden]) {
105
+ display: flex;
106
+ flex-direction: column;
107
+ gap: 8px;
108
+ width: 50%;
109
+ padding: 16px 0;
110
+ background-color: var(--token-color-surface-primary);
111
+ border-top-right-radius: var(--token-border-radius-medium);
112
+ }
113
+
114
+ // FILTER BAR > FILTER GROUP
115
+
116
+ .hds-filter-bar__filter-group .hds-form-field--layout-flag {
117
+ padding: 8px 12px;
118
+ }
119
+
120
+ .hds-filter-bar__filter-group__search {
121
+ padding: 0 16px 16px 16px;
122
+ border-bottom: 1px solid var(--token-color-border-primary);
123
+ }
124
+
125
+ .hds-filter-bar__filter-group__list {
126
+ display: flex;
127
+ flex-direction: column;
128
+ gap: 4px;
129
+ margin: 0;
130
+ padding: 0;
131
+ overflow-y: auto;
132
+ list-style: none;
133
+ overscroll-behavior: contain;
134
+ }
135
+
136
+ .hds-filter-bar__filter-group__fields {
137
+ padding: 0 16px;
138
+
139
+ .hds-filter-bar__filter-group__field,
140
+ .hds-filter-bar__filter-group__field[type="date"],
141
+ .hds-filter-bar__filter-group__field[type="time"] {
142
+ width: 100%;
143
+ }
144
+ }
145
+
146
+ .hds-filter-bar__filter-group__numerical,
147
+ .hds-filter-bar__filter-group__date {
148
+ display: flex;
149
+ flex-direction: column;
150
+ gap: 8px;
151
+ }
152
+
153
+ .hds-filter-bar__filter-group__selection-option {
154
+ display: block;
155
+ padding: 8px 16px;
156
+
157
+ &--hidden {
158
+ display: none;
159
+ }
160
+ }
161
+
162
+ .hds-filter-bar__filter-group__clear {
163
+ padding: 4px;
164
+ }
@@ -69,21 +69,13 @@
69
69
  }
70
70
 
71
71
  // Dropdown & Button color theming overrides
72
- .hds-side-nav__dropdown, // deprecated classname
73
- .hds-side-nav,
74
- .hds-side-nav-header {
72
+
73
+ .hds-side-nav {
75
74
  .hds-button,
76
- .hds-dropdown-toggle-button,
77
- .hds-dropdown-toggle-icon {
75
+ button[class*="hds-dropdown-toggle"] {
78
76
  // Apply dark theme to child interactive components not within a nested dropdown
79
- &:not(
80
- .hds-dropdown * *,
81
- .ember-basic-dropdown-trigger * *,
82
- .ember-basic-dropdown-content * *,
83
- .hds-dialog-primitive__wrapper *
84
- ) {
77
+ &:not(.hds-dropdown__content *, .ember-basic-dropdown-content *, .hds-dialog-primitive__wrapper *) {
85
78
  @include hds-interactive-dark-theme();
86
-
87
79
  // disabled state:
88
80
  &:disabled,
89
81
  &[disabled],
@@ -61,11 +61,14 @@ $hds-interactive-dark-theme-focus-ring-action-box-shadow:
61
61
  &.mock-focus {
62
62
  @include hds-focus-ring-with-pseudo-element($top: -1px, $right: -1px, $bottom: -1px, $left: -1px);
63
63
 
64
- color: var(--token-color-foreground-high-contrast);
65
- background-color: var(--token-color-palette-neutral-700);
64
+ // See: https://sass-lang.com/d/mixed-decls
65
+ & {
66
+ color: var(--token-color-foreground-high-contrast);
67
+ background-color: var(--token-color-palette-neutral-700);
66
68
 
67
- @if ($add-visible-border) {
68
- border-color: $hds-interactive-dark-theme-color-focus-action-internal;
69
+ @if ($add-visible-border) {
70
+ border-color: $hds-interactive-dark-theme-color-focus-action-internal;
71
+ }
69
72
  }
70
73
 
71
74
  // focus ring:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hashicorp/design-system-components",
3
- "version": "5.1.0-rc-20251106155636",
3
+ "version": "5.1.0-rc-20251125203828",
4
4
  "description": "Helios Design System Components",
5
5
  "keywords": [
6
6
  "hashicorp",
@@ -219,12 +219,14 @@
219
219
  "./components/hds/dropdown/toggle/button.js": "./dist/_app_/components/hds/dropdown/toggle/button.js",
220
220
  "./components/hds/dropdown/toggle/chevron.js": "./dist/_app_/components/hds/dropdown/toggle/chevron.js",
221
221
  "./components/hds/dropdown/toggle/icon.js": "./dist/_app_/components/hds/dropdown/toggle/icon.js",
222
- "./components/hds/filter-bar/checkbox.js": "./dist/_app_/components/hds/filter-bar/checkbox.js",
222
+ "./components/hds/filter-bar/dropdown.js": "./dist/_app_/components/hds/filter-bar/dropdown.js",
223
+ "./components/hds/filter-bar/filter-group/checkbox.js": "./dist/_app_/components/hds/filter-bar/filter-group/checkbox.js",
224
+ "./components/hds/filter-bar/filter-group/date.js": "./dist/_app_/components/hds/filter-bar/filter-group/date.js",
225
+ "./components/hds/filter-bar/filter-group/generic.js": "./dist/_app_/components/hds/filter-bar/filter-group/generic.js",
223
226
  "./components/hds/filter-bar/filter-group.js": "./dist/_app_/components/hds/filter-bar/filter-group.js",
224
- "./components/hds/filter-bar/filters-dropdown.js": "./dist/_app_/components/hds/filter-bar/filters-dropdown.js",
227
+ "./components/hds/filter-bar/filter-group/numerical.js": "./dist/_app_/components/hds/filter-bar/filter-group/numerical.js",
228
+ "./components/hds/filter-bar/filter-group/radio.js": "./dist/_app_/components/hds/filter-bar/filter-group/radio.js",
225
229
  "./components/hds/filter-bar.js": "./dist/_app_/components/hds/filter-bar.js",
226
- "./components/hds/filter-bar/radio.js": "./dist/_app_/components/hds/filter-bar/radio.js",
227
- "./components/hds/filter-bar/range.js": "./dist/_app_/components/hds/filter-bar/range.js",
228
230
  "./components/hds/filter-bar/tabs.js": "./dist/_app_/components/hds/filter-bar/tabs.js",
229
231
  "./components/hds/filter-bar/tabs/panel.js": "./dist/_app_/components/hds/filter-bar/tabs/panel.js",
230
232
  "./components/hds/filter-bar/tabs/tab.js": "./dist/_app_/components/hds/filter-bar/tabs/tab.js",
@@ -0,0 +1,18 @@
1
+ date:
2
+ label: Date is
3
+ datetime:
4
+ label: Datetime is
5
+ time:
6
+ label: Time is
7
+ selector-input:
8
+ default-value: Pick a selector
9
+ before: Before
10
+ exactly: Exactly
11
+ after: After
12
+ between: Between
13
+ value-input:
14
+ placeholder: Enter a date
15
+ between-value-inputs:
16
+ start-placeholder: Start
17
+ end-placeholder: End
18
+ clear: Clear filter
@@ -1,3 +1,9 @@
1
1
  search:
2
2
  aria-label: Search filters
3
3
  placeholder: Search
4
+ filter-text:
5
+ numerical-filter:
6
+ separator: and
7
+ date-filter:
8
+ separator: and
9
+ no-filters-applied: No filters applied
@@ -0,0 +1 @@
1
+ clear: Clear selection
@@ -0,0 +1,15 @@
1
+ label: Number is
2
+ selector-input:
3
+ default-value: Pick a selector
4
+ less-than: Less than (<)
5
+ less-than-or-equal-to: Less than or equal to (≤)
6
+ equal-to: Equal to (=)
7
+ greater-than-or-equal-to: Greater than or equal to (≥)
8
+ greater-than: Greater than (>)
9
+ between: Between
10
+ value-input:
11
+ placeholder: Enter a value
12
+ between-value-inputs:
13
+ start-placeholder: Start
14
+ end-placeholder: End
15
+ clear: Clear filter
@@ -4,4 +4,4 @@ expand-collapse-button:
4
4
  expand: Expand filters
5
5
  collapse: Collapse filters
6
6
  selected-filters: Filters selected
7
- toggle-button: Add filter
7
+ toggle-button: Filters
@@ -1,21 +0,0 @@
1
- /**
2
- * Copyright (c) HashiCorp, Inc.
3
- * SPDX-License-Identifier: MPL-2.0
4
- */
5
- import Component from '@glimmer/component';
6
- import type { HdsFilterBarData } from './types.ts';
7
- export interface HdsFilterBarCheckboxSignature {
8
- Args: {
9
- value?: string;
10
- keyFilter: HdsFilterBarData | undefined;
11
- onChange?: (event: Event) => void;
12
- };
13
- Blocks: {
14
- default: [];
15
- };
16
- Element: HTMLDivElement;
17
- }
18
- export default class HdsFilterBarCheckbox extends Component<HdsFilterBarCheckboxSignature> {
19
- onChange(event: Event): void;
20
- get isChecked(): boolean;
21
- }
@@ -1,46 +0,0 @@
1
- /**
2
- * Copyright (c) HashiCorp, Inc.
3
- * SPDX-License-Identifier: MPL-2.0
4
- */
5
- import Component from '@glimmer/component';
6
- import type { WithBoundArgs } from '@glint/template';
7
- import HdsFilterBarTabsTab from './tabs/tab.ts';
8
- import HdsFilterBarTabsPanel from './tabs/panel.ts';
9
- import type { HdsTabsPanelSignature } from '../tabs/panel.ts';
10
- import HdsFilterBarCheckbox from './checkbox.ts';
11
- import HdsFilterBarRadio from './radio.ts';
12
- import type { HdsFilterBarFilter, HdsFilterBarFilters, HdsFilterBarFilterType, HdsFilterBarData, HdsFilterBarRangeFilterSelector } from './types.ts';
13
- export interface HdsFilterBarFilterGroupSignature {
14
- Args: {
15
- tab?: WithBoundArgs<typeof HdsFilterBarTabsTab, never>;
16
- panel?: WithBoundArgs<typeof HdsFilterBarTabsPanel, never>;
17
- key: string;
18
- text: string;
19
- type?: HdsFilterBarFilterType;
20
- filters: HdsFilterBarFilters;
21
- searchEnabled?: boolean;
22
- onChange: (key: string, keyFilter?: HdsFilterBarFilter) => void;
23
- };
24
- Blocks: {
25
- default: [
26
- {
27
- Checkbox?: WithBoundArgs<typeof HdsFilterBarCheckbox, 'keyFilter' | 'onChange'>;
28
- Radio?: WithBoundArgs<typeof HdsFilterBarRadio, 'keyFilter' | 'onChange'>;
29
- }
30
- ];
31
- };
32
- Element: HdsTabsPanelSignature['Element'];
33
- }
34
- export default class HdsFilterBarFilterGroup extends Component<HdsFilterBarFilterGroupSignature> {
35
- internalFilters: HdsFilterBarData | undefined;
36
- private _panelElement;
37
- private _setUpFilterPanel;
38
- get type(): HdsFilterBarFilterType;
39
- get keyFilter(): HdsFilterBarData | undefined;
40
- get numFilters(): number;
41
- onSelectionChange(event: Event): void;
42
- onRangeChange(selector?: HdsFilterBarRangeFilterSelector, value?: number): void;
43
- get formattedFilters(): HdsFilterBarFilter | undefined;
44
- get classNames(): string;
45
- private onSearch;
46
- }
@@ -1,21 +0,0 @@
1
- /**
2
- * Copyright (c) HashiCorp, Inc.
3
- * SPDX-License-Identifier: MPL-2.0
4
- */
5
- import Component from '@glimmer/component';
6
- import type { HdsFilterBarData } from './types.ts';
7
- export interface HdsFilterBarRadioSignature {
8
- Args: {
9
- value?: string;
10
- keyFilter: HdsFilterBarData | undefined;
11
- onChange?: (event: Event) => void;
12
- };
13
- Blocks: {
14
- default: [];
15
- };
16
- Element: HTMLDivElement;
17
- }
18
- export default class HdsFilterBarRadio extends Component<HdsFilterBarRadioSignature> {
19
- onChange(event: Event): void;
20
- get isChecked(): boolean;
21
- }
@@ -1,33 +0,0 @@
1
- /**
2
- * Copyright (c) HashiCorp, Inc.
3
- * SPDX-License-Identifier: MPL-2.0
4
- */
5
- import Component from '@glimmer/component';
6
- import type Owner from '@ember/owner';
7
- import type { HdsFilterBarData, HdsFilterBarRangeFilterSelector } from './types.ts';
8
- export declare const SELECTORS: HdsFilterBarRangeFilterSelector[];
9
- export declare const SELECTORS_DISPLAY_TEXT: Record<HdsFilterBarRangeFilterSelector, string>;
10
- export declare const SELECTORS_DISPLAY_SYMBOL: Record<HdsFilterBarRangeFilterSelector, string>;
11
- export interface HdsFilterBarRangeSignature {
12
- Args: {
13
- keyFilter: HdsFilterBarData | undefined;
14
- onChange?: (selector?: HdsFilterBarRangeFilterSelector, value?: number) => void;
15
- };
16
- Blocks: {
17
- default: [];
18
- };
19
- Element: HTMLDivElement;
20
- }
21
- export default class HdsFilterBarRange extends Component<HdsFilterBarRangeSignature> {
22
- private _selector;
23
- private _value;
24
- private _selectorValues;
25
- private _selectorInputId;
26
- private _valueInputId;
27
- constructor(owner: Owner, args: HdsFilterBarRangeSignature['Args']);
28
- get stringValue(): string | undefined;
29
- selectorText(selector: HdsFilterBarRangeFilterSelector): string;
30
- onSelectorChange(event: Event): void;
31
- onValueChange(event: Event): void;
32
- private _onChange;
33
- }
@@ -1 +0,0 @@
1
- {"version":3,"file":"checkbox.js","sources":["../../../../src/components/hds/filter-bar/checkbox.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 HdsFilterBarCheckboxSignature {\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 HdsFilterBarCheckbox extends Component<HdsFilterBarCheckboxSignature> {\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 (Array.isArray(keyFilter)) {\n return keyFilter.some((filter) => filter.value === value);\n }\n return false;\n }\n}\n"],"names":["HdsFilterBarCheckbox","Component","onChange","event","args","n","prototype","action","isChecked","keyFilter","value","Array","isArray","some","filter","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;;AAmBe,MAAMA,oBAAoB,SAASC,SAAS,CAAgC;EAEzFC,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,IAAIO,KAAK,CAACC,OAAO,CAACH,SAAS,CAAC,EAAE;MAC5B,OAAOA,SAAS,CAACI,IAAI,CAAEC,MAAM,IAAKA,MAAM,CAACJ,KAAK,KAAKA,KAAK,CAAC;AAC3D,IAAA;AACA,IAAA,OAAO,KAAK;AACd,EAAA;AACF;AAACK,oBAAA,CAAAC,QAAA,EAhBoBhB,oBAAoB,CAAA;;;;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"filter-group.js","sources":["../../../../src/components/hds/filter-bar/filter-group.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 HdsFilterBarCheckbox from './checkbox.ts';\nimport HdsFilterBarRadio from './radio.ts';\n\nimport type {\n HdsFilterBarFilter,\n HdsFilterBarFilters,\n HdsFilterBarFilterType,\n HdsFilterBarData,\n HdsFilterBarGenericFilterData,\n HdsFilterBarRangeFilterData,\n HdsFilterBarRangeFilterSelector,\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 Checkbox?: WithBoundArgs<\n typeof HdsFilterBarCheckbox,\n 'keyFilter' | 'onChange'\n >;\n Radio?: WithBoundArgs<\n typeof HdsFilterBarRadio,\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)\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(): HdsFilterBarData | undefined {\n const { filters, key } = this.args;\n\n if (!filters) {\n return undefined;\n }\n return filters[key]?.data;\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 onRangeChange(\n selector?: HdsFilterBarRangeFilterSelector,\n value?: number\n ): void {\n const addFilter = (): HdsFilterBarData => {\n const newFilter = {\n selector: selector,\n value: value,\n } as HdsFilterBarRangeFilterData;\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 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__filters-dropdown__filter-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__filters-dropdown__filter-option--hidden'\n );\n } else {\n item.classList.add(\n 'hds-filter-bar__filters-dropdown__filter-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","type","args","filters","key","undefined","data","numFilters","keyFilters","Array","isArray","length","onSelectionChange","event","addFilter","value","newFilter","push","removeFilter","forEach","filter","input","target","checked","onChange","formattedFilters","n","action","onRangeChange","selector","text","classNames","classes","join","onSearch","listItems","querySelectorAll","item","textContent","toLowerCase","searchText","includes","classList","remove","add","setComponentTemplate","TEMPLATE"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"filters-dropdown.js","sources":["../../../../src/components/hds/filter-bar/filters-dropdown.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 Owner from '@ember/owner';\nimport type { WithBoundArgs } from '@glint/template';\n\nimport HdsFilterBarFilterGroup from './filter-group.ts';\nimport type { HdsFilterBarFilters, HdsFilterBarFilter } from './types.ts';\n\nimport type { HdsDropdownSignature } from '../dropdown/index.ts';\n\nexport interface HdsFilterBarFiltersDropdownSignature {\n Args: HdsDropdownSignature['Args'] & {\n filters: HdsFilterBarFilters;\n onFilter?: (filters: HdsFilterBarFilters) => void;\n };\n Blocks: {\n default: [\n {\n FilterGroup?: WithBoundArgs<\n typeof HdsFilterBarFilterGroup,\n 'tab' | 'panel' | 'filters' | 'onChange'\n >;\n },\n ];\n };\n Element: HTMLDivElement;\n}\n\nexport default class HdsFilterBarFiltersDropdown extends Component<\n HdsDropdownSignature & HdsFilterBarFiltersDropdownSignature\n> {\n @tracked internalFilters: HdsFilterBarFilters = {};\n\n constructor(\n owner: Owner,\n args: HdsFilterBarFiltersDropdownSignature['Args']\n ) {\n super(owner, args);\n\n const { filters } = this.args;\n\n if (filters) {\n this.internalFilters = { ...filters };\n }\n }\n\n private _syncFilters = modifier(\n (_element, [_filters]: [HdsFilterBarFilters | undefined]) => {\n if (_filters) {\n this.internalFilters = _filters;\n }\n }\n );\n\n @action\n onFilter(key: string, keyFilter?: HdsFilterBarFilter): void {\n this.internalFilters = this._updateFilter(key, keyFilter);\n }\n\n @action\n onApply(closeDropdown?: () => void): void {\n const { onFilter } = this.args;\n if (onFilter && typeof onFilter === 'function') {\n onFilter(this.internalFilters);\n }\n\n if (closeDropdown && typeof closeDropdown === 'function') {\n closeDropdown();\n }\n }\n\n @action\n onClear(closeDropdown?: () => void): void {\n const { onFilter } = this.args;\n this.internalFilters = {};\n\n if (onFilter && typeof onFilter === 'function') {\n onFilter(this.internalFilters);\n }\n\n if (closeDropdown && typeof closeDropdown === 'function') {\n closeDropdown();\n }\n }\n\n get numFilters(): number {\n let numFilters = 0;\n Object.keys(this.internalFilters).forEach((key) => {\n const filter = this.internalFilters[key];\n if (filter) {\n if (Array.isArray(filter.data)) {\n numFilters += filter.data.length;\n } else {\n numFilters += 1;\n }\n }\n });\n return numFilters;\n }\n\n get classNames(): string {\n const classes = ['hds-filter-bar__filters-dropdown'];\n\n return classes.join(' ');\n }\n\n private _updateFilter(\n key: string,\n keyFilter?: HdsFilterBarFilter\n ): HdsFilterBarFilters {\n const newFilters = {} as HdsFilterBarFilters;\n\n Object.keys(this.internalFilters).forEach((k) => {\n newFilters[k] = JSON.parse(\n JSON.stringify(this.internalFilters[k])\n ) as HdsFilterBarFilter;\n });\n if (\n keyFilter === undefined ||\n (Array.isArray(keyFilter) && keyFilter.length === 0)\n ) {\n delete newFilters[key];\n } else {\n Object.assign(newFilters, { [key]: keyFilter });\n }\n\n return { ...newFilters };\n }\n\n private _onClose = (): void => {\n const { filters } = this.args;\n if (filters) {\n this.internalFilters = { ...filters };\n } else {\n this.internalFilters = {};\n }\n };\n}\n"],"names":["HdsFilterBarFiltersDropdown","Component","g","prototype","tracked","i","void 0","constructor","owner","args","filters","internalFilters","_syncFilters","modifier","_element","_filters","onFilter","key","keyFilter","_updateFilter","n","action","onApply","closeDropdown","onClear","numFilters","Object","keys","forEach","filter","Array","isArray","data","length","classNames","classes","join","newFilters","k","JSON","parse","stringify","undefined","assign","_onClose","setComponentTemplate","TEMPLATE"],"mappings":"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"}
@@ -1 +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;;;;"}
@@ -1,88 +0,0 @@
1
- import Component from '@glimmer/component';
2
- import { action } from '@ember/object';
3
- import { tracked } from '@glimmer/tracking';
4
- import { guidFor } from '@ember/object/internals';
5
- import { HdsFilterBarRangeFilterSelectorValues } from './types.js';
6
- import { precompileTemplate } from '@ember/template-compilation';
7
- import { g, i, n } from 'decorator-transforms/runtime';
8
- import { setComponentTemplate } from '@ember/component';
9
-
10
- 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>");
11
-
12
- /**
13
- * Copyright (c) HashiCorp, Inc.
14
- * SPDX-License-Identifier: MPL-2.0
15
- */
16
-
17
- const SELECTORS = Object.values(HdsFilterBarRangeFilterSelectorValues);
18
- const SELECTORS_DISPLAY_TEXT = {
19
- [HdsFilterBarRangeFilterSelectorValues.lessThan]: 'Less than',
20
- [HdsFilterBarRangeFilterSelectorValues.lessThanOrEqualTo]: 'Less than or equal to',
21
- [HdsFilterBarRangeFilterSelectorValues.equalTo]: 'Equal to',
22
- [HdsFilterBarRangeFilterSelectorValues.greaterThanOrEqualTo]: 'Greater than or equal to',
23
- [HdsFilterBarRangeFilterSelectorValues.greaterThan]: 'Greater than'
24
- };
25
- const SELECTORS_DISPLAY_SYMBOL = {
26
- [HdsFilterBarRangeFilterSelectorValues.lessThan]: '<',
27
- [HdsFilterBarRangeFilterSelectorValues.lessThanOrEqualTo]: '<=',
28
- [HdsFilterBarRangeFilterSelectorValues.equalTo]: '=',
29
- [HdsFilterBarRangeFilterSelectorValues.greaterThanOrEqualTo]: '>=',
30
- [HdsFilterBarRangeFilterSelectorValues.greaterThan]: '>'
31
- };
32
- class HdsFilterBarRange extends Component {
33
- static {
34
- g(this.prototype, "_selector", [tracked]);
35
- }
36
- #_selector = (i(this, "_selector"), void 0);
37
- static {
38
- g(this.prototype, "_value", [tracked]);
39
- }
40
- #_value = (i(this, "_value"), void 0);
41
- _selectorValues = SELECTORS;
42
- _selectorInputId = 'selector-input-' + guidFor(this);
43
- _valueInputId = 'value-input-' + guidFor(this);
44
- constructor(owner, args) {
45
- super(owner, args);
46
- const {
47
- keyFilter
48
- } = this.args;
49
- if (keyFilter && 'selector' in keyFilter) {
50
- this._selector = keyFilter.selector;
51
- this._value = keyFilter.value;
52
- }
53
- }
54
- get stringValue() {
55
- return this._value !== undefined ? this._value.toString() : undefined;
56
- }
57
- selectorText(selector) {
58
- return SELECTORS_DISPLAY_TEXT[selector];
59
- }
60
- onSelectorChange(event) {
61
- const select = event.target;
62
- this._selector = select.value;
63
- this._onChange();
64
- }
65
- static {
66
- n(this.prototype, "onSelectorChange", [action]);
67
- }
68
- onValueChange(event) {
69
- const input = event.target;
70
- this._value = parseFloat(input.value);
71
- this._onChange();
72
- }
73
- static {
74
- n(this.prototype, "onValueChange", [action]);
75
- }
76
- _onChange() {
77
- const {
78
- onChange
79
- } = this.args;
80
- if (onChange && typeof onChange === 'function') {
81
- onChange(this._selector, this._value);
82
- }
83
- }
84
- }
85
- setComponentTemplate(TEMPLATE, HdsFilterBarRange);
86
-
87
- export { SELECTORS, SELECTORS_DISPLAY_SYMBOL, SELECTORS_DISPLAY_TEXT, HdsFilterBarRange as default };
88
- //# sourceMappingURL=range.js.map