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

package/fesm2022/ardium-ui-ui.mjs

@@ -429,10 +429,13 @@ class _NgModelComponentBase extends _FocusableComponentBase {
             // the touched event will not be fired
             if (!this._shouldEmitTouched)
                 return;
-            this.wasTouched.set(true);
-            this._onTouchedRegistered?.();
+            this._emitTouched();
         }, 0);
     }
+    _emitTouched() {
+        this.wasTouched.set(true);
+        this._onTouchedRegistered?.();
+    }
     ngOnInit() {
         this._ngControl = this._injector.get(NgControl, null);
         if (this._ngControl) {
@@ -4959,10 +4962,6 @@ class _FileInputComponentBase extends _FormFieldComponentBase {
         this.currentViewState.set('uploaded');
         this._emitTouched();
     }
-    _emitTouched() {
-        this.wasTouched.set(true);
-        this._onTouchedRegistered?.();
-    }
     onFocus(event) {
         if (this._isFilePickerOpen) {
             setTimeout(() => {
@@ -8480,10 +8479,6 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
     onBlurMaster(event) {
         this.onBlur(event);
     }
-    _emitTouched() {
-        this.wasTouched.set(true);
-        this._onTouchedRegistered?.();
-    }
     //change
     onChange(event) {
         event.stopPropagation();
@@ -10011,7 +10006,7 @@ const _asbtractSliderDefaults = {
     ..._ngModelComponentDefaults,
     noTooltip: false,
     showValueTicks: false,
-    formatTooltipFn: undefined,
+    formatTooltipFn: v => v,
     min: 0,
     max: 100,
     step: 1,
@@ -10023,7 +10018,7 @@ const _asbtractSliderDefaults = {
     tooltipPosition: SliderDecorationPosition.Top,
     tooltipBehavior: SliderTooltipBehavior.Auto,
     selectionBehavior: ArdRangeSelectionBehavior.Allow,
-    allowEqualValues: false,
+    minimumDistance: 0,
 };
 class _AbstractSlider extends _NgModelComponentBase {
     constructor() {
@@ -10034,8 +10029,6 @@ class _AbstractSlider extends _NgModelComponentBase {
         this.overlay = inject(Overlay);
         this.scrollStrategyOpts = inject(ScrollStrategyOptions);
         this.viewContainerRef = inject(ViewContainerRef);
-        this.noTooltip = input(this._DEFAULTS.noTooltip, { transform: v => coerceBooleanProperty(v) });
-        this.tooltipFormatFn = input(this._DEFAULTS.formatTooltipFn);
         //! min, max, step sizes
         this.min = input(this._DEFAULTS.min, {
             transform: v => coerceNumberProperty(v, this._DEFAULTS.min),
@@ -10088,18 +10081,29 @@ class _AbstractSlider extends _NgModelComponentBase {
             return newArr.map(v => `${v}%`);
         });
         //! labels
+        this._transformLabelInput = (labels) => {
+            if (!isDefined(labels) || (Array.isArray(labels) && labels.length === 0)) {
+                return [];
+            }
+            if (typeof labels === 'string') {
+                labels = coerceArrayProperty(labels).map(Number);
+            }
+            if (isDefined(labels[0]) && typeof labels[0] === 'number') {
+                return labels.map(label => ({ label, value: label }));
+            }
+            return labels;
+        };
         this.labelPosition = input(this._DEFAULTS.labelPosition);
-        this.labels = input(this._DEFAULTS.labels);
+        this.labels = input(this._transformLabelInput(this._DEFAULTS.labels), { transform: v => this._transformLabelInput(v) });
         this.labelObjects = computed(() => {
             const v = this.labels();
             if (!isDefined(v) || v.length === 0) {
                 return [];
             }
             return v.map(label => {
-                const obj = isObject(label) ? label : { label, for: label };
-                const v = this._clampValue(obj.for);
+                const v = this._clampValue(label.value);
                 return {
-                    label: String(obj.label),
+                    label: String(label.label),
                     positionPercent: `${this._valueToPercent(v) * 100}%`,
                 };
             });
@@ -10129,6 +10133,8 @@ class _AbstractSlider extends _NgModelComponentBase {
         this._totalSteps = computed(() => (this.max() - this.min()) / this.step());
         this.valueChange = output();
         //! tooltip
+        this.noTooltip = input(this._DEFAULTS.noTooltip, { transform: v => coerceBooleanProperty(v) });
+        this.tooltipFormatFn = input(this._DEFAULTS.formatTooltipFn);
         this.tooltipTemplate = contentChild(ArdSliderTooltipDirective);
         this.tooltipPosition = input(SliderDecorationPosition.Top);
         this.tooltipBehavior = input(SliderTooltipBehavior.Auto);
@@ -10145,7 +10151,10 @@ class _AbstractSlider extends _NgModelComponentBase {
                 this.renderer.removeClass(this.document.body, 'ard-body-slider-handle-grabbed');
             }
         });
-        this.handlePositionsPercent = computed(() => [this._handlePositions()[0] * 100 + '%', this._handlePositions()[1] * 100 + '%']);
+        this.handlePositionsPercent = computed(() => [
+            this._handlePositions()[0] * 100 + '%',
+            this._handlePositions()[1] * 100 + '%',
+        ]);
     }
     set value(newValue) {
         this.writeValue(newValue);
@@ -10235,24 +10244,44 @@ class _AbstractSlider extends _NgModelComponentBase {
     //! key press handlers
     onKeyPress(event) {
         switch (event.code) {
-            case 'ArrowLeft': {
+            case 'ArrowLeft':
+            case 'ArrowDown': {
                 this._decrement(event);
                 return;
             }
-            case 'ArrowRight': {
+            case 'ArrowRight':
+            case 'ArrowUp': {
                 this._increment(event);
                 return;
             }
+            case 'PageDown': {
+                this._decrement(event, true);
+                return;
+            }
+            case 'PageUp': {
+                this._increment(event, true);
+                return;
+            }
+            case 'Home': {
+                this._decrement(event, true);
+                // TODO: should go to min directly
+                return;
+            }
+            case 'End': {
+                this._increment(event, true);
+                // TODO: should go to max directly
+                return;
+            }
         }
     }
-    _decrement(event, steps = 1) {
-        this._offset(-steps, event.shiftKey);
+    _decrement(event, forceShift = false) {
+        this._offset(-1, forceShift || event.shiftKey);
     }
-    _increment(event, steps = 1) {
-        this._offset(+steps, event.shiftKey);
+    _increment(event, forceShift = false) {
+        this._offset(+1, forceShift || event.shiftKey);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _AbstractSlider, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    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 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _AbstractSlider, decorators: [{
             type: Directive
@@ -10288,14 +10317,16 @@ class ArdiumRangeSliderComponent extends _AbstractSlider {
         this.componentName = 'range-slider';
         this._value = signal({ from: -Number.MIN_SAFE_INTEGER, to: Number.MIN_SAFE_INTEGER });
         this.selectionBehavior = input(this._DEFAULTS.selectionBehavior);
-        this.allowEqualValues = input(this._DEFAULTS.allowEqualValues, { transform: v => coerceBooleanProperty(v) });
+        this.minimumDistance = input(this._DEFAULTS.minimumDistance, {
+            transform: v => coerceNumberProperty(v, this._DEFAULTS.minimumDistance),
+        });
         //! tooltip updater
         this._tooltipValue = computed(() => {
             const v = this._value();
             const formatFn = this.tooltipFormatFn();
             const tooltipValue = {
-                from: String(formatFn?.(v.from) ?? v.from),
-                to: String(formatFn?.(v.to) ?? v.to),
+                from: String(formatFn(v.from)),
+                to: String(formatFn(v.to)),
             };
             return tooltipValue;
         });
@@ -10357,7 +10388,7 @@ class ArdiumRangeSliderComponent extends _AbstractSlider {
         }
         const fromClamped = this._clampValue(from);
         const toClamped = this._clampValue(to);
-        const value = { from: fromClamped, to: toClamped };
+        const value = this._normalizeSliderRange({ from: fromClamped, to: toClamped });
         if (value.from === this.value.from && value.to === this.value.to) {
             return;
         }
@@ -10402,17 +10433,16 @@ class ArdiumRangeSliderComponent extends _AbstractSlider {
         //round to 9 decimal places to avoid floating point arithmetic errors
         //9 is an arbitrary number that just works well. ¯\_(ツ)_/¯
         newVal = roundToPrecision(newVal, 9);
-        const stepConsideringAllowEqual = this.allowEqualValues() ? 0 : this.step();
-        console.log('stepConsideringAllowEqual', stepConsideringAllowEqual);
+        const minimumDistanceInSteps = this.step() * this.minimumDistance();
         const currValue = this._value();
         const newValObj = { from: currValue.from, to: currValue.to };
         if (handleId === 1) {
-            if (newVal >= currValue.to) {
+            if (newVal >= currValue.to - minimumDistanceInSteps) {
                 if (this.selectionBehavior() === ArdRangeSelectionBehavior.Block) {
-                    newVal = currValue.to - stepConsideringAllowEqual;
+                    newVal = currValue.to - minimumDistanceInSteps;
                 }
                 else if (this.selectionBehavior() === ArdRangeSelectionBehavior.Push) {
-                    newValObj.to = newVal + stepConsideringAllowEqual;
+                    newValObj.to = newVal + minimumDistanceInSteps;
                 }
                 else {
                     // Allow - do nothing
@@ -10421,12 +10451,12 @@ class ArdiumRangeSliderComponent extends _AbstractSlider {
             newValObj.from = newVal;
         }
         else {
-            if (newVal <= currValue.from) {
+            if (newVal <= currValue.from + minimumDistanceInSteps) {
                 if (this.selectionBehavior() === ArdRangeSelectionBehavior.Block) {
-                    newVal = currValue.from + stepConsideringAllowEqual;
+                    newVal = currValue.from + minimumDistanceInSteps;
                 }
                 else if (this.selectionBehavior() === ArdRangeSelectionBehavior.Push) {
-                    newValObj.from = newVal - stepConsideringAllowEqual;
+                    newValObj.from = newVal - minimumDistanceInSteps;
                 }
                 else {
                     // Allow - do nothing
@@ -10445,7 +10475,7 @@ class ArdiumRangeSliderComponent extends _AbstractSlider {
         this.currentHandle.set(null);
     }
     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 }); }
-    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 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumRangeSliderComponent, decorators: [{
             type: Component,
@@ -11276,10 +11306,12 @@ class ArdiumCheckboxListComponent extends _NgModelComponentBase {
     selectItem(v) {
         this._itemStorage.selectItem(v);
         this._emitChange();
+        this._emitTouched();
     }
     unselectItem(v) {
         this._itemStorage.unselectItem(v);
         this._emitChange();
+        this._emitTouched();
     }
     toggleItem(v) {
         if (v.selected) {