@coderundebug/ui-web/ui-chart-legend.js

A collection of UI web components that can be used in any web project.

/* By Stephen Paul Hassall (web: https://coderundebug.com) */
import{UiTools as t}from"./ui-tools.js";export class UiChartLegend extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=UiChartLegend.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiChartLegend.uiCssStyleSheet],this.t=this.shadowRoot.querySelector(".base"),this.i=this.i.bind(this),this.o=this.o.bind(this),this.l=this.l.bind(this),this.h=[],this.u=null,this.p=null}disconnectedCallback(){this.h.forEach((t=>{t.removeEventListener("click",this.i),t.removeEventListener("pointermove",this.o),t.removeEventListener("pointerout",this.l)}))}setChart(t,i){this.u=i,this.h.forEach((t=>{t.removeEventListener("click",this.i),t.removeEventListener("pointermove",this.o),t.removeEventListener("pointerout",this.l)})),this.t.innerHTML="",t.forEach((t=>{const i=document.createElement("div");i.classList.add("item");const e=document.createElement("div");e.classList.add("color"),e.style.setProperty("--ui-clc",t.color),i.appendChild(e);const r=document.createElement("div");r.classList.add("text"),r.innerText=t.legend,i.appendChild(r),i._uiChartLegendItem=t,this.t.appendChild(i),i.addEventListener("click",this.i),i.addEventListener("pointermove",this.o),i.addEventListener("pointerout",this.l)}))}i(t){this.u&&this.u.chartItemSelect&&this.u.chartItemSelect(t.target._uiChartLegendItem.index)}o(t){this.v(t.target)}l(t){this.v(null)}v(t){this.u&&this.u.chartItemHighlight&&(null===t&&this.p&&(this.u.chartItemHighlight(null),this.p=null),t!==this.p&&(this.p=t,this.u.chartItemHighlight(t._uiChartLegendItem.index)))}}UiChartLegend.uiCss=" .base{display:flex;flex-direction:column;flex-wrap:wrap;row-gap:var(--ui-chart-legend-row-gap, 8px);column-gap:var(--ui-chart-legend-column-gap, 16px);height:100%;box-sizing:border-box;padding:var(--ui-chart-legend-padding, 4px);background-color:var(--ui-chart-legend-background, var(--ui-background, hsl(0 0% 90% / 1)));color:var(--ui-chart-legend-text-color, var(--ui-foreground, hsl(0 0% 18% / 1)));font-size:var(--ui-chart-legend-text-font-size, var(--ui-font-size-normal, 16px));font-weight:var(--ui-chart-legend-text-font-weight, var(--ui-font-weight-normal, normal));}.item{display:inline-grid;grid-template-columns:auto 1fr;gap:var(--ui-chart-legend-color-gap, 8px);background-color:var(--ui-chart-legend-background, var(--ui-background, hsl(0 0% 90% / 1)));}.color{aspect-ratio:1 / 1;align-self:stretch;pointer-events:none;background-color:var(--ui-clc);border-style:solid;border-width:var(--ui-chart-legend-color-border-width, 2px);border-color:color-mix(in hsl, var(--ui-clc) 80%, black 20%);border-radius:var(--ui-chart-legend-color-border-radius, 3px);}.text{align-self:start;justify-self:start;pointer-events:none;}:host([horizontal]){& .base{display:flex;flex-direction:row;flex-wrap:wrap;}}",UiChartLegend.uiHtml='<div class="base"></div>',t.createUi(UiChartLegend,"ui-chart-legend",import.meta.url);