add textAlign property (#54)

Author: vicmans

CHANGELOG.md

@@ -1,6 +1,10 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## [1.5.3] - 2024-07-20
+### Added
+- Add `textAlign` input property ([#53](https://github.com/vicmans/ng-toggle-button/issues/53))
+
 ## [1.5.2] - 2023-08-06
 ### Added
 - Add config for disabled styles (#52)

README.md

@@ -93,6 +93,7 @@ Use
 | name | `string` | `undefined` | Name to attach to the generated input field |
 | fontSize | `number` | `10` | Font size in pixels |
 | fontColor | `string | toggleConfig` | `undefined` | If `string` - color when checked <br>If `toggleConfig` - colors for labels when checked/uncheked <br>Example: `{checked: '#25EF02', unchecked: '#35DB15'}` by default the text color is white.|
+| textAlign | `string \| toggleConfig` | `{checked: 'left', unchecked: 'right'}` | If `string`: text-align is applied both `checked` and `unchecked` labels<br>If `toggleConfig`: Text align of checked/unchecked labels<br>Example: `{checked: 'center', unchecked: 'center'}`|
 | values | `{checked: any, unchecked: any}` | `{checked: true, unchecked: false}` | Values for checked and unchecked states, by default checked value is `true` and unchecked value is `false` <br>Example: `{checked: 1, unchecked: 0}`.|
 
 `toggleConfig` type is described below:

package-lock.json

@@ -2,7 +2,7 @@
   "name": "ng-toggle-button",
   "description": "A toggle button component",
   "author": "vicmans",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "homepage": "https://github.com/vicmans/ng-toggle-button#readme",
   "repository": {
     "type": "git",

package.json

@@ -24,7 +24,7 @@ <h2 class="subtitle">
     [(ngModel)]="prueba"
     [labels]="{checked: 'Encendido', unchecked: 'Apagado'}"
     [color]="{checked: '#007a66', unchecked: '#ddd', disabled: '#bfbfbf'}"
-    [width]="82"
+    [width]="90"
   ></ng-toggle>
   <p class="is-family-code">ngModel: {{prueba}}</p>
 
@@ -124,6 +124,7 @@ <h2 class="subtitle">
         [fontColor]="config.fontColor"
         [fontSize]="config.fontSize"
         [values]="config.values"
+        [textAlign]="config.textAlign"
         (change)="changeEvent()"
       ></ng-toggle>
       <br>
@@ -139,6 +140,7 @@ <h2 class="subtitle">
   [color]="{{config.color|json}}"
   [switchColor]="{{config.switchColor|json}}"
   [values]="{{config.values|json}}"
+  [textAlign]="{{config.textAlign|json}}"
   [fontColor]="{{config.fontColor|json}}">
 &lt;/ng-toggle>
       </pre>
@@ -269,6 +271,35 @@ <h2 class="subtitle">
         </div>
       </div>
 
+      <div class="field is-horizontal">
+        <div class="field-label">
+          <label class="label">checked alignment: </label>
+        </div>
+        <div class="field-body">
+          <div class="select">
+            <select [(ngModel)]="config.textAlign.checked">
+              <option>left</option>
+              <option>center</option>
+              <option>right</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div class="field is-horizontal">
+        <div class="field-label">
+          <label class="label">unchecked alignment: </label>
+        </div>
+        <div class="field-body">
+          <div class="select">
+            <select [(ngModel)]="config.textAlign.unchecked">
+              <option>left</option>
+              <option>center</option>
+              <option>right</option>
+            </select>
+          </div>
+        </div>
+      </div>
 
       <div class="field is-horizontal">
         <div class="field-label">

projects/demo/src/app/app.component.html

@@ -44,6 +44,10 @@ export class AppComponent {
       checked: '#fafafa',
       unchecked: '#f45a32',
       disabled: '#ffffff'
+    },
+    textAlign: {
+      checked: 'left',
+      unchecked: 'right',
     }
   }
   myForm: FormGroup;

projects/demo/src/app/app.component.ts

@@ -86,8 +86,19 @@ Use
 | name | `string` | `undefined` | Name to attach to the generated input field |
 | fontSize | `number` | `10` | Font size in pixels |
 | fontColor | `string  Object` | `undefined` | If `string` - color when checked <br>If `Object` - colors for labels when checked/uncheked <br>Example: `{checked: '#25EF02', unchecked: '#35DB15'}` by default the text color is white.|
+| textAlign | `string \| toggleConfig` | `{checked: 'left', unchecked: 'right'}` | If `string`: text-align is applied both `checked` and `unchecked` labels<br>If `toggleConfig`: Text align of checked/unchecked labels<br>Example: `{checked: 'center', unchecked: 'center'}`|
 | values | `{checked: any, unchecked: any}` | `{checked: true, unchecked: false}` | Values for checked and unchecked states, by default checked value is `true` and unchecked value is `false` <br>Example: `{checked: 1, unchecked: 0}`.|
 
+`toggleConfig` type is described below:
+
+```ts
+toggleConfig = {
+  checked: string;
+  unchecked: string;
+  disabled?: string;
+};
+```
+
 ### Outputs events
 
 | Name   | Payload | Description |

projects/ng-toggle/README.md

@@ -1,6 +1,6 @@
 {
   "name": "ng-toggle-button",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "Angular toggle button switch",
   "author": "vicmans",
   "license": "MIT",

projects/ng-toggle/package.json

@@ -28,14 +28,14 @@
   <ng-container *ngIf="labels">
     <span
       class="ng-toggle-switch-label ng-toggle-left"
-      [ngStyle]="labelStyle"
+      [ngStyle]="labelLeftStyle"
       *ngIf="toggled"
     >
       {{labelChecked}}
     </span>
     <span
       class="ng-toggle-switch-label ng-toggle-right"
-      [ngStyle]="labelStyle"
+      [ngStyle]="labelRightStyle"
       *ngIf="!toggled"
     >
       {{labelUnchecked}}

projects/ng-toggle/src/lib/ng-toggle.component.html

@@ -25,11 +25,13 @@ label {
     font-weight: 600;
     color: white;
     z-index: 1;
+    padding: 0 10px;
+    box-sizing: border-box;
     &.ng-toggle-left {
-      left: 10px;
+      left: 0;
     }
     &.ng-toggle-right {
-      right: 10px;
+      right: 0;
     }
   }
   .ng-toggle-switch-core {

projects/ng-toggle/src/lib/ng-toggle.component.scss

@@ -39,6 +39,10 @@ export class NgToggleComponent implements OnInit, ControlValueAccessor, OnChange
   @Input() labels: boolean | toggleConfig = this.config.labels || true
   @Input() fontColor: string | toggleConfig = this.config.fontColor || undefined
   @Input() values: valueConfig = this.config.values || {checked: true, unchecked: false}
+  @Input() textAlign: string | toggleConfig = this.config.textAlign || {
+    checked: 'left',
+    unchecked: 'right',
+  }
   @Input() id: string = ''
   @Input('aria-label') ariaLabel: string | null = null;
   @Input('aria-labelledby') ariaLabelledby: string | null = null;
@@ -142,7 +146,20 @@ export class NgToggleComponent implements OnInit, ControlValueAccessor, OnChange
     return {
       lineHeight: px(this.height),
       fontSize: this.fontSize ? px(this.fontSize) : null,
-      color: this.fontColor ? this.fontColorCurrent : null
+      color: this.fontColor ? this.fontColorCurrent : null,
+      width: px(this.width - this.buttonRadius - this.margin),
+    }
+  }
+  get labelLeftStyle () {
+    return {
+      ...this.labelStyle,
+      textAlign: (this.textAlign as toggleConfig).checked || this.textAlign
+    }
+  }
+  get labelRightStyle () {
+    return {
+      ...this.labelStyle,
+      textAlign: (this.textAlign as toggleConfig).unchecked || this.textAlign
     }
   }
 

projects/ng-toggle/src/lib/ng-toggle.component.ts

@@ -16,4 +16,5 @@ export class NgToggleConfig {
   labels?: boolean | toggleConfig;
   values?: valueConfig;
   fontColor?: string | toggleConfig;
+  textAlign?: string | toggleConfig;
 }