@postnord/web-components/postnord-web-components/p-203ad7de.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as o,c as i,g as t,h as n,a as r}from"./p-43660913.js";import{a as e}from"./p-bf967b50.js";import{o as s,r as a}from"./p-f64d17a6.js";const c="pn-accordion-row{position:relative;margin:0 -0.25em 0}pn-accordion-row .pn-accordion-row{width:100%;display:flex;flex-direction:column}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}pn-accordion-row .pn-accordion-row-summary:hover>.pn-accordion-row-text{background-color:#e0f8ff}pn-accordion-row .pn-accordion-row-summary:focus-visible>.pn-accordion-row-text{outline-color:#005d92}pn-accordion-row .pn-accordion-row-summary::-webkit-details-marker{display:none}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;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)}pn-accordion-row .pn-accordion-row-text[data-transparent]{background-color:transparent}@media (prefers-reduced-motion: reduce){pn-accordion-row .pn-accordion-row-text{transition-duration:0s;transition-delay:0s}}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}}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){pn-accordion-row .pn-accordion-row-icon{transition-duration:0s;transition-delay:0s}}pn-accordion-row .pn-accordion-row-icon path{fill:#005d92}pn-accordion-row .pn-accordion-row[open] .pn-accordion-row-icon{transform:rotate(-180deg)}pn-accordion-row .pn-accordion-row-content{color:#2d2013;display:block;padding:1em}";const d=c;const h=class{constructor(t){o(this,t);this.togglerow=i(this,"togglerow",7);this.isClosing=false;this.isExpanding=false;this.label=undefined;this.state=false;this.buttonid=undefined;this.contentid=undefined;this.transparent=false}details;summary;content;animation;defaultAnimationDuration=400;animationDuration=this.defaultAnimationDuration;get hostElement(){return t(this)}togglerow;handleRowState(o){if(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;if(this.state!==o)this.togglerow.emit({element:this.details,state:i});this.state=i}clickHandler(o){o.preventDefault();this.details.style.overflow="hidden";if(this.isClosing||!this.state)this.openAccordion();else if(this.isClosing||this.state)this.closeAccordion();const{x:i,width:t,y:n,top:r}=this.hostElement.getBoundingClientRect();const e=o.clientX===0&&o.clientY===0?{clientX:i+t-24,clientY:n-r}:o;s(e,this.hostElement,".pn-accordion-row-text")}openAccordion(){this.details.style.height=`${this.details.offsetHeight}px`;this.toggleOpen(true);requestAnimationFrame((()=>{this.isExpanding=true;const o=`${this.details.offsetHeight}px`;const i=`${this.summary.offsetHeight+this.content.offsetHeight}px`;this.cancelAnimations();this.animate(true,o,i)}))}closeAccordion(){this.isClosing=true;const o=`${this.details.offsetHeight}px`;const i=`${this.summary.offsetHeight}px`;this.cancelAnimations();this.animate(false,o,i)}animate(o,i,t){if(a())this.animationDuration=0;else this.animationDuration=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=()=>{if(o)this.isExpanding=false;else this.isClosing=false}}animationFinish(o){this.toggleOpen(o);this.cancelAnimations();this.isClosing=false;this.isExpanding=false;this.details.style.height="";this.details.style.overflow=""}cancelAnimations(){if(this.animation)this.animation.cancel()}render(){return n(r,{key:"9f3142a471217bc0656c4d5641c420262a913c13"},n("details",{key:"c742d23b97fe2d489166f18f53b3e5f0d12107d8",class:"pn-accordion-row",open:this.state,ref:o=>this.details=o},n("summary",{key:"d061093bf3bb58150d4bbb102caf9da3e9559fb8",id:this.buttonid,class:"pn-accordion-row-summary",onClick:o=>this.clickHandler(o),ref:o=>this.summary=o},n("div",{key:"921e67cc639e701df60a7bc359d3415ccdec39e3",class:"pn-accordion-row-text","data-transparent":this.transparent},this.label?this.label:"",n("slot",{key:"e355acdeeb2e62e4056837b26f808d3e5663343e",name:"label"}),n("pn-icon",{key:"c10681330981f5d019db4d6f7f6cd03d3c67234b",class:"pn-accordion-row-icon",icon:e}))),n("div",{key:"ddb95ef323966c0c55292dde2b5776e0700bf27a",id:this.contentid,class:"pn-accordion-row-content",ref:o=>this.content=o},n("slot",{key:"e0ded60210d472842a8aa5cd87a6374ad7120e58"}))))}};h.style=d;export{h as pn_accordion_row};
//# sourceMappingURL=p-203ad7de.entry.js.map