Add feature

README.md

@@ -68,6 +68,7 @@ resources:
     - `names` _boolean_
     - `icons` _boolean_
     - `headings` _boolean_
+  - `disstep` _boolean_: If true disable step button up/down
   - `sensors`: _object_
     - `type`: _list|table_: How to render the sensors
     - `labels`: _boolean_: Whether to show labels/headings or not. Hiding here overrides hiding under root level `sensors` config
@@ -86,12 +87,15 @@ resources:
   - `temperature`: _bool_ (Default to `false`)
   - `state`: _bool_ (Default to `false`)
 - `control` _object|array_ (From 0.27)
+
   - `hvac|fan|preset|swing` _object|bool_: The key of the mode type (hvac, preset, fan, swing)
     - `_name` _string_: Override the name of the mode type
     - `_hide_when_off` _bool_: Hides the mode type selection row when the entity is off. Defaults to false shown
     - `{mode}` _string_: Name of mode type to control
       - `name` _string|bool_: Specify a custom name or set to `false` to show only the icon
       - `icon` _string|bool_: Specify a custom icon or set to `false` to not show icon
+      - `order`: _number_: Order of the control in the list. If not set, show default order.
+
 - `sensors` _array|false_
   - `entity` _string_: A sensor value entity id
   - `name` _string_: Specify a sensor name to use instead of the default friendly_name

src/components/modeType.ts

@@ -20,6 +20,9 @@ export default function renderModeType({
   if (list.length === 0 || (hide_when_off && state === HVAC_MODES.OFF)) {
     return null
   }
+  const sortedList = list.some((item) => item.hasOwnProperty('order'))
+    ? [...list].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+    : list
 
   let localizePrefix = `state_attributes.climate.${type}_mode.`
   if (type === 'hvac') {
@@ -44,7 +47,7 @@ export default function renderModeType({
   return html`
     <div class="modes ${headings ? 'heading' : ''}">
       ${headings ? html` <div class="mode-title">${title}</div> ` : ''}
-      ${list.map(
+      ${sortedList.map(
         ({ value, icon, name }) => html`
           <div
             class="mode-item ${value === mode ? 'active ' + mode : ''}"

src/config/card.ts

@@ -61,6 +61,7 @@ interface CardConfig {
       labels: boolean
     }
     step: 'row' | 'column'
+    disstep: boolean
   }
   unit?: boolean | string
   fallback?: string

src/main.ts

@@ -376,6 +376,7 @@ export default class SimpleThermostat extends LitElement {
     const unit = this.getUnit()
 
     const stepLayout = this.config?.layout?.step ?? 'column'
+    const disstep = this.config?.layout?.disstep ?? false
     const row = stepLayout === 'row'
 
     const classes = [!this.header && 'no-header', action].filter((cx) => !!cx)
@@ -426,7 +427,7 @@ export default class SimpleThermostat extends LitElement {
             return html`
               <div class="current-wrapper ${stepLayout}">
                 <ha-icon-button
-                  ?disabled=${maxTemp !== null && value >= maxTemp}
+                  ?disabled=${(maxTemp !== null && value >= maxTemp) || disstep}
                   class="thermostat-trigger"
                   icon=${row ? ICONS.PLUS : ICONS.UP}
                   @click="${() => this.setTemperature(this.stepSize, field)}"
@@ -446,7 +447,7 @@ export default class SimpleThermostat extends LitElement {
                     : nothing}
                 </h3>
                 <ha-icon-button
-                  ?disabled=${minTemp !== null && value <= minTemp}
+                  ?disabled=${(minTemp !== null && value <= minTemp) || disstep}
                   class="thermostat-trigger"
                   icon=${row ? ICONS.MINUS : ICONS.DOWN}
                   @click="${() => this.setTemperature(-this.stepSize, field)}"

src/types.ts

@@ -53,6 +53,7 @@ export interface ControlModeOption {
   value: string
   name: string
   icon: string
+  order: number
 }
 export interface ControlMode {
   type: string