import { r as registerInstance, c as createEvent, h } from './index-c269755a.js';
import { c as checkCircleFilled } from './check-circle-filled-7567c1a4.js';
import { c as close } from './close-ed573fa2.js';
import { e as errorFilled } from './error-filled-824dfb8c.js';

const alertFilled = { "name": "alert-filled", "svg": "<svg viewBox=\"0 0 64 64\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M60 32C60 47.464 47.464 60 32 60C16.5432 59.9827 4.01731 47.4568 4 32C4 16.536 16.536 4 32 4C47.464 4 60 16.536 60 32ZM34.2284 46.0419C34.161 45.551 33.9649 45.0866 33.66 44.6959C33.1019 43.8781 32.5635 43.4692 32.045 43.4692C31.6427 43.4875 31.2626 43.6591 30.9826 43.9487C30.6022 44.3138 30.3064 44.7579 30.116 45.2496C29.8874 45.7941 29.7703 46.3788 29.7716 46.9693C29.7716 47.7271 30.1902 48.1061 31.0275 48.1061C31.8043 48.1062 32.5638 47.8771 33.2109 47.4476C33.8893 47.0083 34.2284 46.5397 34.2284 46.0419ZM29.3491 20.6807V38.6031C29.3503 39.636 29.8423 40.1524 30.825 40.1523C31.7547 40.1521 32.6632 39.835 33.4345 39.2414C34.2454 38.6329 34.6509 37.9947 34.6509 37.3267V19.4042C34.5955 18.7525 34.3738 18.1337 34.0134 17.625C33.3496 16.471 32.6852 15.894 32.0204 15.894C31.5593 15.9246 31.1251 16.1524 30.804 16.5322C30.3484 17.0302 29.9945 17.6371 29.7675 18.3096C29.4903 19.0598 29.348 19.8662 29.3491 20.6807Z\"/></svg>" };

const infoFilled = { "name": "info-filled", "svg": "<svg viewBox=\"0 0 64 64\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M31.9998 4C16.5358 4 3.99976 16.536 3.99976 32C3.99976 47.464 16.5358 60 31.9998 60C47.4637 60 59.9998 47.464 59.9998 32C59.9824 16.5432 47.4566 4.01731 31.9998 4ZM34.1536 26.6398V43.6741C34.1545 44.2526 34.0389 44.8254 33.8137 45.3582C33.6292 45.8358 33.3417 46.2669 32.9716 46.6206C32.7107 46.8904 32.3579 47.0523 31.9833 47.074C31.443 47.074 30.9032 46.6642 30.3638 45.8445C30.071 45.4832 29.8909 45.0437 29.8459 44.5808V27.5464C29.8459 27.0721 30.1753 26.6188 30.8342 26.1866C31.461 25.7649 32.1991 25.5397 32.9545 25.5395C33.753 25.5395 34.1527 25.9063 34.1536 26.6398ZM34.4138 18.1545C34.4152 18.7942 34.2883 19.4276 34.0407 20.0175C33.8345 20.5502 33.5141 21.0313 33.102 21.4269C32.7987 21.7406 32.3869 21.9264 31.951 21.9464C31.3893 21.9464 30.8061 21.5034 30.2014 20.6174C29.8711 20.1941 29.6587 19.691 29.5857 19.1591C29.5857 18.6199 29.9531 18.1123 30.6879 17.6363C31.389 17.1711 32.2118 16.923 33.0532 16.9231C33.9603 16.9231 34.4138 17.3335 34.4138 18.1545Z\"/></svg>" };

const NotificationVariant = {
  INLINE: 'inline',
};
const NotificationStatus = {
  SUCCESS: 'success',
  INFORMATION: 'information',
  WARNING: 'warning',
  ERROR: 'error',
};

const teliaNotificationCss = ".telia-notification{border-radius:calc(0.2rem * var(--voca-rem-multiplier));background-color:#ffffff;padding:calc(1.6rem * var(--voca-rem-multiplier)) calc(1.6rem * var(--voca-rem-multiplier)) 0 calc(calc(2.4rem * var(--voca-rem-multiplier)) * 2 - calc(0.6rem * var(--voca-rem-multiplier)));position:relative;}.telia-notification slot[name=content]{display:block;margin-bottom:calc(1.6rem * var(--voca-rem-multiplier))}.telia-notification__icon{left:calc(-3.2rem * var(--voca-rem-multiplier));margin-right:calc(0.8rem * var(--voca-rem-multiplier));position:absolute}.telia-notification__heading{align-items:center;display:flex;margin-bottom:calc(1.2rem * var(--voca-rem-multiplier));position:relative}.telia-notification__hidden{visibility:hidden;opacity:0;padding-left:calc(calc(2.4rem * var(--voca-rem-multiplier)) * 2);float:right}.telia-notification__button{position:absolute;right:calc(1.6rem * var(--voca-rem-multiplier));top:0}.telia-notification__button .telia-button{color:#222222}.telia-notification__button .telia-button:hover{color:#606064}.telia-notification__button .telia-button:active{color:#48484b}.telia-notification--success{border:calc(0.2rem * var(--voca-rem-multiplier)) solid #008641;border-left:calc(0.6rem * var(--voca-rem-multiplier)) solid #008641}.telia-notification--success .telia-notification__icon{color:#008641}.telia-notification--information{border:calc(0.2rem * var(--voca-rem-multiplier)) solid #007acc;border-left:calc(0.6rem * var(--voca-rem-multiplier)) solid #007acc}.telia-notification--information .telia-notification__icon{color:#007acc}.telia-notification--warning{border:calc(0.2rem * var(--voca-rem-multiplier)) solid #cc7c00;border-left:calc(0.6rem * var(--voca-rem-multiplier)) solid #cc7c00}.telia-notification--warning .telia-notification__icon{color:#cc7c00}.telia-notification--error{border:calc(0.2rem * var(--voca-rem-multiplier)) solid #be0040;border-left:calc(0.6rem * var(--voca-rem-multiplier)) solid #be0040}.telia-notification--error .telia-notification__icon{color:#be0040}.telia-notification--hidden{display:none}";

const TeliaNotification = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.vocaClose = createEvent(this, "vocaClose", 7);
    /** notification variant */
    this.variant = NotificationVariant.INLINE;
    /** notification status */
    this.status = NotificationStatus.INFORMATION;
    /** Defining the type of notification */
    this.htmlRole = null;
    /** Assistive technologies will announce dynamic changes in the content of a live region */
    this.htmlAriaLive = null;
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-notification';
  }
  /**
   * Return icon name base on current notification status
   * @param currentStatus
   * @private
   */
  statusIcon(currentStatus) {
    switch (currentStatus) {
      case NotificationStatus.INFORMATION:
        return infoFilled.svg;
      case NotificationStatus.SUCCESS:
        return checkCircleFilled.svg;
      case NotificationStatus.WARNING:
        return alertFilled.svg;
      case NotificationStatus.ERROR:
        return errorFilled.svg;
    }
  }
  removeNotification() {
    this.vocaClose.emit(this.eventDetail);
  }
  render() {
    const componentClass = 'telia-notification';
    const wrapperClasses = {
      [`${componentClass}`]: true,
      [`${componentClass}--${this.variant}`]: true,
      [`${componentClass}--${this.status}`]: true,
    };
    return (h("article", { role: this.htmlRole, "aria-labelledby": this.htmlRole ? 'heading' : null, "aria-describedby": this.htmlRole ? 'content' : null, "aria-live": this.htmlAriaLive, class: wrapperClasses }, h("telia-vst", { dataTrackingId: this.dataTrackingId }), h("header", { id: 'heading', class: componentClass + '__heading' }, h("telia-icon", { class: componentClass + '__icon', size: 'md', svg: this.statusIcon(this.status) }), h("telia-heading", { variant: 'subsection-100', tag: this.headingTag }, this.buttonText && (h("span", { class: componentClass + '__hidden', "aria-hidden": "true" }, this.buttonText)), h("slot", { name: 'heading' }))), h("div", { id: 'content' }, h("slot", { name: 'content' })), this.buttonText && (h("telia-button", { class: componentClass + '__button', variant: "text", "ally-label": this.buttonText + ' ' + this.buttonAriaLabel, onClick: () => this.removeNotification() }, this.buttonText, h("telia-icon", { slot: 'right', svg: close.svg, size: 'md' })))));
  }
};
TeliaNotification.style = teliaNotificationCss;

export { TeliaNotification as telia_notification };
