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

A collection of HTML helpers used for developing Kendo UI themes

var se=Object.create;var L=Object.defineProperty;var le=Object.getOwnPropertyDescriptor;var de=Object.getOwnPropertyNames;var ce=Object.getPrototypeOf,pe=Object.prototype.hasOwnProperty;var me=(e,t)=>{for(var n in t)L(e,n,{get:t[n],enumerable:!0})},q=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of de(t))!pe.call(e,i)&&i!==n&&L(e,i,{get:()=>t[i],enumerable:!(r=le(t,i))||r.enumerable});return e};var ue=(e,t,n)=>(n=e!=null?se(ce(e)):{},q(t||!e||!e.__esModule?L(n,"default",{value:e,enumerable:!0}):n,e)),xe=e=>q(L({},"__esModule",{value:!0}),e);var Te={};me(Te,{ExpansionPanelDemo:()=>N,default:()=>Me});module.exports=xe(Te);var l=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?l(...t):typeof t=="object"?Object.keys(t).map((n,r)=>t[r]||t[n]&&n||null).filter(n=>n!==null).join(" "):t).filter(t=>!!t).join(" ");var I=(e,t)=>l({[`${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"}),H=(e,t)=>{let{valid:n,invalid:r,hover:i,focus:p,checked:d,active:s,selected:b,disabled:u,indeterminate:x,loading:y,empty:k,readonly:ie,highlighted:re,...R}=t;return l({"k-valid":n,"k-invalid":r,"k-hover":i,"k-focus":p,"k-checked":d,"k-active":s,"k-selected":b,"k-disabled":u,"k-indeterminate":x&&!d,"k-loading":y,"k-empty":k,"k-readonly":ie,"k-highlighted":re},Object.keys(R).reduce((B,C)=>(C.startsWith("k-")?B[C]=R[C]:B[`k-${C}`]=R[C],B),{}))};var a={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var f={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"},P={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 K={};function S(e){return K[e]=(K[e]||0)+1,`k-${e}-${K[e]}`}var O=require("react/jsx-runtime"),F="k-font-icon",fe=[],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]},ge={},A=e=>{let{size:t,themeColor:n,icon:r,rotate:i,flip:p,...d}=e;return r?(0,O.jsx)("span",{...d,className:l(e.className,F,I(F,{size:t}),{[`k-i-${r}`]:r,[`k-color-${n}`]:n,[`k-rotate-${i}`]:i,"k-flip-h":p==="h"||p==="both","k-flip-v":p==="v"||p==="both"}),"aria-hidden":"true"}):(0,O.jsx)(O.Fragment,{})};A.states=fe;A.options=he;A.className=F;A.defaultOptions=ge;var W=A;var E=require("react/jsx-runtime"),D="k-svg-icon",ve=[],be={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:[f.outline,f.solid,f.duotone]},V={viewBox:"0 0 24 24",variant:f.outline},M=e=>{var y,k;let{size:t,themeColor:n,rotate:r,flip:i,viewBox:p=V.viewBox,variant:d=V.variant,icon:s,...b}=e;if(!s)return(0,E.jsx)(E.Fragment,{});if(s==="none")return(0,E.jsx)("span",{...b,className:l(e.className,D,I("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let u=typeof s=="object"&&s.name&&s.name,x=typeof s=="object"?d&&((y=s.variants)==null?void 0:y[d])||((k=s.variants)==null?void 0:k.outline)||s.content:void 0;return(0,E.jsx)("span",{...b,className:l(e.className,D,I("k-icon",{size:t}),{[`k-svg-i-${u}`]:u,[`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:(0,E.jsx)("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof s=="object"?s.viewBox:p,dangerouslySetInnerHTML:x!==void 0?{__html:x}:void 0,children:s?void 0:e.children})})};M.states=ve;M.options=be;M.className=D;M.defaultOptions=V;var G=M;var U=ue(require("@progress/kendo-svg-icons"));var J="icon",Q="icons";var ee=require("react");var Y=require("react"),Z=(0,Y.createContext)({iconsType:"svg"});var g=require("react/jsx-runtime"),_="k-icon",ye=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),Ne=[],ke={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:[f.outline,f.solid,f.duotone]},w={viewBox:"0 0 24 24",type:"svg",variant:f.outline},h=e=>{let{iconsType:t}=(0,ee.useContext)(Z),{size:n,themeColor:r,icon:i,type:p=t||w.type,rotate:d,flip:s,viewBox:b=w.viewBox,variant:u=w.variant,...x}=e;if(!i)return(0,g.jsx)(g.Fragment,{});if((t||p)==="svg"){if(i==="none")return(0,g.jsx)(G,{...x,className:l(e.className,_),icon:i,size:n,variant:u});let k=U[i]?i:ye(`${i}-icon`);return U[k]?(0,g.jsx)(G,{...x,className:l(e.className,_),icon:U[k],size:n,themeColor:r,rotate:d,flip:s,viewBox:b,variant:u}):(0,g.jsx)(g.Fragment,{})}return(0,g.jsx)(W,{...x,className:l(e.className,_),icon:i,size:n,themeColor:r,rotate:d,flip:s})};h.states=Ne;h.options=ke;h.defaultOptions=w;h.className=_;h.moduleName=J;h.folderName=Q;h.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="expander",ne="expansion-panel";var m=require("react/jsx-runtime"),z="k-expander",Ee=[P.hover,P.focus,P.disabled,P.expanded],Se={},Ce={},c=e=>{let{title:t,subtitle:n,expanded:r,hover:i,focus:p,disabled:d,dir:s,contentStyle:b,id:u,...x}=e,y=u?`${u}-content`:S("expander-content");return(0,m.jsxs)("div",{...x,className:l(e.className,z,H(z,{hover:i,focus:p,disabled:d,expanded:r})),dir:s,children:[(0,m.jsxs)("div",{className:l("k-expander-header",H(z,{hover:i})),role:"button","aria-controls":y,"aria-expanded":r?"true":"false",tabIndex:0,"aria-disabled":d?"true":void 0,children:[(0,m.jsx)("div",{className:"k-expander-title",children:t}),(0,m.jsx)("span",{className:"k-spacer"}),(0,m.jsx)("div",{className:"k-expander-sub-title",children:n}),(0,m.jsx)("span",{className:"k-expander-indicator",children:r?(0,m.jsx)(h,{icon:"chevron-up"}):(0,m.jsx)(h,{icon:"chevron-down"})})]}),(0,m.jsx)("div",{className:l("k-expander-content-wrapper",{"k-hidden":!r}),id:y,children:(0,m.jsx)("div",{className:"k-expander-content",style:b,children:e.children})})]})};c.states=Ee;c.options=Se;c.className=z;c.defaultOptions=Ce;c.moduleName=te;c.folderName=ne;c.ariaSpec={selector:".k-expander",rules:[{selector:".k-expander-header",attribute:"role=button",usage:"Sets the proper role for the ExpansionPanel header."},{selector:".k-expander-header",attribute:"aria-controls",usage:"Points to the controlled content wrapper element."},{selector:".k-expander-header",attribute:"aria-expanded=true/false",usage:"Indicates the expanded state of the ExpansionPanel."},{selector:".k-expander-header",attribute:"tabindex=0",usage:"The element should be focusable."},{selector:".k-disabled .k-expander-header",attribute:"aria-disabled=true",usage:"Rendered only when the ExpansionPanel is disabled."},{selector:".k-expander-content-wrapper",attribute:"id",usage:"Content wrapper has an id referenced by aria-controls."}]};var $=c;var X=require("react/jsx-runtime"),T=e=>(0,X.jsx)($,{title:"Panel Title",subtitle:"Optional subtitle",id:S("expander"),children:(0,X.jsx)("span",{children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text."}),...e});var j=require("react/jsx-runtime"),oe=e=>(0,j.jsx)($,{expanded:!0,title:"Expanded Panel",subtitle:"With content visible",id:S("expander"),children:(0,j.jsx)("span",{children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text."}),...e});var v=require("react/jsx-runtime"),Ie=c.options,Pe=c.states,ae={...c.defaultOptions,variant:"normal"},Oe=[{name:"normal",title:"Normal"},{name:"expanded",title:"Expanded"}],Ae=[],N=e=>{let{variant:t,...n}={...ae,...e};return(0,v.jsxs)("div",{style:n.style?n.style:{width:"467px",height:"265"},children:[t==="expanded"?(0,v.jsx)(oe,{title:"Title",children:[(0,v.jsx)("span",{children:"This is just a quick example text to build on the Expansion Panel to make up the bulk of the panel content."})],...n,subtitle:"Subtitle"}):(0,v.jsx)(T,{title:"Title",subtitle:"Subtitle",...n}),(0,v.jsx)(T,{title:"Title",subtitle:"Subtitle",...n}),(0,v.jsx)(T,{title:"Title",subtitle:"Subtitle",...n}),(0,v.jsx)(T,{title:"Title",subtitle:"Subtitle",...n})]})};N.options=Ie;N.states=Pe;N.variants=Oe;N.defaultOptions=ae;N.modifiers=Ae;N.className=c.className;var Me=N;