@progress/kendo-vue-inputs/colors/ColorInput.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 R, createVNode as t, isVNode as S } from "vue";
import { HexInput as z } from "./HexInput.mjs";
import { Button as G } from "@progress/kendo-vue-buttons";
import { Label as o } from "@progress/kendo-vue-labels";
import { provideLocalizationService as B } from "@progress/kendo-vue-intl";
import { colorGradientHex as c, messages as a, colorGradientInputColorButton as b, colorGradientR as u, colorGradientG as f, colorGradientB as m, colorGradientA as x, colorGradientRLabel as $, colorGradientGLabel as k, colorGradientBLabel as C, colorGradientALabel as I } from "../messages/main.mjs";
import { guid as T, Keys as j } from "@progress/kendo-vue-common";
import { caretAltExpandIcon as A } from "@progress/kendo-svg-icons";
import { NumericTextBox as l } from "../numerictextbox/NumericTextBox.mjs";
function r(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !S(e);
}
const s = ["rgba", "rgb", "hex"], q = /* @__PURE__ */ R({
  name: "KendoColorInput",
  emits: {
    hexchange: null,
    rgbachange: null
  },
  props: {
    tabIndex: Number,
    rgba: {
      type: Object,
      default: function() {
        return {};
      }
    },
    hex: String,
    opacity: Boolean,
    disabled: Boolean,
    size: String
  },
  inject: {
    kendoLocalizationService: {
      default: null
    }
  },
  created() {
    this.hexInputId = T();
  },
  data() {
    return {
      inputMode: s[1]
    };
  },
  mounted() {
    this.lastFocusable = this.$refs.hexinput || this.$refs.numerica || this.$refs.numericb;
  },
  updated() {
    this.lastFocusable = this.$refs.hexinput || this.$refs.numerica || this.$refs.numericb;
  },
  render() {
    const e = B(this), i = e.toLanguageString(c, a[c]), n = e.toLanguageString(b, a[b]), g = e.toLanguageString(u, a[u]), d = e.toLanguageString(f, a[f]), p = e.toLanguageString(m, a[m]), h = e.toLanguageString(x, a[x]), L = e.toLanguageString($, a[$]), v = e.toLanguageString(k, a[k]), M = e.toLanguageString(C, a[C]), y = e.toLanguageString(I, a[I]);
    return t("div", {
      class: "k-colorgradient-inputs k-hstack"
    }, [t("div", {
      class: "k-vstack"
    }, [t(G, {
      ariaLabel: n,
      tabIndex: this.tabIndex,
      type: "button",
      fillMode: "flat",
      icon: "caret-alt-expand",
      svgIcon: A,
      class: "k-colorgradient-toggle-mode k-icon-button",
      onClick: this.onToggleModeChange,
      onKeydown: this.onKeyDown,
      size: this.$props.size
    }, null)]), this.inputMode === "hex" && t("div", {
      class: "k-vstack k-flex-1"
    }, [t("span", {
      class: "k-hex-value"
    }, [t(z, {
      id: this.hexInputId,
      tabIndex: this.tabIndex,
      hex: this.$props.hex,
      onHexchange: this.onHexChange,
      disabled: this.$props.disabled,
      ref: "hexinput",
      size: this.$props.size
    }, null)]), t(o, {
      class: "k-colorgradient-input-label",
      editorId: this.hexInputId
    }, r(i) ? i : {
      default: () => [i]
    })]), (this.inputMode === "rgb" || this.inputMode === "rgba") && [t("div", {
      class: "k-vstack"
    }, [t(l, {
      inputType: "number",
      tabIndex: this.tabIndex,
      value: this.$props.rgba.r,
      min: 0,
      max: 255,
      spinners: !1,
      format: "n",
      ariaLabel: L,
      onChange: this.onRgbaRChange,
      disabled: this.$props.disabled,
      size: this.$props.size
    }, null), t(o, {
      class: "k-colorgradient-input-label"
    }, r(g) ? g : {
      default: () => [g]
    })]), t("div", {
      class: "k-vstack"
    }, [t(l, {
      inputType: "number",
      tabIndex: this.tabIndex,
      value: this.$props.rgba.g,
      min: 0,
      max: 255,
      spinners: !1,
      format: "n",
      ariaLabel: v,
      onChange: this.onRgbaGChange,
      disabled: this.$props.disabled,
      size: this.$props.size
    }, null), t(o, {
      class: "k-colorgradient-input-label"
    }, r(d) ? d : {
      default: () => [d]
    })]), t("div", {
      class: "k-vstack"
    }, [t(l, {
      inputType: "number",
      tabIndex: this.tabIndex,
      value: this.$props.rgba.b,
      min: 0,
      max: 255,
      spinners: !1,
      format: "n",
      ariaLabel: M,
      onChange: this.onRgbaBChange,
      disabled: this.$props.disabled,
      ref: "numericb",
      size: this.$props.size
    }, null), t(o, {
      class: "k-colorgradient-input-label"
    }, r(p) ? p : {
      default: () => [p]
    })])], this.inputMode === "rgba" && t("div", {
      class: "k-vstack"
    }, [this.$props.opacity && t(l, {
      inputType: "number",
      tabIndex: this.tabIndex,
      value: this.$props.rgba.a,
      min: 0,
      max: 1,
      step: 0.01,
      spinners: !1,
      format: "n2",
      ariaLabel: y,
      onChange: this.onRgbaAChange,
      disabled: this.$props.disabled,
      ref: "numerica",
      size: this.$props.size
    }, null), this.$props.opacity && t(o, {
      class: "k-colorgradient-input-label"
    }, r(h) ? h : {
      default: () => [h]
    })])]);
  },
  methods: {
    onHexChange(e) {
      this.$emit("hexchange", e.hex, e.value, e);
    },
    onRgbaRChange(e) {
      this.dispatchRgbaChange({
        r: e.value
      }, e);
    },
    onRgbaGChange(e) {
      this.dispatchRgbaChange({
        g: e.value
      }, e);
    },
    onRgbaBChange(e) {
      this.dispatchRgbaChange({
        b: e.value
      }, e);
    },
    onRgbaAChange(e) {
      this.dispatchRgbaChange({
        a: e.value
      }, e);
    },
    dispatchRgbaChange(e, i) {
      let n = {
        ...this.$props.rgba
      };
      e.r !== void 0 && (n.r = e.r), e.g !== void 0 && (n.g = e.g), e.b !== void 0 && (n.b = e.b), e.a !== void 0 && (n.a = e.a), this.$emit("rgbachange", n, i);
    },
    onToggleModeChange() {
      const e = s.length - 1 === s.indexOf(this.inputMode) ? 0 : s.indexOf(this.inputMode) + 1;
      if (this.$props.opacity)
        this.inputMode = s[e];
      else {
        const i = s[e] === "rgba" ? e + 1 : e;
        this.inputMode = s[i];
      }
    },
    onKeyDown(e) {
      e.keyCode === j.enter && e.stopPropagation();
    }
  }
});
export {
  q as ColorInput
};