@progress/kendo-themes-html/dist/cjs/scrollview/demos/scrollview.js

A collection of HTML helpers used for developing Kendo UI themes

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