}
*/
getEntitiesToShow(entities) {
if (entities.attributes.entity_id && Array.isArray(entities.attributes.entity_id))
return entities.attributes.entity_id.map(entity_id => this.hass.states[entity_id]).filter(Boolean);
return [entities];
}
/**
* creates an entity's template
* @param {LightEntity} stateObj
* @return {TemplateResult}
*/
createEntityTemplate(stateObj) {
const sliderClass = this.config.full_width_sliders ? 'ha-slider-full-width' : '';
return html`
${this.createHeader(stateObj)}
${this.createBrightnessSlider(stateObj)} ${this.createSpeedSlider(stateObj)}
${this.createIntensitySlider(stateObj)} ${this.createColorTemperature(stateObj)}
${this.createWhiteValue(stateObj)}
${this.createWarmWhiteValue(stateObj)}
${this.createColorPicker(stateObj)} ${this.createEffectList(stateObj)}
`;
}
/**
* creates card header with state toggle for a given entity
* @param {LightEntity} stateObj
* @return {TemplateResult}
*/
createHeader(stateObj) {
if (this.config.hide_header) return html``;
const title = this.config.header || stateObj.attributes.friendly_name || stateObj.entity_id;
return html`
`;
}
showHeaderIcon(stateObj) {
if (!this.config.show_header_icon) return html``;
return html`
`;
}
/**
* creates brightness slider
* @param {LightEntity} stateObj
* @return {TemplateResult}
*/
createBrightnessSlider(stateObj) {
if (this.config.brightness === false) return html``;
if (this.dontShowFeature('brightness', stateObj)) return html``;
return html`
${this.showPercent(stateObj.attributes.brightness, 0, 254, 'brightness')}
`;
}
/**
* creates speed slider
* @param {LightEntity} stateObj
* @return {TemplateResult}
*/
createSpeedSlider(stateObj) {
if (this.config.speed === false) return html``;
if (this.dontShowFeature('speed', stateObj)) return html``;
return html`
${this.showPercent(stateObj.attributes.speed, 0, 254)}
`;
}
/**
* creates intensity slider
* @param {LightEntity} stateObj
* @return {TemplateResult}
*/
createIntensitySlider(stateObj) {
if (this.config.intensity === false) return html``;
if (this.dontShowFeature('intensity', stateObj)) return html``;
return html`
${this.showPercent(stateObj.attributes.intensity, 0, 254)}
`;
}
/**
* shows slider value label if config is set
* @param {number} value
* @param {number} min
* @param {number} max
* @param {string} [sliderType] - 'brightness' or 'color_temp' for per-slider overrides
* @return {TemplateResult}
*/
showPercent(value, min, max, sliderType) {
// Per-slider visibility overrides
if (sliderType === 'brightness' && this.config.show_brightness_percent !== undefined) {
if (!this.config.show_brightness_percent) return html``;
} else if (sliderType === 'color_temp' && this.config.show_color_temp_percent !== undefined) {
if (!this.config.show_color_temp_percent) return html``;
} else if (sliderType === 'color_temp' && this.config.color_temp_in_kelvin) {
// color_temp_in_kelvin implies showing the value label
} else if (!this.config.show_slider_percent) {
return html``;
}
// Show kelvin for color temp if configured (slider value is already in kelvin)
if (sliderType === 'color_temp' && this.config.color_temp_in_kelvin) {
return html` ${value}K
`;
}
let percent = parseInt(((value - min) * 100) / (max - min), 10);
if (isNaN(percent)) percent = 0;
return html` ${percent}%
`;
}
/**
* creates color temperature slider for a given entity
* @param {LightEntity} stateObj
* @return {TemplateResult}
*/
createColorTemperature(stateObj) {
if (this.config.color_temp === false) return html``;
if (this.dontShowFeature('colorTemp', stateObj)) return html``;
// HA 2026.3+ uses kelvin-based attributes; fall back to mireds for older HA
const usesKelvin = stateObj.attributes.min_color_temp_kelvin !== undefined;
const showInKelvin = this.config.color_temp_in_kelvin;
let currentTemp, minTemp, maxTemp;
if (showInKelvin) {
// Slider works in kelvin so the native popup shows kelvin values.
// Kelvin: low=warm, high=cool — slider left=warm, right=cool.
let minK, maxK, kelvin;
if (usesKelvin) {
kelvin = stateObj.attributes.color_temp_kelvin;
minK = stateObj.attributes.min_color_temp_kelvin;
maxK = stateObj.attributes.max_color_temp_kelvin;
} else {
kelvin = stateObj.attributes.color_temp
? Math.round(1000000 / stateObj.attributes.color_temp) : null;
minK = stateObj.attributes.max_mireds
? Math.round(1000000 / stateObj.attributes.max_mireds) : null;
maxK = stateObj.attributes.min_mireds
? Math.round(1000000 / stateObj.attributes.min_mireds) : null;
}
if (!minK || !maxK) return html``;
const midpoint = Math.round((minK + maxK) / 2);
currentTemp = (typeof kelvin === 'number' && Number.isFinite(kelvin) && kelvin > 0)
? kelvin : null;
minTemp = minK;
maxTemp = maxK;
const sliderValue = currentTemp || midpoint;
const label = this.showPercent(sliderValue, minTemp, maxTemp, 'color_temp');
return html`
`;
}
// Compute mired range for percentage-based slider.
// Slider works in 0–100 so the native popup shows a percentage value.
let minMired, maxMired, currentMired;
if (usesKelvin) {
const kelvin = stateObj.attributes.color_temp_kelvin;
const minK = stateObj.attributes.min_color_temp_kelvin;
const maxK = stateObj.attributes.max_color_temp_kelvin;
if (!minK || !maxK) return html``;
currentMired = (typeof kelvin === 'number' && Number.isFinite(kelvin) && kelvin > 0)
? Math.round(1000000 / kelvin) : null;
minMired = Math.round(1000000 / maxK);
maxMired = Math.round(1000000 / minK);
} else {
currentMired = stateObj.attributes.color_temp;
minMired = stateObj.attributes.min_mireds;
maxMired = stateObj.attributes.max_mireds;
if (!minMired || !maxMired) return html``;
}
const miredRange = (maxMired && minMired) ? maxMired - minMired : 0;
const percentValue = (miredRange > 0 && currentMired != null)
? Math.round(((currentMired - minMired) / miredRange) * 100) : 50;
const label = this.showPercent(percentValue, 0, 100, 'color_temp');
return html`
`;
}
/**
* gets the current white value from entity state
* supports modern rgbw_color/rgbww_color and legacy white_value
* @param {LightEntity} stateObj
* @param {number} index - index in the color tuple (3 for white/cool white, 4 for warm white)
* @return {number}
*/
getWhiteValue(stateObj, index = 3) {
const rgbwColor = stateObj.attributes.rgbw_color;
const rgbwwColor = stateObj.attributes.rgbww_color;
if (rgbwColor && index === 3) return rgbwColor[3] || 0;
if (rgbwwColor && index < rgbwwColor.length) return rgbwwColor[index] || 0;
// Legacy fallback
if (index === 3 && stateObj.attributes.white_value !== undefined) {
return stateObj.attributes.white_value ?? 0;
}
return 0;
}
/**
* creates white value slider for a given entity
* supports modern RGBW/RGBWW color modes and legacy white_value
* @param {LightEntity} stateObj
* @return {TemplateResult}
*/
createWhiteValue(stateObj) {
if (this.config.white_value === false) return html``;
if (this.dontShowFeature('whiteValue', stateObj)) return html``;
const whiteValue = this.getWhiteValue(stateObj, 3);
return html`
${this.showPercent(whiteValue, 0, 254)}
`;
}
/**
* creates warm white value slider for RGBWW entities
* @param {LightEntity} stateObj
* @return {TemplateResult}
*/
createWarmWhiteValue(stateObj) {
if (this.config.warm_white_value === false) return html``;
if (this.dontShowFeature('warmWhiteValue', stateObj)) return html``;
const warmWhiteValue = this.getWhiteValue(stateObj, 4);
return html`
${this.showPercent(warmWhiteValue, 0, 254)}
`;
}
/**
* sets the white value for RGBW/RGBWW lights using modern color mode API
* falls back to legacy white_value for older HA installations
* @param {CustomEvent} event
* @param {LightEntity} stateObj
* @param {number} index - 3 for white/cool white, 4 for warm white
*/
_setWhiteValue(event, stateObj, index) {
const newValue = parseInt(event.target.value, 10);
if (isNaN(newValue)) return;
const colorModes = stateObj.attributes.supported_color_modes || [];
const rgbwColor = stateObj.attributes.rgbw_color;
const rgbwwColor = stateObj.attributes.rgbww_color;
if (colorModes.includes('rgbw') && index === 3) {
const rgb = rgbwColor ? rgbwColor.slice(0, 3) : (stateObj.attributes.rgb_color || [255, 255, 255]);
this.callEntityService({ rgbw_color: [rgb[0], rgb[1], rgb[2], newValue] }, stateObj);
} else if (colorModes.includes('rgbww')) {
let base;
if (rgbwwColor) {
base = rgbwwColor;
} else if (rgbwColor) {
base = [rgbwColor[0], rgbwColor[1], rgbwColor[2], rgbwColor[3], 0];
} else {
const rgb = stateObj.attributes.rgb_color || [255, 255, 255];
base = [rgb[0], rgb[1], rgb[2], 0, 0];
}
const newColor = [...base];
newColor[index] = newValue;
this.callEntityService({ rgbww_color: newColor }, stateObj);
} else {
// Legacy fallback
this.callEntityService({ white_value: newValue }, stateObj);
}
}
/**
* creates effect list dropdown for a given entity
* @param {LightEntity} stateObj
* @return {TemplateResult}
*/
createEffectList(stateObj) {
// do we disable effect list always?
if (this.config.effects_list === false) return html``;
// need to check state and persist_features here because if given custom effect list we may
// want to sho that even if the feature doesn't exist so dont check that part to move forward just persist_features/state
if (!this.config.persist_features && !this.isEntityOn(stateObj)) return html``;
let effect_list = stateObj.attributes.effect_list || [];
// if we were given a custom list then use that
if (this.config.effects_list && Array.isArray(this.config.effects_list)) {
effect_list = this.config.effects_list;
} else if (this.config.effects_list && this.hass.states[this.config.effects_list]) {
// else if given an input_select entity use that as effect list
const inputSelect = this.hass.states[this.config.effects_list];
effect_list = (inputSelect.attributes && inputSelect.attributes.options) || [];
} else if (this.dontShowFeature('effectList', stateObj)) {
// finally if no custom list nor feature exists then dont show effect list
return html``;
}
const listItems = effect_list.map(effect => this.createListItem(stateObj, effect));
const caption = this.hass.localize('ui.card.light.effect') || 'Effect';
return html`
this.setEffect(e, stateObj)}
label="${caption}"
>
${listItems}
`;
}
createListItem(stateObj, effect) {
return html`${effect}`;
}
/**
* creates color picker wheel for a given entity
* @param {LightEntity} stateObj
* @return {TemplateResult}
*/
createColorPicker(stateObj) {
if (this.config.color_picker === false) return html``;
if (this.dontShowFeature('color', stateObj)) return html``;
// ha-hs-color-picker uses saturation 0-1, HA uses 0-100
const haHs = stateObj.attributes.hs_color || [0, 0];
const pickerValue = (this._colorPickerValues && this._colorPickerValues[stateObj.entity_id])
|| [haHs[0], haHs[1] / 100];
return html`
{ this._colorPickerValues = { ...this._colorPickerValues, [stateObj.entity_id]: e.detail.value }; }}
@value-changed=${(e) => this._onColorPickerChanged(e.detail.value, stateObj)}
>
`;
}
/**
* do we show a feature or not?
* @param {string} featureName
* @param {LightEntity} stateObj
* @return {boolean}
*/
dontShowFeature(featureName, stateObj) {
// show all feature if this is set to true
if (this.config.force_features) return false;
// WLED support
if (featureName === 'speed' && 'speed' in stateObj.attributes) return false;
if (featureName === 'intensity' && 'intensity' in stateObj.attributes) return false;
// old deprecated way to seeing if supported feature
let featureSupported = LightEntityCard.featureNames[featureName] & stateObj.attributes.supported_features;
// support new color modes https://developers.home-assistant.io/docs/core/entity/light/#color-modes
const colorModes = stateObj.attributes.supported_color_modes || [];
if (!featureSupported) {
switch (featureName) {
case 'brightness':
featureSupported = Object.prototype.hasOwnProperty.call(stateObj.attributes, 'brightness');
if (!featureSupported) {
const supportedModes = ['hs', 'rgb', 'rgbw', 'rgbww', 'white', 'brightness', 'color_temp', 'xy'];
featureSupported = [...new Set(colorModes.filter(mode => supportedModes.includes(mode)))].length > 0;
}
break;
case 'colorTemp':
if (colorModes) {
const supportedModes = ['color_temp'];
featureSupported = [...new Set(colorModes.filter(mode => supportedModes.includes(mode)))].length > 0;
}
break;
case 'effectList':
featureSupported = stateObj.attributes.effect_list && stateObj.attributes.effect_list.length;
break;
case 'color': {
const supportedModes = ['hs', 'rgb', 'rgbw', 'rgbww', 'xy'];
featureSupported = [...new Set(colorModes.filter(mode => supportedModes.includes(mode)))].length > 0;
break;
}
case 'whiteValue':
featureSupported = Object.prototype.hasOwnProperty.call(stateObj.attributes, 'white_value');
if (!featureSupported) {
const supportedModes = ['rgbw', 'rgbww'];
featureSupported = colorModes.some(mode => supportedModes.includes(mode));
}
break;
case 'warmWhiteValue': {
const supportedModes = ['rgbww'];
featureSupported = colorModes.some(mode => supportedModes.includes(mode));
break;
}
default:
featureSupported = false;
break;
}
}
if (!featureSupported) return true;
if (!this.config.persist_features && !this.isEntityOn(stateObj)) return true;
return false;
}
/**
* change to hs color for a given entity
* @param {HSV} hsv
* @param {LightEntity} stateObj
*/
_onColorPickerChanged(value, stateObj) {
if (this._colorPickerValues) {
const { [stateObj.entity_id]: _, ...rest } = this._colorPickerValues;
this._colorPickerValues = rest;
}
this.setColorPicker(value, stateObj);
}
setColorPicker(value, stateObj) {
if (!value) return;
// Convert saturation back from 0-1 to 0-100 for HA
this.callEntityService({ hs_color: [value[0], value[1] * 100] }, stateObj);
}
_setValue(event, stateObj, valueName) {
const newValue = parseInt(event.target.value, 10);
if (isNaN(newValue) || parseInt(stateObj.attributes[valueName], 10) === newValue) return;
this.callEntityService({ [valueName]: newValue }, stateObj);
}
/**
* handles color temperature slider changes, converting to the correct unit for HA
* @param {CustomEvent} event
* @param {LightEntity} stateObj
* @param {boolean} usesKelvin - whether the HA entity uses kelvin-based attributes
* @param {boolean} sliderInKelvin - whether the slider value is in kelvin
* @param {number} [minMired] - min mired value (needed for percentage→mired conversion)
* @param {number} [maxMired] - max mired value (needed for percentage→mired conversion)
*/
_setColorTemp(event, stateObj, usesKelvin, sliderInKelvin, minMired, maxMired) {
const rawValue = parseInt(event.target.value, 10);
if (isNaN(rawValue)) return;
if (sliderInKelvin) {
// Slider value is kelvin
if (usesKelvin) {
if (rawValue === parseInt(stateObj.attributes.color_temp_kelvin, 10)) return;
this.callEntityService({ color_temp_kelvin: rawValue }, stateObj);
} else {
const miredValue = Math.round(1000000 / rawValue);
if (miredValue === parseInt(stateObj.attributes.color_temp, 10)) return;
this.callEntityService({ color_temp: miredValue }, stateObj);
}
} else {
// Slider value is percentage (0–100), convert back to mireds
if (!Number.isFinite(minMired) || !Number.isFinite(maxMired) || maxMired <= minMired) return;
const miredValue = Math.round(minMired + (rawValue / 100) * (maxMired - minMired));
if (usesKelvin) {
const kelvinValue = Math.round(1000000 / miredValue);
if (kelvinValue === parseInt(stateObj.attributes.color_temp_kelvin, 10)) return;
this.callEntityService({ color_temp_kelvin: kelvinValue }, stateObj);
} else {
if (miredValue === parseInt(stateObj.attributes.color_temp, 10)) return;
this.callEntityService({ color_temp: miredValue }, stateObj);
}
}
}
/**
* sets the toggle state based on the given entity state
* @param {CustomEvent} event
* @param {LightEntity} stateObj
*/
setToggle(event, stateObj) {
const newState = this.isEntityOn(stateObj) ? LightEntityCard.cmdToggle.off : LightEntityCard.cmdToggle.on;
this.callEntityService({}, stateObj, newState);
}
/**
* sets the current effect selected for an entity
* @param {CustomEvent} event
* @param {LightEntity} entity
*/
setEffect(event, stateObj) {
if(!event.target.value ) return;
this.callEntityService({ effect: event.target.value }, stateObj);
}
/**
* call light service to update a state of an entity
* @param {Object} payload
* @param {LightEntity} entity
* @param {String} state
*/
callEntityService(payload, stateObj, state) {
if(!this._firstUpdate) return;
let entityType = stateObj.entity_id.split('.')[0];
if (entityType === 'group') entityType = 'homeassistant';
const transition = parseFloat(this.config.transition) || 0;
if (transition > 0 && entityType === 'light') {
payload = { ...payload, transition };
}
this.hass.callService(entityType, state || LightEntityCard.cmdToggle.on, {
entity_id: stateObj.entity_id,
...payload,
});
}
}
customElements.define('light-entity-card', LightEntityCard);
window.customCards = window.customCards || [];
window.customCards.push({
type: 'light-entity-card',
name: 'Light Entity Card',
description: 'Control lights and switches',
});
================================================
FILE: src/style-editor.js
================================================
import { css } from 'lit';
const style = css`
.entities {
padding-top: 10px;
padding-bottom: 10px;
display: flex;
}
.entities ha-formfield {
display: block;
margin-bottom: 10px;
margin-left: 10px;
}
.checkbox-options {
display: flex;
}
ha-entity-picker {
width: 100%;
}
.checkbox-options ha-formfield,
.entities mwc-switch,
.entities ha-form-string {
padding-right: 2%;
width: 48%;
}
.checkbox-options ha-formfield {
margin-top: 10px;
}
.overall-config {
margin-bottom: 20px;
}
`;
export default style;
================================================
FILE: src/style.js
================================================
import { css } from 'lit';
const style = css`
.light-entity-card {
padding: 16px;
}
.light-entity-child-card {
box-shadow: none !important;
padding: 0 !important;
}
.light-entity-card.group {
padding-bottom: 5;
padding-top: 0;
}
.ha-slider-full-width ha-slider {
width: 100%;
}
.percent-slider {
color: var(--primary-text-color);
display: flex;
justify-content: center;
align-items: center;
margin-left: 8px;
min-width: 40px;
text-align: right;
}
.light-entity-card__header {
display: flex;
justify-content: space-between;
@apply --paper-font-headline;
line-height: 40px;
color: var(--primary-text-color);
}
.group .light-entity-card__header {
}
.light-entity-card-sliders > div {
margin-top: 10px;
}
.group .light-entity-card-sliders > div {
margin-top: 0px;
}
.light-entity-card__toggle {
display: flex;
cursor: pointer;
}
.light-entity-card__color-picker {
display: flex;
justify-content: center;
margin-top: 10px;
}
.light-entity-card__color-picker ha-hs-color-picker {
max-width: 300px;
width: 100%;
}
.light-entity-card-color_temp {
background-image: var(--ha-slider-background, linear-gradient(to right, #a6d1ff, #ffb74d));
border-radius: 4px;
}
.light-entity-card-color_temp--kelvin {
background-image: var(--ha-slider-background, linear-gradient(to right, #ffb74d, #a6d1ff));
}
.light-entity-card-effectlist {
padding-top: 10px;
padding-bottom: 10px;
}
.group .light-entity-card-effectlist {
padding-bottom: 20px;
}
.light-entity-card-center {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.hidden {
display: none;
}
.icon-container {
display: flex;
justify-content: center;
align-items: center;
margin-right: 8px;
}
`;
export default style;
================================================
FILE: webpack/config.common.js
================================================
const path = require("path");
module.exports = {
entry: "./src/index.js",
devtool: "source-map",
output: {
filename: "light-entity-card.js",
path: path.resolve(__dirname, "../dist"),
},
module: {
rules: [
{
test: /\.js$/,
include: [/node_modules(?:\/|\\)lit-element|lit-html/],
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
],
},
};
================================================
FILE: webpack/config.dev.js
================================================
const { merge } = require('webpack-merge');
const commonConfig = require('./config.common');
module.exports = merge(commonConfig, {
mode: 'development'
});
================================================
FILE: webpack/config.prod.js
================================================
const { merge } = require('webpack-merge');
const commonConfig = require('./config.common');
module.exports = merge(commonConfig, {
mode: 'production',
devtool: false,
optimization: {
minimize: true
},
output: {
publicPath: '/local/'
},
});
[![GitHub Release][releases-shield]][releases]
[![License][license-shield]](LICENSE.md)
![Project Maintenance][maintenance-shield]
[](https://github.com/hacs/integration)
## Features
* Works on any light and switch based entity
* Toggle on/off
* HS Color wheel
* Color temperature and white value support
* Support for configured language
* Compact card support for grouped entities
* use `persist_features: true` to always show entity features
* use `effects_list` to add custom effects list or use `input_select` entity
* always show or hide header and each input
## Installation
Add through [HACS](https://github.com/custom-components/hacs)
Issues with the installation should be asked in the [Home Assistant forums](https://community.home-assistant.io/t/light-entity-card/96146)
## Configurations
```yaml
type: custom:light-entity-card
entity: light.downstairs
```
```yaml
type: custom:light-entity-card
entity: light.downstairs
effects_list:
- effect1
- effect2
```
```yaml
type: custom:light-entity-card
entity: light.downstairs
effects_list: input_select.custom_effect_list
```
```yaml
type: custom:light-entity-card
entity: light.downstairs
group: true
```
## Options
| Name | Type | Requirement | `Default value` Description |
| -------------------- | ------------------- | ------------ | --------------------------------------------------------------------------- |
| type | string | **Required** | `custom:light-entity-card` |
| entity | string | **Required** | The entity name of the light entity to control |
| shorten_cards | boolean | **Optional** | `false` show a compact version of the card |
| consolidate_entities | boolean | **Optional** | `false` if entity is a group you can consolidate all entities into one |
| persist_features | boolean | **Optional** | `false` always show entity features |
| effects_list | list/string/boolean | **Optional** | custom list of effects, an input_select entity, or set false to always hide |
| header | string | **Optional** | custom header name |
| hide_header | boolean | **Optional** | `false` hides the entity header of the card including toggle |
| show_header_icon | boolean | **Optional** | `false` shows the entity icon of the card including toggle |
| brightness | boolean | **Optional** | `true` show brightness slider if available |
| color_temp | boolean | **Optional** | `true` show color temp slider if available |
| white_value | boolean | **Optional** | `true` show white value slider if available |
| color_picker | boolean | **Optional** | `true` show color picker wheel if available |
| speed | boolean | **Optional** | `false` show speed slider if available |
| intensity | boolean | **Optional** | `false` show intensity slider if available |
| force_features | boolean | **Optional** | `false` force showing all features in card |
| full_width_sliders | boolean | **Optional** | `false` makes slider the full width of card |
| brightness_icon | string | **Optional** | `weather-sunny` change the brightness slider icon |
| white_icon | string | **Optional** | `file-word-box` change the white slider icon |
| temperature_icon | string | **Optional** | `thermometer` change the temperature slider icon |
| speed_icon | string | **Optional** | `speedometer` change the speed slider icon |
| intensity_icon | string | **Optional** | `transit-connection-horizontal` change the intensity slider icon |
| show_slider_percent | boolean | **Optional** | `false` show percent next to sliders |
| child_card | boolean | **Optional** | `false` remove padding/margin to make this card within another card |
---
Enjoy my card? Help me out for a couple of :beers: or a :coffee:!
[](https://www.buymeacoffee.com/JMISm06AD)
[commits-shield]: https://img.shields.io/github/commit-activity/y/ljmerza/light-entity-card.svg?style=for-the-badge
[commits]: https://github.com/ljmerza/light-entity-card/commits/master
[license-shield]: https://img.shields.io/github/license/ljmerza/light-entity-card.svg?style=for-the-badge
[maintenance-shield]: https://img.shields.io/badge/maintainer-Leonardo%20Merza%20%40ljmerza-blue.svg?style=for-the-badge
[releases-shield]: https://img.shields.io/github/release/ljmerza/light-entity-card.svg?style=for-the-badge
[releases]: https://github.com/ljmerza/light-entity-card/releases
================================================
FILE: babel.config.js
================================================
module.exports = {
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"debug": true,
"targets": "> 0.25%, not dead",
"shippedProposals": true
}
]
]
}
================================================
FILE: dist/light-entity-card.js
================================================
/*! For license information please see light-entity-card.js.LICENSE.txt */
(()=>{"use strict";const t=window,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),n=new WeakMap;class r{constructor(t,e,n){if(this._$cssResult$=!0,n!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const i=this.t;if(e&&void 0===t){const e=void 0!==i&&1===i.length;e&&(t=n.get(i)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&n.set(i,t))}return t}toString(){return this.cssText}}const o=(t,...e)=>{const n=1===t.length?t[0]:e.reduce((e,i,n)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+t[n+1],t[0]);return new r(n,t,i)},s=(i,n)=>{e?i.adoptedStyleSheets=n.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet):n.forEach(e=>{const n=document.createElement("style"),r=t.litNonce;void 0!==r&&n.setAttribute("nonce",r),n.textContent=e.cssText,i.appendChild(n)})},a=e?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new r("string"==typeof t?t:t+"",void 0,i))(e)})(t):t;var c;const h=window,l=h.trustedTypes,d=l?l.emptyScript:"",u=h.reactiveElementPolyfillSupport,f={toAttribute(t,e){switch(e){case Boolean:t=t?d:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},p=(t,e)=>e!==t&&(e==e||t==t),g={attribute:!0,type:String,converter:f,reflect:!1,hasChanged:p},_="finalized";class v extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this._$Eu()}static addInitializer(t){var e;this.finalize(),(null!==(e=this.h)&&void 0!==e?e:this.h=[]).push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach((e,i)=>{const n=this._$Ep(i,e);void 0!==n&&(this._$Ev.set(n,i),t.push(n))}),t}static createProperty(t,e=g){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){const i="symbol"==typeof t?Symbol():"__"+t,n=this.getPropertyDescriptor(t,i,e);void 0!==n&&Object.defineProperty(this.prototype,t,n)}}static getPropertyDescriptor(t,e,i){return{get(){return this[e]},set(n){const r=this[t];this[e]=n,this.requestUpdate(t,r,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||g}static finalize(){if(this.hasOwnProperty(_))return!1;this[_]=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),void 0!==t.h&&(this.h=[...t.h]),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const t=this.properties,e=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const i of e)this.createProperty(i,t[i])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(a(t))}else void 0!==t&&e.push(a(t));return e}static _$Ep(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}_$Eu(){var t;this._$E_=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach(t=>t(this))}addController(t){var e,i;(null!==(e=this._$ES)&&void 0!==e?e:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(i=t.hostConnected)||void 0===i||i.call(t))}removeController(t){var e;null===(e=this._$ES)||void 0===e||e.splice(this._$ES.indexOf(t)>>>0,1)}_$Eg(){this.constructor.elementProperties.forEach((t,e)=>{this.hasOwnProperty(e)&&(this._$Ei.set(e,this[e]),delete this[e])})}createRenderRoot(){var t;const e=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return s(e,this.constructor.elementStyles),e}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach(t=>{var e;return null===(e=t.hostConnected)||void 0===e?void 0:e.call(t)})}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach(t=>{var e;return null===(e=t.hostDisconnected)||void 0===e?void 0:e.call(t)})}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$EO(t,e,i=g){var n;const r=this.constructor._$Ep(t,i);if(void 0!==r&&!0===i.reflect){const o=(void 0!==(null===(n=i.converter)||void 0===n?void 0:n.toAttribute)?i.converter:f).toAttribute(e,i.type);this._$El=t,null==o?this.removeAttribute(r):this.setAttribute(r,o),this._$El=null}}_$AK(t,e){var i;const n=this.constructor,r=n._$Ev.get(t);if(void 0!==r&&this._$El!==r){const t=n.getPropertyOptions(r),o="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null===(i=t.converter)||void 0===i?void 0:i.fromAttribute)?t.converter:f;this._$El=r,this[r]=o.fromAttribute(e,t.type),this._$El=null}}requestUpdate(t,e,i){let n=!0;void 0!==t&&(((i=i||this.constructor.getPropertyOptions(t)).hasChanged||p)(this[t],e)?(this._$AL.has(t)||this._$AL.set(t,e),!0===i.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,i))):n=!1),!this.isUpdatePending&&n&&(this._$E_=this._$Ej())}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach((t,e)=>this[e]=t),this._$Ei=void 0);let e=!1;const i=this._$AL;try{e=this.shouldUpdate(i),e?(this.willUpdate(i),null===(t=this._$ES)||void 0===t||t.forEach(t=>{var e;return null===(e=t.hostUpdate)||void 0===e?void 0:e.call(t)}),this.update(i)):this._$Ek()}catch(t){throw e=!1,this._$Ek(),t}e&&this._$AE(i)}willUpdate(t){}_$AE(t){var e;null===(e=this._$ES)||void 0===e||e.forEach(t=>{var e;return null===(e=t.hostUpdated)||void 0===e?void 0:e.call(t)}),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return!0}update(t){void 0!==this._$EC&&(this._$EC.forEach((t,e)=>this._$EO(e,this[e],t)),this._$EC=void 0),this._$Ek()}updated(t){}firstUpdated(t){}}function y(t,e,i){return e=b(e),function(t,e){if(e&&("object"==O(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}(t,m()?Reflect.construct(e,i||[],b(t).constructor):e.apply(t,i))}function m(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(m=function(){return!!t})()}function b(t){return b=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},b(t)}function $(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&w(t,e)}function w(t,e){return w=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},w(t,e)}function k(t,e){var i="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!i){if(Array.isArray(t)||(i=S(t))||e&&t&&"number"==typeof t.length){i&&(t=i);var n=0,r=function(){};return{s:r,n:function(){return n>=t.length?{done:!0}:{done:!1,value:t[n++]}},e:function(t){throw t},f:r}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,s=!0,a=!1;return{s:function(){i=i.call(t)},n:function(){var t=i.next();return s=t.done,t},e:function(t){a=!0,o=t},f:function(){try{s||null==i.return||i.return()}finally{if(a)throw o}}}}function S(t,e){if(t){if("string"==typeof t)return x(t,e);var i={}.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?x(t,e):void 0}}function x(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,n=Array(e);i