1.3.0

Fix issue #43 HA 2022.11.0

.gitignore

@@ -1,2 +1,6 @@
 node_modules/
 dist/
+
+devtools/homeassistant/*
+!devtools/homeassistant/configuration.yaml
+!devtools/homeassistant/ui-lovelace.yaml

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
   "files.exclude": {
     "dist/**": true
+  },
+  "files.associations": {
+    "*.yaml": "home-assistant"
   }
 }

README.md

@@ -76,6 +76,7 @@ entity: input_datetime.alarm_time
 hour_mode: 12
 layout:
   hour_mode: single
+  align_controls: right
 hide:
   name: true
 ```
@@ -89,26 +90,35 @@ type: 'custom:time-picker-card'
 entity: input_datetime.alarm_time
 layout:
   name: inside
-  align_controls: right
+  align_controls: center
 ```
 
+### Dark theme, embedded layout
+![Dark theme embedded](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/dark_embedded.png)
+
+### Dark theme, thin layout
+![Dark theme thin layout](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/dark_thin.png)
+
 ### 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                  |
-| ----------- | ------------ | ------------ | --------------------------------------------------------------------------------------------------------- | ------------------------ |
-| 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`                   |
+| Name              | Type         | Requirement  | Description                                                                                               | Default                  |
+| ----------------- | ------------ | ------------ | --------------------------------------------------------------------------------------------------------- | ------------------------ |
+| 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`                   |
+| tap_action        | action       | **Optional** | Home assistant action to perform on tap                                                                   | `more-info`              |
+| double_tap_action | action       | **Optional** | Home assistant action to perform on tap                                                                   | `more-info`              |
+| hold_action       | action       | **Optional** | Home assistant action to perform on tap                                                                   | `more-info`              |
 
 ### Layout Object
 
@@ -117,26 +127,31 @@ 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`  |
+| thin           | boolean                   | **Optional** | Render with reduced paddings                                                                       | `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` |
+| icon    | boolean | **Optional** | Hides the card icon (only with controls "inside") | `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                 |
-| time-picker-border-radius             | `var(--ha-card-border-radius)` | Border radius of the card              |
+| 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                                                                            |
+| time-picker-control-padding           | `8px`                          | Padding for interactive elements. Increase for larger hitboxes of the controls. Example: `10px 12px` |
 
 ## Meta
 
@@ -147,14 +162,14 @@ you can use the following variables in your theme's config file:
 - [![Twitter][twitter-icon]][twitter-link] [@georgesg92][twitter-link]
 
 [hacs-shield]: https://img.shields.io/badge/HACS-Default-brightgreen.svg
-[hacs-link]: https://github.com/custom-components/hacs
+[hacs-link]: https://github.com/hacs/integration
 [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-shield]: https://img.shields.io/maintenance/yes/2022.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

devtools/homeassistant/configuration.yaml

@@ -0,0 +1,27 @@
+# Configure a default setup of Home Assistant (frontend, api, etc)
+default_config:
+
+homeassistant:
+  packages: !include_dir_named packages/
+
+logger:
+  default: info
+  logs:
+    hacs: debug
+
+lovelace:
+  mode: yaml
+  resources:
+    - type: module
+      url: /hacsfiles/button-card/button-card.js
+    - type: module
+      url: /hacsfiles/lovelace-state-switch/state-switch.js
+    - type: module
+      url: http://localhost:5000/time-picker-card.js
+  dashboards:
+    lovelace-home:
+      mode: yaml
+      title: Home
+      icon: mdi:home
+      show_in_sidebar: true
+      filename: ui-lovelace.yaml

devtools/homeassistant/ui-lovelace.yaml

@@ -0,0 +1,147 @@
+title: Home
+views:
+  - title: dev
+    path: dev
+    cards:
+      - type: vertical-stack
+        cards:
+          - type: markdown
+            content: "# 🕰 Time Picker Card dev"
+          - type: entities
+            entities:
+              - input_datetime.test_date_time
+          - type: horizontal-stack
+            cards:
+              - type: custom:time-picker-card
+                entity: input_datetime.test_date_time
+                name: With tap actions
+                hour_mode: 24
+                hour_step: 2
+                tap_action:
+                  action: call-service
+                  service: logbook.log
+                  service_data:
+                    name: "Time picker card · Tap Action"
+                    message: "Debug"
+                double_tap_action:
+                  action: call-service
+                  service: logbook.log
+                  service_data:
+                    name: "Time picker card · Double Tap Action"
+                    message: "Debug"
+                hold_action:
+                  action: call-service
+                  service: logbook.log
+                  service_data:
+                    name: "Time picker card · Hold action"
+                    message: "Debug"
+              - type: custom:time-picker-card
+                name: Hour mode 12, thin, single, hidden name
+                entity: input_datetime.test_date_time
+                hour_mode: 12
+                layout:
+                  hour_mode: single
+                  thin: true
+                hide:
+                  name: true
+
+          - type: custom:time-picker-card
+            entity: input_datetime.test_date_time
+            name: Thin
+            layout:
+              thin: true
+          - type: custom:time-picker-card
+            entity: input_datetime.test_date_time
+            name: Hidden seconds
+            hide:
+              seconds: false
+
+          - type: horizontal-stack
+            cards:
+              - type: custom:time-picker-card
+                entity: input_datetime.test_date_time
+                name: Hidden name
+                hour_mode: 12
+                hide:
+                  name: true
+              - type: custom:time-picker-card
+                entity: input_datetime.test_date_time
+                name: Linked, single hour mode, hidden name
+                link_values: true
+                hour_mode: 12
+                hour_step: 2
+                minute_step: 3
+                layout:
+                  hour_mode: single
+                hide:
+                  name: false
+
+          - type: custom:time-picker-card
+            entity: input_datetime.test_date
+            name: Error
+
+  - title: name inside
+    path: name-inside
+    cards:
+      - type: custom:time-picker-card
+        entity: input_datetime.test_date_time
+        name: Inside, controls right
+        hour_mode: 12
+        layout:
+          name: inside
+          align_controls: right
+      - type: horizontal-stack
+        cards:
+          - type: custom:time-picker-card
+            entity: input_datetime.test_date_time
+            name: Inside, hidden name
+            layout:
+              name: inside
+            hide:
+              name: true
+          - type: custom:time-picker-card
+            entity: input_datetime.test_date_time
+            name: Inside, hidden icon
+            layout:
+              name: inside
+            hide:
+              icon: true
+
+  - title: embedded
+    path: embedded
+    cards:
+      - type: vertical-stack
+        cards:
+
+          - type: entities
+            entities:
+              - input_datetime.test_date_time
+              - type: custom:time-picker-card
+                entity: input_datetime.test_date_time
+                name: Embedded thin
+                hour_mode: 24
+                hour_step: 2
+                layout:
+                  embedded: true
+                  thin: true
+
+              - type: custom:time-picker-card
+                entity: input_datetime.test_date_time
+                name: Inside
+                hour_mode: 24
+                hour_step: 2
+                layout:
+                  name: inside
+
+              - type: custom:time-picker-card
+                entity: input_datetime.test_date_time
+                hour_mode: 12
+                layout:
+                  hour_mode: single
+                hide:
+                  name: true
+              - type: custom:time-picker-card
+                entity: input_datetime.test_date_time
+                hour_mode: 12
+                layout:
+                  hour_mode: single

jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  preset: 'ts-jest/presets/js-with-babel',
+  testRegex: '/test/.*\\.test?\\.ts$',
+  transformIgnorePatterns: [
+    'node_modules/(?!(testing-library__dom|@open-wc|lit-html|lit-element|pure-lit|lit-element-state-decoupler)/)',
+  ],
+  moduleFileExtensions: ['ts', 'js'],
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "time-picker-card",
-  "version": "0.1.1",
+  "version": "1.3.0",
   "author": "Georgi Gardev <georgi@gardev.com>",
   "description": "Lovelace time-picker-card",
   "keywords": [
@@ -15,46 +15,35 @@
   "license": "MIT",
   "repository": "git@github.com:GeorgeSG/lovelace-time-picker-card.git",
   "scripts": {
-    "start": "rollup -c --watch",
+    "start": "rollup -c --watch --bundleConfigAsCjs",
     "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",
+    "rollup": "rollup -c --bundleConfigAsCjs",
+    "test": "jest",
     "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"
+    "release-major": "npm version major && git push origin master --tags",
+    "start:ha": "docker run --rm -p8124:8123 -v $(pwd)/devtools/homeassistant:/config homeassistant/home-assistant:latest"
   },
   "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.9.0",
+    "home-assistant-js-websocket": "^8.0.0",
+    "lit": "^2.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@open-wc/testing": "^2.5.16",
-    "@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",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-prettier": "^3.1.3",
-    "karma": "^5.0.5",
-    "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",
-    "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"
+    "@el3um4s/rollup-plugin-terser": "^1.0.2",
+    "@rollup/plugin-babel": "^6.0.2",
+    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-json": "^5.0.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-typescript": "^9.0.2",
+    "@types/jest": "^29.2.1",
+    "eslint": "^8.26.0",
+    "jest": "^29.2.2",
+    "prettier": "^2.7.1",
+    "rollup": "^3.2.5",
+    "rollup-plugin-serve": "^2.0.1",
+    "ts-jest": "^29.0.3",
+    "typescript": "^4.8.4"
   }
 }

rollup.config.js

@@ -1,15 +1,15 @@
 import nodeResolve from '@rollup/plugin-node-resolve';
 import json from '@rollup/plugin-json';
 import typescript from '@rollup/plugin-typescript';
-import { terser } from 'rollup-plugin-terser';
-import babel from 'rollup-plugin-babel';
+import { terser } from '@el3um4s/rollup-plugin-terser';
+import babel from '@rollup/plugin-babel';
 import serve from 'rollup-plugin-serve';
 
 const dev = process.env.ROLLUP_WATCH;
 
 const serveOptions = {
   contentBase: ['./dist'],
-  host: '0.0.0.0',
+  host: 'localhost',
   port: 5000,
   allowCrossOrigin: true,
   headers: {
@@ -24,9 +24,9 @@ export default {
     format: 'es',
   },
   plugins: [
+    typescript({ exclude: ['test/**/*'] }),
     nodeResolve(),
     json(),
-    typescript(),
     babel({
       exclude: 'node_modules/**',
     }),

src/action-handler-directive.ts

@@ -0,0 +1,204 @@
+import { noChange } from 'lit';
+import { AttributePart, directive, Directive, DirectiveParameters } from 'lit/directive.js';
+
+import { fireEvent } from 'custom-card-helpers';
+import { ActionHandlerDetail, ActionHandlerOptions } from 'custom-card-helpers/dist/types';
+
+const isTouch =
+  'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.maxTouchPoints > 0;
+
+interface ActionHandler extends HTMLElement {
+  holdTime: number;
+  bind(element: Element, options): void;
+}
+interface ActionHandlerElement extends HTMLElement {
+  actionHandler?: boolean;
+}
+
+declare global {
+  interface HASSDomEvents {
+    action: ActionHandlerDetail;
+  }
+}
+
+class ActionHandler extends HTMLElement implements ActionHandler {
+  public holdTime = 500;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  public ripple: any;
+
+  protected timer?: number;
+
+  protected held = false;
+
+  private dblClickTimeout?: number;
+
+  constructor() {
+    super();
+    this.ripple = document.createElement('mwc-ripple');
+  }
+
+  public connectedCallback(): void {
+    Object.assign(this.style, {
+      position: 'absolute',
+      width: isTouch ? '100px' : '50px',
+      height: isTouch ? '100px' : '50px',
+      transform: 'translate(-50%, -50%)',
+      pointerEvents: 'none',
+      zIndex: '999',
+    });
+
+    this.appendChild(this.ripple);
+    this.ripple.primary = true;
+
+    ['touchcancel', 'mouseout', 'mouseup', 'touchmove', 'mousewheel', 'wheel', 'scroll'].forEach(
+      (ev) => {
+        document.addEventListener(
+          ev,
+          () => {
+            clearTimeout(this.timer);
+            this.stopAnimation();
+            this.timer = undefined;
+          },
+          { passive: true }
+        );
+      }
+    );
+  }
+
+  public bind(element: ActionHandlerElement, options): void {
+    if (element.actionHandler) {
+      return;
+    }
+    element.actionHandler = true;
+
+    element.addEventListener('contextmenu', (ev: Event) => {
+      const e = ev || window.event;
+      if (e.preventDefault) {
+        e.preventDefault();
+      }
+      if (e.stopPropagation) {
+        e.stopPropagation();
+      }
+      e.cancelBubble = true;
+      e.returnValue = false;
+      return false;
+    });
+
+    const start = (ev: Event): void => {
+      this.held = false;
+      let x;
+      let y;
+      if ((ev as TouchEvent).touches) {
+        x = (ev as TouchEvent).touches[0].pageX;
+        y = (ev as TouchEvent).touches[0].pageY;
+      } else {
+        x = (ev as MouseEvent).pageX;
+        y = (ev as MouseEvent).pageY;
+      }
+
+      this.timer = window.setTimeout(() => {
+        this.startAnimation(x, y);
+        this.held = true;
+      }, this.holdTime);
+    };
+
+    const end = (ev: Event): void => {
+      // Prevent mouse event if touch event
+      ev.preventDefault();
+      if (['touchend', 'touchcancel'].includes(ev.type) && this.timer === undefined) {
+        return;
+      }
+      clearTimeout(this.timer);
+      this.stopAnimation();
+      this.timer = undefined;
+      if (this.held) {
+        fireEvent(element, 'action', { action: 'hold' });
+      } else if (options.hasDoubleClick) {
+        if ((ev.type === 'click' && (ev as MouseEvent).detail < 2) || !this.dblClickTimeout) {
+          this.dblClickTimeout = window.setTimeout(() => {
+            this.dblClickTimeout = undefined;
+            fireEvent(element, 'action', { action: 'tap' });
+          }, 250);
+        } else {
+          clearTimeout(this.dblClickTimeout);
+          this.dblClickTimeout = undefined;
+          fireEvent(element, 'action', { action: 'double_tap' });
+        }
+      } else {
+        fireEvent(element, 'action', { action: 'tap' });
+      }
+    };
+
+    const handleEnter = (ev: KeyboardEvent): void => {
+      if (ev.keyCode !== 13) {
+        return;
+      }
+      end(ev);
+    };
+
+    element.addEventListener('touchstart', start, { passive: true });
+    element.addEventListener('touchend', end);
+    element.addEventListener('touchcancel', end);
+
+    element.addEventListener('mousedown', start, { passive: true });
+    element.addEventListener('click', end);
+
+    element.addEventListener('keyup', handleEnter);
+  }
+
+  private startAnimation(x: number, y: number): void {
+    Object.assign(this.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+      display: null,
+    });
+    this.ripple.disabled = false;
+    this.ripple.active = true;
+    this.ripple.unbounded = true;
+  }
+
+  private stopAnimation(): void {
+    this.ripple.active = false;
+    this.ripple.disabled = true;
+    this.style.display = 'none';
+  }
+}
+
+// TODO You need to replace all instances of "action-handler-boilerplate" with "action-handler-<your card name>"
+customElements.define('action-handler-boilerplate', ActionHandler);
+
+const getActionHandler = (): ActionHandler => {
+  const body = document.body;
+  if (body.querySelector('action-handler-boilerplate')) {
+    return body.querySelector('action-handler-boilerplate') as ActionHandler;
+  }
+
+  const actionhandler = document.createElement('action-handler-boilerplate');
+  body.appendChild(actionhandler);
+
+  return actionhandler as ActionHandler;
+};
+
+export const actionHandlerBind = (
+  element: ActionHandlerElement,
+  options?: ActionHandlerOptions
+): void => {
+  const actionhandler: ActionHandler = getActionHandler();
+  if (!actionhandler) {
+    return;
+  }
+  actionhandler.bind(element, options);
+};
+
+export const actionHandler = directive(
+  class extends Directive {
+    update(part: AttributePart, [options]: DirectiveParameters<this>) {
+      actionHandlerBind(part.element as ActionHandlerElement, options);
+      return noChange;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+    render(_options?: ActionHandlerOptions) {}
+  }
+);

src/components/time-period.component.ts

@@ -1,13 +1,6 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from 'lit-element';
-import { ClassInfo, classMap } from 'lit-html/directives/class-map';
+import { css, CSSResult, html, LitElement, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ClassInfo, classMap } from 'lit/directives/class-map.js';
 import { Layout, Period } from '../types';
 
 /**
@@ -63,7 +56,7 @@ export class TimePeriodComponent extends LitElement {
 
       .time-period {
         width: 30px;
-        padding: 8px;
+        padding: var(--tpc-control-padding);
         background: var(--tpc-off-color);
         color: var(--tpc-text-color);
         text-align: center;

src/components/time-unit.component.ts

@@ -1,12 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from 'lit-element';
+import { LitElement, TemplateResult, html, CSSResult, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { TimeUnit } from '../models/time-unit';
 import { Direction } from '../types';
 
@@ -69,7 +62,7 @@ export class TimeUnitComponent extends LitElement {
 
       .time-picker-icon {
         width: 30px;
-        padding: 8px;
+        padding: var(--tpc-control-padding);
         text-align: center;
         cursor: pointer;
         color: var(--tpc-icon-color);
@@ -77,7 +70,7 @@ export class TimeUnitComponent extends LitElement {
 
       .time-input {
         width: 30px;
-        padding: 8px 8px 6px;
+        padding: var(--tpc-control-padding);
         background: var(--tpc-elements-background-color);
         border: 0;
         border-bottom: 2px solid var(--tpc-elements-background-color);

src/const.ts

@@ -9,6 +9,8 @@ export const ENTITY_DOMAIN = 'input_datetime';
 // Config defaults
 export const DEFAULT_HOUR_STEP = 1;
 export const DEFAULT_MINUTE_STEP = 5;
-export const DEFAULT_LAYOUT_HOUR_MODE = 'double';
+export const DEFAULT_SECOND_STEP = 5;
+export const DEFAULT_HOUR_MODE = 24;
+export const DEFAULT_LAYOUT_HOUR_MODE: Layout.HourMode = 'double';
 export const DEFAULT_LAYOUT_ALIGN_CONTROLS = Layout.AlignControls.CENTER;
 export const DEFAULT_LAYOUT_NAME = Layout.Name.HEADER;

src/editor.ts

@@ -1,218 +1,151 @@
-import { computeDomain, HomeAssistant, LovelaceCardEditor } from 'custom-card-helpers';
-import { HassEntity } from 'home-assistant-js-websocket';
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from 'lit-element';
-import {
-  DEFAULT_HOUR_STEP,
-  DEFAULT_MINUTE_STEP,
-  ENTITY_DOMAIN,
-  DEFAULT_LAYOUT_ALIGN_CONTROLS,
-  DEFAULT_LAYOUT_NAME,
-} from './const';
-import { TimePickerCardConfig, Layout, HourMode } from './types';
+import { HomeAssistant, LovelaceCardEditor } from 'custom-card-helpers';
+import { html, LitElement, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { TimePickerCardConfig } from './types';
+
+const NAME_TO_LABEL_MAP = {
+  entity: 'input_datetime entity id',
+  name: 'Name',
+  hour_step: 'Hour step',
+  minute_step: 'Minute step',
+  hour_mode: 'Hour mode',
+  link_values: 'Link values',
+  align_controls: 'Align controls',
+  embedded: 'Embedded?',
+  thin: 'Thin layout?',
+  icon: 'Icon',
+  seconds: 'Seconds',
+};
+
+const SCHEMA = [
+  { name: 'entity', selector: { entity: { domain: 'input_datetime' } } },
+  {
+    name: 'name',
+    selector: { text: {} },
+  },
+  {
+    type: 'grid',
+    schema: [
+      {
+        name: 'hour_step',
+        type: 'integer',
+        required: true,
+        default: 1,
+        valueMin: 1,
+        valueMax: 24,
+      },
+      {
+        name: 'minute_step',
+        type: 'integer',
+        required: true,
+        default: 5,
+        valueMin: 1,
+        valueMax: 60,
+      },
+      {
+        name: 'hour_mode',
+        type: 'select',
+        options: [
+          [12, '12'],
+          [24, '24'],
+        ],
+      },
+      { name: 'link_values', type: 'boolean' },
+    ],
+  },
+  {
+    type: 'expandable',
+    name: 'layout',
+    title: 'Layout controls',
+    schema: [
+      {
+        name: 'hour_mode',
+        type: 'select',
+        options: [
+          ['single', 'single'],
+          ['double', 'double'],
+        ],
+      },
+      {
+        name: 'align_controls',
+        type: 'select',
+        options: [
+          ['left', 'left'],
+          ['center', 'center'],
+          ['right', 'right'],
+        ],
+      },
+      {
+        name: 'name',
+        type: 'select',
+        options: [
+          ['header', 'header'],
+          ['inside', 'inside'],
+        ],
+      },
+      { name: 'embedded', type: 'boolean' },
+      { name: 'thin', type: 'boolean' },
+    ],
+  },
+  {
+    type: 'expandable',
+    name: 'hide',
+    title: 'Hide controls',
+    schema: [
+      {
+        type: 'grid',
+        name: '',
+        schema: [
+          { name: 'name', type: 'boolean' },
+          { name: 'icon', type: 'boolean' },
+          { name: 'seconds', type: 'boolean' },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'expandable',
+    title: 'Actions',
+    schema: [
+      { name: 'tap_action', selector: { action: {} } },
+      { name: 'double_tap_action', selector: { action: {} } },
+      { name: 'hold_action', selector: { action: {} } },
+    ],
+  },
+];
 
 @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 CONFIG_CHANGED_EVENT = 'config-changed';
 
   @property({ type: Object }) hass!: HomeAssistant;
   @property() private config!: TimePickerCardConfig;
 
-  private get entity(): HassEntity | undefined {
-    return this.hass.states[this.config.entity];
+  private computeLabel({ name }) {
+    return NAME_TO_LABEL_MAP[name] || name;
   }
 
-  private get datetimeEntities(): Array<string> {
-    return Object.keys(this.hass.states).filter(
-      (entityId) =>
-        computeDomain(entityId) === ENTITY_DOMAIN &&
-        this.hass.states[entityId].attributes.has_time === true
-    );
+  private valueChanged(ev: CustomEvent): void {
+    const newConfig = { ...this.config, ...ev.detail.value };
+    this.dispatch(newConfig);
   }
 
   render(): TemplateResult {
-    return html`<div class="card-config">
-      <paper-dropdown-menu
-        style="width: 100%"
-        label="Entity (Required)"
-        .configValue=${'entity'}
-        @value-changed=${this.onValueChange}
-      >
-        <paper-listbox
-          slot="dropdown-content"
-          .selected=${this.datetimeEntities.indexOf(this.config.entity)}
-        >
-          ${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">
-        <div>
-          <ha-switch
-            style="margin-left: 10px"
-            .checked="${!Boolean(this.config.hide?.name)}"
-            .configValue="${'hide_name'}"
-            @change="${this.onHideNameChange}"
-          ></ha-switch>
-          Show name?
-        </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
-          type="number"
-          label="Hour Step (Optional)"
-          .configValue=${'hour_step'}
-          .value=${this.config.hour_step || DEFAULT_HOUR_STEP}
-          @value-changed=${this.onValueChange}
-        ></paper-input>
-        <paper-input
-          type="number"
-          label="Minute Step (Optional)"
-          .configValue=${'minute_step'}
-          .value=${this.config.minute_step || DEFAULT_MINUTE_STEP}
-          @value-changed=${this.onValueChange}
-        ></paper-input>
-      </div>
-      <div class="side-by-side">
-        <div>
-          <ha-switch
-            .checked="${this.config.hour_mode === 12}"
-            .configValue="${'hour_mode'}"
-            @change="${this.onHourModeChange}"
-          ></ha-switch>
-          12-Hour mode
-        </div>
-        ${this.config.hour_mode === 12
-          ? html`<div>
-              <ha-switch
-                .checked="${this.config.layout?.hour_mode === 'single'}"
-                .configValue="${'hour_mode_layout'}"
-                @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}
-        >
-          <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}"
-            .configValue="${'link_values'}"
-            @change="${this.onLinkValuesChange}"
-          ></ha-switch>
-          Link Values
-        </div>
-      </div>
-    </div>`;
+    return html`
+      <ha-form
+        .hass=${this.hass}
+        .data=${this.config}
+        .schema=${SCHEMA}
+        .computeLabel=${this.computeLabel}
+        @value-changed=${this.valueChanged}
+      ></ha-form>
+    `;
   }
 
   setConfig(config): void {
     this.config = config;
   }
 
-  private onHourModeChange({ target: { checked } }): void {
-    const hourMode: HourMode = checked ? 12 : 24;
-
-    const newConfig = { ...this.config, hour_mode: hourMode };
-    this.dispatch(newConfig);
-  }
-
-  private onHideNameChange({ target: { checked } }): void {
-    const newConfig = { ...this.config, hide: { name: !checked } };
-    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 onValueChange(e: CustomEvent): void {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const property = (e.target as any).configValue;
-    let value = e.detail.value;
-
-    if (TimePickerCardEditor.NUMBER_PROPERTIES.indexOf(property) > -1) {
-      value = parseInt(value);
-
-      if (isNaN(value)) {
-        return;
-      }
-    }
-
-    if (this.config[property] === value) {
-      return;
-    }
-
-    const newConfig = { ...this.config, [property]: value };
-
-    this.dispatch(newConfig);
-  }
-
   private dispatch(config: TimePickerCardConfig): void {
     const event = new CustomEvent(TimePickerCardEditor.CONFIG_CHANGED_EVENT, {
       bubbles: true,
@@ -222,23 +155,4 @@ export class TimePickerCardEditor extends LitElement implements LovelaceCardEdit
 
     this.dispatchEvent(event);
   }
-
-  static get styles(): CSSResult {
-    return css`
-      ha-switch {
-        padding: 16px 0;
-        margin-right: 16px;
-      }
-      .side-by-side {
-        display: flex;
-      }
-      .side-by-side > * {
-        flex: 1;
-        padding-right: 4px;
-      }
-      .suffix {
-        margin: 0 8px;
-      }
-    `;
-  }
 }

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.ts

@@ -1,9 +1,15 @@
+import { Direction } from '../types';
 import { Hour } from './hour';
 import { Minute } from './minute';
-import { Direction } from '../types';
+import { Second } from './second';
 
 export class Time {
-  constructor(public hour: Hour, public minute: Minute, private _linkValues: boolean = false) {}
+  constructor(
+    public hour: Hour,
+    public minute: Minute,
+    public second: Second,
+    private _linkValues: boolean = false
+  ) {}
 
   hourStep(direction: Direction): void {
     this.hour.stepUpdate(direction);
@@ -17,7 +23,15 @@ export class Time {
     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}`;
+    return `${this.hour.value}:${this.minute.value}:${this.second.value}`;
   }
 }

src/partials.ts

@@ -1,7 +1,6 @@
-import { html, TemplateResult } from 'lit-element';
-import { TimePickerCardConfig } from './types';
 import { LovelaceCard } from 'custom-card-helpers';
-import { HassEntity } from 'home-assistant-js-websocket';
+import { html, TemplateResult } from 'lit';
+import { TimePickerCardConfig } from './types';
 
 export class Partial {
   static error(error: string, origConfig: TimePickerCardConfig): TemplateResult {
@@ -14,17 +13,4 @@ export class Partial {
 
     return html`${errorCard}`;
   }
-
-  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>`;
-  }
 }

src/time-picker-card.ts

@@ -1,31 +1,36 @@
-import { computeDomain, HomeAssistant, LovelaceCard } from 'custom-card-helpers';
-import { HassEntity } from 'home-assistant-js-websocket';
 import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from 'lit-element';
-import { ClassInfo, classMap } from 'lit-html/directives/class-map';
+  ActionHandlerEvent,
+  computeDomain,
+  handleAction,
+  hasAction,
+  HomeAssistant,
+  LovelaceCard,
+} from 'custom-card-helpers';
+import { HassEntity } from 'home-assistant-js-websocket';
+import { css, CSSResult, html, LitElement, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ClassInfo, classMap } from 'lit/directives/class-map.js';
+import { actionHandler } from './action-handler-directive';
+import './components/time-period.component';
+import './components/time-unit.component';
 import {
   CARD_SIZE,
   CARD_VERSION,
-  DEFAULT_LAYOUT_HOUR_MODE,
-  ENTITY_DOMAIN,
+  DEFAULT_HOUR_MODE,
+  DEFAULT_HOUR_STEP,
   DEFAULT_LAYOUT_ALIGN_CONTROLS,
+  DEFAULT_LAYOUT_HOUR_MODE,
+  DEFAULT_LAYOUT_NAME,
+  DEFAULT_MINUTE_STEP,
+  ENTITY_DOMAIN,
 } 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, TimePickerHideConfig } from './types';
 
 console.info(
   `%c  TIME-PICKER-CARD  \n%c  Version ${CARD_VERSION}    `,
@@ -51,19 +56,23 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
     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
     );
   }
 
   private get hasNameInside(): 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))
     );
   }
 
@@ -79,10 +88,18 @@ 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,
+      thin: this.config.layout?.thin === true,
+    };
+  }
+
   private get rowClass(): ClassInfo {
     return {
       'time-picker-row': true,
       'with-header-name': this.hasNameInHeader,
+      embedded: this.isEmbedded,
     };
   }
 
@@ -93,6 +110,58 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
     };
   }
 
+  private handleAction(ev: ActionHandlerEvent) {
+    handleAction(this, this.hass, this.config, ev.detail.action!);
+  }
+
+  private renderHeaderName(title: string): TemplateResult {
+    return html`<div
+      class="time-picker-header"
+      @action=${this.handleAction}
+      .actionHandler="${actionHandler({
+        hasHold: hasAction(this.config.hold_action),
+        hasDoubleClick: hasAction(this.config.double_tap_action),
+      })}"
+    >
+      ${title}
+    </div>`;
+  }
+
+  private renderNestedName(
+    name: string,
+    entity: HassEntity,
+    hide?: TimePickerHideConfig
+  ): TemplateResult {
+    const icon = html`<state-badge
+      class="entity-icon"
+      .stateObj=${entity}
+      @action=${this.handleAction}
+      .actionHandler="${actionHandler({
+        hasHold: hasAction(this.config.hold_action),
+        hasDoubleClick: hasAction(this.config.double_tap_action),
+      })}"
+    ></state-badge>`;
+    const label = html`<div
+      class="entity-name-inside"
+      @action=${this.handleAction}
+      .actionHandler="${actionHandler({
+        hasHold: hasAction(this.config!.hold_action),
+        hasDoubleClick: hasAction(this.config.double_tap_action),
+      })}"
+    >
+      ${name}
+    </div>`;
+
+    const visibleElements = [
+      { element: icon, visible: !hide?.icon },
+      { element: label, visible: !hide?.name },
+    ]
+      .filter(({ visible }) => visible)
+      .map(({ element }) => element);
+
+    return html`${visibleElements}`;
+  }
+
   render(): TemplateResult | null {
     if (!this.entity) {
       return Partial.error('Entity not found', this.config);
@@ -109,17 +178,20 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
       );
     }
 
-    const { hour, minute } = this.entity!.attributes;
+    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);
-    this.time = new Time(hourInstance, minuteInstance, this.config.link_values);
+    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.hasNameInHeader ? Partial.headerName(this.name!) : ''}
+      <ha-card class=${classMap(this.haCardClass)}>
+        ${this.hasNameInHeader ? this.renderHeaderName(this.name!) : ''}
         <div class=${classMap(this.rowClass)}>
-          ${this.hasNameInside ? Partial.nestedName(this.name!, this.entity) : ''}
+          ${this.hasNameInside
+            ? this.renderNestedName(this.name!, this.entity, this.config.hide)
+            : ''}
 
           <div class=${classMap(this.contentClass)}>
             <time-unit
@@ -133,7 +205,14 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
               @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}
@@ -182,6 +261,11 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
     this.callHassService();
   }
 
+  private onSecondStepChange(event: CustomEvent): void {
+    this.time.secondStep(event.detail.direction);
+    this.callHassService();
+  }
+
   private callHassService(): Promise<void> {
     if (!this.hass) {
       throw new Error('Unable to update datetime');
@@ -201,6 +285,8 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
           var(--primary-color)
         );
 
+        --tpc-control-padding: var(--time-picker-control-padding, 8px);
+
         --tpc-icon-color: var(--time-picker-icon-color, var(--primary-text-color));
         --tpc-text-color: var(--time-picker-text-color, #fff);
         --tpc-accent-color: var(--time-picker-accent-color, var(--primary-color));
@@ -209,6 +295,16 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
         --tpc-border-radius: var(--time-picker-border-radius, var(--ha-card-border-radius, 4px));
       }
 
+      ha-card {
+        overflow: auto;
+      }
+
+      ha-card.embedded {
+        box-shadow: none;
+        border: none;
+        background: transparent;
+      }
+
       .time-picker-header {
         padding: 16px;
         color: var(--tpc-text-color);
@@ -219,6 +315,10 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
         text-align: center;
       }
 
+      .thin > .time-picker-header {
+        padding: 4px;
+      }
+
       .time-picker-row {
         display: flex;
         flex-direction: row;
@@ -226,6 +326,14 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
         padding: 16px;
       }
 
+      .thin .time-picker-row {
+        padding: 0 !important ;
+      }
+
+      .time-picker-row.embedded {
+        padding: 0;
+      }
+
       .time-picker-row.with-header-name {
         padding: 8px 16px 16px;
       }
@@ -249,8 +357,13 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
         justify-content: flex-end;
       }
 
+      .entity-icon {
+        cursor: pointer;
+      }
+
       .entity-name-inside {
         margin-left: 16px;
+        cursor: pointer;
       }
     `;
   }
@@ -262,10 +375,18 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
     const datetimeEntity = entities.find((entityId) => computeDomain(entityId) === ENTITY_DOMAIN);
 
     return {
-      entity: datetimeEntity || 'input_datetime.example_entity',
-      hour_mode: 24,
-      hour_step: 1,
-      minute_step: 5,
+      entity: datetimeEntity || '',
+      hour_mode: DEFAULT_HOUR_MODE,
+      hour_step: DEFAULT_HOUR_STEP,
+      minute_step: DEFAULT_MINUTE_STEP,
+      layout: {
+        hour_mode: DEFAULT_LAYOUT_HOUR_MODE,
+        align_controls: DEFAULT_LAYOUT_ALIGN_CONTROLS,
+        name: DEFAULT_LAYOUT_NAME,
+      },
+      hide: {
+        seconds: true,
+      },
     };
   }
 

src/types.ts

@@ -1,4 +1,4 @@
-import { LovelaceCardConfig } from 'custom-card-helpers';
+import { ActionConfig, LovelaceCardConfig } from 'custom-card-helpers';
 
 export interface TimePickerCardConfig extends LovelaceCardConfig {
   entity: string;
@@ -7,8 +7,12 @@ export interface TimePickerCardConfig extends LovelaceCardConfig {
   hour_mode?: HourMode;
   hour_step?: number;
   minute_step?: number;
+  second_step?: number;
   layout?: TimePickerLayoutConfig;
   hide?: TimePickerHideConfig;
+  tap_action?: ActionConfig;
+  double_tap_action?: ActionConfig;
+  hold_action?: ActionConfig;
 }
 
 export type HourMode = 12 | 24 | undefined;
@@ -17,6 +21,8 @@ export interface TimePickerLayoutConfig {
   align_controls?: Layout.AlignControls;
   name?: Layout.Name;
   hour_mode?: Layout.HourMode;
+  embedded?: boolean;
+  thin?: boolean;
 }
 
 export namespace Layout {
@@ -36,6 +42,8 @@ export namespace Layout {
 
 export interface TimePickerHideConfig {
   name?: boolean;
+  icon?: boolean;
+  seconds?: boolean;
 }
 
 export enum Direction {

test/components/test-error-card.ts

@@ -1,17 +0,0 @@
-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;
-  }
-}

test/components/time-picker-card.test.ts

@@ -1,111 +0,0 @@
-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);
-    });
-  });
-});

test/karma.conf.js

@@ -1,45 +0,0 @@
-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,
-    },
-  });
-};

test/models/hour.test.ts

@@ -1,165 +1,164 @@
 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', () => {
+  describe('with default config', () => {
     beforeEach(() => {
       hour = new Hour(2);
     });
 
     it('returns value', () => {
-      expect(hour.value).to.equal(2);
+      expect(hour.value).toEqual(2);
     });
 
     it('has correct max value', () => {
-      expect(hour.maxValue).to.equal(23);
+      expect(hour.maxValue).toEqual(23);
     });
 
     describe('toString', () => {
       it('returns formatted string', () => {
-        expect(hour.toString()).to.equal('02');
+        expect(hour.toString()).toEqual('02');
       });
 
       it('renders values correctly', () => {
         hour = new Hour(0);
-        expect(hour.toString()).to.equal('00');
+        expect(hour.toString()).toEqual('00');
 
         hour = new Hour(6);
-        expect(hour.toString()).to.equal('06');
+        expect(hour.toString()).toEqual('06');
 
         hour = new Hour(12);
-        expect(hour.toString()).to.equal('12');
+        expect(hour.toString()).toEqual('12');
 
         hour = new Hour(18);
-        expect(hour.toString()).to.equal('18');
+        expect(hour.toString()).toEqual('18');
 
         hour = new Hour(23);
-        expect(hour.toString()).to.equal('23');
+        expect(hour.toString()).toEqual('23');
       });
     });
 
     describe('stepUpdate', () => {
       it('updates up', () => {
         hour.stepUpdate(Direction.UP);
-        expect(hour.value).to.equal(3);
+        expect(hour.value).toEqual(3);
       });
 
       it('updates down', () => {
         hour.stepUpdate(Direction.DOWN);
-        expect(hour.value).to.equal(1);
+        expect(hour.value).toEqual(1);
       });
 
       it('goes up from 23 to 0', () => {
         hour = new Hour(23);
         hour.stepUpdate(Direction.UP);
-        expect(hour.value).to.equal(0);
+        expect(hour.value).toEqual(0);
       });
 
       it('goes down from 0 to 23', () => {
         hour = new Hour(0);
         hour.stepUpdate(Direction.DOWN);
-        expect(hour.value).to.equal(23);
+        expect(hour.value).toEqual(23);
       });
     });
 
     describe('setStringValue', () => {
       it('sets value from valid string', () => {
         hour.setStringValue('3');
-        expect(hour.value).to.equal(3);
+        expect(hour.value).toEqual(3);
       });
 
       it("doesn't set value from invalid string", () => {
         hour.setStringValue('test');
-        expect(hour.value).to.equal(2);
+        expect(hour.value).toEqual(2);
       });
 
       it("doesn't set value from outside of scope", () => {
         hour.setStringValue('24');
-        expect(hour.value).to.equal(2);
+        expect(hour.value).toEqual(2);
       });
     });
   });
 
-  context('with a different step size', () => {
+  describe('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);
+      expect(hour.value).toEqual(7);
 
       hour.stepUpdate(Direction.UP);
       hour.stepUpdate(Direction.UP);
       hour.stepUpdate(Direction.UP);
       hour.stepUpdate(Direction.UP);
 
-      expect(hour.value).to.equal(3);
+      expect(hour.value).toEqual(3);
     });
 
     it('goes down correclty', () => {
       hour.stepUpdate(Direction.DOWN);
-      expect(hour.value).to.equal(21);
+      expect(hour.value).toEqual(21);
     });
   });
 
-  context('in 12 hour mode', () => {
+  describe('in 12 hour mode', () => {
     beforeEach(() => {
       hour = new Hour(2, DEFAULT_HOUR_STEP, 12);
     });
 
     it('has correct max value', () => {
-      expect(hour.maxValue).to.equal(12);
+      expect(hour.maxValue).toEqual(12);
     });
 
     describe('togglePeriod', () => {
       it('changes values correclty', () => {
         hour = new Hour(2, DEFAULT_HOUR_STEP, 12);
         hour.togglePeriod();
-        expect(hour.value).to.equal(14);
+        expect(hour.value).toEqual(14);
 
         hour = new Hour(0, DEFAULT_HOUR_STEP, 12);
         hour.togglePeriod();
-        expect(hour.value).to.equal(12);
+        expect(hour.value).toEqual(12);
 
         hour = new Hour(23, DEFAULT_HOUR_STEP, 12);
         hour.togglePeriod();
-        expect(hour.value).to.equal(11);
+        expect(hour.value).toEqual(11);
       });
 
       it('has no side effects', () => {
         const value = hour.value;
         hour.togglePeriod();
         hour.togglePeriod();
-        expect(hour.value).to.equal(value);
+        expect(hour.value).toEqual(value);
       });
     });
 
     describe('toString', () => {
       it('renders values above 12 orrectly', () => {
         hour = new Hour(13, DEFAULT_HOUR_STEP, 12);
-        expect(hour.toString()).to.equal('01');
+        expect(hour.toString()).toEqual('01');
       });
 
       it('renders values correctly', () => {
         hour = new Hour(0, DEFAULT_HOUR_STEP, 12);
-        expect(hour.toString()).to.equal('12');
+        expect(hour.toString()).toEqual('12');
 
         hour = new Hour(6, DEFAULT_HOUR_STEP, 12);
-        expect(hour.toString()).to.equal('06');
+        expect(hour.toString()).toEqual('06');
 
         hour = new Hour(12, DEFAULT_HOUR_STEP, 12);
-        expect(hour.toString()).to.equal('12');
+        expect(hour.toString()).toEqual('12');
 
         hour = new Hour(18, DEFAULT_HOUR_STEP, 12);
-        expect(hour.toString()).to.equal('06');
+        expect(hour.toString()).toEqual('06');
 
         hour = new Hour(23, DEFAULT_HOUR_STEP, 12);
-        expect(hour.toString()).to.equal('11');
+        expect(hour.toString()).toEqual('11');
       });
     });
   });

test/models/minute.test.ts

@@ -1,119 +1,118 @@
 import { Minute } from '../../src/models/minute';
 import { Direction } from '../../src/types';
-import { expect } from 'chai';
 
 describe('Minute', () => {
   let minute: Minute;
 
-  context('with default config', () => {
+  describe('with default config', () => {
     beforeEach(() => {
       minute = new Minute(2);
     });
 
     it('returns value', () => {
-      expect(minute.value).to.equal(2);
+      expect(minute.value).toEqual(2);
     });
 
     it('has correct max value', () => {
-      expect(minute.maxValue).to.equal(59);
+      expect(minute.maxValue).toEqual(59);
     });
 
     describe('toString', () => {
       it('renders values correctly', () => {
         minute = new Minute(0);
-        expect(minute.toString()).to.equal('00');
+        expect(minute.toString()).toEqual('00');
 
         minute = new Minute(5);
-        expect(minute.toString()).to.equal('05');
+        expect(minute.toString()).toEqual('05');
 
         minute = new Minute(59);
-        expect(minute.toString()).to.equal('59');
+        expect(minute.toString()).toEqual('59');
       });
     });
 
     describe('stepUpdate', () => {
       it('updates up', () => {
         minute.stepUpdate(Direction.UP);
-        expect(minute.value).to.equal(7);
+        expect(minute.value).toEqual(7);
       });
 
       it('updates down', () => {
         minute.stepUpdate(Direction.DOWN);
-        expect(minute.value).to.equal(57);
+        expect(minute.value).toEqual(57);
       });
 
       it('goes up from 59 to 4', () => {
         minute = new Minute(59);
         minute.stepUpdate(Direction.UP);
-        expect(minute.value).to.equal(4);
+        expect(minute.value).toEqual(4);
       });
 
       it('goes down from 0 to 55', () => {
         minute = new Minute(0);
         minute.stepUpdate(Direction.DOWN);
-        expect(minute.value).to.equal(55);
+        expect(minute.value).toEqual(55);
       });
     });
 
     describe('setStringValue', () => {
       it('sets value from valid string', () => {
         minute.setStringValue('3');
-        expect(minute.value).to.equal(3);
+        expect(minute.value).toEqual(3);
       });
 
       it("doesn't set value from invalid string", () => {
         minute.setStringValue('test');
-        expect(minute.value).to.equal(2);
+        expect(minute.value).toEqual(2);
       });
 
       it("doesn't set value from outside of scope", () => {
         minute.setStringValue('60');
-        expect(minute.value).to.equal(2);
+        expect(minute.value).toEqual(2);
 
         minute.setStringValue('65');
-        expect(minute.value).to.equal(2);
+        expect(minute.value).toEqual(2);
       });
     });
   });
 
-  context('with a different step size', () => {
+  describe('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);
+      expect(minute.value).toEqual(17);
 
       minute.stepUpdate(Direction.UP);
       minute.stepUpdate(Direction.UP);
       minute.stepUpdate(Direction.UP);
-      expect(minute.value).to.equal(2);
+      expect(minute.value).toEqual(2);
 
       minute.stepUpdate(Direction.UP);
-      expect(minute.value).to.equal(17);
+      expect(minute.value).toEqual(17);
     });
 
     it('goes down correclty', () => {
       minute.stepUpdate(Direction.DOWN);
-      expect(minute.value).to.equal(47);
+      expect(minute.value).toEqual(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;
+      expect(minute.willOverflow(Direction.UP)).toBe(true);
     });
 
     it('returns true if the minutes will overflow an hour down', () => {
       minute.setStringValue('0');
-      expect(minute.willOverflow(Direction.DOWN)).to.be.true;
+      expect(minute.willOverflow(Direction.DOWN)).toBe(true);
     });
 
     it('returns true if the minutes will not overflow', () => {
       minute.setStringValue('55');
-      expect(minute.willOverflow(Direction.DOWN)).to.be.false;
+      expect(minute.willOverflow(Direction.DOWN)).toBe(false);
     });
   });
 });

test/models/second.test.ts

@@ -0,0 +1,118 @@
+import { Second } from '../../src/models/second';
+import { Direction } from '../../src/types';
+
+describe('Second', () => {
+  let second: Second;
+
+  describe('with default config', () => {
+    beforeEach(() => {
+      second = new Second(2);
+    });
+
+    it('returns value', () => {
+      expect(second.value).toEqual(2);
+    });
+
+    it('has correct max value', () => {
+      expect(second.maxValue).toEqual(59);
+    });
+
+    describe('toString', () => {
+      it('renders values correctly', () => {
+        second = new Second(0);
+        expect(second.toString()).toEqual('00');
+
+        second = new Second(5);
+        expect(second.toString()).toEqual('05');
+
+        second = new Second(59);
+        expect(second.toString()).toEqual('59');
+      });
+    });
+
+    describe('stepUpdate', () => {
+      it('updates up', () => {
+        second.stepUpdate(Direction.UP);
+        expect(second.value).toEqual(7);
+      });
+
+      it('updates down', () => {
+        second.stepUpdate(Direction.DOWN);
+        expect(second.value).toEqual(57);
+      });
+
+      it('goes up from 59 to 4', () => {
+        second = new Second(59);
+        second.stepUpdate(Direction.UP);
+        expect(second.value).toEqual(4);
+      });
+
+      it('goes down from 0 to 55', () => {
+        second = new Second(0);
+        second.stepUpdate(Direction.DOWN);
+        expect(second.value).toEqual(55);
+      });
+    });
+
+    describe('setStringValue', () => {
+      it('sets value from valid string', () => {
+        second.setStringValue('3');
+        expect(second.value).toEqual(3);
+      });
+
+      it("doesn't set value from invalid string", () => {
+        second.setStringValue('test');
+        expect(second.value).toEqual(2);
+      });
+
+      it("doesn't set value from outside of scope", () => {
+        second.setStringValue('60');
+        expect(second.value).toEqual(2);
+
+        second.setStringValue('65');
+        expect(second.value).toEqual(2);
+      });
+    });
+  });
+
+  describe('with a different step size', () => {
+    beforeEach(() => {
+      second = new Second(2, 15);
+    });
+
+    it('goes up correctly', () => {
+      second.stepUpdate(Direction.UP);
+      expect(second.value).toEqual(17);
+
+      second.stepUpdate(Direction.UP);
+      second.stepUpdate(Direction.UP);
+      second.stepUpdate(Direction.UP);
+      expect(second.value).toEqual(2);
+
+      second.stepUpdate(Direction.UP);
+      expect(second.value).toEqual(17);
+    });
+
+    it('goes down correclty', () => {
+      second.stepUpdate(Direction.DOWN);
+      expect(second.value).toEqual(47);
+    });
+  });
+
+  describe('will overflow', () => {
+    it('returns true if the Seconds will overflow an hour up', () => {
+      second.setStringValue('59');
+      expect(second.willOverflow(Direction.UP)).toBe(true);
+    });
+
+    it('returns true if the Seconds will overflow an hour down', () => {
+      second.setStringValue('0');
+      expect(second.willOverflow(Direction.DOWN)).toBe(true);
+    });
+
+    it('returns true if the Seconds will not overflow', () => {
+      second.setStringValue('55');
+      expect(second.willOverflow(Direction.DOWN)).toBe(false);
+    });
+  });
+});