@ardium-ui/ui 5.0.0-alpha.79 → 5.0.0-alpha.80

package/fesm2022/ardium-ui-ui.mjs

@@ -4583,6 +4583,7 @@ class _BooleanComponentBase extends _NgModelComponentBase {
     toggleSelected() {
         this.selected.update(v => !v);
         this._emitChange();
+        this._emitTouched();
     }
     /**
      * Sets the state to "selected". Emits all appropriate events only if the state changes.
@@ -4590,6 +4591,7 @@ class _BooleanComponentBase extends _NgModelComponentBase {
     select() {
         this.selected.set(true);
         this._emitChange();
+        this._emitTouched();
     }
     /**
      * Sets the state to "unselected". Emits all appropriate events only if the state changes.
@@ -4597,6 +4599,7 @@ class _BooleanComponentBase extends _NgModelComponentBase {
     unselect() {
         this.selected.set(false);
         this._emitChange();
+        this._emitTouched();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _BooleanComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: _BooleanComponentBase, isStandalone: true, inputs: { _selected: { classPropertyName: "_selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, reverseSelected: { classPropertyName: "reverseSelected", publicName: "reverseSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectEvent: "select", unselectEvent: "unselect", changeEvent: "change", selectedChange: "selectedChange" }, host: { properties: { "attr.selected": "this._selectedHostAttribute", "class.ard-selected": "this._selectedHostAttribute" } }, usesInheritance: true, ngImport: i0 }); }
@@ -10521,6 +10524,10 @@ class ArdiumRadioComponent extends _FocusableComponentBase {
          * The event emitter responsible for firing `change` events. Fired when the `selected` state is changed.
          */
         this.changeEvent = output({ alias: 'change' });
+        /**
+         * The event emitter responsible for firing `touched` events. Fired when the component is marked as touched (e.g., on blur).
+         */
+        this.touchedEvent = output({ alias: 'touched' });
         //! [(selected)] two-way binding
         // can be set using a no-value argument
         this.selected = signal(false);
@@ -10540,12 +10547,15 @@ class ArdiumRadioComponent extends _FocusableComponentBase {
      */
     _emitChange() {
         if (this.selected())
-            this.selectEvent.emit(null);
+            this.selectEvent.emit();
         else
-            this.unselectEvent.emit(null);
+            this.unselectEvent.emit();
         this.selectedChange.emit(this.selected());
         this.changeEvent.emit(this.selected());
     }
+    _emitTouched() {
+        this.touchedEvent.emit();
+    }
     /**
      * The selection state of the component. Coercible into a boolean.
      */
@@ -10561,6 +10571,7 @@ class ArdiumRadioComponent extends _FocusableComponentBase {
     toggleSelected() {
         this.selected.update(v => !v);
         this._emitChange();
+        this._emitTouched();
     }
     /**
      * Sets the state to "selected". Emits all appropriate events only if the state changes.
@@ -10568,6 +10579,7 @@ class ArdiumRadioComponent extends _FocusableComponentBase {
     select() {
         this.selected.set(true);
         this._emitChange();
+        this._emitTouched();
     }
     /**
      * Sets the state to "unselected". Emits all appropriate events only if the state changes.
@@ -10575,6 +10587,7 @@ class ArdiumRadioComponent extends _FocusableComponentBase {
     unselect() {
         this.selected.set(false);
         this._emitChange();
+        this._emitTouched();
     }
     //! event handlers
     onMousedown() {
@@ -10596,7 +10609,7 @@ class ArdiumRadioComponent extends _FocusableComponentBase {
         this._changeDetector.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumRadioComponent, deps: [{ token: ARD_RADIO_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumRadioComponent, isStandalone: false, selector: "ard-radio", inputs: { htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: true, isRequired: false, transformFunction: null }, _selected: { classPropertyName: "_selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectEvent: "select", unselectEvent: "unselect", changeEvent: "change", selectedChange: "selectedChange" }, host: { properties: { "attr.selected": "this._selectedHostAttribute", "class.ard-selected": "this._selectedHostAttribute" } }, usesInheritance: true, ngImport: i0, template: "<button\r\n  #focusableElement\r\n  class=\"ard-radio\"\r\n  type=\"button\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n  (mousedown)=\"onMousedown()\"\r\n  (mouseup)=\"onMouseup()\"\r\n  [tabindex]=\"tabIndex()\"\r\n>\r\n  <div class=\"ard-radio-circles\">\r\n    <div class=\"ard-radio-outer-circle\"></div>\r\n    <div class=\"ard-radio-inner-circle\"></div>\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    <div class=\"ard-hitbox\"></div>\r\n  </div>\r\n  <label [for]=\"htmlId()\">\r\n    <ng-content></ng-content>\r\n  </label>\r\n</button>\r\n\r\n<input\r\n  class=\"ard-radio-input-element\"\r\n  type=\"radio\"\r\n  [name]=\"name()\"\r\n  [id]=\"htmlId()\"\r\n  [checked]=\"selected()\"\r\n  #radio\r\n/>\r\n", styles: ["@layer ard-ui{ard-radio{display:block}.ard-radio{border:none;background:none}.ard-radio>label{pointer-events:none}ard-radio>.ard-radio-input-element{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumRadioComponent, isStandalone: false, selector: "ard-radio", inputs: { htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: true, isRequired: false, transformFunction: null }, _selected: { classPropertyName: "_selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectEvent: "select", unselectEvent: "unselect", changeEvent: "change", touchedEvent: "touched", selectedChange: "selectedChange" }, host: { properties: { "attr.selected": "this._selectedHostAttribute", "class.ard-selected": "this._selectedHostAttribute" } }, usesInheritance: true, ngImport: i0, template: "<button\r\n  #focusableElement\r\n  class=\"ard-radio\"\r\n  type=\"button\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n  (mousedown)=\"onMousedown()\"\r\n  (mouseup)=\"onMouseup()\"\r\n  [tabindex]=\"tabIndex()\"\r\n>\r\n  <div class=\"ard-radio-circles\">\r\n    <div class=\"ard-radio-outer-circle\"></div>\r\n    <div class=\"ard-radio-inner-circle\"></div>\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    <div class=\"ard-hitbox\"></div>\r\n  </div>\r\n  <label [for]=\"htmlId()\">\r\n    <ng-content></ng-content>\r\n  </label>\r\n</button>\r\n\r\n<input\r\n  class=\"ard-radio-input-element\"\r\n  type=\"radio\"\r\n  [name]=\"name()\"\r\n  [id]=\"htmlId()\"\r\n  [checked]=\"selected()\"\r\n  #radio\r\n/>\r\n", styles: ["@layer ard-ui{ard-radio{display:block}.ard-radio{border:none;background:none}.ard-radio>label{pointer-events:none}ard-radio>.ard-radio-input-element{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumRadioComponent, decorators: [{
             type: Component,
@@ -10664,6 +10677,9 @@ class ArdiumRadioGroupComponent extends _FormFieldComponentBase {
                         return;
                     this._handleChangeEvents(radio);
                 }));
+                this._childEventSubs.push(radio.touchedEvent.subscribe(() => {
+                    this._emitTouched();
+                }));
             }
         });
     }
@@ -10753,6 +10769,9 @@ class ArdiumRadioGroupComponent extends _FormFieldComponentBase {
                     return;
                 this._handleChangeEvents(radio);
             }));
+            this._childEventSubs.push(radio.touchedEvent.subscribe(() => {
+                this._emitTouched();
+            }));
         }
     }
     ngOnDestroy() {
@@ -11332,6 +11351,7 @@ class _SelectableListComponentBase extends _FormFieldComponentBase {
         if (selected.length > 0) {
             this.addEvent.emit(selected);
             this._emitChange();
+            this._emitTouched();
         }
     }
     unselectItem(...items) {
@@ -11339,6 +11359,7 @@ class _SelectableListComponentBase extends _FormFieldComponentBase {
         if (unselected.length > 0)
             this.removeEvent.emit(unselected);
         this._emitChange();
+        this._emitTouched();
     }
     onMouseMove() {
         this.isMouseBeingUsed.set(true);