"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const aria = require("../../../constants/aria.js");
const event$1 = require("../../../constants/event.js");
const event = require("../../../utils/dom/event.js");
const error = require("../../../utils/error.js");
const index = require("../../../hooks/use-locale/index.js");
const index$1 = require("../../../hooks/use-namespace/index.js");
const index$3 = require("../../../hooks/use-focus-controller/index.js");
const index$2 = require("../../../hooks/use-empty-values/index.js");
const index$6 = require("../../icon/index.js");
const useFormCommonProps = require("../../form/src/hooks/use-form-common-props.js");
const useFormItem = require("../../form/src/hooks/use-form-item.js");
const index$5 = require("../../tooltip/index.js");
const index$9 = require("../../button/index.js");
const index$a = require("../../../directives/click-outside/index.js");
const colorPickerPanel = require("../../color-picker-panel/src/color-picker-panel.js");
const color = require("../../color-picker-panel/src/utils/color.js");
const useCommonColor = require("../../color-picker-panel/src/composables/use-common-color.js");
const index$8 = require("../../color-picker-panel/index.js");
const colorPicker = require("./color-picker.js");
const index$7 = require("../../../../../@element-plus/icons-vue/dist/index.js");
const Vue = require("vue");
const index$4 = require("../../../../node_modules/@vueuse/shared/index.js");
const pick = require("../../../../../lodash-es/pick.js");
const debounce = require("../../../../../lodash-es/debounce.js");
const _hoisted_1 = [
  "id",
  "aria-label",
  "aria-labelledby",
  "aria-description",
  "aria-disabled",
  "tabindex"
];
var color_picker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ Vue.defineComponent({
  name: "ElColorPicker",
  __name: "color-picker",
  props: colorPicker.colorPickerProps,
  emits: colorPicker.colorPickerEmits,
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const { t } = index.useLocale();
    const ns = index$1.useNamespace("color");
    const { formItem } = useFormItem.useFormItem();
    const colorSize = useFormCommonProps.useFormSize();
    const colorDisabled = useFormCommonProps.useFormDisabled();
    const { valueOnClear, isEmptyValue } = index$2.useEmptyValues(props, null);
    const commonColor = useCommonColor.useCommonColor(props, emit);
    const { inputId: buttonId, isLabeledByFormItem } = useFormItem.useFormItemInputId(props, { formItemContext: formItem });
    const popper = Vue.ref();
    const triggerRef = Vue.ref();
    const pickerPanelRef = Vue.ref();
    const showPicker = Vue.ref(false);
    const showPanelColor = Vue.ref(false);
    let shouldActiveChange = true;
    const { isFocused, handleFocus, handleBlur } = index$3.useFocusController(triggerRef, {
      disabled: colorDisabled,
      beforeBlur(event2) {
        var _a;
        return (_a = popper.value) == null ? void 0 : _a.isFocusInsideContent(event2);
      },
      afterBlur() {
        var _a;
        setShowPicker(false);
        resetColor();
        if (props.validateEvent) (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur").catch((err) => error.debugWarn(err));
      }
    });
    const color$1 = index$4.reactiveComputed(() => {
      var _a;
      return ((_a = pickerPanelRef.value) == null ? void 0 : _a.color) ?? commonColor.color;
    });
    const panelProps = Vue.computed(() => pick.default(props, Object.keys(colorPickerPanel.colorPickerPanelProps)));
    const displayedColor = Vue.computed(() => {
      if (!props.modelValue && !showPanelColor.value) return "transparent";
      return displayedRgb(color$1, props.showAlpha);
    });
    const currentColor = Vue.computed(() => {
      return !props.modelValue && !showPanelColor.value ? "" : color$1.value;
    });
    const buttonAriaLabel = Vue.computed(() => {
      return !isLabeledByFormItem.value ? props.ariaLabel || t("el.colorpicker.defaultLabel") : void 0;
    });
    const buttonAriaLabelledby = Vue.computed(() => {
      return isLabeledByFormItem.value ? formItem == null ? void 0 : formItem.labelId : void 0;
    });
    const btnKls = Vue.computed(() => {
      return [
        ns.b("picker"),
        ns.is("disabled", colorDisabled.value),
        ns.bm("picker", colorSize.value),
        ns.is("focused", isFocused.value)
      ];
    });
    function displayedRgb(color2, showAlpha) {
      const { r, g, b, a } = color2.toRgb();
      return showAlpha ? `rgba(${r}, ${g}, ${b}, ${a})` : `rgb(${r}, ${g}, ${b})`;
    }
    function setShowPicker(value) {
      showPicker.value = value;
    }
    const debounceSetShowPicker = debounce.default(setShowPicker, 100, { leading: true });
    function show() {
      if (colorDisabled.value) return;
      setShowPicker(true);
    }
    function hide() {
      debounceSetShowPicker(false);
      resetColor();
    }
    function resetColor() {
      Vue.nextTick(() => {
        if (props.modelValue) color$1.fromString(props.modelValue);
        else {
          color$1.value = "";
          Vue.nextTick(() => {
            showPanelColor.value = false;
          });
        }
      });
    }
    function handleTrigger() {
      if (colorDisabled.value) return;
      if (showPicker.value) resetColor();
      debounceSetShowPicker(!showPicker.value);
    }
    function confirmValue() {
      const value = isEmptyValue(color$1.value) ? valueOnClear.value : color$1.value;
      emit(event$1.UPDATE_MODEL_EVENT, value);
      emit(event$1.CHANGE_EVENT, value);
      if (props.validateEvent) formItem == null ? void 0 : formItem.validate("change").catch((err) => error.debugWarn(err));
      debounceSetShowPicker(false);
      Vue.nextTick(() => {
        const newColor = new color.default({
          enableAlpha: props.showAlpha,
          format: props.colorFormat || "",
          value: props.modelValue
        });
        if (!color$1.compare(newColor)) resetColor();
      });
    }
    function clear() {
      debounceSetShowPicker(false);
      emit(event$1.UPDATE_MODEL_EVENT, valueOnClear.value);
      emit(event$1.CHANGE_EVENT, valueOnClear.value);
      if (props.modelValue !== valueOnClear.value && props.validateEvent) formItem == null ? void 0 : formItem.validate("change").catch((err) => error.debugWarn(err));
      resetColor();
      emit("clear");
    }
    function handleShowTooltip() {
      var _a, _b;
      (_b = (_a = pickerPanelRef == null ? void 0 : pickerPanelRef.value) == null ? void 0 : _a.inputRef) == null ? void 0 : _b.focus();
    }
    function handleClickOutside() {
      if (!showPicker.value) return;
      hide();
      isFocused.value && focus();
    }
    function handleEsc(event2) {
      event2.preventDefault();
      event2.stopPropagation();
      setShowPicker(false);
      resetColor();
    }
    function handleKeyDown(event$12) {
      switch (event.getEventCode(event$12)) {
        case aria.EVENT_CODE.enter:
        case aria.EVENT_CODE.numpadEnter:
        case aria.EVENT_CODE.space:
          event$12.preventDefault();
          event$12.stopPropagation();
          show();
          break;
        case aria.EVENT_CODE.esc:
          handleEsc(event$12);
          break;
      }
    }
    function focus() {
      triggerRef.value.focus();
    }
    function blur() {
      triggerRef.value.blur();
    }
    Vue.watch(() => currentColor.value, (val) => {
      shouldActiveChange && emit("activeChange", val);
      shouldActiveChange = true;
    });
    Vue.watch(() => color$1.value, () => {
      if (!props.modelValue && !showPanelColor.value) showPanelColor.value = true;
    });
    Vue.watch(() => props.modelValue, (newVal) => {
      if (!newVal) showPanelColor.value = false;
      else if (newVal && newVal !== color$1.value) {
        shouldActiveChange = false;
        color$1.fromString(newVal);
      }
    });
    Vue.watch(() => showPicker.value, () => {
      pickerPanelRef.value && Vue.nextTick(pickerPanelRef.value.update);
    });
    Vue.provide(colorPickerPanel.ROOT_COMMON_COLOR_INJECTION_KEY, commonColor);
    __expose({
      color: color$1,
      show,
      hide,
      focus,
      blur
    });
    return (_ctx, _cache) => {
      return Vue.openBlock(), Vue.createBlock(Vue.unref(index$5.ElTooltip), {
        ref_key: "popper",
        ref: popper,
        visible: showPicker.value,
        "show-arrow": false,
        "fallback-placements": [
          "bottom",
          "top",
          "right",
          "left"
        ],
        offset: 0,
        "gpu-acceleration": false,
        "popper-class": [Vue.unref(ns).be("picker", "panel"), __props.popperClass],
        "popper-style": __props.popperStyle,
        "stop-popper-mouse-event": false,
        pure: "",
        loop: "",
        role: "dialog",
        effect: "light",
        trigger: "click",
        teleported: __props.teleported,
        transition: `${Vue.unref(ns).namespace.value}-zoom-in-top`,
        persistent: __props.persistent,
        "append-to": __props.appendTo,
        onShow: handleShowTooltip,
        onHide: _cache[2] || (_cache[2] = ($event) => setShowPicker(false))
      }, {
        content: Vue.withCtx(() => [Vue.withDirectives((Vue.openBlock(), Vue.createBlock(Vue.unref(index$8.ElColorPickerPanel), Vue.mergeProps({
          ref_key: "pickerPanelRef",
          ref: pickerPanelRef
        }, panelProps.value, {
          border: false,
          "validate-event": false,
          onKeydown: Vue.withKeys(handleEsc, ["esc"])
        }), {
          footer: Vue.withCtx(() => [Vue.createElementVNode("div", null, [__props.clearable ? (Vue.openBlock(), Vue.createBlock(Vue.unref(index$9.ElButton), {
            key: 0,
            class: Vue.normalizeClass(Vue.unref(ns).be("footer", "link-btn")),
            text: "",
            size: "small",
            onClick: clear
          }, {
            default: Vue.withCtx(() => [Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("el.colorpicker.clear")), 1)]),
            _: 1
          }, 8, ["class"])) : Vue.createCommentVNode("v-if", true), Vue.createVNode(Vue.unref(index$9.ElButton), {
            plain: "",
            size: "small",
            class: Vue.normalizeClass(Vue.unref(ns).be("footer", "btn")),
            onClick: confirmValue
          }, {
            default: Vue.withCtx(() => [Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("el.colorpicker.confirm")), 1)]),
            _: 1
          }, 8, ["class"])])]),
          _: 1
        }, 16)), [[
          Vue.unref(index$a.default),
          handleClickOutside,
          triggerRef.value
        ]])]),
        default: Vue.withCtx(() => [Vue.createElementVNode("div", Vue.mergeProps({
          id: Vue.unref(buttonId),
          ref_key: "triggerRef",
          ref: triggerRef
        }, _ctx.$attrs, {
          class: btnKls.value,
          role: "button",
          "aria-label": buttonAriaLabel.value,
          "aria-labelledby": buttonAriaLabelledby.value,
          "aria-description": Vue.unref(t)("el.colorpicker.description", { color: __props.modelValue || "" }),
          "aria-disabled": Vue.unref(colorDisabled),
          tabindex: Vue.unref(colorDisabled) ? void 0 : __props.tabindex,
          onKeydown: handleKeyDown,
          onFocus: _cache[0] || (_cache[0] = (...args) => Vue.unref(handleFocus) && Vue.unref(handleFocus)(...args)),
          onBlur: _cache[1] || (_cache[1] = (...args) => Vue.unref(handleBlur) && Vue.unref(handleBlur)(...args))
        }), [Vue.createElementVNode("div", {
          class: Vue.normalizeClass(Vue.unref(ns).be("picker", "trigger")),
          onClick: handleTrigger
        }, [Vue.createElementVNode("span", { class: Vue.normalizeClass([Vue.unref(ns).be("picker", "color"), Vue.unref(ns).is("alpha", __props.showAlpha)]) }, [Vue.createElementVNode("span", {
          class: Vue.normalizeClass(Vue.unref(ns).be("picker", "color-inner")),
          style: Vue.normalizeStyle({ backgroundColor: displayedColor.value })
        }, [Vue.withDirectives(Vue.createVNode(Vue.unref(index$6.ElIcon), { class: Vue.normalizeClass([Vue.unref(ns).be("picker", "icon"), Vue.unref(ns).is("icon-arrow-down")]) }, {
          default: Vue.withCtx(() => [Vue.createVNode(Vue.unref(index$7.ArrowDown))]),
          _: 1
        }, 8, ["class"]), [[Vue.vShow, __props.modelValue || showPanelColor.value]]), Vue.withDirectives(Vue.createVNode(Vue.unref(index$6.ElIcon), { class: Vue.normalizeClass([Vue.unref(ns).be("picker", "empty"), Vue.unref(ns).is("icon-close")]) }, {
          default: Vue.withCtx(() => [Vue.createVNode(Vue.unref(index$7.Close))]),
          _: 1
        }, 8, ["class"]), [[Vue.vShow, !__props.modelValue && !showPanelColor.value]])], 6)], 2)], 2)], 16, _hoisted_1)]),
        _: 1
      }, 8, [
        "visible",
        "popper-class",
        "popper-style",
        "teleported",
        "transition",
        "persistent",
        "append-to"
      ]);
    };
  }
});
exports.default = color_picker_vue_vue_type_script_setup_true_lang_default;
