From d8e791543541aa29ed4a75554548c5ac90859b08 Mon Sep 17 00:00:00 2001
From: Ryan Launchbury <47347561+rlaunch@users.noreply.github.com>
Date: Fri, 17 Dec 2021 16:35:06 +0000
Subject: [PATCH] Added ability to change margin (#13)

* Added ability to specify custom margin CSS (optional)

* Added ability to specify custom margin CSS (optional)

* -Refactored margin/style implementation to tidy up
-Implemented alignment option

* Updated readme

* Changed margin to use variables in HA theme

* Removed old config item definition
---
 README.md               | 12 ++++----
 src/const.ts            |  2 +-
 src/text-divider-row.ts | 61 ++++++++++++++++++++++++++++++++---------
 src/types.ts            |  1 +
 4 files changed, 57 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 0f1cd56..ad31ee9 100644
--- a/README.md
+++ b/README.md
@@ -40,17 +40,19 @@ resources:
 | ---- | ------ | ------------ | -------------------------- |
 | type | string | **Required** | `custom:text-divider-row`  |
 | text | string | **Required** | Text to display in divider |
+| align | string | Optional | Specifies the text alignment. Must be: 'left', 'center' or 'right' |
 
 ## Theme Variables
 
 The following variables are available and can be set in your theme to change the appearance of the lock.
 Can be specified by color name, hexadecimal, rgb, rgba, hsl, hsla, basically anything supported by CSS.
 
-| name                     | Default                | Description   |
-| ------------------------ | ---------------------- | ------------- |
-| `text-divider-color`     | `secondary-text-color` | Divider color |
-| `text-divider-font-size` | `14px`                 | Font size     |
-| `text-divider-line-size` | `1px`                  | Line size     |
+| name                     | Default                | Description    |
+| ------------------------ | ---------------------- | -------------- |
+| `text-divider-color`     | `secondary-text-color` | Divider color  |
+| `text-divider-font-size` | `14px`                 | Font size      |
+| `text-divider-line-size` | `1px`                  | Line size      |
+| `text-divider-margin`    | `1em 0`                | Divider margin |
 
 ## [Troubleshooting](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins)
 
diff --git a/src/const.ts b/src/const.ts
index 211ecfe..7aea969 100644
--- a/src/const.ts
+++ b/src/const.ts
@@ -1 +1 @@
-export const CARD_VERSION = '1.4.0';
+export const CARD_VERSION = '1.4.1';
diff --git a/src/text-divider-row.ts b/src/text-divider-row.ts
index 9f30b1e..1ccab52 100755
--- a/src/text-divider-row.ts
+++ b/src/text-divider-row.ts
@@ -21,13 +21,27 @@ class TextDividerRow extends LitElement {
     this._config = config;
   }
 
+  protected getClass(): string {
+    const allowedValues = ['center', 'left', 'right'];
+    if (this._config && this._config.align) {
+      if (allowedValues.includes(this._config.align)) {
+        return `text-divider text-divider-${this._config.align}`;
+      }
+    }
+    return 'text-divider text-divider-center';
+  }
+
   protected render(): TemplateResult | void {
     if (!this._config) {
       return html``;
     }
 
     return html`
-      <h2 class="text-divider"><span>${this._config.text}</span></h2>
+      <div class="text-divider-container">
+        <h2 class="${this.getClass()}">
+          <span>${this._config.text}</span>
+        </h2>
+      </div>
     `;
   }
 
@@ -36,30 +50,51 @@ class TextDividerRow extends LitElement {
       :host {
         display: block;
         position: relative;
+        --background: var(--ha-card-background, var(--card-background-color));
         --divider-color: var(--text-divider-color, var(--secondary-text-color));
         --font-size: var(--text-divider-font-size, 14px);
         --line-size: var(--text-divider-line-size, 1px);
       }
+
       .text-divider {
-        margin: 1em 0;
+        width: 100%;
+        border-bottom: var(--line-size) solid var(--divider-color);
         line-height: 0;
+        margin: 10px 0 20px;
+      }
+
+      .text-divider-container {
+        margin: var(--text-divider-margin, 1em 0);
+      }
+
+      .text-divider-center {
         text-align: center;
-        white-space: nowrap;
-        display: flex;
-        align-items: center;
       }
+
+      .text-divider-left {
+        text-align: left;
+      }
+
+      .text-divider-right {
+        text-align: right;
+      }
+
       .text-divider span {
-        padding: 1em;
         color: var(--divider-color);
         font-size: var(--font-size);
+        background: var(--background);
+        padding: 1px 1em;
       }
-      .text-divider:before,
-      .text-divider:after {
-        content: '';
-        background: var(--divider-color);
-        display: block;
-        height: var(--line-size);
-        width: 100%;
+      .text-divider-center span {
+        margin: 0px;
+      }
+
+      .text-divider-left span {
+        margin: 0 0 0 1em;
+      }
+
+      .text-divider-right span {
+        margin: 0 1em 0 0;
       }
     `;
   }
diff --git a/src/types.ts b/src/types.ts
index c58c0e5..e5f7d53 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,4 +1,5 @@
 export interface TextDividerRowConfig {
   type: string;
   text: string;
+  align: string;
 }