@progress/kendo-vue-inputs 5.3.0-dev.202409130647 → 5.3.0-develop.1

package/colors/ColorGradient.mjs

@@ -0,0 +1,320 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 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 s } from "vue";
+import { validatePackage as $, guid as H, classNames as B, getTabIndex as V, Draggable as I, focusContainer as L, getRef as F, Keys as o, focusFirstFocusableChild as w, setRef as T } from "@progress/kendo-vue-common";
+import { packageMetadata as D } from "../package-metadata.mjs";
+import { isPresent as b, fitIntoBounds as m } from "./utils/misc.mjs";
+import { parseColor as l, getHSV as h, getRGBA as d, getColorFromHue as c, getColorFromRGBA as G, getColorFromHSV as M } from "./utils/color-parser.mjs";
+import { removeCachedColor as A } from "./utils/color-cache.mjs";
+import { ColorInput as K } from "./ColorInput.mjs";
+import { ColorContrastLabels as E } from "./ColorContrastLabels.mjs";
+import { ColorContrastSvg as W } from "./ColorContrastSvg.mjs";
+import { provideLocalizationService as O } from "@progress/kendo-vue-intl";
+import { colorGradientHueSliderLabel as v, messages as g, colorGradientAlphaSliderLabel as f, colorGradientDragHandle as C } from "../messages/main.mjs";
+import { Slider as k } from "../slider/Slider.mjs";
+const N = "rgba", x = "rgba(255, 255, 255, 1)", te = /* @__PURE__ */ R({
+  name: "KendoColorGradient",
+  model: {
+    event: "changemodel"
+  },
+  emits: {
+    change: null,
+    focus: null,
+    blur: null,
+    changemodel: null,
+    "update:modelValue": null,
+    "update:modelRgbaValue": null,
+    keydown: null
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  props: {
+    modelValue: String,
+    modelRgbaValue: String,
+    defaultValue: String,
+    value: String,
+    opacity: {
+      type: Boolean,
+      default: !0
+    },
+    backgroundColor: String,
+    disabled: Boolean,
+    id: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String,
+    tabIndex: Number,
+    innerTabIndex: {
+      type: Number,
+      default: void 0
+    }
+  },
+  created() {
+    $(D), this.guid = H();
+  },
+  computed: {
+    valueSet() {
+      return this.value || this.modelValue || this.modelRgbaValue;
+    },
+    computedValue() {
+      let e = this.valueSet || this.currentValue || this.defaultValue || l(x, N);
+      return b(l(e, "hex", this.opacity)) || (e = x), e;
+    },
+    hsva() {
+      return this.valueSet ? h(this.computedValue) : this.currentHsva || h(this.computedValue);
+    },
+    rgba() {
+      return this.valueSet ? d(this.computedValue) : this.currentRgba;
+    },
+    hex() {
+      return this.valueSet ? l(this.computedValue, "hex", this.opacity) : this.currentHex;
+    },
+    computedBgColor() {
+      return this.currentBgColor || c(this.hsva.h);
+    },
+    computedTabIndex() {
+      return this.innerTabIndex !== void 0 ? this.innerTabIndex : this.focused ? 0 : -1;
+    }
+  },
+  data() {
+    return {
+      currentValue: void 0,
+      currentBgColor: void 0,
+      isFirstRender: !0,
+      currentHsva: void 0,
+      currentRgba: void 0,
+      currentHex: void 0,
+      focused: !1
+    };
+  },
+  mounted() {
+    this.setAlphaSliderBackground(this.computedBgColor), this.$el && (this.draggable = this.$refs.draggable, this.gradientWrapper = this.draggable && this.draggable.element), this.alphaSlider = this.alphaSliderRef, this.isFirstRender && (this.isFirstRender = !1);
+  },
+  destroyed() {
+    A(this.guid);
+  },
+  updated() {
+    this.setAlphaSliderBackground(this.computedBgColor);
+  },
+  render() {
+    const e = B("k-colorgradient", {
+      "k-disabled": this.$props.disabled
+    }), t = O(this), a = t.toLanguageString(v, g[v]), i = t.toLanguageString(f, g[f]), r = t.toLanguageString(C, g[C]), u = function() {
+      let n = {};
+      if (!this.isFirstRender) {
+        const p = this.getGradientRectMetrics(), S = (1 - this.hsva.v) * p.height, y = this.hsva.s * p.width;
+        n.top = `${S}px`, n.left = `${y}px`;
+      }
+      return s("div", {
+        class: "k-hsv-draghandle k-draghandle",
+        role: "slider",
+        "aria-orientation": void 0,
+        "aria-label": r + `${this.value || "none"}`,
+        "aria-valuenow": Math.round(this.hsva.s * 100),
+        "aria-valuetext": `
+                    saturation: ${Math.round(this.hsva.s * 100)}%,
+                    value: ${Math.round(this.hsva.v * 100)}%`,
+        tabindex: this.computedTabIndex,
+        onKeydown: this.dragKeyDown,
+        style: n,
+        ref: T(this, "draghandle")
+      }, null);
+    };
+    return s("div", {
+      id: this.$props.id,
+      class: e,
+      role: this.$props.tabIndex !== -1 ? "textbox" : void 0,
+      "aria-disabled": this.$props.disabled,
+      tabindex: V(this.$props.tabIndex, this.$props.disabled),
+      "aria-labelledby": this.$props.ariaLabelledBy,
+      "aria-describedby": this.$props.ariaDescribedBy,
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+      onKeydown: this.onKeyDownHandler
+    }, [s("div", {
+      class: "k-colorgradient-canvas k-hstack"
+    }, [s("div", {
+      class: "k-hsv-rectangle",
+      style: {
+        background: this.computedBgColor
+      }
+    }, [s(I, {
+      onDrag: this.onDrag,
+      onRelease: this.onRelease,
+      ref: "draggable"
+    }, {
+      default: () => [s("div", {
+        class: "k-hsv-gradient",
+        style: {
+          touchAction: "none"
+        },
+        tabindex: -1,
+        onClick: this.onGradientWrapperClick
+      }, [u.call(this)])]
+    }), this.backgroundColor && !this.isFirstRender && s(W, {
+      metrics: this.gradientWrapper ? this.getGradientRectMetrics() : void 0,
+      hsva: this.hsva,
+      backgroundColor: this.backgroundColor
+    }, null)]), s("div", {
+      class: "k-hsv-controls k-hstack"
+    }, [s(k, {
+      tabIndex: this.computedTabIndex,
+      value: this.hsva.h,
+      buttons: !1,
+      vertical: !0,
+      min: 0,
+      max: 360,
+      step: 5,
+      onChange: this.onHueSliderChange,
+      class: "k-hue-slider k-colorgradient-slider",
+      disabled: this.$props.disabled,
+      ariaLabel: a
+    }, null), this.$props.opacity && s(k, {
+      tabIndex: this.computedTabIndex,
+      value: b(this.hsva.a) ? this.hsva.a * 100 : 100,
+      buttons: !1,
+      vertical: !0,
+      min: 0,
+      max: 100,
+      step: 1,
+      onChange: this.onAlphaSliderChange,
+      class: "k-alpha-slider k-colorgradient-slider",
+      disabled: this.$props.disabled,
+      ariaLabel: i,
+      ref: (n) => {
+        this.alphaSliderRef = n;
+      }
+    }, null)])]), s(K, {
+      tabIndex: this.computedTabIndex,
+      rgba: this.rgba,
+      onRgbachange: this.onRgbaChange,
+      hex: this.hex,
+      onHexchange: this.onHexChange,
+      opacity: this.$props.opacity,
+      disabled: this.$props.disabled,
+      ref: "colorInput"
+    }, null), this.backgroundColor && s(E, {
+      bgColor: d(this.backgroundColor),
+      rgba: this.rgba
+    }, null)]);
+  },
+  methods: {
+    onKeyDownHandler(e) {
+      const t = this.$el;
+      this.innerTabIndex === void 0 && (this.focused = L(e, t)), this.$emit("keydown", e);
+    },
+    onHexChange(e, t, a) {
+      const i = d(t), r = h(t);
+      this.currentHsva = r, this.currentBgColor = c(r.h), this.currentRgba = i, this.currentHex = e, this.dispatchChangeEvent(t, a.event, e, t);
+    },
+    onRgbaChange(e, t) {
+      const a = G(e), i = l(a, "hex", this.opacity), r = h(a);
+      this.currentHsva = r, this.currentBgColor = c(r.h), this.currentRgba = e, this.currentHex = i, this.dispatchChangeEvent(a, t.event, i, a);
+    },
+    onAlphaSliderChange(e) {
+      this.handleHsvaChange(Object.assign({}, this.hsva, {
+        a: e.value / 100
+      }), e.event);
+    },
+    onHueSliderChange(e) {
+      this.handleHsvaChange(Object.assign({}, this.hsva, {
+        h: e.value
+      }), e.event);
+    },
+    onDrag(e) {
+      this.gradientWrapper.classList.add("k-dragging"), this.changePosition(e);
+    },
+    onRelease() {
+      this.gradientWrapper.classList.remove("k-dragging");
+    },
+    onGradientWrapperClick(e) {
+      this.firstFocusable = F(this, "draghandle"), this.firstFocusable && this.firstFocusable.focus(), this.changePosition(e);
+    },
+    move(e, t, a) {
+      const i = this.hsva;
+      i[t] += a * (e.shiftKey ? 0.01 : 0.05), i[t] < 0 && (i[t] = 0), i[t] > 1 && (i[t] = 1), e.preventDefault(), this.handleHsvaChange(i, e);
+    },
+    dragKeyDown(e) {
+      switch (e.keyCode) {
+        case o.left:
+          this.move(e, "s", -1);
+          break;
+        case o.right:
+          this.move(e, "s", 1);
+          break;
+        case o.up:
+          this.move(e, "v", 1);
+          break;
+        case o.down:
+          this.move(e, "v", -1);
+          break;
+        case o.enter:
+          break;
+        case o.esc:
+          break;
+      }
+    },
+    changePosition(e) {
+      const t = this.getGradientRectMetrics(), a = e.clientX - t.left, i = e.clientY - t.top, r = m(a, 0, t.width), u = m(i, 0, t.height), n = Object.assign({}, this.hsva, {
+        s: r / t.width,
+        v: 1 - u / t.height
+      });
+      this.handleHsvaChange(n, e, e.event);
+    },
+    handleHsvaChange(e, t) {
+      const a = M(e), i = l(a, "hex", this.opacity), r = l(a, "rgba");
+      this.currentHsva = e, this.currentBgColor = c(e.h), this.currentRgba = d(a), this.currentHex = i, this.dispatchChangeEvent(a, t, i, r);
+    },
+    dispatchChangeEvent(e, t, a, i) {
+      this.currentValue = e, this.$emit("changemodel", a), this.$emit("update:modelRgbaValue", i), this.$emit("update:modelValue", a), this.$emit("change", {
+        event: t,
+        target: this,
+        value: a,
+        rgbaValue: i
+      });
+    },
+    onFocus(e) {
+      this.$emit("focus", {
+        event: e,
+        target: this
+      });
+    },
+    onBlur(e) {
+      this.$emit("blur", {
+        event: e,
+        target: this
+      });
+    },
+    setAlphaSliderBackground(e) {
+      this.$props.opacity && this.alphaSlider && this.alphaSlider.sliderTrack && (this.alphaSlider.sliderTrack.style.background = `linear-gradient(to top, transparent, ${e})`);
+    },
+    getGradientRectMetrics() {
+      const e = this.gradientWrapper.getBoundingClientRect();
+      return {
+        top: e.top,
+        right: e.right,
+        bottom: e.bottom,
+        left: e.left,
+        width: e.width,
+        height: e.height,
+        x: e.x,
+        y: e.y
+      };
+    },
+    focus() {
+      this.focused = !0, setTimeout(() => {
+        w(this.$el);
+      }, 1);
+    }
+  }
+});
+export {
+  te as ColorGradient
+};

package/colors/ColorInput.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),f=require("./HexInput.js"),L=require("@progress/kendo-vue-buttons"),i=require("@progress/kendo-vue-labels"),k=require("@progress/kendo-vue-intl"),a=require("../messages/main.js"),b=require("@progress/kendo-vue-common"),I=require("@progress/kendo-svg-icons"),d=require("../numerictextbox/NumericTextBox.js");function r(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const s=["rgba","rgb","hex"],C=t.defineComponent({name:"KendoColorInput",emits:{hexchange:null,rgbachange:null},props:{tabIndex:Number,rgba:{type:Object,default:function(){return{}}},hex:String,opacity:Boolean,disabled:Boolean},inject:{kendoLocalizationService:{default:null}},created(){this.hexInputId=b.guid()},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=k.provideLocalizationService(this),n=e.toLanguageString(a.colorGradientHex,a.messages[a.colorGradientHex]),o=e.toLanguageString(a.colorGradientInputColorButton,a.messages[a.colorGradientInputColorButton]),l=e.toLanguageString(a.colorGradientR,a.messages[a.colorGradientR]),c=e.toLanguageString(a.colorGradientG,a.messages[a.colorGradientG]),g=e.toLanguageString(a.colorGradientB,a.messages[a.colorGradientB]),u=e.toLanguageString(a.colorGradientA,a.messages[a.colorGradientA]),h=e.toLanguageString(a.colorGradientRLabel,a.messages[a.colorGradientRLabel]),p=e.toLanguageString(a.colorGradientGLabel,a.messages[a.colorGradientGLabel]),x=e.toLanguageString(a.colorGradientBLabel,a.messages[a.colorGradientBLabel]),m=e.toLanguageString(a.colorGradientALabel,a.messages[a.colorGradientALabel]);return t.createVNode("div",{class:"k-colorgradient-inputs k-hstack"},[t.createVNode("div",{class:"k-vstack"},[t.createVNode(L.Button,{ariaLabel:o,tabIndex:this.tabIndex,type:"button",fillMode:"flat",icon:"caret-alt-expand",svgIcon:I.caretAltExpandIcon,class:"k-colorgradient-toggle-mode k-icon-button",onClick:this.onToggleModeChange,onKeydown:this.onKeyDown},null)]),this.inputMode==="hex"&&t.createVNode("div",{class:"k-vstack k-flex-1"},[t.createVNode("span",{class:"k-hex-value"},[t.createVNode(f.HexInput,{id:this.hexInputId,tabIndex:this.tabIndex,hex:this.$props.hex,onHexchange:this.onHexChange,disabled:this.$props.disabled,ref:"hexinput"},null)]),t.createVNode(i.Label,{class:"k-colorgradient-input-label",editorId:this.hexInputId},r(n)?n:{default:()=>[n]})]),(this.inputMode==="rgb"||this.inputMode==="rgba")&&[t.createVNode("div",{class:"k-vstack"},[t.createVNode(d.NumericTextBox,{inputType:"number",tabIndex:this.tabIndex,value:this.$props.rgba.r,min:0,max:255,spinners:!1,format:"n",ariaLabel:h,onChange:this.onRgbaRChange,disabled:this.$props.disabled},null),t.createVNode(i.Label,{class:"k-colorgradient-input-label"},r(l)?l:{default:()=>[l]})]),t.createVNode("div",{class:"k-vstack"},[t.createVNode(d.NumericTextBox,{inputType:"number",tabIndex:this.tabIndex,value:this.$props.rgba.g,min:0,max:255,spinners:!1,format:"n",ariaLabel:p,onChange:this.onRgbaGChange,disabled:this.$props.disabled},null),t.createVNode(i.Label,{class:"k-colorgradient-input-label"},r(c)?c:{default:()=>[c]})]),t.createVNode("div",{class:"k-vstack"},[t.createVNode(d.NumericTextBox,{inputType:"number",tabIndex:this.tabIndex,value:this.$props.rgba.b,min:0,max:255,spinners:!1,format:"n",ariaLabel:x,onChange:this.onRgbaBChange,disabled:this.$props.disabled,ref:"numericb"},null),t.createVNode(i.Label,{class:"k-colorgradient-input-label"},r(g)?g:{default:()=>[g]})])],this.inputMode==="rgba"&&t.createVNode("div",{class:"k-vstack"},[this.$props.opacity&&t.createVNode(d.NumericTextBox,{inputType:"number",tabIndex:this.tabIndex,value:this.$props.rgba.a,min:0,max:1,step:.01,spinners:!1,format:"n2",ariaLabel:m,onChange:this.onRgbaAChange,disabled:this.$props.disabled,ref:"numerica"},null),this.$props.opacity&&t.createVNode(i.Label,{class:"k-colorgradient-input-label"},r(u)?u:{default:()=>[u]})])])},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,n){let o={...this.$props.rgba};e.r!==void 0&&(o.r=e.r),e.g!==void 0&&(o.g=e.g),e.b!==void 0&&(o.b=e.b),e.a!==void 0&&(o.a=e.a),this.$emit("rgbachange",o,n)},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 n=s[e]==="rgba"?e+1:e;this.inputMode=s[n]}},onKeyDown(e){e.keyCode===b.Keys.enter&&e.stopPropagation()}}});exports.ColorInput=C;

package/colors/ColorInput.mjs

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

package/colors/ColorPalette.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("vue"),T=require("./utils/color-palette.service.js"),t=require("@progress/kendo-vue-common"),P=require("../package-metadata.js"),R=require("./models/palette-presets.js"),I=require("./utils/misc.js"),L=require("./utils/color-parser.js"),C=24,p=10,b="office",U=l.defineComponent({name:"KendoColorPalette",model:{event:"changemodel"},emits:{keydown:null,focus:null,blur:null,changemodel:null,"update:modelValue":null,"update:modelRgbaValue":null,change:null},props:{palette:{type:[String,Array],default:b},columns:Number,tileSize:{type:[Number,Object],default:C},modelValue:String,modelRgbaValue:String,defaultValue:String,value:String,disabled:Boolean,tabIndex:Number,id:String,ariaLabelledBy:String,ariaDescribedBy:String},created(){t.validatePackage(P.packageMetadata),this.guid=t.guid()},mounted(){this.wrapper=t.getRef(this,"wrapper")},updated(){this.wrapper=t.getRef(this,"wrapper")},computed:{focusedColorCooridanates(){return this.focusedColor?this.paletteService.getCellCoordsFor(this.focusedColor):void 0},isUncontrolled(){return this.$props.value===void 0},selectedColor(){return this.$props.value!==void 0?this.$props.value:this.modelValue!==void 0?this.modelValue:this.modelRgbaValue!==void 0?this.modelRgbaValue:this.currentValue!==void 0?this.currentValue:this.$props.defaultValue}},data(){return{focusedColor:this.$props.value,currentValue:void 0}},render(){const e=this.getPaletteInfo(),s=this.paletteService=new T.ColorPaletteService;s.setColorMatrix(e.colors,e.columns);const o=s.getCellCoordsFor(this.selectedColor),a=s.getCellCoordsFor(this.focusedColor),$=t.classNames("k-colorpalette",{"k-disabled":this.$props.disabled}),S=function(u,n,r,i){const d=r!==void 0&&r.row===n,y=r&&r.col,k=i!==void 0&&i.row===n,V=i&&i.col,f=typeof this.$props.tileSize!="number"?this.$props.tileSize:{width:this.$props.tileSize,height:this.$props.tileSize},g=f.width+"px",E=f.height+"px";return u.map(function(h,c){const m=d&&y===c,N=t.classNames("k-colorpalette-tile",{"k-selected":m,"k-focus":k&&V===c});return l.createVNode("td",{class:N,"aria-label":h,"aria-selected":m?!0:this.$props.disabled?void 0:!1,style:{backgroundColor:h,width:g,height:E,minWidth:g},onClick:v=>this.onColorClick(h,v),id:this.createCellId({row:n,col:c}),key:c,role:"gridcell"},null)},this)},w=function(u,n,r){return u.map(function(i,d){return l.createVNode("tr",{role:"row",key:d},[S.call(this,i,d,n,r)])},this)};return e.colors.length?l.createVNode("div",{id:this.$props.id,class:$,onFocusin:this.onFocus,onFocusout:this.onBlur,onKeydown:this.onKeyDown,"aria-disabled":this.$props.disabled?"true":void 0,"aria-activedescendant":a&&this.createCellId(a),"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,role:"grid",tabindex:t.getTabIndex(this.$props.tabIndex,this.$props.disabled),ref:t.setRef(this,"wrapper")},[l.createVNode("table",{class:"k-colorpalette-table k-palette",role:"presentation"},[l.createVNode("tbody",null,[w.call(this,s.colorRows,o,a)])])]):""},methods:{focus(){this.wrapper&&this.wrapper.focus()},onKeyDown(e){switch(e.keyCode){case t.Keys.down:this.handleCellNavigation(e,0,1);break;case t.Keys.up:this.handleCellNavigation(e,0,-1);break;case t.Keys.right:this.handleCellNavigation(e,1,0);break;case t.Keys.left:this.handleCellNavigation(e,-1,0);break;case t.Keys.enter:this.handleEnter(e);break;default:this.$emit("keydown",e);return}this.$emit("keydown",e)},onColorClick(e,s){this.isUncontrolled?(this.currentValue=e,this.focusedColor=e):this.focusedColor=e,this.dispatchChangeEvent(e,s)},onFocus(e){this.focusedColor=this.selectedColor||this.paletteService.colorRows[0][0],this.$emit("focus",{event:e,target:this})},onBlur(e){this.focusedColor=void 0,this.$emit("blur",{event:e,target:this})},handleCellNavigation(e,s,o){if(e.preventDefault(),this.focusedColorCooridanates){const a=this.paletteService.getNextCell(this.focusedColorCooridanates,s,o);this.focusedColor=this.paletteService.getColorAt(a)}else this.focusedColor=this.paletteService.colorRows[0][0]},handleEnter(e){this.isUncontrolled&&(this.currentValue=this.focusedColor),this.dispatchChangeEvent(this.focusedColor,e)},dispatchChangeEvent(e,s){const o=L.parseColor(e,"rgba");this.$emit("changemodel",e),this.$emit("update:modelValue",e),this.$emit("update:modelRgbaValue",o),this.$emit("change",{event:s,component:this,value:e,rgbaValue:o})},getPaletteInfo(){if(typeof this.$props.palette=="string"){const e=R.PALETTEPRESETS[this.$props.palette];return I.isPresent(e)?{colors:e.colors,columns:this.$props.columns||e.columns||p}:{colors:[],columns:0}}else return{colors:this.$props.palette||[],columns:this.$props.columns||p}},createCellId(e){return`${this.guid}_${e.row}_${e.col}`}}});exports.ColorPalette=U;exports.DEFAULT_COLUMNS_COUNT=p;exports.DEFAULT_PRESET=b;exports.DEFAULT_TILE_SIZE=C;