https://www.clinique.com/cdn/shop/t/104/assets/alert-banner.BCNlfHkT.min.js

1import{B as t}from"./BaseElement.wji90fuE.min.js";import{n as s,T as i,x as e,t as r}from"./vendor-lit.2u3dzq2T.min.js";var a=Object.defineProperty,o=Object.getOwnPropertyDescriptor,n=(t,s,i,e)=>{for(var r,n=e>1?void 0:e?o(s,i):s,l=t.length-1;l>=0;l--)(r=t[l])&&(n=(e?r(s,i,n):r(n))||n);return e&&n&&a(s,i,n),n};let l=class extends t{constructor(){super(...arguments),this.type="info",this.variant="default",this.heading="",this.description="",this.disableClose=!1,this.closeLabel="Close",this.autoDismiss=!1,this.autoDismissAfter=l.DEFAULT_AUTO_DISMISS_SECONDS,this.autoDismissTimer=null,this.handleDismiss=t=>{t.preventDefault(),this.dismiss("user")}}connectedCallback(){this.replaceChildren(),super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","alert"),this.hasAttribute("aria-live")||this.setAttribute("aria-live","polite")}disconnectedCallback(){super.disconnectedCallback(),this.clearAutoDismiss()}updated(t){t.has("variant")&&this.variant!==this.resolvedVariant()&&(this.variant=this.resolvedVariant()),(t.has("autoDismiss")||t.has("autoDismissAfter"))&&(this.clearAutoDismiss(),this.startAutoDismiss())}dismiss(t="user"){this.$emit("alert-banner::dismiss",{type:this.t

1ype,reason:t}),this.remove()}startAutoDismiss(){if(!this.autoDismiss)return;const t=Number.isFinite(this.autoDismissAfter)&&this.autoDismissAfter>0?this.autoDismissAfter:l.DEFAULT_AUTO_DISMISS_SECONDS;this.autoDismissTimer=window.setTimeout(()=>this.dismiss("auto"),1e3*t)}clearAutoDismiss(){null!==this.autoDismissTimer&&(clearTimeout(this.autoDismissTimer),this.autoDismissTimer=null)}resolvedType(){return l.VALID_TYPES.includes(this.type)?this.type:"info"}resolvedVariant(){return l.VALID_VARIANTS.includes(this.variant)?this.variant:"default"}render(){const t=this.resolvedType(),s=this.resolvedVariant(),r="inverse"===s,a="inline"===s||r?"":"icon-md";return e`
2      ${r?i:e`
3            <span
4              class="alert-banner__icon ${a}"
5              aria-hidden="true"
6            >
7              <svg-icon src=${`icon-alert-${t}`}></svg-icon>
8            </span>
9          `}
10      <div class="alert-banner__body">
11        ${this.heading?e`<div class="alert-banner__heading">${this.heading}</div>`:i}
12        ${this.description?e`<div class="alert-banner__description">
13              ${this.description}
14            </div>`:i}
15      </div>
16      ${this.disableClose?i:e`
17            <button
18              type="button"
19              class="alert-banner__close ${a}"
20              aria-label=${this.closeLabel}
21              @click=${this.handleDismiss}
22            >
23              <svg-icon src="icon-close"></svg-icon>
24            </button>
25          `}
26    `}};l.DEFAULT_AUTO_DISMISS_SECONDS=5,l.VALID_TYPES=["error","success","info"],l.VALID_VARIANTS=["default","inline","inverse"],n([s({type:String,reflect:!0})],l.prototype,"type",2),n([s({type:String,reflect:!0})],l.prototype,"variant",2),n([s({type:String})],l.prototype,"heading",2),n([s({type:String})],l.prototype,"description",2),n([s({type:Boolean,reflect:!0,attribute:"disable-close"})],l.prototype,"disableClose",2),n([s({type:String,attribute:"close-label"})],l.prototype,"closeLabel",2),n([s({type:Boolean,reflect:!0,attribute:"auto-dismiss"})],l.prototype,"autoDismiss",2),n([s({type:Number,attribute:"auto-dismiss-after"})],l.prototype,"autoDismissAfter",2),l=n([r("alert-banner")],l);export{l as AlertBanner};