@internetarchive/histogram-date-range 0.1.9 → 0.1.10-alpha.2

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 (28) hide show
  1. package/.editorconfig +29 -29
  2. package/.eslintrc.js +14 -14
  3. package/.github/workflows/ci.yml +26 -26
  4. package/LICENSE +661 -661
  5. package/README.md +104 -104
  6. package/demo/index.css +22 -22
  7. package/demo/index.html +159 -159
  8. package/dist/demo/js/app-root.d.ts +19 -19
  9. package/dist/demo/js/app-root.js +46 -46
  10. package/dist/index.d.ts +1 -1
  11. package/dist/index.js +1 -1
  12. package/dist/src/histogram-date-range.d.ts +156 -154
  13. package/dist/src/histogram-date-range.js +610 -587
  14. package/dist/src/histogram-date-range.js.map +1 -1
  15. package/dist/test/histogram-date-range.test.d.ts +1 -1
  16. package/dist/test/histogram-date-range.test.js +430 -430
  17. package/dist/test/histogram-date-range.test.js.map +1 -1
  18. package/docs/_snowpack/pkg/@internetarchive/ia-activity-indicator/ia-activity-indicator.js +163 -159
  19. package/docs/demo/index.css +22 -22
  20. package/docs/demo/index.html +159 -159
  21. package/docs/dist/src/histogram-date-range.js +29 -6
  22. package/package.json +84 -84
  23. package/snowpack.config.js +10 -10
  24. package/src/histogram-date-range.ts +31 -6
  25. package/test/histogram-date-range.test.ts +595 -595
  26. package/tsconfig.json +21 -21
  27. package/web-dev-server.config.mjs +28 -28
  28. package/web-test-runner.config.mjs +29 -29
package/docs/demo/index.html CHANGED
@@ -1,159 +1,159 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta name="viewport" content="width=device-width, initial-scale=1" />
5
- <meta charset="utf-8" />
6
- <link rel="stylesheet" href="index.css">
7
- </head>
8
-
9
- <script type="module">
10
- import '../dist/src/histogram-date-range.js';
11
- let eventCount = 0;
12
- import '../dist/demo/js/app-root.js';
13
- // listen to events from the component and display the data received from them
14
- document.addEventListener('histogramDateRangeUpdated', e => {
15
- document.querySelector('.received-events').innerHTML =
16
- ++eventCount + ': ' + JSON.stringify(e.detail);
17
- });
18
- </script>
19
- <body>
20
- <pre class="received-events"></pre>
21
- <div class="container">
22
- <div class="description">
23
- histogram inside a lit element
24
- </div>
25
- <app-root></app-root>
26
-
27
- <div class="description">
28
- pre-selected range with 1000ms debounce delay
29
- </div>
30
- <histogram-date-range
31
- minDate="1400"
32
- maxDate="2021"
33
- updateDelay="1000"
34
- minSelectedDate="1800"
35
- maxSelectedDate="1900"
36
- bins="[ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2,
37
- 13, 45, 28, 1, 8, 70, 37, 74, 67, 17, 66, 49, 93,
38
- 47, 61, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32,
39
- 32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
40
- ]"
41
- ></histogram-date-range>
42
- </div>
43
-
44
- <div class="container">
45
- <div class="description">range spanning negative to positive years</div>
46
- <histogram-date-range
47
- minDate="-1050" maxDate="2200"
48
- bins="[ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2,
49
- 13, 45, 28, 1, 8, 70, 37, 74, 67, 17, 66, 49, 93,
50
- 47, 61, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32,
51
- 32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
52
- ]"
53
- ></histogram-date-range>
54
- </div>
55
-
56
- <div class="container">
57
- <div class="description">
58
- small diff between max and min values
59
- </div>
60
- <histogram-date-range
61
- width="175"
62
- tooltipwidth="120"
63
- dateFormat="YYYY"
64
- updateDelay="1000"
65
- missingDataMessage="..."
66
- minSelectedDate="1987"
67
- maxSelectedDate="2016"
68
- minDate="1987"
69
- maxDate="2016"
70
- bins="[1519,1643,1880,2046,1973,2085,2148,2152,2349,2304,2314,2484,2590,2450,2495,2475,2392,2631,2504,2619,2519,2552,2462,2217,2171,2132,2127,2041,1638,1441]"
71
- >
72
- </histogram-date-range>
73
- </div>
74
-
75
- <div class="container">
76
- <div class="description">small year range and few bins</div>
77
- <histogram-date-range width="175" tooltipwidth="120"
78
- minDate="2008" maxDate="2016" bins="[76104,866978,1151617,986331,218672,107410,3324]">
79
- </histogram-date-range>
80
- </div>
81
-
82
- <div class="container">
83
- <div class="description">
84
- default range with custom styling and date format
85
- </div>
86
- <histogram-date-range
87
- width="300"
88
- height="50"
89
- tooltipWidth="140"
90
- dateFormat="DD MMM YYYY"
91
- style="
92
- --histogramDateRangeSliderColor: #d8b384;
93
- --histogramDateRangeSelectedRangeColor: #f3f0d7;
94
- --histogramDateRangeTooltipFontFamily: serif;
95
- --histogramDateRangeInputFontFamily: serif;
96
- --histogramDateRangeTooltipFontSize: 1rem;
97
- --histogramDateRangeInputWidth: 85px;
98
- "
99
- minDate="05 May 1972"
100
- maxDate="21 Dec 1980"
101
- bins="[ 85, 25, 200, 0, 0, 34, 0, 2, 5, 10, 0, 56, 10, 45, 100, 70, 50 ]"
102
- ></histogram-date-range>
103
- </div>
104
-
105
- <div class="container">
106
- <div class="description">loading state toggle</div>
107
- <histogram-date-range
108
- id="loading"
109
- minDate="1900"
110
- maxDate="2021"
111
- bins="[
112
- 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2, 13, 45, 67, 17, 66,
113
- 49, 93, 47, 61, 32, 32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
114
- ]"
115
- ></histogram-date-range>
116
- <button id="loading-toggle">toggle loading</button>
117
- </div>
118
- <script>
119
- document
120
- .querySelector('#loading-toggle')
121
- .addEventListener('click', () => {
122
- const histogram = document.querySelector(
123
- 'histogram-date-range#loading'
124
- );
125
- histogram.loading = !histogram.loading;
126
- });
127
- </script>
128
-
129
- <div class="container">
130
- <div class="description">data set up with js</div>
131
- <histogram-date-range id="js-setup"></histogram-date-range>
132
- </div>
133
- <script>
134
- document.addEventListener('DOMContentLoaded', function () {
135
- const histogram = document.querySelector(
136
- 'histogram-date-range#js-setup'
137
- );
138
- histogram.minDate = '1950';
139
- histogram.maxDate = '2000';
140
- // generate array of [0, 1, 2, ... 49]
141
- histogram.bins = [...Array(50).keys()];
142
- });
143
- </script>
144
-
145
- <div class="container">
146
- <div class="description">
147
- single bin
148
- </div>
149
- <histogram-date-range minDate="1926" maxDate="1926" bins="[8]">
150
- </histogram-date-range>
151
- </div>
152
-
153
- <div class="container">
154
- <div class="description">empty data</div>
155
- <histogram-date-range missingDataMessage="no data..."></histoghistogram-date-range>
156
- </div>
157
-
158
- </body>
159
- </html>
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
5
+ <meta charset="utf-8" />
6
+ <link rel="stylesheet" href="index.css">
7
+ </head>
8
+
9
+ <script type="module">
10
+ import '../dist/src/histogram-date-range.js';
11
+ let eventCount = 0;
12
+ import '../dist/demo/js/app-root.js';
13
+ // listen to events from the component and display the data received from them
14
+ document.addEventListener('histogramDateRangeUpdated', e => {
15
+ document.querySelector('.received-events').innerHTML =
16
+ ++eventCount + ': ' + JSON.stringify(e.detail);
17
+ });
18
+ </script>
19
+ <body>
20
+ <pre class="received-events"></pre>
21
+ <div class="container">
22
+ <div class="description">
23
+ histogram inside a lit element
24
+ </div>
25
+ <app-root></app-root>
26
+
27
+ <div class="description">
28
+ pre-selected range with 1000ms debounce delay
29
+ </div>
30
+ <histogram-date-range
31
+ minDate="1400"
32
+ maxDate="2021"
33
+ updateDelay="1000"
34
+ minSelectedDate="1800"
35
+ maxSelectedDate="1900"
36
+ bins="[ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2,
37
+ 13, 45, 28, 1, 8, 70, 37, 74, 67, 17, 66, 49, 93,
38
+ 47, 61, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32,
39
+ 32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
40
+ ]"
41
+ ></histogram-date-range>
42
+ </div>
43
+
44
+ <div class="container">
45
+ <div class="description">range spanning negative to positive years</div>
46
+ <histogram-date-range
47
+ minDate="-1050" maxDate="2200"
48
+ bins="[ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2,
49
+ 13, 45, 28, 1, 8, 70, 37, 74, 67, 17, 66, 49, 93,
50
+ 47, 61, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32,
51
+ 32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
52
+ ]"
53
+ ></histogram-date-range>
54
+ </div>
55
+
56
+ <div class="container">
57
+ <div class="description">
58
+ small diff between max and min values
59
+ </div>
60
+ <histogram-date-range
61
+ width="175"
62
+ tooltipwidth="120"
63
+ dateFormat="YYYY"
64
+ updateDelay="1000"
65
+ missingDataMessage="..."
66
+ minSelectedDate="1987"
67
+ maxSelectedDate="2016"
68
+ minDate="1987"
69
+ maxDate="2016"
70
+ bins="[1519,1643,1880,2046,1973,2085,2148,2152,2349,2304,2314,2484,2590,2450,2495,2475,2392,2631,2504,2619,2519,2552,2462,2217,2171,2132,2127,2041,1638,1441]"
71
+ >
72
+ </histogram-date-range>
73
+ </div>
74
+
75
+ <div class="container">
76
+ <div class="description">small year range and few bins</div>
77
+ <histogram-date-range width="175" tooltipwidth="120"
78
+ minDate="2008" maxDate="2016" bins="[76104,866978,1151617,986331,218672,107410,3324]">
79
+ </histogram-date-range>
80
+ </div>
81
+
82
+ <div class="container">
83
+ <div class="description">
84
+ default range with custom styling and date format
85
+ </div>
86
+ <histogram-date-range
87
+ width="300"
88
+ height="50"
89
+ tooltipWidth="140"
90
+ dateFormat="DD MMM YYYY"
91
+ style="
92
+ --histogramDateRangeSliderColor: #d8b384;
93
+ --histogramDateRangeSelectedRangeColor: #f3f0d7;
94
+ --histogramDateRangeTooltipFontFamily: serif;
95
+ --histogramDateRangeInputFontFamily: serif;
96
+ --histogramDateRangeTooltipFontSize: 1rem;
97
+ --histogramDateRangeInputWidth: 85px;
98
+ "
99
+ minDate="05 May 1972"
100
+ maxDate="21 Dec 1980"
101
+ bins="[ 85, 25, 200, 0, 0, 34, 0, 2, 5, 10, 0, 56, 10, 45, 100, 70, 50 ]"
102
+ ></histogram-date-range>
103
+ </div>
104
+
105
+ <div class="container">
106
+ <div class="description">loading state toggle</div>
107
+ <histogram-date-range
108
+ id="loading"
109
+ minDate="1900"
110
+ maxDate="2021"
111
+ bins="[
112
+ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2, 13, 45, 67, 17, 66,
113
+ 49, 93, 47, 61, 32, 32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
114
+ ]"
115
+ ></histogram-date-range>
116
+ <button id="loading-toggle">toggle loading</button>
117
+ </div>
118
+ <script>
119
+ document
120
+ .querySelector('#loading-toggle')
121
+ .addEventListener('click', () => {
122
+ const histogram = document.querySelector(
123
+ 'histogram-date-range#loading'
124
+ );
125
+ histogram.loading = !histogram.loading;
126
+ });
127
+ </script>
128
+
129
+ <div class="container">
130
+ <div class="description">data set up with js</div>
131
+ <histogram-date-range id="js-setup"></histogram-date-range>
132
+ </div>
133
+ <script>
134
+ document.addEventListener('DOMContentLoaded', function () {
135
+ const histogram = document.querySelector(
136
+ 'histogram-date-range#js-setup'
137
+ );
138
+ histogram.minDate = '1950';
139
+ histogram.maxDate = '2000';
140
+ // generate array of [0, 1, 2, ... 49]
141
+ histogram.bins = [...Array(50).keys()];
142
+ });
143
+ </script>
144
+
145
+ <div class="container">
146
+ <div class="description">
147
+ single bin
148
+ </div>
149
+ <histogram-date-range minDate="1926" maxDate="1926" bins="[8]">
150
+ </histogram-date-range>
151
+ </div>
152
+
153
+ <div class="container">
154
+ <div class="description">empty data</div>
155
+ <histogram-date-range missingDataMessage="no data..."></histoghistogram-date-range>
156
+ </div>
157
+
158
+ </body>
159
+ </html>
package/docs/dist/src/histogram-date-range.js CHANGED
@@ -289,13 +289,17 @@ export let HistogramDateRange = class extends LitElement {
289
289
  }
290
290
  handleMinDateInput(e) {
291
291
  const target = e.currentTarget;
292
- this.minSelectedDate = target.value;
293
- this.beginEmitUpdateProcess();
292
+ if (target.value !== this.minSelectedDate) {
293
+ this.minSelectedDate = target.value;
294
+ this.beginEmitUpdateProcess();
295
+ }
294
296
  }
295
297
  handleMaxDateInput(e) {
296
298
  const target = e.currentTarget;
297
- this.maxSelectedDate = target.value;
298
- this.beginEmitUpdateProcess();
299
+ if (target.value !== this.maxSelectedDate) {
300
+ this.maxSelectedDate = target.value;
301
+ this.beginEmitUpdateProcess();
302
+ }
299
303
  }
300
304
  handleKeyUp(e) {
301
305
  if (e.key === "Enter") {
@@ -458,6 +462,12 @@ export let HistogramDateRange = class extends LitElement {
458
462
  />
459
463
  `;
460
464
  }
465
+ get minLabelTemplate() {
466
+ return html`<label for="date-min" class="sr-only">Minimum date:</label>`;
467
+ }
468
+ get maxLabelTemplate() {
469
+ return html`<label for="date-max" class="sr-only">Maximum date:</label>`;
470
+ }
461
471
  get tooltipTemplate() {
462
472
  return html`
463
473
  <style>
@@ -516,9 +526,9 @@ export let HistogramDateRange = class extends LitElement {
516
526
  ${this.minSliderTemplate} ${this.maxSliderTemplate}
517
527
  </svg>
518
528
  <div id="inputs">
519
- ${this.minInputTemplate}
529
+ ${this.minLabelTemplate} ${this.minInputTemplate}
520
530
  <div class="dash">-</div>
521
- ${this.maxInputTemplate}
531
+ ${this.maxLabelTemplate} ${this.maxInputTemplate}
522
532
  </div>
523
533
  </div>
524
534
  </div>
@@ -621,6 +631,19 @@ HistogramDateRange.styles = css`
621
631
  font-size: ${inputFontSize};
622
632
  font-family: ${inputFontFamily};
623
633
  }
634
+ .sr-only {
635
+ position: absolute !important;
636
+ width: 1px !important;
637
+ height: 1px !important;
638
+ margin: 0 !important;
639
+ padding: 0 !important;
640
+ border: 0 !important;
641
+ overflow: hidden !important;
642
+ white-space: nowrap !important;
643
+ clip: rect(1px, 1px, 1px, 1px) !important;
644
+ -webkit-clip-path: inset(50%) !important;
645
+ clip-path: inset(50%) !important;
646
+ }
624
647
  `;
625
648
  __decorate([
626
649
  property({type: Number})
package/package.json CHANGED
@@ -1,84 +1,84 @@
1
- {
2
- "name": "@internetarchive/histogram-date-range",
3
- "version": "0.1.9",
4
- "description": "Internet Archive histogram date range picker",
5
- "license": "AGPL-3.0-only",
6
- "main": "dist/index.js",
7
- "module": "dist/index.js",
8
- "types": "dist/index.d.ts",
9
- "publishConfig": {
10
- "access": "public"
11
- },
12
- "scripts": {
13
- "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
14
- "build": "snowpack build && touch docs/.nojekyll",
15
- "prepublish": "tsc",
16
- "prepare": "npm run build",
17
- "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
18
- "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
19
- "test": "tsc && wtr --coverage",
20
- "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
21
- },
22
- "dependencies": {
23
- "@internetarchive/ia-activity-indicator": "^0.0.3",
24
- "dayjs": "^1.10.7",
25
- "lit": "^2.2.7"
26
- },
27
- "devDependencies": {
28
- "@open-wc/eslint-config": "^7.0.0",
29
- "@open-wc/testing": "^3.0.3",
30
- "@typescript-eslint/eslint-plugin": "^5.10.0",
31
- "@typescript-eslint/parser": "^5.10.0",
32
- "@web/dev-server": "^0.1.29",
33
- "@web/test-runner": "^0.13.25",
34
- "concurrently": "^7.0.0",
35
- "eslint": "^8.7.0",
36
- "eslint-config-prettier": "^8.3.0",
37
- "husky": "^4.3.8",
38
- "lint-staged": "^12.2.2",
39
- "lit-html": "^2.1.1",
40
- "prettier": "^2.5.1",
41
- "snowpack": "^3.8.8",
42
- "tslib": "^2.3.1",
43
- "typescript": "^4.5"
44
- },
45
- "eslintConfig": {
46
- "parser": "@typescript-eslint/parser",
47
- "extends": [
48
- "@open-wc/eslint-config",
49
- "eslint-config-prettier"
50
- ],
51
- "plugins": [
52
- "@typescript-eslint"
53
- ],
54
- "rules": {
55
- "no-unused-vars": "off",
56
- "@typescript-eslint/no-unused-vars": [
57
- "error"
58
- ],
59
- "import/no-unresolved": "off",
60
- "import/extensions": [
61
- "error",
62
- "always",
63
- {
64
- "ignorePackages": true
65
- }
66
- ]
67
- }
68
- },
69
- "prettier": {
70
- "singleQuote": true,
71
- "arrowParens": "avoid"
72
- },
73
- "husky": {
74
- "hooks": {
75
- "pre-commit": "lint-staged"
76
- }
77
- },
78
- "lint-staged": {
79
- "*.ts": [
80
- "eslint --fix",
81
- "prettier --write"
82
- ]
83
- }
84
- }
1
+ {
2
+ "name": "@internetarchive/histogram-date-range",
3
+ "version": "0.1.10-alpha.2",
4
+ "description": "Internet Archive histogram date range picker",
5
+ "license": "AGPL-3.0-only",
6
+ "main": "dist/index.js",
7
+ "module": "dist/index.js",
8
+ "types": "dist/index.d.ts",
9
+ "publishConfig": {
10
+ "access": "public"
11
+ },
12
+ "scripts": {
13
+ "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
14
+ "build": "snowpack build && touch docs/.nojekyll",
15
+ "prepublish": "tsc",
16
+ "prepare": "npm run build",
17
+ "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
18
+ "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
19
+ "test": "tsc && wtr --coverage",
20
+ "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
21
+ },
22
+ "dependencies": {
23
+ "@internetarchive/ia-activity-indicator": "^0.0.4",
24
+ "dayjs": "^1.10.7",
25
+ "lit": "^2.2.7"
26
+ },
27
+ "devDependencies": {
28
+ "@open-wc/eslint-config": "^7.0.0",
29
+ "@open-wc/testing": "^3.0.3",
30
+ "@typescript-eslint/eslint-plugin": "^5.10.0",
31
+ "@typescript-eslint/parser": "^5.10.0",
32
+ "@web/dev-server": "^0.1.29",
33
+ "@web/test-runner": "^0.13.25",
34
+ "concurrently": "^7.0.0",
35
+ "eslint": "^8.7.0",
36
+ "eslint-config-prettier": "^8.3.0",
37
+ "husky": "^4.3.8",
38
+ "lint-staged": "^12.2.2",
39
+ "lit-html": "^2.1.1",
40
+ "prettier": "^2.5.1",
41
+ "snowpack": "^3.8.8",
42
+ "tslib": "^2.3.1",
43
+ "typescript": "^4.5"
44
+ },
45
+ "eslintConfig": {
46
+ "parser": "@typescript-eslint/parser",
47
+ "extends": [
48
+ "@open-wc/eslint-config",
49
+ "eslint-config-prettier"
50
+ ],
51
+ "plugins": [
52
+ "@typescript-eslint"
53
+ ],
54
+ "rules": {
55
+ "no-unused-vars": "off",
56
+ "@typescript-eslint/no-unused-vars": [
57
+ "error"
58
+ ],
59
+ "import/no-unresolved": "off",
60
+ "import/extensions": [
61
+ "error",
62
+ "always",
63
+ {
64
+ "ignorePackages": true
65
+ }
66
+ ]
67
+ }
68
+ },
69
+ "prettier": {
70
+ "singleQuote": true,
71
+ "arrowParens": "avoid"
72
+ },
73
+ "husky": {
74
+ "hooks": {
75
+ "pre-commit": "lint-staged"
76
+ }
77
+ },
78
+ "lint-staged": {
79
+ "*.ts": [
80
+ "eslint --fix",
81
+ "prettier --write"
82
+ ]
83
+ }
84
+ }
package/snowpack.config.js CHANGED
@@ -1,10 +1,10 @@
1
- module.exports = {
2
- buildOptions: {
3
- out: 'docs',
4
- },
5
- mount: {
6
- 'demo/js': { url: '/dist/demo/js' },
7
- demo: { url: '/demo' },
8
- src: { url: '/dist/src' },
9
- },
10
- };
1
+ module.exports = {
2
+ buildOptions: {
3
+ out: 'docs',
4
+ },
5
+ mount: {
6
+ 'demo/js': { url: '/dist/demo/js' },
7
+ demo: { url: '/demo' },
8
+ src: { url: '/dist/src' },
9
+ },
10
+ };
package/src/histogram-date-range.ts CHANGED
@@ -467,14 +467,18 @@ export class HistogramDateRange extends LitElement {
467
467
 
468
468
  private handleMinDateInput(e: Event): void {
469
469
  const target = e.currentTarget as HTMLInputElement;
470
- this.minSelectedDate = target.value;
471
- this.beginEmitUpdateProcess();
470
+ if (target.value !== this.minSelectedDate) {
471
+ this.minSelectedDate = target.value;
472
+ this.beginEmitUpdateProcess();
473
+ }
472
474
  }
473
475
 
474
476
  private handleMaxDateInput(e: Event): void {
475
477
  const target = e.currentTarget as HTMLInputElement;
476
- this.maxSelectedDate = target.value;
477
- this.beginEmitUpdateProcess();
478
+ if (target.value !== this.maxSelectedDate) {
479
+ this.maxSelectedDate = target.value;
480
+ this.beginEmitUpdateProcess();
481
+ }
478
482
  }
479
483
 
480
484
  private handleKeyUp(e: KeyboardEvent): void {
@@ -705,6 +709,14 @@ export class HistogramDateRange extends LitElement {
705
709
  `;
706
710
  }
707
711
 
712
+ get minLabelTemplate(): TemplateResult {
713
+ return html`<label for="date-min" class="sr-only">Minimum date:</label>`;
714
+ }
715
+
716
+ get maxLabelTemplate(): TemplateResult {
717
+ return html`<label for="date-max" class="sr-only">Maximum date:</label>`;
718
+ }
719
+
708
720
  get tooltipTemplate(): TemplateResult {
709
721
  return html`
710
722
  <style>
@@ -834,6 +846,19 @@ export class HistogramDateRange extends LitElement {
834
846
  font-size: ${inputFontSize};
835
847
  font-family: ${inputFontFamily};
836
848
  }
849
+ .sr-only {
850
+ position: absolute !important;
851
+ width: 1px !important;
852
+ height: 1px !important;
853
+ margin: 0 !important;
854
+ padding: 0 !important;
855
+ border: 0 !important;
856
+ overflow: hidden !important;
857
+ white-space: nowrap !important;
858
+ clip: rect(1px, 1px, 1px, 1px) !important;
859
+ -webkit-clip-path: inset(50%) !important;
860
+ clip-path: inset(50%) !important;
861
+ }
837
862
  `;
838
863
 
839
864
  render(): TemplateResult {
@@ -864,9 +889,9 @@ export class HistogramDateRange extends LitElement {
864
889
  ${this.minSliderTemplate} ${this.maxSliderTemplate}
865
890
  </svg>
866
891
  <div id="inputs">
867
- ${this.minInputTemplate}
892
+ ${this.minLabelTemplate} ${this.minInputTemplate}
868
893
  <div class="dash">-</div>
869
- ${this.maxInputTemplate}
894
+ ${this.maxLabelTemplate} ${this.maxInputTemplate}
870
895
  </div>
871
896
  </div>
872
897
  </div>