@esri/calcite-components 1.0.0-next.409 → 1.0.0-next.411
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/dist/calcite/calcite.esm.js +1 -1
- package/dist/calcite/p-322195bf.system.entry.js +5 -0
- package/dist/calcite/{p-75d8fd87.system.entry.js → p-4cd8449b.system.entry.js} +1 -1
- package/dist/calcite/p-802a05a2.entry.js +5 -0
- package/dist/calcite/p-8f93be14.system.js +1 -1
- package/dist/calcite/{p-d4ba6e66.entry.js → p-ad7fbabd.entry.js} +1 -1
- package/dist/calcite/{p-daf1d0cf.system.js → p-de562f92.system.js} +1 -1
- package/dist/calcite/{p-33cff2d9.js → p-e9460f3c.js} +1 -1
- package/dist/calcite/{p-bac18793.system.entry.js → p-eb43eb28.system.entry.js} +1 -1
- package/dist/calcite/p-fad60503.entry.js +5 -0
- package/dist/cjs/calcite-graph_2.cjs.entry.js +26 -26
- package/dist/cjs/calcite-pick-list_3.cjs.entry.js +1 -1
- package/dist/cjs/calcite-value-list_2.cjs.entry.js +4 -1
- package/dist/cjs/calcite.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{resources-00f23831.js → resources-415f797b.js} +0 -1
- package/dist/collection/components/pick-list/shared-list-logic.js +0 -1
- package/dist/collection/components/slider/slider.js +26 -26
- package/dist/collection/components/value-list/value-list.js +10 -1
- package/dist/components/calcite-slider.js +26 -26
- package/dist/components/calcite-value-list.js +5 -2
- package/dist/components/shared-list-render.js +0 -1
- package/dist/custom-elements/index.js +30 -28
- package/dist/esm/calcite-graph_2.entry.js +26 -26
- package/dist/esm/calcite-pick-list_3.entry.js +1 -1
- package/dist/esm/calcite-value-list_2.entry.js +4 -1
- package/dist/esm/calcite.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{resources-966bb21a.js → resources-999109fa.js} +1 -2
- package/dist/esm-es5/calcite-graph_2.entry.js +1 -1
- package/dist/esm-es5/calcite-pick-list_3.entry.js +1 -1
- package/dist/esm-es5/calcite-value-list_2.entry.js +1 -1
- package/dist/esm-es5/calcite.js +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/{resources-966bb21a.js → resources-999109fa.js} +1 -1
- package/dist/extras/docs-json.json +6 -1
- package/dist/types/components/slider/slider.d.ts +2 -2
- package/dist/types/components/value-list/value-list.d.ts +1 -0
- package/hydrate/index.js +30 -28
- package/package.json +7 -7
- package/dist/calcite/p-03a6680c.entry.js +0 -5
- package/dist/calcite/p-3955bdff.entry.js +0 -5
- package/dist/calcite/p-e5c3f4f6.system.entry.js +0 -5
|
@@ -156,106 +156,106 @@ export class Slider {
|
|
|
156
156
|
const mirror = this.shouldMirror();
|
|
157
157
|
const leftThumbOffset = `${mirror ? 100 - minInterval : minInterval}%`;
|
|
158
158
|
const rightThumbOffset = `${mirror ? maxInterval : 100 - maxInterval}%`;
|
|
159
|
-
const handle = (h("
|
|
159
|
+
const handle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
|
|
160
160
|
thumb: true,
|
|
161
161
|
"thumb--value": true,
|
|
162
162
|
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp
|
|
163
|
-
},
|
|
163
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 },
|
|
164
164
|
h("div", { class: "handle" })));
|
|
165
|
-
const labeledHandle = (h("
|
|
165
|
+
const labeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
|
|
166
166
|
thumb: true,
|
|
167
167
|
"thumb--value": true,
|
|
168
168
|
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp
|
|
169
|
-
},
|
|
169
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 },
|
|
170
170
|
h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value),
|
|
171
171
|
h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value),
|
|
172
172
|
h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value),
|
|
173
173
|
h("div", { class: "handle" })));
|
|
174
|
-
const histogramLabeledHandle = (h("
|
|
174
|
+
const histogramLabeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
|
|
175
175
|
thumb: true,
|
|
176
176
|
"thumb--value": true,
|
|
177
177
|
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp
|
|
178
|
-
},
|
|
178
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 },
|
|
179
179
|
h("div", { class: "handle" }),
|
|
180
180
|
h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value),
|
|
181
181
|
h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value),
|
|
182
182
|
h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value)));
|
|
183
|
-
const preciseHandle = (h("
|
|
183
|
+
const preciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
|
|
184
184
|
thumb: true,
|
|
185
185
|
"thumb--value": true,
|
|
186
186
|
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
|
|
187
187
|
"thumb--precise": true
|
|
188
|
-
},
|
|
188
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 },
|
|
189
189
|
h("div", { class: "handle" }),
|
|
190
190
|
h("div", { class: "handle-extension" })));
|
|
191
|
-
const histogramPreciseHandle = (h("
|
|
191
|
+
const histogramPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
|
|
192
192
|
thumb: true,
|
|
193
193
|
"thumb--value": true,
|
|
194
194
|
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
|
|
195
195
|
"thumb--precise": true
|
|
196
|
-
},
|
|
196
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 },
|
|
197
197
|
h("div", { class: "handle-extension" }),
|
|
198
198
|
h("div", { class: "handle" })));
|
|
199
|
-
const labeledPreciseHandle = (h("
|
|
199
|
+
const labeledPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
|
|
200
200
|
thumb: true,
|
|
201
201
|
"thumb--value": true,
|
|
202
202
|
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
|
|
203
203
|
"thumb--precise": true
|
|
204
|
-
},
|
|
204
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 },
|
|
205
205
|
h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value),
|
|
206
206
|
h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value),
|
|
207
207
|
h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value),
|
|
208
208
|
h("div", { class: "handle" }),
|
|
209
209
|
h("div", { class: "handle-extension" })));
|
|
210
|
-
const histogramLabeledPreciseHandle = (h("
|
|
210
|
+
const histogramLabeledPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
|
|
211
211
|
thumb: true,
|
|
212
212
|
"thumb--value": true,
|
|
213
213
|
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
|
|
214
214
|
"thumb--precise": true
|
|
215
|
-
},
|
|
215
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 },
|
|
216
216
|
h("div", { class: "handle-extension" }),
|
|
217
217
|
h("div", { class: "handle" }),
|
|
218
218
|
h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value),
|
|
219
219
|
h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value),
|
|
220
220
|
h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value)));
|
|
221
|
-
const minHandle = (h("
|
|
221
|
+
const minHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
|
|
222
222
|
thumb: true,
|
|
223
223
|
"thumb--minValue": true,
|
|
224
224
|
"thumb--active": this.dragProp === "minValue"
|
|
225
|
-
},
|
|
225
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 },
|
|
226
226
|
h("div", { class: "handle" })));
|
|
227
|
-
const minLabeledHandle = (h("
|
|
227
|
+
const minLabeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
|
|
228
228
|
thumb: true,
|
|
229
229
|
"thumb--minValue": true,
|
|
230
230
|
"thumb--active": this.dragProp === "minValue"
|
|
231
|
-
},
|
|
231
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 },
|
|
232
232
|
h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue" }, this.minValue && this.minValue.toLocaleString()),
|
|
233
233
|
h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue static" }, this.minValue && this.minValue.toLocaleString()),
|
|
234
234
|
h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue transformed" }, this.minValue && this.minValue.toLocaleString()),
|
|
235
235
|
h("div", { class: "handle" })));
|
|
236
|
-
const minHistogramLabeledHandle = (h("
|
|
236
|
+
const minHistogramLabeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
|
|
237
237
|
thumb: true,
|
|
238
238
|
"thumb--minValue": true,
|
|
239
239
|
"thumb--active": this.dragProp === "minValue"
|
|
240
|
-
},
|
|
240
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 },
|
|
241
241
|
h("div", { class: "handle" }),
|
|
242
242
|
h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue" }, this.minValue && this.minValue.toLocaleString()),
|
|
243
243
|
h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue static" }, this.minValue && this.minValue.toLocaleString()),
|
|
244
244
|
h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue transformed" }, this.minValue && this.minValue.toLocaleString())));
|
|
245
|
-
const minPreciseHandle = (h("
|
|
245
|
+
const minPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
|
|
246
246
|
thumb: true,
|
|
247
247
|
"thumb--minValue": true,
|
|
248
248
|
"thumb--active": this.dragProp === "minValue",
|
|
249
249
|
"thumb--precise": true
|
|
250
|
-
},
|
|
250
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 },
|
|
251
251
|
h("div", { class: "handle-extension" }),
|
|
252
252
|
h("div", { class: "handle" })));
|
|
253
|
-
const minLabeledPreciseHandle = (h("
|
|
253
|
+
const minLabeledPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
|
|
254
254
|
thumb: true,
|
|
255
255
|
"thumb--minValue": true,
|
|
256
256
|
"thumb--active": this.dragProp === "minValue",
|
|
257
257
|
"thumb--precise": true
|
|
258
|
-
},
|
|
258
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 },
|
|
259
259
|
h("div", { class: "handle-extension" }),
|
|
260
260
|
h("div", { class: "handle" }),
|
|
261
261
|
h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue" }, this.minValue && this.minValue.toLocaleString()),
|
|
@@ -753,7 +753,7 @@ export class Slider {
|
|
|
753
753
|
return Math.max(rangeLabelOverlap, 0);
|
|
754
754
|
}
|
|
755
755
|
/**
|
|
756
|
-
* Returns a boolean value representing if the minLabel span element is obscured (being overlapped) by the given handle
|
|
756
|
+
* Returns a boolean value representing if the minLabel span element is obscured (being overlapped) by the given handle div element.
|
|
757
757
|
* @param minLabel
|
|
758
758
|
* @param handle
|
|
759
759
|
*/
|
|
@@ -763,7 +763,7 @@ export class Slider {
|
|
|
763
763
|
return intersects(minLabelBounds, handleBounds);
|
|
764
764
|
}
|
|
765
765
|
/**
|
|
766
|
-
* Returns a boolean value representing if the maxLabel span element is obscured (being overlapped) by the given handle
|
|
766
|
+
* Returns a boolean value representing if the maxLabel span element is obscured (being overlapped) by the given handle div element.
|
|
767
767
|
* @param maxLabel
|
|
768
768
|
* @param handle
|
|
769
769
|
*/
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import Sortable from "sortablejs";
|
|
6
6
|
import { Component, Element, Event, h, Listen, Method, Prop, State } from "@stencil/core";
|
|
7
7
|
import { CSS, ICON_TYPES } from "./resources";
|
|
8
|
-
import { calciteListItemChangeHandler, calciteListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, deselectRemovedItems, getItemData, handleFilter, initialize, initializeObserver, keyDownHandler, mutationObserverCallback, removeItem, selectSiblings, setFocus, setUpItems } from "../pick-list/shared-list-logic";
|
|
8
|
+
import { calciteListFocusOutHandler, calciteListItemChangeHandler, calciteListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, deselectRemovedItems, getItemData, handleFilter, initialize, initializeObserver, keyDownHandler, mutationObserverCallback, removeItem, selectSiblings, setFocus, setUpItems } from "../pick-list/shared-list-logic";
|
|
9
9
|
import List from "../pick-list/shared-list-render";
|
|
10
10
|
import { getRoundRobinIndex } from "../../utils/array";
|
|
11
11
|
import { createObserver } from "../../utils/observers";
|
|
@@ -117,6 +117,9 @@ export class ValueList {
|
|
|
117
117
|
cleanUpObserver.call(this);
|
|
118
118
|
this.cleanUpDragAndDrop();
|
|
119
119
|
}
|
|
120
|
+
calciteListFocusOutHandler(event) {
|
|
121
|
+
calciteListFocusOutHandler.call(this, event);
|
|
122
|
+
}
|
|
120
123
|
calciteListItemRemoveHandler(event) {
|
|
121
124
|
removeItem.call(this, event);
|
|
122
125
|
}
|
|
@@ -439,6 +442,12 @@ export class ValueList {
|
|
|
439
442
|
}; }
|
|
440
443
|
static get elementRef() { return "el"; }
|
|
441
444
|
static get listeners() { return [{
|
|
445
|
+
"name": "focusout",
|
|
446
|
+
"method": "calciteListFocusOutHandler",
|
|
447
|
+
"target": undefined,
|
|
448
|
+
"capture": false,
|
|
449
|
+
"passive": false
|
|
450
|
+
}, {
|
|
442
451
|
"name": "calciteListItemRemove",
|
|
443
452
|
"method": "calciteListItemRemoveHandler",
|
|
444
453
|
"target": undefined,
|
|
@@ -166,72 +166,72 @@ let Slider = class extends HTMLElement {
|
|
|
166
166
|
const mirror = this.shouldMirror();
|
|
167
167
|
const leftThumbOffset = `${mirror ? 100 - minInterval : minInterval}%`;
|
|
168
168
|
const rightThumbOffset = `${mirror ? maxInterval : 100 - maxInterval}%`;
|
|
169
|
-
const handle = (h("
|
|
169
|
+
const handle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
|
|
170
170
|
thumb: true,
|
|
171
171
|
"thumb--value": true,
|
|
172
172
|
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp
|
|
173
|
-
},
|
|
174
|
-
const labeledHandle = (h("
|
|
173
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("div", { class: "handle" })));
|
|
174
|
+
const labeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
|
|
175
175
|
thumb: true,
|
|
176
176
|
"thumb--value": true,
|
|
177
177
|
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp
|
|
178
|
-
},
|
|
179
|
-
const histogramLabeledHandle = (h("
|
|
178
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value), h("div", { class: "handle" })));
|
|
179
|
+
const histogramLabeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
|
|
180
180
|
thumb: true,
|
|
181
181
|
"thumb--value": true,
|
|
182
182
|
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp
|
|
183
|
-
},
|
|
184
|
-
const preciseHandle = (h("
|
|
183
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value)));
|
|
184
|
+
const preciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
|
|
185
185
|
thumb: true,
|
|
186
186
|
"thumb--value": true,
|
|
187
187
|
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
|
|
188
188
|
"thumb--precise": true
|
|
189
|
-
},
|
|
190
|
-
const histogramPreciseHandle = (h("
|
|
189
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("div", { class: "handle" }), h("div", { class: "handle-extension" })));
|
|
190
|
+
const histogramPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
|
|
191
191
|
thumb: true,
|
|
192
192
|
"thumb--value": true,
|
|
193
193
|
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
|
|
194
194
|
"thumb--precise": true
|
|
195
|
-
},
|
|
196
|
-
const labeledPreciseHandle = (h("
|
|
195
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("div", { class: "handle-extension" }), h("div", { class: "handle" })));
|
|
196
|
+
const labeledPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
|
|
197
197
|
thumb: true,
|
|
198
198
|
"thumb--value": true,
|
|
199
199
|
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
|
|
200
200
|
"thumb--precise": true
|
|
201
|
-
},
|
|
202
|
-
const histogramLabeledPreciseHandle = (h("
|
|
201
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value), h("div", { class: "handle" }), h("div", { class: "handle-extension" })));
|
|
202
|
+
const histogramLabeledPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
|
|
203
203
|
thumb: true,
|
|
204
204
|
"thumb--value": true,
|
|
205
205
|
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
|
|
206
206
|
"thumb--precise": true
|
|
207
|
-
},
|
|
208
|
-
const minHandle = (h("
|
|
207
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("div", { class: "handle-extension" }), h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value)));
|
|
208
|
+
const minHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
|
|
209
209
|
thumb: true,
|
|
210
210
|
"thumb--minValue": true,
|
|
211
211
|
"thumb--active": this.dragProp === "minValue"
|
|
212
|
-
},
|
|
213
|
-
const minLabeledHandle = (h("
|
|
212
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 }, h("div", { class: "handle" })));
|
|
213
|
+
const minLabeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
|
|
214
214
|
thumb: true,
|
|
215
215
|
"thumb--minValue": true,
|
|
216
216
|
"thumb--active": this.dragProp === "minValue"
|
|
217
|
-
},
|
|
218
|
-
const minHistogramLabeledHandle = (h("
|
|
217
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 }, h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue" }, this.minValue && this.minValue.toLocaleString()), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue static" }, this.minValue && this.minValue.toLocaleString()), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue transformed" }, this.minValue && this.minValue.toLocaleString()), h("div", { class: "handle" })));
|
|
218
|
+
const minHistogramLabeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
|
|
219
219
|
thumb: true,
|
|
220
220
|
"thumb--minValue": true,
|
|
221
221
|
"thumb--active": this.dragProp === "minValue"
|
|
222
|
-
},
|
|
223
|
-
const minPreciseHandle = (h("
|
|
222
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 }, h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue" }, this.minValue && this.minValue.toLocaleString()), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue static" }, this.minValue && this.minValue.toLocaleString()), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue transformed" }, this.minValue && this.minValue.toLocaleString())));
|
|
223
|
+
const minPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
|
|
224
224
|
thumb: true,
|
|
225
225
|
"thumb--minValue": true,
|
|
226
226
|
"thumb--active": this.dragProp === "minValue",
|
|
227
227
|
"thumb--precise": true
|
|
228
|
-
},
|
|
229
|
-
const minLabeledPreciseHandle = (h("
|
|
228
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 }, h("div", { class: "handle-extension" }), h("div", { class: "handle" })));
|
|
229
|
+
const minLabeledPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
|
|
230
230
|
thumb: true,
|
|
231
231
|
"thumb--minValue": true,
|
|
232
232
|
"thumb--active": this.dragProp === "minValue",
|
|
233
233
|
"thumb--precise": true
|
|
234
|
-
},
|
|
234
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 }, h("div", { class: "handle-extension" }), h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue" }, this.minValue && this.minValue.toLocaleString()), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue static" }, this.minValue && this.minValue.toLocaleString()), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue transformed" }, this.minValue && this.minValue.toLocaleString())));
|
|
235
235
|
return (h(Host, { id: id, onTouchStart: this.handleTouchStart }, h("div", { class: {
|
|
236
236
|
["container"]: true,
|
|
237
237
|
["container--range"]: this.isRange,
|
|
@@ -703,7 +703,7 @@ let Slider = class extends HTMLElement {
|
|
|
703
703
|
return Math.max(rangeLabelOverlap, 0);
|
|
704
704
|
}
|
|
705
705
|
/**
|
|
706
|
-
* Returns a boolean value representing if the minLabel span element is obscured (being overlapped) by the given handle
|
|
706
|
+
* Returns a boolean value representing if the minLabel span element is obscured (being overlapped) by the given handle div element.
|
|
707
707
|
* @param minLabel
|
|
708
708
|
* @param handle
|
|
709
709
|
*/
|
|
@@ -713,7 +713,7 @@ let Slider = class extends HTMLElement {
|
|
|
713
713
|
return intersects(minLabelBounds, handleBounds);
|
|
714
714
|
}
|
|
715
715
|
/**
|
|
716
|
-
* Returns a boolean value representing if the maxLabel span element is obscured (being overlapped) by the given handle
|
|
716
|
+
* Returns a boolean value representing if the maxLabel span element is obscured (being overlapped) by the given handle div element.
|
|
717
717
|
* @param maxLabel
|
|
718
718
|
* @param handle
|
|
719
719
|
*/
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*/
|
|
5
5
|
import { HTMLElement, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
|
|
6
6
|
import { S as Sortable } from './sortable.esm.js';
|
|
7
|
-
import { m as mutationObserverCallback, d as deselectRemovedItems, a as deselectSiblingItems, s as selectSiblings, h as handleFilter, g as getItemData, k as keyDownHandler, i as initialize, b as initializeObserver, c as cleanUpObserver, r as removeItem, e as calciteListItemChangeHandler, f as calciteListItemValueChangeHandler, l as setUpItems, n as setFocus, L as List } from './shared-list-render.js';
|
|
7
|
+
import { m as mutationObserverCallback, d as deselectRemovedItems, a as deselectSiblingItems, s as selectSiblings, h as handleFilter, g as getItemData, k as keyDownHandler, i as initialize, b as initializeObserver, c as cleanUpObserver, j as calciteListFocusOutHandler, r as removeItem, e as calciteListItemChangeHandler, f as calciteListItemValueChangeHandler, l as setUpItems, n as setFocus, L as List } from './shared-list-render.js';
|
|
8
8
|
import { g as getRoundRobinIndex } from './array.js';
|
|
9
9
|
import { c as createObserver } from './observers.js';
|
|
10
10
|
import { d as defineCustomElement$7 } from './filter.js';
|
|
@@ -134,6 +134,9 @@ let ValueList = class extends HTMLElement {
|
|
|
134
134
|
cleanUpObserver.call(this);
|
|
135
135
|
this.cleanUpDragAndDrop();
|
|
136
136
|
}
|
|
137
|
+
calciteListFocusOutHandler(event) {
|
|
138
|
+
calciteListFocusOutHandler.call(this, event);
|
|
139
|
+
}
|
|
137
140
|
calciteListItemRemoveHandler(event) {
|
|
138
141
|
removeItem.call(this, event);
|
|
139
142
|
}
|
|
@@ -229,7 +232,7 @@ ValueList = /*@__PURE__*/ proxyCustomElement(ValueList, [1, "calcite-value-list"
|
|
|
229
232
|
"dataForFilter": [32],
|
|
230
233
|
"getSelectedItems": [64],
|
|
231
234
|
"setFocus": [64]
|
|
232
|
-
}, [[0, "calciteListItemRemove", "calciteListItemRemoveHandler"], [0, "calciteListItemChange", "calciteListItemChangeHandler"], [0, "calciteListItemPropsChange", "calciteListItemPropsChangeHandler"], [0, "calciteListItemValueChange", "calciteListItemValueChangeHandler"]]]);
|
|
235
|
+
}, [[0, "focusout", "calciteListFocusOutHandler"], [0, "calciteListItemRemove", "calciteListItemRemoveHandler"], [0, "calciteListItemChange", "calciteListItemChangeHandler"], [0, "calciteListItemPropsChange", "calciteListItemPropsChangeHandler"], [0, "calciteListItemValueChange", "calciteListItemValueChangeHandler"]]]);
|
|
233
236
|
function defineCustomElement$1() {
|
|
234
237
|
if (typeof customElements === "undefined") {
|
|
235
238
|
return;
|
|
@@ -195,7 +195,6 @@ function deselectSiblingItems(item) {
|
|
|
195
195
|
this.items.forEach((currentItem) => {
|
|
196
196
|
if (currentItem.value !== item.value) {
|
|
197
197
|
currentItem.toggleSelected(false);
|
|
198
|
-
toggleSingleSelectItemTabbing(currentItem, false);
|
|
199
198
|
if (this.selectedValues.has(currentItem.value)) {
|
|
200
199
|
this.selectedValues.delete(currentItem.value);
|
|
201
200
|
}
|
|
@@ -15971,7 +15971,6 @@ function deselectSiblingItems(item) {
|
|
|
15971
15971
|
this.items.forEach((currentItem) => {
|
|
15972
15972
|
if (currentItem.value !== item.value) {
|
|
15973
15973
|
currentItem.toggleSelected(false);
|
|
15974
|
-
toggleSingleSelectItemTabbing(currentItem, false);
|
|
15975
15974
|
if (this.selectedValues.has(currentItem.value)) {
|
|
15976
15975
|
this.selectedValues.delete(currentItem.value);
|
|
15977
15976
|
}
|
|
@@ -18329,72 +18328,72 @@ let Slider = class extends HTMLElement$1 {
|
|
|
18329
18328
|
const mirror = this.shouldMirror();
|
|
18330
18329
|
const leftThumbOffset = `${mirror ? 100 - minInterval : minInterval}%`;
|
|
18331
18330
|
const rightThumbOffset = `${mirror ? maxInterval : 100 - maxInterval}%`;
|
|
18332
|
-
const handle = (h("
|
|
18331
|
+
const handle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
|
|
18333
18332
|
thumb: true,
|
|
18334
18333
|
"thumb--value": true,
|
|
18335
18334
|
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp
|
|
18336
|
-
},
|
|
18337
|
-
const labeledHandle = (h("
|
|
18335
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("div", { class: "handle" })));
|
|
18336
|
+
const labeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
|
|
18338
18337
|
thumb: true,
|
|
18339
18338
|
"thumb--value": true,
|
|
18340
18339
|
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp
|
|
18341
|
-
},
|
|
18342
|
-
const histogramLabeledHandle = (h("
|
|
18340
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value), h("div", { class: "handle" })));
|
|
18341
|
+
const histogramLabeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
|
|
18343
18342
|
thumb: true,
|
|
18344
18343
|
"thumb--value": true,
|
|
18345
18344
|
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp
|
|
18346
|
-
},
|
|
18347
|
-
const preciseHandle = (h("
|
|
18345
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value)));
|
|
18346
|
+
const preciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
|
|
18348
18347
|
thumb: true,
|
|
18349
18348
|
"thumb--value": true,
|
|
18350
18349
|
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
|
|
18351
18350
|
"thumb--precise": true
|
|
18352
|
-
},
|
|
18353
|
-
const histogramPreciseHandle = (h("
|
|
18351
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("div", { class: "handle" }), h("div", { class: "handle-extension" })));
|
|
18352
|
+
const histogramPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
|
|
18354
18353
|
thumb: true,
|
|
18355
18354
|
"thumb--value": true,
|
|
18356
18355
|
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
|
|
18357
18356
|
"thumb--precise": true
|
|
18358
|
-
},
|
|
18359
|
-
const labeledPreciseHandle = (h("
|
|
18357
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("div", { class: "handle-extension" }), h("div", { class: "handle" })));
|
|
18358
|
+
const labeledPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
|
|
18360
18359
|
thumb: true,
|
|
18361
18360
|
"thumb--value": true,
|
|
18362
18361
|
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
|
|
18363
18362
|
"thumb--precise": true
|
|
18364
|
-
},
|
|
18365
|
-
const histogramLabeledPreciseHandle = (h("
|
|
18363
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value), h("div", { class: "handle" }), h("div", { class: "handle-extension" })));
|
|
18364
|
+
const histogramLabeledPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
|
|
18366
18365
|
thumb: true,
|
|
18367
18366
|
"thumb--value": true,
|
|
18368
18367
|
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
|
|
18369
18368
|
"thumb--precise": true
|
|
18370
|
-
},
|
|
18371
|
-
const minHandle = (h("
|
|
18369
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("div", { class: "handle-extension" }), h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value)));
|
|
18370
|
+
const minHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
|
|
18372
18371
|
thumb: true,
|
|
18373
18372
|
"thumb--minValue": true,
|
|
18374
18373
|
"thumb--active": this.dragProp === "minValue"
|
|
18375
|
-
},
|
|
18376
|
-
const minLabeledHandle = (h("
|
|
18374
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 }, h("div", { class: "handle" })));
|
|
18375
|
+
const minLabeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
|
|
18377
18376
|
thumb: true,
|
|
18378
18377
|
"thumb--minValue": true,
|
|
18379
18378
|
"thumb--active": this.dragProp === "minValue"
|
|
18380
|
-
},
|
|
18381
|
-
const minHistogramLabeledHandle = (h("
|
|
18379
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 }, h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue" }, this.minValue && this.minValue.toLocaleString()), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue static" }, this.minValue && this.minValue.toLocaleString()), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue transformed" }, this.minValue && this.minValue.toLocaleString()), h("div", { class: "handle" })));
|
|
18380
|
+
const minHistogramLabeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
|
|
18382
18381
|
thumb: true,
|
|
18383
18382
|
"thumb--minValue": true,
|
|
18384
18383
|
"thumb--active": this.dragProp === "minValue"
|
|
18385
|
-
},
|
|
18386
|
-
const minPreciseHandle = (h("
|
|
18384
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 }, h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue" }, this.minValue && this.minValue.toLocaleString()), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue static" }, this.minValue && this.minValue.toLocaleString()), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue transformed" }, this.minValue && this.minValue.toLocaleString())));
|
|
18385
|
+
const minPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
|
|
18387
18386
|
thumb: true,
|
|
18388
18387
|
"thumb--minValue": true,
|
|
18389
18388
|
"thumb--active": this.dragProp === "minValue",
|
|
18390
18389
|
"thumb--precise": true
|
|
18391
|
-
},
|
|
18392
|
-
const minLabeledPreciseHandle = (h("
|
|
18390
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 }, h("div", { class: "handle-extension" }), h("div", { class: "handle" })));
|
|
18391
|
+
const minLabeledPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
|
|
18393
18392
|
thumb: true,
|
|
18394
18393
|
"thumb--minValue": true,
|
|
18395
18394
|
"thumb--active": this.dragProp === "minValue",
|
|
18396
18395
|
"thumb--precise": true
|
|
18397
|
-
},
|
|
18396
|
+
}, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 }, h("div", { class: "handle-extension" }), h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue" }, this.minValue && this.minValue.toLocaleString()), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue static" }, this.minValue && this.minValue.toLocaleString()), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue transformed" }, this.minValue && this.minValue.toLocaleString())));
|
|
18398
18397
|
return (h(Host, { id: id, onTouchStart: this.handleTouchStart }, h("div", { class: {
|
|
18399
18398
|
["container"]: true,
|
|
18400
18399
|
["container--range"]: this.isRange,
|
|
@@ -18866,7 +18865,7 @@ let Slider = class extends HTMLElement$1 {
|
|
|
18866
18865
|
return Math.max(rangeLabelOverlap, 0);
|
|
18867
18866
|
}
|
|
18868
18867
|
/**
|
|
18869
|
-
* Returns a boolean value representing if the minLabel span element is obscured (being overlapped) by the given handle
|
|
18868
|
+
* Returns a boolean value representing if the minLabel span element is obscured (being overlapped) by the given handle div element.
|
|
18870
18869
|
* @param minLabel
|
|
18871
18870
|
* @param handle
|
|
18872
18871
|
*/
|
|
@@ -18876,7 +18875,7 @@ let Slider = class extends HTMLElement$1 {
|
|
|
18876
18875
|
return intersects(minLabelBounds, handleBounds);
|
|
18877
18876
|
}
|
|
18878
18877
|
/**
|
|
18879
|
-
* Returns a boolean value representing if the maxLabel span element is obscured (being overlapped) by the given handle
|
|
18878
|
+
* Returns a boolean value representing if the maxLabel span element is obscured (being overlapped) by the given handle div element.
|
|
18880
18879
|
* @param maxLabel
|
|
18881
18880
|
* @param handle
|
|
18882
18881
|
*/
|
|
@@ -25362,6 +25361,9 @@ let ValueList = class extends HTMLElement$1 {
|
|
|
25362
25361
|
cleanUpObserver.call(this);
|
|
25363
25362
|
this.cleanUpDragAndDrop();
|
|
25364
25363
|
}
|
|
25364
|
+
calciteListFocusOutHandler(event) {
|
|
25365
|
+
calciteListFocusOutHandler.call(this, event);
|
|
25366
|
+
}
|
|
25365
25367
|
calciteListItemRemoveHandler(event) {
|
|
25366
25368
|
removeItem.call(this, event);
|
|
25367
25369
|
}
|
|
@@ -25661,7 +25663,7 @@ const CalciteTooltip = /*@__PURE__*/proxyCustomElement(Tooltip, [1,"calcite-tool
|
|
|
25661
25663
|
const CalciteTooltipManager = /*@__PURE__*/proxyCustomElement(TooltipManager, [1,"calcite-tooltip-manager",{"selector":[1]},[[4,"keyup","keyUpHandler"],[3,"mouseover","mouseEnterShow"],[3,"mouseout","mouseLeaveHide"],[2,"click","clickHandler"],[2,"focus","focusShow"],[2,"blur","blurHide"]]]);
|
|
25662
25664
|
const CalciteTree = /*@__PURE__*/proxyCustomElement(Tree, [1,"calcite-tree",{"lines":[1540],"inputEnabled":[4,"input-enabled"],"child":[1540],"scale":[1537],"selectionMode":[1537,"selection-mode"]},[[0,"focus","onFocus"],[0,"focusin","onFocusIn"],[0,"focusout","onFocusOut"],[0,"calciteTreeItemSelect","onClick"],[0,"keydown","keyDownHandler"]]]);
|
|
25663
25665
|
const CalciteTreeItem = /*@__PURE__*/proxyCustomElement(TreeItem, [1,"calcite-tree-item",{"selected":[1540],"expanded":[1540],"parentExpanded":[4,"parent-expanded"],"depth":[1538],"hasChildren":[1540,"has-children"],"lines":[1540],"inputEnabled":[4,"input-enabled"],"scale":[1537],"indeterminate":[516],"selectionMode":[1025,"selection-mode"]},[[0,"click","onClick"],[0,"keydown","keyDownHandler"]]]);
|
|
25664
|
-
const CalciteValueList = /*@__PURE__*/proxyCustomElement(ValueList, [1,"calcite-value-list",{"disabled":[516],"dragEnabled":[516,"drag-enabled"],"filterEnabled":[516,"filter-enabled"],"filterPlaceholder":[513,"filter-placeholder"],"group":[1],"loading":[516],"multiple":[516],"selectionFollowsFocus":[4,"selection-follows-focus"],"selectedValues":[32],"dataForFilter":[32]},[[0,"calciteListItemRemove","calciteListItemRemoveHandler"],[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]);
|
|
25666
|
+
const CalciteValueList = /*@__PURE__*/proxyCustomElement(ValueList, [1,"calcite-value-list",{"disabled":[516],"dragEnabled":[516,"drag-enabled"],"filterEnabled":[516,"filter-enabled"],"filterPlaceholder":[513,"filter-placeholder"],"group":[1],"loading":[516],"multiple":[516],"selectionFollowsFocus":[4,"selection-follows-focus"],"selectedValues":[32],"dataForFilter":[32]},[[0,"focusout","calciteListFocusOutHandler"],[0,"calciteListItemRemove","calciteListItemRemoveHandler"],[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]);
|
|
25665
25667
|
const CalciteValueListItem = /*@__PURE__*/proxyCustomElement(ValueListItem, [1,"calcite-value-list-item",{"description":[513],"disabled":[516],"disableDeselect":[4,"disable-deselect"],"nonInteractive":[516,"non-interactive"],"handleActivated":[1028,"handle-activated"],"icon":[513],"label":[513],"metadata":[16],"removable":[516],"selected":[1540],"value":[8]},[[0,"calciteListItemChange","calciteListItemChangeHandler"]]]);
|
|
25666
25668
|
const defineCustomElements = (opts) => {
|
|
25667
25669
|
if (typeof customElements !== 'undefined') {
|