-
- ${Array(this.rows * this.columns)
+
+
+ ${Array(this.rows)
.fill(0)
.map((_, index) => {
- const row = Math.floor(index / this.columns) + 1;
- const column = (index % this.columns) + 1;
+ const row = index + 1;
return html`
-
+
+ ${Array(this.columns)
+ .fill(0)
+ .map((__, columnIndex) => {
+ const column = columnIndex + 1;
+ if (
+ column % this.step !== 0 ||
+ (this.columns > 24 && column % 3 !== 0)
+ ) {
+ return nothing;
+ }
+ return html`
+ |
+ `;
+ })}
+
`;
})}
-
-
+
+
`;
@@ -223,42 +237,40 @@ export class HaGridSizeEditor extends LitElement {
}
.reset {
grid-area: reset;
+ --mdc-icon-button-size: 36px;
}
.preview {
position: relative;
grid-area: preview;
}
- .preview > div {
- position: relative;
- display: grid;
- grid-template-columns: repeat(var(--total-columns), 1fr);
- grid-template-rows: repeat(var(--total-rows), 25px);
- gap: 4px;
+ .preview table,
+ .preview tr,
+ .preview td {
+ border: 2px dotted var(--divider-color);
+ border-collapse: collapse;
}
- .preview .cell {
- background-color: var(--disabled-color);
- grid-column: span 1;
- grid-row: span 1;
- border-radius: 4px;
- opacity: 0.2;
- cursor: pointer;
- }
- .preview .selected {
- position: absolute;
- pointer-events: none;
- top: 0;
- left: 0;
- height: 100%;
+ .preview table {
width: 100%;
}
- .selected .cell {
- background-color: var(--primary-color);
- grid-column: 1 / span min(var(--columns, 0), var(--total-columns));
- grid-row: 1 / span min(var(--rows, 0), var(--total-rows));
- opacity: 0.5;
+ .preview tr {
+ height: 30px;
}
- .preview.full-width .selected .cell {
- grid-column: 1 / -1;
+ .preview td {
+ cursor: pointer;
+ }
+ .preview-card {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-color: var(--primary-color);
+ opacity: 0.3;
+ border-radius: 8px;
+ height: calc(var(--rows, 1) * 30px);
+ width: calc(var(--columns, 1) * 100% / var(--total-columns, 12));
+ pointer-events: none;
+ transition:
+ width ease-in-out 180ms,
+ height ease-in-out 180ms;
}
`,
];
diff --git a/src/components/ha-label.ts b/src/components/ha-label.ts
index 668f28017e..1b15d914ed 100644
--- a/src/components/ha-label.ts
+++ b/src/components/ha-label.ts
@@ -26,6 +26,7 @@ class HaLabel extends LitElement {
0.15
);
--ha-label-background-opacity: 1;
+ border: 1px solid var(--outline-color);
position: relative;
box-sizing: border-box;
display: inline-flex;
diff --git a/src/data/automation_i18n.ts b/src/data/automation_i18n.ts
index 5f8b9eb95c..2651f71246 100644
--- a/src/data/automation_i18n.ts
+++ b/src/data/automation_i18n.ts
@@ -1,6 +1,9 @@
import type { HassConfig } from "home-assistant-js-websocket";
import { ensureArray } from "../common/array/ensure-array";
-import { formatDuration } from "../common/datetime/format_duration";
+import {
+ formatDuration,
+ formatDurationLong,
+} from "../common/datetime/format_duration";
import {
formatTime,
formatTimeWithSeconds,
@@ -720,6 +723,38 @@ const tryDescribeTrigger = (
}`;
}
+ // Calendar Trigger
+ if (trigger.trigger === "calendar") {
+ const calendarEntity = hass.states[trigger.entity_id]
+ ? computeStateName(hass.states[trigger.entity_id])
+ : trigger.entity_id;
+
+ let offsetChoice = trigger.offset.startsWith("-") ? "before" : "after";
+ let offset: string | string[] = trigger.offset.startsWith("-")
+ ? trigger.offset.substring(1).split(":")
+ : trigger.offset.split(":");
+ const duration = {
+ hours: offset.length > 0 ? +offset[0] : 0,
+ minutes: offset.length > 1 ? +offset[1] : 0,
+ seconds: offset.length > 2 ? +offset[2] : 0,
+ };
+ offset = formatDurationLong(hass.locale, duration);
+ if (offset === "") {
+ offsetChoice = "other";
+ }
+
+ return hass.localize(
+ `${triggerTranslationBaseKey}.calendar.description.full`,
+ {
+ eventChoice: trigger.event,
+ offsetChoice: offsetChoice,
+ offset: offset,
+ hasCalendar: trigger.entity_id ? "true" : "false",
+ calendar: calendarEntity,
+ }
+ );
+ }
+
return (
hass.localize(
`ui.panel.config.automation.editor.triggers.type.${trigger.trigger}.label`
diff --git a/src/panels/config/helpers/forms/dialog-schedule-block-info.ts b/src/panels/config/helpers/forms/dialog-schedule-block-info.ts
index 7063e57ab2..b4815eec10 100644
--- a/src/panels/config/helpers/forms/dialog-schedule-block-info.ts
+++ b/src/panels/config/helpers/forms/dialog-schedule-block-info.ts
@@ -1,5 +1,6 @@
import type { CSSResultGroup } from "lit";
import { html, LitElement, nothing } from "lit";
+import memoizeOne from "memoize-one";
import { property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import { createCloseHeading } from "../../../../components/ha-dialog";
@@ -13,19 +14,6 @@ import type {
} from "./show-dialog-schedule-block-info";
import type { SchemaUnion } from "../../../../components/ha-form/types";
-const SCHEMA = [
- {
- name: "from",
- required: true,
- selector: { time: { no_second: true } },
- },
- {
- name: "to",
- required: true,
- selector: { time: { no_second: true } },
- },
-];
-
class DialogScheduleBlockInfo extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@@ -35,10 +23,39 @@ class DialogScheduleBlockInfo extends LitElement {
@state() private _params?: ScheduleBlockInfoDialogParams;
+ private _expand = false;
+
+ private _schema = memoizeOne((expand: boolean) => [
+ {
+ name: "from",
+ required: true,
+ selector: { time: { no_second: true } },
+ },
+ {
+ name: "to",
+ required: true,
+ selector: { time: { no_second: true } },
+ },
+ {
+ name: "advanced_settings",
+ type: "expandable" as const,
+ flatten: true,
+ expanded: expand,
+ schema: [
+ {
+ name: "data",
+ required: false,
+ selector: { object: {} },
+ },
+ ],
+ },
+ ]);
+
public showDialog(params: ScheduleBlockInfoDialogParams): void {
this._params = params;
this._error = undefined;
this._data = params.block;
+ this._expand = !!params.block?.data;
}
public closeDialog(): void {
@@ -66,7 +83,7 @@ class DialogScheduleBlockInfo extends LitElement {
) => {
+ private _computeLabelCallback = (
+ schema: SchemaUnion>
+ ) => {
switch (schema.name) {
case "from":
return this.hass!.localize("ui.dialogs.helper_settings.schedule.start");
case "to":
return this.hass!.localize("ui.dialogs.helper_settings.schedule.end");
+ case "data":
+ return this.hass!.localize("ui.dialogs.helper_settings.schedule.data");
+ case "advanced_settings":
+ return this.hass!.localize(
+ "ui.dialogs.helper_settings.schedule.advanced_settings"
+ );
}
return "";
};
diff --git a/src/panels/config/helpers/forms/show-dialog-schedule-block-info.ts b/src/panels/config/helpers/forms/show-dialog-schedule-block-info.ts
index 14a5909592..0a95789f86 100644
--- a/src/panels/config/helpers/forms/show-dialog-schedule-block-info.ts
+++ b/src/panels/config/helpers/forms/show-dialog-schedule-block-info.ts
@@ -3,6 +3,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
export interface ScheduleBlockInfo {
from: string;
to: string;
+ data?: Record;
}
export interface ScheduleBlockInfoDialogParams {
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-color-switch.ts b/src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-color-switch.ts
index d7facea8ac..69ee23b3f1 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-color-switch.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-color-switch.ts
@@ -8,6 +8,18 @@ import "../../../../../../components/ha-circular-progress";
import { extractApiErrorMessage } from "../../../../../../data/hassio/common";
import "./zwave_js-capability-control-multilevel-switch";
+enum ColorComponent {
+ "Warm White" = 0,
+ "Cold White",
+ Red,
+ Green,
+ Blue,
+ Amber,
+ Cyan,
+ Purple,
+ Index,
+}
+
@customElement("zwave_js-capability-control-color_switch")
class ZWaveJSCapabilityColorSwitch extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@@ -20,7 +32,7 @@ class ZWaveJSCapabilityColorSwitch extends LitElement {
@property({ type: Number }) public version!: number;
- @state() private _color_components?: number[];
+ @state() private _color_components?: ColorComponent[];
@state() private _error?: string;
@@ -37,7 +49,9 @@ class ZWaveJSCapabilityColorSwitch extends LitElement {
${this.hass.localize(
"ui.panel.config.zwave_js.node_installer.capability_controls.color_switch.color_component"
)}:
- ${color}
+ ${this.hass.localize(
+ `ui.panel.config.zwave_js.node_installer.capability_controls.color_switch.colors.${color}`
+ )}
= {};
@state() private _error?: string;
@@ -183,17 +187,19 @@ class ZWaveJSNodeConfig extends LitElement {
`
)}
-
-
- ${this.hass.localize(
- "ui.panel.config.zwave_js.node_config.reset_to_default.button_label"
- )}
-
-
+ ${this._canResetAll
+ ? html`
+
+ ${this.hass.localize(
+ "ui.panel.config.zwave_js.node_config.reset_to_default.button_label"
+ )}
+
+
`
+ : nothing}
${this.hass.localize(
"ui.panel.config.zwave_js.node_config.custom_config"
@@ -468,10 +474,19 @@ class ZWaveJSNodeConfig extends LitElement {
return;
}
- [this._nodeMetadata, this._config] = await Promise.all([
+ let capabilities: ZWaveJSNodeCapabilities | undefined;
+ [this._nodeMetadata, this._config, capabilities] = await Promise.all([
fetchZwaveNodeMetadata(this.hass, device.id),
fetchZwaveNodeConfigParameters(this.hass, device.id),
+ fetchZwaveNodeCapabilities(this.hass, device.id),
]);
+ this._canResetAll =
+ capabilities &&
+ Object.values(capabilities).some((endpoint) =>
+ endpoint.some(
+ (capability) => capability.id === 0x70 && capability.version >= 4
+ )
+ );
}
private async _openResetDialog(event: Event) {
diff --git a/src/panels/config/labels/ha-config-labels.ts b/src/panels/config/labels/ha-config-labels.ts
index 1d974bb7a5..2e52ddb663 100644
--- a/src/panels/config/labels/ha-config-labels.ts
+++ b/src/panels/config/labels/ha-config-labels.ts
@@ -106,7 +106,8 @@ export class HaConfigLabels extends LitElement {
style="
background-color: ${computeCssColor(label.color)};
border-radius: 10px;
- outline: 1px solid var(--outline-color);
+ border: 1px solid var(--outline-color);
+ box-sizing: border-box;
width: 20px;
height: 20px;"
>