"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const index = require("../../../../hooks/use-locale/index.js");
const predefine = require("../props/predefine.js");
const usePredefine = require("../composables/use-predefine.js");
const vue = require("vue");
const _hoisted_1 = [
  "disabled",
  "aria-label",
  "onClick"
];
var predefine_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.defineComponent({
  name: "ElColorPredefine",
  __name: "predefine",
  props: predefine.predefineProps,
  setup(__props) {
    const props = __props;
    const { rgbaColors, handleSelect } = usePredefine.usePredefine(props);
    const { rootKls, colorsKls, colorSelectorKls } = usePredefine.usePredefineDOM(props);
    const { t } = index.useLocale();
    const ariaLabel = (value) => {
      return t("el.colorpicker.predefineDescription", { value });
    };
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", { class: vue.normalizeClass(vue.unref(rootKls)) }, [vue.createElementVNode("div", { class: vue.normalizeClass(vue.unref(colorsKls)) }, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(rgbaColors), (item, index2) => {
        return vue.openBlock(), vue.createElementBlock("button", {
          key: __props.colors[index2],
          type: "button",
          disabled: __props.disabled,
          "aria-label": ariaLabel(item.value),
          class: vue.normalizeClass(vue.unref(colorSelectorKls)(item)),
          onClick: ($event) => vue.unref(handleSelect)(index2)
        }, [vue.createElementVNode("div", { style: vue.normalizeStyle({ backgroundColor: item.value }) }, null, 4)], 10, _hoisted_1);
      }), 128))], 2)], 2);
    };
  }
});
exports.default = predefine_vue_vue_type_script_setup_true_lang_default;
