@m1z23r/ngx-ui 1.1.59 → 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.
- package/fesm2022/m1z23r-ngx-ui.mjs +338 -4
- package/fesm2022/m1z23r-ngx-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/m1z23r-ngx-ui.d.ts +119 -27
|
@@ -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,16 +4485,308 @@ 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
|
}
|
|
4455
4497
|
|
|
4498
|
+
class NumberRangeSliderComponent {
|
|
4499
|
+
min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
|
|
4500
|
+
max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
|
|
4501
|
+
step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
|
|
4502
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
4503
|
+
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
4504
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
4505
|
+
bubbles = input('always', ...(ngDevMode ? [{ debugName: "bubbles" }] : []));
|
|
4506
|
+
showRange = input(false, ...(ngDevMode ? [{ debugName: "showRange" }] : []));
|
|
4507
|
+
prefix = input('', ...(ngDevMode ? [{ debugName: "prefix" }] : []));
|
|
4508
|
+
suffix = input('', ...(ngDevMode ? [{ debugName: "suffix" }] : []));
|
|
4509
|
+
decimals = input(0, ...(ngDevMode ? [{ debugName: "decimals" }] : []));
|
|
4510
|
+
formatValue = input(null, ...(ngDevMode ? [{ debugName: "formatValue" }] : []));
|
|
4511
|
+
value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
4512
|
+
valueCommit = output();
|
|
4513
|
+
trackEl = viewChild('track', ...(ngDevMode ? [{ debugName: "trackEl" }] : []));
|
|
4514
|
+
startBubbleEl = viewChild('startBubble', ...(ngDevMode ? [{ debugName: "startBubbleEl" }] : []));
|
|
4515
|
+
endBubbleEl = viewChild('endBubble', ...(ngDevMode ? [{ debugName: "endBubbleEl" }] : []));
|
|
4516
|
+
startVal = signal(0, ...(ngDevMode ? [{ debugName: "startVal" }] : []));
|
|
4517
|
+
endVal = signal(0, ...(ngDevMode ? [{ debugName: "endVal" }] : []));
|
|
4518
|
+
dragging = signal(null, ...(ngDevMode ? [{ debugName: "dragging" }] : []));
|
|
4519
|
+
focusedThumb = signal(null, ...(ngDevMode ? [{ debugName: "focusedThumb" }] : []));
|
|
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);
|
|
4525
|
+
lastEmitted = null;
|
|
4526
|
+
range = computed(() => Math.max(0, this.max() - this.min()), ...(ngDevMode ? [{ debugName: "range" }] : []));
|
|
4527
|
+
startPercent = computed(() => this.toPercent(this.startVal()), ...(ngDevMode ? [{ debugName: "startPercent" }] : []));
|
|
4528
|
+
endPercent = computed(() => this.toPercent(this.endVal()), ...(ngDevMode ? [{ debugName: "endPercent" }] : []));
|
|
4529
|
+
fillStyle = computed(() => {
|
|
4530
|
+
const start = this.startPercent();
|
|
4531
|
+
const end = this.endPercent();
|
|
4532
|
+
return { left: `${start}%`, width: `${Math.max(0, end - start)}%` };
|
|
4533
|
+
}, ...(ngDevMode ? [{ debugName: "fillStyle" }] : []));
|
|
4534
|
+
startLabel = computed(() => this.format(this.startVal()), ...(ngDevMode ? [{ debugName: "startLabel" }] : []));
|
|
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" }] : []));
|
|
4539
|
+
bubbleVisible = computed(() => {
|
|
4540
|
+
const mode = this.bubbles();
|
|
4541
|
+
if (mode === 'never')
|
|
4542
|
+
return { start: false, end: false };
|
|
4543
|
+
if (mode === 'always')
|
|
4544
|
+
return { start: true, end: true };
|
|
4545
|
+
const active = (t) => this.dragging() === t || this.focusedThumb() === t || this.hoveredThumb() === t;
|
|
4546
|
+
return { start: active('start'), end: active('end') };
|
|
4547
|
+
}, ...(ngDevMode ? [{ debugName: "bubbleVisible" }] : []));
|
|
4548
|
+
rootClasses = computed(() => {
|
|
4549
|
+
const classes = ['ui-number-range-slider', `ui-number-range-slider--${this.size()}`];
|
|
4550
|
+
if (this.disabled())
|
|
4551
|
+
classes.push('ui-number-range-slider--disabled');
|
|
4552
|
+
return classes.join(' ');
|
|
4553
|
+
}, ...(ngDevMode ? [{ debugName: "rootClasses" }] : []));
|
|
4554
|
+
constructor() {
|
|
4555
|
+
// Sync external value → internal thumb positions. Falls back to [min, max] when null.
|
|
4556
|
+
effect(() => {
|
|
4557
|
+
const min = this.min();
|
|
4558
|
+
const max = this.max();
|
|
4559
|
+
const v = this.value();
|
|
4560
|
+
if (v) {
|
|
4561
|
+
this.startVal.set(this.snap(this.clamp(v.start)));
|
|
4562
|
+
this.endVal.set(this.snap(this.clamp(v.end)));
|
|
4563
|
+
this.lastEmitted = v;
|
|
4564
|
+
}
|
|
4565
|
+
else {
|
|
4566
|
+
this.startVal.set(min);
|
|
4567
|
+
this.endVal.set(max);
|
|
4568
|
+
this.lastEmitted = null;
|
|
4569
|
+
}
|
|
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;
|
|
4604
|
+
}
|
|
4605
|
+
/** Push current thumb state into the value model (live, during interaction). */
|
|
4606
|
+
writeValue() {
|
|
4607
|
+
const next = { start: this.startVal(), end: this.endVal() };
|
|
4608
|
+
const prev = this.lastEmitted;
|
|
4609
|
+
if (prev && prev.start === next.start && prev.end === next.end) {
|
|
4610
|
+
return;
|
|
4611
|
+
}
|
|
4612
|
+
this.lastEmitted = next;
|
|
4613
|
+
this.value.set(next);
|
|
4614
|
+
}
|
|
4615
|
+
// -- Pointer handling -------------------------------------------------
|
|
4616
|
+
onThumbPointerDown(event, thumb) {
|
|
4617
|
+
if (this.disabled())
|
|
4618
|
+
return;
|
|
4619
|
+
event.preventDefault();
|
|
4620
|
+
const target = event.target;
|
|
4621
|
+
target.setPointerCapture(event.pointerId);
|
|
4622
|
+
this.dragging.set(thumb);
|
|
4623
|
+
this.focusedThumb.set(thumb);
|
|
4624
|
+
target.focus();
|
|
4625
|
+
}
|
|
4626
|
+
onThumbPointerMove(event, thumb) {
|
|
4627
|
+
if (this.dragging() !== thumb)
|
|
4628
|
+
return;
|
|
4629
|
+
event.preventDefault();
|
|
4630
|
+
const val = this.pixelToVal(event.clientX);
|
|
4631
|
+
this.setThumb(thumb, val);
|
|
4632
|
+
}
|
|
4633
|
+
onThumbPointerUp(event, thumb) {
|
|
4634
|
+
if (this.dragging() !== thumb)
|
|
4635
|
+
return;
|
|
4636
|
+
const target = event.target;
|
|
4637
|
+
if (target.hasPointerCapture(event.pointerId)) {
|
|
4638
|
+
target.releasePointerCapture(event.pointerId);
|
|
4639
|
+
}
|
|
4640
|
+
this.dragging.set(null);
|
|
4641
|
+
this.commit();
|
|
4642
|
+
}
|
|
4643
|
+
onTrackPointerDown(event) {
|
|
4644
|
+
if (this.disabled())
|
|
4645
|
+
return;
|
|
4646
|
+
if (event.target.dataset['thumb'])
|
|
4647
|
+
return; // ignore thumb hits
|
|
4648
|
+
const val = this.pixelToVal(event.clientX);
|
|
4649
|
+
const thumb = Math.abs(val - this.startVal()) <= Math.abs(val - this.endVal()) ? 'start' : 'end';
|
|
4650
|
+
this.setThumb(thumb, val);
|
|
4651
|
+
this.commit();
|
|
4652
|
+
}
|
|
4653
|
+
// -- Keyboard ---------------------------------------------------------
|
|
4654
|
+
onThumbKeyDown(event, thumb) {
|
|
4655
|
+
if (this.disabled())
|
|
4656
|
+
return;
|
|
4657
|
+
const step = this.effectiveStep();
|
|
4658
|
+
const big = step * 10;
|
|
4659
|
+
let delta = 0;
|
|
4660
|
+
let target = null;
|
|
4661
|
+
switch (event.key) {
|
|
4662
|
+
case 'ArrowLeft':
|
|
4663
|
+
case 'ArrowDown':
|
|
4664
|
+
delta = event.shiftKey ? -big : -step;
|
|
4665
|
+
break;
|
|
4666
|
+
case 'ArrowRight':
|
|
4667
|
+
case 'ArrowUp':
|
|
4668
|
+
delta = event.shiftKey ? big : step;
|
|
4669
|
+
break;
|
|
4670
|
+
case 'Home':
|
|
4671
|
+
target = thumb === 'start' ? this.min() : this.startVal();
|
|
4672
|
+
break;
|
|
4673
|
+
case 'End':
|
|
4674
|
+
target = thumb === 'end' ? this.max() : this.endVal();
|
|
4675
|
+
break;
|
|
4676
|
+
default:
|
|
4677
|
+
return;
|
|
4678
|
+
}
|
|
4679
|
+
event.preventDefault();
|
|
4680
|
+
if (target !== null) {
|
|
4681
|
+
this.setThumb(thumb, target);
|
|
4682
|
+
}
|
|
4683
|
+
else {
|
|
4684
|
+
const current = thumb === 'start' ? this.startVal() : this.endVal();
|
|
4685
|
+
this.setThumb(thumb, current + delta);
|
|
4686
|
+
}
|
|
4687
|
+
}
|
|
4688
|
+
onThumbKeyUp(event) {
|
|
4689
|
+
const keys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'];
|
|
4690
|
+
if (keys.includes(event.key)) {
|
|
4691
|
+
this.commit();
|
|
4692
|
+
}
|
|
4693
|
+
}
|
|
4694
|
+
onThumbFocus(thumb) {
|
|
4695
|
+
this.focusedThumb.set(thumb);
|
|
4696
|
+
}
|
|
4697
|
+
onThumbBlur() {
|
|
4698
|
+
this.focusedThumb.set(null);
|
|
4699
|
+
}
|
|
4700
|
+
onThumbEnter(thumb) {
|
|
4701
|
+
this.hoveredThumb.set(thumb);
|
|
4702
|
+
}
|
|
4703
|
+
onThumbLeave() {
|
|
4704
|
+
this.hoveredThumb.set(null);
|
|
4705
|
+
}
|
|
4706
|
+
// -- Internal helpers -------------------------------------------------
|
|
4707
|
+
effectiveStep() {
|
|
4708
|
+
const step = this.step();
|
|
4709
|
+
return step > 0 ? step : 1;
|
|
4710
|
+
}
|
|
4711
|
+
setThumb(thumb, raw) {
|
|
4712
|
+
const snapped = this.snap(this.clamp(raw));
|
|
4713
|
+
let changed = false;
|
|
4714
|
+
if (thumb === 'start') {
|
|
4715
|
+
const next = Math.min(snapped, this.endVal());
|
|
4716
|
+
if (next !== this.startVal()) {
|
|
4717
|
+
this.startVal.set(next);
|
|
4718
|
+
changed = true;
|
|
4719
|
+
}
|
|
4720
|
+
}
|
|
4721
|
+
else {
|
|
4722
|
+
const next = Math.max(snapped, this.startVal());
|
|
4723
|
+
if (next !== this.endVal()) {
|
|
4724
|
+
this.endVal.set(next);
|
|
4725
|
+
changed = true;
|
|
4726
|
+
}
|
|
4727
|
+
}
|
|
4728
|
+
if (changed)
|
|
4729
|
+
this.writeValue();
|
|
4730
|
+
}
|
|
4731
|
+
commit() {
|
|
4732
|
+
if (this.lastEmitted) {
|
|
4733
|
+
this.valueCommit.emit(this.lastEmitted);
|
|
4734
|
+
}
|
|
4735
|
+
}
|
|
4736
|
+
clamp(val) {
|
|
4737
|
+
return Math.min(this.max(), Math.max(this.min(), val));
|
|
4738
|
+
}
|
|
4739
|
+
snap(val) {
|
|
4740
|
+
const min = this.min();
|
|
4741
|
+
const max = this.max();
|
|
4742
|
+
const step = this.step();
|
|
4743
|
+
if (step <= 0 || min >= max)
|
|
4744
|
+
return val;
|
|
4745
|
+
const offset = val - min;
|
|
4746
|
+
const snapped = min + Math.round(offset / step) * step;
|
|
4747
|
+
if (snapped > max)
|
|
4748
|
+
return max;
|
|
4749
|
+
if (snapped < min)
|
|
4750
|
+
return min;
|
|
4751
|
+
return snapped;
|
|
4752
|
+
}
|
|
4753
|
+
toPercent(val) {
|
|
4754
|
+
const range = this.range();
|
|
4755
|
+
if (range <= 0)
|
|
4756
|
+
return 0;
|
|
4757
|
+
return ((val - this.min()) / range) * 100;
|
|
4758
|
+
}
|
|
4759
|
+
pixelToVal(clientX) {
|
|
4760
|
+
const el = this.trackEl()?.nativeElement;
|
|
4761
|
+
if (!el)
|
|
4762
|
+
return this.min();
|
|
4763
|
+
const rect = el.getBoundingClientRect();
|
|
4764
|
+
if (rect.width <= 0)
|
|
4765
|
+
return this.min();
|
|
4766
|
+
const ratio = (clientX - rect.left) / rect.width;
|
|
4767
|
+
const clamped = Math.min(1, Math.max(0, ratio));
|
|
4768
|
+
return this.min() + clamped * this.range();
|
|
4769
|
+
}
|
|
4770
|
+
// -- Formatting -------------------------------------------------------
|
|
4771
|
+
format(val) {
|
|
4772
|
+
const fn = this.formatValue();
|
|
4773
|
+
if (fn)
|
|
4774
|
+
return fn(val);
|
|
4775
|
+
const decimals = this.decimals();
|
|
4776
|
+
const body = val.toLocaleString(undefined, {
|
|
4777
|
+
minimumFractionDigits: decimals,
|
|
4778
|
+
maximumFractionDigits: decimals,
|
|
4779
|
+
});
|
|
4780
|
+
return `${this.prefix()}${body}${this.suffix()}`;
|
|
4781
|
+
}
|
|
4782
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NumberRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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 });
|
|
4784
|
+
}
|
|
4785
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NumberRangeSliderComponent, decorators: [{
|
|
4786
|
+
type: Component,
|
|
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 }] }] } });
|
|
4789
|
+
|
|
4456
4790
|
/** Directive to mark a custom chip template */
|
|
4457
4791
|
class ChipTemplateDirective {
|
|
4458
4792
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ChipTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -8360,5 +8694,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
8360
8694
|
* Generated bundle index. Do not edit.
|
|
8361
8695
|
*/
|
|
8362
8696
|
|
|
8363
|
-
export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbSeparatorDirective, ButtonComponent, CardComponent, CarouselComponent, CellTemplateDirective, CellValuePipe, CheckboxComponent, ChipInputComponent, ChipTemplateDirective, CircularProgressComponent, ContentComponent, ContextMenuDirective, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DatetimepickerComponent, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, DynamicTabsComponent, FileChooserComponent, FilePreviewPipe, FileSizePipe, FooterComponent, ImageUploaderComponent, InputComponent, JsonTreeComponent, LOADABLE, LightboxComponent, LightboxService, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, RangeSliderComponent, SegmentedComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SkeletonComponent, SliderComponent, SpinnerComponent, SplitComponent, SplitPaneComponent, StepperComponent, SwitchComponent, TAB_DATA, TAB_REF, TREE_HOST, TabActivePipe, TabComponent, TabIconDirective, TabRef, TableComponent, TabsComponent, TabsService, TemplateInputComponent, TemplateInputSuffixDirective, TextareaComponent, TimepickerComponent, ToastRef, ToastService, TooltipDirective, TreeComponent, TreeNodeComponent, Validators, VariablePopoverDirective, jsonToTreeNodes };
|
|
8697
|
+
export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbSeparatorDirective, ButtonComponent, CardComponent, CarouselComponent, CellTemplateDirective, CellValuePipe, CheckboxComponent, ChipInputComponent, ChipTemplateDirective, CircularProgressComponent, ContentComponent, ContextMenuDirective, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DatetimepickerComponent, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, DynamicTabsComponent, FileChooserComponent, FilePreviewPipe, FileSizePipe, FooterComponent, ImageUploaderComponent, InputComponent, JsonTreeComponent, LOADABLE, LightboxComponent, LightboxService, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, NumberRangeSliderComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, RangeSliderComponent, SegmentedComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SkeletonComponent, SliderComponent, SpinnerComponent, SplitComponent, SplitPaneComponent, StepperComponent, SwitchComponent, TAB_DATA, TAB_REF, TREE_HOST, TabActivePipe, TabComponent, TabIconDirective, TabRef, TableComponent, TabsComponent, TabsService, TemplateInputComponent, TemplateInputSuffixDirective, TextareaComponent, TimepickerComponent, ToastRef, ToastService, TooltipDirective, TreeComponent, TreeNodeComponent, Validators, VariablePopoverDirective, jsonToTreeNodes };
|
|
8364
8698
|
//# sourceMappingURL=m1z23r-ngx-ui.mjs.map
|