- ${this.config.name&&this.config.name.trim()!==""?k`
+ ${this.config.name && this.config.name.trim() !== "" ? html`
- `:""}
+ ` : ""}
-
${d.t(o.condition)}
-
${o.temperature!=null?Math.round(o.temperature)+"°":d.t("no_data")}
- ${this.config.showMinTemp?k`
+
${i18n.t(weather.condition)}
+
${weather.temperature != null ? Math.round(weather.temperature) + "°" : i18n.t("no_data")}
+ ${this.config.showMinTemp ? html`
- ↓ ${o.templow!=null?`${Math.round(o.templow)}°`:d.t("no_data")}
+ ↓ ${weather.templow != null ? `${Math.round(weather.templow)}°` : i18n.t("no_data")}
- `:""}
- ${this.config.showFeelsLike?k`
-
${d.t("feels_like")} ${o.apparentTemperature!=null?`${Math.round(o.apparentTemperature)}°`:d.t("no_data")}
- `:""}
+ ` : ""}
+ ${this.config.showFeelsLike ? html`
+
${i18n.t("feels_like")} ${weather.apparentTemperature != null ? `${Math.round(weather.apparentTemperature)}°` : i18n.t("no_data")}
+ ` : ""}
-
- `}}w([t({type:Object})],Vo.prototype,"hass",void 0),w([t({type:Object})],Vo.prototype,"config",void 0);class Uo extends F{constructor(){super(...arguments);this._config={}}setConfig(o){this._config={name:"",height:e.height,show_feels_like:e.showFeelsLike,show_wind:e.showWind,show_wind_gust:e.showWindGust,show_wind_direction:e.showWindDirection,show_humidity:e.showHumidity,show_min_temp:e.showMinTemp,show_hourly_forecast:e.showHourlyForecast,hourly_forecast_hours:e.hourlyForecastHours,show_daily_forecast:e.showDailyForecast,daily_forecast_days:e.dailyForecastDays,show_sunrise_sunset:e.showSunriseSunset,show_clock:e.showClock,clock_position:e.clockPosition,clock_format:e.clockFormat,overlay_opacity:e.overlayOpacity,language:e.language,wind_speed_unit:e.windSpeedUnit,sunrise_entity:"",sunset_entity:"",...o}}updated(o){if(super.updated(o),o.has("hass")){let i=I({hassLang:this.hass?.language});if(d.lang!==i)d.setLanguage(i),this.requestUpdate()}}get _schema(){return[{name:"entity",required:!0,selector:{entity:{domain:["weather"]}}},{name:"name",selector:{text:{}}},{name:"height",selector:{number:{min:200,max:800,step:10,mode:"box"}}},{name:"show_feels_like",selector:{boolean:{}}},{name:"show_wind",selector:{boolean:{}}},{name:"show_wind_gust",selector:{boolean:{}}},{name:"show_wind_direction",selector:{boolean:{}}},{name:"show_humidity",selector:{boolean:{}}},{name:"show_min_temp",selector:{boolean:{}}},{name:"show_hourly_forecast",selector:{boolean:{}}},{name:"hourly_forecast_hours",selector:{number:{min:1,max:24,step:1,mode:"box"}}},{name:"show_daily_forecast",selector:{boolean:{}}},{name:"daily_forecast_days",selector:{number:{min:1,max:14,step:1,mode:"box"}}},{name:"show_sunrise_sunset",selector:{boolean:{}}},{name:"sunrise_entity",selector:{entity:{domain:["sensor"]}}},{name:"sunset_entity",selector:{entity:{domain:["sensor"]}}},{name:"show_clock",selector:{boolean:{}}},{name:"clock_position",selector:{select:{options:[{label:d.t("editor.clock_position_top"),value:"top"},{label:d.t("editor.clock_position_details"),value:"details"}]}}},{name:"clock_format",selector:{select:{options:[{label:d.t("editor.clock_format_24h"),value:"24h"},{label:d.t("editor.clock_format_12h"),value:"12h"}]}}},{name:"overlay_opacity",selector:{number:{min:0,max:1,step:0.05,mode:"box"}}},{name:"language",selector:{select:{options:[{label:d.t("editor.language_auto"),value:"auto"},{label:d.t("editor.language_en"),value:"en"},{label:d.t("editor.language_ru"),value:"ru"},{label:d.t("editor.language_de"),value:"de"},{label:d.t("editor.language_nl"),value:"nl"},{label:d.t("editor.language_fr"),value:"fr"},{label:d.t("editor.language_es"),value:"es"},{label:d.t("editor.language_it"),value:"it"},{label:d.t("editor.language_sk"),value:"sk"},{label:d.t("editor.language_hu"),value:"hu"}]}}},{name:"wind_speed_unit",selector:{select:{options:[{label:d.t("editor.wind_speed_unit_ms"),value:"ms"},{label:d.t("editor.wind_speed_unit_kmh"),value:"kmh"}]}}}]}_computeLabel=(o)=>{let i=`editor.${o.name}`,a=d.t(i);return a===i?o.name:a};_valueChanged(o){let i=o.detail?.value;if(!i)return;this._config=i,this.dispatchEvent(new CustomEvent("config-changed",{detail:{config:this._config},bubbles:!0,composed:!0}))}render(){if(!this.hass)return k``;return k`
+ `;
+ }
+}
+__legacyDecorateClassTS([
+ property({ type: Object })
+], AnimatedWeatherCard.prototype, "hass", undefined);
+__legacyDecorateClassTS([
+ property({ type: Object })
+], AnimatedWeatherCard.prototype, "config", undefined);
+
+// src/components/editor.ts
+class DynamicWeatherCardEditor extends LitElement {
+ constructor() {
+ super(...arguments);
+ this._config = {};
+ }
+ setConfig(config) {
+ this._config = {
+ name: "",
+ height: DEFAULT_CONFIG.height,
+ show_feels_like: DEFAULT_CONFIG.showFeelsLike,
+ show_wind: DEFAULT_CONFIG.showWind,
+ show_wind_gust: DEFAULT_CONFIG.showWindGust,
+ show_wind_direction: DEFAULT_CONFIG.showWindDirection,
+ show_humidity: DEFAULT_CONFIG.showHumidity,
+ show_min_temp: DEFAULT_CONFIG.showMinTemp,
+ show_hourly_forecast: DEFAULT_CONFIG.showHourlyForecast,
+ hourly_forecast_hours: DEFAULT_CONFIG.hourlyForecastHours,
+ show_daily_forecast: DEFAULT_CONFIG.showDailyForecast,
+ daily_forecast_days: DEFAULT_CONFIG.dailyForecastDays,
+ show_sunrise_sunset: DEFAULT_CONFIG.showSunriseSunset,
+ show_clock: DEFAULT_CONFIG.showClock,
+ clock_position: DEFAULT_CONFIG.clockPosition,
+ clock_format: DEFAULT_CONFIG.clockFormat,
+ overlay_opacity: DEFAULT_CONFIG.overlayOpacity,
+ language: DEFAULT_CONFIG.language,
+ wind_speed_unit: DEFAULT_CONFIG.windSpeedUnit,
+ sunrise_entity: "",
+ sunset_entity: "",
+ ...config
+ };
+ }
+ updated(changedProperties) {
+ super.updated(changedProperties);
+ if (changedProperties.has("hass")) {
+ const resolvedLang = resolveLanguage({ hassLang: this.hass?.language });
+ if (i18n.lang !== resolvedLang) {
+ i18n.setLanguage(resolvedLang);
+ this.requestUpdate();
+ }
+ }
+ }
+ get _schema() {
+ return [
+ { name: "entity", required: true, selector: { entity: { domain: ["weather"] } } },
+ { name: "name", selector: { text: {} } },
+ { name: "height", selector: { number: { min: 200, max: 800, step: 10, mode: "box" } } },
+ { name: "show_feels_like", selector: { boolean: {} } },
+ { name: "show_wind", selector: { boolean: {} } },
+ { name: "show_wind_gust", selector: { boolean: {} } },
+ { name: "show_wind_direction", selector: { boolean: {} } },
+ { name: "show_humidity", selector: { boolean: {} } },
+ { name: "show_min_temp", selector: { boolean: {} } },
+ { name: "show_hourly_forecast", selector: { boolean: {} } },
+ { name: "hourly_forecast_hours", selector: { number: { min: 1, max: 24, step: 1, mode: "box" } } },
+ { name: "show_daily_forecast", selector: { boolean: {} } },
+ { name: "daily_forecast_days", selector: { number: { min: 1, max: 14, step: 1, mode: "box" } } },
+ { name: "show_sunrise_sunset", selector: { boolean: {} } },
+ { name: "sunrise_entity", selector: { entity: { domain: ["sensor"] } } },
+ { name: "sunset_entity", selector: { entity: { domain: ["sensor"] } } },
+ { name: "show_clock", selector: { boolean: {} } },
+ {
+ name: "clock_position",
+ selector: {
+ select: {
+ options: [
+ { label: i18n.t("editor.clock_position_top"), value: "top" },
+ { label: i18n.t("editor.clock_position_details"), value: "details" }
+ ]
+ }
+ }
+ },
+ {
+ name: "clock_format",
+ selector: {
+ select: {
+ options: [
+ { label: i18n.t("editor.clock_format_24h"), value: "24h" },
+ { label: i18n.t("editor.clock_format_12h"), value: "12h" }
+ ]
+ }
+ }
+ },
+ { name: "overlay_opacity", selector: { number: { min: 0, max: 1, step: 0.05, mode: "box" } } },
+ {
+ name: "language",
+ selector: {
+ select: {
+ options: [
+ { label: i18n.t("editor.language_auto"), value: "auto" },
+ { label: i18n.t("editor.language_en"), value: "en" },
+ { label: i18n.t("editor.language_ru"), value: "ru" },
+ { label: i18n.t("editor.language_de"), value: "de" },
+ { label: i18n.t("editor.language_nl"), value: "nl" },
+ { label: i18n.t("editor.language_fr"), value: "fr" },
+ { label: i18n.t("editor.language_es"), value: "es" },
+ { label: i18n.t("editor.language_it"), value: "it" },
+ { label: i18n.t("editor.language_sk"), value: "sk" },
+ { label: i18n.t("editor.language_hu"), value: "hu" }
+ ]
+ }
+ }
+ },
+ {
+ name: "wind_speed_unit",
+ selector: {
+ select: {
+ options: [
+ { label: i18n.t("editor.wind_speed_unit_ms"), value: "ms" },
+ { label: i18n.t("editor.wind_speed_unit_kmh"), value: "kmh" }
+ ]
+ }
+ }
+ }
+ ];
+ }
+ _computeLabel = (schema) => {
+ const key = `editor.${schema.name}`;
+ const label = i18n.t(key);
+ return label === key ? schema.name : label;
+ };
+ _valueChanged(ev) {
+ const value = ev.detail?.value;
+ if (!value)
+ return;
+ this._config = value;
+ this.dispatchEvent(new CustomEvent("config-changed", {
+ detail: { config: this._config },
+ bubbles: true,
+ composed: true
+ }));
+ }
+ render() {
+ if (!this.hass) {
+ return html``;
+ }
+ return html`
- `}}w([t({attribute:!1})],Uo.prototype,"hass",void 0),w([_o()],Uo.prototype,"_config",void 0);var Vi={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},Ui=(o)=>(...i)=>({["_$litDirective$"]:o,values:i});class Ro{constructor(o){}get _$isConnected(){return this._$parent._$isConnected}_$initialize(o,i,a){this.__part=o,this._$parent=i,this.__attributeIndex=a}_$resolve(o,i){return this.update(o,i)}update(o,i){return this.render(...i)}}var Ua=!0,cr=Ua&&window.ShadyDOM?.inUse&&window.ShadyDOM?.noPatch===!0?window.ShadyDOM.wrap:(o)=>o;var Ri=(o)=>o.strings===void 0;var Ra=!0,oo=(o,i)=>{let a=o._$disconnectableChildren;if(a===void 0)return!1;for(let n of a)n._$notifyDirectiveConnectionChanged?.(i,!1),oo(n,i);return!0},ko=(o)=>{let i,a;do{if((i=o._$parent)===void 0)break;a=i._$disconnectableChildren,a.delete(o),o=i}while(a?.size===0)},Xi=(o)=>{for(let i;i=o._$parent;o=i){let a=i._$disconnectableChildren;if(a===void 0)i._$disconnectableChildren=a=new Set;else if(a.has(o))break;a.add(o),La(i)}};function Xa(o){if(this._$disconnectableChildren!==void 0)ko(this),this._$parent=o,Xi(this);else this._$parent=o}function Ya(o,i=!1,a=0){let n=this._$committedValue,l=this._$disconnectableChildren;if(l===void 0||l.size===0)return;if(i){if(Array.isArray(n))for(let s=a;s
{if(o.type==Vi.CHILD)o._$notifyConnectionChanged??=Ya,o._$reparentDisconnectables??=Xa};class Xo extends Ro{constructor(){super(...arguments);this._$disconnectableChildren=void 0}_$initialize(o,i,a){super._$initialize(o,i,a),Xi(this),this.isConnected=o._$isConnected}["_$notifyDirectiveConnectionChanged"](o,i=!0){if(o!==this.isConnected)if(this.isConnected=o,o)this.reconnected?.();else this.disconnected?.();if(i)oo(this,o),ko(this)}setValue(o){if(Ri(this.__part))this.__part._$setValue(o,this);else{if(Ra&&this.__attributeIndex===void 0)throw Error("Expected this.__attributeIndex to be a number");let i=[...this.__part._$committedValue];i[this.__attributeIndex]=o,this.__part._$setValue(i,this,0)}}disconnected(){}reconnected(){}}class Yi extends Xo{_key="";_onLangChange=null;render(o){return this._key=o,d.t(o)}reconnected(){this._onLangChange=()=>{this.setValue(d.t(this._key))},window.addEventListener("language-changed",this._onLangChange)}disconnected(){if(this._onLangChange)window.removeEventListener("language-changed",this._onLangChange)}}var Ia=Ui(Yi);try{customElements.define("dynamic-weather-card",Vo),customElements.define("dynamic-weather-card-editor",Uo),console.log(`%cDynamic Weather Card %c${bi}`,"color: #007AFF; font-weight: bold; font-size: 14px;","color: #666; font-size: 12px;",`
-Динамическая карточка погоды`),window.customCards=window.customCards||[];let o={type:"dynamic-weather-card",name:"Dynamic Weather Card",description:"Динамическая карточка погоды",preview:!0,documentationURL:"https://github.com/teuchezh/dynamic-weather-card"};window.customCards.push(o)}catch(o){console.error("❌ Ошибка при регистрации Dynamic Weather Card:",o)}export{Ia as t,I as resolveLanguage,d as i18n};
+ `;
+ }
+}
+__legacyDecorateClassTS([
+ property({ attribute: false })
+], DynamicWeatherCardEditor.prototype, "hass", undefined);
+__legacyDecorateClassTS([
+ state()
+], DynamicWeatherCardEditor.prototype, "_config", undefined);
+// node_modules/lit-html/development/directive.js
+var PartType = {
+ ATTRIBUTE: 1,
+ CHILD: 2,
+ PROPERTY: 3,
+ BOOLEAN_ATTRIBUTE: 4,
+ EVENT: 5,
+ ELEMENT: 6
+};
+var directive = (c) => (...values) => ({
+ ["_$litDirective$"]: c,
+ values
+});
+
+class Directive {
+ constructor(_partInfo) {}
+ get _$isConnected() {
+ return this._$parent._$isConnected;
+ }
+ _$initialize(part, parent, attributeIndex) {
+ this.__part = part;
+ this._$parent = parent;
+ this.__attributeIndex = attributeIndex;
+ }
+ _$resolve(part, props) {
+ return this.update(part, props);
+ }
+ update(_part, props) {
+ return this.render(...props);
+ }
+}
+// node_modules/lit-html/development/directive-helpers.js
+var ENABLE_SHADYDOM_NOPATCH2 = true;
+var wrap2 = ENABLE_SHADYDOM_NOPATCH2 && window.ShadyDOM?.inUse && window.ShadyDOM?.noPatch === true ? window.ShadyDOM.wrap : (node) => node;
+var isSingleExpression = (part) => part.strings === undefined;
+
+// node_modules/lit-html/development/async-directive.js
+var DEV_MODE6 = true;
+var notifyChildrenConnectedChanged = (parent, isConnected) => {
+ const children = parent._$disconnectableChildren;
+ if (children === undefined) {
+ return false;
+ }
+ for (const obj of children) {
+ obj["_$notifyDirectiveConnectionChanged"]?.(isConnected, false);
+ notifyChildrenConnectedChanged(obj, isConnected);
+ }
+ return true;
+};
+var removeDisconnectableFromParent = (obj) => {
+ let parent, children;
+ do {
+ if ((parent = obj._$parent) === undefined) {
+ break;
+ }
+ children = parent._$disconnectableChildren;
+ children.delete(obj);
+ obj = parent;
+ } while (children?.size === 0);
+};
+var addDisconnectableToParent = (obj) => {
+ for (let parent;parent = obj._$parent; obj = parent) {
+ let children = parent._$disconnectableChildren;
+ if (children === undefined) {
+ parent._$disconnectableChildren = children = new Set;
+ } else if (children.has(obj)) {
+ break;
+ }
+ children.add(obj);
+ installDisconnectAPI(parent);
+ }
+};
+function reparentDisconnectables(newParent) {
+ if (this._$disconnectableChildren !== undefined) {
+ removeDisconnectableFromParent(this);
+ this._$parent = newParent;
+ addDisconnectableToParent(this);
+ } else {
+ this._$parent = newParent;
+ }
+}
+function notifyChildPartConnectedChanged(isConnected, isClearingValue = false, fromPartIndex = 0) {
+ const value = this._$committedValue;
+ const children = this._$disconnectableChildren;
+ if (children === undefined || children.size === 0) {
+ return;
+ }
+ if (isClearingValue) {
+ if (Array.isArray(value)) {
+ for (let i = fromPartIndex;i < value.length; i++) {
+ notifyChildrenConnectedChanged(value[i], false);
+ removeDisconnectableFromParent(value[i]);
+ }
+ } else if (value != null) {
+ notifyChildrenConnectedChanged(value, false);
+ removeDisconnectableFromParent(value);
+ }
+ } else {
+ notifyChildrenConnectedChanged(this, isConnected);
+ }
+}
+var installDisconnectAPI = (obj) => {
+ if (obj.type == PartType.CHILD) {
+ obj._$notifyConnectionChanged ??= notifyChildPartConnectedChanged;
+ obj._$reparentDisconnectables ??= reparentDisconnectables;
+ }
+};
+
+class AsyncDirective extends Directive {
+ constructor() {
+ super(...arguments);
+ this._$disconnectableChildren = undefined;
+ }
+ _$initialize(part, parent, attributeIndex) {
+ super._$initialize(part, parent, attributeIndex);
+ addDisconnectableToParent(this);
+ this.isConnected = part._$isConnected;
+ }
+ ["_$notifyDirectiveConnectionChanged"](isConnected, isClearingDirective = true) {
+ if (isConnected !== this.isConnected) {
+ this.isConnected = isConnected;
+ if (isConnected) {
+ this.reconnected?.();
+ } else {
+ this.disconnected?.();
+ }
+ }
+ if (isClearingDirective) {
+ notifyChildrenConnectedChanged(this, isConnected);
+ removeDisconnectableFromParent(this);
+ }
+ }
+ setValue(value) {
+ if (isSingleExpression(this.__part)) {
+ this.__part._$setValue(value, this);
+ } else {
+ if (DEV_MODE6 && this.__attributeIndex === undefined) {
+ throw new Error(`Expected this.__attributeIndex to be a number`);
+ }
+ const newValues = [...this.__part._$committedValue];
+ newValues[this.__attributeIndex] = value;
+ this.__part._$setValue(newValues, this, 0);
+ }
+ }
+ disconnected() {}
+ reconnected() {}
+}
+// src/internationalization/directive.ts
+class TDirective extends AsyncDirective {
+ _key = "";
+ _onLangChange = null;
+ render(key) {
+ this._key = key;
+ return i18n.t(key);
+ }
+ reconnected() {
+ this._onLangChange = () => {
+ this.setValue(i18n.t(this._key));
+ };
+ window.addEventListener("language-changed", this._onLangChange);
+ }
+ disconnected() {
+ if (this._onLangChange) {
+ window.removeEventListener("language-changed", this._onLangChange);
+ }
+ }
+}
+var t = directive(TDirective);
+
+// src/index.ts
+try {
+ customElements.define("dynamic-weather-card", AnimatedWeatherCard);
+ customElements.define("dynamic-weather-card-editor", DynamicWeatherCardEditor);
+ console.log(`%cDynamic Weather Card %c${VERSION}`, "color: #007AFF; font-weight: bold; font-size: 14px;", "color: #666; font-size: 12px;", `
+Динамическая карточка погоды`);
+ window.customCards = window.customCards || [];
+ const cardRegistration = {
+ type: "dynamic-weather-card",
+ name: "Dynamic Weather Card",
+ description: "Динамическая карточка погоды",
+ preview: true,
+ documentationURL: "https://github.com/teuchezh/dynamic-weather-card"
+ };
+ window.customCards.push(cardRegistration);
+} catch (error) {
+ console.error("❌ Ошибка при регистрации Dynamic Weather Card:", error);
+}
+export {
+ t,
+ resolveLanguage,
+ i18n
+};
diff --git a/src/components/styles.ts b/src/components/styles.ts
index a34b7a3..6c375e5 100644
--- a/src/components/styles.ts
+++ b/src/components/styles.ts
@@ -57,6 +57,7 @@ export const cardStyles = css`
height: 100%;
min-height: 100%;
pointer-events: none;
+ z-index: 0;
}
canvas {
@@ -78,13 +79,13 @@ export const cardStyles = css`
rgba(0, 0, 0, calc(var(--overlay-opacity) * 0.8)) 0%,
rgba(0, 0, 0, calc(var(--overlay-opacity) * 1.2)) 100%
);
- z-index: 0;
+ z-index: 1;
border-radius: 16px;
}
.content {
position: relative;
- z-index: 1;
+ z-index: 2;
padding: 20px;
display: flex;
flex-direction: column;