@progress/kendo-ui
Version:
This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.
3 lines • 6.49 kB
JavaScript
/* @license */
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`kendo.core.min.js`),require(`kendo.icons.min.js`),require(`kendo.html.icon.min.js`)):typeof define==`function`&&define.amd?define([`exports`,`kendo.core.min`,`kendo.icons.min`,`kendo.html.icon.min`],t):(e=typeof globalThis<`u`?globalThis:e||self,t((e.kendo=e.kendo||{},e.kendo._globals=e.kendo._globals||{},e.kendo._globals.Segmentedcontrol={}),e.kendo._globals.Core,e.kendo._globals.Icons,e.kendo._globals.HtmlIcon))})(this,function(e,t,n,r){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let i={id:`segmentedcontrol`,name:`SegmentedControl`,category:`web`,description:`The SegmentedControl widget provides a segmented control UI with selectable buttons.`,depends:[`core`,`icons`,`html.icon`]};(function(e,t){let n=window.kendo,r=n.htmlEncode,i=n.ui.Widget,a=`.kendoSegmentedControl`,o=`change`,s=`k-hover`,c=`k-focus`,l=`k-disabled`,u=`k-selected`,d=`.k-segmented-control-button`,f=`k-segmented-control-button-icon`,p=`stretch`,m=`aria-hidden`,h=`aria-pressed`,g=`aria-disabled`,_=i.extend({init:function(e,t){let r=this;i.fn.init.call(r,e,t),r._items=r.options.items||[],r._selectedValue=r.options.selectedValue,r._enabled=r.options.enabled!==!1,r._isRtl=n.support.isRtl(r.element)||r.element.css(`direction`)===`rtl`,r._createIconClassMap(),r._render(),r._bindEvents(),r._initResizeObserver(),r._enabled||r._toggleEnabled(!1),n.notify(r)},options:{name:`SegmentedControl`,items:[],selectedValue:null,size:t,layoutMode:`compact`,enabled:!0},events:[o],_createIconClassMap:function(){let e=this,t=e._items,n=e._iconClassMap=new Map;t.forEach(e=>{e.iconClassOnSelection&&n.set(e.value,e.iconClassOnSelection)})},_render:function(){let t=this,r=t.element,i=t._items,a=t.options.size,o=n.cssProperties.sizeValues.find(([e])=>e===a),s=t.options.layoutMode===p;r.addClass(`k-segmented-control k-segmented-control${o?`-`+o[1]:``}${s?` k-segmented-control-stretched`:``}`),r.attr(`role`,`group`);let c=e(`<div>`).addClass(`k-segmented-control-thumb`).attr(m,`true`);r.append(c),i.forEach((e,n)=>{let i=t._renderButton(e,n);r.append(i)}),t._calculateThumbPosition()},_renderButton:function(t,i){let a=this,o=t.value===a._selectedValue,s=t.enabled===!1,c=e(`<button>`).attr(`type`,`button`).addClass(`k-segmented-control-button`).attr(`data-value`,t.value).attr(`data-button-index`,i).attr(`title`,t.text||``).attr(h,(o&&!s).toString()).toggleClass(l,s).toggleClass(u,o&&!s).prop(`disabled`,s);if(s&&c.attr(g,`true`),t.icon){let r=f+(t.iconClass?` `+t.iconClass:``),i=e(n.html.renderIcon({icon:t.icon,iconClass:r}));if(i.attr(m,!0),o&&!s){let e=a._iconClassMap.get(t.value);e&&i.addClass(e)}c.append(i)}else t.iconClass&&c.append(`<span class='${f} ${t.iconClass}' ${m}='true'></span>`);if(t.text){let n=e(`<span>`).addClass(`k-segmented-control-button-text`).text(r(t.text));c.append(n)}else t.icon&&c.attr(`aria-label`,t.value);return c},_calculateThumbPosition:function(){let t=this,r=t._selectedValue,i=n._outerWidth(t.element),a=t._items?.length||0;if(!i||!r)return;let o=t.element.find(`button[data-value]`),s=o.filter(`[data-value="${r}"]`),c=s.data(`buttonIndex`),l=t.element.find(`.k-segmented-control-thumb`),u=n._outerWidth(s),d=0,f=0,m=0;if(t.options.layoutMode===p){let e=a-1-c;d=c*u,f=e*u,m=(i-a*u)/2}else{let t=0;o.each((r,i)=>{let a=e(i);t+=n._outerWidth(a),r<c&&(d+=n._outerWidth(a)),r>c&&(f+=n._outerWidth(a))}),m=(i-t)/2}t._isRtl?l.css({right:d+m,left:f+m}):l.css({left:d+m,right:f+m})},_bindEvents:function(){let t=this;t.element.on(`click`+a,d,function(n){let r=e(n.currentTarget);if(!t._enabled||r.hasClass(l))return;let i=r.data(`value`);i!==t._selectedValue&&t.select(i)}).on(`mouseenter`+a,d,function(n){let r=e(n.currentTarget);t._enabled&&!r.hasClass(l)&&r.addClass(s)}).on(`mouseleave`+a,d,function(t){e(t.currentTarget).removeClass(s)}).on(`focus`+a,d,function(n){let r=e(n.currentTarget);t._enabled&&!r.hasClass(l)&&r.addClass(c)}).on(`blur`+a,d,function(t){e(t.currentTarget).removeClass(c)})},select:function(e){let n=this;if(e===t)return n._selectedValue;let r=n._items.find(t=>t.value===e);if(!r||r.enabled===!1)return;let i={value:e,item:r};n.trigger(o,i)||(n._selectedValue=e,n._updateSelectedState())},_updateSelectedState:function(){let t=this,n=t.element.find(d),r=t._selectedValue;n.each((n,r)=>{let i=e(r);t._removeSelectionClasses(i)});let i=n.filter(`[data-value="${r}"]`);t._addSelectionClasses(i,r),t._calculateThumbPosition()},_addSelectionClasses:function(e,t){let n=this._iconClassMap.get(t);e.addClass(u),e.attr(h,`true`);let r=e.find(`.k-icon,.k-svg-icon`);r.length&&n&&r.addClass(n)},_removeSelectionClasses:function(e){let t=this,n=e.data(`value`),r=t._iconClassMap.get(n);e.removeClass(u),e.attr(h,`false`);let i=e.find(`.k-icon,.k-svg-icon`);i.length&&r&&i.removeClass(r)},value:function(e){let n=this;if(e===t)return n._selectedValue;n._selectedValue=e,n._updateSelectedState()},item:function(e){return this.element.find(d).eq(e)},items:function(){return this.element.find(d)},enable:function(e){let t=this,n=e!==!1;t._enabled=n,t._toggleEnabled(n)},_toggleEnabled:function(t){let n=this,r=n.element.find(d);n.element.toggleClass(l,!t),t?r.each((t,r)=>{let i=e(r),a=n._items[t],o=a&&a.enabled===!1;i.prop(`disabled`,o),o?i.attr(g,`true`):i.removeAttr(g)}):r.each((t,n)=>{let r=e(n);r.prop(`disabled`,!0),r.attr(g,`true`),r.removeClass(s+` k-focus`)})},focus:function(n){let r=this;if(n!==t){let t=n instanceof e?n:r.item(n);t&&t.length&&t[0].focus();return}let i=r.element.find(d).not(`:disabled`);i.length&&i.first()[0].focus()},setOptions:function(e){let t=this;t.element.empty(),t.element.removeClass(function(e,t){return(t.match(/(^|\s)k-segmented-control\S*/g)||[]).join(` `)}),i.fn.setOptions.call(t,e),t._items=t.options.items||[],t._selectedValue=t.options.selectedValue,t._enabled=t.options.enabled!==!1,t._isRtl=n.support.isRtl(t.element)||t.element.css(`direction`)===`rtl`,t._createIconClassMap(),t._render(),t._enabled||t._toggleEnabled(!1)},_initResizeObserver:function(){let e=this;typeof ResizeObserver>`u`||(e._resizeObserver=new ResizeObserver(function(){e._calculateThumbPosition()}),e._resizeObserver.observe(e.element[0]))},destroy:function(){let e=this;e._resizeObserver&&=(e._resizeObserver.disconnect(),null),e.element.off(a),i.fn.destroy.call(e)}});n.ui.plugin(_)})(window.kendo.jQuery);var a=kendo;e.__meta__=i,e.default=a});
//# sourceMappingURL=kendo.segmentedcontrol.min.js.map