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

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

import { clsx as r } 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 b } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { query as u } from "../../node_modules/@lit/reactive-element/decorators/query.js";
import { ifDefined as d } from "../../node_modules/lit-html/directives/if-defined.js";
import { html as l } from "../../node_modules/lit-html/static.js";
import { LabeledChoiceElement as f } from "../../internal/mixin/labeledChoiceElement.js";
import y from "../feedback/feedback.component.js";
import m from "../form/form-label/form-label.component.js";
import $ from "../icon/icon.component.js";
import k from "../typography/typography.component.js";
import _ from "./switch.scss.js";
import { unsafeCSS as g } from "../../node_modules/@lit/reactive-element/css-tag.js";
var v = Object.defineProperty, c = (h, e, s, p) => {
  for (var t = void 0, o = h.length - 1, a; o >= 0; o--)
    (a = h[o]) && (t = a(e, s, t) || t);
  return t && v(e, s, t), t;
}, i;
const n = (i = class extends f {
  constructor() {
    super(), this.border = !1, this.type = "normal", this.handleClick = (s) => {
      if (this.disabled || this.readonly) {
        this.readonly && s && (s.preventDefault(), s.stopPropagation());
        return;
      }
      this.validateProperties(), this.checked = !this.checked;
      const { checked: p, value: t, disabled: o } = this;
      try {
        const a = new CustomEvent("dds-change", {
          bubbles: !0,
          cancelable: !1,
          composed: !0,
          detail: {
            checked: p,
            value: t || "",
            disabled: o,
            readonly: this.readonly
          }
        });
        this.dispatchEvent(a);
      } catch (a) {
        console.error("Error emitting switch change event:", a);
      }
      try {
        this.setValidity();
      } catch (a) {
        console.error("Error setting switch validity:", a);
      }
    }, i.nextId++;
    const e = typeof crypto != "undefined" && crypto.randomUUID ? crypto.randomUUID().slice(0, 8) : Date.now().toString(36);
    this.inputId = `input-${i.nextId}-${e}`, this.labelId = `label-${i.nextId}-${e}`, this.descriptionId = `description-${i.nextId}-${e}`, this.feedbackId = `feedback-${i.nextId}-${e}`;
  }
  /**
   * Validates property combinations and logs warnings for invalid states.
   * @private
   */
  validateProperties() {
    this.required && this.checked;
  }
  /**
   * Gets the aria-describedby attribute value by combining description and feedback IDs.
   * @returns {string | undefined} Space-separated IDs or undefined if none exist
   * @private
   */
  getAriaDescribedBy() {
    const e = [];
    return this.description && e.push(this.descriptionId), this.feedback && e.push(this.feedbackId), e.length > 0 ? e.join(" ") : void 0;
  }
  get focusElement() {
    if (!this.input)
      throw new Error(
        "Switch input element not found. Component may not be properly initialized."
      );
    return this.input;
  }
  /**
   * Programmatically focuses the switch input element.
   * @public
   */
  focus() {
    this.input && !this.disabled && !this.readonly && this.input.focus();
  }
  /**
   * Programmatically blurs the switch input element.
   * @public
   */
  blur() {
    this.input && this.input.blur();
  }
  /**
   * Handles invalid events on the switch input.
   * Prevents the default browser validation UI from showing and manages invalid state.
   * @param {Event} event - The invalid event
   * @private
   */
  handleInvalid(e) {
    e.preventDefault(), this.invalid || (this.invalid = !0);
  }
  /**
   * Handles keyboard events on the switch.
   * Provides enhanced keyboard navigation and accessibility.
   * @param {KeyboardEvent} event - The keyboard event
   * @private
   */
  handleKeyDown(e) {
    this.readonly || e.code !== "Space" && e.code === "Enter" && (e.preventDefault(), this.handleClick());
  }
  render() {
    return l`
      <div part="base">
        <label
          part="baselabel"
          class=${r("switch choice", `switch--${this.size}`, {
      "switch--checked": this.checked,
      "switch--disabled": this.disabled,
      "switch--readonly": this.readonly,
      "switch--required": this.required,
      "choice--readonly": this.readonly,
      "choice--disabled": this.disabled,
      "choice__label--right": this.labelPlacement === "right",
      "choice__label--left": this.labelPlacement === "left"
    })}>
          <div
            class=${r("input__wrapper", {
      "input__wrapper--background": this.type === "background",
      "input__wrapper--border": this.border
    })}>
            <input
              part="input"
              type="checkbox"
              class="input"
              id=${this.inputId}
              role="switch"
              .checked=${this.checked}
              .required=${this.required}
              .disabled=${this.disabled}
              .readonly=${this.readonly}
              aria-labelledby=${d(
      !this.ariaLabel && this.label ? this.labelId : void 0
    )}
              aria-describedby=${this.ariaLabel ? "" : d(this.getAriaDescribedBy())}
              aria-checked=${this.checked ? "true" : "false"}
              .aria-invalid=${this.invalid ? "true" : null}
              @invalid=${this.handleInvalid}
              @click=${this.handleClick}
              @keydown=${this.handleKeyDown}
              @focus=${this.onFocus}
              @blur=${this.onBlur}
              @input=${this.onInput} />
            <span
              part="control"
              class=${r(
      "input__control",
      { "input__control--disabled": this.disabled },
      { "input__control--readonly": this.readonly },
      { "input__control--invalid": this.invalid },
      { "input__control--checked": this.checked }
    )}>
              <span class="input__control-toggle">
                <dap-ds-icon
                  name="checkbox-blank-circle-fill"
                  class="input__control-toggle-thumb"
                  aria-hidden="true"></dap-ds-icon
                ><dap-ds-icon
                  name="checkbox-circle-fill"
                  class=${r(
      "input__control-toggle-thumb",
      "check-indicator"
    )}
                  aria-hidden="true"></dap-ds-icon>
              </span>
              <span
                part="high-contrast"
                aria-hidden="true"
                class=${r(
      "input__control-high-contrast",
      `input__control-high-contrast--${this.size}`,
      {
        "input__control-high-contrast--disabled": this.disabled,
        "input__control-high-contrast--readonly": this.readonly
      }
    )}></span>
            </span>
            <div
              part="label-container"
              class=${r("choice__label-container", {
      "choice__label-container--disabled": this.disabled,
      "choice__label-container--readonly": this.readonly,
      "choice__label--bottom": this.descriptionPlacement === "top",
      "choice__label--top": this.descriptionPlacement === "bottom"
    })}>
              ${this.label && l`<dap-ds-form-label
                id=${this.labelId}
                class="label"
                part="label"
                .size=${this.size}
                .required=${this.required}
                .requiredLabel=${this.requiredLabel}
                .optional=${this.optional}
                .optionalLabel=${this.optionalLabel}
                aria-hidden="true"
                subtle
                .disabled=${this.disabled || this.readonly}
                .readonly=${this.readonly}
                .hideLabel=${this.hideLabel}
                label=${d(this.label)}
                renderAs="span">
              </dap-ds-form-label>`}
              ${this.description && l`
                <dap-ds-typography
                  part="description"
                  class="description"
                  variant="description"
                  aria-hidden="true"
                  size=${d(this.size)}
                  id=${this.descriptionId}>
                  ${this.description}
                </dap-ds-typography>
              `}
            </div>
          </div>
          ${this.feedback && l`
            <dap-ds-feedback
              part="feedback"
              feedbackType=${d(this.feedbackType)}
              feedbackSize=${d(this.size)}
              id="feedback"
              .subtle=${this.subtle}>
              ${this.feedback}
            </dap-ds-feedback>
          `}
        </label>
      </div>
    `;
  }
}, i.tagName = "dap-ds-switch", i.dependencies = {
  "dap-ds-icon": $,
  "dap-ds-form-label": m,
  "dap-ds-typography": k,
  "dap-ds-feedback": y
}, i.nextId = 0, i.styles = g(_), i);
c([
  u(".input")
], n.prototype, "input");
c([
  b({ type: Boolean })
], n.prototype, "border");
c([
  b({ type: String })
], n.prototype, "type");
let T = n;
export {
  T as default
};
//# sourceMappingURL=switch.component.js.map