@progress/kendo-vue-inputs 10.0.0 → 10.0.1-develop.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -75,7 +75,7 @@ export interface CheckboxProps extends ToggleBaseProps, FormComponentProps {
75
75
  */
76
76
  rounded?: 'none' | 'small' | 'medium' | 'large';
77
77
  /**
78
- * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
78
+ * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby).
79
79
  * For example these elements could contain error or hint message.
80
80
  */
81
81
  ariaDescribedBy?: string;
@@ -181,6 +181,7 @@ declare const FlatColorPicker: import('vue').DefineComponent<import('vue').Extra
181
181
  currentView: string;
182
182
  colorValue: string | Function;
183
183
  currentPrevColor: string | Function;
184
+ gradientValue: string | Function;
184
185
  focused: boolean;
185
186
  }, {
186
187
  isColorGradient(): boolean;
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),d=require("@progress/kendo-svg-icons"),o=require("@progress/kendo-vue-common"),i=require("@progress/kendo-vue-buttons"),u=require("./ColorPalette.js"),w=require("./ColorGradient.js"),y=require("../package-metadata.js"),a=require("../messages/main.js"),B=require("./utils/color-parser.js"),P=require("./utils/color-cache.js"),S=require("@progress/kendo-vue-intl");function h(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const I=t.defineComponent({name:"KendoFlatColorPicker",emits:{viewchange:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,"update:modelRgbaValue":e=>!0,focus:e=>!0,blur:e=>!0,focusout:e=>!0,keydown:e=>!0,change:e=>!0},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 P.DEFAULT_GRADIENT_SETTINGS}},paletteSettings:{type:Object,default:function(){return{palette:u.DEFAULT_PRESET}}},size:{type:String},ariaLabel:String,adaptive:Boolean},inject:{kendoLocalizationService:{default:null}},created(){o.validatePackage(y.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{size:e,adaptive:r}=this.$props,n=S.provideLocalizationService(this),p=n.toLanguageString(a.flatColorPickerGradientBtn,a.messages[a.flatColorPickerGradientBtn]),g=n.toLanguageString(a.flatColorPickerPaletteBtn,a.messages[a.flatColorPickerPaletteBtn]),C=n.toLanguageString(a.flatColorPickerClearBtn,a.messages[a.flatColorPickerClearBtn]),l=n.toLanguageString(a.flatColorPickerCancelBtn,a.messages[a.flatColorPickerCancelBtn]),s=n.toLanguageString(a.flatColorPickerApplyBtn,a.messages[a.flatColorPickerApplyBtn]),k=o.templateRendering.call(this,this.$props.header,o.getListeners.call(this)),f=o.templateRendering.call(this,this.$props.footer,o.getListeners.call(this)),m=o.getTemplate.call(this,{h:t.h,template:k}),v=o.getTemplate.call(this,{h:t.h,template:f}),b=function(){return t.h(w.ColorGradient,{ref:o.setRef(this,"gradient"),tabIndex:-1,value:this.colorValue,innerTabIndex:this.computedTabIndex,size:e,onChange:this.handleColorChange,onKeydown:this.innerKeyDown,adaptive:r,role:"none",...this.gradientSettings})},V=function(){return t.h(u.ColorPalette,{ref:o.setRef(this,"palette"),tabIndex:this.computedTabIndex,value:this.colorValue,size:e,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-coloreditor-${o.kendoThemeMaps.sizeMap[e]||e}`]:e,"k-disabled":this.$props.disabled}),"aria-disabled":this.$props.disabled||void 0,role:"textbox","aria-label":this.$props.ariaLabel},[m,this.$props.showClearButton&&this.$props.showPreview&&t.createVNode("div",{class:"k-coloreditor-header k-hstack"},[t.createVNode("div",{class:"k-coloreditor-header-actions k-hstack"},[this.$props.view==="combo"&&t.createVNode(i.ButtonGroup,{class:"k-button-group-flat"},{default:()=>[t.createVNode(i.Button,{tabIndex:this.computedTabIndex,type:"button",togglable:!0,fillMode:"flat",selected:this.isColorGradient,onKeydown:this.handleButtonKeydown,ariaLabel:p,size:e,onClick:c=>this.handleViewChange(c,"gradient"),svgIcon:d.dropletSliderIcon},null),t.createVNode(i.Button,{tabIndex:this.computedTabIndex,type:"button",togglable:!0,fillMode:"flat",selected:!this.isColorGradient,onKeydown:this.handleButtonKeydown,ariaLabel:g,size:e,onClick:c=>this.handleViewChange(c,"palette"),svgIcon:d.paletteIcon},null)]})]),t.createVNode("div",{class:"k-spacer"},null),t.createVNode("div",{class:"k-coloreditor-header-actions k-hstack"},[this.$props.showClearButton&&t.createVNode(i.Button,{tabIndex:this.computedTabIndex,type:"button",fillMode:"flat",ariaLabel:C,svgIcon:d.dropletSlashIcon,size:e,onKeydown:this.handleButtonKeydown,onClick:this.handleResetColor},null),this.$props.showPreview&&t.createVNode("div",{class:"k-coloreditor-preview k-vstack"},[t.createVNode("span",{class:this.previewClass},[t.createVNode("span",{class:"k-color-preview-mask",style:{background:this.colorValue}},null)]),t.createVNode("span",{class:this.currentClass},[t.createVNode("span",{class:"k-color-preview-mask",style:{background:this.computedPrevColor},onClick:this.handlePrevColorClick},null)])])])]),t.createVNode("div",{class:"k-coloreditor-views k-vstack"},[this.isColorGradient?b.call(this):V.call(this)]),this.$props.showButtons&&t.createVNode("div",{class:"k-coloreditor-footer k-actions k-actions-horizontal k-actions-start"},[t.createVNode(i.Button,{tabIndex:this.computedTabIndex,type:"button",class:"k-coloreditor-cancel",size:e,onKeydown:this.handleButtonKeydown,onClick:this.handleCancelBtnClick},h(l)?l:{default:()=>[l]}),t.createVNode(i.Button,{tabIndex:this.computedTabIndex,type:"button",class:"k-coloreditor-apply",themeColor:"primary",size:e,onKeydown:this.handleButtonKeydown,onClick:this.triggerChange},h(s)?s:{default:()=>[s]})]),v])},methods:{focus(){this.focused=!0,setTimeout(()=>{o.focusFirstFocusableChild(this.$el)},1)},onKeyDownHandler(e){const r=this.$el;this.focused=o.focusContainer(e,r),this.$emit("keydown",e)},handleViewChange(e,r){this.currentView=r,this.$emit("viewchange",{event:e,viewType:r})},handleResetColor(){this.colorValue=null,!this.showButtons&&!this.adaptive&&this.triggerChange()},handleColorChange(e){this.colorValue=e.value,!this.showButtons&&!this.adaptive&&this.triggerChange(e)},handlePaletteColorChange(e){this.colorValue=e.value,!this.showButtons&&!this.adaptive&&this.triggerChange(e)},triggerChange(e){const r=B.parseColor(this.colorValue,"rgba");this.currentPrevColor=this.colorValue,this.$emit("changemodel",this.colorValue),this.$emit("update:modelValue",this.colorValue),this.$emit("update:modelRgbaValue",r),this.$emit("change",{event:e,value:this.colorValue,rgbaValue:r})},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=I;
8
+ "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"),i=require("@progress/kendo-vue-buttons"),u=require("./ColorPalette.js"),w=require("./ColorGradient.js"),y=require("../package-metadata.js"),a=require("../messages/main.js"),B=require("./utils/color-parser.js"),P=require("./utils/color-cache.js"),S=require("@progress/kendo-vue-intl");function h(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const I=t.defineComponent({name:"KendoFlatColorPicker",emits:{viewchange:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,"update:modelRgbaValue":e=>!0,focus:e=>!0,blur:e=>!0,focusout:e=>!0,keydown:e=>!0,change:e=>!0},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 P.DEFAULT_GRADIENT_SETTINGS}},paletteSettings:{type:Object,default:function(){return{palette:u.DEFAULT_PRESET}}},size:{type:String},ariaLabel:String,adaptive:Boolean},inject:{kendoLocalizationService:{default:null}},created(){o.validatePackage(y.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,gradientValue:e,focused:!1}},render(){const{size:e,adaptive:r}=this.$props,n=S.provideLocalizationService(this),p=n.toLanguageString(a.flatColorPickerGradientBtn,a.messages[a.flatColorPickerGradientBtn]),g=n.toLanguageString(a.flatColorPickerPaletteBtn,a.messages[a.flatColorPickerPaletteBtn]),C=n.toLanguageString(a.flatColorPickerClearBtn,a.messages[a.flatColorPickerClearBtn]),l=n.toLanguageString(a.flatColorPickerCancelBtn,a.messages[a.flatColorPickerCancelBtn]),s=n.toLanguageString(a.flatColorPickerApplyBtn,a.messages[a.flatColorPickerApplyBtn]),k=o.templateRendering.call(this,this.$props.header,o.getListeners.call(this)),f=o.templateRendering.call(this,this.$props.footer,o.getListeners.call(this)),m=o.getTemplate.call(this,{h:t.h,template:k}),v=o.getTemplate.call(this,{h:t.h,template:f}),V=function(){return t.h(w.ColorGradient,{ref:o.setRef(this,"gradient"),tabIndex:-1,value:this.gradientValue,innerTabIndex:this.computedTabIndex,size:e,onChange:this.handleColorChange,onKeydown:this.innerKeyDown,adaptive:r,role:"none",...this.gradientSettings})},b=function(){return t.h(u.ColorPalette,{ref:o.setRef(this,"palette"),tabIndex:this.computedTabIndex,value:this.colorValue,size:e,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-coloreditor-${o.kendoThemeMaps.sizeMap[e]||e}`]:e,"k-disabled":this.$props.disabled}),"aria-disabled":this.$props.disabled||void 0,role:"textbox","aria-label":this.$props.ariaLabel},[m,this.$props.showClearButton&&this.$props.showPreview&&t.createVNode("div",{class:"k-coloreditor-header k-hstack"},[t.createVNode("div",{class:"k-coloreditor-header-actions k-hstack"},[this.$props.view==="combo"&&t.createVNode(i.ButtonGroup,{class:"k-button-group-flat"},{default:()=>[t.createVNode(i.Button,{tabIndex:this.computedTabIndex,type:"button",togglable:!0,fillMode:"flat",selected:this.isColorGradient,onKeydown:this.handleButtonKeydown,ariaLabel:p,size:e,onClick:d=>this.handleViewChange(d,"gradient"),svgIcon:c.dropletSliderIcon},null),t.createVNode(i.Button,{tabIndex:this.computedTabIndex,type:"button",togglable:!0,fillMode:"flat",selected:!this.isColorGradient,onKeydown:this.handleButtonKeydown,ariaLabel:g,size:e,onClick:d=>this.handleViewChange(d,"palette"),svgIcon: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(i.Button,{tabIndex:this.computedTabIndex,type:"button",fillMode:"flat",ariaLabel:C,svgIcon:c.dropletSlashIcon,size:e,onKeydown:this.handleButtonKeydown,onClick:this.handleResetColor},null),this.$props.showPreview&&t.createVNode("div",{class:"k-coloreditor-preview k-vstack"},[t.createVNode("span",{class:this.previewClass},[t.createVNode("span",{class:"k-color-preview-mask",style:{background:this.colorValue}},null)]),t.createVNode("span",{class:this.currentClass},[t.createVNode("span",{class:"k-color-preview-mask",style:{background:this.computedPrevColor},onClick:this.handlePrevColorClick},null)])])])]),t.createVNode("div",{class:"k-coloreditor-views k-vstack"},[this.isColorGradient?V.call(this):b.call(this)]),this.$props.showButtons&&t.createVNode("div",{class:"k-coloreditor-footer k-actions k-actions-horizontal k-actions-start"},[t.createVNode(i.Button,{tabIndex:this.computedTabIndex,type:"button",class:"k-coloreditor-cancel",size:e,onKeydown:this.handleButtonKeydown,onClick:this.handleCancelBtnClick},h(l)?l:{default:()=>[l]}),t.createVNode(i.Button,{tabIndex:this.computedTabIndex,type:"button",class:"k-coloreditor-apply",themeColor:"primary",size:e,onKeydown:this.handleButtonKeydown,onClick:this.triggerChange},h(s)?s:{default:()=>[s]})]),v])},methods:{focus(){this.focused=!0,setTimeout(()=>{o.focusFirstFocusableChild(this.$el)},1)},onKeyDownHandler(e){const r=this.$el;this.focused=o.focusContainer(e,r),this.$emit("keydown",e)},handleViewChange(e,r){this.currentView=r,this.$emit("viewchange",{event:e,viewType:r})},handleResetColor(){this.colorValue=null,this.gradientValue=null,!this.showButtons&&!this.adaptive&&this.triggerChange()},handleColorChange(e){this.colorValue=e.value,this.gradientValue=void 0,!this.showButtons&&!this.adaptive&&this.triggerChange(e)},handlePaletteColorChange(e){this.colorValue=e.value,this.gradientValue=e.value,!this.showButtons&&!this.adaptive&&this.triggerChange(e)},triggerChange(e){const r=B.parseColor(this.colorValue,"rgba");this.currentPrevColor=this.colorValue,this.$emit("changemodel",this.colorValue),this.$emit("update:modelValue",this.colorValue),this.$emit("update:modelRgbaValue",r),this.$emit("change",{event:e,value:this.colorValue,rgbaValue:r})},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,this.gradientValue=this.computedPrevColor},handlePrevColorClick(){this.colorValue=this.computedPrevColor,this.gradientValue=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=I;
@@ -7,7 +7,7 @@
7
7
  */
8
8
  import { defineComponent as K, h as l, createVNode as t, isVNode as T } from "vue";
9
9
  import { dropletSliderIcon as L, paletteIcon as z, dropletSlashIcon as F } from "@progress/kendo-svg-icons";
10
- import { Keys as c, focusContainer as R, focusFirstFocusableChild as M, templateRendering as u, getListeners as h, getTemplate as p, classNames as G, kendoThemeMaps as D, getTabIndex as j, validatePackage as N, setRef as g } from "@progress/kendo-vue-common";
10
+ import { Keys as u, focusContainer as R, focusFirstFocusableChild as M, templateRendering as c, getListeners as h, getTemplate as p, classNames as G, kendoThemeMaps as D, getTabIndex as j, validatePackage as N, setRef as g } from "@progress/kendo-vue-common";
11
11
  import { ButtonGroup as E, Button as a } from "@progress/kendo-vue-buttons";
12
12
  import { DEFAULT_PRESET as O, ColorPalette as A } from "./ColorPalette.mjs";
13
13
  import { ColorGradient as _ } from "./ColorGradient.mjs";
@@ -126,6 +126,7 @@ const le = /* @__PURE__ */ K({
126
126
  currentView: "gradient",
127
127
  colorValue: e,
128
128
  currentPrevColor: e,
129
+ gradientValue: e,
129
130
  focused: !1
130
131
  };
131
132
  },
@@ -133,7 +134,7 @@ const le = /* @__PURE__ */ K({
133
134
  const {
134
135
  size: e,
135
136
  adaptive: o
136
- } = this.$props, i = J(this), w = i.toLanguageString(m, r[m]), y = i.toLanguageString(f, r[f]), V = i.toLanguageString(C, r[C]), n = i.toLanguageString(v, r[v]), s = i.toLanguageString(b, r[b]), B = u.call(this, this.$props.header, h.call(this)), P = u.call(this, this.$props.footer, h.call(this)), S = p.call(this, {
137
+ } = this.$props, i = J(this), w = i.toLanguageString(m, r[m]), V = i.toLanguageString(f, r[f]), y = i.toLanguageString(C, r[C]), n = i.toLanguageString(v, r[v]), s = i.toLanguageString(b, r[b]), B = c.call(this, this.$props.header, h.call(this)), P = c.call(this, this.$props.footer, h.call(this)), S = p.call(this, {
137
138
  h: l,
138
139
  template: B
139
140
  }), I = p.call(this, {
@@ -143,7 +144,7 @@ const le = /* @__PURE__ */ K({
143
144
  return l(_, {
144
145
  ref: g(this, "gradient"),
145
146
  tabIndex: -1,
146
- value: this.colorValue,
147
+ value: this.gradientValue,
147
148
  innerTabIndex: this.computedTabIndex,
148
149
  size: e,
149
150
  onChange: this.handleColorChange,
@@ -201,7 +202,7 @@ const le = /* @__PURE__ */ K({
201
202
  fillMode: "flat",
202
203
  selected: !this.isColorGradient,
203
204
  onKeydown: this.handleButtonKeydown,
204
- ariaLabel: y,
205
+ ariaLabel: V,
205
206
  size: e,
206
207
  onClick: (d) => this.handleViewChange(d, "palette"),
207
208
  svgIcon: z
@@ -214,7 +215,7 @@ const le = /* @__PURE__ */ K({
214
215
  tabIndex: this.computedTabIndex,
215
216
  type: "button",
216
217
  fillMode: "flat",
217
- ariaLabel: V,
218
+ ariaLabel: y,
218
219
  svgIcon: F,
219
220
  size: e,
220
221
  onKeydown: this.handleButtonKeydown,
@@ -278,13 +279,13 @@ const le = /* @__PURE__ */ K({
278
279
  });
279
280
  },
280
281
  handleResetColor() {
281
- this.colorValue = null, !this.showButtons && !this.adaptive && this.triggerChange();
282
+ this.colorValue = null, this.gradientValue = null, !this.showButtons && !this.adaptive && this.triggerChange();
282
283
  },
283
284
  handleColorChange(e) {
284
- this.colorValue = e.value, !this.showButtons && !this.adaptive && this.triggerChange(e);
285
+ this.colorValue = e.value, this.gradientValue = void 0, !this.showButtons && !this.adaptive && this.triggerChange(e);
285
286
  },
286
287
  handlePaletteColorChange(e) {
287
- this.colorValue = e.value, !this.showButtons && !this.adaptive && this.triggerChange(e);
288
+ this.colorValue = e.value, this.gradientValue = e.value, !this.showButtons && !this.adaptive && this.triggerChange(e);
288
289
  },
289
290
  triggerChange(e) {
290
291
  const o = U(this.colorValue, "rgba");
@@ -295,19 +296,19 @@ const le = /* @__PURE__ */ K({
295
296
  });
296
297
  },
297
298
  innerKeyDown(e) {
298
- e.keyCode === c.enter && this.triggerChange(e);
299
+ e.keyCode === u.enter && this.triggerChange(e);
299
300
  },
300
301
  gradientKeyDown(e) {
301
- e.stopPropagation(), !this.showButtons && e.keyCode === c.enter && this.triggerChange(e);
302
+ e.stopPropagation(), !this.showButtons && e.keyCode === u.enter && this.triggerChange(e);
302
303
  },
303
304
  handleButtonKeydown(e) {
304
- e.keyCode === c.enter && e.stopPropagation();
305
+ e.keyCode === u.enter && e.stopPropagation();
305
306
  },
306
307
  handleCancelBtnClick() {
307
- this.colorValue = this.computedPrevColor;
308
+ this.colorValue = this.computedPrevColor, this.gradientValue = this.computedPrevColor;
308
309
  },
309
310
  handlePrevColorClick() {
310
- this.colorValue = this.computedPrevColor;
311
+ this.colorValue = this.computedPrevColor, this.gradientValue = this.computedPrevColor;
311
312
  },
312
313
  onFocus(e) {
313
314
  this.$emit("focus", {
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),s=require("./utils/color-parser.js"),n=require("./utils/misc.js"),o=require("../textbox/TextBox.js"),u=r.defineComponent({name:"KendoHexInput",emits:{hexchange:e=>!0,blur:e=>!0,focus:e=>!0},props:{tabIndex:Number,hex:String,disabled:Boolean,id:String,size:String},computed:{isHexValid(){return!!s.parseColor(this.currentHex,"rgba")}},data(){return{currentHex:this.$props.hex,originalHex:this.$props.hex,isFocused:!1}},mounted(){this._input=this.$refs.input._input},watch:{hex:function(e){this.isFocused||(this.currentHex=e)}},render(){return r.createVNode(o.TextBox,{id:this.$props.id,value:this.currentHex,onInput:this.onChange,onChange:this.onChange,onFocus:this.onFocus,onBlur:this.onBlur,valid:this.isHexValid,disabled:this.$props.disabled,size:this.$props.size,tabIndex:this.tabIndex,ref:"input"},null)},methods:{onChange(e){const t=e.target.value,i=s.parseColor(t,"rgba");this.currentHex=t,n.isPresent(i)&&this.$emit("hexchange",{hex:t,value:i,event:e})},onBlur(e){this.isFocused=!1,n.isPresent(s.parseColor(this.currentHex,"rgba"))?this.currentHex=this.hex:this.currentHex=this.originalHex,this.$emit("blur",{event:e})},onFocus(e){this.isFocused=!0,this.$emit("focus",{event:e})}}});exports.HexInput=u;
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),i=require("./utils/color-parser.js"),n=require("./utils/misc.js"),o=require("../textbox/TextBox.js"),u=r.defineComponent({name:"KendoHexInput",emits:{hexchange:e=>!0,blur:e=>!0,focus:e=>!0},props:{tabIndex:Number,hex:String,disabled:Boolean,id:String,size:String},computed:{isHexValid(){return!!i.parseColor(this.currentHex,"rgba")||this.currentHex===void 0}},data(){return{currentHex:this.$props.hex,originalHex:this.$props.hex,isFocused:!1}},mounted(){this._input=this.$refs.input._input},watch:{hex:function(e){this.originalHex=e,this.isFocused||(this.currentHex=e)}},render(){return r.createVNode(o.TextBox,{id:this.$props.id,value:this.currentHex,onInput:this.onChange,onChange:this.onChange,onFocus:this.onFocus,onBlur:this.onBlur,valid:this.isHexValid,disabled:this.$props.disabled,size:this.$props.size,tabIndex:this.tabIndex,ref:"input"},null)},methods:{onChange(e){const t=e.target.value,s=i.parseColor(t,"rgba");this.currentHex=t,n.isPresent(s)&&this.$emit("hexchange",{hex:t,value:s,event:e})},onBlur(e){this.isFocused=!1,n.isPresent(i.parseColor(this.currentHex,"rgba"))?this.currentHex=this.hex:this.currentHex=this.originalHex,this.$emit("blur",{event:e})},onFocus(e){this.isFocused=!0,this.$emit("focus",{event:e})}}});exports.HexInput=u;
@@ -9,7 +9,7 @@ import { defineComponent as n, createVNode as o } from "vue";
9
9
  import { parseColor as i } from "./utils/color-parser.mjs";
10
10
  import { isPresent as r } from "./utils/misc.mjs";
11
11
  import { TextBox as h } from "../textbox/TextBox.mjs";
12
- const p = /* @__PURE__ */ n({
12
+ const c = /* @__PURE__ */ n({
13
13
  name: "KendoHexInput",
14
14
  emits: {
15
15
  hexchange: (e) => !0,
@@ -25,7 +25,7 @@ const p = /* @__PURE__ */ n({
25
25
  },
26
26
  computed: {
27
27
  isHexValid() {
28
- return !!i(this.currentHex, "rgba");
28
+ return !!i(this.currentHex, "rgba") || this.currentHex === void 0;
29
29
  }
30
30
  },
31
31
  data() {
@@ -40,7 +40,7 @@ const p = /* @__PURE__ */ n({
40
40
  },
41
41
  watch: {
42
42
  hex: function(e) {
43
- this.isFocused || (this.currentHex = e);
43
+ this.originalHex = e, this.isFocused || (this.currentHex = e);
44
44
  }
45
45
  },
46
46
  render() {
@@ -80,5 +80,5 @@ const p = /* @__PURE__ */ n({
80
80
  }
81
81
  });
82
82
  export {
83
- p as HexInput
83
+ c as HexInput
84
84
  };
@@ -68,7 +68,7 @@ export interface ColorGradientProps {
68
68
  */
69
69
  class?: string;
70
70
  /**
71
- * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
71
+ * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby).
72
72
  * For example these elements could contain error or hint message.
73
73
  */
74
74
  ariaDescribedBy?: string;
@@ -63,7 +63,7 @@ export interface ColorPaletteProps {
63
63
  */
64
64
  class?: string;
65
65
  /**
66
- * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
66
+ * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby).
67
67
  * For example these elements could contain error or hint message.
68
68
  */
69
69
  ariaDescribedBy?: string;
@@ -120,7 +120,7 @@ export interface ColorPickerProps {
120
120
  */
121
121
  id?: string;
122
122
  /**
123
- * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
123
+ * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby).
124
124
  * For example these elements could contain error or hint message.
125
125
  */
126
126
  ariaDescribedBy?: string;