@postnord/web-components/postnord-web-components/p-518651ad.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{t as o,r as i,c as t,g as n,h as r,a}from"./p-XKg-ydzH.js";import{c as e}from"./p-DrYFvs2M.js";import{ripple as c,reduceMotion as s}from"./index.esm.js";const d=class{constructor(o){i(this,o),this.togglerow=t(this,"togglerow",7)}details;summary;content;animation;defaultAnimationDuration=400;animationDuration=this.defaultAnimationDuration;get hostElement(){return n(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:t,y:n,top:r}=this.hostElement.getBoundingClientRect();c(0===o.clientX&&0===o.clientY?{clientX:i+t-24,clientY:n-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,t){this.animationDuration=s()?0:this.defaultAnimationDuration,this.animation=this.details.animate({height:[i,t]},{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(a,{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:e}))),r("div",{key:"054aae1bcf9fb3bf9a050c9fdf7cefef38f164d0",id:this.contentid,class:"pn-accordion-row-content",ref:o=>this.content=o},r("slot",{key:"69378af205ca6c4c159c718f497a2ecf319be959"}))))}};d.style=`${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}`;export{d as pn_accordion_row}