@progress/kendo-themes-html/dist/esm/slider/slider.spec.mjs

A collection of HTML helpers used for developing Kendo UI themes

var l=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((a,d)=>e[d]||e[a]&&a||null).filter(a=>a!==null).join(" "):e).filter(e=>!!e).join(" ");var B=(t,e)=>l({[`${t}-xs`]:e.size==="xsmall",[`${t}-sm`]:e.size==="small",[`${t}-md`]:e.size==="medium",[`${t}-lg`]:e.size==="large",[`${t}-xl`]:e.size==="xlarge",[`${t}-xxl`]:e.size==="xxlarge",[`${t}-xxxl`]:e.size==="xxxlarge"},{[`${t}-${e.fillMode}`]:e.fillMode},{[`${t}-${e.themeColor}`]:e.themeColor},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full","k-rounded-none":e.rounded==="none"}),E=(t,e)=>{let{valid:a,invalid:d,hover:r,focus:c,checked:p,active:i,selected:b,disabled:g,indeterminate:u,loading:S,empty:v,readonly:I,highlighted:A,...y}=e;return l({"k-valid":a,"k-invalid":d,"k-hover":r,"k-focus":c,"k-checked":p,"k-active":i,"k-selected":b,"k-disabled":g,"k-indeterminate":u&&!p,"k-loading":S,"k-empty":v,"k-readonly":I,"k-highlighted":A},Object.keys(y).reduce((m,N)=>(N.startsWith("k-")?m[N]=y[N]:m[`k-${N}`]=y[N],m),{}))};function ae(t,e){if(!e)return{};let a=Array.isArray(e)?e:[e];return Object.fromEntries(a.map(d=>[`k-${d}`,!0]))}var o={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},O={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},M={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},x={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},n={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},f={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"};import{Fragment as ye,jsx as re}from"react/jsx-runtime";var W="k-font-icon",ve=[],xe={size:[o.undefined,o.xsmall,o.small,o.medium,o.large,o.xlarge,o.xxlarge,o.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info]},ke={},D=t=>{let{size:e,themeColor:a,icon:d,rotate:r,flip:c,...p}=t;return d?re("span",{...p,className:l(t.className,W,B(W,{size:e}),{[`k-i-${d}`]:d,[`k-color-${a}`]:a,[`k-rotate-${r}`]:r,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"}),"aria-hidden":"true"}):re(ye,{})};D.states=ve;D.options=xe;D.className=W;D.defaultOptions=ke;var ie=D;import{Fragment as we,jsx as U}from"react/jsx-runtime";var j="k-svg-icon",Ne=[],Se={size:[o.undefined,o.xsmall,o.small,o.medium,o.large,o.xlarge,o.xxlarge,o.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info],variant:[x.outline,x.solid,x.duotone]},J={viewBox:"0 0 24 24",variant:x.outline},$=t=>{let{size:e,themeColor:a,rotate:d,flip:r,viewBox:c=J.viewBox,variant:p=J.variant,icon:i,...b}=t;if(!i)return U(we,{});if(i==="none")return U("span",{...b,className:l(t.className,j,B("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let g=typeof i=="object"&&i.name&&i.name,u=typeof i=="object"?p&&i.variants?.[p]||i.variants?.outline||i.content:void 0;return U("span",{...b,className:l(t.className,j,B("k-icon",{size:e}),{[`k-svg-i-${g}`]:g,[`k-color-${a}`]:a,[`k-rotate-${d}`]:d,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),"aria-hidden":"true",children:U("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof i=="object"?i.viewBox:c,dangerouslySetInnerHTML:u!==void 0?{__html:u}:void 0,children:i?void 0:t.children})})};$.states=Ne;$.options=Se;$.className=j;$.defaultOptions=J;var Q=$;import*as X from"@progress/kendo-svg-icons";var se="icon",le="icons";import{useContext as Ce}from"react";import{createContext as Te}from"react";var de=Te({iconsType:"svg"});import{Fragment as ce,jsx as P}from"react/jsx-runtime";var G="k-icon",Ie=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Be=[],Oe={size:[o.undefined,o.xsmall,o.small,o.medium,o.large,o.xlarge,o.xxlarge,o.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info],variant:[x.outline,x.solid,x.duotone]},q={viewBox:"0 0 24 24",type:"svg",variant:x.outline},k=t=>{let{iconsType:e}=Ce(de),{size:a,themeColor:d,icon:r,type:c=e||q.type,rotate:p,flip:i,viewBox:b=q.viewBox,variant:g=q.variant,...u}=t;if(!r)return P(ce,{});if((e||c)==="svg"){if(r==="none")return P(Q,{...u,className:l(t.className,G),icon:r,size:a,variant:g});let v=X[r]?r:Ie(`${r}-icon`);return X[v]?P(Q,{...u,className:l(t.className,G),icon:X[v],size:a,themeColor:d,rotate:p,flip:i,viewBox:b,variant:g}):P(ce,{})}return P(ie,{...u,className:l(t.className,G),icon:r,size:a,themeColor:d,rotate:p,flip:i})};k.states=Be;k.options=Oe;k.defaultOptions=q;k.className=G;k.moduleName=se;k.folderName=le;k.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 Y="button",ue=Y;import{Fragment as me,jsx as z,jsxs as pe}from"react/jsx-runtime";var H="k-button",Me=["icon-button"],Ae=[f.hover,f.focus,f.active,f.selected,f.disabled,f.generating],Ee={size:[o.undefined,o.xsmall,o.small,o.medium,o.large],rounded:[O.undefined,O.none,O.small,O.medium,O.large,O.full],fillMode:[M.undefined,M.solid,M.flat,M.outline,M.clear,M.link],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info,n.inverse]},Z={showArrow:!1,arrowIconName:"chevron-down"},s=t=>{let{as:e="button",size:a,rounded:d,fillMode:r,themeColor:c,showArrow:p=Z.showArrow,arrowIconName:i=Z.arrowIconName,variant:b,hover:g,focus:u,active:S,selected:v,disabled:I,togglable:A,ariaDisabled:y,icon:m,iconSize:N,text:w,iconClassName:T,className:oe,...V}=t,_=m!=null,K=t.children!==void 0;return pe(e,{className:l(oe,H,ae(H,b),B(H,{size:a,rounded:d,fillMode:r,themeColor:c}),E(H,{hover:g,focus:u,active:S,disabled:I||y,selected:v}),{"k-icon-button":!w&&!K&&_}),"aria-pressed":A?v?"true":"false":void 0,...V,"aria-disabled":y?"true":void 0,disabled:I||void 0,children:[typeof m=="string"&&m&&z(k,{className:l(T,"k-button-icon"),icon:m,size:N}),m&&typeof m!="string"&&z(me,{children:m}),w?pe(me,{children:[w&&z("span",{className:"k-button-text",children:w}),t.children]}):t.children&&z("span",{className:"k-button-text",children:t.children}),p&&z("span",{className:"k-menu-button-arrow k-button-arrow",children:z(k,{icon:i})})]})};s.states=Ae;s.options=Ee;s.variants=Me;s.className=H;s.defaultOptions=Z;s.moduleName=Y;s.folderName=ue;s.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."}]};import{jsx as ze}from"react/jsx-runtime";var fe=t=>ze(s,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});import{jsx as Le}from"react/jsx-runtime";var he=t=>Le(s,{icon:"folder",children:"Button",...t});import{jsx as Re}from"react/jsx-runtime";var ge=t=>Re(s,{children:"Button",...t});import{jsx as ee}from"react/jsx-runtime";var _e=s.options,Ke=s.states,De={...s.defaultOptions,variant:"text"},$e=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],Pe=[],L=t=>{let{variant:e,...a}=t;switch(e){case"icon-only":return ee(fe,{...a,icon:"star"});case"icon-and-text":return ee(he,{...a,icon:"star",children:"Button"});default:return ee(ge,{...a,children:"Button"})}};L.options=_e;L.states=Ke;L.variants=$e;L.defaultOptions=De;L.modifiers=Pe;L.className=s.className;var te="slider",be=te;import{jsx as R,jsxs as ne}from"react/jsx-runtime";var F="k-slider",He=[f.hover,f.focus,f.active,f.disabled,f.readonly],Fe={},h={type:"single",orientation:"horizontal",gradientType:"1d",readonly:!1,disabled:!1,handlePosition:"end",showButtons:!0,showTicks:!0,value:50,min:0,max:100},C=t=>{let{type:e=h.type,orientation:a=h.orientation,gradientType:d=h.gradientType,readonly:r=h.readonly,disabled:c=h.disabled,handlePosition:p=h.handlePosition,showButtons:i=h.showButtons,showTicks:b=h.showTicks,value:g=h.value,min:u=h.min,max:S=h.max,startValue:v,endValue:I,hover:A,focus:y,active:m,trackStyle:N,dir:w,...T}=t,V=(()=>{if(e==="gradient"&&d==="2d")return"undefined";if(a==="vertical")return"vertical"})(),_,K;return a==="horizontal"?(_=w==="rtl"?"chevron-left":"chevron-right",K=w==="rtl"?"chevron-right":"chevron-left"):a==="vertical"&&(_="chevron-up",K="chevron-down"),ne("div",{...T,className:l(F,t.className,E(F,{readonly:r,disabled:c}),{[`k-slider-${a}`]:a,"k-colorgradient-slider":e==="gradient"}),dir:w,children:[i&&R(s,{className:"k-button-decrease",rounded:"full",icon:K,tabIndex:-1,title:"Decrease"}),ne("div",{className:"k-slider-track-wrap",children:[b&&R("ul",{className:"k-reset k-slider-items","aria-hidden":"true",children:t.children}),ne("div",{className:"k-slider-track",style:N,children:[R("div",{className:"k-slider-selection"}),e==="range"&&R("span",{className:l("k-draghandle","k-draghandle-start",E(F,{hover:A,focus:y,active:m})),role:"slider",tabIndex:c?void 0:0,"aria-valuenow":v??u,"aria-valuemin":u,"aria-valuemax":I??S,"aria-orientation":V,"aria-disabled":c?"true":void 0,"aria-readonly":r?"true":void 0,"aria-label":T["aria-label"]?`${T["aria-label"]} start`:"Range start"}),R("span",{className:l("k-draghandle",`k-draghandle-${p}`,E(F,{hover:A,focus:y,active:m})),role:"slider",tabIndex:c?void 0:0,"aria-valuenow":e==="range"?I??S:g,"aria-valuemin":e==="range"?v??u:u,"aria-valuemax":S,"aria-orientation":V,"aria-disabled":c?"true":void 0,"aria-readonly":r?"true":void 0,"aria-label":e==="range"?T["aria-label"]?`${T["aria-label"]} end`:"Range end":T["aria-label"]})]})]}),i&&R(s,{className:"k-button-increase",rounded:"full",icon:_,tabIndex:-1,title:"Increase"})]})};C.states=He;C.options=Fe;C.className=F;C.defaultOptions=h;C.moduleName=te;C.folderName=be;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 Yt=C;export{C as Slider,Yt as default};