@quicdata/analytics 0.0.3 → 0.0.5

package/filters/filter-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-bar.d.ts","sourceRoot":"","sources":["../../../../libs/analytics/src/filters/filter-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,gBAAgB,EAAgB,MAAM,kBAAkB,CAAC;AAEvE,eAAO,MAAM,mBAAmB,4BAA4B,CAAC;AAC7D,eAAO,MAAM,kBAAkB,2BAA2B,CAAC;AAE3D;;;GAGG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,OAAgB,MAAM,0BAsEpB;IAEF,sDAAsD;IAC3B,OAAO,EAAE,gBAAgB,EAAE,CAAM;IAE5D,iDAAiD;IACrB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAM;IAEnF,wCAAwC;IACX,SAAS,UAAQ;IAE9C,sLAAsL;IACtL,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,QAAQ;IAShB,OAAO,CAAC,QAAQ;IAShB,OAAO,CAAC,MAAM;IAId,mJAAmJ;IACnJ,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,cAAc;IA2Eb,MAAM;CAgBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"}

package/filters/filter-bar.js

@@ -0,0 +1,233 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+export const EVENT_FILTER_CHANGE = 'analytics-filter-change';
+export const EVENT_FILTER_CLOSE = 'analytics-filter-close';
+/**
+ * Filter bar: renders a row of filter controls from filter definitions.
+ * Emits analytics-filter-change when any value changes; analytics-filter-close when close is clicked.
+ */
+let AnalyticsFilterBar = class AnalyticsFilterBar extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Filter definitions (param_name, type, options). */
+        this.filters = [];
+        /** Current filter values keyed by param_name. */
+        this.values = {};
+        /** Whether to show the close button. */
+        this.showClose = true;
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+    }
+    .bar {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.75rem 1rem;
+      padding: 0.75rem 1rem;
+      background: var(--analytics-filter-bar-bg, transparent);
+      border: none;
+      border-radius: 0.5rem;
+    }
+    .group {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    label {
+      font-size: 0.8125rem;
+      font-weight: 500;
+      color: var(--analytics-filter-bar-label-color, #475569);
+      white-space: nowrap;
+    }
+    select,
+    input[type='text'],
+    input[type='number'],
+    input[type='date'] {
+      padding: 0.375rem 0.5rem;
+      font-size: 0.875rem;
+      border: 1px solid var(--analytics-filter-bar-input-border, #cbd5e1);
+      border-radius: 0.375rem;
+      min-width: 8rem;
+      background: var(--analytics-filter-bar-input-bg, #fff);
+      color: var(--analytics-filter-bar-input-color, inherit);
+    }
+    select:focus,
+    input:focus {
+      outline: none;
+      border-color: #3b82f6;
+      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+    }
+    .actions {
+      margin-left: auto;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .btn {
+      padding: 0.375rem 0.75rem;
+      font-size: 0.8125rem;
+      border-radius: 0.375rem;
+      cursor: pointer;
+      border: 1px solid var(--analytics-filter-bar-border, #e2e8f0);
+      background: transparent;
+      color: var(--analytics-filter-bar-close-color, #64748b);
+    }
+    .btn:hover {
+      background: var(--analytics-filter-bar-close-hover-bg, #f1f5f9);
+      color: var(--analytics-filter-bar-close-hover-color, #334155);
+    }
+    .btn-clear {
+      color: #0ea5e9;
+      border-color: rgba(14, 165, 233, 0.4);
+    }
+    .btn-clear:hover {
+      background: rgba(14, 165, 233, 0.08);
+      color: #0284c7;
+    }
+  `; }
+    /** Build params to send: use default_value only when param was never set (undefined). User input or Clear sets explicit value (including ''), so we do not use default_value then. */
+    _effectiveParams() {
+        const out = {};
+        for (const def of this.filters) {
+            const current = this.values[def.param_name];
+            const neverSet = !(def.param_name in this.values) || current === undefined;
+            out[def.param_name] = neverSet ? (def.default_value ?? '') : (current ?? '');
+        }
+        return out;
+    }
+    _emitChange() {
+        this.dispatchEvent(new CustomEvent(EVENT_FILTER_CHANGE, {
+            bubbles: true,
+            composed: true,
+            detail: { params: this._effectiveParams() },
+        }));
+    }
+    _onInput(paramName, value) {
+        this.values = { ...this.values, [paramName]: value };
+        this._emitChange();
+    }
+    _onClear() {
+        const empty = {};
+        for (const def of this.filters) {
+            empty[def.param_name] = '';
+        }
+        this.values = empty;
+        this._emitChange();
+    }
+    _onClose() {
+        this.dispatchEvent(new CustomEvent(EVENT_FILTER_CLOSE, {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _label(def) {
+        return (def.label != null && def.label !== '') ? def.label : def.param_name;
+    }
+    /** Display value: show default_value only when param was never set (rerender). After user input or Clear, show the actual value (including ''). */
+    _effectiveValue(def) {
+        const v = this.values[def.param_name];
+        const neverSet = !(def.param_name in this.values) || v === undefined;
+        if (neverSet)
+            return def.default_value ?? '';
+        return v ?? '';
+    }
+    _renderControl(def) {
+        const value = this._effectiveValue(def);
+        const options = (def.options ?? []);
+        const label = this._label(def);
+        if (def.type === 'preset' || (options.length > 0 && ['select', 'dropdown'].includes(def.type))) {
+            const current = (value !== '' && value != null ? String(value) : '');
+            return html `
+        <div class="group">
+          <label for="filter-${def.param_name}">${label}</label>
+          <select
+            id="filter-${def.param_name}"
+            .value=${current}
+            @change=${(e) => {
+                const v = e.target.value;
+                const opt = options.find((o) => String(o.value) === v);
+                this._onInput(def.param_name, opt != null ? opt.value : v);
+            }}
+          >
+            <option value="">—</option>
+            ${options.map((o) => html `<option value="${String(o.value)}" .selected=${String(o.value) === current}>
+                  ${o.label ?? String(o.value)}
+                </option>`)}
+          </select>
+        </div>
+      `;
+        }
+        if (def.type === 'number') {
+            const num = typeof value === 'number' ? value : value !== '' && value != null ? Number(value) : (def.default_value != null ? Number(def.default_value) : '');
+            return html `
+        <div class="group">
+          <label for="filter-${def.param_name}">${label}</label>
+          <input
+            type="number"
+            id="filter-${def.param_name}"
+            .value=${num}
+            @input=${(e) => this._onInput(def.param_name, Number(e.target.value) || 0)}
+          />
+        </div>
+      `;
+        }
+        if (def.type === 'date') {
+            const str = (value != null && value !== '' ? String(value) : (def.default_value != null ? String(def.default_value) : ''));
+            return html `
+        <div class="group">
+          <label for="filter-${def.param_name}">${label}</label>
+          <input
+            type="date"
+            id="filter-${def.param_name}"
+            .value=${str}
+            @input=${(e) => this._onInput(def.param_name, e.target.value)}
+          />
+        </div>
+      `;
+        }
+        const str = (value != null && value !== '' ? String(value) : (def.default_value != null ? String(def.default_value) : ''));
+        return html `
+      <div class="group">
+        <label for="filter-${def.param_name}">${label}</label>
+        <input
+          type="text"
+          id="filter-${def.param_name}"
+          .value=${str}
+          @input=${(e) => this._onInput(def.param_name, e.target.value)}
+        />
+      </div>
+    `;
+    }
+    render() {
+        if (this.filters.length === 0) {
+            return html `<div class="bar"><span style="color:#64748b;font-size:0.875rem">No filters</span></div>`;
+        }
+        return html `
+      <div class="bar">
+        ${this.filters.map((def) => this._renderControl(def))}
+        <div class="actions">
+          <button type="button" class="btn btn-clear" @click=${this._onClear} title="Reset all filters to default">Clear</button>
+          ${this.showClose
+            ? html `<button type="button" class="btn" @click=${this._onClose} title="Close" aria-label="Close">×</button>`
+            : ''}
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], AnalyticsFilterBar.prototype, "filters", void 0);
+__decorate([
+    property({ type: Object })
+], AnalyticsFilterBar.prototype, "values", void 0);
+__decorate([
+    property({ type: Boolean })
+], AnalyticsFilterBar.prototype, "showClose", void 0);
+AnalyticsFilterBar = __decorate([
+    customElement('analytics-filter-bar')
+], AnalyticsFilterBar);
+export { AnalyticsFilterBar };

package/filters/filter-button.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+export declare const EVENT_FILTER_TOGGLE = "analytics-filter-toggle";
+/**
+ * Filter button: toggles filter bar visibility.
+ * Dispatches analytics-filter-toggle when clicked; parent should show/hide the filter bar.
+ * Optionally shows a badge when activeCount > 0.
+ */
+export declare class AnalyticsFilterButton extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Number of active filters (shows badge when > 0). */
+    activeCount: number;
+    /** Whether the filter bar is currently open (button appears active). */
+    open: boolean;
+    private _onClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'analytics-filter-button': AnalyticsFilterButton;
+    }
+}
+//# sourceMappingURL=filter-button.d.ts.map

package/filters/filter-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-button.d.ts","sourceRoot":"","sources":["../../../../libs/analytics/src/filters/filter-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,eAAO,MAAM,mBAAmB,4BAA4B,CAAC;AAE7D;;;;GAIG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACnD,OAAgB,MAAM,0BAqCpB;IAEF,uDAAuD;IAC3B,WAAW,SAAK;IAE5C,wEAAwE;IAC3C,IAAI,UAAS;IAE1C,OAAO,CAAC,QAAQ;IASP,MAAM;CAchB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,qBAAqB,CAAC;KAClD;CACF"}

package/filters/filter-button.js

@@ -0,0 +1,86 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+export const EVENT_FILTER_TOGGLE = 'analytics-filter-toggle';
+/**
+ * Filter button: toggles filter bar visibility.
+ * Dispatches analytics-filter-toggle when clicked; parent should show/hide the filter bar.
+ * Optionally shows a badge when activeCount > 0.
+ */
+let AnalyticsFilterButton = class AnalyticsFilterButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Number of active filters (shows badge when > 0). */
+        this.activeCount = 0;
+        /** Whether the filter bar is currently open (button appears active). */
+        this.open = false;
+    }
+    static { this.styles = css `
+    :host {
+      display: inline-block;
+    }
+    button {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.375rem;
+      padding: 0.375rem 0.75rem;
+      font-size: 0.875rem;
+      color: #475569;
+      background: #fff;
+      border: 1px solid #e2e8f0;
+      border-radius: 0.375rem;
+      cursor: pointer;
+    }
+    button:hover {
+      background: #f8fafc;
+      border-color: #cbd5e1;
+      color: #334155;
+    }
+    button.active {
+      border-color: #3b82f6;
+      color: #3b82f6;
+      background: #eff6ff;
+    }
+    .badge {
+      min-width: 1.25rem;
+      height: 1.25rem;
+      padding: 0 0.25rem;
+      font-size: 0.75rem;
+      line-height: 1.25rem;
+      text-align: center;
+      background: #3b82f6;
+      color: #fff;
+      border-radius: 9999px;
+    }
+  `; }
+    _onClick() {
+        this.dispatchEvent(new CustomEvent(EVENT_FILTER_TOGGLE, {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return html `
+      <button
+        type="button"
+        class="${this.open ? 'active' : ''}"
+        @click=${this._onClick}
+        aria-expanded="${this.open}"
+        aria-label="${this.open ? 'Hide filters' : 'Show filters'}"
+      >
+        <span aria-hidden="true">Filters</span>
+        ${this.activeCount > 0 ? html `<span class="badge">${this.activeCount}</span>` : ''}
+      </button>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], AnalyticsFilterButton.prototype, "activeCount", void 0);
+__decorate([
+    property({ type: Boolean })
+], AnalyticsFilterButton.prototype, "open", void 0);
+AnalyticsFilterButton = __decorate([
+    customElement('analytics-filter-button')
+], AnalyticsFilterButton);
+export { AnalyticsFilterButton };

package/filters/index.d.ts

@@ -0,0 +1,7 @@
+export { AnalyticsFilterBar, EVENT_FILTER_CHANGE, EVENT_FILTER_CLOSE } from './filter-bar.js';
+export { AnalyticsFilterButton, EVENT_FILTER_TOGGLE } from './filter-button.js';
+export { AnalyticsWidgetToolbar } from './widget-toolbar.js';
+import './filter-bar.js';
+import './filter-button.js';
+import './widget-toolbar.js';
+//# sourceMappingURL=index.d.ts.map

package/filters/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../libs/analytics/src/filters/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC9F,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAChF,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,OAAO,iBAAiB,CAAC;AACzB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,qBAAqB,CAAC"}

package/filters/index.js

@@ -0,0 +1,6 @@
+export { AnalyticsFilterBar, EVENT_FILTER_CHANGE, EVENT_FILTER_CLOSE } from './filter-bar.js';
+export { AnalyticsFilterButton, EVENT_FILTER_TOGGLE } from './filter-button.js';
+export { AnalyticsWidgetToolbar } from './widget-toolbar.js';
+import './filter-bar.js';
+import './filter-button.js';
+import './widget-toolbar.js';

package/filters/widget-toolbar.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+import type { FilterDefinition } from '../core/types.js';
+/**
+ * Floating widget toolbar: glass-style bar at top-right, visible on hover.
+ * Contains filter icon; click opens a dialog with the filter form.
+ */
+export declare class AnalyticsWidgetToolbar extends LitElement {
+    static styles: import("lit").CSSResult;
+    filters: FilterDefinition[];
+    values: Record<string, string | number | boolean>;
+    activeCount: number;
+    private _dialogOpen;
+    private _onFilterIconClick;
+    private _onDialogClose;
+    private _onFilterChange;
+    private _onFilterBarClose;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'analytics-widget-toolbar': AnalyticsWidgetToolbar;
+    }
+}
+//# sourceMappingURL=widget-toolbar.d.ts.map

package/filters/widget-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget-toolbar.d.ts","sourceRoot":"","sources":["../../../../libs/analytics/src/filters/widget-toolbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGzD;;;GAGG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD,OAAgB,MAAM,0BAyHpB;IAEyB,OAAO,EAAE,gBAAgB,EAAE,CAAM;IAChC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAM;IACvD,WAAW,SAAK;IAEnC,OAAO,CAAC,WAAW,CAAS;IAErC,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,iBAAiB;IAIhB,MAAM;CA8ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,0BAA0B,EAAE,sBAAsB,CAAC;KACpD;CACF"}

package/filters/widget-toolbar.js

@@ -0,0 +1,219 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { EVENT_FILTER_CHANGE, EVENT_FILTER_CLOSE } from './filter-bar.js';
+/**
+ * Floating widget toolbar: glass-style bar at top-right, visible on hover.
+ * Contains filter icon; click opens a dialog with the filter form.
+ */
+let AnalyticsWidgetToolbar = class AnalyticsWidgetToolbar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.filters = [];
+        this.values = {};
+        this.activeCount = 0;
+        this._dialogOpen = false;
+    }
+    static { this.styles = css `
+    :host {
+      position: absolute;
+      top: 0.5rem;
+      right: 0.5rem;
+      z-index: var(--analytics-widget-toolbar-z-index, 20);
+      opacity: 0;
+      transition: opacity 0.2s ease;
+      pointer-events: none;
+    }
+    :host(.visible) {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    .toolbar {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+      padding: 0.375rem 0.5rem;
+      background: rgba(0, 0, 0, 0.55);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      border-radius: 8px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+    .icon-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 2rem;
+      height: 2rem;
+      padding: 0;
+      color: rgba(255, 255, 255, 0.9);
+      background: transparent;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+    }
+    .icon-btn:hover {
+      background: rgba(255, 255, 255, 0.15);
+      color: #fff;
+    }
+    .icon-btn svg {
+      width: 1.125rem;
+      height: 1.125rem;
+    }
+    .badge {
+      position: absolute;
+      top: -2px;
+      right: -2px;
+      min-width: 1rem;
+      height: 1rem;
+      padding: 0 0.2rem;
+      font-size: 0.65rem;
+      line-height: 1rem;
+      text-align: center;
+      background: #3b82f6;
+      color: #fff;
+      border-radius: 9999px;
+    }
+    .overlay {
+      position: fixed;
+      inset: 0;
+      z-index: var(--analytics-widget-toolbar-overlay-z-index, 1000);
+      background: var(--analytics-widget-toolbar-overlay-bg, rgba(0, 0, 0, 0.35));
+      backdrop-filter: var(--analytics-widget-toolbar-overlay-backdrop-filter, blur(2px));
+      -webkit-backdrop-filter: var(--analytics-widget-toolbar-overlay-backdrop-filter, blur(2px));
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      padding: 2rem;
+      box-sizing: border-box;
+    }
+    .dialog {
+      position: relative;
+      z-index: var(--analytics-widget-toolbar-dialog-z-index, 1);
+      background: #fff;
+      border-radius: 12px;
+      border: 1px solid #e2e8f0;
+      box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
+      min-width: 320px;
+      max-width: 90vw;
+      max-height: 85vh;
+      overflow: auto;
+    }
+    .dialog-close {
+      position: absolute;
+      top: 0.5rem;
+      right: 0.5rem;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 2rem;
+      height: 2rem;
+      padding: 0;
+      color: #64748b;
+      background: transparent;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      z-index: calc(var(--analytics-widget-toolbar-dialog-z-index, 1) + 1);
+    }
+    .dialog-close:hover {
+      background: #f1f5f9;
+      color: #334155;
+    }
+    .dialog-body {
+      padding: 2.5rem 2.5rem 1rem 1rem;
+      /* Light mode: use filter-bar defaults (light bg, dark text) */
+      --analytics-filter-bar-bg: transparent;
+      --analytics-filter-bar-border: transparent;
+      --analytics-filter-bar-label-color: #475569;
+      --analytics-filter-bar-input-bg: #fff;
+      --analytics-filter-bar-input-border: #cbd5e1;
+      --analytics-filter-bar-input-color: inherit;
+      --analytics-filter-bar-close-color: #64748b;
+      --analytics-filter-bar-close-hover-bg: #f1f5f9;
+      --analytics-filter-bar-close-hover-color: #334155;
+    }
+  `; }
+    _onFilterIconClick() {
+        this._dialogOpen = true;
+    }
+    _onDialogClose() {
+        this._dialogOpen = false;
+        this.dispatchEvent(new CustomEvent(EVENT_FILTER_CLOSE, { bubbles: true, composed: true }));
+    }
+    _onFilterChange(e) {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent(EVENT_FILTER_CHANGE, {
+            bubbles: true,
+            composed: true,
+            detail: e.detail,
+        }));
+    }
+    _onFilterBarClose() {
+        this._dialogOpen = false;
+    }
+    render() {
+        const hasFilters = this.filters.length > 0;
+        if (!hasFilters)
+            return html ``;
+        return html `
+      <div class="toolbar" role="toolbar">
+        <button
+          type="button"
+          class="icon-btn"
+          aria-label="Filters"
+          aria-haspopup="dialog"
+          aria-expanded="${this._dialogOpen}"
+          @click=${this._onFilterIconClick}
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
+          </svg>
+          ${this.activeCount > 0 ? html `<span class="badge">${this.activeCount}</span>` : ''}
+        </button>
+      </div>
+
+      ${this._dialogOpen
+            ? html `
+            <div class="overlay" role="dialog" aria-modal="true" aria-label="Filters" @click=${this._onDialogClose}>
+              <div class="dialog" @click=${(e) => e.stopPropagation()}>
+                <button type="button" class="dialog-close" aria-label="Close" @click=${this._onDialogClose}>
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                  </svg>
+                </button>
+                <div class="dialog-body">
+                  <analytics-filter-bar
+                    .filters=${this.filters}
+                    .values=${this.values}
+                    .showClose=${false}
+                    @analytics-filter-change=${this._onFilterChange}
+                    @analytics-filter-close=${this._onFilterBarClose}
+                  ></analytics-filter-bar>
+                </div>
+              </div>
+            </div>
+          `
+            : ''}
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], AnalyticsWidgetToolbar.prototype, "filters", void 0);
+__decorate([
+    property({ type: Object })
+], AnalyticsWidgetToolbar.prototype, "values", void 0);
+__decorate([
+    property({ type: Number })
+], AnalyticsWidgetToolbar.prototype, "activeCount", void 0);
+__decorate([
+    state()
+], AnalyticsWidgetToolbar.prototype, "_dialogOpen", void 0);
+AnalyticsWidgetToolbar = __decorate([
+    customElement('analytics-widget-toolbar')
+], AnalyticsWidgetToolbar);
+export { AnalyticsWidgetToolbar };

package/index.d.ts

@@ -1,2 +1,10 @@
-export {};
+export { setAnalyticsApiKey, getAnalyticsApiKey, buildWidgetDataUrl, fetchAnalyticsData, fetchWidgetData, } from './core/index.js';
+export type { AnalyticsDataResponse, AnalyticsDataMeta, AnalyticsRequestParams, WidgetDataResponse, WidgetDataApiResponse, WidgetDataOptions, DatetimeGranularity, DimensionRef, MeasureRef, FilterDefinition, FilterOption, BarChartConfig, LineChartConfig, DonutPieChartConfig, NumberKpiChartConfig, TableChartConfig, ChartType, WidgetDefinitionConfig, } from './core/index.js';
+export { BaseChartWidget, BarChartWidget, LineChartWidget, PieChartWidget, TableWidget, AnalyticsWidget, AnalyticsReport, } from './widgets/index.js';
+export { DashboardContainer, EVENT_DASHBOARD_FILTER_CHANGE, EVENT_DASHBOARD_REFRESH, EVENT_DASHBOARD_LAYOUT_CHANGE, } from './dashboard/index.js';
+export type { DashboardLayout, DashboardSlot, GridsterGridItem } from './dashboard/index.js';
+export { AnalyticsFilterBar, AnalyticsFilterButton, AnalyticsWidgetToolbar } from './filters/index.js';
+export { EVENT_FILTER_CHANGE, EVENT_FILTER_CLOSE, EVENT_FILTER_TOGGLE } from './filters/index.js';
+export { AnalyticsDesigner } from './designer/index.js';
+export type { DesignerWidgetOption } from './designer/index.js';
 //# sourceMappingURL=index.d.ts.map

package/index.js

@@ -1 +1,6 @@
-export {};
+export { setAnalyticsApiKey, getAnalyticsApiKey, buildWidgetDataUrl, fetchAnalyticsData, fetchWidgetData, } from './core/index.js';
+export { BaseChartWidget, BarChartWidget, LineChartWidget, PieChartWidget, TableWidget, AnalyticsWidget, AnalyticsReport, } from './widgets/index.js';
+export { DashboardContainer, EVENT_DASHBOARD_FILTER_CHANGE, EVENT_DASHBOARD_REFRESH, EVENT_DASHBOARD_LAYOUT_CHANGE, } from './dashboard/index.js';
+export { AnalyticsFilterBar, AnalyticsFilterButton, AnalyticsWidgetToolbar } from './filters/index.js';
+export { EVENT_FILTER_CHANGE, EVENT_FILTER_CLOSE, EVENT_FILTER_TOGGLE } from './filters/index.js';
+export { AnalyticsDesigner } from './designer/index.js';