@ixfx/components 0.2.4 → 0.2.6

package/dist/{panel/panel.js → panel.js}

@@ -1,70 +1,61 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import '../icons/icon.js';
+import { n as safeCustomElement, t as __decorate } from "./decorate-O4m1U4l3.js";
+import "./icon-CYACf6o8.js";
+import { LitElement, css, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+//#region src/panel/panel.ts
 let PanelElement = class PanelElement extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.collapsed = false;
-        this.orientation = `horizontal`;
-        this.closable = false;
-        this.title = ``;
-        this.iconName = ``;
-        this.toggleInteraction = `implicit`;
-        this.variant = `titlebar`;
-        this._isVertical = false;
-    }
-    _onToggleClick() {
-        this.collapsed = !this.collapsed;
-        this.dispatchEvent(new CustomEvent(`toggle`, {
-            detail: { collapsed: this.collapsed },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    _onCloseClick() {
-        this.dispatchEvent(new CustomEvent(`close`, {
-            bubbles: true,
-            composed: true,
-        }));
-        this.remove();
-    }
-    _getCaretIcon() {
-        return `chevron-down`;
-    }
-    updated(changed) {
-        super.updated(changed);
-        if (changed.has(`orientation`)) {
-            this._isVertical = this.orientation === `vertical`;
-        }
-    }
-    render() {
-        const caretIcon = this._getCaretIcon();
-        const showCaret = this.toggleInteraction !== `disabled`;
-        const implicitToggle = this.toggleInteraction === `implicit`;
-        const caretRotation = this._isVertical
-            ? (this.collapsed ? `` : `-90deg`)
-            : (this.collapsed ? `-90deg` : ``);
-        return html `
+	constructor(..._args) {
+		super(..._args);
+		this.collapsed = false;
+		this.orientation = `horizontal`;
+		this.closable = false;
+		this.title = ``;
+		this.iconName = ``;
+		this.toggleInteraction = `implicit`;
+		this.variant = `titlebar`;
+		this._isVertical = false;
+	}
+	_onToggleClick() {
+		this.collapsed = !this.collapsed;
+		this.dispatchEvent(new CustomEvent(`toggle`, {
+			detail: { collapsed: this.collapsed },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_onCloseClick() {
+		this.dispatchEvent(new CustomEvent(`close`, {
+			bubbles: true,
+			composed: true
+		}));
+		this.remove();
+	}
+	_getCaretIcon() {
+		return `chevron-down`;
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has(`orientation`)) this._isVertical = this.orientation === `vertical`;
+	}
+	render() {
+		const caretIcon = this._getCaretIcon();
+		const showCaret = this.toggleInteraction !== `disabled`;
+		const implicitToggle = this.toggleInteraction === `implicit`;
+		const caretRotation = this._isVertical ? this.collapsed ? `` : `-90deg` : this.collapsed ? `-90deg` : ``;
+		return html`
       <div
         class="titlebar"
         role="toolbar"
         @click=${implicitToggle ? this._onToggleClick : nothing}
       >
         <div class="title-text-wrapper">
-          ${this.iconName ? html `<ixfx-icon class="title-icon" name=${this.iconName}></ixfx-icon>` : nothing}
+          ${this.iconName ? html`<ixfx-icon class="title-icon" name=${this.iconName}></ixfx-icon>` : nothing}
           <span class="title-text">${this.title}</span>
         </div>
 
         <div class="toolbar" @click=${(e) => e.stopPropagation()}>
           <slot name="toolbar"></slot>
-          ${this.closable
-            ? html `
+          ${this.closable ? html`
             <button
               class="close-btn"
               type="button"
@@ -73,10 +64,8 @@ let PanelElement = class PanelElement extends LitElement {
             >
               <ixfx-icon name="close"></ixfx-icon>
             </button>
-          `
-            : nothing}
-          ${showCaret
-            ? html `
+          ` : nothing}
+          ${showCaret ? html`
           <button
             class="caret-btn"
             type="button"
@@ -85,8 +74,7 @@ let PanelElement = class PanelElement extends LitElement {
           >
             <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : nothing}></ixfx-icon>
           </button>
-          `
-            : nothing}
+          ` : nothing}
         </div>
       </div>
 
@@ -96,8 +84,9 @@ let PanelElement = class PanelElement extends LitElement {
         </div>
       </div>
     `;
-    }
-    static { this.styles = css `
+	}
+	static {
+		this.styles = css`
     :host {
       display: flex;
       flex-direction: column;
@@ -384,34 +373,36 @@ let PanelElement = class PanelElement extends LitElement {
     :host([variant="midline"][orientation="vertical"]) .content-wrapper {
       background: transparent;
     }
-  `; }
+  `;
+	}
 };
-__decorate([
-    property({ type: Boolean, reflect: true })
-], PanelElement.prototype, "collapsed", void 0);
-__decorate([
-    property({ type: String, attribute: `orientation`, reflect: true })
-], PanelElement.prototype, "orientation", void 0);
-__decorate([
-    property({ type: Boolean })
-], PanelElement.prototype, "closable", void 0);
-__decorate([
-    property({ type: String })
-], PanelElement.prototype, "title", void 0);
-__decorate([
-    property({ type: String, attribute: `icon-name` })
-], PanelElement.prototype, "iconName", void 0);
-__decorate([
-    property({ type: String, attribute: `toggle-interaction` })
-], PanelElement.prototype, "toggleInteraction", void 0);
-__decorate([
-    property({ type: String, attribute: `variant`, reflect: true })
-], PanelElement.prototype, "variant", void 0);
-__decorate([
-    state()
-], PanelElement.prototype, "_isVertical", void 0);
-PanelElement = __decorate([
-    customElement(`ixfx-panel`)
-], PanelElement);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PanelElement.prototype, "collapsed", void 0);
+__decorate([property({
+	type: String,
+	attribute: `orientation`,
+	reflect: true
+})], PanelElement.prototype, "orientation", void 0);
+__decorate([property({ type: Boolean })], PanelElement.prototype, "closable", void 0);
+__decorate([property({ type: String })], PanelElement.prototype, "title", void 0);
+__decorate([property({
+	type: String,
+	attribute: `icon-name`
+})], PanelElement.prototype, "iconName", void 0);
+__decorate([property({
+	type: String,
+	attribute: `toggle-interaction`
+})], PanelElement.prototype, "toggleInteraction", void 0);
+__decorate([property({
+	type: String,
+	attribute: `variant`,
+	reflect: true
+})], PanelElement.prototype, "variant", void 0);
+__decorate([state()], PanelElement.prototype, "_isVertical", void 0);
+PanelElement = __decorate([safeCustomElement(`ixfx-panel`)], PanelElement);
+//#endregion
 export { PanelElement };
+
 //# sourceMappingURL=panel.js.map

package/dist/panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","names":["customElement"],"sources":["../src/panel/panel.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport '../icons/icon.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\nexport type PanelOrientation = `horizontal` | `vertical`;\nexport type PanelVariant = `titlebar` | `midline`;\nexport type PanelToggleInteraction = `implicit` | `explicit` | `disabled`;\n\nexport interface PanelToggleDetail {\n  readonly collapsed: boolean;\n}\n\nexport type PanelToggleEvent = CustomEvent<PanelToggleDetail>;\nexport type PanelCloseEvent = CustomEvent<void>;\n\nexport interface PanelElementEventMap {\n  toggle: PanelToggleEvent;\n  close: PanelCloseEvent;\n}\n\n@customElement(`ixfx-panel`)\nexport class PanelElement extends LitElement {\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n  @property({ type: String, attribute: `orientation`, reflect: true }) orientation: PanelOrientation = `horizontal`;\n  @property({ type: Boolean }) closable = false;\n  @property({ type: String }) title = ``;\n  @property({ type: String, attribute: `icon-name` }) iconName = ``;\n  @property({ type: String, attribute: `toggle-interaction` }) toggleInteraction: PanelToggleInteraction = `implicit`;\n  @property({ type: String, attribute: `variant`, reflect: true }) variant: PanelVariant = `titlebar`;\n\n  @state() private _isVertical = false;\n\n  private _onToggleClick() {\n    this.collapsed = !this.collapsed;\n    this.dispatchEvent(\n      new CustomEvent<PanelToggleDetail>(`toggle`, {\n        detail: { collapsed: this.collapsed },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _onCloseClick() {\n    this.dispatchEvent(\n      new CustomEvent<void>(`close`, {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n    this.remove();\n  }\n\n  private _getCaretIcon(): string {\n    return `chevron-down`;\n  }\n\n  protected override updated(changed: Map<string, unknown>): void {\n    super.updated(changed);\n    if (changed.has(`orientation`)) {\n      this._isVertical = this.orientation === `vertical`;\n    }\n  }\n\n  protected override render() {\n    const caretIcon = this._getCaretIcon();\n    const showCaret = this.toggleInteraction !== `disabled`;\n    const implicitToggle = this.toggleInteraction === `implicit`;\n\n    const caretRotation = this._isVertical\n      ? (this.collapsed ? `` : `-90deg`)\n      : (this.collapsed ? `-90deg` : ``);\n\n    return html`\n      <div\n        class=\"titlebar\"\n        role=\"toolbar\"\n        @click=${implicitToggle ? this._onToggleClick : nothing}\n      >\n        <div class=\"title-text-wrapper\">\n          ${this.iconName ? html`<ixfx-icon class=\"title-icon\" name=${this.iconName}></ixfx-icon>` : nothing}\n          <span class=\"title-text\">${this.title}</span>\n        </div>\n\n        <div class=\"toolbar\" @click=${(e: Event) => e.stopPropagation()}>\n          <slot name=\"toolbar\"></slot>\n          ${this.closable\n            ? html`\n            <button\n              class=\"close-btn\"\n              type=\"button\"\n              aria-label=\"Close panel\"\n              @click=${this._onCloseClick}\n            >\n              <ixfx-icon name=\"close\"></ixfx-icon>\n            </button>\n          `\n            : nothing}\n          ${showCaret\n            ? html`\n          <button\n            class=\"caret-btn\"\n            type=\"button\"\n            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}\n            @click=${this._onToggleClick}\n          >\n            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : nothing}></ixfx-icon>\n          </button>\n          `\n            : nothing}\n        </div>\n      </div>\n\n      <div class=\"content-wrapper\" ?expanded=${!this.collapsed}>\n        <div class=\"content-inner\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      background: var(--surface-3);\n      border: var(--border-subtle);\n      border-radius: var(--radius-m);\n      overflow: hidden;\n      box-sizing: border-box;\n    }\n\n    :host([orientation=\"vertical\"]) {\n      flex-direction: row;\n      align-self: flex-start;\n      min-width: 0 !important;\n      flex-shrink: 1;\n    }\n\n    .titlebar {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: var(--space-s) var(--space-m);\n      background: var(--surface-4);\n      color: var(--surface-3-text);\n      min-height: 2em;\n      flex-shrink: 0;\n    }\n\n    :host([orientation=\"vertical\"]) .titlebar {\n      flex-direction: row;\n      min-width: 2em;\n      writing-mode: vertical-rl;\n      text-orientation: mixed;\n    }\n\n    .caret-btn,\n    .close-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      background: none;\n      border: none;\n      padding: var(--space-xs);\n      margin: 0;\n      cursor: pointer;\n      color: inherit;\n      border-radius: var(--radius-s);\n      transition: background var(--transition);\n      opacity: var(--prominence-idle-opacity);\n    }\n\n    .caret-btn:hover,\n    .close-btn:hover {\n      background: var(--surface-5);\n      opacity: var(--prominence-tickled-opacity);\n\n    }\n\n    .caret-btn:focus-visible,\n    .close-btn:focus-visible {\n      outline: 2px solid var(--accent);\n      outline-offset: 1px;\n    }\n\n    ixfx-icon {\n      width: 1.25em;\n      height: 1.25em;\n      transition: transform var(--transition);\n    }\n\n    .title-icon {\n      flex-shrink: 0;\n    }\n\n    .title-text {\n      flex: 1;\n      padding-left: 1ch;\n      font-family: var(--font-family);\n      font-size: var(--text-m);\n      font-weight: var(--font-weight-bold, 600);\n      white-space: nowrap;\n      overflow: hidden;\n      align-self: center;\n      text-overflow: ellipsis;\n      user-select: none;\n      -webkit-user-select: none;\n    }\n\n    :host([toggle-interaction=\"implicit\"]) .titlebar {\n      cursor: pointer;\n    }\n\n    :host([orientation=\"vertical\"]) .title-text {\n      writing-mode: vertical-rl;\n      padding-left: 0;\n      padding-bottom: 1ch;\n      text-orientation: mixed;\n      transform: rotate(180deg);\n    }\n\n    .toolbar {\n      display: flex;\n      align-items: center;\n      gap: var(--space-xs);\n      margin-left: auto;\n    }\n\n    :host([orientation=\"vertical\"]) .toolbar {\n      flex-direction: column;\n      margin-left: 0;\n      margin-top: auto;\n      writing-mode: horizontal-tb;\n    }\n\n    slot[name=\"toolbar\"] {\n      display: contents;\n    }\n\n    ::slotted(slot[name=\"toolbar\"]) {\n      display: contents;\n    }\n\n    .content-wrapper {\n      interpolate-size: allow-keywords;\n      overflow: hidden;\n      height: 0;\n      transition: height var(--transition, 0.2s ease-out);\n      background: var(--surface-3);\n     \n    }\n\n    .content-wrapper[expanded] {\n      height: auto;\n    }\n\n    :host([orientation=\"vertical\"]) .content-wrapper {\n      height: unset;\n      width: 0;\n      transition: width var(--transition, 0.2s ease-out);\n    }\n\n    :host([orientation=\"vertical\"]) .content-wrapper[expanded] {\n      width: auto;\n    }\n\n    .content-inner {\n      box-shadow: var(--deboss-3);\n\n      min-height: 0;\n      min-width: 0;\n      overflow: hidden;\n      padding: var(--space-m);\n      transform: translateY(-100%);\n      transition: transform var(--transition, 0.2s ease-out);\n    }\n\n    .content-wrapper[expanded] .content-inner {\n      transform: translateY(0);\n    }\n\n    :host([orientation=\"vertical\"]) .content-inner {\n      width: max-content;\n      height:100%;\n      transform: translateX(-100%);\n    }\n\n    :host([orientation=\"vertical\"]) .content-wrapper[expanded] .content-inner {\n      transform: translateX(0);\n    }\n\n    .title-text-wrapper {\n      display:flex;\n      padding: 0 var(--space-s);\n    }\n\n    /* === Midline variant === */\n\n    :host([variant=\"midline\"]) {\n      border: none !important;\n      border-radius: 0 !important;\n      background: transparent;\n    }\n\n    :host([variant=\"midline\"][orientation=\"horizontal\"]) .titlebar,\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .titlebar {\n      background: transparent;\n      padding: var(--space-xs) var(--space-m);\n      min-height: unset;\n      position: relative;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .titlebar {\n      padding: var(--space-m) var(--space-xs);\n      min-width: unset;\n    }\n\n    :host([variant=\"midline\"]) .title-text-wrapper {\n      position: relative;\n      z-index: 1;\n      display: flex;\n      align-items: center;\n      gap: var(--space-s);\n      background: var(--surface-3);\n    }\n\n    :host([variant=\"midline\"]) .title-text {\n      font-weight: normal;\n      color: var(--surface-3-text);\n      padding: 0 0.5ch 0 0.5ch;\n      background: transparent;\n      box-shadow: none;\n      flex: unset;\n      width: auto;\n      white-space: nowrap;\n    }\n\n    :host([variant=\"midline\"]) .title-icon {\n      background: transparent;\n      flex-shrink: 0;\n    }\n\n    :host([variant=\"midline\"]) .caret-btn {\n      position: relative;\n      z-index: 1;\n      background: var(--surface-3);\n      opacity: 1;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .title-text {\n      transform: rotate(180deg);\n      padding: 0.5ch 0 0.5ch 0ch;\n    }\n\n    :host([variant=\"midline\"]) .toolbar {\n      position: relative;\n      z-index: 2;\n      background: var(--surface-3);\n      margin-left: 0;\n    }\n\n    :host([variant=\"midline\"][orientation=\"horizontal\"]) .toolbar {\n      margin-left: auto;\n    }\n\n    /* Debossed line runs from after title-text to before toolbar */\n    :host([variant=\"midline\"]) .titlebar::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 0;\n      right: 0;\n      height: 1px;\n      transform: translateY(-50%);\n      background: var(--surface-2);\n      box-shadow:\n        0 -1px 0 var(--surface-5),\n        0 1px 0 var(--surface-1);\n      z-index: 0;\n    }\n\n    /* For vertical midline, line runs vertically */\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .titlebar::after {\n      top: 0;\n      bottom: 0;\n      left: 50%;\n      right: unset;\n      width: 1px;\n      height: 100%;\n      transform: translateX(-50%);\n      box-shadow:\n        -1px 0 0 var(--surface-5),\n        1px 0 0 var(--surface-1);\n    }\n\n    :host([variant=\"midline\"]) .content-inner {\n      box-shadow: none;\n      background: var(--surface-3);\n    }\n\n    :host([variant=\"midline\"]) .content-wrapper {\n      background: transparent;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .content-wrapper {\n      background: transparent;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-panel': PanelElement;\n  }\n}\n\nexport interface PanelElement {\n  addEventListener: (<K extends keyof PanelElementEventMap>(\n    type: K,\n    listener: (this: PanelElement, event: PanelElementEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}\n"],"mappings":";;;;;AAsBO,IAAA,eAAA,MAAM,qBAAqB,WAAW;;;mBACa;qBAC6C;kBAC7D;eACJ;kBAC2B;2BAC0C;iBAChB;qBAE1D;;CAE/B,iBAAyB;EACvB,KAAK,YAAY,CAAC,KAAK;EACvB,KAAK,cACH,IAAI,YAA+B,UAAU;GAC3C,QAAQ,EAAE,WAAW,KAAK,UAAU;GACpC,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,gBAAwB;EACtB,KAAK,cACH,IAAI,YAAkB,SAAS;GAC7B,SAAS;GACT,UAAU;EACZ,CAAC,CACH;EACA,KAAK,OAAO;CACd;CAEA,gBAAgC;EAC9B,OAAO;CACT;CAEA,QAA2B,SAAqC;EAC9D,MAAM,QAAQ,OAAO;EACrB,IAAI,QAAQ,IAAI,aAAa,GAC3B,KAAK,cAAc,KAAK,gBAAgB;CAE5C;CAEA,SAA4B;EAC1B,MAAM,YAAY,KAAK,cAAc;EACrC,MAAM,YAAY,KAAK,sBAAsB;EAC7C,MAAM,iBAAiB,KAAK,sBAAsB;EAElD,MAAM,gBAAgB,KAAK,cACtB,KAAK,YAAY,KAAK,WACtB,KAAK,YAAY,WAAW;EAEjC,OAAO,IAAI;;;;iBAIE,iBAAiB,KAAK,iBAAiB,QAAQ;;;YAGpD,KAAK,WAAW,IAAI,sCAAsC,KAAK,SAAS,iBAAiB,QAAQ;qCACxE,KAAK,MAAM;;;uCAGT,MAAa,EAAE,gBAAgB,EAAE;;YAE5D,KAAK,WACH,IAAI;;;;;uBAKK,KAAK,cAAc;;;;cAK5B,QAAQ;YACV,YACE,IAAI;;;;yBAIO,KAAK,YAAY,iBAAiB,iBAAiB;qBACvD,KAAK,eAAe;;8BAEX,UAAU,sBAAsB,cAAc,SAAS,IAAI,gBAAgB,QAAQ;;cAGnG,QAAQ;;;;+CAIyB,CAAC,KAAK,UAAU;;;;;;CAM7D;;gBAEyB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgS9B;YAnYG,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,aAAA,KAAA,CAAA;YACzC,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,eAAA,KAAA,CAAA;YAClE,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;YAC1B,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,aAAA,WAAA,SAAA,KAAA,CAAA;YACzB,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAY,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;YACjD,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAqB,CAAC,CAAA,GAAA,aAAA,WAAA,qBAAA,KAAA,CAAA;YAC1D,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAW,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,WAAA,KAAA,CAAA;YAE9D,MAAM,CAAA,GAAA,aAAA,WAAA,eAAA,KAAA,CAAA;2BAVRA,kBAAc,YAAY,CAAA,GAAA,YAAA"}

package/dist/plots.d.ts

@@ -0,0 +1,2 @@
+import { a as SingleAxisAgeStyle, c as PlotDataSeriesOptions, d as ColourResult, f as applyAgeModification, h as readBaseColour, i as PlotSingleAxis, l as ColourMapConfig, m as parseColourScaleAttr, n as XyAgeStyle, o as SingleAxisDrawStyle, p as computeColour, r as XyDrawStyle, s as PlotDataSeries, t as PlotXyAxis, u as ColourMode } from "./xy-axis-D9uwpGTT.js";
+export { ColourMapConfig, ColourMode, ColourResult, PlotDataSeries, PlotDataSeriesOptions, PlotSingleAxis, PlotXyAxis, SingleAxisAgeStyle, SingleAxisDrawStyle, XyAgeStyle, XyDrawStyle, applyAgeModification, computeColour, parseColourScaleAttr, readBaseColour };

package/dist/plots.js

@@ -0,0 +1,2 @@
+import { a as computeColour, i as applyAgeModification, n as PlotSingleAxis, o as parseColourScaleAttr, r as PlotDataSeries, s as readBaseColour, t as PlotXyAxis } from "./xy-axis-C7fNxDwY.js";
+export { PlotDataSeries, PlotSingleAxis, PlotXyAxis, applyAgeModification, computeColour, parseColourScaleAttr, readBaseColour };

package/dist/polar-pad.d.ts

@@ -0,0 +1,66 @@
+import { LitElement, PropertyValues, html } from "lit";
+
+//#region src/polar-pad/polar-pad.d.ts
+declare class PolarPad extends LitElement {
+  static styles: import("lit").CSSResult;
+  /** Current angle in degrees. 0 = right, increases clockwise. */
+  angle: number;
+  /** Current radius 0–1. 0 = origin, 1 = edge. */
+  radius: number;
+  /** Number of concentric rings to display. 0 = none. */
+  rings: number;
+  /** Number of evenly-spaced radial spoke lines to display. 0 = none. */
+  rays: number;
+  /** Show a line from origin to the marker. */
+  showRay: boolean;
+  /** Show a dot at the origin (centre). */
+  showOrigin: boolean;
+  /** Hide cursor during drag and hover. */
+  hideCursor: boolean;
+  /** When set, marker snaps to nearest ring/spoke depending on what's displayed. */
+  snapValue: boolean;
+  /** Disable all interaction (pointer and keyboard). */
+  disabled: boolean;
+  /** Number of quantised stops for both angle and radius. Overridden by stops-angle/stops-radius if set. */
+  stops?: number;
+  /** Number of quantised stops for angle. If set, overrides the stops setting for angle. */
+  stopsAngle?: number;
+  /** Number of quantised stops for radius. If set, overrides the stops setting for radius. */
+  stopsRadius?: number;
+  private _dragging;
+  private _dragStartAngle;
+  private _dragStartRadius;
+  private _pressedKeys;
+  private _prevAngle;
+  private _prevRadius;
+  private _onPointerDown;
+  private _onPointerMove;
+  private _onPointerUp;
+  private _updateFromPointer;
+  private _onKeyDown;
+  private _onKeyUp;
+  private _handleKeyboardMove;
+  private _setCssVars;
+  updated(_changed: PropertyValues): void;
+  disconnectedCallback(): void;
+  private _renderRings;
+  private _renderSpokes;
+  private _renderRay;
+  private _renderOrigin;
+  render(): ReturnType<typeof html>;
+  /** Stable per-instance uid for SVG clipPath IDs. */
+  private readonly _uid;
+}
+type PolarPadInputDetail = {
+  readonly angle: number;
+  readonly radius: number;
+};
+type PolarPadInputEvent = CustomEvent<PolarPadInputDetail>;
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-polar-pad': PolarPad;
+  }
+} //# sourceMappingURL=polar-pad.d.ts.map
+//#endregion
+export { PolarPad, PolarPadInputDetail, PolarPadInputEvent };
+//# sourceMappingURL=polar-pad.d.ts.map

package/dist/polar-pad.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"polar-pad.d.ts","names":[],"sources":["../src/polar-pad/polar-pad.ts"],"mappings":";;;cAgKa,QAAA,SAAiB,UAAA;EAAA,OACZ,MAAA,gBAAM,SAAA;EAidM;EAzUA,KAAA;EAyUA;EAtUA,MAAA;;EAGA,KAAA;;EAGA,IAAA;;EAGuC,OAAA;;EAGG,UAAA;;EAGA,UAAA;;EAGD,SAAA;;EAGzB,QAAA;;EAGhB,KAAA;;EAG0B,UAAA;;EAGC,WAAA;EAAA,QAE/C,SAAA;EAAA,QACA,eAAA;EAAA,QACA,gBAAA;EAAA,QACA,YAAA;EAAA,QACA,UAAA;EAAA,QACA,WAAA;EAAA,QAMA,cAAA;EAAA,QAgBA,cAAA;EAAA,QAOA,YAAA;EAAA,QAeA,kBAAA;EAAA,QAuCA,UAAA;EAAA,QASA,QAAA;EAAA,QAIA,mBAAA;EAAA,QAiEA,WAAA;EAMC,OAAA,CAAQ,QAAA,EAAU,cAAA;EAKlB,oBAAA,CAAA;EAAA,QAUD,YAAA;EAAA,QAWA,aAAA;EAAA,QAiBA,UAAA;EAAA,QAMA,aAAA;EAUC,MAAA,CAAA,GAAU,UAAA,QAAkB,IAAA;;mBA+CpB,IAAA;AAAA;AAAA,KAOP,mBAAA;EAAA,SACD,KAAA;EAAA,SACA,MAAM;AAAA;AAAA,KAGL,kBAAA,GAAqB,WAAW,CAAC,mBAAA;AAAA,QAErC,MAAA;EAAA,UACI,qBAAA;IACR,gBAAA,EAAkB,QAAQ;EAAA;AAAA"}