@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 14.4 kB
JavaScript
var Je=Object.create;var F=Object.defineProperty;var Xe=Object.getOwnPropertyDescriptor;var We=Object.getOwnPropertyNames;var Ye=Object.getPrototypeOf,Qe=Object.prototype.hasOwnProperty;var Ze=(e,t)=>{for(var o in t)F(e,o,{get:t[o],enumerable:!0})},he=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of We(t))!Qe.call(e,i)&&i!==o&&F(e,i,{get:()=>t[i],enumerable:!(r=Xe(t,i))||r.enumerable});return e};var je=(e,t,o)=>(o=e!=null?Je(Ye(e)):{},he(t||!e||!e.__esModule?F(o,"default",{value:e,enumerable:!0}):o,e)),et=e=>he(F({},"__esModule",{value:!0}),e);var Et={};Ze(Et,{TimeSelectorMinute:()=>Ot});module.exports=et(Et);var a=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?a(...t):typeof t=="object"?Object.keys(t).map((o,r)=>t[r]||t[o]&&o||null).filter(o=>o!==null).join(" "):t).filter(t=>!!t).join(" ");var A=(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"}),V=(e,t)=>{let{valid:o,invalid:r,hover:i,focus:l,checked:d,active:c,selected:u,disabled:p,indeterminate:N,loading:S,empty:y,readonly:U,highlighted:Z,...P}=t;return a({"k-valid":o,"k-invalid":r,"k-hover":i,"k-focus":l,"k-checked":d,"k-active":c,"k-selected":u,"k-disabled":p,"k-indeterminate":N&&!d,"k-loading":S,"k-empty":y,"k-readonly":U,"k-highlighted":Z},Object.keys(P).reduce((h,_)=>(_.startsWith("k-")?h[_]=P[_]:h[`k-${_}`]=P[_],h),{}))};function be(e,t){if(!t)return{};let o=Array.isArray(t)?t:[t];return Object.fromEntries(o.map(r=>[`k-${r}`,!0]))}var s={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},I={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},L={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},M={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},n={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},C={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 f=require("react/jsx-runtime"),tt=[C.focus],j=e=>{let{type:t,focus:o,separator:r,...i}=e,l,d=["00","01","02","03","04","05","06","07","08","09"];switch(t){case"dd":l="Day";break;case"HH":l="Hour";break;case"mm":l="Minute";break;case"ss":l="Second";break;case"SSS":l="Millisecond",d=["000","001","002","003","004","005","006","007","008","009"];break;case"tt":l="AM/PM",d=["AM","PM"];break;default:l="Column Name";break}let c=d.map((u,p)=>(0,f.jsx)("li",{className:"k-item",role:"option","aria-selected":"false",children:(0,f.jsx)("span",{children:u})},p));return(0,f.jsxs)(f.Fragment,{children:[r&&(0,f.jsx)("div",{className:"k-time-separator",children:":"}),(0,f.jsxs)("div",{...i,className:a(e.className,"k-time-list-wrapper",V("k-time-list-wrapper",{focus:o})),children:[(0,f.jsx)("span",{className:"k-title",children:l}),(0,f.jsx)("div",{className:"k-time-list",role:"listbox","aria-label":l,children:(0,f.jsxs)("div",{className:"k-content k-scrollable k-time-container",children:[(0,f.jsx)("ul",{className:"k-reset",style:{transform:"translateY(97px)"},role:"none",children:c}),(0,f.jsx)("div",{className:"k-scrollable-placeholder"})]})})]})]})};j.states=tt;var q=require("react/jsx-runtime"),ot="k-time-header",G=e=>{let{title:t,...o}=e;return(0,q.jsxs)("div",{...o,className:a(e.className,ot),children:[t!=null&&(0,q.jsx)("span",{className:"k-title",children:t}),e.children]})};var ee="action-buttons",ge=ee;var Te=require("react/jsx-runtime"),J="k-actions",nt=[],st={},te={alignment:"start",orientation:"horizontal"},g=e=>{let{alignment:t=te.alignment,orientation:o=te.orientation,...r}=e;return(0,Te.jsx)("div",{...r,className:a(J,{[`${J}-${t}`]:t,[`${J}-${o}`]:o},e.className),children:e.children})};g.states=nt;g.options=st;g.className=J;g.defaultOptions=te;g.moduleName=ee;g.folderName=ge;var R=require("react/jsx-runtime"),oe="k-font-icon",it=[],rt={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info]},at={},K=e=>{let{size:t,themeColor:o,icon:r,rotate:i,flip:l,...d}=e;return r?(0,R.jsx)("span",{...d,className:a(e.className,oe,A(oe,{size:t}),{[`k-i-${r}`]:r,[`k-color-${o}`]:o,[`k-rotate-${i}`]:i,"k-flip-h":l==="h"||l==="both","k-flip-v":l==="v"||l==="both"}),"aria-hidden":"true"}):(0,R.jsx)(R.Fragment,{})};K.states=it;K.options=rt;K.className=oe;K.defaultOptions=at;var ve=K;var w=require("react/jsx-runtime"),ne="k-svg-icon",lt=[],mt={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info],variant:[M.outline,M.solid,M.duotone]},se={viewBox:"0 0 24 24",variant:M.outline},z=e=>{var S,y;let{size:t,themeColor:o,rotate:r,flip:i,viewBox:l=se.viewBox,variant:d=se.variant,icon:c,...u}=e;if(!c)return(0,w.jsx)(w.Fragment,{});if(c==="none")return(0,w.jsx)("span",{...u,className:a(e.className,ne,A("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let p=typeof c=="object"&&c.name&&c.name,N=typeof c=="object"?d&&((S=c.variants)==null?void 0:S[d])||((y=c.variants)==null?void 0:y.outline)||c.content:void 0;return(0,w.jsx)("span",{...u,className:a(e.className,ne,A("k-icon",{size:t}),{[`k-svg-i-${p}`]:p,[`k-color-${o}`]:o,[`k-rotate-${r}`]:r,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),"aria-hidden":"true",children:(0,w.jsx)("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof c=="object"?c.viewBox:l,dangerouslySetInnerHTML:N!==void 0?{__html:N}:void 0,children:c?void 0:e.children})})};z.states=lt;z.options=mt;z.className=ne;z.defaultOptions=se;var ie=z;var re=je(require("@progress/kendo-svg-icons"));var Se="icon",ye="icons";var Ae=require("react");var Me=require("react"),ke=(0,Me.createContext)({iconsType:"svg"});var O=require("react/jsx-runtime"),X="k-icon",ct=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),dt=[],ut={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info],variant:[M.outline,M.solid,M.duotone]},W={viewBox:"0 0 24 24",type:"svg",variant:M.outline},k=e=>{let{iconsType:t}=(0,Ae.useContext)(ke),{size:o,themeColor:r,icon:i,type:l=t||W.type,rotate:d,flip:c,viewBox:u=W.viewBox,variant:p=W.variant,...N}=e;if(!i)return(0,O.jsx)(O.Fragment,{});if((t||l)==="svg"){if(i==="none")return(0,O.jsx)(ie,{...N,className:a(e.className,X),icon:i,size:o,variant:p});let y=re[i]?i:ct(`${i}-icon`);return re[y]?(0,O.jsx)(ie,{...N,className:a(e.className,X),icon:re[y],size:o,themeColor:r,rotate:d,flip:c,viewBox:u,variant:p}):(0,O.jsx)(O.Fragment,{})}return(0,O.jsx)(ve,{...N,className:a(e.className,X),icon:i,size:o,themeColor:r,rotate:d,flip:c})};k.states=dt;k.options=ut;k.defaultOptions=W;k.className=X;k.moduleName=Se;k.folderName=ye;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 ae="button",Ce=ae;var x=require("react/jsx-runtime"),D="k-button",pt=["icon-button"],ft=[C.hover,C.focus,C.active,C.selected,C.disabled,C.generating],Nt={size:[s.undefined,s.xsmall,s.small,s.medium,s.large],rounded:[I.undefined,I.none,I.small,I.medium,I.large,I.full],fillMode:[L.undefined,L.solid,L.flat,L.outline,L.clear,L.link],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info,n.inverse]},le={showArrow:!1,arrowIconName:"chevron-down"},m=e=>{let{as:t="button",size:o,rounded:r,fillMode:i,themeColor:l,showArrow:d=le.showArrow,arrowIconName:c=le.arrowIconName,variant:u,hover:p,focus:N,active:S,selected:y,disabled:U,togglable:Z,ariaDisabled:P,icon:h,iconSize:_,text:$,iconClassName:$e,className:Fe,...Ve}=e,Ge=h!=null,qe=e.children!==void 0;return(0,x.jsxs)(t,{className:a(Fe,D,be(D,u),A(D,{size:o,rounded:r,fillMode:i,themeColor:l}),V(D,{hover:p,focus:N,active:S,disabled:U||P,selected:y}),{"k-icon-button":!$&&!qe&&Ge}),"aria-pressed":Z?y?"true":"false":void 0,...Ve,"aria-disabled":P?"true":void 0,disabled:U||void 0,children:[typeof h=="string"&&h&&(0,x.jsx)(k,{className:a($e,"k-button-icon"),icon:h,size:_}),h&&typeof h!="string"&&(0,x.jsx)(x.Fragment,{children:h}),$?(0,x.jsxs)(x.Fragment,{children:[$&&(0,x.jsx)("span",{className:"k-button-text",children:$}),e.children]}):e.children&&(0,x.jsx)("span",{className:"k-button-text",children:e.children}),d&&(0,x.jsx)("span",{className:"k-menu-button-arrow k-button-arrow",children:(0,x.jsx)(k,{icon:c})})]})};m.states=ft;m.options=Nt;m.variants=pt;m.className=D;m.defaultOptions=le;m.moduleName=ae;m.folderName=Ce;m.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."}]};var Ee=require("react/jsx-runtime"),Oe=e=>(0,Ee.jsx)(m,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});var _e=require("react/jsx-runtime"),Be=e=>(0,_e.jsx)(m,{icon:"folder",children:"Button",...e});var Le=require("react/jsx-runtime"),Ie=e=>(0,Le.jsx)(m,{children:"Button",...e});var Y=require("react/jsx-runtime"),xt=m.options,ht=m.states,bt={...m.defaultOptions,variant:"text"},gt=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],Tt=[],H=e=>{let{variant:t,...o}=e;switch(t){case"icon-only":return(0,Y.jsx)(Oe,{...o,icon:"star"});case"icon-and-text":return(0,Y.jsx)(Be,{...o,icon:"star",children:"Button"});default:return(0,Y.jsx)(Ie,{...o,children:"Button"})}};H.options=xt;H.states=ht;H.variants=gt;H.defaultOptions=bt;H.modifiers=Tt;H.className=m.className;var we=require("react/jsx-runtime");var me="popup",Pe=me;var de=require("react/jsx-runtime"),He="k-animation-container",vt=[],St={},ce={positionMode:"absolute",shown:!0},E=e=>{let{positionMode:t=ce.positionMode,shown:o=ce.shown,animationStyle:r,offset:i,...l}=e;return(0,de.jsx)("div",{...l,style:{...i,...e.style},className:a(e.className,He,{"k-animation-container-shown":o,"k-animation-container-fixed":t==="fixed"}),children:(0,de.jsx)("div",{className:"k-child-animation-container",style:r,children:e.children})})};E.states=vt;E.options=St;E.className=He;E.defaultOptions=ce;E.moduleName=me;E.folderName=Pe;var ue="popup",Re=ue;var pe=require("react/jsx-runtime"),Ke="k-popup",yt=[],Mt={},ze={positionMode:"absolute"},T=e=>{let{offset:t,positionMode:o=ze.positionMode,animationStyle:r,containerClassName:i,containerRole:l,containerAriaLabel:d,...c}=e;return(0,pe.jsx)(E,{positionMode:o,offset:t,animationStyle:r,className:i,role:l,"aria-label":d,children:(0,pe.jsx)("div",{...c,className:a(e.className,Ke),children:e.children})})};T.states=yt;T.options=Mt;T.className=Ke;T.defaultOptions=ze;T.moduleName=ue;T.folderName=Re;T.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 fe=require("react/jsx-runtime");var Ne=require("react/jsx-runtime");var De="time-selector",Ue="timeselector";var v=require("react/jsx-runtime"),xe="k-timeselector",kt=[],At={size:[s.undefined,s.small,s.medium,s.large]},Ct={},B=e=>{let{size:t,header:o,fastSelection:r,columns:i,focusedColumn:l,...d}=e,c=i.map(function(u,p){let N=!1,S=!0;return u===l&&(N=!0),(p===0||u==="tt")&&(S=!1),(0,v.jsx)(j,{type:u,focus:N,separator:S},p)});return(0,v.jsxs)("div",{...d,className:a(e.className,xe,A(xe,{size:t})),role:"group","aria-label":"Time selector",children:[(0,v.jsx)(v.Fragment,{children:o}),(0,v.jsx)(v.Fragment,{children:r}),(0,v.jsxs)("div",{className:"k-time-list-container",children:[(0,v.jsx)("span",{className:"k-time-highlight"}),c]})]})};B.states=kt;B.options=At;B.className=xe;B.defaultOptions=Ct;B.moduleName=De;B.folderName=Ue;B.ariaSpec={selector:".k-timeselector",rules:[{selector:".k-timeselector",attribute:"role=group",usage:"Groups the time selection columns."},{selector:".k-timeselector",attribute:"aria-label",usage:"Describes the time selector purpose."},{selector:".k-time-list",attribute:"role=listbox",usage:"Each time column list acts as a listbox."},{selector:".k-time-list",attribute:"aria-label",usage:"Describes which time unit the column selects."},{selector:".k-time-list-wrapper .k-reset",attribute:"role=none",usage:"Removes semantic meaning from the ul element."},{selector:".k-time-list-wrapper .k-item",attribute:"role=option",usage:"Each item in the time list is an option."}]};var Q=B;var b=require("react/jsx-runtime"),Ot=e=>(0,b.jsx)(T,{children:(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(Q,{columns:["HH","mm","ss","tt"],focusedColumn:"mm",header:(0,b.jsx)(G,{title:"10:00:00 AM",children:(0,b.jsx)(m,{fillMode:"flat",className:"k-time-now",children:"Now"})})}),(0,b.jsxs)(g,{alignment:"stretched",className:"k-time-footer",children:[(0,b.jsx)(m,{className:"k-time-cancel",children:"Cancel"}),(0,b.jsx)(m,{themeColor:"primary",className:"k-time-accept",children:"Set"})]})]}),...e});