@ixfx/components 0.0.2

package/dist/data-display.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-display.js","sourceRoot":"","sources":["../src/data-display.ts"],"names":[],"mappings":"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"}

package/dist/dial.d.ts

@@ -0,0 +1,89 @@
+import { LitElement, type TemplateResult, type PropertyValues } from "lit";
+import * as CircleArc from './util/circle-arc.js';
+import { SvgEditLabel, type SvgEditLabelData } from "./util/svg-editable-text.js";
+import { type Ref } from "lit/directives/ref.js";
+export type LabelPosition = `edge` | `inner` | `below`;
+export type ValueToLabelFormat = (value: number) => string;
+export type NeedleStyle = `none` | `to-track` | `to-knob`;
+/**
+ * Numeric DOM attributes
+ * * rangeAngle: range of dial in degrees (default: 300)
+ * * value, min, max, step, stepFine
+ * * radius: max radius of dial (default: 0.5)
+ * * textRelativeHeight: how much vertical space to give labels (default: 10)
+ *
+ * String DOM attributes
+ * * rangeAnchor: `south`,`south-east`,`east`,`north` (default: `south`)
+ * * labelPosition: `edge`|`inner`
+ * * needleStyle: `none`, `to-track`, `to-knob`
+ * * title: a caption for dial
+ *
+ * Boolean DOM attributes
+ * * hideTitle, hideValue, hideTerminators, showKnob, bipolar
+ *
+ * CSS variables
+ * --[track,needle,value]-width
+ * --[track,needle,value]-color
+ * --needle-start: relative to radius of circle. eg 0.6 starts needle 60% out from center (default: 0.6)
+ * --needle_overshoot: % of increase of needle size (default: 0.2)
+ * --value-label-color: colour of value label
+ * --value-label-x: x offset (in 0..100 coords)
+ * --value-label-y: y offset (in 0..100 coords)
+ * --knob-color
+ * --knob-radius: % of circle to use for knob (default: 0.8)
+ */
+export declare class DialElement extends LitElement {
+    #private;
+    rangeAngle: number;
+    rangeAnchor: CircleArc.CircleArcAnchor;
+    labelPosition: LabelPosition;
+    spread: boolean;
+    hideValue: boolean;
+    hideTerminators: boolean;
+    showKnob: boolean;
+    bipolar: boolean;
+    needleStyle: NeedleStyle;
+    value: number;
+    step: number;
+    stepFine: number;
+    radius: number;
+    min: number;
+    max: number;
+    textRelativeHeight: number;
+    valueLabelRef: Ref<SvgEditLabel>;
+    valueLabel: SvgEditLabelData;
+    constructor();
+    getRelativeValue(): number;
+    render(): TemplateResult<1>;
+    protected updated(_changedProperties: PropertyValues): void;
+    onMidpointClick(): void;
+    onMouseWheel(event: WheelEvent): void;
+    deltaChange(amount: number): void;
+    onKeyDown(event: KeyboardEvent): void;
+    onPointerMove(event: PointerEvent): void;
+    resolveVariables(): {
+        track_width: number;
+        track_color: string;
+        value_width: number;
+        value_color: string;
+        value_label_color: string;
+        value_label_x: number;
+        value_label_y: number;
+        needle_overshoot: number;
+        needle_start: number;
+        needle_color: string;
+        needle_width: number;
+        knob_color: string;
+        knob_radius: number;
+    };
+    set valueToLabel(fn: (value: number) => string);
+    get valueToLabel(): (value: number) => string;
+    get range(): number;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ixfx-dial": DialElement;
+    }
+}
+//# sourceMappingURL=dial.d.ts.map

package/dist/dial.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dial.d.ts","sourceRoot":"","sources":["../src/dial.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAkB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAK3F,OAAO,KAAK,SAAS,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,KAAK,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAa,KAAK,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;AACtD,MAAM,MAAM,kBAAkB,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;AAC3D,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,CAAC;AAI1D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBACa,WAAY,SAAQ,UAAU;;IAEzC,UAAU,SAAO;IAGjB,WAAW,EAAE,SAAS,CAAC,eAAe,CAAW;IAGjD,aAAa,EAAE,aAAa,CAAU;IAKtC,MAAM,UAAS;IAGf,SAAS,UAAS;IAGlB,eAAe,UAAQ;IAGvB,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAGhB,WAAW,EAAE,WAAW,CAAc;IAGtC,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,QAAQ,SAAK;IAGb,MAAM,SAAO;IAGb,GAAG,SAAK;IAGR,GAAG,SAAO;IAGV,kBAAkB,SAAK;IAKvB,aAAa,EAAE,GAAG,CAAC,YAAY,CAAC,CAAe;IAG/C,UAAU,EAAE,gBAAgB,CAS3B;;IAgKD,gBAAgB;IA4DhB,MAAM;IAqEN,SAAS,CAAC,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAI3D,eAAe;IA6Bf,YAAY,CAAC,KAAK,EAAE,UAAU;IAO9B,WAAW,CAAC,MAAM,EAAE,MAAM;IAI1B,SAAS,CAAC,KAAK,EAAE,aAAa;IAoB9B,aAAa,CAAC,KAAK,EAAE,YAAY;IAKjC,gBAAgB;;;;;;;;;;;;;;;IAkBhB,IAAI,YAAY,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,EAG7C;IACD,IAAI,YAAY,IAJK,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAM7C;IACD,IAAI,KAAK,WAER;IAMD,MAAM,CAAC,MAAM,0BASZ;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,WAAW,CAAC;KAC1B;CACF"}

package/dist/dial.js

@@ -0,0 +1,506 @@
+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;
+};
+/* eslint-disable @typescript-eslint/unbound-method */
+import { LitElement, html, css, svg } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { degreeToRadian, Points, radiansSum, radianArc } from '@ixfx/geometry';
+import * as Numbers from '@ixfx/numbers';
+import { getCssVariablesWithFallback } from '@ixfx/dom';
+import * as CircleArc from './util/circle-arc.js';
+import { SvgEditLabel } from "./util/svg-editable-text.js";
+import { createRef } from "lit/directives/ref.js";
+const piPi = Math.PI * 2;
+/**
+ * Numeric DOM attributes
+ * * rangeAngle: range of dial in degrees (default: 300)
+ * * value, min, max, step, stepFine
+ * * radius: max radius of dial (default: 0.5)
+ * * textRelativeHeight: how much vertical space to give labels (default: 10)
+ *
+ * String DOM attributes
+ * * rangeAnchor: `south`,`south-east`,`east`,`north` (default: `south`)
+ * * labelPosition: `edge`|`inner`
+ * * needleStyle: `none`, `to-track`, `to-knob`
+ * * title: a caption for dial
+ *
+ * Boolean DOM attributes
+ * * hideTitle, hideValue, hideTerminators, showKnob, bipolar
+ *
+ * CSS variables
+ * --[track,needle,value]-width
+ * --[track,needle,value]-color
+ * --needle-start: relative to radius of circle. eg 0.6 starts needle 60% out from center (default: 0.6)
+ * --needle_overshoot: % of increase of needle size (default: 0.2)
+ * --value-label-color: colour of value label
+ * --value-label-x: x offset (in 0..100 coords)
+ * --value-label-y: y offset (in 0..100 coords)
+ * --knob-color
+ * --knob-radius: % of circle to use for knob (default: 0.8)
+ */
+let DialElement = class DialElement extends LitElement {
+    #editableLabel;
+    #onPointerDownBound;
+    #onPointerDragBound;
+    #onDragStopBound;
+    constructor() {
+        super();
+        this.rangeAngle = 300;
+        this.rangeAnchor = `south`;
+        this.labelPosition = `edge`;
+        //@property({ type: Boolean })
+        //hideTitle = false;
+        this.spread = false;
+        this.hideValue = false;
+        this.hideTerminators = false;
+        this.showKnob = false;
+        this.bipolar = false;
+        this.needleStyle = `to-track`;
+        this.value = 50;
+        this.step = 10;
+        this.stepFine = 1;
+        this.radius = 0.5;
+        this.min = 0;
+        this.max = 100;
+        this.textRelativeHeight = 5;
+        //@property({ type: String })
+        //title = ``;
+        this.valueLabelRef = createRef();
+        this.valueLabel = {
+            anchor: `start`,
+            x: 0,
+            fill: ``,
+            hideValue: this.hideValue,
+            y: 0,
+            editMode: false,
+            displayValue: 0,
+            editValue: 0
+        };
+        this.#onPointerDownBound = this.#onPointerDown.bind(this);
+        this.#onPointerDragBound = this.#onPointerDrag.bind(this);
+        this.#onDragStopBound = this.#onDragStop.bind(this);
+        this.#valueToLabel = (value) => {
+            return value.toFixed(1);
+        };
+        this.#editableLabel = new SvgEditLabel();
+        this.#editableLabel.onEditMode = (enabled, _source) => {
+            this.valueLabel = {
+                ...this.valueLabel,
+                editMode: enabled
+            };
+        };
+        this.#editableLabel.onInput = (value) => {
+            const f = Number.parseFloat(value);
+            if (Number.isNaN(f))
+                return;
+            this.#setValue(f);
+        };
+    }
+    #computeTextLabelPosition(vars, arc) {
+        let x = 0;
+        let y = 0;
+        let textAnchor = `middle`;
+        if (this.labelPosition === `inner`) {
+            x = arc.x;
+            y = arc.y + this.textRelativeHeight / 4;
+        }
+        else {
+            switch (this.rangeAnchor) {
+                case `north`:
+                    x = 50;
+                    y = this.textRelativeHeight * 1.5;
+                    break;
+                case `east`:
+                    x = 75; // need to measure width?
+                    y = 50;
+                    textAnchor = `start`;
+                    break;
+                case `south-east`:
+                    x = 99;
+                    y = 90;
+                    textAnchor = `end`;
+                    break;
+                default:
+                    x = 50;
+                    y = 95;
+            }
+        }
+        x += vars.value_label_x;
+        y += vars.value_label_y;
+        return { x, y, anchor: textAnchor };
+    }
+    // #renderTitle() {
+    //   if (this.hideTitle) {
+    //     return svg``;
+    //   }
+    //   const textPos = { x: 50, y: (this.textRelativeHeight / 2) + 4 };
+    //   const textAnchor = `middle`;
+    //   return svg`<text text-anchor=${ textAnchor } x=${ textPos.x } y=${ textPos.y }>${ this.title }</text>`
+    // }
+    #computeArc(vars) {
+        const textHeight = this.textRelativeHeight;
+        let maxRadius = 50 - (Math.max(vars.track_width, vars.value_width) * 3);
+        let middleY = 50;
+        const cornerRange = (this.rangeAnchor === `south-east`);
+        if (this.labelPosition === `below`) {
+            maxRadius -= textHeight;
+            middleY -= textHeight;
+        }
+        if (cornerRange) {
+            middleY += textHeight / 2;
+            maxRadius -= 3;
+        }
+        else {
+            //maxRadius -= (textHeight / 2.5);
+            //middleY += (textHeight / 2) - 3;
+        }
+        // if (!this.hideTitle) {
+        // }
+        // if (!this.hideValue && this.labelPosition !== `inner`) {
+        //   if (cornerRange) {
+        //     maxRadius -= (textHeight / 4);
+        //   } else {
+        //     maxRadius -= (textHeight / 4);
+        //     middleY -= textHeight / 4;
+        //   }
+        // }
+        //if (this.hideTitle && this.hideValue) middleY = 50;
+        return {
+            maxRadius,
+            middleY
+        };
+    }
+    #renderTrackArc(vars, value, arc, part) {
+        if (vars.track_width <= 0)
+            return svg ``;
+        const hiddenTrack = vars.track_width <= vars.value_width;
+        let largeArc = true;
+        const clockwise = true;
+        let arcSvgBits = [];
+        if (hiddenTrack && !this.bipolar) {
+            // Make an arc from end of value to end of range
+            let startAt = part.endAngle - 0.1;
+            const arcPart = CircleArc.arcPart(arc, startAt, arc.endAngle, true);
+            const d = radianArc(startAt, arc.endAngle, true);
+            if (value > 0.97) {
+                arcSvgBits = CircleArc.toSvg(arc, largeArc, clockwise);
+            }
+            else {
+                largeArc = d > Math.PI;
+                arcSvgBits = CircleArc.partToSvg(arc, arcPart, largeArc, clockwise);
+            }
+        }
+        else {
+            arcSvgBits = CircleArc.toSvg(arc, largeArc, clockwise);
+        }
+        const s = svg `
+    <path 
+      d="${arcSvgBits.join(' ')}" 
+      fill="none"
+      stroke-linecap="round"
+      stroke="${vars.track_color}" 
+      stroke-width="${vars.track_width}"
+    />
+    `;
+        return s;
+    }
+    #getBipolarValue(value, arc) {
+        if (value < 0.5) {
+            const pc = Numbers.scale(value, 0, 0.5);
+            const distance = radianArc(arc.startAngle, arc.midAngle, true) * pc;
+            const startAngle = radiansSum(arc.startAngle, distance, false);
+            return CircleArc.arcPart(arc, startAngle, arc.midAngle, true);
+        }
+        else {
+            const pc = Numbers.scale(value, 0.5, 1);
+            const distance = radianArc(arc.midAngle, arc.endAngle, true) * pc;
+            const endAngle = radiansSum(arc.midAngle, distance, false);
+            return CircleArc.arcPart(arc, arc.midAngle, endAngle, true);
+        }
+    }
+    #getUnipolarValue(value, arc) {
+        const angle = value * arc.rangeRadian;
+        const endAngle = Numbers.wrap(arc.startAngle - angle, 0, piPi);
+        const arcValue = CircleArc.arcPart(arc, arc.startAngle, endAngle, true);
+        return arcValue;
+    }
+    getRelativeValue() {
+        return Numbers.scale(this.value, this.min, this.max);
+    }
+    #renderValueArc(vars, value, arc, part) {
+        let largeArc = false;
+        const clockwise = !arc.invert;
+        if (part.range > Math.PI)
+            largeArc = true;
+        const arcSvgBits = CircleArc.partToSvg(arc, part, largeArc, clockwise);
+        const showValueArc = this.bipolar ? value === 0.5 : value === 0;
+        const arcValueSvg = showValueArc ?
+            svg `` :
+            svg `<path 
+        d="${arcSvgBits.join(' ')}" 
+        fill="none" 
+        stroke="${vars.value_color}" 
+        stroke-width="${vars.value_width}"
+      />`;
+        const needleStart = vars.needle_start * arc.radius;
+        let needleEnd = 1;
+        switch (this.needleStyle) {
+            case `none`:
+                return arcValueSvg;
+            case `to-knob`:
+                needleEnd = vars.knob_radius * arc.radius;
+                break;
+            case `to-track`:
+                needleEnd = arc.radius;
+                break;
+        }
+        needleEnd += (vars.needle_overshoot * (needleEnd - needleStart));
+        const line = {
+            a: CircleArc.interpolatePoint({ ...arc, radius: needleStart }, value),
+            b: CircleArc.interpolatePoint({ ...arc, radius: needleEnd }, value)
+        };
+        const needleLine = svg `<line
+      x1=${line.a.x}
+      y1=${line.a.y}
+      x2=${line.b.x}
+      y2=${line.b.y}
+      stroke-linecap="round"
+      stroke=${vars.needle_color}
+      stroke-width=${vars.needle_width}
+    />`;
+        return [arcValueSvg, needleLine];
+    }
+    #renderKnob(vars, arc) {
+        if (!this.showKnob)
+            return svg ``;
+        return svg `<circle r=${arc.radius * vars.knob_radius} cx=${arc.x} cy=${arc.y} fill=${vars.knob_color} />`;
+    }
+    #renderPoints(radius, fill, ...circles) {
+        return circles.map(c => svg `<circle fill=${fill} r=${radius} cx=${c.x} cy=${c.y} />`);
+    }
+    render() {
+        const vars = this.resolveVariables();
+        const arcSize = this.#computeArc(vars);
+        const circlePre = {
+            x: 50,
+            y: arcSize.middleY,
+            radius: arcSize.maxRadius,
+            anchor: this.rangeAnchor,
+            rangeRadian: degreeToRadian(this.rangeAngle)
+        };
+        const circle = CircleArc.precompute(circlePre);
+        const relativeValue = this.getRelativeValue();
+        const valueArc = this.bipolar ? this.#getBipolarValue(relativeValue, circle) : this.#getUnipolarValue(relativeValue, circle);
+        let terminators = [];
+        const terminatorSize = Math.max(vars.value_width, vars.track_width);
+        if (!this.hideTerminators) {
+            let lightStart = this.value !== this.min;
+            if (this.bipolar)
+                lightStart = this.value === this.min;
+            const atEnd = this.value === this.max;
+            const startTerminator = this.#renderPoints(terminatorSize, lightStart ? vars.value_color : vars.track_color, circle.startPoint);
+            const endTerminator = this.#renderPoints(terminatorSize, atEnd ? vars.value_color : vars.track_color, circle.endPoint);
+            terminators = [...startTerminator, ...endTerminator];
+        }
+        if (this.bipolar) {
+            const mid = (this.max - this.min) / 2;
+            const atMid = this.value.toFixed(1) === mid.toFixed(1);
+            const midPoint = svg `<circle @click=${this.onMidpointClick} fill=${atMid ? vars.value_color : vars.track_color} r=${terminatorSize * 1.5} cx=${circle.midPoint.x} cy=${circle.midPoint.y} />`;
+            terminators.push(midPoint);
+        }
+        const textLabelPos = this.#computeTextLabelPosition(vars, circle);
+        this.valueLabel = {
+            ...this.valueLabel,
+            ...textLabelPos,
+            hideValue: this.hideValue,
+            displayValue: this.valueToLabel(this.value),
+            editValue: this.value
+        };
+        return html `<svg tabindex=0 @pointerdown=${this.#onPointerDownBound} @wheel=${this.onMouseWheel} @keydown=${this.onKeyDown} overflow="hidden" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+              ${this.#renderTrackArc(vars, relativeValue, circle, valueArc)}
+              ${this.#renderKnob(vars, circle)}
+              ${terminators}
+              ${this.#renderValueArc(vars, relativeValue, circle, valueArc)}
+              ${this.#editableLabel.render(this.valueLabel)}
+              </svg>`;
+    }
+    #onPointerDown(_event) {
+        window.addEventListener(`pointermove`, this.#onPointerDragBound);
+        window.addEventListener(`pointercancel`, this.#onDragStopBound);
+        window.addEventListener(`pointerup`, this.#onDragStopBound);
+    }
+    #onPointerDrag(event) {
+        // Proportion of movement based on size of element
+        const y = event.movementY / this.clientHeight;
+        const r = this.range * y;
+        this.#setValue(this.value - r);
+    }
+    #onDragStop() {
+        window.removeEventListener(`pointerup`, this.#onDragStopBound);
+        window.removeEventListener(`pointercancel`, this.#onDragStopBound);
+        window.removeEventListener(`pointermove`, this.#onPointerDragBound);
+    }
+    updated(_changedProperties) {
+        this.#editableLabel.onUpdated();
+    }
+    onMidpointClick() {
+        this.#setValue((this.max - this.min) / 2);
+    }
+    /**
+     * Manually sets the value, clamping to min/max range.
+     * Fires 'change' event.
+     * @param value
+     * @returns
+     */
+    #setValue(value) {
+        const old = this.value;
+        value = Numbers.clamp(value, this.min, this.max);
+        if (value === old)
+            return;
+        this.value = value;
+        this.valueLabel = {
+            ...this.valueLabel,
+            displayValue: this.valueToLabel(value),
+            editValue: value
+        };
+        this.dispatchEvent(new CustomEvent(`change`, {
+            detail: {
+                previousValue: old,
+                newValue: value
+            }
+        }));
+    }
+    onMouseWheel(event) {
+        const shift = event.shiftKey;
+        const amount = shift ? this.stepFine : this.step;
+        this.deltaChange(amount * event.deltaY * 0.01);
+        event.preventDefault();
+    }
+    deltaChange(amount) {
+        this.#setValue(this.value + amount);
+    }
+    onKeyDown(event) {
+        const key = event.key;
+        const shift = event.shiftKey;
+        //const ctrl = event.ctrlKey;
+        if (this.valueLabel.editMode)
+            return;
+        //console.log(`key: ${ key } ctrl: ${ ctrl }`);
+        const amount = shift ? this.stepFine : this.step;
+        if (key === `ArrowLeft` || key === `ArrowDown`) {
+            this.deltaChange(-amount);
+        }
+        else if (key === `ArrowRight` || key === `ArrowUp`) {
+            this.deltaChange(amount);
+        }
+        else if (Number.parseInt(key).toString() === key) {
+            this.valueLabel = {
+                ...this.valueLabel,
+                editMode: true
+            };
+        }
+    }
+    onPointerMove(event) {
+        const { x, y } = event;
+        console.log(`x: ${x} y:${y}`);
+    }
+    resolveVariables() {
+        const vars = getCssVariablesWithFallback({
+            track_width: 10,
+            track_color: `gray`,
+            value_width: 10,
+            value_color: `red`,
+            value_label_color: `unset`,
+            value_label_x: 0,
+            value_label_y: 0,
+            needle_overshoot: 0.2,
+            needle_start: 0.6,
+            needle_color: `black`,
+            needle_width: 10,
+            knob_color: `black`,
+            knob_radius: 0.8
+        }, this);
+        return vars;
+    }
+    ;
+    set valueToLabel(fn) {
+        this.#valueToLabel = fn;
+        this.requestUpdate();
+    }
+    get valueToLabel() {
+        return this.#valueToLabel;
+    }
+    get range() {
+        return this.max - this.min;
+    }
+    #valueToLabel;
+    static { this.styles = css `
+    :host {
+      display: inline-block;
+      --value-label-color: unset;
+    }
+    text {
+      user-select:none;
+    }
+
+  `; }
+};
+__decorate([
+    property({ type: Number })
+], DialElement.prototype, "rangeAngle", void 0);
+__decorate([
+    property({ type: String })
+], DialElement.prototype, "rangeAnchor", void 0);
+__decorate([
+    property({ type: String })
+], DialElement.prototype, "labelPosition", void 0);
+__decorate([
+    property({ type: Boolean })
+], DialElement.prototype, "spread", void 0);
+__decorate([
+    property({ type: Boolean })
+], DialElement.prototype, "hideValue", void 0);
+__decorate([
+    property({ type: Boolean })
+], DialElement.prototype, "hideTerminators", void 0);
+__decorate([
+    property({ type: Boolean })
+], DialElement.prototype, "showKnob", void 0);
+__decorate([
+    property({ type: Boolean })
+], DialElement.prototype, "bipolar", void 0);
+__decorate([
+    property({ type: String })
+], DialElement.prototype, "needleStyle", void 0);
+__decorate([
+    property({ type: Number })
+], DialElement.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], DialElement.prototype, "step", void 0);
+__decorate([
+    property({ type: Number })
+], DialElement.prototype, "stepFine", void 0);
+__decorate([
+    property({ type: Number })
+], DialElement.prototype, "radius", void 0);
+__decorate([
+    property({ type: Number })
+], DialElement.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], DialElement.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], DialElement.prototype, "textRelativeHeight", void 0);
+__decorate([
+    property({ type: Object })
+], DialElement.prototype, "valueLabel", void 0);
+DialElement = __decorate([
+    customElement('ixfx-dial')
+], DialElement);
+export { DialElement };
+//# sourceMappingURL=dial.js.map

package/dist/dial.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dial.js","sourceRoot":"","sources":["../src/dial.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export * from './dial.js';
+export * from './selecthorizontal.js';
+export * from './crumb-navigation.js';
+export * from './crumb-nav.js';
+export * from './tabs/tab-list-item.js';
+export * from './tabs/tab-list.js';
+export * from './tabs/tab-panels.js';
+export * from './tabs/tab-panel.js';
+export * from './split-layout/split-layout.js';
+export declare const init: () => void;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gCAAgC,CAAC;AAE/C,eAAO,MAAM,IAAI,YAEhB,CAAA"}

package/dist/index.js

@@ -0,0 +1,13 @@
+export * from './dial.js';
+export * from './selecthorizontal.js';
+export * from './crumb-navigation.js';
+export * from './crumb-nav.js';
+export * from './tabs/tab-list-item.js';
+export * from './tabs/tab-list.js';
+export * from './tabs/tab-panels.js';
+export * from './tabs/tab-panel.js';
+export * from './split-layout/split-layout.js';
+export const init = () => {
+    console.log(`Init`);
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gCAAgC,CAAC;AAE/C,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,EAAE;IACvB,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;AACtB,CAAC,CAAA"}