@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.
- package/declarations/components/hds/dropdown/list-item/checkbox.d.ts +1 -0
- package/declarations/components/hds/dropdown/list-item/radio.d.ts +1 -0
- package/declarations/components/hds/filter-bar/{filters-dropdown.d.ts → dropdown.d.ts} +7 -5
- package/declarations/components/hds/filter-bar/filter-group/checkbox.d.ts +22 -0
- package/declarations/components/hds/filter-bar/filter-group/date.d.ts +47 -0
- package/declarations/components/hds/filter-bar/filter-group/generic.d.ts +24 -0
- package/declarations/components/hds/filter-bar/filter-group/index.d.ts +51 -0
- package/declarations/components/hds/filter-bar/filter-group/numerical.d.ts +45 -0
- package/declarations/components/hds/filter-bar/filter-group/radio.d.ts +22 -0
- package/declarations/components/hds/filter-bar/index.d.ts +11 -3
- package/declarations/components/hds/filter-bar/tabs/tab.d.ts +1 -0
- package/declarations/components/hds/filter-bar/types.d.ts +47 -12
- package/declarations/components/hds/form/text-input/field.d.ts +1 -1
- package/declarations/components.d.ts +7 -5
- package/declarations/template-registry.d.ts +19 -13
- package/dist/_app_/components/hds/filter-bar/{checkbox.js → dropdown.js} +1 -1
- package/dist/_app_/components/hds/filter-bar/filter-group/checkbox.js +1 -0
- package/dist/_app_/components/hds/filter-bar/{filters-dropdown.js → filter-group/date.js} +1 -1
- package/dist/_app_/components/hds/filter-bar/{range.js → filter-group/generic.js} +1 -1
- package/dist/_app_/components/hds/filter-bar/filter-group/numerical.js +1 -0
- package/dist/_app_/components/hds/filter-bar/{radio.js → filter-group/radio.js} +1 -1
- package/dist/_app_/components/hds/filter-bar/filter-group.js +1 -1
- package/dist/components/hds/advanced-table/index.js +1 -1
- package/dist/components/hds/dropdown/list-item/checkbox.js.map +1 -1
- package/dist/components/hds/dropdown/list-item/radio.js.map +1 -1
- package/dist/components/hds/filter-bar/{filters-dropdown.js → dropdown.js} +25 -30
- package/dist/components/hds/filter-bar/dropdown.js.map +1 -0
- package/dist/components/hds/filter-bar/{checkbox.js → filter-group/checkbox.js} +9 -8
- package/dist/components/hds/filter-bar/filter-group/checkbox.js.map +1 -0
- package/dist/components/hds/filter-bar/filter-group/date.js +164 -0
- package/dist/components/hds/filter-bar/filter-group/date.js.map +1 -0
- package/dist/components/hds/filter-bar/filter-group/generic.js +43 -0
- package/dist/components/hds/filter-bar/filter-group/generic.js.map +1 -0
- package/dist/components/hds/filter-bar/{filter-group.js → filter-group/index.js} +67 -13
- package/dist/components/hds/filter-bar/filter-group/index.js.map +1 -0
- package/dist/components/hds/filter-bar/filter-group/numerical.js +163 -0
- package/dist/components/hds/filter-bar/filter-group/numerical.js.map +1 -0
- package/dist/components/hds/filter-bar/{radio.js → filter-group/radio.js} +9 -8
- package/dist/components/hds/filter-bar/filter-group/radio.js.map +1 -0
- package/dist/components/hds/filter-bar/index.js +96 -18
- package/dist/components/hds/filter-bar/index.js.map +1 -1
- package/dist/components/hds/filter-bar/tabs/index.js +0 -1
- package/dist/components/hds/filter-bar/tabs/index.js.map +1 -1
- package/dist/components/hds/filter-bar/tabs/tab.js +1 -2
- package/dist/components/hds/filter-bar/tabs/tab.js.map +1 -1
- package/dist/components/hds/filter-bar/types.js +20 -9
- package/dist/components/hds/filter-bar/types.js.map +1 -1
- package/dist/components.js +8 -6
- package/dist/components.js.map +1 -1
- package/dist/helpers/hds-link-to-query.js +0 -1
- package/dist/helpers/hds-link-to-query.js.map +1 -1
- package/dist/styles/@hashicorp/design-system-components.css +190 -1621
- package/dist/styles/components/app-header.scss +6 -9
- package/dist/styles/components/filter-bar.scss +95 -86
- package/dist/styles/components/side-nav/header.scss +4 -12
- package/dist/styles/mixins/_interactive-dark-theme.scss +7 -4
- package/package.json +7 -5
- package/translations/hds/components/filter-bar/date/en-us.yaml +18 -0
- package/translations/hds/components/filter-bar/en-us.yaml +6 -0
- package/translations/hds/components/filter-bar/filter-group/en-us.yaml +1 -0
- package/translations/hds/components/filter-bar/filter-group/numerical/en-us.yaml +15 -0
- package/translations/hds/components/filter-bar/filters-dropdown/en-us.yaml +1 -1
- package/declarations/components/hds/filter-bar/checkbox.d.ts +0 -21
- package/declarations/components/hds/filter-bar/filter-group.d.ts +0 -46
- package/declarations/components/hds/filter-bar/radio.d.ts +0 -21
- package/declarations/components/hds/filter-bar/range.d.ts +0 -33
- package/dist/components/hds/filter-bar/checkbox.js.map +0 -1
- package/dist/components/hds/filter-bar/filter-group.js.map +0 -1
- package/dist/components/hds/filter-bar/filters-dropdown.js.map +0 -1
- package/dist/components/hds/filter-bar/radio.js.map +0 -1
- package/dist/components/hds/filter-bar/range.js +0 -88
- package/dist/components/hds/filter-bar/range.js.map +0 -1
- 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
|
-
|
|
111
|
-
|
|
112
|
-
|
|
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
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
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:
|
|
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
|
-
|
|
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-
|
|
71
|
-
|
|
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-
|
|
150
|
-
background-color: var(--token-color-surface-
|
|
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
|
-
|
|
153
|
-
|
|
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
|
-
|
|
73
|
-
.hds-side-nav
|
|
74
|
-
.hds-side-nav-header {
|
|
72
|
+
|
|
73
|
+
.hds-side-nav {
|
|
75
74
|
.hds-button,
|
|
76
|
-
|
|
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
|
-
|
|
65
|
-
|
|
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
|
-
|
|
68
|
-
|
|
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-
|
|
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/
|
|
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/
|
|
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
|
|
@@ -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
|
|
@@ -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":";;;;;;;;;;;AAAA;AACA;AACA;AACA;;AAgCe,MAAMA,2BAA2B,SAASC,SAAS,CAEhE;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,iBAAA,EAAA,CACCC,OAAO,CAAA,EAAA,YAAA;AAAA,MAAA,OAAwC,EAAE;AAAA,IAAA,CAAA,CAAA;AAAA;AAAA,EAAA,gBAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,iBAAA,CAAA,EAAAC,MAAA;AAElDC,EAAAA,WAAWA,CACTC,KAAY,EACZC,IAAkD,EAClD;AACA,IAAA,KAAK,CAACD,KAAK,EAAEC,IAAI,CAAC;IAElB,MAAM;AAAEC,MAAAA;KAAS,GAAG,IAAI,CAACD,IAAI;AAE7B,IAAA,IAAIC,OAAO,EAAE;MACX,IAAI,CAACC,eAAe,GAAG;QAAE,GAAGD;OAAS;AACvC,IAAA;AACF,EAAA;EAEQE,YAAY,GAAGC,QAAQ,CAC7B,CAACC,QAAQ,EAAE,CAACC,QAAQ,CAAoC,KAAK;AAC3D,IAAA,IAAIA,QAAQ,EAAE;MACZ,IAAI,CAACJ,eAAe,GAAGI,QAAQ;AACjC,IAAA;AACF,EAAA,CACF,CAAC;AAGDC,EAAAA,QAAQA,CAACC,GAAW,EAAEC,SAA8B,EAAQ;IAC1D,IAAI,CAACP,eAAe,GAAG,IAAI,CAACQ,aAAa,CAACF,GAAG,EAAEC,SAAS,CAAC;AAC3D,EAAA;AAAC,EAAA;IAAAE,CAAA,CAAA,IAAA,CAAAjB,SAAA,EAAA,UAAA,EAAA,CAHAkB,MAAM,CAAA,CAAA;AAAA;EAMPC,OAAOA,CAACC,aAA0B,EAAQ;IACxC,MAAM;AAAEP,MAAAA;KAAU,GAAG,IAAI,CAACP,IAAI;AAC9B,IAAA,IAAIO,QAAQ,IAAI,OAAOA,QAAQ,KAAK,UAAU,EAAE;AAC9CA,MAAAA,QAAQ,CAAC,IAAI,CAACL,eAAe,CAAC;AAChC,IAAA;AAEA,IAAA,IAAIY,aAAa,IAAI,OAAOA,aAAa,KAAK,UAAU,EAAE;AACxDA,MAAAA,aAAa,EAAE;AACjB,IAAA;AACF,EAAA;AAAC,EAAA;IAAAH,CAAA,CAAA,IAAA,CAAAjB,SAAA,EAAA,SAAA,EAAA,CAVAkB,MAAM,CAAA,CAAA;AAAA;EAaPG,OAAOA,CAACD,aAA0B,EAAQ;IACxC,MAAM;AAAEP,MAAAA;KAAU,GAAG,IAAI,CAACP,IAAI;AAC9B,IAAA,IAAI,CAACE,eAAe,GAAG,EAAE;AAEzB,IAAA,IAAIK,QAAQ,IAAI,OAAOA,QAAQ,KAAK,UAAU,EAAE;AAC9CA,MAAAA,QAAQ,CAAC,IAAI,CAACL,eAAe,CAAC;AAChC,IAAA;AAEA,IAAA,IAAIY,aAAa,IAAI,OAAOA,aAAa,KAAK,UAAU,EAAE;AACxDA,MAAAA,aAAa,EAAE;AACjB,IAAA;AACF,EAAA;AAAC,EAAA;IAAAH,CAAA,CAAA,IAAA,CAAAjB,SAAA,EAAA,SAAA,EAAA,CAZAkB,MAAM,CAAA,CAAA;AAAA;EAcP,IAAII,UAAUA,GAAW;IACvB,IAAIA,UAAU,GAAG,CAAC;IAClBC,MAAM,CAACC,IAAI,CAAC,IAAI,CAAChB,eAAe,CAAC,CAACiB,OAAO,CAAEX,GAAG,IAAK;AACjD,MAAA,MAAMY,MAAM,GAAG,IAAI,CAAClB,eAAe,CAACM,GAAG,CAAC;AACxC,MAAA,IAAIY,MAAM,EAAE;QACV,IAAIC,KAAK,CAACC,OAAO,CAACF,MAAM,CAACG,IAAI,CAAC,EAAE;AAC9BP,UAAAA,UAAU,IAAII,MAAM,CAACG,IAAI,CAACC,MAAM;AAClC,QAAA,CAAC,MAAM;AACLR,UAAAA,UAAU,IAAI,CAAC;AACjB,QAAA;AACF,MAAA;AACF,IAAA,CAAC,CAAC;AACF,IAAA,OAAOA,UAAU;AACnB,EAAA;EAEA,IAAIS,UAAUA,GAAW;AACvB,IAAA,MAAMC,OAAO,GAAG,CAAC,kCAAkC,CAAC;AAEpD,IAAA,OAAOA,OAAO,CAACC,IAAI,CAAC,GAAG,CAAC;AAC1B,EAAA;AAEQjB,EAAAA,aAAaA,CACnBF,GAAW,EACXC,SAA8B,EACT;IACrB,MAAMmB,UAAU,GAAG,EAAyB;IAE5CX,MAAM,CAACC,IAAI,CAAC,IAAI,CAAChB,eAAe,CAAC,CAACiB,OAAO,CAAEU,CAAC,IAAK;AAC/CD,MAAAA,UAAU,CAACC,CAAC,CAAC,GAAGC,IAAI,CAACC,KAAK,CACxBD,IAAI,CAACE,SAAS,CAAC,IAAI,CAAC9B,eAAe,CAAC2B,CAAC,CAAC,CACxC,CAAuB;AACzB,IAAA,CAAC,CAAC;AACF,IAAA,IACEpB,SAAS,KAAKwB,SAAS,IACtBZ,KAAK,CAACC,OAAO,CAACb,SAAS,CAAC,IAAIA,SAAS,CAACe,MAAM,KAAK,CAAE,EACpD;MACA,OAAOI,UAAU,CAACpB,GAAG,CAAC;AACxB,IAAA,CAAC,MAAM;AACLS,MAAAA,MAAM,CAACiB,MAAM,CAACN,UAAU,EAAE;AAAE,QAAA,CAACpB,GAAG,GAAGC;AAAU,OAAC,CAAC;AACjD,IAAA;IAEA,OAAO;MAAE,GAAGmB;KAAY;AAC1B,EAAA;EAEQO,QAAQ,GAAGA,MAAY;IAC7B,MAAM;AAAElC,MAAAA;KAAS,GAAG,IAAI,CAACD,IAAI;AAC7B,IAAA,IAAIC,OAAO,EAAE;MACX,IAAI,CAACC,eAAe,GAAG;QAAE,GAAGD;OAAS;AACvC,IAAA,CAAC,MAAM;AACL,MAAA,IAAI,CAACC,eAAe,GAAG,EAAE;AAC3B,IAAA;EACF,CAAC;AACH;AAACkC,oBAAA,CAAAC,QAAA,EA7GoB9C,2BAA2B,CAAA;;;;"}
|
|
@@ -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
|