"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const index = require("../../../../hooks/use-locale/index.js");
const svPanel = require("../props/sv-panel.js");
const useSvPanel = require("../composables/use-sv-panel.js");
const Vue = require("vue");
const _hoisted_1 = [
  "tabindex",
  "aria-disabled",
  "aria-label",
  "aria-valuenow",
  "aria-valuetext"
];
var sv_panel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ Vue.defineComponent({
  name: "ElSvPanel",
  __name: "sv-panel",
  props: svPanel.svPanelProps,
  setup(__props, { expose: __expose }) {
    const props = __props;
    const { cursorRef, cursorTop, cursorLeft, background, saturation, brightness, handleClick, handleDrag, handleKeydown } = useSvPanel.useSvPanel(props);
    const { rootKls, cursorKls, rootStyle, cursorStyle, update } = useSvPanel.useSvPanelDOM(props, {
      cursorTop,
      cursorLeft,
      background,
      handleDrag
    });
    const { t } = index.useLocale();
    const ariaLabel = Vue.computed(() => t("el.colorpicker.svLabel"));
    const ariaValuetext = Vue.computed(() => {
      return t("el.colorpicker.svDescription", {
        saturation: saturation.value,
        brightness: brightness.value,
        color: props.color.value
      });
    });
    __expose({ update });
    return (_ctx, _cache) => {
      return Vue.openBlock(), Vue.createElementBlock("div", {
        class: Vue.normalizeClass(Vue.unref(rootKls)),
        style: Vue.normalizeStyle(Vue.unref(rootStyle)),
        onClick: _cache[1] || (_cache[1] = (...args) => Vue.unref(handleClick) && Vue.unref(handleClick)(...args))
      }, [Vue.createElementVNode("div", {
        ref_key: "cursorRef",
        ref: cursorRef,
        class: Vue.normalizeClass(Vue.unref(cursorKls)),
        style: Vue.normalizeStyle(Vue.unref(cursorStyle)),
        tabindex: __props.disabled ? void 0 : 0,
        "aria-disabled": __props.disabled,
        role: "slider",
        "aria-valuemin": "0,0",
        "aria-valuemax": "100,100",
        "aria-label": ariaLabel.value,
        "aria-valuenow": `${Vue.unref(saturation)},${Vue.unref(brightness)}`,
        "aria-valuetext": ariaValuetext.value,
        onKeydown: _cache[0] || (_cache[0] = (...args) => Vue.unref(handleKeydown) && Vue.unref(handleKeydown)(...args))
      }, null, 46, _hoisted_1)], 6);
    };
  }
});
exports.default = sv_panel_vue_vue_type_script_setup_true_lang_default;
