@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 16.7 kB
JavaScript
var c=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?c(...e):typeof e=="object"?Object.keys(e).map((n,d)=>e[d]||e[n]&&n||null).filter(n=>n!==null).join(" "):e).filter(e=>!!e).join(" ");var A=(t,e)=>c({[`${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"}),_=(t,e)=>{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}=e;return c({"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(t,e){if(!e)return{};let n=Array.isArray(e)?e:[e];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=t=>{let{size:e,themeColor:n,icon:d,rotate:r,flip:s,...p}=t;return d?ce("span",{...p,className:c(t.className,Z,A(Z,{size:e}),{[`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=t=>{let{size:e,themeColor:n,rotate:d,flip:r,viewBox:s=ee.viewBox,variant:p=ee.variant,icon:l,...y}=t;if(!l)return Q(_e,{});if(l==="none")return Q("span",{...y,className:c(t.className,j,A("k-icon",{size:e}),"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:c(t.className,j,A("k-icon",{size:e}),{[`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:t.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=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.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=t=>{let{iconsType:e}=Pe(fe),{size:n,themeColor:d,icon:r,type:s=e||Y.type,rotate:p,flip:l,viewBox:y=Y.viewBox,variant:k=Y.variant,...f}=t;if(!r)return G(be,{});if((e||s)==="svg"){if(r==="none")return G(te,{...f,className:c(t.className,X),icon:r,size:n,variant:k});let S=oe[r]?r:De(`${r}-icon`);return oe[S]?G(te,{...f,className:c(t.className,X),icon:oe[S],size:n,themeColor:d,rotate:p,flip:l,viewBox:y,variant:k}):G(be,{})}return G(ue,{...f,className:c(t.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"},u=t=>{let{as:e="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}=t,V=b!=null,H=t.children!==void 0;return xe(e,{className:c(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:c(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}),t.children]}):t.children&&K("span",{className:"k-button-text",children:t.children}),p&&K("span",{className:"k-menu-button-arrow k-button-arrow",children:K(T,{icon:l})})]})};u.states=Fe;u.options=Ue;u.variants=He;u.className=q;u.defaultOptions=ne;u.moduleName=ae;u.folderName=he;u.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=t=>Ge(u,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});import{jsx as qe}from"react/jsx-runtime";var ke=t=>qe(u,{icon:"folder",children:"Button",...t});import{jsx as We}from"react/jsx-runtime";var ye=t=>We(u,{children:"Button",...t});import{jsx as re}from"react/jsx-runtime";var Je=u.options,Qe=u.states,Xe={...u.defaultOptions,variant:"text"},Ye=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],Ze=[],P=t=>{let{variant:e,...n}=t;switch(e){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=u.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},m=t=>{let{type:e=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}=t,J=(()=>{if(e==="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:c(W,t.className,_(W,{readonly:r,disabled:s}),{[`k-slider-${n}`]:n,"k-colorgradient-slider":e==="gradient"}),dir:O,children:[l&&D(u,{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:t.children}),le("div",{className:"k-slider-track",style:I,children:[D("div",{className:"k-slider-selection"}),e==="range"&&D("span",{className:c("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:c("k-draghandle",`k-draghandle-${p}`,_(W,{hover:L,focus:C,active:b})),role:"slider",tabIndex:s?void 0:0,"aria-valuenow":e==="range"?z??B:k,"aria-valuemin":e==="range"?S??f:f,"aria-valuemax":B,"aria-orientation":J,"aria-disabled":s?"true":void 0,"aria-readonly":r?"true":void 0,"aria-label":e==="range"?M["aria-label"]?`${M["aria-label"]} end`:"Range end":M["aria-label"]})]})]}),l&&D(u,{className:"k-button-increase",rounded:"full",icon:V,tabIndex:-1,title:"Increase"})]})};m.states=je;m.options=et;m.className=W;m.defaultOptions=g;m.moduleName=ie;m.folderName=Se;m.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=t=>{let{style:e,label:n=we.label,orientation:d,large:r,text:s,...p}=t;return Ne("li",{...p,role:"presentation",title:s||"Tick",className:c(t.className,Te,{[`k-tick-${d}`]:d,"k-tick-large":r}),style:e,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=t=>x(m,{"aria-label":t["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"})]}),...t});import{Fragment as Ao,jsx as zo,jsxs as Eo}from"react/jsx-runtime";import{Fragment as Po,jsx as Ko,jsxs as Do}from"react/jsx-runtime";import{jsx 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 Ie}from"react/jsx-runtime";var rt=m.options,it=m.states,Be={...m.defaultOptions,variant:"horizontal",label:!0},lt=[{name:"horizontal",title:"Horizontal"},{name:"vertical",title:"Vertical"}],st=[{name:"label",title:"Labels",default:!0},{name:"tick",title:"Ticks",default:!0},{name:"button",title:"Side Buttons",default:!0}],$=t=>{let{variant:e,modifiers:n,...d}=t,r=Be.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 e==="vertical"?Ie(Oe,{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%"}})]}):Ie(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=rt;$.states=it;$.variants=lt;$.defaultOptions=Be;$.modifiers=st;$.className=m.className;import{Fragment as dt,jsx as v,jsxs as ct}from"react/jsx-runtime";var Oe=t=>v(m,{children:ct(dt,{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":t["aria-label"]||"Vertical slider",...t,orientation:"vertical"});export{Oe as SliderVertical};