@progress/kendo-themes-html/dist/esm/split-button/templates/text-split-button.mjs

A collection of HTML helpers used for developing Kendo UI themes

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 M=(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"}),te=(e,t)=>{let{valid:i,invalid:s,hover:r,focus:u,checked:c,active:a,selected:g,disabled:b,indeterminate:x,loading:k,empty:y,readonly:S,highlighted:I,...A}=t;return l({"k-valid":i,"k-invalid":s,"k-hover":r,"k-focus":u,"k-checked":c,"k-active":a,"k-selected":g,"k-disabled":b,"k-indeterminate":x&&!c,"k-loading":k,"k-empty":y,"k-readonly":S,"k-highlighted":I},Object.keys(A).reduce((p,B)=>(B.startsWith("k-")?p[B]=A[B]:p[`k-${B}`]=A[B],p),{}))};function oe(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"},m={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},f={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"},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 _e,jsx as ne}from"react/jsx-runtime";var H="k-font-icon",Be=[],we={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]},Ee={},_=e=>{let{size:t,themeColor:i,icon:s,rotate:r,flip:u,...c}=e;return s?ne("span",{...c,className:l(e.className,H,M(H,{size:t}),{[`k-i-${s}`]:s,[`k-color-${i}`]:i,[`k-rotate-${r}`]:r,"k-flip-h":u==="h"||u==="both","k-flip-v":u==="v"||u==="both"}),"aria-hidden":"true"}):ne(_e,{})};_.states=Be;_.options=we;_.className=H;_.defaultOptions=Ee;var ie=_;import{Fragment as Re,jsx as K}from"react/jsx-runtime";var $="k-svg-icon",Le=[],Pe={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]},F={viewBox:"0 0 24 24",variant:N.outline},L=e=>{let{size:t,themeColor:i,rotate:s,flip:r,viewBox:u=F.viewBox,variant:c=F.variant,icon:a,...g}=e;if(!a)return K(Re,{});if(a==="none")return K("span",{...g,className:l(e.className,$,M("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let b=typeof a=="object"&&a.name&&a.name,x=typeof a=="object"?c&&a.variants?.[c]||a.variants?.outline||a.content:void 0;return K("span",{...g,className:l(e.className,$,M("k-icon",{size:t}),{[`k-svg-i-${b}`]:b,[`k-color-${i}`]:i,[`k-rotate-${s}`]:s,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),"aria-hidden":"true",children:K("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof a=="object"?a.viewBox:u,dangerouslySetInnerHTML:x!==void 0?{__html:x}:void 0,children:a?void 0:e.children})})};L.states=Le;L.options=Pe;L.className=$;L.defaultOptions=F;var V=L;import*as G from"@progress/kendo-svg-icons";var re="icon",se="icons";import{useContext as Ke}from"react";import{createContext as ze}from"react";var ae=ze({iconsType:"svg"});import{Fragment as le,jsx as P}from"react/jsx-runtime";var D="k-icon",De=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),Ue=[],He={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]},U={viewBox:"0 0 24 24",type:"svg",variant:N.outline},v=e=>{let{iconsType:t}=Ke(ae),{size:i,themeColor:s,icon:r,type:u=t||U.type,rotate:c,flip:a,viewBox:g=U.viewBox,variant:b=U.variant,...x}=e;if(!r)return P(le,{});if((t||u)==="svg"){if(r==="none")return P(V,{...x,className:l(e.className,D),icon:r,size:i,variant:b});let y=G[r]?r:De(`${r}-icon`);return G[y]?P(V,{...x,className:l(e.className,D),icon:G[y],size:i,themeColor:s,rotate:c,flip:a,viewBox:g,variant:b}):P(le,{})}return P(ie,{...x,className:l(e.className,D),icon:r,size:i,themeColor:s,rotate:c,flip:a})};v.states=Ue;v.options=He;v.defaultOptions=U;v.className=D;v.moduleName=re;v.folderName=se;v.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 q="button",de=q;import{Fragment as ue,jsx as w,jsxs as ce}from"react/jsx-runtime";var R="k-button",$e=["icon-button"],Fe=[h.hover,h.focus,h.active,h.selected,h.disabled,h.generating],Ve={size:[n.undefined,n.xsmall,n.small,n.medium,n.large],rounded:[m.undefined,m.none,m.small,m.medium,m.large,m.full],fillMode:[f.undefined,f.solid,f.flat,f.outline,f.clear,f.link],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.inverse]},J={showArrow:!1,arrowIconName:"chevron-down"},d=e=>{let{as:t="button",size:i,rounded:s,fillMode:r,themeColor:u,showArrow:c=J.showArrow,arrowIconName:a=J.arrowIconName,variant:g,hover:b,focus:x,active:k,selected:y,disabled:S,togglable:I,ariaDisabled:A,icon:p,iconSize:B,text:z,iconClassName:Ae,className:Oe,...ke}=e,Se=p!=null,Ie=e.children!==void 0;return ce(t,{className:l(Oe,R,oe(R,g),M(R,{size:i,rounded:s,fillMode:r,themeColor:u}),te(R,{hover:b,focus:x,active:k,disabled:S||A,selected:y}),{"k-icon-button":!z&&!Ie&&Se}),"aria-pressed":I?y?"true":"false":void 0,...ke,"aria-disabled":A?"true":void 0,disabled:S||void 0,children:[typeof p=="string"&&p&&w(v,{className:l(Ae,"k-button-icon"),icon:p,size:B}),p&&typeof p!="string"&&w(ue,{children:p}),z?ce(ue,{children:[z&&w("span",{className:"k-button-text",children:z}),e.children]}):e.children&&w("span",{className:"k-button-text",children:e.children}),c&&w("span",{className:"k-menu-button-arrow k-button-arrow",children:w(v,{icon:a})})]})};d.states=Fe;d.options=Ve;d.variants=$e;d.className=R;d.defaultOptions=J;d.moduleName=q;d.folderName=de;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 Ge}from"react/jsx-runtime";var pe=e=>Ge(d,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});import{jsx as qe}from"react/jsx-runtime";var me=e=>qe(d,{icon:"folder",children:"Button",...e});import{jsx as Je}from"react/jsx-runtime";var fe=e=>Je(d,{children:"Button",...e});import{jsx as W}from"react/jsx-runtime";var We=d.options,Xe=d.states,Qe={...d.defaultOptions,variant:"text"},Ye=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],Ze=[],E=e=>{let{variant:t,...i}=e;switch(t){case"icon-only":return W(pe,{...i,icon:"star"});case"icon-and-text":return W(me,{...i,icon:"star",children:"Button"});default:return W(fe,{...i,children:"Button"})}};E.options=We;E.states=Xe;E.variants=Ye;E.defaultOptions=Qe;E.modifiers=Ze;E.className=d.className;var X="popup",be=X;import{jsx as xe}from"react/jsx-runtime";var he="k-animation-container",je=[],et={},Q={positionMode:"absolute",shown:!0},O=e=>{let{positionMode:t=Q.positionMode,shown:i=Q.shown,animationStyle:s,offset:r,...u}=e;return xe("div",{...u,style:{...r,...e.style},className:l(e.className,he,{"k-animation-container-shown":i,"k-animation-container-fixed":t==="fixed"}),children:xe("div",{className:"k-child-animation-container",style:s,children:e.children})})};O.states=je;O.options=et;O.className=he;O.defaultOptions=Q;O.moduleName=X;O.folderName=be;var Y="popup",ge=Y;import{jsx as Ne}from"react/jsx-runtime";var ve="k-popup",tt=[],ot={},ye={positionMode:"absolute"},C=e=>{let{offset:t,positionMode:i=ye.positionMode,animationStyle:s,containerClassName:r,containerRole:u,containerAriaLabel:c,...a}=e;return Ne(O,{positionMode:i,offset:t,animationStyle:s,className:r,role:u,"aria-label":c,children:Ne("div",{...a,className:l(e.className,ve),children:e.children})})};C.states=tt;C.options=ot;C.className=ve;C.defaultOptions=ye;C.moduleName=Y;C.folderName=ge;C.ariaSpec={selector:".k-popup",rules:[{selector:".k-animation-container",attribute:"role (when appended to body)",usage:'Container gets role="region" when appended to document body. Popup is a building block \u2014 ARIA semantics come from consuming components.'}]};var Z="split-button",Me=Z;import{Fragment as rt,jsx as j,jsxs as Ce}from"react/jsx-runtime";var ee="k-split-button",nt=[h.hover,h.focus,h.active,h.selected,h.disabled],it={size:[n.undefined,n.small,n.medium,n.large],rounded:[m.undefined,m.none,m.small,m.medium,m.large,m.full],fillMode:[f.undefined,f.solid,f.flat,f.outline,f.clear,f.link],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.inverse]},Te={arrowIconName:"chevron-down"},T=e=>{let{size:t,rounded:i,fillMode:s,themeColor:r,hover:u,focus:c,active:a,selected:g,disabled:b,icon:x,text:k,arrowIconName:y=Te.arrowIconName,popup:S,opened:I,popupId:A,...p}=e;return Ce(rt,{children:[Ce("div",{...p,className:l(e.className,ee,"k-button-group",M(ee,{rounded:i})),children:[j(d,{text:k,icon:x,size:t,rounded:i,fillMode:s,themeColor:r,hover:u,focus:c,active:a,selected:g,disabled:b,...!k&&!e.children&&x&&{"aria-label":"Action"},children:e.children}),j(d,{className:"k-split-button-arrow",icon:y,size:t,rounded:i,fillMode:s,disabled:b,ariaDisabled:b||void 0,"aria-label":"Toggle dropdown","aria-expanded":I?"true":"false","aria-controls":I?A:void 0,tabIndex:-1})]}),I&&S&&j(C,{className:"k-menu-popup",children:S})]})};T.states=nt;T.options=it;T.className=ee;T.defaultOptions=Te;T.moduleName=Z;T.folderName=Me;T.ariaSpec={selector:".k-split-button",rules:[{selector:".k-split-button-arrow",attribute:"role=button or nodeName=button",usage:"Omitted if the <button> DOM element is used."},{selector:".k-split-button-arrow",attribute:"aria-label",usage:"The attribute must be present when no text is initially visible in the button."},{selector:".k-split-button-arrow",attribute:"aria-expanded=true/false",usage:"Announces the state of the popup visibility."},{selector:".k-split-button-arrow",attribute:"aria-controls=.k-menu-group id (when open)",usage:"Points to the popup element. Builds a relationship between the button and the popup."},{selector:".k-split-button-arrow",attribute:"tabindex=-1",usage:"The arrow button is removed from the tab sequence."},{selector:".k-split-button-arrow.k-disabled",attribute:"aria-disabled=true",usage:"Rendered only when the button is disabled."},{selector:".k-menu-group",attribute:"role=list",usage:"Announces the list role of the popup."},{selector:".k-menu-item",attribute:"role=listitem",usage:"Announces the listitem role of the popup items."}]};import{jsx as st}from"react/jsx-runtime";var Ro=e=>st(T,{children:"Button",...e});export{Ro as TextSplitButton};