1import{r as h,a as p,n as d,c as f,b as g,L as b,x as v,e as u}from"./main-DdEGjCiE.js";import{e as m}from"./query-D1pSaKds.js";import{o as y}from"./if-defined-DIE9v4-k.js";import{q as _}from"./query-shadow-root-DVN9YziJ.js";import{S as x}from"./slot-WngKKW0W.js";const w=`/*------------------------------------*\\ 2 #RESET 3\\*------------------------------------*/ 4/** 5 * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/ 6 */ 7*, 8::slotted(*), 9*:before, 10*:after { 11 box-sizing: border-box; 12} 13 14:host *, 15:host *::before, 16:host *::after { 17 box-sizing: inherit; 18} 19 20[hidden] { 21 display: none !important; 22} 23 24/*------------------------------------*\\ 25 #ACCORDION-PANEL 26\\*------------------------------------*/ 27:host { 28 border-top: calc(var(--leaf-spacing-2) / 2) solid var(--leaf-color-border-brand-subtle); 29 border-radius: 0; 30 display: block; 31 font-family: var(--leaf-typography-body-default-font-family); 32} 33:host slot:not([name]) { 34 display: inline-block; 35 width: 100%; 36} 37 38.leaf-c-accordion-panel { 39 padding: var(--leaf-spacing-24) 0; 40} 41 42.leaf-c-accordion-panel__body { 43 margin: 0; 44 padding: 0; 45 overflow: hidden; 46 visibility: hidden; 47 transition: height var(--leafdcws-anim-fade-quick) var(--leafdcws-anim-ease), visibility var(--leafdcws-anim-fade-quick) var(--leafdcws-anim-ease); 48} 49.leaf-c-accordion-panel.leaf-is-active .leaf-c-accordion-panel__body { 50 visibility: visible; 51} 52 53.leaf-c-accordion-panel__body-inner { 54 display: flex; 55 font-size: var(--leaf-typography-label-default-font-size); 56 padding: var(--leaf-spacing-8) var(--leaf-spacing-48) 0 var(--leaf-spacing-8); 57} 58 59leaf-icon { 60 height: var(--leaf-spacing-24); 61 min-height: var(--leaf-spacing-24); 62 min-width: var(--leaf-spacing-24); 63 transition: transform var(--leafdcws-anim-fade-quick) var(--leafdcws-anim-ease); 64 width: var(--leaf-spacing-24); 65} 66.leaf-c-accordion-panel.leaf-is-active leaf-icon { 67 transform: rotate(180deg); 68} 69 70.leaf-c-accordion-panel__icon { 71 align-items: center; 72 background: var(--leaf-color-bg-brand-strong); 73 border-radius: var(--leaf-border-radius-round); 74 color: var(--leaf-color-content-knockout); 75 display: flex; 76 height: var(--leaf-spacing-32); 77 justify-content: center; 78 margin-left: var(--leaf-spacing-8); 79 margin-right: var(--leaf-spacing-2); 80 min-height: var(--leaf-spacing-32); 81 min-width: var(--leaf-spacing-32); 82 width: var(--leaf-spacing-32); 83} 84.leaf-c-accordion-panel.leaf-is-active .leaf-c-accordion-panel__icon { 85 background: var(--leaf-color-bg-opacity-transparentt); 86 border: calc(var(--leaf-spacing-2) / 2) solid var(--leaf-color-border-brand); 87 color: var(--leaf-color-content-brand); 88} 89.leaf-c-accordion-panel.leaf-is-active .leaf-c-accordion-panel__icon:hover { 90 border-color: var(--leaf-color-border-brand-strong); 91 background-color: var(--leaf-color-bg-brand-strong-hover); 92 color: var(--leaf-color-content-knockout); 93} 94 95.leaf-c-accordion-panel__button { 96 color: var(--leaf-color-content-brand-strong); 97 display: flex; 98 align-items: center; 99 -webkit-appearance: none; 100 -moz-appearance: none; 101 appearance: none; 102 background-color: var(--leaf-color-bg-opacity-transparent); 103 border: none; 104 cursor: pointer; 105 justify-content: space-between; 106 margin: auto; 107 padding: var(--leaf-spacing-4) var(--leaf-spacing-8); 108 overflow-x: hidden; 109 transition: color var(--leafdcws-anim-fade-quick) var(--leafdcws-anim-ease); 110 width: calc(100% - var(--leaf-spacing-4)); 111} 112.leaf-c-accordion-panel__button, 113.leaf-c-accordion-panel__button ::slotted([slot=header]) { 114 font-size: var(--leaf-font-size-5) !important; 115} 116@media (max-width: 47.999rem) { 117 .leaf-c-accordion-panel__button, 118 .leaf-c-accordion-panel__button ::slotted([slot=header]) { 119 font-size: var(--leaf-font-size-4) !important; 120 } 121} 122.leaf-c-accordion-panel__button ::slotted([slot=header]) { 123 display: block; 124 font-family: var(--leaf-typography-body-default-font-family) !important; 125 margin: 0; 126 pointer-events: none; 127} 128.leaf-c-accordion-panel__button ::slotted([slot=subheader]) { 129 font-family: var(--leaf-typography-body-default-font-family); 130 font-size: var(--leaf-typography-body-default-font-size);
131 font-weight: var(--leaf-typography-body-default-font-weight); 132 line-height: var(--leaf-typography-body-default-line-height); 133 -webkit-text-decoration: var(--leaf-typography-body-default-text-decoration); 134 text-decoration: var(--leaf-typography-body-default-text-decoration); 135 text-transform: var(--leaf-typography-body-default-text-transform); 136 margin-block-start: var(--leaf-spacing-8) !important; 137} 138.leaf-c-accordion-panel__button:hover .leaf-c-accordion-panel__icon { 139 border-color: var(--leaf-color-border-brand-strong); 140 background-color: var(--leaf-color-bg-brand-strong-hover); 141 color: var(--leaf-color-content-knockout); 142} 143.leaf-c-accordion-panel__button:focus { 144 border-radius: var(--leaf-spacing-32); 145 box-shadow: 0 0 0 var(--leaf-spacing-2) var(--leaf-color-border-active-outline); 146 outline: none; 147} 148@media (min-width: 23.4375rem) { 149 .leaf-c-accordion-panel__button:focus { 150 border-radius: var(--leaf-border-radius-round); 151 } 152} 153.leaf-c-accordion-panel__button:focus .leaf-c-accordion-panel__icon { 154 border-color: var(--leaf-color-border-brand-strong); 155 color: var(--leaf-color-content-knockout); 156 background-color: var(--leaf-color-bg-brand-strong-hover); 157} 158 159.leaf-c-accordion-panel__button slot { 160 display: contents; 161 text-align: initial; 162} 163 164.leaf-c-accordion-panel__large .leaf-c-accordion-panel__button ::slotted([slot=header]), .leaf-c-accordion-panel__large .leaf-c-accordion-panel__button { 165 font-family: var(--leaf-typography-headline-small-mobile-font-family) !important; 166 font-size: var(--leaf-typography-headline-small-mobile-font-size) !important; 167 font-weight: var(--leaf-typography-headline-small-mobile-font-weight) !important; 168 line-height: var(--leaf-typography-headline-small-mobile-line-height) !important; 169 -webkit-text-decoration: var(--leaf-typography-headline-small-mobile-text-decoration) !important; 170 text-decoration: var(--leaf-typography-headline-small-mobile-text-decoration) !important; 171 text-transform: var(--leaf-typography-headline-small-mobile-text-transform) !important; 172} 173@media (min-width: 48rem) { 174 .leaf-c-accordion-panel__large .leaf-c-accordion-panel__button ::slotted([slot=header]), .leaf-c-accordion-panel__large .leaf-c-accordion-panel__button { 175 font-family: var(--leaf-typography-headline-small-font-family) !important; 176 font-size: var(--leaf-typography-headline-small-font-size) !important; 177 font-weight: var(--leaf-typography-headline-small-font-weight) !important; 178 line-height: var(--leaf-typography-headline-small-line-height) !important; 179 -webkit-text-decoration: var(--leaf-typography-headline-small-text-decoration) !important; 180 text-decoration: var(--leaf-typography-headline-small-text-decoration) !important; 181 text-transform: var(--leaf-typography-headline-small-text-transform) !important; 182 } 183} 184.leaf-c-accordion-panel__large .leaf-c-accordion-panel__button:focus { 185 border-radius: var(--leaf-border-radius-default); 186} 187 188.leaf-c-accordion-panel__large .leaf-c-accordion-panel__body-inner { 189 padding: var(--leaf-spacing-16) var(--leaf-spacing-48) 0 var(--leaf-spacing-16); 190}`;var k=Object.defineProperty,o=(i,a,e,c)=>{for(var n=void 0,l=i.length-1,s;l>=0;l--)(s=i[l])&&(n=s(a,e,n)||n);return n&&k(a,e,n),n};const r=class extends g(b){constructor(){super(),this.slotController=new x(this),this.togglePanel=this.togglePanel.bind(this),this.setPanelHeight=this.setPanelHeight.bind(this)}get hasHash(){return location.hash===`#${this.id}`}get accordionHeaderText(){var a;return(a=this.querySelector('[slot="header"]'))==null?void 0:a.textContent}connectedCallback(){super.connectedCallback();const a=Math.floor(Math.random()*9e5)+1e5;this.id=this.id||`leaf-accordion-panel-${a}`,this.ariaLabelledBy=this.ariaLabelledBy||`leaf-accordion-panel-${a}`,this.isActive=this.isActive?this.isActive:this.hasHash,this.setPanelHeight(),this.isActive&&(this.fullyOpen=!0,this.setPanelHeight()),window.addEventListener("hashchange",()=>{(this.isActive&&!this.hasHash||!this.isActive&&this.hasHash)&&this.togglePanel()})}toggleFocusableElements(a){const e=a==="open"?0:-1;
190_(this).forEach(c=>c.tabIndex=e)}async setPanelHeight(){var a,e;await this.updateComplete,this.toggleFocusableElements(this.isActive?"open":""),this.isActive&&!this.fullyOpen||!this.isActive&&this.fullyOpen?this.height=((e=(a=this.shadowRoot)==null?void 0:a.querySelector(".leaf-c-accordion-panel__body-inner"))==null?void 0:e.scrollHeight)+"px":this.isActive&&this.fullyOpen?this.height="auto":!this.isActive&&!this.fullyOpen&&(this.height="0")}togglePanel(){this.isActive=!this.isActive,this.isActive?(this.setPanelHeight(),setTimeout(()=>{this.fullyOpen=!0,this.setPanelHeight()},350)):(this.setPanelHeight(),setTimeout(()=>{this.fullyOpen=!1,this.setPanelHeight()},50))}async updated(){await this.updateComplete,this.accordionHeaderText&&(this.accordionPanelButton.setAttribute("data-element-text",this.accordionHeaderText),this.setAttribute("data-element-text",this.accordionHeaderText))}render(){const a={"leaf-c-accordion-panel":!0,"leaf-c-accordion-panel__large":this.slotController.hasNamedSlot("subheader"),"leaf-is-active":this.isActive===!0};return v` 191 <div class="${u(a)}"> 192 <div class="leaf-c-accordion-panel__header"> 193 <button 194 class="leaf-c-accordion-panel__button ${this.isActive?"leaf-is-active":""}" 195 aria-expanded="${!!this.isActive}" 196 aria-controls="${this.id}-button" 197 part="button" 198 @click=${this.togglePanel} 199 > 200 <div> 201 <slot name="header" part="header"></slot> 202 <slot name="subheader" part="subheader"></slot> 203 </div> 204 <div class="leaf-c-accordion-panel__icon"> 205 <leaf-icon name="keyboard-arrow-more" part="icon"></leaf-icon> 206 </div> 207 </button> 208 </div> 209 <div 210 class="leaf-c-accordion-panel__body" 211 aria-labelledby="${y(this.ariaLabelledBy)}" 212 aria-hidden="${!this.isActive}" 213 id="${this.id}-button" 214 role="region" 215 part="body" 216 style=${"height: "+this.height} 217 > 218 <div class="leaf-c-accordion-panel__body-inner" part="body-inner"> 219 <slot></slot> 220 </div> 221 </div> 222 </div> 223 `}};r.styles=h(w);r.elementDefinitions={"leaf-icon":p};let t=r;o([d({type:Boolean,attribute:"is-active"})],t.prototype,"isActive");o([d({attribute:"aria-labelledby"})],t.prototype,"ariaLabelledBy");o([f()],t.prototype,"height");o([f()],t.prototype,"fullyOpen");o([m(".leaf-c-accordion-panel__button")],t.prototype,"accordionPanelButton");customElements.define("leaf-accordion-panel",t);export{t as LeafAccordionPanel}; 224//# sourceMappingURL=accordion-panel-Dqme6t0k.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.