@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 17 kB
JavaScript
var u=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?u(...t):typeof t=="object"?Object.keys(t).map((n,d)=>t[d]||t[n]&&n||null).filter(n=>n!==null).join(" "):t).filter(t=>!!t).join(" ");var E=(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"}),K=(e,t)=>{let{valid:n,invalid:d,hover:r,focus:s,checked:p,active:l,selected:S,disabled:y,indeterminate:f,loading:O,empty:N,readonly:A,highlighted:_,...I}=t;return u({"k-valid":n,"k-invalid":d,"k-hover":r,"k-focus":s,"k-checked":p,"k-active":l,"k-selected":S,"k-disabled":y,"k-indeterminate":f&&!p,"k-loading":O,"k-empty":N,"k-readonly":A,"k-highlighted":_},Object.keys(I).reduce((b,B)=>(B.startsWith("k-")?b[B]=I[B]:b[`k-${B}`]=I[B],b),{}))};function ce(e,t){if(!t)return{};let n=Array.isArray(t)?t:[t];return Object.fromEntries(n.map(d=>[`k-${d}`,!0]))}var i={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},R={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},L={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},T={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},a={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},h={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 Re,jsx as ue}from"react/jsx-runtime";var j="k-font-icon",ze=[],Ae={size:[i.undefined,i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info]},Ee={},U=e=>{let{size:t,themeColor:n,icon:d,rotate:r,flip:s,...p}=e;return d?ue("span",{...p,className:u(e.className,j,E(j,{size:t}),{[`k-i-${d}`]:d,[`k-color-${n}`]:n,[`k-rotate-${r}`]:r,"k-flip-h":s==="h"||s==="both","k-flip-v":s==="v"||s==="both"}),"aria-hidden":"true"}):ue(Re,{})};U.states=ze;U.options=Ae;U.className=j;U.defaultOptions=Ee;var me=U;import{Fragment as Ke,jsx as X}from"react/jsx-runtime";var ee="k-svg-icon",Le=[],_e={size:[i.undefined,i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info],variant:[T.outline,T.solid,T.duotone]},te={viewBox:"0 0 24 24",variant:T.outline},G=e=>{let{size:t,themeColor:n,rotate:d,flip:r,viewBox:s=te.viewBox,variant:p=te.variant,icon:l,...S}=e;if(!l)return X(Ke,{});if(l==="none")return X("span",{...S,className:u(e.className,ee,E("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let y=typeof l=="object"&&l.name&&l.name,f=typeof l=="object"?p&&l.variants?.[p]||l.variants?.outline||l.content:void 0;return X("span",{...S,className:u(e.className,ee,E("k-icon",{size:t}),{[`k-svg-i-${y}`]:y,[`k-color-${n}`]:n,[`k-rotate-${d}`]:d,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),"aria-hidden":"true",children:X("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof l=="object"?l.viewBox:s,dangerouslySetInnerHTML:f!==void 0?{__html:f}:void 0,children:l?void 0:e.children})})};G.states=Le;G.options=_e;G.className=ee;G.defaultOptions=te;var oe=G;import*as ae from"@progress/kendo-svg-icons";var pe="icon",fe="icons";import{useContext as De}from"react";import{createContext as Pe}from"react";var be=Pe({iconsType:"svg"});import{Fragment as he,jsx as q}from"react/jsx-runtime";var Y="k-icon",$e=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),Ve=[],He={size:[i.undefined,i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info],variant:[T.outline,T.solid,T.duotone]},Z={viewBox:"0 0 24 24",type:"svg",variant:T.outline},w=e=>{let{iconsType:t}=De(be),{size:n,themeColor:d,icon:r,type:s=t||Z.type,rotate:p,flip:l,viewBox:S=Z.viewBox,variant:y=Z.variant,...f}=e;if(!r)return q(he,{});if((t||s)==="svg"){if(r==="none")return q(oe,{...f,className:u(e.className,Y),icon:r,size:n,variant:y});let N=ae[r]?r:$e(`${r}-icon`);return ae[N]?q(oe,{...f,className:u(e.className,Y),icon:ae[N],size:n,themeColor:d,rotate:p,flip:l,viewBox:S,variant:y}):q(he,{})}return q(me,{...f,className:u(e.className,Y),icon:r,size:n,themeColor:d,rotate:p,flip:l})};w.states=Ve;w.options=He;w.defaultOptions=Z;w.className=Y;w.moduleName=pe;w.folderName=fe;w.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 ne="button",ge=ne;import{Fragment as xe,jsx as P,jsxs as ve}from"react/jsx-runtime";var W="k-button",Fe=["icon-button"],Ue=[h.hover,h.focus,h.active,h.selected,h.disabled,h.generating],Ge={size:[i.undefined,i.xsmall,i.small,i.medium,i.large],rounded:[R.undefined,R.none,R.small,R.medium,R.large,R.full],fillMode:[L.undefined,L.solid,L.flat,L.outline,L.clear,L.link],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info,a.inverse]},re={showArrow:!1,arrowIconName:"chevron-down"},m=e=>{let{as:t="button",size:n,rounded:d,fillMode:r,themeColor:s,showArrow:p=re.showArrow,arrowIconName:l=re.arrowIconName,variant:S,hover:y,focus:f,active:O,selected:N,disabled:A,togglable:_,ariaDisabled:I,icon:b,iconSize:B,text:M,iconClassName:z,className:de,...Q}=e,H=b!=null,F=e.children!==void 0;return ve(t,{className:u(de,W,ce(W,S),E(W,{size:n,rounded:d,fillMode:r,themeColor:s}),K(W,{hover:y,focus:f,active:O,disabled:A||I,selected:N}),{"k-icon-button":!M&&!F&&H}),"aria-pressed":_?N?"true":"false":void 0,...Q,"aria-disabled":I?"true":void 0,disabled:A||void 0,children:[typeof b=="string"&&b&&P(w,{className:u(z,"k-button-icon"),icon:b,size:B}),b&&typeof b!="string"&&P(xe,{children:b}),M?ve(xe,{children:[M&&P("span",{className:"k-button-text",children:M}),e.children]}):e.children&&P("span",{className:"k-button-text",children:e.children}),p&&P("span",{className:"k-menu-button-arrow k-button-arrow",children:P(w,{icon:l})})]})};m.states=Ue;m.options=Ge;m.variants=Fe;m.className=W;m.defaultOptions=re;m.moduleName=ne;m.folderName=ge;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."}]};import{jsx as qe}from"react/jsx-runtime";var ke=e=>qe(m,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});import{jsx as We}from"react/jsx-runtime";var ye=e=>We(m,{icon:"folder",children:"Button",...e});import{jsx as Je}from"react/jsx-runtime";var Se=e=>Je(m,{children:"Button",...e});import{jsx as ie}from"react/jsx-runtime";var Qe=m.options,Xe=m.states,Ye={...m.defaultOptions,variant:"text"},Ze=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],je=[],D=e=>{let{variant:t,...n}=e;switch(t){case"icon-only":return ie(ke,{...n,icon:"star"});case"icon-and-text":return ie(ye,{...n,icon:"star",children:"Button"});default:return ie(Se,{...n,children:"Button"})}};D.options=Qe;D.states=Xe;D.variants=Ze;D.defaultOptions=Ye;D.modifiers=je;D.className=m.className;var le="slider",Ne=le;import{jsx as $,jsxs as se}from"react/jsx-runtime";var J="k-slider",et=[h.hover,h.focus,h.active,h.disabled,h.readonly],tt={},g={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=g.type,orientation:n=g.orientation,gradientType:d=g.gradientType,readonly:r=g.readonly,disabled:s=g.disabled,handlePosition:p=g.handlePosition,showButtons:l=g.showButtons,showTicks:S=g.showTicks,value:y=g.value,min:f=g.min,max:O=g.max,startValue:N,endValue:A,hover:_,focus:I,active:b,trackStyle:B,dir:M,...z}=e,Q=(()=>{if(t==="gradient"&&d==="2d")return"undefined";if(n==="vertical")return"vertical"})(),H,F;return n==="horizontal"?(H=M==="rtl"?"chevron-left":"chevron-right",F=M==="rtl"?"chevron-right":"chevron-left"):n==="vertical"&&(H="chevron-up",F="chevron-down"),se("div",{...z,className:u(J,e.className,K(J,{readonly:r,disabled:s}),{[`k-slider-${n}`]:n,"k-colorgradient-slider":t==="gradient"}),dir:M,children:[l&&$(m,{className:"k-button-decrease",rounded:"full",icon:F,tabIndex:-1,title:"Decrease"}),se("div",{className:"k-slider-track-wrap",children:[S&&$("ul",{className:"k-reset k-slider-items","aria-hidden":"true",children:e.children}),se("div",{className:"k-slider-track",style:B,children:[$("div",{className:"k-slider-selection"}),t==="range"&&$("span",{className:u("k-draghandle","k-draghandle-start",K(J,{hover:_,focus:I,active:b})),role:"slider",tabIndex:s?void 0:0,"aria-valuenow":N??f,"aria-valuemin":f,"aria-valuemax":A??O,"aria-orientation":Q,"aria-disabled":s?"true":void 0,"aria-readonly":r?"true":void 0,"aria-label":z["aria-label"]?`${z["aria-label"]} start`:"Range start"}),$("span",{className:u("k-draghandle",`k-draghandle-${p}`,K(J,{hover:_,focus:I,active:b})),role:"slider",tabIndex:s?void 0:0,"aria-valuenow":t==="range"?A??O:y,"aria-valuemin":t==="range"?N??f:f,"aria-valuemax":O,"aria-orientation":Q,"aria-disabled":s?"true":void 0,"aria-readonly":r?"true":void 0,"aria-label":t==="range"?z["aria-label"]?`${z["aria-label"]} end`:"Range end":z["aria-label"]})]})]}),l&&$(m,{className:"k-button-increase",rounded:"full",icon:H,tabIndex:-1,title:"Increase"})]})};c.states=et;c.options=tt;c.className=J;c.defaultOptions=g;c.moduleName=le;c.folderName=Ne;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."}]};import{jsx as Te}from"react/jsx-runtime";var we="k-tick",ot=[],at={},Ce={label:!1},o=e=>{let{style:t,label:n=Ce.label,orientation:d,large:r,text:s,...p}=e;return Te("li",{...p,role:"presentation",title:s||"Tick",className:u(e.className,we,{[`k-tick-${d}`]:d,"k-tick-large":r}),style:t,children:n&&Te("span",{className:"k-label",children:s})})};o.states=ot;o.options=at;o.className=we;o.defaultOptions=Ce;import{Fragment as nt,jsx as x,jsxs as rt}from"react/jsx-runtime";var Ie=e=>x(c,{"aria-label":e["aria-label"]||"Slider",children:rt(nt,{children:[x(o,{className:"k-first",label:!0,large:!0,text:"0"}),x(o,{}),x(o,{}),x(o,{}),x(o,{}),x(o,{label:!0,large:!0,text:"5"}),x(o,{}),x(o,{}),x(o,{}),x(o,{}),x(o,{className:"k-last",label:!0,large:!0,text:"10"})]}),...e});import{Fragment as it,jsx as v,jsxs as lt}from"react/jsx-runtime";var Be=e=>v(c,{children:lt(it,{children:[v(o,{className:"k-first",label:!0,large:!0,text:"0"}),v(o,{}),v(o,{}),v(o,{}),v(o,{}),v(o,{label:!0,large:!0,text:"5"}),v(o,{}),v(o,{}),v(o,{}),v(o,{}),v(o,{className:"k-last",label:!0,large:!0,text:"10"})]}),"aria-label":e["aria-label"]||"Vertical slider",...e,orientation:"vertical"});import{Fragment as Po,jsx as Ko,jsxs as Do}from"react/jsx-runtime";import{Fragment as Uo,jsx as Fo,jsxs as Go}from"react/jsx-runtime";import{jsx as Qo}from"react/jsx-runtime";import{jsx as jo}from"react/jsx-runtime";import{Fragment as na,jsx as aa,jsxs as ra}from"react/jsx-runtime";import{jsx as C,jsxs as Oe}from"react/jsx-runtime";var st=c.options,dt=c.states,Me={...c.defaultOptions,variant:"horizontal",label:!0},ct=[{name:"horizontal",title:"Horizontal"},{name:"vertical",title:"Vertical"}],ut=[{name:"label",title:"Labels",default:!0},{name:"tick",title:"Ticks",default:!0},{name:"button",title:"Side Buttons",default:!0}],V=e=>{let{variant:t,modifiers:n,...d}=e,r=Me.label,s={};Object.keys(n||{}).forEach(l=>{switch(l){case"button":{s.showButtons=!!n?.[l];break}case"label":{r=!!n?.[l];break}case"tick":{s.showTicks=!!n?.[l];break}}});let p={"--kendo-slider-start":0,"--kendo-slider-end":60};return t==="vertical"?Oe(Be,{style:{height:"300px",...p},...d,...s,children:[C(o,{label:r,large:!0,orientation:"vertical",text:"0",style:{position:"absolute",bottom:"0%"}}),C(o,{label:r,large:!0,orientation:"vertical",text:"2",style:{position:"absolute",bottom:"25%"}}),C(o,{label:r,large:!0,orientation:"vertical",text:"4",style:{position:"absolute",bottom:"50%"}}),C(o,{label:r,large:!0,orientation:"vertical",text:"6",style:{position:"absolute",bottom:"75%"}}),C(o,{label:r,large:!0,orientation:"vertical",text:"8",style:{position:"absolute",bottom:"100%"}})]}):Oe(Ie,{style:{width:"400px",...p},...d,...s,children:[C(o,{label:r,large:!0,orientation:"horizontal",text:"0",style:{position:"absolute",left:"0%"}}),C(o,{label:r,large:!0,orientation:"horizontal",text:"2",style:{position:"absolute",left:"25%"}}),C(o,{label:r,large:!0,orientation:"horizontal",text:"4",style:{position:"absolute",left:"50%"}}),C(o,{label:r,large:!0,orientation:"horizontal",text:"6",style:{position:"absolute",left:"75%"}}),C(o,{label:r,large:!0,orientation:"horizontal",text:"8",style:{position:"absolute",left:"100%"}})]})};V.options=st;V.states=dt;V.variants=ct;V.defaultOptions=Me;V.modifiers=ut;V.className=c.className;import{Fragment as mt,jsx as k,jsxs as pt}from"react/jsx-runtime";var Ia=e=>k(c,{readonly:!0,"aria-label":e["aria-label"]||"Read-only slider",children:pt(mt,{children:[k(o,{className:"k-first",label:!0,large:!0,text:"0"}),k(o,{}),k(o,{}),k(o,{}),k(o,{}),k(o,{label:!0,large:!0,text:"5"}),k(o,{}),k(o,{}),k(o,{}),k(o,{}),k(o,{className:"k-last",label:!0,large:!0,text:"10"})]}),...e});export{Ia as SliderReadonly};