https://www.caringbridge.org/_next/static/chunks/pages/components/MiscDemo-3e410ac95712bc3e.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4885],{73644:function(e,a,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/components/MiscDemo",function(){return n(75829)}])},97248:function(e,a,n){"use strict";n.d(a,{Z:function(){return l}});var t=n(85893),s=n(40645),r=n.n(s),i=n(45697),c=n.n(i),d=n(94184),o=n.n(d);function l(e){let{baseStyles:a,activeStyles:n,difference:s,isActive:i,className:c="",children:d}=e,l={styles:(0,t.jsx)(r(),{id:"b9a0cb80cc9d554b",dynamic:[a,s],children:"span.__jsx-style-dynamic-selector{display:inline-block;".concat(a,"            padding: ").concat(s,"px}")}),className:r().dynamic([["b9a0cb80cc9d554b",[a,s]]])},u={styles:(0,t.jsx)(r(),{id:"8d775a81cc50db4a",dynamic:[n],children:"span.__jsx-style-dynamic-selector{display:inline-block;".concat(n)}),className:r().dynamic([["8d775a81cc50db4a",[n]]])},m=l.className,h=l.styles;i&&(m=u.className,h=u.styles);let x=o()("innerBorder",m,c);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("span",{className:x,children:d}),h]})}l.propTypes={baseStyles:c().string.isRequired,activeStyles:c().string,difference:c().number.isRequired,isActive:c().bool.isRequired,className:c().string,children:c().node.isRequired}},63005:function(e,a,n){"use strict";n.d(a,{Z:function(){return d}});var t=n(85893),s=n(40645),r=n.n(s);n(67294);var i=n(45697),c=n.n(i);function d(e){let{autoComplete:a="off",className:n="",domRef:s=null,type:i="text",width:c="100%",onChange:d,...o}=e;return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("input",{autoComplete:a,type:i,ref:s,onChange:e=>{e.target&&d(e.target.value)},...o,className:r().dynamic([["daffb56eaf1b4ba1",[c]]])+" "+(o&&null!=o.className&&o.className||"marginBottom--6 hideOutlineForMouse ".concat(n))}),(0,t.jsx)(r(),{id:"daffb56eaf1b4ba1",dynamic:[c],children:"input.__jsx-style-dynamic-selector{display:block;width:".concat(c,"}")})]})}d.propTypes={autoComplete:c().string,className:c().string,"data-qa":c().string.isRequired,domRef:c().oneOfType([c().func,c().object]),onChange:c().func.isRequired,value:c().any.isRequired,type:c().string,width:c().string}},66573:function(e,a,n){"use strict";n.d(a,{Z:function(){return l}});var t=n(85893),s=n(45697),r=n.n(s),i=n(67294),c=n(29579),d=n(63005),o=n(67628);function l(e){let{errorText:a="",label:n,onChange:s,...r}=e,l=(0,i.useId)();return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(o.Z,{htmlFor:l,children:n}),(0,t.jsx)(d.Z,{id:l,...r,onChange:s}),(0,t.jsx)(c.Z,{children:a})]})}l.propTypes={errorText:r().string,label:r().node.isRequired,onChange:r().func.isRequired,"data-qa":r().string.isRequired}},10966:function(e,a,n){"use strict";n.d(a,{Z:function(){return c}});var t=n(85893),s=n(23918),r=n(45697),i=n.n(r);function c(e){let{title:a,hasStandardLayout:n=!0,topContent:r=()=>null,breadcrumb:i=()=>null,children:c}=e;return(0,t.jsxs)(s.Z,{title:a,children:[(0,t.jsxs)("div",{className:"standardLayout marginBottom--36",children:[(0,t.jsx)(i,{}),(0,t.jsx)(r,{})]}),(0,t.jsx)("div",{className:n?"standardLayout":"",children:(0,t.jsx)("div",{children:c})})]})}c.propTypes={title:i().string.isRequired,hasStandardLayout:i().bool,children:i().node.isRequired,topContent:i().func,breadcrumb:i().func}},14104:function(e,a,n){"use strict";n.d(a,{b:function(){return v},j:function(){return N}});var t=n(85893),s=n(40645),r=n.n(s),i=n(67294),c=n(41664),d=n.n(c),o=n(45697),l=n.n(o),u=n(94184),m=n.n(u),h=n(4162),x=n(26475),p=n(7605);function b(e){let{activeIndex:a,menuItems:n,width:s,className:c}=e,[o,l]=(0,i.useState)(!1),u=(0,i.useId)(),b=(0,i.useRef)(null),f=(0,i.useRef)(null),j=()=>l(e=>!e);(0,x.K)(o,[b,f],j),(0,p.u)(o,j);let y=m()("marginTop--24",{open:o,closed:!o,[c]:!!c});return(0,t.jsxs)("nav",{className:r().dynamic([["5ddae995a4f2f0eb",[s]]])+" "+(y||""),children:[(0,t.jsxs)("button",{onClick:j,ref:b,"aria-expanded":o,"aria-controls":u,className:r().dynamic([["5ddae995a4f2f0eb",[s]]])+" button--isClear navBtn ddmCenterIcon",children:[(0,t.jsx)("span",{className:r().dynamic([["5ddae995a4f2f0eb",[s]]])+" btnText",children:n[a].text}),o?(0,t.jsx)("i",{className:r().dynamic([["5ddae995a4f2f0eb",[s]]])+" fa-chevron-up fa-light"}):(0,t.jsx)("i",{className:r().dynamic([["5ddae995a4f2f0eb",[s]]])+" fa-chevron-down fa-light"})]}),(0,t.jsx)("ul",{id:u,className:r().dynamic([["5ddae995a4f2f0eb",[s]]])+" plainList",children:n.map((e,n)=>{let{pathname:i,Icon:c,text:o,queryParams:l={}}=e;return(0,t.jsxs)("li",{className:r().dynamic([["5ddae995a4f2f0eb",[s]]]),children:[n===a&&(0,t.jsx)("span",{ref:f,className:r().dynamic([["5ddae995a4f2f0eb",[s]]])+" active",children:(0,t.jsxs)("span",{className:r().dynamic([["5ddae995a4f2f0eb",[s]]])+" ddmCenterIcon",children:[(0,t.jsx)(c,{className:r().dynamic([["5ddae995a4f2f0eb",[s]]])})," ",(0,t.jsx)("span",{className:r().dynamic([["5ddae995a4f2f0eb",[s]]]),children:o})]})}),n!==a&&(0,t.jsxs)(d(),{href:(0,h.G3)(i,l),className:"a--isClear ddmCenterIcon ddmAnchor",children:[(0,t.jsx)(c,{className:r().dynamic([["5ddae995a4f2f0eb",[s]]])})," ",(0,t.jsx)("span",{className:r().dynamic([["5ddae995a4f2f0eb",[s]]]),children:o})]})]},i)})}),(0,t.jsx)(r(),{id:"5ddae995a4f2f0eb",dynamic:[s],children:"nav.__jsx-style-dynamic-selector{position:relative;width:".concat(s,"}.navBtn.__jsx-style-dynamic-selector{background-color:white;border:thin solid var(--component-border);-webkit-border-radius:var(--radius-tight);-moz-border-radius:var(--radius-tight);border-radius:var(--radius-tight);height:57px;padding:16px 20px;width:100%;-webkit-box-pack:justify;

1-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.open.__jsx-style-dynamic-selector>.navBtn.__jsx-style-dynamic-selector{-webkit-border-bottom-left-radius:0;-moz-border-radius-bottomleft:0;border-bottom-left-radius:0;-webkit-border-bottom-right-radius:0;-moz-border-radius-bottomright:0;border-bottom-right-radius:0}.closed.__jsx-style-dynamic-selector>ul.__jsx-style-dynamic-selector{display:none}ul.__jsx-style-dynamic-selector{position:absolute;width:100%;top:56px;left:0;margin:0;border:thin solid var(--component-border);-webkit-border-radius:var(--radius-tight);-moz-border-radius:var(--radius-tight);border-radius:var(--radius-tight);-webkit-border-top-left-radius:0;-moz-border-radius-topleft:0;border-top-left-radius:0;-webkit-border-top-right-radius:0;-moz-border-radius-topright:0;border-top-right-radius:0;z-index:var(--zindex-drop-down-menu);background-color:white}li.__jsx-style-dynamic-selector{height:57px}.ddmAnchor,li.__jsx-style-dynamic-selector>span.__jsx-style-dynamic-selector{height:100%;padding:16px 20px;background-color:white;-webkit-border-radius:var(--radius-tight);-moz-border-radius:var(--radius-tight);border-radius:var(--radius-tight);-webkit-transition:all linear var(--speed-on-hover);-moz-transition:all linear var(--speed-on-hover);-o-transition:all linear var(--speed-on-hover);transition:all linear var(--speed-on-hover);display:block}.active.__jsx-style-dynamic-selector{color:var(--brave-blue-900);

1cursor:default}.ddmAnchor:hover,.ddmAnchor:focus{color:var(--navy);background-color:var(--gray-50);-webkit-transition:all linear var(--speed-on-hover);-moz-transition:all linear var(--speed-on-hover);-o-transition:all linear var(--speed-on-hover);transition:all linear var(--speed-on-hover)}.ddmCenterIcon{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center}")})]})}b.propTypes={activeIndex:l().number.isRequired,menuItems:l().arrayOf(l().object).isRequired,width:l().string.isRequired,className:l().string};var f=n(78744),j=n(11163);let y=(0,f.Z)("fa-chevron-right fa-light"),g=[{pathname:h.Z6.DEMO_CARDS,text:"Cards",Icon:y},{pathname:h.Z6.DEMO_ICONS,text:"Icons",Icon:y},{pathname:h.Z6.DEMO_COLORS,text:"Colors",Icon:y},{pathname:h.Z6.DEMO_MODAL,text:"Modal",Icon:y},{pathname:h.Z6.DEMO_TYPOGRAPHY,text:"Typography",Icon:y},{pathname:h.Z6.DEMO_SPACERS,text:"Spacers",Icon:y},{pathname:h.Z6.DEMO_BUTTONS,text:"Buttons",Icon:y},{pathname:h.Z6.DEMO_EDITOR_KENDO,text:"Kendo Editor",Icon:y},{pathname:h.Z6.DEMO_FORMS,text:"Forms",Icon:y},{pathname:h.Z6.DEMO_LOGO,text:"Logo",Icon:y},{pathname:h.Z6.DEMO_IMAGES,text:"Images",Icon:y},{pathname:h.Z6.DEMO_MARKETING,text:"Marketing Widgets",Icon:y},{pathname:h.Z6.DEMO_MISC,text:"Miscellaneous",Icon:y},{pathname:h.Z6.DEMO_CALCULATOR,text:"CSS Calculator",Icon:y}];function v(){let{pathname:e}=(0,j.useRouter)(),a=g.findIndex(a=>e===a.pathname);return(0,t.jsx)(b,{activeIndex:a,menuItems:g.map(e=>({...e})),width:"285px"})}function N(e,a,n,t){let s=(t-a)/(n-e);return"clamp(".concat(Math.min(a,t),"px, (100vw * ").concat(Math.round(1e3*s)/1e3," + ").concat(Math.round(10*(a-s*e))/10,"px), ").concat(Math.max(a,t),"px)")}},75829:function(e,a,n){"use strict";n.r(a),n.d(a,{__N_SSG:function(){return w},default:function(){return _}});var t=n(85893),s=n(40645),r=n.n(s),i=n(14104),c=n(45697),d=n.n(c),o=n(97248),l=n(10966),u=n(67294),m=n(86921),h=n(61922),x=n(66573),p=n(64682),b=n(4162),f=n(73775),j=n(67628),y=n(22878),g=n(68630),v=n.n(g);function N(e){return String("").padEnd(4*e," ")}var w=!0;function _(e){let{page:a}=e,[n,s]=(0,u.useState)(!1),c=()=>s(e=>!e),[d,p]=(0,u.useState)(String(h.fD)),[b,j]=(0,u.useState)(String(h.ZG)),[y,g]=(0,u.useState)(String(h.PI)),[v,N]=(0,u.useState)(String(h.Q6)),w=new Date("2024-03-17T13:46:18.000-07:00");return(0,t.jsx)(f.fc,{value:{page:a},children:(0,t.jsxs)(l.Z,{title:"Components Demo - Miscellaneous",topContent:i.b,children:[(0,t.jsx)("h1",{className:"jsx-2088526cb89ac0dc marginTop--0",children:"Miscellaneous"}),(0,t.jsx)("p",{className:"jsx-2088526cb89ac0dc",children:"This is a demo of various things that don’t fit well into any other grouping."}),(0,t.jsxs)("h2",{className:"jsx-2088526cb89ac0dc",children:[(0,t.jsx)("code",{className:"jsx-2088526cb89ac0dc",children:"<Spinner />"})," component"]}),(0,t.jsxs)("div",{className:"jsx-2088526cb89ac0dc rowLayout",children:[(0,t.jsx)("span",{className:"jsx-2088526cb89ac0dc",children:(0,t.jsx)(x.Z,{type:"number",label:"Spot size",onChange:p,value:d,"data-qa":"spotSize",width:"6em"})}),(0,t.jsx)("span",{className:"jsx-2088526cb89ac0dc",children:(0,t.jsx)(x.Z,{type:"number",label:"Spot count",onChange:j,value:b,"data-qa":"spotCount",max:4,min:3,width:"6em"})}),(0,t.jsx)("span",{className:"jsx-2088526cb89ac0dc",children:(0,t.jsx)(x.Z,{type:"number",label:"Duration (milliseconds)",onChange:g,value:y,"data-qa":"durationMs",width:"6em"})}),(0,t.jsx)("span",{className:"jsx-2088526cb89ac0dc",children:(0,t.jsx)(x.Z,{type:"number",label:"Swell",onChange:N,value:v,"data-qa":"swell",width:"6em",min:"100",max:"200"})})]}),(0,t.jsx)("p",{style:{paddingLeft:"135px"},className:"jsx-2088526cb89ac0dc",children:(0,t.jsx)(h.ZP,{spotSize:parseInt(d),spotCount:parseInt(b),durationMs:parseInt(y),swell:parseInt(v)})}),(0,t.jsx)("h2",{className:"jsx-2088526cb89ac0dc",children:(0,t.jsx)("code",{className:"jsx-2088526cb89ac0dc",children:"<InnerBorder />"})}),(0,t.jsx)("p",{className:"jsx-2088526cb89ac0dc",children:"There are times when a box either has a border or not, or maybe the border is 1px and then 2px. In either case, the page will have a slight shift when transitioning between those borders. This is a helper component to assist when coding for that situtation."}),(0,t.jsxs)("p",{className:"jsx-2088526cb89ac0dc",children:[(0,t.jsx)("em",{className:"jsx-2088526cb89ac0dc",children:"tldr;"})," This component stops page jank when making a CSS transition between irregular width borders."]}),(0,t.jsx)("div",{onClick:c,className:"jsx-2088526cb89ac0dc container",children:(0,t.jsx)(o.Z,{baseStyles:"border: none; border-radius: var(--radius-gentle);",activeStyles:"border: 8px solid gold; border-radius: var(--radius-gentle);",difference:8,isActive:n,children:(0,t.jsx)("div",{className:"jsx-2088526cb89ac0dc myBox",children:"This is the content that appears inside the bordered component. Click me."})})}),(0,t.jsx)("div",{onClick:c,className:"jsx-2088526cb89ac0dc container",children:(0,t.jsx)(o.Z,{baseStyles:"border: 1px solid var(--gray-600);\n                        border-radius: var(--radius-gentle);",activeStyles:"border: 2px solid var(--navy);\n                        border-radius: var(--radius-gentle);",difference:1,isActive:n,children:(0,t.jsx)("div",{className:"jsx-2088526cb89ac0dc myBox",children:"This is the content that appears inside the bordered component. Click me."})})}),(0,t.jsx)("p",{className:"jsx-2088526cb89ac0dc",children:"Click the boxes to toggle the border."}),(0,t.jsx)("h2",{className:"jsx-2088526cb89ac0dc",children:"Date Formats at CaringBridge"}),(0,t.jsx)("p",{className:"jsx-2088526cb89ac0dc",children:"These are location-aware formats, which means Europeans will get DD/MM order instead of MM/DD order."}),(0,t.jsxs)("dl",{className:"jsx-2088526cb89ac0dc",children:[(0,t.jsx)("dt",{className:"jsx-2088526cb89ac0dc",children:"formatDate(CB_DATETIME_FORMATS.FULL)"}),(0,t.jsx)("dd",{className:"jsx-2088526cb89ac0dc",children:(0,m.p6)(m.yi.FULL,w)}),(0,t.jsx)("dt",{className:"jsx-2088526cb89ac0dc",children:"formatDate(CB_DATETIME_FORMATS.LONG)"}),(0,t.jsx)("dd",{className:"jsx-2088526cb89ac0dc",children:(0,m.p6)(m.yi.LONG,w)}),(0,t.jsx)("dt",{className:"jsx-2088526cb89ac0dc",children:"formatDate(CB_DATETIME_FORMATS.MEDIUM)"}),(0,t.jsx)("dd",{className:"jsx-2088526cb89ac0dc",children:(0,m.p6)(m.yi.MEDIUM,w)}),(0,t.jsx)("dt",{className:"jsx-2088526cb89ac0dc",children:"formatDate(CB_DATETIME_FORMATS.MID)"}),(0,t.jsx)("dd",{className:"jsx-2088526cb89ac0dc",children:(0,m.p6)(m.yi.MID,w)}),(0,t.jsx)("dt",{className:"jsx-2088526cb89ac0dc",children:"formatDate(CB_DATETIME_FORMATS.SHORT)"}),(0,t.jsx)("dd",{className:"jsx-2088526cb89ac0dc",children:(0,m.p6)(m.yi.SHORT,w)})]}),(0,t.jsx)(M,{}),(0,t.jsx)(r(),{id:"2088526cb89ac0dc",children:".container.jsx-2088526cb89ac0dc{max-width:400px;margin:1em;display:inline-block;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;background-color:white}.myBox.jsx-2088526cb89ac0dc{padding:1ch}.rowLayout.jsx-2088526cb89ac0dc{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:24px}dt.jsx-2088526cb89ac0dc{margin-top:12px;font-family:monospace}dd.jsx-2088526cb89ac0dc{font-weight:bold}"})]})})}function M(){let[e,a]=(0,u.useState)(b.Z6.DEMO_MARKETING),[n,s]=(0,u.useState)(""),r=async()=>{s(function e(a){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:999,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,s="";if(Array.isArray(a))return s+="["+a.reduce((a,s,r)=>v()(s)||Array.isArray(s)?a+"\n".concat(N(t+1)).concat(t>=n?"...":e(s,n,t+1)):a+"\n".concat(N(t+1)).concat(r,": ").concat(JSON.stringify(s),","),""),"".concat(s,"\n").concat(N(t),"],");if(v()(a)){for(let r in s+="{",a)v()(a[r])||Array.isArray(a[r])?s+="\n".concat(N(t+1)).concat(r,": ").concat(t>=n?"...":e(a[r],n,t+1)):s+="\n".concat(N(t+1)).concat(r,": ").concat(JSON.stringify(a[r]),",");return"".concat(s,"\n").concat(N(t),"},")}return JSON.stringify(a)}(await (0,p.HE)(e)))};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("h2",{children:"Debug a query for a path"}),(0,t.jsx)(j.Z,{htmlFor:"routePicker",children:"Routes"}),(0,t.jsx)("select",{id:"routePicker","data-qa":"routePicker",className:"routePicker",onChange:e=>{a(e.target.value)},value:e,children:Object.values(b.Z6).map(e=>(0,t.jsx)("option",{value:e,children:e},e))}),(0,t.jsx)(y.Z,{"data-qa":"runQuery",onClick:r,children:"Run Query"}),(0,t.jsx)("pre",{children:n})]})}

1_.propTypes={page:d().object.isRequired}},78744:function(e,a,n){"use strict";n.d(a,{Z:function(){return s}});var t=n(85893);function s(e){return()=>(0,t.jsx)("i",{className:e})}n(67294)},26475:function(e,a,n){"use strict";n.d(a,{K:function(){return s}});var t=n(67294);function s(e,a,n){(0,t.useEffect)(()=>{function t(e){let t;t=!0,Array.isArray(a)&&a.length&&(t=!a.some(a=>{var n;return!!a&&!!a.current&&!!e&&(null==e?void 0:e.composedPath())&&(null==e?void 0:null===(n=e.composedPath())||void 0===n?void 0:n.indexOf(a.current))>-1})),t&&n()}if(e)return window.addEventListener("click",t),()=>{window.removeEventListener("click",t)}},[e,a,n])}},7605:function(e,a,n){"use strict";n.d(a,{u:function(){return r}});var t=n(67294),s=n(86566);function r(e,a){let n=!(arguments.length>2)||void 0===arguments[2]||arguments[2],r=(0,t.useCallback)(()=>{n&&e&&a(!1)},[e,n,a]);(0,s.Z)("Escape",r)}}},function(e){e.O(0,[5680,7536,8764,3953,2701,1445,4389,9357,5017,2780,3263,4472,3918,4682,2888,9774,179],function(){return e(e.s=73644)}),_N_E=e.O()}]);