@telekom/scale-components/dist/scale-components/p-95be3439.entry.js

Scale is the digital design system for Telekom products and experiences.

import{r as t,h as e,a as s,g as r}from"./p-d52b3602.js";import{c as a}from"./p-c608c6dc.js";import{s as i}from"./p-c5a89792.js";const l=class{constructor(e){t(this,e),this.size="",this.variant="",this.timeout=!1,this.icon="",this.defaultTimeout=2e3,this.close=()=>{this.opened=!1},this.onCloseAlertWithTimeout=()=>{if(!1===this.timeout)return null;"number"==typeof this.timeout?setTimeout(this.close,this.timeout):setTimeout(this.close,this.defaultTimeout)}}componentWillLoad(){this.hasSlotClose=!!this.hostElement.querySelector('[slot="close"]')}connectedCallback(){i({source:this.hostElement,type:"warn"})}async open(){this.opened=!0}render(){return this.onCloseAlertWithTimeout(),this.opened?e(s,null,this.styles&&e("style",null,this.styles),e("div",{class:this.getCssClassMap()},e("div",{class:"alert__body"},e("div",{class:"alert__icon"},this.icon),e("div",{class:"alert__content"},e("div",{class:"alert__headline"},this.headline),e("slot",null))),e("a",{class:"alert__close",onClick:this.close},this.hasSlotClose?e("div",{class:"alert__close-icon"},e("slot",{name:"close"})):"x"))):null}getCssClassMap(){return a("alert",this.size&&`alert--size-${this.size}`,this.variant&&`alert--variant-${this.variant}`)}get hostElement(){return r(this)}};l.style=".alert{box-sizing:border-box;background:#eee;color:#333;width:100%;padding:1rem;text-align:left;position:relative;display:flex;justify-content:space-between}.alert__body{display:flex}.alert__headline{font-size:var(--type-size-3, 1rem);color:white;margin:0}.alert__icon{display:flex;align-items:center;justify-content:center;background:none;height:24px;width:24px;margin:0 0.5rem 0 0;border-radius:var(--telekom-radius-standard)}.alert__close{height:16px;opacity:0.5;cursor:pointer}.alert__close:hover{opacity:1}.alert--variant-primary{background:blue;color:#fff}.alert--variant-secondary{background:#eee;color:#333}.alert--variant-variant-warning{background:orange;color:#fff}.alert--variant-danger{background:red;color:#fff}.alert--variant-success{background:green;color:#fff}.alert--variant-info{background:lightblue;color:#fff}";export{l as scale_alert}