@statistikzh/leu 0.24.0 → 0.24.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.
- package/.github/workflows/publish.yml +2 -2
- package/.release-please-manifest.json +1 -1
- package/CHANGELOG.md +15 -0
- package/dist/Accordion.js +1 -1
- package/dist/Button.js +1 -1
- package/dist/ButtonGroup.js +1 -1
- package/dist/ChartWrapper.js +1 -1
- package/dist/Checkbox.js +1 -1
- package/dist/CheckboxGroup.js +1 -1
- package/dist/Chip.js +1 -1
- package/dist/ChipGroup.js +1 -1
- package/dist/ChipLink.js +1 -1
- package/dist/ChipRemovable.js +1 -1
- package/dist/ChipSelectable.js +1 -1
- package/dist/Dialog.js +1 -1
- package/dist/Dropdown.js +1 -1
- package/dist/FileInput.js +1 -1
- package/dist/Icon.js +1 -1
- package/dist/Input.js +1 -1
- package/dist/{LeuElement-BfbOWTGZ.js → LeuElement-BfXSO7MN.js} +1 -1
- package/dist/Menu.js +1 -1
- package/dist/MenuItem.js +1 -1
- package/dist/Message.js +1 -1
- package/dist/Pagination.js +1 -1
- package/dist/Placeholder.js +1 -1
- package/dist/Popup.js +1 -1
- package/dist/ProgressBar.js +1 -1
- package/dist/Radio.js +1 -1
- package/dist/RadioGroup.js +1 -1
- package/dist/Range.d.ts +32 -20
- package/dist/Range.js +137 -72
- package/dist/ScrollTop.js +24 -31
- package/dist/Select.js +1 -1
- package/dist/Spinner.js +1 -1
- package/dist/Table.js +1 -1
- package/dist/Tag.js +1 -1
- package/dist/VisuallyHidden.js +1 -1
- package/dist/components/range/Range.d.ts +33 -20
- package/dist/components/range/Range.d.ts.map +1 -1
- package/dist/components/range/stories/range.stories.d.ts +1 -0
- package/dist/components/range/stories/range.stories.d.ts.map +1 -1
- package/dist/index.js +2 -1
- package/dist/leu-accordion.js +1 -1
- package/dist/leu-button-group.js +1 -1
- package/dist/leu-button.js +1 -1
- package/dist/leu-chart-wrapper.js +1 -1
- package/dist/leu-checkbox-group.js +1 -1
- package/dist/leu-checkbox.js +1 -1
- package/dist/leu-chip-group.js +1 -1
- package/dist/leu-chip-link.js +1 -1
- package/dist/leu-chip-removable.js +1 -1
- package/dist/leu-chip-selectable.js +1 -1
- package/dist/leu-dialog.js +1 -1
- package/dist/leu-dropdown.js +1 -1
- package/dist/leu-file-input.js +1 -1
- package/dist/leu-icon.js +1 -1
- package/dist/leu-input.js +1 -1
- package/dist/leu-menu-item.js +1 -1
- package/dist/leu-menu.js +1 -1
- package/dist/leu-message.js +1 -1
- package/dist/leu-pagination.js +1 -1
- package/dist/leu-placeholder.js +1 -1
- package/dist/leu-popup.js +1 -1
- package/dist/leu-progress-bar.js +1 -1
- package/dist/leu-radio-group.js +1 -1
- package/dist/leu-radio.js +1 -1
- package/dist/leu-range.js +3 -1
- package/dist/leu-scroll-top.js +2 -1
- package/dist/leu-select.js +1 -1
- package/dist/leu-spinner.js +1 -1
- package/dist/leu-table.js +1 -1
- package/dist/leu-tag.js +1 -1
- package/dist/leu-visually-hidden.js +1 -1
- package/dist/lib/utils.d.ts +10 -3
- package/dist/lib/utils.d.ts.map +1 -1
- package/dist/theme.css +1 -0
- package/dist/utils-DBGsNSJW.js +33 -0
- package/dist/vscode.html-custom-data.json +38 -34
- package/dist/vue/index.d.ts +51 -44
- package/dist/web-types.json +86 -80
- package/package.json +2 -3
- package/src/components/range/Range.ts +160 -87
- package/src/components/range/stories/range.stories.ts +3 -0
- package/src/components/range/test/range.test.ts +59 -0
- package/src/components/scroll-top/scroll-top.css +20 -4
- package/src/lib/utils.ts +13 -3
- package/src/styles/theme.css +1 -0
package/dist/Range.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { _ as __decorate } from './_tslib-CNEFicEt.js';
|
|
2
2
|
import { css, nothing, html } from 'lit';
|
|
3
|
-
import { property } from 'lit/decorators.js';
|
|
4
|
-
import {
|
|
3
|
+
import { property, query } from 'lit/decorators.js';
|
|
4
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
|
+
import { L as LeuElement } from './LeuElement-BfXSO7MN.js';
|
|
6
|
+
import { i as isNumber, c as clamp } from './utils-DBGsNSJW.js';
|
|
5
7
|
|
|
6
8
|
var css_248z = css`:host {
|
|
7
9
|
--range-color: var(--leu-color-black-40);
|
|
@@ -253,6 +255,10 @@ const RANGE_LABELS = ["Von", "Bis"];
|
|
|
253
255
|
class LeuRange extends LeuElement {
|
|
254
256
|
constructor() {
|
|
255
257
|
super(...arguments);
|
|
258
|
+
/**
|
|
259
|
+
* The default value of the range slider.
|
|
260
|
+
* String input is parsed as a comma-separated list of numbers.
|
|
261
|
+
*/
|
|
256
262
|
this.defaultValue = [50];
|
|
257
263
|
/**
|
|
258
264
|
* The minimum value of the range slider.
|
|
@@ -304,90 +310,127 @@ class LeuRange extends LeuElement {
|
|
|
304
310
|
* Is ignored if a custom valueFormatter is provided.
|
|
305
311
|
*/
|
|
306
312
|
this.suffix = "";
|
|
307
|
-
|
|
308
|
-
updated() {
|
|
309
|
-
this._updateStyles();
|
|
310
|
-
}
|
|
311
|
-
get _inputs() {
|
|
312
|
-
return Array.from(this.shadowRoot.querySelectorAll("input"));
|
|
313
|
-
}
|
|
314
|
-
_updateStyles() {
|
|
315
|
-
const normalizedRange = this._getNormalizedRange();
|
|
316
|
-
this.style.setProperty("--low", normalizedRange[0].toString());
|
|
317
|
-
this.style.setProperty("--high", normalizedRange[1].toString());
|
|
318
|
-
const inputs = this.multiple
|
|
319
|
-
? [this._getBaseInput(), this._getGhostInput()]
|
|
320
|
-
: [this._getBaseInput()];
|
|
321
|
-
inputs.forEach((input) => {
|
|
322
|
-
const output = this.shadowRoot.querySelector(`.output[for=${input.id}]`);
|
|
323
|
-
const normalizedValue = this._getNormalizedValue(input.valueAsNumber);
|
|
324
|
-
output.style.setProperty("--value", normalizedValue.toString());
|
|
325
|
-
output.value = this.formatValue(input.valueAsNumber);
|
|
326
|
-
});
|
|
327
|
-
}
|
|
328
|
-
get value() {
|
|
329
|
-
return this._inputs.map((input) => input.value).join(",");
|
|
313
|
+
this._value = this.defaultValue.map((v) => this.clampAndRoundValue(v));
|
|
330
314
|
}
|
|
331
315
|
/**
|
|
332
|
-
*
|
|
333
|
-
*
|
|
334
|
-
*
|
|
316
|
+
* The value of the range slider.
|
|
317
|
+
* String input is parsed as a comma-separated list of numbers.
|
|
318
|
+
* In multiple mode, if only a single value is provided, the second handle will be set to the minimum value.
|
|
319
|
+
* In single mode, only the first value will be used.
|
|
335
320
|
*/
|
|
336
321
|
set value(value) {
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
322
|
+
let nextValue = [];
|
|
323
|
+
if (typeof value === "string") {
|
|
324
|
+
nextValue = value
|
|
325
|
+
.split(",")
|
|
326
|
+
.map((v) => Number(v.trim()))
|
|
327
|
+
.filter(isNumber);
|
|
328
|
+
}
|
|
329
|
+
else if (isNumber(value)) {
|
|
330
|
+
nextValue = [value];
|
|
331
|
+
}
|
|
332
|
+
else if (Array.isArray(value)) {
|
|
333
|
+
nextValue = value.map((v) => Number(v)).filter(isNumber);
|
|
334
|
+
}
|
|
335
|
+
if (nextValue.length === 0) {
|
|
336
|
+
return;
|
|
343
337
|
}
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
338
|
+
// In multiple mode, we need to ensure that we always have two values.
|
|
339
|
+
// `min` is a fallback for the second value.
|
|
340
|
+
if (this.multiple && nextValue.length === 1) {
|
|
341
|
+
nextValue.unshift(this.min);
|
|
347
342
|
}
|
|
343
|
+
this._value = nextValue
|
|
344
|
+
.slice(0, this.multiple ? 2 : 1)
|
|
345
|
+
.map((v) => this.clampAndRoundValue(v));
|
|
346
|
+
}
|
|
347
|
+
get value() {
|
|
348
|
+
return this._value.join(",");
|
|
348
349
|
}
|
|
349
350
|
get valueAsArray() {
|
|
350
|
-
return this.
|
|
351
|
+
return this._value.slice();
|
|
351
352
|
}
|
|
352
353
|
get valueLow() {
|
|
353
|
-
|
|
354
|
-
if (this.multiple) {
|
|
355
|
-
return inputs.map((input) => input.valueAsNumber).sort((a, b) => a - b)[0];
|
|
356
|
-
}
|
|
357
|
-
return inputs[0].value;
|
|
354
|
+
return Math.min(...this._value);
|
|
358
355
|
}
|
|
359
356
|
get valueHigh() {
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
357
|
+
return Math.max(...this._value);
|
|
358
|
+
}
|
|
359
|
+
updated() {
|
|
360
|
+
this.updateStyles();
|
|
361
|
+
}
|
|
362
|
+
willUpdate(changedProperties) {
|
|
363
|
+
// Reflect defaultValue changes to the value property
|
|
364
|
+
// to ensure backwards compatibility with previous versions
|
|
365
|
+
if (changedProperties.has("defaultValue")) {
|
|
366
|
+
this.value = this.defaultValue.map((v) => this.clampAndRoundValue(v));
|
|
367
|
+
}
|
|
368
|
+
if (changedProperties.has("min") ||
|
|
369
|
+
changedProperties.has("max") ||
|
|
370
|
+
changedProperties.has("step")) {
|
|
371
|
+
this._value = this._value.map((v) => this.clampAndRoundValue(v));
|
|
372
|
+
}
|
|
373
|
+
if (changedProperties.has("multiple") && this.multiple) {
|
|
374
|
+
// When switching to multiple mode, ensure that we have two values
|
|
375
|
+
if (this._value.length === 1) {
|
|
376
|
+
this._value = [this.min, this._value[0]];
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
else if (changedProperties.has("multiple") && !this.multiple) {
|
|
380
|
+
// When switching to single mode, keep only the lower value
|
|
381
|
+
this._value = [this.valueLow];
|
|
363
382
|
}
|
|
364
|
-
return inputs[0].value;
|
|
365
383
|
}
|
|
366
|
-
|
|
367
|
-
|
|
384
|
+
updateStyles() {
|
|
385
|
+
const normalizedRange = this.getNormalizedRange();
|
|
386
|
+
this.container?.style.setProperty("--low", normalizedRange[0].toString());
|
|
387
|
+
this.container?.style.setProperty("--high", normalizedRange[1].toString());
|
|
388
|
+
const inputs = this.multiple
|
|
389
|
+
? [this.inputBase, this.inputGhost]
|
|
390
|
+
: [this.inputBase];
|
|
391
|
+
inputs.forEach((input) => {
|
|
392
|
+
const output = input.id === "input-base" ? this.outputBase : this.outputGhost;
|
|
393
|
+
const normalizedValue = this.getNormalizedValue(input.valueAsNumber);
|
|
394
|
+
output.style.setProperty("--value", normalizedValue.toString());
|
|
395
|
+
output.value = this.formatValue(input.valueAsNumber);
|
|
396
|
+
});
|
|
368
397
|
}
|
|
369
|
-
|
|
370
|
-
|
|
398
|
+
clampAndRoundValue(value) {
|
|
399
|
+
const clampedValue = clamp(value, this.min, this.max);
|
|
400
|
+
const roundedValue = Math.round((clampedValue - this.min) / this.step) * this.step + this.min;
|
|
401
|
+
return roundedValue;
|
|
371
402
|
}
|
|
372
|
-
|
|
373
|
-
|
|
403
|
+
handleInput(e) {
|
|
404
|
+
e.stopPropagation();
|
|
405
|
+
if (this.multiple) {
|
|
406
|
+
this.value = [this.inputBase.valueAsNumber, this.inputGhost.valueAsNumber];
|
|
407
|
+
}
|
|
408
|
+
else {
|
|
409
|
+
this.value = [this.inputBase.valueAsNumber];
|
|
410
|
+
}
|
|
411
|
+
this.dispatchEvent(new CustomEvent("input", {
|
|
412
|
+
composed: true,
|
|
413
|
+
bubbles: true,
|
|
414
|
+
detail: { value: this.value, valueAsArray: this.valueAsArray },
|
|
415
|
+
}));
|
|
374
416
|
}
|
|
375
|
-
|
|
417
|
+
getNormalizedValue(value) {
|
|
376
418
|
return (value - this.min) / (this.max - this.min);
|
|
377
419
|
}
|
|
378
|
-
|
|
420
|
+
getNormalizedRange() {
|
|
379
421
|
if (this.multiple) {
|
|
380
422
|
return this.valueAsArray
|
|
381
|
-
.map((value) => this.
|
|
423
|
+
.map((value) => this.getNormalizedValue(value))
|
|
382
424
|
.sort((a, b) => a - b);
|
|
383
425
|
}
|
|
384
|
-
return [0, this.
|
|
426
|
+
return [0, this.getNormalizedValue(this.valueAsArray[0])];
|
|
385
427
|
}
|
|
386
428
|
/**
|
|
387
|
-
*
|
|
388
|
-
*
|
|
429
|
+
* This event handler is only applied to the "base" input element and only when in "multiple" mode.
|
|
430
|
+
* It handles pointer events on the *track* and the thumb.
|
|
431
|
+
* This method determines if the interaction was closer to the base or the ghost input.
|
|
389
432
|
*/
|
|
390
|
-
|
|
433
|
+
handlePointerDown(e) {
|
|
391
434
|
const clickValue = this.min + ((this.max - this.min) * e.offsetX) / this.offsetWidth;
|
|
392
435
|
const middleValue = (this.valueAsArray[0] + this.valueAsArray[1]) / 2;
|
|
393
436
|
if ((e.target.valueAsNumber === this.valueLow) ===
|
|
@@ -396,8 +439,7 @@ class LeuRange extends LeuElement {
|
|
|
396
439
|
* As the pointerdown event is fired before the input event, we first overwrite the value
|
|
397
440
|
* of the input element that was not clicked on. The active input element will update itself.
|
|
398
441
|
*/
|
|
399
|
-
|
|
400
|
-
this._getGhostInput().value = e.target.value;
|
|
442
|
+
this.inputGhost.value = e.target.value;
|
|
401
443
|
}
|
|
402
444
|
}
|
|
403
445
|
formatValue(value) {
|
|
@@ -413,18 +455,19 @@ class LeuRange extends LeuElement {
|
|
|
413
455
|
return html `<div class="ticks">
|
|
414
456
|
${Array.from({ length: (this.max - this.min) / this.step + 1 }, (_, i) => this.min + i * this.step).map((tick) => html `<span
|
|
415
457
|
class="tick"
|
|
416
|
-
style="left: ${this.
|
|
458
|
+
style="left: ${this.getNormalizedValue(tick) * 100}%"
|
|
417
459
|
></span>`)}
|
|
418
460
|
</div>`;
|
|
419
461
|
}
|
|
420
462
|
render() {
|
|
421
463
|
const inputs = this.multiple ? ["base", "ghost"] : ["base"];
|
|
422
|
-
const { multiple, disabled, label,
|
|
464
|
+
const { multiple, disabled, label, valueAsArray } = this;
|
|
423
465
|
return html `
|
|
424
466
|
<div
|
|
467
|
+
id="container"
|
|
425
468
|
class="container"
|
|
426
|
-
role=${multiple ? "group" : undefined}
|
|
427
|
-
aria-labelledby=${multiple ? "group-label" : undefined}
|
|
469
|
+
role=${ifDefined(multiple ? "group" : undefined)}
|
|
470
|
+
aria-labelledby=${ifDefined(multiple ? "group-label" : undefined)}
|
|
428
471
|
>
|
|
429
472
|
${multiple
|
|
430
473
|
? html `<span id="group-label" class="label">${label}</span>`
|
|
@@ -433,15 +476,15 @@ class LeuRange extends LeuElement {
|
|
|
433
476
|
${inputs.map((type, index) => html `<output
|
|
434
477
|
class="output"
|
|
435
478
|
for="input-${type}"
|
|
436
|
-
value=${this.formatValue(
|
|
479
|
+
value=${this.formatValue(valueAsArray[index])}
|
|
437
480
|
></output>`)}
|
|
438
481
|
</div>
|
|
439
482
|
<div class="inputs">
|
|
440
483
|
${inputs.map((type, index) => html `
|
|
441
484
|
<input
|
|
442
|
-
@input=${
|
|
485
|
+
@input=${this.handleInput}
|
|
443
486
|
@pointerdown=${multiple && !disabled && index === 0
|
|
444
|
-
? this.
|
|
487
|
+
? this.handlePointerDown
|
|
445
488
|
: undefined}
|
|
446
489
|
type="range"
|
|
447
490
|
class="range range--${type}"
|
|
@@ -450,9 +493,9 @@ class LeuRange extends LeuElement {
|
|
|
450
493
|
min=${this.min}
|
|
451
494
|
max=${this.max}
|
|
452
495
|
step=${this.step}
|
|
453
|
-
aria-label=${multiple ? RANGE_LABELS[index] : undefined}
|
|
496
|
+
aria-label=${ifDefined(multiple ? RANGE_LABELS[index] : undefined)}
|
|
454
497
|
?disabled=${disabled}
|
|
455
|
-
.value=${
|
|
498
|
+
.value=${valueAsArray[index].toString()}
|
|
456
499
|
/>
|
|
457
500
|
`)}
|
|
458
501
|
${this.renderTicks()}
|
|
@@ -477,7 +520,11 @@ LeuRange.shadowRootOptions = {
|
|
|
477
520
|
delegatesFocus: true,
|
|
478
521
|
};
|
|
479
522
|
__decorate([
|
|
480
|
-
property({
|
|
523
|
+
property({
|
|
524
|
+
converter: defaultValueConverter,
|
|
525
|
+
attribute: "value",
|
|
526
|
+
reflect: true,
|
|
527
|
+
})
|
|
481
528
|
], LeuRange.prototype, "defaultValue", void 0);
|
|
482
529
|
__decorate([
|
|
483
530
|
property({ type: Number, reflect: true })
|
|
@@ -518,5 +565,23 @@ __decorate([
|
|
|
518
565
|
__decorate([
|
|
519
566
|
property({ attribute: false })
|
|
520
567
|
], LeuRange.prototype, "valueFormatter", void 0);
|
|
568
|
+
__decorate([
|
|
569
|
+
property({ attribute: false })
|
|
570
|
+
], LeuRange.prototype, "value", null);
|
|
571
|
+
__decorate([
|
|
572
|
+
query("#container")
|
|
573
|
+
], LeuRange.prototype, "container", void 0);
|
|
574
|
+
__decorate([
|
|
575
|
+
query("#input-base")
|
|
576
|
+
], LeuRange.prototype, "inputBase", void 0);
|
|
577
|
+
__decorate([
|
|
578
|
+
query("#input-ghost")
|
|
579
|
+
], LeuRange.prototype, "inputGhost", void 0);
|
|
580
|
+
__decorate([
|
|
581
|
+
query("output[for=input-base]")
|
|
582
|
+
], LeuRange.prototype, "outputBase", void 0);
|
|
583
|
+
__decorate([
|
|
584
|
+
query("output[for=input-ghost]")
|
|
585
|
+
], LeuRange.prototype, "outputGhost", void 0);
|
|
521
586
|
|
|
522
587
|
export { LeuRange };
|
package/dist/ScrollTop.js
CHANGED
|
@@ -2,55 +2,49 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
|
|
|
2
2
|
import { css, html } from 'lit';
|
|
3
3
|
import { classMap } from 'lit/directives/class-map.js';
|
|
4
4
|
import { state } from 'lit/decorators.js';
|
|
5
|
-
import { L as LeuElement } from './LeuElement-
|
|
5
|
+
import { L as LeuElement } from './LeuElement-BfXSO7MN.js';
|
|
6
6
|
import { LeuButton } from './Button.js';
|
|
7
7
|
import { LeuIcon } from './Icon.js';
|
|
8
|
+
import { t as throttle } from './utils-DBGsNSJW.js';
|
|
8
9
|
import 'lit/directives/if-defined.js';
|
|
9
10
|
import './hasSlotController-Bm2tipvG.js';
|
|
10
11
|
|
|
11
|
-
/**
|
|
12
|
-
* Return a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked.
|
|
13
|
-
* @param {Function} func - Your function
|
|
14
|
-
* @param {Number} timeout - Default is 500 ms
|
|
15
|
-
* @returns {Function} - Your function wrapped in a timeout function
|
|
16
|
-
*/
|
|
17
|
-
/**
|
|
18
|
-
* Return a throttled function that only invokes func at most once per every wait milliseconds.
|
|
19
|
-
* @param {Function} func - Your function
|
|
20
|
-
* @param {Number} timeout - Default is 500 ms
|
|
21
|
-
* @returns {Function} - Your function wrapped in a timeout function
|
|
22
|
-
*/
|
|
23
|
-
const throttle = function throttle(func, timeout = 500) {
|
|
24
|
-
let timer = null;
|
|
25
|
-
return (...args) => {
|
|
26
|
-
if (timer === null) {
|
|
27
|
-
func(...args);
|
|
28
|
-
timer = setTimeout(() => {
|
|
29
|
-
timer = null;
|
|
30
|
-
}, timeout);
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
};
|
|
34
|
-
|
|
35
12
|
var css_248z = css`.scroll-top {
|
|
36
13
|
overflow: hidden;
|
|
37
14
|
position: fixed;
|
|
15
|
+
z-index: var(--leu-z-index-scroll-top);
|
|
16
|
+
|
|
17
|
+
--_space: 1.5rem;
|
|
38
18
|
right: 1.5rem;
|
|
39
|
-
|
|
40
|
-
bottom:
|
|
19
|
+
right: var(--_space);
|
|
20
|
+
bottom: 1.5rem;
|
|
21
|
+
bottom: var(--_space);
|
|
41
22
|
|
|
42
23
|
/* show */
|
|
43
|
-
height:
|
|
24
|
+
height: 3rem;
|
|
44
25
|
pointer-events: auto;
|
|
45
26
|
transition: height, bottom 0.9s, 0.6s ease;
|
|
46
27
|
}
|
|
47
|
-
|
|
28
|
+
@media (min-width: 600px) {
|
|
29
|
+
.scroll-top {
|
|
30
|
+
--_space: 2rem;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
@media (min-width: 1024px) {
|
|
34
|
+
.scroll-top {
|
|
35
|
+
--_space: 2.5rem;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
@media (min-width: 1280px) {
|
|
39
|
+
.scroll-top {
|
|
40
|
+
--_space: 3rem;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
48
43
|
.hide {
|
|
49
44
|
height: 0;
|
|
50
45
|
pointer-events: none;
|
|
51
46
|
transition: height, top 0.9s, 0.6s ease;
|
|
52
47
|
}
|
|
53
|
-
|
|
54
48
|
@keyframes hide-animation {
|
|
55
49
|
0% {
|
|
56
50
|
transform: rotate(0deg);
|
|
@@ -60,7 +54,6 @@ var css_248z = css`.scroll-top {
|
|
|
60
54
|
transform: rotate(90deg);
|
|
61
55
|
}
|
|
62
56
|
}
|
|
63
|
-
|
|
64
57
|
.hide leu-button {
|
|
65
58
|
animation-name: hide-animation;
|
|
66
59
|
animation-duration: 0.45s;
|
package/dist/Select.js
CHANGED
|
@@ -2,7 +2,7 @@ import { css, nothing, html } from 'lit';
|
|
|
2
2
|
import { classMap } from 'lit/directives/class-map.js';
|
|
3
3
|
import { createRef, ref } from 'lit/directives/ref.js';
|
|
4
4
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
|
-
import { L as LeuElement } from './LeuElement-
|
|
5
|
+
import { L as LeuElement } from './LeuElement-BfXSO7MN.js';
|
|
6
6
|
import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
|
|
7
7
|
import { LeuButton } from './Button.js';
|
|
8
8
|
import { LeuMenu } from './Menu.js';
|
package/dist/Spinner.js
CHANGED
package/dist/Table.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { nothing, noChange, css, html } from 'lit';
|
|
2
2
|
import { classMap } from 'lit/directives/class-map.js';
|
|
3
3
|
import { createRef, ref } from 'lit/directives/ref.js';
|
|
4
|
-
import { L as LeuElement } from './LeuElement-
|
|
4
|
+
import { L as LeuElement } from './LeuElement-BfXSO7MN.js';
|
|
5
5
|
import { directive, Directive, PartType } from 'lit/directive.js';
|
|
6
6
|
import { LeuIcon } from './Icon.js';
|
|
7
7
|
import { LeuPagination } from './Pagination.js';
|
package/dist/Tag.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { _ as __decorate } from './_tslib-CNEFicEt.js';
|
|
2
2
|
import { css, html } from 'lit';
|
|
3
3
|
import { property } from 'lit/decorators.js';
|
|
4
|
-
import { L as LeuElement } from './LeuElement-
|
|
4
|
+
import { L as LeuElement } from './LeuElement-BfXSO7MN.js';
|
|
5
5
|
|
|
6
6
|
var css_248z = css`:host {
|
|
7
7
|
/* --tag-font-regular: var(--leu-font-family-regular);
|
package/dist/VisuallyHidden.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { nothing } from "lit";
|
|
1
|
+
import { nothing, PropertyValues } from "lit";
|
|
2
2
|
import { LeuElement } from "../../lib/LeuElement.js";
|
|
3
|
+
type InternalRangeValue = [number, number] | [number];
|
|
3
4
|
/**
|
|
4
5
|
* @tagname leu-range
|
|
5
6
|
*/
|
|
@@ -13,6 +14,10 @@ export declare class LeuRange extends LeuElement {
|
|
|
13
14
|
customElements?: CustomElementRegistry;
|
|
14
15
|
registry?: CustomElementRegistry;
|
|
15
16
|
};
|
|
17
|
+
/**
|
|
18
|
+
* The default value of the range slider.
|
|
19
|
+
* String input is parsed as a comma-separated list of numbers.
|
|
20
|
+
*/
|
|
16
21
|
defaultValue: number[];
|
|
17
22
|
/**
|
|
18
23
|
* The minimum value of the range slider.
|
|
@@ -69,35 +74,43 @@ export declare class LeuRange extends LeuElement {
|
|
|
69
74
|
* If provided, the prefix and suffix properties will be ignored.
|
|
70
75
|
*/
|
|
71
76
|
valueFormatter?: (value: number) => string;
|
|
72
|
-
|
|
73
|
-
protected get _inputs(): HTMLInputElement[];
|
|
74
|
-
protected _updateStyles(): void;
|
|
75
|
-
get value(): string | Array<string>;
|
|
77
|
+
protected _value: InternalRangeValue;
|
|
76
78
|
/**
|
|
77
|
-
*
|
|
78
|
-
*
|
|
79
|
-
*
|
|
79
|
+
* The value of the range slider.
|
|
80
|
+
* String input is parsed as a comma-separated list of numbers.
|
|
81
|
+
* In multiple mode, if only a single value is provided, the second handle will be set to the minimum value.
|
|
82
|
+
* In single mode, only the first value will be used.
|
|
80
83
|
*/
|
|
81
|
-
set value(value: string | Array<string>);
|
|
82
|
-
get
|
|
83
|
-
get
|
|
84
|
-
get
|
|
85
|
-
|
|
86
|
-
protected
|
|
87
|
-
protected
|
|
84
|
+
set value(value: string | number | Array<string | number>);
|
|
85
|
+
get value(): string;
|
|
86
|
+
get valueAsArray(): InternalRangeValue;
|
|
87
|
+
get valueLow(): number;
|
|
88
|
+
get valueHigh(): number;
|
|
89
|
+
protected container: HTMLDivElement;
|
|
90
|
+
protected inputBase: HTMLInputElement;
|
|
91
|
+
protected inputGhost: HTMLInputElement | null;
|
|
92
|
+
protected outputBase: HTMLOutputElement;
|
|
93
|
+
protected outputGhost: HTMLOutputElement | null;
|
|
94
|
+
updated(): void;
|
|
95
|
+
protected willUpdate(changedProperties: PropertyValues<this>): void;
|
|
96
|
+
protected updateStyles(): void;
|
|
97
|
+
protected clampAndRoundValue(value: number): number;
|
|
98
|
+
protected handleInput(e: Event & {
|
|
88
99
|
target: HTMLInputElement;
|
|
89
100
|
}): void;
|
|
90
|
-
protected
|
|
91
|
-
protected
|
|
101
|
+
protected getNormalizedValue(value: number): number;
|
|
102
|
+
protected getNormalizedRange(): number[];
|
|
92
103
|
/**
|
|
93
|
-
*
|
|
94
|
-
*
|
|
104
|
+
* This event handler is only applied to the "base" input element and only when in "multiple" mode.
|
|
105
|
+
* It handles pointer events on the *track* and the thumb.
|
|
106
|
+
* This method determines if the interaction was closer to the base or the ghost input.
|
|
95
107
|
*/
|
|
96
|
-
protected
|
|
108
|
+
protected handlePointerDown(e: PointerEvent & {
|
|
97
109
|
target: HTMLInputElement;
|
|
98
110
|
}): void;
|
|
99
111
|
protected formatValue(value: number): string;
|
|
100
112
|
protected renderTicks(): typeof nothing | import("lit-html").TemplateResult<1>;
|
|
101
113
|
render(): import("lit-html").TemplateResult<1>;
|
|
102
114
|
}
|
|
115
|
+
export {};
|
|
103
116
|
//# sourceMappingURL=Range.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Range.d.ts","sourceRoot":"","sources":["../../../src/components/range/Range.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"Range.d.ts","sourceRoot":"","sources":["../../../src/components/range/Range.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAKnD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAGpD,KAAK,kBAAkB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;AAarD;;GAEG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,MAAM,iCAA8B;IAE3C,MAAM,CAAC,iBAAiB;;;;;;;MAGvB;IAED;;;OAGG;IAMH,YAAY,WAAO;IAEnB;;OAEG;IAEH,GAAG,EAAE,MAAM,CAAI;IAEf;;OAEG;IAEH,GAAG,EAAE,MAAM,CAAM;IAEjB;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAI;IAGhB,IAAI,EAAE,MAAM,CAAK;IAEjB;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAK;IAElB;;;;OAIG;IAEH,SAAS,EAAE,OAAO,CAAQ;IAE1B;;OAEG;IAEH,QAAQ,EAAE,OAAO,CAAQ;IAEzB;;OAEG;IAEH,QAAQ,EAAE,OAAO,CAAQ;IAEzB;;;OAGG;IAEH,SAAS,EAAE,OAAO,CAAQ;IAE1B;;OAEG;IAEH,eAAe,EAAE,OAAO,CAAQ;IAEhC;;;OAGG;IAEH,MAAM,EAAE,MAAM,CAAK;IAEnB;;;OAGG;IAEH,MAAM,EAAE,MAAM,CAAK;IAEnB;;;OAGG;IAEH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAE1C,SAAS,CAAC,MAAM,EAAE,kBAAkB,CAEb;IAEvB;;;;;OAKG;IACH,IACI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,EA2BxD;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,YAAY,IAAI,kBAAkB,CAErC;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,SAAS,IAAI,MAAM,CAEtB;IAGD,SAAS,CAAC,SAAS,EAAE,cAAc,CAAA;IAGnC,SAAS,CAAC,SAAS,EAAE,gBAAgB,CAAA;IAGrC,SAAS,CAAC,UAAU,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAG7C,SAAS,CAAC,UAAU,EAAE,iBAAiB,CAAA;IAGvC,SAAS,CAAC,WAAW,EAAE,iBAAiB,GAAG,IAAI,CAAA;IAE/C,OAAO;IAIP,SAAS,CAAC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IA8BnE,SAAS,CAAC,YAAY;IAkBtB,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM;IAQ1C,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,GAAG;QAAE,MAAM,EAAE,gBAAgB,CAAA;KAAE;IAkB7D,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM;IAI1C,SAAS,CAAC,kBAAkB;IAU5B;;;;OAIG;IACH,SAAS,CAAC,iBAAiB,CAAC,CAAC,EAAE,YAAY,GAAG;QAAE,MAAM,EAAE,gBAAgB,CAAA;KAAE;IAiB1E,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM;IAQnC,SAAS,CAAC,WAAW;IAmBrB,MAAM;CA+DP"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"range.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/range/stories/range.stories.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"range.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/range/stories/range.stories.ts"],"names":[],"mappings":"AAKA,OAAO,iBAAiB,CAAA;AACxB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,0BAA0B,CAAA;AAEjC,KAAK,SAAS,GAAG,QAAQ,CAAA;;;;;;;;;;;;;;;AAGzB,wBAa2B;AAuB3B,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;CAGnB,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;CAGpB,CAAA;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;CAGnB,CAAA;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;CAQvB,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;CAGpB,CAAA;AAED,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;CAGhB,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;CAUjB,CAAA;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;CAUlB,CAAA;AAED,eAAO,MAAM,eAAe;;;;;;;gCAQA,MAAM;;;;;;;;;;;;;;;;CAEjC,CAAA;AAED,iBAAS,gBAAgB,CAAC,IAAI,EAAE,SAAS,wCAuDxC;AAED,eAAO,MAAM,QAAQ;;;;;;;;CAQpB,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -29,7 +29,7 @@ export { LeuSpinner } from './Spinner.js';
|
|
|
29
29
|
export { LeuTable } from './Table.js';
|
|
30
30
|
export { LeuTag } from './Tag.js';
|
|
31
31
|
export { LeuVisuallyHidden } from './VisuallyHidden.js';
|
|
32
|
-
export { L as LeuElement } from './LeuElement-
|
|
32
|
+
export { L as LeuElement } from './LeuElement-BfXSO7MN.js';
|
|
33
33
|
import './_tslib-CNEFicEt.js';
|
|
34
34
|
import 'lit';
|
|
35
35
|
import 'lit/static-html.js';
|
|
@@ -41,4 +41,5 @@ import './Chip.js';
|
|
|
41
41
|
import 'lit/directives/ref.js';
|
|
42
42
|
import 'lit/directives/live.js';
|
|
43
43
|
import '@floating-ui/dom';
|
|
44
|
+
import './utils-DBGsNSJW.js';
|
|
44
45
|
import 'lit/directive.js';
|
package/dist/leu-accordion.js
CHANGED
package/dist/leu-button-group.js
CHANGED
package/dist/leu-button.js
CHANGED
|
@@ -5,7 +5,7 @@ import 'lit/directives/class-map.js';
|
|
|
5
5
|
import 'lit/directives/if-defined.js';
|
|
6
6
|
import 'lit/decorators.js';
|
|
7
7
|
import './Icon.js';
|
|
8
|
-
import './LeuElement-
|
|
8
|
+
import './LeuElement-BfXSO7MN.js';
|
|
9
9
|
import './hasSlotController-Bm2tipvG.js';
|
|
10
10
|
|
|
11
11
|
LeuButton.define("leu-button");
|
|
@@ -2,7 +2,7 @@ import { LeuChartWrapper } from './ChartWrapper.js';
|
|
|
2
2
|
import './_tslib-CNEFicEt.js';
|
|
3
3
|
import 'lit';
|
|
4
4
|
import 'lit/decorators.js';
|
|
5
|
-
import './LeuElement-
|
|
5
|
+
import './LeuElement-BfXSO7MN.js';
|
|
6
6
|
import './hasSlotController-Bm2tipvG.js';
|
|
7
7
|
import './Spinner.js';
|
|
8
8
|
|
package/dist/leu-checkbox.js
CHANGED
package/dist/leu-chip-group.js
CHANGED
|
@@ -2,7 +2,7 @@ import { LeuChipGroup } from './ChipGroup.js';
|
|
|
2
2
|
import './_tslib-CNEFicEt.js';
|
|
3
3
|
import 'lit/static-html.js';
|
|
4
4
|
import 'lit/decorators.js';
|
|
5
|
-
import './LeuElement-
|
|
5
|
+
import './LeuElement-BfXSO7MN.js';
|
|
6
6
|
import 'lit';
|
|
7
7
|
import './ChipSelectable.js';
|
|
8
8
|
import './Chip.js';
|