From 345bec90955c78a86812157b28dc2b2b3d111595 Mon Sep 17 00:00:00 2001
From: Tim Sielemann <tim.sielemann@googlemail.com>
Date: Thu, 22 Aug 2024 11:58:03 +0200
Subject: [PATCH] feat(core): add alignment property to radio, checkboxes and
 toggles (#548)

* feat(core): add alignment property to radio, checkboxes and toggles

* ci(core): fix ci

* feat(core): rename property values

---------

Co-authored-by: Tim Sielemann <tim.sielemann@haiilo.com>
---
 .../catalyst-demo/src/app/app.component.html  | 54 +++++++++++++++++++
 .../catalyst-demo/src/app/app.module.ts       | 11 +++-
 .../catalyst/src/lib/directives/proxies.ts    |  6 +++
 core/src/components.d.ts                      | 24 +++++++++
 .../components/cat-checkbox/cat-checkbox.scss |  8 +++
 .../components/cat-checkbox/cat-checkbox.tsx  | 13 ++++-
 core/src/components/cat-checkbox/readme.md    |  1 +
 core/src/components/cat-radio/cat-radio.scss  |  8 +++
 core/src/components/cat-radio/cat-radio.tsx   | 13 ++++-
 core/src/components/cat-radio/readme.md       |  1 +
 .../src/components/cat-toggle/cat-toggle.scss |  8 +++
 core/src/components/cat-toggle/cat-toggle.tsx | 13 ++++-
 core/src/components/cat-toggle/readme.md      |  1 +
 vue/src/components.ts                         |  3 ++
 14 files changed, 159 insertions(+), 5 deletions(-)

diff --git a/angular/projects/catalyst-demo/src/app/app.component.html b/angular/projects/catalyst-demo/src/app/app.component.html
index 1f095cd5..9ca7be70 100644
--- a/angular/projects/catalyst-demo/src/app/app.component.html
+++ b/angular/projects/catalyst-demo/src/app/app.component.html
@@ -51,4 +51,58 @@ <h1>new datepicker & timepicker</h1>
     hint="Depends on formControl state"
   ></cat-datepicker>
   <formly-form [form]="form" [fields]="fields"></formly-form>
+  <cat-checkbox>
+    <div slot="label">
+      <div>LABEL START</div>
+      <div>Subline</div>
+    </div>
+  </cat-checkbox>
+  <cat-checkbox alignment="center">
+    <div slot="label">
+      <div>LABEL CENTER</div>
+      <div>Subline</div>
+    </div>
+  </cat-checkbox>
+  <cat-checkbox alignment="bottom">
+    <div slot="label">
+      <div>LABEL END</div>
+      <div>Subline</div>
+    </div>
+  </cat-checkbox>
+  <cat-toggle>
+    <div slot="label">
+      <div>LABEL START</div>
+      <div>Subline</div>
+    </div>
+  </cat-toggle>
+  <cat-toggle alignment="center">
+    <div slot="label">
+      <div>LABEL CENTER</div>
+      <div>Subline</div>
+    </div>
+  </cat-toggle>
+  <cat-toggle alignment="bottom">
+    <div slot="label">
+      <div>LABEL END</div>
+      <div>Subline</div>
+    </div>
+  </cat-toggle>
+  <cat-radio>
+    <div slot="label">
+      <div>LABEL START</div>
+      <div>Subline</div>
+    </div>
+  </cat-radio>
+  <cat-radio alignment="center">
+    <div slot="label">
+      <div>LABEL CENTER</div>
+      <div>Subline</div>
+    </div>
+  </cat-radio>
+  <cat-radio alignment="bottom">
+    <div slot="label">
+      <div>LABEL END</div>
+      <div>Subline</div>
+    </div>
+  </cat-radio>
 </form>
diff --git a/angular/projects/catalyst-demo/src/app/app.module.ts b/angular/projects/catalyst-demo/src/app/app.module.ts
index efd0036a..fde5f997 100644
--- a/angular/projects/catalyst-demo/src/app/app.module.ts
+++ b/angular/projects/catalyst-demo/src/app/app.module.ts
@@ -1,14 +1,21 @@
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
+import { CatalystModule } from '@haiilo/catalyst-angular';
 import { FormlyModule } from '@ngx-formly/core';
 import { CatalystFormlyModule } from '../../../catalyst-formly/src';
-import { CatalystModule } from '../../../catalyst/src';
 import { AppComponent } from './app.component';
 import { DialogComponent } from './dialog/dialog.component';
 
 @NgModule({
-  imports: [BrowserModule, ReactiveFormsModule, FormlyModule.forRoot(), CatalystModule.forRoot(), CatalystFormlyModule],
+  imports: [
+    BrowserModule,
+    ReactiveFormsModule,
+    FormlyModule.forRoot(),
+    CatalystModule.forRoot(),
+    CatalystFormlyModule,
+    CatalystModule
+  ],
   declarations: [AppComponent, DialogComponent],
   bootstrap: [AppComponent]
 })
diff --git a/angular/projects/catalyst/src/lib/directives/proxies.ts b/angular/projects/catalyst/src/lib/directives/proxies.ts
index ea713392..52536728 100644
--- a/angular/projects/catalyst/src/lib/directives/proxies.ts
+++ b/angular/projects/catalyst/src/lib/directives/proxies.ts
@@ -217,6 +217,7 @@ export declare interface CatCard extends Components.CatCard {
 
 @ProxyCmp({
   inputs: [
+    'alignment',
     'checked',
     'disabled',
     'hint',
@@ -240,6 +241,7 @@ export declare interface CatCard extends Components.CatCard {
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
   inputs: [
+    'alignment',
     'checked',
     'disabled',
     'hint',
@@ -795,6 +797,7 @@ export declare interface CatPagination extends Components.CatPagination {
 
 @ProxyCmp({
   inputs: [
+    'alignment',
     'checked',
     'disabled',
     'hint',
@@ -815,6 +818,7 @@ export declare interface CatPagination extends Components.CatPagination {
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
   inputs: [
+    'alignment',
     'checked',
     'disabled',
     'hint',
@@ -1324,6 +1328,7 @@ export declare interface CatTime extends Components.CatTime {
 
 @ProxyCmp({
   inputs: [
+    'alignment',
     'checked',
     'disabled',
     'hint',
@@ -1346,6 +1351,7 @@ export declare interface CatTime extends Components.CatTime {
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
   inputs: [
+    'alignment',
     'checked',
     'disabled',
     'hint',
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 51c5f3fd..4b29ab6a 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -233,6 +233,10 @@ export namespace Components {
      * number of options.
      */
     interface CatCheckbox {
+        /**
+          * The alignment of the checkbox.
+         */
+        "alignment": 'center' | 'top' | 'bottom';
         /**
           * Checked state of the checkbox
          */
@@ -926,6 +930,10 @@ export namespace Components {
      * only one of a predefined set of mutually exclusive options.
      */
     interface CatRadio {
+        /**
+          * The alignment of the checkbox.
+         */
+        "alignment": 'center' | 'top' | 'bottom';
         /**
           * Whether this radio is checked.
          */
@@ -1468,6 +1476,10 @@ export namespace Components {
      * feature or option that can be turned on or off.
      */
     interface CatToggle {
+        /**
+          * The alignment of the checkbox.
+         */
+        "alignment": 'center' | 'top' | 'bottom';
         /**
           * Checked state of the toggle.
          */
@@ -2403,6 +2415,10 @@ declare namespace LocalJSX {
      * number of options.
      */
     interface CatCheckbox {
+        /**
+          * The alignment of the checkbox.
+         */
+        "alignment"?: 'center' | 'top' | 'bottom';
         /**
           * Checked state of the checkbox
          */
@@ -3085,6 +3101,10 @@ declare namespace LocalJSX {
      * only one of a predefined set of mutually exclusive options.
      */
     interface CatRadio {
+        /**
+          * The alignment of the checkbox.
+         */
+        "alignment"?: 'center' | 'top' | 'bottom';
         /**
           * Whether this radio is checked.
          */
@@ -3647,6 +3667,10 @@ declare namespace LocalJSX {
      * feature or option that can be turned on or off.
      */
     interface CatToggle {
+        /**
+          * The alignment of the checkbox.
+         */
+        "alignment"?: 'center' | 'top' | 'bottom';
         /**
           * Checked state of the toggle.
          */
diff --git a/core/src/components/cat-checkbox/cat-checkbox.scss b/core/src/components/cat-checkbox/cat-checkbox.scss
index d09bcd11..17941a98 100644
--- a/core/src/components/cat-checkbox/cat-checkbox.scss
+++ b/core/src/components/cat-checkbox/cat-checkbox.scss
@@ -142,3 +142,11 @@ input {
   cursor: not-allowed;
   color: cat-token('color.ui.font.muted');
 }
+
+.align-center {
+  align-items: center;
+}
+
+.align-end {
+  align-items: flex-end;
+}
diff --git a/core/src/components/cat-checkbox/cat-checkbox.tsx b/core/src/components/cat-checkbox/cat-checkbox.tsx
index 32ea7693..30cbcfcf 100644
--- a/core/src/components/cat-checkbox/cat-checkbox.tsx
+++ b/core/src/components/cat-checkbox/cat-checkbox.tsx
@@ -99,6 +99,11 @@ export class CatCheckbox {
    */
   @Prop() labelLeft = false;
 
+  /**
+   * The alignment of the checkbox.
+   */
+  @Prop() alignment: 'center' | 'top' | 'bottom' = 'top';
+
   /**
    * Attributes that will be added to the native HTML input element.
    */
@@ -155,7 +160,13 @@ export class CatCheckbox {
       <Host>
         <label
           htmlFor={this.id}
-          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}
+          class={{
+            'is-hidden': this.labelHidden,
+            'is-disabled': this.disabled,
+            'label-left': this.labelLeft,
+            'align-center': this.alignment === 'center',
+            'align-end': this.alignment === 'bottom'
+          }}
         >
           <input
             {...this.nativeAttributes}
diff --git a/core/src/components/cat-checkbox/readme.md b/core/src/components/cat-checkbox/readme.md
index d80f33ca..eff15c48 100644
--- a/core/src/components/cat-checkbox/readme.md
+++ b/core/src/components/cat-checkbox/readme.md
@@ -14,6 +14,7 @@ number of options.
 
 | Property           | Attribute        | Description                                                                               | Type                                      | Default     |
 | ------------------ | ---------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------- | ----------- |
+| `alignment`        | `alignment`      | The alignment of the checkbox.                                                            | `"bottom" \| "center" \| "top"`           | `'top'`     |
 | `checked`          | `checked`        | Checked state of the checkbox                                                             | `boolean`                                 | `false`     |
 | `disabled`         | `disabled`       | Disabled state of the checkbox                                                            | `boolean`                                 | `false`     |
 | `hint`             | `hint`           | Optional hint text(s) to be displayed with the checkbox.                                  | `string \| string[] \| undefined`         | `undefined` |
diff --git a/core/src/components/cat-radio/cat-radio.scss b/core/src/components/cat-radio/cat-radio.scss
index 2b9b7655..691dc1ff 100644
--- a/core/src/components/cat-radio/cat-radio.scss
+++ b/core/src/components/cat-radio/cat-radio.scss
@@ -107,3 +107,11 @@ input {
     background-color: cat-token('color.ui.border.dark');
   }
 }
+
+.align-center .radio {
+  align-self: center;
+}
+
+.align-end .radio {
+  align-self: flex-end;
+}
diff --git a/core/src/components/cat-radio/cat-radio.tsx b/core/src/components/cat-radio/cat-radio.tsx
index 48c0c21d..c7deb395 100644
--- a/core/src/components/cat-radio/cat-radio.tsx
+++ b/core/src/components/cat-radio/cat-radio.tsx
@@ -82,6 +82,11 @@ export class CatRadio {
    */
   @Prop() labelLeft = false;
 
+  /**
+   * The alignment of the checkbox.
+   */
+  @Prop() alignment: 'center' | 'top' | 'bottom' = 'top';
+
   /**
    * Attributes that will be added to the native HTML input element.
    */
@@ -133,7 +138,13 @@ export class CatRadio {
       <Host>
         <label
           htmlFor={this.id}
-          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}
+          class={{
+            'is-hidden': this.labelHidden,
+            'is-disabled': this.disabled,
+            'label-left': this.labelLeft,
+            'align-center': this.alignment === 'center',
+            'align-end': this.alignment === 'bottom'
+          }}
           role="radio"
           aria-checked={this.checked ? 'true' : 'false'}
         >
diff --git a/core/src/components/cat-radio/readme.md b/core/src/components/cat-radio/readme.md
index caf48765..cc0e2c4d 100644
--- a/core/src/components/cat-radio/readme.md
+++ b/core/src/components/cat-radio/readme.md
@@ -12,6 +12,7 @@ only one of a predefined set of mutually exclusive options.
 
 | Property           | Attribute      | Description                                                                               | Type                                      | Default     |
 | ------------------ | -------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------- | ----------- |
+| `alignment`        | `alignment`    | The alignment of the checkbox.                                                            | `"bottom" \| "center" \| "top"`           | `'top'`     |
 | `checked`          | `checked`      | Whether this radio is checked.                                                            | `boolean`                                 | `false`     |
 | `disabled`         | `disabled`     | Whether this radio is disabled.                                                           | `boolean`                                 | `false`     |
 | `hint`             | `hint`         | Optional hint text(s) to be displayed with the radio.                                     | `string \| string[] \| undefined`         | `undefined` |
diff --git a/core/src/components/cat-toggle/cat-toggle.scss b/core/src/components/cat-toggle/cat-toggle.scss
index 1ba717c4..8a2718dc 100644
--- a/core/src/components/cat-toggle/cat-toggle.scss
+++ b/core/src/components/cat-toggle/cat-toggle.scss
@@ -112,3 +112,11 @@ input {
   cursor: not-allowed;
   color: cat-token('color.ui.font.muted');
 }
+
+.align-center {
+  align-items: center;
+}
+
+.align-end {
+  align-items: flex-end;
+}
diff --git a/core/src/components/cat-toggle/cat-toggle.tsx b/core/src/components/cat-toggle/cat-toggle.tsx
index 68b6ff75..a9aa897f 100644
--- a/core/src/components/cat-toggle/cat-toggle.tsx
+++ b/core/src/components/cat-toggle/cat-toggle.tsx
@@ -94,6 +94,11 @@ export class CatToggle {
    */
   @Prop() labelLeft = false;
 
+  /**
+   * The alignment of the checkbox.
+   */
+  @Prop() alignment: 'center' | 'top' | 'bottom' = 'top';
+
   /**
    * Attributes that will be added to the native HTML input element.
    */
@@ -150,7 +155,13 @@ export class CatToggle {
       <Host>
         <label
           htmlFor={this.id}
-          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}
+          class={{
+            'is-hidden': this.labelHidden,
+            'is-disabled': this.disabled,
+            'label-left': this.labelLeft,
+            'align-center': this.alignment === 'center',
+            'align-end': this.alignment === 'bottom'
+          }}
         >
           <input
             {...this.nativeAttributes}
diff --git a/core/src/components/cat-toggle/readme.md b/core/src/components/cat-toggle/readme.md
index 7382b766..b5f53eb9 100644
--- a/core/src/components/cat-toggle/readme.md
+++ b/core/src/components/cat-toggle/readme.md
@@ -14,6 +14,7 @@ feature or option that can be turned on or off.
 
 | Property           | Attribute        | Description                                                                               | Type                                      | Default     |
 | ------------------ | ---------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------- | ----------- |
+| `alignment`        | `alignment`      | The alignment of the checkbox.                                                            | `"bottom" \| "center" \| "top"`           | `'top'`     |
 | `checked`          | `checked`        | Checked state of the toggle.                                                              | `boolean`                                 | `false`     |
 | `disabled`         | `disabled`       | Disabled state of the toggle.                                                             | `boolean`                                 | `false`     |
 | `hint`             | `hint`           | Optional hint text(s) to be displayed with the toggle.                                    | `string \| string[] \| undefined`         | `undefined` |
diff --git a/vue/src/components.ts b/vue/src/components.ts
index 11a31681..311f7c08 100644
--- a/vue/src/components.ts
+++ b/vue/src/components.ts
@@ -89,6 +89,7 @@ export const CatCheckbox = /*@__PURE__*/ defineContainer<JSX.CatCheckbox>('cat-c
   'resolvedValue',
   'hint',
   'labelLeft',
+  'alignment',
   'nativeAttributes',
   'catChange',
   'catFocus',
@@ -283,6 +284,7 @@ export const CatRadio = /*@__PURE__*/ defineContainer<JSX.CatRadio>('cat-radio',
   'value',
   'hint',
   'labelLeft',
+  'alignment',
   'nativeAttributes',
   'catChange',
   'catFocus',
@@ -454,6 +456,7 @@ export const CatToggle = /*@__PURE__*/ defineContainer<JSX.CatToggle>('cat-toggl
   'resolvedValue',
   'hint',
   'labelLeft',
+  'alignment',
   'nativeAttributes',
   'catChange',
   'catFocus',