rapidograph 1.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Olja Milović
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,157 @@
+<p style="text-align: center;">
+  <picture>
+    <source
+      srcset="assets/logo/logo-lockup-light.png"
+      media="(prefers-color-scheme: light)"
+    />
+    <source
+      srcset="assets/logo/logo-lockup-dark.png"
+      media="(prefers-color-scheme: dark)"
+    />
+    <img
+      src="assets/logo/logo-lockup-light.png"
+      alt="Library logo"
+      style="max-width: 100%;"
+    />
+  </picture>
+</p>
+
+<p style="text-align: center;">
+  <strong>A focused charting system built with Web Components.</strong>
+</p>
+
+<p style="text-align: center;">
+  Lightweight, theme-aware, responsive charts rendered with HTML and CSS.
+</p>
+
+[//]: # '<p style="text-align: center;">'
+[//]: # '  <a href="https://github.com/your-org/rapidograph/actions">'
+[//]: # '    <img src="https://img.shields.io/github/actions/workflow/status/olja-milovic/rapidograph/ci.yml"  alt="workflow-status"/>'
+[//]: # "  </a>"
+[//]: # '  <a href="https://www.npmjs.com/package/rapidograph">'
+[//]: # '    <img src="https://img.shields.io/npm/v/rapidograph"  alt="npm-package"/>'
+[//]: # "  </a>"
+[//]: # '  <img src="https://img.shields.io/bundlephobia/minzip/rapidograph"  alt="bundlephobia"/>'
+[//]: # '  <img src="https://img.shields.io/npm/l/rapidograph"  alt="license"/>'
+[//]: # "</p>"
+
+## Overview
+
+Rapidograph is a **charting design system** built on Web Components.
+It provides a small set of **chart primitives** designed to integrate seamlessly into modern UI systems.
+
+Charts are rendered using **HTML and CSS** instead of SVG or Canvas, making them easy to style, theme, and reason about.
+
+> ⚠️ At the moment, Rapidograph includes **only a Bar Chart**.  
+> 📝 Additional chart types will be introduced incrementally.
+
+## Principles
+
+- 🥇 **Design-system first**  
+  Charts integrate into UI systems rather than behaving as isolated visual artifacts.
+
+- 🧩 **Framework-agnostic**  
+  Built with Web Components, works everywhere.
+
+- 🎨 **Theme-aware and CSS-driven**  
+  Support for light and dark themes. Colors and typography controlled via CSS.
+
+- 🔑 **Accessible by design**  
+  Charts are built with accessibility in mind, using predictable interaction patterns and support for assistive
+  technologies.  
+  Accessibility is treated as a core requirement, not an afterthought.
+
+## Installation
+
+```bash
+npm install rapidograph
+```
+
+## Usage
+
+Rapidograph components are standard Web Components and can be used in any environment.
+
+```html
+<rapido-bar
+  id="rapido-bar"
+  category-label="Dates"
+  value-label="Values (%)"
+></rapido-bar>
+
+<script>
+  const rapidobar = document.getElementById("rapido-bar");
+
+  rapidobar.data = [
+    { category: "Jan", value: 10 },
+    { category: "Feb", value: -5 },
+    { category: "Mar", value: 15 },
+  ];
+</script>
+```
+
+## Theming
+
+Charts support **light** and **dark** themes out of the box.
+
+```html
+<rapido-bar id="rapido-bar" theme="dark"></rapido-bar>
+```
+
+Themes can be further customized per-instance using CSS variables such as:
+
+```css
+#rapido-bar {
+  /*light theme colors*/
+  --rpg-bar-color: #85b8ff;
+  --rpg-bar-color-hover: #579cff;
+  /*...*/
+
+  /*dark theme colors*/
+  --rpg-bar-color-dark: #0055cc;
+  --rpg-bar-color-hover-dark: #0c65e3;
+  /*...*/
+}
+```
+
+Rapidograph is designed to integrate naturally with application-level theming systems.
+
+[//]: # "## Documentation"
+[//]: #
+[//]: # "Rapidograph uses **Storybook as the primary documentation surface**."
+[//]: #
+[//]: # "Each chart is documented through interactive stories that demonstrate:"
+[//]: # "- configuration options"
+[//]: # "- layout variations"
+[//]: # "- theming"
+[//]: # "- accessibility considerations"
+[//]: #
+[//]: # "### 📘Storybook"
+[//]: # '➡️<a href="storybook-link">View Storybook</a>'
+
+## Available Charts
+
+### Bar Chart
+
+> The Bar Chart is currently the **only chart available** in Rapidograph.
+
+It is:
+
+- orientation-agnostic (vertical - default, or horizontal)
+- theme-aware (light and dark)
+
+Additional chart types will be added as the library evolves.
+
+## Compatibility
+
+- Modern evergreen browsers
+- Works with React, Angular, Vue, Svelte, or plain HTML
+- No framework-specific dependencies
+
+## Status
+
+Rapidograph is experimental and under active development.  
+Breaking changes may occur prior to a stable release.
+
+## License
+
+MIT

package/dist/components/rapido-bar/index.d.ts

@@ -0,0 +1,69 @@
+import { DataItem, Orientation, ValueFormatters } from '../../shared';
+import { LitElement, PropertyValues } from 'lit';
+export declare class Rapidobar extends LitElement {
+    static get styles(): import('lit').CSSResult;
+    private _data;
+    private _categoryLabels;
+    private _ticks;
+    private _tickLabels;
+    private _hasPositive;
+    private _hasNegative;
+    private _allPositive;
+    private _allNegative;
+    private _yAxisMinWidth;
+    private _yAxisMaxWidth;
+    private _vObserver;
+    private _hObserver;
+    private _oldCursor?;
+    private get _yAxisWidthPercentage();
+    private get _yAxisWidthDescription();
+    private _xAxisHeight;
+    private _firstXAxisLabelWidth;
+    private _lastXAxisLabelWidth;
+    private _scrollbarSize;
+    private _activeBar;
+    private _yAxisWidth;
+    private _isDraggingYAxis;
+    private _focusedBarIndex;
+    get data(): DataItem[];
+    set data(value: DataItem[]);
+    formatters: ValueFormatters;
+    orientation: Orientation;
+    xAxisPosition: "bottom";
+    yAxisPosition: "left";
+    theme: "light";
+    tooltipTheme: "light";
+    categoryLabel: string;
+    valueLabel: string;
+    showLabels: "always";
+    private get _wrapperClasses();
+    private get _wrapperStyles();
+    private get _barContainerClasses();
+    private _wrapper;
+    private _scrollableElem;
+    private _barContainer;
+    private _xAxis;
+    private _yAxis;
+    private _textSizeDiv;
+    private _bars;
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    updated(changedProperties: Map<string, never>): void;
+    private _calculateYAxisWidths;
+    private _calculateTickWidths;
+    private addObservers;
+    private onBarEnter;
+    private onBarContainerMouseLeave;
+    private onBarContainerFocus;
+    private onBarContainerBlur;
+    private onBarContainerKeyDown;
+    private onYAxisPointerDown;
+    private onYAxisKeyDown;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "rapido-bar": Rapidobar;
+    }
+}

package/dist/components/rapido-bar/index.js

@@ -0,0 +1,381 @@
+import { LitElement as V, unsafeCSS as z, css as H, html as c, nothing as S } from "lit";
+import { state as _, property as d, query as y, queryAll as R, eventOptions as A, customElement as N } from "lit/decorators.js";
+import { Tooltip as K } from "../../helpers/tooltip/index.js";
+import { classMap as C } from "lit/directives/class-map.js";
+import { styleMap as F } from "lit/directives/style-map.js";
+import U from "./rapidobar.css.js";
+import { Orientation as b, XAxisPosition as T, YAxisPosition as v, Theme as m, ShowLabels as k } from "../../shared/enums.js";
+import { formatLabels as P, getMinAndMax as j, generateTicks as q, checkIfSomePositiveAndNegative as G, checkIfAllPositiveOrNegative as J, noop as Q, formatLabel as D, getSizeInPercentages as Z, getUpdatedYAxisWidth as f } from "../../utils/rapidobar.js";
+import { MIN_Y_AXIS_WIDTH as tt, MAX_Y_AXIS_WIDTH as L, DEFAULT_Y_AXIS_WIDTH as it, X_AXIS_LAST_LABEL_CSS_VAR as et, X_AXIS_FIRST_LABEL_CSS_VAR as st, DATA_LENGTH_CSS_VAR as at, X_AXIS_HEIGHT_CSS_VAR as rt, Y_AXIS_WIDTH_CSS_VAR as I, SCROLLBAR_WIDTH_CSS_VAR as ot } from "../../shared/constants.js";
+import { calculateYAxisWidths as nt, getTextWidth as M, getScrollbarSize as lt } from "../../utils/dom.js";
+var ht = Object.defineProperty, ct = Object.getOwnPropertyDescriptor, s = (t, i, a, o) => {
+  for (var r = o > 1 ? void 0 : o ? ct(i, a) : i, l = t.length - 1, n; l >= 0; l--)
+    (n = t[l]) && (r = (o ? n(i, a, r) : n(r)) || r);
+  return o && r && ht(i, a, r), r;
+};
+let e = class extends V {
+  constructor() {
+    super(...arguments), this._data = [], this._categoryLabels = [], this._ticks = [], this._tickLabels = [], this._hasPositive = !0, this._hasNegative = !1, this._allPositive = !0, this._allNegative = !1, this._yAxisMinWidth = tt, this._yAxisMaxWidth = L, this._xAxisHeight = 0, this._firstXAxisLabelWidth = 0, this._lastXAxisLabelWidth = 0, this._scrollbarSize = 0, this._activeBar = null, this._yAxisWidth = it, this._isDraggingYAxis = !1, this._focusedBarIndex = 0, this.formatters = {}, this.orientation = b.Vertical, this.xAxisPosition = T.Bottom, this.yAxisPosition = v.Left, this.theme = m.Light, this.tooltipTheme = m.Light, this.categoryLabel = "", this.valueLabel = "", this.showLabels = k.Always;
+  }
+  static get styles() {
+    return H`
+      ${z(U)}
+    `;
+  }
+  get _yAxisWidthPercentage() {
+    const t = this._yAxisMaxWidth - this._yAxisMinWidth;
+    return ((this._yAxisWidth - this._yAxisMinWidth) * 100 / t).toFixed(0);
+  }
+  get _yAxisWidthDescription() {
+    return `Y-axis offset ${this._yAxisWidthPercentage}%`;
+  }
+  get data() {
+    return this._data || [];
+  }
+  set data(t) {
+    const i = this._data;
+    this._data = t, this.requestUpdate("data", i);
+    const a = this._data.length, o = new Array(a), r = new Array(a);
+    this.data.forEach(({ category: x, value: u }, p) => {
+      o[p] = x, r[p] = u;
+    }), this._categoryLabels = P(o, this.formatters.category);
+    const [l, n] = j(r);
+    this._ticks = q(l, n), this._tickLabels = P(this._ticks, this.formatters.value), [this._hasPositive, this._hasNegative] = G(r), [this._allPositive, this._allNegative] = J(r), this._calculateTickWidths();
+  }
+  get _wrapperClasses() {
+    return {
+      rpg: !0,
+      [this.orientation]: !0,
+      [`x-axis-${this.xAxisPosition}`]: !0,
+      [`y-axis-${this.yAxisPosition}`]: !0,
+      [`labels-${this.showLabels}`]: !0
+    };
+  }
+  get _wrapperStyles() {
+    return {
+      [ot]: `${this._scrollbarSize}px`,
+      [I]: `${this._yAxisWidth}px`,
+      [rt]: `${this._xAxisHeight}px`,
+      [at]: this.data.length,
+      [st]: `${this._firstXAxisLabelWidth}px`,
+      [et]: `${this._lastXAxisLabelWidth}px`
+    };
+  }
+  get _barContainerClasses() {
+    return {
+      "rpg-bar-container": !0,
+      "start-from-half": this._hasPositive && this._hasNegative
+    };
+  }
+  render() {
+    const t = this.orientation === b.Vertical, i = t ? this.categoryLabel : this.valueLabel, a = t ? this.valueLabel : this.categoryLabel;
+    let o, r;
+    t ? (o = this._categoryLabels, r = this._tickLabels) : (o = this._tickLabels, r = this._categoryLabels);
+    const l = [];
+    for (const h of o)
+      l.push(c`
+        <div class="rpg-axis-label" title=${h}>${h}</div>
+      `);
+    const n = c`
+      <div class="rpg-x-axis">
+        ${i ? c`<div class="rpg-axis-label rpg-axis-title">
+              <div class="rpg-axis-title-content">${i}</div>
+            </div>` : S}
+        <div class="rpg-x-axis-labels">${l}</div>
+      </div>
+    `, x = [];
+    for (const h of r)
+      x.push(c`
+        <div class="rpg-axis-label" title=${h}>${h}</div>
+      `);
+    const u = c`
+      <div class="rpg-y-axis">
+        <div class="rpg-y-axis-labels">${x}</div>
+        <div
+          class="rpg-y-axis-line-container"
+          role="slider"
+          tabindex=${this.yAxisPosition === v.Left ? "1" : "0"}
+          aria-valuemin="0"
+          aria-valuemax="100"
+          aria-valuenow=${this._yAxisWidthPercentage}
+          aria-valuetext=${this._yAxisWidthDescription}
+          aria-label=${`Y-axis positioned ${this.yAxisPosition}`}
+          @dragstart=${Q}
+          @pointerdown=${this.onYAxisPointerDown}
+          @keydown=${this.onYAxisKeyDown}
+        >
+          ${a ? c`<div class="rpg-axis-label rpg-axis-title">
+                <div class="rpg-axis-title-content">${a}</div>
+              </div>` : S}
+          <div class="rpg-y-axis-line"></div>
+        </div>
+      </div>
+    `, p = [];
+    for (let h = 0; h < this._ticks.length - 1; h++)
+      p.push(c`<div class="rpg-gridline"></div>`);
+    const W = [];
+    for (const [h, { value: g }] of this.data.entries()) {
+      const w = h === this._focusedBarIndex, $ = this._categoryLabels[h], X = this._tickLabels[h], B = D(g, this.formatters.data), Y = D(
+        g,
+        this.formatters.tooltip || this.formatters.value
+      ), E = this._allPositive || !this._allNegative ? g >= 0 : g > 0, O = Z(
+        g,
+        this._ticks[0],
+        this._ticks.at(-1)
+      );
+      W.push(
+        c`<li
+          class="rpg-bar ${E ? "positive" : "negative"}"
+          tabindex=${w ? 0 : -1}
+          aria-current=${w ? "true" : "false"}
+          aria-label="${$}: ${X}"
+          data-category=${$}
+          data-value=${Y}
+        >
+          <div
+            class="rpg-bar-content"
+            style="--rpg-bar-size: ${Math.abs(O)}%;"
+          >
+            <div class="rpg-bar-label">${B}</div>
+            <div class="rpg-small-bar-label">${B}</div>
+          </div>
+        </li>`
+      );
+    }
+    return c`
+      <div
+        class=${C(this._wrapperClasses)}
+        style=${F(this._wrapperStyles)}
+        role="figure"
+      >
+        <div class="rpg-scrollable">
+          <div class="rpg-scrollable-content">
+            ${t ? n : u}
+            <div class="rpg-content-container">
+              <div class="rpg-gridlines">${p}</div>
+              <ul
+                class=${C(this._barContainerClasses)}
+                @mouseenter=${this.onBarEnter}
+                @mouseleave=${this.onBarContainerMouseLeave}
+                @focus=${this.onBarContainerFocus}
+                @blur=${this.onBarContainerBlur}
+                @keydown=${this.onBarContainerKeyDown}
+              >
+                ${this.data.length ? W : c`<div class="rpg-empty-state">No data</div>`}
+              </ul>
+            </div>
+          </div>
+        </div>
+        ${t ? u : n}
+      </div>
+      <tool-tip
+        .element=${this._isDraggingYAxis ? null : this._activeBar}
+        .container=${this._scrollableElem}
+        orientation=${this.orientation}
+        theme=${this.tooltipTheme}
+      ></tool-tip>
+      <div aria-live="polite">${this._yAxisWidthDescription}</div>
+      <div id="rpg-get-text-width" class="rpg-axis-label"></div>
+    `;
+  }
+  connectedCallback() {
+    super.connectedCallback(), customElements.get("tool-tip") || customElements.define("tool-tip", K);
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this._calculateYAxisWidths(), this.addObservers();
+  }
+  updated(t) {
+    this._xAxis && (this._xAxisHeight = this._xAxis.getBoundingClientRect().height ?? 0), (t.get("orientation") || t.get("data")) && this._calculateYAxisWidths();
+  }
+  _calculateYAxisWidths() {
+    const t = this.orientation === b.Vertical;
+    [this._yAxisMinWidth, this._yAxisWidth, this._yAxisMaxWidth] = nt(
+      this._textSizeDiv,
+      this._wrapper,
+      this._yAxis,
+      t ? this._tickLabels : this._categoryLabels
+    );
+  }
+  _calculateTickWidths() {
+    this._firstXAxisLabelWidth = M(
+      this._textSizeDiv,
+      this._tickLabels[0].toString()
+    ), this._lastXAxisLabelWidth = M(
+      this._textSizeDiv,
+      this._tickLabels.at(-1)?.toString()
+    );
+  }
+  addObservers() {
+    const t = {
+      root: this._scrollableElem,
+      threshold: 1
+    }, i = () => {
+      this._scrollbarSize = lt(
+        this.orientation,
+        this._scrollableElem
+      );
+    };
+    this._vObserver = new IntersectionObserver(i, {
+      ...t,
+      rootMargin: "0px -16px"
+    }), this._hObserver = new IntersectionObserver(i, {
+      ...t,
+      rootMargin: "-16px 0px"
+    }), this._vObserver.observe(this._barContainer), this._hObserver.observe(this._barContainer);
+  }
+  onBarEnter(t) {
+    const i = t.target;
+    i.classList.contains("rpg-bar") && (this._activeBar = i);
+  }
+  onBarContainerMouseLeave(t) {
+    t.target === t.currentTarget && (this._activeBar = null);
+  }
+  onBarContainerFocus(t) {
+    this._activeBar = t.target;
+  }
+  onBarContainerBlur(t) {
+    const i = t.relatedTarget;
+    (!i || i && !this._barContainer.contains(i)) && (this._activeBar = null, this._focusedBarIndex = 0);
+  }
+  onBarContainerKeyDown(t) {
+    const i = this.orientation === b.Vertical, a = i ? "ArrowRight" : "ArrowDown", o = i ? "ArrowLeft" : "ArrowUp", r = t.key;
+    r === a ? (t.preventDefault(), this._focusedBarIndex = Math.min(
+      this._focusedBarIndex + 1,
+      this.data.length - 1
+    ), this._bars[this._focusedBarIndex].focus()) : r === o ? (t.preventDefault(), this._focusedBarIndex = Math.max(this._focusedBarIndex - 1, 0), this._bars[this._focusedBarIndex].focus()) : r === "Home" ? (t.preventDefault(), this._focusedBarIndex = 0, this._bars[this._focusedBarIndex].focus()) : r === "End" && (t.preventDefault(), this._focusedBarIndex = this.data.length - 1, this._bars[this._focusedBarIndex].focus());
+  }
+  onYAxisPointerDown(t) {
+    t.preventDefault(), this._isDraggingYAxis = !0;
+    let i = this._yAxisWidth;
+    const a = this, o = (l) => {
+      const n = a._wrapper, x = l.clientX, u = t.clientX;
+      i = a._yAxisWidth + (a.yAxisPosition === v.Left ? x - u : u - x);
+      let p = a._yAxisMaxWidth;
+      i < a._yAxisMinWidth && (i = a._yAxisMinWidth), a._yAxisMaxWidth > n.offsetWidth - L && (p = n.offsetWidth - L), i > p && (i = p), this._wrapper.style.setProperty(I, `${i}px`);
+    };
+    function r() {
+      a._yAxisWidth = i, a._isDraggingYAxis = !1, a._oldCursor ? document.body.style.cursor = a._oldCursor : document.body.style.removeProperty("cursor"), window.removeEventListener("pointermove", o), window.removeEventListener("pointerup", r);
+    }
+    a._oldCursor = document.body.style.cursor, document.body.style.cursor = "col-resize", window.addEventListener("pointermove", o), window.addEventListener("pointerup", r);
+  }
+  onYAxisKeyDown(t) {
+    const i = parseInt(this._yAxisWidthPercentage ?? "0", 10), a = t.key, o = this.yAxisPosition === v.Left, r = o ? "ArrowLeft" : "ArrowRight", l = o ? "ArrowRight" : "ArrowLeft", n = {
+      currentPercentage: i,
+      minWidth: this._yAxisMinWidth,
+      maxWidth: this._yAxisMaxWidth
+    };
+    a === r ? (t.preventDefault(), this._yAxisWidth = f({
+      ...n,
+      widthPercentage: Math.max(i - 5, 0)
+    }) ?? this._yAxisWidth) : a === l ? (t.preventDefault(), this._yAxisWidth = f({
+      ...n,
+      widthPercentage: Math.min(i + 5, 100)
+    }) ?? this._yAxisWidth) : a === "Home" ? (t.preventDefault(), this._yAxisWidth = f({
+      ...n,
+      widthPercentage: 0
+    }) ?? this._yAxisWidth) : a === "End" && (t.preventDefault(), this._yAxisWidth = f({
+      ...n,
+      widthPercentage: 100
+    }) ?? this._yAxisWidth);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._vObserver?.unobserve(this._barContainer), this._hObserver?.unobserve(this._barContainer);
+  }
+};
+s([
+  _()
+], e.prototype, "_xAxisHeight", 2);
+s([
+  _()
+], e.prototype, "_firstXAxisLabelWidth", 2);
+s([
+  _()
+], e.prototype, "_lastXAxisLabelWidth", 2);
+s([
+  _()
+], e.prototype, "_scrollbarSize", 2);
+s([
+  _()
+], e.prototype, "_activeBar", 2);
+s([
+  _()
+], e.prototype, "_yAxisWidth", 2);
+s([
+  _()
+], e.prototype, "_isDraggingYAxis", 2);
+s([
+  _()
+], e.prototype, "_focusedBarIndex", 2);
+s([
+  d({ type: Array, attribute: !1 })
+], e.prototype, "data", 1);
+s([
+  d({ type: Object, attribute: !1 })
+], e.prototype, "formatters", 2);
+s([
+  d({ type: b })
+], e.prototype, "orientation", 2);
+s([
+  d({ type: T, attribute: "x-axis-position" })
+], e.prototype, "xAxisPosition", 2);
+s([
+  d({ type: v, attribute: "y-axis-position" })
+], e.prototype, "yAxisPosition", 2);
+s([
+  d({ type: m })
+], e.prototype, "theme", 2);
+s([
+  d({ type: m, attribute: "tooltip-theme" })
+], e.prototype, "tooltipTheme", 2);
+s([
+  d({ type: String, attribute: "category-label" })
+], e.prototype, "categoryLabel", 2);
+s([
+  d({ type: String, attribute: "value-label" })
+], e.prototype, "valueLabel", 2);
+s([
+  d({ type: k, attribute: "show-labels" })
+], e.prototype, "showLabels", 2);
+s([
+  y(".rpg")
+], e.prototype, "_wrapper", 2);
+s([
+  y(".rpg-scrollable")
+], e.prototype, "_scrollableElem", 2);
+s([
+  y(".rpg-bar-container")
+], e.prototype, "_barContainer", 2);
+s([
+  y(".rpg-x-axis")
+], e.prototype, "_xAxis", 2);
+s([
+  y(".rpg-y-axis")
+], e.prototype, "_yAxis", 2);
+s([
+  y("#rpg-get-text-width")
+], e.prototype, "_textSizeDiv", 2);
+s([
+  R(".rpg-bar")
+], e.prototype, "_bars", 2);
+s([
+  A({ capture: !0 })
+], e.prototype, "onBarEnter", 1);
+s([
+  A({ capture: !0 })
+], e.prototype, "onBarContainerMouseLeave", 1);
+s([
+  A({ capture: !0 })
+], e.prototype, "onBarContainerFocus", 1);
+s([
+  A({ capture: !0 })
+], e.prototype, "onBarContainerBlur", 1);
+s([
+  A({ capture: !0 })
+], e.prototype, "onBarContainerKeyDown", 1);
+e = s([
+  N("rapido-bar")
+], e);
+export {
+  e as Rapidobar
+};
+//# sourceMappingURL=index.js.map