@breadstone/mosaik-elements-angular 0.0.122 → 0.0.124

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 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
+
+- add alignment property to HintComponent for better layout control ([2213e85eb3](https://github.com/RueDeRennes/mosaik/commit/2213e85eb3))
+- add alignment property to HintElement and update template to support it ([985785e116](https://github.com/RueDeRennes/mosaik/commit/985785e116))
+
 ## 0.0.122 (2025-08-20)
 
 ### 🩹 Fixes

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: [{
@@ -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: [{
@@ -28082,6 +28106,16 @@ let HintComponent = class HintComponent {
             this._element.truncate = value;
         });
     }
+    get alignment() {
+        // @ts-ignore - temporary fix for the type error
+        return this._element.alignment;
+    }
+    set alignment(value) {
+        this._zone.runOutsideAngular(() => {
+            // @ts-ignore - temporary fix for the type error
+            this._element.alignment = value;
+        });
+    }
     get themeName() {
         // @ts-ignore - temporary fix for the type error
         return this._element.themeName;
@@ -28143,12 +28177,12 @@ let HintComponent = class HintComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: HintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: HintComponent, isStandalone: true, selector: "mosaik-hint", inputs: { text: "text", wrap: "wrap", truncate: "truncate", themeName: "themeName", formatter: "formatter", dir: "dir", lang: "lang" }, outputs: { connected: "connected", disconnected: "disconnected", changed: "changed" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: HintComponent, isStandalone: true, selector: "mosaik-hint", inputs: { text: "text", wrap: "wrap", truncate: "truncate", alignment: "alignment", themeName: "themeName", formatter: "formatter", dir: "dir", lang: "lang" }, outputs: { connected: "connected", disconnected: "disconnected", changed: "changed" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 HintComponent = __decorate$1G([
     ProxyCmp({
         defineCustomElementFn: () => customElements.define('mosaik-hint', HintElement),
-        inputs: ['text', 'wrap', 'truncate', 'themeName', 'formatter', 'dir', 'lang'],
+        inputs: ['text', 'wrap', 'truncate', 'alignment', 'themeName', 'formatter', 'dir', 'lang'],
         methods: ['adoptStyle', 'on', 'off', 'emit', 'requestUpdate']
     }),
     __metadata$1G("design:paramtypes", [])
@@ -28160,7 +28194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
-                    inputs: ['text', 'wrap', 'truncate', 'themeName', 'formatter', 'dir', 'lang'],
+                    inputs: ['text', 'wrap', 'truncate', 'alignment', 'themeName', 'formatter', 'dir', 'lang'],
                     outputs: ['connected', 'disconnected', 'changed']
                 }]
         }], ctorParameters: () => [], propDecorators: { text: [{
@@ -28169,6 +28203,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 type: Input
             }], truncate: [{
                 type: Input
+            }], alignment: [{
+                type: Input
             }], themeName: [{
                 type: Input
             }], formatter: [{
@@ -38397,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;
@@ -38489,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),
@@ -38504,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", [])
@@ -38516,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: [
@@ -38551,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: [{
@@ -52071,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;
@@ -52163,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),
@@ -52178,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", [])
@@ -52190,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: [
@@ -52225,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: [{