@vonage/vivid 5.15.1 → 5.17.0

package/alert/definition.cjs

@@ -1,201 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const button_definition = require('../unbundled/definition2.cjs');
-const elevation_definition = require('../unbundled/definition6.cjs');
-const vividElement = require('../unbundled/vivid-element.cjs');
-const icon_definition = require('../icon/definition.cjs');
-const fastElement = require('@microsoft/fast-element');
-const enums = require('../unbundled/enums.cjs');
-const affix = require('../unbundled/affix.cjs');
-const index = require('../unbundled/index.cjs');
-const localized = require('../unbundled/localized.cjs');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-
-const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media(width<=768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block:0 4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{display:block;margin-top:8px;content:\"\"}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:16px}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const CONNOTATION_ICON_MAP = {
-  [enums.Connotation.Accent]: "megaphone-line",
-  [enums.Connotation.Information]: "info-line",
-  [enums.Connotation.Success]: "check-circle-line",
-  [enums.Connotation.Warning]: "warning-line",
-  [enums.Connotation.Announcement]: "sparkles-line",
-  [enums.Connotation.Alert]: "error-line"
-};
-class Alert extends affix.AffixIcon(localized.Localized(vividElement.VividElement)) {
-  constructor() {
-    super(...arguments);
-    this.dismissButtonAriaLabel = null;
-    this.removable = false;
-    this.placement = "bottom";
-    this.timeoutms = 0;
-    this.open = false;
-    this.#closeOnEscape = (e) => {
-      if (this.open && this.removable && index.handleEscapeKeyAndStopPropogation(e)) {
-        this.open = false;
-      }
-    };
-    this.#onTransitionEnd = () => {
-      if (!this.open) {
-        this.style.display = "none";
-      } else {
-        this.style.display = "contents";
-      }
-    };
-  }
-  // timeout to close the alert
-  #timeoutID;
-  openChanged(oldValue, newValue) {
-    if (oldValue === void 0) return;
-    this.$emit(newValue ? "open" : "close");
-    this.#setupTimeout();
-    if (newValue) {
-      this.style.display = "contents";
-      const closeBtn = this.shadowRoot.querySelector(
-        ".dismiss-button"
-      );
-      if (this.removable && closeBtn) {
-        closeBtn.focus();
-      }
-    } else {
-      this.style.display = "none";
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("keydown", this.#closeOnEscape);
-    this._controlEl.addEventListener("transitionend", this.#onTransitionEnd);
-    this.#setupTimeout();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.#timeoutID) clearTimeout(this.#timeoutID);
-    this.removeEventListener("keydown", this.#closeOnEscape);
-    this._controlEl.removeEventListener("transitionend", this.#onTransitionEnd);
-  }
-  get conditionedIcon() {
-    return this.icon || this.connotation && CONNOTATION_ICON_MAP[this.connotation];
-  }
-  #setupTimeout() {
-    if (this.#timeoutID) clearTimeout(this.#timeoutID);
-    if (this.open && this.timeoutms > 0) {
-      this.#timeoutID = setTimeout(() => this.open = false, this.timeoutms);
-    }
-  }
-  #closeOnEscape;
-  #onTransitionEnd;
-}
-__decorateClass([
-  fastElement.attr({ attribute: "dismiss-button-aria-label" })
-], Alert.prototype, "dismissButtonAriaLabel");
-__decorateClass([
-  fastElement.attr({ mode: "boolean" })
-], Alert.prototype, "removable");
-__decorateClass([
-  fastElement.attr({ mode: "fromView" })
-], Alert.prototype, "placement");
-__decorateClass([
-  fastElement.attr
-], Alert.prototype, "headline");
-__decorateClass([
-  fastElement.attr
-], Alert.prototype, "text");
-__decorateClass([
-  fastElement.attr({
-    mode: "fromView",
-    converter: fastElement.nullableNumberConverter
-  })
-], Alert.prototype, "timeoutms");
-__decorateClass([
-  fastElement.attr
-], Alert.prototype, "connotation");
-__decorateClass([
-  fastElement.attr
-], Alert.prototype, "strategy");
-__decorateClass([
-  fastElement.attr({ mode: "boolean" })
-], Alert.prototype, "open");
-
-const getClasses = ({ connotation }) => fastWebUtilities.classNames("base", [`connotation-${connotation}`, Boolean(connotation)]);
-const getControlClasses = ({ open, placement, strategy }) => fastWebUtilities.classNames(
-  "control",
-  ["open", open],
-  [`placement-${placement}`, Boolean(placement)],
-  [`strategy-${strategy}`, Boolean(strategy)]
-);
-function renderIcon(c, x) {
-  const affixIconTemplate = affix.affixIconTemplateFactory(c);
-  const icon = x.conditionedIcon;
-  const announcement = !x.icon && x.connotation ? {
-    label: x.locale.connotationAnnoncement[`${x.connotation}Icon`],
-    announceOnUpdate: true
-  } : void 0;
-  return affixIconTemplate(
-    icon,
-    affix.IconWrapper.Slot,
-    affix.IconAriaHidden.Hidden,
-    announcement
-  );
-}
-function renderDismissButton(buttonTag) {
-  return fastElement.html`
-		<${buttonTag}
-			aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.alert.dismissButtonLabel}"
-			size="condensed"
-			type="button"
-			class="dismiss-button"
-			icon="close-line"
-			@click="${(x) => x.open = false}">
-		</${buttonTag}>`;
-}
-const AlertTemplate = (context) => {
-  const elevationTag = context.tagFor(elevation_definition.Elevation);
-  const buttonTag = context.tagFor(button_definition.Button);
-  return fastElement.html`
-	<${elevationTag} class="elevation" dp='8' exportparts="vvd-theme-alternate">
-		<div class="${getControlClasses}" ${fastElement.ref("_controlEl")}>
-			<div
-				part="vvd-theme-alternate"
-				class="${getClasses}"
-				role="alert"
-				aria-hidden="${(x) => x.open ? "false" : "true"}"
-				?hidden="${(x) => !x.open}"
-			>
-				${(x) => renderIcon(context, x)}
-				<div class="alert-text">
-					${fastElement.when((x) => x.headline, fastElement.html`<h2 class="headline">${(x) => x.headline}</h2>`)}
-					${fastElement.when((x) => x.text, fastElement.html`<div class="main-text">${(x) => x.text}</div>`)}
-					<slot name="main"></slot>
-				</div>
-				<slot class="action-items" name="action-items"></slot>
-				${fastElement.when((x) => x.removable, renderDismissButton(buttonTag))}
-			</div>
-		</div>
-	</${elevationTag}>
-	`;
-};
-
-const alertDefinition = vividElement.defineVividComponent(
-  "alert",
-  Alert,
-  AlertTemplate,
-  [icon_definition.iconDefinition, button_definition.buttonDefinition, elevation_definition.elevationDefinition],
-  {
-    styles
-  }
-);
-const registerAlert = vividElement.createRegisterFunction(alertDefinition);
-
-exports.VwcAlertElement = Alert;
-exports.alertDefinition = alertDefinition;
-exports.registerAlert = registerAlert;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_definition$1 = require("../unbundled/definition9.cjs");
+exports.VwcAlertElement = require_definition$1.Alert;
+exports.alertDefinition = require_definition$1.alertDefinition;
+exports.registerAlert = require_definition$1.registerAlert;

package/alert/definition.js

@@ -1,195 +1,3 @@
-import { B as Button, b as buttonDefinition } from '../unbundled/definition2.js';
-import { E as Elevation, e as elevationDefinition } from '../unbundled/definition6.js';
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { iconDefinition } from '../icon/definition.js';
-import { attr, nullableNumberConverter, ref, when, html } from '@microsoft/fast-element';
-import { C as Connotation } from '../unbundled/enums.js';
-import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper, c as IconAriaHidden } from '../unbundled/affix.js';
-import { h as handleEscapeKeyAndStopPropogation } from '../unbundled/index.js';
-import { L as Localized } from '../unbundled/localized.js';
-import { classNames } from '@microsoft/fast-web-utilities';
-
-const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media(width<=768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block:0 4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{display:block;margin-top:8px;content:\"\"}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:16px}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const CONNOTATION_ICON_MAP = {
-  [Connotation.Accent]: "megaphone-line",
-  [Connotation.Information]: "info-line",
-  [Connotation.Success]: "check-circle-line",
-  [Connotation.Warning]: "warning-line",
-  [Connotation.Announcement]: "sparkles-line",
-  [Connotation.Alert]: "error-line"
-};
-class Alert extends AffixIcon(Localized(VividElement)) {
-  constructor() {
-    super(...arguments);
-    this.dismissButtonAriaLabel = null;
-    this.removable = false;
-    this.placement = "bottom";
-    this.timeoutms = 0;
-    this.open = false;
-    this.#closeOnEscape = (e) => {
-      if (this.open && this.removable && handleEscapeKeyAndStopPropogation(e)) {
-        this.open = false;
-      }
-    };
-    this.#onTransitionEnd = () => {
-      if (!this.open) {
-        this.style.display = "none";
-      } else {
-        this.style.display = "contents";
-      }
-    };
-  }
-  // timeout to close the alert
-  #timeoutID;
-  openChanged(oldValue, newValue) {
-    if (oldValue === void 0) return;
-    this.$emit(newValue ? "open" : "close");
-    this.#setupTimeout();
-    if (newValue) {
-      this.style.display = "contents";
-      const closeBtn = this.shadowRoot.querySelector(
-        ".dismiss-button"
-      );
-      if (this.removable && closeBtn) {
-        closeBtn.focus();
-      }
-    } else {
-      this.style.display = "none";
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("keydown", this.#closeOnEscape);
-    this._controlEl.addEventListener("transitionend", this.#onTransitionEnd);
-    this.#setupTimeout();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.#timeoutID) clearTimeout(this.#timeoutID);
-    this.removeEventListener("keydown", this.#closeOnEscape);
-    this._controlEl.removeEventListener("transitionend", this.#onTransitionEnd);
-  }
-  get conditionedIcon() {
-    return this.icon || this.connotation && CONNOTATION_ICON_MAP[this.connotation];
-  }
-  #setupTimeout() {
-    if (this.#timeoutID) clearTimeout(this.#timeoutID);
-    if (this.open && this.timeoutms > 0) {
-      this.#timeoutID = setTimeout(() => this.open = false, this.timeoutms);
-    }
-  }
-  #closeOnEscape;
-  #onTransitionEnd;
-}
-__decorateClass([
-  attr({ attribute: "dismiss-button-aria-label" })
-], Alert.prototype, "dismissButtonAriaLabel");
-__decorateClass([
-  attr({ mode: "boolean" })
-], Alert.prototype, "removable");
-__decorateClass([
-  attr({ mode: "fromView" })
-], Alert.prototype, "placement");
-__decorateClass([
-  attr
-], Alert.prototype, "headline");
-__decorateClass([
-  attr
-], Alert.prototype, "text");
-__decorateClass([
-  attr({
-    mode: "fromView",
-    converter: nullableNumberConverter
-  })
-], Alert.prototype, "timeoutms");
-__decorateClass([
-  attr
-], Alert.prototype, "connotation");
-__decorateClass([
-  attr
-], Alert.prototype, "strategy");
-__decorateClass([
-  attr({ mode: "boolean" })
-], Alert.prototype, "open");
-
-const getClasses = ({ connotation }) => classNames("base", [`connotation-${connotation}`, Boolean(connotation)]);
-const getControlClasses = ({ open, placement, strategy }) => classNames(
-  "control",
-  ["open", open],
-  [`placement-${placement}`, Boolean(placement)],
-  [`strategy-${strategy}`, Boolean(strategy)]
-);
-function renderIcon(c, x) {
-  const affixIconTemplate = affixIconTemplateFactory(c);
-  const icon = x.conditionedIcon;
-  const announcement = !x.icon && x.connotation ? {
-    label: x.locale.connotationAnnoncement[`${x.connotation}Icon`],
-    announceOnUpdate: true
-  } : void 0;
-  return affixIconTemplate(
-    icon,
-    IconWrapper.Slot,
-    IconAriaHidden.Hidden,
-    announcement
-  );
-}
-function renderDismissButton(buttonTag) {
-  return html`
-		<${buttonTag}
-			aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.alert.dismissButtonLabel}"
-			size="condensed"
-			type="button"
-			class="dismiss-button"
-			icon="close-line"
-			@click="${(x) => x.open = false}">
-		</${buttonTag}>`;
-}
-const AlertTemplate = (context) => {
-  const elevationTag = context.tagFor(Elevation);
-  const buttonTag = context.tagFor(Button);
-  return html`
-	<${elevationTag} class="elevation" dp='8' exportparts="vvd-theme-alternate">
-		<div class="${getControlClasses}" ${ref("_controlEl")}>
-			<div
-				part="vvd-theme-alternate"
-				class="${getClasses}"
-				role="alert"
-				aria-hidden="${(x) => x.open ? "false" : "true"}"
-				?hidden="${(x) => !x.open}"
-			>
-				${(x) => renderIcon(context, x)}
-				<div class="alert-text">
-					${when((x) => x.headline, html`<h2 class="headline">${(x) => x.headline}</h2>`)}
-					${when((x) => x.text, html`<div class="main-text">${(x) => x.text}</div>`)}
-					<slot name="main"></slot>
-				</div>
-				<slot class="action-items" name="action-items"></slot>
-				${when((x) => x.removable, renderDismissButton(buttonTag))}
-			</div>
-		</div>
-	</${elevationTag}>
-	`;
-};
-
-const alertDefinition = defineVividComponent(
-  "alert",
-  Alert,
-  AlertTemplate,
-  [iconDefinition, buttonDefinition, elevationDefinition],
-  {
-    styles
-  }
-);
-const registerAlert = createRegisterFunction(alertDefinition);
-
+import "../unbundled/definition2.js";
+import { n as registerAlert, r as Alert, t as alertDefinition } from "../unbundled/definition9.js";
 export { Alert as VwcAlertElement, alertDefinition, registerAlert };

package/alert/index.cjs

@@ -1,30 +1,30 @@
-"use strict";const p=require("../bundled/definition3.cjs"),u=require("../bundled/definition4.cjs"),o=require("../bundled/vivid-element.cjs"),f=require("../bundled/definition2.cjs"),l=require("../bundled/enums.cjs"),c=require("../bundled/affix.cjs"),b=require("../bundled/index.cjs"),y=require("../bundled/localized.cjs"),x=require("../bundled/ref.cjs"),m=require("../bundled/when.cjs"),h=require("../bundled/class-names.cjs"),g='.control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media(width<=768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block:0 4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{display:block;margin-top:8px;content:""}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:16px}';var _=Object.defineProperty,r=(e,t,i,n)=>{for(var s=void 0,d=e.length-1,v;d>=0;d--)(v=e[d])&&(s=v(t,i,s)||s);return s&&_(t,i,s),s};const $={[l.Connotation.Accent]:"megaphone-line",[l.Connotation.Information]:"info-line",[l.Connotation.Success]:"check-circle-line",[l.Connotation.Warning]:"warning-line",[l.Connotation.Announcement]:"sparkles-line",[l.Connotation.Alert]:"error-line"};class a extends c.AffixIcon(y.Localized(o.VividElement)){constructor(){super(...arguments),this.dismissButtonAriaLabel=null,this.removable=!1,this.placement="bottom",this.timeoutms=0,this.open=!1,this.#n=t=>{this.open&&this.removable&&b.handleEscapeKeyAndStopPropogation(t)&&(this.open=!1)},this.#e=()=>{this.open?this.style.display="contents":this.style.display="none"}}#t;openChanged(t,i){if(t!==void 0)if(this.$emit(i?"open":"close"),this.#o(),i){this.style.display="contents";const n=this.shadowRoot.querySelector(".dismiss-button");this.removable&&n&&n.focus()}else this.style.display="none"}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.#n),this._controlEl.addEventListener("transitionend",this.#e),this.#o()}disconnectedCallback(){super.disconnectedCallback(),this.#t&&clearTimeout(this.#t),this.removeEventListener("keydown",this.#n),this._controlEl.removeEventListener("transitionend",this.#e)}get conditionedIcon(){return this.icon||this.connotation&&$[this.connotation]}#o(){this.#t&&clearTimeout(this.#t),this.open&&this.timeoutms>0&&(this.#t=setTimeout(()=>this.open=!1,this.timeoutms))}#n;#e}r([o.attr({attribute:"dismiss-button-aria-label"})],a.prototype,"dismissButtonAriaLabel");r([o.attr({mode:"boolean"})],a.prototype,"removable");r([o.attr({mode:"fromView"})],a.prototype,"placement");r([o.attr],a.prototype,"headline");r([o.attr],a.prototype,"text");r([o.attr({mode:"fromView",converter:o.nullableNumberConverter})],a.prototype,"timeoutms");r([o.attr],a.prototype,"connotation");r([o.attr],a.prototype,"strategy");r([o.attr({mode:"boolean"})],a.prototype,"open");const C=({connotation:e})=>h.classNames("base",[`connotation-${e}`,!!e]),k=({open:e,placement:t,strategy:i})=>h.classNames("control",["open",e],[`placement-${t}`,!!t],[`strategy-${i}`,!!i]);function w(e,t){const i=c.affixIconTemplateFactory(e),n=t.conditionedIcon,s=!t.icon&&t.connotation?{label:t.locale.connotationAnnoncement[`${t.connotation}Icon`],announceOnUpdate:!0}:void 0;return i(n,c.IconWrapper.Slot,c.IconAriaHidden.Hidden,s)}function z(e){return o.html`
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/ref.cjs`),r=require(`../bundled/when.cjs`),i=require(`../bundled/enums.cjs`),a=require(`../bundled/definition2.cjs`),o=require(`../bundled/decorate.cjs`),s=require(`../bundled/affix.cjs`),c=require(`../bundled/class-names.cjs`),l=require(`../bundled/definition6.cjs`),u=require(`../bundled/definition7.cjs`),d=require(`../bundled/dialog.cjs`);var f=`.control{z-index:10;inline-size:max-content;max-inline-size:var(--alert-max-inline-size,fit-content);min-inline-size:var(--alert-min-inline-size,420px);border-radius:8px;margin-block:16px;margin-inline:auto;transition:opacity .15s cubic-bezier(0,0,.2,1),transform .15s cubic-bezier(0,0,.2,1);position:fixed;inset-block-end:0;inset-inline:0}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;margin-inline:16px;inset-inline-end:auto}.control.placement-top-end,.control.placement-bottom-end{margin-inline:16px;inset-inline-start:auto}.control:where(.strategy-static){inline-size:auto;margin:0;position:static}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width<=768px){.control{min-inline-size:var(--alert-min-inline-size,auto)}}.base.connotation-success{--_connotation-color-primary:var(--vvd-alert-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-alert-success-primary-text,var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary:var(--vvd-alert-information-primary,var(--vvd-color-information-500));--_connotation-color-primary-text:var(--vvd-alert-information-primary-text,var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary:var(--vvd-alert-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-alert-alert-primary-text,var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary:var(--vvd-alert-warning-primary,var(--vvd-color-warning-300));--_connotation-color-primary-text:var(--vvd-alert-warning-primary-text,var(--vvd-color-canvas-text))}.base.connotation-announcement{--_connotation-color-primary:var(--vvd-alert-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-alert-announcement-primary-text,var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary:var(--vvd-alert-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-alert-accent-primary-text,var(--vvd-color-canvas))}.base{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);border-radius:8px;align-items:center;column-gap:16px;padding:16px;display:flex}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block:0 4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{content:"";margin-top:8px;display:block}.base slot[name=icon]{color:var(--_appearance-color-fill);flex-shrink:0;font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:16px}`,p={[i.n.Accent]:`megaphone-line`,[i.n.Information]:`info-line`,[i.n.Success]:`check-circle-line`,[i.n.Warning]:`warning-line`,[i.n.Announcement]:`sparkles-line`,[i.n.Alert]:`error-line`},m=class extends s.t(e.t(t.t)){constructor(...e){super(...e),this.dismissButtonAriaLabel=null,this.removable=!1,this.placement=`bottom`,this.timeoutms=0,this.open=!1}#e;openChanged(e,t){if(e!==void 0)if(this.$emit(t?`open`:`close`),this.#t(),t){this.style.display=`contents`;let e=this.shadowRoot.querySelector(`.dismiss-button`);this.removable&&e&&e.focus()}else this.style.display=`none`}connectedCallback(){super.connectedCallback(),this.addEventListener(`keydown`,this.#n),this._controlEl.addEventListener(`transitionend`,this.#r),this.#t()}disconnectedCallback(){super.disconnectedCallback(),this.#e&&clearTimeout(this.#e),this.removeEventListener(`keydown`,this.#n),this._controlEl.removeEventListener(`transitionend`,this.#r)}get conditionedIcon(){return this.icon||this.connotation&&p[this.connotation]}#t(){this.#e&&clearTimeout(this.#e),this.open&&this.timeoutms>0&&(this.#e=setTimeout(()=>this.open=!1,this.timeoutms))}#n=e=>{this.open&&this.removable&&d.t(e)&&(this.open=!1)};#r=()=>{this.open?this.style.display=`contents`:this.style.display=`none`}};o.t([t.l({attribute:`dismiss-button-aria-label`})],m.prototype,`dismissButtonAriaLabel`,void 0),o.t([t.l({mode:`boolean`})],m.prototype,`removable`,void 0),o.t([t.l({mode:`fromView`})],m.prototype,`placement`,void 0),o.t([t.l],m.prototype,`headline`,void 0),o.t([t.l],m.prototype,`text`,void 0),o.t([t.l({mode:`fromView`,converter:t.u})],m.prototype,`timeoutms`,void 0),o.t([t.l],m.prototype,`connotation`,void 0),o.t([t.l],m.prototype,`strategy`,void 0),o.t([t.l({mode:`boolean`})],m.prototype,`open`,void 0);var h=({connotation:e})=>c.t(`base`,[`connotation-${e}`,!!e]),g=({open:e,placement:t,strategy:n})=>c.t(`control`,[`open`,e],[`placement-${t}`,!!t],[`strategy-${n}`,!!n]);function _(e,t){let n=s.a(e),r=t.conditionedIcon,i=!t.icon&&t.connotation?{label:t.locale.connotationAnnoncement[`${t.connotation}Icon`],announceOnUpdate:!0}:void 0;return n(r,s.i.Slot,s.r.Hidden,i)}function v(e){return t.d`
 		<${e}
-			aria-label="${t=>t.dismissButtonAriaLabel||t.locale.alert.dismissButtonLabel}"
+			aria-label="${e=>e.dismissButtonAriaLabel||e.locale.alert.dismissButtonLabel}"
 			size="condensed"
 			type="button"
 			class="dismiss-button"
 			icon="close-line"
-			@click="${t=>t.open=!1}">
-		</${e}>`}const A=e=>{const t=e.tagFor(u.Elevation),i=e.tagFor(p.Button);return o.html`
-	<${t} class="elevation" dp='8' exportparts="vvd-theme-alternate">
-		<div class="${k}" ${x.ref("_controlEl")}>
+			@click="${e=>e.open=!1}">
+		</${e}>`}var y=t.o(`alert`,m,e=>{let i=e.tagFor(u.r),a=e.tagFor(l.i);return t.d`
+	<${i} class="elevation" dp='8' exportparts="vvd-theme-alternate">
+		<div class="${g}" ${n.t(`_controlEl`)}>
 			<div
 				part="vvd-theme-alternate"
-				class="${C}"
+				class="${h}"
 				role="alert"
-				aria-hidden="${n=>n.open?"false":"true"}"
-				?hidden="${n=>!n.open}"
+				aria-hidden="${e=>e.open?`false`:`true`}"
+				?hidden="${e=>!e.open}"
 			>
-				${n=>w(e,n)}
+				${t=>_(e,t)}
 				<div class="alert-text">
-					${m.when(n=>n.headline,o.html`<h2 class="headline">${n=>n.headline}</h2>`)}
-					${m.when(n=>n.text,o.html`<div class="main-text">${n=>n.text}</div>`)}
+					${r.t(e=>e.headline,t.d`<h2 class="headline">${e=>e.headline}</h2>`)}
+					${r.t(e=>e.text,t.d`<div class="main-text">${e=>e.text}</div>`)}
 					<slot name="main"></slot>
 				</div>
 				<slot class="action-items" name="action-items"></slot>
-				${m.when(n=>n.removable,z(i))}
+				${r.t(e=>e.removable,v(a))}
 			</div>
 		</div>
-	</${t}>
-	`},E=o.defineVividComponent("alert",a,A,[f.iconDefinition,p.buttonDefinition,u.elevationDefinition],{styles:g}),I=o.createRegisterFunction(E);I();
+	</${i}>
+	`},[a.t,l.t,u.t],{styles:f});t.s(y)();