https://www.bareminerals.co.uk/cdn/shop/t/357/assets/-core-dialog.js?v=98534722030827053201790177221

1import{a as $}from"./chunk-BaseElement-BB_od1Kd.js";import{m as S}from"./chunk-modal-context-CZRXqToE.js";import{c as E}from"./chunk-consume-Ck9IZGjQ.js";import{n as c}from"./chunk-property-CKIAQdjK.js";import{b as d,t as O,A as x,r as z}from"./chunk-custom-element-Bw0Mn1eH.js";import{e as L}from"./chunk-base-CShCMygk.js";import{W as Y}from"./chunk-WithApiClient-CO-ZIM87.js";import{h as B,i as D,o as P}from"./chunk-unsafe-html-rzW1oWIB.js";import{r as A}from"./chunk-query-all-DYFTEN8Z.js";import{r as G}from"./chunk-query-async-BsMZa7Mb.js";import"./chunk-create-context-DmH_8EEo.js";import"./chunk-index-CKJCYK2x.js";import"./chunk-directive-C_Rw-dL6.js";/**
2 * @license
3 * Copyright 2021 Google LLC
4 * SPDX-License-Identifier: BSD-3-Clause
5 */function W(t){return(r,e)=>{const{slot:i,selector:a}={},n="slot"+(i?`[name=${i}]`:":not([name])");return L(r,e,{get(){var k;const s=(k=this.renderRoot)==null?void 0:k.querySelector(n),f=(s==null?void 0:s.assignedElements(t))??[];return a===void 0?f:f.filter(M=>M.matches(a))}})}}var X=Object.defineProperty,_=(t,r,e,i)=>{for(var a=void 0,n=t.length-1,s;n>=0;n--)(s=t[n])&&(a=s(r,e,a)||a);return a&&X(r,e,a),a};const I=t=>{class r extends t{get currentTargetId(){return this.tagName==="DIALOG-TOGGLE"||this.tagName==="QUICK-SHOP"?this.modalId:this.id}get modalIsOpen(){return!!(this.currentTargetId&&this.modals.includes(this.currentTargetId))}openModal(){!this.currentTargetId||this.modalIsOpen||this.$emit("modal-dialog::open",this.currentTargetId)}closeModal(){!this.currentTargetId||!this.modalIsOpen||this.$emit("modal-dialog::close",this.currentTargetId)}closeAllModals(){this.$emit("modal-dialog::close-all")}}return _([E({context:S,subscribe:!0})],r.prototype,"modals"),_([c({type:String,attribute:"modal-id"})],r.prototype,"modalId"),r};var j=Object.defineProperty,H=Object.getOwnPropertyDescriptor,T=(t,r,e,i)=>{for(var a=i>1?void 0:i?H(r,e):r,n=t.length-1,s;n>=0;n--)(s=t[n])&&(a=(i?s(r,e,a):s(a))||a);return i&&a&&j(r,e,a),a};let b=class extends I($){onClick(t){this.modalId&&(t.preventDefault(),this.modalIsOpen?this.closeModal():this.openModal())}updated(t){var r;super.updated(t),this.toggleAttribute("open",this.modalIsOpen),(r=this.assignedElements)==null||r.forEach(e=>{e.toggleAttribute("open",this.modalIsOpen),e.setAttribute("aria-expanded",String(this.modalIsOpen))})}render(){return d`<slot @click="${this.onClick}"></slot>`}};T([W()],b.prototype,"assignedElements",2);b=T([O("dialog-toggle")],b);const R='.dialog::backdrop{display:none;transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));background-color:#00000080;opacity:0;transition-property:display,opacity,overlay;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-delay:.1s;transition-duration:.3s;transition-behavior:allow-discrete}@media (prefers-reduced-motion: reduce){.dialog::backdrop{transition-property:none}}.dialog[open]::backdrop{display:block;opacity:1;transition-delay:0s}@starting-style{.dialog[open]::backdrop{opacity:0}

5}.dialog{position:fixed;top:0;right:0;bottom:0;left:0;margin:0;display:block;height:100dvh;width:100dvw;overflow:hidden;overscroll-behavior:contain;border-width:0px;background-color:unset;padding:0;opacity:1;transition-property:visibility,opacity,display,overlay;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-behavior:allow-discrete}@media (prefers-reduced-motion: reduce){.dialog{transition-property:none}}.dialog:modal{max-height:100dvh;max-width:100vw}.dialog--below-header,.dialog--below-header::backdrop,.dialog--below-header .drawer{top:var(--announcement-bar-height, 0px);height:calc(100dvh - var(--announcement-bar-height, 0px))}@media (min-width: 768px){.dialog[type=modal]{display:flex;align-items:center;justify-content:center}}.dialog:not([open]){pointer-events:none;visibility:hidden;opacity:0;transition-delay:.5s;transition-duration:.7s}.dialog:not([open])::backdrop{opacity:0}@starting-style{.dialog[open]{opacity:0}}.modal{height:100%;width:100%;--tw-translate-y: 100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));overflow-y:auto;overscroll-behavior:contain;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));opacity:0;transition-property:opacity,transform,overlay;transition-delay:0s;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (prefers-reduced-motion: reduce){.modal{transition-property:none}}@media (min-width: 768px){.modal{height:auto;width:83.333333%;--tw-translate-y: 4rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}@media (min-width: 1024px){.modal{max-height:100dvh;max-width:42rem}}.modal[size=modal-max]{height:100%!important;max-height:100%!important;width:100%!important;max-width:100%!important}.dialog[open] .modal{transform:none;opacity:1;transition-delay:.1s}.drawer{position:fixed;right:0;height:100%;width:100%;--tw-translate-x: 100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));overflow-y:auto;overscroll-behavior:contain;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));transition-property:transform;transition-delay:0s;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.drawer::-webkit-scrollbar-track{background-color:var(--scrollbar-track);border-radius:var(--scrollbar-track-radius)}.drawer::-webkit-scrollbar-track:hover{background-color:var(--scrollbar-track-hover, var(--scrollbar-track))}.drawer::-webkit-scrollbar-track:active{background-color:var(--scrollbar-track-active, var(--scrollbar-track-hover, var(--scrollbar-track)))}.drawer::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);border-radius:var(--scrollbar-thumb-radius)}.drawer::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover, var(--scrollbar-thumb))}.drawer::-webkit-scrollbar-thumb:active{background-color:var(--scrollbar-thumb-active, var(--scrollbar-thumb-hover, var(--scrollbar-thumb)))}.drawer::-webkit-scrollbar-corner{background-color:var(--scrollbar-corner);border-radius:var(--scrollbar-corner-radius)}.drawer::-webkit-scrollbar-corner:hover{background-color:var(--scrollbar-corner-hover, var(--scrollbar-corner))}.drawer::-webkit-scrollbar-corner:active{background-color:var(--scrollbar-corner-active, var(--scrollbar-corner-hover, var(--scrollbar-corner)))}.drawer{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, initial) var(--scrollbar-track, initial)}.drawer::-webkit-scrollbar{display:block;width:8px;height:8px}.drawer{--scrollbar-track: transparent;--scrollbar-thumb: #d1d5db}@media (prefers-reduced-motion: reduce){.drawer{transition-property:none}}@media (min-width: 640px){.drawer{max-width:400px}}.drawer[anchor=left]{left:0;right:auto;--tw-translate-x: -100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host([id="lang-selector"]) .dialog{display:flex;align-items:center;justify-content:center}:host([id="lang-selector"]) .modal{height:auto;width:calc(100% - 40px);max-width:341px;overflow:visible;padding:24px 29px 33px}@media (min-width: 768px){:host([id="lang-selector"]) .modal{width:calc(100% - 40px)}}:host([id="lang-selector"]) .modal{grid-template-rows:minmax(0,1fr);box-sizing:border-box}.dialog:not([open]) .drawer[anchor=right]{--tw-translate-x: 100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-delay:0s}.dialog:not([open]) .drawer[anchor=left]{--tw-translate-x: -100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-delay:0s}.dialog[open] .drawer{transform:none;transition-delay:.1s}';var U=Object.defineProperty,F=Object.getOwnPropertyDescriptor,l=(t,r,e,i)=>{for(var a=i>1?void 0:i?F(r,e):r,n=t.length-1,s;n>=0;n--)(s=t[n])&&(a=(i?s(r,e,a):s(a))||a);return i&&a&&U(r,e,a),a},y=(t,r,e)=>{if(!r.has(t))throw TypeError("Cannot "+e)},v=(t,r,e)=>(y(t,r,"read from private field"),r.get(t)),g=(t,r,e)=>{if(r.has(t))throw TypeError("Cannot add the same private member more than once");r instanceof WeakSet?r.add(t):r.set(t,e)},C=(t,r,e,i)=>(y(t,r,"write to private field"),r.set(t,e),e),w=(t,r,e)=>(y(t,r,"access private method"),e),u,m,h,p;let o=class extends Y(I($)){constructor(){super(...arguments),g(this,h),this.type="modal",this.anchor="right",this.withoutTitle=!1,this.withoutCloseButton=!1,this.closeOnBackdropClick=!1,this.headerClasses="",this.dialogClass="",this.closeIconSize="24",g(this,u,null),g(this,m,!1),this._loadURLContentTask=new B(this,{task:async([t],{signal:r})=>{if(!this.hasToLoadURL)return D;const e=await this.$api.client.fetchClient(t,{method:"GET",signal:r,headers:{"Content-Type":"text/html"}});return r.throwIfAborted(),e},args:()=>[this.url]}

5)}_handleBackdropClick(t){this.closeOnBackdropClick&&t.target instanceof HTMLElement&&t.target.tagName==="DIALOG"&&w(this,h,p).call(this)}_handleGenericClick(t){if(!t.target.closest("[close-modal]"))return;const e=t;e.closeModalHandled||(e.closeModalHandled=!0,t.preventDefault(),w(this,h,p).call(this))}_focusOnFirstElement(){try{setTimeout(async()=>{const t=await this.dialog;if(t){const r=t.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');r&&r.focus()}},300)}catch(t){console.error("Error in _focusOnFirstElement",t)}}async show(){const t=await this.dialog;t&&!t.open&&(C(this,u,document.activeElement),t.showModal(),this._focusOnFirstElement(),this.open=!0)}async hide(){const t=await this.dialog;t&&t.open&&(t.close(),this.open=!1),v(this,u)&&v(this,u).focus()}updated(t){super.updated(t);const r=this.modalIsOpen;r!==v(this,m)&&(C(this,m,r),r?this.show():this.hide())}get hasToLoadURL(){const t=this.url;return!(!t||t==="#"||t==="about:blank"||t==="javascript:;"||t==="javascript:void(0)"||t==="")}get dialogContentHTML(){return this.hasToLoadURL?d`
6      ${this._loadURLContentTask.render({pending:()=>d`<p class="tw-caption tw-animate-pulse tw-p-md tw-text-center">
7            Loading...
8          </p>`,complete:t=>t?d`${P(t)}`:x})}
9    `:d`<slot @click=${this._handleGenericClick}></slot>`}render(){return d`
10      <dialog
11        role="dialog"
12        aria-modal="true"
13        type="${this.type}"
14        aria-labelledby="${this.id}-dialogTitle"
15        @modal-close=${w(this,h,p)}
16        @close=${w(this,h,p)}
17        .inert=${!this.modalIsOpen}
18        class="dialog ${this.dialogClass}"
19        @click=${this._handleBackdropClick}
20      >
21        <div
22          class="${this.type||"modal"} tw-grid tw-grid-cols-1 tw-grid-rows-[var(--dmn-dialog-header-height,_60px)_minmax(0,_1fr)_auto]"
23          size=${this.size}
24          anchor=${this.anchor}
25        >
26          <div
27            class="${this.headerClasses} tw-sticky tw-top-0 tw-z-50 tw-flex tw-items-center tw-justify-between tw-bg-p-lightest tw-px-sm tw-py-xs"
28          >
29            <div
30              class="${this.withoutTitle?"tw-sr-only":""} tw-flex-grow"
31              id="${this.id}-dialogTitle"
32            >
33              <!-- Same handler as the default slot, so [close-modal] works here too. -->
34              <slot name="header" @click=${this._handleGenericClick}></slot>
35            </div>
36
37            ${this.withoutCloseButton?x:d`
38                  <button
39                    @click=${w(this,h,p)}
40                    class="tw-ml-auto tw-inline-flex tw-appearance-none tw-leading-none focus:tw-outline-none focus-visible:tw-ring-1 focus-visible:tw-ring-u-focus"
41                  >
42                    <slot name="close-icon">
43                      <svg-icon
44                        src="icon-close"
45                        style="font-size: ${this.closeIconSize}px"
46                      ></svg-icon>
47                      <span class="tw-sr-only">Close</span>
48                    </slot>
49                  </button>
50                `}
51          </div>
52          <div>${this.dialogContentHTML}</div>
53        </div>
54      </dialog>
55    `}};u=new WeakMap;m=new WeakMap;h=new WeakSet;p=function(){this.closeModal()};o.styles=[z(R)];l([c({type:Boolean,reflect:!0})],o.prototype,"open",2);l([c({type:String})],o.prototype,"type",2);l([c({type:String,reflect:!0})],o.prototype,"size",2);l([c({type:String})],o.prototype,"anchor",2);l([c({type:Boolean,reflect:!0,attribute:"without-title"})],o.prototype,"withoutTitle",2);l([c({type:Boolean,reflect:!0,attribute:"without-close-button"})],o.prototype,"withoutCloseButton",2);l([c({type:Boolean,attribute:"close-on-backdrop-click"})],o.prototype,"closeOnBackdropClick",2);l([c({type:String,attribute:"header-classes"})],o.prototype,"headerClasses",2);l([c({type:String,attribute:"dialog-class"})],o.prototype,"dialogClass",2);l([c({type:String,attribute:"close-icon-size"})],o.prototype,"closeIconSize",2);l([c({type:String,attribute:"url"})],o.prototype,"url",2);l([G("dialog")],o.prototype,"dialog",2);l([A("iframe, video")],o.prototype,"iframeOrVideo",2);o=l([O("modal-dialog")],o);