@internetarchive/histogram-date-range 0.0.11-beta → 0.1.2-alpha

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 (25) hide show
  1. package/demo/index.css +23 -0
  2. package/demo/index.html +51 -42
  3. package/dist/src/histogram-date-range.d.ts +22 -13
  4. package/dist/src/histogram-date-range.js +134 -70
  5. package/dist/src/histogram-date-range.js.map +1 -1
  6. package/dist/test/histogram-date-range.test.js +130 -34
  7. package/dist/test/histogram-date-range.test.js.map +1 -1
  8. package/docs/_snowpack/pkg/@internetarchive/ia-activity-indicator/ia-activity-indicator.js +9 -2534
  9. package/docs/_snowpack/pkg/common/lit-element-3254fb50.js +22 -0
  10. package/docs/_snowpack/pkg/common/lit-html-1d707ff6.js +8 -0
  11. package/docs/_snowpack/pkg/dayjs/esm/index.js +3 -3
  12. package/docs/_snowpack/pkg/dayjs/esm/plugin/customParseFormat.js +342 -0
  13. package/docs/_snowpack/pkg/import-map.json +1 -0
  14. package/docs/_snowpack/pkg/lit/decorators.js +8 -2
  15. package/docs/_snowpack/pkg/lit/directives/live.js +4 -4
  16. package/docs/_snowpack/pkg/lit.js +2 -23
  17. package/docs/demo/index.css +23 -0
  18. package/docs/demo/index.html +51 -42
  19. package/docs/dist/src/histogram-date-range.js +95 -51
  20. package/package.json +21 -20
  21. package/src/histogram-date-range.ts +176 -76
  22. package/test/histogram-date-range.test.ts +172 -38
  23. package/docs/_snowpack/env.js +0 -3
  24. package/docs/_snowpack/pkg/common/lit-html-e67c9f49.js +0 -8
  25. package/types/static.d.ts +0 -4
package/docs/demo/index.html CHANGED
@@ -3,49 +3,29 @@
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1" />
5
5
  <meta charset="utf-8" />
6
- <style>
7
- html {
8
- font-size: 10px;
9
- font-family: sans-serif;
10
- }
11
- body {
12
- background: white;
13
- }
14
- .container {
15
- margin-top: 50px;
16
- display: grid;
17
- justify-content: center;
18
- }
19
- .description {
20
- margin: 10px auto;
21
- }
22
- .received-events {
23
- position: absolute;
24
- top: 0;
25
- }
26
- button {
27
- font-size: 100%;
28
- margin: 10px auto;
29
- }
30
- </style>
6
+ <link rel="stylesheet" href="index.css">
31
7
  </head>
32
8
 
33
9
  <script type="module">
34
10
  import '../dist/src/histogram-date-range.js';
11
+ let eventCount = 0;
35
12
  // listen to events from the component and display the data received from them
36
13
  document.addEventListener('histogramDateRangeUpdated', e => {
37
- document.querySelector('.received-events').innerHTML +=
38
- '\n' + JSON.stringify(e.detail);
14
+ document.querySelector('.received-events').innerHTML =
15
+ ++eventCount + ': ' + JSON.stringify(e.detail);
39
16
  });
40
17
  </script>
41
18
  <body>
42
19
  <pre class="received-events"></pre>
43
20
 
44
21
  <div class="container">
45
- <div class="description">pre-selected range with default date format</div>
22
+ <div class="description">
23
+ pre-selected range with 1000ms debounce delay
24
+ </div>
46
25
  <histogram-date-range
47
26
  minDate="1400"
48
27
  maxDate="2021"
28
+ updateDelay="1000"
49
29
  minSelectedDate="1800"
50
30
  maxSelectedDate="1900"
51
31
  bins="[ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2,
@@ -57,19 +37,45 @@
57
37
  </div>
58
38
 
59
39
  <div class="container">
60
- <div class="description">default range with custom date format</div>
40
+ <div class="description">range spanning negative to positive years</div>
41
+ <histogram-date-range
42
+ mindate="-1050" maxdate="2200"
43
+ bins="[ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2,
44
+ 13, 45, 28, 1, 8, 70, 37, 74, 67, 17, 66, 49, 93,
45
+ 47, 61, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32,
46
+ 32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
47
+ ]"
48
+ ></histogram-date-range>
49
+ </div>
50
+
51
+
52
+
53
+ <div class="container">
54
+ <div class="description">small year range and few bins</div>
55
+ <histogram-date-range width="175" tooltipwidth="120"
56
+ mindate="2008" maxdate="2016" bins="[76104,866978,1151617,986331,218672,107410,3324]">
57
+ </histogram-date-range>
58
+ </div>
59
+
60
+ <div class="container">
61
+ <div class="description">
62
+ default range with custom styling and date format
63
+ </div>
61
64
  <histogram-date-range
62
65
  width="300"
63
66
  height="50"
64
67
  tooltipWidth="140"
65
- updateDelay="2000"
66
68
  dateFormat="DD MMM YYYY"
67
69
  style="
70
+ --histogramDateRangeSliderColor: #d8b384;
71
+ --histogramDateRangeSelectedRangeColor: #f3f0d7;
72
+ --histogramDateRangeTooltipFontFamily: serif;
73
+ --histogramDateRangeInputFontFamily: serif;
68
74
  --histogramDateRangeTooltipFontSize: 1rem;
69
75
  --histogramDateRangeInputWidth: 85px;
70
76
  "
71
- minDate="May 1, 1972"
72
- maxDate="12/21/1980"
77
+ minDate="05 May 1972"
78
+ maxDate="21 Dec 1980"
73
79
  bins="[ 85, 25, 200, 0, 0, 34, 0, 2, 5, 10, 0, 56, 10, 45, 100, 70, 50 ]"
74
80
  ></histogram-date-range>
75
81
  </div>
@@ -99,11 +105,8 @@
99
105
  </script>
100
106
 
101
107
  <div class="container">
102
- <div class="description">data set up with js; no debounce delay</div>
103
- <histogram-date-range
104
- id="js-setup"
105
- updateDelay="0"
106
- ></histogram-date-range>
108
+ <div class="description">data set up with js</div>
109
+ <histogram-date-range id="js-setup"></histogram-date-range>
107
110
  </div>
108
111
  <script>
109
112
  document.addEventListener('DOMContentLoaded', function () {
@@ -112,17 +115,23 @@
112
115
  );
113
116
  histogram.minDate = '1950';
114
117
  histogram.maxDate = '2000';
115
- // generate an array like [0, 1, 2, ... 49]
118
+ // generate array of [0, 1, 2, ... 49]
116
119
  histogram.bins = [...Array(50).keys()];
117
120
  });
118
121
  </script>
119
122
 
123
+ <div class="container">
124
+ <div class="description">
125
+ single bin
126
+ </div>
127
+ <histogram-date-range mindate="1926" maxdate="1926" bins="[8]">
128
+ </histogram-date-range>
129
+ </div>
130
+
120
131
  <div class="container">
121
132
  <div class="description">empty data</div>
122
- <histogram-date-range
123
- bins=""
124
- missingDataMessage="no data..."
125
- ></histogram-date-range>
133
+ <histogram-date-range missingDataMessage="no data..."></histoghistogram-date-range>
126
134
  </div>
135
+
127
136
  </body>
128
137
  </html>
package/docs/dist/src/histogram-date-range.js CHANGED
@@ -12,12 +12,15 @@ var __decorate = (decorators, target, key, kind) => {
12
12
  import {
13
13
  css,
14
14
  html,
15
+ nothing,
15
16
  LitElement,
16
17
  svg
17
18
  } from "../../_snowpack/pkg/lit.js";
18
19
  import {property, state, customElement} from "../../_snowpack/pkg/lit/decorators.js";
19
20
  import {live} from "../../_snowpack/pkg/lit/directives/live.js";
20
21
  import dayjs from "../../_snowpack/pkg/dayjs/esm/index.js";
22
+ import customParseFormat from "../../_snowpack/pkg/dayjs/esm/plugin/customParseFormat.js";
23
+ dayjs.extend(customParseFormat);
21
24
  import "../../_snowpack/pkg/@internetarchive/ia-activity-indicator/ia-activity-indicator.js";
22
25
  const WIDTH = 180;
23
26
  const HEIGHT = 40;
@@ -26,19 +29,21 @@ const TOOLTIP_WIDTH = 125;
26
29
  const TOOLTIP_HEIGHT = 30;
27
30
  const DATE_FORMAT = "YYYY";
28
31
  const MISSING_DATA = "no data";
29
- const UPDATE_DEBOUNCE_DELAY_MS = 1e3;
32
+ const UPDATE_DEBOUNCE_DELAY_MS = 0;
30
33
  const SLIDER_CORNER_SIZE = 4;
31
- const sliderFill = css`var(--histogramDateRangeSliderFill, #4B65FE)`;
32
- const selectedRangeFill = css`var(--histogramDateRangeSelectedRangeFill, #DBE0FF)`;
34
+ const sliderColor = css`var(--histogramDateRangeSliderColor, #4B65FE)`;
35
+ const selectedRangeColor = css`var(--histogramDateRangeSelectedRangeColor, #DBE0FF)`;
33
36
  const barIncludedFill = css`var(--histogramDateRangeBarIncludedFill, #2C2C2C)`;
34
37
  const activityIndicatorColor = css`var(--histogramDateRangeActivityIndicator, #2C2C2C)`;
35
38
  const barExcludedFill = css`var(--histogramDateRangeBarExcludedFill, #CCCCCC)`;
36
39
  const inputBorder = css`var(--histogramDateRangeInputBorder, 0.5px solid #2C2C2C)`;
37
40
  const inputWidth = css`var(--histogramDateRangeInputWidth, 35px)`;
38
41
  const inputFontSize = css`var(--histogramDateRangeInputFontSize, 1.2rem)`;
42
+ const inputFontFamily = css`var(--histogramDateRangeInputFontFamily, sans-serif)`;
39
43
  const tooltipBackgroundColor = css`var(--histogramDateRangeTooltipBackgroundColor, #2C2C2C)`;
40
44
  const tooltipTextColor = css`var(--histogramDateRangeTooltipTextColor, #FFFFFF)`;
41
45
  const tooltipFontSize = css`var(--histogramDateRangeTooltipFontSize, 1.1rem)`;
46
+ const tooltipFontFamily = css`var(--histogramDateRangeTooltipFontFamily, sans-serif)`;
42
47
  export let HistogramDateRange = class extends LitElement {
43
48
  constructor() {
44
49
  super(...arguments);
@@ -87,11 +92,10 @@ export let HistogramDateRange = class extends LitElement {
87
92
  this.move = (e) => {
88
93
  const newX = e.offsetX - this._dragOffset;
89
94
  const slider = this._currentSlider;
90
- const date = this.translatePositionToDate(newX);
91
95
  if (slider.id === "slider-min") {
92
- this.minSelectedDate = date;
96
+ this.minSelectedDate = this.translatePositionToDate(this.validMinSliderX(newX));
93
97
  } else {
94
- this.maxSelectedDate = date;
98
+ this.maxSelectedDate = this.translatePositionToDate(this.validMaxSliderX(newX));
95
99
  }
96
100
  };
97
101
  }
@@ -100,7 +104,7 @@ export let HistogramDateRange = class extends LitElement {
100
104
  super.disconnectedCallback();
101
105
  }
102
106
  updated(changedProps) {
103
- if (changedProps.has("bins") || changedProps.has("Date")) {
107
+ if (changedProps.has("bins") || changedProps.has("minDate") || changedProps.has("maxDate") || changedProps.has("minSelectedDate") || changedProps.has("maxSelectedDate")) {
104
108
  this.handleDataUpdate();
105
109
  }
106
110
  }
@@ -109,8 +113,8 @@ export let HistogramDateRange = class extends LitElement {
109
113
  return;
110
114
  }
111
115
  this._histWidth = this.width - this.sliderWidth * 2;
112
- this._minDateMS = dayjs(this.minDate).valueOf();
113
- this._maxDateMS = dayjs(this.maxDate).valueOf();
116
+ this._minDateMS = this.getMSFromString(this.minDate);
117
+ this._maxDateMS = this.getMSFromString(this.maxDate);
114
118
  this._binWidth = this._histWidth / this._numBins;
115
119
  this._previousDateRange = this.currentDateRangeString;
116
120
  this._histData = this.calculateHistData();
@@ -121,7 +125,8 @@ export let HistogramDateRange = class extends LitElement {
121
125
  calculateHistData() {
122
126
  const minValue = Math.min(...this.bins);
123
127
  const maxValue = Math.max(...this.bins);
124
- const valueScale = this.height / Math.log1p(maxValue - minValue);
128
+ const valueRange = minValue === maxValue ? 1 : Math.log1p(maxValue - minValue);
129
+ const valueScale = this.height / valueRange;
125
130
  const dateScale = this.dateRangeMS / this._numBins;
126
131
  return this.bins.map((v, i) => {
127
132
  return {
@@ -141,6 +146,12 @@ export let HistogramDateRange = class extends LitElement {
141
146
  }
142
147
  return this.bins.length;
143
148
  }
149
+ get histogramLeftEdgeX() {
150
+ return this.sliderWidth;
151
+ }
152
+ get histogramRightEdgeX() {
153
+ return this.width - this.sliderWidth;
154
+ }
144
155
  get loading() {
145
156
  return this._isLoading;
146
157
  }
@@ -149,38 +160,44 @@ export let HistogramDateRange = class extends LitElement {
149
160
  this._isLoading = value;
150
161
  }
151
162
  get minSelectedDate() {
152
- return this.formatDate(this._minSelectedDate);
163
+ return this.formatDate(this.getMSFromString(this._minSelectedDate));
153
164
  }
154
165
  set minSelectedDate(rawDate) {
155
166
  if (!this._minSelectedDate) {
156
167
  this._minSelectedDate = rawDate;
168
+ return;
157
169
  }
158
- const x = this.translateDateToPosition(rawDate);
159
- if (x) {
160
- const validX = this.validMinSliderX(x);
161
- this._minSelectedDate = this.translatePositionToDate(validX);
170
+ const proposedDateMS = this.getMSFromString(rawDate);
171
+ const isValidDate = !Number.isNaN(proposedDateMS);
172
+ const isNotTooRecent = proposedDateMS <= this.getMSFromString(this.maxSelectedDate);
173
+ if (isValidDate && isNotTooRecent) {
174
+ this._minSelectedDate = this.formatDate(proposedDateMS);
162
175
  }
163
176
  this.requestUpdate();
164
177
  }
165
178
  get maxSelectedDate() {
166
- return this.formatDate(this._maxSelectedDate);
179
+ return this.formatDate(this.getMSFromString(this._maxSelectedDate));
167
180
  }
168
181
  set maxSelectedDate(rawDate) {
169
182
  if (!this._maxSelectedDate) {
170
183
  this._maxSelectedDate = rawDate;
184
+ return;
171
185
  }
172
- const x = this.translateDateToPosition(rawDate);
173
- if (x) {
174
- const validX = this.validMaxSliderX(x);
175
- this._maxSelectedDate = this.translatePositionToDate(validX);
186
+ const proposedDateMS = this.getMSFromString(rawDate);
187
+ const isValidDate = !Number.isNaN(proposedDateMS);
188
+ const isNotTooOld = proposedDateMS >= this.getMSFromString(this.minSelectedDate);
189
+ if (isValidDate && isNotTooOld) {
190
+ this._maxSelectedDate = this.formatDate(proposedDateMS);
176
191
  }
177
192
  this.requestUpdate();
178
193
  }
179
194
  get minSliderX() {
180
- return this.translateDateToPosition(this.minSelectedDate) ?? this.sliderWidth;
195
+ const x = this.translateDateToPosition(this.minSelectedDate);
196
+ return this.validMinSliderX(x);
181
197
  }
182
198
  get maxSliderX() {
183
- return this.translateDateToPosition(this.maxSelectedDate) ?? this.width - this.sliderWidth;
199
+ const x = this.translateDateToPosition(this.maxSelectedDate);
200
+ return this.validMaxSliderX(x);
184
201
  }
185
202
  get dateRangeMS() {
186
203
  return this._maxDateMS - this._minDateMS;
@@ -193,9 +210,10 @@ export let HistogramDateRange = class extends LitElement {
193
210
  const x = target.x.baseVal.value + this.sliderWidth / 2;
194
211
  const dataset = target.dataset;
195
212
  const itemsText = `item${dataset.numItems !== "1" ? "s" : ""}`;
213
+ const formattedNumItems = Number(dataset.numItems).toLocaleString();
196
214
  this._tooltipOffset = x + (this._binWidth - this.sliderWidth - this.tooltipWidth) / 2;
197
215
  this._tooltipContent = html`
198
- ${dataset.numItems} ${itemsText}<br />
216
+ ${formattedNumItems} ${itemsText}<br />
199
217
  ${dataset.binStart} - ${dataset.binEnd}
200
218
  `;
201
219
  this._tooltipVisible = true;
@@ -205,12 +223,16 @@ export let HistogramDateRange = class extends LitElement {
205
223
  this._tooltipVisible = false;
206
224
  }
207
225
  validMinSliderX(newX) {
208
- const validX = Math.max(newX, this.sliderWidth);
209
- return Math.min(validX, this.maxSliderX);
226
+ const rightLimit = Math.min(this.translateDateToPosition(this.maxSelectedDate), this.histogramRightEdgeX);
227
+ newX = this.clamp(newX, this.histogramLeftEdgeX, rightLimit);
228
+ const isInvalid = Number.isNaN(newX) || rightLimit < this.histogramLeftEdgeX;
229
+ return isInvalid ? this.histogramLeftEdgeX : newX;
210
230
  }
211
231
  validMaxSliderX(newX) {
212
- const validX = Math.max(newX, this.minSliderX);
213
- return Math.min(validX, this.width - this.sliderWidth);
232
+ const leftLimit = Math.max(this.histogramLeftEdgeX, this.translateDateToPosition(this.minSelectedDate));
233
+ newX = this.clamp(newX, leftLimit, this.histogramRightEdgeX);
234
+ const isInvalid = Number.isNaN(newX) || leftLimit > this.histogramRightEdgeX;
235
+ return isInvalid ? this.histogramRightEdgeX : newX;
214
236
  }
215
237
  addListeners() {
216
238
  window.addEventListener("pointermove", this.move);
@@ -260,9 +282,11 @@ export let HistogramDateRange = class extends LitElement {
260
282
  return this.formatDate(this._minDateMS + milliseconds);
261
283
  }
262
284
  translateDateToPosition(date) {
263
- const milliseconds = dayjs(date).valueOf();
264
- const xPosition = this.sliderWidth + (milliseconds - this._minDateMS) * this._histWidth / this.dateRangeMS;
265
- return isNaN(milliseconds) || isNaN(xPosition) ? null : xPosition;
285
+ const milliseconds = this.getMSFromString(date);
286
+ return this.sliderWidth + (milliseconds - this._minDateMS) * this._histWidth / this.dateRangeMS;
287
+ }
288
+ clamp(x, minValue, maxValue) {
289
+ return Math.min(Math.max(x, minValue), maxValue);
266
290
  }
267
291
  handleMinDateInput(e) {
268
292
  const target = e.currentTarget;
@@ -274,24 +298,33 @@ export let HistogramDateRange = class extends LitElement {
274
298
  this.maxSelectedDate = target.value;
275
299
  this.beginEmitUpdateProcess();
276
300
  }
301
+ handleKeyUp(e) {
302
+ if (e.key === "Enter") {
303
+ const target = e.currentTarget;
304
+ target.blur();
305
+ }
306
+ }
277
307
  get currentDateRangeString() {
278
308
  return `${this.minSelectedDate}:${this.maxSelectedDate}`;
279
309
  }
280
- get minSelectedDateMS() {
281
- return dayjs(this.minSelectedDate).valueOf();
282
- }
283
- get maxSelectedDateMS() {
284
- return dayjs(this.maxSelectedDate).valueOf();
310
+ getMSFromString(date) {
311
+ const digitGroupCount = (date.split(/(\d+)/).length - 1) / 2;
312
+ if (digitGroupCount === 1) {
313
+ const dateObj = new Date(0, 0);
314
+ dateObj.setFullYear(Number(date));
315
+ return dateObj.getTime();
316
+ }
317
+ return dayjs(date, [this.dateFormat, DATE_FORMAT]).valueOf();
285
318
  }
286
319
  handleBarClick(e) {
287
320
  const dataset = e.currentTarget.dataset;
288
- const binStartDateMS = dayjs(dataset.binStart).valueOf();
289
- if (binStartDateMS < this.minSelectedDateMS) {
290
- this.minSelectedDate = dataset.binStart ?? "";
291
- }
292
- const binEndDateMS = dayjs(dataset.binEnd).valueOf();
293
- if (binEndDateMS > this.maxSelectedDateMS) {
294
- this.maxSelectedDate = dataset.binEnd ?? "";
321
+ const clickPosition = (this.getMSFromString(dataset.binStart) + this.getMSFromString(dataset.binEnd)) / 2;
322
+ const distanceFromMinSlider = Math.abs(clickPosition - this.getMSFromString(this.minSelectedDate));
323
+ const distanceFromMaxSlider = Math.abs(clickPosition - this.getMSFromString(this.maxSelectedDate));
324
+ if (distanceFromMinSlider < distanceFromMaxSlider) {
325
+ this.minSelectedDate = dataset.binStart;
326
+ } else {
327
+ this.maxSelectedDate = dataset.binEnd;
295
328
  }
296
329
  this.beginEmitUpdateProcess();
297
330
  }
@@ -324,10 +357,12 @@ export let HistogramDateRange = class extends LitElement {
324
357
  return svg`
325
358
  <svg
326
359
  id="${id}"
327
- class="draggable ${this._isDragging ? "dragging" : ""}"
360
+ class="
361
+ ${this.disabled ? "" : "draggable"}
362
+ ${this._isDragging ? "dragging" : ""}"
328
363
  @pointerdown="${this.drag}"
329
364
  >
330
- <path d="${sliderShape} z" fill="${sliderFill}" />
365
+ <path d="${sliderShape} z" fill="${sliderColor}" />
331
366
  <rect
332
367
  x="${sliderPositionX - this.sliderWidth * k + this.sliderWidth * 0.4 * k}"
333
368
  y="${this.height / 3}"
@@ -352,7 +387,7 @@ export let HistogramDateRange = class extends LitElement {
352
387
  y="0"
353
388
  width="${this.maxSliderX - this.minSliderX}"
354
389
  height="${this.height}"
355
- fill="${selectedRangeFill}"
390
+ fill="${selectedRangeColor}"
356
391
  />`;
357
392
  }
358
393
  get histogramTemplate() {
@@ -371,7 +406,7 @@ export let HistogramDateRange = class extends LitElement {
371
406
  @pointerenter="${this.showTooltip}"
372
407
  @pointerleave="${this.hideTooltip}"
373
408
  @click="${this.handleBarClick}"
374
- fill="${x >= this.minSliderX && x <= this.maxSliderX ? barIncludedFill : barExcludedFill}"
409
+ fill="${x + barWidth >= this.minSliderX && x <= this.maxSliderX ? barIncludedFill : barExcludedFill}"
375
410
  data-num-items="${data.value}"
376
411
  data-bin-start="${data.binStart}"
377
412
  data-bin-end="${data.binEnd}"
@@ -380,9 +415,15 @@ export let HistogramDateRange = class extends LitElement {
380
415
  return bar;
381
416
  });
382
417
  }
383
- formatDate(rawDate) {
384
- const date = dayjs(rawDate);
385
- return date.isValid() ? date.format(this.dateFormat) : "";
418
+ formatDate(dateMS) {
419
+ if (Number.isNaN(dateMS)) {
420
+ return "";
421
+ }
422
+ const date = dayjs(dateMS);
423
+ if (date.year() < 1e3) {
424
+ return String(date.year());
425
+ }
426
+ return date.format(this.dateFormat);
386
427
  }
387
428
  get minInputTemplate() {
388
429
  return html`
@@ -392,6 +433,7 @@ export let HistogramDateRange = class extends LitElement {
392
433
  type="text"
393
434
  @focus="${this.cancelPendingUpdateEvent}"
394
435
  @blur="${this.handleMinDateInput}"
436
+ @keyup="${this.handleKeyUp}"
395
437
  .value="${live(this.minSelectedDate)}"
396
438
  ?disabled="${this.disabled}"
397
439
  />
@@ -405,6 +447,7 @@ export let HistogramDateRange = class extends LitElement {
405
447
  type="text"
406
448
  @focus="${this.cancelPendingUpdateEvent}"
407
449
  @blur="${this.handleMaxDateInput}"
450
+ @keyup="${this.handleKeyUp}"
408
451
  .value="${live(this.maxSelectedDate)}"
409
452
  ?disabled="${this.disabled}"
410
453
  />
@@ -434,7 +477,7 @@ export let HistogramDateRange = class extends LitElement {
434
477
  }
435
478
  get activityIndicatorTemplate() {
436
479
  if (!this.loading) {
437
- return html``;
480
+ return nothing;
438
481
  }
439
482
  return html`
440
483
  <ia-activity-indicator mode="processing"> </ia-activity-indicator>
@@ -534,7 +577,7 @@ HistogramDateRange.styles = css`
534
577
  border-radius: 3px;
535
578
  padding: 2px;
536
579
  font-size: ${tooltipFontSize};
537
- font-family: sans-serif;
580
+ font-family: ${tooltipFontFamily};
538
581
  touch-action: none;
539
582
  pointer-events: none;
540
583
  }
@@ -571,6 +614,7 @@ HistogramDateRange.styles = css`
571
614
  border-radius: 2px !important;
572
615
  text-align: center;
573
616
  font-size: ${inputFontSize};
617
+ font-family: ${inputFontFamily};
574
618
  }
575
619
  `;
576
620
  __decorate([
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetarchive/histogram-date-range",
3
- "version": "0.0.11-beta",
3
+ "version": "0.1.2-alpha",
4
4
  "description": "Internet Archive histogram date range picker",
5
5
  "license": "AGPL-3.0-only",
6
6
  "main": "dist/index.js",
@@ -16,30 +16,31 @@
16
16
  "prepare": "npm run build",
17
17
  "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
18
18
  "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
19
- "test": "tsc && wtr --coverage",
19
+ "test": "tsc && wtr",
20
20
  "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
21
21
  },
22
22
  "dependencies": {
23
- "dayjs": "^1.9.7",
24
- "lit": "^2.0.0-rc.2"
23
+ "dayjs": "^1.10.7",
24
+ "lit": "^2.1.1"
25
25
  },
26
26
  "devDependencies": {
27
- "@internetarchive/ia-activity-indicator": "^0.0.1",
28
- "@open-wc/eslint-config": "^4.2.0",
29
- "@open-wc/testing": "^2.0.0",
30
- "@typescript-eslint/eslint-plugin": "^2.20.0",
31
- "@typescript-eslint/parser": "^2.20.0",
32
- "@web/dev-server": "^0.1.1",
33
- "@web/test-runner": "^0.11.5",
34
- "concurrently": "^5.3.0",
35
- "eslint": "^6.1.0",
36
- "eslint-config-prettier": "^6.11.0",
37
- "husky": "^1.0.0",
38
- "lint-staged": "^10.0.0",
39
- "prettier": "^2.0.4",
40
- "snowpack": "^3.0.11",
41
- "tslib": "^2.0.3",
42
- "typescript": "^4.3"
27
+ "@internetarchive/ia-activity-indicator": "^0.0.2",
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"
43
44
  },
44
45
  "eslintConfig": {
45
46
  "parser": "@typescript-eslint/parser",