@progress/kendo-vue-buttons 10.1.1-develop.2 → 10.2.0-develop.10

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.d.ts

@@ -20,6 +20,7 @@ declare const SegmentedControl: import('vue').DefineComponent<import('vue').Extr
         default: () => any[];
     };
     size: PropType<"small" | "medium" | "xs" | "large">;
+    rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
     layoutMode: {
         type: PropType<"stretch" | "compact">;
         default: string;
@@ -32,6 +33,7 @@ declare const SegmentedControl: import('vue').DefineComponent<import('vue').Extr
 }, {
     selectedItemValue(): string | undefined;
     sizeClass(): string | undefined;
+    roundedClass(): string | undefined;
     buttonClass(): (itemValue: string, disabled: boolean | undefined, isSelected: boolean) => string;
     iconClass(): (iconClassName: string | undefined, isSelected: boolean) => string;
 }, {
@@ -50,6 +52,7 @@ declare const SegmentedControl: import('vue').DefineComponent<import('vue').Extr
         default: () => any[];
     };
     size: PropType<"small" | "medium" | "xs" | "large">;
+    rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
     layoutMode: {
         type: PropType<"stretch" | "compact">;
         default: string;

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"),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;
+"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 $, 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__ */ $({
+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
@@ -19,6 +19,7 @@ const B = /* @__PURE__ */ $({
       default: () => []
     },
     size: String,
+    rounded: String,
     layoutMode: {
       type: String,
       default: "compact"
@@ -43,10 +44,14 @@ const B = /* @__PURE__ */ $({
     },
     sizeClass() {
       const e = this.$props.size;
-      return e ? M.sizeMap[e] : void 0;
+      return e ? S.sizeMap[e] : void 0;
+    },
+    roundedClass() {
+      const e = this.$props.rounded;
+      return e ? S.roundedMap[e] : void 0;
     },
     buttonClass() {
-      return (e, t, s) => h("k-segmented-control-button", {
+      return (e, t, s) => p("k-segmented-control-button", {
         "k-selected": s,
         "k-hover": this.interactionState.hoveredValue === e && !t,
         "k-focus": this.interactionState.focusedValue === e && !t,
@@ -54,7 +59,7 @@ const B = /* @__PURE__ */ $({
       });
     },
     iconClass() {
-      return (e, t) => h("k-segmented-control-button-icon", {
+      return (e, t) => p("k-segmented-control-button-icon", {
         ...e && {
           [e]: t
         }
@@ -63,16 +68,16 @@ const B = /* @__PURE__ */ $({
   },
   watch: {
     selectedItemValue() {
-      p(() => {
+      v(() => {
         this.updateThumbPosition();
       });
     }
   },
   created() {
-    _(w), this._resizeObserver = null;
+    W(L), this._resizeObserver = null;
   },
   mounted() {
-    p(() => {
+    v(() => {
       this.updateThumbPosition();
     }), this._resizeObserver = new ResizeObserver(() => {
       this.updateThumbPosition();
@@ -92,10 +97,10 @@ const B = /* @__PURE__ */ $({
       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);
+        offsetWidth: o,
+        offsetLeft: a
+      } = 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 = {
@@ -141,57 +146,63 @@ const B = /* @__PURE__ */ $({
       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", {
+    } = 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: h("k-segmented-control", n && `k-segmented-control-${n}`, {
+      class: p("k-segmented-control", n && `k-segmented-control-${n}`, o && `k-rounded-${o}`, {
         "k-segmented-control-stretched": t === "stretch"
       })
-    }, [o("div", {
+    }, [l("div", {
       class: "k-segmented-control-thumb",
       ref: "thumb",
       "aria-hidden": "true"
     }, null), (e || []).map((r) => {
       const {
-        value: l,
-        disabled: a,
-        text: m,
+        value: d,
+        disabled: c,
+        text: C,
         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,
+        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: V,
+        class: this.buttonClass(d, c, h),
+        disabled: c,
+        "aria-disabled": c || void 0,
+        "aria-pressed": h,
+        title: T,
+        dir: O,
+        "aria-label": x,
         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),
+        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: l(_, null, [f && l(k, {
+          class: this.iconClass(g, h),
           icon: f
-        }, null), o("span", {
+        }, null), l("span", {
           class: "k-segmented-control-button-text"
-        }, [m])]),
+        }, [C]), (m || b) && l(k, {
+          class: this.iconClass(g, h),
+          name: m,
+          icon: b
+        }, null)]),
         additionalProps: {
           item: r
         }
@@ -200,5 +211,5 @@ const B = /* @__PURE__ */ $({
   }
 });
 export {
-  B 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.
@@ -131,6 +142,25 @@ export interface SegmentedControlProps {
      * ```
      */
     size?: ButtonProps['size'];
+    /**
+     * Configures the `roundness` of the SegmentedControl. The value is mapped through `kendoThemeMaps.roundedMap`
+     * to the corresponding `k-rounded-*` CSS class.
+     *
+     * The available options are:
+     * - `none`
+     * - `small`
+     * - `medium`
+     * - `large`
+     * - `full`
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```vue
+     * <SegmentedControl :rounded="'medium'" :items="items" />
+     * ```
+     */
+    rounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
     /**
      * Specifies the layout mode of the SegmentedControl.
      *
@@ -168,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;