@progress/kendo-themes-html/dist/esm/time-selector/templates/time-selector-hour.mjs

A collection of HTML helpers used for developing Kendo UI themes

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