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

package/colors/ColorPicker.mjs

@@ -5,20 +5,22 @@
  * 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);
+import { defineComponent as A, createVNode as o, isVNode as R, h as I } from "vue";
+import { Button as D } from "@progress/kendo-vue-buttons";
+import { ADAPTIVE_SMALL_BREAKPOINT as M, ADAPTIVE_MEDIUM_BREAKPOINT as E, kendoThemeMaps as c, validatePackage as N, guid as p, canUseDOM as H, getRef as a, getTabIndex as F, classNames as h, Icon as L, getIconName as K, Keys as n, setRef as _ } from "@progress/kendo-vue-common";
+import { packageMetadata as z } from "../package-metadata.mjs";
+import { Picker as j } from "./Picker.mjs";
+import { FlatColorPicker as x } from "./FlatColorPicker.mjs";
+import { DEFAULT_GRADIENT_SETTINGS as W } from "./utils/color-cache.mjs";
+import { provideLocalizationService as G } from "@progress/kendo-vue-intl";
+import { colorPickerDropdownButtonAriaLabel as f, messages as s, colorPickerAdaptiveTitle as m, flatColorPickerApplyBtn as g, flatColorPickerCancelBtn as b } from "../messages/main.mjs";
+import { caretAltDownIcon as U } from "@progress/kendo-svg-icons";
+import { DEFAULT_PRESET as q } from "./ColorPalette.mjs";
+import { ColorsAdaptiveMode as J } from "./common/ColorsAdaptiveMode.mjs";
+function Q(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !R(e);
 }
-const Q = /* @__PURE__ */ w({
+const ue = /* @__PURE__ */ A({
   name: "KendoColorPicker",
   model: {
     event: "changemodel"
@@ -63,7 +65,9 @@ const Q = /* @__PURE__ */ w({
     paletteSettings: {
       type: Object,
       default: function() {
-        return E;
+        return {
+          palette: q
+        };
       }
     },
     valid: {
@@ -87,7 +91,7 @@ const Q = /* @__PURE__ */ w({
     gradientSettings: {
       type: Object,
       default: function() {
-        return F;
+        return W;
       }
     },
     flatColorPickerSettings: {
@@ -131,18 +135,34 @@ const Q = /* @__PURE__ */ w({
     selectedView: {
       type: Number,
       default: void 0
+    },
+    adaptive: {
+      type: Boolean,
+      default: !1
+    },
+    adaptiveTitle: {
+      type: String
     }
   },
   inject: {
     kendoLocalizationService: {
       default: null
+    },
+    adaptiveModeBreakpoints: {
+      default: {
+        small: M,
+        medium: E
+      }
     }
   },
   data() {
     return {
       focused: !1,
       currentValue: this.$props.defaultValue,
-      currentOpen: !1
+      currentOpen: !1,
+      flatcolorpickerRef: null,
+      windowWidth: 0,
+      observer: null
     };
   },
   computed: {
@@ -168,55 +188,76 @@ const Q = /* @__PURE__ */ w({
         "k-picker": !0,
         "k-colorpicker": !0,
         "k-icon-picker": !0,
-        [`k-picker-${r.sizeMap[e] || e}`]: e,
+        [`k-picker-${c.sizeMap[e] || e}`]: e,
         [`k-picker-${i}`]: i,
-        [`k-rounded-${r.roundedMap[t] || t}`]: t,
+        [`k-rounded-${c.roundedMap[t] || t}`]: t,
         "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() {
-    $(I), this._popupId = "popup" + a(), this.focusableElementGuid = a();
+    N(z), this._popupId = "popup" + p(), this.focusableElementGuid = p();
   },
   mounted() {
-    this.button = l(this, "button");
+    this.observer = H && window.ResizeObserver && new ResizeObserver(this.calculateMedia), document != null && document.body && this.observer && this.observer.observe(document.body), this.flatcolorpickerRef = a(this, "flatcolorpicker"), this.button = a(this, "button");
+  },
+  unmounted() {
+    var e;
+    (e = this.document) != null && e.body && this.observer && this.observer.disconnect();
   },
   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, {
+    const {
+      disabled: i,
+      tabIndex: t,
+      dir: u,
+      view: k,
+      selectedView: v,
+      showClearButton: w,
+      showPreview: y,
+      showButtons: C,
+      popupSettings: S,
+      size: B,
+      adaptiveTitle: V
+    } = this.$props, l = G(this), O = l.toLanguageString(f, s[f]), $ = V || l.toLanguageString(m, s[m]), T = l.toLanguageString(g, s[g]), P = l.toLanguageString(b, s[b]), d = function() {
+      return I(x, {
         onKeydown: this.onKeyDownHandler,
-        ref: P(this, "flatcolorpicker"),
-        view: h,
-        selectedView: f,
-        showClearButton: m,
-        showPreview: g,
-        showButtons: b,
+        ref: _(this, "flatcolorpicker"),
+        view: k,
+        selectedView: v,
+        showClearButton: w,
+        showPreview: y,
+        showButtons: this.adaptiveState ? !1 : C,
+        size: this.adaptiveState ? "large" : B,
         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 o("span", {
       class: this.wrapperClassName,
       role: "combobox",
-      dir: s,
+      dir: u,
       id: this.$props.id,
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
@@ -224,7 +265,7 @@ const Q = /* @__PURE__ */ w({
       "aria-haspopup": "dialog",
       "aria-expanded": this.computedOpen,
       ref: this.focusableElementGuid,
-      tabindex: O(p, c),
+      tabindex: F(t, i),
       title: this.$props.title,
       onKeydown: this.onButtonKeyDown,
       onFocusin: this.onFocusHandler,
@@ -233,45 +274,60 @@ const Q = /* @__PURE__ */ w({
       onClick: this.onActiveColorClickHandler,
       class: "k-input-inner"
     }, [o("span", {
-      class: u("k-value-icon", "k-color-preview", {
+      class: h("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),
+    }, [(this.iconClassName || this.icon || this.svgIcon) && o(L, {
+      class: h("k-color-preview-icon", this.iconClassName),
+      name: K(this.icon),
       icon: this.svgIcon
     }, null), o("span", {
       class: "k-color-preview-mask",
       style: {
         backgroundColor: this.computedValue
       }
-    }, null)])]), o(v, {
+    }, null)])]), o(D, {
       type: "button",
       tabIndex: -1,
-      ref: (C) => {
-        this.buttonRef = C;
+      ref: (r) => {
+        this.buttonRef = r;
       },
       onClick: this.onClickHandler,
       rounded: null,
       class: "k-input-button",
       icon: "caret-alt-down",
-      svgIcon: K,
-      "aria-label": t
-    }, null), o(D, {
-      dir: s,
+      svgIcon: U,
+      "aria-label": O
+    }, null), !this.adaptiveState && o(j, {
+      dir: u,
       id: this._popupId,
       open: this.computedOpen,
       onOpen: this.onOpenHandler,
       popupAnchor: this.focusableElementGuid,
       popupSettings: {
-        ...k
+        ...S
       }
-    }, L(e = V.call(this)) ? e : {
+    }, Q(e = d.call(this)) ? e : {
       default: () => [e]
-    })]);
+    }), this.adaptiveState && o(J, {
+      expand: this.computedOpen,
+      animationStyles: this.animationStyles,
+      classNameAdaptive: this.classNameAdaptive,
+      title: $,
+      applyText: T,
+      cancelText: P,
+      componentToRender: d.call(this),
+      onActionSheetClose: () => this.setOpen(!this.computedOpen),
+      onCancelBtnClick: () => this.flatcolorpickerRef.handleCancelBtnClick(),
+      onApplyBtnClick: (r) => this.flatcolorpickerRef.triggerChange(r)
+    }, null)]);
   },
   methods: {
+    calculateMedia(e) {
+      for (let i of e)
+        this.windowWidth = i.target.clientWidth;
+    },
     focusElement() {
       this.$el && this.$el.focus();
     },
@@ -309,7 +365,7 @@ const Q = /* @__PURE__ */ w({
       i && t === n.up && (e.preventDefault(), e.stopPropagation(), this.setOpen(!1), this.focusElement());
     },
     onOpenHandler() {
-      const e = l(this, "flatcolorpicker");
+      const e = a(this, "flatcolorpicker");
       e && e.focus();
     },
     onClickHandler() {
@@ -339,7 +395,7 @@ const Q = /* @__PURE__ */ w({
       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);
+      clearTimeout(this.blurTimeoutRef), this.palette = a(this, "palette"), this.gradient = a(this, "gradient"), this.blurTimeoutRef = setTimeout(this.onBlurTimeout, 200);
     },
     onViewChange(e) {
       this.$emit("viewchange", e);
@@ -358,5 +414,5 @@ const Q = /* @__PURE__ */ w({
   }
 });
 export {
-  Q as ColorPicker
+  ue as ColorPicker
 };

package/colors/FlatColorPicker.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 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;
+"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"),r=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: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 P.DEFAULT_GRADIENT_SETTINGS}},paletteSettings:{type:Object,default:function(){return{palette:u.DEFAULT_PRESET}}},size:{type:String,default:"medium"},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:l}=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]),i=n.toLanguageString(a.flatColorPickerCancelBtn,a.messages[a.flatColorPickerCancelBtn]),s=n.toLanguageString(a.flatColorPickerApplyBtn,a.messages[a.flatColorPickerApplyBtn]),m=o.templateRendering.call(this,this.$props.header,o.getListeners.call(this)),f=o.templateRendering.call(this,this.$props.footer,o.getListeners.call(this)),k=o.getTemplate.call(this,{h:t.h,template:m}),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:l,...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},[k,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:p,size:e,onClick:c=>this.handleViewChange(c,"gradient")},{default:()=>[t.createVNode(o.Icon,{size:e,name:"droplet-slider",icon:d.dropletSliderIcon},null)]}),t.createVNode(r.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")},{default:()=>[t.createVNode(o.Icon,{size:e,name:"palette",icon: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(r.Button,{tabIndex:this.computedTabIndex,type:"button",fillMode:"flat",ariaLabel:C,size:e,onKeydown:this.handleButtonKeydown,onClick:this.handleResetColor},{default:()=>[t.createVNode(o.Icon,{size:e,name:"droplet-slash",icon:d.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?b.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",size:e,onKeydown:this.handleButtonKeydown,onClick:this.handleCancelBtnClick},h(i)?i:{default:()=>[i]}),t.createVNode(r.Button,{tabIndex:this.computedTabIndex,type:"button",class:"k-coloreditor-apply k-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 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.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 l=B.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=I;

package/colors/FlatColorPicker.mjs

@@ -5,21 +5,21 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as K, h as i, createVNode as t, isVNode as T } from "vue";
-import { dropletSliderIcon as x, paletteIcon as F, dropletSlashIcon as L } from "@progress/kendo-svg-icons";
-import { validatePackage as G, templateRendering as u, getListeners as h, getTemplate as p, getTabIndex as R, classNames as D, Icon as d, focusFirstFocusableChild as M, focusContainer as j, Keys as c, setRef as g } from "@progress/kendo-vue-common";
-import { ButtonGroup as N, Button as l } from "@progress/kendo-vue-buttons";
-import { ColorPalette as E } from "./ColorPalette.mjs";
-import { ColorGradient as O } from "./ColorGradient.mjs";
-import { packageMetadata as A } from "../package-metadata.mjs";
-import { flatColorPickerGradientBtn as m, messages as a, flatColorPickerPaletteBtn as f, flatColorPickerClearBtn as C, flatColorPickerCancelBtn as k, flatColorPickerApplyBtn as b } from "../messages/main.mjs";
-import { parseColor as _ } from "./utils/color-parser.mjs";
-import { DEFAULT_GRADIENT_SETTINGS as z, DEFAULT_PALETTE_SETTINGS as H } from "./utils/color-cache.mjs";
-import { provideLocalizationService as U } from "@progress/kendo-vue-intl";
-function w(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !T(e);
+import { defineComponent as T, h as n, createVNode as t, isVNode as z } from "vue";
+import { dropletSliderIcon as F, paletteIcon as L, dropletSlashIcon as R } from "@progress/kendo-svg-icons";
+import { validatePackage as M, templateRendering as h, getListeners as p, getTemplate as g, getTabIndex as G, classNames as D, kendoThemeMaps as j, Icon as c, focusFirstFocusableChild as N, focusContainer as E, Keys as u, setRef as m } from "@progress/kendo-vue-common";
+import { ButtonGroup as O, Button as l } from "@progress/kendo-vue-buttons";
+import { DEFAULT_PRESET as A, ColorPalette as _ } from "./ColorPalette.mjs";
+import { ColorGradient as H } from "./ColorGradient.mjs";
+import { packageMetadata as U } from "../package-metadata.mjs";
+import { flatColorPickerGradientBtn as f, messages as a, flatColorPickerPaletteBtn as C, flatColorPickerClearBtn as k, flatColorPickerCancelBtn as b, flatColorPickerApplyBtn as w } from "../messages/main.mjs";
+import { parseColor as q } from "./utils/color-parser.mjs";
+import { DEFAULT_GRADIENT_SETTINGS as J } from "./utils/color-cache.mjs";
+import { provideLocalizationService as Q } from "@progress/kendo-vue-intl";
+function v(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !z(e);
 }
-const ae = /* @__PURE__ */ K({
+const re = /* @__PURE__ */ T({
   name: "KendoFlatColorPicker",
   emits: {
     viewchange: null,
@@ -67,15 +67,22 @@ const ae = /* @__PURE__ */ K({
     gradientSettings: {
       type: Object,
       default: function() {
-        return z;
+        return J;
       }
     },
     paletteSettings: {
       type: Object,
       default: function() {
-        return H;
+        return {
+          palette: A
+        };
       }
-    }
+    },
+    size: {
+      type: String,
+      default: "medium"
+    },
+    adaptive: Boolean
   },
   inject: {
     kendoLocalizationService: {
@@ -83,7 +90,7 @@ const ae = /* @__PURE__ */ K({
     }
   },
   created() {
-    G(A);
+    M(U);
   },
   computed: {
     isColorGradient() {
@@ -123,47 +130,54 @@ const ae = /* @__PURE__ */ K({
     };
   },
   render() {
-    const e = U(this), o = e.toLanguageString(m, a[m]), v = e.toLanguageString(f, a[f]), V = e.toLanguageString(C, a[C]), n = e.toLanguageString(k, a[k]), r = e.toLanguageString(b, a[b]), y = u.call(this, this.$props.header, h.call(this)), B = u.call(this, this.$props.footer, h.call(this)), P = p.call(this, {
-      h: i,
-      template: y
-    }), S = p.call(this, {
-      h: i,
-      template: B
-    }), I = function() {
-      return i(O, {
-        ref: g(this, "gradient"),
+    const {
+      size: e,
+      adaptive: o
+    } = this.$props, i = Q(this), y = i.toLanguageString(f, a[f]), V = i.toLanguageString(C, a[C]), B = i.toLanguageString(k, a[k]), r = i.toLanguageString(b, a[b]), s = i.toLanguageString(w, a[w]), P = h.call(this, this.$props.header, p.call(this)), S = h.call(this, this.$props.footer, p.call(this)), I = g.call(this, {
+      h: n,
+      template: P
+    }), $ = g.call(this, {
+      h: n,
+      template: S
+    }), K = function() {
+      return n(H, {
+        ref: m(this, "gradient"),
         tabIndex: -1,
         value: this.colorValue,
         innerTabIndex: this.computedTabIndex,
+        size: e,
         onChange: this.handleColorChange,
         onKeydown: this.innerKeyDown,
+        adaptive: o,
         ...this.gradientSettings
       });
-    }, $ = function() {
-      return i(E, {
-        ref: g(this, "palette"),
+    }, x = function() {
+      return n(_, {
+        ref: m(this, "palette"),
         tabIndex: this.computedTabIndex,
         value: this.colorValue,
+        size: e,
         onChange: this.handlePaletteColorChange,
         onKeydown: this.gradientKeyDown,
         ...this.paletteSettings
       });
     };
     return t("div", {
-      tabindex: R(this.$props.tabIndex, this.$props.disabled),
+      tabindex: G(this.$props.tabIndex, this.$props.disabled),
       onFocus: this.onFocus,
       onBlur: this.onBlur,
       onFocusout: this.onFocusout,
       onKeydown: this.onKeyDownHandler,
       class: D("k-flatcolorpicker k-coloreditor", {
+        [`k-coloreditor-${j.sizeMap[e] || e}`]: e,
         "k-disabled": this.$props.disabled
       }),
       "aria-disabled": this.$props.disabled
-    }, [P, this.$props.showClearButton && this.$props.showPreview && t("div", {
+    }, [I, this.$props.showClearButton && this.$props.showPreview && t("div", {
       class: "k-coloreditor-header k-hstack"
     }, [this.$props.view === "combo" && t("div", {
       class: "k-coloreditor-header-actions k-hstack"
-    }, [t(N, {
+    }, [t(O, {
       class: "k-button-group-flat"
     }, {
       default: () => [t(l, {
@@ -173,12 +187,14 @@ const ae = /* @__PURE__ */ K({
         fillMode: "flat",
         selected: this.isColorGradient,
         onKeydown: this.handleButtonKeydown,
-        ariaLabel: o,
-        onClick: (s) => this.handleViewChange(s, "gradient")
+        ariaLabel: y,
+        size: e,
+        onClick: (d) => this.handleViewChange(d, "gradient")
       }, {
-        default: () => [t(d, {
+        default: () => [t(c, {
+          size: e,
           name: "droplet-slider",
-          icon: x
+          icon: F
         }, null)]
       }), t(l, {
         tabIndex: this.computedTabIndex,
@@ -187,12 +203,14 @@ const ae = /* @__PURE__ */ K({
         fillMode: "flat",
         selected: !this.isColorGradient,
         onKeydown: this.handleButtonKeydown,
-        ariaLabel: v,
-        onClick: (s) => this.handleViewChange(s, "palette")
+        ariaLabel: V,
+        size: e,
+        onClick: (d) => this.handleViewChange(d, "palette")
       }, {
-        default: () => [t(d, {
+        default: () => [t(c, {
+          size: e,
           name: "palette",
-          icon: F
+          icon: L
         }, null)]
       })]
     })]), t("div", {
@@ -203,13 +221,15 @@ const ae = /* @__PURE__ */ K({
       tabIndex: this.computedTabIndex,
       type: "button",
       fillMode: "flat",
-      ariaLabel: V,
+      ariaLabel: B,
+      size: e,
       onKeydown: this.handleButtonKeydown,
       onClick: this.handleResetColor
     }, {
-      default: () => [t(d, {
+      default: () => [t(c, {
+        size: e,
         name: "droplet-slash",
-        icon: L
+        icon: R
       }, null)]
     }), this.$props.showPreview && t("div", {
       class: "k-coloreditor-preview k-vstack"
@@ -230,35 +250,37 @@ const ae = /* @__PURE__ */ K({
       class: "k-color-preview-mask"
     }, null)])])])]), t("div", {
       class: "k-coloreditor-views k-vstack"
-    }, [this.isColorGradient ? I.call(this) : $.call(this)]), this.$props.showButtons && t("div", {
+    }, [this.isColorGradient ? K.call(this) : x.call(this)]), this.$props.showButtons && t("div", {
       class: "k-coloreditor-footer k-actions k-actions-end"
     }, [t(l, {
       tabIndex: this.computedTabIndex,
       type: "button",
       class: "k-coloreditor-cancel",
+      size: e,
       onKeydown: this.handleButtonKeydown,
       onClick: this.handleCancelBtnClick
-    }, w(n) ? n : {
-      default: () => [n]
+    }, v(r) ? r : {
+      default: () => [r]
     }), t(l, {
       tabIndex: this.computedTabIndex,
       type: "button",
       class: "k-coloreditor-apply k-primary",
+      size: e,
       onKeydown: this.handleButtonKeydown,
       onClick: this.triggerChange
-    }, w(r) ? r : {
-      default: () => [r]
-    })]), S]);
+    }, v(s) ? s : {
+      default: () => [s]
+    })]), $]);
   },
   methods: {
     focus() {
       this.focused = !0, setTimeout(() => {
-        M(this.$el);
+        N(this.$el);
       }, 1);
     },
     onKeyDownHandler(e) {
       const o = this.$el;
-      this.focused = j(e, o), this.$emit("keydown", e);
+      this.focused = E(e, o), this.$emit("keydown", e);
     },
     handleViewChange(e, o) {
       this.currentView = o, this.$emit("viewchange", {
@@ -267,16 +289,16 @@ const ae = /* @__PURE__ */ K({
       });
     },
     handleResetColor() {
-      this.colorValue = null, this.showButtons || this.triggerChange();
+      this.colorValue = null, !this.showButtons && !this.adaptive && this.triggerChange();
     },
     handleColorChange(e) {
-      this.colorValue = e.value, this.showButtons || this.triggerChange(e);
+      this.colorValue = e.value, !this.showButtons && !this.adaptive && this.triggerChange(e);
     },
     handlePaletteColorChange(e) {
-      this.colorValue = e.value, this.showButtons || this.triggerChange(e);
+      this.colorValue = e.value, !this.showButtons && !this.adaptive && this.triggerChange(e);
     },
     triggerChange(e) {
-      const o = _(this.colorValue, "rgba");
+      const o = q(this.colorValue, "rgba");
       this.currentPrevColor = this.colorValue, this.$emit("changemodel", this.colorValue), this.$emit("update:modelValue", this.colorValue), this.$emit("update:modelRgbaValue", o), this.$emit("change", {
         event: e,
         value: this.colorValue,
@@ -284,13 +306,13 @@ const ae = /* @__PURE__ */ K({
       });
     },
     innerKeyDown(e) {
-      e.keyCode === c.enter && this.triggerChange(e);
+      e.keyCode === u.enter && this.triggerChange(e);
     },
     gradientKeyDown(e) {
-      e.stopPropagation(), !this.showButtons && e.keyCode === c.enter && this.triggerChange(e);
+      e.stopPropagation(), !this.showButtons && e.keyCode === u.enter && this.triggerChange(e);
     },
     handleButtonKeydown(e) {
-      e.keyCode === c.enter && e.stopPropagation();
+      e.keyCode === u.enter && e.stopPropagation();
     },
     handleCancelBtnClick() {
       this.colorValue = this.computedPrevColor;
@@ -319,5 +341,5 @@ const ae = /* @__PURE__ */ K({
   }
 });
 export {
-  ae as FlatColorPicker
+  re as FlatColorPicker
 };

package/colors/HexInput.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 i=require("vue"),n=require("./utils/color-parser.js"),s=require("./utils/misc.js"),o=require("../textbox/TextBox.js"),u=i.defineComponent({name:"KendoHexInput",emits:{hexchange:null,blur:null,focus:null},props:{tabIndex:Number,hex:String,disabled:Boolean,id:String},computed:{isHexValid(){return!!n.parseColor(this.currentHex,"rgba")}},data(){return{currentHex:this.$props.hex,originalHex:this.$props.hex}},mounted(){this._input=this.$refs.input._input},watch:{hex:function(e){this.currentHex=e}},render(){return i.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,tabIndex:this.tabIndex,ref:"input"},null)},methods:{onChange(e){const t=e.target.value,r=n.parseColor(t,"rgba");this.currentHex=t,s.isPresent(r)&&this.$emit("hexchange",{hex:t,value:r,event:e})},onBlur(e){s.isPresent(n.parseColor(this.hex,"rgba"))||(this.currentHex=this.originalHex),this.$emit("blur",e)},onFocus(e){this.$emit("focus",e)}}});exports.HexInput=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),r=require("./utils/color-parser.js"),s=require("./utils/misc.js"),o=require("../textbox/TextBox.js"),u=n.defineComponent({name:"KendoHexInput",emits:{hexchange:null,blur:null,focus:null},props:{tabIndex:Number,hex:String,disabled:Boolean,id:String,size:String},computed:{isHexValid(){return!!r.parseColor(this.currentHex,"rgba")}},data(){return{currentHex:this.$props.hex,originalHex:this.$props.hex}},mounted(){this._input=this.$refs.input._input},watch:{hex:function(e){this.currentHex=e}},render(){return n.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=r.parseColor(t,"rgba");this.currentHex=t,s.isPresent(i)&&this.$emit("hexchange",{hex:t,value:i,event:e})},onBlur(e){s.isPresent(r.parseColor(this.hex,"rgba"))||(this.currentHex=this.originalHex),this.$emit("blur",e)},onFocus(e){this.$emit("focus",e)}}});exports.HexInput=u;