@ardium-ui/ui 5.0.0-alpha.35 → 5.0.0-alpha.36

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.
@@ -429,10 +429,13 @@ class _NgModelComponentBase extends _FocusableComponentBase {
429
429
  // the touched event will not be fired
430
430
  if (!this._shouldEmitTouched)
431
431
  return;
432
- this.wasTouched.set(true);
433
- this._onTouchedRegistered?.();
432
+ this._emitTouched();
434
433
  }, 0);
435
434
  }
435
+ _emitTouched() {
436
+ this.wasTouched.set(true);
437
+ this._onTouchedRegistered?.();
438
+ }
436
439
  ngOnInit() {
437
440
  this._ngControl = this._injector.get(NgControl, null);
438
441
  if (this._ngControl) {
@@ -4959,10 +4962,6 @@ class _FileInputComponentBase extends _FormFieldComponentBase {
4959
4962
  this.currentViewState.set('uploaded');
4960
4963
  this._emitTouched();
4961
4964
  }
4962
- _emitTouched() {
4963
- this.wasTouched.set(true);
4964
- this._onTouchedRegistered?.();
4965
- }
4966
4965
  onFocus(event) {
4967
4966
  if (this._isFilePickerOpen) {
4968
4967
  setTimeout(() => {
@@ -8480,10 +8479,6 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
8480
8479
  onBlurMaster(event) {
8481
8480
  this.onBlur(event);
8482
8481
  }
8483
- _emitTouched() {
8484
- this.wasTouched.set(true);
8485
- this._onTouchedRegistered?.();
8486
- }
8487
8482
  //change
8488
8483
  onChange(event) {
8489
8484
  event.stopPropagation();
@@ -10011,7 +10006,7 @@ const _asbtractSliderDefaults = {
10011
10006
  ..._ngModelComponentDefaults,
10012
10007
  noTooltip: false,
10013
10008
  showValueTicks: false,
10014
- formatTooltipFn: undefined,
10009
+ formatTooltipFn: v => v,
10015
10010
  min: 0,
10016
10011
  max: 100,
10017
10012
  step: 1,
@@ -10023,7 +10018,7 @@ const _asbtractSliderDefaults = {
10023
10018
  tooltipPosition: SliderDecorationPosition.Top,
10024
10019
  tooltipBehavior: SliderTooltipBehavior.Auto,
10025
10020
  selectionBehavior: ArdRangeSelectionBehavior.Allow,
10026
- allowEqualValues: false,
10021
+ minimumDistance: 0,
10027
10022
  };
10028
10023
  class _AbstractSlider extends _NgModelComponentBase {
10029
10024
  constructor() {
@@ -10034,8 +10029,6 @@ class _AbstractSlider extends _NgModelComponentBase {
10034
10029
  this.overlay = inject(Overlay);
10035
10030
  this.scrollStrategyOpts = inject(ScrollStrategyOptions);
10036
10031
  this.viewContainerRef = inject(ViewContainerRef);
10037
- this.noTooltip = input(this._DEFAULTS.noTooltip, { transform: v => coerceBooleanProperty(v) });
10038
- this.tooltipFormatFn = input(this._DEFAULTS.formatTooltipFn);
10039
10032
  //! min, max, step sizes
10040
10033
  this.min = input(this._DEFAULTS.min, {
10041
10034
  transform: v => coerceNumberProperty(v, this._DEFAULTS.min),
@@ -10089,13 +10082,13 @@ class _AbstractSlider extends _NgModelComponentBase {
10089
10082
  });
10090
10083
  //! labels
10091
10084
  this._transformLabelInput = (labels) => {
10092
- if (!isDefined(labels)) {
10085
+ if (!isDefined(labels) || (Array.isArray(labels) && labels.length === 0)) {
10093
10086
  return [];
10094
10087
  }
10095
10088
  if (typeof labels === 'string') {
10096
10089
  labels = coerceArrayProperty(labels).map(Number);
10097
10090
  }
10098
- if (labels[0] && typeof labels[0] === 'number') {
10091
+ if (isDefined(labels[0]) && typeof labels[0] === 'number') {
10099
10092
  return labels.map(label => ({ label, value: label }));
10100
10093
  }
10101
10094
  return labels;
@@ -10140,6 +10133,8 @@ class _AbstractSlider extends _NgModelComponentBase {
10140
10133
  this._totalSteps = computed(() => (this.max() - this.min()) / this.step());
10141
10134
  this.valueChange = output();
10142
10135
  //! tooltip
10136
+ this.noTooltip = input(this._DEFAULTS.noTooltip, { transform: v => coerceBooleanProperty(v) });
10137
+ this.tooltipFormatFn = input(this._DEFAULTS.formatTooltipFn);
10143
10138
  this.tooltipTemplate = contentChild(ArdSliderTooltipDirective);
10144
10139
  this.tooltipPosition = input(SliderDecorationPosition.Top);
10145
10140
  this.tooltipBehavior = input(SliderTooltipBehavior.Auto);
@@ -10249,24 +10244,44 @@ class _AbstractSlider extends _NgModelComponentBase {
10249
10244
  //! key press handlers
10250
10245
  onKeyPress(event) {
10251
10246
  switch (event.code) {
10252
- case 'ArrowLeft': {
10247
+ case 'ArrowLeft':
10248
+ case 'ArrowDown': {
10253
10249
  this._decrement(event);
10254
10250
  return;
10255
10251
  }
10256
- case 'ArrowRight': {
10252
+ case 'ArrowRight':
10253
+ case 'ArrowUp': {
10257
10254
  this._increment(event);
10258
10255
  return;
10259
10256
  }
10257
+ case 'PageDown': {
10258
+ this._decrement(event, true);
10259
+ return;
10260
+ }
10261
+ case 'PageUp': {
10262
+ this._increment(event, true);
10263
+ return;
10264
+ }
10265
+ case 'Home': {
10266
+ this._decrement(event, true);
10267
+ // TODO: should go to min directly
10268
+ return;
10269
+ }
10270
+ case 'End': {
10271
+ this._increment(event, true);
10272
+ // TODO: should go to max directly
10273
+ return;
10274
+ }
10260
10275
  }
10261
10276
  }
10262
- _decrement(event, steps = 1) {
10263
- this._offset(-steps, event.shiftKey);
10277
+ _decrement(event, forceShift = false) {
10278
+ this._offset(-1, forceShift || event.shiftKey);
10264
10279
  }
10265
- _increment(event, steps = 1) {
10266
- this._offset(+steps, event.shiftKey);
10280
+ _increment(event, forceShift = false) {
10281
+ this._offset(+1, forceShift || event.shiftKey);
10267
10282
  }
10268
10283
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _AbstractSlider, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
10269
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.15", type: _AbstractSlider, isStandalone: true, inputs: { noTooltip: { classPropertyName: "noTooltip", publicName: "noTooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipFormatFn: { classPropertyName: "tooltipFormatFn", publicName: "tooltipFormatFn", isSignal: true, isRequired: false, transformFunction: null }, 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 }, shiftMultiplier: { classPropertyName: "shiftMultiplier", publicName: "shiftMultiplier", isSignal: true, isRequired: false, transformFunction: null }, showValueTicks: { classPropertyName: "showValueTicks", publicName: "showValueTicks", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltipBehavior: { classPropertyName: "tooltipBehavior", publicName: "tooltipBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:pointerup": "onPointerUp()", "document:touchend": "onPointerUp()", "keydown": "onKeyPress($event)" } }, queries: [{ propertyName: "tooltipTemplate", first: true, predicate: ArdSliderTooltipDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["track"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
10284
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.15", type: _AbstractSlider, isStandalone: true, 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 }, shiftMultiplier: { classPropertyName: "shiftMultiplier", publicName: "shiftMultiplier", isSignal: true, isRequired: false, transformFunction: null }, showValueTicks: { classPropertyName: "showValueTicks", publicName: "showValueTicks", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, noTooltip: { classPropertyName: "noTooltip", publicName: "noTooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipFormatFn: { classPropertyName: "tooltipFormatFn", publicName: "tooltipFormatFn", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltipBehavior: { classPropertyName: "tooltipBehavior", publicName: "tooltipBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:pointerup": "onPointerUp()", "document:touchend": "onPointerUp()", "keydown": "onKeyPress($event)" } }, queries: [{ propertyName: "tooltipTemplate", first: true, predicate: ArdSliderTooltipDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["track"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
10270
10285
  }
10271
10286
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _AbstractSlider, decorators: [{
10272
10287
  type: Directive
@@ -10302,14 +10317,16 @@ class ArdiumRangeSliderComponent extends _AbstractSlider {
10302
10317
  this.componentName = 'range-slider';
10303
10318
  this._value = signal({ from: -Number.MIN_SAFE_INTEGER, to: Number.MIN_SAFE_INTEGER });
10304
10319
  this.selectionBehavior = input(this._DEFAULTS.selectionBehavior);
10305
- this.allowEqualValues = input(this._DEFAULTS.allowEqualValues, { transform: v => coerceBooleanProperty(v) });
10320
+ this.minimumDistance = input(this._DEFAULTS.minimumDistance, {
10321
+ transform: v => coerceNumberProperty(v, this._DEFAULTS.minimumDistance),
10322
+ });
10306
10323
  //! tooltip updater
10307
10324
  this._tooltipValue = computed(() => {
10308
10325
  const v = this._value();
10309
10326
  const formatFn = this.tooltipFormatFn();
10310
10327
  const tooltipValue = {
10311
- from: String(formatFn?.(v.from) ?? v.from),
10312
- to: String(formatFn?.(v.to) ?? v.to),
10328
+ from: String(formatFn(v.from)),
10329
+ to: String(formatFn(v.to)),
10313
10330
  };
10314
10331
  return tooltipValue;
10315
10332
  });
@@ -10371,7 +10388,7 @@ class ArdiumRangeSliderComponent extends _AbstractSlider {
10371
10388
  }
10372
10389
  const fromClamped = this._clampValue(from);
10373
10390
  const toClamped = this._clampValue(to);
10374
- const value = { from: fromClamped, to: toClamped };
10391
+ const value = this._normalizeSliderRange({ from: fromClamped, to: toClamped });
10375
10392
  if (value.from === this.value.from && value.to === this.value.to) {
10376
10393
  return;
10377
10394
  }
@@ -10416,17 +10433,16 @@ class ArdiumRangeSliderComponent extends _AbstractSlider {
10416
10433
  //round to 9 decimal places to avoid floating point arithmetic errors
10417
10434
  //9 is an arbitrary number that just works well. ¯\_(ツ)_/¯
10418
10435
  newVal = roundToPrecision(newVal, 9);
10419
- const stepConsideringAllowEqual = this.allowEqualValues() ? 0 : this.step();
10420
- console.log('stepConsideringAllowEqual', stepConsideringAllowEqual);
10436
+ const minimumDistanceInSteps = this.step() * this.minimumDistance();
10421
10437
  const currValue = this._value();
10422
10438
  const newValObj = { from: currValue.from, to: currValue.to };
10423
10439
  if (handleId === 1) {
10424
- if (newVal >= currValue.to) {
10440
+ if (newVal >= currValue.to - minimumDistanceInSteps) {
10425
10441
  if (this.selectionBehavior() === ArdRangeSelectionBehavior.Block) {
10426
- newVal = currValue.to - stepConsideringAllowEqual;
10442
+ newVal = currValue.to - minimumDistanceInSteps;
10427
10443
  }
10428
10444
  else if (this.selectionBehavior() === ArdRangeSelectionBehavior.Push) {
10429
- newValObj.to = newVal + stepConsideringAllowEqual;
10445
+ newValObj.to = newVal + minimumDistanceInSteps;
10430
10446
  }
10431
10447
  else {
10432
10448
  // Allow - do nothing
@@ -10435,12 +10451,12 @@ class ArdiumRangeSliderComponent extends _AbstractSlider {
10435
10451
  newValObj.from = newVal;
10436
10452
  }
10437
10453
  else {
10438
- if (newVal <= currValue.from) {
10454
+ if (newVal <= currValue.from + minimumDistanceInSteps) {
10439
10455
  if (this.selectionBehavior() === ArdRangeSelectionBehavior.Block) {
10440
- newVal = currValue.from + stepConsideringAllowEqual;
10456
+ newVal = currValue.from + minimumDistanceInSteps;
10441
10457
  }
10442
10458
  else if (this.selectionBehavior() === ArdRangeSelectionBehavior.Push) {
10443
- newValObj.from = newVal - stepConsideringAllowEqual;
10459
+ newValObj.from = newVal - minimumDistanceInSteps;
10444
10460
  }
10445
10461
  else {
10446
10462
  // Allow - do nothing
@@ -10459,7 +10475,7 @@ class ArdiumRangeSliderComponent extends _AbstractSlider {
10459
10475
  this.currentHandle.set(null);
10460
10476
  }
10461
10477
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumRangeSliderComponent, deps: [{ token: ARD_SLIDER_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
10462
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumRangeSliderComponent, isStandalone: false, selector: "ard-range-slider", inputs: { selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, allowEqualValues: { classPropertyName: "allowEqualValues", publicName: "allowEqualValues", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:mousemove": "onPointerMove($event)", "document:touchmove": "onPointerMove($event)" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-range-slider-container-master\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-slider-handle-grabbed]=\"isSliderHandleGrabbed()\"\r\n [style]=\"{ '--_ard-slider-transition': sliderTransition() }\"\r\n>\r\n <div class=\"ard-slider-container\">\r\n <div\r\n #track\r\n class=\"ard-slider-track\"\r\n (pointerdown)=\"onTrackHitboxPointerDown($event)\"\r\n >\r\n <div class=\"ard-hitbox\"></div>\r\n <div class=\"ard-slider-track-overlay ard-slider-track-inactive\"></div>\r\n <div\r\n class=\"ard-slider-track-overlay ard-slider-track-active\"\r\n [style]=\"{\r\n left: trackOverlayLeft(),\r\n width: trackOverlayWidth()\r\n }\"\r\n ></div>\r\n @if (showValueTicks()) {\r\n <div class=\"ard-value-tick-container\">\r\n @for (tick of _tickArray(); track tick) {\r\n <div\r\n class=\"ard-value-tick\"\r\n [style]=\"{ left: tick }\"\r\n ></div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n class=\"ard-slider-handle\"\r\n [tabindex]=\"tabIndex()\"\r\n [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 1\"\r\n (pointerdown)=\"onPointerDownOnHandle($event, 1)\"\r\n (focus)=\"onHandleFocus($event, 1)\"\r\n (blur)=\"onBlur($event)\"\r\n [style]=\"{ left: handlePositionsPercent()[0] }\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-hitbox\"></div>\r\n </button>\r\n @if (tooltipBehavior() !== 'never') {\r\n <div\r\n class=\"ard-slider-tooltip-wrapper\"\r\n [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n [style]=\"{ left: handlePositionsPercent()[0] }\"\r\n >\r\n <ng-template\r\n #defaultTooltipTemplate\r\n let-value\r\n >\r\n <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n [ngTemplateOutletContext]=\"tooltipContexts().from\"\r\n >\r\n </ng-template>\r\n </div>\r\n }\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n class=\"ard-slider-handle\"\r\n [tabindex]=\"tabIndex()\"\r\n [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 2\"\r\n (pointerdown)=\"onPointerDownOnHandle($event, 2)\"\r\n (focus)=\"onHandleFocus($event, 2)\"\r\n (blur)=\"onBlur($event)\"\r\n [style]=\"{ left: handlePositionsPercent()[1] }\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-hitbox\"></div>\r\n </button>\r\n @if (tooltipBehavior() !== 'never') {\r\n <div\r\n class=\"ard-slider-tooltip-wrapper\"\r\n [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n [style]=\"{ left: handlePositionsPercent()[1] }\"\r\n >\r\n <ng-template\r\n #defaultTooltipTemplate\r\n let-value\r\n >\r\n <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n [ngTemplateOutletContext]=\"tooltipContexts().to\"\r\n >\r\n </ng-template>\r\n </div>\r\n }\r\n </div>\r\n @if (labelObjects().length > 0) {\r\n <div class=\"ard-slider-label-container\">\r\n @for (label of labelObjects(); track $index) {\r\n <div\r\n class=\"ard-slider-label\"\r\n [style]=\"{ left: label.positionPercent }\"\r\n >\r\n {{ label.label }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n<ng-template #handleThumbBase>\r\n <div class=\"ard-slide-thumb\"></div>\r\n</ng-template>\r\n", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}ard-range-slider{display:block}.ard-range-slider-container-master{display:flex;flex-direction:column}.ard-range-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-range-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-range-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-range-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-range-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-range-slider-container-master .ard-slider-tooltip,.ard-range-slider-container-master .ard-slider-track,.ard-range-slider-container-master .ard-value-tick-container{position:relative}.ard-range-slider-container-master .ard-value-tick{position:absolute}.ard-range-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-range-slider-container-master .ard-slider-label{position:absolute;line-height:1em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
10478
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumRangeSliderComponent, isStandalone: false, selector: "ard-range-slider", inputs: { selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, minimumDistance: { classPropertyName: "minimumDistance", publicName: "minimumDistance", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:mousemove": "onPointerMove($event)", "document:touchmove": "onPointerMove($event)" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-range-slider-container-master\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-slider-handle-grabbed]=\"isSliderHandleGrabbed()\"\r\n [style]=\"{ '--_ard-slider-transition': sliderTransition() }\"\r\n>\r\n <div class=\"ard-slider-container\">\r\n <div\r\n #track\r\n class=\"ard-slider-track\"\r\n (pointerdown)=\"onTrackHitboxPointerDown($event)\"\r\n >\r\n <div class=\"ard-hitbox\"></div>\r\n <div class=\"ard-slider-track-overlay ard-slider-track-inactive\"></div>\r\n <div\r\n class=\"ard-slider-track-overlay ard-slider-track-active\"\r\n [style]=\"{\r\n left: trackOverlayLeft(),\r\n width: trackOverlayWidth()\r\n }\"\r\n ></div>\r\n @if (showValueTicks()) {\r\n <div class=\"ard-value-tick-container\">\r\n @for (tick of _tickArray(); track tick) {\r\n <div\r\n class=\"ard-value-tick\"\r\n [style]=\"{ left: tick }\"\r\n ></div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n class=\"ard-slider-handle\"\r\n [tabindex]=\"tabIndex()\"\r\n [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 1\"\r\n (pointerdown)=\"onPointerDownOnHandle($event, 1)\"\r\n (focus)=\"onHandleFocus($event, 1)\"\r\n (blur)=\"onBlur($event)\"\r\n [style]=\"{ left: handlePositionsPercent()[0] }\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-hitbox\"></div>\r\n </button>\r\n @if (tooltipBehavior() !== 'never') {\r\n <div\r\n class=\"ard-slider-tooltip-wrapper\"\r\n [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n [style]=\"{ left: handlePositionsPercent()[0] }\"\r\n >\r\n <ng-template\r\n #defaultTooltipTemplate\r\n let-value\r\n >\r\n <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n [ngTemplateOutletContext]=\"tooltipContexts().from\"\r\n >\r\n </ng-template>\r\n </div>\r\n }\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n class=\"ard-slider-handle\"\r\n [tabindex]=\"tabIndex()\"\r\n [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 2\"\r\n (pointerdown)=\"onPointerDownOnHandle($event, 2)\"\r\n (focus)=\"onHandleFocus($event, 2)\"\r\n (blur)=\"onBlur($event)\"\r\n [style]=\"{ left: handlePositionsPercent()[1] }\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-hitbox\"></div>\r\n </button>\r\n @if (tooltipBehavior() !== 'never') {\r\n <div\r\n class=\"ard-slider-tooltip-wrapper\"\r\n [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n [style]=\"{ left: handlePositionsPercent()[1] }\"\r\n >\r\n <ng-template\r\n #defaultTooltipTemplate\r\n let-value\r\n >\r\n <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n [ngTemplateOutletContext]=\"tooltipContexts().to\"\r\n >\r\n </ng-template>\r\n </div>\r\n }\r\n </div>\r\n @if (labelObjects().length > 0) {\r\n <div class=\"ard-slider-label-container\">\r\n @for (label of labelObjects(); track $index) {\r\n <div\r\n class=\"ard-slider-label\"\r\n [style]=\"{ left: label.positionPercent }\"\r\n >\r\n {{ label.label }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n<ng-template #handleThumbBase>\r\n <div class=\"ard-slide-thumb\"></div>\r\n</ng-template>\r\n", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}ard-range-slider{display:block}.ard-range-slider-container-master{display:flex;flex-direction:column}.ard-range-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-range-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-range-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-range-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-range-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-range-slider-container-master .ard-slider-tooltip,.ard-range-slider-container-master .ard-slider-track,.ard-range-slider-container-master .ard-value-tick-container{position:relative}.ard-range-slider-container-master .ard-value-tick{position:absolute}.ard-range-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-range-slider-container-master .ard-slider-label{position:absolute;line-height:1em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
10463
10479
  }
10464
10480
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumRangeSliderComponent, decorators: [{
10465
10481
  type: Component,
@@ -11290,10 +11306,12 @@ class ArdiumCheckboxListComponent extends _NgModelComponentBase {
11290
11306
  selectItem(v) {
11291
11307
  this._itemStorage.selectItem(v);
11292
11308
  this._emitChange();
11309
+ this._emitTouched();
11293
11310
  }
11294
11311
  unselectItem(v) {
11295
11312
  this._itemStorage.unselectItem(v);
11296
11313
  this._emitChange();
11314
+ this._emitTouched();
11297
11315
  }
11298
11316
  toggleItem(v) {
11299
11317
  if (v.selected) {