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