((mode) => ({
+ value: mode,
+ label: this.hass!.formatEntityAttributeValue(
+ this.stateObj!,
+ "preset_mode",
+ mode
+ ),
+ path: computePresetModeIcon(mode),
+ }));
+
+ if (this._config.style === "icons") {
+ return html`
+
+
+
+
+ `;
+ }
+
return html`
- ${stateObj.attributes.preset_modes?.map(
- (mode) => html`
-
-
- ${this.hass!.formatEntityAttributeValue(
- stateObj,
- "preset_mode",
- mode
- )}
+ ${options.map(
+ (option) => html`
+
+
+ ${option.label}
`
)}
@@ -157,6 +193,13 @@ class HuiClimatePresetModeTileFeature
display: block;
width: 100%;
}
+ ha-control-select {
+ --control-select-color: var(--tile-color);
+ --control-select-padding: 0;
+ --control-select-thickness: 40px;
+ --control-select-border-radius: 10px;
+ --control-select-button-border-radius: 10px;
+ }
.container {
padding: 0 12px 12px 12px;
width: auto;
diff --git a/src/panels/lovelace/tile-features/types.ts b/src/panels/lovelace/tile-features/types.ts
index 6f103b604011..981cfd1d6d36 100644
--- a/src/panels/lovelace/tile-features/types.ts
+++ b/src/panels/lovelace/tile-features/types.ts
@@ -42,6 +42,7 @@ export interface ClimateHvacModesTileFeatureConfig {
export interface ClimatePresetModesTileFeatureConfig {
type: "climate-preset-modes";
+ style?: "dropdown" | "icons";
}
export interface SelectOptionsTileFeatureConfig {
diff --git a/src/translations/en.json b/src/translations/en.json
index ce8d3b062c5c..533369f88b93 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -5039,7 +5039,12 @@
"hvac_modes": "HVAC modes"
},
"climate-preset-modes": {
- "label": "Climate preset modes"
+ "label": "Climate preset modes",
+ "style": "Style",
+ "style_list": {
+ "dropdown": "Dropdown",
+ "icons": "Icons"
+ }
},
"target-temperature": {
"label": "Target temperature"
@@ -5142,7 +5147,8 @@
"types": {
"header": "Header editor",
"footer": "Footer editor",
- "row": "Entity row editor"
+ "row": "Entity row editor",
+ "tile-feature": "Tile feature editor"
}
}
},