https://100thieves.com/cdn/shop/t/725/assets/component-details-disclosure.js?v=120581979038368070001776706983

1import{LitElement,css,html,ref,createRef}from"@hh/global.js";class HHDetailsDisclosure extends LitElement{static properties={open:{type:Boolean,attribute:"is-open",reflect:!0},animate:{type:Boolean,reflect:!0},preventFocusOut:{type:Boolean,attribute:"prevent-focus-out",reflect:!0}};$container=createRef();$summary=createRef();$details=createRef();constructor(){super(),this.animation=null,this.animationOpts={duration:200,easing:"ease-in-out"}}toggle(e=!1,value=void 0){if(e.type==="keyup"&&e.code.toUpperCase()!=="ENTER")return!0;e&&e.preventDefault(),this.open=typeof value>"u"?!this.open:value,this.animate&&(this.$container.value.style.height=`${this.$container.value.offsetHeight}px`,window.requestAnimationFrame(()=>this.toggleAnimation()))}toggleAnimation(){const startHeight=`${this.$container.value.offsetHeight}px`,endHeight=`${this.$summary.value.offsetHeight+(this.open?this.$details.value.offsetHeight:0)}px`;this.animation&&this.animation.cancel(),this.animation=this.$container.value.animate({height:[startHeight,endHeight]},this.animationOpts),this.animation.onfinish=()=>this.onAnimationFinish()}onAnimationFinish(){this.animation=null,this.$container.value.style.height=""}closeWithEscape(event){event.code.toUpperCase()!=="ESCAPE"||!event.target.closest("details[open]")||(this.$container.value.removeAttribute("open"),this.$summary.value.focus())}onFocusOut(){this.preventFocusOut||setTimeout(()=>{this.contains(document.activeElement)||this.toggle(!1,!1)})}onToggle(e){this.toggle(e,e.target.open)}render(){return html` <!-- @ts-ignore no-incompatible-type-binding -->
2      <details
3        ?open="${this.open}"
4        @focusout="${this.onFocusOut}"
5        @toggle="${this.onToggle}"
6        ${ref(this.$container)}
7      >
8        <summary
9          @keyup="${this.toggle}"
10          aria-expanded="${this.open}"
11          aria-controls="details-content"
12          role="button"
13          id="summary"
14          ${ref(this.$summary)}
15        >
16          <slot @click="${this.toggle}" name="summary" tabindex="-1"></slot>
17          <slot name="icon-open"></slot>
18          <slot name="icon-close"></slot>
19        </summary>
20        <div
21          id="details-content"
22          aria-labelledby="summary"
23          ${ref(this.$details)}
24        >
25          <slot name="details" @keyup="${this.closeWithEscape}"></slot>
26        </div>
27      </details>`}static styles=css`
28    /*
29      Start fix for miscalculated height
30      Due to margins in slotted content
31    */
32
33    #summary,
34    #details-content {
35      display: flex;
36      flex-wrap: wrap;
37    }
38
39    ::slotted(*) {
40      flex-basis: 100%;
41    }
42
43    /* End fix */
44
45    details {
46      overflow: hidden;
47    }
48
49    #summary {
50      position: relative;
51      list-style-type: none;
52      cursor: pointer;
53    }
54
55    ::slotted([slot='icon-open']),
56    ::slotted([slot='icon-close']) {
57      content: '';
58      position: absolute;
59      top: 50%;
60      right: 0;
61      transform: translateY(-50%);
62      width: 1.4rem;
63      height: 1.4rem;
64      background-color: transparent;
65    }
66
67    :host([is-open]) ::slotted([slot='icon-open']),
68    ::slotted([slot='icon-close']) {
69      display: none;
70    }
71
72    :host([is-open]) ::slotted([slot='icon-close']),
73    ::slotted([slot='icon-open']) {
74      display: block;
75    }
76
77    #summary::-webkit-details-marker {
78      display: none;
79    }
80  `}customElements.define("hh-details-disclosure",HHDetailsDisclosure);
81//# sourceMappingURL=/cdn/shop/t/725/assets/component-details-disclosure.js.map?v=120581979038368070001776706983