fix(light): fix light brightness adjustment buttons after HA update (#746)

Take into account the new "supported_color_modes" attributes when
checking if light supports brightness adjustment.

Fixes #743

Author: rchl

scripts/directives/tile.html

@@ -142,19 +142,11 @@
 
    <div ng-if="item.type === TYPES.LIGHT" class="item-entity-container">
       <div ng-if="!item.controlsEnabled">
-         <div ng-if="entity.state === 'on'">
-            <div
-               ng-if="supportsFeature(FEATURES.LIGHT.BRIGHTNESS, entity)"
-               class="item-button -center-right"
-               ng-click="increaseBrightness($event, item, entity)"
-            >
+         <div ng-if="entity.state === 'on' && FEATURES.LIGHT.supportsBrightness(entity)">
+            <div class="item-button -center-right" ng-click="increaseBrightness($event, item, entity)">
                <i class="mdi mdi-plus"></i>
             </div>
-            <div
-               ng-if="supportsFeature(FEATURES.LIGHT.BRIGHTNESS, entity)"
-               class="item-button -bottom-right"
-               ng-click="decreaseBrightness($event, item, entity)"
-            >
+            <div class="item-button -bottom-right" ng-click="decreaseBrightness($event, item, entity)">
                <i class="mdi mdi-minus"></i>
             </div>
          </div>

scripts/globals/constants.js

@@ -95,6 +95,32 @@ export const FEATURES = {
       COLOR: 16,
       TRANSITION: 32,
       WHITE_VALUE: 128,
+      COLOR_MODES_BRIGHTNESS: ['brightness', 'color_temp', 'hs', 'xy', 'rgb', 'rgbw', 'rgbww', 'white'],
+      supportsBrightness (entity) {
+         const { attributes } = entity;
+         let { supported_color_modes: supportedColorModes } = attributes;
+         const { supported_features: supportedFeatures } = attributes;
+
+         if (supportedColorModes === undefined) {
+            // Backwards compatibility for supported_color_modes added in 2021.4
+            supportedColorModes = [];
+
+            if (supportedFeatures & FEATURES.LIGHT.COLOR_TEMP) {
+               supportedColorModes.push('color_temp');
+            }
+            if (supportedFeatures & FEATURES.LIGHT.COLOR) {
+               supportedColorModes.push('hs');
+            }
+            if (supportedFeatures & FEATURES.LIGHT.WHITE_VALUE) {
+               supportedColorModes.push('rgbw');
+            }
+            if (supportedFeatures & FEATURES.LIGHT.BRIGHTNESS && supportedColorModes.length === 0) {
+               supportedColorModes = ['brightness'];
+            }
+         }
+
+         return supportedColorModes.some(mode => FEATURES.LIGHT.COLOR_MODES_BRIGHTNESS.includes(mode));
+      },
    },
    MEDIA_PLAYER: {
       PAUSE: 1,