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