https://www.siniat.co.uk/etex/js/assets/js/6206.f0a624983cbcf98e8082.mjs

1"use strict";(self.webpackChunkwebpack=self.webpackChunkwebpack||[]).push([[6206],{6206:function(e,t,s){s.r(t),s.d(t,{Collapse:function(){return o}});var i=s(68687),n=s(43322),l=s(41181),a=s(91759),r=s(77905);class o extends i.oi{static get properties(){return{open:{type:Boolean,attribute:"open"},closeOn:{type:String,attribute:"close-on"},moreLabel:{type:String,attribute:"label-more"},lessLabel:{type:String,attribute:"label-less"},size:{type:String},numberOfLines:{type:Number,attribute:"number-of-lines"},hasMore:{type:Boolean,attribute:!1},expanded:{type:Boolean,attribute:!1},slotPanelStyle:{type:String,attribute:!1},amount:{type:Number,attribute:!1},showAmount:{type:Boolean,attribute:"show-amount"},showAmountRight:{type:Boolean,attribute:"show-amount-right"},renderPartialSkeleton:{type:Boolean,attribute:"render-partial-skeleton",reflect:!0}}}constructor(){super(),this.resizeObserver=new ResizeObserver(this._HandleReadMore.bind(this)),this.id=(0,r.y)(),this.expanded=!1,this.amount=0}render(){return i.dy`
2            <details part="details" ?open="${this.open}" ?style="${this.slotPanelStyle}">
3                <summary part="summary">
4                    <slot name="summary"></slot>
5                    ${this.showAmount||this.showAmountRight?i.dy`<div slot="amount">
6                              <span
7                                  class="wc-collapse__amount${this.amount&&0!=this.amount?"":" u-hide"}"
8                              >
9                                  ${this.amount&&this.amount>0?i.dy`(${this.amount||0})`:""}
10                              </span>
11                          </div>`:i.Ld}
12                    ${(0,n.aT)(l.aX.ArrowDown,`wc-collapse__icon${this.iconSize}`)}
13                </summary>
14
15                <div class="wc-collapse__panel">
16                    ${this.renderPartialSkeleton?i.dy`<ul class="o-flex o-flex--column u-gap-2 u-mbs-2">
17                              <li class="o-skel__item">&nbsp;</li>
18                              <li class="o-skel__item">&nbsp;</li>
19                              <li class="o-skel__item">&nbsp;</li>
20                          </ul>`:i.Ld}
21                    <slot name="panel" ?tabindex="${this.open?"":"-1"}"  id="collapse${this.id}"></slot>
22                    ${this.numberOfLines&&this.numberOfLines>0&&this.hasMore||this.eventTrigger?i.dy`
23                              <button
24                                  type="button"
25                                  aria-expanded="${this.expanded}"
26                                  aria-controls="collapse${this.id}"
27                                  class="a-link a-link--primary a-link--small wc-collapse__more"
28                                  @click=${()=>this._ToggleReadMore()}
29                              >
30                                  ${(0,n.aT)(l.aX.ArrowDown,"a-link__icon")}
31                                  <span class="a-link__text"
32                                      >${this.expanded?this.lessLabel:this.moreLabel}</span
33                                  >
34                              </button>
35                          `:i.Ld}
36                </div>
37            </details>
38        `}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.panel=this.querySelector('[slot="panel"]'),this.summary=this.querySelector('[slot="summary"]'),this.isList="UL"==this.panel?.firstElementChild?.tagName,this.listItems=this.panel?.firstElementChild?.querySelectorAll("li"),this.slotPanelClassName=i.Ld,this.slotPanelStyle=i.Ld,this.isList||this.resizeObserver.observe(this),this.iconSize={medium:" u-icon-small",large:" u-icon-normal",micro:" u-icon-micro"}[this.size]||" u-icon-tiny",this.addEventListener("wc-filter-helper-updated",(e=>{this.amount=e.detail.selectedValues.length})),this.addEventListener("wc-filter-helper-updated-external",(e=>{this.amount=e.detail.amount}))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.unobserve(this)}firstUpdated(){this._UpdateRoot();const e=this.querySelector("details"),t=this.querySelector('[name="panel"]');new MutationObserver((e=>{for(let s of e){""===s.target.getAttribute("open")?t.removeAttribute("tabindex"):t.setAttribute("tabindex","-1")}}

38)).observe(e,{attributes:!0})}_UpdateRoot(){if(this.summary){this.renderRoot.querySelector('slot[name="summary"]').prepend(this.summary);const e=this.querySelector('[slot="amount"]'),t=this.querySelector('slot[name="amount"]');e&&t.insertAdjacentElement("afterbegin",e)}if(this.panel){this.renderRoot.querySelector('slot[name="panel"]').prepend(this.panel)}this.numberOfLines&&0!=this.numberOfLines&&this._CalculateLines()}_CalculateLines(){this.isList?(this._ToggleListItems(),this.hasMore=this.listItems&&this.listItems.length>this.numberOfLines):((this.numberOfLines||this.numberOfLines>0)&&this._SetTextStyling(!0),this.hasMore=this.panel.scrollHeight>this.panel.clientHeight)}_HandleReadMore(e){let t=0;for(const s of e){const{width:e,height:i}=s.contentRect;"number"==typeof e&&e!==t&&(this.hasMore=this.panel.scrollHeight>this.panel.clientHeight,t=e)}(0,a.MG)(this.closeOn)||(this.open=(0,n.WM)(this.closeOn))}_ToggleListItems(){for(let e=this.numberOfLines;e<this.listItems.length;e++){let t=this.listItems[e].querySelector("input");this.listItems[e].setAttribute("aria-hidden",!this.expanded),t&&t.toggleAttribute("disabled",!this.expanded)}}_SetTextStyling(e){const t=this.querySelector('[slot="panel"]');e?t.classList.add("u-truncate-multi"):t.classList.remove("u-truncate-multi"),this.slotPanelStyle=e?`--truncate-multi : ${this.numberOfLines};`:i.Ld}_ToggleReadMore(){this.expanded=!this.expanded,this.isList?this._ToggleListItems():(this.eventTrigger=!0,this._SetTextStyling(!this.expanded)),this.panel.focus()}}customElements.define("wc-collapse",o)}}]);