Update 10 files

apps/demo/src/app/home/home.page.html

@@ -1,2 +1,5 @@
-<sio-page title="Home">    
+<sio-page title="Home"> 
+
+        <sio-input name="app_title"></sio-input>
+
 </sio-page>   

apps/demo/src/assets/i18n/en.json

@@ -1,5 +1,6 @@
 {
     "M_HOME": "Home",
     "M_ABOUT": "About",
-    "M_SETTINGS": "Settings"
+    "M_SETTINGS": "Settings",
+    "LABEL_APP_TITLE" : "Titolo App"
 }

apps/demo/src/assets/i18n/it.json

@@ -2,5 +2,6 @@
     "M_HOME": "Home",
     "M_ABOUT": "Info",
     "M_SETTINGS": "Opzioni",
-    "L_LANGUAGE": "test"
+    "L_LANGUAGE": "test",
+    "LABEL_APP_TITLE" : "Titolo App"
 }

libs/core/src/i18n/it.ts

@@ -1,5 +1,7 @@
 export const it = {
     'L_LANGUAGE' : 'Lingua',
+    'L_DARKMODE_ON': 'Modalità Scura',
+    'L_DARKMODE_OFF': 'Modalità Chiara',
     'PAGE_TITLE' : 'Titolo Pagina',
     'PAGE_COMPONENT_DEFAULT_1' : 'Pagina Vuota',
     'PAGE_COMPONENT_DEFAULT_2' : 'Crea i Tuoi contenuti',

libs/core/src/lib/components/darkmode-toggle/darkmode-toggle.component.html

@@ -1,7 +1,5 @@
-<ion-list inset="true">
-  <ion-item lines="none" button>
-    <sio-icon [name]="this.icon" slot="start"></sio-icon>
-    <ion-toggle #darkmode_toggle (ionChange)="this.onChange($event)" slot="end"></ion-toggle>
-    <label>{{ this.label | translate }}</label>
-  </ion-item>
-</ion-list>
+<ion-item lines="none" button color="primary">
+  <sio-icon [name]="this.icon" slot="start"></sio-icon>
+  <ion-toggle #darkmode_toggle (ionChange)="this.onChange($event)" slot="end" color="warning"></ion-toggle>
+  <label>{{ this.label | translate }}</label>
+</ion-item>

libs/core/src/lib/components/darkmode-toggle/darkmode-toggle.component.ts

@@ -24,7 +24,6 @@ export class SioCoreDarkModeToggleComponent implements OnInit {
 
   @ViewChild('darkmode_toggle', { static: true }) ionToggle!: IonToggle;
 
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   constructor(
     private sioCoreLoggerService: SioCoreLoggerService,
     public sioCoreAppComponentState: SioCoreAppComponentState
@@ -35,6 +34,7 @@ export class SioCoreDarkModeToggleComponent implements OnInit {
       document.body.classList.toggle('dark', value);
       this.ionToggle.checked = value;
       this.label = this.caption + ((value)?'_ON':'_OFF');   
+      this.icon = (value)?'moon':'sunny'; 
     });
   }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -43,11 +43,9 @@ export class SioCoreDarkModeToggleComponent implements OnInit {
     if (event.detail.checked) {
       this.sioCoreLoggerService.debug('[SioCoreDarkModeToggleComponent][onChange] - New Style is Dark Mode');
       this.sioCoreAppComponentState.setDark(true);
-      this.icon = 'moon';
     } else {
       this.sioCoreLoggerService.debug('[SioCoreDarkModeToggleComponent][onChange] - New Style is Light Mode');
       this.sioCoreAppComponentState.setDark(false);
-      this.icon = 'sunny';
     }
   }
 }

libs/core/src/lib/components/input/input.component.html

@@ -1,11 +1,7 @@
-  <ion-item
-    [class.invalid]="this.invalid"
-    [color]="this.color"
-  >
-    <ion-input
+  <ion-input
       label = "{{ this.label | translate }}"
       [labelPlacement] = "this.position"
-      fill="outline"
+      [fill]="this.fill"
       [(ngModel)]="this.valueInput"
       [autocapitalize]="this.autocapitalize"
       [autocomplete]="this.autocomplete"
@@ -20,4 +16,3 @@
       [errorText]="this.error"
       [helperText]="this.label"
     ></ion-input>
-  </ion-item>

libs/core/src/lib/components/input/input.component.scss

@@ -1,7 +1,7 @@
 :host {
-  /*ion-text {
+  ion-text {
     text-align: left important;
-  }*/
+  }
   .invalid {
     --highlight-color-valid: red; // valid underline color
   }

libs/core/src/lib/components/input/input.component.ts

@@ -38,8 +38,8 @@ export class SioCoreInputComponent implements OnInit {
   }
 
   @Input() public set name(value: string) {
-    if (!this.label) {
-      this._label = `auth.L_${value?.toUpperCase()}`;
+    if (this.label !== '') {
+      this._label = `LABEL_${value?.toUpperCase()}`;
     }
     this._name = value;
   }
@@ -49,6 +49,7 @@ export class SioCoreInputComponent implements OnInit {
   }
 
   @Input() public position: 'stacked' | 'fixed' | 'floating' = 'floating';
+  @Input() public fill: 'outline' | 'solid' | 'none' = 'outline';
   @Input() public autocapitalize: 'on' | 'off' = 'off';
   @Input() public autocomplete: 'on' | 'off' = 'off';
   @Input() public autocorrect: 'on' | 'off' = 'off';