@progress/kendo-themes-html/dist/esm/scrollview/demos/scrollview.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((r,l)=>e[l]||e[r]&&r||null).filter(r=>r!==null).join(" "):e).filter(e=>!!e).join(" ");var b=(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"});var s={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var d={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"};import{Fragment as Y,jsx as H}from"react/jsx-runtime";var z="k-font-icon",J=[],X={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info]},Q={},N=t=>{let{size:e,themeColor:r,icon:l,rotate:a,flip:m,...f}=t;return l?H("span",{...f,className:c(t.className,z,b(z,{size:e}),{[`k-i-${l}`]:l,[`k-color-${r}`]:r,[`k-rotate-${a}`]:a,"k-flip-h":m==="h"||m==="both","k-flip-v":m==="v"||m==="both"}),"aria-hidden":"true"}):H(Y,{})};N.states=J;N.options=X;N.className=z;N.defaultOptions=Q;var F=N;import{Fragment as te,jsx as I}from"react/jsx-runtime";var V="k-svg-icon",Z=[],ee={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[d.outline,d.solid,d.duotone]},A={viewBox:"0 0 24 24",variant:d.outline},C=t=>{let{size:e,themeColor:r,rotate:l,flip:a,viewBox:m=A.viewBox,variant:f=A.variant,icon:i,...w}=t;if(!i)return I(te,{});if(i==="none")return I("span",{...w,className:c(t.className,V,b("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let v=typeof i=="object"&&i.name&&i.name,k=typeof i=="object"?f&&i.variants?.[f]||i.variants?.outline||i.content:void 0;return I("span",{...w,className:c(t.className,V,b("k-icon",{size:e}),{[`k-svg-i-${v}`]:v,[`k-color-${r}`]:r,[`k-rotate-${l}`]:l,"k-flip-h":a==="h"||a==="both","k-flip-v":a==="v"||a==="both"}),"aria-hidden":"true",children:I("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof i=="object"?i.viewBox:m,dangerouslySetInnerHTML:k!==void 0?{__html:k}:void 0,children:i?void 0:t.children})})};C.states=Z;C.options=ee;C.className=V;C.defaultOptions=A;var _=C;import*as T from"@progress/kendo-svg-icons";var D="icon",K="icons";import{useContext as ne}from"react";import{createContext as oe}from"react";var G=oe({iconsType:"svg"});import{Fragment as W,jsx as S}from"react/jsx-runtime";var O="k-icon",se=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),ae=[],re={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[d.outline,d.solid,d.duotone]},E={viewBox:"0 0 24 24",type:"svg",variant:d.outline},u=t=>{let{iconsType:e}=ne(G),{size:r,themeColor:l,icon:a,type:m=e||E.type,rotate:f,flip:i,viewBox:w=E.viewBox,variant:v=E.variant,...k}=t;if(!a)return S(W,{});if((e||m)==="svg"){if(a==="none")return S(_,{...k,className:c(t.className,O),icon:a,size:r,variant:v});let y=T[a]?a:se(`${a}-icon`);return T[y]?S(_,{...k,className:c(t.className,O),icon:T[y],size:r,themeColor:l,rotate:f,flip:i,viewBox:w,variant:v}):S(W,{})}return S(F,{...k,className:c(t.className,O),icon:a,size:r,themeColor:l,rotate:f,flip:i})};u.states=ae;u.options=re;u.defaultOptions=E;u.className=O;u.moduleName=D;u.folderName=K;u.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 $="scrollview",U=$;import{Fragment as L,jsx as n,jsxs as g}from"react/jsx-runtime";var R="k-scrollview",ie=[],le={},x={mode:"normal",views:9,currentView:5,animate:!0,arrows:!0,pager:!0,rtl:!1},p=t=>{let{mode:e=x.mode,views:r=x.views,currentView:l=x.currentView,animate:a=x.animate,arrows:m=x.arrows,pager:f=x.pager,rtl:i=x.rtl,...w}=t,v=[],k=i?"chevron-right":"chevron-left",B=i?"chevron-left":"chevron-right",y="scrollview-wrap";for(let M=0;M<r;M++)v.push(n("div",{className:"k-scrollview-view",role:"listitem","aria-roledescription":"slide"},M));return g("div",{...w,className:c(R,t.className,{[`${R}-${e}`]:e!=="normal","k-rtl":i}),role:"application","aria-roledescription":"carousel",tabIndex:0,children:[n("div",{className:c("k-scrollview-wrap",{"k-scrollview-animate":a}),id:y,role:"list",style:{"--kendo-scrollview-views":r,"--kendo-scrollview-current":l},children:v}),g("div",{className:"k-scrollview-elements",children:[m&&g(L,{children:[n("span",{className:"k-scrollview-prev",role:"button","aria-label":"Previous","aria-controls":y,children:n(u,{icon:k,size:"xxxlarge"})}),n("span",{className:"k-scrollview-next",role:"button","aria-label":"Next","aria-controls":y,children:n(u,{icon:B,size:"xxxlarge"})})]}),f&&n("div",{className:"k-scrollview-nav-wrap",children:g("div",{className:"k-scrollview-nav",children:[e==="light"&&g(L,{children:[n("span",{className:"k-link"}),n("span",{className:"k-link k-primary"}),n("span",{className:"k-link k-primary k-focus"}),n("span",{className:"k-link k-focus"}),n("span",{className:"k-link"})]}),e==="normal"&&g(L,{children:[n("span",{className:"k-link",style:{transform:"scale(0.5)"}}),n("span",{className:"k-link",style:{transform:"scale(0.65)"}}),n("span",{className:"k-link",style:{transform:"scale(0.8)"}}),n("span",{className:"k-link"}),n("span",{className:"k-link k-primary"}),n("span",{className:"k-link"}),n("span",{className:"k-link",style:{transform:"scale(0.8)"}}),n("span",{className:"k-link",style:{transform:"scale(0.65)"}}),n("span",{className:"k-link",style:{transform:"scale(0.5)"}})]}),e==="dark"&&g(L,{children:[n("span",{className:"k-link",style:{transform:"scale(0.5)"}}),n("span",{className:"k-link",style:{transform:"scale(0.65)"}}),n("span",{className:"k-link"}),n("span",{className:"k-link k-primary"}),n("span",{className:"k-link"}),n("span",{className:"k-link",style:{transform:"scale(0.65)"}}),n("span",{className:"k-link",style:{transform:"scale(0.5)"}})]})]})})]}),n("div",{className:"k-sr-only","aria-live":"polite"})]})};p.states=ie;p.options=le;p.className=R;p.defaultOptions=x;p.moduleName=$;p.folderName=U;p.ariaSpec={selector:".k-scrollview",rules:[{selector:".k-scrollview",attribute:"role=application",usage:"Specifies the role of the Carousel element."},{selector:".k-scrollview",attribute:"aria-roledescription=carousel",usage:"Clarifies the role of the Carousel element."},{selector:".k-scrollview",attribute:"tabindex=0",usage:"Carousel element must be focusable."},{selector:".k-scrollview-wrap",attribute:"role=list",usage:"Clarifies the scrollview wrap as a list of items (images)."},{selector:".k-scrollview-wrap>*",attribute:"role=listitem",usage:"Specifies the role of each Carousel item."},{selector:".k-scrollview-wrap>*",attribute:"aria-roledescription=slide",usage:"Clarifies the role of the Carousel item."},{selector:".k-scrollview-prev,.k-scrollview-next",attribute:"role=button",usage:"Specifies the role of the Previous/Next button."},{selector:".k-scrollview-prev,.k-scrollview-next",attribute:"aria-label",usage:"Specifies label for the Previous/Next button."},{selector:".k-scrollview-prev,.k-scrollview-next",attribute:"aria-controls",usage:"Points to the id of the items container element."},{selector:".k-scrollview>.k-sr-only",attribute:"aria-live=polite",usage:"Identifies a hidden element as a live region in the polite state."}]};var j=p;import{jsx as ce}from"react/jsx-runtime";var P=t=>ce(j,{...t});import{jsx as q}from"react/jsx-runtime";var me=p.options,pe=p.states,de={...p.defaultOptions,variant:"normal"},ue=[{name:"pageable",title:"Pageable"},{name:"arrows",title:"Show arrows"}],fe=[{name:"normal",title:"Normal"},{name:"light",title:"Light"},{name:"dark",title:"Dark"}],h=t=>{let{modifiers:e,variant:r,...l}=t,a={};switch(Object.keys(e||{}).forEach(m=>{switch(m){case"pageable":a.pager=!!e?.[m];break;case"arrows":a.arrows=!!e?.[m];break;default:break}}),r){case"light":case"dark":return q(P,{className:"k-bg-primary-subtle",...l,...a,mode:r,style:{width:"467px",height:"307px"}});default:return q(P,{className:"k-bg-primary-subtle",...l,...a,style:{width:"467px",height:"307px"}})}};h.options=me;h.states=pe;h.variants=fe;h.defaultOptions=de;h.modifiers=ue;h.className=p.className;var st=h;export{h as ScrollviewDemo,st as default};