https://100thieves.com/cdn/shop/t/725/assets/component-size-guide.js?v=114902522837232528521776706983

1import{LitElement,html,css,utils}from"@hh/global.js";const{stringToHTML}=utils;class HHSizeGuide extends LitElement{static properties={_table:{state:!0},_tableTitle:{state:!0}};constructor(){super(),this._table=null,this._tableTitle=null}connectedCallback(){super.connectedCallback(),this.observer=new MutationObserver((mutationList,observer)=>{for(const{addedNodes}of mutationList){const sizeGuideContainer=[...addedNodes].find(node=>node.classList.contains("esc-size-guide"));this._tableTitle=sizeGuideContainer?.querySelector(".esc-size-guide--title").innerHTML,this._table=sizeGuideContainer?.querySelector("table")}}).observe(this,{childList:!0,subtree:!0})}updated(){this._table&&(this.dispatchEvent(new CustomEvent("sizeGuideLoaded",{bubbles:!0,composed:!0,detail:{loaded:!0}})),this.observer?.disconnect())}disconnectedCallback(){super.disconnectedCallback(),this.observer.disconnect()}getTableTitle(){return this._tableTitle}getTableMarkup(){return stringToHTML(this._table.outerHTML)}render(){return this._table?html`
2      <hh-modal
3        id="size-guide"
4        overlay
5        scroll-lock
6        ignore-touch-scroll-lock
7        size="flyout"
8      >
9        <span class="h6 size-guide__close" slot="close">Close</span>
10
11        <div class="size-guide">
12          <slot name="title"></slot>
13          <slot name="image"></slot>
14
15          <div class="size-guide__inner">
16            <h6 class="size-guide__title">${this.getTableTitle()}</h6>
17            <div class="size-guide__table">${this.getTableMarkup()}</div>
18          </div>
19        </div>
20      </hh-modal>
21    `:html`<slot style="display: none;></slot>`}static styles=css`
22    *,
23    *::before,
24    *::after {
25      box-sizing: border-box;
26    }
27
28    hh-modal {
29      --hh-padding: 3rem 1rem 1rem;
30      --hh-background: var(--hh-color-day);
31      --hh-border-color: var(--hh-color-neutral);
32      --hh-max-width: 100%;
33      --hh-flyout-offset: 0;
34      --hh-flyout-height: 100%;
35      --hh-close-top: 3rem;
36      --hh-close-right: 1rem;
37    }
38
39    h6,
40    .h6,
41    .size-guide__table tr:first-child td:not(:first-child) {
42      font: var(--hh-h6-font);
43      text-transform: var(--hh-h6-text-transform);
44      letter-spacing: var(--hh-h6-letter-spacing);
45    }
46
47    .size-guide__table {
48      width: 100vw;
49      margin-left: -1rem;
50      padding: 0 1rem;
51      overflow-x: auto;
52      touch-action: pan-x;
53      overscroll-behavior: contain;
54    }
55
56    .size-guide__table table {
57      width: 100%;
58      border-collapse: collapse;
59    }
60
61    .size-guide__table tr:first-child td:first-child {
62      color: var(--hh-color-subdued, #666);
63    }
64
65    .size-guide__table td {
66      border: 0.1rem solid var(--hh-color-night, #000);
67      padding: 1rem;
68    }
69
70    .size-guide__table td:not(:first-child) {
71      min-width: 6rem;
72      text-align: center;
73    }
74
75    .size-guide__title {
76      margin-top: 0;
77      margin-bottom: 1.6rem;
78    }
79
80    .size-guide__close {
81      background-color: var(--hh-color-day);
82      padding: 1rem;
83    }
84
85    ::slotted([slot='title']) {
86      width: 100%;
87      margin: 0 0 2.4rem;
88    }
89
90    ::slotted([slot='image']) {
91      margin: 2.4rem 0 3.2rem;
92    }
93
94    @media screen and (min-width: 750px) {
95      hh-modal {
96        --hh-max-width: 96rem;
97        --hh-flyout-height: auto;
98        --hh-padding: 2rem;
99        --hh-flyout-offset-top: 12rem;
100        --hh-flyout-offset-right: 50%;
101        --hh-flyout-transform: translateX(50%);
102        --hh-close-top: 2rem;
103        --hh-close-right: 2rem;
104      }
105
106      .size-guide {
107        display: flex;
108        align-items: flex-end;
109        flex-wrap: wrap;
110      }
111
112      .size-guide__inner {
113        flex: 0 0 68%;
114        max-width: 68%;
115      }
116
117      .size-guide__table {
118        width: 100%;
119        margin-left: 0;
120        padding: 0;
121      }
122
123      ::slotted([slot='image']) {
124        margin: 0;
125        padding-right: 2.4rem;
126        flex: 0 0 32%;
127        max-width: 32%;
128      }
129    }
130  `}customElements.define("hh-size-guide",HHSizeGuide);
131//# sourceMappingURL=/cdn/shop/t/725/assets/component-size-guide.js.map?v=114902522837232528521776706983