@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 13.8 kB
JavaScript
var l=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((n,r)=>e[r]||e[n]&&n||null).filter(n=>n!==null).join(" "):e).filter(e=>!!e).join(" ");var h=(t,e)=>l({[`${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"}),ie=(t,e)=>{let{valid:n,invalid:r,hover:i,focus:u,checked:d,active:p,selected:v,disabled:f,indeterminate:x,loading:T,empty:B,readonly:C,highlighted:L,...O}=e;return l({"k-valid":n,"k-invalid":r,"k-hover":i,"k-focus":u,"k-checked":d,"k-active":p,"k-selected":v,"k-disabled":f,"k-indeterminate":x&&!d,"k-loading":T,"k-empty":B,"k-readonly":C,"k-highlighted":L},Object.keys(O).reduce((c,M)=>(M.startsWith("k-")?c[M]=O[M]:c[`k-${M}`]=O[M],c),{}))};function le(t,e){if(!e)return{};let n=Array.isArray(e)?e:[e];return Object.fromEntries(n.map(r=>[`k-${r}`,!0]))}var a={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},E={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},b={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"},g={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{jsx as Le}from"react/jsx-runtime";var J="k-input-inner",Ae=[],Pe={},U={type:"text",autocomplete:"off",value:"",placeholder:""},w=t=>{let{value:e=U.value,type:n=U.type,placeholder:r=U.placeholder,autocomplete:i=U.autocomplete,disabled:u,readOnly:d,...p}=t;return Le("input",{...p,type:n,className:l(t.className,J,h(J,t)),placeholder:r,autoComplete:i,defaultValue:e,disabled:u||void 0,readOnly:d||void 0})};w.states=Ae;w.options=Pe;w.className=J;import{jsx as Re}from"react/jsx-runtime";var q="k-input-inner",we=[],Ke={},pe={value:"",placeholder:""},K=t=>{let{value:e=pe.value,placeholder:n=pe.placeholder,rows:r,disabled:i,...u}=t;return Re("textarea",{...u,className:l(t.className,q,h(q,t)),placeholder:n,rows:r,defaultValue:e,disabled:i||void 0})};K.states=we;K.options=Ke;K.className=q;var W="prompt-box",ue=W;import{Fragment as De,jsx as de}from"react/jsx-runtime";var Q="k-font-icon",ze=[],He={size:[a.undefined,a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info]},$e={},R=t=>{let{size:e,themeColor:n,icon:r,rotate:i,flip:u,...d}=t;return r?de("span",{...d,className:l(t.className,Q,h(Q,{size:e}),{[`k-i-${r}`]:r,[`k-color-${n}`]:n,[`k-rotate-${i}`]:i,"k-flip-h":u==="h"||u==="both","k-flip-v":u==="v"||u==="both"}),"aria-hidden":"true"}):de(De,{})};R.states=ze;R.options=He;R.className=Q;R.defaultOptions=$e;var ce=R;import{Fragment as Xe,jsx as F}from"react/jsx-runtime";var Y="k-svg-icon",Ue=[],Fe={size:[a.undefined,a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.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]},Z={viewBox:"0 0 24 24",variant:N.outline},z=t=>{let{size:e,themeColor:n,rotate:r,flip:i,viewBox:u=Z.viewBox,variant:d=Z.variant,icon:p,...v}=t;if(!p)return F(Xe,{});if(p==="none")return F("span",{...v,className:l(t.className,Y,h("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let f=typeof p=="object"&&p.name&&p.name,x=typeof p=="object"?d&&p.variants?.[d]||p.variants?.outline||p.content:void 0;return F("span",{...v,className:l(t.className,Y,h("k-icon",{size:e}),{[`k-svg-i-${f}`]:f,[`k-color-${n}`]:n,[`k-rotate-${r}`]:r,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),"aria-hidden":"true",children:F("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof p=="object"?p.viewBox:u,dangerouslySetInnerHTML:x!==void 0?{__html:x}:void 0,children:p?void 0:t.children})})};z.states=Ue;z.options=Fe;z.className=Y;z.defaultOptions=Z;var j=z;import*as ee from"@progress/kendo-svg-icons";var me="icon",fe="icons";import{useContext as Ge}from"react";import{createContext as Ve}from"react";var xe=Ve({iconsType:"svg"});import{Fragment as be,jsx as H}from"react/jsx-runtime";var X="k-icon",Je=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),qe=[],We={size:[a.undefined,a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.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]},V={viewBox:"0 0 24 24",type:"svg",variant:N.outline},k=t=>{let{iconsType:e}=Ge(xe),{size:n,themeColor:r,icon:i,type:u=e||V.type,rotate:d,flip:p,viewBox:v=V.viewBox,variant:f=V.variant,...x}=t;if(!i)return H(be,{});if((e||u)==="svg"){if(i==="none")return H(j,{...x,className:l(t.className,X),icon:i,size:n,variant:f});let B=ee[i]?i:Je(`${i}-icon`);return ee[B]?H(j,{...x,className:l(t.className,X),icon:ee[B],size:n,themeColor:r,rotate:d,flip:p,viewBox:v,variant:f}):H(be,{})}return H(ce,{...x,className:l(t.className,X),icon:i,size:n,themeColor:r,rotate:d,flip:p})};k.states=qe;k.options=We;k.defaultOptions=V;k.className=X;k.moduleName=me;k.folderName=fe;k.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 te="button",he=te;import{Fragment as ge,jsx as I,jsxs as ve}from"react/jsx-runtime";var $="k-button",Qe=["icon-button"],Ye=[g.hover,g.focus,g.active,g.selected,g.disabled,g.generating],Ze={size:[a.undefined,a.xsmall,a.small,a.medium,a.large],rounded:[E.undefined,E.none,E.small,E.medium,E.large,E.full],fillMode:[b.undefined,b.solid,b.flat,b.outline,b.clear,b.link],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.inverse]},oe={showArrow:!1,arrowIconName:"chevron-down"},s=t=>{let{as:e="button",size:n,rounded:r,fillMode:i,themeColor:u,showArrow:d=oe.showArrow,arrowIconName:p=oe.arrowIconName,variant:v,hover:f,focus:x,active:T,selected:B,disabled:C,togglable:L,ariaDisabled:O,icon:c,iconSize:M,text:D,iconClassName:Me,className:Ee,...Ce}=t,Ie=c!=null,_e=t.children!==void 0;return ve(e,{className:l(Ee,$,le($,v),h($,{size:n,rounded:r,fillMode:i,themeColor:u}),ie($,{hover:f,focus:x,active:T,disabled:C||O,selected:B}),{"k-icon-button":!D&&!_e&&Ie}),"aria-pressed":L?B?"true":"false":void 0,...Ce,"aria-disabled":O?"true":void 0,disabled:C||void 0,children:[typeof c=="string"&&c&&I(k,{className:l(Me,"k-button-icon"),icon:c,size:M}),c&&typeof c!="string"&&I(ge,{children:c}),D?ve(ge,{children:[D&&I("span",{className:"k-button-text",children:D}),t.children]}):t.children&&I("span",{className:"k-button-text",children:t.children}),d&&I("span",{className:"k-menu-button-arrow k-button-arrow",children:I(k,{icon:p})})]})};s.states=Ye;s.options=Ze;s.variants=Qe;s.className=$;s.defaultOptions=oe;s.moduleName=te;s.folderName=he;s.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 je}from"react/jsx-runtime";var G=t=>je(s,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});import{jsx as et}from"react/jsx-runtime";var Te=t=>et(s,{icon:"folder",children:"Button",...t});import{jsx as tt}from"react/jsx-runtime";var Ne=t=>tt(s,{children:"Button",...t});import{jsx as ne}from"react/jsx-runtime";var ot=s.options,nt=s.states,at={...s.defaultOptions,variant:"text"},rt=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],st=[],_=t=>{let{variant:e,...n}=t;switch(e){case"icon-only":return ne(G,{...n,icon:"star"});case"icon-and-text":return ne(Te,{...n,icon:"star",children:"Button"});default:return ne(Ne,{...n,children:"Button"})}};_.options=ot;_.states=nt;_.variants=rt;_.defaultOptions=at;_.modifiers=st;_.className=s.className;var ae="speech-to-text-button",ke=ae;import{jsx as it}from"react/jsx-runtime";var ye="k-speech-to-text-button",Be={icon:"microphone"},m=t=>{let{listening:e=!1,icon:n=Be.icon,...r}=t;return it(s,{...r,icon:e?"stop":n,className:l(t.className,ye,{"k-listening":e}),"aria-pressed":e?"true":"false","aria-label":e?"Stop listening":"Start listening"})};m.states=s.states;m.options=s.options;m.className=ye;m.defaultOptions=Be;m.moduleName=ae;m.folderName=ke;m.ariaSpec={selector:".k-speech-to-text-button",rules:[{selector:".k-button.k-speech-to-text-button",attribute:"role=button or nodeName=button",usage:"If the used element is not <button>, explicitly set its role to button."},{selector:".k-button.k-speech-to-text-button",attribute:"aria-pressed",usage:"Announces the toggle behaviour of the button."},{selector:".k-button.k-speech-to-text-button",attribute:"aria-label",usage:"Accessible name for the speech-to-text button."}]};import{jsx as $o}from"react/jsx-runtime";import{jsx as Xo}from"react/jsx-runtime";import{jsx as ct}from"react/jsx-runtime";var lt=s.states,Oe={...s.defaultOptions,variant:"normal"},pt={...s.options,fillMode:s.options.fillMode.filter(t=>t!=="clear"&&t!=="link")},ut=[],dt=[{name:"normal",title:"Normal"},{name:"listening",title:"Listening"}],A=t=>{let{variant:e,...n}={...Oe,...t},r={};return e==="listening"&&(r.listening=!0),ct(m,{...n,...r})};A.options=pt;A.states=lt;A.variants=dt;A.defaultOptions=Oe;A.modifiers=ut;A.className=m.className;import{jsx as P,jsxs as re}from"react/jsx-runtime";var y="k-prompt-box",mt=[g.hover,g.focus,g.disabled],ft={fillMode:[b.undefined,b.solid,b.flat,b.outline]},se={lineMode:"auto",isExpanded:!1},S=t=>{let{fillMode:e,lineMode:n=se.lineMode,startAffix:r,endAffix:i,header:u,isExpanded:d=se.isExpanded,className:p,children:v,value:f,placeholder:x,generating:T,hover:B,focus:C,disabled:L,...O}=t,c=n==="multi"||n==="auto"&&d;return re("div",{...O,className:l(p,"k-input",y,{[`${y}-singleline`]:n==="single",[`${y}-multiline`]:c,[`k-input-${e}`]:e,"k-hover":B,"k-focus":C,"k-disabled":L}),children:[u&&P("div",{className:`${y}-header`,children:u}),re("div",{className:`${y}-content`,children:[r&&P("div",{className:`${y}-affix`,children:r}),n==="single"?P(w,{value:f,placeholder:x,className:`${y}-input`,type:"text","aria-label":"Prompt input"}):P(K,{value:f,placeholder:x,className:`${y}-textarea`,rows:n==="multi"||d?3:1,"aria-label":"Prompt input","aria-multiline":"true"}),re("div",{className:`${y}-affix`,children:[i,P(m,{size:"small",fillMode:"flat",rounded:"full"}),P(G,{icon:T?"stop":"arrow-up",size:"small",rounded:"full",active:T,disabled:!f&&!T,className:l({"k-generating":T}),"aria-label":T?"Stop generating":"Send prompt","aria-live":"polite"})]})]}),v]})};S.states=mt;S.options=ft;S.className=y;S.defaultOptions=se;S.moduleName=W;S.folderName=ue;S.ariaSpec={selector:".k-prompt-box",rules:[{selector:".k-prompt-box-singleline .k-prompt-box-input",attribute:"nodeName=input",usage:"Ensures the input field has the proper textbox role."},{selector:".k-prompt-box-singleline .k-prompt-box-input",attribute:"aria-label",usage:"Provides an accessible label for the single-line input."},{selector:".k-prompt-box-multiline .k-prompt-box-textarea",attribute:"nodeName=textarea",usage:"Ensures the textarea has the proper textbox role."},{selector:".k-prompt-box-multiline .k-prompt-box-textarea",attribute:"aria-label",usage:"Provides an accessible label for the textarea."},{selector:".k-prompt-box-multiline .k-prompt-box-textarea",attribute:"aria-multiline=true",usage:"Indicates the textarea supports multiple lines of text."},{selector:".k-prompt-box:not(.k-prompt-box-singleline):not(.k-prompt-box-multiline) .k-prompt-box-textarea",attribute:"nodeName=textarea",usage:"Ensures the auto-mode textarea has the proper textbox role."},{selector:".k-prompt-box:not(.k-prompt-box-singleline):not(.k-prompt-box-multiline) .k-prompt-box-textarea",attribute:"aria-label",usage:"Provides an accessible label for the auto-mode textarea."},{selector:".k-prompt-box:not(.k-prompt-box-singleline):not(.k-prompt-box-multiline) .k-prompt-box-textarea",attribute:"aria-multiline=true",usage:"Indicates the auto-mode textarea supports multiple lines of text."},{selector:".k-prompt-box-affix .k-button:not(.k-speech-to-text-button)",attribute:"aria-label",usage:"The send/stop button is labelled to indicate its current action."},{selector:".k-prompt-box-affix .k-button:not(.k-speech-to-text-button)",attribute:"aria-live=polite",usage:"Announces the change in status of the send/stop button."}]};var Se=S;import{jsx as xt}from"react/jsx-runtime";var cn=t=>xt(Se,{...t,lineMode:"auto"});export{cn as PromptBoxLineModeAuto};