@progress/kendo-themes-html/dist/cjs/slider/templates/slider-range.js

A collection of HTML helpers used for developing Kendo UI themes

var _e=Object.create;var Z=Object.defineProperty;var Ke=Object.getOwnPropertyDescriptor;var Pe=Object.getOwnPropertyNames;var De=Object.getPrototypeOf,$e=Object.prototype.hasOwnProperty;var Ve=(e,t)=>{for(var a in t)Z(e,a,{get:t[a],enumerable:!0})},be=(e,t,a,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of Pe(t))!$e.call(e,n)&&n!==a&&Z(e,n,{get:()=>t[n],enumerable:!(l=Ke(t,n))||l.enumerable});return e};var He=(e,t,a)=>(a=e!=null?_e(De(e)):{},be(t||!e||!e.__esModule?Z(a,"default",{value:e,enumerable:!0}):a,e)),Fe=e=>be(Z({},"__esModule",{value:!0}),e);var gt={};Ve(gt,{SliderRange:()=>ht});module.exports=Fe(gt);var u=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?u(...t):typeof t=="object"?Object.keys(t).map((a,l)=>t[l]||t[a]&&a||null).filter(a=>a!==null).join(" "):t).filter(t=>!!t).join(" ");var _=(e,t)=>u({[`${e}-xs`]:t.size==="xsmall",[`${e}-sm`]:t.size==="small",[`${e}-md`]:t.size==="medium",[`${e}-lg`]:t.size==="large",[`${e}-xl`]:t.size==="xlarge",[`${e}-xxl`]:t.size==="xxlarge",[`${e}-xxxl`]:t.size==="xxxlarge"},{[`${e}-${t.fillMode}`]:t.fillMode},{[`${e}-${t.themeColor}`]:t.themeColor},{"k-rounded-sm":t.rounded==="small","k-rounded-md":t.rounded==="medium","k-rounded-lg":t.rounded==="large","k-rounded-full":t.rounded==="full","k-rounded-none":t.rounded==="none"}),V=(e,t)=>{let{valid:a,invalid:l,hover:n,focus:d,checked:p,active:s,selected:I,disabled:T,indeterminate:g,loading:w,empty:k,readonly:L,highlighted:$,...M}=t;return u({"k-valid":a,"k-invalid":l,"k-hover":n,"k-focus":d,"k-checked":p,"k-active":s,"k-selected":I,"k-disabled":T,"k-indeterminate":g&&!p,"k-loading":w,"k-empty":k,"k-readonly":L,"k-highlighted":$},Object.keys(M).reduce((x,z)=>(z.startsWith("k-")?x[z]=M[z]:x[`k-${z}`]=M[z],x),{}))};function he(e,t){if(!t)return{};let a=Array.isArray(t)?t:[t];return Object.fromEntries(a.map(l=>[`k-${l}`,!0]))}var i={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},K={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},P={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},B={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},r={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},y={open:"open",hover:"hover",focus:"focus",active:"active",selected:"selected",disabled:"disabled",valid:"valid",invalid:"invalid",loading:"loading",required:"required",empty:"empty",indeterminate:"indeterminate",checked:"checked",readonly:"readonly",highlighted:"highlighted",generating:"generating",expanded:"expanded"};var q=require("react/jsx-runtime"),oe="k-font-icon",Ue=[],Ge={size:[i.undefined,i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info]},qe={},W=e=>{let{size:t,themeColor:a,icon:l,rotate:n,flip:d,...p}=e;return l?(0,q.jsx)("span",{...p,className:u(e.className,oe,_(oe,{size:t}),{[`k-i-${l}`]:l,[`k-color-${a}`]:a,[`k-rotate-${n}`]:n,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):(0,q.jsx)(q.Fragment,{})};W.states=Ue;W.options=Ge;W.className=oe;W.defaultOptions=qe;var ge=W;var D=require("react/jsx-runtime"),ae="k-svg-icon",We=[],Je={size:[i.undefined,i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info],variant:[B.outline,B.solid,B.duotone]},ne={viewBox:"0 0 24 24",variant:B.outline},J=e=>{var w,k;let{size:t,themeColor:a,rotate:l,flip:n,viewBox:d=ne.viewBox,variant:p=ne.variant,icon:s,...I}=e;if(!s)return(0,D.jsx)(D.Fragment,{});if(s==="none")return(0,D.jsx)("span",{...I,className:u(e.className,ae,_("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let T=typeof s=="object"&&s.name&&s.name,g=typeof s=="object"?p&&((w=s.variants)==null?void 0:w[p])||((k=s.variants)==null?void 0:k.outline)||s.content:void 0;return(0,D.jsx)("span",{...I,className:u(e.className,ae,_("k-icon",{size:t}),{[`k-svg-i-${T}`]:T,[`k-color-${a}`]:a,[`k-rotate-${l}`]:l,"k-flip-h":n==="h"||n==="both","k-flip-v":n==="v"||n==="both"}),"aria-hidden":"true",children:(0,D.jsx)("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof s=="object"?s.viewBox:d,dangerouslySetInnerHTML:g!==void 0?{__html:g}:void 0,children:s?void 0:e.children})})};J.states=We;J.options=Je;J.className=ae;J.defaultOptions=ne;var re=J;var ie=He(require("@progress/kendo-svg-icons"));var xe="icon",ve="icons";var Se=require("react");var ke=require("react"),ye=(0,ke.createContext)({iconsType:"svg"});var A=require("react/jsx-runtime"),j="k-icon",Qe=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),Xe=[],Ye={size:[i.undefined,i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info],variant:[B.outline,B.solid,B.duotone]},ee={viewBox:"0 0 24 24",type:"svg",variant:B.outline},O=e=>{let{iconsType:t}=(0,Se.useContext)(ye),{size:a,themeColor:l,icon:n,type:d=t||ee.type,rotate:p,flip:s,viewBox:I=ee.viewBox,variant:T=ee.variant,...g}=e;if(!n)return(0,A.jsx)(A.Fragment,{});if((t||d)==="svg"){if(n==="none")return(0,A.jsx)(re,{...g,className:u(e.className,j),icon:n,size:a,variant:T});let k=ie[n]?n:Qe(`${n}-icon`);return ie[k]?(0,A.jsx)(re,{...g,className:u(e.className,j),icon:ie[k],size:a,themeColor:l,rotate:p,flip:s,viewBox:I,variant:T}):(0,A.jsx)(A.Fragment,{})}return(0,A.jsx)(ge,{...g,className:u(e.className,j),icon:n,size:a,themeColor:l,rotate:p,flip:s})};O.states=Xe;O.options=Ye;O.defaultOptions=ee;O.className=j;O.moduleName=xe;O.folderName=ve;O.ariaSpec={selector:".k-icon, .k-svg-icon",rules:[{selector:".k-icon, .k-svg-icon",attribute:"aria-hidden=true",usage:"Hides the icon element and all its children from assistive technologies."}]};var le="button",Ne=le;var S=require("react/jsx-runtime"),Q="k-button",Ze=["icon-button"],je=[y.hover,y.focus,y.active,y.selected,y.disabled,y.generating],et={size:[i.undefined,i.xsmall,i.small,i.medium,i.large],rounded:[K.undefined,K.none,K.small,K.medium,K.large,K.full],fillMode:[P.undefined,P.solid,P.flat,P.outline,P.clear,P.link],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info,r.inverse]},se={showArrow:!1,arrowIconName:"chevron-down"},m=e=>{let{as:t="button",size:a,rounded:l,fillMode:n,themeColor:d,showArrow:p=se.showArrow,arrowIconName:s=se.arrowIconName,variant:I,hover:T,focus:g,active:w,selected:k,disabled:L,togglable:$,ariaDisabled:M,icon:x,iconSize:z,text:E,iconClassName:R,className:fe,...Y}=e,U=x!=null,G=e.children!==void 0;return(0,S.jsxs)(t,{className:u(fe,Q,he(Q,I),_(Q,{size:a,rounded:l,fillMode:n,themeColor:d}),V(Q,{hover:T,focus:g,active:w,disabled:L||M,selected:k}),{"k-icon-button":!E&&!G&&U}),"aria-pressed":$?k?"true":"false":void 0,...Y,"aria-disabled":M?"true":void 0,disabled:L||void 0,children:[typeof x=="string"&&x&&(0,S.jsx)(O,{className:u(R,"k-button-icon"),icon:x,size:z}),x&&typeof x!="string"&&(0,S.jsx)(S.Fragment,{children:x}),E?(0,S.jsxs)(S.Fragment,{children:[E&&(0,S.jsx)("span",{className:"k-button-text",children:E}),e.children]}):e.children&&(0,S.jsx)("span",{className:"k-button-text",children:e.children}),p&&(0,S.jsx)("span",{className:"k-menu-button-arrow k-button-arrow",children:(0,S.jsx)(O,{icon:s})})]})};m.states=je;m.options=et;m.variants=Ze;m.className=Q;m.defaultOptions=se;m.moduleName=le;m.folderName=Ne;m.ariaSpec={selector:".k-button",rules:[{selector:".k-button",attribute:"role=button or nodeName=button",usage:"The button role is implicit from the native <button> element."},{selector:".k-button",attribute:"aria-label (when icon-only)",usage:"Required for icon-only buttons that have no visible text."},{selector:".k-button",attribute:"aria-pressed (when togglable)",usage:"Indicates the pressed state of a toggle button."},{selector:".k-button",attribute:"disabled (when disabled)",usage:"Rendered when the button is disabled."}]};var we=require("react/jsx-runtime"),Te=e=>(0,we.jsx)(m,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});var Ie=require("react/jsx-runtime"),Ce=e=>(0,Ie.jsx)(m,{icon:"folder",children:"Button",...e});var Oe=require("react/jsx-runtime"),Be=e=>(0,Oe.jsx)(m,{children:"Button",...e});var te=require("react/jsx-runtime"),tt=m.options,ot=m.states,at={...m.defaultOptions,variant:"text"},nt=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],rt=[],H=e=>{let{variant:t,...a}=e;switch(t){case"icon-only":return(0,te.jsx)(Te,{...a,icon:"star"});case"icon-and-text":return(0,te.jsx)(Ce,{...a,icon:"star",children:"Button"});default:return(0,te.jsx)(Be,{...a,children:"Button"})}};H.options=tt;H.states=ot;H.variants=nt;H.defaultOptions=at;H.modifiers=rt;H.className=m.className;var de="slider",Me=de;var C=require("react/jsx-runtime"),X="k-slider",it=[y.hover,y.focus,y.active,y.disabled,y.readonly],lt={},N={type:"single",orientation:"horizontal",gradientType:"1d",readonly:!1,disabled:!1,handlePosition:"end",showButtons:!0,showTicks:!0,value:50,min:0,max:100},c=e=>{let{type:t=N.type,orientation:a=N.orientation,gradientType:l=N.gradientType,readonly:n=N.readonly,disabled:d=N.disabled,handlePosition:p=N.handlePosition,showButtons:s=N.showButtons,showTicks:I=N.showTicks,value:T=N.value,min:g=N.min,max:w=N.max,startValue:k,endValue:L,hover:$,focus:M,active:x,trackStyle:z,dir:E,...R}=e,Y=(()=>{if(t==="gradient"&&l==="2d")return"undefined";if(a==="vertical")return"vertical"})(),U,G;return a==="horizontal"?(U=E==="rtl"?"chevron-left":"chevron-right",G=E==="rtl"?"chevron-right":"chevron-left"):a==="vertical"&&(U="chevron-up",G="chevron-down"),(0,C.jsxs)("div",{...R,className:u(X,e.className,V(X,{readonly:n,disabled:d}),{[`k-slider-${a}`]:a,"k-colorgradient-slider":t==="gradient"}),dir:E,children:[s&&(0,C.jsx)(m,{className:"k-button-decrease",rounded:"full",icon:G,tabIndex:-1,title:"Decrease"}),(0,C.jsxs)("div",{className:"k-slider-track-wrap",children:[I&&(0,C.jsx)("ul",{className:"k-reset k-slider-items","aria-hidden":"true",children:e.children}),(0,C.jsxs)("div",{className:"k-slider-track",style:z,children:[(0,C.jsx)("div",{className:"k-slider-selection"}),t==="range"&&(0,C.jsx)("span",{className:u("k-draghandle","k-draghandle-start",V(X,{hover:$,focus:M,active:x})),role:"slider",tabIndex:d?void 0:0,"aria-valuenow":k??g,"aria-valuemin":g,"aria-valuemax":L??w,"aria-orientation":Y,"aria-disabled":d?"true":void 0,"aria-readonly":n?"true":void 0,"aria-label":R["aria-label"]?`${R["aria-label"]} start`:"Range start"}),(0,C.jsx)("span",{className:u("k-draghandle",`k-draghandle-${p}`,V(X,{hover:$,focus:M,active:x})),role:"slider",tabIndex:d?void 0:0,"aria-valuenow":t==="range"?L??w:T,"aria-valuemin":t==="range"?k??g:g,"aria-valuemax":w,"aria-orientation":Y,"aria-disabled":d?"true":void 0,"aria-readonly":n?"true":void 0,"aria-label":t==="range"?R["aria-label"]?`${R["aria-label"]} end`:"Range end":R["aria-label"]})]})]}),s&&(0,C.jsx)(m,{className:"k-button-increase",rounded:"full",icon:U,tabIndex:-1,title:"Increase"})]})};c.states=it;c.options=lt;c.className=X;c.defaultOptions=N;c.moduleName=de;c.folderName=Me;c.ariaSpec={selector:".k-slider",rules:[{selector:".k-slider .k-draghandle:not(.k-hsv-draghandle)",attribute:"role=slider",usage:"Sets the proper role for Slider."},{selector:".k-slider .k-draghandle:not(.k-hsv-draghandle)",attribute:"aria-label or aria-labelledby or title",usage:"The Slider needs an accessible name to be assigned to it."},{selector:".k-slider .k-draghandle:not(.k-hsv-draghandle)",attribute:"aria-invalid=true (when invalid)",usage:"Rendered only when the Slider is in a form and announces the invalid state."},{selector:".k-slider .k-draghandle:not(.k-hsv-draghandle)",attribute:"aria-valuenow",usage:"Specifies the currently selected value in the Slider."},{selector:".k-slider .k-draghandle:not(.k-hsv-draghandle)",attribute:"aria-valuemin",usage:"Specifies the minimum available value in the Slider."},{selector:".k-slider .k-draghandle:not(.k-hsv-draghandle)",attribute:"aria-valuemax",usage:"Specifies the maximum available value in the Slider."},{selector:".k-slider .k-draghandle:not(.k-hsv-draghandle)",attribute:"aria-valuetext (when has text alternative)",usage:"Specifies a human-readable text alternative to the numeric value. Provided by consuming applications."},{selector:".k-slider:not(.k-disabled) .k-draghandle:not(.k-hsv-draghandle)",attribute:"tabindex=0",usage:"The element must be focusable. Disabled sliders are removed from tab order."},{selector:".k-slider-vertical .k-draghandle",attribute:"aria-orientation=vertical (when vertical)",usage:"Present only when slider is vertical."},{selector:".k-slider.k-disabled .k-draghandle:not(.k-hsv-draghandle)",attribute:"aria-disabled=true",usage:"Rendered only when the Slider is disabled."},{selector:".k-slider.k-readonly .k-draghandle",attribute:"aria-readonly=true (when readonly)",usage:"Rendered only when the Slider is readonly. Readonly sliders remain focusable but their value cannot be changed."},{selector:".k-slider .k-button",attribute:"tabindex=-1",usage:"Excludes the buttons from the natural tab order. Keyboard users use arrow keys on the drag handle."},{selector:".k-slider .k-button",attribute:"title",usage:'Provides a tooltip describing the button action (e.g., "Decrease" or "Increase").'},{selector:".k-slider .k-slider-items",attribute:"aria-hidden=true",usage:"Hides the tick list from assistive technologies. Tick values are redundant with the drag handle value attributes."},{selector:".k-slider .k-tick",attribute:"role=presentation",usage:"Removes semantic meaning from individual tick elements. Ticks are visual-only markers."},{selector:".k-slider .k-tick",attribute:"title",usage:"Represents the value associated with the respective tick."}]};var ce=require("react/jsx-runtime"),ze="k-tick",st=[],dt={},Ae={label:!1},o=e=>{let{style:t,label:a=Ae.label,orientation:l,large:n,text:d,...p}=e;return(0,ce.jsx)("li",{...p,role:"presentation",title:d||"Tick",className:u(e.className,ze,{[`k-tick-${l}`]:l,"k-tick-large":n}),style:t,children:a&&(0,ce.jsx)("span",{className:"k-label",children:d})})};o.states=st;o.options=dt;o.className=ze;o.defaultOptions=Ae;var f=require("react/jsx-runtime"),Ee=e=>(0,f.jsx)(c,{"aria-label":e["aria-label"]||"Slider",children:(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(o,{className:"k-first",label:!0,large:!0,text:"0"}),(0,f.jsx)(o,{}),(0,f.jsx)(o,{}),(0,f.jsx)(o,{}),(0,f.jsx)(o,{}),(0,f.jsx)(o,{label:!0,large:!0,text:"5"}),(0,f.jsx)(o,{}),(0,f.jsx)(o,{}),(0,f.jsx)(o,{}),(0,f.jsx)(o,{}),(0,f.jsx)(o,{className:"k-last",label:!0,large:!0,text:"10"})]}),...e});var b=require("react/jsx-runtime"),Re=e=>(0,b.jsx)(c,{children:(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(o,{className:"k-first",label:!0,large:!0,text:"0"}),(0,b.jsx)(o,{}),(0,b.jsx)(o,{}),(0,b.jsx)(o,{}),(0,b.jsx)(o,{}),(0,b.jsx)(o,{label:!0,large:!0,text:"5"}),(0,b.jsx)(o,{}),(0,b.jsx)(o,{}),(0,b.jsx)(o,{}),(0,b.jsx)(o,{}),(0,b.jsx)(o,{className:"k-last",label:!0,large:!0,text:"10"})]}),"aria-label":e["aria-label"]||"Vertical slider",...e,orientation:"vertical"});var ue=require("react/jsx-runtime");var ct=require("react/jsx-runtime");var ut=require("react/jsx-runtime");var me=require("react/jsx-runtime");var pe=require("react/jsx-runtime");var v=require("react/jsx-runtime"),mt=c.options,pt=c.states,Le={...c.defaultOptions,variant:"horizontal",label:!0},ft=[{name:"horizontal",title:"Horizontal"},{name:"vertical",title:"Vertical"}],bt=[{name:"label",title:"Labels",default:!0},{name:"tick",title:"Ticks",default:!0},{name:"button",title:"Side Buttons",default:!0}],F=e=>{let{variant:t,modifiers:a,...l}=e,n=Le.label,d={};Object.keys(a||{}).forEach(s=>{switch(s){case"button":{d.showButtons=!!(a!=null&&a[s]);break}case"label":{n=!!(a!=null&&a[s]);break}case"tick":{d.showTicks=!!(a!=null&&a[s]);break}}});let p={"--kendo-slider-start":0,"--kendo-slider-end":60};return t==="vertical"?(0,v.jsxs)(Re,{style:{height:"300px",...p},...l,...d,children:[(0,v.jsx)(o,{label:n,large:!0,orientation:"vertical",text:"0",style:{position:"absolute",bottom:"0%"}}),(0,v.jsx)(o,{label:n,large:!0,orientation:"vertical",text:"2",style:{position:"absolute",bottom:"25%"}}),(0,v.jsx)(o,{label:n,large:!0,orientation:"vertical",text:"4",style:{position:"absolute",bottom:"50%"}}),(0,v.jsx)(o,{label:n,large:!0,orientation:"vertical",text:"6",style:{position:"absolute",bottom:"75%"}}),(0,v.jsx)(o,{label:n,large:!0,orientation:"vertical",text:"8",style:{position:"absolute",bottom:"100%"}})]}):(0,v.jsxs)(Ee,{style:{width:"400px",...p},...l,...d,children:[(0,v.jsx)(o,{label:n,large:!0,orientation:"horizontal",text:"0",style:{position:"absolute",left:"0%"}}),(0,v.jsx)(o,{label:n,large:!0,orientation:"horizontal",text:"2",style:{position:"absolute",left:"25%"}}),(0,v.jsx)(o,{label:n,large:!0,orientation:"horizontal",text:"4",style:{position:"absolute",left:"50%"}}),(0,v.jsx)(o,{label:n,large:!0,orientation:"horizontal",text:"6",style:{position:"absolute",left:"75%"}}),(0,v.jsx)(o,{label:n,large:!0,orientation:"horizontal",text:"8",style:{position:"absolute",left:"100%"}})]})};F.options=mt;F.states=pt;F.variants=ft;F.defaultOptions=Le;F.modifiers=bt;F.className=c.className;var h=require("react/jsx-runtime"),ht=e=>(0,h.jsx)(c,{type:"range",showButtons:!1,"aria-label":e["aria-label"]||"Range slider",children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(o,{className:"k-first",label:!0,large:!0,text:"0"}),(0,h.jsx)(o,{}),(0,h.jsx)(o,{}),(0,h.jsx)(o,{}),(0,h.jsx)(o,{}),(0,h.jsx)(o,{label:!0,large:!0,text:"5"}),(0,h.jsx)(o,{}),(0,h.jsx)(o,{}),(0,h.jsx)(o,{}),(0,h.jsx)(o,{}),(0,h.jsx)(o,{className:"k-last",label:!0,large:!0,text:"10"})]}),...e});