@postnord/web-components/postnord-web-components/p-d1891924.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as o,g as i,f as t,h as n,a as e,c as r}from"./p-c2c6299e.js";import{a as s}from"./p-bf967b50.js";import{r as c}from"./p-c511b4fb.js";const a='pn-accordion{position:relative;background-color:#ffffff;display:flex;align-items:stretch;flex-direction:column;gap:0.25em}pn-accordion>pn-accordion-row+pn-accordion-row:after{content:"";position:absolute;top:-0.125em;left:0.25em;width:calc(100% - 0.5em);height:0;border-top:0.0625em solid #d3cecb}';const d=a;const l=class{constructor(i){o(this,i)}mo;closeEvent=new CustomEvent("rowstate",{detail:false});get hostElement(){return i(this)}single=false;connectedCallback(){this.mo=new MutationObserver((()=>t(this.hostElement)));this.mo.observe(this.hostElement,{childList:true,subtree:true})}disconnectedCallback(){this.mo.disconnect()}handleSingleRow({detail:o}){if(!this.single)return;const i=o.element;const t=i.closest("pn-accordion-row");const n=Array.from(this.hostElement.querySelectorAll("pn-accordion-row"));n.forEach((o=>!o.isSameNode(t)&&o.dispatchEvent(this.closeEvent)))}render(){return n(e,{key:"800bf9af052f84af2f2fa3ec4e2351e8fd54da89"},n("slot",{key:"53c8eac1eda11eda881f50b37476f3600ea3897b"}))}};l.style=d;const h="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 .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 p=h;const f=class{constructor(i){o(this,i);this.togglerow=r(this,"togglerow",7)}details;summary;content;animation;get hostElement(){return i(this)}isClosing=false;isExpanding=false;label;state=false;buttonid;contentid;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:e}=this.hostElement.getBoundingClientRect();const r=o.clientX===0&&o.clientY===0?{clientX:i+t-24,clientY:n-e}:o;c(r,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(e,{key:"e98e506637a1303e493b529928435dceb965bc35"},n("details",{key:"34fec5b0c944442f48e8c6d23ef7756366906023",class:"pn-accordion-row",open:this.state,ref:o=>this.details=o},n("summary",{key:"9f2359b4aa9c3e894a5b436968e1783ac3361c65",id:this.buttonid,class:"pn-accordion-row-summary",onClick:o=>this.clickHandler(o),ref:o=>this.summary=o},n("div",{key:"261f053b904d2f6f50ea90a610176829cfc2bf89",class:"pn-accordion-row-text"},this.label?this.label:"",n("slot",{key:"ba20d07bfa5af6b771b98b407b7688b65339f341",name:"label"}),n("pn-icon",{key:"fea80322eb33a895fc5fce7a9245de98e9f28e2a",class:"pn-accordion-row-icon",icon:s}))),n("div",{key:"f3bf848e95eb68e3bcb268f3a35924709df0823e",id:this.contentid,class:"pn-accordion-row-content",ref:o=>this.content=o},n("slot",{key:"d7c939e3ca67e430906c655b347c08c236f528fa"}))))}};f.style=p;export{l as pn_accordion,f as pn_accordion_row};
//# sourceMappingURL=p-d1891924.entry.js.map