UNPKG

@bentoproject/accordion

Version:
4 lines 9.69 kB
; function e(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function n(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function t(t){for(var o=1;o<arguments.length;o++){var r=null!=arguments[o]?arguments[o]:{};o%2?n(Object(r),!0).forEach((function(n){e(t,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):n(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}var o,r,{hasOwnProperty:i,toString:c}=Object.prototype;function a(e,n){return Object.keys(e).reduce(((t,o)=>(n.includes(o)||(t[o]=e[o]),t)),{})}function l(e,n,t){let o=e[n];return void 0===o&&(o=t(e,n),e[n]=o),o}function d(e,n,t,o,r,i,c,a,l,d,u){return e}import{createElement as u}from"@bentoproject/core";import{useLayoutEffect as f,useRef as s}from"@bentoproject/core";import{PreactBaseElement as p}from"@bentoproject/core";import{forwardRef as b}from"@bentoproject/core";import{useDOMHandle as m}from"@bentoproject/core";import{useSlotContext as h}from"@bentoproject/core";function v(e){return(v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function g(e){var n=function(e,n){if("object"!==v(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var o=t.call(e,"string");if("object"!==v(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===v(n)?n:String(n)}function x(){return o||(o=Promise.resolve(void 0))}function y(e,n){if(null==e)return{};var t,o,r={},i=Object.keys(e);for(o=0;o<i.length;o++)t=i[o],n.indexOf(t)>=0||(r[t]=e[t]);return r}import{createContext as j,createElement as S}from"@bentoproject/core";import{useCallback as O,useContext as w,useEffect as E,useImperativeHandle as I,useLayoutEffect as M,useMemo as _,useRef as $,useState as C}from"@bentoproject/core";import{forwardRef as k}from"@bentoproject/core";import{WithAmpContext as A}from"@bentoproject/core";import{useCallback as H,useLayoutEffect as P}from"@bentoproject/core";import{useAmpContext as Y}from"@bentoproject/core";function z(e,n=0){var t,o;return null!==(t=null!==(o=e.tabindex)&&void 0!==o?o:e.tabIndex)&&void 0!==t?t:n}var L=["Webkit","webkit","Moz","moz","ms","O","o"];function T(e,n,t){if(N(n))return n;r||(r=Object.create(null));let o=r[n];if(!o||t){if(o=n,void 0===e[n]){const t=function(e){return e.charAt(0).toUpperCase()+e.slice(1)}(n),r=function(e,n){for(let t=0;t<L.length;t++){const o=L[t]+n;if(void 0!==e[o])return o}return""}(e,t);void 0!==e[r]&&(o=r)}t||(r[n]=o)}return o}function R(e,n,t,o,r){const i=T(e.style,n,r);if(!i)return;const c=o?t+o:t;e.style.setProperty(function(e){const n=e.replace(/[A-Z]/g,(e=>"-"+e.toLowerCase()));return L.some((e=>n.startsWith(e+"-")))?`-${n}`:n}(i),c)}function D(e,n,t){const o=T(e.style,n,t);if(o)return N(o)?e.style.getPropertyValue(o):e.style[o]}function F(e,n){for(const t in n)R(e,t,n[t])}function N(e){return e.startsWith("--")}function W(e,n,t){e.classList.add("i-amphtml-animating");let o=n();return o.onfinish=o.oncancel=()=>{o=null,t&&t(),e.classList.remove("i-amphtml-animating")},()=>{o&&o.cancel()}}function X(e){const n=window.innerHeight,t=Math.abs(e)/n*500;return Math.min(Math.max(t,200),500)}var Z=["animate","as","children","expandSingleSection","id"],q=["animate","as","children","expanded","id","onExpandStateChange"],B=j({}),G=j({}),J={},K={},Q=function(){let e=0;return()=>String(++e)}(),U=()=>String(Math.floor(1e5*Math.random())),V=k((function(e,n){let{animate:o=!1,as:r="section",children:i,expandSingleSection:c=!1,id:l}=e,d=y(e,Z);const[u,f]=C(J),s=$(K),[p]=C(U),b=l||`a${p}`;E((()=>{c&&f((e=>{const n={};let t=0;for(const o in e)n[o]=e[o]&&0==t++;return n}))}),[c]);const m=O(((e,n,{current:o})=>(f((t=>ee(e,n,t,c))),s.current=t(t({},s.current),{},{[e]:o}),()=>{f((n=>a(n,e))),s.current=a(s.current,e)})),[c]),h=O(((e,n)=>{f((t=>{const o=null!=n?n:!t[e],r=ee(e,o,t,c);return x().then((()=>{for(const e in t){const n=s.current[e];n&&t[e]!=r[e]&&n(r[e])}})),r}))}),[c]),v=O(((e,n)=>{var t;return null!==(t=u[e])&&void 0!==t?t:n}),[u]),g=O((e=>{if(e)e in u&&h(e);else if(!c)for(const e in u)h(e)}),[u,h,c]),j=O((e=>{if(e)v(e,!0)||h(e);else if(!c)for(const e in u)v(e,!0)||h(e)}),[u,h,v,c]),w=O((e=>{if(e)v(e,!1)&&h(e);else for(const e in u)v(e,!1)&&h(e)}),[u,h,v]);I(n,(()=>({toggle:g,expand:j,collapse:w})),[g,w,j]);const M=_((()=>({registerSection:m,toggleExpanded:h,isExpanded:v,animate:o,prefix:b})),[m,h,v,o,b]);return S(r,t({id:l},d),S(B.Provider,{value:M},i))}));function ee(e,n,o,r){let i;if(r&&n){i={[e]:n};for(const n in o)n!=e&&(i[n]=!1)}else i=t(t({},o),{},{[e]:n});return i}function ne(e){let{animate:n=!1,as:o="section",children:r,expanded:i=!1,id:c,onExpandStateChange:a}=e,l=y(e,q);const[d]=C(Q),u=c||d,[f]=C(U),[s,p]=C(i),[b,m]=C(null),[h,v]=C(null),{animate:g,isExpanded:j,prefix:E,registerSection:I,toggleExpanded:k}=w(B),A=j?j(u,i):s,H=null!=g?g:n,P=b||`${E||"a"}-content-${u}-${f}`,Y=h||`${E||"a"}-header-${u}-${f}`,z=$(null);z.current=a,M((()=>{if(I)return I(u,i,z)}),[I,u,i]);const L=O((e=>{k?k(u,e):p((n=>{const t=null!=e?e:!n;return x().then((()=>{const e=z.current;e&&e(t)})),t}))}),[u,k]),T=_((()=>({animate:H,contentId:P,headerId:Y,expanded:A,toggleHandler:L,setContentId:m,setHeaderId:v})),[H,P,Y,A,L]);return S(o,t({},l),S(G.Provider,{value:T},r))}function te(e){let n="class",{as:o="div",children:r,id:i,role:c="button",[n]:a=""}=e,l=y(e,["as","children","id","role",n].map(g));const{contentId:d,expanded:u,headerId:f,setHeaderId:s,toggleHandler:p}=w(G);return M((()=>{s&&s(i)}),[s,i]),S(o,t(t({},l),{},{id:f,role:c,class:`${a} section-child-76fac82 header-76fac82`,tabindex:z(l),"aria-controls":d,onClick:()=>p(),"aria-expanded":String(u)}),r)}function oe(e){let n="class",{as:o="div",children:r,id:i,role:c="region",[n]:a=""}=e,l=y(e,["as","children","id","role",n].map(g));const d=$(null),u=$(!1),{animate:f,contentId:s,expanded:p,headerId:b,setContentId:m}=w(G);return E((()=>(u.current=!0,()=>u.current=!1)),[]),M((()=>{m&&m(i)}),[m,i]),M((()=>{const e=u.current,n=d.current;if(f&&e&&n&&n.animate)return p?function(e){return W(e,(()=>{const n=D(e,"height"),t=D(e,"opacity"),o=D(e,"overflowY");F(e,{height:0,opacity:0,overflowY:"auto"});const r=e.scrollHeight;F(e,{height:n,opacity:t,overflowY:o});const i=X(r);return e.animate([{height:0,opacity:0,overflowY:"hidden"},{height:r+"px",opacity:1,overflowY:"hidden"}],{easing:"cubic-bezier(0.47, 0, 0.745, 0.715)",duration:i})}))}(n):function(e){return W(e,(()=>{const n=e.offsetHeight,t=X(n);return e.animate([{height:n+"px",opacity:1,overflowY:"hidden"},{height:"0",opacity:0,overflowY:"hidden"}],{easing:"cubic-bezier(0.39, 0.575, 0.565, 1)",duration:t})}))}(n)}),[p,f]),S(A,{renderable:p},S(o,t(t({},l),{},{ref:d,class:a+" section-child-76fac82"+(p?"":" content-hidden-76fac82"),id:s,"aria-labelledby":b,role:c}),r))}V.displayName="Accordion";var re=class extends p{init(){const e=e=>n=>{var t;!function(e,n,t){const o=e.hasAttribute(n),r=void 0!==t?t:!o;r!==o&&(r?e.setAttribute(n,""):e.removeAttribute(n))}(e,"expanded",n),null===(t=e.__AMP_PR)||void 0===t||t.call(e),this.triggerEvent(e,n?"expand":"collapse")},{element:n}=this,t=new MutationObserver((()=>{this.mutateProps(ie(n,t,e))}));t.observe(n,{attributeFilter:["expanded","id"],subtree:!0,childList:!0});const{"children":o}=ie(n,t,e);return{"children":o}}};function ie(e,n,o){var r,i,c;return{"children":(i=e,c="section",d(/^[\w-]+$/.test(c)),"> section",(r=i.querySelectorAll(function(e,n){return e.replace(/^|,/g,"$&:scope ")}("> section")))?Array.prototype.slice.call(r):[]).map((e=>{e.__AMP_PR||(e.__AMP_PR=()=>n.takeRecords());const r=l(e,"__AMP_H_SHIM",ae),i=l(e,"__AMP_C_SHIM",de),c=l(e,"__AMP_EXPAND_STATE_SHIM",o),a={"key":e,"expanded":e.hasAttribute("expanded"),"id":e.getAttribute("id"),"onExpandStateChange":c},d={"as":r,"id":e.firstElementChild.getAttribute("id"),"role":e.firstElementChild.getAttribute("role")||void 0},f={"as":i,"id":e.lastElementChild.getAttribute("id"),"role":e.lastElementChild.getAttribute("role")||void 0};return u(ne,t({},a),u(te,t({},d)),u(oe,t({},f)))}))}}function ce(e,{"aria-controls":n,"aria-expanded":t,id:o,onClick:r,role:i}){const c=e.firstElementChild;return f((()=>{if(c&&r)return c.setAttribute("id",o),c.classList.add("i-amphtml-accordion-header"),c.addEventListener("click",r),c.hasAttribute("tabindex")||c.setAttribute("tabindex",0),c.setAttribute("aria-expanded",t),c.setAttribute("aria-controls",n),c.setAttribute("role",i),e.__AMP_PR&&e.__AMP_PR(),()=>{c.removeEventListener("click",d(r))}}),[e,c,o,i,r,n,t]),u("header",null)}var ae=e=>ce.bind(null,e);function le(e,{"aria-labelledby":n,id:t,role:o},r){const i=e.lastElementChild,c=s();return c.current=i,h(c),m(r,i),f((()=>{i&&(i.classList.add("i-amphtml-accordion-content"),i.setAttribute("id",t),i.setAttribute("role",o),i.setAttribute("aria-labelledby",n),e.__AMP_PR&&e.__AMP_PR())}),[e,i,t,o,n]),u("div",null)}var de=e=>b(le.bind(null,e));re.Component=V,re.detached=!0,re.props={"animate":{attr:"animate",type:"boolean",media:!0},"expandSingleSection":{attr:"expand-single-section",type:"boolean"}};import{defineBentoElement as ue}from"@bentoproject/core";function fe(e){ue("bento-accordion",re,e)}export{fe as defineElement}; /*! https://mths.be/cssescape v1.5.1 by @mathias | MIT license */ //# sourceMappingURL=web-component.module.js.map