@progress/kendo-vue-buttons 8.2.0 → 8.3.0-develop.2

package/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,67 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PropType } from 'vue';
+import { SegmentedControlState, SegmentedItemProps } from './interfaces';
+/**
+ * Represents the Kendo UI for Vue SegmentedControl component.
+ *
+ * The SegmentedControl displays a horizontal set of mutually exclusive button segments,
+ * allowing the user to select one option at a time.
+ * @hidden
+ */
+declare const SegmentedControl: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    items: {
+        type: PropType<SegmentedItemProps[]>;
+        default: () => any[];
+    };
+    size: PropType<"small" | "medium" | "large">;
+    layoutMode: {
+        type: PropType<"stretch" | "compact">;
+        default: string;
+    };
+    value: PropType<string>;
+    defaultValue: PropType<string>;
+    itemTemplate: PropType<string | ((itemData: SegmentedItemProps) => any)>;
+}>, {}, {
+    interactionState: SegmentedControlState;
+}, {
+    selectedItemValue(): string | undefined;
+    sizeClass(): string | undefined;
+    buttonClass(): (itemValue: string, disabled: boolean | undefined, isSelected: boolean) => string;
+    iconClass(): (iconClassName: string | undefined, isSelected: boolean) => string;
+}, {
+    updateThumbPosition(): void;
+    updateState(state: Partial<SegmentedControlState>): void;
+    handleButtonClick(itemData: SegmentedItemProps, e: MouseEvent): void;
+    handleMouseEnter(itemValue: string, disabled: boolean | undefined, onMouseEnter: (e: MouseEvent) => void, e: MouseEvent): void;
+    handleMouseLeave(onMouseLeave: (e: MouseEvent) => void, e: MouseEvent): void;
+    handleFocus(itemValue: string, onFocus: (e: FocusEvent) => void, e: FocusEvent): void;
+    handleBlur(onBlur: (e: FocusEvent) => void, e: FocusEvent): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value: string) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    items: {
+        type: PropType<SegmentedItemProps[]>;
+        default: () => any[];
+    };
+    size: PropType<"small" | "medium" | "large">;
+    layoutMode: {
+        type: PropType<"stretch" | "compact">;
+        default: string;
+    };
+    value: PropType<string>;
+    defaultValue: PropType<string>;
+    itemTemplate: PropType<string | ((itemData: SegmentedItemProps) => any)>;
+}>> & Readonly<{
+    onChange?: (value: string) => any;
+}>, {
+    items: SegmentedItemProps[];
+    layoutMode: "stretch" | "compact";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { SegmentedControl };
+export type { SegmentedControlProps, SegmentedItemProps } from './interfaces';

package/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),o=require("@progress/kendo-vue-common"),z=require("../package-metadata.js"),T=n.defineComponent({name:"KendoSegmentedControl",emits:{change:e=>!0},props:{items:{type:Array,default:()=>[]},size:String,layoutMode:{type:String,default:"compact"},value:String,defaultValue:String,itemTemplate:[String,Function]},data(){return{interactionState:{selectedValue:this.$props.defaultValue,hoveredValue:void 0,focusedValue:void 0}}},computed:{selectedItemValue(){var e;return(e=this.$props.value)!=null?e:this.interactionState.selectedValue},sizeClass(){const e=this.$props.size;return e?o.kendoThemeMaps.sizeMap[e]:void 0},buttonClass(){return(e,t,s)=>o.classNames("k-segmented-control-button",{"k-selected":s,"k-hover":this.interactionState.hoveredValue===e&&!t,"k-focus":this.interactionState.focusedValue===e&&!t,"k-disabled":t})},iconClass(){return(e,t)=>o.classNames("k-segmented-control-button-icon",{...e&&{[e]:t}})}},watch:{selectedItemValue(){n.nextTick(()=>{this.updateThumbPosition()})}},created(){o.validatePackage(z.packageMetadata),this._resizeObserver=null},mounted(){n.nextTick(()=>{this.updateThumbPosition()}),this._resizeObserver=new ResizeObserver(()=>{this.updateThumbPosition()});const e=this.$refs.element;e&&this._resizeObserver.observe(e)},beforeUnmount(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null)},methods:{updateThumbPosition(){const e=this.$refs.element,t=this.$refs.thumb;if(!e||!t)return;const s=e.querySelector(".k-segmented-control-button.k-selected");if(!s)return;const i=e.offsetWidth,{offsetWidth:c,offsetLeft:d}=s,a=`${d}px`,r=`${i-d-c}px`;t.style.left!==a&&(t.style.left=a),t.style.right!==r&&(t.style.right=r)},updateState(e){this.interactionState={...this.interactionState,...e}},handleButtonClick(e,t){var s,i;if(!e.disabled){if(this.selectedItemValue===e.value){(s=e.onClick)==null||s.call(e,t);return}this.$props.value===void 0&&e&&this.updateState({selectedValue:e.value}),this.$emit("change",e.value),(i=e.onClick)==null||i.call(e,t)}},handleMouseEnter(e,t,s,i){t||this.updateState({hoveredValue:e}),s==null||s(i)},handleMouseLeave(e,t){this.updateState({hoveredValue:void 0}),e==null||e(t)},handleFocus(e,t,s){this.updateState({focusedValue:e}),t==null||t(s)},handleBlur(e,t){this.updateState({focusedValue:void 0}),e==null||e(t)}},render(){const{items:e,layoutMode:t,itemTemplate:s}=this.$props,i=this.sizeClass,c=this.selectedItemValue,d=s?o.templateRendering.call(this,s,{}):void 0;return n.createVNode("div",{ref:"element",role:"group",class:o.classNames("k-segmented-control",i&&`k-segmented-control-${i}`,{"k-segmented-control-stretched":t==="stretch"})},[n.createVNode("div",{class:"k-segmented-control-thumb",ref:"thumb","aria-hidden":"true"},null),(e||[]).map(a=>{const{value:r,disabled:u,text:p,svgIcon:f,iconClassName:m,type:b="button",onMouseEnter:g,onMouseLeave:v,onFocus:k,onBlur:V,title:S,dir:C,"aria-label":y}=a,h=c===r;return n.createVNode("button",{key:r,type:b,class:this.buttonClass(r,u,h),disabled:u,"aria-disabled":u||void 0,"aria-pressed":h,title:S,dir:C,"aria-label":y,onClick:l=>this.handleButtonClick(a,l),onMouseenter:l=>this.handleMouseEnter(r,u,g,l),onMouseleave:l=>this.handleMouseLeave(v,l),onFocus:l=>this.handleFocus(r,k,l),onBlur:l=>this.handleBlur(V,l)},[o.getTemplate.call(this,{h:n.h,template:d,defaultRendering:n.createVNode(n.Fragment,null,[f&&n.createVNode(o.Icon,{class:this.iconClass(m,h),icon:f},null),n.createVNode("span",{class:"k-segmented-control-button-text"},[p])]),additionalProps:{item:a}})])})])}});exports.SegmentedControl=T;

package/SegmentedControl/SegmentedControl.mjs

@@ -0,0 +1,204 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as $, createVNode as o, h as T, Fragment as I, nextTick as p } from "vue";
+import { templateRendering as O, classNames as h, getTemplate as x, Icon as P, validatePackage as _, kendoThemeMaps as M } from "@progress/kendo-vue-common";
+import { packageMetadata as w } from "../package-metadata.mjs";
+const B = /* @__PURE__ */ $({
+  name: "KendoSegmentedControl",
+  emits: {
+    change: (e) => !0
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    size: String,
+    layoutMode: {
+      type: String,
+      default: "compact"
+    },
+    value: String,
+    defaultValue: String,
+    itemTemplate: [String, Function]
+  },
+  data() {
+    return {
+      interactionState: {
+        selectedValue: this.$props.defaultValue,
+        hoveredValue: void 0,
+        focusedValue: void 0
+      }
+    };
+  },
+  computed: {
+    selectedItemValue() {
+      var e;
+      return (e = this.$props.value) != null ? e : this.interactionState.selectedValue;
+    },
+    sizeClass() {
+      const e = this.$props.size;
+      return e ? M.sizeMap[e] : void 0;
+    },
+    buttonClass() {
+      return (e, t, s) => h("k-segmented-control-button", {
+        "k-selected": s,
+        "k-hover": this.interactionState.hoveredValue === e && !t,
+        "k-focus": this.interactionState.focusedValue === e && !t,
+        "k-disabled": t
+      });
+    },
+    iconClass() {
+      return (e, t) => h("k-segmented-control-button-icon", {
+        ...e && {
+          [e]: t
+        }
+      });
+    }
+  },
+  watch: {
+    selectedItemValue() {
+      p(() => {
+        this.updateThumbPosition();
+      });
+    }
+  },
+  created() {
+    _(w), this._resizeObserver = null;
+  },
+  mounted() {
+    p(() => {
+      this.updateThumbPosition();
+    }), this._resizeObserver = new ResizeObserver(() => {
+      this.updateThumbPosition();
+    });
+    const e = this.$refs.element;
+    e && this._resizeObserver.observe(e);
+  },
+  beforeUnmount() {
+    this._resizeObserver && (this._resizeObserver.disconnect(), this._resizeObserver = null);
+  },
+  methods: {
+    updateThumbPosition() {
+      const e = this.$refs.element, t = this.$refs.thumb;
+      if (!e || !t)
+        return;
+      const s = e.querySelector(".k-segmented-control-button.k-selected");
+      if (!s)
+        return;
+      const n = e.offsetWidth, {
+        offsetWidth: u,
+        offsetLeft: d
+      } = s, r = `${d}px`, l = `${n - d - u}px`;
+      t.style.left !== r && (t.style.left = r), t.style.right !== l && (t.style.right = l);
+    },
+    updateState(e) {
+      this.interactionState = {
+        ...this.interactionState,
+        ...e
+      };
+    },
+    handleButtonClick(e, t) {
+      var s, n;
+      if (!e.disabled) {
+        if (this.selectedItemValue === e.value) {
+          (s = e.onClick) == null || s.call(e, t);
+          return;
+        }
+        this.$props.value === void 0 && e && this.updateState({
+          selectedValue: e.value
+        }), this.$emit("change", e.value), (n = e.onClick) == null || n.call(e, t);
+      }
+    },
+    handleMouseEnter(e, t, s, n) {
+      t || this.updateState({
+        hoveredValue: e
+      }), s == null || s(n);
+    },
+    handleMouseLeave(e, t) {
+      this.updateState({
+        hoveredValue: void 0
+      }), e == null || e(t);
+    },
+    handleFocus(e, t, s) {
+      this.updateState({
+        focusedValue: e
+      }), t == null || t(s);
+    },
+    handleBlur(e, t) {
+      this.updateState({
+        focusedValue: void 0
+      }), e == null || e(t);
+    }
+  },
+  render() {
+    const {
+      items: e,
+      layoutMode: t,
+      itemTemplate: s
+    } = this.$props, n = this.sizeClass, u = this.selectedItemValue, d = s ? O.call(this, s, {}) : void 0;
+    return o("div", {
+      ref: "element",
+      role: "group",
+      class: h("k-segmented-control", n && `k-segmented-control-${n}`, {
+        "k-segmented-control-stretched": t === "stretch"
+      })
+    }, [o("div", {
+      class: "k-segmented-control-thumb",
+      ref: "thumb",
+      "aria-hidden": "true"
+    }, null), (e || []).map((r) => {
+      const {
+        value: l,
+        disabled: a,
+        text: m,
+        svgIcon: f,
+        iconClassName: b,
+        type: g = "button",
+        onMouseEnter: v,
+        onMouseLeave: k,
+        onFocus: S,
+        onBlur: V,
+        title: C,
+        dir: z,
+        "aria-label": y
+      } = r, c = u === l;
+      return o("button", {
+        key: l,
+        type: g,
+        class: this.buttonClass(l, a, c),
+        disabled: a,
+        "aria-disabled": a || void 0,
+        "aria-pressed": c,
+        title: C,
+        dir: z,
+        "aria-label": y,
+        onClick: (i) => this.handleButtonClick(r, i),
+        onMouseenter: (i) => this.handleMouseEnter(l, a, v, i),
+        onMouseleave: (i) => this.handleMouseLeave(k, i),
+        onFocus: (i) => this.handleFocus(l, S, i),
+        onBlur: (i) => this.handleBlur(V, i)
+      }, [x.call(this, {
+        h: T,
+        template: d,
+        defaultRendering: o(I, null, [f && o(P, {
+          class: this.iconClass(b, c),
+          icon: f
+        }, null), o("span", {
+          class: "k-segmented-control-button-text"
+        }, [m])]),
+        additionalProps: {
+          item: r
+        }
+      })]);
+    })]);
+  }
+});
+export {
+  B as SegmentedControl
+};

package/SegmentedControl/interfaces/SegmentedControlTypes.d.ts

@@ -0,0 +1,204 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { SVGIcon } from '@progress/kendo-vue-common';
+import { ButtonProps } from '../../Button';
+/**
+ * Represents the properties of a single item within the SegmentedControl component.
+ */
+export interface SegmentedItemProps {
+    /**
+     * The unique identifier for the SegmentedItem. Used to match against the SegmentedControl's `value` to determine selection.
+     *
+     * @example
+     * ```vue
+     * <SegmentedControl :items="[{ value: 'option1', text: 'Option 1' }]" />
+     * ```
+     */
+    value: string;
+    /**
+     * Sets an SVG icon to render inside the item using an `Icon` element.
+     * Only rendered when `itemTemplate` is not provided.
+     *
+     * @example
+     * ```vue
+     * <SegmentedControl :items="[{ value: 'opt1', text: 'Bold', svgIcon: boldIcon }]" />
+     * ```
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Specifies the text label of the SegmentedItem.
+     * Rendered inside a `<span>` element. Only rendered when `itemTemplate` is not provided.
+     *
+     * @example
+     * ```vue
+     * <SegmentedControl :items="[{ value: 'opt1', text: 'Option 1' }]" />
+     * ```
+     */
+    text?: string;
+    /**
+     * CSS class name applied to the icon element only when the item is selected.
+     * Has no effect when `itemTemplate` is provided.
+     *
+     * @example
+     * ```vue
+     * <SegmentedControl :items="[{ value: 'opt1', text: 'Bold', svgIcon: boldIcon, iconClassName: 'active-icon' }]" />
+     * ```
+     */
+    iconClassName?: string;
+    /**
+     * Sets the `title` HTML attribute of the item button.
+     *
+     * @example
+     * ```vue
+     * <SegmentedControl :items="[{ value: 'opt1', title: 'Option 1 tooltip' }]" />
+     * ```
+     */
+    title?: string;
+    /**
+     * Represents the `dir` HTML attribute of the item button, controlling text directionality.
+     */
+    dir?: string;
+    /**
+     * Specifies whether the item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the `type` HTML attribute of the item button.
+     *
+     * @default "button"
+     */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * The `aria-label` HTML attribute of the item button.
+     */
+    'aria-label'?: string;
+    /**
+     * Event handler fired when the item button is clicked.
+     */
+    onClick?: (e: MouseEvent) => void;
+    /**
+     * Event handler fired when the mouse pointer enters the item button.
+     */
+    onMouseEnter?: (e: MouseEvent) => void;
+    /**
+     * Event handler fired when the mouse pointer leaves the item button.
+     */
+    onMouseLeave?: (e: MouseEvent) => void;
+    /**
+     * Event handler fired when the item button receives focus.
+     */
+    onFocus?: (e: FocusEvent) => void;
+    /**
+     * Event handler fired when the item button loses focus.
+     */
+    onBlur?: (e: FocusEvent) => void;
+}
+/**
+ * Represents the properties of the SegmentedControl component.
+ *
+ * The SegmentedControl displays a horizontal set of mutually exclusive button segments,
+ * allowing the user to select one option at a time.
+ */
+export interface SegmentedControlProps {
+    /**
+     * Specifies the collection of items rendered as buttons inside the SegmentedControl.
+     *
+     * @example
+     * ```vue
+     * <SegmentedControl :items="[{ value: 'opt1', text: 'Option 1' }, { value: 'opt2', text: 'Option 2' }]" />
+     * ```
+     */
+    items?: Array<SegmentedItemProps>;
+    /**
+     * Sets the size of the SegmentedControl items. The value is mapped through `kendoThemeMaps.sizeMap`
+     * to the corresponding CSS size class.
+     *
+     * The available options are:
+     * - `small`
+     * - `medium`
+     * - `large`
+     * - `null` — Does not set a size className.
+     *
+     * @example
+     * ```vue
+     * <SegmentedControl :size="'large'" :items="items" />
+     * ```
+     */
+    size?: ButtonProps['size'];
+    /**
+     * Specifies the layout mode of the SegmentedControl.
+     *
+     * - `compact`: Items are sized based on their content (default).
+     * - `stretch`: Items stretch to fill the available horizontal space, applying the `k-segmented-control-stretched` CSS class.
+     *
+     * @default "compact"
+     *
+     * @example
+     * ```vue
+     * <SegmentedControl :layout-mode="'stretch'" :items="items" />
+     * ```
+     */
+    layoutMode?: 'compact' | 'stretch';
+    /**
+     * The currently selected item value.
+     * When provided, the component operates in controlled mode and the `change` event must be used to update this value.
+     * The item whose `value` matches this prop receives the `k-selected` CSS class.
+     *
+     * @example
+     * ```vue
+     * <SegmentedControl :value="selectedValue" @change="(val) => selectedValue = val" :items="items" />
+     * ```
+     */
+    value?: string;
+    /**
+     * Sets the initially selected item value when the component is in uncontrolled mode (i.e., `value` is not provided).
+     * Once set, subsequent changes to `defaultValue` are ignored.
+     *
+     * @example
+     * ```vue
+     * <SegmentedControl :default-value="'option2'" :items="items" />
+     * ```
+     */
+    defaultValue?: string;
+    /**
+     * A custom template for the item content. When provided, it replaces the default rendering
+     * (SVG icon + text span) entirely.
+     *
+     * Accepts a string (slot name) or a render function. The slot receives `{ props: { item } }`
+     * where `item` is the full item configuration object.
+     *
+     * @example
+     * ```vue
+     * <SegmentedControl :items="items" :item-template="'myTemplate'">
+     *     <template #myTemplate="{ props }">
+     *         <span>{{ props.item.text }}</span>
+     *     </template>
+     * </SegmentedControl>
+     * ```
+     */
+    itemTemplate?: string | ((itemData: SegmentedItemProps) => any);
+}
+/**
+ * Represents the internal interaction state of the SegmentedControl component.
+ *
+ * @hidden
+ */
+export interface SegmentedControlState {
+    /**
+     * The `value` of the currently selected item in uncontrolled mode.
+     */
+    selectedValue?: string;
+    /**
+     * The `value` of the item currently being hovered over.
+     */
+    hoveredValue?: string;
+    /**
+     * The `value` of the item that currently has keyboard focus.
+     */
+    focusedValue?: string;
+}

package/SegmentedControl/interfaces/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+export * from './SegmentedControlTypes';

package/SmartPasteButton/SmartPasteButton.d.ts

@@ -0,0 +1,130 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { KendoSmartPaste, SmartPasteField } from '@progress/kendo-smartpaste-common';
+import { SmartPasteFormField, SmartPasteClickEvent } from './interfaces';
+import { PropType } from 'vue';
+/**
+ * @hidden
+ */
+declare const SmartPasteButton: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    disabled: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    fillMode: {
+        type: PropType<"flat" | "link" | "solid" | "outline">;
+        default: string;
+    };
+    rounded: {
+        type: PropType<"small" | "medium" | "large" | "full" | "none">;
+        default: string;
+    };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        default: string;
+    };
+    svgIcon: {
+        type: PropType<import('@progress/kendo-vue-common').SVGIcon>;
+        default: () => import('@progress/kendo-svg-icons').SVGIcon;
+    };
+    themeColor: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
+    formFields: PropType<SmartPasteFormField[]>;
+    togglable: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    selected: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    icon: PropType<string>;
+    iconClass: PropType<string>;
+    imageUrl: PropType<string>;
+    imageAlt: PropType<string>;
+    tabIndex: PropType<number>;
+    id: PropType<string>;
+    type: {
+        type: PropType<string>;
+        default: string;
+    };
+    role: PropType<string>;
+    ariaLabel: PropType<string>;
+    ariaPressed: PropType<boolean>;
+    title: PropType<string>;
+    dir: PropType<string>;
+    iconSize: PropType<string>;
+}>, {}, {}, {}, {
+    getSmartPasteInstance(): KendoSmartPaste | null;
+    getButtonElement(): HTMLButtonElement | null;
+    extractFormConfig(): SmartPasteFormField[] | SmartPasteField[] | undefined;
+    extractClipboard(): Promise<string>;
+    populateFormFieldsInternal(fieldValues: Record<string, any>, fields?: SmartPasteFormField[] | SmartPasteField[]): void;
+    handleClick(event: Event): Promise<void>;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (event: SmartPasteClickEvent) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    disabled: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    fillMode: {
+        type: PropType<"flat" | "link" | "solid" | "outline">;
+        default: string;
+    };
+    rounded: {
+        type: PropType<"small" | "medium" | "large" | "full" | "none">;
+        default: string;
+    };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        default: string;
+    };
+    svgIcon: {
+        type: PropType<import('@progress/kendo-vue-common').SVGIcon>;
+        default: () => import('@progress/kendo-svg-icons').SVGIcon;
+    };
+    themeColor: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
+    formFields: PropType<SmartPasteFormField[]>;
+    togglable: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    selected: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    icon: PropType<string>;
+    iconClass: PropType<string>;
+    imageUrl: PropType<string>;
+    imageAlt: PropType<string>;
+    tabIndex: PropType<number>;
+    id: PropType<string>;
+    type: {
+        type: PropType<string>;
+        default: string;
+    };
+    role: PropType<string>;
+    ariaLabel: PropType<string>;
+    ariaPressed: PropType<boolean>;
+    title: PropType<string>;
+    dir: PropType<string>;
+    iconSize: PropType<string>;
+}>> & Readonly<{
+    onClick?: (event: SmartPasteClickEvent) => any;
+}>, {
+    type: string;
+    size: "small" | "medium" | "large";
+    rounded: "small" | "medium" | "large" | "full" | "none";
+    selected: boolean;
+    disabled: boolean;
+    fillMode: "flat" | "link" | "solid" | "outline";
+    togglable: boolean;
+    svgIcon: import('@progress/kendo-vue-common').SVGIcon;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { SmartPasteButton };
+export type { SmartPasteButtonProps, SmartPasteClickEvent, SmartPasteFormField, SmartPasteButtonHandle } from './interfaces';

package/SmartPasteButton/SmartPasteButton.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("vue"),f=require("@progress/kendo-vue-common"),x=require("@progress/kendo-smartpaste-common"),b=require("../Button.js"),v=require("@progress/kendo-svg-icons"),B=require("../package-metadata.js");function T(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!p.isVNode(e)}const q=[".k-input",".k-picker",".k-checkbox",".k-radio",".k-switch",".k-rating",".k-slider"],M=e=>{const t=e.querySelector("input, select, textarea");return(t==null?void 0:t.getAttribute("name"))||(t==null?void 0:t.getAttribute("id"))||e.getAttribute("id")||null},N=(e,t)=>{const r=e.element,n=r instanceof HTMLInputElement||r instanceof HTMLSelectElement||r instanceof HTMLTextAreaElement?r:r.querySelector("input, select, textarea");if(n){if(n instanceof HTMLSelectElement){const i=Array.from(n.querySelectorAll("option")),s=i.find(a=>a.textContent===t)||i.find(a=>{var l;return(l=a.textContent)==null?void 0:l.includes(t)});s&&(n.selectedIndex=i.indexOf(s))}else if(n instanceof HTMLInputElement&&n.type==="date"){const i=new Date(t);n.value=isNaN(i.getTime())?t:i.toISOString().split("T")[0]}else n.value=t;n.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{fromSmartComponents:!0}})),n.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{fromSmartComponents:!0}}))}},O=p.defineComponent({name:"KendoSmartPasteButton",emits:{click:e=>!0},props:{disabled:{type:Boolean,default:void 0},fillMode:{type:String,default:"solid"},rounded:{type:String,default:"medium"},size:{type:String,default:"medium"},svgIcon:{type:Object,default:()=>v.pasteSparkleIcon},themeColor:String,formFields:Array,togglable:{type:Boolean,default:!1},selected:{type:Boolean,default:void 0},icon:String,iconClass:String,imageUrl:String,imageAlt:String,tabIndex:Number,id:String,type:{type:String,default:"button"},role:String,ariaLabel:String,ariaPressed:Boolean,title:String,dir:String,iconSize:String},created(){f.validatePackage(B.packageMetadata),this.smartPasteInstance=null},methods:{getSmartPasteInstance(){return this.getButtonElement()?(this.smartPasteInstance||(this.smartPasteInstance=new x.KendoSmartPaste({getElement:()=>this.getButtonElement(),customInputs:q.map(t=>({identifier:t})),getSmartPasteField:t=>{const r=M(t.element);return r?{...t,field:r}:t},setKendoInputValue:N})),this.smartPasteInstance):null},getButtonElement(){var t;const e=this.$refs.buttonRef;return(t=e==null?void 0:e.$el)!=null?t:null},extractFormConfig(){const e=this.getSmartPasteInstance();if(!e)return this.$props.formFields;const r=e.extractFormConfig().reduce((o,n)=>o.some(i=>i.field===n.field)?o:[...o,n],[]);return this.$props.formFields?this.$props.formFields.map(o=>{const n=r.find(i=>i.field===o.field);if(n){const i={...n,...o,element:n.element};return n.type==="kendo-input"&&(i.type="kendo-input"),i}return o}):r},async extractClipboard(){try{return await navigator.clipboard.readText()}catch{return""}},populateFormFieldsInternal(e,t){if(!e||!t)return;const r=Object.entries(e).reduce((i,[s,a])=>(a!=null&&(i[s]=a),i),{}),o=this.getButtonElement();if(o){const i=f.getKendoPasteEventTarget(o);f.dispatchKendoPasteEvent(i,r)}const n=this.getSmartPasteInstance();n&&n.populateFormFields({fieldValues:r},t)},async handleClick(e){if(this.$props.disabled)return;const t=await this.extractClipboard(),r=this.extractFormConfig(),o=r==null?void 0:r.map(s=>{var c,u,m;const{element:a,...l}=s,d=(c=this.$props.formFields)==null?void 0:c.find(g=>g.field===l.field);return{...l,type:(u=d==null?void 0:d.type)!=null?u:l.type,field:l.field||"",allowedValues:(m=l.allowedValues)!=null?m:[]}}),i={event:e,requestData:{content:t,formFields:o},setResponse:s=>{s!=null&&s.fieldValues&&this.populateFormFieldsInternal(s.fieldValues,r)}};this.$emit("click",i)}},render(){const e=f.getDefaultSlots(this),{disabled:t,fillMode:r,rounded:o,size:n,svgIcon:i,themeColor:s,togglable:a,selected:l,icon:d,iconClass:c,imageUrl:u,imageAlt:m,tabIndex:g,id:h,type:y,role:I,ariaLabel:E,ariaPressed:k,title:C,dir:P,iconSize:F}=this.$props,S={ref:"buttonRef",disabled:t,fillMode:r,rounded:o,size:n,svgIcon:i,themeColor:s,togglable:a,selected:l,icon:d,iconClass:c,imageUrl:u,imageAlt:m,tabIndex:g,id:h,type:y,role:I,ariaLabel:E,ariaPressed:k,title:C,dir:P,iconSize:F,onClick:this.handleClick};return e?p.createVNode(b.Button,S,T(e)?e:{default:()=>[e]}):p.createVNode(b.Button,S,null)}});exports.SmartPasteButton=O;