dap-design-system/dist/components/rating/rating.component.js

Official design system for the DÁP (dap.gov.hu)

import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as u } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as l } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { query as p } from "../../node_modules/@lit/reactive-element/decorators/query.js";
import { html as c } from "../../node_modules/lit-html/static.js";
import { GenericFormElement as _ } from "../../internal/mixin/genericFormElement.js";
import f from "../icon/icon.component.js";
import v from "./_styles/rating.scss.js";
import { unsafeCSS as b } from "../../node_modules/@lit/reactive-element/css-tag.js";
var y = Object.defineProperty, i = (d, e, t, n) => {
  for (var a = void 0, o = d.length - 1, h; o >= 0; o--)
    (h = d[o]) && (a = h(e, t, a) || a);
  return a && y(e, t, a), a;
};
const r = class r extends _ {
  constructor() {
    super(), this.max = 5, this._ratingContainer = null, this._hasFocus = !1, this._hoverValue = 0, this._uniqueId = `star-rating-${window.crypto.randomUUID()}`, this._handleContainerFocus = () => {
      this._hasFocus = !0, this._announceRating();
    }, this._handleContainerBlur = () => {
      this._hasFocus = !1;
    }, this._handleContainerKeyDown = (e) => {
      if (!(this.disabled || this.readonly))
        switch (e.key) {
          case "ArrowRight":
          case "ArrowUp":
            e.preventDefault(), this._incrementRating();
            break;
          case "ArrowLeft":
          case "ArrowDown":
            e.preventDefault(), this._decrementRating();
            break;
          case "Home":
            e.preventDefault(), this._setRating(1);
            break;
          case "End":
            e.preventDefault(), this._setRating(this.max);
            break;
          default:
            return;
        }
    }, this._handleKeyDown = (e) => {
      if (this.disabled || this.readonly) return;
      if (this.contains(e.target) && this._hasFocus)
        switch (e.key) {
          case "ArrowRight":
          case "ArrowUp":
          case "ArrowLeft":
          case "ArrowDown":
          case "Home":
          case "End":
            break;
          default:
            return;
        }
    }, this.value = 0;
  }
  connectedCallback() {
    super.connectedCallback(), document.addEventListener("keydown", this._handleKeyDown);
  }
  disconnectedCallback() {
    super.disconnectedCallback(), document.removeEventListener("keydown", this._handleKeyDown), this._ratingContainer && this._ratingContainer.removeEventListener("focus", () => {
    });
  }
  firstUpdated() {
    this._ratingContainer = this.renderRoot.querySelector(".rating-container");
  }
  _incrementRating() {
    const e = Math.min(this.value + 1, this.max);
    this._setRating(e);
  }
  _decrementRating() {
    const e = Math.max(this.value - 1, 0);
    this._setRating(e);
  }
  _setRating(e) {
    const t = this.value;
    this.value = e, t !== e && (this._announceRating(), this.emit("dds-change", { value: e }));
  }
  /**
   * Announce the current rating to screen readers
   */
  _announceRating() {
    if (this._liveRegion) {
      const e = this.value === 0 ? "Rating cleared" : `${this.value} of ${this.max} stars selected`;
      this._liveRegion.textContent = e;
    }
  }
  _handleStarClick(e) {
    if (this.disabled || this.readonly) return;
    const t = this.value === e ? 0 : e;
    this._setRating(t);
  }
  _handleStarHover(e) {
    this.disabled || this.readonly || (this._hoverValue = e);
  }
  _handleStarLeave() {
    this.disabled || this.readonly || (this._hoverValue = 0);
  }
  render() {
    const e = [];
    for (let t = 1; t <= this.max; t++) {
      const n = t <= this.value, a = !this.disabled && !this.readonly && t <= this._hoverValue;
      e.push(c`
        <span
          part="star"
          class=${m("star", {
        "star--active": n,
        "star--hover": a,
        "star--readonly": this.readonly,
        "star--disabled": this.disabled
      })}
          @click=${() => this._handleStarClick(t)}
          @mouseenter=${() => this._handleStarHover(t)}
          @mouseleave=${() => this._handleStarLeave()}
          tabindex=${this.disabled ? "-1" : "0"}
          role="radio"
          aria-checked=${n}
          aria-disabled=${this.disabled}
          aria-posinset=${t}
          aria-setsize=${this.max}>
          <dap-ds-icon part="icon" name="star-fill"></dap-ds-icon>
          <span class="sr-only">${t} star${t === 1 ? "" : "s"}</span>
        </span>
      `);
    }
    return c`
      <div
        class="rating-container"
        part="base"
        tabindex=${this.disabled ? "-1" : "0"}
        @focus=${this._handleContainerFocus}
        @blur=${this._handleContainerBlur}
        @keydown=${this._handleContainerKeyDown}
        aria-labelledby="rating-label-${this._uniqueId}">
        ${this.renderLabel(`rating-label-${this._uniqueId}`)}
        <div
          class="stars-container"
          part="stars-container"
          role="radiogroup"
          aria-labelledby="rating-label-${this._uniqueId}"
          aria-disabled=${this.disabled}
          aria-readonly=${this.readonly}>
          ${e}
        </div>
        <!-- Live region for screen reader announcements -->
        <div class="sr-announcement sr-only" aria-live="assertive"></div>
      </div>
    `;
  }
};
r.tagName = "dap-ds-rating", r.dependencies = {
  "dap-ds-icon": f
}, r.styles = b(v);
let s = r;
i([
  p(".sr-announcement")
], s.prototype, "_liveRegion");
i([
  u({ reflect: !0 })
], s.prototype, "label");
i([
  u({ type: Number })
], s.prototype, "max");
i([
  l()
], s.prototype, "_hasFocus");
i([
  l()
], s.prototype, "_hoverValue");
i([
  l()
], s.prototype, "_uniqueId");
export {
  s as default
};
//# sourceMappingURL=rating.component.js.map