@progress/kendo-themes-html/dist/esm/fab/demos/fab.mjs

A collection of HTML helpers used for developing Kendo UI themes

var c=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?c(...e):typeof e=="object"?Object.keys(e).map((s,a)=>e[a]||e[s]&&s||null).filter(s=>s!==null).join(" "):e).filter(e=>!!e).join(" ");var v=(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"}),F=(t,e)=>{let{valid:s,invalid:a,hover:i,focus:d,checked:l,active:r,selected:f,disabled:b,indeterminate:x,loading:B,empty:h,readonly:L,highlighted:Z,...E}=e;return c({"k-valid":s,"k-invalid":a,"k-hover":i,"k-focus":d,"k-checked":l,"k-active":r,"k-selected":f,"k-disabled":b,"k-indeterminate":x&&!l,"k-loading":B,"k-empty":h,"k-readonly":L,"k-highlighted":Z},Object.keys(E).reduce((_,A)=>(A.startsWith("k-")?_[A]=E[A]:_[`k-${A}`]=E[A],_),{}))};var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},y={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"};var 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"},u={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 ne,jsx as D}from"react/jsx-runtime";var w="k-font-icon",ee=[],te={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]},oe={},C=t=>{let{size:e,themeColor:s,icon:a,rotate:i,flip:d,...l}=t;return a?D("span",{...l,className:c(t.className,w,v(w,{size:e}),{[`k-i-${a}`]:a,[`k-color-${s}`]:s,[`k-rotate-${i}`]:i,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):D(ne,{})};C.states=ee;C.options=te;C.className=w;C.defaultOptions=oe;var V=C;import{Fragment as ae,jsx as M}from"react/jsx-runtime";var $="k-svg-icon",ie=[],se={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:[g.outline,g.solid,g.duotone]},K={viewBox:"0 0 24 24",variant:g.outline},I=t=>{let{size:e,themeColor:s,rotate:a,flip:i,viewBox:d=K.viewBox,variant:l=K.variant,icon:r,...f}=t;if(!r)return M(ae,{});if(r==="none")return M("span",{...f,className:c(t.className,$,v("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let b=typeof r=="object"&&r.name&&r.name,x=typeof r=="object"?l&&r.variants?.[l]||r.variants?.outline||r.content:void 0;return M("span",{...f,className:c(t.className,$,v("k-icon",{size:e}),{[`k-svg-i-${b}`]:b,[`k-color-${s}`]:s,[`k-rotate-${a}`]:a,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),"aria-hidden":"true",children:M("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof r=="object"?r.viewBox:d,dangerouslySetInnerHTML:x!==void 0?{__html:x}:void 0,children:r?void 0:t.children})})};I.states=ie;I.options=se;I.className=$;I.defaultOptions=K;var H=I;import*as R from"@progress/kendo-svg-icons";var U="icon",G="icons";import{useContext as le}from"react";import{createContext as re}from"react";var j=re({iconsType:"svg"});import{Fragment as q,jsx as O}from"react/jsx-runtime";var S="k-icon",ce=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),de=[],me={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:[g.outline,g.solid,g.duotone]},T={viewBox:"0 0 24 24",type:"svg",variant:g.outline},p=t=>{let{iconsType:e}=le(j),{size:s,themeColor:a,icon:i,type:d=e||T.type,rotate:l,flip:r,viewBox:f=T.viewBox,variant:b=T.variant,...x}=t;if(!i)return O(q,{});if((e||d)==="svg"){if(i==="none")return O(H,{...x,className:c(t.className,S),icon:i,size:s,variant:b});let h=R[i]?i:ce(`${i}-icon`);return R[h]?O(H,{...x,className:c(t.className,S),icon:R[h],size:s,themeColor:a,rotate:l,flip:r,viewBox:f,variant:b}):O(q,{})}return O(V,{...x,className:c(t.className,S),icon:i,size:s,themeColor:a,rotate:l,flip:r})};p.states=de;p.options=me;p.defaultOptions=T;p.className=S;p.moduleName=U;p.folderName=G;p.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."}]};import{jsx as J,jsxs as ge}from"react/jsx-runtime";var z="k-fab",fe=[u.hover,u.focus,u.active,u.selected,u.disabled],xe={size:[n.undefined,n.small,n.medium,n.large],rounded:[y.undefined,y.none,y.small,y.medium,y.large,y.full],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary]},X={type:"button"},m=t=>{let{size:e,rounded:s,themeColor:a,text:i,icon:d,type:l=X.type,position:r,hover:f,focus:b,active:x,selected:B,disabled:h,...L}=t;return ge("button",{...L,type:l,className:c(t.className,z,v(z,{size:e,rounded:s,themeColor:a}),F(z,{hover:f,focus:b,active:x,disabled:h,selected:B}),{[`!k-pos-absolute k-${r}`]:r}),...!i&&d&&!t["aria-label"]&&{"aria-label":"Action"},...h&&{"aria-disabled":"true"},disabled:h||void 0,children:[d&&J(p,{className:"k-fab-icon",icon:d}),i&&J("span",{className:"k-fab-text",children:i})]})};m.states=fe;m.options=xe;m.className=z;m.defaultOptions=X;m.moduleName="fab";m.folderName="fab";m.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 Q,jsxs as he}from"react/jsx-runtime";var W="k-fab-item",be=[u.hover,u.focus,u.active,u.disabled],P=t=>{let{text:e,icon:s,align:a,hover:i,focus:d,active:l,disabled:r,...f}=t;return he("li",{...f,className:c(t.className,W,{[`k-text-${a}`]:a},F(W,{hover:i,focus:d,active:l,disabled:r})),children:[Q("span",{className:"k-fab-item-text",children:e}),Q(p,{className:"k-fab-item-icon",icon:s})]})};P.states=be;import{jsx as ye}from"react/jsx-runtime";var ve="k-fab-items",Y=t=>{let{position:e,...s}=t;return ye("ul",{...s,className:c(t.className,ve,{[`k-fab-items-${e}`]:e}),children:t.children})};import{jsx as N,jsxs as Oe}from"react/jsx-runtime";var ke=m.options,Ne=m.states,Ae={...m.defaultOptions,variant:"text"},Ce=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],Ie=[{name:"opened",title:"Opened"}],k=t=>{let{variant:e,modifiers:s,...a}=t,{opened:i}=s||{},d=i?N("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:N(Y,{position:"bottom",children:N(P,{text:"Item",icon:"pencil",align:"right"})})}):null,l;switch(e){case"icon-only":l=N(m,{...a,icon:"star"});break;case"icon-and-text":l=N(m,{...a,icon:"star",text:"Action"});break;default:l=N(m,{...a,text:"Action"});break}return Oe("span",{style:{position:"relative"},children:[l,d]})};k.options=ke;k.states=Ne;k.variants=Ce;k.defaultOptions=Ae;k.modifiers=Ie;k.className=m.className;var kt=k;export{k as FabDemo,kt as default};