@postnord/web-components/components/pn-accordion-row.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as o,proxyCustomElement as i,HTMLElement as n,createEvent as t,h as r,Host as e}from"@stencil/core/internal/client";import{c as a}from"./chevron_down.js";import{o as c,r as s}from"./helpers.js";import{d}from"./pn-icon2.js";const p=i(class extends n{constructor(o){super(),!1!==o&&this.__registerHost(),this.togglerow=t(this,"togglerow",7)}details;summary;content;animation;defaultAnimationDuration=400;animationDuration=this.defaultAnimationDuration;get hostElement(){return this}isClosing=!1;isExpanding=!1;label;state=!1;buttonid;contentid;transparent=!1;togglerow;handleRowState(o){o.detail!==this.state&&(this.details.style.overflow="hidden",this.closeAccordion())}componentWillLoad(){const o=!!this.hostElement.querySelector('[slot="label"]');this.label=o?null:this.label}toggleOpen(o){const i=o??!this.state;this.state!==o&&this.togglerow.emit({element:this.details,state:i}),this.state=i}clickHandler(o){o.preventDefault(),this.details.style.overflow="hidden",this.isClosing||!this.state?this.openAccordion():(this.isClosing||this.state)&&this.closeAccordion();const{x:i,width:n,y:t,top:r}=this.hostElement.getBoundingClientRect();c(0===o.clientX&&0===o.clientY?{clientX:i+n-24,clientY:t-r}:o,this.hostElement,".pn-accordion-row-text")}openAccordion(){this.details.style.height=this.details.offsetHeight+"px",this.toggleOpen(!0),requestAnimationFrame((()=>{this.isExpanding=!0;const o=this.details.offsetHeight+"px",i=this.summary.offsetHeight+this.content.offsetHeight+"px";this.cancelAnimations(),this.animate(!0,o,i)}))}closeAccordion(){this.isClosing=!0;const o=this.details.offsetHeight+"px",i=this.summary.offsetHeight+"px";this.cancelAnimations(),this.animate(!1,o,i)}animate(o,i,n){this.animationDuration=s()?0:this.defaultAnimationDuration,this.animation=this.details.animate({height:[i,n]},{duration:this.animationDuration,easing:"cubic-bezier(0.6, 0, 0.2, 1)"}),this.animation.onfinish=()=>this.animationFinish(o),this.animation.oncancel=()=>{o?this.isExpanding=!1:this.isClosing=!1}}animationFinish(o){this.toggleOpen(o),this.cancelAnimations(),this.isClosing=!1,this.isExpanding=!1,this.details.style.height="",this.details.style.overflow=""}cancelAnimations(){this.animation&&this.animation.cancel()}render(){return r(e,{key:"2b50f9026275b623128e0a441ec4434c50a54338"},r("details",{key:"d60df44b58cd5c27306ec97dd42750bf1f01486c",class:"pn-accordion-row",open:this.state,ref:o=>this.details=o},r("summary",{key:"448587e8102df440a0d633702ea4af8cfe1d9da3",id:this.buttonid,class:"pn-accordion-row-summary",onClick:o=>this.clickHandler(o),ref:o=>this.summary=o},r("div",{key:"bef1fa9595b890919445a6631742c03fd7e18f3f",class:"pn-accordion-row-text","data-transparent":this.transparent},this.label?this.label:"",r("slot",{key:"30742c10f2f557f39f80e97ec3e1c5473400d128",name:"label"}),r("pn-icon",{key:"cfde3e68aab8348a0773c7aa41e02bb905a47e07",class:"pn-accordion-row-icon",icon:a}))),r("div",{key:"054aae1bcf9fb3bf9a050c9fdf7cefef38f164d0",id:this.contentid,class:"pn-accordion-row-content",ref:o=>this.content=o},r("slot",{key:"69378af205ca6c4c159c718f497a2ecf319be959"}))))}static get style(){return`${o("pn-accordion-row")}{position:relative;margin:0 -0.25em 0}${o("pn-accordion-row")} .pn-accordion-row{width:100%;display:flex;flex-direction:column}${o("pn-accordion-row")} .pn-accordion-row-summary{color:#2d2013;position:relative;border:none;outline:0;cursor:pointer;-webkit-tap-highlight-color:transparent;width:100%;padding:0.25em;font-size:1em;font-weight:400;border-radius:0.5em;list-style:none}${o("pn-accordion-row")} .pn-accordion-row-summary:hover>.pn-accordion-row-text{background-color:#e0f8ff}${o("pn-accordion-row")} .pn-accordion-row-summary:focus-visible>.pn-accordion-row-text{outline-color:#005d92}${o("pn-accordion-row")} .pn-accordion-row-summary::-webkit-details-marker{display:none}${o("pn-accordion-row")} .pn-accordion-row-text{position:relative;overflow:hidden;display:flex;align-items:center;padding:0.75em;background-color:#ffffff;border-radius:0.5em;-webkit-tap-highlight-color:transparent}${o("pn-accordion-row")} .pn-accordion-row-text[data-transparent]{background-color:transparent}${o("pn-accordion-row")} .pn-accordion-row-text{outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${o("pn-accordion-row")} .pn-accordion-row-text{transition-duration:0s;transition-delay:0s}}${o("pn-accordion-row")} .pn-accordion-row-text .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${o("pn-accordion-row")} .pn-accordion-row-icon{margin-left:auto;flex-shrink:0;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${o("pn-accordion-row")} .pn-accordion-row-icon{transition-duration:0s;transition-delay:0s}}${o("pn-accordion-row")} .pn-accordion-row-icon path{fill:#005d92}${o("pn-accordion-row")} .pn-accordion-row[open] .pn-accordion-row-icon{transform:rotate(-180deg)}${o("pn-accordion-row")} .pn-accordion-row-content{color:#2d2013;display:block;padding:1em}`}},[772,"pn-accordion-row",{label:[1025],state:[1028],buttonid:[1],contentid:[1],transparent:[4],isClosing:[32],isExpanding:[32]},[[0,"rowstate","handleRowState"]]]),l=p,h=function(){"undefined"!=typeof customElements&&["pn-accordion-row","pn-icon"].forEach((i=>{switch(i){case"pn-accordion-row":customElements.get(o(o(i)))||customElements.define(o(o(i)),p);break;case"pn-icon":customElements.get(o(o(i)))||d()}}))};export{l as PnAccordionRow,h as defineCustomElement}