@progress/kendo-vue-buttons 10.2.0-develop.7 → 10.2.0-develop.9

package/ListButton/SplitButton.mjs

@@ -5,16 +5,16 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as k, createVNode as o, ref as y } from "vue";
+import { defineComponent as I, createVNode as o, ref as k } from "vue";
 import { Button as l } from "../Button.mjs";
-import { canUseDOM as O, Keys as s, getDefaultSlots as I, guid as a, validatePackage as S, classNames as D, templateRendering as h, getListeners as f } from "@progress/kendo-vue-common";
+import { canUseDOM as O, Keys as n, getDefaultSlots as y, guid as a, validatePackage as S, classNames as D, templateRendering as h, getListeners as f } from "@progress/kendo-vue-common";
 import { ButtonItem as x } from "./ButtonItem.mjs";
-import w from "./utils/navigation.mjs";
-import { Popup as v } from "@progress/kendo-vue-popup";
+import v from "./utils/navigation.mjs";
+import { Popup as w } from "@progress/kendo-vue-popup";
 import { getPopupAlign as P, getAnchorAlign as B } from "./utils/popup.mjs";
 import { chevronDownIcon as E } from "@progress/kendo-svg-icons";
 import { packageMetadata as K } from "../package-metadata.mjs";
-const L = /* @__PURE__ */ k({
+const L = /* @__PURE__ */ I({
   name: "KendoSplitButton",
   emits: {
     focus: (t) => !0,
@@ -39,6 +39,8 @@ const L = /* @__PURE__ */ k({
     disabled: Boolean,
     icon: String,
     svgIcon: Object,
+    endIcon: String,
+    endSvgIcon: Object,
     size: String,
     rounded: String,
     fillMode: {
@@ -96,7 +98,7 @@ const L = /* @__PURE__ */ k({
   },
   setup() {
     return {
-      kendoAnchorRef: y(null)
+      kendoAnchorRef: k(null)
     };
   },
   render() {
@@ -104,26 +106,26 @@ const L = /* @__PURE__ */ k({
     const t = this.isRtl(), e = t ? "rtl" : void 0, {
       tabIndex: i,
       disabled: r
-    } = this.$props, p = I(this), m = function() {
+    } = this.$props, p = y(this), m = function() {
       const {
-        item: n,
+        item: s,
         itemRender: c,
-        textField: C
+        textField: $
       } = this.$props;
       return this.buttonsData.length > 0 ? this.buttonsData.map(function(d, u) {
-        const $ = typeof d != "string" ? {
+        const C = typeof d != "string" ? {
           ...d,
           render: h.call(this, d.render, f.call(this))
         } : d;
         return o(x, {
           role: "menuitem",
-          dataItem: $,
-          textField: C,
+          dataItem: C,
+          textField: $,
           focused: this.focusedIndex === u,
           onClick: this.onItemClick,
           onDown: this.onItemDown,
           render: h.call(this, c, f.call(this)),
-          item: n,
+          item: s,
           key: u,
           index: u,
           id: `${this.guid}-${u}`
@@ -131,16 +133,16 @@ const L = /* @__PURE__ */ k({
       }, this) : null;
     }, g = function() {
       const {
-        popupSettings: n = {},
+        popupSettings: s = {},
         size: c
       } = this.$props;
-      return o(v, {
+      return o(w, {
         anchor: this._anchor,
         show: this.computedOpened,
-        animate: n.animate,
-        popupClass: D("k-menu-popup", n.popupClass),
-        anchorAlign: n.anchorAlign || B(t),
-        popupAlign: n.popupAlign || P(t),
+        animate: s.animate,
+        popupClass: D("k-menu-popup", s.popupClass),
+        anchorAlign: s.anchorAlign || B(t),
+        popupAlign: s.popupAlign || P(t),
         style: t ? {
           direction: "rtl"
         } : void 0
@@ -165,13 +167,15 @@ const L = /* @__PURE__ */ k({
       rounded: this.$props.rounded,
       fillMode: this.$props.fillMode,
       themeColor: this.$props.themeColor,
-      onClick: (n) => this.onItemClick(n, -1),
+      onClick: (s) => this.onItemClick(s, -1),
       disabled: r || void 0,
       tabIndex: i,
       accessKey: this.$props.accessKey,
       class: this.$props.buttonClass,
       icon: this.$props.icon,
       svgIcon: this.$props.svgIcon,
+      endIcon: this.$props.endIcon,
+      endSvgIcon: this.$props.endSvgIcon,
       iconClass: this.$props.iconClass,
       imageUrl: this.$props.imageUrl,
       dir: e,
@@ -205,20 +209,20 @@ const L = /* @__PURE__ */ k({
     },
     onKeyDown(t) {
       if (t.altKey) {
-        !this.computedOpened && t.keyCode === s.down ? (this.dispatchPopupEvent(t, !0), this.focusedIndex = 0, this.currentOpened = !0) : this.computedOpened && t.keyCode === s.up && (this.dispatchPopupEvent(t, !1), this.focusedIndex = -1, this.currentOpened = !1);
+        !this.computedOpened && t.keyCode === n.down ? (this.dispatchPopupEvent(t, !0), this.focusedIndex = 0, this.currentOpened = !0) : this.computedOpened && t.keyCode === n.up && (this.dispatchPopupEvent(t, !1), this.focusedIndex = -1, this.currentOpened = !1);
         return;
       }
       let e;
-      if (t.keyCode === s.enter || t.keyCode === s.space ? (t.preventDefault(), this.dispatchClickEvent(t, this.focusedIndex), this.focusedIndex !== void 0 && this.focusedIndex >= 0 && (e = {
+      if (t.keyCode === n.enter || t.keyCode === n.space ? (t.preventDefault(), this.dispatchClickEvent(t, this.focusedIndex), this.focusedIndex !== void 0 && this.focusedIndex >= 0 && (e = {
         focusedIndex: this.computedOpened ? -1 : 0,
         currentOpened: !this.computedOpened
-      }, this.dispatchPopupEvent(t, e.currentOpened))) : this.computedOpened && t.keyCode === s.esc && (e = {
+      }, this.dispatchPopupEvent(t, e.currentOpened))) : this.computedOpened && t.keyCode === n.esc && (e = {
         focusedIndex: -1,
         currentOpened: !1
       }, this.dispatchPopupEvent(t, e.currentOpened)), this.computedOpened) {
-        const i = w(this.focusedIndex, t.keyCode, t.altKey, this.buttonsData.length);
+        const i = v(this.focusedIndex, t.keyCode, t.altKey, this.buttonsData.length);
         i !== this.focusedIndex && (e = e || {}, e.focusedIndex = i);
-        const r = t.keyCode === s.up || t.keyCode === s.down || t.keyCode === s.left || t.keyCode === s.right;
+        const r = t.keyCode === n.up || t.keyCode === n.down || t.keyCode === n.left || t.keyCode === n.right;
         !t.altKey && r && t.preventDefault();
       }
       e && (this.focusedIndex = e.focusedIndex, this.focused = e.focused, e.currentOpened !== void 0 && (this.currentOpened = e.currentOpened));

package/ListButton/models/ListButtonProps.d.ts

@@ -49,6 +49,16 @@ export interface DropDownButtonProps {
      * Defines an SVGIcon to be rendered within the DropDownButton.
      */
     svgIcon?: SVGIcon;
+    /**
+     * Sets the name of a font icon to render after the DropDownButton text.
+     * Use it with `icon` or `svgIcon` to display icons on both sides of the text.
+     */
+    endIcon?: string;
+    /**
+     * Sets the SVG icon to render after the DropDownButton text.
+     * Use it with `icon` or `svgIcon` to display icons on both sides of the text.
+     */
+    endSvgIcon?: SVGIcon;
     /**
      * Defines an icon with a custom CSS class that will be rendered next to the main button text ([see example]({% slug icons_dropdownbutton %})).
      */
@@ -192,6 +202,16 @@ export interface SplitButtonProps {
      * Defines an SVGIcon to be rendered within the SplitButton.
      */
     svgIcon?: SVGIcon;
+    /**
+     * Sets the name of a font icon to render after the primary button text.
+     * Does not affect the dropdown arrow button.
+     */
+    endIcon?: string;
+    /**
+     * Sets the SVG icon to render after the primary button text.
+     * Does not affect the dropdown arrow button.
+     */
+    endSvgIcon?: SVGIcon;
     /**
      * Defines an icon with a custom CSS class that will be rendered next to the main button text ([see example]({% slug icons_splitbutton %})).
      */

package/SegmentedControl/SegmentedControl.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),r=require("@progress/kendo-vue-common"),$=require("../package-metadata.js"),T=n.defineComponent({name:"KendoSegmentedControl",emits:{change:e=>!0},props:{items:{type:Array,default:()=>[]},size:String,rounded: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?r.kendoThemeMaps.sizeMap[e]:void 0},roundedClass(){const e=this.$props.rounded;return e?r.kendoThemeMaps.roundedMap[e]:void 0},buttonClass(){return(e,t,s)=>r.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)=>r.classNames("k-segmented-control-button-icon",{...e&&{[e]:t}})}},watch:{selectedItemValue(){n.nextTick(()=>{this.updateThumbPosition()})}},created(){r.validatePackage($.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:a,offsetLeft:u}=s,c=`${u}px`,d=`${i-u-a}px`;t.style.left!==c&&(t.style.left=c),t.style.right!==d&&(t.style.right=d)},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,a=this.roundedClass,u=this.selectedItemValue,c=s?r.templateRendering.call(this,s,{}):void 0;return n.createVNode("div",{ref:"element",role:"group",class:r.classNames("k-segmented-control",i&&`k-segmented-control-${i}`,a&&`k-rounded-${a}`,{"k-segmented-control-stretched":t==="stretch"})},[n.createVNode("div",{class:"k-segmented-control-thumb",ref:"thumb","aria-hidden":"true"},null),(e||[]).map(d=>{const{value:o,disabled:h,text:m,svgIcon:f,iconClassName:g,type:b="button",onMouseEnter:k,onMouseLeave:v,onFocus:S,onBlur:V,title:C,dir:y,"aria-label":z}=d,p=u===o;return n.createVNode("button",{key:o,type:b,class:this.buttonClass(o,h,p),disabled:h,"aria-disabled":h||void 0,"aria-pressed":p,title:C,dir:y,"aria-label":z,onClick:l=>this.handleButtonClick(d,l),onMouseenter:l=>this.handleMouseEnter(o,h,k,l),onMouseleave:l=>this.handleMouseLeave(v,l),onFocus:l=>this.handleFocus(o,S,l),onBlur:l=>this.handleBlur(V,l)},[r.getTemplate.call(this,{h:n.h,template:c,defaultRendering:n.createVNode(n.Fragment,null,[f&&n.createVNode(r.Icon,{class:this.iconClass(g,p),icon:f},null),n.createVNode("span",{class:"k-segmented-control-button-text"},[m])]),additionalProps:{item:d}})])})])}});exports.SegmentedControl=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),i=require("@progress/kendo-vue-common"),I=require("../package-metadata.js"),N=n.defineComponent({name:"KendoSegmentedControl",emits:{change:e=>!0},props:{items:{type:Array,default:()=>[]},size:String,rounded: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?i.kendoThemeMaps.sizeMap[e]:void 0},roundedClass(){const e=this.$props.rounded;return e?i.kendoThemeMaps.roundedMap[e]:void 0},buttonClass(){return(e,t,s)=>i.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)=>i.classNames("k-segmented-control-button-icon",{...e&&{[e]:t}})}},watch:{selectedItemValue(){n.nextTick(()=>{this.updateThumbPosition()})}},created(){i.validatePackage(I.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 l=e.offsetWidth,{offsetWidth:a,offsetLeft:u}=s,c=`${u}px`,d=`${l-u-a}px`;t.style.left!==c&&(t.style.left=c),t.style.right!==d&&(t.style.right=d)},updateState(e){this.interactionState={...this.interactionState,...e}},handleButtonClick(e,t){var s,l;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),(l=e.onClick)==null||l.call(e,t)}},handleMouseEnter(e,t,s,l){t||this.updateState({hoveredValue:e}),s==null||s(l)},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,l=this.sizeClass,a=this.roundedClass,u=this.selectedItemValue,c=s?i.templateRendering.call(this,s,{}):void 0;return n.createVNode("div",{ref:"element",role:"group",class:i.classNames("k-segmented-control",l&&`k-segmented-control-${l}`,a&&`k-rounded-${a}`,{"k-segmented-control-stretched":t==="stretch"})},[n.createVNode("div",{class:"k-segmented-control-thumb",ref:"thumb","aria-hidden":"true"},null),(e||[]).map(d=>{const{value:r,disabled:h,text:v,svgIcon:f,endIcon:m,endSvgIcon:g,iconClassName:b,type:k="button",onMouseEnter:S,onMouseLeave:V,onFocus:C,onBlur:y,title:z,dir:$,"aria-label":T}=d,p=u===r;return n.createVNode("button",{key:r,type:k,class:this.buttonClass(r,h,p),disabled:h,"aria-disabled":h||void 0,"aria-pressed":p,title:z,dir:$,"aria-label":T,onClick:o=>this.handleButtonClick(d,o),onMouseenter:o=>this.handleMouseEnter(r,h,S,o),onMouseleave:o=>this.handleMouseLeave(V,o),onFocus:o=>this.handleFocus(r,C,o),onBlur:o=>this.handleBlur(y,o)},[i.getTemplate.call(this,{h:n.h,template:c,defaultRendering:n.createVNode(n.Fragment,null,[f&&n.createVNode(i.Icon,{class:this.iconClass(b,p),icon:f},null),n.createVNode("span",{class:"k-segmented-control-button-text"},[v]),(m||g)&&n.createVNode(i.Icon,{class:this.iconClass(b,p),name:m,icon:g},null)]),additionalProps:{item:d}})])})])}});exports.SegmentedControl=N;

package/SegmentedControl/SegmentedControl.mjs

@@ -5,10 +5,10 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as I, createVNode as r, h as O, Fragment as x, nextTick as m } from "vue";
-import { templateRendering as M, classNames as p, getTemplate as P, Icon as _, validatePackage as w, kendoThemeMaps as b } from "@progress/kendo-vue-common";
-import { packageMetadata as R } from "../package-metadata.mjs";
-const F = /* @__PURE__ */ I({
+import { defineComponent as M, createVNode as l, h as P, Fragment as _, nextTick as v } from "vue";
+import { templateRendering as w, classNames as p, getTemplate as R, Icon as k, validatePackage as W, kendoThemeMaps as S } from "@progress/kendo-vue-common";
+import { packageMetadata as L } from "../package-metadata.mjs";
+const q = /* @__PURE__ */ M({
   name: "KendoSegmentedControl",
   emits: {
     change: (e) => !0
@@ -44,11 +44,11 @@ const F = /* @__PURE__ */ I({
     },
     sizeClass() {
       const e = this.$props.size;
-      return e ? b.sizeMap[e] : void 0;
+      return e ? S.sizeMap[e] : void 0;
     },
     roundedClass() {
       const e = this.$props.rounded;
-      return e ? b.roundedMap[e] : void 0;
+      return e ? S.roundedMap[e] : void 0;
     },
     buttonClass() {
       return (e, t, s) => p("k-segmented-control-button", {
@@ -68,16 +68,16 @@ const F = /* @__PURE__ */ I({
   },
   watch: {
     selectedItemValue() {
-      m(() => {
+      v(() => {
         this.updateThumbPosition();
       });
     }
   },
   created() {
-    w(R), this._resizeObserver = null;
+    W(L), this._resizeObserver = null;
   },
   mounted() {
-    m(() => {
+    v(() => {
       this.updateThumbPosition();
     }), this._resizeObserver = new ResizeObserver(() => {
       this.updateThumbPosition();
@@ -99,8 +99,8 @@ const F = /* @__PURE__ */ I({
       const n = e.offsetWidth, {
         offsetWidth: o,
         offsetLeft: a
-      } = s, u = `${a}px`, l = `${n - a - o}px`;
-      t.style.left !== u && (t.style.left = u), t.style.right !== l && (t.style.right = l);
+      } = s, u = `${a}px`, r = `${n - a - o}px`;
+      t.style.left !== u && (t.style.left = u), t.style.right !== r && (t.style.right = r);
     },
     updateState(e) {
       this.interactionState = {
@@ -146,64 +146,70 @@ const F = /* @__PURE__ */ I({
       items: e,
       layoutMode: t,
       itemTemplate: s
-    } = this.$props, n = this.sizeClass, o = this.roundedClass, a = this.selectedItemValue, u = s ? M.call(this, s, {}) : void 0;
-    return r("div", {
+    } = this.$props, n = this.sizeClass, o = this.roundedClass, a = this.selectedItemValue, u = s ? w.call(this, s, {}) : void 0;
+    return l("div", {
       ref: "element",
       role: "group",
       class: p("k-segmented-control", n && `k-segmented-control-${n}`, o && `k-rounded-${o}`, {
         "k-segmented-control-stretched": t === "stretch"
       })
-    }, [r("div", {
+    }, [l("div", {
       class: "k-segmented-control-thumb",
       ref: "thumb",
       "aria-hidden": "true"
-    }, null), (e || []).map((l) => {
+    }, null), (e || []).map((r) => {
       const {
         value: d,
         disabled: c,
-        text: g,
+        text: C,
         svgIcon: f,
-        iconClassName: v,
-        type: k = "button",
-        onMouseEnter: S,
-        onMouseLeave: V,
-        onFocus: C,
-        onBlur: z,
-        title: $,
-        dir: y,
-        "aria-label": T
-      } = l, h = a === d;
-      return r("button", {
+        endIcon: m,
+        endSvgIcon: b,
+        iconClassName: g,
+        type: V = "button",
+        onMouseEnter: z,
+        onMouseLeave: $,
+        onFocus: y,
+        onBlur: I,
+        title: T,
+        dir: O,
+        "aria-label": x
+      } = r, h = a === d;
+      return l("button", {
         key: d,
-        type: k,
+        type: V,
         class: this.buttonClass(d, c, h),
         disabled: c,
         "aria-disabled": c || void 0,
         "aria-pressed": h,
-        title: $,
-        dir: y,
-        "aria-label": T,
-        onClick: (i) => this.handleButtonClick(l, i),
-        onMouseenter: (i) => this.handleMouseEnter(d, c, S, i),
-        onMouseleave: (i) => this.handleMouseLeave(V, i),
-        onFocus: (i) => this.handleFocus(d, C, i),
-        onBlur: (i) => this.handleBlur(z, i)
-      }, [P.call(this, {
-        h: O,
+        title: T,
+        dir: O,
+        "aria-label": x,
+        onClick: (i) => this.handleButtonClick(r, i),
+        onMouseenter: (i) => this.handleMouseEnter(d, c, z, i),
+        onMouseleave: (i) => this.handleMouseLeave($, i),
+        onFocus: (i) => this.handleFocus(d, y, i),
+        onBlur: (i) => this.handleBlur(I, i)
+      }, [R.call(this, {
+        h: P,
         template: u,
-        defaultRendering: r(x, null, [f && r(_, {
-          class: this.iconClass(v, h),
+        defaultRendering: l(_, null, [f && l(k, {
+          class: this.iconClass(g, h),
           icon: f
-        }, null), r("span", {
+        }, null), l("span", {
           class: "k-segmented-control-button-text"
-        }, [g])]),
+        }, [C]), (m || b) && l(k, {
+          class: this.iconClass(g, h),
+          name: m,
+          icon: b
+        }, null)]),
         additionalProps: {
-          item: l
+          item: r
         }
       })]);
     })]);
   }
 });
 export {
-  F as SegmentedControl
+  q as SegmentedControl
 };

package/SegmentedControl/interfaces/SegmentedControlTypes.d.ts

@@ -30,6 +30,17 @@ export interface SegmentedItemProps {
      * ```
      */
     svgIcon?: SVGIcon;
+    /**
+     * Sets the name of a font icon to render after the item text.
+     * Only rendered when `itemTemplate` is not provided.
+     */
+    endIcon?: string;
+    /**
+     * Sets the SVG icon to render after the item text.
+     * Use it with `svgIcon` to display icons on both sides of the text.
+     * Only rendered when `itemTemplate` is not provided.
+     */
+    endSvgIcon?: SVGIcon;
     /**
      * Specifies the text label of the SegmentedItem.
      * Rendered inside a `<span>` element. Only rendered when `itemTemplate` is not provided.
@@ -187,7 +198,7 @@ export interface SegmentedControlProps {
     defaultValue?: string;
     /**
      * A custom template for the item content. When provided, it replaces the default rendering
-     * (SVG icon + text span) entirely.
+     * (leading icon, text span, and end icon) entirely.
      *
      * Accepts a string (slot name) or a render function. The slot receives `{ props: { item } }`
      * where `item` is the full item configuration object.

package/SmartPasteButton/SmartPasteButton.d.ts

@@ -43,6 +43,8 @@ declare const SmartPasteButton: import('vue').DefineComponent<import('vue').Extr
         default: any;
     };
     icon: PropType<string>;
+    endIcon: PropType<string>;
+    endSvgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
     iconClass: PropType<string>;
     imageUrl: PropType<string>;
     imageAlt: PropType<string>;
@@ -99,6 +101,8 @@ declare const SmartPasteButton: import('vue').DefineComponent<import('vue').Extr
         default: any;
     };
     icon: PropType<string>;
+    endIcon: PropType<string>;
+    endSvgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
     iconClass: PropType<string>;
     imageUrl: PropType<string>;
     imageAlt: PropType<string>;

package/SmartPasteButton/SmartPasteButton.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 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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("vue"),f=require("@progress/kendo-vue-common"),B=require("@progress/kendo-smartpaste-common"),b=require("../Button.js"),T=require("@progress/kendo-svg-icons"),q=require("../package-metadata.js");function O(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!p.isVNode(e)}const M=[".k-input",".k-picker",".k-checkbox",".k-radio",".k-switch",".k-rating",".k-slider"],N=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},V=(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}}))}},w=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:()=>T.pasteSparkleIcon},themeColor:String,formFields:Array,togglable:{type:Boolean,default:!1},selected:{type:Boolean,default:void 0},icon:String,endIcon:String,endSvgIcon:Object,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(q.packageMetadata),this.smartPasteInstance=null},methods:{getSmartPasteInstance(){return this.getButtonElement()?(this.smartPasteInstance||(this.smartPasteInstance=new B.KendoSmartPaste({getElement:()=>this.getButtonElement(),customInputs:M.map(t=>({identifier:t})),getSmartPasteField:t=>{const r=N(t.element);return r?{...t,field:r}:t},setKendoInputValue:V})),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:I,role:y,ariaLabel:E,ariaPressed:k,title:C,dir:P,iconSize:F,endIcon:v,endSvgIcon:x}=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:I,role:y,ariaLabel:E,ariaPressed:k,title:C,dir:P,iconSize:F,endIcon:v,endSvgIcon:x,onClick:this.handleClick};return e?p.createVNode(b.Button,S,O(e)?e:{default:()=>[e]}):p.createVNode(b.Button,S,null)}});exports.SmartPasteButton=w;

package/SmartPasteButton/SmartPasteButton.mjs

@@ -5,19 +5,19 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as x, createVNode as g, isVNode as F } from "vue";
-import { getDefaultSlots as v, getKendoPasteEventTarget as T, dispatchKendoPasteEvent as B, validatePackage as w } from "@progress/kendo-vue-common";
-import { KendoSmartPaste as A } from "@progress/kendo-smartpaste-common";
+import { defineComponent as v, createVNode as g, isVNode as T } from "vue";
+import { getDefaultSlots as B, getKendoPasteEventTarget as O, dispatchKendoPasteEvent as w, validatePackage as A } from "@progress/kendo-vue-common";
+import { KendoSmartPaste as N } from "@progress/kendo-smartpaste-common";
 import { Button as S } from "../Button.mjs";
-import { pasteSparkleIcon as N } from "@progress/kendo-svg-icons";
-import { packageMetadata as O } from "../package-metadata.mjs";
-function $(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !F(e);
+import { pasteSparkleIcon as $ } from "@progress/kendo-svg-icons";
+import { packageMetadata as L } from "../package-metadata.mjs";
+function M(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !T(e);
 }
-const L = [".k-input", ".k-picker", ".k-checkbox", ".k-radio", ".k-switch", ".k-rating", ".k-slider"], M = (e) => {
+const V = [".k-input", ".k-picker", ".k-checkbox", ".k-radio", ".k-switch", ".k-rating", ".k-slider"], j = (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;
-}, V = (e, t) => {
+}, K = (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) {
@@ -43,7 +43,7 @@ const L = [".k-input", ".k-picker", ".k-checkbox", ".k-radio", ".k-switch", ".k-
       }
     }));
   }
-}, R = /* @__PURE__ */ x({
+}, U = /* @__PURE__ */ v({
   name: "KendoSmartPasteButton",
   emits: {
     click: (e) => !0
@@ -67,7 +67,7 @@ const L = [".k-input", ".k-picker", ".k-checkbox", ".k-radio", ".k-switch", ".k-
     },
     svgIcon: {
       type: Object,
-      default: () => N
+      default: () => $
     },
     themeColor: String,
     formFields: Array,
@@ -80,6 +80,8 @@ const L = [".k-input", ".k-picker", ".k-checkbox", ".k-radio", ".k-switch", ".k-
       default: void 0
     },
     icon: String,
+    endIcon: String,
+    endSvgIcon: Object,
     iconClass: String,
     imageUrl: String,
     imageAlt: String,
@@ -97,23 +99,23 @@ const L = [".k-input", ".k-picker", ".k-checkbox", ".k-radio", ".k-switch", ".k-
     iconSize: String
   },
   created() {
-    w(O), this.smartPasteInstance = null;
+    A(L), this.smartPasteInstance = null;
   },
   methods: {
     getSmartPasteInstance() {
-      return this.getButtonElement() ? (this.smartPasteInstance || (this.smartPasteInstance = new A({
+      return this.getButtonElement() ? (this.smartPasteInstance || (this.smartPasteInstance = new N({
         getElement: () => this.getButtonElement(),
-        customInputs: L.map((t) => ({
+        customInputs: V.map((t) => ({
           identifier: t
         })),
         getSmartPasteField: (t) => {
-          const r = M(t.element);
+          const r = j(t.element);
           return r ? {
             ...t,
             field: r
           } : t;
         },
-        setKendoInputValue: V
+        setKendoInputValue: K
       })), this.smartPasteInstance) : null;
     },
     getButtonElement() {
@@ -151,8 +153,8 @@ const L = [".k-input", ".k-picker", ".k-checkbox", ".k-radio", ".k-switch", ".k-
         return;
       const r = Object.entries(e).reduce((i, [s, a]) => (a != null && (i[s] = a), i), {}), o = this.getButtonElement();
       if (o) {
-        const i = T(o);
-        B(i, r);
+        const i = O(o);
+        w(i, r);
       }
       const n = this.getSmartPasteInstance();
       n && n.populateFormFields({
@@ -188,7 +190,7 @@ const L = [".k-input", ".k-picker", ".k-checkbox", ".k-radio", ".k-switch", ".k-
     }
   },
   render() {
-    const e = v(this), {
+    const e = B(this), {
       disabled: t,
       fillMode: r,
       rounded: o,
@@ -202,14 +204,16 @@ const L = [".k-input", ".k-picker", ".k-checkbox", ".k-radio", ".k-switch", ".k-
       imageUrl: u,
       imageAlt: m,
       tabIndex: f,
-      id: h,
-      type: b,
-      role: y,
-      ariaLabel: E,
-      ariaPressed: I,
+      id: b,
+      type: h,
+      role: I,
+      ariaLabel: y,
+      ariaPressed: E,
       title: C,
       dir: P,
-      iconSize: k
+      iconSize: k,
+      endIcon: x,
+      endSvgIcon: F
     } = this.$props, p = {
       ref: "buttonRef",
       disabled: t,
@@ -225,21 +229,23 @@ const L = [".k-input", ".k-picker", ".k-checkbox", ".k-radio", ".k-switch", ".k-
       imageUrl: u,
       imageAlt: m,
       tabIndex: f,
-      id: h,
-      type: b,
-      role: y,
-      ariaLabel: E,
-      ariaPressed: I,
+      id: b,
+      type: h,
+      role: I,
+      ariaLabel: y,
+      ariaPressed: E,
       title: C,
       dir: P,
       iconSize: k,
+      endIcon: x,
+      endSvgIcon: F,
       onClick: this.handleClick
     };
-    return e ? g(S, p, $(e) ? e : {
+    return e ? g(S, p, M(e) ? e : {
       default: () => [e]
     }) : g(S, p, null);
   }
 });
 export {
-  R as SmartPasteButton
+  U as SmartPasteButton
 };