@progress/kendo-vue-inputs/switch/Switch.mjs

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { defineComponent as p, createVNode as i } from "vue";
import { validatePackage as c, guid as m, kendoThemeMaps as n, getRef as r, isRtl as f, getTabIndex as g, setRef as u, noop as y, Keys as o } from "@progress/kendo-vue-common";
import { provideLocalizationService as $ } from "@progress/kendo-vue-intl";
import { switchValidation as h, messages as k } from "../messages/main.mjs";
import { packageMetadata as b } from "../package-metadata.mjs";
const B = /* @__PURE__ */ p({
  name: "KendoSwitch",
  model: {
    event: "changemodel"
  },
  emits: {
    change: null,
    changemodel: null,
    "update:modelValue": null,
    focus: null,
    blur: null
  },
  props: {
    name: String,
    accessKey: String,
    checked: {
      type: Boolean,
      default: void 0
    },
    className: String,
    disabled: {
      type: Boolean,
      default: !1
    },
    defaultChecked: {
      type: Boolean,
      default: !1
    },
    size: {
      type: String,
      default: "medium",
      validator: function(e) {
        return [null, "small", "medium", "large"].includes(e);
      }
    },
    trackRounded: {
      type: String,
      default: "full",
      validator: function(e) {
        return [null, "small", "medium", "large", "full"].includes(e);
      }
    },
    thumbRounded: {
      type: String,
      default: "full",
      validator: function(e) {
        return [null, "small", "medium", "large", "full"].includes(e);
      }
    },
    dir: String,
    id: String,
    ariaLabelledBy: String,
    ariaDescribedBy: String,
    offLabel: {
      type: String,
      default: "OFF"
    },
    onLabel: {
      type: String,
      default: "ON"
    },
    required: {
      type: Boolean,
      default: !1
    },
    tabIndex: Number,
    valid: Boolean,
    validityStyles: {
      type: Boolean,
      default: !1
    },
    validationMessage: String,
    value: {
      type: [String, Number, Boolean],
      default: void 0
    },
    modelValue: {
      type: Boolean,
      default: void 0
    }
  },
  created() {
    c(b), this._id = m(), this.defaultValidationMessage = $(this);
  },
  data() {
    return {
      currentChecked: this.$props.defaultChecked,
      valueDuringOnChange: void 0,
      focused: !1,
      currentDir: void 0
    };
  },
  computed: {
    computedValue() {
      return this.valueDuringOnChange !== void 0 ? this.valueDuringOnChange : this.$props.checked !== void 0 ? this.$props.checked : this.$props.value !== void 0 ? this.$props.value : this.$props.modelValue !== void 0 ? this.$props.modelValue : this.currentChecked;
    },
    switchClassName() {
      const e = !this.validityStyles || this.validity().valid, t = this.$props.trackRounded;
      return {
        "k-switch": !0,
        [`k-switch-${n.sizeMap[this.$props.size]}`]: this.$props.size,
        [`k-rounded-${n.roundedMap[t] || t}`]: t,
        "k-switch-on": this.computedValue,
        "k-switch-off": !this.computedValue,
        "k-focus": this.focused,
        "k-disabled": this.$props.disabled,
        "k-invalid": !e
      };
    },
    switchTrackClass() {
      const e = this.$props.trackRounded;
      return {
        "k-switch-track": !0,
        [`k-rounded-${n.roundedMap[e] || e}`]: e
      };
    },
    switchThumbClass() {
      const e = this.$props.thumbRounded;
      return {
        "k-switch-thumb": !0,
        [`k-rounded-${n.roundedMap[e] || e}`]: e
      };
    }
  },
  mounted() {
    this._element = r(this, "element"), this.input = r(this, "input"), this.currentDir = this.$props.dir !== void 0 ? this.$props.dir : f(this.$el) ? "rtl" : "ltr", this.setValidity();
  },
  updated() {
    this.setValidity();
  },
  render() {
    const {
      disabled: e,
      id: t,
      offLabel: s,
      onLabel: a,
      tabIndex: d,
      required: l
    } = this.$props;
    return i("span", {
      class: this.switchClassName,
      role: "switch",
      "aria-labelledby": this.$props.ariaLabelledBy,
      "aria-describedby": this.$props.ariaDescribedBy,
      "aria-checked": this.computedValue,
      "aria-disabled": e || void 0,
      dir: this.currentDir,
      onKeydown: this.handleKeyDown,
      onClick: this.handleClick,
      onFocusout: this.handleWrapperBlur,
      onFocusin: this.handleWrapperFocus,
      tabindex: g(d, e, void 0),
      accesskey: this.$props.accessKey
    }, [i("span", {
      class: this.switchTrackClass,
      ref: u(this, "element")
    }, [i("input", {
      type: "checkbox",
      id: t || this._id,
      checked: this.$props.checked,
      ref: u(this, "input"),
      tabindex: -1,
      name: this.$props.name,
      required: l !== void 0 ? l : !1,
      "aria-hidden": !0,
      value: this.computedValue,
      style: {
        opacity: 0,
        width: 1,
        border: 0,
        zIndex: -1,
        position: "absolute",
        left: "50%"
      },
      onChange: y
    }, null), i("span", {
      class: "k-switch-label-on"
    }, [a]), i("span", {
      class: "k-switch-label-off"
    }, [s])]), i("span", {
      class: "k-switch-thumb-wrap"
    }, [i("span", {
      class: this.switchThumbClass
    }, null)])]);
  },
  methods: {
    focus() {
      this._element && this._element.focus();
    },
    element() {
      return this._element;
    },
    validity() {
      const e = this.$props.validationMessage !== void 0, t = this.$props.valid !== void 0 ? this.$props.valid : this.$props.required ? !!this.computedValue : !0, s = this.$props.valid !== void 0 ? this.$props.valid : t;
      return {
        customError: e,
        valid: s,
        valueMissing: this.computedValue === null
      };
    },
    setValidity() {
      this.input && this.input.setCustomValidity && this.input.setCustomValidity(this.validity().valid ? "" : this.$props.validationMessage || this.defaultValidationMessage.toLanguageString(h, k[h]));
    },
    limit(e, t, s) {
      const a = s.offsetWidth, d = t.offsetWidth;
      return e < 0 ? 0 : e > a - d ? a - d : e;
    },
    toggle(e, t) {
      this.currentChecked = e, this.valueDuringOnChange = e, this.$emit("changemodel", e), this.$emit("update:modelValue", e), this.$emit("change", {
        event: t,
        component: this,
        target: {
          value: e
        },
        name: this.$props.name,
        value: e,
        validity: this.validity()
      }), this.valueDuringOnChange = void 0;
    },
    handleClick(e) {
      this.eventTimeStamp !== e.timeStamp && (this.eventTimeStamp = e.timeStamp, this.toggle(!this.computedValue, e));
    },
    handleKeyDown(e) {
      if (this.$props.disabled)
        return;
      const {
        keyCode: t
      } = e;
      (t === o.space || t === o.enter) && this.toggle(!this.computedValue, e);
    },
    handleWrapperFocus(e) {
      this.$props.disabled || (this.focused = !0, this.$emit("focus", e));
    },
    handleWrapperBlur(e) {
      this.$props.disabled || (this.focused = !1, this.$emit("blur", e));
    }
  }
});
export {
  B as Switch
};