dap-design-system 0.60.2 → 0.61.0

package/dist/components/skip-link/skip-link.component.d.ts

@@ -1,5 +1,6 @@
 import { CommonSize, Placement } from '../../common/types';
 import { DdsElement } from '../../internal/dds-hu-element';
+import { default as DapDSLink } from '../link/link.component';
 /**
  * `dap-ds-skip-link`
  * @summary A skip link is a link that allows keyboard users to skip to the main content of a page.
@@ -22,6 +23,10 @@ import { DdsElement } from '../../internal/dds-hu-element';
  * @cssproperty --dds-skip-link-z-index - Z-index of the skip link (default: var(--dds-z-index-100))
  */
 export default class DapDSSkipLink extends DdsElement {
+    static tagName: string;
+    static dependencies: {
+        'dap-ds-link': typeof DapDSLink;
+    };
     /** The placement of the skip link.
      * @type {'left' | 'center'}
      */

package/dist/components/skip-link/skip-link.component.js

@@ -0,0 +1,64 @@
+import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import "../../node_modules/lit-html/lit-html.js";
+import "../../node_modules/lit-element/lit-element.js";
+import { property as r } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { html as h } from "../../node_modules/lit-html/static.js";
+import { DdsElement as d } from "../../internal/dds-hu-element.js";
+import f from "../link/link.component.js";
+import c from "./skip-link.scss.js";
+import { unsafeCSS as k } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var u = Object.defineProperty, i = (o, p, a, y) => {
+  for (var t = void 0, n = o.length - 1, l; n >= 0; n--)
+    (l = o[n]) && (t = l(p, a, t) || t);
+  return t && u(p, a, t), t;
+};
+const e = class e extends d {
+  constructor() {
+    super(...arguments), this.href = "#", this.size = "sm", this.noUnderline = !1;
+  }
+  render() {
+    return h`
+      <dap-ds-link
+        ?noUnderLine=${this.noUnderline}
+        part="base"
+        variant="brand"
+        href=${this.href}
+        class=${m(
+      "skip-link",
+      `skip-link--${this.size}`,
+      `skip-link--${this.placement}`
+    )}>
+        <span part="text" class="skip-link__text">
+          <slot></slot>
+        </span>
+        <span
+          part="high-contrast"
+          class=${m(
+      "skip-link__high-contrast",
+      `skip-link__high-contrast--${this.size}`
+    )}></span>
+      </dap-ds-link>
+    `;
+  }
+};
+e.tagName = "dap-ds-skip-link", e.dependencies = {
+  "dap-ds-link": f
+}, e.styles = k(c);
+let s = e;
+i([
+  r({ reflect: !0 })
+], s.prototype, "placement");
+i([
+  r()
+], s.prototype, "href");
+i([
+  r()
+], s.prototype, "size");
+i([
+  r({ type: Boolean })
+], s.prototype, "noUnderline");
+export {
+  s as default
+};
+//# sourceMappingURL=skip-link.component.js.map

package/dist/components/skip-link/skip-link.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skip-link.component.js","sources":["../../../src/components/skip-link/skip-link.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { CommonSize, Placement } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport DapDSLink from '../link/link.component'\nimport styles from './skip-link.scss?inline'\n\n/**\n * `dap-ds-skip-link`\n * @summary A skip link is a link that allows keyboard users to skip to the main content of a page.\n * @element dap-ds-skip-link\n * @title - Skip link\n *\n * @slot - The content of the skip link.\n *\n * @csspart base - The main skip link container.\n * @csspart text - The text container of the skip link.\n * @csspart high-contrast - The high contrast outline container.\n *\n * @cssproperty --dds-skip-link-border-color - Border color for the high contrast outline (default: var(--dds-border-neutral-transparent-interactive, #fff500))\n * @cssproperty --dds-skip-link-border-width - Border width for the high contrast outline (default: var(--dds-border-width-large))\n * @cssproperty --dds-skip-link-border-width-active - Border width for the active state (default: var(--dds-border-width-xlarge))\n * @cssproperty --dds-skip-link-border-radius - Border radius of the skip link (default: var(--dds-radius-small))\n * @cssproperty --dds-skip-link-padding-sm - Padding for small size variant (default: var(--dds-spacing-200))\n * @cssproperty --dds-skip-link-padding-lg - Padding for large size variant (default: var(--dds-spacing-400))\n * @cssproperty --dds-skip-link-text-underline-offset - Underline offset for the text (default: 3px)\n * @cssproperty --dds-skip-link-z-index - Z-index of the skip link (default: var(--dds-z-index-100))\n */\nexport default class DapDSSkipLink extends DdsElement {\n  static tagName = 'dap-ds-skip-link'\n\n  static dependencies = {\n    'dap-ds-link': DapDSLink,\n  }\n\n  /** The placement of the skip link.\n   * @type {'left' | 'center'}\n   */\n  @property({ reflect: true }) placement: Placement\n\n  /** The href of the skip link */\n  @property() href: string = '#'\n\n  /** The size of the skip link\n   * @type {'sm' | 'lg'}\n   */\n  @property() size: CommonSize = 'sm'\n\n  /** Whether the skip link should have an underline */\n  @property({ type: Boolean }) noUnderline = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return html`\n      <dap-ds-link\n        ?noUnderLine=${this.noUnderline}\n        part=\"base\"\n        variant=\"brand\"\n        href=${this.href}\n        class=${clsx(\n          'skip-link',\n          `skip-link--${this.size}`,\n          `skip-link--${this.placement}`,\n        )}>\n        <span part=\"text\" class=\"skip-link__text\">\n          <slot></slot>\n        </span>\n        <span\n          part=\"high-contrast\"\n          class=${clsx(\n            'skip-link__high-contrast',\n            `skip-link__high-contrast--${this.size}`,\n          )}></span>\n      </dap-ds-link>\n    `\n  }\n}\n"],"names":["_DapDSSkipLink","DdsElement","html","clsx","DapDSLink","unsafeCSS","styles","DapDSSkipLink","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;AA+BA,MAAqBA,IAArB,MAAqBA,UAAsBC,EAAW;AAAA,EAAtD,cAAA;AAAA,UAAA,GAAA,SAAA,GAa6B,KAAA,OAAA,KAKI,KAAA,OAAA,MAGY,KAAA,cAAA;AAAA,EAAA;AAAA,EAI3C,SAAS;AACA,WAAAC;AAAAA;AAAAA,uBAEY,KAAK,WAAW;AAAA;AAAA;AAAA,eAGxB,KAAK,IAAI;AAAA,gBACRC;AAAA,MACN;AAAA,MACA,cAAc,KAAK,IAAI;AAAA,MACvB,cAAc,KAAK,SAAS;AAAA,IAAA,CAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMSA;AAAA,MACN;AAAA,MACA,6BAA6B,KAAK,IAAI;AAAA,IAAA,CACvC;AAAA;AAAA;AAAA,EAAA;AAIX;AAhDEH,EAAO,UAAU,oBAEjBA,EAAO,eAAe;AAAA,EACpB,eAAeI;AACjB,GAkBgBJ,EAAA,SAASK,EAAUC,CAAM;AAvB3C,IAAqBC,IAArBP;AAU+BQ,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAVRF,EAUU,WAAA,WAAA;AAGjBC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAbSF,EAaP,WAAA,MAAA;AAKAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAlBSF,EAkBP,WAAA,MAAA;AAGiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GArBRF,EAqBU,WAAA,aAAA;"}

package/dist/components/skip-link/skip-link.d.ts

@@ -1,5 +1,5 @@
-import { default as DapDSSkipLink } from './skip-link.component.js';
-export * from './skip-link.component.js';
+import { default as DapDSSkipLink } from './skip-link.component';
+export * from './skip-link.component';
 export default DapDSSkipLink;
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/skip-link/skip-link.js

@@ -0,0 +1,6 @@
+import e from "./skip-link.component.js";
+e.define();
+export {
+  e as default
+};
+//# sourceMappingURL=skip-link.js.map

package/dist/components/skip-link/skip-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skip-link.js","sources":["../../../src/components/skip-link/skip-link.ts"],"sourcesContent":["import DapDSSkipLink from './skip-link.component'\n\nexport * from './skip-link.component'\nexport default DapDSSkipLink\n\nDapDSSkipLink.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-skip-link': DapDSSkipLink\n  }\n}\n"],"names":["DapDSSkipLink"],"mappings":";AAKAA,EAAc,OAAO;"}

package/dist/components/skip-link/skip-link.scss.js

@@ -0,0 +1,5 @@
+const i = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{--dds-skip-link-border-color: var( --dds-border-neutral-transparent-interactive, #fff500 );--dds-skip-link-border-width: var(--dds-border-width-large);--dds-skip-link-border-width-active: var(--dds-border-width-xlarge);--dds-skip-link-border-radius: var(--dds-radius-small);--dds-skip-link-padding-sm: var(--dds-spacing-200);--dds-skip-link-padding-lg: var(--dds-spacing-400);--dds-skip-link-text-underline-offset: 3px;--dds-skip-link-z-index: var(--dds-z-index-100)}.skip-link__high-contrast{display:inline-flex;position:absolute;box-sizing:border-box;flex:0 0 auto;width:100%;height:100%;border:var(--dds-skip-link-border-width) solid var(--dds-skip-link-border-color);border-radius:var(--dds-skip-link-border-radius)}.skip-link__high-contrast:hover{border-width:var(--dds-skip-link-border-width)}.skip-link__high-contrast:active{border-width:var(--dds-skip-link-border-width-active)}.skip-link{transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);position:absolute;z-index:var(--dds-skip-link-z-index);transform:translateY(-150%);border:var(--dds-border-width-base, 1px) solid var(--dds-transparent-black-base);border-radius:var(--dds-skip-link-border-radius);opacity:0}.skip-link:focus{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);position:absolute;transform:translateY(0);outline-style:solid;opacity:1;font-weight:var(--dds-font-weight-medium)}.skip-link--sm{padding:var(--dds-skip-link-padding-sm)}.skip-link--lg{padding:var(--dds-skip-link-padding-lg)}.skip-link--left{left:1rem}.skip-link--center{left:50%}dap-ds-link::part(base){outline:none;text-underline-offset:var(--dds-skip-link-text-underline-offset)}.skip-link__text{align-items:center;justify-content:center;white-space:nowrap}";
+export {
+  i as default
+};
+//# sourceMappingURL=skip-link.scss.js.map

package/dist/components/skip-link/skip-link.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skip-link.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/snackbar/snackbar-message.component.d.ts

@@ -1,6 +1,11 @@
 import { TemplateResult } from 'lit';
 import { ActionType, AlertType, SnackbarPosition } from '../../common/types';
 import { DdsElement } from '../../internal/dds-hu-element';
+import { default as DapDSButton } from '../button/button.component';
+import { default as DapDSIcon } from '../icon/icon.component';
+import { default as DapDSIconButton } from '../icon-button/icon-button.component';
+import { default as DapDSLink } from '../link/link.component';
+import { default as DapDSStack } from '../stack/stack.component';
 /**
  * `dap-ds-snackbar-message`
  * @summary The Snackbar component shows a sliding message to the user.
@@ -45,6 +50,14 @@ import { DdsElement } from '../../internal/dds-hu-element';
  * @cssproperty --dds-snackbar-animation-timing - Timing function for animations (default: ease-out)
  */
 export default class DapDSSnackbarMessage extends DdsElement {
+    static tagName: string;
+    static dependencies: {
+        'dap-ds-stack': typeof DapDSStack;
+        'dap-ds-button': typeof DapDSButton;
+        'dap-ds-link': typeof DapDSLink;
+        'dap-ds-icon': typeof DapDSIcon;
+        'dap-ds-icon-button': typeof DapDSIconButton;
+    };
     /** The actions of the snackbar item. */
     actions?: ActionType[];
     /** The message of the snackbar item. */

package/dist/components/snackbar/snackbar-message.component.js

@@ -0,0 +1,149 @@
+import { clsx as u } from "../../node_modules/clsx/dist/clsx.js";
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as p } from "../../node_modules/lit-html/lit-html.js";
+import "../../node_modules/lit-element/lit-element.js";
+import { property as e } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { state as h } from "../../node_modules/@lit/reactive-element/decorators/state.js";
+import { ifDefined as a } from "../../node_modules/lit-html/directives/if-defined.js";
+import { styleMap as b } from "../../node_modules/lit-html/directives/style-map.js";
+import { html as o } from "../../node_modules/lit-html/static.js";
+import { translate as y } from "../../node_modules/lit-i18n/src/lit-i18n.js";
+import { DdsElement as g } from "../../internal/dds-hu-element.js";
+import k from "../button/button.component.js";
+import $ from "../icon/icon.component.js";
+import _ from "../icon-button/icon-button.component.js";
+import v from "../link/link.component.js";
+import T from "../stack/stack.component.js";
+import x from "./snackbar-message.scss.js";
+import { unsafeCSS as B } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var C = Object.defineProperty, r = (m, t, c, l) => {
+  for (var i = void 0, d = m.length - 1, f; d >= 0; d--)
+    (f = m[d]) && (i = f(t, c, i) || i);
+  return i && C(t, c, i), i;
+};
+const n = class n extends g {
+  constructor() {
+    super(...arguments), this.actions = [], this.message = "", this.closeButton = "true", this.alertType = "default", this.position = "bottom-right", this.closeButtonTestId = "snackbar-close-button", this.isClosing = !1;
+  }
+  getActions() {
+    return this.actions && this.actions.length > 0 ? o`<dap-ds-stack
+        part="actions"
+        exportparts="base:actions-base"
+        class="snackbar__actions"
+        direction="row">
+        ${this.actions.map((t, c) => {
+      var l;
+      return t && typeof t.func == "function" ? o`<dap-ds-button
+              variant=${(l = t.variant) != null ? l : "primary"}
+              data-testid=${`snackbar-action-${c}`}
+              @click=${() => {
+        t.func && t.func();
+      }}
+              >${a(t.text)}</dap-ds-button
+            >` : o`<dap-ds-link
+              class="snackbar__link"
+              href=${a(t.href)}
+              target="${a(t.target)}"
+              rel=${a(t.target ? t.rel : void 0)}
+              >${a(t.text)}</dap-ds-link
+            >`;
+    })}
+      </dap-ds-stack>` : p;
+  }
+  getAlertTypeIcon() {
+    let t = "";
+    switch (this.alertType) {
+      case "information":
+        t = "information-2-fill";
+        break;
+      case "successful":
+        t = "checkbox-circle-fill";
+        break;
+      case "error":
+        t = "error-warning-fill";
+        break;
+    }
+    return t.length > 0 ? o`<dap-ds-icon
+          name=${t}
+          size="lg"
+          class="snackbar__alert-icon"></dap-ds-icon>` : p;
+  }
+  _close(t) {
+    t && (this.isClosing = !0, setTimeout(() => {
+      this.emit("dds-close", { id: t });
+    }, 300));
+  }
+  render() {
+    var t;
+    return o`<div
+      role="alert"
+      aria-label=${this.message}
+      part="base"
+      class=${u(
+      "snackbar",
+      `snackbar--${this.alertType}`,
+      `snackbar--position-${this.position}`,
+      { "snackbar--closing": this.isClosing }
+    )}
+      style=${b((t = this.customStyle) != null ? t : {})}>
+      <div class="snackbar__main">
+        <div class="snackbar__left-group">
+          ${this.getAlertTypeIcon()}
+          <div class="snackbar__content">
+            ${this.message ? o`<span part="text" class="snackbar__text"
+                  >${this.message}</span
+                >` : o`<slot></slot>`}
+            ${this.actions ? o` ${this.getActions()}` : p}
+          </div>
+        </div>
+        ${this.closeButton === "true" ? o`<dap-ds-icon-button
+              @click=${() => this._close(this.id)}
+              part="closebutton"
+              data-testid=${this.closeButtonTestId}
+              class="snackbar__close"
+              aria-label=${y("close")}>
+              <dap-ds-icon
+                part="close-icon"
+                class="snackbar__close-icon"
+                name="close-line"></dap-ds-icon>
+            </dap-ds-icon-button>` : p}
+      </div>
+    </div>`;
+  }
+};
+n.tagName = "dap-ds-snackbar-message", n.dependencies = {
+  "dap-ds-stack": T,
+  "dap-ds-button": k,
+  "dap-ds-link": v,
+  "dap-ds-icon": $,
+  "dap-ds-icon-button": _
+}, n.styles = B(x);
+let s = n;
+r([
+  e({ type: Array })
+], s.prototype, "actions");
+r([
+  e({ type: String })
+], s.prototype, "message");
+r([
+  e({ type: String, reflect: !0 })
+], s.prototype, "closeButton");
+r([
+  e({ type: String })
+], s.prototype, "alertType");
+r([
+  e({ type: Object })
+], s.prototype, "customStyle");
+r([
+  e({ type: String })
+], s.prototype, "position");
+r([
+  e()
+], s.prototype, "closeButtonTestId");
+r([
+  h()
+], s.prototype, "isClosing");
+export {
+  s as default
+};
+//# sourceMappingURL=snackbar-message.component.js.map

package/dist/components/snackbar/snackbar-message.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar-message.component.js","sources":["../../../src/components/snackbar/snackbar-message.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, TemplateResult, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { html } from 'lit/static-html.js'\nimport { translate } from 'lit-i18n'\n\nimport { ActionType, AlertType, SnackbarPosition } from '@/common/types'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport DapDSButton from '../button/button.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport DapDSLink from '../link/link.component'\nimport DapDSStack from '../stack/stack.component'\nimport styles from './snackbar-message.scss?inline'\n\n/**\n * `dap-ds-snackbar-message`\n * @summary The Snackbar component shows a sliding message to the user.\n * @element dap-ds-snackbar-message\n * @title - Snackbar message\n * @group snackbar\n *\n * @event {{ id: string }} dds-close - Fires when the snackbar closes.\n *\n * @slot default - The content of the snackbar.\n *\n * @csspart base - Main snackbar container.\n * @csspart text - The text part of the snackbar.\n * @csspart closebutton - The close button part of the component.\n * @csspart icon - The icon part of the close button.\n *\n * @cssproperty --dds-snackbar-width - Width of the snackbar (default: clamp(var(--dds-spacing-6000), 20vw, var(--dds-containers-xsmall)))\n * @cssproperty --dds-snackbar-gap - Gap between snackbar elements (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-padding - Padding inside the snackbar (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-margin-bottom - Bottom margin of the snackbar (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-transition - Transition property for the snackbar (default: transform var(--dds-transition-slow) var(--dds-easing-ease-out)allow-discrete, opacity var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, margin var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, box-shadow var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete)\n * @cssproperty --dds-snackbar-border-radius - Border radius of the snackbar (default: var(--dds-radius-base))\n * @cssproperty --dds-snackbar-font-size - Font size used in the snackbar (default: var(--dds-font-sm))\n * @cssproperty --dds-snackbar-background - Background color of the snackbar (default: var(--dds-snackbar-error-background))\n * @cssproperty --dds-snackbar-border - Border color of the snackbar (default: var(--dds-snackbar-error-border))\n * @cssproperty --dds-snackbar-text - Text color of the snackbar (default: var(--dds-snackbar-variant-text))\n * @cssproperty --dds-snackbar-icon - Icon color of the snackbar (default: var(--dds-snackbar-variant-icon))\n * @cssproperty --dds-snackbar-link - Link color of the snackbar (default: var(--dds-snackbar-variant-link))\n * @cssproperty --dds-snackbar-information-background - Background color for information variant (default: var(--dds-background-informative-medium))\n * @cssproperty --dds-snackbar-information-border - Border color for information variant (default: var(--dds-border-width-base) solidvar(--dds-border-informative-subtle))\n * @cssproperty --dds-snackbar-information-icon - Icon color for information variant (default: var(--dds-icon-informative-subtle))\n * @cssproperty --dds-snackbar-success-background - Background color for success variant (default: var(--dds-background-positive-medium))\n * @cssproperty --dds-snackbar-success-border - Border color for success variant (default: var(--dds-border-width-base) solidvar(--dds-border-positive-subtle))\n * @cssproperty --dds-snackbar-success-icon - Icon color for success variant (default: var(--dds-icon-positive-subtle))\n * @cssproperty --dds-snackbar-error-background - Background color for error variant (default: var(--dds-background-negative-medium))\n * @cssproperty --dds-snackbar-error-border - Border color for error variant (default: var(--dds-border-width-base) solidvar(--dds-border-negative-subtle))\n * @cssproperty --dds-snackbar-error-icon - Icon color for error variant (default: var(--dds-icon-negative-subtle))\n * @cssproperty --dds-snackbar-variant-text - Text color for information, success, and error variants (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-snackbar-variant-icon - Icon color for information, success, and error variants (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-snackbar-variant-link - Link color for information, success, and error variants (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-snackbar-animation-duration - Duration of entrance animations (default: 0.3s)\n * @cssproperty --dds-snackbar-animation-timing - Timing function for animations (default: ease-out)\n */\nexport default class DapDSSnackbarMessage extends DdsElement {\n  static tagName = 'dap-ds-snackbar-message'\n\n  static dependencies = {\n    'dap-ds-stack': DapDSStack,\n    'dap-ds-button': DapDSButton,\n    'dap-ds-link': DapDSLink,\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-icon-button': DapDSIconButton,\n  }\n\n  /** The actions of the snackbar item. */\n  @property({ type: Array }) actions?: ActionType[] = []\n  /** The message of the snackbar item. */\n  @property({ type: String }) message = ''\n  /** Whether the snackbar has a close button. */\n  @property({ type: String, reflect: true }) closeButton = 'true'\n  /** The message type of the snackbar item. */\n  @property({ type: String }) alertType: AlertType = 'default'\n  /** The custom style of the snackbar item. */\n  @property({ type: Object }) customStyle?: Record<string, string>\n  /** The position of the snackbar container for directional animations. */\n  @property({ type: String }) position: SnackbarPosition = 'bottom-right'\n  /** `data-testid` for the snackbar close button. */\n  @property() closeButtonTestId = 'snackbar-close-button'\n\n  @state() private isClosing = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  private getActions(): TemplateResult | typeof nothing {\n    if (this.actions && this.actions.length > 0) {\n      return html`<dap-ds-stack\n        part=\"actions\"\n        exportparts=\"base:actions-base\"\n        class=\"snackbar__actions\"\n        direction=\"row\">\n        ${this.actions.map((actionItem: ActionType, index: number) => {\n          if (actionItem && typeof actionItem.func === 'function') {\n            return html`<dap-ds-button\n              variant=${actionItem.variant ?? 'primary'}\n              data-testid=${`snackbar-action-${index}`}\n              @click=${() => {\n                if (actionItem.func) {\n                  actionItem.func()\n                }\n              }}\n              >${ifDefined(actionItem.text)}</dap-ds-button\n            >`\n          } else {\n            return html`<dap-ds-link\n              class=\"snackbar__link\"\n              href=${ifDefined(actionItem.href)}\n              target=\"${ifDefined(actionItem.target)}\"\n              rel=${ifDefined(actionItem.target ? actionItem.rel : undefined)}\n              >${ifDefined(actionItem.text)}</dap-ds-link\n            >`\n          }\n        })}\n      </dap-ds-stack>`\n    }\n    return nothing\n  }\n\n  private getAlertTypeIcon(): TemplateResult | typeof nothing {\n    let iconName = ''\n    switch (this.alertType) {\n      case 'information':\n        iconName = 'information-2-fill'\n        break\n      case 'successful':\n        iconName = 'checkbox-circle-fill'\n        break\n      case 'error':\n        iconName = 'error-warning-fill'\n        break\n      default:\n    }\n    return iconName.length > 0\n      ? html`<dap-ds-icon\n          name=${iconName}\n          size=\"lg\"\n          class=\"snackbar__alert-icon\"></dap-ds-icon>`\n      : nothing\n  }\n\n  private _close(id: string) {\n    if (id) {\n      this.isClosing = true\n      // Wait for the closing animation to complete before emitting the close event\n      setTimeout(() => {\n        this.emit('dds-close', { id })\n      }, 300) // Match the animation duration\n    }\n  }\n\n  render() {\n    return html`<div\n      role=\"alert\"\n      aria-label=${this.message}\n      part=\"base\"\n      class=${clsx(\n        'snackbar',\n        `snackbar--${this.alertType}`,\n        `snackbar--position-${this.position}`,\n        { 'snackbar--closing': this.isClosing },\n      )}\n      style=${styleMap(this.customStyle ?? {})}>\n      <div class=\"snackbar__main\">\n        <div class=\"snackbar__left-group\">\n          ${this.getAlertTypeIcon()}\n          <div class=\"snackbar__content\">\n            ${this.message\n              ? html`<span part=\"text\" class=\"snackbar__text\"\n                  >${this.message}</span\n                >`\n              : html`<slot></slot>`}\n            ${this.actions ? html` ${this.getActions()}` : nothing}\n          </div>\n        </div>\n        ${this.closeButton === 'true'\n          ? html`<dap-ds-icon-button\n              @click=${() => this._close(this.id)}\n              part=\"closebutton\"\n              data-testid=${this.closeButtonTestId}\n              class=\"snackbar__close\"\n              aria-label=${translate('close')}>\n              <dap-ds-icon\n                part=\"close-icon\"\n                class=\"snackbar__close-icon\"\n                name=\"close-line\"></dap-ds-icon>\n            </dap-ds-icon-button>`\n          : nothing}\n      </div>\n    </div>`\n  }\n}\n"],"names":["_DapDSSnackbarMessage","DdsElement","html","actionItem","index","_a","ifDefined","nothing","iconName","id","clsx","styleMap","translate","DapDSStack","DapDSButton","DapDSLink","DapDSIcon","DapDSIconButton","unsafeCSS","styles","DapDSSnackbarMessage","__decorateClass","property","state"],"mappings":"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"}

package/dist/components/snackbar/snackbar-message.d.ts

@@ -0,0 +1,8 @@
+import { default as DapDSSnackbarMessage } from './snackbar-message.component';
+export * from './snackbar-message.component';
+export default DapDSSnackbarMessage;
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-snackbar-message': DapDSSnackbarMessage;
+    }
+}

package/dist/components/snackbar/snackbar-message.js

@@ -0,0 +1,6 @@
+import a from "./snackbar-message.component.js";
+a.define();
+export {
+  a as default
+};
+//# sourceMappingURL=snackbar-message.js.map

package/dist/components/snackbar/snackbar-message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar-message.js","sources":["../../../src/components/snackbar/snackbar-message.ts"],"sourcesContent":["import DapDSSnackbarMessage from './snackbar-message.component'\n\nexport * from './snackbar-message.component'\nexport default DapDSSnackbarMessage\n\nDapDSSnackbarMessage.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-snackbar-message': DapDSSnackbarMessage\n  }\n}\n"],"names":["DapDSSnackbarMessage"],"mappings":";AAKAA,EAAqB,OAAO;"}

package/dist/components/snackbar/snackbar-message.scss.js

@@ -0,0 +1,5 @@
+const a = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{display:flex;flex-direction:row;--dds-snackbar-width: clamp( var(--dds-spacing-6000), 20vw, var(--dds-containers-xsmall) );--dds-snackbar-gap: var(--dds-spacing-400);--dds-snackbar-padding: var(--dds-spacing-400);--dds-snackbar-margin-bottom: var(--dds-spacing-400);--dds-snackbar-transition: transform var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, opacity var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, margin var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, box-shadow var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete;--dds-snackbar-border-radius: var(--dds-radius-base);--dds-snackbar-font-size: var(--dds-font-sm);--dds-snackbar-animation-duration: .3s;--dds-snackbar-animation-timing: ease-out;--dds-snackbar-background: var(--dds-background-neutral-base-inverted);--dds-snackbar-border: var(--dds-border-width-base) solid var(--dds-border-neutral-transparent);--dds-snackbar-text: var(--dds-text-neutral-on-inverted);--dds-snackbar-icon: var(--dds-button-primary-icon-enabled);--dds-snackbar-link: var(--dds-text-neutral-on-inverted);--dds-snackbar-information-background: var( --dds-background-informative-medium );--dds-snackbar-information-border: var(--dds-border-width-base) solid var(--dds-border-informative-subtle);--dds-snackbar-information-icon: var(--dds-icon-informative-subtle);--dds-snackbar-success-background: var(--dds-background-positive-medium);--dds-snackbar-success-border: var(--dds-border-width-base) solid var(--dds-border-positive-subtle);--dds-snackbar-success-icon: var(--dds-icon-positive-subtle);--dds-snackbar-error-background: var(--dds-background-negative-medium);--dds-snackbar-error-border: var(--dds-border-width-base) solid var(--dds-border-negative-subtle);--dds-snackbar-error-icon: var(--dds-icon-negative-subtle);--dds-snackbar-variant-text: var(--dds-text-neutral-base);--dds-snackbar-variant-icon: var(--dds-text-neutral-base);--dds-snackbar-variant-link: var(--dds-text-neutral-base)}.snackbar{display:flex;gap:var(--dds-snackbar-gap);position:relative;flex-direction:column;min-width:var(--dds-snackbar-width);margin-bottom:var(--dds-snackbar-margin-bottom);padding:var(--dds-snackbar-padding);transition:var(--dds-snackbar-transition);border:var(--dds-snackbar-border);border-radius:var(--dds-snackbar-border-radius);background:var(--dds-snackbar-background);box-shadow:0 var(--dds-spacing-50) var(--dds-spacing-300) var(--dds-black-20);color:var(--dds-snackbar-text);font-size:var(--dds-snackbar-font-size)}.snackbar__link::part(base),.snackbar__link::part(text){color:var(--dds-snackbar-link);text-decoration-color:currentcolor}.snackbar__main{display:flex;gap:var(--dds-spacing-300);align-items:flex-start;justify-content:space-between;width:auto}.snackbar__left-group{display:flex;gap:var(--dds-spacing-300)}.snackbar__content{display:flex;flex-direction:column;gap:var(--dds-spacing-300)}.snackbar__text{display:inline-block;color:var(--dds-snackbar-text);font-size:var(--dds-font-base)}.snackbar__close{cursor:pointer}.snackbar__close-icon{margin-left:auto;fill:var(--dds-snackbar-icon);color:var(--dds-snackbar-icon)}.snackbar--information{--dds-snackbar-background: var(--dds-snackbar-information-background);--dds-snackbar-border: var(--dds-snackbar-information-border);--dds-snackbar-text: var(--dds-snackbar-variant-text);--dds-snackbar-icon: var(--dds-snackbar-variant-icon);--dds-snackbar-link: var(--dds-snackbar-variant-link)}.snackbar--information .snackbar__alert-icon{fill:var(--dds-snackbar-information-icon);color:var(--dds-snackbar-information-icon)}.snackbar--successful{--dds-snackbar-background: var(--dds-snackbar-success-background);--dds-snackbar-border: var(--dds-snackbar-success-border);--dds-snackbar-text: var(--dds-snackbar-variant-text);--dds-snackbar-icon: var(--dds-snackbar-variant-icon);--dds-snackbar-link: var(--dds-snackbar-variant-link)}.snackbar--successful .snackbar__alert-icon{fill:var(--dds-snackbar-success-icon);color:var(--dds-snackbar-success-icon)}.snackbar--error{--dds-snackbar-background: var(--dds-snackbar-error-background);--dds-snackbar-border: var(--dds-snackbar-error-border);--dds-snackbar-text: var(--dds-snackbar-variant-text);--dds-snackbar-icon: var(--dds-snackbar-variant-icon);--dds-snackbar-link: var(--dds-snackbar-variant-link)}.snackbar--error .snackbar__alert-icon{fill:var(--dds-snackbar-error-icon);color:var(--dds-snackbar-error-icon)}.snackbar .snackbar__alert-icon{display:block;min-width:var(--dds-spacing-600);max-width:var(--dds-spacing-600)}.snackbar--position-bottom-center{animation:snackbar-slide-in var(--dds-snackbar-animation-duration) var(--dds-snackbar-animation-timing)}.snackbar--position-top-right,.snackbar--position-top-center{animation:snackbar-slide-in-top var(--dds-snackbar-animation-duration) var(--dds-snackbar-animation-timing)}.snackbar--position-bottom-left,.snackbar--position-bottom-right{animation:snackbar-slide-in-side var(--dds-snackbar-animation-duration) var(--dds-snackbar-animation-timing)}.snackbar--position-bottom-left{--slide-direction: -100%}.snackbar--closing{pointer-events:none}.snackbar--closing.snackbar--position-bottom-right,.snackbar--closing.snackbar--position-top-right{animation:snackbar-slide-out-right .3s ease-out forwards}.snackbar--closing.snackbar--position-bottom-left{animation:snackbar-slide-out-left .3s ease-out forwards}.snackbar--closing.snackbar--position-bottom-center,.snackbar--closing.snackbar--position-top-center{animation:snackbar-slide-out-center .3s ease-out forwards}@keyframes snackbar-slide-out-right{0%{transform:translate(0);opacity:1}to{transform:translate(calc(100% + var(--dds-snackbar-spacing, 1rem)));opacity:0}}@keyframes snackbar-slide-out-left{0%{transform:translate(0);opacity:1}to{transform:translate(calc(-100% - var(--dds-snackbar-spacing, 1rem)));opacity:0}}@keyframes snackbar-slide-out-center{0%{transform:translate(0);opacity:1}to{transform:translate(0);opacity:0}}@keyframes snackbar-slide-in{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes snackbar-slide-in-top{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes snackbar-slide-in-side{0%{transform:translate(var(--slide-direction, 100%));opacity:0}to{transform:translate(0);opacity:1}}";
+export {
+  a as default
+};
+//# sourceMappingURL=snackbar-message.scss.js.map

package/dist/components/snackbar/snackbar-message.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar-message.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/snackbar/snackbar.component.d.ts

@@ -1,5 +1,6 @@
 import { MessageOptionsType, SnackbarPosition } from '../../common/types';
 import { DdsElement } from '../../internal/dds-hu-element';
+import { default as DapDSSnackbarMessage } from './snackbar-message.component';
 /**
  * `dap-ds-snackbar`
  * @summary The Snackbar is a container of sliding messages.
@@ -19,6 +20,10 @@ import { DdsElement } from '../../internal/dds-hu-element';
  * @cssproperty --dds-snackbar-pointer-events - Pointer events behavior for the snackbar (default: auto)
  */
 export default class DapDSSnackbar extends DdsElement {
+    static tagName: string;
+    static dependencies: {
+        'dap-ds-snackbar-message': typeof DapDSSnackbarMessage;
+    };
     /** The maximum number of snackbar messages at a given time. */
     maxItems: number;
     /** The position of the snackbar

package/dist/components/snackbar/snackbar.component.js

@@ -0,0 +1,234 @@
+var y = Object.defineProperty, w = Object.defineProperties;
+var v = Object.getOwnPropertyDescriptors;
+var p = Object.getOwnPropertySymbols;
+var k = Object.prototype.hasOwnProperty, E = Object.prototype.propertyIsEnumerable;
+var m = (t, e, s) => e in t ? y(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s, r = (t, e) => {
+  for (var s in e || (e = {}))
+    k.call(e, s) && m(t, s, e[s]);
+  if (p)
+    for (var s of p(e))
+      E.call(e, s) && m(t, s, e[s]);
+  return t;
+}, c = (t, e) => w(t, v(e));
+import { clsx as M } from "../../node_modules/clsx/dist/clsx.js";
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import "../../node_modules/lit-html/lit-html.js";
+import "../../node_modules/lit-element/lit-element.js";
+import { property as h } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { state as g } from "../../node_modules/@lit/reactive-element/decorators/state.js";
+import { ifDefined as f } from "../../node_modules/lit-html/directives/if-defined.js";
+import { repeat as C } from "../../node_modules/lit-html/directives/repeat.js";
+import { html as b } from "../../node_modules/lit-html/static.js";
+import "../../localization/localization.js";
+import { DdsElement as T } from "../../internal/dds-hu-element.js";
+import $ from "./snackbar.scss.js";
+import x from "./snackbar-message.component.js";
+import { unsafeCSS as A } from "../../node_modules/@lit/reactive-element/css-tag.js";
+import { translate as S } from "../../node_modules/lit-i18n/src/lit-i18n.js";
+var L = Object.defineProperty, l = (t, e, s, o) => {
+  for (var i = void 0, n = t.length - 1, u; n >= 0; n--)
+    (u = t[n]) && (i = u(e, s, i) || i);
+  return i && L(e, s, i), i;
+};
+typeof window != "undefined" && (window.showDapSnackbar = (t, e) => {
+  a.show(t, e);
+}, window.closeAllDapSnackbars = () => {
+  a.closeAll();
+});
+const d = class d extends T {
+  constructor() {
+    super(...arguments), this.maxItems = 4, this.position = "bottom-right", this.duration = 6e3, this.announceMessages = !0, this.messages = [], this.idCounter = 0, this.timeouts = /* @__PURE__ */ new Map(), this.handleShowSnackbarEvent = (e) => {
+      const { message: s, options: o } = e.detail;
+      this.addMessage(s, o);
+    }, this.handleCloseAllEvent = () => {
+      this.closeAll();
+    }, this.handleKeyDown = (e) => {
+      if (e.key === "Escape" && this.messages.length > 0) {
+        const s = this.messages[this.messages.length - 1];
+        s && this.removeMessage(s.id);
+      }
+    };
+  }
+  /**
+   * Static method to show a snackbar message anywhere in the application
+   * @param message - The message to display
+   * @param options - Optional configuration for the message
+   */
+  static show(e, s) {
+    document.dispatchEvent(
+      new CustomEvent("dds-show-snackbar", {
+        detail: { message: e, options: s },
+        bubbles: !0
+      })
+    );
+  }
+  /**
+   * Static method to show a success message
+   * @param message - The message to display
+   * @param options - Optional configuration (alertType will be overridden to 'successful')
+   */
+  static success(e, s) {
+    this.show(e, c(r({}, s), { alertType: "successful" }));
+  }
+  /**
+   * Static method to show an error message
+   * @param message - The message to display
+   * @param options - Optional configuration (alertType will be overridden to 'error')
+   */
+  static error(e, s) {
+    this.show(e, c(r({}, s), { alertType: "error" }));
+  }
+  /**
+   * Static method to show an information message
+   * @param message - The message to display
+   * @param options - Optional configuration (alertType will be overridden to 'information')
+   */
+  static info(e, s) {
+    this.show(e, c(r({}, s), { alertType: "information" }));
+  }
+  /**
+   * Static method to show a default message
+   * @param message - The message to display
+   * @param options - Optional configuration (alertType will be overridden to 'default')
+   */
+  static default(e, s) {
+    this.show(e, c(r({}, s), { alertType: "default" }));
+  }
+  /**
+   * Static method to close all snackbar messages globally
+   */
+  static closeAll() {
+    document.dispatchEvent(
+      new CustomEvent("dds-close-all-snackbars", {
+        bubbles: !0
+      })
+    );
+  }
+  /**
+   * Close all currently displayed messages
+   */
+  closeAll() {
+    this.clearAllTimeouts(), this.messages = [];
+  }
+  generateId() {
+    return this.idCounter++, `dap-snackbar-${this.idCounter}`;
+  }
+  addMessage(e, s) {
+    if (!e || typeof e != "string") {
+      console.warn("DapDSSnackbar: Message must be a non-empty string");
+      return;
+    }
+    const o = this.generateId();
+    this.messages.length >= this.maxItems && this.sliceMessage();
+    const i = r({
+      id: o,
+      message: e.trim()
+    }, s && { options: s });
+    this.messages = [...this.messages, i], this.elapseMessages(o, s == null ? void 0 : s.duration, s == null ? void 0 : s.persistent), this.announceMessages && this.announceToScreenReader(e);
+  }
+  sliceMessage() {
+    this.messages && (this.messages = this.messages.slice(1));
+  }
+  removeMessage(e) {
+    e && (this.messages = this.messages.filter(
+      (s) => s.id !== e
+    ), this.clearTimeout(e));
+  }
+  elapseMessages(e, s, o) {
+    if (o)
+      return;
+    const i = s != null ? s : this.duration, n = setTimeout(() => {
+      this.removeMessage(e);
+    }, i);
+    this.timeouts.set(e, n);
+  }
+  clearTimeout(e) {
+    const s = this.timeouts.get(e);
+    s && (clearTimeout(s), this.timeouts.delete(e));
+  }
+  clearAllTimeouts() {
+    this.timeouts.forEach((e) => clearTimeout(e)), this.timeouts.clear();
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener(
+      "dds-show-snackbar",
+      this.handleShowSnackbarEvent
+    ), document.addEventListener(
+      "dds-close-all-snackbars",
+      this.handleCloseAllEvent
+    ), document.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    this.clearAllTimeouts(), document.removeEventListener(
+      "dds-show-snackbar",
+      this.handleShowSnackbarEvent
+    ), document.removeEventListener(
+      "dds-close-all-snackbars",
+      this.handleCloseAllEvent
+    ), document.removeEventListener("keydown", this.handleKeyDown), super.disconnectedCallback();
+  }
+  announceToScreenReader(e) {
+    const s = document.createElement("div");
+    s.setAttribute("aria-live", "assertive"), s.setAttribute("aria-atomic", "true"), s.style.position = "absolute", s.style.left = "-10000px", s.style.width = "1px", s.style.height = "1px", s.style.overflow = "hidden", document.body.appendChild(s), s.textContent = e, setTimeout(() => {
+      document.body.removeChild(s);
+    }, 1e3);
+  }
+  _closeMessage(e) {
+    var s;
+    (s = e == null ? void 0 : e.detail) != null && s.id && this.removeMessage(e.detail.id);
+  }
+  render() {
+    return b`<div
+      class=${M("snackbar", `snackbar--${this.position}`)}
+      role="region"
+      aria-live="polite"
+      aria-label=${S("snackbar.notifications")}>
+      ${C(
+      this.messages,
+      (e) => e.id,
+      (e) => {
+        var s, o, i, n;
+        return b`
+          <dap-ds-snackbar-message
+            part="message"
+            exportparts="base:message-base, text:message-text, closebutton:message-closebutton, close-icon:message-close-icon, actions:message-actions"
+            @dds-close=${this._closeMessage}
+            id=${e.id}
+            message=${e.message}
+            alertType=${f((s = e == null ? void 0 : e.options) == null ? void 0 : s.alertType)}
+            .actions=${(o = e == null ? void 0 : e.options) == null ? void 0 : o.actions}
+            closeButton=${f((i = e == null ? void 0 : e.options) == null ? void 0 : i.closeButton)}
+            .customStyle=${(n = e == null ? void 0 : e.options) == null ? void 0 : n.customStyle}
+            position=${this.position}></dap-ds-snackbar-message>
+        `;
+      }
+    )}
+    </div>`;
+  }
+};
+d.tagName = "dap-ds-snackbar", d.dependencies = {
+  "dap-ds-snackbar-message": x
+}, d.styles = A($);
+let a = d;
+l([
+  h({ type: Number })
+], a.prototype, "maxItems");
+l([
+  h({ type: String })
+], a.prototype, "position");
+l([
+  h({ type: Number })
+], a.prototype, "duration");
+l([
+  h({ type: Boolean })
+], a.prototype, "announceMessages");
+l([
+  g()
+], a.prototype, "messages");
+l([
+  g()
+], a.prototype, "idCounter");
+export {
+  a as default
+};
+//# sourceMappingURL=snackbar.component.js.map