1import { E as b, i as C, a as w, m as E, x as u, t as S } from "../performance-mixin-D7YmSeqN.mjs"; 2import { n as a } from "../property-S_Y9cb04.mjs"; 3import { f as g } from "../css-C8WrrxT-.mjs"; 4import { i as B, m as A } from "../element-internals-Dw7LndlH.mjs"; 5import { e as $, o as _, a as I } from "../icons-registry.mjs"; 6import { g as z } from "../svg-utils-DOL__czZ.mjs"; 7import { o as F } from "../unsafe-svg-BipL_msF.mjs"; 8import "./icon-button.mjs"; 9import { i as L, t as O, e as R } from "../directive-oAbCiebi.mjs"; 10import { f as T } from "../directive-helpers-BHuwIghp.mjs"; 11/** 12 * @license 13 * Copyright 2023 Google LLC 14 * SPDX-License-Identifier: Apache-2.0 15 */ 16function q(e) { 17 e.addInitializer((t) => { 18 const o = t; 19 o.addEventListener("click", async (n) => { 20 const { type: i, [B]: r } = o, { form: s } = r; 21 if (!(!s || i === "button") && (await new Promise((h) => { 22 setTimeout(h); 23 }), !n.defaultPrevented)) { 24 if (i === "reset") { 25 s.reset(); 26 return; 27 } 28 s.addEventListener( 29 "submit", 30 (h) => { 31 Object.defineProperty(h, "submitter", { 32 configurable: !0, 33 enumerable: !0, 34 get: () => o 35 }); 36 }, 37 { capture: !0, once: !0 } 38 ), r.setFormValue(o.value), s.requestSubmit(); 39 } 40 }); 41 }); 42} 43/** 44 * @license 45 * Copyright 2017 Google LLC 46 * SPDX-License-Identifier: BSD-3-Clause 47 */ 48const v = (e, t) => { 49 var n; 50 const o = e._$AN; 51 if (o === void 0) return !1; 52 for (const i of o) (n = i._$AO) == null || n.call(i, t, !1), v(i, t); 53 return !0; 54}, y = (e) => { 55 let t, o; 56 do { 57 if ((t = e._$AM) === void 0) break; 58 o = t._$AN, o.delete(e), e = t; 59 } while ((o == null ? void 0 : o.size) === 0); 60}, D = (e) => { 61 for (let t; t = e._$AM; e = t) { 62 let o = t._$AN; 63 if (o === void 0) t._$AN = o = /* @__PURE__ */ new Set(); 64 else if (o.has(e)) break; 65 o.add(e), K(t); 66 } 67}; 68function H(e) { 69 this._$AN !== void 0 ? (y(this), this._$AM = e, D(this)) : this._$AM = e; 70} 71function M(e, t = !1, o = 0) { 72 const n = this._$AH, i = this._$AN; 73 if (i !== void 0 && i.size !== 0) if (t) if (Array.isArray(n)) for (let r = o; r < n.length; r++) v(n[r], !1), y(n[r]); 74 else n != null && (v(n, !1), y(n)); 75 else v(this, e); 76} 77const K = (e) => { 78 e.type == O.CHILD && (e._$AP ?? (e._$AP = M), e._$AQ ?? (e._$AQ = H)); 79}; 80class j extends L { 81 constructor() { 82 super(...arguments), this._$AN = void 0; 83 } 84 _$AT(t, o, n) { 85 super._$AT(t, o, n), D(this), this.isConnected = t._$AU; 86 } 87 _$AO(t, o = !0) { 88 var n, i; 89 t !== this.isConnected && (this.isConnected = t, t ? (n = this.reconnected) == null || n.call(this) : (i = this.disconnected) == null || i.call(this)), o && (v(this, t), y(this)); 90 } 91 setValue(t) { 92 if (T(this._$Ct)) this._$Ct._$AI(t, this); 93 else { 94 const o = [...this._$Ct._$AH]; 95 o[this._$Ci] = t, this._$Ct._$AI(o, this, 0); 96 } 97 } 98 disconnected() { 99 } 100 reconnected() { 101 } 102} 103class N extends j { 104 constructor() { 105 super(...arguments), this.prevData = {}; 106 } 107 render(t) { 108 return b; 109 } 110 update(t, [o]) { 111 var n; 112 this.element !== t.element && (this.element = t.element), this.host = ((n = t.options) === null || n === void 0 ? void 0 : n.host) || this.element, this.apply(o), this.groom(o), this.prevData = { ...o }; 113 } 114 apply(t) { 115 if (!t) 116 return; 117 const { prevData: o, element: n } = this; 118 for (const i in t) { 119 const r = t[i]; 120 r !== o[i] && (n[i] = r); 121 } 122 } 123 groom(t) { 124 const { prevData: o, element: n } = this; 125 if (o) 126 for (const i in o) 127 (!t || !(i in t) && n[i] === o[i]) && (n[i] = void 0); 128 } 129} 130class V extends N { 131 constructor() { 132 super(...arguments), this.eventData = {}; 133 } 134 apply(t) { 135 if (t) 136 for (const o in t) { 137 const n = t[o]; 138 n !== this.eventData[o] && this.applyEvent(o, n); 139 } 140 } 141 applyEvent(t, o) { 142 const { prevData: n, element: i } = this; 143 this.eventData[t] = o, n[t] && i.removeEventListener(t, this, o), i.addEventListener(t, this, o); 144 } 145 groom(t) { 146 const { prevData: o, element: n } = this; 147 if (o) 148 for (const i in o) 149 (!t || !(i in t) && n[i] === o[i]) && this.groomEvent(i, o[i]); 150 } 151 groomEvent(t, o) { 152 const { element: n } = this; 153 delete this.eventData[t], n.removeEventListener(t, this, o); 154 } 155 handleEvent(t) { 156 const o = this.eventData[t.type]; 157 typeof o == "function" ? o.call(this.host, t) : o.handleEvent(t); 158 } 159 disconnected() { 160 const { eventData: t, element: o } = this; 161 for (const n in t) { 162 const i = n.slice(1), r = t[n]; 163 o.removeEventListener(i, this, r); 164 } 165 } 166 reconnected() { 167 const { eventData: t, element: o } = this; 168 for (const n in t) { 169 const i = n.slice(1), r = t[n]; 170 o.addEventListener(i, this, r); 171 } 172 } 173} 174class X extends V { 175 apply(t) { 176 if (!t) 177 return; 178 const { prevData: o, element: n } = this; 179 for (const i in t) { 180 const r = t[i]; 181 if (r === o[i]) 182 continue; 183 const s = i.slice(1); 184 switch (i[0]) { 185 case "@": 186 this.eventData[s] = r, this.applyEvent(s, r); 187 break; 188 case ".": 189 n[s] = r; 190 break; 191 case "?": 192 r ? n.setAttribute(s, "") : n.removeAttribute(s); 193 break; 194 default: 195 r != null ? n.setAttribute(i, String(r)) : n.removeAttribute(i); 196 break; 197 } 198 } 199 } 200 groom(t) { 201 const { prevData: o, element: n } = this; 202 if (o) 203 for (const i in o) { 204 const r = i.slice(1); 205 if (!t || !(i in t) && n[r] === o[i]) 206 switch (i[0]) { 207 case "@": 208 this.groomEvent(r, o[i]); 209 break; 210 case ".": 211 n[r] = void 0; 212 break; 213 case "?": 214 n.removeAttribute(r); 215 break; 216 default: 217 n.removeAttribute(i); 218 break; 219 } 220 } 221 } 222} 223const k = R(X); 224var U = Object.defineProperty, W = Object.getOwnPropertyDescriptor, c = (e, t, o, n) => { 225 for (var i = n > 1 ? void 0 : n ? W(t, o) : t, r = e.length - 1, s; r >= 0; r--) 226 (s = e[r]) && (i = (n ? s(t, o, i) : s(i)) || i); 227 return n && i && U(t, o, i), i; 228};
229let l = class extends E(w) { 230 constructor() { 231 super(...arguments), this.open = !1, this.showHeader = !0, this.showFooter = !1, this.showHeaderStartIcon = !1, this.headerTitle = "", this.headerTitleClassName = "panel-title", this.labelDialog = "", this.labelAriaDialogPanel = "", this.addToBagProductCount = "", this.closeButtonLabel = "Close the modal", this.goBackButtonLabel = "Go back to", this.firstButtonLabel = "Close", this.firstButtonVariant = "primary", this.firstButtonProps = {}, this.onFirstButtonClickClose = !1, this.secondButtonLabel = "", this.secondButtonVariant = "secondary", this.secondButtonProps = {}, this.onSecondButtonClickClose = !1, this.stickyFooter = !1, this.disablePortal = !1, this.zIndex = 99, this.initialized = !1, this.showDetail = !1, this.isHidingDetail = !1, this.previousFocusedElement = null, this.previousFocusedSelector = null, this._hideTimeout = null, this._onOpenDetail = async (e) => { 232 var o, n; 233 const t = ((o = e.detail) == null ? void 0 : o.origin) ?? document.activeElement; 234 if (this._detailOriginEl = t, this._detailOriginClass = (t == null ? void 0 : t.className) ?? "", this.showDetail = !0, this.showHeaderStartIcon = !0, await this.updateComplete, this._detailOriginClass) { 235 const i = (n = this.shadowRoot) == null ? void 0 : n.querySelector(".detail-view"); 236 i && i.setAttribute("fromelement", this._detailOriginClass); 237 } 238 await this.focusDetailReturnBtn(); 239 }, this._detailOriginEl = null, this._detailOriginClass = "", this.handleKeyDown = (e) => { 240 this.open && (e.key === "Escape" ? this.closePanel(e) : e.key === "Tab" && this.trapFocus(e)); 241 }, this.handleClosePanel = (e) => { 242 if (e instanceof KeyboardEvent && e.key !== "Enter" && e.key !== " ") 243 return; 244 e.preventDefault(), e.type === "keydown" && e.stopPropagation(); 245 const t = e.currentTarget, o = (t == null ? void 0 : t.getAttribute("data-role")) === "back"; 246 if (this.showDetail && o) { 247 this.isHidingDetail = !0; 248 const n = this.renderRoot.querySelector(".content"), i = async () => { 249 this.showDetail = !1, this.isHidingDetail = !1, this.showHeaderStartIcon = !1, await this.updateComplete, this._restoreFocusToOrigin(); 250 }; 251 if (n) { 252 this.showHeaderStartIcon = !1; 253 const r = () => { 254 this.showDetail = !1, this.isHidingDetail = !1, n.removeEventListener("animationend", r), i(); 255 }; 256 n.addEventListener("animationend", r); 257 } else 258 this.showDetail = !1, this.isHidingDetail = !1, this.showHeaderStartIcon = !1; 259 return; 260 } 261 this.closePanel(e); 262 }; 263 } 264 /** 265 * Focus the first focusable and interactive element and return it. 266 * @returns {HTMLElement?} 267 */ 268 focusFirstInPanel() { 269 var o, n; 270 const t = this.getFocusableElements().filter((i) => !!i && !i.hasAttribute("disabled"))[0] ?? ((o = this.shadowRoot) == null ? void 0 : o.querySelector(".close-btn")) ?? ((n = this.shadowRoot) == null ? void 0 : n.querySelector(".panel")); 271 return t == null || t.focus({ preventScroll: !0 }), t; 272 } 273 resolveFocusable(e) { 274 var o; 275 const t = e.tagName.toLowerCase(); 276 return t === "o-icon-button" || t === "o-button" ? ((o = e.shadowRoot) == null ? void 0 : o.querySelector("button, .button")) ?? e : e; 277 } 278 connectedCallback() { 279 super.connectedCallback(), !this.disablePortal && this.parentElement !== document.body && document.body.appendChild(this), this.addEventListener("keydown", this.handleKeyDown), this.updateComplete.then(() => { 280 this.initialized = !0; 281 }), this.addEventListener("open-detail", this._onOpenDetail), this.addEventListener("focusin", (e) => { 282 e.composedPath()[0] === this && this.focusFirstInPanel(); 283 }); 284 } 285 disconnectedCallback() { 286 document.body.style.overflow = "", document.body.removeAttribute("data-side-panel"), this.removeEventListener("keydown", this.handleKeyDown), super.disconnectedCallback(), this.removeEventListener("open-detail", this._onOpenDetail); 287 } 288 async focusDetailReturnBtn() { 289 var i, r, s, h, f; 290 await this.updateComplete; 291 const e = this.getDeepActiveElement(document); 292 if (e && e !== document.body)
293 try { 294 e.blur(); 295 } catch { 296 } 297 await new Promise(requestAnimationFrame); 298 const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".detail-view .return-btn"); 299 if (!t) return; 300 t.updateComplete && await t.updateComplete, (h = (s = ((r = t.shadowRoot) == null ? void 0 : r.querySelector("button")) ?? t) == null ? void 0 : s.focus) == null || h.call(s, { preventScroll: !0 }); 301 const n = (f = this.shadowRoot) == null ? void 0 : f.querySelector('.panel[role="dialog"]'); 302 n && (this.labelAriaDialogPanel ? n.setAttribute("aria-label", this.labelAriaDialogPanel) : n.setAttribute("aria-labelledby", "panel-title")); 303 } 304 _restoreFocusToOrigin() { 305 var t, o; 306 const e = this._detailOriginEl; 307 !e || !document.contains(e) || ((o = (t = document.activeElement) == null ? void 0 : t.blur) == null || o.call(t), requestAnimationFrame(() => { 308 var i; 309 e.classList.add("a--tabfocus"), (((i = e.shadowRoot) == null ? void 0 : i.querySelector('button, .button, [tabindex]:not([tabindex="-1"])')) ?? null ?? e).focus({ preventScroll: !0 }); 310 })); 311 } 312 getDeepActiveElement(e = this.shadowRoot) { 313 let t = e.activeElement; 314 for (; t && t.shadowRoot && t.shadowRoot.activeElement; ) 315 t = t.shadowRoot.activeElement; 316 return t; 317 } 318 wrapFocus(e, t, o) { 319 var r; 320 if (!o.length) { 321 e.preventDefault(), e.stopPropagation(), (r = this.renderRoot.querySelector(".panel")) == null || r.focus({ preventScroll: !0 }); 322 return; 323 } 324 const n = o[0], i = o[o.length - 1]; 325 !t || !o.includes(t) ? (e.preventDefault(), e.stopPropagation(), (e.shiftKey ? i : n).focus({ preventScroll: !0 })) : !e.shiftKey && t === i ? (e.preventDefault(), e.stopPropagation(), n.focus({ preventScroll: !0 })) : e.shiftKey && t === n && (e.preventDefault(), e.stopPropagation(), i.focus({ preventScroll: !0 })); 326 } 327 trapFocus(e) { 328 if (e.key !== "Tab") return; 329 const t = this.shadowRoot; 330 if (!t) return; 331 const o = this.getFocusableElements(); 332 e.target && e.target.closest("o-side-panel") && !o.includes(e.target) && o.splice(1, 0, e.target); 333 const n = e.composedPath()[0] ?? this.getDeepActiveElement(document); 334 if (this.showDetail) { 335 this.wrapFocus(e, n, o); 336 return; 337 } 338 if (document.querySelector("#refineandsortpopin")) { 339 const s = t.querySelector(".close-btn"), h = s ? this.resolveFocusable(s) : null, f = t.querySelector(".js-clear-refinements"), m = f ? this.resolveFocusable(f) : null, x = (P) => { 340 e.preventDefault(), e.stopPropagation(), P.focus(); 341 }; 342 if (h && m) { 343 if (!e.shiftKey && n === m) return x(h); 344 if (e.shiftKey && n === h) return x(m); 345 } 346 } 347 const r = this.renderRoot.querySelector(".close-btn"); 348 if (!e.shiftKey && r && r.contains(n)) { 349 e.preventDefault(); 350 const s = this.renderRoot.querySelector( 351 ".o-whats-inside--content p" 352 ); 353 if (s) { 354 s.focus(); 355 return; 356 } 357 } 358 this.wrapFocus(e, n, o); 359 } 360 isUnavailableElement(e) { 361 if (!(e instanceof HTMLElement)) return !1; 362 if (e.disabled || e.hasAttribute("disabled") || e.getAttribute("tabindex") === "-1" || e.closest("[hidden], [inert], [aria-hidden='true']")) return !0; 363 const t = e.ownerDocument.defaultView, o = t == null ? void 0 : t.getComputedStyle(e); 364 return (o == null ? void 0 : o.display) === "none" || (o == null ? void 0 : o.visibility) === "hidden" || (o == null ? void 0 : o.visibility) === "collapse"; 365 } 366 getFocusableElements() { 367 const e = this.showDetail ? this.renderRoot.querySelector(".detail-view") : this.renderRoot.querySelector(".panel"); 368 if (!e) return []; 369 const t = (r) => this.isUnavailableElement(r) ? !1 : r.matches(l.focusablesSelector), o = [], n = /* @__PURE__ */ new Set(), i = (r) => { 370 if (n.has(r) || (n.add(r), r instanceof HTMLElement && r.closest("[hidden], [inert], [aria-hidden='true']"))) return; 371 if (t(r)) { 372 const f = this.resolveFocusable(r); 373 f && !this.isUnavailableElement(f) && o.push(f); 374 } 375 const s = r.tagName.toLowerCase(); 376 if (s === "o-icon-button" || s === "o-button") return; 377 if (r instanceof HTMLSlotElement) { 378 r.assignedElements({ flatten: !0 }
378).forEach(i); 379 return; 380 } 381 const h = r.shadowRoot; 382 h && Array.from(h.children).forEach(i), Array.from(r.children).forEach(i); 383 }; 384 return i(e), o; 385 } 386 /** 387 * Open the panel. 388 * @param {Boolean} withVisibleFocus whether to have the visible tabfocus or not. Defaults to FALSE. 389 * @param {HTMLElement|String|null} elementToFocus the element inside the sidepanel to focus. Otherwise, default focus behavior. 390 */ 391 openPanel(e = !1, t = null) { 392 var n; 393 this.removeAttribute("hidden"), this.getBoundingClientRect(), this.previousFocusedElement = document.activeElement, this.previousFocusedSelector = (n = this.previousFocusedElement) == null ? void 0 : n.getAttribute("paneltarget"), this.open = !0, document.body.style.overflow = "hidden", document.body.setAttribute("data-side-panel", "open"); 394 const o = this.renderRoot.querySelector(".panel"); 395 o && o.setAttribute("aria-modal", "true"), this.updateComplete.then(async () => { 396 var i, r; 397 if (this.showHeader && !t) { 398 const s = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".panel .close-btn"); 399 s != null && s.updateComplete && await s.updateComplete; 400 const h = this.resolveFocusable(s); 401 (r = h == null ? void 0 : h.focus) == null || r.call(h, { preventScroll: !0 }), e || (s == null || s.classList.add("no-outline"), h == null || h.addEventListener("focusout", () => { 402 s == null || s.classList.remove("no-outline"); 403 }, { once: !0 })); 404 } else 405 this.focusFirstInPanel(); 406 }), this.dispatchEvent( 407 new CustomEvent("open", { 408 bubbles: !0, 409 composed: !0, 410 detail: { 411 withVisibleFocus: e, 412 elementToFocus: t 413 } 414 }) 415 ); 416 } 417 closePanel(e) { 418 var n, i, r; 419 this.open = !1, this.showDetail = !1, document.body.style.overflow = "", document.body.removeAttribute("data-side-panel"); 420 let t = this.previousFocusedElement; 421 t != null && t.isConnected || (t = document.querySelector(`[paneltarget="${this.previousFocusedSelector}"]`)), (t == null ? void 0 : t.tagName.toLowerCase()) === "o-button" ? (r = (i = (n = t.shadowRoot) == null ? void 0 : n.querySelector(".button")) == null ? void 0 : i.focus) == null || r.call(i) : t == null || t.focus(); 422 const o = this.renderRoot.querySelector(".panel"); 423 o && o.removeAttribute("aria-modal"), this.dispatchEvent( 424 new CustomEvent("close", { bubbles: !0, composed: !0, detail: { event: e } }) 425 ); 426 } 427 handleFirstClick(e) { 428 e instanceof KeyboardEvent && e.key !== "Enter" && e.key !== " " || (e.preventDefault(), e.stopPropagation(), this.onFirstButtonClickClose && this.closePanel(e), this.dispatchEvent( 429 new CustomEvent("firstbuttonclick", { 430 bubbles: !0, 431 composed: !0, 432 cancelable: !0, 433 detail: { 434 button: "first", 435 target: e.target 436 } 437 }) 438 )); 439 } 440 handleSecondClick(e) { 441 e instanceof KeyboardEvent && e.key !== "Enter" && e.key !== " " || (e.preventDefault(), e.stopPropagation(), this.onSecondButtonClickClose && this.closePanel(e), this.dispatchEvent( 442 new CustomEvent("secondbuttonclick", { 443 bubbles: !0, 444 composed: !0, 445 cancelable: !0, 446 detail: { 447 button: "second", 448 target: e.target 449 } 450 }) 451 )); 452 } 453 updated() { 454 this.style.setProperty("--z-overlay", `${this.zIndex || 99}`), this.style.setProperty("--z-panel", `${this.zIndex ? this.zIndex + 1 : 99}`), this.open ? (this._hideTimeout && (clearTimeout(this._hideTimeout), this._hideTimeout = null), this.removeAttribute("hidden")) : this._hideTimeout = setTimeout(() => { 455 this.setAttribute("hidden", "hidden"); 456 }, 500); 457 } 458 render() { 459 const e = this.showHeader ? u` 460 <div tabindex="-1" part="header" class="header ${this.showDetail ? "detail-view-header" : ""}"> 461 ${this.showHeaderStartIcon ? u` 462 <o-icon-button 463 icon="arrowLeft" 464 size="small" 465 class="return-btn" 466 bgstyle="background-light" 467 data-role="back" 468 @click=${this.handleClosePanel} 469 @keydown=${this.handleClosePanel} 470 srlabel="${this.goBackButtonLabel} ${this.labelDialog}" 471 showsrlabel="true" 472 ></o-icon-button> 473 ` : null} 474 <div class="header-title-container" > 475 <p role="heading" aria-level="1" id="panel-title" class="${this.headerTitleClassName}"> 476 ${this.headerTitle} 477 </p> 478 ${this.addToBagProductCount ? u`<span class="a-quantity">${this.addToBagProductCount}</span>` : null} 479 </div> 480 <o-icon-button 481 icon="occ-close-outlined" 482 size="small" 483 class="close-btn" 484 bgstyle="background-light" 485 @click=${this.handleClosePanel} 486 @keydown=${this.handleClosePanel} 487 srlabel="${this.closeButtonLabel}" 488 ?showsrlabel=${!0} 489 aria-describedby="panel-title" 490 ></o-icon-button> 491 </div>
492 ` : null, t = this.showFooter ? u` 493 <div class="footer" part="footer"> 494 ${this.firstButtonVariant && this.firstButtonLabel ? u` 495 <o-button 496 .variant=${this.firstButtonVariant} 497 @click=${this.handleFirstClick} 498 @keydown=${this.handleFirstClick} 499 ${k(this.firstButtonProps)} 500 > 501 ${this.firstButtonLabel} 502 </o-button> 503 ` : null} 504 ${this.secondButtonVariant && this.secondButtonLabel ? u` 505 <o-button 506 .variant=${this.secondButtonVariant} 507 @click=${this.handleSecondClick} 508 @keydown=${this.handleSecondClick} 509 ${k(this.secondButtonProps)} 510 > 511 ${this.secondButtonLabel} 512 </o-button> 513 ` : null} 514 </div> 515 ` : null; 516 return u` 517 <div class="overlay" style="z-index: ${this.zIndex}" @click=${this.handleClosePanel}></div> 518 <div 519 class="panel" 520 role="dialog" 521 aria-modal="true" 522 aria-label="${this.labelAriaDialogPanel || b}" 523 aria-labelledby="${this.labelAriaDialogPanel ? b : "panel-title"}" 524 style="z-index: ${this.zIndex + 1}" 525 tabindex="-1" 526 > 527 <div role="document"> 528 ${e} 529 530 <div part="content" class="content ${this.isHidingDetail ? "slide-out-right" : ""} ${this.showDetail ? "with-detail" : ""}"> 531 532 ${this.showDetail ? u` 533 <div class="detail-view"> 534 ${e} 535 <div class="detail-content"> 536 <div class="detail-scroller"> 537 <slot name="detail"></slot> 538 </div> 539 </div> 540 </div> 541 ` : u`<slot></slot>`} 542 </div> 543 544 ${this.stickyFooter ? null : t} 545 </div> 546 ${this.stickyFooter ? t : null} 547 </div> 548 `; 549 } 550}; 551l.styles = C` 552 :host { 553 --z-overlay: 99; 554 --z-panel: 100; 555 position: fixed; 556 top: 0; 557 right: 0; 558 height: 100%; 559 width: 100%; 560 pointer-events: none; 561 z-index: var(--z-overlay); 562 --side-panel-width: 100%; 563 --side-panel-max-width: 416px; 564 --font-size: var(--font-size-300); 565 --line-height: var(--line-height-240); 566 } 567 568 /* Hide content until it is initialized */ 569 :host(:not([initialized])) .content { 570 display: none; 571 } 572 573 /* hide the host completely until its initialized */ 574 :host(:not([initialized])) { 575 display: none !important; 576 } 577 578 .overlay { 579 position: absolute; 580 inset: 0; 581 backdrop-filter: blur(4px); 582 background-color: rgba(0, 0, 0, 0.3); 583 opacity: 0; 584 transition: opacity 0.3s ease; 585 pointer-events: none; 586 z-index: var(--z-overlay); 587 } 588 589 :host([open]) .overlay { 590 opacity: 1; 591 pointer-events: auto; 592 } 593 594 .panel { 595 position: absolute; 596 top: 0; 597 right: 0; 598 width: var(--side-panel-width); 599 max-width: var(--side-panel-max-width); 600 height: 100%; 601 background: white; 602 box-shadow: var(--colors-alpha-dark-60); 603 transform: translateX(100%); 604 transition: transform 0.3s ease; 605 display: flex; 606 flex-direction: column; 607 pointer-events: auto; 608 z-index: var(--z-panel); 609 } 610 611 :host([open]) .panel { 612 transform: translateX(0%); 613 } 614 615 .header { 616 flex: 0 0 auto; 617 display: flex; 618 align-items: center; 619 gap: 8px; 620 padding: 20px 16px; 621 border-bottom: var(--border-050) solid var(--color-border-tertiary); 622 } 623 624 .header .header-title-container { 625 display: flex; 626 flex-direction: row; 627 align-items: center; 628 column-gap: 8px; 629 flex: 1 1 auto; 630 min-width: 0; 631 } 632 633 .header .panel-title { 634 font-family: var(--font-family-loccitane-serif); 635 font-size: var(--font-size); 636 font-weight: var(--font-weight-400); 637 line-height: var(--line-height); 638 font-style: var(--font-weight-italic); 639 display: -webkit-box; 640 -webkit-line-clamp: 2; 641 -webkit-box-orient: vertical; 642 height: auto; 643 margin-top: auto; 644 margin-bottom: auto; 645 overflow: hidden; 646 padding-right: 6px; 647 color: var(--color-content-heading); 648 flex: 0 1 auto; 649 max-width: 100%; 650 min-width: 0; 651 } 652 653 .header .a-quantity { 654 border-radius: var(--radius-full, 999px); 655 border: var(--border-s, 0.5px) solid var(--color-border-primary, #3F2B2E); 656 background: var(--color-container-brand-accent, #FFC700); 657 overflow: hidden; 658 color: var(--color-content-body, #3F2B2E); 659 text-align: center; 660 text-overflow: ellipsis; 661 font-family: var(--font-family-loccitane-sans); 662 font-size: var(--font-size-100, 12px); 663 font-weight: var(--font-weight-400, 400); 664 line-height: var(--line-height-160, 16px); 665 letter-spacing: var(--letter-spacing-000, 0); 666 width: 16px; 667 height: 16px; 668 flex-shrink: 0; 669 } 670 671 .header .close-btn { 672 margin-left: 8px; 673 margin-top: 0; 674 flex-direction: column; 675 justify-content: start; 676 margin-left: auto; 677 } 678 679 .header .return-btn { 680 margin-right: 8px; 681 } 682 683 .header.detail-view-header { 684 display: none; 685 } 686 687 .detail-view .header.detail-view-header { 688 display: flex; 689 } 690 691 .panel:focus-visible, 692 .close-btn:focus-visible { 693 ${g} 694 } 695 696 [role="document"] { 697 overflow-y: auto; 698 overflow-x: hidden; 699 } 700 701 .content { 702 flex: 1 1 auto; 703 padding: var(--spacing-xl); 704 } 705 706 .content.with-detail { 707 width: 100%; 708 height: 100%; 709 position: absolute; 710 top: 0; 711 left: 0; 712 background: var(--color-container-bg-white); 713 z-index: 3; 714 padding: var(--spacing-4-xs); 715 } 716 717 .footer { 718 flex: 0 0 auto; 719 padding: var(--spacing-xl); 720 border-top: var(--border-050) solid var(--color-border-tertiary); 721 display: flex; 722 flex-direction: column; 723 gap: var(--spacing-l); 724 justify-content: flex-start; 725 } 726 727 :host([stickyfooter]) [role="document"] { 728 flex: 1 1 auto; 729 overflow-y: auto; 730 display: flex; 731 flex-direction: column; 732 } 733 734 /* Mobile */ 735 @media (max-width: 767px) { 736 :host { 737 --side-panel-width: 100%; 738 --side-panel-max-width: none; 739 } 740 } 741 742 /* Tablet */ 743 @media (min-width: 768px) and (max-width: 1024px) { 744 :host { 745 --side-panel-width: 375px; 746 --side-panel-max-width: 375px; 747 } 748 } 749 750 @media (min-width: 1025px) { 751 :host { 752 --side-panel-width: 100%; 753 --side-panel-max-width: 416px; 754 --font-size: var(--font-size-400); 755 --line-height: var(--line-height-280); 756 } 757 } 758 759 @keyframes slideInRight { 760 from { 761 transform: translateX(100%); 762 } 763 to { 764 transform: translateX(0%); 765 } 766 } 767 768 @keyframes slideOutRight { 769 from { 770 transform: translateX(0%); 771 } 772 to { 773 transform: translateX(100%); 774 } 775 } 776 777 .slide-out-right { 778 animation: slideOutRight 0.3s ease-in forwards; 779 } 780 781 .detail-view { 782 animation: slideInRight 0.3s ease-out both; 783 } 784 .detail-content { 785 padding: var(--spacing-xl); 786 } 787 788 .detail-scroller { 789 height: calc(100vh - 91px); 790 overflow: auto; 791 box-sizing: border-box; 792 } 793 `; 794l.focusablesSelector = 'button, [href], input, select, textarea, [tabindex]:not
794([tabindex="-1"]), o-icon-button, o-button'; 795l.focusablesCustomElementsSelector = "o-icon-button, o-button"; 796l.shadowRootOptions = { 797 ...w.shadowRootOptions, 798 // This helps send focus into the first focusable in shadow when host is focused 799 delegatesFocus: !0 800}; 801c([ 802 a({ type: Boolean, reflect: !0 }) 803], l.prototype, "open", 2); 804c([ 805 a({ type: Boolean }) 806], l.prototype, "showHeader", 2); 807c([ 808 a({ type: Boolean }) 809], l.prototype, "showFooter", 2); 810c([ 811 a({ type: Boolean }) 812], l.prototype, "showHeaderStartIcon", 2); 813c([ 814 a({ type: String }) 815], l.prototype, "headerTitle", 2); 816c([ 817 a({ type: String }) 818], l.prototype, "headerTitleClassName", 2); 819c([ 820 a({ type: String }) 821], l.prototype, "labelDialog", 2); 822c([ 823 a({ type: String }) 824], l.prototype, "labelAriaDialogPanel", 2); 825c([ 826 a({ type: String }) 827], l.prototype, "addToBagProductCount", 2); 828c([ 829 a({ type: String }) 830], l.prototype, "closeButtonLabel", 2); 831c([ 832 a({ type: String }) 833], l.prototype, "goBackButtonLabel", 2); 834c([ 835 a({ type: String }) 836], l.prototype, "firstButtonLabel", 2); 837c([ 838 a({ type: String }) 839], l.prototype, "firstButtonVariant", 2); 840c([ 841 a({ type: Object }) 842], l.prototype, "firstButtonProps", 2); 843c([ 844 a({ type: Boolean }) 845], l.prototype, "onFirstButtonClickClose", 2); 846c([ 847 a({ type: String }) 848], l.prototype, "secondButtonLabel", 2); 849c([ 850 a({ type: String }) 851], l.prototype, "secondButtonVariant", 2); 852c([ 853 a({ type: Object }) 854], l.prototype, "secondButtonProps", 2); 855c([ 856 a({ type: Boolean }) 857], l.prototype, "onSecondButtonClickClose", 2); 858c([ 859 a({ type: Boolean, reflect: !0 }) 860], l.prototype, "stickyFooter", 2); 861c([ 862 a({ type: Boolean }) 863], l.prototype, "disablePortal", 2); 864c([ 865 a({ type: Number }) 866], l.prototype, "zIndex", 2); 867c([ 868 a({ type: Boolean, reflect: !0 }) 869], l.prototype, "initialized", 2); 870c([ 871 a({ type: Boolean }) 872], l.prototype, "showDetail", 2); 873c([ 874 a({ type: Boolean }) 875], l.prototype, "isHidingDetail", 2); 876l = c([ 877 S("o-side-panel") 878], l); 879var G = Object.defineProperty, Q = Object.getOwnPropertyDescriptor, p = (e, t, o, n) => { 880 for (var i = n > 1 ? void 0 : n ? Q(t, o) : t, r = e.length - 1, s; r >= 0; r--) 881 (s = e[r]) && (i = (n ? s(t, o, i) : s(i)) || i); 882 return n && i && G(t, o, i), i; 883}; 884const J = E(A(w)), lt = ["primary", "secondary", "ghost", "tertiary", "link"]; 885let d = class extends J { 886 constructor() { 887 super(...arguments), this.type = "submit", this.value = "", this.variant = "primary", this.text = "", this.textsecond = "", this.fullwidth = !1, this.disabled = !1, this.startIconModel = "", this.endIconModel = "", this.startIcon = !1, this.endIcon = !1, this.panelTarget = "", this.href = "", this.target = "", this.underlined = !1, this.withbadge = !1, this.describedBy = null, this.ariaExpanded = null; 888 } 889 get name() { 890 return this.getAttribute("name") ?? ""; 891 } 892 set name(e) { 893 this.setAttribute("name", e); 894 } 895 get form() { 896 return this[B].form; 897 } 898 handleClick(e) { 899 if (!(e instanceof KeyboardEvent && !["Enter", " "].includes(e.key)) && this.panelTarget) { 900 const t = document.getElementById(this.panelTarget); 901 t instanceof l && (t != null && t.openPanel) && typeof t.openPanel == "function" ? (e.preventDefault(), t.openPanel()) : console.warn(`[o-button] No side panel with id="${this.panelTarget}" found or it does not have an openPanel method.`); 902 } 903 } 904 render() { 905 return this.href ? this.renderLink() : this.renderButton(); 906 } 907 connectedCallback() { 908 var o, n; 909 super.connectedCallback(); 910 const e = (o = this.startIconModel) == null ? void 0 : o.startsWith("occ-"), t = (n = this.endIconModel) == null ? void 0 : n.startsWith("occ-"); 911 (e || t) && (e && $(this.startIconModel), t && $(this.endIconModel), this._unsubOcc = _(() => this.requestUpdate())); 912 } 913 disconnectedCallback() { 914 var e; 915 (e = this._unsubOcc) == null || e.call(this), super.disconnectedCallback(); 916 } 917 renderIcon(e) { 918 const t = e === "start" ? this.startIconModel : this.endIconModel; 919 if (!t) return b; 920 const o = I[t] ?? ""; 921 if (!o) return b; 922 const n = z(o); 923 return u`<span class="${e === "start" ? "icon-start" : "icon-end"}">${F(n)}</span>`;
924 } 925 renderButton() { 926 const e = this.text || this.textsecond; 927 return u` 928 <button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick} @keydown=${this.handleClick} 929 aria-describedby=${this.describedBy || b} aria-expanded=${this.ariaExpanded || b} > 930 ${this.startIcon ? this.renderIcon("start") : b} 931 ${e ? u` 932 ${this.text ? u`<span class="text">${this.text}</span>` : b} 933 ${this.textsecond ? u`<span class="text">${this.textsecond}</span>` : b} 934 ${this.withbadge ? u`<slot></slot>` : b} 935 ` : u`<slot></slot>`} 936 ${this.endIcon ? this.renderIcon("end") : b} 937 </button> 938 `; 939 } 940 renderLink() { 941 const e = this.text || this.textsecond; 942 return u` 943 <a 944 href=${this.href} 945 target=${this.target || b} 946 class="button" 947 ?disabled=${this.disabled} 948 @click=${this.handleClick} 949 @keydown=${this.handleClick} 950 aria-describedby=${this.describedBy || b} 951 > 952 ${this.startIcon ? this.renderIcon("start") : b} 953 ${e ? u` 954 ${this.text ? u`<span>${this.text}</span>` : b} 955 ${this.textsecond ? u`<span>${this.textsecond}</span>` : b} 956 ` : u`<slot></slot>`} 957 ${this.endIcon ? this.renderIcon("end") : b} 958 </a> 959 `; 960 } 961}; 962q(d); 963d.formAssociated = !0; 964d.styles = C` 965 :host { 966 --button-border: transparent; 967 --badge-outer-width: 19px; 968 cursor: pointer; 969 display: inline-flex; 970 } 971 972 :host(.a--tabfocus) { 973 outline: none !important; 974 } 975 976 :host(.a--tabfocus) .button { 977 ${g}; 978 } 979 980 :host([fullwidth]) { 981 width: 100%; 982 } 983 984 :host([variant="primary"]) { 985 --button-bg: var(--color-container-action-primary-default); 986 --button-bg-hover: var(--color-container-action-primary-hover); 987 --button-bg-pressed: var(--color-container-action-primary-pressed); 988 --button-text: var(--color-content-action-primary); 989 --button-text-hover: var(--color-content-action-primary); 990 --button-border: transparent; 991 --button-border-width: var(--border-m); 992 --button-padding: var(--spacing-l, 12px) var(--spacing-3-xl, 24px); 993 --button-starticon-svg-width: 0px; 994 --button-endicon-svg-width: 0px; 995 } 996 997 :host([variant="secondary"]) { 998 --button-bg: var(--color-container-action-secondary-default); 999 --button-bg-hover: var(--color-container-action-secondary-hover); 1000 --button-bg-pressed: var(--color-container-action-secondary-pressed); 1001 --button-text: var(--color-content-action-secondary); 1002 --button-text-hover: var(--color-content-action-secondary); 1003 --button-border: var(--color-border-secondary); 1004 --button-border-width: var(--border-m); 1005 --button-padding: var(--spacing-l, 12px) var(--spacing-3-xl, 24px); 1006 --button-starticon-svg-width: 16px; 1007 --button-endicon-svg-width: 0px; 1008 } 1009 1010 :host([variant="ghost"]) { 1011 --button-bg: transparent; 1012 --button-bg-hover: var(--color-alpha-dark-lightest); 1013 --button-bg-pressed: var(--color-alpha-dark-lighter); 1014 --button-text: var(--color-content-action-secondary); 1015 --button-text-hover: var(--color-content-action-secondary); 1016 --button-border-width: 0; 1017 --button-padding: var(--spacing-m, 10px) var(--spacing-xl, 16px); 1018 --button-starticon-svg-width: 16px; 1019 --button-endicon-svg-width: 12px; 1020 } 1021 1022 :host([variant="tertiary"]) { 1023 --button-bg: var(--color-container-action-tertiary-default); 1024 --button-bg-hover: var(--color-container-action-tertiary-hover); 1025 --button-bg-pressed: var(--color-container-action-tertiary-pressed); 1026 --button-text: var(--color-content-body); 1027 --button-text-hover: var(--color-content-action-tertiary); 1028 --button-border-width: 0; 1029 --button-padding: var(--spacing-m, 10px) var(--spacing-l, 12px); 1030 --button-starticon-svg-width: 0px; 1031 --button-endicon-svg-width: 8px; 1032 } 1033 1034 :host([variant="link"]) { 1035 --button-bg: transparent; 1036 --button-bg-hover: transparent; 1037 --button-bg-pressed: transparent; 1038 --button-text: var(--color-content-action-secondary); 1039 --button-text-hover: var(--color-content-action-secondary); 1040 --button-border: transparent; 1041 --button-border-width: 0; 1042 --button-padding: 0; 1043 } 1044 1045 :host([variant="link"]) .button { 1046 background-color: transparent; 1047 min-width: auto; 1048 min-height: auto; 1049 width: auto; 1050 border: 0; 1051 padding: 0; 1052 position: relative; 1053 color: var(--color-content-action-secondary); 1054 font-size: var(--font-size-200); 1055 font-weight: var(--font-weight-400); 1056 line-height: var(--line-height-240); 1057 letter-spacing: var(--letter-spacing-400); 1058 font-family: var(--font-family-loccitane-serif); 1059 } 1060 1061 :host([variant="link"]) .button::after { 1062 content: ""; 1063 position: absolute; 1064 left: 0; 1065 bottom: 0; 1066 width: 100%; 1067 opacity: 1; 1068 height: 1px; 1069 background-color: currentColor; 1070 transition: opacity 0.3s ease, height 0.3s ease; 1071 pointer-events: none; 1072 } 1073 1074 :host([variant="link"]) .button:hover::after { 1075 opacity: 0; 1076 } 1077 1078 :host([disabled]), 1079 :host([aria-disabled="true"]), 1080 :host([aria-disabled="true"]:hover) { 1081 --button-bg: var(--color-container-disabled); 1082 --button-text: var(--color-content-disabled); 1083 --button-border: transparent; 1084 } 1085 1086 :host([disabled][variant="secondary"]) { 1087 --button-border: var(--color-border-secondary); 1088 } 1089 1090 .button { 1091 display: inline-flex; 1092 align-items: center; 1093 justify-content: center; 1094 width: 100%; 1095 gap: var(--spacing-s, 8px); 1096 background-color: var(--button-bg); 1097 color: var(--button-text);
1098 border: var(--button-border-width, var(--border-m)) solid var(--button-border); 1099 border-radius: var(--radius-m); 1100 font-family: var(--font-family-loccitane-sans); 1101 font-size: var(--font-size-150); 1102 font-weight: var(--font-weight-400); 1103 line-height: var(--line-height-200); 1104 min-width: 64px; 1105 padding: var(--button-padding); 1106 text-decoration: none; 1107 cursor: inherit; 1108 box-sizing: border-box; 1109 } 1110 1111 .button span { 1112 font-family: var(--font-family-loccitane-sans); 1113 font-size: var(--font-size-150); 1114 font-weight: var(--font-weight-400); 1115 line-height: var(--line-height-200); 1116 } 1117 1118 .button:hover:not([disabled]) { 1119 background-color: var(--button-bg-hover); 1120 color: var(--button-text-hover); 1121 } 1122 1123 .button:active:not([disabled]) { 1124 background-color: var(--button-bg-pressed); 1125 } 1126 1127 .button:focus-visible { 1128 ${g}; 1129 } 1130 1131 span.text + span.text::before { 1132 content: "â¢"; 1133 margin-right: 8px; 1134 } 1135 1136 .icon-start, 1137 .icon-end { 1138 display: inline-flex; 1139 align-items: center; 1140 } 1141 1142 .icon-start svg, 1143 .icon-end svg { 1144 max-height: 20px; 1145 } 1146 1147 .icon-start svg[x], 1148 .icon-end svg[x] { 1149 width: 15px; 1150 } 1151 1152 .icon-start path[fill], 1153 .icon-start path[class], 1154 .icon-end path[fill], 1155 .icon-end path[class] { 1156 fill: var(--button-text) !important; 1157 } 1158 1159 .icon-start path[stroke], 1160 .icon-end path[stroke] { 1161 stroke: var(--button-text) !important; 1162 } 1163 1164 :host([variant="tertiary"][fullwidth][endIcon]) .button { 1165 justify-content: space-between; 1166 } 1167 1168 .button span { 1169 display: inline-flex; 1170 align-items: center; 1171 } 1172 1173 .button slot { 1174 display: inline-flex; 1175 align-items: center; 1176 } 1177 1178 :host([variant="tertiary"][endIcon]) .button .icon-end { 1179 width: var(--button-endicon-svg-width, 8px); 1180 } 1181 1182 :host([underlined]) span:not([class*="icon-"]), 1183 :host([underlined]) .text, 1184 :host([underlined]:not([text])) .button slot { 1185 position: relative; 1186 } 1187 1188 :host([underlined]) span:not([class*="icon-"])::after, 1189 :host([underlined]) .text::after, 1190 :host([underlined]:not([text])) .button slot::after { 1191 content: ""; 1192 display: block; 1193 position: absolute; 1194 bottom: 0; 1195 left: 0; 1196 width: 100%; 1197 border-bottom: var(--border-m, 1px) solid var(--button-text); 1198 } 1199 1200 :host([underlined]:not([text])) .button slot { 1201 display: inline-flex; 1202 gap: 8px; 1203 } 1204 1205 :host([underlined][withbadge]:not([text])) .button slot::after { 1206 width: calc(100% - var(--badge-outer-width, 19px) - var(--spacing-s, 8px)); 1207 } 1208 1209 :host([variant="tertiary"][endIcon]) .icon-end { 1210 display: inline-flex; 1211 align-items: center; 1212 } 1213 1214 :host([variant="tertiary"][endIcon]:hover) .icon-end { 1215 transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); 1216 transform: translateX(4px); 1217 } 1218 `; 1219p([ 1220 a() 1221], d.prototype, "type", 2); 1222p([ 1223 a() 1224], d.prototype, "value", 2); 1225p([ 1226 a({ type: String, reflect: !0 }) 1227], d.prototype, "variant", 2); 1228p([ 1229 a({ type: String }) 1230], d.prototype, "text", 2); 1231p([ 1232 a({ type: String }) 1233], d.prototype, "textsecond", 2); 1234p([ 1235 a({ type: Boolean, reflect: !0 }) 1236], d.prototype, "fullwidth", 2); 1237p([ 1238 a({ type: Boolean, reflect: !0 }) 1239], d.prototype, "disabled", 2); 1240p([ 1241 a({ type: String }) 1242], d.prototype, "startIconModel", 2); 1243p([ 1244 a({ type: String }) 1245], d.prototype, "endIconModel", 2); 1246p([ 1247 a({ type: Boolean, reflect: !0, attribute: "starticon" }) 1248], d.prototype, "startIcon", 2); 1249p([ 1250 a({ type: Boolean, reflect: !0, attribute: "endicon" }) 1251], d.prototype, "endIcon", 2); 1252p([ 1253 a({ type: String, attribute: "paneltarget" }) 1254], d.prototype, "panelTarget", 2); 1255p([ 1256 a({ type: String }) 1257], d.prototype, "href", 2); 1258p([ 1259 a({ type: String }) 1260], d.prototype, "target", 2); 1261p([ 1262 a({ type: Boolean, reflect: !0 }) 1263], d.prototype, "underlined", 2); 1264p([ 1265 a({ type: Boolean, reflect: !0 }) 1266], d.prototype, "withbadge", 2); 1267p([ 1268 a({ reflect: !0, attribute: "describedby" }) 1269], d.prototype, "describedBy", 2); 1270p([ 1271 a({ reflect: !0, attribute: "expanded" }) 1272], d.prototype, "ariaExpanded", 2); 1273d = p([ 1274 S("o-button") 1275], d); 1276export { 1277 d as O, 1278 l as OccitaneSidePanel, 1279 lt as v 1280};
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.