pyro/dist/range.js

Pyro custom elements

import { i as y, r as g, x as l, t as u } from "./custom-element-CWJsDAat.js";
import { n as p } from "./property-Bf-I6Ep_.js";
var d = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (a, t, n, i) => {
  for (var e = i > 1 ? void 0 : i ? v(t, n) : t, s = a.length - 1, c; s >= 0; s--)
    (c = a[s]) && (e = (i ? c(t, n, e) : c(e)) || e);
  return i && e && d(t, n, e), e;
};
let r = class extends g {
  constructor() {
    super(...arguments), this.value = 0, this.min = 0, this.max = 100, this.step = 1, this.explicit = !1, this.getDigitsNumber = (a) => Math.max(Math.floor(Math.log10(Math.abs(a))), 0) + 1;
  }
  handleChange({ target: a }) {
    this.value = Number(a.value);
  }
  render() {
    return l`
      <span class="range">
        <input
          type="range"
          id="range"
          min="${this.min}"
          max="${this.max}"
          value="${this.value}"
          step="${this.step}"
          @input=${this.handleChange}
        />
        ${this.explicit ? l`<span style="width:${this.getDigitsNumber(this.max) + 1}ch">${this.value}</span>` : l``}
      </span>
    `;
  }
};
r.styles = y`
    :host {
      display: inline-flex;
      justify-content: space-between;
      color: var(--pyro-range-text-color, var(--pyro-text-color));
      gap: var(--pyro-range-spacing, var(--pyro-spacing));
    }
    .range {
      display: flex;
      gap: var(--pyro-range-spacing, var(--pyro-spacing));
      align-items: center;
    }
    input[type='range'] {
      -webkit-appearance: none;
      appearance: none;
      cursor: pointer;
      outline: none;
      background: var(--pyro-range-background, var(--pyro-surface-color));
      /*  slider progress trick  */
      overflow: hidden;
      border: var(--pyro-range-border, var(--pyro-border));
      border-radius: calc(var(--pyro-range-border-radius, var(--pyro-border-radius)) * 2); // TODO: not really
    }

    /* Track: Mozilla Firefox */
    input[type='range']::-moz-range-track,
    input[type='range']::-webkit-slider-runnable-track {
      height: 15px;
      background: var(--pyro-range-background, var(--pyro-surface-color));
      border: var(--pyro-range-border, var(--pyro-border));
      border-radius: calc(var(--pyro-range-border-radius, var(--pyro-border-radius)) * 2);
    }

    /* Thumb: webkit */
    input[type='range']::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      height: 15px;
      width: 15px;
      background: var(--pyro-range-background, var(--pyro-surface-color));
      border-radius: 50%;
      border: calc(var(--pyro-border-width) * 2) solid var(--pyro-range-primary-color, var(--pyro-primary-color));
      border-color: var(--pyro-range-primary-color, var(--pyro-primary-color));
      /*  slider progress trick  */
      box-shadow: -407px 0 0 400px var(--pyro-range-primary-color, var(--pyro-primary-color));
    }

    /* Thumb: Firefox */
    input[type='range']::-moz-range-thumb {
      height: 15px;
      width: 15px;
      background: var(--pyro-range-background, var(--pyro-surface-color));
      border-radius: 50%;
      border: calc(var(--pyro-border-width) * 2) solid var(--pyro-range-primary-color, var(--pyro-primary-color));
      border-color: var(--pyro-range-primary-color, var(--pyro-primary-color));
      /*  slider progress trick  */
      box-shadow: -407px 0 0 400px var(--pyro-range-primary-color, var(--pyro-primary-color));
    }
    span {
      color: var(--pyro-range-text-color, var(--pyro-text-color));
    }
  `;
o([
  p({ type: Number, reflect: !0 })
], r.prototype, "value", 2);
o([
  p({ type: Number, reflect: !0 })
], r.prototype, "min", 2);
o([
  p({ type: Number, reflect: !0 })
], r.prototype, "max", 2);
o([
  p({ type: Number, reflect: !0 })
], r.prototype, "step", 2);
o([
  p({ type: Boolean, reflect: !0 })
], r.prototype, "explicit", 2);
r = o([
  u("pyro-range")
], r);
export {
  r as PyroRange
};