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

package/colors/ColorPalette.mjs

@@ -0,0 +1,222 @@
+/**
+ * @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 } from "vue";
+import { ColorPaletteService as I } from "./utils/color-palette.service.mjs";
+import { validatePackage as P, guid as T, getRef as g, classNames as C, getTabIndex as D, setRef as F, Keys as n } from "@progress/kendo-vue-common";
+import { packageMetadata as L } from "../package-metadata.mjs";
+import { PALETTEPRESETS as U } from "./models/palette-presets.mjs";
+import { isPresent as x } from "./utils/misc.mjs";
+import { parseColor as B } from "./utils/color-parser.mjs";
+const _ = 24, b = 10, z = "office", q = /* @__PURE__ */ R({
+  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: z
+    },
+    columns: Number,
+    tileSize: {
+      type: [Number, Object],
+      default: _
+    },
+    modelValue: String,
+    modelRgbaValue: String,
+    defaultValue: String,
+    value: String,
+    disabled: Boolean,
+    tabIndex: Number,
+    id: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String
+  },
+  created() {
+    P(L), this.guid = T();
+  },
+  mounted() {
+    this.wrapper = g(this, "wrapper");
+  },
+  updated() {
+    this.wrapper = g(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(), t = this.paletteService = new I();
+    t.setColorMatrix(e.colors, e.columns);
+    const o = t.getCellCoordsFor(this.selectedColor), l = t.getCellCoordsFor(this.focusedColor), $ = C("k-colorpalette", {
+      "k-disabled": this.$props.disabled
+    }), w = function(c, r, s, i) {
+      const d = s !== void 0 && s.row === r, k = s && s.col, y = i !== void 0 && i.row === r, V = i && i.col, p = typeof this.$props.tileSize != "number" ? this.$props.tileSize : {
+        width: this.$props.tileSize,
+        height: this.$props.tileSize
+      }, f = p.width + "px", v = p.height + "px";
+      return c.map(function(h, u) {
+        const m = d && k === u, E = C("k-colorpalette-tile", {
+          "k-selected": m,
+          "k-focus": y && V === u
+        });
+        return a("td", {
+          class: E,
+          "aria-label": h,
+          "aria-selected": m ? !0 : this.$props.disabled ? void 0 : !1,
+          style: {
+            backgroundColor: h,
+            width: f,
+            height: v,
+            minWidth: f
+          },
+          onClick: (N) => this.onColorClick(h, N),
+          id: this.createCellId({
+            row: r,
+            col: u
+          }),
+          key: u,
+          role: "gridcell"
+        }, null);
+      }, this);
+    }, S = function(c, r, s) {
+      return c.map(function(i, d) {
+        return a("tr", {
+          role: "row",
+          key: d
+        }, [w.call(this, i, d, r, s)]);
+      }, this);
+    };
+    return e.colors.length ? a("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": l && this.createCellId(l),
+      "aria-labelledby": this.$props.ariaLabelledBy,
+      "aria-describedby": this.$props.ariaDescribedBy,
+      role: "grid",
+      tabindex: D(this.$props.tabIndex, this.$props.disabled),
+      ref: F(this, "wrapper")
+    }, [a("table", {
+      class: "k-colorpalette-table k-palette",
+      role: "presentation"
+    }, [a("tbody", null, [S.call(this, t.colorRows, o, l)])])]) : "";
+  },
+  methods: {
+    focus() {
+      this.wrapper && this.wrapper.focus();
+    },
+    onKeyDown(e) {
+      switch (e.keyCode) {
+        case n.down:
+          this.handleCellNavigation(e, 0, 1);
+          break;
+        case n.up:
+          this.handleCellNavigation(e, 0, -1);
+          break;
+        case n.right:
+          this.handleCellNavigation(e, 1, 0);
+          break;
+        case n.left:
+          this.handleCellNavigation(e, -1, 0);
+          break;
+        case n.enter:
+          this.handleEnter(e);
+          break;
+        default:
+          this.$emit("keydown", e);
+          return;
+      }
+      this.$emit("keydown", e);
+    },
+    onColorClick(e, t) {
+      this.isUncontrolled ? (this.currentValue = e, this.focusedColor = e) : this.focusedColor = e, this.dispatchChangeEvent(e, t);
+    },
+    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, t, o) {
+      if (e.preventDefault(), this.focusedColorCooridanates) {
+        const l = this.paletteService.getNextCell(this.focusedColorCooridanates, t, o);
+        this.focusedColor = this.paletteService.getColorAt(l);
+      } else
+        this.focusedColor = this.paletteService.colorRows[0][0];
+    },
+    handleEnter(e) {
+      this.isUncontrolled && (this.currentValue = this.focusedColor), this.dispatchChangeEvent(this.focusedColor, e);
+    },
+    dispatchChangeEvent(e, t) {
+      const o = B(e, "rgba");
+      this.$emit("changemodel", e), this.$emit("update:modelValue", e), this.$emit("update:modelRgbaValue", o), this.$emit("change", {
+        event: t,
+        component: this,
+        value: e,
+        rgbaValue: o
+      });
+    },
+    getPaletteInfo() {
+      if (typeof this.$props.palette == "string") {
+        const e = U[this.$props.palette];
+        return x(e) ? {
+          colors: e.colors,
+          columns: this.$props.columns || e.columns || b
+        } : {
+          colors: [],
+          columns: 0
+        };
+      } else
+        return {
+          colors: this.$props.palette || [],
+          columns: this.$props.columns || b
+        };
+    },
+    createCellId(e) {
+      return `${this.guid}_${e.row}_${e.col}`;
+    }
+  }
+});
+export {
+  q as ColorPalette,
+  b as DEFAULT_COLUMNS_COUNT,
+  z as DEFAULT_PRESET,
+  _ as DEFAULT_TILE_SIZE
+};

package/colors/ColorPicker.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 n=require("vue"),k=require("@progress/kendo-vue-buttons"),t=require("@progress/kendo-vue-common"),V=require("../package-metadata.js"),y=require("./Picker.js"),C=require("./FlatColorPicker.js"),r=require("./utils/color-cache.js"),S=require("@progress/kendo-vue-intl"),l=require("../messages/main.js"),v=require("@progress/kendo-svg-icons");function w(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!n.isVNode(e)}const $=n.defineComponent({name:"KendoColorPicker",model:{event:"changemodel"},emits:{open:null,close:null,changemodel:null,"update:modelValue":null,"update:modelRgbaValue":null,activecolorclick:null,focus:null,blur:null,change:null,viewchange:null},props:{modelValue:String,modelRgbaValue:String,value:{type:String,default:void 0},defaultValue:String,disabled:Boolean,dir:String,id:String,ariaLabelledBy:String,ariaDescribedBy:String,showClearButton:{type:Boolean,default:!0},showPreview:{type:Boolean,default:!0},showButtons:{type:Boolean,default:!0},paletteSettings:{type:Object,default:function(){return r.DEFAULT_PALETTE_SETTINGS}},valid:{type:Boolean,default:!0},tabIndex:{type:Number,default:0},title:String,icon:String,svgIcon:Object,iconClassName:String,popupSettings:{type:Object,default:function(){return{}}},gradientSettings:{type:Object,default:function(){return r.DEFAULT_GRADIENT_SETTINGS}},flatColorPickerSettings:{type:Object,default:function(){return{}}},open:{type:Boolean,default:void 0},size:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large"].includes(e)}},rounded:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large","full"].includes(e)}},fillMode:{type:String,default:"solid",validator:function(e){return[null,"solid","flat","outline"].includes(e)}},view:{type:String,default:"combo",validator:function(e){return["gradient","palette","combo"].includes(e)}},selectedView:{type:Number,default:void 0}},inject:{kendoLocalizationService:{default:null}},data(){return{focused:!1,currentValue:this.$props.defaultValue,currentOpen:!1}},computed:{isValueControlled(){return this.$props.value!==void 0},isOpenControlled(){return this.$props.open!==void 0},computedValue(){return this.isValueControlled?this.$props.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.$props.modelRgbaValue!==void 0?this.$props.modelRgbaValue:this.currentValue!==void 0?this.currentValue:this.defaultValue},computedOpen(){return this.isOpenControlled?this.$props.open:this.currentOpen},wrapperClassName(){const{size:e,fillMode:i,rounded:o}=this.$props;return{"k-picker":!0,"k-colorpicker":!0,"k-icon-picker":!0,[`k-picker-${t.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-picker-${i}`]:i,[`k-rounded-${t.kendoThemeMaps.roundedMap[o]||o}`]:o,"k-invalid":!this.valid,"k-disabled":this.disabled,"k-focus":this.focused}}},created(){t.validatePackage(V.packageMetadata),this._popupId="popup"+t.guid(),this.focusableElementGuid=t.guid()},mounted(){this.button=t.getRef(this,"button")},render(){let e;const o=S.provideLocalizationService(this).toLanguageString(l.colorPickerDropdownButtonAriaLabel,l.messages[l.colorPickerDropdownButtonAriaLabel]),{disabled:a,tabIndex:u,dir:s,view:c,selectedView:d,showClearButton:p,showPreview:h,showButtons:f,popupSettings:m}=this.$props,g=function(){return n.h(C.FlatColorPicker,{onKeydown:this.onKeyDownHandler,ref:t.setRef(this,"flatcolorpicker"),view:c,selectedView:d,showClearButton:p,showPreview:h,showButtons:f,value:this.computedValue||void 0,onChange:this.onFlatChangeHandler,onFocusout:this.onBlurHandler,onViewchange:this.onViewChange,paletteSettings:this.paletteSettings,gradientSettings:this.gradientSettings,...this.flatColorPickerSettings})};return n.createVNode("span",{class:this.wrapperClassName,role:"combobox",dir:s,id:this.$props.id,"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,"aria-disabled":this.$props.disabled,"aria-haspopup":"dialog","aria-expanded":this.computedOpen,ref:this.focusableElementGuid,tabindex:t.getTabIndex(u,a),title:this.$props.title,onKeydown:this.onButtonKeyDown,onFocusin:this.onFocusHandler,onFocusout:this.onButtonBlur},[n.createVNode("span",{onClick:this.onActiveColorClickHandler,class:"k-input-inner"},[n.createVNode("span",{class:t.classNames("k-value-icon","k-color-preview",{"k-no-color":!this.computedValue,"k-icon-color-preview":this.icon||this.iconClassName})},[(this.iconClassName||this.icon||this.svgIcon)&&n.createVNode(t.Icon,{class:t.classNames("k-color-preview-icon",this.iconClassName),name:t.getIconName(this.icon),icon:this.svgIcon},null),n.createVNode("span",{class:"k-color-preview-mask",style:{backgroundColor:this.computedValue}},null)])]),n.createVNode(k.Button,{type:"button",tabIndex:-1,ref:b=>{this.buttonRef=b},onClick:this.onClickHandler,rounded:null,class:"k-input-button",icon:"caret-alt-down",svgIcon:v.caretAltDownIcon,"aria-label":o},null),n.createVNode(y.Picker,{dir:s,id:this._popupId,open:this.computedOpen,onOpen:this.onOpenHandler,popupAnchor:this.focusableElementGuid,popupSettings:{...m}},w(e=g.call(this))?e:{default:()=>[e]})])},methods:{focusElement(){this.$el&&this.$el.focus()},setOpen(e,i){!e&&!i&&this.$el&&this.$el.focus(),this.currentOpen=e,this.$emit(e?"open":"close")},onButtonKeyDown(e){const{altKey:i,keyCode:o}=e;if(o===t.Keys.esc){e.preventDefault(),e.stopPropagation(),this.setOpen(!1);return}if(o===t.Keys.enter){e.preventDefault(),e.stopPropagation(),this.setOpen(!this.computedOpen);return}i&&o===t.Keys.down&&(e.preventDefault(),e.stopPropagation(),this.setOpen(!0))},onKeyDownHandler(e){const{altKey:i,keyCode:o}=e;if(o===t.Keys.esc){e.preventDefault(),e.stopPropagation(),this.setOpen(!1);return}if(o===t.Keys.enter){e.preventDefault(),e.stopPropagation(),this.focusElement();return}i&&o===t.Keys.up&&(e.preventDefault(),e.stopPropagation(),this.setOpen(!1),this.focusElement())},onOpenHandler(){const e=t.getRef(this,"flatcolorpicker");e&&e.focus()},onClickHandler(){this.setOpen(!this.computedOpen,!0)},onActiveColorClickHandler(e){this.$emit("activecolorclick",{event:e,value:this.computedValue})},isViewFocused(){return!!(document.activeElement&&document.activeElement.closest(`#${this._popupId}`))},onButtonBlur(e){this.focused=this.isViewFocused(),this.$emit("blur",{event:e})},onFocusHandler(e){this.blurTimeoutRef?(clearTimeout(this.blurTimeoutRef),this.blurTimeoutRef=void 0,e.target===this.$el&&this.setOpen(!1)):this.focused=!0,this.$emit("focus",{event:e})},onBlurTimeout(){const e=this.isViewFocused();e||this.setOpen(!1,!0),this.focused=e,this.blurTimeoutRef=void 0},onBlurHandler(){clearTimeout(this.blurTimeoutRef),this.palette=t.getRef(this,"palette"),this.gradient=t.getRef(this,"gradient"),this.blurTimeoutRef=setTimeout(this.onBlurTimeout,200)},onViewChange(e){this.$emit("viewchange",e)},onChangeHandler(e,i){const o=e.value;this.isValueControlled||(this.currentValue=o),i&&this.setOpen(!1),this.$emit("changemodel",o),this.$emit("update:modelRgbaValue",e.rgbaValue),this.$emit("update:modelValue",o),this.$emit("change",{value:o,rgbaValue:e.rgbaValue,event:e})},onFlatChangeHandler(e){this.onChangeHandler(e,!0)}}});exports.ColorPicker=$;

package/colors/ColorPicker.mjs

@@ -0,0 +1,362 @@
+/**
+ * @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 w, createVNode as o, isVNode as y, h as S } from "vue";
+import { Button as v } from "@progress/kendo-vue-buttons";
+import { kendoThemeMaps as r, validatePackage as $, guid as a, getRef as l, getTabIndex as O, classNames as u, Icon as B, getIconName as T, Keys as n, setRef as P } from "@progress/kendo-vue-common";
+import { packageMetadata as I } from "../package-metadata.mjs";
+import { Picker as D } from "./Picker.mjs";
+import { FlatColorPicker as H } from "./FlatColorPicker.mjs";
+import { DEFAULT_PALETTE_SETTINGS as E, DEFAULT_GRADIENT_SETTINGS as F } from "./utils/color-cache.mjs";
+import { provideLocalizationService as N } from "@progress/kendo-vue-intl";
+import { colorPickerDropdownButtonAriaLabel as d, messages as R } from "../messages/main.mjs";
+import { caretAltDownIcon as K } from "@progress/kendo-svg-icons";
+function L(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !y(e);
+}
+const Q = /* @__PURE__ */ w({
+  name: "KendoColorPicker",
+  model: {
+    event: "changemodel"
+  },
+  emits: {
+    open: null,
+    close: null,
+    changemodel: null,
+    "update:modelValue": null,
+    "update:modelRgbaValue": null,
+    activecolorclick: null,
+    focus: null,
+    blur: null,
+    change: null,
+    viewchange: null
+  },
+  props: {
+    modelValue: String,
+    modelRgbaValue: String,
+    value: {
+      type: String,
+      default: void 0
+    },
+    defaultValue: String,
+    disabled: Boolean,
+    dir: String,
+    id: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String,
+    showClearButton: {
+      type: Boolean,
+      default: !0
+    },
+    showPreview: {
+      type: Boolean,
+      default: !0
+    },
+    showButtons: {
+      type: Boolean,
+      default: !0
+    },
+    paletteSettings: {
+      type: Object,
+      default: function() {
+        return E;
+      }
+    },
+    valid: {
+      type: Boolean,
+      default: !0
+    },
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    title: String,
+    icon: String,
+    svgIcon: Object,
+    iconClassName: String,
+    popupSettings: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    },
+    gradientSettings: {
+      type: Object,
+      default: function() {
+        return F;
+      }
+    },
+    flatColorPickerSettings: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    },
+    open: {
+      type: Boolean,
+      default: void 0
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: function(e) {
+        return [null, "small", "medium", "large"].includes(e);
+      }
+    },
+    rounded: {
+      type: String,
+      default: "medium",
+      validator: function(e) {
+        return [null, "small", "medium", "large", "full"].includes(e);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: "solid",
+      validator: function(e) {
+        return [null, "solid", "flat", "outline"].includes(e);
+      }
+    },
+    view: {
+      type: String,
+      default: "combo",
+      validator: function(e) {
+        return ["gradient", "palette", "combo"].includes(e);
+      }
+    },
+    selectedView: {
+      type: Number,
+      default: void 0
+    }
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  data() {
+    return {
+      focused: !1,
+      currentValue: this.$props.defaultValue,
+      currentOpen: !1
+    };
+  },
+  computed: {
+    isValueControlled() {
+      return this.$props.value !== void 0;
+    },
+    isOpenControlled() {
+      return this.$props.open !== void 0;
+    },
+    computedValue() {
+      return this.isValueControlled ? this.$props.value : this.$props.modelValue !== void 0 ? this.$props.modelValue : this.$props.modelRgbaValue !== void 0 ? this.$props.modelRgbaValue : this.currentValue !== void 0 ? this.currentValue : this.defaultValue;
+    },
+    computedOpen() {
+      return this.isOpenControlled ? this.$props.open : this.currentOpen;
+    },
+    wrapperClassName() {
+      const {
+        size: e,
+        fillMode: i,
+        rounded: t
+      } = this.$props;
+      return {
+        "k-picker": !0,
+        "k-colorpicker": !0,
+        "k-icon-picker": !0,
+        [`k-picker-${r.sizeMap[e] || e}`]: e,
+        [`k-picker-${i}`]: i,
+        [`k-rounded-${r.roundedMap[t] || t}`]: t,
+        "k-invalid": !this.valid,
+        "k-disabled": this.disabled,
+        "k-focus": this.focused
+      };
+    }
+  },
+  created() {
+    $(I), this._popupId = "popup" + a(), this.focusableElementGuid = a();
+  },
+  mounted() {
+    this.button = l(this, "button");
+  },
+  render() {
+    let e;
+    const t = N(this).toLanguageString(d, R[d]), {
+      disabled: c,
+      tabIndex: p,
+      dir: s,
+      view: h,
+      selectedView: f,
+      showClearButton: m,
+      showPreview: g,
+      showButtons: b,
+      popupSettings: k
+    } = this.$props, V = function() {
+      return S(H, {
+        onKeydown: this.onKeyDownHandler,
+        ref: P(this, "flatcolorpicker"),
+        view: h,
+        selectedView: f,
+        showClearButton: m,
+        showPreview: g,
+        showButtons: b,
+        value: this.computedValue || void 0,
+        onChange: this.onFlatChangeHandler,
+        onFocusout: this.onBlurHandler,
+        onViewchange: this.onViewChange,
+        paletteSettings: this.paletteSettings,
+        gradientSettings: this.gradientSettings,
+        ...this.flatColorPickerSettings
+      });
+    };
+    return o("span", {
+      class: this.wrapperClassName,
+      role: "combobox",
+      dir: s,
+      id: this.$props.id,
+      "aria-labelledby": this.$props.ariaLabelledBy,
+      "aria-describedby": this.$props.ariaDescribedBy,
+      "aria-disabled": this.$props.disabled,
+      "aria-haspopup": "dialog",
+      "aria-expanded": this.computedOpen,
+      ref: this.focusableElementGuid,
+      tabindex: O(p, c),
+      title: this.$props.title,
+      onKeydown: this.onButtonKeyDown,
+      onFocusin: this.onFocusHandler,
+      onFocusout: this.onButtonBlur
+    }, [o("span", {
+      onClick: this.onActiveColorClickHandler,
+      class: "k-input-inner"
+    }, [o("span", {
+      class: u("k-value-icon", "k-color-preview", {
+        "k-no-color": !this.computedValue,
+        "k-icon-color-preview": this.icon || this.iconClassName
+      })
+    }, [(this.iconClassName || this.icon || this.svgIcon) && o(B, {
+      class: u("k-color-preview-icon", this.iconClassName),
+      name: T(this.icon),
+      icon: this.svgIcon
+    }, null), o("span", {
+      class: "k-color-preview-mask",
+      style: {
+        backgroundColor: this.computedValue
+      }
+    }, null)])]), o(v, {
+      type: "button",
+      tabIndex: -1,
+      ref: (C) => {
+        this.buttonRef = C;
+      },
+      onClick: this.onClickHandler,
+      rounded: null,
+      class: "k-input-button",
+      icon: "caret-alt-down",
+      svgIcon: K,
+      "aria-label": t
+    }, null), o(D, {
+      dir: s,
+      id: this._popupId,
+      open: this.computedOpen,
+      onOpen: this.onOpenHandler,
+      popupAnchor: this.focusableElementGuid,
+      popupSettings: {
+        ...k
+      }
+    }, L(e = V.call(this)) ? e : {
+      default: () => [e]
+    })]);
+  },
+  methods: {
+    focusElement() {
+      this.$el && this.$el.focus();
+    },
+    setOpen(e, i) {
+      !e && !i && this.$el && this.$el.focus(), this.currentOpen = e, this.$emit(e ? "open" : "close");
+    },
+    onButtonKeyDown(e) {
+      const {
+        altKey: i,
+        keyCode: t
+      } = e;
+      if (t === n.esc) {
+        e.preventDefault(), e.stopPropagation(), this.setOpen(!1);
+        return;
+      }
+      if (t === n.enter) {
+        e.preventDefault(), e.stopPropagation(), this.setOpen(!this.computedOpen);
+        return;
+      }
+      i && t === n.down && (e.preventDefault(), e.stopPropagation(), this.setOpen(!0));
+    },
+    onKeyDownHandler(e) {
+      const {
+        altKey: i,
+        keyCode: t
+      } = e;
+      if (t === n.esc) {
+        e.preventDefault(), e.stopPropagation(), this.setOpen(!1);
+        return;
+      }
+      if (t === n.enter) {
+        e.preventDefault(), e.stopPropagation(), this.focusElement();
+        return;
+      }
+      i && t === n.up && (e.preventDefault(), e.stopPropagation(), this.setOpen(!1), this.focusElement());
+    },
+    onOpenHandler() {
+      const e = l(this, "flatcolorpicker");
+      e && e.focus();
+    },
+    onClickHandler() {
+      this.setOpen(!this.computedOpen, !0);
+    },
+    onActiveColorClickHandler(e) {
+      this.$emit("activecolorclick", {
+        event: e,
+        value: this.computedValue
+      });
+    },
+    isViewFocused() {
+      return !!(document.activeElement && document.activeElement.closest(`#${this._popupId}`));
+    },
+    onButtonBlur(e) {
+      this.focused = this.isViewFocused(), this.$emit("blur", {
+        event: e
+      });
+    },
+    onFocusHandler(e) {
+      this.blurTimeoutRef ? (clearTimeout(this.blurTimeoutRef), this.blurTimeoutRef = void 0, e.target === this.$el && this.setOpen(!1)) : this.focused = !0, this.$emit("focus", {
+        event: e
+      });
+    },
+    onBlurTimeout() {
+      const e = this.isViewFocused();
+      e || this.setOpen(!1, !0), this.focused = e, this.blurTimeoutRef = void 0;
+    },
+    onBlurHandler() {
+      clearTimeout(this.blurTimeoutRef), this.palette = l(this, "palette"), this.gradient = l(this, "gradient"), this.blurTimeoutRef = setTimeout(this.onBlurTimeout, 200);
+    },
+    onViewChange(e) {
+      this.$emit("viewchange", e);
+    },
+    onChangeHandler(e, i) {
+      const t = e.value;
+      this.isValueControlled || (this.currentValue = t), i && this.setOpen(!1), this.$emit("changemodel", t), this.$emit("update:modelRgbaValue", e.rgbaValue), this.$emit("update:modelValue", t), this.$emit("change", {
+        value: t,
+        rgbaValue: e.rgbaValue,
+        event: e
+      });
+    },
+    onFlatChangeHandler(e) {
+      this.onChangeHandler(e, !0);
+    }
+  }
+});
+export {
+  Q as ColorPicker
+};

package/colors/FlatColorPicker.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"),c=require("@progress/kendo-svg-icons"),o=require("@progress/kendo-vue-common"),r=require("@progress/kendo-vue-buttons"),b=require("./ColorPalette.js"),w=require("./ColorGradient.js"),v=require("../package-metadata.js"),a=require("../messages/main.js"),y=require("./utils/color-parser.js"),d=require("./utils/color-cache.js"),B=require("@progress/kendo-vue-intl");function u(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const P=t.defineComponent({name:"KendoFlatColorPicker",emits:{viewchange:null,changemodel:null,"update:modelValue":null,"update:modelRgbaValue":null,focus:null,blur:null,focusout:null,keydown:null,change:null},props:{modelValue:String,modelRgbaValue:String,value:String,prevValue:String,tabIndex:Number,disabled:Boolean,view:{type:String,default:"combo",validator:function(e){return["gradient","palette","combo"].includes(e)}},selectedView:{type:Number,default:void 0},header:[String,Function,Object],footer:[String,Function,Object],showClearButton:{type:Boolean,default:!0},showPreview:{type:Boolean,default:!0},showButtons:{type:Boolean,default:!0},gradientSettings:{type:Object,default:function(){return d.DEFAULT_GRADIENT_SETTINGS}},paletteSettings:{type:Object,default:function(){return d.DEFAULT_PALETTE_SETTINGS}}},inject:{kendoLocalizationService:{default:null}},created(){o.validatePackage(v.packageMetadata)},computed:{isColorGradient(){return this.view!=="combo"?this.view==="gradient":this.selectedView!==void 0?this.selectedView===0:this.currentView==="gradient"},computedColor(){return this.value!==void 0?this.value:this.modelValue!==void 0?this.modelValue:this.modelRgbaValue!==void 0?this.modelRgbaValue:this.colorValue},computedPrevColor(){return this.prevValue!==void 0?this.prevValue:this.currentPrevColor},previewClass(){return{"k-coloreditor-preview-color":!0,"k-color-preview":!0,"k-no-color":!this.colorValue}},currentClass(){return{"k-coloreditor-current-color":!0,"k-color-preview":!0,"k-no-color":!this.computedPrevColor}},computedTabIndex(){return this.focused?0:-1}},data(){const e=this.value||this.defaultValue||this.modelValue||this.modelRgbaValue;return{currentView:"gradient",colorValue:e,currentPrevColor:e,focused:!1}},render(){const e=B.provideLocalizationService(this),l=e.toLanguageString(a.flatColorPickerGradientBtn,a.messages[a.flatColorPickerGradientBtn]),h=e.toLanguageString(a.flatColorPickerPaletteBtn,a.messages[a.flatColorPickerPaletteBtn]),p=e.toLanguageString(a.flatColorPickerClearBtn,a.messages[a.flatColorPickerClearBtn]),n=e.toLanguageString(a.flatColorPickerCancelBtn,a.messages[a.flatColorPickerCancelBtn]),i=e.toLanguageString(a.flatColorPickerApplyBtn,a.messages[a.flatColorPickerApplyBtn]),g=o.templateRendering.call(this,this.$props.header,o.getListeners.call(this)),C=o.templateRendering.call(this,this.$props.footer,o.getListeners.call(this)),f=o.getTemplate.call(this,{h:t.h,template:g}),k=o.getTemplate.call(this,{h:t.h,template:C}),m=function(){return t.h(w.ColorGradient,{ref:o.setRef(this,"gradient"),tabIndex:-1,value:this.colorValue,innerTabIndex:this.computedTabIndex,onChange:this.handleColorChange,onKeydown:this.innerKeyDown,...this.gradientSettings})},V=function(){return t.h(b.ColorPalette,{ref:o.setRef(this,"palette"),tabIndex:this.computedTabIndex,value:this.colorValue,onChange:this.handlePaletteColorChange,onKeydown:this.gradientKeyDown,...this.paletteSettings})};return t.createVNode("div",{tabindex:o.getTabIndex(this.$props.tabIndex,this.$props.disabled),onFocus:this.onFocus,onBlur:this.onBlur,onFocusout:this.onFocusout,onKeydown:this.onKeyDownHandler,class:o.classNames("k-flatcolorpicker k-coloreditor",{"k-disabled":this.$props.disabled}),"aria-disabled":this.$props.disabled},[f,this.$props.showClearButton&&this.$props.showPreview&&t.createVNode("div",{class:"k-coloreditor-header k-hstack"},[this.$props.view==="combo"&&t.createVNode("div",{class:"k-coloreditor-header-actions k-hstack"},[t.createVNode(r.ButtonGroup,{class:"k-button-group-flat"},{default:()=>[t.createVNode(r.Button,{tabIndex:this.computedTabIndex,type:"button",togglable:!0,fillMode:"flat",selected:this.isColorGradient,onKeydown:this.handleButtonKeydown,ariaLabel:l,onClick:s=>this.handleViewChange(s,"gradient")},{default:()=>[t.createVNode(o.Icon,{name:"droplet-slider",icon:c.dropletSliderIcon},null)]}),t.createVNode(r.Button,{tabIndex:this.computedTabIndex,type:"button",togglable:!0,fillMode:"flat",selected:!this.isColorGradient,onKeydown:this.handleButtonKeydown,ariaLabel:h,onClick:s=>this.handleViewChange(s,"palette")},{default:()=>[t.createVNode(o.Icon,{name:"palette",icon:c.paletteIcon},null)]})]})]),t.createVNode("div",{class:"k-spacer"},null),t.createVNode("div",{class:"k-coloreditor-header-actions k-hstack"},[this.$props.showClearButton&&t.createVNode(r.Button,{tabIndex:this.computedTabIndex,type:"button",fillMode:"flat",ariaLabel:p,onKeydown:this.handleButtonKeydown,onClick:this.handleResetColor},{default:()=>[t.createVNode(o.Icon,{name:"droplet-slash",icon:c.dropletSlashIcon},null)]}),this.$props.showPreview&&t.createVNode("div",{class:"k-coloreditor-preview k-vstack"},[t.createVNode("span",{class:this.previewClass,style:{background:this.colorValue}},[!this.colorValue&&t.createVNode("span",{class:"k-color-preview-mask"},null)]),t.createVNode("span",{class:this.currentClass,style:{background:this.computedPrevColor},onClick:this.handlePrevColorClick},[!this.computedPrevColor&&t.createVNode("span",{class:"k-color-preview-mask"},null)])])])]),t.createVNode("div",{class:"k-coloreditor-views k-vstack"},[this.isColorGradient?m.call(this):V.call(this)]),this.$props.showButtons&&t.createVNode("div",{class:"k-coloreditor-footer k-actions k-actions-end"},[t.createVNode(r.Button,{tabIndex:this.computedTabIndex,type:"button",class:"k-coloreditor-cancel",onKeydown:this.handleButtonKeydown,onClick:this.handleCancelBtnClick},u(n)?n:{default:()=>[n]}),t.createVNode(r.Button,{tabIndex:this.computedTabIndex,type:"button",class:"k-coloreditor-apply k-primary",onKeydown:this.handleButtonKeydown,onClick:this.triggerChange},u(i)?i:{default:()=>[i]})]),k])},methods:{focus(){this.focused=!0,setTimeout(()=>{o.focusFirstFocusableChild(this.$el)},1)},onKeyDownHandler(e){const l=this.$el;this.focused=o.focusContainer(e,l),this.$emit("keydown",e)},handleViewChange(e,l){this.currentView=l,this.$emit("viewchange",{event:e,viewType:l})},handleResetColor(){this.colorValue=null,this.showButtons||this.triggerChange()},handleColorChange(e){this.colorValue=e.value,this.showButtons||this.triggerChange(e)},handlePaletteColorChange(e){this.colorValue=e.value,this.showButtons||this.triggerChange(e)},triggerChange(e){const l=y.parseColor(this.colorValue,"rgba");this.currentPrevColor=this.colorValue,this.$emit("changemodel",this.colorValue),this.$emit("update:modelValue",this.colorValue),this.$emit("update:modelRgbaValue",l),this.$emit("change",{event:e,value:this.colorValue,rgbaValue:l})},innerKeyDown(e){e.keyCode===o.Keys.enter&&this.triggerChange(e)},gradientKeyDown(e){e.stopPropagation(),!this.showButtons&&e.keyCode===o.Keys.enter&&this.triggerChange(e)},handleButtonKeydown(e){e.keyCode===o.Keys.enter&&e.stopPropagation()},handleCancelBtnClick(){this.colorValue=this.computedPrevColor},handlePrevColorClick(){this.colorValue=this.computedPrevColor},onFocus(e){this.$emit("focus",{event:e,target:this})},onBlur(e){this.$emit("blur",{event:e,target:this})},onFocusout(e){this.$emit("focusout",{event:e,target:this})}}});exports.FlatColorPicker=P;