var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
import { x as script } from "./vendor-primevue-DmDWdkDd.js";
import { cC as isColorFormat, cD as toHexFromFormat, c as cn } from "./index-BqxAUePh.js";
import { P as PANEL_EXCLUDED_PROPS, f as filterWidgetProps } from "./widgetPropFilter-BIbGSUAt.js";
import { W as WidgetInputBaseClass } from "./index-Csoifk32.js";
import { _ as _sfc_main$1 } from "./WidgetLayoutField.vue_vue_type_script_setup_true_lang-BZ0_zQzJ.js";
import { bq as defineComponent, E as computed, r as ref, w as watch, j as createBlock, d as openBlock, k as withCtx, e as createBaseVNode, s as normalizeClass, br as unref, z as createVNode, m as mergeProps, u as toDisplayString } from "./vendor-other-DdEHkzYa.js";
import "./vendor-vue-BIRc7P93.js";
import "./vendor-xterm-BF8peZ5_.js";
import "./vendor-three-_gcZkhit.js";
import "./vendor-tiptap-B76LFN34.js";
const _hoisted_1 = {
  class: "text-xs truncate min-w-[4ch]",
  "data-testid": "widget-color-text"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "WidgetColorPicker",
  props: {
    widget: {},
    modelValue: {}
  },
  emits: ["update:modelValue"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const format = computed(() => {
      const optionFormat = props.widget.options?.format;
      return isColorFormat(optionFormat) ? optionFormat : "hex";
    });
    const localValue = ref(
      toHexFromFormat(
        props.modelValue || "#000000",
        isColorFormat(props.widget.options?.format) ? props.widget.options.format : "hex"
      )
    );
    watch(
      () => props.modelValue,
      (newVal) => {
        localValue.value = toHexFromFormat(newVal || "#000000", format.value);
      }
    );
    function onPickerUpdate(val) {
      localValue.value = val;
      emit("update:modelValue", toHexFromFormat(val, format.value));
    }
    __name(onPickerUpdate, "onPickerUpdate");
    const COLOR_PICKER_EXCLUDED_PROPS = [...PANEL_EXCLUDED_PROPS];
    const filteredProps = computed(
      () => filterWidgetProps(props.widget.options, COLOR_PICKER_EXCLUDED_PROPS)
    );
    return (_ctx, _cache) => {
      return openBlock(), createBlock(_sfc_main$1, { widget: _ctx.widget }, {
        default: withCtx(() => [
          createBaseVNode("label", {
            class: normalizeClass(
              unref(cn)(unref(WidgetInputBaseClass), "flex items-center gap-2 w-full px-4 py-2")
            )
          }, [
            createVNode(unref(script), mergeProps({
              modelValue: localValue.value,
              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => localValue.value = $event)
            }, filteredProps.value, {
              class: "h-4 w-8 overflow-hidden !rounded-full border-none",
              "aria-label": _ctx.widget.name,
              pt: {
                preview: "!w-full !h-full !border-none"
              },
              "onUpdate:modelValue": onPickerUpdate
            }), null, 16, ["modelValue", "aria-label"]),
            createBaseVNode("span", _hoisted_1, toDisplayString(unref(toHexFromFormat)(localValue.value, format.value)), 1)
          ], 2)
        ]),
        _: 1
      }, 8, ["widget"]);
    };
  }
});
export {
  _sfc_main as default
};
//# sourceMappingURL=WidgetColorPicker-BoLiq7pp.js.map
