Merge remote-tracking branch 'upstream'

.hass_dev/configuration.yaml

@@ -14,4 +14,6 @@ lovelace: !include lovelace.yaml
 
 frontend:
   themes: !include_dir_merge_named themes
+  extra_module_url:
+    - http://localhost:4000/mushroom.js
 #   development_repo: /workspaces/home-assistant-frontend

.hass_dev/lovelace-mushroom-showcase.yaml

@@ -14,4 +14,5 @@ views:
   - !include views/vacuum-view.yaml
   - !include views/lock-view.yaml
   - !include views/humidifier-view.yaml
-  - !include views/select-view.yaml
+  - !include views/select-view.yaml
+  - !include views/number-view.yaml

.hass_dev/packages/number.yaml

@@ -0,0 +1,32 @@
+input_number:
+  percentage:
+    name: Percentage
+    initial: 30
+    min: 0
+    max: 100
+    step: 0.5
+
+template:
+  - number: 
+      - name: Percentage
+        unique_id: percentage_number
+        step: 0.5
+        min: 0
+        max: 100
+        step: 0.5
+        state: "{{ states('input_number.percentage') }}"
+        set_value: 
+          service: input_number.set_value
+          target:
+            entity_id: input_number.percentage
+          data:
+            value: "{{ value }}"
+
+homeassistant:
+  customize:
+    input_number.percentage:
+      friendly_name: Percentage Input Number
+      unit_of_measurement: "%"
+    number.percentage:
+      friendly_name: Percentage Number
+      unit_of_measurement: "%"

.hass_dev/views/humidifier-view.yaml

@@ -59,13 +59,16 @@ cards:
         cards:
           - type: custom:mushroom-humidifier-card
             entity: humidifier.humidifier
+            show_target_humidity_control: true
       - type: grid
         columns: 2
         square: false
         cards:
           - type: custom:mushroom-humidifier-card
             entity: humidifier.humidifier
             layout: "vertical"
+            show_target_humidity_control: true
       - type: custom:mushroom-humidifier-card
         entity: humidifier.humidifier
-        layout: "horizontal"
+        layout: "horizontal"
+        show_target_humidity_control: true

.hass_dev/views/number-view.yaml

@@ -0,0 +1,68 @@
+title: Number
+icon: mdi:numeric
+cards:
+  - type: grid
+    title: Basic
+    cards:
+      - type: custom:mushroom-number-card
+        entity: input_number.percentage
+      - type: custom:mushroom-number-card
+        entity: input_number.percentage
+        name: Custom name and icon
+        icon: mdi:robot-outline
+    columns: 2
+    square: false
+  - type: grid
+    title: Infos
+    cards:
+      - type: custom:mushroom-number-card
+        entity: input_number.percentage
+        primary_info: state
+        secondary_info: name
+      - type: custom:mushroom-number-card
+        entity: input_number.percentage
+        primary_info: name
+        secondary_info: last-changed
+      - type: custom:mushroom-number-card
+        entity: input_number.percentage
+        primary_info: name
+        secondary_info: last-updated
+      - type: custom:mushroom-number-card
+        entity: input_number.percentage
+        primary_info: name
+        secondary_info: none
+      - type: custom:mushroom-number-card
+        entity: input_number.percentage
+        icon_type: none
+    columns: 2
+    square: false
+  - type: grid
+    title: Icon colors
+    cards:
+      - type: custom:mushroom-number-card
+        entity: input_number.percentage
+        icon_color: red
+      - type: custom:mushroom-number-card
+        entity: input_number.percentage
+        icon_color: green
+    columns: 2
+    square: false
+  - type: vertical-stack
+    title: Layout
+    cards:
+      - type: grid
+        columns: 2
+        square: false
+        cards:
+          - type: custom:mushroom-number-card
+            entity: input_number.percentage
+      - type: grid
+        columns: 2
+        square: false
+        cards:
+          - type: custom:mushroom-number-card
+            entity: input_number.percentage
+            layout: "vertical"
+      - type: custom:mushroom-number-card
+        entity: input_number.percentage
+        layout: "horizontal"

.hass_dev/views/vacuum-view.yaml

@@ -69,9 +69,18 @@ cards:
         cards:
           - type: custom:mushroom-vacuum-card
             entity: vacuum.0_ground_floor
+            commands:
+              - start_pause
+              - stop
           - type: custom:mushroom-vacuum-card
             entity: vacuum.0_ground_floor
             layout: "vertical"
+            commands:
+              - start_pause
+              - stop
       - type: custom:mushroom-vacuum-card
         entity: vacuum.0_ground_floor
         layout: "horizontal"
+        commands:
+          - start_pause
+          - stop

README.md

@@ -12,15 +12,15 @@
 ## What is mushroom-better-sliders?
 This is a fork of the fantastic [Mushrooms UI Cards][original-repo] by piitaya, a collection of cards for [Home Assistant][home-assistant] Dashboard UI.
 
+> :warning: **This mod will not work, if you still have the original lovelace-mushroom installed**
+
 It focuses on making the sliders more touch friendly.
 
 1. Sliders move on reduced speed when dragged by a finger (easier to hit small values)
 2. Sliders can be dragged from any point on the slider (like in iOS Home)
 3. Sliders apply live changes to your devices (except turning them off)
 2. Explicitly makes it easier to hit 1%
 
-The original lovelace-mushroom has to be disabled for it to work.
-
 ## Installation
 
 ### HACS

docs/cards/alarm.md → docs/cards/alarm-control-panel.md

@@ -1,7 +1,7 @@
 # Alarm control panel card
 
-![Alarm light](../images/alarm-light.png)
-![Alarm dark](../images/alarm-dark.png)
+![Alarm control panel light](../images/alarm-control-panel-light.png)
+![Alarm control panel dark](../images/alarm-control-panel-dark.png)
 
 ## Description
 

docs/cards/number.md

@@ -0,0 +1,27 @@
+# Number
+
+![Entity light](../images/number-light.png)
+![Entity dark](../images/number-dark.png)
+
+## Description
+
+A number card allows you to control number and input_number entities.
+
+## Configuration variables
+
+All the options are available in the lovelace editor but you can use `yaml` if you want.
+
+| Name                | Type                                                | Default     | Description                                                                         |
+| :------------------ | :-------------------------------------------------- | :---------- | :---------------------------------------------------------------------------------- |
+| `entity`            | string                                              | Required    | Number or input_number Entity                                                       |
+| `icon`              | string                                              | Optional    | Custom icon                                                                         |
+| `icon_color`        | string                                              | `blue`      | Custom color for icon when entity state is active                                   |
+| `name`              | string                                              | Optional    | Custom name                                                                         |
+| `layout`            | string                                              | Optional    | Layout of the card. Vertical, horizontal and default layout are supported           |
+| `fill_container`    | boolean                                             | `false`     | Fill container or not. Useful when card is in a grid, vertical or horizontal layout |
+| `primary_info`      | `name` `state` `last-changed` `last-updated` `none` | `name`      | Info to show as primary info                                                        |
+| `secondary_info`    | `name` `state` `last-changed` `last-updated` `none` | `state`     | Info to show as secondary info                                                      |
+| `icon_type`         | `icon` `entity-picture` `none`                      | `icon`      | Type of icon to display                                                             |
+| `tap_action`        | action                                              | `more-info` | Home assistant action to perform on tap                                             |
+| `hold_action`       | action                                              | `more-info` | Home assistant action to perform on hold                                            |
+| `double_tap_action` | action                                              | `more-info` | Home assistant action to perform on double_tap                                      |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mushroom-cards-better-sliders",
-  "version": "2.5.3",
+  "version": "2.6.1",
   "description": "Home Assistant Mushroom Cards - With better slider touch support",
   "main": "index.js",
   "scripts": {
@@ -10,7 +10,11 @@
     "start:hass": "docker run --rm -p8123:8123 -v ${PWD}/.hass_dev:/config homeassistant/home-assistant:beta",
     "start:hass-cmd": "docker run --rm -p8123:8123 -v  %cd%/.hass_dev:/config homeassistant/home-assistant:beta"
   },
-  "author": "",
+  "author": "Paul Bottein",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/piitaya/lovelace-mushroom"
+  },
   "license": "ISC",
   "dependencies": {
     "@material/mwc-select": "^0.27.0",

src/cards/climate-card/climate-card.ts

@@ -251,15 +251,16 @@ export class ClimateCard extends MushroomBaseCard implements LovelaceCard {
     }
 
     private renderActiveControl(entity: ClimateEntity): TemplateResult | null {
-        const hvac_modes = this._config?.hvac_modes ?? [];
+        const hvac_modes = this._config!.hvac_modes ?? [];
+        const appearance = computeAppearance(this._config!);
 
         switch (this._activeControl) {
             case "temperature_control":
                 return html`
                     <mushroom-climate-temperature-control
                         .hass=${this.hass}
                         .entity=${entity}
-                        .fill=${true}
+                        .fill=${appearance.layout !== "horizontal"}
                     ></mushroom-climate-temperature-control>
                 `;
             case "hvac_mode_control":
@@ -268,7 +269,7 @@ export class ClimateCard extends MushroomBaseCard implements LovelaceCard {
                         .hass=${this.hass}
                         .entity=${entity}
                         .modes=${hvac_modes}
-                        .fill=${true}
+                        .fill=${appearance.layout !== "horizontal"}
                     ></mushroom-climate-hvac-modes-control>
                 `;
             default:

src/cards/cover-card/cover-card.ts

@@ -6,6 +6,7 @@ import { styleMap } from "lit/directives/style-map.js";
 import {
     actionHandler,
     ActionHandlerEvent,
+    blankBeforePercent,
     computeRTL,
     computeStateDisplay,
     CoverEntity,
@@ -14,7 +15,7 @@ import {
     HomeAssistant,
     isAvailable,
     LovelaceCard,
-    LovelaceCardEditor,
+    LovelaceCardEditor
 } from "../../ha";
 import "../../shared/badge-icon";
 import "../../shared/button";
@@ -167,7 +168,7 @@ export class CoverCard extends MushroomBaseCard implements LovelaceCard {
             this.hass.entities
         );
         if (this.position) {
-            stateDisplay += ` - ${this.position}%`;
+            stateDisplay += ` - ${this.position}${blankBeforePercent(this.hass.locale)}%`;
         }
 
         const rtl = computeRTL(this.hass);

src/cards/fan-card/fan-card.ts

@@ -6,6 +6,7 @@ import { styleMap } from "lit/directives/style-map.js";
 import {
     actionHandler,
     ActionHandlerEvent,
+    blankBeforePercent,
     computeRTL,
     computeStateDisplay,
     handleAction,
@@ -126,7 +127,7 @@ export class FanCard extends MushroomBaseCard implements LovelaceCard {
             this.hass.entities
         );
         if (this.percentage != null) {
-            stateDisplay = `${this.percentage}%`;
+            stateDisplay = `${this.percentage}${blankBeforePercent(this.hass.locale)}%`;
         }
 
         const rtl = computeRTL(this.hass);

src/cards/humidifier-card/humidifier-card.ts

@@ -4,6 +4,7 @@ import { classMap } from "lit/directives/class-map.js";
 import {
     actionHandler,
     ActionHandlerEvent,
+    blankBeforePercent,
     computeRTL,
     computeStateDisplay,
     handleAction,
@@ -108,7 +109,7 @@ export class HumidifierCard extends MushroomBaseCard implements LovelaceCard {
             this.hass.entities
         );
         if (this.humidity) {
-            stateDisplay = `${this.humidity} %`;
+            stateDisplay = `${this.humidity}${blankBeforePercent(this.hass.locale)}%`;
         }
 
         const rtl = computeRTL(this.hass);

src/cards/light-card/light-card.ts

@@ -5,6 +5,7 @@ import { styleMap } from "lit/directives/style-map.js";
 import {
     actionHandler,
     ActionHandlerEvent,
+    blankBeforePercent,
     computeRTL,
     computeStateDisplay,
     handleAction,
@@ -182,7 +183,7 @@ export class LightCard extends MushroomBaseCard implements LovelaceCard {
             this.hass.entities
         );
         if (this.brightness != null) {
-            stateDisplay = `${this.brightness}%`;
+            stateDisplay = `${this.brightness}${blankBeforePercent(this.hass.locale)}%`;
         }
 
         const rtl = computeRTL(this.hass);

src/cards/media-player-card/media-player-card.ts

@@ -4,6 +4,7 @@ import { classMap } from "lit/directives/class-map.js";
 import {
     actionHandler,
     ActionHandlerEvent,
+    blankBeforePercent,
     computeRTL,
     handleAction,
     hasAction,
@@ -174,7 +175,7 @@ export class MediaPlayerCard extends MushroomBaseCard implements LovelaceCard {
 
         const stateValue =
             this.volume != null && this._config.show_volume_level
-                ? `${stateDisplay} - ${this.volume}%`
+                ? `${stateDisplay} - ${this.volume}${blankBeforePercent(this.hass.locale)}%`
                 : stateDisplay;
 
         const rtl = computeRTL(this.hass);

src/cards/number-card/const.ts

@@ -0,0 +1,5 @@
+import { PREFIX_NAME } from "../../const";
+
+export const NUMBER_CARD_NAME = `${PREFIX_NAME}-number-card`;
+export const NUMBER_CARD_EDITOR_NAME = `${NUMBER_CARD_NAME}-editor`;
+export const NUMBER_ENTITY_DOMAINS = ["number", "input_number"];