@reliability-design/web 1.0.2

package/dist/components/rel-slider/rel-slider.ts

@@ -0,0 +1,440 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+export type SliderType = "continuous" | "discrete";
+export type TrackStyle = "solid" | "dotted";
+
+@customElement("rel-slider")
+export class RelSlider extends LitElement {
+  @property({ type: String }) type: SliderType = "continuous";
+
+  @property({ type: Number }) min: number = 0;
+
+  @property({ type: Number }) max: number = 100;
+
+  @property({ type: Number }) step: number = 1;
+
+  @property({ type: Boolean }) disabled: boolean = false;
+
+  @property({ type: String }) track: TrackStyle = "solid";
+
+  @property({ type: Boolean }) showTickLabels: boolean = false;
+
+  @property({ type: Boolean }) showBubble: boolean = true;  
+
+  @property({ type: Number }) value: number = 0;
+
+  @state() private ticks: number[] = [];
+
+  static styles = css`
+    :host {
+      --track-height: 5px;
+      --thumb-size: 10px;
+      --thumb-stroke: 7px;
+      --thumb-halo-color: rgba(224, 222, 222, 0.8);
+      --tick-size: 4px;
+      --shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+      --halo: 0 2px 0 #e9e9e9, 0 6px 10px rgba(0, 0, 0, 0.07);
+      --marker-width: 24px;
+      --marker-height: 28px;
+
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .rel-slider {
+      position: relative;
+      width: 100%;
+      height: 60px;
+      user-select: none;
+    }
+
+    /* Track */
+    .track {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 100%;
+      height: var(--track-height);
+      background: var(--rel-colors-gray-border);
+      border-radius: 2px;
+      transform: translateY(-50%);
+      pointer-events: none;
+    }
+
+    .track-active {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      height: var(--track-height);
+      background: var(--rel-colors-black);
+      border-radius: 2px;
+      transform: translateY(-50%);
+      pointer-events: none;
+    }
+
+    .track-active.dotted {
+      background: radial-gradient(
+            circle,
+            var(--rel-colors-white) 0 1px,
+            transparent 1px
+          )
+          center/12px 4px repeat-x,
+        var(--rel-colors-black);
+    }
+
+    /* Input */
+    .slider-input {
+      -webkit-appearance: none;
+      appearance: none;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      left: 0;
+      height: 100%;
+      background: transparent;
+      outline: none;
+      cursor: pointer;
+      z-index: 2;
+      margin: 0;
+      padding: 0;
+    }
+
+    .slider-input::-webkit-slider-runnable-track {
+      background: transparent;
+      height: 100%;
+      border: none;
+    }
+
+    .slider-input::-moz-range-track {
+      background: transparent;
+      height: 100%;
+      border: none;
+    }
+
+    /* Hide native thumb */
+    .slider-input::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 1px;
+      height: 1px;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+    }
+
+    .slider-input::-moz-range-thumb {
+      width: 1px;
+      height: 1px;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+    }
+
+    /* Custom Thumb Container */
+    .thumb-container {
+      position: absolute;
+      left: 0;
+      top: 23.5%;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+      z-index: 5;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0;
+    }
+
+    /* Value Marker */
+    .value-marker {
+      width: var(--marker-width);
+      height: var(--marker-height);
+      margin-bottom: 4px;
+    }
+
+    .value-marker svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    /* Custom Thumb */
+    .custom-thumb {
+      width: var(--thumb-size);
+      height: var(--thumb-size);
+      background: var(--rel-colors-black);
+      border-radius: 50%;
+      transition: box-shadow 0.15s ease;
+    }
+
+    .slider-input:active ~ .thumb-container .custom-thumb {
+      box-shadow: 0 0 0 var(--thumb-stroke) var(--thumb-halo-color),
+        var(--shadow), var(--halo);
+    }
+
+    /* Ticks */
+    .ticks {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 100%;
+      transform: translateY(-50%);
+      pointer-events: none;
+    }
+
+    .tick {
+      position: absolute;
+      width: var(--tick-size);
+      height: var(--tick-size);
+      background: var(--rel-colors-gray-primary);
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+      transition: background 0.2s;
+      z-index: 3;
+    }
+
+    .tick.active {
+      background: var(--rel-colors-white);
+    }
+
+    /* Tick labels */
+    .tick-labels {
+      position: absolute;
+      top: calc(50% + var(--tick-size) + 6px);
+      left: 0;
+      width: 100%;
+      font-size: var(--rel-fontSizes-xs);
+      color: var(--rel-colors-gray-heading);
+      pointer-events: none;
+    }
+
+    .tick-label {
+      position: absolute;
+      transform: translateX(-50%);
+    }
+
+    /* Disabled State */
+    .rel-slider.disabled .track {
+      background: var(--rel-colors-gray-primary);
+    }
+
+    .rel-slider.disabled .track-active {
+      background: var(--rel-colors-gray-placeholder);
+    }
+
+    .rel-slider.disabled .track-active.dotted {
+      background: radial-gradient(
+            circle,
+            #eaeaea 0 1px,
+            transparent 1px
+          )
+          center/12px 4px repeat-x,
+        var(--rel-colors-gray-placeholder);
+    }
+
+    .rel-slider.disabled .tick {
+      background: var(--rel-colors-gray-placeholder);
+    }
+
+    .rel-slider.disabled .tick-label {
+      color: var(--rel-colors-gray-placeholder);
+    }
+
+    .rel-slider.disabled .slider-input {
+      cursor: not-allowed;
+    }
+
+    .rel-slider.disabled .custom-thumb {
+      background: var(--rel-colors-gray-placeholder);
+      box-shadow: 0 0 0 var(--thumb-stroke) #f5f5f5;
+    }
+
+    .rel-slider.disabled .value-marker svg path {
+      fill: var(--rel-colors-gray-placeholder);
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setupTicks();
+  }
+
+  updated(changedProperties: Map<string, any>) {
+    if (
+      changedProperties.has("type") ||
+      changedProperties.has("min") ||
+      changedProperties.has("max") ||
+      changedProperties.has("step")
+    ) {
+      this.setupTicks();
+    }
+    if (changedProperties.has("value")) {
+      this.updateActiveWidth();
+    }
+  }
+
+  private get percentage(): number {
+    if (this.max === this.min) return 0;
+    return ((this.value - this.min) / (this.max - this.min)) * 100;
+  }
+
+  private setupTicks() {
+    if (this.type !== "discrete") {
+      this.ticks = [];
+      return;
+    }
+
+    const step = Math.max(1, this.step);
+    const ticks: number[] = [];
+    for (let v = this.min; v <= this.max; v += step) {
+      ticks.push(v);
+    }
+    if (ticks[ticks.length - 1] !== this.max) {
+      ticks.push(this.max);
+    }
+    this.ticks = ticks;
+  }
+
+  private getTickLeftPct(tick: number): number {
+    const pct = ((tick - this.min) / (this.max - this.min)) * 100;
+    return Math.round(pct * 1000) / 1000;
+  }
+
+  private isTickActive(tick: number): boolean {
+    return tick <= this.value;
+  }
+
+  private onInput(ev: Event) {
+    const el = ev.target as HTMLInputElement;
+    let next = Number(el.value);
+
+    if (this.type === "discrete") {
+      const snapped =
+        Math.round((next - this.min) / this.step) * this.step + this.min;
+      next = Math.min(this.max, Math.max(this.min, snapped));
+      el.value = String(next);
+    }
+
+    this.value = next;
+    this.updateActiveWidth();
+    this.dispatchEvent(
+      new CustomEvent("valueChange", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private updateActiveWidth() {
+    const activeEl = this.shadowRoot?.querySelector(".track-active") as HTMLDivElement;
+    if (activeEl) {
+      if (this.type === "discrete") {
+        const stepPercent = (this.step / (this.max - this.min)) * 100;
+        const snappedPct = Math.round(this.percentage / stepPercent) * stepPercent;
+        activeEl.style.width = `${snappedPct}%`;
+      } else {
+        activeEl.style.width = `${this.percentage}%`;
+      }
+    }
+  }
+
+  private renderThumbContainer() {
+    return html`
+      <div class="thumb-container" style="left: ${this.percentage}%">
+        ${this.showBubble ? html`
+          <div class="value-marker">
+            <svg viewBox="0 0 24 32" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M12 0C18.6274 0 24 5.37258 24 12C24 21 12 32 12 32C12 32 0 21 0 12C0 5.37258 5.37258 0 12 0Z"
+                fill="black" />
+              <text
+                x="12"
+                y="16"
+                text-anchor="middle"
+                fill="white"
+                font-size="12"
+                font-family="Poppins"
+                font-weight="600">
+                ${this.value}
+              </text>
+            </svg>
+          </div>
+        ` : ""}
+        <div class="custom-thumb"></div>
+      </div>
+    `;
+  }
+
+  private renderTicks() {
+    if (this.type !== "discrete") return "";
+
+    return html`
+      <div class="ticks">
+        ${this.ticks.map(
+          (tick) => html`
+            <div
+              class="tick ${this.isTickActive(tick) ? "active" : ""}"
+              style="left: ${this.getTickLeftPct(tick)}%"></div>
+          `
+        )}
+      </div>
+    `;
+  }
+
+  private renderTickLabels() {
+    if (this.type !== "discrete" || !this.showTickLabels) return "";
+
+    return html`
+      <div class="tick-labels">
+        ${this.ticks.map(
+          (tick) => html`
+            <div
+              class="tick-label"
+              style="left: ${this.getTickLeftPct(tick)}%">
+              ${tick}
+            </div>
+          `
+        )}
+      </div>
+    `;
+  }
+
+  render() {
+    const sliderClasses = [
+      "rel-slider",
+      this.disabled ? "disabled" : "",
+      this.type === "discrete" ? "has-ticks" : "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const trackActiveClasses = [
+      "track-active",
+      this.track === "dotted" ? "dotted" : "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return html`
+      <div class="${sliderClasses}">
+        <div class="track"></div>
+        <div class="${trackActiveClasses}"></div>
+
+        <input
+          class="slider-input"
+          type="range"
+          .min="${String(this.min)}"
+          .max="${String(this.max)}"
+          .step="${this.type === 'discrete' ? String(this.step) : '1'}"
+          .value="${String(this.value)}"
+          ?disabled="${this.disabled}"
+          @input="${this.onInput}" />
+
+        ${this.renderThumbContainer()}
+        ${this.renderTicks()}
+        ${this.renderTickLabels()}
+      </div>
+    `;
+  }
+}