1.1.1

Bump http-proxy from 1.18.0 to 1.18.1

README.md

@@ -15,7 +15,19 @@ Requires an [Input Datetime](https://www.home-assistant.io/integrations/input_da
 
 ## 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:
@@ -91,6 +103,7 @@ layout:
 | 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`                      |
@@ -104,25 +117,28 @@ layout:
 | 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
 
-| 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
 
 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
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "time-picker-card",
-  "version": "0.1.1",
+  "version": "1.1.1",
   "author": "Georgi Gardev <georgi@gardev.com>",
   "description": "Lovelace time-picker-card",
   "keywords": [
@@ -25,36 +25,36 @@
     "release-major": "npm version major && git push origin master --tags"
   },
   "dependencies": {
-    "custom-card-helpers": "^1.6.4",
-    "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",
-    "@open-wc/testing": "^2.5.16",
+    "@babel/core": "^7.12.7",
+    "@open-wc/testing": "^2.5.32",
     "@rollup/plugin-commonjs": "^11.1.0",
-    "@rollup/plugin-json": "^4.0.3",
-    "@rollup/plugin-node-resolve": "^7.1.1",
-    "@rollup/plugin-typescript": "^4.0.0",
-    "@types/chai": "^4.2.11",
-    "@typescript-eslint/eslint-plugin": "^2.30.0",
-    "@typescript-eslint/parser": "^2.30.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",
-    "karma": "^5.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.1.2",
-    "prettier": "^2.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",
-    "sinon": "^9.0.2",
-    "typescript": "^3.8.3"
+    "rollup-plugin-serve": "^1.1.0",
+    "rollup-plugin-terser": "^5.3.1",
+    "sinon": "^9.2.1",
+    "typescript": "^3.9.7"
   }
 }

src/components/time-unit.component.ts

@@ -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;
 
@@ -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);
   }
 

src/const.ts

@@ -9,6 +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;

src/editor.ts

@@ -15,12 +15,18 @@ import {
   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;
@@ -61,14 +67,14 @@ export class TimePickerCardEditor extends LitElement implements LovelaceCardEdit
         @value-changed=${this.onValueChange}
       ></paper-input>
       <div class="side-by-side">
-        <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)"
@@ -101,20 +107,39 @@ 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}"
-        >
-          "Single" hour mode layout (in 12-Hour mode only)
-        </ha-switch>
+        </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
@@ -131,6 +156,22 @@ export class TimePickerCardEditor extends LitElement implements LovelaceCardEdit
             ${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>`;
   }
@@ -147,7 +188,14 @@ export class TimePickerCardEditor extends LitElement implements LovelaceCardEdit
   }
 
   private onHideNameChange({ target: { checked } }): void {
-    const newConfig = { ...this.config, hide: { name: !checked } };
+    const hide = { ...this.config.hide, name: !checked };
+    const newConfig = { ...this.config, hide };
+    this.dispatch(newConfig);
+  }
+
+  private onHideSecondsChange({ target: { checked } }): void {
+    const hide = { ...this.config.hide, seconds: !checked };
+    const newConfig = { ...this.config, hide };
     this.dispatch(newConfig);
   }
 
@@ -173,6 +221,16 @@ export class TimePickerCardEditor extends LitElement implements LovelaceCardEdit
     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);
+  }
+
   private onValueChange(e: CustomEvent): void {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const property = (e.target as any).configValue;
@@ -209,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;

src/models/minute.ts

@@ -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.
@@ -13,4 +14,13 @@ export class Minute extends TimeUnit {
   constructor(value: number, step = DEFAULT_MINUTE_STEP) {
     super(value, step, Minute.VALUE_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;
+  }
 }

src/models/second.ts

@@ -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;
+  }
+}

src/models/time-unit.ts

@@ -39,23 +39,27 @@ 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;
     }

src/models/time.ts

@@ -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}`;
+  }
+}

src/partials.ts

@@ -16,11 +16,7 @@ export class Partial {
   }
 
   static headerName(title: string): TemplateResult {
-    return html`
-      <div class="time-picker-header">
-        ${title}
-      </div>
-    `;
+    return html`<div class="time-picker-header">${title}</div>`;
   }
 
   static nestedName(name: string, entity: HassEntity): TemplateResult {

src/time-picker-card.ts

@@ -10,21 +10,22 @@ import {
   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,
-  DEFAULT_LAYOUT_ALIGN_CONTROLS,
 } from './const';
+import './editor';
 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, Layout } from './types';
-
-import './components/time-period.component';
-import './components/time-unit.component';
-import './editor';
+import { Layout, Period, TimePickerCardConfig } from './types';
 
 console.info(
   `%c  TIME-PICKER-CARD  \n%c  Version ${CARD_VERSION}    `,
@@ -43,19 +44,23 @@ window.customCards.push({
 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 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
+      this.config.layout?.name !== Layout.Name.INSIDE &&
+      Boolean(this.config.layout?.embedded) === false // embedded layout disables name in header
     );
   }
 
@@ -63,7 +68,7 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
     return (
       Boolean(this.name) &&
       Boolean(this.config.hide?.name) === false &&
-      this.config.layout?.name === Layout.Name.INSIDE
+      (this.config.layout?.name === Layout.Name.INSIDE || Boolean(this.config.layout?.embedded))
     );
   }
 
@@ -79,10 +84,17 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
     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,
     };
   }
 
@@ -109,22 +121,39 @@ 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>
+      <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) : ''}
 
           <div class=${classMap(this.contentClass)}>
-            <time-unit .unit=${this.hour} @update=${this.callHassService}></time-unit>
+            <time-unit
+              .unit=${this.time.hour}
+              @stepChange=${this.onHourStepChange}
+              @update=${this.callHassService}
+            ></time-unit>
             <div class="time-separator">:</div>
-            <time-unit .unit=${this.minute} @update=${this.callHassService}></time-unit>
-
+            <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}
@@ -159,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();
   }
 
@@ -168,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,
     });
   }
 
@@ -188,12 +230,20 @@ 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;
       }
@@ -205,6 +255,10 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
         padding: 16px;
       }
 
+      .time-picker-row.embedded {
+        padding: 0;
+      }
+
       .time-picker-row.with-header-name {
         padding: 8px 16px 16px;
       }

src/types.ts

@@ -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;
 }
@@ -16,6 +18,7 @@ export interface TimePickerLayoutConfig {
   align_controls?: Layout.AlignControls;
   name?: Layout.Name;
   hour_mode?: Layout.HourMode;
+  embedded?: boolean;
 }
 
 export namespace Layout {
@@ -35,6 +38,7 @@ export namespace Layout {
 
 export interface TimePickerHideConfig {
   name?: boolean;
+  seconds?: boolean;
 }
 
 export enum Direction {

test/models/minute.test.ts

@@ -99,4 +99,21 @@ describe('Minute', () => {
       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;
+    });
+  });
 });

test/models/second.test.ts

@@ -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;
+    });
+  });
+});