@postnord/web-components/postnord-web-components/p-5f2994df.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{r as s}from"./p-c511b4fb.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}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)}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 a=c;const d=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;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);window.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){this.animation=this.details.animate({height:[i,t]},{duration:400,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:"ecbddc7a206d174ffaa74ce496442ce06ce1366e"},n("details",{key:"3eb50627c300e21884113368dfae02084c9cda5a",class:"pn-accordion-row",open:this.state,ref:o=>this.details=o},n("summary",{key:"952bd7d0d346c153b7031991d1f3ab43c87b6ac1",id:this.buttonid,class:"pn-accordion-row-summary",onClick:o=>this.clickHandler(o),ref:o=>this.summary=o},n("div",{key:"7d8922b5c71b5eb78d6b0813576650171797a303",class:"pn-accordion-row-text","data-transparent":this.transparent},this.label?this.label:"",n("slot",{key:"c23bad6c33b660e5553c7b9f6d1677a3223742cb",name:"label"}),n("pn-icon",{key:"374b09b90afd9ad2d836ecf480dd00317519a7e9",class:"pn-accordion-row-icon",icon:e}))),n("div",{key:"06f253b1c9ca0488f3cd674f35c0eea6bd28c1da",id:this.contentid,class:"pn-accordion-row-content",ref:o=>this.content=o},n("slot",{key:"2cb8a8fdc7aab0f7009df63ec0e7eb0f9273dc1e"}))))}};d.style=a;export{d as pn_accordion_row};
//# sourceMappingURL=p-5f2994df.entry.js.map