@m1z23r/ngx-ui 1.1.60 → 1.1.61
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.
|
@@ -4169,11 +4169,17 @@ class RangeSliderComponent {
|
|
|
4169
4169
|
value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
4170
4170
|
valueCommit = output();
|
|
4171
4171
|
trackEl = viewChild('track', ...(ngDevMode ? [{ debugName: "trackEl" }] : []));
|
|
4172
|
+
startBubbleEl = viewChild('startBubble', ...(ngDevMode ? [{ debugName: "startBubbleEl" }] : []));
|
|
4173
|
+
endBubbleEl = viewChild('endBubble', ...(ngDevMode ? [{ debugName: "endBubbleEl" }] : []));
|
|
4172
4174
|
startMs = signal(0, ...(ngDevMode ? [{ debugName: "startMs" }] : []));
|
|
4173
4175
|
endMs = signal(0, ...(ngDevMode ? [{ debugName: "endMs" }] : []));
|
|
4174
4176
|
dragging = signal(null, ...(ngDevMode ? [{ debugName: "dragging" }] : []));
|
|
4175
4177
|
focusedThumb = signal(null, ...(ngDevMode ? [{ debugName: "focusedThumb" }] : []));
|
|
4176
4178
|
hoveredThumb = signal(null, ...(ngDevMode ? [{ debugName: "hoveredThumb" }] : []));
|
|
4179
|
+
trackWidth = signal(0, ...(ngDevMode ? [{ debugName: "trackWidth" }] : []));
|
|
4180
|
+
startBubbleWidth = signal(0, ...(ngDevMode ? [{ debugName: "startBubbleWidth" }] : []));
|
|
4181
|
+
endBubbleWidth = signal(0, ...(ngDevMode ? [{ debugName: "endBubbleWidth" }] : []));
|
|
4182
|
+
platformId = inject(PLATFORM_ID);
|
|
4177
4183
|
lastEmitted = null;
|
|
4178
4184
|
minMs = computed(() => this.min().getTime(), ...(ngDevMode ? [{ debugName: "minMs" }] : []));
|
|
4179
4185
|
maxMs = computed(() => this.max().getTime(), ...(ngDevMode ? [{ debugName: "maxMs" }] : []));
|
|
@@ -4191,6 +4197,9 @@ class RangeSliderComponent {
|
|
|
4191
4197
|
}, ...(ngDevMode ? [{ debugName: "fillStyle" }] : []));
|
|
4192
4198
|
startLabel = computed(() => this.formatMs(this.startMs()), ...(ngDevMode ? [{ debugName: "startLabel" }] : []));
|
|
4193
4199
|
endLabel = computed(() => this.formatMs(this.endMs()), ...(ngDevMode ? [{ debugName: "endLabel" }] : []));
|
|
4200
|
+
// Horizontal px offset that keeps each bubble inside the track (edge-aware).
|
|
4201
|
+
startShift = computed(() => this.bubbleShift(this.startPercent(), this.startBubbleWidth()), ...(ngDevMode ? [{ debugName: "startShift" }] : []));
|
|
4202
|
+
endShift = computed(() => this.bubbleShift(this.endPercent(), this.endBubbleWidth()), ...(ngDevMode ? [{ debugName: "endShift" }] : []));
|
|
4194
4203
|
bubbleVisible = computed(() => {
|
|
4195
4204
|
const mode = this.bubbles();
|
|
4196
4205
|
if (mode === 'never')
|
|
@@ -4224,6 +4233,39 @@ class RangeSliderComponent {
|
|
|
4224
4233
|
this.lastEmitted = null;
|
|
4225
4234
|
}
|
|
4226
4235
|
});
|
|
4236
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
4237
|
+
this.observeWidth(this.trackEl, this.trackWidth);
|
|
4238
|
+
this.observeWidth(this.startBubbleEl, this.startBubbleWidth);
|
|
4239
|
+
this.observeWidth(this.endBubbleEl, this.endBubbleWidth);
|
|
4240
|
+
}
|
|
4241
|
+
}
|
|
4242
|
+
/** Track an element's border-box width in a signal via ResizeObserver. */
|
|
4243
|
+
observeWidth(elSignal, out) {
|
|
4244
|
+
effect((onCleanup) => {
|
|
4245
|
+
const el = elSignal()?.nativeElement;
|
|
4246
|
+
if (!el) {
|
|
4247
|
+
out.set(0);
|
|
4248
|
+
return;
|
|
4249
|
+
}
|
|
4250
|
+
const update = () => out.set(el.offsetWidth);
|
|
4251
|
+
update();
|
|
4252
|
+
const ro = new ResizeObserver(update);
|
|
4253
|
+
ro.observe(el);
|
|
4254
|
+
onCleanup(() => ro.disconnect());
|
|
4255
|
+
});
|
|
4256
|
+
}
|
|
4257
|
+
/** Offset (px) to shift a bubble so it stays within the track bounds. */
|
|
4258
|
+
bubbleShift(pct, bubbleWidth) {
|
|
4259
|
+
const trackW = this.trackWidth();
|
|
4260
|
+
if (trackW <= 0 || bubbleWidth <= 0)
|
|
4261
|
+
return 0;
|
|
4262
|
+
const half = bubbleWidth / 2;
|
|
4263
|
+
const center = (pct / 100) * trackW;
|
|
4264
|
+
if (center - half < 0)
|
|
4265
|
+
return half - center;
|
|
4266
|
+
if (center + half > trackW)
|
|
4267
|
+
return trackW - center - half;
|
|
4268
|
+
return 0;
|
|
4227
4269
|
}
|
|
4228
4270
|
/** Push current thumb state into the value model (live, during interaction). */
|
|
4229
4271
|
writeValue() {
|
|
@@ -4443,12 +4485,12 @@ class RangeSliderComponent {
|
|
|
4443
4485
|
.replace(/ss/g, pad(date.getSeconds()));
|
|
4444
4486
|
}
|
|
4445
4487
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: RangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4446
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: RangeSliderComponent, isStandalone: true, selector: "ui-range-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, bubbles: { classPropertyName: "bubbles", publicName: "bubbles", isSignal: true, isRequired: false, transformFunction: null }, showRange: { classPropertyName: "showRange", publicName: "showRange", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueCommit: "valueCommit" }, viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "@let isDisabled = disabled();\n@let bubbleVis = bubbleVisible();\n@let rangeOn = showRange();\n@let startPct = startPercent();\n@let endPct = endPercent();\n@let fill = fillStyle();\n\n<div [class]=\"rootClasses()\">\n @if (label()) {\n <label class=\"ui-range-slider__label\">{{ label() }}</label>\n }\n\n <div\n #track\n class=\"ui-range-slider__track\"\n (pointerdown)=\"onTrackPointerDown($event)\"\n >\n <div class=\"ui-range-slider__fill\" [style.left]=\"fill.left\" [style.width]=\"fill.width\"></div>\n\n <div\n class=\"ui-range-slider__thumb ui-range-slider__thumb--start\"\n role=\"slider\"\n tabindex=\"0\"\n data-thumb=\"start\"\n [attr.aria-valuemin]=\"minMs()\"\n [attr.aria-valuemax]=\"endMs()\"\n [attr.aria-valuenow]=\"startMs()\"\n [attr.aria-valuetext]=\"startLabel()\"\n [attr.aria-disabled]=\"isDisabled\"\n aria-label=\"Start\"\n aria-orientation=\"horizontal\"\n [style.left.%]=\"startPct\"\n (pointerdown)=\"onThumbPointerDown($event, 'start')\"\n (pointermove)=\"onThumbPointerMove($event, 'start')\"\n (pointerup)=\"onThumbPointerUp($event, 'start')\"\n (pointercancel)=\"onThumbPointerUp($event, 'start')\"\n (pointerenter)=\"onThumbEnter('start')\"\n (pointerleave)=\"onThumbLeave()\"\n (keydown)=\"onThumbKeyDown($event, 'start')\"\n (keyup)=\"onThumbKeyUp($event)\"\n (focus)=\"onThumbFocus('start')\"\n (blur)=\"onThumbBlur()\"\n >\n @if (bubbleVis.start) {\n <span
|
|
4488
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: RangeSliderComponent, isStandalone: true, selector: "ui-range-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, bubbles: { classPropertyName: "bubbles", publicName: "bubbles", isSignal: true, isRequired: false, transformFunction: null }, showRange: { classPropertyName: "showRange", publicName: "showRange", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueCommit: "valueCommit" }, viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["track"], descendants: true, isSignal: true }, { propertyName: "startBubbleEl", first: true, predicate: ["startBubble"], descendants: true, isSignal: true }, { propertyName: "endBubbleEl", first: true, predicate: ["endBubble"], descendants: true, isSignal: true }], ngImport: i0, template: "@let isDisabled = disabled();\n@let bubbleVis = bubbleVisible();\n@let rangeOn = showRange();\n@let startPct = startPercent();\n@let endPct = endPercent();\n@let fill = fillStyle();\n\n<div [class]=\"rootClasses()\">\n @if (label()) {\n <label class=\"ui-range-slider__label\">{{ label() }}</label>\n }\n\n <div\n #track\n class=\"ui-range-slider__track\"\n (pointerdown)=\"onTrackPointerDown($event)\"\n >\n <div class=\"ui-range-slider__fill\" [style.left]=\"fill.left\" [style.width]=\"fill.width\"></div>\n\n <div\n class=\"ui-range-slider__thumb ui-range-slider__thumb--start\"\n role=\"slider\"\n tabindex=\"0\"\n data-thumb=\"start\"\n [attr.aria-valuemin]=\"minMs()\"\n [attr.aria-valuemax]=\"endMs()\"\n [attr.aria-valuenow]=\"startMs()\"\n [attr.aria-valuetext]=\"startLabel()\"\n [attr.aria-disabled]=\"isDisabled\"\n aria-label=\"Start\"\n aria-orientation=\"horizontal\"\n [style.left.%]=\"startPct\"\n (pointerdown)=\"onThumbPointerDown($event, 'start')\"\n (pointermove)=\"onThumbPointerMove($event, 'start')\"\n (pointerup)=\"onThumbPointerUp($event, 'start')\"\n (pointercancel)=\"onThumbPointerUp($event, 'start')\"\n (pointerenter)=\"onThumbEnter('start')\"\n (pointerleave)=\"onThumbLeave()\"\n (keydown)=\"onThumbKeyDown($event, 'start')\"\n (keyup)=\"onThumbKeyUp($event)\"\n (focus)=\"onThumbFocus('start')\"\n (blur)=\"onThumbBlur()\"\n >\n @if (bubbleVis.start) {\n <span\n #startBubble\n class=\"ui-range-slider__bubble\"\n [style.--bubble-shift]=\"startShift() + 'px'\"\n >{{ startLabel() }}</span>\n }\n </div>\n\n <div\n class=\"ui-range-slider__thumb ui-range-slider__thumb--end\"\n role=\"slider\"\n tabindex=\"0\"\n data-thumb=\"end\"\n [attr.aria-valuemin]=\"startMs()\"\n [attr.aria-valuemax]=\"maxMs()\"\n [attr.aria-valuenow]=\"endMs()\"\n [attr.aria-valuetext]=\"endLabel()\"\n [attr.aria-disabled]=\"isDisabled\"\n aria-label=\"End\"\n aria-orientation=\"horizontal\"\n [style.left.%]=\"endPct\"\n (pointerdown)=\"onThumbPointerDown($event, 'end')\"\n (pointermove)=\"onThumbPointerMove($event, 'end')\"\n (pointerup)=\"onThumbPointerUp($event, 'end')\"\n (pointercancel)=\"onThumbPointerUp($event, 'end')\"\n (pointerenter)=\"onThumbEnter('end')\"\n (pointerleave)=\"onThumbLeave()\"\n (keydown)=\"onThumbKeyDown($event, 'end')\"\n (keyup)=\"onThumbKeyUp($event)\"\n (focus)=\"onThumbFocus('end')\"\n (blur)=\"onThumbBlur()\"\n >\n @if (bubbleVis.end) {\n <span\n #endBubble\n class=\"ui-range-slider__bubble\"\n [style.--bubble-shift]=\"endShift() + 'px'\"\n >{{ endLabel() }}</span>\n }\n </div>\n </div>\n\n @if (rangeOn) {\n <div class=\"ui-range-slider__range\">\n <span>{{ startLabel() }}</span>\n <span class=\"ui-range-slider__range-arrow\" aria-hidden=\"true\">\u2192</span>\n <span>{{ endLabel() }}</span>\n </div>\n }\n</div>\n", styles: [":host{display:block}.ui-range-slider{display:flex;flex-direction:column;gap:var(--ui-spacing-sm);user-select:none;-webkit-user-select:none}.ui-range-slider__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-range-slider__track{position:relative;width:100%;background:var(--ui-bg-tertiary);border-radius:var(--ui-radius-xl);cursor:pointer;touch-action:none}.ui-range-slider__fill{position:absolute;top:0;bottom:0;background:var(--ui-primary);border-radius:var(--ui-radius-xl);pointer-events:none}.ui-range-slider__thumb{position:absolute;top:50%;border-radius:50%;background:var(--ui-primary);border:2px solid var(--ui-bg);box-shadow:var(--ui-shadow-sm);cursor:grab;outline:none;transition:box-shadow var(--ui-transition-fast),transform var(--ui-transition-fast);touch-action:none}.ui-range-slider__thumb:hover:not([aria-disabled=true]){transform:translate(-50%,-50%) scale(1.1)}.ui-range-slider__thumb:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-range-slider__thumb:active:not([aria-disabled=true]){cursor:grabbing;transform:translate(-50%,-50%) scale(1.15);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent);z-index:3}.ui-range-slider__thumb{transform:translate(-50%,-50%)}.ui-range-slider__bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(calc(-50% + var(--bubble-shift, 0px)));background:var(--ui-bg);border:1px solid var(--ui-border);color:var(--ui-text);font-size:var(--ui-font-xs);font-weight:500;padding:2px var(--ui-spacing-sm);border-radius:var(--ui-radius-sm);box-shadow:var(--ui-shadow-sm);white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums;animation:ui-range-slider-bubble-in var(--ui-transition-fast) ease-out}.ui-range-slider__bubble:after{content:\"\";position:absolute;top:100%;left:calc(50% - var(--bubble-shift, 0px));transform:translate(-50%);border:4px solid transparent;border-top-color:var(--ui-border)}.ui-range-slider__bubble:before{content:\"\";position:absolute;top:calc(100% - 1px);left:calc(50% - var(--bubble-shift, 0px));transform:translate(-50%);border:4px solid transparent;border-top-color:var(--ui-bg);z-index:1}.ui-range-slider__range{display:flex;align-items:center;gap:var(--ui-spacing-xs);font-size:var(--ui-font-sm);color:var(--ui-text-muted);font-variant-numeric:tabular-nums}.ui-range-slider__range-arrow{color:var(--ui-text-disabled)}.ui-range-slider--sm .ui-range-slider__track{height:4px}.ui-range-slider--sm .ui-range-slider__thumb{width:14px;height:14px}.ui-range-slider--md .ui-range-slider__track{height:6px}.ui-range-slider--md .ui-range-slider__thumb{width:18px;height:18px}.ui-range-slider--lg .ui-range-slider__track{height:8px}.ui-range-slider--lg .ui-range-slider__thumb{width:24px;height:24px}.ui-range-slider__track{margin-top:var(--ui-spacing-lg)}.ui-range-slider--disabled{opacity:.5}.ui-range-slider--disabled .ui-range-slider__track,.ui-range-slider--disabled .ui-range-slider__thumb{cursor:not-allowed}.ui-range-slider--disabled .ui-range-slider__thumb:hover,.ui-range-slider--disabled .ui-range-slider__thumb:active{transform:translate(-50%,-50%);box-shadow:var(--ui-shadow-sm)}@keyframes ui-range-slider-bubble-in{0%{opacity:0;transform:translate(calc(-50% + var(--bubble-shift, 0px))) translateY(4px)}to{opacity:1;transform:translate(calc(-50% + var(--bubble-shift, 0px))) translateY(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4447
4489
|
}
|
|
4448
4490
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: RangeSliderComponent, decorators: [{
|
|
4449
4491
|
type: Component,
|
|
4450
|
-
args: [{ selector: 'ui-range-slider', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let isDisabled = disabled();\n@let bubbleVis = bubbleVisible();\n@let rangeOn = showRange();\n@let startPct = startPercent();\n@let endPct = endPercent();\n@let fill = fillStyle();\n\n<div [class]=\"rootClasses()\">\n @if (label()) {\n <label class=\"ui-range-slider__label\">{{ label() }}</label>\n }\n\n <div\n #track\n class=\"ui-range-slider__track\"\n (pointerdown)=\"onTrackPointerDown($event)\"\n >\n <div class=\"ui-range-slider__fill\" [style.left]=\"fill.left\" [style.width]=\"fill.width\"></div>\n\n <div\n class=\"ui-range-slider__thumb ui-range-slider__thumb--start\"\n role=\"slider\"\n tabindex=\"0\"\n data-thumb=\"start\"\n [attr.aria-valuemin]=\"minMs()\"\n [attr.aria-valuemax]=\"endMs()\"\n [attr.aria-valuenow]=\"startMs()\"\n [attr.aria-valuetext]=\"startLabel()\"\n [attr.aria-disabled]=\"isDisabled\"\n aria-label=\"Start\"\n aria-orientation=\"horizontal\"\n [style.left.%]=\"startPct\"\n (pointerdown)=\"onThumbPointerDown($event, 'start')\"\n (pointermove)=\"onThumbPointerMove($event, 'start')\"\n (pointerup)=\"onThumbPointerUp($event, 'start')\"\n (pointercancel)=\"onThumbPointerUp($event, 'start')\"\n (pointerenter)=\"onThumbEnter('start')\"\n (pointerleave)=\"onThumbLeave()\"\n (keydown)=\"onThumbKeyDown($event, 'start')\"\n (keyup)=\"onThumbKeyUp($event)\"\n (focus)=\"onThumbFocus('start')\"\n (blur)=\"onThumbBlur()\"\n >\n @if (bubbleVis.start) {\n <span
|
|
4451
|
-
}], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: true }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], bubbles: [{ type: i0.Input, args: [{ isSignal: true, alias: "bubbles", required: false }] }], showRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRange", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueCommit: [{ type: i0.Output, args: ["valueCommit"] }], trackEl: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
|
|
4492
|
+
args: [{ selector: 'ui-range-slider', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let isDisabled = disabled();\n@let bubbleVis = bubbleVisible();\n@let rangeOn = showRange();\n@let startPct = startPercent();\n@let endPct = endPercent();\n@let fill = fillStyle();\n\n<div [class]=\"rootClasses()\">\n @if (label()) {\n <label class=\"ui-range-slider__label\">{{ label() }}</label>\n }\n\n <div\n #track\n class=\"ui-range-slider__track\"\n (pointerdown)=\"onTrackPointerDown($event)\"\n >\n <div class=\"ui-range-slider__fill\" [style.left]=\"fill.left\" [style.width]=\"fill.width\"></div>\n\n <div\n class=\"ui-range-slider__thumb ui-range-slider__thumb--start\"\n role=\"slider\"\n tabindex=\"0\"\n data-thumb=\"start\"\n [attr.aria-valuemin]=\"minMs()\"\n [attr.aria-valuemax]=\"endMs()\"\n [attr.aria-valuenow]=\"startMs()\"\n [attr.aria-valuetext]=\"startLabel()\"\n [attr.aria-disabled]=\"isDisabled\"\n aria-label=\"Start\"\n aria-orientation=\"horizontal\"\n [style.left.%]=\"startPct\"\n (pointerdown)=\"onThumbPointerDown($event, 'start')\"\n (pointermove)=\"onThumbPointerMove($event, 'start')\"\n (pointerup)=\"onThumbPointerUp($event, 'start')\"\n (pointercancel)=\"onThumbPointerUp($event, 'start')\"\n (pointerenter)=\"onThumbEnter('start')\"\n (pointerleave)=\"onThumbLeave()\"\n (keydown)=\"onThumbKeyDown($event, 'start')\"\n (keyup)=\"onThumbKeyUp($event)\"\n (focus)=\"onThumbFocus('start')\"\n (blur)=\"onThumbBlur()\"\n >\n @if (bubbleVis.start) {\n <span\n #startBubble\n class=\"ui-range-slider__bubble\"\n [style.--bubble-shift]=\"startShift() + 'px'\"\n >{{ startLabel() }}</span>\n }\n </div>\n\n <div\n class=\"ui-range-slider__thumb ui-range-slider__thumb--end\"\n role=\"slider\"\n tabindex=\"0\"\n data-thumb=\"end\"\n [attr.aria-valuemin]=\"startMs()\"\n [attr.aria-valuemax]=\"maxMs()\"\n [attr.aria-valuenow]=\"endMs()\"\n [attr.aria-valuetext]=\"endLabel()\"\n [attr.aria-disabled]=\"isDisabled\"\n aria-label=\"End\"\n aria-orientation=\"horizontal\"\n [style.left.%]=\"endPct\"\n (pointerdown)=\"onThumbPointerDown($event, 'end')\"\n (pointermove)=\"onThumbPointerMove($event, 'end')\"\n (pointerup)=\"onThumbPointerUp($event, 'end')\"\n (pointercancel)=\"onThumbPointerUp($event, 'end')\"\n (pointerenter)=\"onThumbEnter('end')\"\n (pointerleave)=\"onThumbLeave()\"\n (keydown)=\"onThumbKeyDown($event, 'end')\"\n (keyup)=\"onThumbKeyUp($event)\"\n (focus)=\"onThumbFocus('end')\"\n (blur)=\"onThumbBlur()\"\n >\n @if (bubbleVis.end) {\n <span\n #endBubble\n class=\"ui-range-slider__bubble\"\n [style.--bubble-shift]=\"endShift() + 'px'\"\n >{{ endLabel() }}</span>\n }\n </div>\n </div>\n\n @if (rangeOn) {\n <div class=\"ui-range-slider__range\">\n <span>{{ startLabel() }}</span>\n <span class=\"ui-range-slider__range-arrow\" aria-hidden=\"true\">\u2192</span>\n <span>{{ endLabel() }}</span>\n </div>\n }\n</div>\n", styles: [":host{display:block}.ui-range-slider{display:flex;flex-direction:column;gap:var(--ui-spacing-sm);user-select:none;-webkit-user-select:none}.ui-range-slider__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-range-slider__track{position:relative;width:100%;background:var(--ui-bg-tertiary);border-radius:var(--ui-radius-xl);cursor:pointer;touch-action:none}.ui-range-slider__fill{position:absolute;top:0;bottom:0;background:var(--ui-primary);border-radius:var(--ui-radius-xl);pointer-events:none}.ui-range-slider__thumb{position:absolute;top:50%;border-radius:50%;background:var(--ui-primary);border:2px solid var(--ui-bg);box-shadow:var(--ui-shadow-sm);cursor:grab;outline:none;transition:box-shadow var(--ui-transition-fast),transform var(--ui-transition-fast);touch-action:none}.ui-range-slider__thumb:hover:not([aria-disabled=true]){transform:translate(-50%,-50%) scale(1.1)}.ui-range-slider__thumb:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-range-slider__thumb:active:not([aria-disabled=true]){cursor:grabbing;transform:translate(-50%,-50%) scale(1.15);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent);z-index:3}.ui-range-slider__thumb{transform:translate(-50%,-50%)}.ui-range-slider__bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(calc(-50% + var(--bubble-shift, 0px)));background:var(--ui-bg);border:1px solid var(--ui-border);color:var(--ui-text);font-size:var(--ui-font-xs);font-weight:500;padding:2px var(--ui-spacing-sm);border-radius:var(--ui-radius-sm);box-shadow:var(--ui-shadow-sm);white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums;animation:ui-range-slider-bubble-in var(--ui-transition-fast) ease-out}.ui-range-slider__bubble:after{content:\"\";position:absolute;top:100%;left:calc(50% - var(--bubble-shift, 0px));transform:translate(-50%);border:4px solid transparent;border-top-color:var(--ui-border)}.ui-range-slider__bubble:before{content:\"\";position:absolute;top:calc(100% - 1px);left:calc(50% - var(--bubble-shift, 0px));transform:translate(-50%);border:4px solid transparent;border-top-color:var(--ui-bg);z-index:1}.ui-range-slider__range{display:flex;align-items:center;gap:var(--ui-spacing-xs);font-size:var(--ui-font-sm);color:var(--ui-text-muted);font-variant-numeric:tabular-nums}.ui-range-slider__range-arrow{color:var(--ui-text-disabled)}.ui-range-slider--sm .ui-range-slider__track{height:4px}.ui-range-slider--sm .ui-range-slider__thumb{width:14px;height:14px}.ui-range-slider--md .ui-range-slider__track{height:6px}.ui-range-slider--md .ui-range-slider__thumb{width:18px;height:18px}.ui-range-slider--lg .ui-range-slider__track{height:8px}.ui-range-slider--lg .ui-range-slider__thumb{width:24px;height:24px}.ui-range-slider__track{margin-top:var(--ui-spacing-lg)}.ui-range-slider--disabled{opacity:.5}.ui-range-slider--disabled .ui-range-slider__track,.ui-range-slider--disabled .ui-range-slider__thumb{cursor:not-allowed}.ui-range-slider--disabled .ui-range-slider__thumb:hover,.ui-range-slider--disabled .ui-range-slider__thumb:active{transform:translate(-50%,-50%);box-shadow:var(--ui-shadow-sm)}@keyframes ui-range-slider-bubble-in{0%{opacity:0;transform:translate(calc(-50% + var(--bubble-shift, 0px))) translateY(4px)}to{opacity:1;transform:translate(calc(-50% + var(--bubble-shift, 0px))) translateY(0)}}\n"] }]
|
|
4493
|
+
}], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: true }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], bubbles: [{ type: i0.Input, args: [{ isSignal: true, alias: "bubbles", required: false }] }], showRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRange", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueCommit: [{ type: i0.Output, args: ["valueCommit"] }], trackEl: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], startBubbleEl: [{ type: i0.ViewChild, args: ['startBubble', { isSignal: true }] }], endBubbleEl: [{ type: i0.ViewChild, args: ['endBubble', { isSignal: true }] }] } });
|
|
4452
4494
|
function pad(n) {
|
|
4453
4495
|
return n < 10 ? `0${n}` : String(n);
|
|
4454
4496
|
}
|
|
@@ -4469,11 +4511,17 @@ class NumberRangeSliderComponent {
|
|
|
4469
4511
|
value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
4470
4512
|
valueCommit = output();
|
|
4471
4513
|
trackEl = viewChild('track', ...(ngDevMode ? [{ debugName: "trackEl" }] : []));
|
|
4514
|
+
startBubbleEl = viewChild('startBubble', ...(ngDevMode ? [{ debugName: "startBubbleEl" }] : []));
|
|
4515
|
+
endBubbleEl = viewChild('endBubble', ...(ngDevMode ? [{ debugName: "endBubbleEl" }] : []));
|
|
4472
4516
|
startVal = signal(0, ...(ngDevMode ? [{ debugName: "startVal" }] : []));
|
|
4473
4517
|
endVal = signal(0, ...(ngDevMode ? [{ debugName: "endVal" }] : []));
|
|
4474
4518
|
dragging = signal(null, ...(ngDevMode ? [{ debugName: "dragging" }] : []));
|
|
4475
4519
|
focusedThumb = signal(null, ...(ngDevMode ? [{ debugName: "focusedThumb" }] : []));
|
|
4476
4520
|
hoveredThumb = signal(null, ...(ngDevMode ? [{ debugName: "hoveredThumb" }] : []));
|
|
4521
|
+
trackWidth = signal(0, ...(ngDevMode ? [{ debugName: "trackWidth" }] : []));
|
|
4522
|
+
startBubbleWidth = signal(0, ...(ngDevMode ? [{ debugName: "startBubbleWidth" }] : []));
|
|
4523
|
+
endBubbleWidth = signal(0, ...(ngDevMode ? [{ debugName: "endBubbleWidth" }] : []));
|
|
4524
|
+
platformId = inject(PLATFORM_ID);
|
|
4477
4525
|
lastEmitted = null;
|
|
4478
4526
|
range = computed(() => Math.max(0, this.max() - this.min()), ...(ngDevMode ? [{ debugName: "range" }] : []));
|
|
4479
4527
|
startPercent = computed(() => this.toPercent(this.startVal()), ...(ngDevMode ? [{ debugName: "startPercent" }] : []));
|
|
@@ -4485,6 +4533,9 @@ class NumberRangeSliderComponent {
|
|
|
4485
4533
|
}, ...(ngDevMode ? [{ debugName: "fillStyle" }] : []));
|
|
4486
4534
|
startLabel = computed(() => this.format(this.startVal()), ...(ngDevMode ? [{ debugName: "startLabel" }] : []));
|
|
4487
4535
|
endLabel = computed(() => this.format(this.endVal()), ...(ngDevMode ? [{ debugName: "endLabel" }] : []));
|
|
4536
|
+
// Horizontal px offset that keeps each bubble inside the track (edge-aware).
|
|
4537
|
+
startShift = computed(() => this.bubbleShift(this.startPercent(), this.startBubbleWidth()), ...(ngDevMode ? [{ debugName: "startShift" }] : []));
|
|
4538
|
+
endShift = computed(() => this.bubbleShift(this.endPercent(), this.endBubbleWidth()), ...(ngDevMode ? [{ debugName: "endShift" }] : []));
|
|
4488
4539
|
bubbleVisible = computed(() => {
|
|
4489
4540
|
const mode = this.bubbles();
|
|
4490
4541
|
if (mode === 'never')
|
|
@@ -4517,6 +4568,39 @@ class NumberRangeSliderComponent {
|
|
|
4517
4568
|
this.lastEmitted = null;
|
|
4518
4569
|
}
|
|
4519
4570
|
});
|
|
4571
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
4572
|
+
this.observeWidth(this.trackEl, this.trackWidth);
|
|
4573
|
+
this.observeWidth(this.startBubbleEl, this.startBubbleWidth);
|
|
4574
|
+
this.observeWidth(this.endBubbleEl, this.endBubbleWidth);
|
|
4575
|
+
}
|
|
4576
|
+
}
|
|
4577
|
+
/** Track an element's border-box width in a signal via ResizeObserver. */
|
|
4578
|
+
observeWidth(elSignal, out) {
|
|
4579
|
+
effect((onCleanup) => {
|
|
4580
|
+
const el = elSignal()?.nativeElement;
|
|
4581
|
+
if (!el) {
|
|
4582
|
+
out.set(0);
|
|
4583
|
+
return;
|
|
4584
|
+
}
|
|
4585
|
+
const update = () => out.set(el.offsetWidth);
|
|
4586
|
+
update();
|
|
4587
|
+
const ro = new ResizeObserver(update);
|
|
4588
|
+
ro.observe(el);
|
|
4589
|
+
onCleanup(() => ro.disconnect());
|
|
4590
|
+
});
|
|
4591
|
+
}
|
|
4592
|
+
/** Offset (px) to shift a bubble so it stays within the track bounds. */
|
|
4593
|
+
bubbleShift(pct, bubbleWidth) {
|
|
4594
|
+
const trackW = this.trackWidth();
|
|
4595
|
+
if (trackW <= 0 || bubbleWidth <= 0)
|
|
4596
|
+
return 0;
|
|
4597
|
+
const half = bubbleWidth / 2;
|
|
4598
|
+
const center = (pct / 100) * trackW;
|
|
4599
|
+
if (center - half < 0)
|
|
4600
|
+
return half - center;
|
|
4601
|
+
if (center + half > trackW)
|
|
4602
|
+
return trackW - center - half;
|
|
4603
|
+
return 0;
|
|
4520
4604
|
}
|
|
4521
4605
|
/** Push current thumb state into the value model (live, during interaction). */
|
|
4522
4606
|
writeValue() {
|
|
@@ -4696,12 +4780,12 @@ class NumberRangeSliderComponent {
|
|
|
4696
4780
|
return `${this.prefix()}${body}${this.suffix()}`;
|
|
4697
4781
|
}
|
|
4698
4782
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NumberRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4699
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: NumberRangeSliderComponent, isStandalone: true, selector: "ui-number-range-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, bubbles: { classPropertyName: "bubbles", publicName: "bubbles", isSignal: true, isRequired: false, transformFunction: null }, showRange: { classPropertyName: "showRange", publicName: "showRange", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, formatValue: { classPropertyName: "formatValue", publicName: "formatValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueCommit: "valueCommit" }, viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "@let isDisabled = disabled();\n@let bubbleVis = bubbleVisible();\n@let rangeOn = showRange();\n@let startPct = startPercent();\n@let endPct = endPercent();\n@let fill = fillStyle();\n\n<div [class]=\"rootClasses()\">\n @if (label()) {\n <label class=\"ui-number-range-slider__label\">{{ label() }}</label>\n }\n\n <div\n #track\n class=\"ui-number-range-slider__track\"\n (pointerdown)=\"onTrackPointerDown($event)\"\n >\n <div\n class=\"ui-number-range-slider__fill\"\n [style.left]=\"fill.left\"\n [style.width]=\"fill.width\"\n ></div>\n\n <div\n class=\"ui-number-range-slider__thumb ui-number-range-slider__thumb--start\"\n role=\"slider\"\n tabindex=\"0\"\n data-thumb=\"start\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"endVal()\"\n [attr.aria-valuenow]=\"startVal()\"\n [attr.aria-valuetext]=\"startLabel()\"\n [attr.aria-disabled]=\"isDisabled\"\n aria-label=\"Start\"\n aria-orientation=\"horizontal\"\n [style.left.%]=\"startPct\"\n (pointerdown)=\"onThumbPointerDown($event, 'start')\"\n (pointermove)=\"onThumbPointerMove($event, 'start')\"\n (pointerup)=\"onThumbPointerUp($event, 'start')\"\n (pointercancel)=\"onThumbPointerUp($event, 'start')\"\n (pointerenter)=\"onThumbEnter('start')\"\n (pointerleave)=\"onThumbLeave()\"\n (keydown)=\"onThumbKeyDown($event, 'start')\"\n (keyup)=\"onThumbKeyUp($event)\"\n (focus)=\"onThumbFocus('start')\"\n (blur)=\"onThumbBlur()\"\n >\n @if (bubbleVis.start) {\n <span
|
|
4783
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: NumberRangeSliderComponent, isStandalone: true, selector: "ui-number-range-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, bubbles: { classPropertyName: "bubbles", publicName: "bubbles", isSignal: true, isRequired: false, transformFunction: null }, showRange: { classPropertyName: "showRange", publicName: "showRange", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, formatValue: { classPropertyName: "formatValue", publicName: "formatValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueCommit: "valueCommit" }, viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["track"], descendants: true, isSignal: true }, { propertyName: "startBubbleEl", first: true, predicate: ["startBubble"], descendants: true, isSignal: true }, { propertyName: "endBubbleEl", first: true, predicate: ["endBubble"], descendants: true, isSignal: true }], ngImport: i0, template: "@let isDisabled = disabled();\n@let bubbleVis = bubbleVisible();\n@let rangeOn = showRange();\n@let startPct = startPercent();\n@let endPct = endPercent();\n@let fill = fillStyle();\n\n<div [class]=\"rootClasses()\">\n @if (label()) {\n <label class=\"ui-number-range-slider__label\">{{ label() }}</label>\n }\n\n <div\n #track\n class=\"ui-number-range-slider__track\"\n (pointerdown)=\"onTrackPointerDown($event)\"\n >\n <div\n class=\"ui-number-range-slider__fill\"\n [style.left]=\"fill.left\"\n [style.width]=\"fill.width\"\n ></div>\n\n <div\n class=\"ui-number-range-slider__thumb ui-number-range-slider__thumb--start\"\n role=\"slider\"\n tabindex=\"0\"\n data-thumb=\"start\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"endVal()\"\n [attr.aria-valuenow]=\"startVal()\"\n [attr.aria-valuetext]=\"startLabel()\"\n [attr.aria-disabled]=\"isDisabled\"\n aria-label=\"Start\"\n aria-orientation=\"horizontal\"\n [style.left.%]=\"startPct\"\n (pointerdown)=\"onThumbPointerDown($event, 'start')\"\n (pointermove)=\"onThumbPointerMove($event, 'start')\"\n (pointerup)=\"onThumbPointerUp($event, 'start')\"\n (pointercancel)=\"onThumbPointerUp($event, 'start')\"\n (pointerenter)=\"onThumbEnter('start')\"\n (pointerleave)=\"onThumbLeave()\"\n (keydown)=\"onThumbKeyDown($event, 'start')\"\n (keyup)=\"onThumbKeyUp($event)\"\n (focus)=\"onThumbFocus('start')\"\n (blur)=\"onThumbBlur()\"\n >\n @if (bubbleVis.start) {\n <span\n #startBubble\n class=\"ui-number-range-slider__bubble\"\n [style.--bubble-shift]=\"startShift() + 'px'\"\n >{{ startLabel() }}</span>\n }\n </div>\n\n <div\n class=\"ui-number-range-slider__thumb ui-number-range-slider__thumb--end\"\n role=\"slider\"\n tabindex=\"0\"\n data-thumb=\"end\"\n [attr.aria-valuemin]=\"startVal()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"endVal()\"\n [attr.aria-valuetext]=\"endLabel()\"\n [attr.aria-disabled]=\"isDisabled\"\n aria-label=\"End\"\n aria-orientation=\"horizontal\"\n [style.left.%]=\"endPct\"\n (pointerdown)=\"onThumbPointerDown($event, 'end')\"\n (pointermove)=\"onThumbPointerMove($event, 'end')\"\n (pointerup)=\"onThumbPointerUp($event, 'end')\"\n (pointercancel)=\"onThumbPointerUp($event, 'end')\"\n (pointerenter)=\"onThumbEnter('end')\"\n (pointerleave)=\"onThumbLeave()\"\n (keydown)=\"onThumbKeyDown($event, 'end')\"\n (keyup)=\"onThumbKeyUp($event)\"\n (focus)=\"onThumbFocus('end')\"\n (blur)=\"onThumbBlur()\"\n >\n @if (bubbleVis.end) {\n <span\n #endBubble\n class=\"ui-number-range-slider__bubble\"\n [style.--bubble-shift]=\"endShift() + 'px'\"\n >{{ endLabel() }}</span>\n }\n </div>\n </div>\n\n @if (rangeOn) {\n <div class=\"ui-number-range-slider__range\">\n <span>{{ startLabel() }}</span>\n <span class=\"ui-number-range-slider__range-arrow\" aria-hidden=\"true\">\u2192</span>\n <span>{{ endLabel() }}</span>\n </div>\n }\n</div>\n", styles: [":host{display:block}.ui-number-range-slider{display:flex;flex-direction:column;gap:var(--ui-spacing-sm);user-select:none;-webkit-user-select:none}.ui-number-range-slider__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-number-range-slider__track{position:relative;width:100%;background:var(--ui-bg-tertiary);border-radius:var(--ui-radius-xl);cursor:pointer;touch-action:none;margin-top:var(--ui-spacing-lg)}.ui-number-range-slider__fill{position:absolute;top:0;bottom:0;background:var(--ui-primary);border-radius:var(--ui-radius-xl);pointer-events:none}.ui-number-range-slider__thumb{position:absolute;top:50%;border-radius:50%;background:var(--ui-primary);border:2px solid var(--ui-bg);box-shadow:var(--ui-shadow-sm);cursor:grab;outline:none;transition:box-shadow var(--ui-transition-fast),transform var(--ui-transition-fast);touch-action:none;transform:translate(-50%,-50%)}.ui-number-range-slider__thumb:hover:not([aria-disabled=true]){transform:translate(-50%,-50%) scale(1.1)}.ui-number-range-slider__thumb:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-number-range-slider__thumb:active:not([aria-disabled=true]){cursor:grabbing;transform:translate(-50%,-50%) scale(1.15);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent);z-index:3}.ui-number-range-slider__bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(calc(-50% + var(--bubble-shift, 0px)));background:var(--ui-bg);border:1px solid var(--ui-border);color:var(--ui-text);font-size:var(--ui-font-xs);font-weight:500;padding:2px var(--ui-spacing-sm);border-radius:var(--ui-radius-sm);box-shadow:var(--ui-shadow-sm);white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums;animation:ui-number-range-slider-bubble-in var(--ui-transition-fast) ease-out}.ui-number-range-slider__bubble:after{content:\"\";position:absolute;top:100%;left:calc(50% - var(--bubble-shift, 0px));transform:translate(-50%);border:4px solid transparent;border-top-color:var(--ui-border)}.ui-number-range-slider__bubble:before{content:\"\";position:absolute;top:calc(100% - 1px);left:calc(50% - var(--bubble-shift, 0px));transform:translate(-50%);border:4px solid transparent;border-top-color:var(--ui-bg);z-index:1}.ui-number-range-slider__range{display:flex;align-items:center;gap:var(--ui-spacing-xs);font-size:var(--ui-font-sm);color:var(--ui-text-muted);font-variant-numeric:tabular-nums}.ui-number-range-slider__range-arrow{color:var(--ui-text-disabled)}.ui-number-range-slider--sm .ui-number-range-slider__track{height:4px}.ui-number-range-slider--sm .ui-number-range-slider__thumb{width:14px;height:14px}.ui-number-range-slider--md .ui-number-range-slider__track{height:6px}.ui-number-range-slider--md .ui-number-range-slider__thumb{width:18px;height:18px}.ui-number-range-slider--lg .ui-number-range-slider__track{height:8px}.ui-number-range-slider--lg .ui-number-range-slider__thumb{width:24px;height:24px}.ui-number-range-slider--disabled{opacity:.5}.ui-number-range-slider--disabled .ui-number-range-slider__track,.ui-number-range-slider--disabled .ui-number-range-slider__thumb{cursor:not-allowed}.ui-number-range-slider--disabled .ui-number-range-slider__thumb:hover,.ui-number-range-slider--disabled .ui-number-range-slider__thumb:active{transform:translate(-50%,-50%);box-shadow:var(--ui-shadow-sm)}@keyframes ui-number-range-slider-bubble-in{0%{opacity:0;transform:translate(calc(-50% + var(--bubble-shift, 0px))) translateY(4px)}to{opacity:1;transform:translate(calc(-50% + var(--bubble-shift, 0px))) translateY(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4700
4784
|
}
|
|
4701
4785
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NumberRangeSliderComponent, decorators: [{
|
|
4702
4786
|
type: Component,
|
|
4703
|
-
args: [{ selector: 'ui-number-range-slider', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let isDisabled = disabled();\n@let bubbleVis = bubbleVisible();\n@let rangeOn = showRange();\n@let startPct = startPercent();\n@let endPct = endPercent();\n@let fill = fillStyle();\n\n<div [class]=\"rootClasses()\">\n @if (label()) {\n <label class=\"ui-number-range-slider__label\">{{ label() }}</label>\n }\n\n <div\n #track\n class=\"ui-number-range-slider__track\"\n (pointerdown)=\"onTrackPointerDown($event)\"\n >\n <div\n class=\"ui-number-range-slider__fill\"\n [style.left]=\"fill.left\"\n [style.width]=\"fill.width\"\n ></div>\n\n <div\n class=\"ui-number-range-slider__thumb ui-number-range-slider__thumb--start\"\n role=\"slider\"\n tabindex=\"0\"\n data-thumb=\"start\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"endVal()\"\n [attr.aria-valuenow]=\"startVal()\"\n [attr.aria-valuetext]=\"startLabel()\"\n [attr.aria-disabled]=\"isDisabled\"\n aria-label=\"Start\"\n aria-orientation=\"horizontal\"\n [style.left.%]=\"startPct\"\n (pointerdown)=\"onThumbPointerDown($event, 'start')\"\n (pointermove)=\"onThumbPointerMove($event, 'start')\"\n (pointerup)=\"onThumbPointerUp($event, 'start')\"\n (pointercancel)=\"onThumbPointerUp($event, 'start')\"\n (pointerenter)=\"onThumbEnter('start')\"\n (pointerleave)=\"onThumbLeave()\"\n (keydown)=\"onThumbKeyDown($event, 'start')\"\n (keyup)=\"onThumbKeyUp($event)\"\n (focus)=\"onThumbFocus('start')\"\n (blur)=\"onThumbBlur()\"\n >\n @if (bubbleVis.start) {\n <span
|
|
4704
|
-
}], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], bubbles: [{ type: i0.Input, args: [{ isSignal: true, alias: "bubbles", required: false }] }], showRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRange", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], formatValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatValue", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueCommit: [{ type: i0.Output, args: ["valueCommit"] }], trackEl: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
|
|
4787
|
+
args: [{ selector: 'ui-number-range-slider', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let isDisabled = disabled();\n@let bubbleVis = bubbleVisible();\n@let rangeOn = showRange();\n@let startPct = startPercent();\n@let endPct = endPercent();\n@let fill = fillStyle();\n\n<div [class]=\"rootClasses()\">\n @if (label()) {\n <label class=\"ui-number-range-slider__label\">{{ label() }}</label>\n }\n\n <div\n #track\n class=\"ui-number-range-slider__track\"\n (pointerdown)=\"onTrackPointerDown($event)\"\n >\n <div\n class=\"ui-number-range-slider__fill\"\n [style.left]=\"fill.left\"\n [style.width]=\"fill.width\"\n ></div>\n\n <div\n class=\"ui-number-range-slider__thumb ui-number-range-slider__thumb--start\"\n role=\"slider\"\n tabindex=\"0\"\n data-thumb=\"start\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"endVal()\"\n [attr.aria-valuenow]=\"startVal()\"\n [attr.aria-valuetext]=\"startLabel()\"\n [attr.aria-disabled]=\"isDisabled\"\n aria-label=\"Start\"\n aria-orientation=\"horizontal\"\n [style.left.%]=\"startPct\"\n (pointerdown)=\"onThumbPointerDown($event, 'start')\"\n (pointermove)=\"onThumbPointerMove($event, 'start')\"\n (pointerup)=\"onThumbPointerUp($event, 'start')\"\n (pointercancel)=\"onThumbPointerUp($event, 'start')\"\n (pointerenter)=\"onThumbEnter('start')\"\n (pointerleave)=\"onThumbLeave()\"\n (keydown)=\"onThumbKeyDown($event, 'start')\"\n (keyup)=\"onThumbKeyUp($event)\"\n (focus)=\"onThumbFocus('start')\"\n (blur)=\"onThumbBlur()\"\n >\n @if (bubbleVis.start) {\n <span\n #startBubble\n class=\"ui-number-range-slider__bubble\"\n [style.--bubble-shift]=\"startShift() + 'px'\"\n >{{ startLabel() }}</span>\n }\n </div>\n\n <div\n class=\"ui-number-range-slider__thumb ui-number-range-slider__thumb--end\"\n role=\"slider\"\n tabindex=\"0\"\n data-thumb=\"end\"\n [attr.aria-valuemin]=\"startVal()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"endVal()\"\n [attr.aria-valuetext]=\"endLabel()\"\n [attr.aria-disabled]=\"isDisabled\"\n aria-label=\"End\"\n aria-orientation=\"horizontal\"\n [style.left.%]=\"endPct\"\n (pointerdown)=\"onThumbPointerDown($event, 'end')\"\n (pointermove)=\"onThumbPointerMove($event, 'end')\"\n (pointerup)=\"onThumbPointerUp($event, 'end')\"\n (pointercancel)=\"onThumbPointerUp($event, 'end')\"\n (pointerenter)=\"onThumbEnter('end')\"\n (pointerleave)=\"onThumbLeave()\"\n (keydown)=\"onThumbKeyDown($event, 'end')\"\n (keyup)=\"onThumbKeyUp($event)\"\n (focus)=\"onThumbFocus('end')\"\n (blur)=\"onThumbBlur()\"\n >\n @if (bubbleVis.end) {\n <span\n #endBubble\n class=\"ui-number-range-slider__bubble\"\n [style.--bubble-shift]=\"endShift() + 'px'\"\n >{{ endLabel() }}</span>\n }\n </div>\n </div>\n\n @if (rangeOn) {\n <div class=\"ui-number-range-slider__range\">\n <span>{{ startLabel() }}</span>\n <span class=\"ui-number-range-slider__range-arrow\" aria-hidden=\"true\">\u2192</span>\n <span>{{ endLabel() }}</span>\n </div>\n }\n</div>\n", styles: [":host{display:block}.ui-number-range-slider{display:flex;flex-direction:column;gap:var(--ui-spacing-sm);user-select:none;-webkit-user-select:none}.ui-number-range-slider__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-number-range-slider__track{position:relative;width:100%;background:var(--ui-bg-tertiary);border-radius:var(--ui-radius-xl);cursor:pointer;touch-action:none;margin-top:var(--ui-spacing-lg)}.ui-number-range-slider__fill{position:absolute;top:0;bottom:0;background:var(--ui-primary);border-radius:var(--ui-radius-xl);pointer-events:none}.ui-number-range-slider__thumb{position:absolute;top:50%;border-radius:50%;background:var(--ui-primary);border:2px solid var(--ui-bg);box-shadow:var(--ui-shadow-sm);cursor:grab;outline:none;transition:box-shadow var(--ui-transition-fast),transform var(--ui-transition-fast);touch-action:none;transform:translate(-50%,-50%)}.ui-number-range-slider__thumb:hover:not([aria-disabled=true]){transform:translate(-50%,-50%) scale(1.1)}.ui-number-range-slider__thumb:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-number-range-slider__thumb:active:not([aria-disabled=true]){cursor:grabbing;transform:translate(-50%,-50%) scale(1.15);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent);z-index:3}.ui-number-range-slider__bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(calc(-50% + var(--bubble-shift, 0px)));background:var(--ui-bg);border:1px solid var(--ui-border);color:var(--ui-text);font-size:var(--ui-font-xs);font-weight:500;padding:2px var(--ui-spacing-sm);border-radius:var(--ui-radius-sm);box-shadow:var(--ui-shadow-sm);white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums;animation:ui-number-range-slider-bubble-in var(--ui-transition-fast) ease-out}.ui-number-range-slider__bubble:after{content:\"\";position:absolute;top:100%;left:calc(50% - var(--bubble-shift, 0px));transform:translate(-50%);border:4px solid transparent;border-top-color:var(--ui-border)}.ui-number-range-slider__bubble:before{content:\"\";position:absolute;top:calc(100% - 1px);left:calc(50% - var(--bubble-shift, 0px));transform:translate(-50%);border:4px solid transparent;border-top-color:var(--ui-bg);z-index:1}.ui-number-range-slider__range{display:flex;align-items:center;gap:var(--ui-spacing-xs);font-size:var(--ui-font-sm);color:var(--ui-text-muted);font-variant-numeric:tabular-nums}.ui-number-range-slider__range-arrow{color:var(--ui-text-disabled)}.ui-number-range-slider--sm .ui-number-range-slider__track{height:4px}.ui-number-range-slider--sm .ui-number-range-slider__thumb{width:14px;height:14px}.ui-number-range-slider--md .ui-number-range-slider__track{height:6px}.ui-number-range-slider--md .ui-number-range-slider__thumb{width:18px;height:18px}.ui-number-range-slider--lg .ui-number-range-slider__track{height:8px}.ui-number-range-slider--lg .ui-number-range-slider__thumb{width:24px;height:24px}.ui-number-range-slider--disabled{opacity:.5}.ui-number-range-slider--disabled .ui-number-range-slider__track,.ui-number-range-slider--disabled .ui-number-range-slider__thumb{cursor:not-allowed}.ui-number-range-slider--disabled .ui-number-range-slider__thumb:hover,.ui-number-range-slider--disabled .ui-number-range-slider__thumb:active{transform:translate(-50%,-50%);box-shadow:var(--ui-shadow-sm)}@keyframes ui-number-range-slider-bubble-in{0%{opacity:0;transform:translate(calc(-50% + var(--bubble-shift, 0px))) translateY(4px)}to{opacity:1;transform:translate(calc(-50% + var(--bubble-shift, 0px))) translateY(0)}}\n"] }]
|
|
4788
|
+
}], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], bubbles: [{ type: i0.Input, args: [{ isSignal: true, alias: "bubbles", required: false }] }], showRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRange", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], formatValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatValue", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueCommit: [{ type: i0.Output, args: ["valueCommit"] }], trackEl: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], startBubbleEl: [{ type: i0.ViewChild, args: ['startBubble', { isSignal: true }] }], endBubbleEl: [{ type: i0.ViewChild, args: ['endBubble', { isSignal: true }] }] } });
|
|
4705
4789
|
|
|
4706
4790
|
/** Directive to mark a custom chip template */
|
|
4707
4791
|
class ChipTemplateDirective {
|