@progress/kendo-vue-inputs 8.0.3-develop.2 → 8.0.3-develop.4

package/colors/ColorPalette.d.ts

@@ -0,0 +1,112 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { TableCell } from './models/table-cell';
+import { ColorPaletteChangeEvent } from './interfaces/ColorPaletteChangeEvent';
+import { ColorPaletteFocusEvent } from './interfaces/ColorPaletteFocusEvent';
+import { ColorPaletteBlurEvent } from './interfaces/ColorPaletteBlurEvent';
+import { PropType } from 'vue';
+/**
+ * @hidden
+ */
+export declare const DEFAULT_TILE_SIZE = 24;
+/**
+ * @hidden
+ */
+export declare const DEFAULT_COLUMNS_COUNT = 10;
+/**
+ * @hidden
+ */
+export declare const DEFAULT_PRESET = "office";
+/**
+ * @hidden
+ */
+declare const ColorPalette: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    palette: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    columns: PropType<number>;
+    tileSize: {
+        type: PropType<number | import('./models/tile-size').TileSize>;
+    };
+    modelValue: PropType<string>;
+    modelRgbaValue: PropType<string>;
+    defaultValue: PropType<string>;
+    value: PropType<string>;
+    disabled: PropType<boolean>;
+    tabIndex: PropType<number>;
+    id: PropType<string>;
+    class: PropType<string>;
+    ariaLabelledBy: PropType<string>;
+    ariaDescribedBy: PropType<string>;
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+    };
+}>, {}, {
+    focusedColor: string;
+    currentValue: any;
+}, {
+    focusedColorCooridanates(): TableCell | undefined;
+    isUncontrolled(): boolean;
+    selectedColor(): any;
+}, {
+    focus(): void;
+    onKeyDown(event: any): void;
+    onColorClick(color: string, event: any): void;
+    onFocus(event: any): void;
+    onBlur(event: any): void;
+    handleCellNavigation(event: any, horizontalStep: number, verticalStep: number): void;
+    handleEnter(event: any): void;
+    dispatchChangeEvent(value: string, event: any): void;
+    getPaletteInfo(): {
+        colors: any;
+        columns: any;
+    };
+    createCellId(cellCoords: TableCell): string;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    keydown: (event: KeyboardEvent) => true;
+    focus: (event: ColorPaletteFocusEvent) => true;
+    blur: (event: ColorPaletteBlurEvent) => true;
+    changemodel: (value: string) => true;
+    'update:modelValue': (value: string) => true;
+    'update:modelRgbaValue': (value: string) => true;
+    change: (event: ColorPaletteChangeEvent) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    palette: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    columns: PropType<number>;
+    tileSize: {
+        type: PropType<number | import('./models/tile-size').TileSize>;
+    };
+    modelValue: PropType<string>;
+    modelRgbaValue: PropType<string>;
+    defaultValue: PropType<string>;
+    value: PropType<string>;
+    disabled: PropType<boolean>;
+    tabIndex: PropType<number>;
+    id: PropType<string>;
+    class: PropType<string>;
+    ariaLabelledBy: PropType<string>;
+    ariaDescribedBy: PropType<string>;
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+    };
+}>> & Readonly<{
+    onBlur?: (event: ColorPaletteBlurEvent) => any;
+    onChange?: (event: ColorPaletteChangeEvent) => any;
+    onFocus?: (event: ColorPaletteFocusEvent) => any;
+    onKeydown?: (event: KeyboardEvent) => any;
+    onChangemodel?: (value: string) => any;
+    "onUpdate:modelValue"?: (value: string) => any;
+    "onUpdate:modelRgbaValue"?: (value: string) => any;
+}>, {
+    palette: string | string[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { ColorPalette };

package/colors/ColorPicker.d.ts

@@ -0,0 +1,279 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ColorPickerBlurEvent } from './interfaces/ColorPickerBlurEvent';
+import { ColorPickerChangeEvent } from './interfaces/ColorPickerChangeEvent';
+import { ColorPickerFocusEvent } from './interfaces/ColorPickerFocusEvent';
+import { ColorPickerActiveColorClick } from './interfaces/ColorPickerActiveColorClick';
+import { ColorPaletteChangeEvent } from './interfaces/ColorPaletteChangeEvent';
+import { FlatColorPickerViewChangeEvent } from './interfaces/FlatColorPickerViewChangeEvent';
+import { PropType } from 'vue';
+/**
+ * @hidden
+ */
+declare const ColorPicker: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modelValue: PropType<string>;
+    modelRgbaValue: PropType<string>;
+    value: {
+        type: PropType<string>;
+        default: any;
+    };
+    defaultValue: PropType<string>;
+    disabled: PropType<boolean>;
+    dir: PropType<string>;
+    id: PropType<string>;
+    ariaLabelledBy: PropType<string>;
+    ariaDescribedBy: PropType<string>;
+    showClearButton: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    showPreview: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    showButtons: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    paletteSettings: {
+        type: PropType<import('..').ColorPickerPaletteSettings>;
+        default: () => {
+            palette: string;
+        };
+    };
+    valid: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    tabIndex: {
+        type: PropType<number>;
+        default: number;
+    };
+    title: PropType<string>;
+    icon: PropType<string>;
+    svgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
+    iconClassName: PropType<string>;
+    popupSettings: {
+        type: PropType<import('..').ColorPickerPopupSettings>;
+        default: () => {};
+    };
+    gradientSettings: {
+        type: PropType<import('./interfaces/ColorGradientProps').ColorGradientProps>;
+        default: () => {
+            opacity: boolean;
+        };
+    };
+    flatColorPickerSettings: {
+        type: PropType<import('./FlatColorPicker').FlatColorPickerProps>;
+        default: () => {};
+    };
+    open: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        validator: (value: string) => boolean;
+    };
+    rounded: {
+        type: PropType<"small" | "medium" | "large" | "full" | "none">;
+        validator: (value: string) => boolean;
+    };
+    fillMode: {
+        type: PropType<"flat" | "solid" | "outline">;
+        validator: (value: string) => boolean;
+    };
+    view: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: any) => any;
+    };
+    selectedView: {
+        type: PropType<number>;
+        default: any;
+    };
+    adaptive: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    adaptiveTitle: {
+        type: PropType<string>;
+    };
+}>, {}, {
+    focused: boolean;
+    currentValue: string;
+    currentOpen: boolean;
+    flatcolorpickerRef: any;
+    windowWidth: number;
+    observer: any;
+}, {
+    isValueControlled(): boolean;
+    isOpenControlled(): boolean;
+    computedValue(): any;
+    computedOpen(): any;
+    wrapperClassName(): {
+        [x: string]: any;
+        'k-picker': boolean;
+        'k-colorpicker': boolean;
+        'k-icon-picker': boolean;
+        'k-invalid': boolean;
+        'k-disabled': any;
+        'k-focus': any;
+    };
+    animationStyles(): {
+        top: number;
+        width: string;
+        height: string;
+    };
+    classNameAdaptive(): string;
+    adaptiveState(): boolean;
+}, {
+    calculateMedia(entries: ResizeObserverEntry[]): void;
+    focusElement(): void;
+    setOpen(nextOpen: boolean, isBlur?: boolean): void;
+    onButtonKeyDown(event: any): void;
+    onKeyDownHandler(event: any): void;
+    onOpenHandler(): void;
+    onClickHandler(): void;
+    onActiveColorClickHandler(event: any): void;
+    isViewFocused(): boolean;
+    onButtonBlur(event: any): void;
+    onFocusHandler(event: any): void;
+    onBlurTimeout(): void;
+    onBlurHandler(): void;
+    onViewChange(event: any): void;
+    onChangeHandler(event: ColorPaletteChangeEvent, isPalette?: boolean): void;
+    onFlatChangeHandler(event: FlatColorPickerViewChangeEvent): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    open: () => true;
+    close: () => true;
+    changemodel: (value: string) => true;
+    'update:modelValue': (value: string) => true;
+    'update:modelRgbaValue': (value: string) => true;
+    activecolorclick: (event: ColorPickerActiveColorClick) => true;
+    focus: (event: ColorPickerFocusEvent) => true;
+    blur: (event: ColorPickerBlurEvent) => true;
+    change: (event: ColorPickerChangeEvent) => true;
+    viewchange: (event: FlatColorPickerViewChangeEvent) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: PropType<string>;
+    modelRgbaValue: PropType<string>;
+    value: {
+        type: PropType<string>;
+        default: any;
+    };
+    defaultValue: PropType<string>;
+    disabled: PropType<boolean>;
+    dir: PropType<string>;
+    id: PropType<string>;
+    ariaLabelledBy: PropType<string>;
+    ariaDescribedBy: PropType<string>;
+    showClearButton: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    showPreview: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    showButtons: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    paletteSettings: {
+        type: PropType<import('..').ColorPickerPaletteSettings>;
+        default: () => {
+            palette: string;
+        };
+    };
+    valid: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    tabIndex: {
+        type: PropType<number>;
+        default: number;
+    };
+    title: PropType<string>;
+    icon: PropType<string>;
+    svgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
+    iconClassName: PropType<string>;
+    popupSettings: {
+        type: PropType<import('..').ColorPickerPopupSettings>;
+        default: () => {};
+    };
+    gradientSettings: {
+        type: PropType<import('./interfaces/ColorGradientProps').ColorGradientProps>;
+        default: () => {
+            opacity: boolean;
+        };
+    };
+    flatColorPickerSettings: {
+        type: PropType<import('./FlatColorPicker').FlatColorPickerProps>;
+        default: () => {};
+    };
+    open: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        validator: (value: string) => boolean;
+    };
+    rounded: {
+        type: PropType<"small" | "medium" | "large" | "full" | "none">;
+        validator: (value: string) => boolean;
+    };
+    fillMode: {
+        type: PropType<"flat" | "solid" | "outline">;
+        validator: (value: string) => boolean;
+    };
+    view: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: any) => any;
+    };
+    selectedView: {
+        type: PropType<number>;
+        default: any;
+    };
+    adaptive: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    adaptiveTitle: {
+        type: PropType<string>;
+    };
+}>> & Readonly<{
+    onBlur?: (event: ColorPickerBlurEvent) => any;
+    onChange?: (event: ColorPickerChangeEvent) => any;
+    onClose?: () => any;
+    onFocus?: (event: ColorPickerFocusEvent) => any;
+    onChangemodel?: (value: string) => any;
+    "onUpdate:modelValue"?: (value: string) => any;
+    "onUpdate:modelRgbaValue"?: (value: string) => any;
+    onOpen?: () => any;
+    onViewchange?: (event: FlatColorPickerViewChangeEvent) => any;
+    onActivecolorclick?: (event: ColorPickerActiveColorClick) => any;
+}>, {
+    value: string;
+    tabIndex: number;
+    view: string;
+    adaptive: boolean;
+    valid: boolean;
+    showClearButton: boolean;
+    open: boolean;
+    popupSettings: import('..').ColorPickerPopupSettings;
+    selectedView: number;
+    showPreview: boolean;
+    showButtons: boolean;
+    gradientSettings: import('./interfaces/ColorGradientProps').ColorGradientProps;
+    paletteSettings: import('..').ColorPickerPaletteSettings;
+    flatColorPickerSettings: import('./FlatColorPicker').FlatColorPickerProps;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { ColorPicker };

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 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:()=>!0,close:()=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,"update:modelRgbaValue":e=>!0,activecolorclick:e=>!0,focus:e=>!0,blur:e=>!0,change:e=>!0,viewchange:e=>!0},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,validator:function(e){return["small","medium","large"].includes(e)}},rounded:{type:String,validator:function(e){return["none","small","medium","large","full"].includes(e)}},fillMode:{type:String,validator:function(e){return["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:l,view:c,selectedView:d,showClearButton:p,showPreview:h,showButtons:f,popupSettings:g,size:m,adaptiveTitle:k}=this.$props,s=O.provideLocalizationService(this),v=s.toLanguageString(n.colorPickerDropdownButtonAriaLabel,n.messages[n.colorPickerDropdownButtonAriaLabel]),b=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:c,selectedView:d,showClearButton:p,showPreview:h,showButtons:this.adaptiveState?!1:f,size:this.adaptiveState?"large":m,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:l,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:r=>{this.buttonRef=r},onClick:this.onClickHandler,rounded:null,class:"k-input-button",icon:"caret-alt-down",svgIcon:$.caretAltDownIcon,"aria-label":v},null),!this.adaptiveState&&a.createVNode(V.Picker,{dir:l,id:this._popupId,open:this.computedOpen,onOpen:this.onOpenHandler,popupAnchor:this.focusableElementGuid,popupSettings:{...g}},R(e=u.call(this))?e:{default:()=>[e]}),this.adaptiveState&&a.createVNode(A.ColorsAdaptiveMode,{expand:this.computedOpen,animationStyles:this.animationStyles,classNameAdaptive:this.classNameAdaptive,title:b,applyText:C,cancelText:y,componentToRender:u.call(this),onActionSheetClose:()=>this.setOpen(!this.computedOpen),onCancelBtnClick:()=>this.flatcolorpickerRef.handleCancelBtnClick(),onApplyBtnClick:r=>this.flatcolorpickerRef.triggerChange(r)},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;
+"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:()=>!0,close:()=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,"update:modelRgbaValue":e=>!0,activecolorclick:e=>!0,focus:e=>!0,blur:e=>!0,change:e=>!0,viewchange:e=>!0},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,validator:function(e){return["small","medium","large"].includes(e)}},rounded:{type:String,validator:function(e){return["none","small","medium","large","full"].includes(e)}},fillMode:{type:String,validator:function(e){return["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:l,view:c,selectedView:d,showClearButton:p,showPreview:h,showButtons:f,popupSettings:g,size:m,adaptiveTitle:k}=this.$props,s=O.provideLocalizationService(this),v=s.toLanguageString(n.colorPickerDropdownButtonAriaLabel,n.messages[n.colorPickerDropdownButtonAriaLabel]),b=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:c,selectedView:d,showClearButton:p,showPreview:h,showButtons:this.adaptiveState?!1:f,size:this.adaptiveState?"large":m,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:l,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:r=>{this.buttonRef=r},onClick:this.onClickHandler,rounded:null,class:"k-input-button",icon:"caret-alt-down",svgIcon:$.caretAltDownIcon,"aria-label":v,disabled:o},null),!this.adaptiveState&&a.createVNode(V.Picker,{dir:l,id:this._popupId,open:this.computedOpen,onOpen:this.onOpenHandler,popupAnchor:this.focusableElementGuid,popupSettings:{...g}},R(e=u.call(this))?e:{default:()=>[e]}),this.adaptiveState&&a.createVNode(A.ColorsAdaptiveMode,{expand:this.computedOpen,animationStyles:this.animationStyles,classNameAdaptive:this.classNameAdaptive,title:b,applyText:C,cancelText:y,componentToRender:u.call(this),onActionSheetClose:()=>this.setOpen(!this.computedOpen),onCancelBtnClick:()=>this.flatcolorpickerRef.handleCancelBtnClick(),onApplyBtnClick:r=>this.flatcolorpickerRef.triggerChange(r)},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;

package/colors/ColorPicker.mjs

@@ -13,7 +13,7 @@ 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 r, colorPickerAdaptiveTitle as m, flatColorPickerApplyBtn as g, flatColorPickerCancelBtn as b } from "../messages/main.mjs";
+import { colorPickerDropdownButtonAriaLabel as f, messages as l, 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";
@@ -231,7 +231,7 @@ const ue = /* @__PURE__ */ A({
       popupSettings: S,
       size: B,
       adaptiveTitle: V
-    } = this.$props, s = G(this), O = s.toLanguageString(f, r[f]), $ = V || s.toLanguageString(m, r[m]), T = s.toLanguageString(g, r[g]), P = s.toLanguageString(b, r[b]), d = function() {
+    } = this.$props, s = G(this), O = s.toLanguageString(f, l[f]), $ = V || s.toLanguageString(m, l[m]), T = s.toLanguageString(g, l[g]), P = s.toLanguageString(b, l[b]), d = function() {
       return I(x, {
         onKeydown: this.onKeyDownHandler,
         ref: _(this, "flatcolorpicker"),
@@ -287,15 +287,16 @@ const ue = /* @__PURE__ */ A({
     }, null)])]), o(D, {
       type: "button",
       tabIndex: -1,
-      ref: (l) => {
-        this.buttonRef = l;
+      ref: (r) => {
+        this.buttonRef = r;
       },
       onClick: this.onClickHandler,
       rounded: null,
       class: "k-input-button",
       icon: "caret-alt-down",
       svgIcon: U,
-      "aria-label": O
+      "aria-label": O,
+      disabled: i
     }, null), !this.adaptiveState && o(j, {
       dir: u,
       id: this._popupId,
@@ -317,7 +318,7 @@ const ue = /* @__PURE__ */ A({
       componentToRender: d.call(this),
       onActionSheetClose: () => this.setOpen(!this.computedOpen),
       onCancelBtnClick: () => this.flatcolorpickerRef.handleCancelBtnClick(),
-      onApplyBtnClick: (l) => this.flatcolorpickerRef.triggerChange(l)
+      onApplyBtnClick: (r) => this.flatcolorpickerRef.triggerChange(r)
     }, null)]);
   },
   methods: {