@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 11.8 kB
JavaScript
var l=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?l(...t):typeof t=="object"?Object.keys(t).map((i,s)=>t[s]||t[i]&&i||null).filter(i=>i!==null).join(" "):t).filter(t=>!!t).join(" ");var B=(e,t)=>l({[`${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"}),I=(e,t)=>{let{valid:i,invalid:s,hover:a,focus:m,checked:d,active:r,selected:g,disabled:y,indeterminate:b,loading:C,empty:v,readonly:O,highlighted:U,...T}=t;return l({"k-valid":i,"k-invalid":s,"k-hover":a,"k-focus":m,"k-checked":d,"k-active":r,"k-selected":g,"k-disabled":y,"k-indeterminate":b&&!d,"k-loading":C,"k-empty":v,"k-readonly":O,"k-highlighted":U},Object.keys(T).reduce((h,A)=>(A.startsWith("k-")?h[A]=T[A]:h[`k-${A}`]=T[A],h),{}))};function j(e,t){if(!t)return{};let i=Array.isArray(t)?t:[t];return Object.fromEntries(i.map(s=>[`k-${s}`,!0]))}var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},f={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"},N={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},o={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},p={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 Tt,jsx as tt}from"react/jsx-runtime";var V="k-font-icon",kt=[],Ct={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info]},Ot={},w=e=>{let{size:t,themeColor:i,icon:s,rotate:a,flip:m,...d}=e;return s?tt("span",{...d,className:l(e.className,V,B(V,{size:t}),{[`k-i-${s}`]:s,[`k-color-${i}`]:i,[`k-rotate-${a}`]:a,"k-flip-h":m==="h"||m==="both","k-flip-v":m==="v"||m==="both"}),"aria-hidden":"true"}):tt(Tt,{})};w.states=kt;w.options=Ct;w.className=V;w.defaultOptions=Ot;var et=w;import{Fragment as Ft,jsx as R}from"react/jsx-runtime";var G="k-svg-icon",It=[],St={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[N.outline,N.solid,N.duotone]},q={viewBox:"0 0 24 24",variant:N.outline},L=e=>{let{size:t,themeColor:i,rotate:s,flip:a,viewBox:m=q.viewBox,variant:d=q.variant,icon:r,...g}=e;if(!r)return R(Ft,{});if(r==="none")return R("span",{...g,className:l(e.className,G,B("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let y=typeof r=="object"&&r.name&&r.name,b=typeof r=="object"?d&&r.variants?.[d]||r.variants?.outline||r.content:void 0;return R("span",{...g,className:l(e.className,G,B("k-icon",{size:t}),{[`k-svg-i-${y}`]:y,[`k-color-${i}`]:i,[`k-rotate-${s}`]:s,"k-flip-h":a==="h"||a==="both","k-flip-v":a==="v"||a==="both"}),"aria-hidden":"true",children:R("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof r=="object"?r.viewBox:m,dangerouslySetInnerHTML:b!==void 0?{__html:b}:void 0,children:r?void 0:e.children})})};L.states=It;L.options=St;L.className=G;L.defaultOptions=q;var J=L;import*as X from"@progress/kendo-svg-icons";var ot="icon",nt="icons";import{useContext as Kt}from"react";import{createContext as Mt}from"react";var it=Mt({iconsType:"svg"});import{Fragment as st,jsx as E}from"react/jsx-runtime";var $="k-icon",wt=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),Lt=[],Et={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[N.outline,N.solid,N.duotone]},H={viewBox:"0 0 24 24",type:"svg",variant:N.outline},x=e=>{let{iconsType:t}=Kt(it),{size:i,themeColor:s,icon:a,type:m=t||H.type,rotate:d,flip:r,viewBox:g=H.viewBox,variant:y=H.variant,...b}=e;if(!a)return E(st,{});if((t||m)==="svg"){if(a==="none")return E(J,{...b,className:l(e.className,$),icon:a,size:i,variant:y});let v=X[a]?a:wt(`${a}-icon`);return X[v]?E(J,{...b,className:l(e.className,$),icon:X[v],size:i,themeColor:s,rotate:d,flip:r,viewBox:g,variant:y}):E(st,{})}return E(et,{...b,className:l(e.className,$),icon:a,size:i,themeColor:s,rotate:d,flip:r})};x.states=Lt;x.options=Et;x.defaultOptions=H;x.className=$;x.moduleName=ot;x.folderName=nt;x.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 W="button",at=W;import{Fragment as rt,jsx as S,jsxs as lt}from"react/jsx-runtime";var z="k-button",zt=["icon-button"],_t=[p.hover,p.focus,p.active,p.selected,p.disabled,p.generating],Pt={size:[n.undefined,n.xsmall,n.small,n.medium,n.large],rounded:[f.undefined,f.none,f.small,f.medium,f.large,f.full],fillMode:[k.undefined,k.solid,k.flat,k.outline,k.clear,k.link],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.inverse]},Q={showArrow:!1,arrowIconName:"chevron-down"},c=e=>{let{as:t="button",size:i,rounded:s,fillMode:a,themeColor:m,showArrow:d=Q.showArrow,arrowIconName:r=Q.arrowIconName,variant:g,hover:y,focus:b,active:C,selected:v,disabled:O,togglable:U,ariaDisabled:T,icon:h,iconSize:A,text:P,iconClassName:yt,className:vt,...Nt}=e,Bt=h!=null,At=e.children!==void 0;return lt(t,{className:l(vt,z,j(z,g),B(z,{size:i,rounded:s,fillMode:a,themeColor:m}),I(z,{hover:y,focus:b,active:C,disabled:O||T,selected:v}),{"k-icon-button":!P&&!At&&Bt}),"aria-pressed":U?v?"true":"false":void 0,...Nt,"aria-disabled":T?"true":void 0,disabled:O||void 0,children:[typeof h=="string"&&h&&S(x,{className:l(yt,"k-button-icon"),icon:h,size:A}),h&&typeof h!="string"&&S(rt,{children:h}),P?lt(rt,{children:[P&&S("span",{className:"k-button-text",children:P}),e.children]}):e.children&&S("span",{className:"k-button-text",children:e.children}),d&&S("span",{className:"k-menu-button-arrow k-button-arrow",children:S(x,{icon:r})})]})};c.states=_t;c.options=Pt;c.variants=zt;c.className=z;c.defaultOptions=Q;c.moduleName=W;c.folderName=at;c.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 Rt}from"react/jsx-runtime";var ct=e=>Rt(c,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});import{jsx as $t}from"react/jsx-runtime";var dt=e=>$t(c,{icon:"folder",children:"Button",...e});import{jsx as Ht}from"react/jsx-runtime";var ut=e=>Ht(c,{children:"Button",...e});import{jsx as Y}from"react/jsx-runtime";var Dt=c.options,Ut=c.states,Vt={...c.defaultOptions,variant:"text"},Gt=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],qt=[],F=e=>{let{variant:t,...i}=e;switch(t){case"icon-only":return Y(ct,{...i,icon:"star"});case"icon-and-text":return Y(dt,{...i,icon:"star",children:"Button"});default:return Y(ut,{...i,children:"Button"})}};F.options=Dt;F.states=Ut;F.variants=Gt;F.defaultOptions=Vt;F.modifiers=qt;F.className=c.className;import{jsx as mt,jsxs as Yt}from"react/jsx-runtime";var D="k-fab",Wt=[p.hover,p.focus,p.active,p.selected,p.disabled],Qt={size:[n.undefined,n.small,n.medium,n.large],rounded:[f.undefined,f.none,f.small,f.medium,f.large,f.full],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary]},pt={type:"button"},u=e=>{let{size:t,rounded:i,themeColor:s,text:a,icon:m,type:d=pt.type,position:r,hover:g,focus:y,active:b,selected:C,disabled:v,...O}=e;return Yt("button",{...O,type:d,className:l(e.className,D,B(D,{size:t,rounded:i,themeColor:s}),I(D,{hover:g,focus:y,active:b,disabled:v,selected:C}),{[`!k-pos-absolute k-${r}`]:r}),...!a&&m&&!e["aria-label"]&&{"aria-label":"Action"},...v&&{"aria-disabled":"true"},disabled:v||void 0,children:[m&&mt(x,{className:"k-fab-icon",icon:m}),a&&mt("span",{className:"k-fab-text",children:a})]})};u.states=Wt;u.options=Qt;u.className=D;u.defaultOptions=pt;u.moduleName="fab";u.folderName="fab";u.ariaSpec={selector:".k-fab",rules:[{selector:".k-fab",attribute:"role=button or nodeName=button",usage:"Omitted if the <button> DOM element is used."},{selector:".k-fab",attribute:"aria-label or title (when icon-only)",usage:"The attribute must be present when no text is initially visible in the button."},{selector:".k-fab.k-disabled",attribute:"aria-disabled=true",usage:"Rendered only when the button is disabled."}]};import{jsx as jt}from"react/jsx-runtime";var Zt="k-fab-items",ft=e=>{let{position:t,...i}=e;return jt("ul",{...i,className:l(e.className,Zt,{[`k-fab-items-${t}`]:t}),children:e.children})};import{jsx as gt,jsxs as ee}from"react/jsx-runtime";var xt="k-fab-item",te=[p.hover,p.focus,p.active,p.disabled],Z=e=>{let{text:t,icon:i,align:s,hover:a,focus:m,active:d,disabled:r,...g}=e;return ee("li",{...g,className:l(e.className,xt,{[`k-text-${s}`]:s},I(xt,{hover:a,focus:m,active:d,disabled:r})),children:[gt("span",{className:"k-fab-item-text",children:t}),gt(x,{className:"k-fab-item-icon",icon:i})]})};Z.states=te;import{jsx as Fo}from"react/jsx-runtime";import{jsx as Lo}from"react/jsx-runtime";import{jsx as Po}from"react/jsx-runtime";import{jsx as Do}from"react/jsx-runtime";import{jsx as M,jsxs as re}from"react/jsx-runtime";var oe=u.options,ne=u.states,ie={...u.defaultOptions,variant:"text"},se=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],ae=[{name:"opened",title:"Opened"}],K=e=>{let{variant:t,modifiers:i,...s}=e,{opened:a}=i||{},m=a?M("div",{className:"k-fab-popup k-popup k-popup-transparent",style:{position:"absolute",top:"calc(16px + 36px)",right:"calc(16px + calc(36px / 2) - calc(36px /2))"},children:M(ft,{position:"bottom",children:M(Z,{text:"Item",icon:"pencil",align:"right"})})}):null,d;switch(t){case"icon-only":d=M(u,{...s,icon:"star"});break;case"icon-and-text":d=M(u,{...s,icon:"star",text:"Action"});break;default:d=M(u,{...s,text:"Action"});break}return re("span",{style:{position:"relative"},children:[d,m]})};K.options=oe;K.states=ne;K.variants=se;K.defaultOptions=ie;K.modifiers=ae;K.className=u.className;import{jsx as le}from"react/jsx-runtime";var bt="k-prompt-stop-fab",ht={generating:!0},_=e=>{let{generating:t=ht.generating,icon:i,...s}=e;return le(u,{...s,className:l(e.className,bt,{"k-generating":t}),style:{bottom:"16px",right:"16px"},position:"bottom-end",icon:t?"stop-sm":i,active:t,"aria-label":t?"Stop generating":"Action"})};_.states=c.states;_.options=c.options;_.className=bt;_.defaultOptions=ht;var pn=_;export{_ as PromptStopFloatingActionButton,pn as default};