1.1.1

Fix name and seconds being linked together in Visual Editor
1.1.0
2026-11-03 11:48:45 +00:00 · 2020-11-22 16:38:06 +02:00 · 2020-11-22 16:37:48 +02:00 · 2020-11-22 13:47:02 +02:00 · 2020-11-22 13:41:48 +02:00 · 2020-11-22 13:40:19 +02:00
27 changed files with 3987 additions and 431 deletions
@@ -13,7 +13,8 @@
  "rules": {
    "@typescript-eslint/camelcase": 0,
    "@typescript-eslint/no-non-null-assertion": 0,
-    "@typescript-eslint/explicit-function-return-type": [1, { "allowExpressions": true }]
+    "@typescript-eslint/explicit-function-return-type": [1, { "allowExpressions": true }],
+    "@typescript-eslint/no-namespace": 0
  },
-  "ignorePatterns": ["dist/", "node_modules/"]
+  "ignorePatterns": ["dist/", "node_modules/", "*.js"]
 }
@@ -9,12 +9,13 @@ on:
      - master

 jobs:
-  build:
+  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Build
        run: |
          npm install
-          npm run lint
          npm run build
+      - name: Test
+        run: npm run test
@@ -0,0 +1,5 @@
+{
+  "files.exclude": {
+    "dist/**": true
+  }
+}
@@ -1,11 +1,11 @@
-# Time Picker Card by [@georgesg](https://www.github.com/georgesg)
+# Time Picker Card

-[![hacs_badge][hacs-shield]][hacs]
-[![GitHub Release][releases-shield]][releases]
-![CI](https://github.com/GeorgeSG/lovelace-time-picker-card/workflows/CI/badge.svg)
-[![Project Maintenance][maintenance-shield]][maintenance]
-[![GitHub Activity][commits-shield]][commits]
-[![License][license-shield]][license]
+[![HACS][hacs-shield]][hacs-link]
+[![Downloads][downloads-shield]][downloads-link]
+[![GitHub Release][releases-shield]][releases-link]
+[![CI][ci-shield]][ci-link]
+[![Project Maintenance][maintenance-shield]][maintenance-link]
+[![License][license-shield]][license-link]

 ## Overview

@@ -13,27 +13,21 @@ This is a Time Picker Card for [Home Assistant](https://www.home-assistant.io/)'

 Requires an [Input Datetime](https://www.home-assistant.io/integrations/input_datetime/) that has time (`has_time: true`).

-## Screenshots
-
-### Default config - card name shown, 24 hour mode
-
-![Default theme with card name](examples/default_with_name.png)
-
-### Custom config - hidden card name, 12 hour mode
-
-![Default theme with no card name](examples/default_without_name.png)
-
-### Custom config - hidden card name, 12 hour mode with a "single" hour mode picker
-
-![Default theme with single hour mode](examples/single_hour_mode.png)
-
-### Using a custom theme
-
-![Custom theme](examples/custom.png)
-
 ## Installation

-Install using [HACS](https://hacs.xyz) or follow this [guide](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins)
+### HACS
+
+Install using [HACS](https://hacs.xyz) and add the following to your config:
+
+```yaml
+resources:
+  - url: /hacsfiles/lovelace-time-picker-card/time-picker-card.js
+    type: module
+```
+
+### Manual
+
+Download time-picker-card.js from the [latest realease](https://github.com/GeorgeSG/lovelace-time-picker-card/releases/latest) and place it in your `config/www` folder. Add the following to your config:

 ```yaml
 resources:
@@ -47,22 +41,61 @@ resources:

 Time Picker Card supports Lovelace's Visual Editor. Click the + button to add a card and search for time picker.

-![Visual Editor](examples/visual_editor.png)
+![Visual Editor](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/visual_editor.png)

+## Examples

-### YAML
+### Default config - card name shown, 24 hour mode
+
+![Default theme with card name](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/default_with_name.png)

 ```yaml
 type: 'custom:time-picker-card'
 entity: input_datetime.alarm_time
-name: 'Choose a time'
-hour_mode: 24
-hour_step: 1
-minute_step: 5
-hide:
-  name: false
 ```

+### Custom config - hidden card name, 12 hour mode
+
+![Default theme with no card name](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/default_without_name.png)
+
+```yaml
+type: 'custom:time-picker-card'
+entity: input_datetime.alarm_time
+hour_mode: 12
+hide:
+  name: true
+```
+
+### Custom config - hidden card name, 12 hour mode with a "single" hour mode picker
+
+![Default theme with single hour mode](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/single_hour_mode.png)
+
+```yaml
+type: 'custom:time-picker-card'
+entity: input_datetime.alarm_time
+hour_mode: 12
+layout:
+  hour_mode: single
+hide:
+  name: true
+```
+
+### Custom config - card name inside card and controls aligned right
+
+![Default theme with single hour mode](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/name_inside.png)
+
+```yaml
+type: 'custom:time-picker-card'
+entity: input_datetime.alarm_time
+layout:
+  name: inside
+  align_controls: right
+```
+
+### With a custom lovelace theme
+
+![Custom theme](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/custom.png)
+
 ## Options

 | Name        | Type         | Requirement  | Description                                                                                               | Default                  |
@@ -70,54 +103,64 @@ hide:
 | type        | string       | **Required** | `custom:time-picker-card`                                                                                 |                          |
 | entity      | string       | **Required** | [Input Datetime](https://www.home-assistant.io/integrations/input_datetime/) entity with `has_time: true` |                          |
 | name        | string       | **Optional** | Card name                                                                                                 | Entity's `friendly_name` |
+| link_values | boolean      | **Optional** | If enabled, will change hour when minutes overflow. E.g. will go from 11:55 to 12:00, instead of 11:00    | `false`                  |
 | hour_mode   | `12` or `24` | **Optional** | Hour format. If `12`, card will show AM/PM picker                                                         | `24`                     |
 | hour_step   | number       | **Optional** | Hour change when clicking arrows                                                                          | `1`                      |
 | minute_step | number       | **Optional** | Minute change when clicking arrows                                                                        | `5`                      |
 | layout      | object       | **Optional** | Card Layout configuration                                                                                 | `none`                   |
 | hide        | object       | **Optional** | Hide object                                                                                               | `none`                   |

-## Layout Object
+### Layout Object

-| Name      | Type                 | Requirement  | Description                                                                                        | Default  |
-| --------- | -------------------- | ------------ | -------------------------------------------------------------------------------------------------- | -------- |
-| hour_mode | `single` or `double` | **Optional** | Whether to show both AM/PM or just the current mode. In `single` mode, tap the value to change it. | `double` |
+| Name           | Value                     | Requirement  | Description                                                                                        | Default  |
+| -------------- | ------------------------- | ------------ | -------------------------------------------------------------------------------------------------- | -------- |
+| hour_mode      | `single`, `double`        | **Optional** | Whether to show both AM/PM or just the current mode. In `single` mode, tap the value to change it. | `double` |
+| align_controls | `left`, `center`, `right` | **Optional** | Horizontal alignment of the controls                                                               | `center` |
+| name           | `header`, `inside`        | **Optional** | Whether to show the name as a header or inside the card                                            | `header` |
+| embedded       | boolean                   | **Optional** | Render with embedded style - disables padding, box shadow, and card header                                            | `false` |

-## Hide Object
+### Hide Object

-| Name | Type    | Requirement  | Description         | Default |
-| ---- | ------- | ------------ | ------------------- | ------- |
-| name | boolean | **Optional** | Hides the card name | `false` |
+| Name    | Type    | Requirement  | Description         | Default |
+| ----    | ------- | ------------ | ------------------- | ------- |
+| name    | boolean | **Optional** | Hides the card name | `false` |
+| seconds | boolean | **Optional** | Hides seconds input | `true`  |

-## Theme Variables
+### Theme Variables

 Time Picker Card will automatically pick up colors from your lovelace theme, but if you want to customize some of them,
 you can use the following variables in your theme's config file:

-| Name                                  | Default                      | Description                            |
-| ------------------------------------- | ---------------------------- | -------------------------------------- |
-| time-picker-elements-background-color | `var(--primary-color)`       | Background color for header and inputs |
-| time-picker-icon-color                | `var(--primary-text-color)`  | Arrow color                            |
-| time-picker-text-color                | `white`                      | Text color                             |
-| time-picker-accent-color              | `var(--primary-color)`       | AM / PM active color                   |
-| time-picker-off-color                 | `var(--disabled-text-color)` | AM / PM inactive color                 |
+| Name                                  | Default                        | Description                            |
+| ------------------------------------- | ------------------------------ | -------------------------------------- |
+| time-picker-elements-background-color | `var(--primary-color)`         | Background color for header and inputs |
+| time-picker-icon-color                | `var(--primary-text-color)`    | Arrow color                            |
+| time-picker-text-color                | `white`                        | Text color                             |
+| time-picker-accent-color              | `var(--primary-color)`         | AM / PM active color                   |
+| time-picker-off-color                 | `var(--disabled-text-color)`   | AM / PM inactive color                 |
+| time-picker-border-radius             | `var(--ha-card-border-radius)` | Border radius of the card              |

 ## Meta

 **Georgi Gardev**

 - [gar.dev](https://gar.dev)
- [![GitHub][github-icon]](https://github.com/GeorgeSG/) [GeorgeSG](https://github.com/GeorgeSG/)
- [![Twitter][twitter-icon]](https://twitter.com/georgesg92) [@georgesg92](https://twitter.com/georgesg92)
+- [![GitHub][github-icon]][github-link] [GeorgeSG][github-link]
+- [![Twitter][twitter-icon]][twitter-link] [@georgesg92][twitter-link]

-[commits-shield]: https://img.shields.io/github/commit-activity/y/GeorgeSG/lovelace-time-picker-card?style=flat-square
-[commits]: https://github.com/GeorgeSG/lovelace-time-picker-card/commits/master
-[license-shield]: https://img.shields.io/github/license/GeorgeSG/lovelace-time-picker-card?style=flat-square
-[license]: https://github.com/GeorgeSG/lovelace-time-picker-card/blob/master/LICENSE
-[maintenance-shield]: https://img.shields.io/maintenance/yes/2020.svg?style=flat-square
-[maintenance]: https://github.com/GeorgeSG/lovelace-time-picker-card
-[releases-shield]: https://img.shields.io/github/release/GeorgeSG/lovelace-time-picker-card.svg?style=flat-square
-[releases]: https://github.com/GeorgeSG/lovelace-time-picker-card/releases
-[hacs-shield]: https://img.shields.io/badge/HACS-Custom-orange.svg?style=flat-square
-[hacs]: https://github.com/custom-components/hacs
-[twitter-icon]: http://i.imgur.com/wWzX9uB.png
+[hacs-shield]: https://img.shields.io/badge/HACS-Default-brightgreen.svg
+[hacs-link]: https://github.com/custom-components/hacs
+[downloads-shield]: https://img.shields.io/github/downloads/GeorgeSG/lovelace-time-picker-card/latest/total?color=brightgreen&logo=github
+[downloads-link]: https://github.com/GeorgeSG/lovelace-time-picker-card/releases
+[releases-shield]: https://img.shields.io/github/release/GeorgeSG/lovelace-time-picker-card.svg
+[releases-link]: https://github.com/GeorgeSG/lovelace-time-picker-card/releases
+[ci-shield]: https://img.shields.io/github/workflow/status/GeorgeSG/lovelace-time-picker-card/CI?label=CI&logo=github&
+[ci-link]: https://github.com/GeorgeSG/lovelace-time-picker-card/actions?query=workflow%3ACI
+[maintenance-shield]: https://img.shields.io/maintenance/yes/2020.svg
+[maintenance-link]: https://github.com/GeorgeSG/lovelace-time-picker-card
+[license-shield]: https://img.shields.io/github/license/GeorgeSG/lovelace-time-picker-card?color=brightgreen
+[license-link]: https://github.com/GeorgeSG/lovelace-time-picker-card/blob/master/LICENSE
 [github-icon]: http://i.imgur.com/9I6NRUm.png
+[github-link]: https://github.com/GeorgeSG/
+[twitter-icon]: http://i.imgur.com/wWzX9uB.png
+[twitter-link]: https://twitter.com/georgesg92
@@ -1,6 +1,6 @@
 {
  "name": "time-picker-card",
-  "version": "0.0.5",
+  "version": "1.1.1",
  "author": "Georgi Gardev <georgi@gardev.com>",
  "description": "Lovelace time-picker-card",
  "keywords": [
@@ -19,31 +19,42 @@
    "build": "npm run lint && npm run rollup",
    "lint": "eslint src/*.ts",
    "rollup": "rollup -c",
+    "test": "./node_modules/karma/bin/karma start ./test/karma.conf.js",
    "release-patch": "npm version patch && git push origin master --tags",
    "release-minor": "npm version minor && git push origin master --tags",
    "release-major": "npm version major && git push origin master --tags"
  },
  "dependencies": {
-    "custom-card-helpers": "^1.5.0",
-    "home-assistant-js-websocket": "^5.1.0",
-    "lit-element": "^2.3.1",
-    "lit-html": "^1.2.1"
+    "custom-card-helpers": "^1.6.6",
+    "home-assistant-js-websocket": "^5.7.0",
+    "lit-element": "^2.4.0",
+    "lit-html": "^1.3.0"
  },
  "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@rollup/plugin-json": "^4.0.3",
-    "@rollup/plugin-node-resolve": "^7.1.1",
-    "@rollup/plugin-typescript": "^4.0.0",
-    "@typescript-eslint/eslint-plugin": "^2.30.0",
-    "@typescript-eslint/parser": "^2.30.0",
+    "@babel/core": "^7.12.7",
+    "@open-wc/testing": "^2.5.32",
+    "@rollup/plugin-commonjs": "^11.1.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^7.1.3",
+    "@rollup/plugin-typescript": "^4.1.2",
+    "@types/chai": "^4.2.14",
+    "@typescript-eslint/eslint-plugin": "^2.34.0",
+    "@typescript-eslint/parser": "^2.34.0",
    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-prettier": "^3.1.3",
-    "prettier": "^2.0.5",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "karma": "^5.2.3",
+    "karma-chai": "^0.1.0",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-mocha": "^2.0.1",
+    "karma-rollup-preprocessor": "^7.0.5",
+    "mocha": "^7.2.0",
+    "prettier": "^2.2.0",
    "rollup": "^1.32.1",
    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-serve": "^1.0.1",
-    "rollup-plugin-terser": "^5.3.0",
-    "typescript": "^3.8.3"
+    "rollup-plugin-serve": "^1.1.0",
+    "rollup-plugin-terser": "^5.3.1",
+    "sinon": "^9.2.1",
+    "typescript": "^3.9.7"
  }
 }
@@ -8,7 +8,7 @@ import {
  TemplateResult,
 } from 'lit-element';
 import { ClassInfo, classMap } from 'lit-html/directives/class-map';
-import { Period, HourModeLayout } from '../types';
+import { Layout, Period } from '../types';

 /**
 * Renders a Time Period selector with an input for a value and two arrows for step-chaning
@@ -19,7 +19,7 @@ export class TimePeriodComponent extends LitElement {
  static readonly EVENT_TOGGLE = 'toggle';

  @property() private period!: Period;
-  @property() private mode!: HourModeLayout;
+  @property() private mode!: Layout.HourMode;

  private get amClass(): ClassInfo {
    return { 'time-period': true, active: this.period === Period.AM };
@@ -16,6 +16,7 @@ import { Direction } from '../types';
@customElement('time-unit')
 export class TimeUnitComponent extends LitElement {
  static readonly EVENT_UPDATE = 'update';
+  static readonly EVENT_STEP_CHANGE = 'stepChange';

  @property() private unit!: TimeUnit;

@@ -27,7 +28,7 @@ export class TimeUnitComponent extends LitElement {
          class="time-input"
          type="number"
          placeholder="MM"
-          min="0"
+          min=${this.unit.minValue}
          max=${this.unit.maxValue}
          .value="${this.unit.toString()}"
          @change=${this.onInputChange}
@@ -39,16 +40,12 @@ export class TimeUnitComponent extends LitElement {

  onInputChange({ target: { value } }: { target: HTMLInputElement }): void {
    this.unit.setStringValue(value);
-    this.emitUpdate();
+    const event = new CustomEvent(TimeUnitComponent.EVENT_UPDATE);
+    this.dispatchEvent(event);
  }

  onStepChangerClick(direction: Direction): void {
-    this.unit.stepUpdate(direction);
-    this.emitUpdate();
-  }
-
-  private emitUpdate(): void {
-    const event = new CustomEvent(TimeUnitComponent.EVENT_UPDATE);
+    const event = new CustomEvent(TimeUnitComponent.EVENT_STEP_CHANGE, { detail: { direction } });
    this.dispatchEvent(event);
  }

@@ -1,4 +1,5 @@
 import * as pkg from '../package.json';
+import { Layout } from './types';

 export const CARD_VERSION = pkg.version;
 export const CARD_SIZE = 3;
@@ -8,4 +9,7 @@ export const ENTITY_DOMAIN = 'input_datetime';
 // Config defaults
 export const DEFAULT_HOUR_STEP = 1;
 export const DEFAULT_MINUTE_STEP = 5;
+export const DEFAULT_SECOND_STEP = 5;
 export const DEFAULT_LAYOUT_HOUR_MODE = 'double';
+export const DEFAULT_LAYOUT_ALIGN_CONTROLS = Layout.AlignControls.CENTER;
+export const DEFAULT_LAYOUT_NAME = Layout.Name.HEADER;
@@ -1,4 +1,4 @@
-import { computeDomain, HomeAssistant, LovelaceCardConfig } from 'custom-card-helpers';
+import { computeDomain, HomeAssistant, LovelaceCardEditor } from 'custom-card-helpers';
 import { HassEntity } from 'home-assistant-js-websocket';
 import {
  css,
@@ -9,19 +9,24 @@ import {
  property,
  TemplateResult,
 } from 'lit-element';
-import { DEFAULT_HOUR_STEP, DEFAULT_MINUTE_STEP, ENTITY_DOMAIN } from './const';
-import { HourMode, HourModeLayout, TimePickerCardConfig } from './types';
-
-// TODO: Remove this once there's a new release of custom-card-helpers that exports it.
-export interface LovelaceCardEditor extends HTMLElement {
-  hass?: HomeAssistant;
-  lovelace?: unknown;
-  setConfig(config: LovelaceCardConfig): void;
-}
+import {
+  DEFAULT_HOUR_STEP,
+  DEFAULT_MINUTE_STEP,
+  ENTITY_DOMAIN,
+  DEFAULT_LAYOUT_ALIGN_CONTROLS,
+  DEFAULT_LAYOUT_NAME,
+  DEFAULT_SECOND_STEP,
+} from './const';
+import { TimePickerCardConfig, Layout, HourMode } from './types';

@customElement('time-picker-card-editor')
 export class TimePickerCardEditor extends LitElement implements LovelaceCardEditor {
-  private static readonly NUMBER_PROPERTIES = ['hour_step', 'minute_step', 'hour_mode'];
+  private static readonly NUMBER_PROPERTIES = [
+    'hour_step',
+    'minute_step',
+    'second_step',
+    'hour_mode',
+  ];
  private static readonly CONFIG_CHANGED_EVENT = 'config-changed';

  @property({ type: Object }) hass!: HomeAssistant;
@@ -32,15 +37,11 @@ export class TimePickerCardEditor extends LitElement implements LovelaceCardEdit
  }

  private get datetimeEntities(): Array<string> {
-    // Find all input_datetime entities
-    const datetimeEntities = Object.keys(this.hass.states)
-      .filter((entityId) => computeDomain(entityId) === ENTITY_DOMAIN)
-      .map((entityId) => this.hass.states[entityId]);
-
-    // Return only the datetime entities that have time.
-    return datetimeEntities
-      .filter((entity) => entity.attributes.has_time === true)
-      .map((entity) => entity.entity_id);
+    return Object.keys(this.hass.states).filter(
+      (entityId) =>
+        computeDomain(entityId) === ENTITY_DOMAIN &&
+        this.hass.states[entityId].attributes.has_time === true
+    );
  }

  render(): TemplateResult {
@@ -58,22 +59,36 @@ export class TimePickerCardEditor extends LitElement implements LovelaceCardEdit
          ${this.datetimeEntities.map((entity) => html`<paper-item>${entity}</paper-item>`)}
        </paper-listbox>
      </paper-dropdown-menu>
+      <paper-input
+        label="Name (Optional)"
+        .configValue=${'name'}
+        .value=${this.config.name}
+        .placeholder=${this.entity?.attributes.friendly_name}
+        @value-changed=${this.onValueChange}
+      ></paper-input>
      <div class="side-by-side">
-        <paper-input
-          label="Name (Optional)"
-          .configValue=${'name'}
-          .value=${this.config.name}
-          .placeholder=${this.entity?.attributes.friendly_name}
-          @value-changed=${this.onValueChange}
-        ></paper-input>
-        <ha-switch
-          style="margin-left: 10px"
-          .checked="${!Boolean(this.config.hide?.name)}"
-          .configValue="${'hide_name'}"
-          @change="${this.onHideNameChange}"
-        >
+        <div>
+          <ha-switch
+            style="margin-left: 10px"
+            .checked="${!Boolean(this.config.hide?.name)}"
+            @change="${this.onHideNameChange}"
+          ></ha-switch>
          Show name?
-        </ha-switch>
+        </div>
+        <paper-dropdown-menu
+          style="width: 100%"
+          label="Name Position (Optional)"
+          @value-changed=${this.onLayoutNameChange}
+        >
+          <paper-listbox
+            slot="dropdown-content"
+            .selected=${Object.values(Layout.Name).indexOf(
+              this.config.layout?.name ?? DEFAULT_LAYOUT_NAME
+            )}
+          >
+            ${Object.values(Layout.Name).map((name) => html`<paper-item>${name}</paper-item>`)}
+          </paper-listbox>
+        </paper-dropdown-menu>
      </div>
      <div class="side-by-side">
        <paper-input
@@ -92,20 +107,71 @@ export class TimePickerCardEditor extends LitElement implements LovelaceCardEdit
        ></paper-input>
      </div>
      <div class="side-by-side">
-        <ha-switch
-          .checked="${this.config.hour_mode === 12}"
-          .configValue="${'hour_mode'}"
-          @change="${this.onHourModeChange}"
-        >
+        <div>
+          <ha-switch
+            style="margin-left: 10px"
+            .checked="${this.config.hide?.seconds === false}"
+            @change="${this.onHideSecondsChange}"
+          ></ha-switch>
+          Show seconds?
+        </div>
+        <paper-input
+          type="number"
+          label="Second Step (Optional)"
+          .configValue=${'second_step'}
+          .value=${this.config.second_step || DEFAULT_SECOND_STEP}
+          @value-changed=${this.onValueChange}
+        ></paper-input>
+      </div>
+      <div class="side-by-side">
+        <div>
+          <ha-switch
+            .checked="${this.config.hour_mode === 12}"
+            @change="${this.onHourModeChange}"
+          ></ha-switch>
          12-Hour mode
-        </ha-switch>
-        <ha-switch
-          .checked="${this.config.layout?.hour_mode === 'single'}"
-          .configValue="${'hour_mode_layout'}"
-          @change="${this.onHourModeLayoutChange}"
+        </div>
+        ${this.config.hour_mode === 12
+          ? html`<div>
+              <ha-switch
+                .checked="${this.config.layout?.hour_mode === 'single'}"
+                @change="${this.onHourModeLayoutChange}"
+              ></ha-switch>
+              "Single" hour mode layout
+            </div>`
+          : ''}
+      </div>
+      <div class="side-by-side">
+        <paper-dropdown-menu
+          style="width: 100%"
+          label="Align Controls (Optional)"
+          @value-changed=${this.onLayoutAlignChange}
        >
-          "Single" hour mode layout (in 12-Hour mode only)
-        </ha-switch>
+          <paper-listbox
+            slot="dropdown-content"
+            .selected=${Object.values(Layout.AlignControls).indexOf(
+              this.config.layout?.align_controls ?? DEFAULT_LAYOUT_ALIGN_CONTROLS
+            )}
+          >
+            ${Object.values(Layout.AlignControls).map((a) => html`<paper-item>${a}</paper-item>`)}
+          </paper-listbox>
+        </paper-dropdown-menu>
+        <div>
+          <ha-switch
+            .checked="${this.config.link_values}"
+            @change="${this.onLinkValuesChange}"
+          ></ha-switch>
+          Link Values
+        </div>
+      </div>
+      <div class="side-by-side">
+        <div>
+          <ha-switch
+            .checked="${this.config.layout?.embedded}"
+            @change="${this.onEmbeddedChange}"
+          ></ha-switch>
+          Embedded
+        </div>
      </div>
    </div>`;
  }
@@ -121,15 +187,47 @@ export class TimePickerCardEditor extends LitElement implements LovelaceCardEdit
    this.dispatch(newConfig);
  }

-  private onHourModeLayoutChange({ target: { checked } }): void {
-    const hourModeLayout: HourModeLayout = checked ? 'single' : 'double';
-
-    const newConfig = { ...this.config, layout: { hour_mode: hourModeLayout } };
+  private onHideNameChange({ target: { checked } }): void {
+    const hide = { ...this.config.hide, name: !checked };
+    const newConfig = { ...this.config, hide };
    this.dispatch(newConfig);
  }

-  private onHideNameChange({ target: { checked } }): void {
-    const newConfig = { ...this.config, hide: { name: !checked } };
+  private onHideSecondsChange({ target: { checked } }): void {
+    const hide = { ...this.config.hide, seconds: !checked };
+    const newConfig = { ...this.config, hide };
+    this.dispatch(newConfig);
+  }
+
+  private onLayoutAlignChange({ detail: { value } }: CustomEvent): void {
+    const layout = { ...this.config.layout, align_controls: value };
+    const newConfig = { ...this.config, layout };
+    this.dispatch(newConfig);
+  }
+
+  private onLayoutNameChange({ detail: { value } }: CustomEvent): void {
+    const layout = { ...this.config.layout, name: value };
+    const newConfig = { ...this.config, layout };
+    this.dispatch(newConfig);
+  }
+
+  private onHourModeLayoutChange({ target: { checked } }): void {
+    const hourModeLayout: Layout.HourMode = checked ? 'single' : 'double';
+
+    const newConfig = {
+      ...this.config,
+      layout: { ...this.config.layout, hour_mode: hourModeLayout },
+    };
+    this.dispatch(newConfig);
+  }
+
+  private onLinkValuesChange({ target: { checked } }): void {
+    const newConfig = { ...this.config, link_values: checked };
+    this.dispatch(newConfig);
+  }
+
+  private onEmbeddedChange({ target: { checked } }): void {
+    const newConfig = { ...this.config, layout: { embedded: checked } };
    this.dispatch(newConfig);
  }

@@ -169,6 +267,7 @@ export class TimePickerCardEditor extends LitElement implements LovelaceCardEdit
    return css`
      ha-switch {
        padding: 16px 0;
+        margin-right: 16px;
      }
      .side-by-side {
        display: flex;
@@ -8,12 +8,16 @@ import { TimeUnit } from './time-unit';
 export class Hour extends TimeUnit {
  private static readonly VALUE_LIMIT = 24;

-  constructor(value: number, step = DEFAULT_HOUR_STEP, private hourMode: HourMode) {
+  constructor(value: number, step = DEFAULT_HOUR_STEP, private hourMode?: HourMode) {
    super(value, step, Hour.VALUE_LIMIT);
  }

+  get minValue(): number {
+    return this.hourMode === 12 ? 1 : 0; // there is no 00:00 AM -> it's 12:00 AM.
+  }
+
  get maxValue(): number {
-    return this.hourMode || Hour.VALUE_LIMIT;
+    return this.hourMode === 12 ? 12 : Hour.VALUE_LIMIT - 1;
  }

  togglePeriod(): void {
@@ -21,15 +25,15 @@ export class Hour extends TimeUnit {
  }

  toString(): string {
-    const value = this.hourMode === 12 ? (this.value + 12) % 12 : this.value;
+    let value;
+
+    if (this.hourMode === 12) {
+      value = (this.value + 12) % 12;
+      value = value === 0 ? 12 : value;
+    } else {
+      value = this.value;
+    }

    return value < 10 ? `0${value}` : value.toString();
  }
-
-  protected isValidString(valueStr: string): boolean {
-    const value = parseInt(valueStr);
-    const limit = this.hourMode || this._limit;
-
-    return !isNaN(value) && value >= 0 && value <= limit;
-  }
 }
@@ -1,5 +1,6 @@
 import { DEFAULT_MINUTE_STEP } from '../const';
 import { TimeUnit } from './time-unit';
+import { Direction } from '../types';

 /**
 * * Represents the minute value of a datetime.
@@ -7,14 +8,19 @@ import { TimeUnit } from './time-unit';
 export class Minute extends TimeUnit {
  private static readonly VALUE_LIMIT = 60;

-  maxValue = Minute.VALUE_LIMIT;
+  minValue = 0;
+  maxValue = Minute.VALUE_LIMIT - 1;

  constructor(value: number, step = DEFAULT_MINUTE_STEP) {
    super(value, step, Minute.VALUE_LIMIT);
  }

-  protected isValidString(valueStr: string): boolean {
-    const value = parseInt(valueStr);
-    return !isNaN(value) && value >= 0 && value <= this._limit;
+  /**
+   * Returns true if the minutes will overflow to a different hour when changed in {@param direction}.
+   * @param direction
+   */
+  willOverflow(direction: Direction): boolean {
+    const newValue = direction === Direction.UP ? this.value + this._step : this.value - this._step;
+    return newValue >= this._limit || newValue < 0;
  }
 }
@@ -0,0 +1,26 @@
+import { DEFAULT_SECOND_STEP } from '../const';
+import { TimeUnit } from './time-unit';
+import { Direction } from '../types';
+
+/**
+ * * Represents the second value of a datetime.
+ */
+export class Second extends TimeUnit {
+  private static readonly VALUE_LIMIT = 60;
+
+  minValue = 0;
+  maxValue = Second.VALUE_LIMIT - 1;
+
+  constructor(value: number, step = DEFAULT_SECOND_STEP) {
+    super(value, step, Second.VALUE_LIMIT);
+  }
+
+  /**
+   * Returns true if the seconds will overflow to a different hour when changed in {@param direction}.
+   * @param direction
+   */
+  willOverflow(direction: Direction): boolean {
+    const newValue = direction === Direction.UP ? this.value + this._step : this.value - this._step;
+    return newValue >= this._limit || newValue < 0;
+  }
+}
@@ -5,12 +5,11 @@ import { Direction } from '../types';
 */
 export abstract class TimeUnit {
  /**
-   * Whether {@param valueStr} can be set as a value of this instance.
+   * The min allowed UI value for this instance.
   */
-  protected abstract isValidString(valueStr: string): boolean;
-
+  abstract minValue: number;
  /**
-   * The max allowed value for this instance. Used for UI validation.
+   * The max allowed value for this instance.
   */
  abstract maxValue: number;

@@ -40,27 +39,36 @@ export abstract class TimeUnit {
   * Updates the value in {@param direction} by the step size specified in the constructoor.
   * @param direction
   */
-  stepUpdate(direction: Direction): void {
-    direction === Direction.UP ? this.increment() : this.decrement();
+  stepUpdate(direction: Direction, step: number = this._step): void {
+    direction === Direction.UP ? this.increment(step) : this.decrement(step);
  }

  toString(): string {
    return this.value < 10 ? `0${this.value}` : this.value.toString();
  }

-  private increment(): void {
-    this.setValue(this.value + this._step);
+  private increment(step: number = this._step): void {
+    this.setValue(this.value + step);
  }

-  private decrement(): void {
-    this.setValue(this.value - this._step);
+  private decrement(step: number = this._step): void {
+    this.setValue(this.value - step);
  }

  protected setValue(newValue: number): void {
+    if (isNaN(newValue)) {
+      return;
+    }
+
    if (newValue >= this._limit || newValue < 0) {
      newValue = (newValue + this._limit) % this._limit;
    }

    this._value = newValue;
  }
+
+  protected isValidString(valueStr: string): boolean {
+    const value = parseInt(valueStr);
+    return !isNaN(value) && value >= 0 && value < this._limit;
+  }
 }
@@ -0,0 +1,37 @@
+import { Direction } from '../types';
+import { Hour } from './hour';
+import { Minute } from './minute';
+import { Second } from './second';
+
+export class Time {
+  constructor(
+    public hour: Hour,
+    public minute: Minute,
+    public second: Second,
+    private _linkValues: boolean = false
+  ) {}
+
+  hourStep(direction: Direction): void {
+    this.hour.stepUpdate(direction);
+  }
+
+  minuteStep(direction: Direction): void {
+    if (this._linkValues && this.minute.willOverflow(direction)) {
+      this.hour.stepUpdate(direction, 1);
+    }
+
+    this.minute.stepUpdate(direction);
+  }
+
+  secondStep(direction: Direction): void {
+    if (this._linkValues && this.second.willOverflow(direction)) {
+      this.minute.stepUpdate(direction, 1);
+    }
+
+    this.second.stepUpdate(direction);
+  }
+
+  get value(): string {
+    return `${this.hour.value}:${this.minute.value}:${this.second.value}`;
+  }
+}
@@ -1,6 +1,7 @@
 import { html, TemplateResult } from 'lit-element';
 import { TimePickerCardConfig } from './types';
 import { LovelaceCard } from 'custom-card-helpers';
+import { HassEntity } from 'home-assistant-js-websocket';

 export class Partial {
  static error(error: string, origConfig: TimePickerCardConfig): TemplateResult {
@@ -14,11 +15,12 @@ export class Partial {
    return html`${errorCard}`;
  }

-  static header(title: string, icon?: string): TemplateResult | null {
-    return html`
-      <div class="time-picker-header">
-        ${icon ? html`<ha-icon class="icon" icon=${icon}></ha-icon>` : ''}${title}
-      </div>
-    `;
+  static headerName(title: string): TemplateResult {
+    return html`<div class="time-picker-header">${title}</div>`;
+  }
+
+  static nestedName(name: string, entity: HassEntity): TemplateResult {
+    return html`<state-badge .stateObj=${entity}></state-badge>
+      <div class="entity-name-inside">${name}</div>`;
  }
 }
@@ -9,14 +9,23 @@ import {
  property,
  TemplateResult,
 } from 'lit-element';
+import { ClassInfo, classMap } from 'lit-html/directives/class-map';
 import './components/time-period.component';
 import './components/time-unit.component';
+import {
+  CARD_SIZE,
+  CARD_VERSION,
+  DEFAULT_LAYOUT_ALIGN_CONTROLS,
+  DEFAULT_LAYOUT_HOUR_MODE,
+  ENTITY_DOMAIN,
+} from './const';
 import './editor';
-import { CARD_SIZE, CARD_VERSION, DEFAULT_LAYOUT_HOUR_MODE, ENTITY_DOMAIN } from './const';
 import { Hour } from './models/hour';
 import { Minute } from './models/minute';
+import { Second } from './models/second';
+import { Time } from './models/time';
 import { Partial } from './partials';
-import { Period, TimePickerCardConfig } from './types';
+import { Layout, Period, TimePickerCardConfig } from './types';

 console.info(
  `%c  TIME-PICKER-CARD  \n%c  Version ${CARD_VERSION}    `,
@@ -24,29 +33,43 @@ console.info(
  'color: white; font-weight: bold; background: dimgray'
 );

-/* eslint-disable @typescript-eslint/no-explicit-any */
-(window as any).customCards = (window as any).customCards || [];
-(window as any).customCards.push({
+window.customCards = window.customCards || [];
+window.customCards.push({
  type: 'time-picker-card',
  name: 'Time Picker Card',
  description: 'A Time Picker card for setting the time value of Input Datetime entities.',
 });
-/* eslint-enable @typescript-eslint/no-explicit-any */

@customElement('time-picker-card')
 export class TimePickerCard extends LitElement implements LovelaceCard {
  @property({ type: Object }) hass!: HomeAssistant;
  @property() private config!: TimePickerCardConfig;
-  @property() private hour!: Hour;
-  @property() private minute!: Minute;
+  @property() private time!: Time;
  @property() private period!: Period;

  private get entity(): HassEntity | undefined {
    return this.hass.states[this.config.entity];
  }

-  private get shouldShowName(): boolean {
-    return Boolean(this.config.hide?.name) === false && Boolean(this.name);
+  private get isEmbedded(): boolean {
+    return this.config.layout?.embedded === true;
+  }
+
+  private get hasNameInHeader(): boolean {
+    return (
+      Boolean(this.name) &&
+      Boolean(this.config.hide?.name) === false &&
+      this.config.layout?.name !== Layout.Name.INSIDE &&
+      Boolean(this.config.layout?.embedded) === false // embedded layout disables name in header
+    );
+  }
+
+  private get hasNameInside(): boolean {
+    return (
+      Boolean(this.name) &&
+      Boolean(this.config.hide?.name) === false &&
+      (this.config.layout?.name === Layout.Name.INSIDE || Boolean(this.config.layout?.embedded))
+    );
  }

  private get name(): string | undefined {
@@ -57,6 +80,31 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
    return this.config.hour_mode === 12;
  }

+  private get layoutAlign(): Layout.AlignControls {
+    return this.config.layout?.align_controls ?? DEFAULT_LAYOUT_ALIGN_CONTROLS;
+  }
+
+  private get haCardClass(): ClassInfo {
+    return {
+      embedded: this.isEmbedded,
+    };
+  }
+
+  private get rowClass(): ClassInfo {
+    return {
+      'time-picker-row': true,
+      'with-header-name': this.hasNameInHeader,
+      embedded: this.isEmbedded,
+    };
+  }
+
+  private get contentClass(): ClassInfo {
+    return {
+      'time-picker-content': true,
+      [`layout-${this.layoutAlign}`]: true,
+    };
+  }
+
  render(): TemplateResult | null {
    if (!this.entity) {
      return Partial.error('Entity not found', this.config);
@@ -73,26 +121,47 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
      );
    }

-    const { hour, minute } = this.entity!.attributes;
-    this.hour = new Hour(hour, this.config.hour_step, this.config.hour_mode);
-    this.minute = new Minute(minute, this.config.minute_step);
-    this.period = this.hour.value >= 12 ? Period.PM : Period.AM;
+    const { hour, minute, second } = this.entity!.attributes;
+    const hourInstance = new Hour(hour, this.config.hour_step, this.config.hour_mode);
+    const minuteInstance = new Minute(minute, this.config.minute_step);
+    const secondInstance = new Second(second, this.config.second_step);
+    this.time = new Time(hourInstance, minuteInstance, secondInstance, this.config.link_values);
+    this.period = hourInstance.value >= 12 ? Period.PM : Period.AM;

    return html`
-      <ha-card>
-        ${this.shouldShowName ? Partial.header(this.name!) : ''}
-        <div class="time-picker-content">
-          <time-unit .unit=${this.hour} @update=${this.callHassService}></time-unit>
-          <div class="time-separator">:</div>
-          <time-unit .unit=${this.minute} @update=${this.callHassService}></time-unit>
+      <ha-card class=${classMap(this.haCardClass)}>
+        ${this.hasNameInHeader ? Partial.headerName(this.name!) : ''}
+        <div class=${classMap(this.rowClass)}>
+          ${this.hasNameInside ? Partial.nestedName(this.name!, this.entity) : ''}

-          ${this.shouldShowPeriod
-            ? html`<time-period
-                .period=${this.period}
-                .mode=${this.config.layout?.hour_mode ?? DEFAULT_LAYOUT_HOUR_MODE}
-                @toggle=${this.onPeriodToggle}
-              ></time-period>`
-            : ''}
+          <div class=${classMap(this.contentClass)}>
+            <time-unit
+              .unit=${this.time.hour}
+              @stepChange=${this.onHourStepChange}
+              @update=${this.callHassService}
+            ></time-unit>
+            <div class="time-separator">:</div>
+            <time-unit
+              .unit=${this.time.minute}
+              @stepChange=${this.onMinuteStepChange}
+              @update=${this.callHassService}
+            ></time-unit>
+            ${this.config.hide?.seconds === false
+              ? html`<div class="time-separator">:</div>
+                  <time-unit
+                    .unit=${this.time.second}
+                    @stepChange=${this.onSecondStepChange}
+                    @update=${this.callHassService}
+                  ></time-unit>`
+              : ''}
+            ${this.shouldShowPeriod
+              ? html`<time-period
+                  .period=${this.period}
+                  .mode=${this.config.layout?.hour_mode ?? DEFAULT_LAYOUT_HOUR_MODE}
+                  @toggle=${this.onPeriodToggle}
+                ></time-period>`
+              : ''}
+          </div>
        </div>
      </ha-card>
    `;
@@ -119,7 +188,22 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
  }

  private onPeriodToggle(): void {
-    this.hour.togglePeriod();
+    this.time.hour.togglePeriod();
+    this.callHassService();
+  }
+
+  private onHourStepChange(event: CustomEvent): void {
+    this.time.hourStep(event.detail.direction);
+    this.callHassService();
+  }
+
+  private onMinuteStepChange(event: CustomEvent): void {
+    this.time.minuteStep(event.detail.direction);
+    this.callHassService();
+  }
+
+  private onSecondStepChange(event: CustomEvent): void {
+    this.time.secondStep(event.detail.direction);
    this.callHassService();
  }

@@ -128,11 +212,9 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
      throw new Error('Unable to update datetime');
    }

-    const time = `${this.hour.value}:${this.minute.value}:00`;
-
    return this.hass.callService(ENTITY_DOMAIN, 'set_datetime', {
      entity_id: this.entity!.entity_id,
-      time,
+      time: this.time.value,
    });
  }

@@ -148,23 +230,61 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
        --tpc-text-color: var(--time-picker-text-color, #fff);
        --tpc-accent-color: var(--time-picker-accent-color, var(--primary-color));
        --tpc-off-color: var(--time-picker-off-color, var(--disabled-text-color));
+
+        --tpc-border-radius: var(--time-picker-border-radius, var(--ha-card-border-radius, 4px));
+      }
+
+      ha-card.embedded {
+        box-shadow: none;
      }

      .time-picker-header {
        padding: 16px;
        color: var(--tpc-text-color);
        background-color: var(--tpc-elements-background-color);
+        border-top-left-radius: var(--tpc-border-radius);
+        border-top-right-radius: var(--tpc-border-radius);
        font-size: 1em;
        text-align: center;
      }

-      .time-picker-content {
-        padding: 8px 16px 16px;
+      .time-picker-row {
        display: flex;
        flex-direction: row;
        align-items: center;
+        padding: 16px;
+      }
+
+      .time-picker-row.embedded {
+        padding: 0;
+      }
+
+      .time-picker-row.with-header-name {
+        padding: 8px 16px 16px;
+      }
+
+      .time-picker-content {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        flex: 1 0 auto;
+      }
+
+      .time-picker-content.layout-left {
+        justify-content: flex-start;
+      }
+
+      .time-picker-content.layout-center {
        justify-content: center;
      }
+
+      .time-picker-content.layout-right {
+        justify-content: flex-end;
+      }
+
+      .entity-name-inside {
+        margin-left: 16px;
+      }
    `;
  }

@@ -3,9 +3,11 @@ import { LovelaceCardConfig } from 'custom-card-helpers';
 export interface TimePickerCardConfig extends LovelaceCardConfig {
  entity: string;
  name?: string;
+  link_values?: boolean;
  hour_mode?: HourMode;
  hour_step?: number;
  minute_step?: number;
+  second_step?: number;
  layout?: TimePickerLayoutConfig;
  hide?: TimePickerHideConfig;
 }
@@ -13,13 +15,30 @@ export interface TimePickerCardConfig extends LovelaceCardConfig {
 export type HourMode = 12 | 24 | undefined;

 export interface TimePickerLayoutConfig {
-  hour_mode: HourModeLayout;
+  align_controls?: Layout.AlignControls;
+  name?: Layout.Name;
+  hour_mode?: Layout.HourMode;
+  embedded?: boolean;
 }

-export type HourModeLayout = 'single' | 'double';
+export namespace Layout {
+  export type HourMode = 'single' | 'double';
+
+  export enum AlignControls {
+    LEFT = 'left',
+    CENTER = 'center',
+    RIGHT = 'right',
+  }
+
+  export enum Name {
+    HEADER = 'header',
+    INSIDE = 'inside',
+  }
+}

 export interface TimePickerHideConfig {
-  name: boolean;
+  name?: boolean;
+  seconds?: boolean;
 }

 export enum Direction {
@@ -0,0 +1,12 @@
+export interface CustomCardEntry {
+  type: string;
+  name?: string;
+  description?: string;
+  preview?: boolean;
+}
+
+declare global {
+  interface Window {
+    customCards: Array<CustomCardEntry>;
+  }
+}
@@ -0,0 +1,17 @@
+import { LovelaceCard } from 'custom-card-helpers';
+import { customElement, html, LitElement, TemplateResult } from 'lit-element';
+
+@customElement('hui-error-card')
+export class HuiErrorCard extends LitElement implements LovelaceCard {
+  setConfig(): void {
+    return;
+  }
+
+  render(): TemplateResult {
+    return html``;
+  }
+
+  getCardSize(): number {
+    return 1;
+  }
+}
@@ -0,0 +1,111 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { HomeAssistant } from 'custom-card-helpers';
+import { HassEntity } from 'home-assistant-js-websocket';
+import '../../src/time-picker-card';
+import { TimePickerCard } from '../../src/time-picker-card';
+import { TimePickerCardConfig, HourMode } from '../../src/types';
+import './test-error-card';
+
+async function render(config?: {
+  entityId?: string;
+  friendlyName?: string;
+  hasTime?: boolean;
+  hourMode?: HourMode;
+  hideName?: boolean;
+}): Promise<TimePickerCard> {
+  const { entityId, friendlyName, hasTime, hourMode, hideName } = Object.assign(
+    {
+      entityId: 'input_datetime.wake_time',
+      friendlyName: 'Wake Time',
+      hasTime: true,
+      hideName: false,
+    },
+    config
+  );
+
+  const testEntity: HassEntity = {
+    entity_id: entityId,
+    attributes: {
+      friendly_name: friendlyName,
+      has_time: hasTime,
+    },
+    state: '00:10:00',
+    last_changed: '',
+    last_updated: '',
+    context: {
+      id: entityId,
+      user_id: null,
+    },
+  };
+
+  const hass: Partial<HomeAssistant> = {
+    states: {
+      [entityId]: testEntity,
+    },
+  };
+
+  const testConfig: TimePickerCardConfig = {
+    type: 'custom:time-picker-card',
+    entity: entityId,
+    hour_mode: hourMode,
+    hide: {
+      name: hideName,
+    },
+  };
+
+  const card = await fixture<TimePickerCard>(
+    html`<time-picker-card .hass=${hass} .config=${testConfig}></time-picker-card>`
+  );
+
+  card.setConfig(testConfig);
+
+  return card;
+}
+
+function errorCard(): string {
+  return html`<hui-error-card></hui-error-card>`.getHTML();
+}
+
+describe('test', () => {
+  it('renders', async () => {
+    const card = await render();
+    expect(card).shadowDom.to.match('time-picker-card');
+  });
+
+  it('errors if entity is not an input_datetime', async () => {
+    const card = await render({ entityId: 'sensor.test_sensor' });
+    expect(card).shadowDom.to.equal(errorCard());
+  });
+
+  it("errors if entity doesn't have time", async () => {
+    const card = await render({ hasTime: false });
+    expect(card).shadowDom.to.equal(errorCard());
+  });
+
+  it('renders card name', async () => {
+    const card = await render();
+    expect(card.shadowRoot?.innerHTML).to.match(/Wake Time/);
+  });
+
+  it('hides card name', async () => {
+    const card = await render({ hideName: true });
+    expect(card.shadowRoot?.innerHTML).not.to.match(/Wake Time/);
+  });
+
+  it('renders time units', async () => {
+    const card = await render();
+    expect(card.shadowRoot?.innerHTML.match(/<time-unit>/g)!.length).to.equal(2);
+  });
+
+  describe('time-period', () => {
+    it('is not rendered by default', async () => {
+      const card = await render();
+      expect(card.shadowRoot?.innerHTML.match(/<time-period>/g)).to.be.null;
+    });
+
+    it('renders in 12-hour mode', async () => {
+      const card = await render({ hourMode: 12 });
+      expect(card.shadowRoot?.innerHTML.match(/<time-period>/g)!.length).to.equal(1);
+    });
+  });
+});
@@ -0,0 +1,45 @@
+module.exports = function (config) {
+  return config.set({
+    basePath: './',
+    frameworks: ['mocha', 'chai'],
+    files: ['**/*.test.ts'],
+    preprocessors: {
+      '**/*.test.ts': ['rollup'],
+    },
+
+    rollupPreprocessor: {
+      plugins: [
+        require('@rollup/plugin-node-resolve')(),
+        require('@rollup/plugin-json')(),
+        require('@rollup/plugin-typescript')(),
+        require('@rollup/plugin-commonjs')({
+          namedExports: {
+            chai: ['expect'],
+          },
+        }),
+      ],
+      output: {
+        format: 'umd',
+        sourcemap: 'inline',
+      },
+      onwarn: function (message) {
+        if (/Circular dependency/.test(message)) return;
+        console.warn(message);
+      },
+    },
+
+    reporters: ['dots'],
+
+    port: 9876,
+    colors: true,
+    autoWatch: false,
+    singleRun: true,
+
+    concurrency: Infinity,
+    browsers: ['ChromeHeadless'],
+
+    client: {
+      captureConsole: false,
+    },
+  });
+};
@@ -0,0 +1,166 @@
+import { Hour } from '../../src/models/hour';
+import { Direction } from '../../src/types';
+import { DEFAULT_HOUR_STEP } from '../../src/const';
+import { expect } from 'chai';
+
+describe('Hour', () => {
+  let hour: Hour;
+
+  context('with default config', () => {
+    beforeEach(() => {
+      hour = new Hour(2);
+    });
+
+    it('returns value', () => {
+      expect(hour.value).to.equal(2);
+    });
+
+    it('has correct max value', () => {
+      expect(hour.maxValue).to.equal(23);
+    });
+
+    describe('toString', () => {
+      it('returns formatted string', () => {
+        expect(hour.toString()).to.equal('02');
+      });
+
+      it('renders values correctly', () => {
+        hour = new Hour(0);
+        expect(hour.toString()).to.equal('00');
+
+        hour = new Hour(6);
+        expect(hour.toString()).to.equal('06');
+
+        hour = new Hour(12);
+        expect(hour.toString()).to.equal('12');
+
+        hour = new Hour(18);
+        expect(hour.toString()).to.equal('18');
+
+        hour = new Hour(23);
+        expect(hour.toString()).to.equal('23');
+      });
+    });
+
+    describe('stepUpdate', () => {
+      it('updates up', () => {
+        hour.stepUpdate(Direction.UP);
+        expect(hour.value).to.equal(3);
+      });
+
+      it('updates down', () => {
+        hour.stepUpdate(Direction.DOWN);
+        expect(hour.value).to.equal(1);
+      });
+
+      it('goes up from 23 to 0', () => {
+        hour = new Hour(23);
+        hour.stepUpdate(Direction.UP);
+        expect(hour.value).to.equal(0);
+      });
+
+      it('goes down from 0 to 23', () => {
+        hour = new Hour(0);
+        hour.stepUpdate(Direction.DOWN);
+        expect(hour.value).to.equal(23);
+      });
+    });
+
+    describe('setStringValue', () => {
+      it('sets value from valid string', () => {
+        hour.setStringValue('3');
+        expect(hour.value).to.equal(3);
+      });
+
+      it("doesn't set value from invalid string", () => {
+        hour.setStringValue('test');
+        expect(hour.value).to.equal(2);
+      });
+
+      it("doesn't set value from outside of scope", () => {
+        hour.setStringValue('24');
+        expect(hour.value).to.equal(2);
+      });
+    });
+  });
+
+  context('with a different step size', () => {
+    beforeEach(() => {
+      hour = new Hour(2, 5);
+    });
+
+    it('goes up correctly', () => {
+      hour.stepUpdate(Direction.UP);
+      expect(hour.value).to.equal(7);
+
+      hour.stepUpdate(Direction.UP);
+      hour.stepUpdate(Direction.UP);
+      hour.stepUpdate(Direction.UP);
+      hour.stepUpdate(Direction.UP);
+
+      expect(hour.value).to.equal(3);
+    });
+
+    it('goes down correclty', () => {
+      hour.stepUpdate(Direction.DOWN);
+      expect(hour.value).to.equal(21);
+    });
+  });
+
+  context('in 12 hour mode', () => {
+    beforeEach(() => {
+      hour = new Hour(2, DEFAULT_HOUR_STEP, 12);
+    });
+
+    it('has correct max value', () => {
+      expect(hour.maxValue).to.equal(12);
+    });
+
+    describe('togglePeriod', () => {
+      it('changes values correclty', () => {
+        hour = new Hour(2, DEFAULT_HOUR_STEP, 12);
+        hour.togglePeriod();
+        expect(hour.value).to.equal(14);
+
+        hour = new Hour(0, DEFAULT_HOUR_STEP, 12);
+        hour.togglePeriod();
+        expect(hour.value).to.equal(12);
+
+        hour = new Hour(23, DEFAULT_HOUR_STEP, 12);
+        hour.togglePeriod();
+        expect(hour.value).to.equal(11);
+      });
+
+      it('has no side effects', () => {
+        const value = hour.value;
+        hour.togglePeriod();
+        hour.togglePeriod();
+        expect(hour.value).to.equal(value);
+      });
+    });
+
+    describe('toString', () => {
+      it('renders values above 12 orrectly', () => {
+        hour = new Hour(13, DEFAULT_HOUR_STEP, 12);
+        expect(hour.toString()).to.equal('01');
+      });
+
+      it('renders values correctly', () => {
+        hour = new Hour(0, DEFAULT_HOUR_STEP, 12);
+        expect(hour.toString()).to.equal('12');
+
+        hour = new Hour(6, DEFAULT_HOUR_STEP, 12);
+        expect(hour.toString()).to.equal('06');
+
+        hour = new Hour(12, DEFAULT_HOUR_STEP, 12);
+        expect(hour.toString()).to.equal('12');
+
+        hour = new Hour(18, DEFAULT_HOUR_STEP, 12);
+        expect(hour.toString()).to.equal('06');
+
+        hour = new Hour(23, DEFAULT_HOUR_STEP, 12);
+        expect(hour.toString()).to.equal('11');
+      });
+    });
+  });
+});
@@ -0,0 +1,119 @@
+import { Minute } from '../../src/models/minute';
+import { Direction } from '../../src/types';
+import { expect } from 'chai';
+
+describe('Minute', () => {
+  let minute: Minute;
+
+  context('with default config', () => {
+    beforeEach(() => {
+      minute = new Minute(2);
+    });
+
+    it('returns value', () => {
+      expect(minute.value).to.equal(2);
+    });
+
+    it('has correct max value', () => {
+      expect(minute.maxValue).to.equal(59);
+    });
+
+    describe('toString', () => {
+      it('renders values correctly', () => {
+        minute = new Minute(0);
+        expect(minute.toString()).to.equal('00');
+
+        minute = new Minute(5);
+        expect(minute.toString()).to.equal('05');
+
+        minute = new Minute(59);
+        expect(minute.toString()).to.equal('59');
+      });
+    });
+
+    describe('stepUpdate', () => {
+      it('updates up', () => {
+        minute.stepUpdate(Direction.UP);
+        expect(minute.value).to.equal(7);
+      });
+
+      it('updates down', () => {
+        minute.stepUpdate(Direction.DOWN);
+        expect(minute.value).to.equal(57);
+      });
+
+      it('goes up from 59 to 4', () => {
+        minute = new Minute(59);
+        minute.stepUpdate(Direction.UP);
+        expect(minute.value).to.equal(4);
+      });
+
+      it('goes down from 0 to 55', () => {
+        minute = new Minute(0);
+        minute.stepUpdate(Direction.DOWN);
+        expect(minute.value).to.equal(55);
+      });
+    });
+
+    describe('setStringValue', () => {
+      it('sets value from valid string', () => {
+        minute.setStringValue('3');
+        expect(minute.value).to.equal(3);
+      });
+
+      it("doesn't set value from invalid string", () => {
+        minute.setStringValue('test');
+        expect(minute.value).to.equal(2);
+      });
+
+      it("doesn't set value from outside of scope", () => {
+        minute.setStringValue('60');
+        expect(minute.value).to.equal(2);
+
+        minute.setStringValue('65');
+        expect(minute.value).to.equal(2);
+      });
+    });
+  });
+
+  context('with a different step size', () => {
+    beforeEach(() => {
+      minute = new Minute(2, 15);
+    });
+
+    it('goes up correctly', () => {
+      minute.stepUpdate(Direction.UP);
+      expect(minute.value).to.equal(17);
+
+      minute.stepUpdate(Direction.UP);
+      minute.stepUpdate(Direction.UP);
+      minute.stepUpdate(Direction.UP);
+      expect(minute.value).to.equal(2);
+
+      minute.stepUpdate(Direction.UP);
+      expect(minute.value).to.equal(17);
+    });
+
+    it('goes down correclty', () => {
+      minute.stepUpdate(Direction.DOWN);
+      expect(minute.value).to.equal(47);
+    });
+  });
+
+  describe('will overflow', () => {
+    it('returns true if the minutes will overflow an hour up', () => {
+      minute.setStringValue('59');
+      expect(minute.willOverflow(Direction.UP)).to.be.true;
+    });
+
+    it('returns true if the minutes will overflow an hour down', () => {
+      minute.setStringValue('0');
+      expect(minute.willOverflow(Direction.DOWN)).to.be.true;
+    });
+
+    it('returns true if the minutes will not overflow', () => {
+      minute.setStringValue('55');
+      expect(minute.willOverflow(Direction.DOWN)).to.be.false;
+    });
+  });
+});
@@ -0,0 +1,119 @@
+import { Second } from '../../src/models/second';
+import { Direction } from '../../src/types';
+import { expect } from 'chai';
+
+describe('Second', () => {
+  let second: Second;
+
+  context('with default config', () => {
+    beforeEach(() => {
+      second = new Second(2);
+    });
+
+    it('returns value', () => {
+      expect(second.value).to.equal(2);
+    });
+
+    it('has correct max value', () => {
+      expect(second.maxValue).to.equal(59);
+    });
+
+    describe('toString', () => {
+      it('renders values correctly', () => {
+        second = new Second(0);
+        expect(second.toString()).to.equal('00');
+
+        second = new Second(5);
+        expect(second.toString()).to.equal('05');
+
+        second = new Second(59);
+        expect(second.toString()).to.equal('59');
+      });
+    });
+
+    describe('stepUpdate', () => {
+      it('updates up', () => {
+        second.stepUpdate(Direction.UP);
+        expect(second.value).to.equal(7);
+      });
+
+      it('updates down', () => {
+        second.stepUpdate(Direction.DOWN);
+        expect(second.value).to.equal(57);
+      });
+
+      it('goes up from 59 to 4', () => {
+        second = new Second(59);
+        second.stepUpdate(Direction.UP);
+        expect(second.value).to.equal(4);
+      });
+
+      it('goes down from 0 to 55', () => {
+        second = new Second(0);
+        second.stepUpdate(Direction.DOWN);
+        expect(second.value).to.equal(55);
+      });
+    });
+
+    describe('setStringValue', () => {
+      it('sets value from valid string', () => {
+        second.setStringValue('3');
+        expect(second.value).to.equal(3);
+      });
+
+      it("doesn't set value from invalid string", () => {
+        second.setStringValue('test');
+        expect(second.value).to.equal(2);
+      });
+
+      it("doesn't set value from outside of scope", () => {
+        second.setStringValue('60');
+        expect(second.value).to.equal(2);
+
+        second.setStringValue('65');
+        expect(second.value).to.equal(2);
+      });
+    });
+  });
+
+  context('with a different step size', () => {
+    beforeEach(() => {
+      second = new Second(2, 15);
+    });
+
+    it('goes up correctly', () => {
+      second.stepUpdate(Direction.UP);
+      expect(second.value).to.equal(17);
+
+      second.stepUpdate(Direction.UP);
+      second.stepUpdate(Direction.UP);
+      second.stepUpdate(Direction.UP);
+      expect(second.value).to.equal(2);
+
+      second.stepUpdate(Direction.UP);
+      expect(second.value).to.equal(17);
+    });
+
+    it('goes down correclty', () => {
+      second.stepUpdate(Direction.DOWN);
+      expect(second.value).to.equal(47);
+    });
+  });
+
+  describe('will overflow', () => {
+    it('returns true if the Seconds will overflow an hour up', () => {
+      second.setStringValue('59');
+      expect(second.willOverflow(Direction.UP)).to.be.true;
+    });
+
+    it('returns true if the Seconds will overflow an hour down', () => {
+      second.setStringValue('0');
+      expect(second.willOverflow(Direction.DOWN)).to.be.true;
+    });
+
+    it('returns true if the Seconds will not overflow', () => {
+      second.setStringValue('55');
+      expect(second.willOverflow(Direction.DOWN)).to.be.false;
+    });
+  });
+});
@@ -12,6 +12,7 @@
    "noImplicitAny": false,
    "skipLibCheck": true,
    "resolveJsonModule": true,
-    "experimentalDecorators": true
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true // for importing sinon in tests
  }
 }
Author	SHA1	Message	Date
GeorgeSG	c3fa2ce6b6	1.1.1	2020-11-22 16:38:06 +02:00
GeorgeSG	f4128145fb	Fix name and seconds being linked together in Visual Editor	2020-11-22 16:37:48 +02:00
GeorgeSG	e8d87e9afb	1.1.0	2020-11-22 13:47:02 +02:00
GeorgeSG	e56dc41dcc	Fix import	2020-11-22 13:41:48 +02:00
GeorgeSG	4b5fc79630	Add embedded layout option	2020-11-22 13:40:19 +02:00
GeorgeSG	6113ec9415	Add seconds config to visual editor	2020-11-22 13:23:20 +02:00
GeorgeSG	f306d95748	Add optional seconds picker	2020-11-22 13:11:16 +02:00
GeorgeSG	fe91b79320	Bump dependencies	2020-11-22 12:35:54 +02:00
GeorgeSG	0b1b87ed6e	Merge pull request #8 from GeorgeSG/dependabot/npm_and_yarn/http-proxy-1.18.1 Bump http-proxy from 1.18.0 to 1.18.1	2020-09-12 14:02:34 +03:00
dependabot[bot]	81a0f1a95a	Bump http-proxy from 1.18.0 to 1.18.1 Bumps [http-proxy](https://github.com/http-party/node-http-proxy) from 1.18.0 to 1.18.1. - [Release notes](https://github.com/http-party/node-http-proxy/releases) - [Changelog](https://github.com/http-party/node-http-proxy/blob/master/CHANGELOG.md) - [Commits](https://github.com/http-party/node-http-proxy/compare/1.18.0...1.18.1) Signed-off-by: dependabot[bot] <support@github.com>	2020-09-11 22:23:04 +00:00
GeorgeSG	526a52f630	1.0.1	2020-07-17 20:24:39 +03:00
GeorgeSG	72d82d7c0a	Merge pull request #7 from GeorgeSG/dependabot/npm_and_yarn/lodash-4.17.19 Bump lodash from 4.17.15 to 4.17.19	2020-07-17 20:24:26 +03:00
dependabot[bot]	21f66a9066	Bump lodash from 4.17.15 to 4.17.19 Bumps [lodash](https://github.com/lodash/lodash) from 4.17.15 to 4.17.19. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/compare/4.17.15...4.17.19) Signed-off-by: dependabot[bot] <support@github.com>	2020-07-17 17:23:17 +00:00
GeorgeSG	fe93d385e9	1.0.0	2020-07-17 20:22:38 +03:00
GeorgeSG	05e0952624	Implements #5 : Add link_values option	2020-07-17 20:20:42 +03:00
GeorgeSG	3c10a9ab44	Fixes #6 : Inherit border-radius from theme. Add variable for border radius	2020-07-17 19:09:34 +03:00
GeorgeSG	9a2a57af5c	Update README	2020-05-18 22:22:32 +03:00
GeorgeSG	74949a3df2	0.1.1	2020-05-10 00:22:45 +03:00
GeorgeSG	224ee3b043	Remove commit activity from README	2020-05-10 00:18:38 +03:00
GeorgeSG	2e604a66d6	Update README	2020-05-10 00:17:43 +03:00
GeorgeSG	b7ad71d979	Rename CI task. Don't lint twice	2020-05-10 00:15:20 +03:00
GeorgeSG	79418592c9	Fix 12AM representation. Add model tests	2020-05-10 00:13:29 +03:00
GeorgeSG	0297c9aba4	Update README	2020-05-09 20:42:35 +03:00
GeorgeSG	588cead35d	0.1.0	2020-05-09 20:39:14 +03:00
GeorgeSG	04462e096c	Update README	2020-05-09 20:38:29 +03:00
GeorgeSG	03312aa5f7	Add new screenshot and reorganize README. Add code examples	2020-05-09 20:37:23 +03:00
GeorgeSG	4488b303d2	Add name position option. Refactor types	2020-05-09 20:24:37 +03:00
GeorgeSG	491e571aab	Add layout.align option	2020-05-09 19:39:36 +03:00
GeorgeSG	ae7dfb7668	Add test step in ci	2020-05-09 16:20:11 +03:00
GeorgeSG	cc22b482b4	Add some tests	2020-05-09 16:17:53 +03:00
GeorgeSG	812e7f3016	Bump custom-card-helpers. Refactor types	2020-05-09 13:40:26 +03:00
GeorgeSG	20cba88ef2	Update README - add full URLs to images	2020-05-09 13:17:44 +03:00
GeorgeSG	5b6c9d0af0	Update README - add downloads shield	2020-05-09 12:58:27 +03:00
GeorgeSG	993fda7d34	Update README - HACS default	2020-05-09 12:50:11 +03:00
GeorgeSG	df9de8bd00	Refactor editor datetimeEntities	2020-05-08 00:58:58 +03:00