@santi020k/lumen-elements 3.0.1 → 4.1.0

package/dist/element-base.js

@@ -1,4 +1,4 @@
-import { composeClassName } from '@santi020k/lumen-core';
+import { composeClassName } from '@santi020k/lumen-core/tokens';
 const appliedClassNames = new WeakMap();
 const mergeClassNames = (...classNames) => composeClassName(...classNames)
     .split(/\s+/)

package/dist/expanded-chart-html.d.ts

@@ -0,0 +1,9 @@
+import { type LumenBoxPlotDatum, type LumenBoxPlotStatisticLabels, type LumenCalendarHeatmapDatum, type LumenChartLabels, type LumenFunnelDatum } from '@santi020k/lumen-core';
+export declare const parseCalendarHeatmapData: (source: string | null) => readonly LumenCalendarHeatmapDatum[];
+export declare const parseFunnelData: (source: string | null) => readonly LumenFunnelDatum[];
+export declare const parseBoxPlotData: (source: string | null) => readonly LumenBoxPlotDatum[];
+export declare const calendarHeatmapHtml: (element: HTMLElement, data: readonly LumenCalendarHeatmapDatum[], text: Readonly<LumenChartLabels>, formatter: (value: number) => string, dateFormatter: (date: string) => string, weekdays: readonly string[]) => string;
+export declare const funnelChartHtml: (element: HTMLElement, data: readonly LumenFunnelDatum[], text: Readonly<LumenChartLabels>, formatter: (value: number) => string) => string;
+export type BoxPlotStatisticLabels = LumenBoxPlotStatisticLabels;
+export declare const boxPlotHtml: (element: HTMLElement, data: readonly LumenBoxPlotDatum[], text: Readonly<LumenChartLabels>, formatter: (value: number) => string, statisticLabels: Partial<BoxPlotStatisticLabels>) => string;
+//# sourceMappingURL=expanded-chart-html.d.ts.map

package/dist/expanded-chart-html.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expanded-chart-html.d.ts","sourceRoot":"","sources":["../src/expanded-chart-html.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+L,KAAK,iBAAiB,EAAE,KAAK,2BAA2B,EAAE,KAAK,yBAAyB,EAAE,KAAK,gBAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAe3W,eAAO,MAAM,wBAAwB,GAAI,QAAQ,MAAM,GAAG,IAAI,yCAA6E,CAAA;AAC3I,eAAO,MAAM,eAAe,GAAI,QAAQ,MAAM,GAAG,IAAI,gCAA6E,CAAA;AAClI,eAAO,MAAM,gBAAgB,GAAI,QAAQ,MAAM,GAAG,IAAI,iCAAqH,CAAA;AAQ3K,eAAO,MAAM,mBAAmB,GAC9B,SAAS,WAAW,EACpB,MAAM,SAAS,yBAAyB,EAAE,EAC1C,MAAM,QAAQ,CAAC,gBAAgB,CAAC,EAChC,WAAW,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,EACpC,eAAe,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,EACvC,UAAU,SAAS,MAAM,EAAE,KAC1B,MAgBF,CAAA;AAED,eAAO,MAAM,eAAe,GAC1B,SAAS,WAAW,EACpB,MAAM,SAAS,gBAAgB,EAAE,EACjC,MAAM,QAAQ,CAAC,gBAAgB,CAAC,EAChC,WAAW,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,KACnC,MASF,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,2BAA2B,CAAA;AAIhE,eAAO,MAAM,WAAW,GACtB,SAAS,WAAW,EACpB,MAAM,SAAS,iBAAiB,EAAE,EAClC,MAAM,QAAQ,CAAC,gBAAgB,CAAC,EAChC,WAAW,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,EACpC,iBAAiB,OAAO,CAAC,sBAAsB,CAAC,KAC/C,MAqBF,CAAA"}

package/dist/expanded-chart-html.js

@@ -0,0 +1,61 @@
+import { createLumenBoxPlotGeometry, createLumenCalendarHeatmapGeometry, createLumenFunnelGeometry, getLumenChartToneClassName, isLumenBoxPlotDatum, isLumenCalendarHeatmapDatum, isLumenFunnelDatum } from '@santi020k/lumen-core';
+import { bulletNumberAttribute } from './bullet-chart-html.js';
+import { escapeChartHtml as escape } from './chart-html.js';
+const parseData = (source, guard, invalid) => {
+    try {
+        const value = JSON.parse(source ?? '[]');
+        if (Array.isArray(value) && value.every(guard))
+            return value;
+    }
+    catch { }
+    return [invalid];
+};
+export const parseCalendarHeatmapData = (source) => parseData(source, isLumenCalendarHeatmapDatum, { date: '', value: NaN });
+export const parseFunnelData = (source) => parseData(source, isLumenFunnelDatum, { id: '', label: '', value: NaN });
+export const parseBoxPlotData = (source) => parseData(source, isLumenBoxPlotDatum, { id: '', label: '', min: NaN, q1: NaN, median: NaN, q3: NaN, max: NaN });
+const domainFor = (element) => element.hasAttribute('domain-min') || element.hasAttribute('domain-max') ? { min: bulletNumberAttribute(element, 'domain-min'), max: bulletNumberAttribute(element, 'domain-max') } : undefined;
+const calendarRange = (element, formatter) => `${formatter(element.getAttribute('start-date') ?? '')} – ${formatter(element.getAttribute('end-date') ?? '')}`;
+const status = (message) => `<p class="ui-chart__empty" role="status">${escape(message)}</p>`;
+const summary = (element, value) => `<p class="ui-sr-only" data-ui-chart-summary>${escape(element.getAttribute('summary') ?? value)}</p>`;
+const table = (element, text, headings, rows) => element.getAttribute('show-table') === 'false' ? '' : `<details class="ui-chart__data"><summary>${escape(text.viewData)}</summary><div role="group" tabindex="0" aria-label="${escape(text.chartData)}"><table><thead><tr>${headings.map(heading => `<th scope="col">${escape(heading)}</th>`).join('')}</tr></thead><tbody>${rows.map(row => `<tr>${row.map((cell, index) => index === 0 ? `<th scope="row">${escape(cell)}</th>` : `<td>${escape(cell)}</td>`).join('')}</tr>`).join('')}</tbody></table></div></details>`;
+export const calendarHeatmapHtml = (element, data, text, formatter, dateFormatter, weekdays) => {
+    const weekStartsOn = element.hasAttribute('week-starts-on') ? bulletNumberAttribute(element, 'week-starts-on') : 0;
+    if (weekStartsOn !== 0 && weekStartsOn !== 1)
+        return status(text.invalidData);
+    const model = createLumenCalendarHeatmapGeometry(data, { startDate: element.getAttribute('start-date') ?? '', endDate: element.getAttribute('end-date') ?? '', weekStartsOn, domain: domainFor(element) });
+    if (!model.valid)
+        return status(text.invalidData);
+    const format = (value) => value === null ? text.notAvailable : formatter(value);
+    const available = model.cells.filter(cell => cell.value !== null).length;
+    const weekdayNames = Array.from({ length: 7 }, (_, day) => `<text class="ui-calendar-heatmap__weekday" x="0" y="${day * 18 + 16}">${escape(weekdays[(day + weekStartsOn) % 7] ?? '')}</text>`).join('');
+    const cells = model.cells.map(cell => `<g><rect class="ui-calendar-heatmap__cell ui-chart-tone--series-1"${cell.value === null ? ' data-missing="true"' : ''} x="${cell.week * 18 + 36}" y="${cell.day * 18 + 4}" width="14" height="14" rx="3" style="fill-opacity:${cell.ratio === null ? 1 : 0.15 + cell.ratio * 0.85}"><title>${escape(`${dateFormatter(cell.date)}: ${format(cell.value)}`)}</title></rect>${cell.value === null ? `<text class="ui-calendar-heatmap__missing" x="${cell.week * 18 + 43}" y="${cell.day * 18 + 15}" text-anchor="middle">×</text>` : ''}</g>`).join('');
+    const dates = model.cells.filter(cell => cell.day === 0 && cell.week % 4 === 0).map(cell => `<text class="ui-calendar-heatmap__weekday" x="${cell.week * 18 + 36}" y="142">${escape(cell.date.slice(5))}</text>`).join('');
+    return summary(element, text.formatHeatmapSummary(available)) + (available === 0 ? status(text.empty) : '') + `<p class="ui-calendar-heatmap__range">${escape(calendarRange(element, dateFormatter))}</p><div class="ui-calendar-heatmap__plot" role="group" tabindex="0" aria-label="${escape(text.chartData)}"><svg aria-hidden="true" width="${model.weekCount * 18 + 36}" height="146" viewBox="0 0 ${model.weekCount * 18 + 36} 146">${weekdayNames}${cells}${dates}</svg></div><div class="ui-calendar-heatmap__legend"><span>${escape(text.low)}: ${escape(formatter(model.domain.min))}</span><span>${escape(text.high)}: ${escape(formatter(model.domain.max))}</span><span class="ui-calendar-heatmap__scale" aria-hidden="true"></span><span>× ${escape(text.notAvailable)}</span></div>` + (element.getAttribute('show-table') === 'false' ? `<ul class="ui-sr-only">${model.cells.map(cell => `<li>${escape(dateFormatter(cell.date))}: ${escape(format(cell.value))}</li>`).join('')}</ul>` : '') + table(element, text, [text.category, text.value], model.cells.map(cell => [dateFormatter(cell.date), format(cell.value)]));
+};
+export const funnelChartHtml = (element, data, text, formatter) => {
+    const model = createLumenFunnelGeometry(data);
+    if (!model.valid || !model.rows.length)
+        return status(model.valid ? text.empty : text.invalidData);
+    const format = (value) => value === null ? text.notAvailable : formatter(value);
+    const rows = model.rows.map((row, index) => `<li class="${getLumenChartToneClassName(row.tone, index)}"><div class="ui-funnel-chart__label"><span>${escape(row.label)}</span><strong>${escape(format(row.value))}</strong></div><div class="ui-funnel-chart__track" aria-hidden="true">${row.ratio === null ? '' : `<span class="ui-funnel-chart__bar" style="width:${row.ratio * 100}%"></span>`}</div></li>`).join('');
+    return summary(element, model.rows.map(row => `${row.label}: ${format(row.value)}`).join('. ')) + `<ol class="ui-funnel-chart__rows">${rows}</ol>` + table(element, text, [text.category, text.value], model.rows.map(row => [row.label, format(row.value)]));
+};
+const defaultBoxPlotStatistics = { min: 'Lower whisker', q1: 'First quartile', median: 'Median', q3: 'Third quartile', max: 'Upper whisker', outliers: 'Outliers' };
+export const boxPlotHtml = (element, data, text, formatter, statisticLabels) => {
+    const model = createLumenBoxPlotGeometry(data, { domain: domainFor(element) });
+    if (!model.valid || !model.rows.length)
+        return status(model.valid ? text.empty : text.invalidData);
+    const stats = { ...defaultBoxPlotStatistics, ...statisticLabels };
+    const keys = ['min', 'q1', 'median', 'q3', 'max'];
+    const format = (value) => value === null ? text.notAvailable : formatter(value);
+    const exactRows = model.rows.map(row => `${row.label}: ${keys.map(key => `${stats[key]}: ${format(row[key])}`).join(', ')}. ${stats.outliers}: ${(row.outliers ?? []).map(formatter).join(', ') || '—'}`);
+    const rows = model.rows.map((row, index) => {
+        const whisker = row.minPosition !== null && row.maxPosition !== null ? `<span class="ui-box-plot__whisker" style="left:${row.minPosition * 100}%;width:${(row.maxPosition - row.minPosition) * 100}%"></span>` : '';
+        const box = row.q1Position !== null && row.q3Position !== null ? `<span class="ui-box-plot__box" style="left:${row.q1Position * 100}%;width:${(row.q3Position - row.q1Position) * 100}%"></span>` : '';
+        const median = row.medianPosition === null ? '' : `<span class="ui-box-plot__median" style="left:${row.medianPosition * 100}%"></span>`;
+        const caps = [row.minPosition, row.maxPosition].map(position => position === null ? '' : `<span class="ui-box-plot__cap" style="left:${position * 100}%"></span>`).join('');
+        const outliers = row.outlierPositions.map(position => `<span class="ui-box-plot__outlier" style="left:${position * 100}%"></span>`).join('');
+        return `<li class="${getLumenChartToneClassName(row.tone, index)}"><div class="ui-box-plot__label"><span>${escape(row.label)}</span><strong>${escape(stats.median)}: ${escape(format(row.median))}</strong></div><div class="ui-box-plot__track" aria-hidden="true">${whisker}${box}${median}${caps}${outliers}</div></li>`;
+    }).join('');
+    return summary(element, exactRows.join('. ')) + `<ul class="ui-box-plot__rows">${rows}</ul><div class="ui-bullet-chart__ticks" aria-hidden="true">${model.ticks.map(tick => `<span>${escape(formatter(tick))}</span>`).join('')}</div>` + (element.getAttribute('show-table') === 'false' ? `<ul class="ui-sr-only">${exactRows.map(row => `<li>${escape(row)}</li>`).join('')}</ul>` : '') + table(element, text, [text.category, ...keys.map(key => stats[key]), stats.outliers], model.rows.map(row => [row.label, ...keys.map(key => format(row[key])), (row.outliers ?? []).map(formatter).join(', ') || '—']));
+};

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export type { LumenChartDatumActionsElement } from './chart-activation.js';
 export * from './define.js';
-export type { LumenTabsChangeDetail, LumenTabsChangeEvent } from '@santi020k/lumen-core';
+export type { LumenChartDatumActivationDetail, LumenTabsChangeDetail, LumenTabsChangeEvent } from '@santi020k/lumen-core';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,YAAY,EACV,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,6BAA6B,EAAE,MAAM,uBAAuB,CAAA;AAC1E,cAAc,aAAa,CAAA;AAC3B,YAAY,EACV,+BAA+B,EAC/B,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,uBAAuB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@santi020k/lumen-elements",
-  "version": "3.0.1",
+  "version": "4.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -40,6 +40,10 @@
       "types": "./dist/components/combobox.d.ts",
       "import": "./dist/components/combobox.js"
     },
+    "./components/image-comparison": {
+      "types": "./dist/components/image-comparison.d.ts",
+      "import": "./dist/components/image-comparison.js"
+    },
     "./components/foundations": {
       "types": "./dist/components/foundations.d.ts",
       "import": "./dist/components/foundations.js"
@@ -47,7 +51,31 @@
     "./styles.css": "./styles.css",
     "./styles/critical.css": "./styles/critical.css",
     "./layers.css": "./layers.css",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./components/dashboard": {
+      "types": "./dist/components/dashboard.d.ts",
+      "import": "./dist/components/dashboard.js"
+    },
+    "./components/virtual-list": {
+      "types": "./dist/components/virtual-list.d.ts",
+      "import": "./dist/components/virtual-list.js"
+    },
+    "./components/device-frame": {
+      "types": "./dist/components/device-frame.d.ts",
+      "import": "./dist/components/device-frame.js"
+    },
+    "./components/world-map": {
+      "types": "./dist/components/world-map.d.ts",
+      "import": "./dist/components/world-map.js"
+    },
+    "./components/media-viewport": {
+      "types": "./dist/components/media-viewport.d.ts",
+      "import": "./dist/components/media-viewport.js"
+    },
+    "./components/media-selection": {
+      "types": "./dist/components/media-selection.d.ts",
+      "import": "./dist/components/media-selection.js"
+    }
   },
   "files": [
     "bin",
@@ -62,16 +90,16 @@
     "lumen": "./bin/lumen.mjs"
   },
   "dependencies": {
-    "@santi020k/lumen": "^3.0.1",
-    "@santi020k/lumen-core": "^3.0.1"
+    "@santi020k/lumen": "^4.1.0",
+    "@santi020k/lumen-core": "^4.1.0"
   },
   "devDependencies": {
-    "@vitest/coverage-v8": "^5.0.1",
+    "@vitest/coverage-v8": "^5.0.3",
     "axe-core": "^4.13.0",
     "esbuild": "^0.28.2",
     "jsdom": "^30.1.1",
     "typescript": "~6.0.3",
-    "vitest": "^5.0.1"
+    "vitest": "^5.0.3"
   },
   "engines": {
     "node": ">=22.12.0"