@progress/kendo-vue-inputs 6.1.0-develop.4 → 6.1.0-develop.6

package/colors/ColorInput.mjs

@@ -5,19 +5,19 @@
  * 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 { 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 o = ["rgba", "rgb", "hex"], q = /* @__PURE__ */ R({
+const s = ["rgba", "rgb", "hex"], q = /* @__PURE__ */ R({
   name: "KendoColorInput",
   emits: {
     hexchange: null,
@@ -33,7 +33,8 @@ const o = ["rgba", "rgb", "hex"], q = /* @__PURE__ */ R({
     },
     hex: String,
     opacity: Boolean,
-    disabled: Boolean
+    disabled: Boolean,
+    size: String
   },
   inject: {
     kendoLocalizationService: {
@@ -41,11 +42,11 @@ const o = ["rgba", "rgb", "hex"], q = /* @__PURE__ */ R({
     }
   },
   created() {
-    this.hexInputId = j();
+    this.hexInputId = T();
   },
   data() {
     return {
-      inputMode: o[1]
+      inputMode: s[1]
     };
   },
   mounted() {
@@ -55,40 +56,42 @@ const o = ["rgba", "rgb", "hex"], q = /* @__PURE__ */ R({
     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", {
+    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"
-    }, [a("div", {
+    }, [t("div", {
       class: "k-vstack"
-    }, [a(B, {
-      ariaLabel: i,
+    }, [t(G, {
+      ariaLabel: n,
       tabIndex: this.tabIndex,
       type: "button",
       fillMode: "flat",
       icon: "caret-alt-expand",
-      svgIcon: H,
+      svgIcon: A,
       class: "k-colorgradient-toggle-mode k-icon-button",
       onClick: this.onToggleModeChange,
-      onKeydown: this.onKeyDown
-    }, null)]), this.inputMode === "hex" && a("div", {
+      onKeydown: this.onKeyDown,
+      size: this.$props.size
+    }, null)]), this.inputMode === "hex" && t("div", {
       class: "k-vstack k-flex-1"
-    }, [a("span", {
+    }, [t("span", {
       class: "k-hex-value"
-    }, [a(G, {
+    }, [t(z, {
       id: this.hexInputId,
       tabIndex: this.tabIndex,
       hex: this.$props.hex,
       onHexchange: this.onHexChange,
       disabled: this.$props.disabled,
-      ref: "hexinput"
-    }, null)]), a(s, {
+      ref: "hexinput",
+      size: this.$props.size
+    }, null)]), t(o, {
       class: "k-colorgradient-input-label",
       editorId: this.hexInputId
-    }, r(n) ? n : {
-      default: () => [n]
-    })]), (this.inputMode === "rgb" || this.inputMode === "rgba") && [a("div", {
+    }, r(i) ? i : {
+      default: () => [i]
+    })]), (this.inputMode === "rgb" || this.inputMode === "rgba") && [t("div", {
       class: "k-vstack"
-    }, [a(l, {
+    }, [t(l, {
       inputType: "number",
       tabIndex: this.tabIndex,
       value: this.$props.rgba.r,
@@ -96,16 +99,17 @@ const o = ["rgba", "rgb", "hex"], q = /* @__PURE__ */ R({
       max: 255,
       spinners: !1,
       format: "n",
-      ariaLabel: v,
+      ariaLabel: L,
       onChange: this.onRgbaRChange,
-      disabled: this.$props.disabled
-    }, null), a(s, {
+      disabled: this.$props.disabled,
+      size: this.$props.size
+    }, null), t(o, {
       class: "k-colorgradient-input-label"
-    }, r(d) ? d : {
-      default: () => [d]
-    })]), a("div", {
+    }, r(g) ? g : {
+      default: () => [g]
+    })]), t("div", {
       class: "k-vstack"
-    }, [a(l, {
+    }, [t(l, {
       inputType: "number",
       tabIndex: this.tabIndex,
       value: this.$props.rgba.g,
@@ -113,16 +117,17 @@ const o = ["rgba", "rgb", "hex"], q = /* @__PURE__ */ R({
       max: 255,
       spinners: !1,
       format: "n",
-      ariaLabel: M,
+      ariaLabel: v,
       onChange: this.onRgbaGChange,
-      disabled: this.$props.disabled
-    }, null), a(s, {
+      disabled: this.$props.disabled,
+      size: this.$props.size
+    }, null), t(o, {
       class: "k-colorgradient-input-label"
-    }, r(g) ? g : {
-      default: () => [g]
-    })]), a("div", {
+    }, r(d) ? d : {
+      default: () => [d]
+    })]), t("div", {
       class: "k-vstack"
-    }, [a(l, {
+    }, [t(l, {
       inputType: "number",
       tabIndex: this.tabIndex,
       value: this.$props.rgba.b,
@@ -130,17 +135,18 @@ const o = ["rgba", "rgb", "hex"], q = /* @__PURE__ */ R({
       max: 255,
       spinners: !1,
       format: "n",
-      ariaLabel: $,
+      ariaLabel: M,
       onChange: this.onRgbaBChange,
       disabled: this.$props.disabled,
-      ref: "numericb"
-    }, null), a(s, {
+      ref: "numericb",
+      size: this.$props.size
+    }, null), t(o, {
       class: "k-colorgradient-input-label"
-    }, r(h) ? h : {
-      default: () => [h]
-    })])], this.inputMode === "rgba" && a("div", {
+    }, r(p) ? p : {
+      default: () => [p]
+    })])], this.inputMode === "rgba" && t("div", {
       class: "k-vstack"
-    }, [this.$props.opacity && a(l, {
+    }, [this.$props.opacity && t(l, {
       inputType: "number",
       tabIndex: this.tabIndex,
       value: this.$props.rgba.a,
@@ -152,11 +158,12 @@ const o = ["rgba", "rgb", "hex"], q = /* @__PURE__ */ R({
       ariaLabel: y,
       onChange: this.onRgbaAChange,
       disabled: this.$props.disabled,
-      ref: "numerica"
-    }, null), this.$props.opacity && a(s, {
+      ref: "numerica",
+      size: this.$props.size
+    }, null), this.$props.opacity && t(o, {
       class: "k-colorgradient-input-label"
-    }, r(c) ? c : {
-      default: () => [c]
+    }, r(h) ? h : {
+      default: () => [h]
     })])]);
   },
   methods: {
@@ -183,23 +190,23 @@ const o = ["rgba", "rgb", "hex"], q = /* @__PURE__ */ R({
         a: e.value
       }, e);
     },
-    dispatchRgbaChange(e, n) {
-      let i = {
+    dispatchRgbaChange(e, i) {
+      let n = {
         ...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);
+      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 = o.length - 1 === o.indexOf(this.inputMode) ? 0 : o.indexOf(this.inputMode) + 1;
+      const e = s.length - 1 === s.indexOf(this.inputMode) ? 0 : s.indexOf(this.inputMode) + 1;
       if (this.$props.opacity)
-        this.inputMode = o[e];
+        this.inputMode = s[e];
       else {
-        const n = o[e] === "rgba" ? e + 1 : e;
-        this.inputMode = o[n];
+        const i = s[e] === "rgba" ? e + 1 : e;
+        this.inputMode = s[i];
       }
     },
     onKeyDown(e) {
-      e.keyCode === A.enter && e.stopPropagation();
+      e.keyCode === j.enter && e.stopPropagation();
     }
   }
 });

package/colors/ColorPalette.js

@@ -5,4 +5,4 @@
  * 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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),U=require("./utils/color-palette.service.js"),t=require("@progress/kendo-vue-common"),D=require("../package-metadata.js"),F=require("./models/palette-presets.js"),I=require("./utils/misc.js"),K=require("./utils/color-parser.js"),C=10,$="office",L=a.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:$},columns:Number,tileSize:{type:[Number,Object]},modelValue:String,modelRgbaValue:String,defaultValue:String,value:String,disabled:Boolean,tabIndex:Number,id:String,class:String,ariaLabelledBy:String,ariaDescribedBy:String,size:{type:[String,null],default:"medium"}},created(){t.validatePackage(D.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{size:e,disabled:s,class:o,tileSize:l}=this.$props,p=this.getPaletteInfo(),d=this.paletteService=new U.ColorPaletteService;d.setColorMatrix(p.colors,p.columns);const w=d.getCellCoordsFor(this.selectedColor),f=d.getCellCoordsFor(this.focusedColor),k=t.classNames("k-colorpalette",{[`k-colorpalette-${t.kendoThemeMaps.sizeMap[e]||e}`]:e,"k-disabled":s},o),S=function(g,n,r,i){const c=r!==void 0&&r.row===n,N=r&&r.col,v=i!==void 0&&i.row===n,E=i&&i.col,u=typeof l!="number"?l:{width:l,height:l},b=u?u.width+"px":void 0,P=u?u.height+"px":void 0;return g.map(function(m,h){const y=c&&N===h,R=t.classNames("k-colorpalette-tile",{"k-selected":y,"k-focus":v&&E===h});return a.createVNode("td",{class:R,"aria-label":m,"aria-selected":y?!0:this.$props.disabled?void 0:!1,style:{backgroundColor:m,width:b,height:P,minWidth:b},onClick:T=>this.onColorClick(m,T),id:this.createCellId({row:n,col:h}),key:h,role:"gridcell"},null)},this)},V=function(g,n,r){return g.map(function(i,c){return a.createVNode("tr",{role:"row",key:c},[S.call(this,i,c,n,r)])},this)};return p.colors.length?a.createVNode("div",{id:this.$props.id,class:k,onFocusin:this.onFocus,onFocusout:this.onBlur,onKeydown:this.onKeyDown,"aria-disabled":this.$props.disabled?"true":void 0,"aria-activedescendant":f&&this.createCellId(f),"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")},[a.createVNode("table",{class:"k-colorpalette-table k-palette",role:"presentation"},[a.createVNode("tbody",null,[V.call(this,d.colorRows,w,f)])])]):""},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 l=this.paletteService.getNextCell(this.focusedColorCooridanates,s,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,s){const o=K.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=F.PALETTEPRESETS[this.$props.palette];return I.isPresent(e)?{colors:e.colors,columns:this.$props.columns||e.columns||C}:{colors:[],columns:0}}else return{colors:this.$props.palette||[],columns:this.$props.columns||C}},createCellId(e){return`${this.guid}_${e.row}_${e.col}`}}});exports.ColorPalette=L;exports.DEFAULT_COLUMNS_COUNT=C;exports.DEFAULT_PRESET=$;

package/colors/ColorPalette.mjs

@@ -5,14 +5,14 @@
  * 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({
+import { defineComponent as x, createVNode as a } from "vue";
+import { ColorPaletteService as B } from "./utils/color-palette.service.mjs";
+import { validatePackage as D, guid as F, getRef as $, classNames as w, kendoThemeMaps as U, getTabIndex as z, setRef as L, Keys as n } from "@progress/kendo-vue-common";
+import { packageMetadata as A } from "../package-metadata.mjs";
+import { PALETTEPRESETS as K } from "./models/palette-presets.mjs";
+import { isPresent as M } from "./utils/misc.mjs";
+import { parseColor as _ } from "./utils/color-parser.mjs";
+const k = 10, O = "office", X = /* @__PURE__ */ x({
   name: "KendoColorPalette",
   model: {
     event: "changemodel"
@@ -29,12 +29,11 @@ const _ = 24, b = 10, z = "office", q = /* @__PURE__ */ R({
   props: {
     palette: {
       type: [String, Array],
-      default: z
+      default: O
     },
     columns: Number,
     tileSize: {
-      type: [Number, Object],
-      default: _
+      type: [Number, Object]
     },
     modelValue: String,
     modelRgbaValue: String,
@@ -43,17 +42,22 @@ const _ = 24, b = 10, z = "office", q = /* @__PURE__ */ R({
     disabled: Boolean,
     tabIndex: Number,
     id: String,
+    class: String,
     ariaLabelledBy: String,
-    ariaDescribedBy: String
+    ariaDescribedBy: String,
+    size: {
+      type: [String, null],
+      default: "medium"
+    }
   },
   created() {
-    P(L), this.guid = T();
+    D(A), this.guid = F();
   },
   mounted() {
-    this.wrapper = g(this, "wrapper");
+    this.wrapper = $(this, "wrapper");
   },
   updated() {
-    this.wrapper = g(this, "wrapper");
+    this.wrapper = $(this, "wrapper");
   },
   computed: {
     focusedColorCooridanates() {
@@ -73,64 +77,70 @@ const _ = 24, b = 10, z = "office", q = /* @__PURE__ */ R({
     };
   },
   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
+    const {
+      size: e,
+      disabled: t,
+      class: o,
+      tileSize: s
+    } = this.$props, p = this.getPaletteInfo(), d = this.paletteService = new B();
+    d.setColorMatrix(p.colors, p.columns);
+    const y = d.getCellCoordsFor(this.selectedColor), f = d.getCellCoordsFor(this.focusedColor), S = w("k-colorpalette", {
+      [`k-colorpalette-${U.sizeMap[e] || e}`]: e,
+      "k-disabled": t
+    }, o), V = function(m, r, i, l) {
+      const u = i !== void 0 && i.row === r, N = i && i.col, E = l !== void 0 && l.row === r, R = l && l.col, c = typeof s != "number" ? s : {
+        width: s,
+        height: s
+      }, C = c ? c.width + "px" : void 0, P = c ? c.height + "px" : void 0;
+      return m.map(function(g, h) {
+        const b = u && N === h, I = w("k-colorpalette-tile", {
+          "k-selected": b,
+          "k-focus": E && R === h
         });
         return a("td", {
-          class: E,
-          "aria-label": h,
-          "aria-selected": m ? !0 : this.$props.disabled ? void 0 : !1,
+          class: I,
+          "aria-label": g,
+          "aria-selected": b ? !0 : this.$props.disabled ? void 0 : !1,
           style: {
-            backgroundColor: h,
-            width: f,
-            height: v,
-            minWidth: f
+            backgroundColor: g,
+            width: C,
+            height: P,
+            minWidth: C
           },
-          onClick: (N) => this.onColorClick(h, N),
+          onClick: (T) => this.onColorClick(g, T),
           id: this.createCellId({
             row: r,
-            col: u
+            col: h
           }),
-          key: u,
+          key: h,
           role: "gridcell"
         }, null);
       }, this);
-    }, S = function(c, r, s) {
-      return c.map(function(i, d) {
+    }, v = function(m, r, i) {
+      return m.map(function(l, u) {
         return a("tr", {
           role: "row",
-          key: d
-        }, [w.call(this, i, d, r, s)]);
+          key: u
+        }, [V.call(this, l, u, r, i)]);
       }, this);
     };
-    return e.colors.length ? a("div", {
+    return p.colors.length ? a("div", {
       id: this.$props.id,
-      class: $,
+      class: S,
       onFocusin: this.onFocus,
       onFocusout: this.onBlur,
       onKeydown: this.onKeyDown,
       "aria-disabled": this.$props.disabled ? "true" : void 0,
-      "aria-activedescendant": l && this.createCellId(l),
+      "aria-activedescendant": f && this.createCellId(f),
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
       role: "grid",
-      tabindex: D(this.$props.tabIndex, this.$props.disabled),
-      ref: F(this, "wrapper")
+      tabindex: z(this.$props.tabIndex, this.$props.disabled),
+      ref: L(this, "wrapper")
     }, [a("table", {
       class: "k-colorpalette-table k-palette",
       role: "presentation"
-    }, [a("tbody", null, [S.call(this, t.colorRows, o, l)])])]) : "";
+    }, [a("tbody", null, [v.call(this, d.colorRows, y, f)])])]) : "";
   },
   methods: {
     focus() {
@@ -176,8 +186,8 @@ const _ = 24, b = 10, z = "office", q = /* @__PURE__ */ R({
     },
     handleCellNavigation(e, t, o) {
       if (e.preventDefault(), this.focusedColorCooridanates) {
-        const l = this.paletteService.getNextCell(this.focusedColorCooridanates, t, o);
-        this.focusedColor = this.paletteService.getColorAt(l);
+        const s = this.paletteService.getNextCell(this.focusedColorCooridanates, t, o);
+        this.focusedColor = this.paletteService.getColorAt(s);
       } else
         this.focusedColor = this.paletteService.colorRows[0][0];
     },
@@ -185,7 +195,7 @@ const _ = 24, b = 10, z = "office", q = /* @__PURE__ */ R({
       this.isUncontrolled && (this.currentValue = this.focusedColor), this.dispatchChangeEvent(this.focusedColor, e);
     },
     dispatchChangeEvent(e, t) {
-      const o = B(e, "rgba");
+      const o = _(e, "rgba");
       this.$emit("changemodel", e), this.$emit("update:modelValue", e), this.$emit("update:modelRgbaValue", o), this.$emit("change", {
         event: t,
         component: this,
@@ -195,10 +205,10 @@ const _ = 24, b = 10, z = "office", q = /* @__PURE__ */ R({
     },
     getPaletteInfo() {
       if (typeof this.$props.palette == "string") {
-        const e = U[this.$props.palette];
-        return x(e) ? {
+        const e = K[this.$props.palette];
+        return M(e) ? {
           colors: e.colors,
-          columns: this.$props.columns || e.columns || b
+          columns: this.$props.columns || e.columns || k
         } : {
           colors: [],
           columns: 0
@@ -206,7 +216,7 @@ const _ = 24, b = 10, z = "office", q = /* @__PURE__ */ R({
       } else
         return {
           colors: this.$props.palette || [],
-          columns: this.$props.columns || b
+          columns: this.$props.columns || k
         };
     },
     createCellId(e) {
@@ -215,8 +225,7 @@ const _ = 24, b = 10, z = "office", q = /* @__PURE__ */ R({
   }
 });
 export {
-  q as ColorPalette,
-  b as DEFAULT_COLUMNS_COUNT,
-  z as DEFAULT_PRESET,
-  _ as DEFAULT_TILE_SIZE
+  X as ColorPalette,
+  k as DEFAULT_COLUMNS_COUNT,
+  O as DEFAULT_PRESET
 };

package/colors/ColorPicker.js

@@ -5,4 +5,4 @@
  * 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=$;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),w=require("@progress/kendo-vue-buttons"),t=require("@progress/kendo-vue-common"),S=require("../package-metadata.js"),V=require("./Picker.js"),B=require("./FlatColorPicker.js"),P=require("./utils/color-cache.js"),O=require("@progress/kendo-vue-intl"),n=require("../messages/main.js"),$=require("@progress/kendo-svg-icons"),T=require("./ColorPalette.js"),A=require("./common/ColorsAdaptiveMode.js");function R(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!a.isVNode(e)}const N=a.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{palette:T.DEFAULT_PRESET}}},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 P.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},adaptive:{type:Boolean,default:!1},adaptiveTitle:{type:String}},inject:{kendoLocalizationService:{default:null},adaptiveModeBreakpoints:{default:{small:t.ADAPTIVE_SMALL_BREAKPOINT,medium:t.ADAPTIVE_MEDIUM_BREAKPOINT}}},data(){return{focused:!1,currentValue:this.$props.defaultValue,currentOpen:!1,flatcolorpickerRef:null,windowWidth:0,observer:null}},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:o,rounded:i}=this.$props;return{"k-picker":!0,"k-colorpicker":!0,"k-icon-picker":!0,[`k-picker-${t.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-picker-${o}`]:o,[`k-rounded-${t.kendoThemeMaps.roundedMap[i]||i}`]:i,"k-invalid":!this.valid,"k-disabled":this.disabled,"k-focus":this.focused}},animationStyles(){return this.windowWidth<=this.adaptiveModeBreakpoints.small?{top:0,width:"100%",height:"100%"}:void 0},classNameAdaptive(){return this.windowWidth<=this.adaptiveModeBreakpoints.small?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom"},adaptiveState(){return!!(this.$props.adaptive&&this.windowWidth&&this.windowWidth<=this.adaptiveModeBreakpoints.medium)}},created(){t.validatePackage(S.packageMetadata),this._popupId="popup"+t.guid(),this.focusableElementGuid=t.guid()},mounted(){this.observer=t.canUseDOM&&window.ResizeObserver&&new ResizeObserver(this.calculateMedia),document!=null&&document.body&&this.observer&&this.observer.observe(document.body),this.flatcolorpickerRef=t.getRef(this,"flatcolorpicker"),this.button=t.getRef(this,"button")},unmounted(){var e;(e=this.document)!=null&&e.body&&this.observer&&this.observer.disconnect()},render(){let e;const{disabled:o,tabIndex:i,dir:r,view:d,selectedView:c,showClearButton:p,showPreview:h,showButtons:f,popupSettings:m,size:g,adaptiveTitle:k}=this.$props,s=O.provideLocalizationService(this),b=s.toLanguageString(n.colorPickerDropdownButtonAriaLabel,n.messages[n.colorPickerDropdownButtonAriaLabel]),v=k||s.toLanguageString(n.colorPickerAdaptiveTitle,n.messages[n.colorPickerAdaptiveTitle]),C=s.toLanguageString(n.flatColorPickerApplyBtn,n.messages[n.flatColorPickerApplyBtn]),y=s.toLanguageString(n.flatColorPickerCancelBtn,n.messages[n.flatColorPickerCancelBtn]),u=function(){return a.h(B.FlatColorPicker,{onKeydown:this.onKeyDownHandler,ref:t.setRef(this,"flatcolorpicker"),view:d,selectedView:c,showClearButton:p,showPreview:h,showButtons:this.adaptiveState?!1:f,size:this.adaptiveState?"large":g,value:this.computedValue||void 0,onChange:this.onFlatChangeHandler,onFocusout:this.onBlurHandler,onViewchange:this.onViewChange,paletteSettings:this.paletteSettings,gradientSettings:this.gradientSettings,adaptive:this.adaptiveState,...this.flatColorPickerSettings})};return a.createVNode("span",{class:this.wrapperClassName,role:"combobox",dir:r,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(i,o),title:this.$props.title,onKeydown:this.onButtonKeyDown,onFocusin:this.onFocusHandler,onFocusout:this.onButtonBlur},[a.createVNode("span",{onClick:this.onActiveColorClickHandler,class:"k-input-inner"},[a.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)&&a.createVNode(t.Icon,{class:t.classNames("k-color-preview-icon",this.iconClassName),name:t.getIconName(this.icon),icon:this.svgIcon},null),a.createVNode("span",{class:"k-color-preview-mask",style:{backgroundColor:this.computedValue}},null)])]),a.createVNode(w.Button,{type:"button",tabIndex:-1,ref:l=>{this.buttonRef=l},onClick:this.onClickHandler,rounded:null,class:"k-input-button",icon:"caret-alt-down",svgIcon:$.caretAltDownIcon,"aria-label":b},null),!this.adaptiveState&&a.createVNode(V.Picker,{dir:r,id:this._popupId,open:this.computedOpen,onOpen:this.onOpenHandler,popupAnchor:this.focusableElementGuid,popupSettings:{...m}},R(e=u.call(this))?e:{default:()=>[e]}),this.adaptiveState&&a.createVNode(A.ColorsAdaptiveMode,{expand:this.computedOpen,animationStyles:this.animationStyles,classNameAdaptive:this.classNameAdaptive,title:v,applyText:C,cancelText:y,componentToRender:u.call(this),onActionSheetClose:()=>this.setOpen(!this.computedOpen),onCancelBtnClick:()=>this.flatcolorpickerRef.handleCancelBtnClick(),onApplyBtnClick:l=>this.flatcolorpickerRef.triggerChange(l)},null)])},methods:{calculateMedia(e){for(let o of e)this.windowWidth=o.target.clientWidth},focusElement(){this.$el&&this.$el.focus()},setOpen(e,o){!e&&!o&&this.$el&&this.$el.focus(),this.currentOpen=e,this.$emit(e?"open":"close")},onButtonKeyDown(e){const{altKey:o,keyCode:i}=e;if(i===t.Keys.esc){e.preventDefault(),e.stopPropagation(),this.setOpen(!1);return}if(i===t.Keys.enter){e.preventDefault(),e.stopPropagation(),this.setOpen(!this.computedOpen);return}o&&i===t.Keys.down&&(e.preventDefault(),e.stopPropagation(),this.setOpen(!0))},onKeyDownHandler(e){const{altKey:o,keyCode:i}=e;if(i===t.Keys.esc){e.preventDefault(),e.stopPropagation(),this.setOpen(!1);return}if(i===t.Keys.enter){e.preventDefault(),e.stopPropagation(),this.focusElement();return}o&&i===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,o){const i=e.value;this.isValueControlled||(this.currentValue=i),o&&this.setOpen(!1),this.$emit("changemodel",i),this.$emit("update:modelRgbaValue",e.rgbaValue),this.$emit("update:modelValue",i),this.$emit("change",{value:i,rgbaValue:e.rgbaValue,event:e})},onFlatChangeHandler(e){this.onChangeHandler(e,!0)}}});exports.ColorPicker=N;