'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-ca0e0765.js');

const alertCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper a{line-height:0;color:#1D1D1D}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper a{line-height:0;color:#1D1D1D}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.secondary{border:1px solid #9C216E}.alert.secondary .icon-wrapper{background-color:#9C216E;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}";

const Alert = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.ifxClose = index.createEvent(this, "ifxClose", 7);
    this.variant = 'primary';
    this.icon = undefined;
    this.closable = true;
  }
  handleClose() {
    this.ifxClose.emit();
  }
  render() {
    return (this.variant === 'info'
      ? index.h("div", { class: 'alert__info-wrapper' }, index.h("div", { class: 'info__text-wrapper' }, index.h("div", { class: "info__headline-wrapper" }, index.h("slot", { name: 'headline' })), index.h("div", { class: "info__description-wrapper" }, index.h("slot", { name: 'desc' }))), this.closable && index.h("div", { class: "close-icon-wrapper" }, index.h("a", { href: undefined, onClick: this.handleClose.bind(this) }, index.h("ifx-icon", { icon: 'cross-16' }))))
      : index.h("div", { class: `alert ${this.variant}` }, this.icon && (index.h("div", { class: 'icon-wrapper' }, index.h("ifx-icon", { icon: this.icon }))), index.h("div", { class: "alert-text" }, index.h("slot", null)), this.closable && index.h("div", { class: "close-icon-wrapper" }, index.h("a", { href: undefined, onClick: this.handleClose.bind(this) }, index.h("ifx-icon", { icon: 'cross-16' })))));
  }
};
Alert.style = alertCss;

exports.ifx_alert = Alert;

//# sourceMappingURL=ifx-alert.cjs.entry.js.map