@breadstone/mosaik-elements-angular 0.0.123 → 0.0.125

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## 0.0.125 (2025-08-20)
+
+This was a version bump only for mosaik-elements-angular to align it with other projects, there were no code changes.
+
+## 0.0.124 (2025-08-20)
+
+### 🚀 Features
+
+- add formatter property to Checkbox, Choice, Radio, and ToggleSwitch components for enhanced text formatting ([e43a9d30b4](https://github.com/RueDeRennes/mosaik/commit/e43a9d30b4))
+- update ChoiceElement template and styles for additional slot support ([e9d020bdf9](https://github.com/RueDeRennes/mosaik/commit/e9d020bdf9))
+
 ## 0.0.123 (2025-08-20)
 
 ### 🚀 Features

package/fesm2022/mosaik-elements-angular.mjs

@@ -10802,6 +10802,16 @@ let CheckboxComponent = class CheckboxComponent {
             this._element.label = value;
         });
     }
+    get formatter() {
+        // @ts-ignore - temporary fix for the type error
+        return this._element.formatter;
+    }
+    set formatter(value) {
+        this._zone.runOutsideAngular(() => {
+            // @ts-ignore - temporary fix for the type error
+            this._element.formatter = value;
+        });
+    }
     get isChecked() {
         // @ts-ignore - temporary fix for the type error
         return this._element.isChecked;
@@ -10894,7 +10904,7 @@ let CheckboxComponent = class CheckboxComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: CheckboxComponent, isStandalone: true, selector: "mosaik-checkbox", inputs: { labelPosition: "labelPosition", required: "required", name: "name", themeName: "themeName", invalid: "invalid", value: "value", variant: "variant", appearance: "appearance", disabled: "disabled", label: "label", isChecked: "isChecked", isThreeState: "isThreeState", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { checked: "checked", unchecked: "unchecked", indeterminate: "indeterminate", connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: CheckboxComponent, isStandalone: true, selector: "mosaik-checkbox", inputs: { labelPosition: "labelPosition", required: "required", name: "name", themeName: "themeName", invalid: "invalid", value: "value", variant: "variant", appearance: "appearance", disabled: "disabled", label: "label", formatter: "formatter", isChecked: "isChecked", isThreeState: "isThreeState", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { checked: "checked", unchecked: "unchecked", indeterminate: "indeterminate", connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CheckboxComponent),
@@ -10909,7 +10919,7 @@ let CheckboxComponent = class CheckboxComponent {
 CheckboxComponent = __decorate$2N([
     ProxyCmp({
         defineCustomElementFn: () => customElements.define('mosaik-checkbox', CheckboxElement),
-        inputs: ['labelPosition', 'required', 'name', 'themeName', 'invalid', 'value', 'variant', 'appearance', 'disabled', 'label', 'isChecked', 'isThreeState', 'isFocused', 'dir', 'lang'],
+        inputs: ['labelPosition', 'required', 'name', 'themeName', 'invalid', 'value', 'variant', 'appearance', 'disabled', 'label', 'formatter', 'isChecked', 'isThreeState', 'isFocused', 'dir', 'lang'],
         methods: ['reset', 'checkValidity', 'check', 'uncheck', 'toggle', 'hasVisibleFocusInTree', 'adoptStyle', 'on', 'off', 'emit', 'requestUpdate']
     }),
     __metadata$2N("design:paramtypes", [])
@@ -10921,7 +10931,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
-                    inputs: ['labelPosition', 'required', 'name', 'themeName', 'invalid', 'value', 'variant', 'appearance', 'disabled', 'label', 'isChecked', 'isThreeState', 'isFocused', 'dir', 'lang'],
+                    inputs: ['labelPosition', 'required', 'name', 'themeName', 'invalid', 'value', 'variant', 'appearance', 'disabled', 'label', 'formatter', 'isChecked', 'isThreeState', 'isFocused', 'dir', 'lang'],
                     outputs: ['checked', 'unchecked', 'indeterminate', 'connected', 'disconnected', 'changed'],
                     hostDirectives: [FormStatusDirective],
                     providers: [
@@ -10956,6 +10966,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 type: Input
             }], label: [{
                 type: Input
+            }], formatter: [{
+                type: Input
             }], isChecked: [{
                 type: Input
             }], isThreeState: [{
@@ -12315,7 +12327,7 @@ ChoiceGroupComponent = __decorate$2I([
     ProxyCmp({
         defineCustomElementFn: () => customElements.define('mosaik-choice-group', ChoiceGroupElement),
         inputs: ['name', 'required', 'themeName', 'orientation', 'invalid', 'value', 'disabled', 'appearance', 'variant', 'dir', 'lang'],
-        methods: ['checkValidity', 'onSlotChanges', 'assignToSlot', 'getSlotAssignments', 'getSlotAssignmentsOf', 'hasSlotContent', 'hasSlot', 'adoptStyle', 'on', 'off', 'emit', 'requestUpdate']
+        methods: ['onSlotChanges', 'checkValidity', 'reset', 'assignToSlot', 'getSlotAssignments', 'getSlotAssignmentsOf', 'hasSlotContent', 'hasSlot', 'adoptStyle', 'on', 'off', 'emit', 'requestUpdate']
     }),
     __metadata$2I("design:paramtypes", [])
 ], ChoiceGroupComponent);
@@ -12557,6 +12569,16 @@ let ChoiceComponent = class ChoiceComponent {
             this._element.value = value;
         });
     }
+    get formatter() {
+        // @ts-ignore - temporary fix for the type error
+        return this._element.formatter;
+    }
+    set formatter(value) {
+        this._zone.runOutsideAngular(() => {
+            // @ts-ignore - temporary fix for the type error
+            this._element.formatter = value;
+        });
+    }
     get isChecked() {
         // @ts-ignore - temporary fix for the type error
         return this._element.isChecked;
@@ -12649,7 +12671,7 @@ let ChoiceComponent = class ChoiceComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ChoiceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ChoiceComponent, isStandalone: true, selector: "mosaik-choice", inputs: { name: "name", additional: "additional", required: "required", icon: "icon", iconPosition: "iconPosition", themeName: "themeName", invalid: "invalid", disabled: "disabled", appearance: "appearance", variant: "variant", label: "label", value: "value", isChecked: "isChecked", isThreeState: "isThreeState", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { checked: "checked", unchecked: "unchecked", indeterminate: "indeterminate", connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ChoiceComponent, isStandalone: true, selector: "mosaik-choice", inputs: { name: "name", additional: "additional", required: "required", icon: "icon", iconPosition: "iconPosition", themeName: "themeName", invalid: "invalid", disabled: "disabled", appearance: "appearance", variant: "variant", label: "label", value: "value", formatter: "formatter", isChecked: "isChecked", isThreeState: "isThreeState", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { checked: "checked", unchecked: "unchecked", indeterminate: "indeterminate", connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ChoiceComponent),
@@ -12664,7 +12686,7 @@ let ChoiceComponent = class ChoiceComponent {
 ChoiceComponent = __decorate$2H([
     ProxyCmp({
         defineCustomElementFn: () => customElements.define('mosaik-choice', ChoiceElement),
-        inputs: ['name', 'additional', 'required', 'icon', 'iconPosition', 'themeName', 'invalid', 'disabled', 'appearance', 'variant', 'label', 'value', 'isChecked', 'isThreeState', 'isFocused', 'dir', 'lang'],
+        inputs: ['name', 'additional', 'required', 'icon', 'iconPosition', 'themeName', 'invalid', 'disabled', 'appearance', 'variant', 'label', 'value', 'formatter', 'isChecked', 'isThreeState', 'isFocused', 'dir', 'lang'],
         methods: ['reset', 'checkValidity', 'check', 'uncheck', 'toggle', 'hasVisibleFocusInTree', 'adoptStyle', 'on', 'off', 'emit', 'requestUpdate']
     }),
     __metadata$2H("design:paramtypes", [])
@@ -12676,7 +12698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
-                    inputs: ['name', 'additional', 'required', 'icon', 'iconPosition', 'themeName', 'invalid', 'disabled', 'appearance', 'variant', 'label', 'value', 'isChecked', 'isThreeState', 'isFocused', 'dir', 'lang'],
+                    inputs: ['name', 'additional', 'required', 'icon', 'iconPosition', 'themeName', 'invalid', 'disabled', 'appearance', 'variant', 'label', 'value', 'formatter', 'isChecked', 'isThreeState', 'isFocused', 'dir', 'lang'],
                     outputs: ['checked', 'unchecked', 'indeterminate', 'connected', 'disconnected', 'changed'],
                     hostDirectives: [FormStatusDirective],
                     providers: [
@@ -12715,6 +12737,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 type: Input
             }], value: [{
                 type: Input
+            }], formatter: [{
+                type: Input
             }], isChecked: [{
                 type: Input
             }], isThreeState: [{
@@ -38409,6 +38433,16 @@ let RadioComponent = class RadioComponent {
             this._element.label = value;
         });
     }
+    get formatter() {
+        // @ts-ignore - temporary fix for the type error
+        return this._element.formatter;
+    }
+    set formatter(value) {
+        this._zone.runOutsideAngular(() => {
+            // @ts-ignore - temporary fix for the type error
+            this._element.formatter = value;
+        });
+    }
     get isChecked() {
         // @ts-ignore - temporary fix for the type error
         return this._element.isChecked;
@@ -38501,7 +38535,7 @@ let RadioComponent = class RadioComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: RadioComponent, isStandalone: true, selector: "mosaik-radio", inputs: { labelPosition: "labelPosition", required: "required", name: "name", themeName: "themeName", invalid: "invalid", value: "value", variant: "variant", appearance: "appearance", disabled: "disabled", label: "label", isChecked: "isChecked", isThreeState: "isThreeState", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { checked: "checked", unchecked: "unchecked", indeterminate: "indeterminate", connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: RadioComponent, isStandalone: true, selector: "mosaik-radio", inputs: { labelPosition: "labelPosition", required: "required", name: "name", themeName: "themeName", invalid: "invalid", value: "value", variant: "variant", appearance: "appearance", disabled: "disabled", label: "label", formatter: "formatter", isChecked: "isChecked", isThreeState: "isThreeState", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { checked: "checked", unchecked: "unchecked", indeterminate: "indeterminate", connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RadioComponent),
@@ -38516,7 +38550,7 @@ let RadioComponent = class RadioComponent {
 RadioComponent = __decorate$_([
     ProxyCmp({
         defineCustomElementFn: () => customElements.define('mosaik-radio', RadioElement),
-        inputs: ['labelPosition', 'required', 'name', 'themeName', 'invalid', 'value', 'variant', 'appearance', 'disabled', 'label', 'isChecked', 'isThreeState', 'isFocused', 'dir', 'lang'],
+        inputs: ['labelPosition', 'required', 'name', 'themeName', 'invalid', 'value', 'variant', 'appearance', 'disabled', 'label', 'formatter', 'isChecked', 'isThreeState', 'isFocused', 'dir', 'lang'],
         methods: ['reset', 'checkValidity', 'check', 'uncheck', 'toggle', 'hasVisibleFocusInTree', 'adoptStyle', 'on', 'off', 'emit', 'requestUpdate']
     }),
     __metadata$_("design:paramtypes", [])
@@ -38528,7 +38562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
-                    inputs: ['labelPosition', 'required', 'name', 'themeName', 'invalid', 'value', 'variant', 'appearance', 'disabled', 'label', 'isChecked', 'isThreeState', 'isFocused', 'dir', 'lang'],
+                    inputs: ['labelPosition', 'required', 'name', 'themeName', 'invalid', 'value', 'variant', 'appearance', 'disabled', 'label', 'formatter', 'isChecked', 'isThreeState', 'isFocused', 'dir', 'lang'],
                     outputs: ['checked', 'unchecked', 'indeterminate', 'connected', 'disconnected', 'changed'],
                     hostDirectives: [FormStatusDirective],
                     providers: [
@@ -38563,6 +38597,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 type: Input
             }], label: [{
                 type: Input
+            }], formatter: [{
+                type: Input
             }], isChecked: [{
                 type: Input
             }], isThreeState: [{
@@ -52083,6 +52119,16 @@ let ToggleSwitchComponent = class ToggleSwitchComponent {
             this._element.label = value;
         });
     }
+    get formatter() {
+        // @ts-ignore - temporary fix for the type error
+        return this._element.formatter;
+    }
+    set formatter(value) {
+        this._zone.runOutsideAngular(() => {
+            // @ts-ignore - temporary fix for the type error
+            this._element.formatter = value;
+        });
+    }
     get isChecked() {
         // @ts-ignore - temporary fix for the type error
         return this._element.isChecked;
@@ -52175,7 +52221,7 @@ let ToggleSwitchComponent = class ToggleSwitchComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ToggleSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ToggleSwitchComponent, isStandalone: true, selector: "mosaik-toggle-switch", inputs: { labelPosition: "labelPosition", required: "required", name: "name", themeName: "themeName", invalid: "invalid", value: "value", variant: "variant", appearance: "appearance", disabled: "disabled", label: "label", isChecked: "isChecked", isThreeState: "isThreeState", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { checked: "checked", unchecked: "unchecked", indeterminate: "indeterminate", connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ToggleSwitchComponent, isStandalone: true, selector: "mosaik-toggle-switch", inputs: { labelPosition: "labelPosition", required: "required", name: "name", themeName: "themeName", invalid: "invalid", value: "value", variant: "variant", appearance: "appearance", disabled: "disabled", label: "label", formatter: "formatter", isChecked: "isChecked", isThreeState: "isThreeState", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { checked: "checked", unchecked: "unchecked", indeterminate: "indeterminate", connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ToggleSwitchComponent),
@@ -52190,7 +52236,7 @@ let ToggleSwitchComponent = class ToggleSwitchComponent {
 ToggleSwitchComponent = __decorate$b([
     ProxyCmp({
         defineCustomElementFn: () => customElements.define('mosaik-toggle-switch', ToggleSwitchElement),
-        inputs: ['labelPosition', 'required', 'name', 'themeName', 'invalid', 'value', 'variant', 'appearance', 'disabled', 'label', 'isChecked', 'isThreeState', 'isFocused', 'dir', 'lang'],
+        inputs: ['labelPosition', 'required', 'name', 'themeName', 'invalid', 'value', 'variant', 'appearance', 'disabled', 'label', 'formatter', 'isChecked', 'isThreeState', 'isFocused', 'dir', 'lang'],
         methods: ['checkValidity', 'reset', 'check', 'uncheck', 'toggle', 'hasVisibleFocusInTree', 'adoptStyle', 'on', 'off', 'emit', 'requestUpdate']
     }),
     __metadata$b("design:paramtypes", [])
@@ -52202,7 +52248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
-                    inputs: ['labelPosition', 'required', 'name', 'themeName', 'invalid', 'value', 'variant', 'appearance', 'disabled', 'label', 'isChecked', 'isThreeState', 'isFocused', 'dir', 'lang'],
+                    inputs: ['labelPosition', 'required', 'name', 'themeName', 'invalid', 'value', 'variant', 'appearance', 'disabled', 'label', 'formatter', 'isChecked', 'isThreeState', 'isFocused', 'dir', 'lang'],
                     outputs: ['checked', 'unchecked', 'indeterminate', 'connected', 'disconnected', 'changed'],
                     hostDirectives: [FormStatusDirective],
                     providers: [
@@ -52237,6 +52283,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 type: Input
             }], label: [{
                 type: Input
+            }], formatter: [{
+                type: Input
             }], isChecked: [{
                 type: Input
             }], isThreeState: [{