UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 11.2 kB
var a=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?a(...t):typeof t=="object"?Object.keys(t).map((n,r)=>t[r]||t[n]&&n||null).filter(n=>n!==null).join(" "):t).filter(t=>!!t).join(" ");var k=(e,t)=>a({[`${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"}),se=(e,t)=>{let{valid:n,invalid:r,hover:l,focus:c,checked:m,active:s,selected:f,disabled:u,indeterminate:x,loading:K,empty:O,readonly:R,highlighted:F,...w}=t;return a({"k-valid":n,"k-invalid":r,"k-hover":l,"k-focus":c,"k-checked":m,"k-active":s,"k-selected":f,"k-disabled":u,"k-indeterminate":x&&!m,"k-loading":K,"k-empty":O,"k-readonly":R,"k-highlighted":F},Object.keys(w).reduce((p,A)=>(A.startsWith("k-")?p[A]=w[A]:p[`k-${A}`]=w[A],p),{}))};function le(e,t){if(!t)return{};let n=Array.isArray(t)?t:[t];return Object.fromEntries(n.map(r=>[`k-${r}`,!0]))}var i={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},C={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},M={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},g={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"},T={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 W={};function V(e){return W[e]=(W[e]||0)+1,`k-${e}-${W[e]}`}var G="action-buttons",de=G;import{jsx as De}from"react/jsx-runtime";var H="k-actions",Ie=[],Se={},Y={alignment:"start",orientation:"horizontal"},h=e=>{let{alignment:t=Y.alignment,orientation:n=Y.orientation,...r}=e;return De("div",{...r,className:a(H,{[`${H}-${t}`]:t,[`${H}-${n}`]:n},e.className),children:e.children})};h.states=Ie;h.options=Se;h.className=H;h.defaultOptions=Y;h.moduleName=G;h.folderName=de;import{Fragment as He,jsx as ce}from"react/jsx-runtime";var q="k-font-icon",Ke=[],Re={size:[i.undefined,i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info]},ze={},_=e=>{let{size:t,themeColor:n,icon:r,rotate:l,flip:c,...m}=e;return r?ce("span",{...m,className:a(e.className,q,k(q,{size:t}),{[`k-i-${r}`]:r,[`k-color-${n}`]:n,[`k-rotate-${l}`]:l,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"}),"aria-hidden":"true"}):ce(He,{})};_.states=Ke;_.options=Re;_.className=q;_.defaultOptions=ze;var me=_;import{Fragment as Ue,jsx as P}from"react/jsx-runtime";var J="k-svg-icon",Pe=[],$e={size:[i.undefined,i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[g.outline,g.solid,g.duotone]},X={viewBox:"0 0 24 24",variant:g.outline},I=e=>{let{size:t,themeColor:n,rotate:r,flip:l,viewBox:c=X.viewBox,variant:m=X.variant,icon:s,...f}=e;if(!s)return P(Ue,{});if(s==="none")return P("span",{...f,className:a(e.className,J,k("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let u=typeof s=="object"&&s.name&&s.name,x=typeof s=="object"?m&&s.variants?.[m]||s.variants?.outline||s.content:void 0;return P("span",{...f,className:a(e.className,J,k("k-icon",{size:t}),{[`k-svg-i-${u}`]:u,[`k-color-${n}`]:n,[`k-rotate-${r}`]:r,"k-flip-h":l==="h"||l==="both","k-flip-v":l==="v"||l==="both"}),"aria-hidden":"true",children:P("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof s=="object"?s.viewBox:c,dangerouslySetInnerHTML:x!==void 0?{__html:x}:void 0,children:s?void 0:e.children})})};I.states=Pe;I.options=$e;I.className=J;I.defaultOptions=X;var Q=I;import*as Z from"@progress/kendo-svg-icons";var ue="icon",pe="icons";import{useContext as We}from"react";import{createContext as Fe}from"react";var fe=Fe({iconsType:"svg"});import{Fragment as xe,jsx as S}from"react/jsx-runtime";var $="k-icon",Ve=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),Ge=[],Ye={size:[i.undefined,i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[g.outline,g.solid,g.duotone]},U={viewBox:"0 0 24 24",type:"svg",variant:g.outline},N=e=>{let{iconsType:t}=We(fe),{size:n,themeColor:r,icon:l,type:c=t||U.type,rotate:m,flip:s,viewBox:f=U.viewBox,variant:u=U.variant,...x}=e;if(!l)return S(xe,{});if((t||c)==="svg"){if(l==="none")return S(Q,{...x,className:a(e.className,$),icon:l,size:n,variant:u});let O=Z[l]?l:Ve(`${l}-icon`);return Z[O]?S(Q,{...x,className:a(e.className,$),icon:Z[O],size:n,themeColor:r,rotate:m,flip:s,viewBox:f,variant:u}):S(xe,{})}return S(me,{...x,className:a(e.className,$),icon:l,size:n,themeColor:r,rotate:m,flip:s})};N.states=Ge;N.options=Ye;N.defaultOptions=U;N.className=$;N.moduleName=ue;N.folderName=pe;N.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 j="button",ge=j;import{Fragment as Ne,jsx as L,jsxs as he}from"react/jsx-runtime";var D="k-button",qe=["icon-button"],Je=[T.hover,T.focus,T.active,T.selected,T.disabled,T.generating],Xe={size:[i.undefined,i.xsmall,i.small,i.medium,i.large],rounded:[C.undefined,C.none,C.small,C.medium,C.large,C.full],fillMode:[M.undefined,M.solid,M.flat,M.outline,M.clear,M.link],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.inverse]},ee={showArrow:!1,arrowIconName:"chevron-down"},d=e=>{let{as:t="button",size:n,rounded:r,fillMode:l,themeColor:c,showArrow:m=ee.showArrow,arrowIconName:s=ee.arrowIconName,variant:f,hover:u,focus:x,active:K,selected:O,disabled:R,togglable:F,ariaDisabled:w,icon:p,iconSize:A,text:z,iconClassName:Ee,className:we,...Le}=e,Be=p!=null,_e=e.children!==void 0;return he(t,{className:a(we,D,le(D,f),k(D,{size:n,rounded:r,fillMode:l,themeColor:c}),se(D,{hover:u,focus:x,active:K,disabled:R||w,selected:O}),{"k-icon-button":!z&&!_e&&Be}),"aria-pressed":F?O?"true":"false":void 0,...Le,"aria-disabled":w?"true":void 0,disabled:R||void 0,children:[typeof p=="string"&&p&&L(N,{className:a(Ee,"k-button-icon"),icon:p,size:A}),p&&typeof p!="string"&&L(Ne,{children:p}),z?he(Ne,{children:[z&&L("span",{className:"k-button-text",children:z}),e.children]}):e.children&&L("span",{className:"k-button-text",children:e.children}),m&&L("span",{className:"k-menu-button-arrow k-button-arrow",children:L(N,{icon:s})})]})};d.states=Je;d.options=Xe;d.variants=qe;d.className=D;d.defaultOptions=ee;d.moduleName=j;d.folderName=ge;d.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 be=e=>Qe(d,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});import{jsx as Ze}from"react/jsx-runtime";var ve=e=>Ze(d,{icon:"folder",children:"Button",...e});import{jsx as je}from"react/jsx-runtime";var ye=e=>je(d,{children:"Button",...e});import{jsx as te}from"react/jsx-runtime";var et=d.options,tt=d.states,ot={...d.defaultOptions,variant:"text"},nt=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],it=[],B=e=>{let{variant:t,...n}=e;switch(t){case"icon-only":return te(be,{...n,icon:"star"});case"icon-and-text":return te(ve,{...n,icon:"star",children:"Button"});default:return te(ye,{...n,children:"Button"})}};B.options=et;B.states=tt;B.variants=nt;B.defaultOptions=ot;B.modifiers=it;B.className=d.className;var oe="window",Oe=oe;import{jsx as lt}from"react/jsx-runtime";var Ae="k-window-content",at=[],rt={},st={},b=e=>{let{children:t,...n}=e;return lt("div",{...n,className:a(Ae,e.className),children:t})};b.states=at;b.options=rt;b.className=Ae;b.defaultOptions=st;b.moduleName=oe;b.folderName=Oe;var ne="dialog",ke=ne;var ie="overlay",Ce=ie;import{jsx as ut}from"react/jsx-runtime";var Me="k-overlay",dt=[],ct={},mt={},v=e=>{let{...t}=e;return ut("div",{...t,className:a(e.className,Me),children:e.children})};v.states=dt;v.options=ct;v.className=Me;v.defaultOptions=mt;v.moduleName=ie;v.folderName=Ce;import{Fragment as xt,jsx as E,jsxs as ae}from"react/jsx-runtime";var Te="k-dialog",pt=[],ft={},re={actionButtonsAlign:"stretched",modal:!0},y=e=>{let{title:t,actions:n,actionButtons:r,actionButtonsAlign:l=re.actionButtonsAlign,modal:c=re.modal,...m}=e,s=t!==void 0?V("dialog-titlebar"):void 0,f=V("dialog-content");return ae("div",{className:"k-dialog-wrapper",children:[c&&E(v,{}),ae("div",{...m,className:a(e.className,Te,"k-window"),role:"dialog","aria-labelledby":s,"aria-describedby":f,...c&&{"aria-modal":"true"},children:[(t!==void 0||n)&&ae("div",{className:"k-window-titlebar k-dialog-titlebar",id:s,children:[t!==void 0&&E("span",{className:"k-window-title k-dialog-title",children:t}),n&&E(xt,{children:E("div",{className:"k-window-titlebar-actions k-dialog-titlebar-actions",children:n.map(u=>E(d,{icon:u,fillMode:"flat",size:"xsmall",className:"k-window-titlebar-action k-dialog-titlebar-action","aria-label":u},u))})})]}),E(b,{className:"k-dialog-content",id:f,children:e.children}),r&&E(h,{alignment:l,className:"k-window-actions k-dialog-actions",children:r})]})]})};y.states=pt;y.options=ft;y.className=Te;y.defaultOptions=re;y.moduleName=ne;y.folderName=ke;y.ariaSpec={selector:".k-dialog",rules:[{selector:".k-dialog",attribute:"role=dialog or role=alertdialog",usage:"Announces the dialog or alertdialog role of the component."},{selector:".k-dialog",attribute:"aria-labelledby",usage:"Associate the title of the dialog."},{selector:".k-dialog",attribute:"aria-describedby",usage:"Associate the dialog content to the wrap element."},{selector:".k-overlay + .k-dialog",attribute:"aria-modal=true",usage:"Announces that the dialog is modal. Attribute is added only when the dialog is modal."}]};var qo=y;export{Te as DIALOG_CLASSNAME,y as Dialog,qo as default};