dev-swiss-army-knife-card.min.js-beta

import{LitElement,html,css,svg,unsafeCSS}from"https://unpkg.com/lit-element@2/lit-element.js?module";import{unsafeHTML}from"https://unpkg.com/lit-html@1/directives/unsafe-html.js?module";import{unsafeSVG}from"https://unpkg.com/lit-html@1/directives/unsafe-svg.js?module";import{styleMap}from"https://unpkg.com/lit-html@1/directives/style-map.js?module";import{classMap}from"https://unpkg.com/lit-html@1/directives/class-map.js?module";import{selectUnit}from"https://unpkg.com/@formatjs/intl-utils/lib/index.js?module";import{shouldPolyfill}from"https://unpkg.com/@formatjs/intl-relativetimeformat/lib/should-polyfill.js?module";import{stateIcon,getLovelace}from"https://unpkg.com/custom-card-helpers@1.8.0/dist/index.m.js?module";import"https://cdn.skypack.dev/@ctrl/tinycolor";console.info("%c  SWISS ARMY KNIFE CARD  \n%c    BETA DEV Version     ","color: yellow; font-weight: bold; background: black","color: white; font-weight: bold; background: dimgray");const SCALE_DIMENSIONS=2,SVG_DEFAULT_DIMENSIONS=400,SVG_VIEW_BOX=400,FONT_SIZE=4;class Merge{static mergeDeep(...t){const isObject=t=>t&&"object"==typeof t;return t.reduce(((t,s)=>(Object.keys(s).forEach((e=>{const i=t[e],o=s[e];Array.isArray(i)&&Array.isArray(o)?t[e]=i.concat(...o):isObject(i)&&isObject(o)?t[e]=this.mergeDeep(i,o):t[e]=o})),t)),{})}}class Utils{static calculateValueBetween(t,s,e){return isNaN(e)?0:e?(Math.min(Math.max(e,t),s)-t)/(s-t):0}static calculateSvgCoordinate(t,s){return t/100*400+(s-200)}static calculateSvgDimension(t){return t/100*400}}class Templates{static replaceVariables3(t,s){if(!t&&!s.template.defaults)return s[s.template.type];let e=t?.slice(0)??[];s.template.defaults&&(e=e.concat(s.template.defaults));let i=JSON.stringify(s[s.template.type]);return e.forEach((t=>{const s=Object.keys(t)[0],e=Object.values(t)[0];if("number"==typeof e||"boolean"==typeof e){const t=new RegExp(`"\\[\\[${s}\\]\\]"`,"gm");i=i.replace(t,e)}if("object"==typeof e){const t=new RegExp(`"\\[\\[${s}\\]\\]"`,"gm"),o=JSON.stringify(e);i=i.replace(t,o)}else{const t=new RegExp(`\\[\\[${s}\\]\\]`,"gm");i=i.replace(t,e)}})),JSON.parse(i)}static evaluateJsTemplate(t,s,e){try{return new Function("state","states","entity","user","hass",`'use strict'; ${e}`).call(this,s,t._card._hass.states,t.config.entity_index?t._card.entities[t.config.entity_index]:void 0,t._card._hass.user,t._card._hass)}catch(t){throw t.name="Sak-evaluateJsTemplate-Error",t}}static getJsTemplateOrValue(t,s,e){if(!e)return e;if(["number","boolean","bigint","symbol"].includes(typeof e))return e;if("object"==typeof e)return Object.keys(e).forEach((i=>{e[i]=Templates.getJsTemplateOrValue(t,s,e[i])})),e;const i=e.trim();return"[[["===i.substring(0,3)&&"]]]"===i.slice(-3)?Templates.evaluateJsTemplate(t,s,i.slice(3,-3)):e}}class Toolset{constructor(t,s){this.toolsetId=Math.random().toString(36).substr(2,9),this._card=t,this.dev={...this._card.dev},this.dev.performance&&console.time("--\x3e "+this.toolsetId+" PERFORMANCE Toolset::constructor"),this.config=s,this.tools=[],this.svg={},this.svg.cx=Utils.calculateSvgCoordinate(s.position.cx,200),this.svg.cy=Utils.calculateSvgCoordinate(s.position.cy,200),this.svg.x=this.svg.cx-200,this.svg.y=this.svg.cy-200,this.transform={},this.transform.scale={},this.transform.scale.x=this.transform.scale.y=1,this.transform.rotate={},this.transform.rotate.x=this.transform.rotate.y=0,this.transform.skew={},this.transform.skew.x=this.transform.skew.y=0,this.config.position.scale&&(this.transform.scale.x=this.transform.scale.y=this.config.position.scale),this.config.position.rotate&&(this.transform.rotate.x=this.transform.rotate.y=this.config.position.rotate),this.transform.scale.x=this.config.position.scale_x||this.config.position.scale||1,this.transform.scale.y=this.config.position.scale_y||this.config.position.scale||1,this.transform.rotate.x=this.config.position.rotate_x||this.config.position.rotate||0,this.transform.rotate.y=this.config.position.rotate_y||this.config.position.rotate||0,this.dev.debug&&console.log("Toolset::constructor config/svg",this.toolsetId,this.config,this.svg);const e={area:EntityAreaTool,badge:BadgeTool,bar:SparklineBarChartTool,circle:CircleTool,ellipse:EllipseTool,horseshoe:HorseshoeTool,icon:EntityIconTool,line:LineTool,name:EntityNameTool,rectangle:RectangleTool,rectex:RectangleToolEx,regpoly:RegPolyTool,segarc:SegmentedArcTool,state:EntityStateTool,slider:RangeSliderTool,slider2:RangeSliderTool2,switch:SwitchTool,text:TextTool,usersvg:UserSvgTool};this.config.tools.map((t=>{var s={...t},i={cx:0,cy:0,scale:this.config.position.scale?this.config.position.scale:1};this.dev.debug&&console.log("Toolset::constructor toolConfig",this.toolsetId,s,i);const o=new e[t.type](this,s,i);this.tools.push({type:t.type,index:t.id,tool:o})})),this.dev.performance&&console.timeEnd("--\x3e "+this.toolsetId+" PERFORMANCE Toolset::constructor")}updateValues(){this.dev.performance&&console.time("--\x3e "+this.toolsetId+" PERFORMANCE Toolset::updateValues"),this.tools&&this.tools.map(((t,s)=>{if(t.tool.config.hasOwnProperty("entity_index")&&(this.dev.debug&&console.log("Toolset::updateValues",t,s),t.tool.value=this._card.attributesStr[t.tool.config.entity_index]?this._card.attributesStr[t.tool.config.entity_index]:this._card.secondaryInfoStr[t.tool.config.entity_index]?this._card.secondaryInfoStr[t.tool.config.entity_index]:this._card.entitiesStr[t.tool.config.entity_index]),t.tool.config.hasOwnProperty("entity_indexes")){var e={};for(let s=0;s<t.tool.config.entity_indexes.length;++s)e[s]=this._card.attributesStr[t.tool.config.entity_indexes[s]]?this._card.attributesStr[t.tool.config.entity_indexes[s]]:this._card.secondaryInfoStr[t.tool.config.entity_indexes[s]]?this._card.secondaryInfoStr[t.tool.config.entity_indexes[s]]:this._card.entitiesStr[t.tool.config.entity_indexes[s]];t.tool.values=e}})),this.dev.performance&&console.timeEnd("--\x3e "+this.toolsetId+" PERFORMANCE Toolset::updateValues")}connectedCallback(){this.dev.performance&&console.time("--\x3e "+this.toolsetId+" PERFORMANCE Toolset::connectedCallback"),this.dev.debug&&console.log("*****Event - connectedCallback",this.toolsetId,(new Date).getTime()),this.dev.performance&&console.timeEnd("--\x3e "+this.toolsetId+" PERFORMANCE Toolset::connectedCallback")}disconnectedCallback(){this.dev.performance&&console.time("--\x3e "+this.cardId+" PERFORMANCE Toolset::disconnectedCallback"),this.dev.debug&&console.log("*****Event - disconnectedCallback",this.toolsetId,(new Date).getTime()),this.dev.performance&&console.timeEnd("--\x3e "+this.cardId+" PERFORMANCE Toolset::disconnectedCallback")}firstUpdated(t){this.dev.debug&&console.log("*****Event - Toolset::firstUpdated",this.toolsetId,(new Date).getTime()),this.tools&&this.tools.map(((s,e)=>{"segarc"==s.type&&(this.dev.debug&&console.log("Toolset::firstUpdated - calling SegmentedArcTool firstUpdated"),s.tool.firstUpdated(t)),"slider"==s.type&&(this.dev.debug&&console.log("Toolset::firstUpdated - calling Slider firstUpdated"),s.tool.firstUpdated(t)),"slider2"==s.type&&(this.dev.debug&&console.log("Toolset::firstUpdated - calling Slider firstUpdated"),s.tool.firstUpdated(t)),"icon"==s.type&&(this.dev.debug&&console.log("Toolset::firstUpdated - calling Icon firstUpdated"),s.tool.firstUpdated(t))}))}updated(t){this.dev.debug&&console.log("*****Event - Updated",this.toolsetId,(new Date).getTime())}renderToolset(){this.dev.debug&&console.log("*****Event - renderToolset",this.toolsetId,(new Date).getTime());const t=this.tools.map((t=>svg`
          ${t.tool.render()}
      `));return svg`${t}`}render(){return this._card.isSafari||this._card.iOS?svg`
        <g id="toolset-${this.toolsetId}" class="toolset__group-outer"
           transform="rotate(${this.transform.rotate.x}, ${this.svg.cx}, ${this.svg.cy})
                      scale(${this.transform.scale.x}, ${this.transform.scale.y})
                      "
           style="transform-origin:center;">
          <svg style="overflow:visible;">
            <g class="toolset__group" transform="translate(${this.svg.cx/this.transform.scale.x}, ${this.svg.cy/this.transform.scale.y})">
              ${this.renderToolset()}
            </g>
            </svg>
        </g>
      `:svg`
        <g id="toolset-${this.toolsetId}" class="toolset__group-outer"
           transform="rotate(${this.transform.rotate.x}) scale(${this.transform.scale.x}, ${this.transform.scale.y})"
           style="transform-origin:center; transform-box:fill-box;">
          <svg style="overflow:visible;">
            <g class="toolset__group" transform="translate(${this.svg.cx}, ${this.svg.cy})">
              ${this.renderToolset()}
            </g>
            </svg>
        </g>
      `}}class BaseTool{constructor(t,s,e){this.toolId=Math.random().toString(36).substr(2,9),this.toolset=t,this._card=this.toolset._card,this.config=s,this.dev={...this._card.dev},this.toolsetPos=e,this.svg={},this.svg.cx=Utils.calculateSvgCoordinate(s.position.cx,0),this.svg.cy=Utils.calculateSvgCoordinate(s.position.cy,0),this.svg.height=s.position.height?Utils.calculateSvgDimension(s.position.height):0,this.svg.width=s.position.width?Utils.calculateSvgDimension(s.position.width):0,this.svg.x=this.svg.cx-this.svg.width/2,this.svg.y=this.svg.cy-this.svg.height/2,this.classes={},this.classes.toolset={},this.classes.tool={},this.styles={},this.styles.toolset={},this.styles.tool={},this.animationClass={},this.animationClassHasChanged=!0,this.animationStyle={},this.animationStyleHasChanged=!0,this.config?.show?.style||(this.config.show||(this.config.show={}),this.config.show.style="default"),this.colorStops={},this.config.colorstops&&this.config.colorstops.colors&&Object.keys(this.config.colorstops.colors).forEach((t=>{this.colorStops[t]=this.config.colorstops.colors[t]})),"colorstop"==this.config.show.style&&this.config?.colorstops.colors&&(this.sortedColorStops=Object.keys(this.config.colorstops.colors).map((t=>Number(t))).sort(((t,s)=>t-s)))}set value(t){let s=t;if(this.dev.debug&&console.log("BaseTool set value(state)",s),void 0!==s&&this._stateValue?.toLowerCase()==s.toLowerCase())return!1;if(this.derivedEntity=null,this.config.derived_entity&&(this.derivedEntity=Templates.getJsTemplateOrValue(this,t,Merge.mergeDeep(this.config.derived_entity)),s=this.derivedEntity.state?.toString()),this._stateValuePrev=this._stateValue||s,this._stateValue=s,this._stateValueIsDirty=!0,null!=this._stateValue&&void 0!==this._stateValue){var e=!1;return this.activeAnimation=null,this.config.animations&&Object.keys(this.config.animations).map((t=>{this.config.entity_index;var s=Templates.getJsTemplateOrValue(this,this._stateValue,Merge.mergeDeep(this.config.animations[t]));if(e)return!0;switch(s.operator?s.operator:"=="){case"==":e=this._stateValue.toLowerCase()==s.state.toLowerCase();break;case"!=":e=this._stateValue.toLowerCase()!=s.state.toLowerCase();break;case">":e=Number(this._stateValue.toLowerCase())>Number(s.state.toLowerCase());break;case"<":e=Number(this._stateValue.toLowerCase())<Number(s.state.toLowerCase());break;case">=":e=Number(this._stateValue.toLowerCase())>=Number(s.state.toLowerCase());break;case"<=":e=Number(this._stateValue.toLowerCase())<=Number(s.state.toLowerCase());break;default:e=!1}if(this.dev.debug&&console.log("BaseTool, animation, match, value, config, operator",e,this._stateValue,s.state,s.operator),!e)return!0;this.animationClass&&s.reuse||(this.animationClass={}),s.classes&&(this.animationClass=Merge.mergeDeep(this.animationClass,s.classes)),this.animationStyle&&s.reuse||(this.animationStyle={}),s.styles&&(this.animationStyle=Merge.mergeDeep(this.animationStyle,s.styles)),this.animationStyleHasChanged=!0,this.item=s,this.activeAnimation=s})),!0}}MergeAnimationStyleIfChanged(t){this.animationStyleHasChanged&&(this.animationStyleHasChanged=!1,this.styles=t?Merge.mergeDeep(t,this.config.styles,this.animationStyle):Merge.mergeDeep(this.config.styles,this.animationStyle))}MergeAnimationClassIfChanged(t){this.animationClassHasChanged=!0,this.animationClassHasChanged&&(this.animationClassHasChanged=!1,this.classes=t?Merge.mergeDeep(t,this.config.classes,this.animationClass):Merge.mergeDeep(this.config.classes,this.animationClass))}MergeColorFromState(t){if(this.config.hasOwnProperty("entity_index")){const s=this.getColorFromState(this._stateValue);""!=s&&(this.config[this.config.show.style].fill&&(t.fill=s),this.config[this.config.show.style].stroke&&(t.stroke=s))}}getColorFromState(t){var s="";switch(this.config.show.style){case"default":break;case"fixedcolor":s=this.config.color;break;case"colorstop":case"colorstops":case"colorstopgradient":s=this._card._calculateColor(t,this.colorStops,"colorstopgradient"===this.config.show.style);break;case"minmaxgradient":s=this._card._calculateColor(t,this.colorStopsMinMax,!0)}return s}}class RangeSliderTool extends BaseTool{constructor(t,s,e){super(t,Merge.mergeDeep({position:{orientation:"horizontal",length:80},styles:{slider:{"stroke-linecap":"round",stroke:"var(--primary-text-color)",opacity:"1.0","stroke-width":"2"}}},s),e),this.svg.length=Utils.calculateSvgDimension(s.position.length),this.svg.handle={},this.svg.handle.width=Utils.calculateSvgDimension(s.handle.width),this.svg.handle.height=Utils.calculateSvgDimension(s.handle.height),this.svg.handle.popout=Utils.calculateSvgDimension(s.handle.popout),"vertical"==this.config.position.orientation?(this.svg.x1=this.svg.cx,this.svg.y1=this.svg.cy-this.svg.length/2,this.svg.x2=this.svg.cx,this.svg.y2=this.svg.cy+this.svg.length/2,this.svg.width=this.svg.handle.width,this.svg.height=this.svg.length):(this.svg.x1=this.svg.cx-this.svg.length/2,this.svg.y1=this.svg.cy,this.svg.x2=this.svg.cx+this.svg.length/2,this.svg.y2=this.svg.cy,this.svg.width=this.svg.length,this.svg.height=this.svg.handle.height),this.svg.scale={},this.svg.scale.min=this.valueToSvg(this,this.config.scale.min),this.svg.scale.max=this.valueToSvg(this,this.config.scale.max),this.elements={},this.deformation=this.svg.handle.popout/4,this.target=this.svg.handle.popout,this._value=null,this.dragging=!1,this.SVG_NS="http://www.w3.org/2000/svg",this.SVG_XLINK="http://www.w3.org/1999/xlink",this.rid=null,this.m={x:svg.x1,y:this.svg.y1},this.stepValue=2,this.velocity=10,this.dev.debug&&console.log("RangeSliderTool constructor coords, dimensions",this.coords,this.dimensions,this.svg,this.config)}svgCoordinateToSliderValue(t,s){if("horizontal"==t.config.position.orientation){var e=s.x-t.svg.x1,i=e/t.svg.length,o=(t.config.scale.max-t.config.scale.min)*i+t.config.scale.min;return this.dev.debug&&console.log("SLIDER - svgCoordinateToSliderValue results)",e,i,o),o}if("vertical"==t.config.position.orientation){var a=(t.svg.y2-s.y)/t.svg.length;o=(t.config.scale.max-t.config.scale.min)*a+t.config.scale.min;return this.dev.debug&&console.log("SLIDER - svgCoordinateToSliderValue results)",e,i,o),o}}valueToSvg(t,s){if("horizontal"==this.config.position.orientation){var e=Utils.calculateValueBetween(this.config.scale.min,this.config.scale.max,s)*this.svg.length;return this.svg.x1+e}if("vertical"==this.config.position.orientation){var i=Utils.calculateValueBetween(this.config.scale.min,this.config.scale.max,s)*this.svg.length;return this.svg.y2+i}}updateValue(){let t=this.target-this._value,s=t/this.velocity;this._value+=s,Math.abs(t)<.01&&this.rid&&(window.cancelAnimationFrame(this.rid),this.rid=null)}updatePath(t,s){"horizontal"==t.config.position.orientation?(t.d=t.curvedPath(s.x,t.svg.y+t.svg.handle.height/2,t.deformation,t._value),t.elements.path.setAttributeNS(null,"d",t.d),t.elements.thumb.setAttributeNS(null,"r",1+t._value/3),t.elements.thumb.setAttributeNS(null,"cx",s.x)):"vertical"==t.config.position.orientation&&(t.d=t.curvedPath(t.svg.x+t.svg.handle.width/2,s.y,t.deformation,t._value),t.elements.path.setAttributeNS(null,"d",t.d),t.elements.thumb.setAttributeNS(null,"r",1+t._value/3),t.elements.thumb.setAttributeNS(null,"cy",s.y)),t.updateLabel(t,s),t.updateInput(s)}updateLabel(t,s){this.dev.debug&&console.log("SLIDER - updateLabel start",s,t.config.position.orientation),"horizontal"==t.config.position.orientation?(t.elements.label.setAttributeNS(null,"transform",`translate(${s.x-this.svg.handle.width/2},${t.svg.y-t._value}) scale(1)`),t.elements.text.textContent=Math.round(t.svgCoordinateToSliderValue(t,s)),this.dev.debug&&console.log("SLIDER - updateLabel horizontal",s,t.svgCoordinateToSliderValue(t,s))):"vertical"==t.config.position.orientation&&(t.elements.label.setAttributeNS(null,"transform",`translate(${t.svg.x-t._value}, ${s.y-this.svg.handle.height/2}) scale(1)`),t.elements.text.textContent=Math.round(t.svgCoordinateToSliderValue(t,s)),this.dev.debug&&console.log("SLIDER - updateLabel vertical",s,t.svgCoordinateToSliderValue(t,s)))}updateInput(t){}oMousePosSVG(t){(s=this.elements.svg.createSVGPoint()).x=t.clientX,s.y=t.clientY;var s,e=this.elements.svg.getScreenCTM().inverse();return s=s.matrixTransform(e)}curvedPath(t,s,e,i){this.dev.debug&&console.log("SLIDER - curvedPath, args",t,s,e,i);this.svg.y1;if("horizontal"==this.config.position.orientation){var o={cx:Math.max(this.svg.x1,Math.min(t,this.svg.x2)),cy:s-i,r:1},a={cx:Math.max(this.svg.x1,Math.min(o.cx-e,this.svg.x2)),cy:s,r:1},r={cx:Math.max(this.svg.x1,Math.min(o.cx+e,this.svg.x2)),cy:s,r:1},n={cx:Math.max(this.svg.x1,Math.min(o.cx-2*e,this.svg.x2)),cy:s,r:1},h={cx:Math.max(this.svg.x1,Math.min(o.cx+2*e,this.svg.x2)),cy:s,r:1},l=this.svg.x1,c=s,g=this.svg.x2,d=n.cy;d=s}else if("vertical"==this.config.position.orientation){o={cy:Math.max(this.svg.y1,Math.min(s,this.svg.y2)),cx:t-i,r:1},a={cy:Math.max(this.svg.y1,Math.min(o.cy-1*e,this.svg.y2)),cx:t,r:1},r={cy:Math.max(this.svg.y1,Math.min(o.cy+1*e,this.svg.y2)),cx:t,r:1},n={cy:Math.max(this.svg.y1,Math.min(o.cy-2*e,this.svg.y2)),cx:t,r:1},h={cy:Math.max(this.svg.y1,Math.min(o.cy+2*e,this.svg.y2)),cx:t,r:1},l=this.svg.y1,g=this.svg.y2,c=t;l=n.cx,c=this.svg.y1,g=t,d=this.svg.y2}let u=this.interpolatePoint(a,o,1,2);u.r=1;let f=this.interpolatePoint(o,r,1,2);return f.r=1,`M${l},${c} L${n.cx},${n.cy}\n                Q${a.cx},${a.cy} ${u.cx},${u.cy}\n                Q${o.cx},${o.cy} ${f.cx},${f.cy}\n                Q${r.cx},${r.cy} ${h.cx},${h.cy}\n                L${g},${d} L${l+1}, ${c+1}\n  `}interpolatePoint(t,s,e,i){if("horizontal"==this.config.position.orientation)var o={cx:t.cx+(s.cx-t.cx)*(e/i),cy:t.cy+(s.cy-t.cy)*(e/i)};else if("vertical"==this.config.position.orientation)o={cx:t.cx+(s.cx-t.cx)*(e/i),cy:t.cy+(s.cy-t.cy)*(e/i)};return o}firstUpdated(t){const s=this;function Frame(){s.rid=window.requestAnimationFrame(Frame),s.updateValue(),s.updatePath(s,s.m)}this.dev.debug&&console.log("slider - firstUpdated"),this.elements.svg=this._card.shadowRoot.getElementById("rangeslider-".concat(this.toolId)),this.elements.path=this.elements.svg.querySelector("path"),this.elements.thumb=this.elements.svg.querySelector("circle"),this.elements.label=this.elements.svg.querySelector("#_2 path#label-".concat(this.toolId)),this.elements.text=this.elements.svg.querySelector("#_2 text textPath"),this.dev.debug&&console.log("slider - firstUpdated svg = ",this.elements.svg,"path=",this.elements.path,"thumb=",this.elements.thumb,"label=",this.elements.label,"text=",this.elements.text),this.elements.svg.addEventListener("pointerdown",(t=>{this.dragging=!0,this.m=this.oMousePosSVG(t),this.dev.debug&&console.log("pointerDOWN",Math.round(100*this.m.x)/100),this.target=this.svg.handle.popout,Frame()})),this.elements.svg.addEventListener("pointerup",(()=>{this.dragging=!1,this.target=0,this.dev.debug&&console.log("pointerUP"),Frame()})),this.elements.svg.addEventListener("pointerout",(()=>{this.dragging=!1,this.target=0,this.dev.debug&&console.log("pointerOUT"),Frame()})),this.elements.svg.addEventListener("pointermove",(t=>{this.dragging&&(this.m=this.oMousePosSVG(t),this.dev.debug&&console.log("pointerMOVE",this.m.x,Math.round(100*this.m.x)/100),this.target=this.svg.handle.popout,Frame())}))}set value(t){return super.value=t}_renderRangeSlider(){this.dev.debug&&console.log("slider - _renderRangeSlider");let t=Merge.mergeDeep(this.config.styles);t.handle["text-anchor"]="middle",t.handle["alignment-baseline"]="middle";const s=[],e=this.svg.handle.width/(2*this.svg.handle.width+2*this.svg.handle.height)*50;return s.push(svg`
        <g id="poep-${this.toolId}" >
          <rect x="${this.svg.x1}" y="${this.svg.y1}" width="${this.svg.width}" height="${this.svg.height}" style="fill: none" pointer-events="all"/>

          <path d="M1,1 L20,20" stroke="var(--theme-gradient-color-01)" stroke-width="5" fill="var(--theme-gradient-color-03)" pointer-events="none" stroke-linecap="round"/>
          <g id="_2" pointer-events="none">
            <path id="label-${this.toolId}" transform="translate(100,220) scale(5)"
              d="M 0 0 h ${this.svg.handle.width} v ${this.svg.handle.height} h -${this.svg.handle.width} v -${this.svg.handle.height}"
              style="${styleMap(t.slider)}"/>

            <circle cx="${this.svg.x}" cy="${this.svg.y}" r="1" fill="none" pointer-events="none"/>

            <text text-anchor="middle" transform="translate(0,${this.svg.handle.height/4})" pointer-events="none" >
            <textPath startOffset="${e}%" style="${styleMap(t.handle)}" href="#label-${this.toolId}" pointer-events="none">
            50
            </textPath>
          </g>
        </g>
      `),s}render(){return svg`
      <svg  xmlns="http://www.w3.org/2000/svg" id="rangeslider-${this.toolId}" class="rangeslider" pointer-events="all"
      >
        ${this._renderRangeSlider()}
      </svg>
    `}}class RangeSliderTool2 extends BaseTool{constructor(t,s,e){switch(super(t,Merge.mergeDeep({descr:"none",position:{cx:50,cy:50,orientation:"horizontal",track:{width:16,height:7,radius:3.5},thumb:{width:9,height:9,radius:4.5,offset:4.5},label:{placement:"none"}},show:{uom:"end"},classes:{tool:{"sak-slider":!0,hover:!0},capture:{"sak-slider__capture":!0},track:{"sak-slider__track":!0},thumb:{"sak-slider__thumb":!0},label:{"sak-slider__value":!0},uom:{"sak-slider__uom":!0}},styles:{tool:{},capture:{},track:{},thumb:{},label:{},uom:{}}},s),e),this.svg.track={},this.svg.track.radius=Utils.calculateSvgDimension(this.config.position.track.radius),this.svg.thumb={},this.svg.thumb.radius=Utils.calculateSvgDimension(this.config.position.thumb.radius),this.svg.thumb.offset=Utils.calculateSvgDimension(this.config.position.thumb.offset),this.svg.capture={},this.svg.label={},this.config.position.orientation){default:case"horizontal":case"vertical":this.svg.capture.width=Utils.calculateSvgDimension(this.config.position.capture.width||1.1*this.config.position.track.width),this.svg.capture.height=Utils.calculateSvgDimension(this.config.position.capture.height||3*this.config.position.thumb.height),this.svg.track.width=Utils.calculateSvgDimension(this.config.position.track.width),this.svg.track.height=Utils.calculateSvgDimension(this.config.position.track.height),this.svg.thumb.width=Utils.calculateSvgDimension(this.config.position.thumb.width),this.svg.thumb.height=Utils.calculateSvgDimension(this.config.position.thumb.height),this.svg.capture.x1=this.svg.cx-this.svg.capture.width/2,this.svg.capture.y1=this.svg.cy-this.svg.capture.height/2,this.svg.track.x1=this.svg.cx-this.svg.track.width/2,this.svg.track.y1=this.svg.cy-this.svg.track.height/2,this.svg.thumb.x1=this.svg.cx-this.svg.thumb.width/2,this.svg.thumb.y1=this.svg.cy-this.svg.thumb.height/2}switch(this.config.position.orientation){case"vertical":this.svg.track.y2=this.svg.cy+this.svg.track.height/2}switch(this.config.position.label.placement){case"position":this.svg.label.cx=Utils.calculateSvgCoordinate(this.config.position.label.cx,0),this.svg.label.cy=Utils.calculateSvgCoordinate(this.config.position.label.cy,0);break;case"thumb":this.svg.label.cx=this.svg.cx,this.svg.label.cy=this.svg.cy}this.classes.capture={},this.classes.track={},this.classes.thumb={},this.classes.label={},this.classes.uom={},this.styles.capture={},this.styles.track={},this.styles.thumb={},this.styles.label={},this.styles.uom={},this.svg.scale={},this.svg.scale.min=this.valueToSvg(this,this.config.scale.min),this.svg.scale.max=this.valueToSvg(this,this.config.scale.max),this.svg.scale.step=this.config.scale.step,this.dev.debug&&console.log("RangeSliderTool2 constructor coords, dimensions",this.coords,this.dimensions,this.svg,this.config)}svgCoordinateToSliderValue(t,s){let e,i;switch(t.config.position.orientation){case"horizontal":i=(s.x-t.svg.track.x1)/t.svg.track.width,console.log("svgCoordinateToSliderValue, m.x, xpos, scalePos",s.x,t.svg.track.x1,i);break;case"vertical":i=(t.svg.track.y2-s.y)/t.svg.track.height,console.log("svgCoordinateToSliderValue, m.y, ypos, scalePos",s.y,t.svg.track.y1,i)}return e=(t.config.scale.max-t.config.scale.min)*i+t.config.scale.min,e=Math.round(e/this.svg.scale.step)*this.svg.scale.step,e=Math.max(Math.min(this.config.scale.max,e),this.config.scale.min),e}valueToSvg(t,s){if("horizontal"==t.config.position.orientation){var e=Utils.calculateValueBetween(t.config.scale.min,t.config.scale.max,s)*t.svg.track.width;return t.svg.track.x1+e}if("vertical"==t.config.position.orientation){var i=Utils.calculateValueBetween(t.config.scale.min,t.config.scale.max,s)*t.svg.track.height;return t.svg.track.y2-i}}updateValue(t,s){this._value=this.svgCoordinateToSliderValue(t,s);Math.abs(0)<.01&&this.rid&&(window.cancelAnimationFrame(this.rid),this.rid=null)}updateThumb(t,s){switch(t.config.position.orientation){default:case"horizontal":if(this.config.position.label.placement,this.dragging){const e="thumb"==this.config.position.label.placement?-50:0,i=`translate(${s.x}px , ${e}px)`;console.log("updateThumb",`translate(${s.x}px, ${e}px)`),t.elements.thumbGroup.style.transform=i}else t.elements.thumbGroup.style.transform=`translate(${s.x}px, 0px)`;break;case"vertical":if(this.dragging){const e=`translate(${"thumb"==this.config.position.label.placement?-50:0}px, ${s.y}px)`;t.elements.thumbGroup.style.transform=e}else t.elements.thumbGroup.style.transform=`translate(0px, ${s.y}px)`}t.updateLabel(t,s)}updateLabel(t,s){console.log("updateLabel",t.elements.label),this.dev.debug&&console.log("SLIDER - updateLabel start",s,t.config.position.orientation),t.labelValue2=Math.round(t.svgCoordinateToSliderValue(t,s)).toString(),t.elements.label.textContent=t.labelValue2}oMousePosSVG(t){(s=this.elements.svg.createSVGPoint()).x=t.clientX,s.y=t.clientY;var s,e=this.elements.svg.getScreenCTM().inverse();return s=s.matrixTransform(e)}callService(){if(void 0!==this.labelValue2){if(this.labelValuePrev!=this.labelValue2){this.labelValuePrev=this.labelValue2;const[s,e]=this.config.slider_action.service.split(".",2);var t={...this.config.slider_action.service};(t={})[this.config.slider_action.parameter]=this.labelValue2,t.entity_id=this._card.entities[this.config.entity_index].entity_id,console.log("callService, data=",s,e,t),this._card._hass.callService(s,e,t)}this.dragging&&(this.timeOutId=setTimeout((()=>this.callService()),250))}}firstUpdated(t){const s=this;function Frame(){s.rid=window.requestAnimationFrame(Frame),s.updateValue(s,s.m),s.updateThumb(s,s.m),console.log("Frame",s.toolId)}this.labelValue=this._stateValue,this.dev.debug&&console.log("slider - firstUpdated"),this.elements={},this.elements.svg=this._card.shadowRoot.getElementById("rangeslider-".concat(this.toolId)),this.elements.track=this.elements.svg.querySelector("#rs-track"),this.elements.thumbGroup=this.elements.svg.querySelector("#rs-thumb-group"),this.elements.thumb=this.elements.svg.querySelector("#rs-thumb"),this.elements.label=this.elements.svg.querySelector("#rs-label tspan"),this.dev.debug&&console.log("slider - firstUpdated svg = ",this.elements.svg,"path=",this.elements.path,"thumb=",this.elements.thumb,"label=",this.elements.label,"text=",this.elements.text),this.elements.svg.addEventListener("pointerdown",(t=>{this.dragging=!0,this.timeOutId=setTimeout((()=>this.callService()),250),this.m=this.oMousePosSVG(t),this.elements.svg.hasPointerCapture(t.pointerId)||this._card.isSafari||this._card.iOS||this.elements.svg.setPointerCapture(t.pointerId),"horizontal"==this.config.position.orientation?this.m.x=Math.round(this.m.x/this.svg.scale.step)*this.svg.scale.step:this.m.y=Math.round(this.m.y/this.svg.scale.step)*this.svg.scale.step,console.log("pointerdown",this.svg.scale,this.m),this.dev.debug&&console.log("pointerDOWN",Math.round(100*this.m.x)/100),Frame()})),this.elements.svg.addEventListener("pointerup",(t=>{this.dragging=!1,clearTimeout(this.timeOutId),this.target=0,this.elements.svg.hasPointerCapture(t.pointerId)||this._card.isSafari||this._card.iOS||this.elements.svg.releasePointerCapture(t.pointerId),this.dev.debug&&console.log("pointerUP"),Frame(),this.callService()})),this.elements.svg.addEventListener("pointermove",(t=>{let s;if(this.dragging){switch(this.m=this.oMousePosSVG(t),this.config.position.orientation){case"horizontal":const t=this.m.x;s=this.svgCoordinateToSliderValue(this,this.m),this.m.x=this.valueToSvg(this,s),this.m.x=Math.max(this.svg.scale.min,Math.min(this.m.x,this.svg.scale.max));const e=this.m.x;this.m.x=Math.round(this.m.x/this.svg.scale.step)*this.svg.scale.step;const i=this.m.x;console.log("pointermove horizontal",this.m,s,t,e,i);break;case"vertical":const o=this.m.y;s=this.svgCoordinateToSliderValue(this,this.m),this.m.y=this.valueToSvg(this,s);const a=this.m.y;this.m.y=Math.round(this.m.y/this.svg.scale.step)*this.svg.scale.step;const r=this.m.y;console.log("pointermove vertical",this.m,s,o,a,r)}Frame()}}))}set value(t){var s=super.value=t;return this.dragging||(this.labelValue=this._stateValue),s}_renderUom(){if("none"===this.config.show.uom)return svg``;{this.MergeColorFromState(this.styles.uom),this.MergeAnimationStyleIfChanged();var t=this.styles.label["font-size"],s=.5,e="em";const i=t.match(/\D+|\d*\.?\d+/g);2==i.length?(s=.6*Number(i[0]),e=i[1]):console.error("Cannot determine font-size for state/unit",t),t={"font-size":s+e},this.styles.uom=Merge.mergeDeep(this.config.styles.uom,t);const o=this._card._buildUom(this.derivedEntity,this._card.entities[this.config.entity_index],this._card.config.entities[this.config.entity_index]);return"end"===this.config.show.uom?svg`
          <tspan class="${classMap(this.classes.uom)}" dx="-0.1em" dy="-0.35em"
            style="${styleMap(this.styles.uom)}">
            ${o}</tspan>
        `:"bottom"===this.config.show.uom?svg`
          <tspan class="${classMap(this.classes.uom)}" x="${this.svg.x}" dy="1.5em"
            style="${styleMap(this.styles.uom)}">
            ${o}</tspan>
        `:"top"===this.config.show.uom?svg`
          <tspan class="${classMap(this.classes.uom)}" x="${this.svg.x}" dy="-1.5em"
            style="${styleMap(this.styles.uom)}">
            ${o}</tspan>
        `:svg``}}_renderRangeSlider(){let t,s;switch(this.dev.debug&&console.log("slider - _renderRangeSlider"),this.MergeAnimationClassIfChanged(),this.MergeColorFromState(this.styles),this.MergeAnimationStyleIfChanged(this.styles),this.renderValue=this._stateValue,this.dragging?this.renderValue=this.labelValue2:this.elements?.label&&(this.elements.label.textContent=this.renderValue),this.config.position.label.placement){case"none":this.styles.label.display="none";break;case"position":t="horizontal"==this.config.position.orientation?this.valueToSvg(this,Number(this.renderValue)):0,s="vertical"==this.config.position.orientation?this.valueToSvg(this,Number(this.renderValue)):0;break;case"thumb":t="horizontal"==this.config.position.orientation?-this.svg.label.cx+this.valueToSvg(this,Number(this.renderValue)):0,s="vertical"==this.config.position.orientation?this.valueToSvg(this,Number(this.renderValue)):0,this.dragging&&("horizontal"==this.config.position.orientation?s-=50:t-=50)}function renderLabel(t){return"thumb"==this.config.position.label.placement&&t?svg`
      <text id="rs-label">
        <tspan class="${classMap(this.classes.label)}" x="${this.svg.label.cx}" y="${this.svg.label.cy}" style="${styleMap(this.styles.label)}">
        ${this.renderValue}</tspan>
        ${this._renderUom()}
        </text>
        `:"position"!=this.config.position.label.placement||t?void 0:svg`
          <text id="rs-label">
            <tspan class="${classMap(this.classes.label)}" data-placement="position" x="${this.svg.label.cx}" y="${this.svg.label.cy}"
            style="${styleMap(this.styles.label)}">${this.renderValue}</tspan>
            ${this._renderUom()}
          </text>
          `}this.counter||(this.counter=1),this.counter++,this.counter=this.renderValue;const e=[];return e.push(svg`
      <rect id="capture" class="${classMap(this.classes.capture)}" x="${this.svg.capture.x1}" y="${this.svg.capture.y1}"
        width="${this.svg.capture.width}" height="${this.svg.capture.height}" rx="${this.svg.track.radius}"          
      />

      <rect id="rs-track" class="${classMap(this.classes.track)}" x="${this.svg.track.x1}" y="${this.svg.track.y1}"
        width="${this.svg.track.width}" height="${this.svg.track.height}" rx="${this.svg.track.radius}"
        style="${styleMap(this.styles.track)}"
      />

      ${function renderThumbGroup(){return svg`
        <g id="rs-thumb-group" x="${this.svg.thumb.x1}" y="${this.svg.thumb.y1}" style="transform:translate(${t}px, ${s}px)">
          <rect id="rs-thumb" class="${classMap(this.classes.thumb)}" x="${this.svg.thumb.x1}" y="${this.svg.thumb.y1}"
            width="${this.svg.thumb.width}" height="${this.svg.thumb.height}" rx="${this.svg.thumb.radius}" 
            style="${styleMap(this.styles.thumb)}"
          />
          ${renderLabel.call(this,!0)} 
        </g>
      `}.call(this)}
      ${renderLabel.call(this,!1)}
      `),e}render(){return svg`
      <svg xmlns="http://www.w3.org/2000/svg" id="rangeslider-${this.toolId}" overflow="visible" pointer-events="all"
      >
        ${this._renderRangeSlider()}
      </svg>
    `}}class LineTool extends BaseTool{constructor(t,s,e){super(t,Merge.mergeDeep({position:{orientation:"vertical",length:"10",cx:"50",cy:"50"},classes:{tool:{"sak-line":!0,hover:!0},line:{"sak-line__line":!0}},styles:{tool:{},line:{}}},s),e),"vertical"!=this.config.position.orientation&&"horizontal"!=this.config.position.orientation||(this.svg.length=Utils.calculateSvgDimension(s.position.length)),"fromto"==this.config.position.orientation&&(this.svg.x1=Utils.calculateSvgCoordinate(s.position.x1,this.toolsetPos.cx),this.svg.y1=Utils.calculateSvgCoordinate(s.position.y1,this.toolsetPos.cy),this.svg.x2=Utils.calculateSvgCoordinate(s.position.x2,this.toolsetPos.cx),this.svg.y2=Utils.calculateSvgCoordinate(s.position.y2,this.toolsetPos.cy)),"vertical"==this.config.position.orientation?(this.svg.x1=this.svg.cx,this.svg.y1=this.svg.cy-this.svg.length/2,this.svg.x2=this.svg.cx,this.svg.y2=this.svg.cy+this.svg.length/2):"horizontal"==this.config.position.orientation?(this.svg.x1=this.svg.cx-this.svg.length/2,this.svg.y1=this.svg.cy,this.svg.x2=this.svg.cx+this.svg.length/2,this.svg.y2=this.svg.cy):"fromto"==this.config.position.orientation&&(this.svg.x1=this.svg.x1,this.svg.y1=this.svg.y1,this.svg.x2=this.svg.x2,this.svg.y2=this.svg.y2),this.classes.line={},this.styles.line={},this.dev.debug&&console.log("LineTool constructor coords, dimensions",this.coords,this.dimensions,this.svg,this.config)}_renderLine(){return this.MergeAnimationClassIfChanged(),this.MergeColorFromState(this.styles.line),this.MergeAnimationStyleIfChanged(),this.dev.debug&&console.log("_renderLine",this.config.position.orientation,this.svg.x1,this.svg.y1,this.svg.x2,this.svg.y2),svg`
      <line class="${classMap(this.classes.line)}"
        x1="${this.svg.x1}"
        y1="${this.svg.y1}"
        x2="${this.svg.x2}"
        y2="${this.svg.y2}"
        style="${styleMap(this.styles.line)}"/>
      `}render(){return svg`
      <g id="line-${this.toolId}" class="${classMap(this.styles.tool)}"
        @click=${t=>this._card.handleEvent(t,this._card.config.entities[this.config.entity_index])}>
        ${this._renderLine()}
      </g>
    `}}class CircleTool extends BaseTool{constructor(t,s,e){super(t,Merge.mergeDeep({position:{cx:50,cy:50,radius:50},classes:{tool:{"sak-circle":!0,hover:!0},circle:{"sak-circle__circle":!0}},styles:{tool:{},circle:{}}},s),e),this.svg.radius=Utils.calculateSvgDimension(s.position.radius),this.classes.circle={},this.styles.circle={},this.dev.debug&&console.log("CircleTool constructor config, svg",this.toolId,this.config,this.svg)}set value(t){return super.value=t}_renderCircle(){return this.MergeAnimationClassIfChanged(),this.MergeColorFromState(this.styles.circle),this.MergeAnimationStyleIfChanged(),svg`
      <circle class="${classMap(this.classes.circle)}"
        cx="${this.svg.cx}"% cy="${this.svg.cy}"% r="${this.svg.radius}"
        style="${styleMap(this.styles.circle)}"
      </circle>

      `}render(){return svg`
      <g "" id="circle-${this.toolId}" class="${classMap(this.classes.tool)}" overflow="visible" transform-origin="${this.svg.cx} ${this.svg.cy}"
        @click=${t=>this._card.handleEvent(t,this._card.config.entities[this.config.entity_index])}>
        ${this._renderCircle()}
      </g>
    `}}class SwitchTool extends BaseTool{constructor(t,s,e){const i={position:{cx:50,cy:50,orientation:"horizontal",track:{width:16,height:7,radius:3.5},thumb:{width:9,height:9,radius:4.5,offset:4.5}},classes:{tool:{"sak-switch":!0,hover:!0},track:{"sak-switch__track":!0},thumb:{"sak-switch__thumb":!0}},styles:{tool:{},track:{},thumb:{}}},o={animations:[{state:"on",id:1,styles:{track:{fill:"var(--switch-checked-track-color)","pointer-events":"auto"},thumb:{fill:"var(--switch-checked-button-color)",transform:"translateX(4.5em)","pointer-events":"auto"}}},{state:"off",id:0,styles:{track:{fill:"var(--switch-unchecked-track-color)","pointer-events":"auto"},thumb:{transform:"translateX(-4.5em)","pointer-events":"auto"}}}]},a={animations:[{state:"on",id:1,styles:{track:{fill:"var(--switch-checked-track-color)","pointer-events":"auto"},thumb:{fill:"var(--switch-checked-button-color)",transform:"translateY(-4.5em)","pointer-events":"auto"}}},{state:"off",id:0,styles:{track:{fill:"var(--switch-unchecked-track-color)","pointer-events":"auto"},thumb:{transform:"translateY(4.5em)","pointer-events":"auto"}}}]};switch(super(t,Merge.mergeDeep(i,s),e),this.svg.track={},this.svg.track.radius=Utils.calculateSvgDimension(this.config.position.track.radius),this.svg.thumb={},this.svg.thumb.radius=Utils.calculateSvgDimension(this.config.position.thumb.radius),this.svg.thumb.offset=Utils.calculateSvgDimension(this.config.position.thumb.offset),this.config.position.orientation){default:case"horizontal":this.config=Merge.mergeDeep(i,o,s),this.svg.track.width=Utils.calculateSvgDimension(this.config.position.track.width),this.svg.track.height=Utils.calculateSvgDimension(this.config.position.track.height),this.svg.thumb.width=Utils.calculateSvgDimension(this.config.position.thumb.width),this.svg.thumb.height=Utils.calculateSvgDimension(this.config.position.thumb.height),this.svg.track.x1=this.svg.cx-this.svg.track.width/2,this.svg.track.y1=this.svg.cy-this.svg.track.height/2,this.svg.thumb.x1=this.svg.cx-this.svg.thumb.width/2,this.svg.thumb.y1=this.svg.cy-this.svg.thumb.height/2;break;case"vertical":this.config=Merge.mergeDeep(i,a,s),this.svg.track.width=Utils.calculateSvgDimension(this.config.position.track.height),this.svg.track.height=Utils.calculateSvgDimension(this.config.position.track.width),this.svg.thumb.width=Utils.calculateSvgDimension(this.config.position.thumb.height),this.svg.thumb.height=Utils.calculateSvgDimension(this.config.position.thumb.width),this.svg.track.x1=this.svg.cx-this.svg.track.width/2,this.svg.track.y1=this.svg.cy-this.svg.track.height/2,this.svg.thumb.x1=this.svg.cx-this.svg.thumb.width/2,this.svg.thumb.y1=this.svg.cy-this.svg.thumb.height/2}this.classes.track={},this.classes.thumb={},this.styles.track={},this.styles.thumb={},this.dev.debug&&console.log("SwitchTool constructor config, svg",this.toolId,this.config,this.svg)}set value(t){return super.value=t}_renderSwitch(){return this.MergeAnimationClassIfChanged(),this.MergeAnimationStyleIfChanged(),svg`
      <g>
        <rect class="${classMap(this.classes.track)}" x="${this.svg.track.x1}" y="${this.svg.track.y1}"
          width="${this.svg.track.width}" height="${this.svg.track.height}" rx="${this.svg.track.radius}"
          style="${styleMap(this.styles.track)}"
        />
        <rect class="${classMap(this.classes.thumb)}" x="${this.svg.thumb.x1}" y="${this.svg.thumb.y1}"
          width="${this.svg.thumb.width}" height="${this.svg.thumb.height}" rx="${this.svg.thumb.radius}" 
          style="${styleMap(this.styles.thumb)}"
        />
      </g>
      `}render(){return svg`
      <g id="switch-${this.toolId}" class="${classMap(this.classes.tool)}" overflow="visible" transform-origin="${this.svg.cx} ${this.svg.cy}"
        @click=${t=>this._card.handleEvent(t,this._card.config.entities[this.config.entity_index])}>
        ${this._renderSwitch()}
      </g>
    `}}class RegPolyTool extends BaseTool{constructor(t,s,e){super(t,Merge.mergeDeep({position:{cx:50,cy:50,radius:50,side_count:6,side_skip:1,angle_offset:0},classes:{tool:{"sak-polygon":!0,hover:!0},regpoly:{"sak-polygon__regpoly":!0}},styles:{tool:{},regpoly:{}}},s),e),this.svg.radius=Utils.calculateSvgDimension(s.position.radius),this.classes.regpoly={},this.styles.regpoly={},this.dev.debug&&console.log("RegPolyTool constructor config, svg",this.toolId,this.config,this.svg)}set value(t){return super.value=t}_renderRegPoly(){return this.MergeColorFromState(this.styles.regpoly),this.MergeAnimationStyleIfChanged(),svg`
      <path class="${classMap(this.classes.regpoly)}"
        d="${function(t,s,e,i,o,a){for(var r=2*Math.PI/t,n=i+r,h="",l=0;l<t;l++)n+=s*r,h+=(0===l?"M":"L")+(o+~~(e*Math.cos(n)))+" "+(a+~~(e*Math.sin(n)))+" ",l*s%t==0&&l>0&&(n+=r,h+="M"+(o+~~(e*Math.cos(n)))+" "+(a+~~(e*Math.sin(n)))+" ");return h+="z"}(this.config.position.side_count,this.config.position.side_skip,this.svg.radius,this.config.position.angle_offset,this.svg.cx,this.svg.cy)}"
        style="${styleMap(this.styles.regpoly)}"
      />
      `}render(){return svg`
      <g "" id="regpoly-${this.toolId}" class="${classMap(this.classes.tool)}" transform-origin="${this.svg.cx} ${this.svg.cy}"
        @click=${t=>this._card.handleEvent(t,this._card.config.entities[this.config.entity_index])}>
        ${this._renderRegPoly()}
      </g>
    `}}class UserSvgTool extends BaseTool{constructor(t,s,e){super(t,Merge.mergeDeep({position:{cx:50,cy:50,height:50,width:50},styles:{usersvg:{}}},s),e),this.images={},this.images=Object.assign({},...this.config.images),this.item={},this.item.image="default",this.dev.debug&&console.log("UserSvgTool constructor config, svg",this.toolId,this.config,this.svg)}set value(t){return super.value=t}_renderUserSvg(){return this.MergeAnimationStyleIfChanged(),svg`
      <svg class="sak-usersvg__image" x="${this.svg.x}" y="${this.svg.y}" style="${styleMap(this.styles)}">
        <image href="${this.images[this.item.image]}" height="${this.svg.height}" width="${this.svg.width}"/>
      </svg>
      `}render(){return svg`
      <g id="usersvg-${this.toolId}" overflow="visible" transform-origin="${this.svg.cx} ${this.svg.cy}"
        @click=${t=>this._card.handleEvent(t,this._card.config.entities[this.config.entity_index])}>
        ${this._renderUserSvg()}
      </g>
    `}}class RectangleTool extends BaseTool{constructor(t,s,e){super(t,Merge.mergeDeep({position:{cx:50,cy:50,width:50,height:50,rx:0},classes:{tool:{"sak-rectangle":!0,hover:!0},rectangle:{"sak-rectangle__rectangle":!0}},styles:{rectangle:{}}},s),e),this.svg.rx=Utils.calculateSvgDimension(s.position.rx),this.classes.rectangle={},this.styles.rectangle={},this.dev.debug&&console.log("RectangleTool constructor config, svg",this.toolId,this.config,this.svg)}set value(t){return super.value=t}_renderRectangle(){return this.MergeAnimationClassIfChanged(),this.MergeColorFromState(this.styles.rectangle),this.MergeAnimationStyleIfChanged(),svg`
      <rect class="${classMap(this.classes.rectangle)}"
        x="${this.svg.x}" y="${this.svg.y}" width="${this.svg.width}" height="${this.svg.height}" rx="${this.svg.rx}"
        style="${styleMap(this.styles.rectangle)}"/>
      `}render(){return svg`
      <g id="rectangle-${this.toolId}" class="${classMap(this.classes.tool)}" transform-origin="${this.svg.cx}px ${this.svg.cy}px"
        @click=${t=>this._card.handleEvent(t,this._card.config.entities[this.config.entity_index])}>
        ${this._renderRectangle()}
      </g>
    `}}class RectangleToolEx extends BaseTool{constructor(t,s,e){super(t,Merge.mergeDeep({position:{cx:50,cy:50,width:50,height:50,radius:{all:0}},classes:{tool:{"sak-rectex":!0,hover:!0},rectex:{"sak-rectex__rectex":!0}},styles:{rectex:{}}},s),e),this.classes.rectex={},this.styles.rectex={};let i=Math.min(this.svg.height,this.svg.width)/2,o=0;o=Utils.calculateSvgDimension(this.config.position.radius.all),this.svg.radiusTopLeft=+Math.min(i,Math.max(0,Utils.calculateSvgDimension(this.config.position.radius.top_left||this.config.position.radius.left||this.config.position.radius.top||o)))||0,this.svg.radiusTopRight=+Math.min(i,Math.max(0,Utils.calculateSvgDimension(this.config.position.radius.top_right||this.config.position.radius.right||this.config.position.radius.top||o)))||0,this.svg.radiusBottomLeft=+Math.min(i,Math.max(0,Utils.calculateSvgDimension(this.config.position.radius.bottom_left||this.config.position.radius.left||this.config.position.radius.bottom||o)))||0,this.svg.radiusBottomRight=+Math.min(i,Math.max(0,Utils.calculateSvgDimension(this.config.position.radius.bottom_right||this.config.position.radius.right||this.config.position.radius.bottom||o)))||0,this.dev.debug&&console.log("RectangleToolEx constructor config, svg",this.toolId,this.config,this.svg)}set value(t){return super.value=t}_renderRectangleEx(){this.MergeAnimationClassIfChanged(),this.MergeColorFromState(this.styles.rectex),this.MergeAnimationStyleIfChanged();const t=svg`
      <g class="${classMap(this.classes.rectex)}" id="rectex-${this.toolId}">
        <path  d="
            M ${this.svg.x+this.svg.radiusTopLeft} ${this.svg.y}
            h ${this.svg.width-this.svg.radiusTopLeft-this.svg.radiusTopRight}
            q ${this.svg.radiusTopRight} 0 ${this.svg.radiusTopRight} ${this.svg.radiusTopRight}
            v ${this.svg.height-this.svg.radiusTopRight-this.svg.radiusBottomRight}
            q 0 ${this.svg.radiusBottomRight} -${this.svg.radiusBottomRight} ${this.svg.radiusBottomRight}
            h -${this.svg.width-this.svg.radiusBottomRight-this.svg.radiusBottomLeft}
            q -${this.svg.radiusBottomLeft} 0 -${this.svg.radiusBottomLeft} -${this.svg.radiusBottomLeft}
            v -${this.svg.height-this.svg.radiusBottomLeft-this.svg.radiusTopLeft}
            q 0 -${this.svg.radiusTopLeft} ${this.svg.radiusTopLeft} -${this.svg.radiusTopLeft}
            "
            style="${styleMap(this.styles.rectex)}"/>
      </g>
      `;return svg`${t}`}render(){return svg`
      <g id="rectex-${this.toolId}" class="${classMap(this.classes.tool)}"
        @click=${t=>this._card.handleEvent(t,this._card.config.entities[this.config.entity_index])}>
        ${this._renderRectangleEx()}
      </g>
    `}}class EllipseTool extends BaseTool{constructor(t,s,e){super(t,Merge.mergeDeep({position:{cx:50,cy:50,radiusx:50,radiusy:25},classes:{tool:{"sak-ellipse":!0,hover:!0},ellipse:{"sak-ellipse__ellipse":!0}},styles:{ellipse:{}}},s),e),this.svg.radiusx=Utils.calculateSvgDimension(s.position.radiusx),this.svg.radiusy=Utils.calculateSvgDimension(s.position.radiusy),this.classes.ellipse={},this.styles.ellipse={},this.dev.debug&&console.log("EllipseTool constructor coords, dimensions",this.coords,this.dimensions,this.svg,this.config)}_renderEllipse(){return this.MergeAnimationClassIfChanged(),this.MergeColorFromState(this.styles.ellipse),this.MergeAnimationStyleIfChanged(),this.dev.debug&&console.log("EllipseTool - renderEllipse",this.svg.cx,this.svg.cy,this.svg.radiusx,this.svg.radiusy),svg`
      <ellipse class="${classMap(this.classes.ellipse)}"
        cx="${this.svg.cx}"% cy="${this.svg.cy}"%
        rx="${this.svg.radiusx}" ry="${this.svg.radiusy}"
        style="${styleMap(this.styles.ellipse)}"/>
      `}render(){return svg`
      <g id="ellipse-${this.toolId}" class="${classMap(this.classes.tool)}"
        @click=${t=>this._card.handleEvent(t,this._card.config.entities[this.config.entity_index])}>
        ${this._renderEllipse()}
      </g>
    `}}class EntityIconTool extends BaseTool{constructor(t,s,e){super(t,Merge.mergeDeep({classes:{tool:{"sak-icon":!0,hover:!0},icon:{"sak-icon__icon":!0}},styles:{icon:{}}},s),e),this.svg.iconSize=this.config.position.icon_size?this.config.position.icon_size:3,this.svg.iconPixels=4*this.svg.iconSize;this.config.position.cx&&this.config.position.cx,this.config.position.cy&&this.config.position.cy;const i=this.config.position.align?this.config.position.align:"center",o="center"==i?.5:"start"==i?-1:1,a=400/this._card.viewBox.width;this.svg.xpx=this.svg.cx,this.svg.ypx=this.svg.cy,this._card.isSafari||this._card.iOS?(this.svg.iconSize=this.svg.iconSize*a,this.svg.xpx=this.svg.xpx*a-this.svg.iconPixels*o*a,this.svg.ypx=this.svg.ypx*a-.5*this.svg.iconPixels*a-.25*this.svg.iconPixels*a):(this.svg.xpx=this.svg.xpx-this.svg.iconPixels*o,this.svg.ypx=this.svg.ypx-.5*this.svg.iconPixels-.25*this.svg.iconPixels),this.classes.icon={},this.styles.icon={},this.dev.debug&&console.log("EntityIconTool constructor coords, dimensions, config",this.coords,this.dimensions,this.config)}_renderIcon(){this.MergeAnimationClassIfChanged(),this.MergeColorFromState(this.styles.icon),this.MergeAnimationStyleIfChanged();const t=this._card._buildIcon(this._card.entities[this.config.entity_index],this._card.config.entities[this.config.entity_index]);{this.svg.iconSize=this.config.position.icon_size?this.config.position.icon_size:2,this.svg.iconPixels=4*this.svg.iconSize;this.config.position.cx&&this.config.position.cx,this.config.position.cy&&this.config.position.cy;this.svg.iconSize=this.config.position.icon_size?this.config.position.icon_size:2,this.svg.iconPixels=Utils.calculateSvgDimension(this.svg.iconSize);const t=this.config.position.align?this.config.position.align:"center",e="center"==t?.5:"start"==t?-1:1,i=400;var s=i/this._card.viewBox.width;this._card.viewBox.width;this.svg.xpx=this.svg.cx,this.svg.ypx=this.svg.cy,this._card.isSafari||this._card.iOS?(this.svg.iconSize=this.svg.iconSize*s,this.svg.iconPixels=this.svg.iconPixels*s,this.svg.xpx=this.svg.xpx*s-this.svg.iconPixels*e*s,this.svg.ypx=this.svg.ypx*s-.9*this.svg.iconPixels*s,this.svg.xpx=this.svg.cx*s-this.svg.iconPixels*e*s,this.svg.ypx=this.svg.cy*s-this.svg.iconPixels*e*s):(this.svg.xpx=this.svg.cx-this.svg.iconPixels*e,this.svg.ypx=this.svg.cy-this.svg.iconPixels*e,this.dev.debug&&console.log("EntityIconTool::_renderIcon - svg values =",this.toolId,this.svg,this.config.cx,this.config.cy,t,e))}this.alternateColor||(this.alternateColor="white"),this._card.lovelace.sakIconCache[t]?this.iconSvg=this._card.lovelace.sakIconCache[t]:(this.iconSvg=this._card.shadowRoot.getElementById("icon-".concat(this.toolId))?.shadowRoot.querySelectorAll("*")[0]?.path,this.iconSvg?this._card.lovelace.sakIconCache[t]=this.iconSvg:this._card.pleaseReRender());var e=1;return this._card.isSafari||this._card.iOS?this.iconSvg?(this.svg.iconSize=this.config.position.icon_size?this.config.position.icon_size:2,this.svg.iconPixels=Utils.calculateSvgDimension(this.svg.iconSize),this.svg.x1=this.svg.cx-this.svg.iconPixels/2,this.svg.y1=this.svg.cy-this.svg.iconPixels/2,this.svg.x1=this.svg.cx-.5*this.svg.iconPixels,this.svg.y1=this.svg.cy-.5*this.svg.iconPixels,e=this.svg.iconPixels/24,svg`
          <g id="icon-${this.toolId}" class="${classMap(this.classes.icon)}" style="${styleMap(this.styles.icon)}" x="${this.svg.x1}px" y="${this.svg.y1}px" transform-origin="${this.svg.cx} ${this.svg.cy}">
            <rect x="${this.svg.x1}" y="${this.svg.y1}" height="${this.svg.iconPixels}px" width="${this.svg.iconPixels}px" stroke="yellow" stroke-width="0px" opacity="50%" fill="none"></rect>
            <path d="${this.iconSvg}" transform="translate(${this.svg.x1},${this.svg.y1}) scale(${e})"></path>
          <g>
        `):svg`
          <foreignObject width="0px" height="0px" x="${this.svg.xpx}" y="${this.svg.ypx}" overflow="visible">
            <body>
              <div class="div__icon, hover" xmlns="http://www.w3.org/1999/xhtml"
                  style="line-height:${this.svg.iconPixels}px;position:relative;border-style:solid;border-width:0px;border-color:${this.alternateColor};">
                  <ha-icon icon=${t} id="icon-${this.toolId}" class="${classMap(this.classes.icon)}" style="${styleMap(this.styles.icon)}";></ha-icon>
              </div>
            </body>
          </foreignObject>
          `:svg`
        <foreignObject width="${this.svg.iconPixels}px" height="${this.svg.iconPixels}px" x="${this.svg.xpx}" y="${this.svg.ypx}"
                        >
          <div class="div__icon" xmlns="http://www.w3.org/1999/xhtml"
                style="line-height:${this.svg.iconPixels}px;border-style:solid;border-width:0px;border-color:${this.alternateColor};">
            <ha-icon class="${classMap(this.classes.icon)}" icon=${t} id="icon-${this.toolId}" style="${styleMap(this.styles.icon)}"></ha-icon>
          </div>
        </foreignObject>
        `}firstUpdated(t){}render(){return svg`
      <g "" id="icongrp-${this.toolId}" class="${classMap(this.classes.tool)}"
        @click=${t=>this._card.handleEvent(t,this._card.config.entities[this.config.entity_index])} >

        ${this._renderIcon()}
      </g>
    `}}class BadgeTool extends BaseTool{constructor(t,s,e){super(t,Merge.mergeDeep({position:{ratio:30,divider:30},classes:{tool:{"sak-badge":!0,hover:!0},left:{"sak-badge__left":!0},right:{"sak-badge__right":!0}},styles:{left:{},right:{}}},s),e),this.svg.radius=5,this.svg.leftXpos=this.svg.x,this.svg.leftYpos=this.svg.y,this.svg.leftWidth=this.config.position.ratio/100*this.svg.width,this.svg.arrowSize=this.svg.height*this.config.position.divider/100/2,this.svg.divSize=this.svg.height*(100-this.config.position.divider)/100/2,this.svg.rightXpos=this.svg.x+this.svg.leftWidth,this.svg.rightYpos=this.svg.y,this.svg.rightWidth=(100-this.config.ratio)/100*this.svg.width,this.classes.left={},this.classes.right={},this.styles.left={},this.styles.right={},this.dev.debug&&console.log("BadgeTool constructor coords, dimensions",this.svg,this.config)}_renderBadge(){var t;return this.MergeAnimationClassIfChanged(),this.MergeAnimationStyleIfChanged(),t=svg`
      <g  id="badge-${this.toolId}">
        <path class="${classMap(this.classes.right)}" d="
            M ${this.svg.rightXpos} ${this.svg.rightYpos}
            h ${this.svg.rightWidth-this.svg.radius}
            a ${this.svg.radius} ${this.svg.radius} 0 0 1 ${this.svg.radius} ${this.svg.radius}
            v ${this.svg.height-2*this.svg.radius}
            a ${this.svg.radius} ${this.svg.radius} 0 0 1 -${this.svg.radius} ${this.svg.radius}
            h -${this.svg.rightWidth-this.svg.radius}
            v -${this.svg.height-2*this.svg.radius}
            z
            "
            style="${styleMap(this.styles.right)}"/>

        <path class="${classMap(this.classes.left)}" d="
            M ${this.svg.leftXpos+this.svg.radius} ${this.svg.leftYpos}
            h ${this.svg.leftWidth-this.svg.radius}
            v ${this.svg.divSize}
            l ${this.svg.arrowSize} ${this.svg.arrowSize}
            l -${this.svg.arrowSize} ${this.svg.arrowSize}
            l 0 ${this.svg.divSize}
            h -${this.svg.leftWidth-this.svg.radius}
            a -${this.svg.radius} -${this.svg.radius} 0 0 1 -${this.svg.radius} -${this.svg.radius}
            v -${this.svg.height-2*this.svg.radius}
            a ${this.svg.radius} ${this.svg.radius} 0 0 1 ${this.svg.radius} -${this.svg.radius}
            "
            style="${styleMap(this.styles.left)}"/>
      </g>
      `,svg`${t}`}render(){return svg`
      <g id="badge-${this.toolId}" class="${classMap(this.classes.tool)}"
        @click=${t=>this._card.handleEvent(t,this._card.config.entities[this.config.entity_index])}>
        ${this._renderBadge()}
      </g>
    `}}class EntityStateTool extends BaseTool{constructor(t,s,e){super(t,Merge.mergeDeep({show:{uom:"end"},classes:{tool:{"sak-state":!0,hover:!0},state:{"sak-state__value":!0},uom:{"sak-state__uom":!0}},styles:{state:{},uom:{}}},s),e),this.classes.state={},this.classes.uom={},this.styles.state={},this.styles.uom={},this.dev.debug&&console.log("EntityStateTool constructor coords, dimensions",this.coords,this.dimensions,this.svg,this.config)}set value(t){return super.value=t}_renderState(){this.MergeAnimationClassIfChanged(),this.MergeColorFromState(this.styles.state),this.MergeAnimationStyleIfChanged();var t=this._stateValue;if(t&&isNaN(t)){const s=this.config.locale_tag||"component."+this._card._computeDomain(this._card.config.entities[this.config.entity_index].entity)+".state._.";t=this._card.toLocale(s+t.toLowerCase(),t)}return svg`
      <tspan class="${classMap(this.classes.state)}" x="${this.svg.x}" y="${this.svg.y}"
        style="${styleMap(this.styles.state)}">
        ${this.config?.text?.before?this.config.text.before:""}${t}${this.config?.text?.after?this.config.text.after:""}</tspan>
    `}_renderUom(){if("none"===this.config.show.uom)return svg``;{this.MergeColorFromState(this.styles.uom),this.MergeAnimationStyleIfChanged();var t=this.styles.state["font-size"],s=.5,e="em";const i=t.match(/\D+|\d*\.?\d+/g);2==i.length?(s=.6*Number(i[0]),e=i[1]):console.error("Cannot determine font-size for state/unit",t),t={"font-size":s+e},this.styles.uom=Merge.mergeDeep(this.config.styles.uom,t);const o=this._card._buildUom(this.derivedEntity,this._card.entities[this.config.entity_index],this._card.config.entities[this.config.entity_index]);return"end"===this.config.show.uom?svg`
          <tspan class="${classMap(this.classes.uom)}" dx="-0.1em" dy="-0.35em"
            style="${styleMap(this.styles.uom)}">
            ${o}</tspan>
        `:"bottom"===this.config.show.uom?svg`
          <tspan class="${classMap(this.classes.uom)}" x="${this.svg.x}" dy="1.5em"
            style="${styleMap(this.styles.uom)}">
            ${o}</tspan>
        `:"top"===this.config.show.uom?svg`
          <tspan class="${classMap(this.classes.uom)}" x="${this.svg.x}" dy="-1.5em"
            style="${styleMap(this.styles.uom)}">
            ${o}</tspan>
        `:svg``}}render(){return svg`
    <g class="${classMap(this.classes.tool)}">
        <text @click=${t=>this._card.handleEvent(t,this._card.config.entities[this.config.entity_index])}>
          ${this._renderState()}
          ${this._renderUom()}
        </text>
      </g>
      `}}class EntityNameTool extends BaseTool{constructor(t,s,e){super(t,Merge.mergeDeep({classes:{tool:{"sak-name":!0,hover:!0},name:{"sak-name__name":!0}},styles:{tool:{},name:{}}},s),e),this._name={},this.classes.tool={},this.classes.name={},this.styles.name={},this.dev.debug&&console.log("EntityName constructor coords, dimensions",this.coords,this.dimensions,this.svg,this.config)}_buildName(t,s){return s.name||t.attributes.friendly_name}_renderEntityName(){this.MergeAnimationClassIfChanged(),this.MergeColorFromState(this.styles.name),this.MergeAnimationStyleIfChanged();const t=this._buildName(this._card.entities[this.config.entity_index],this._card.config.entities[this.config.entity_index]);return svg`
        <text>
          <tspan class="${classMap(this.classes.name)}" x="${this.svg.cx}" y="${this.svg.cy}" style="${styleMap(this.styles.name)}">${t}</tspan>
        </text>
      `}render(){return svg`
      <g id="name-${this.toolId}" class="${classMap(this.classes.tool)}"
        @click=${t=>this._card.handleEvent(t,this._card.config.entities[this.config.entity_index])}>
        ${this._renderEntityName()}
      </g>
    `}}class EntityAreaTool extends BaseTool{constructor(t,s,e){super(t,Merge.mergeDeep({classes:{tool:{},area:{"sak-area__area":!0,hover:!0}},styles:{tool:{},area:{}}},s),e),this.classes.area={},this.styles.area={},this.dev.debug&&console.log("EntityAreaTool constructor coords, dimensions",this.coords,this.dimensions,this.svg,this.config)}_buildArea(t,s){return s.area||"?"}_renderEntityArea(){this.MergeAnimationClassIfChanged(),this.MergeColorFromState(this.styles.area),this.MergeAnimationStyleIfChanged();const t=this._buildArea(this._card.entities[this.config.entity_index],this._card.config.entities[this.config.entity_index]);return svg`
        <text>
          <tspan class="${classMap(this.classes.area)}"
          x="${this.svg.cx}" y="${this.svg.cy}" style="${styleMap(this.styles.area)}">${t}</tspan>
        </text>
      `}render(){return svg`
      <g id="area-${this.toolId}" class="${classMap(this.classes.tool)}"
        @click=${t=>this._card.handleEvent(t,this._card.config.entities[this.config.entity_index])}>
        ${this._renderEntityArea()}
      </g>
    `}}class TextTool extends BaseTool{constructor(t,s,e){super(t,Merge.mergeDeep({classes:{tool:{"sak-text":!0},text:{"sak-text__text":!0,hover:!0}},styles:{tool:{},text:{}}},s),e),this.text=this.config.text,this.styles.text={},this.dev.debug&&console.log("TextTool constructor coords, dimensions",this.coords,this.dimensions,this.svg,this.config)}_renderText(){return this.MergeAnimationClassIfChanged(),this.MergeColorFromState(this.styles.text),this.MergeAnimationStyleIfChanged(),svg`
        <text>
          <tspan class="${classMap(this.classes.text)}" x="${this.svg.cx}" y="${this.svg.cy}" style="${styleMap(this.styles.text)}">${this.text}</tspan>
        </text>
      `}render(){return svg`
      <g id="text-${this.toolId}" class="${classMap(this.classes.tool)}"
        @click=${t=>this._card.handleEvent(t,this._card.config.entities[this.config.entity_index])}>
        ${this._renderText()}
      </g>
    `}}class HorseshoeTool extends BaseTool{constructor(t,s,e){super(t,Merge.mergeDeep({position:{cx:50,cy:50,radius:45},card_filter:"card--filter-none",horseshoe_scale:{min:0,max:100,width:3,color:"var(--primary-background-color)"},horseshoe_state:{width:6,color:"var(--primary-color)"},show:{horseshoe:!0,scale_tickmarks:!1,horseshoe_style:"fixed"}},s),e),this.HORSESHOE_RADIUS_SIZE=180,this.TICKMARKS_RADIUS_SIZE=172,this.HORSESHOE_PATH_LENGTH=520/360*Math.PI*this.HORSESHOE_RADIUS_SIZE,this.config.entity_index=this.config.entity_index?this.config.entity_index:0,this.svg.radius=Utils.calculateSvgDimension(this.config.position.radius),this.svg.radius_ticks=Utils.calculateSvgDimension(.95*this.config.position.radius),this.svg.horseshoe_scale={},this.svg.horseshoe_scale.width=Utils.calculateSvgDimension(this.config.horseshoe_scale.width),this.svg.horseshoe_state={},this.svg.horseshoe_state.width=Utils.calculateSvgDimension(this.config.horseshoe_state.width),this.svg.horseshoe_scale.dasharray=52/36*Math.PI*this.svg.radius,this.svg.rotate={},this.svg.rotate.degrees=-220,this.svg.rotate.shiftX=this.svg.cx,this.svg.rotate.shiftY=this.svg.cy,this.colorStops={},this.config.color_stops&&Object.keys(this.config.color_stops).forEach((t=>{this.colorStops[t]=this.config.color_stops[t]})),this.sortedStops=Object.keys(this.colorStops).map((t=>Number(t))).sort(((t,s)=>t-s)),this.colorStopsMinMax={},this.colorStopsMinMax[this.config.horseshoe_scale.min]=this.colorStops[this.sortedStops[0]],this.colorStopsMinMax[this.config.horseshoe_scale.max]=this.colorStops[this.sortedStops[this.sortedStops.length-1]],this.color0=this.colorStops[this.sortedStops[0]],this.color1=this.colorStops[this.sortedStops[this.sortedStops.length-1]],this.angleCoords={x1:"0%",y1:"0%",x2:"100%",y2:"0%"},this.color1_offset="0%",this.dev.debug&&console.log("HorseshoeTool constructor coords, dimensions",this.coords,this.dimensions,this.svg,this.config)}set value(t){if(this._stateValue==t)return!1;this._stateValuePrev=this._stateValue||t,this._stateValue=t,this._stateValueIsDirty=!0;const s=this.config.horseshoe_scale.min||0,e=this.config.horseshoe_scale.max||100,i=Math.min(this._card._calculateValueBetween(s,e,t),1),o=i*this.HORSESHOE_PATH_LENGTH,a=10*this.HORSESHOE_RADIUS_SIZE;this.dashArray=`${o} ${a}`;const r=this.config.show.horseshoe_style;if("fixed"==r)this.stroke_color=this.config.horseshoe_state.color,this.color0=this.config.horseshoe_state.color,this.color1=this.config.horseshoe_state.color,this.color1_offset="0%";else if("autominmax"==r){const s=this._card._calculateColor(t,this.colorStopsMinMax,!0);this.color0=s,this.color1=s,this.color1_offset="0%"}else if("colorstop"==r||"colorstopgradient"==r){const s=this._card._calculateColor(t,this.colorStops,"colorstopgradient"===r);this.color0=s,this.color1=s,this.color1_offset="0%"}else if("lineargradient"==r){const t={x1:"0%",y1:"0%",x2:"100%",y2:"0%"};this.color1_offset=`${Math.round(100*(1-i))}%`,this.angleCoords=t}return this.dev.debug&&console.log("HorseshoeTool set value",this.cardId,t),!0}_renderTickMarks(){const{config:t}=this;if(!t.show.scale_tickmarks)return;const s=t.horseshoe_scale.color?t.horseshoe_scale.color:"var(--primary-background-color)",e=t.horseshoe_scale.ticksize?t.horseshoe_scale.ticksize:(t.horseshoe_scale.max-t.horseshoe_scale.min)/10,i=t.horseshoe_scale.min%e,o=t.horseshoe_scale.min+(0==i?0:e-i),a=(o-t.horseshoe_scale.min)/(t.horseshoe_scale.max-t.horseshoe_scale.min)*260;var r=(t.horseshoe_scale.max-o)/e,n=Math.floor(r);const h=(260-a)/r;Math.floor(n*e+o)<=t.horseshoe_scale.max&&n++;const l=this.svg.horseshoe_scale.width?this.svg.horseshoe_scale.width/2:3;var c,g,d=[];for(g=0;g<n;g++)c=a+(360-g*h-230)*Math.PI/180,d[g]=svg`
        <circle cx="${this.svg.cx-Math.sin(c)*this.svg.radius_ticks}"
                cy="${this.svg.cy-Math.cos(c)*this.svg.radius_ticks}" r="${l}"
                fill="${s}">
      `;return svg`${d}`}_renderHorseShoe(){if(this.config.show.horseshoe)return svg`
      <g id="horseshoe__group-inner" class="horseshoe__group-inner">
        <circle id="horseshoe__scale" class="horseshoe__scale" cx="${this.svg.cx}" cy="${this.svg.cy}" r="${this.svg.radius}"
          fill="${this.fill||"rgba(0, 0, 0, 0)"}"
          stroke="${this.config.horseshoe_scale.color||"#000000"}"
          stroke-dasharray="${this.svg.horseshoe_scale.dasharray}"
          stroke-width="${this.svg.horseshoe_scale.width}"
          stroke-linecap="square"
          transform="rotate(-220 ${this.svg.rotate.shiftX} ${this.svg.rotate.shiftY})"/>

        <circle id="horseshoe__state__value" class="horseshoe__state__value" cx="${this.svg.cx}" cy="${this.svg.cy}" r="${this.svg.radius}"
          fill="${this.config.fill||"rgba(0, 0, 0, 0)"}"
          stroke="url('#horseshoe__gradient-${this.cardId}')"
          stroke-dasharray="${this.dashArray}"
          stroke-width="${this.svg.horseshoe_state.width}"
          stroke-linecap="square"
          transform="rotate(-220 ${this.svg.rotate.shiftX} ${this.svg.rotate.shiftY})"/>

        ${this._renderTickMarks()}
      </g>
    `}render(){return svg`
      <g "" id="horseshoe-${this.toolId}" class="horseshoe__group-outer"
        @click=${t=>this._card.handleEvent(t,this._card.config.entities[this.config.entity_index])}>
        ${this._renderHorseShoe()}
      </g>

      <svg style="width:0;height:0;position:absolute;" aria-hidden="true" focusable="false">
        <linearGradient gradientTransform="rotate(0)" id="horseshoe__gradient-${this.cardId}" x1="${this.angleCoords.x1}", y1="${this.angleCoords.y1}", x2="${this.angleCoords.x2}" y2="${this.angleCoords.y2}">
          <stop offset="${this.color1_offset}" stop-color="${this.color1}" />
          <stop offset="100%" stop-color="${this.color0}" />
        </linearGradient>
      </svg>

    `}}class SparklineBarChartTool extends BaseTool{constructor(t,s,e){super(t,Merge.mergeDeep({position:{cx:50,cy:50,height:25,width:25,margin:.5,orientation:"vertical"},hours:24,barhours:1,color:"var(--primary-color)",classes:{tool:{"sak-barchart":!0,hover:!0},bar:{},line:{"sak-barchart__line":!0,hover:!0}},styles:{tool:{},line:{},bar:{}},colorstops:[],show:{style:"fixedcolor"}},s),e),this.svg.margin=Utils.calculateSvgDimension(this.config.position.margin);const i="vertical"==this.config.position.orientation?this.svg.width:this.svg.height;this.svg.barWidth=(i-(this.config.hours/this.config.barhours-1)*this.svg.margin)/(this.config.hours/this.config.barhours),this._data=[],this._bars=[],this._scale={},this._needsRendering=!1,this.classes.bar={},this.styles.tool={},this.styles.line={},this.stylesBar={},this.dev.debug&&console.log("SparkleBarChart constructor coords, dimensions",this.coords,this.dimensions,this.svg,this.config)}computeMinMax(){let t=this._series[0],s=this._series[0];for(let e=1,i=this._series.length;e<i;e++){let i=this._series[e];t=i<t?i:t,s=i>s?i:s}this._scale.min=t,this._scale.max=s,this._scale.size=s-t,this._scale.size=1.05*(s-t),this._scale.min=s-this._scale.size}set data(t){this._series=Object.assign(t),this.computeBars(),this._needsRendering=!0}set series(t){this._series=Object.assign(t),this.computeBars(),this._needsRendering=!0}hasSeries(){return this.config.entity_index}computeBars({_bars:t}=this){this.computeMinMax(),"minmaxgradient"===this.config.show.style&&(this.colorStopsMinMax={},this.colorStopsMinMax={[this._scale.min.toString()]:this.config.minmaxgradient.colors.min,[this._scale.max.toString()]:this.config.minmaxgradient.colors.max}),"vertical"==this.config.position.orientation?(this.dev.debug&&console.log("bar is vertical"),this._series.forEach(((s,e)=>{t[e]||(t[e]={}),t[e].length=0==this._scale.size?0:(s-this._scale.min)/this._scale.size*this.svg.height,t[e].x1=this.svg.x+this.svg.barWidth/2+(this.svg.barWidth+this.svg.margin)*e,t[e].x2=t[e].x1,t[e].y1=this.svg.y+this.svg.height,t[e].y2=t[e].y1-this._bars[e].length,t[e].dataLength=this._bars[e].length}))):"horizontal"==this.config.position.orientation?(this.dev.debug&&console.log("bar is horizontal"),this._data.forEach(((s,e)=>{t[e]||(t[e]={}),t[e].length=0==this._scale.size?0:(s-this._scale.min)/this._scale.size*this.svg.width,t[e].y1=this.svg.y+this.svg.barWidth/2+(this.svg.barWidth+this.svg.margin)*e,t[e].y2=t[e].y1,t[e].x1=this.svg.x,t[e].x2=t[e].x1+this._bars[e].length,t[e].dataLength=this._bars[e].length}))):this.dev.debug&&console.log("SparklineBarChartTool - unknown barchart orientation (horizontal or vertical)")}_renderBars({_bars:t}=this){var s=[];if(0!=this._bars.length)return this.dev.debug&&console.log("_renderBars IN",this.toolId),this._bars.forEach(((t,e)=>{this.dev.debug&&console.log("_renderBars - bars",t,e);const i=this.getColorFromState(this._series[e]);this.stylesBar[e]||(this.stylesBar[e]={...this.config.styles.bar}),this._bars[e].y2||console.log("sparklebarchart y2 invalid",this._bars[e]),s.push(svg`
        <line id="line-segment-${this.toolId}-${e}" class="${classMap(this.config.classes.line)}"
                  style="${styleMap(this.stylesBar[e])}"
                  x1="${this._bars[e].x1}"
                  x2="${this._bars[e].x2}"
                  y1="${this._bars[e].y1}"
                  y2="${this._bars[e].y2}"
                  data-length="${this._bars[e].dataLength}"
                  stroke="${i}"
                  stroke-width="${this.svg.barWidth}"
                  />
        `)})),this.dev.debug&&console.log("_renderBars OUT",this.toolId),svg`${s}`}render(){return svg`
      <g id="barchart-${this.toolId}" class="${classMap(this.classes.tool)}"
        @click=${t=>this._card.handleEvent(t,this._card.config.entities[this.config.entity_index])}>
        ${this._renderBars()}
      </g>
    `}}class SegmentedArcTool extends BaseTool{constructor(t,s,e){super(t,Merge.mergeDeep({position:{cx:50,cy:50,radius:45,width:3,margin:1.5},color:"var(--primary-color)",classes:{tool:{},foreground:{},background:{}},styles:{foreground:{},background:{}},segments:{},colorstops:[],scale:{min:0,max:100,width:2,offset:-3.5},show:{style:"fixedcolor",scale:!1},isScale:!1,animation:{duration:1.5}},s),e),this.dev.performance&&console.time("--\x3e "+this.toolId+" PERFORMANCE SegmentedArcTool::constructor"),this.svg.radius=Utils.calculateSvgDimension(s.position.radius),this.svg.radiusX=Utils.calculateSvgDimension(s.position.radius_x||s.position.radius),this.svg.radiusY=Utils.calculateSvgDimension(s.position.radius_y||s.position.radius),this.svg.segments={},this.svg.segments.gap=Utils.calculateSvgDimension(this.config.segments.gap),this.svg.scale_offset=Utils.calculateSvgDimension(this.config.scale.offset),this._firstUpdatedCalled=!1,this._stateValue=null,this._stateValuePrev=null,this._stateValueIsDirty=!1,this._renderFrom=null,this._renderTo=null,this.rAFid=null,this.cancelAnimation=!1,this.arcId=null,this._cache=[],this._segmentAngles=[],this._segments={},this._arc={},this._arc.size=Math.abs(this.config.position.end_angle-this.config.position.start_angle),this._arc.clockwise=this.config.position.end_angle>this.config.position.start_angle,this._arc.direction=this._arc.clockwise?1:-1;var i={},o=null;this.config.segments.colorlist?.template&&(o=this.config.segments.colorlist,this._card.lovelace.__lovelace.config.sak_templates[o.template.name]&&(this.dev.debug&&console.log("SegmentedArcTool::constructor - templates colorlist found",o.template.name),i=Templates.replaceVariables2(o.template.variables,this._card.lovelace.__lovelace.config.sak_templates[o.template.name]),this.config.segments.colorlist=i));if("fixedcolor"==this.config.show.style);else if("colorlist"==this.config.show.style){this._segments.count=this.config.segments.colorlist.colors.length,this._segments.size=this._arc.size/this._segments.count,this._segments.gap="undefined"!=this.config.segments.colorlist.gap?this.config.segments.colorlist.gap:1,this._segments.sizeList=[];for(var a=0;a<this._segments.count;a++)this._segments.sizeList[a]=this._segments.size;var r=0;for(a=0;a<this._segments.count;a++)this._segmentAngles[a]={boundsStart:this.config.position.start_angle+r*this._arc.direction,boundsEnd:this.config.position.start_angle+(r+this._segments.sizeList[a])*this._arc.direction,drawStart:this.config.position.start_angle+r*this._arc.direction+this._segments.gap*this._arc.direction,drawEnd:this.config.position.start_angle+(r+this._segments.sizeList[a])*this._arc.direction-this._segments.gap*this._arc.direction},r+=this._segments.sizeList[a];this.dev.debug&&console.log("colorstuff - COLORLIST",this._segments,this._segmentAngles)}else if("colorstops"==this.config.show.style){this._segments.colorStops={},Object.keys(this.config.segments.colorstops.colors).forEach((t=>{t>=this.config.scale.min&&t<=this.config.scale.max&&(this._segments.colorStops[t]=this.config.segments.colorstops.colors[t])})),this._segments.colorStops[this.config.scale.max]="black",this._segments.sortedStops=Object.keys(this._segments.colorStops).map((t=>Number(t))).sort(((t,s)=>t-s)),this._segments.count=this._segments.sortedStops.length-1,this._segments.gap="undefined"!=this.config.segments.colorstops.gap?this.config.segments.colorstops.gap:1;var n=this.config.scale.min,h=this.config.scale.max-this.config.scale.min;this._segments.sizeList=[];for(a=0;a<this._segments.count;a++){var l=this._segments.sortedStops[a+1]-n;n+=l;const t=l/h*this._arc.size;this._segments.sizeList[a]=t}for(r=0,a=0;a<this._segments.count;a++)this._segmentAngles[a]={boundsStart:this.config.position.start_angle+r*this._arc.direction,boundsEnd:this.config.position.start_angle+(r+this._segments.sizeList[a])*this._arc.direction,drawStart:this.config.position.start_angle+r*this._arc.direction+this._segments.gap*this._arc.direction,drawEnd:this.config.position.start_angle+(r+this._segments.sizeList[a])*this._arc.direction-this._segments.gap*this._arc.direction},r+=this._segments.sizeList[a],this.dev.debug&&console.log("colorstuff - COLORSTOPS++ segments",r,this._segmentAngles[a]);this.dev.debug&&console.log("colorstuff - COLORSTOPS++",this._segments,this._segmentAngles,this._arc.direction,this._segments.count)}else this.config.show.style;if(this.config.isScale)this._stateValue=this.config.scale.max;else if(this.config.show.scale){var c=Merge.mergeDeep(this.config);c.id=c.id+"-scale",c.show.scale=!1,c.isScale=!0,c.position.width=this.config.scale.width,c.position.radius=this.config.position.radius-this.config.position.width/2+c.position.width/2+this.config.scale.offset,c.position.radius_x=(this.config.position.radius_x||this.config.position.radius)-this.config.position.width/2+c.position.width/2+this.config.scale.offset,c.position.radius_y=(this.config.position.radius_y||this.config.position.radius)-this.config.position.width/2+c.position.width/2+this.config.scale.offset,this._segmentedArcScale=new SegmentedArcTool(this,c,e);this._segmentedArcScale.objectId}else this._segmentedArcScale=null;if(this.skipOriginal="colorstops"==this.config.show.style||"colorlist"==this.config.show.style,this.skipOriginal&&(this.config.isScale&&(this._stateValuePrev=this._stateValue),this._initialDraw=!1),this._arc.parts=Math.floor(this._arc.size/Math.abs(this.config.segments.dash)),this._arc.partsPartialSize=this._arc.size-this._arc.parts*this.config.segments.dash,this.skipOriginal)this._arc.parts=this._segmentAngles.length,this._arc.partsPartialSize=0;else{for(a=0;a<this._arc.parts;a++)this._segmentAngles[a]={boundsStart:this.config.position.start_angle+a*this.config.segments.dash*this._arc.direction,boundsEnd:this.config.position.start_angle+(a+1)*this.config.segments.dash*this._arc.direction,drawStart:this.config.position.start_angle+a*this.config.segments.dash*this._arc.direction+this.config.segments.gap*this._arc.direction,drawEnd:this.config.position.start_angle+(a+1)*this.config.segments.dash*this._arc.direction-this.config.segments.gap*this._arc.direction};this._arc.partsPartialSize>0&&(this._segmentAngles[a]={boundsStart:this.config.position.start_angle+a*this.config.segments.dash*this._arc.direction,boundsEnd:this.config.position.start_angle+(a+0)*this.config.segments.dash*this._arc.direction+this._arc.partsPartialSize*this._arc.direction,drawStart:this.config.position.start_angle+a*this.config.segments.dash*this._arc.direction+this.config.segments.gap*this._arc.direction,drawEnd:this.config.position.start_angle+(a+0)*this.config.segments.dash*this._arc.direction+this._arc.partsPartialSize*this._arc.direction-this.config.segments.gap*this._arc.direction})}this.starttime=null,this.dev.debug&&console.log("SegmentedArcTool constructor coords, dimensions",this.coords,this.dimensions,this.svg,this.config),this.dev.debug&&console.log("SegmentedArcTool - init",this.toolId,this.config.isScale,this._segmentAngles),this.dev.performance&&console.timeEnd("--\x3e "+this.toolId+" PERFORMANCE SegmentedArcTool::constructor")}get objectId(){return this.toolId}set value(t){return this.dev.debug&&console.log("SegmentedArcTool - set value IN"),!this.config.isScale&&(this._stateValue!=t&&(super.value=t))}firstUpdated(t){this.dev.debug&&console.log("SegmentedArcTool - firstUpdated IN with _arcId/id",this._arcId,this.toolId,this.config.isScale),this._arcId=this._card.shadowRoot.getElementById("arc-".concat(this.toolId)),this._firstUpdatedCalled=!0,this._segmentedArcScale?.firstUpdated(t),this.skipOriginal&&(this.dev.debug&&console.log("RENDERNEW - firstUpdated IN with _arcId/id/isScale/scale/connected",this._arcId,this.toolId,this.config.isScale,this._segmentedArcScale,this._card.connected),this.config.isScale||(this._stateValuePrev=null),this._initialDraw=!0,this._card.requestUpdate())}updated(t){this.dev.debug&&console.log("SegmentedArcTool - updated IN")}render(){return this.dev.debug&&console.log("SegmentedArcTool RENDERNEW - Render IN"),svg`
      <g "" id="arc-${this.toolId}" class="arc">
        <g >
          ${this._renderSegments()}
          </g>
        ${this._renderScale()}
      </g>
    `}_renderScale(){if(this._segmentedArcScale)return this._segmentedArcScale.render()}_renderSegments(){if(this.skipOriginal){this.config.position.start_angle;var t,s=this.config.position.end_angle,e=this.config.position.end_angle,i=this.svg.width,o=(this.config.position.end_angle,this.config.segments.dash,this.config.segments.gap,this.svg.radiusX),a=this.svg.radiusY;this.dev.debug&&console.log("RENDERNEW - IN _arcId, firstUpdatedCalled",this._arcId,this._firstUpdatedCalled);var r=Utils.calculateValueBetween(this.config.scale.min,this.config.scale.max,this._stateValue),n=Utils.calculateValueBetween(this.config.scale.min,this.config.scale.max,this._stateValuePrev);this.dev.debug&&(this._stateValuePrev||console.log("*****UNDEFINED",this._stateValue,this._stateValuePrev,n)),r!=n&&this.dev.debug&&console.log("RENDERNEW _renderSegments diff value old new",this.toolId,n,r),s=r*this._arc.size*this._arc.direction+this.config.position.start_angle,e=n*this._arc.size*this._arc.direction+this.config.position.start_angle;Math.abs(s-this.config.position.start_angle),Math.abs(e-this.config.position.start_angle);var h=[];if(!this.config.isScale)for(var l=0;l<this._segmentAngles.length;l++)t=this.buildArcPath(this._segmentAngles[l].drawStart,this._segmentAngles[l].drawEnd,this._arc.clockwise,this.svg.radiusX,this.svg.radiusY,this.svg.width),h.push(svg`<path id="arc-segment-bg-${this.toolId}-${l}" class="sak-segarc__background"
                              style="${styleMap(this.config.styles.background)}"
                              d="${t}"
                              />`);if(this._firstUpdatedCalled){this.dev.debug&&console.log("RENDERNEW _arcId DOES exist",this._arcId,this.toolId,this._firstUpdatedCalled),this._cache.forEach(((s,e)=>{if(t=s,this.config.isScale){var i=this.config.color;"colorlist"==this.config.show.style&&(i=this.config.segments.colorlist.colors[e]),"colorstops"==this.config.show.style&&(i=this._segments.colorStops[this._segments.sortedStops[e]]),this.styles.foreground[e]||(this.styles.foreground[e]=Merge.mergeDeep(this.config.styles.foreground)),this.styles.foreground[e].fill=i}h.push(svg`<path id="arc-segment-${this.toolId}-${e}" class="sak-segarc__foreground"
                            style="${styleMap(this.styles.foreground[e])}"
                            d="${t}"
                            />`)}));var c={};function animateSegmentsNEW(s,e){var r;s=s||(new Date).getTime();c.startTime||(c.startTime=s,c.runningAngle=c.fromAngle),e.debug&&console.log("RENDERNEW - in animateSegmentsNEW",e.toolId,c);var n,h=s-c.startTime;c.progress=Math.min(h/c.duration,1),c.progress=(n=c.progress,Math.pow(--n,5)+1);const l=e._arc.clockwise?c.toAngle>c.fromAngle:c.fromAngle>c.toAngle;c.frameAngle=c.fromAngle+(c.toAngle-c.fromAngle)*c.progress,-1==e._segmentAngles.findIndex(((t,s)=>e._arc.clockwise?c.frameAngle<=t.boundsEnd&&c.frameAngle>=t.boundsStart:c.frameAngle<=t.boundsStart&&c.frameAngle>=t.boundsEnd))&&console.log("RENDERNEW animateSegments frameAngle not found",c,e._segmentAngles),r=e._segmentAngles.findIndex(((t,s)=>e._arc.clockwise?c.runningAngle<=t.boundsEnd&&c.runningAngle>=t.boundsStart:c.runningAngle<=t.boundsStart&&c.runningAngle>=t.boundsEnd));do{var g=e._segmentAngles[r].drawStart,d=e._arc.clockwise?Math.min(e._segmentAngles[r].boundsEnd,c.frameAngle):Math.max(e._segmentAngles[r].boundsEnd,c.frameAngle),u=e._arc.clockwise?Math.min(e._segmentAngles[r].drawEnd,c.frameAngle):Math.max(e._segmentAngles[r].drawEnd,c.frameAngle);let s;t=e.buildArcPath(g,u,e._arc.clockwise,o,a,i),e.myarc||(e.myarc={}),e.as||(e.as={});const n="arc-segment-".concat(e.toolId).concat("-").concat(r);if(e.as[r]||(e.as[r]=e._card.shadowRoot.getElementById(n)),s=e.as[r],e.myarc[r]=n,s&&(s.setAttribute("d",t),"colorlist"==e.config.show.style&&(s.style.fill=e.config.segments.colorlist.colors[r],e.styles.foreground[r].fill=e.config.segments.colorlist.colors[r]),e.config.show.lastcolor)){var f=e._segments.colorStops[e._segments.sortedStops[r]],p=e._arc.clockwise?e._segmentAngles[r].drawStart:e._segmentAngles[r].drawEnd,m=e._arc.clockwise?e._segmentAngles[r].drawEnd:e._segmentAngles[r].drawStart,v=Math.min(Math.max(0,(d-p)/(m-p)),1);if(f=e._card._getGradientValue(e._segments.colorStops[e._segments.sortedStops[r]],e._segments.colorStops[e._segments.sortedStops[r+1]],v),e.styles.foreground[0].fill=f,e.as[0].style.fill=f,r>0)for(var y=r+1;y--;y>=0)e.styles.foreground[y].fill!=f&&(e.styles.foreground[y].fill=f,e.as[y].style.fill=f),e.styles.foreground[y].fill=f,e.as[y].style.fill=f}e._cache[r]=t,c.frameAngle!=d&&(d+=1e-6*e._arc.direction);var _=r;r=e._segmentAngles.findIndex(((t,s)=>e._arc.clockwise?d<=t.boundsEnd&&d>=t.boundsStart:d<=t.boundsStart&&d>=t.boundsEnd)),e._segmentAngles.findIndex(((t,s)=>e._arc.clockwise?c.frameAngle<=t.boundsEnd&&c.frameAngle>=t.boundsStart:c.frameAngle<=t.boundsStart&&c.frameAngle>=t.boundsEnd)),l||_!=r&&(e.debug&&console.log("RENDERNEW movit - remove path",e.toolId,_),e._arc.clockwise,s.removeAttribute("d"),e._cache[_]=null),c.runningAngle=d,e.debug&&console.log("RENDERNEW - animation loop tween",e.toolId,c,r,_)}while(c.runningAngle!=c.frameAngle);1!=c.progress?e.rAFid=requestAnimationFrame((function(t){animateSegmentsNEW(t,e)})):(c.startTime=null,e.debug&&console.log("RENDERNEW - animation loop ENDING tween",e.toolId,c,r,_))}var g=this;return 1==this._card.connected&&this._renderTo!=this._stateValue&&(this._renderTo=this._stateValue,this.rAFid&&cancelAnimationFrame(this.rAFid),c.fromAngle=e,c.toAngle=s,c.runningAngle=e,c.duration=Math.min(Math.max(this._initialDraw?100:500,this._initialDraw?16:1e3*this.config.animation.duration),5e3),c.startTime=null,this.dev.debug&&console.log("RENDERNEW - tween",this.toolId,c),this.rAFid=requestAnimationFrame((function(t){animateSegmentsNEW(t,g)})),this._initialDraw=!1),svg`${h}`}this.dev.debug&&console.log("RENDERNEW _arcId does NOT exist",this._arcId,this.toolId);for(var d=0;d<this._segmentAngles.length;d++){t=this.buildArcPath(this._segmentAngles[d].drawStart,this._segmentAngles[d].drawEnd,this._arc.clockwise,this.svg.radiusX,this.svg.radiusY,this.config.isScale?this.svg.width:0),this._cache[d]=t;var u=this.config.color;if("colorlist"==this.config.show.style&&(u=this.config.segments.colorlist.colors[d]),"colorstops"==this.config.show.style&&(u=this._segments.colorStops[this._segments.sortedStops[d]]),this.styles.foreground||(this.styles.foreground={}),this.styles.foreground[d]||(this.styles.foreground[d]=Merge.mergeDeep(this.config.styles.foreground)),this.styles.foreground[d].fill=u,this.config.show.lastcolor&&d>0)for(var f=d-1;f--;f>0)this.styles.foreground[f].fill=u;h.push(svg`<path id="arc-segment-${this.toolId}-${d}" class="arc__segment"
                            style="${styleMap(this.styles.foreground[d])}"
                            d="${t}"
                            />`)}return this.dev.debug&&console.log("RENDERNEW - svgItems",h,this._firstUpdatedCalled),svg`${h}`}}polarToCartesian(t,s,e,i,o){var a=(o-90)*Math.PI/180;return{x:t+e*Math.cos(a),y:s+i*Math.sin(a)}}buildArcPath(t,s,e,i,o,a){var r=this.polarToCartesian(this.svg.cx,this.svg.cy,i,o,s),n=this.polarToCartesian(this.svg.cx,this.svg.cy,i,o,t),h=Math.abs(s-t)<=180?"0":"1";const l=e?"0":"1";var c=i-a,g=o-a,d=this.polarToCartesian(this.svg.cx,this.svg.cy,c,g,s),u=this.polarToCartesian(this.svg.cx,this.svg.cy,c,g,t);return["M",r.x,r.y,"A",i,o,0,h,l,n.x,n.y,"L",u.x,u.y,"A",c,g,0,h,"0"==l?"1":"0",d.x,d.y,"Z"].join(" ")}}class devSwissArmyKnifeCard extends LitElement{constructor(){super(),this.connected=!1,this.cardId=Math.random().toString(36).substr(2,9),this.entities=[],this.entitiesStr=[],this.attributesStr=[],this.secondaryInfoStr=[],this.viewBoxSize=400,this.viewBox={width:400,height:400},this.toolsets=[],this.tools=[],this.stateChanged=!0,this.updating=!1,this.update_interval=300,this.dev={},this.dev.debug=!1,this.dev.performance=!1,this.configIsSet=!1,this.isSafari=!!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/),this.iOS=(/iPad|iPhone|iPod/.test(navigator.userAgent)||"MacIntel"===navigator.platform&&navigator.maxTouchPoints>1)&&!window.MSStream;const t=document.querySelector("home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout").querySelector("partial-panel-resolver");this.lovelace=t.querySelector("ha-panel-lovelace"),this.lovelace||console.error("card::constructor - Can't get Lovelace panel"),this.lovelace.sakIconCache||(this.lovelace.sakIconCache={}),this.lovelace.colorCache||(this.lovelace.colorCache=[]),this.localStorage=window.localStorage,this.dev.debug&&console.log("*****Event - card - constructor",this.cardId,(new Date).getTime())}static getSystemStyles(){return css`
      :host {
        cursor: default;
        font-size: ${4}px;
      }

      /* Default settings for the card */
      /* - default cursor */
      /* - SVG overflow is not displayed, ie cutoff by the card edges */
      ha-card {
        cursor: default;
        overflow: hidden;
        
        -webkit-touch-callout: none;  
      }
      
      /* For disabled parts of tools/toolsets */
      /* - No input */
      ha-card.disabled {
        pointer-events: none;
        cursor: default;
      }

      .disabled {
        pointer-events: none !important;
        cursor: default !important;
      }

      /* For 'active' tools/toolsets */
      /* - Show cursor as pointer */
      .hover {
        cursor: pointer;
      }

      /* For hidden tools/toolsets where state for instance is undefined */
      .hidden {
        opacity: 0;
        visibility: hidden;
        transition: visibility 0s 1s, opacity 0.5s linear;
      }

      focus {
        outline: none;
      }
      focus-visible {
        outline: 3px solid blanchedalmond; /* That'll show 'em */
      }
      
      
      @media (print), (prefers-reduced-motion: reduce) {
        .animated {
          animation-duration: 1ms !important;
          transition-duration: 1ms !important;
          animation-iteration-count: 1 !important;
        }
      }

      
      /* Set default host font-size to 10 pixels.
       * In that case 1em = 10 pixels = 1% of 100x100 matrix used
       */
      @media screen and (min-width: 467px) {
        :host {
        font-size: ${4}px;
        }
      }
      @media screen and (max-width: 466px) {
        :host {
        font-size: ${4}px;
        }
      }

      :host ha-card {
            padding: 0px 0px 0px 0px;
      }

      .container {
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
      }

      .labelContainer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 65%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
      }

      .ellipsis {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

      .state {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        max-width: 100%;
        min-width: 0px;
      }

      #label {
        display: flex;
        line-height: 1;
      }

      #label.bold {
        font-weight: bold;
      }

      #label, #name {
        margin: 3% 0;
      }

      .shadow {
        font-size: 30px;
        font-weight: 700;
        text-anchor: middle;
      }

      .card--dropshadow-5 {
        filter: drop-shadow(0 1px 0 #ccc)
               drop-shadow(0 2px 0 #c9c9c9)
               drop-shadow(0 3px 0 #bbb)
               drop-shadow(0 4px 0 #b9b9b9)
               drop-shadow(0 5px 0 #aaa)
               drop-shadow(0 6px 1px rgba(0,0,0,.1))
               drop-shadow(0 0 5px rgba(0,0,0,.1))
               drop-shadow(0 1px 3px rgba(0,0,0,.3))
               drop-shadow(0 3px 5px rgba(0,0,0,.2))
               drop-shadow(0 5px 10px rgba(0,0,0,.25))
               drop-shadow(0 10px 10px rgba(0,0,0,.2))
               drop-shadow(0 20px 20px rgba(0,0,0,.15));
      }
      .card--dropshadow-medium--opaque--sepia90 {
        filter: drop-shadow(0.0em 0.05em 0px #b2a98f22)
                drop-shadow(0.0em 0.07em 0px #b2a98f55)
                drop-shadow(0.0em 0.10em 0px #b2a98f88)
                drop-shadow(0px 0.6em 0.9em rgba(0,0,0,0.15))
                drop-shadow(0px 1.2em 0.15em rgba(0,0,0,0.1))
                drop-shadow(0px 2.4em 2.5em rgba(0,0,0,0.1))
                sepia(90%);
      }

      .card--dropshadow-heavy--sepia90 {
        filter: drop-shadow(0.0em 0.05em 0px #b2a98f22)
                drop-shadow(0.0em 0.07em 0px #b2a98f55)
                drop-shadow(0.0em 0.10em 0px #b2a98f88)
                drop-shadow(0px 0.3em 0.45em rgba(0,0,0,0.5))
                drop-shadow(0px 0.6em 0.07em rgba(0,0,0,0.3))
                drop-shadow(0px 1.2em 1.25em rgba(0,0,0,1))
                drop-shadow(0px 1.8em 1.6em rgba(0,0,0,0.1))
                drop-shadow(0px 2.4em 2.0em rgba(0,0,0,0.1))
                drop-shadow(0px 3.0em 2.5em rgba(0,0,0,0.1))
                sepia(90%);
      }

      .card--dropshadow-heavy {
        filter: drop-shadow(0.0em 0.05em 0px #b2a98f22)
                drop-shadow(0.0em 0.07em 0px #b2a98f55)
                drop-shadow(0.0em 0.10em 0px #b2a98f88)
                drop-shadow(0px 0.3em 0.45em rgba(0,0,0,0.5))
                drop-shadow(0px 0.6em 0.07em rgba(0,0,0,0.3))
                drop-shadow(0px 1.2em 1.25em rgba(0,0,0,1))
                drop-shadow(0px 1.8em 1.6em rgba(0,0,0,0.1))
                drop-shadow(0px 2.4em 2.0em rgba(0,0,0,0.1))
                drop-shadow(0px 3.0em 2.5em rgba(0,0,0,0.1));
      }

      .card--dropshadow-medium--sepia90 {
        filter: drop-shadow(0.0em 0.05em 0px #b2a98f)
                drop-shadow(0.0em 0.15em 0px #b2a98f)
                drop-shadow(0.0em 0.15em 0px #b2a98f)
                drop-shadow(0px 0.6em 0.9em rgba(0,0,0,0.15))
                drop-shadow(0px 1.2em 0.15em rgba(0,0,0,0.1))
                drop-shadow(0px 2.4em 2.5em rgba(0,0,0,0.1))
                sepia(90%);
      }

      .card--dropshadow-medium {
        filter: drop-shadow(0.0em 0.05em 0px #b2a98f)
                drop-shadow(0.0em 0.15em 0px #b2a98f)
                drop-shadow(0.0em 0.15em 0px #b2a98f)
                drop-shadow(0px 0.6em 0.9em rgba(0,0,0,0.15))
                drop-shadow(0px 1.2em 0.15em rgba(0,0,0,0.1))
                drop-shadow(0px 2.4em 2.5em rgba(0,0,0,0.1));
      }

      .card--dropshadow-light--sepia90 {
        filter: drop-shadow(0px 0.10em 0px #b2a98f)
                drop-shadow(0.1em 0.5em 0.2em rgba(0, 0, 0, .5))
                sepia(90%);
      }

      .card--dropshadow-light {
        filter: drop-shadow(0px 0.10em 0px #b2a98f)
                drop-shadow(0.1em 0.5em 0.2em rgba(0, 0, 0, .5));
      }

      .card--dropshadow-down-and-distant {
        filter: drop-shadow(0px 0.05em 0px #b2a98f)
                drop-shadow(0px 14px 10px rgba(0,0,0,0.15))
                drop-shadow(0px 24px 2px rgba(0,0,0,0.1))
                drop-shadow(0px 34px 30px rgba(0,0,0,0.1));
      }
      
      .card--filter-none {
      }

      .horseshoe__svg__group {
        transform: translateY(15%);
      }

    `}static getUserStyles4(){this.userContent="";const t=document.querySelector("home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout").querySelector("partial-panel-resolver").querySelector("ha-panel-lovelace");return t||console.error("card::constructor - Can't get Lovelace panel"),t.__lovelace.config.sak_templates&&t.__lovelace.config.sak_templates.user_css_definitions&&(this.userContent=t.__lovelace.config.sak_templates.user_css_definitions.reduce(((t,s)=>t+s.content),"")),css`${unsafeCSS(this.userContent)}`}static getSakStyles4(){this.sakContent="";const t=document.querySelector("home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout").querySelector("partial-panel-resolver").querySelector("ha-panel-lovelace");return t||console.error("card::constructor - Can't get Lovelace panel"),t.__lovelace.config.sak_templates&&t.__lovelace.config.sak_templates.sak_css_definitions&&(this.sakContent=t.__lovelace.config.sak_templates.sak_css_definitions.reduce(((t,s)=>t+s.content),"")),css`${unsafeCSS(this.sakContent)}`}static get styles(){return css`
      ${this.getSystemStyles()}
      ${this.getSakStyles4()}
      ${this.getUserStyles4()}
    `}set hass(t){if(this.dev.debug&&console.log("*****Event - card::set hass",this.cardId,(new Date).getTime()),this._hass=t,this.connected||this.dev.debug&&console.log("set hass but NOT connected",this.cardId),this.config.entities){var s,e,i,o,a=!1,r=0,n=!1,h=!1;for(s of this.config.entities){if(this.entities[r]=t.states[this.config.entities[r].entity],this.config.entities[r].secondary_info&&(n=!0,e=this.entities[r][this.config.entities[r].secondary_info],(i=this._buildSecondaryInfo(e,this.config.entities[r]))!=this.secondaryInfoStr[r]&&(this.secondaryInfoStr[r]=i,a=!0)),this.config.entities[r].attribute){h=!0;let t=this.config.entities[r].attribute,s="",e="";var l=this.config.entities[r].attribute.indexOf("["),c=this.config.entities[r].attribute.indexOf("."),g=0,d="";-1!=l?(t=this.config.entities[r].attribute.substr(0,l),s=this.config.entities[r].attribute.substr(l,this.config.entities[r].attribute.length-l),g=s[1],d=s.substr(4,s.length-4),e=this.entities[r].attributes[t][g][d]):-1!=c?(t=this.config.entities[r].attribute.substr(0,c),s=this.config.entities[r].attribute.substr(l,this.config.entities[r].attribute.length-l),d=s.substr(1,s.length-1),e=this.entities[r].attributes[t][d],console.log("set hass, attributes with map",this.config.entities[r].attribute,t,s)):e=this.entities[r].attributes[t],(o=this._buildState(e,this.config.entities[r]))!=this.attributesStr[r]&&(this.attributesStr[r]=o,a=!0),h=!0}h||n||((o=this._buildState(this.entities[r].state,this.config.entities[r]))!=this.entitiesStr[r]&&(this.entitiesStr[r]=o,a=!0),this.dev.debug&&console.log("set hass - attrSet=false",this.cardId,(new Date).getSeconds().toString()+"."+(new Date).getMilliseconds().toString(),o)),r++,h=!1}a&&(this.toolsets&&this.toolsets.map(((t,s)=>{t.updateValues()})),a&&this.connected&&this.requestUpdate())}}setConfig(t){this.dev.performance&&console.time("--\x3e "+this.cardId+" PERFORMANCE card::setConfig"),this.dev.debug&&console.log("*****Event - setConfig",this.cardId,(new Date).getTime()),(t=JSON.parse(JSON.stringify(t))).dev&&(this.dev={...this.dev,...t.dev}),this.dev.debug&&console.log("setConfig",this.cardId),this.aspectratio="1/1",t.aspectratio&&(this.aspectratio=t.aspectratio);var s=t.aspectratio.trim().split("/");if(this.viewBox||(this.viewBox={}),this.viewBox.width=400*s[0],this.viewBox.height=400*s[1],!t.layout)throw Error("card::setConfig - No layout defined");if(!t.layout.toolsets)throw Error("card::setConfig - No toolsets defined");if(t.entities){if("sensor"!=this._computeDomain(t.entities[0].entity)&&t.entities[0].attribute&&!isNaN(t.entities[0].attribute))throw Error("card::setConfig - First entity or attribute must be a numbered sensorvalue, but is NOT")}const e=Merge.mergeDeep(t);e.entities&&e.entities.forEach(((t,s)=>{t.tap_action||(e.entities[s].tap_action={action:"more-info"})})),this.config=e,this.toolset=[];var i=this;function findTemplate(t,s){if(s.template){const t=i.lovelace.__lovelace.config.sak_templates[s.template.name];var e=Templates.replaceVariables3(s.template.variables,t),o=Merge.mergeDeep(e);o.from_template="replaced";return e,o}return"template"==t?(console.log("findTemplate return key=template/value",t,void 0),s):s}var o=JSON.stringify(this.config.layout.toolsets,findTemplate),a=JSON.parse(o);this.config.entities&&this.config.entities.forEach(((t,s)=>{t.tap_action||(this.config.entities[s].tap_action={action:"more-info",haptic:light},this.config.entities[s].hold_action={action:"more-info",haptic:success})})),this.config.layout.toolsets.map(((t,s)=>{var e=null;this.toolsets||(this.toolsets=[]);var i=!1,o=[];e=a[s].tools,t.tools&&t.tools.map(((r,n)=>{a[s].tools.map(((o,h)=>{r.id==o.id&&(t.template&&(this.config.layout.toolsets[s].position&&(a[s].position=Merge.mergeDeep(this.config.layout.toolsets[s].position)),e[h]=Merge.mergeDeep(e[h],r),e[h]=JSON.parse(JSON.stringify(e[h],findTemplate)),i=!0),this.dev.debug&&console.log("card::setConfig - got toolsetCfg toolid",r,n,o,h,r))})),i||(o=o.concat(t.tools[n]))})),e=e.concat(o),t.tools=e,t=a[s];const r=new Toolset(this,t);this.toolsets.push(r)})),this.dev.debug&&console.log("Step 5: toolconfig, list of toolsets",this.toolsets),this.dev.debug&&console.log("debug - setConfig",this.cardId,this.config),this.dev.performance&&console.timeEnd("--\x3e "+this.cardId+" PERFORMANCE card::setConfig"),this.configIsSet=!0}connectedCallback(){this.dev.performance&&console.time("--\x3e "+this.cardId+" PERFORMANCE card::connectedCallback"),this.dev.debug&&console.log("*****Event - connectedCallback",this.cardId,(new Date).getTime()),this.connected=!0,super.connectedCallback(),this.update_interval&&(this.updateOnInterval(),this.interval=setInterval((()=>this.updateOnInterval()),this._hass?1e3*this.update_interval:2e3)),this.dev.debug&&console.log("ConnectedCallback",this.cardId),this.requestUpdate(),this.dev.performance&&console.timeEnd("--\x3e "+this.cardId+" PERFORMANCE card::connectedCallback")}disconnectedCallback(){this.dev.performance&&console.time("--\x3e "+this.cardId+" PERFORMANCE card::disconnectedCallback"),this.dev.debug&&console.log("*****Event - disconnectedCallback",this.cardId,(new Date).getTime()),this.interval&&clearInterval(this.interval),super.disconnectedCallback(),this.dev.debug&&console.log("disconnectedCallback",this.cardId),this.connected=!1,this.dev.performance&&console.timeEnd("--\x3e "+this.cardId+" PERFORMANCE card::disconnectedCallback")}async firstUpdated(t){this.dev.debug&&console.log("*****Event - card::firstUpdated",this.cardId,(new Date).getTime()),this.toolsets&&await Promise.all(this.toolsets.map((async(s,e)=>{await new Promise((t=>setTimeout(t,0))),s.firstUpdated(t)})))}updated(t){this.dev.debug&&console.log("*****Event - Updated",this.cardId,(new Date).getTime())}pleaseReRender(){this._reRenderCounter<10&&(this._reRender=!0)}_reRenderTimeout(){this._reRenderPending=!1,this._reRender=!1,this.requestUpdate(),this.dev.debug&&console.log("card::_reRenderTimeout CALLED",this.cardId,(new Date).getTime())}render(){if(this.dev.performance&&console.time("--\x3e "+this.cardId+" PERFORMANCE card::render"),this.dev.debug&&console.log("*****Event - render",this.cardId,(new Date).getTime()),this.connected){var t;this._reRender=!1,this._reRenderCounter=0;try{t=this.config.disable_card?html`
                  <div class="container" id="container">
                    ${this._renderSvg()}
                  </div>
                  `:html`
                  <ha-card>
                    <div class="container" id="container">
                      ${this._renderSvg()}
                    </div>
                  </ha-card>
                  `}catch(t){console.error(t)}return this._reRender&&(this._reRenderPending||(this._reRenderPending=!0,this._reRenderCounter++,setTimeout((()=>this._reRenderTimeout()),256))),this.dev.performance&&console.timeEnd("--\x3e "+this.cardId+" PERFORMANCE card::render"),t}this.dev.debug&&console.log("render but NOT connected",this.cardId,(new Date).getTime())}_renderTickMarks(){const{config:t}=this;if(!t)return;if(!t.show)return;if(!t.show.scale_tickmarks)return;const s=t.horseshoe_scale.color?t.horseshoe_scale.color:"var(--primary-background-color)",e=t.horseshoe_scale.ticksize?t.horseshoe_scale.ticksize:(t.horseshoe_scale.max-t.horseshoe_scale.min)/10,i=t.horseshoe_scale.min%e,o=t.horseshoe_scale.min+(0==i?0:e-i),a=(o-t.horseshoe_scale.min)/(t.horseshoe_scale.max-t.horseshoe_scale.min)*260;var r=(t.horseshoe_scale.max-o)/e,n=Math.floor(r);const h=(260-a)/r;Math.floor(n*e+o)<=t.horseshoe_scale.max&&n++;const l=t.horseshoe_scale.width?t.horseshoe_scale.width/2:3;var c,g,d=[];for(g=0;g<n;g++)c=a+(360-g*h-230)*Math.PI/180,d[g]=svg`
        <circle cx="${100-Math.sin(c)*TICKMARKS_RADIUS_SIZE}"
                cy="${100-Math.cos(c)*TICKMARKS_RADIUS_SIZE}" r="${l}"
                fill="${s}">
      `;return svg`${d}`}_RenderToolsets(){return this.dev.debug&&console.log("all the tools in renderTools",this.tools),svg`
              <g id="toolsets" class="toolsets__group"
              >
                ${this.toolsets.map((t=>t.render()))}
              </g>


            <defs>
            <!-- SVG inner shadow on rgba fill: https://codepen.io/salsita/pen/qBbmYMw -->

              <!-- Damien Jurado Poster Rebound: https://codepen.io/dylanbaumann/pen/wevMwB -->
              <filter id="is1" x="-50%" y="-50%" width="400%" height="400%">
                <feComponentTransfer in=SourceAlpha>
                  <feFuncA type="table" tableValues="1 0" />
                </feComponentTransfer>
                <feGaussianBlur stdDeviation="1"/>
                <feOffset dx="0" dy="1" result="offsetblur"/>
                <feFlood flood-color="rgba(0, 0, 0, 0.3)" result="color"/>
                <feComposite in2="offsetblur" operator="in"/>
                <feComposite in2="SourceAlpha" operator="in" />
                <feMerge>
                  <feMergeNode in="SourceGraphic" />
                  <feMergeNode />
                </feMerge>
              </filter>

              <!-- SVG Inset Shadow: https://codepen.io/mattrosno/pen/zxpNwd -->
              <filter id="is2">
                <!-- Shadow Offset -->
                <feOffset
                  dx='1'
                  dy='1'
                />

                <!-- Shadow Blur -->
                <feGaussianBlur
                  stdDeviation='0.5'
                  result='offset-blur'
                />

                <!-- Invert the drop shadow
                     to create an inner shadow -->
                <feComposite
                  operator='out'
                  in='SourceGraphic'
                  in2='offset-blur'
                  result='inverse'
                />

                <!-- Color & Opacity -->
                <feFlood
                  flood-color='black'
                  flood-opacity='0.4'
                  result='color'
                />

                <!-- Clip color inside shadow -->
                <feComposite
                  operator='in'
                  in='color'
                  in2='inverse'
                  result='shadow'
                />

                <!-- Put shadow over original object -->
                <feComposite
                  operator='over'
                  in='shadow'
                  in2='SourceGraphic'
                />
              </filter>

              <rect id="cliprect" width="100%" height="100%" fill="none" stroke="none" rx="3" />
              <clipPath id="clip">
                <use xlink:href="#cliprect"/>
              </clipPath>

              <marker viewBox="0 0 200 200" id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
                  <circle cx="5" cy="5" r="3" style="stroke: none; fill:currentColor;"/>
              </marker>

              <marker viewBox="0 0 200 200" id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
                     orient="auto">
                  <path d="M2,2 L2,11 L10,6 L2,2" style="fill: currentColor;" />
              </marker>

              <filter id="ds2" width="10" height="10">
                <feDropShadow dx="2" dy="3" stdDeviation="0.5"/>
              </filter>

              <filter id="ds3" x="0" y="0" width="200%" height="200%">
                <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
                <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
                <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
              </filter>

              <filter id="ds4" x="0" y="0" width="200%" height="200%">
                <feGaussianBlur stdDeviation="1" />
              </filter>

              <filter id="ds-1" y="-50%" x="-50%" width="200%" height="400%">
                <feDropShadow dx="0" dy="1.5" stdDeviation=".3"/>
              </filter>

              <!-- Neumorphic filter -->
              <!-- -->
              <!-- Light Shadow, #FFFFFF at 50%, x:-6, Y:-6, Blur:16 -->
              <!-- Dark Shadow: #d1cdc7 at 50%, x:6, y:6, Blur:16 -->
              <!-- Main Background: #efeeee -->
              <!-- Shape Background: #efeeee -->
              <!-- Optional Border: #fff at 20% Alpha -->
              <!-- Dark Shadow was: 0d2750 -->
              
              <!-- 2021.11.17 -->
              <!-- Performance with inset shadow and width/height=150% seems to be optimal setting -->
              <!-- Smaller settings give clipping, and larger settings performance hits -->
              <!-- Absolute settings (userSpaceOnUse) seem to be difficult to find right settings -->
              <filter id="is-1" x="-25%" y="-25%" width="150%" height="150%">
                <feComponentTransfer in=SourceAlpha>
                  <feFuncA type="table" tableValues="1 0" />
                </feComponentTransfer>
                <feGaussianBlur stdDeviation="1"/>
                <feOffset dx="2" dy="2" result="offsetblur"/>
                <feFlood flood-color="#0d2750" flood-opacity="0.5" result="color"/>
                <feComposite in2="offsetblur" operator="in"/>
                <feComposite in2="SourceAlpha" operator="in" />
                <feMerge>
                  <feMergeNode in="SourceGraphic" />
                  <feMergeNode />
                </feMerge>
              </filter>

              <filter id="is-1b" filterUnits="userSpaceOnUse" x="-200" y="-200" width="1000" height="1000">
                <feComponentTransfer in=SourceAlpha>
                  <feFuncA type="table" tableValues="1 0" />
                </feComponentTransfer>
                <feGaussianBlur stdDeviation="1"/>
                <feOffset dx="2" dy="2" result="offsetblur"/>
                <feFlood flood-color="#0d2750" flood-opacity="0.5" result="color"/>
                <feComposite in2="offsetblur" operator="in"/>
                <feComposite in2="SourceAlpha" operator="in" />
                <feMerge>
                  <feMergeNode in="SourceGraphic" />
                  <feMergeNode />
                </feMerge>
              </filter>

              <!-- Using feComposite in="offsetblur" operator="in" instead of in2 gives a -->
              <!-- much larger shadow area, much deeper! WHY?? -->
              
              <filter id="nm-2" x="-50%" y="-50%" width="200%" height="200%">
                <feComponentTransfer in=SourceAlpha out=transfer>
                  <feFuncA type="table" tableValues="1 0" />
                </feComponentTransfer>

                <feGaussianBlur input="transfer" stdDeviation="5" result="blurdark"/>
                <feOffset input="blurdark" dx="12" dy="12" result="offsetblurdark"/>
                <feFlood input="offsetblurdark" flood-color="#d1cdc7" flood-opacity="0.4" result="colordark"/>

                <feGaussianBlur input="transfer" stdDeviation="5" result="blurlight"/>
                <feOffset input="blurlight" dx="-12" dy="-12" result="offsetblurlight"/>
                <feFlood input="offsetblurlight" flood-color="white" flood-opacity="0.9" result="colorlight"/>

                <feComposite in="offsetblurdark" operator="in"/>
                <feComposite in="SourceAlpha" operator="in" />

                <feMerge>
                  <feMergeNode in="SourceGraphic" />
                  <feMergeNode />
                </feMerge>
              </filter>

              <filter id="filter-yoksel" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
                <feFlood flood-color="#eeebe7" flood-opacity="0.7" x="0%" y="0%" width="100%" height="100%" result="flood2"/>
                <feComposite in="flood2" in2="SourceAlpha" operator="out" x="0%" y="0%" width="100%" height="100%" result="composite5"/>
                <feOffset dx="-9" dy="-7" x="0%" y="0%" width="100%" height="100%" in="composite5" result="offset1"/>
                <feGaussianBlur stdDeviation="3 10" x="0%" y="0%" width="100%" height="100%" in="offset1" edgeMode="none" result="blur2"/>
                <feComposite in="merge3" in2="SourceAlpha" operator="in" x="0%" y="0%" width="100%" height="100%" result="composite7"/>
                <feFlood flood-color="#0f0f0f" flood-opacity="1" x="0%" y="0%" width="100%" height="100%" result="flood4"/>
                <feComposite in="flood4" in2="SourceAlpha" operator="out" x="0%" y="0%" width="100%" height="100%" result="composite8"/>
                <feOffset dx="6" dy="6" x="0%" y="0%" width="100%" height="100%" in="merge3" result="offset2"/>
                <feGaussianBlur stdDeviation="3 10" x="0%" y="0%" width="100%" height="100%" in="offset2" edgeMode="none" result="blur3"/>
                <feComposite in="blur3" in2="SourceAlpha" operator="in" x="0%" y="0%" width="100%" height="100%" result="composite9"/>
                <feMerge x="0%" y="0%" width="100%" height="100%" result="merge3">
                      <feMergeNode in="SourceGraphic"/>
                  <feMergeNode in="composite7"/>
                  <feMergeNode in="composite9"/>
                  </feMerge>
              </filter>

              <!-- 2021.11.15 -->
              <!-- For some reason, changing the filter width/height from 160% to 600% improves performance on iOS 15 -->

              <!-- second try... -->
              <filter id="filter" x="-50%" y="-50%" width="300%" height="300%">
                <feFlood flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="flood2"/>
                <feComposite in="flood2" in2="SourceAlpha" operator="out" result="composite5"/>
                <feOffset dx="-6" dy="-6" in="composite5" result="offset1"/>
                <feGaussianBlur stdDeviation="5" in="offset1" edgeMode="none" result="blur2"/>
                <feComposite in="blur2" in2="SourceAlpha" operator="in"  result="composite7"/>

                <!-- flood-color="#777777" -->
                <feFlood flood-color="var(--cs-theme-shadow-darker)" flood-opacity="1" result="flood4"/>
                <feComposite in="flood4" in2="SourceAlpha" operator="out" result="composite8"/>
                <feOffset dx="6" dy="6" in="composite8" result="offset2"/>
                <feGaussianBlur stdDeviation="15" in="offset2" edgeMode="none" result="blur3"/>
                <feComposite in="blur3" in2="SourceAlpha" operator="in" result="composite9"/>

                <feMerge result="merge3">
                  <feMergeNode in="SourceGraphic"/>
                  <feMergeNode in="composite7"/>
                  <feMergeNode in="composite9"/>
                  </feMerge>
              </filter>

              <filter id="filterb" filterUnits="userSpaceOnUse" x="-200" y="-200" width="1000" height="1000">
                <feFlood flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="flood2"/>
                <feComposite in="flood2" in2="SourceAlpha" operator="out" result="composite5"/>
                <feOffset dx="-6" dy="-6" in="composite5" result="offset1"/>
                <feGaussianBlur stdDeviation="5" in="offset1" edgeMode="none" result="blur2"/>
                <feComposite in="blur2" in2="SourceAlpha" operator="in"  result="composite7"/>

                <!-- flood-color="#777777" -->
                <feFlood flood-color="var(--cs-theme-shadow-darker)" flood-opacity="1" result="flood4"/>
                <feComposite in="flood4" in2="SourceAlpha" operator="out" result="composite8"/>
                <feOffset dx="6" dy="6" in="composite8" result="offset2"/>
                <feGaussianBlur stdDeviation="15" in="offset2" edgeMode="none" result="blur3"/>
                <feComposite in="blur3" in2="SourceAlpha" operator="in" result="composite9"/>

                <feMerge result="merge3">
                  <feMergeNode in="SourceGraphic"/>
                  <feMergeNode in="composite7"/>
                  <feMergeNode in="composite9"/>
                  </feMerge>
              </filter>

              <filter id="bold" x="-50%" y="-50%" width="240%" height="240%">
                <feFlood flood-color="#FFFFFF" flood-opacity="0.8" result="flood2"/>
                <feComposite in="flood2" in2="SourceAlpha" operator="out" result="composite5"/>
                <feOffset dx="12" dy="12" in="composite5" result="offset1"/>
                <feGaussianBlur stdDeviation="5" in="offset1" edgeMode="none" result="blur2"/>
                <feComposite in="blur2" in2="SourceAlpha" operator="in"  result="composite7"/>

                <feFlood flood-color="#777777" flood-opacity="0.6" result="flood4"/>
                <feComposite in="flood4" in2="SourceAlpha" operator="out" result="composite8"/>
                <feOffset dx="-12" dy="-12" in="composite8" result="offset2"/>
                <feGaussianBlur stdDeviation="15" in="offset2" edgeMode="none" result="blur3"/>
                <feComposite in="blur3" in2="SourceAlpha" operator="in" result="composite9"/>

                <feMerge result="merge3">
                  <feMergeNode in="SourceGraphic"/>
                  <feMergeNode in="composite7"/>
                  <feMergeNode in="composite9"/>
                  </feMerge>
              </filter>

              <filter id="filterss" x="-20%" y="-20%" width="140%" height="140%">
                <feFlood flood-color="#eeebe7" flood-opacity="0.9" result="flood2"/>
                <feComposite in="flood2" in2="SourceAlpha" operator="out" result="composite5"/>
                <feOffset dx="-15" dy="-15" in="composite5" result="offset1"/>
                <feGaussianBlur stdDeviation="5" in="offset1" edgeMode="none" result="blur2"/>
                <feComposite in="blur2" in2="SourceAlpha" operator="in" result="composite7"/>

                <feFlood flood-color="#0f0f0f" flood-opacity="1" result="flood4"/>
                <feComposite in="flood4" in2="SourceAlpha" operator="out" result="composite8"/>
                <feOffset dx="6" dy="6" in="composite8" result="offset2"/>
                <feGaussianBlur stdDeviation="5" in="offset2" edgeMode="none" result="blur3"/>
                <feComposite in="blur3" in2="SourceAlpha" operator="in" result="composite9"/>

                <feMerge result="merge3">
                  <feMergeNode in="SourceGraphic"/>
                  <feMergeNode in="composite7"/>
                  <feMergeNode in="composite9"/>
                  </feMerge>
              </filter>

              <!-- flood-color="#d1cdc7" -->
              <!-- flood-color="#FFFFFF" -->
              <filter id="nm-11" x="-50%" y="-50%" width="300%" height="300%">
                <feDropShadow stdDeviation="5" in="SourceGraphic"
                  dx="6" dy="6" flood-color="var(--cs-theme-shadow-darker)" flood-opacity="0.5" result="dropShadow"
                </feDropShadow>
                <feDropShadow stdDeviation="4.5" in="SourceGraphic"
                  dx="-6" dy="-6" flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="dropShadow1"/>
                <feMerge result="merge">
                  <feMergeNode in="dropShadow1"/>
                  <feMergeNode in="dropShadow"/>
                </feMerge>
              </filter>

              <!-- 2021.11.15 -->
              <!-- For some reason, changing the filter width/height from 300% to 600% improves performance on iOS 15 -->
              <!-- Changing this value to 3000% improves performance also, but pixelates some of the views, so unusable! -->
              <!-- A value of 1000% seems to be a good value too! Switching views is now instant again for some reason! -->
              <!-- However, some views (sake5) becomes very, very, very slow. Views sake4 and sake6 are very fast. -->
              <!-- 2021.11.17 -->
              <!-- Let's settle for now with x/y=-10% and width/height=120%. This is actually the default for svg filters... -->

              <filter id="sak-nm-default" x="-10%" y="-10%" width="120%" height="120%">
                <feDropShadow stdDeviation="5" in="SourceGraphic" dx="6" dy="6" flood-color="var(--cs-theme-shadow-darker)" flood-opacity="0.5" result="dropShadow"/>
                <feDropShadow stdDeviation="4.5" in="SourceGraphic" dx="-6" dy="-6" flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="dropShadow1"/>
                <feMerge result="merge">
                  <feMergeNode in="dropShadow1"/>
                  <feMergeNode in="dropShadow"/>
                </feMerge>
              </filter>

              <filter id="nm-1" x="-10%" y="-10%" width="120%" height="120%">
                <feDropShadow stdDeviation="5" in="SourceGraphic" dx="6" dy="6" flood-color="var(--cs-theme-shadow-darker)" flood-opacity="0.5" result="dropShadow"/>
                <feDropShadow stdDeviation="4.5" in="SourceGraphic" dx="-6" dy="-6" flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="dropShadow1"/>
                <feMerge result="merge">
                  <feMergeNode in="dropShadow1"/>
                  <feMergeNode in="dropShadow"/>
                </feMerge>
              </filter>

              <filter id="sak-nm-default-b" filterUnits="userSpaceOnUse" x="-100" y="-100" width="5000" height="800">
                <feDropShadow stdDeviation="5" in="SourceGraphic" dx="6" dy="6" flood-color="var(--cs-theme-shadow-darker)" flood-opacity="0.5" result="dropShadow"/>
                <feDropShadow stdDeviation="4.5" in="SourceGraphic" dx="-6" dy="-6" flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="dropShadow1"/>
                <feMerge result="merge">
                  <feMergeNode in="dropShadow1"/>
                  <feMergeNode in="dropShadow"/>
                </feMerge>
              </filter>

              <filter id="nm-1b" filterUnits="userSpaceOnUse" x="-200" y="-200" width="2000" height="2000">
                <feDropShadow stdDeviation="5" in="SourceGraphic" dx="6" dy="6" flood-color="var(--cs-theme-shadow-darker)" flood-opacity="0.5" result="dropShadow"/>
                <feDropShadow stdDeviation="4.5" in="SourceGraphic" dx="-6" dy="-6" flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="dropShadow1"/>
                <feMerge result="merge">
                  <feMergeNode in="dropShadow1"/>
                  <feMergeNode in="dropShadow"/>
                </feMerge>
              </filter>

              <filter id="nm-1-reverse" x="-10%" y="-10%" width="120%" height="120%">
                <feDropShadow stdDeviation="4.5" in="SourceGraphic" dx="-6" dy="-6" flood-color="var(--cs-theme-shadow-darker)" flood-opacity="0.5" result="dropShadow"/>
                <feDropShadow stdDeviation="5" in="SourceGraphic" dx="6" dy="6" flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="dropShadow1"/>
                <feMerge result="merge">
                  <feMergeNode in="dropShadow1"/>
                  <feMergeNode in="dropShadow"/>
                </feMerge>
              </filter>

              <filter id="nm-1b-reverse" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" x="0" y="0" width="1000" height="1000">
                <feDropShadow stdDeviation="4.5" in="SourceGraphic" dx="-6" dy="-6" flood-color="var(--cs-theme-shadow-darker)" flood-opacity="0.5" result="dropShadow"/>
                <feDropShadow stdDeviation="5" in="SourceGraphic" dx="6" dy="6" flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="dropShadow1"/>
                <feMerge result="merge">
                  <feMergeNode in="dropShadow1"/>
                  <feMergeNode in="dropShadow"/>
                </feMerge>
              </filter>

            </defs>
    `}_renderSvg(){const{viewBoxSize:t}=this,s=this.config.card_filter?this.config.card_filter:"card--filter-none",e=[];return e.push(svg`
      <svg xmlns=http://www/w3.org/2000/svg" xmlns:xlink="http://www/w3.org/1999/xlink"
       class="${s}"  
       viewBox="0 0 ${this.viewBox.width} ${this.viewBox.height}"
      >
        <g style="${styleMap(this.config.layout?.styles?.toolsets)}">
          ${this._RenderToolsets()}
        </g>
    `),svg`${e}`}_handleClick(t,s,e,i,o){let a;if(i)switch(this.dev.debug&&console.log("_handleClick",e,i,o),i.action){case"more-info":void 0!==o&&(a=new Event("hass-more-info",{composed:!0}),a.detail={entityId:o},t.dispatchEvent(a));break;case"navigate":if(!i.navigation_path)return;window.history.pushState(null,"",i.navigation_path),a=new Event("location-changed",{composed:!0}),a.detail={replace:!1},window.dispatchEvent(a);break;case"call-service":{if(!i.service)return;const[t,e]=i.service.split(".",2),o={...i.service_data};s.callService(t,e,o)}}}handleEvent(t,s){t.stopPropagation(),t.preventDefault(),this._handleClick(this,this._hass,this.config,s?.tap_action,s?.entity)}_buildIcon(t,s){var e=s.icon||t.attributes.icon;return e||stateIcon(t)}_buildUom(t,s,e){return t?.unit||e.unit||s.attributes.unit_of_measurement||""}toLocale(t,s="unknown"){const e=this._hass.selectedLanguage||this._hass.language,i=this._hass.resources[e];return i&&i[t]?i[t]:s}_buildState(t,s){if(isNaN(t))return t;const e=Number(t),i=Math.sign(t);if(void 0===s.decimals||Number.isNaN(s.decimals)||Number.isNaN(e))return"-0"==i?"-"+(Math.round(100*e)/100).toString():(Math.round(100*e)/100).toString();const o=10**s.decimals;return"-0"==i?"-"+(Math.round(e*o)/o).toFixed(s.decimals).toString():(Math.round(e*o)/o).toFixed(s.decimals).toString()}_buildSecondaryInfo(t,s){const leftPad=t=>t<10?`0${t}`:t;const e=this._hass.selectedLanguage||this._hass.language;if(["relative","total","date","time","datetime"].includes(s.format)){const o=new Date(t);if(!(o instanceof Date)||isNaN(o.getTime()))return t;var i;switch(s.format){case"relative":const t=selectUnit(o,new Date);i=new Intl.RelativeTimeFormat(e,{numeric:"auto"}).format(t.value,t.unit);break;case"total":case"precision":i="Not Yet Supported";break;case"date":i=new Intl.DateTimeFormat(e,{year:"numeric",month:"numeric",day:"numeric"}).format(o);break;case"time":i=new Intl.DateTimeFormat(e,{hour:"numeric",minute:"numeric",second:"numeric"}).format(o);break;case"datetime":i=new Intl.DateTimeFormat(e,{year:"numeric",month:"numeric",day:"numeric",hour:"numeric",minute:"numeric",second:"numeric"}).format(o)}return i}return isNaN(parseFloat(t))||!isFinite(t)?t:"brightness"===config.format?`${Math.round(t/255*100)} %`:"duration"===config.format?function secondsToDuration(t){const s=Math.floor(t/3600),e=Math.floor(t%3600/60),i=Math.floor(t%3600%60);return s>0?`${s}:${leftPad(e)}:${leftPad(i)}`:e>0?`${e}:${leftPad(i)}`:i>0?""+i:null}(t):void 0}_computeState(t,s){if(isNaN(t))return t;const e=Number(t);if(void 0===s||Number.isNaN(s)||Number.isNaN(e))return Math.round(100*e)/100;const i=10**s;return(Math.round(e*i)/i).toFixed(s)}_calculateColor(t,s,e){const i=Object.keys(s).map((t=>Number(t))).sort(((t,s)=>t-s));let o,a,r;const n=i.length;if(t<=i[0])return s[i[0]];if(t>=i[n-1])return s[i[n-1]];for(let h=0;h<n-1;h++){const n=i[h],l=i[h+1];if(t>=n&&t<l){if([o,a]=[s[n],s[l]],!e)return o;r=this._calculateValueBetween(n,l,t);break}}return this._getGradientValue(o,a,r)}_calculateValueBetween(t,s,e){return(Math.min(Math.max(e,t),s)-t)/(s-t)}_getColorVariable(t){const s=t.substr(4,t.length-5);if(!this.lovelace){const t=document.querySelector("home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout").querySelector("partial-panel-resolver");this.lovelace=t.querySelector("ha-panel-lovelace")}return window.getComputedStyle(this).getPropertyValue(s)}_getGradientValue(t,s,e){const i=this._colorToRGBA(t),o=this._colorToRGBA(s),a=1-e,r=e,n=Math.floor(i[0]*a+o[0]*r),h=Math.floor(i[1]*a+o[1]*r),l=Math.floor(i[2]*a+o[2]*r),c=Math.floor(i[3]*a+o[3]*r);return`#${this._padZero(n.toString(16))}${this._padZero(h.toString(16))}${this._padZero(l.toString(16))}${this._padZero(c.toString(16))}`}_padZero(t){return t.length<2&&(t=`0${t}`),t.substr(0,2)}_computeDomain(t){return t.substr(0,t.indexOf("."))}_computeEntity(t){return t.substr(t.indexOf(".")+1)}_colorToRGBA(t){let s=this.lovelace.colorCache[t];if(s)return s;var e=t;"var"===t.substr(0,3).valueOf()&&(e=this._getColorVariable(t));var i=document.createElement("canvas");i.width=i.height=1;var o=i.getContext("2d");o.clearRect(0,0,1,1),o.fillStyle=e,o.fillRect(0,0,1,1);const a=[...o.getImageData(0,0,1,1).data];return this.lovelace.colorCache[t]=a,a}updateOnInterval(){this._hass?this.stateChanged&&!this.updating&&this.updateData():this.dev.debug&&console.log("UpdateOnInterval - NO hass, returning")}async fetchRecent(t,s,e,i){let o="history/period";return s&&(o+=`/${s.toISOString()}`),o+=`?filter_entity_id=${t}`,e&&(o+=`&end_time=${e.toISOString()}`),i&&(o+="&skip_initial_state"),o+="&minimal_response",this._hass.callApi("GET",o)}async updateData({config:t}=this){this.updating=!0,this.dev.debug&&console.log("card::updateData - ENTRY",this.cardId);let s=[];var e=0;this.toolsets.map(((t,i)=>{t.tools.map(((t,o)=>{if("bar"==t.type){const a=new Date,r=new Date;r.setHours(a.getHours()-t.tool.config.hours);const n=this.config.entities[t.tool.config.entity_index].attribute?this.config.entities[t.tool.config.entity_index].attribute:null;s[e]={tsidx:i,entityIndex:t.tool.config.entity_index,entityId:this.entities[t.tool.config.entity_index].entity_id,attrId:n,start:r,end:a,type:"bar",idx:o},e++}}))})),this.dev.debug&&console.log("card::updateData - LENGTH",this.cardId,s.length,s),this.stateChanged=!1,this.dev.debug&&console.log("card::updateData, entityList from tools",s);try{const t=s.map(((t,s)=>this.updateEntity(t,s,t.start,t.end)));await Promise.all(t)}finally{this.updating=!1}}async updateEntity(t,s,e,i){let o=[],a=e,r=await this.fetchRecent(t.entityId,a,i,!1),n=t.state;r[0]&&r[0].length>0&&(t.attrId&&(n=this.entities[t.entityIndex].attributes[this.config.entities[t.entityIndex].attribute],t.state=n),r=r[0].filter((s=>t.attrId?!Number.isNaN(parseFloat(s.attributes[t.attrId])):!Number.isNaN(parseFloat(s.state)))),r=r.map((s=>({last_changed:s.last_changed,state:t.attrId?Number(s.attributes[t.attrId]):Number(s.state)})))),o=[...o,...r],this.uppdate(t,o)}uppdate(t,s){if(!s)return;const e=(new Date).getTime();var i=24,o=2;"bar"==t.type&&(this.dev.debug&&console.log("entity.type == bar",t),i=this.toolsets[t.tsidx].tools[t.idx].tool.config.hours,o=this.toolsets[t.tsidx].tools[t.idx].tool.config.barhours);const a=s.reduce(((t,s)=>((t,s)=>{const a=(e-new Date(s.last_changed).getTime())/36e5/o-i/o,r=Math.floor(Math.abs(a));return t[r]||(t[r]=[]),t[r].push(s),t})(t,s)),[]);if(a.length=Math.ceil(i/o),0!=Object.keys(a).length){var r=Object.keys(a)[0];"0"!=r&&(a[0]=[],a[0].push(a[r][0]));for(var n=0;n<i/o;n++)a[n]||(a[n]=[],a[n].push(a[n-1][a[n-1].length-1]));this.coords=a;var h;[],h=a.map((t=>{return e="state",(s=t).reduce(((t,s)=>t+Number(s[e])),0)/s.length;var s,e})),"bar"==t.type&&(this.toolsets[t.tsidx].tools[t.idx].tool.series=[...h]),this.requestUpdate()}}getCardSize(){return 4}}customElements.define("dev-swiss-army-knife-card",devSwissArmyKnifeCard);
//# sourceMappingURL=sak.min.js.map