import { r as registerInstance, g as getElement, j as jsx, H as Host } from './index-C7YNCRgy.js';

const resetCss = () => `@layer reset, base, variants, states, sizes;  @layer reset {   :host {     display: contents;     -moz-text-size-adjust: none;     -webkit-text-size-adjust: none;     text-size-adjust: none;     font-family: var(--dds-font-family-sans);     font-feature-settings: var(--dds-font-features-sans);     text-rendering: optimizeLegibility;     -webkit-font-smoothing: antialiased;      *,     *::after,     *::before,     *::backdrop,     *::file-selector-button {       box-sizing: border-box;       margin: 0;       padding: 0;       min-inline-size: 0;       min-block-size: 0;     }      * {       scrollbar-width: thin;       scrollbar-color: color-mix(gray 50%, transparent);     }      *:focus-visible {       z-index: 1;     }      > * {       interpolate-size: allow-keywords;       -webkit-tap-highlight-color: transparent;     }   } } `;

const sparklineCss = () => `@layer base{:host{display:inline-flex}.dds-sparkline{font-family:var(--dds-font-family-data);font-feature-settings:'liga';white-space:nowrap;user-select:none;text-transform:none}}`;

const Sparkline = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    get host() { return getElement(this); }
    data = [5, 15, 10, 50, 35, 45, 50, 100, 10, 100, 80, 15, 40, 45, 20, 10, 5, 15, 25, 35];
    // MARK: Props
    // @Prop({ mutable: true }) data: number[] = [];
    color;
    type = "line";
    // MARK: Render
    render() {
        const { data, type, color } = this;
        let parsed = data;
        if (typeof data === "string") {
            try {
                parsed = JSON.parse(data);
            }
            catch {
                parsed = [Number(data)];
            }
        }
        const values = Array.isArray(parsed) ? parsed.slice(0, 20) : [parsed];
        let content;
        if (type === "bar") {
            content = `{b:${values.join(",")}}`;
        }
        else if (type === "pie") {
            content = `{p:${values[0]}}`;
        }
        else {
            content = `{l:${values.join(",")}}`;
        }
        return (jsx(Host, { part: "root", style: color ? { color } : undefined, children: jsx("span", { class: "dds-sparkline", part: "chart", children: content }, '47d7a6beebd381dedd517d2927150b8553ba33fc') }, '6c469b59e3be51734d133d10aabf6697fae07876'));
    }
};
Sparkline.style = resetCss() + sparklineCss();

export { Sparkline as dds_sparkline };
