dap-design-system 0.60.2 → 0.61.0

package/dist/components/navigation-menu/submenu-controller.js

@@ -0,0 +1,96 @@
+class o {
+  constructor(s) {
+    this.enableSubmenuTimer = -1, this.isConnected = !1, this.submenuOpenDelay = 100, this.handleMouseMove = (e) => {
+      this.host.style.setProperty(
+        "--safe-triangle-cursor-x",
+        `${e.clientX}px`
+      ), this.host.style.setProperty(
+        "--safe-triangle-cursor-y",
+        `${e.clientY}px`
+      );
+    }, this.handleMouseOver = () => {
+      this.hasSubmenu() && this.enableSubmenu(!0);
+    }, this.handleKeyDown = (e) => {
+      const t = e.target, i = t.closest("dap-ds-navigation-menu-item");
+      if (!(i && i !== this.host))
+        switch (e.key) {
+          case "Escape":
+            e.preventDefault(), e.stopPropagation(), this.disableSubmenu(), this.host.focus();
+            break;
+          case "Tab":
+            this.disableSubmenu();
+            break;
+          case "ArrowLeft":
+            e.target !== this.host && (e.preventDefault(), e.stopPropagation(), this.host.focus(), this.disableSubmenu());
+            break;
+          case "ArrowRight":
+            this.host.level > 0 && this.handleSubmenuEntry(e);
+            break;
+          case "Enter":
+          case " ":
+            (t === this.host || this.host.contains(t) && !t.closest("dap-ds-navigation-menu-item")) && this.handleSubmenuEntry(e);
+            break;
+        }
+    }, this.handleClick = (e) => {
+      var t;
+      e.target === this.host ? (e.preventDefault(), e.stopPropagation()) : e.target instanceof Element && (e.target.tagName.toLowerCase() === "dap-ds-navigation-menu-item" || (t = e.target.getAttribute("role")) != null && t.startsWith("menuitem")) && this.disableSubmenu();
+    }, this.handleFocusOut = (e) => {
+      e.relatedTarget && e.relatedTarget instanceof Element && this.host.contains(e.relatedTarget) || this.disableSubmenu();
+    }, this.updateSafeTriangle = () => {
+      const e = this.host.popup;
+      if (!e || !this.host.opened)
+        return;
+      const { left: t, top: i, height: h } = e.getBoundingClientRect();
+      this.host.style.setProperty("--safe-triangle-submenu-start-x", `${t}px`), this.host.style.setProperty("--safe-triangle-submenu-start-y", `${i}px`), this.host.style.setProperty("--safe-triangle-submenu-end-x", `${t}px`), this.host.style.setProperty(
+        "--safe-triangle-submenu-end-y",
+        `${i + h}px`
+      );
+    }, (this.host = s).addController(this);
+  }
+  hostConnected() {
+    this.hasSubmenu() && !this.host.disabled && this.addListeners();
+  }
+  hostDisconnected() {
+    this.removeListeners();
+  }
+  hostUpdated() {
+    this.hasSubmenu() && !this.host.disabled ? this.addListeners() : this.removeListeners();
+  }
+  hasSubmenu() {
+    return this.host.hasNestedItems || this.host.hasContent;
+  }
+  addListeners() {
+    this.isConnected || (this.host.addEventListener("mousemove", this.handleMouseMove), this.host.addEventListener("mouseover", this.handleMouseOver), this.host.addEventListener("keydown", this.handleKeyDown), this.host.addEventListener("click", this.handleClick), this.host.addEventListener("focusout", this.handleFocusOut), this.isConnected = !0);
+  }
+  removeListeners() {
+    this.isConnected && (this.host.removeEventListener("mousemove", this.handleMouseMove), this.host.removeEventListener("mouseover", this.handleMouseOver), this.host.removeEventListener("keydown", this.handleKeyDown), this.host.removeEventListener("click", this.handleClick), this.host.removeEventListener("focusout", this.handleFocusOut), this.isConnected = !1);
+  }
+  handleSubmenuEntry(s) {
+    this.hasSubmenu() && (s.preventDefault(), s.stopPropagation(), this.host.opened ? this.host.focusFirstDropdownChild() : (this.enableSubmenu(!1), this.host.updateComplete.then(() => {
+      this.host.focusFirstDropdownChild();
+    })));
+  }
+  setSubmenuState(s, e = !1) {
+    s !== this.host.opened && (s ? (this.host.showDropDown(e), this.host.updateComplete.then(() => {
+      this.updateSafeTriangle();
+    })) : this.host.hideDropDown());
+  }
+  // Shows the submenu. Supports disabling the opening delay for keyboard events
+  enableSubmenu(s = !0) {
+    s ? (window.clearTimeout(this.enableSubmenuTimer), this.enableSubmenuTimer = window.setTimeout(() => {
+      this.setSubmenuState(!0, !0);
+    }, this.submenuOpenDelay)) : this.setSubmenuState(!0, !1);
+  }
+  disableSubmenu() {
+    window.clearTimeout(this.enableSubmenuTimer), this.setSubmenuState(!1);
+  }
+  // Public method to cancel pending submenu opening timer
+  // Used when closing siblings to prevent race conditions
+  cancelPendingOpen() {
+    window.clearTimeout(this.enableSubmenuTimer);
+  }
+}
+export {
+  o as SubmenuController
+};
+//# sourceMappingURL=submenu-controller.js.map

package/dist/components/navigation-menu/submenu-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"submenu-controller.js","sources":["../../../src/components/navigation-menu/submenu-controller.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\n\nimport type DapDSNavigationMenuItem from './navigation-menu-item.component'\n\n/** A reactive controller to manage submenu opening/closing with hover delay and safe triangle */\nexport class SubmenuController implements ReactiveController {\n  private host: ReactiveControllerHost & DapDSNavigationMenuItem\n  private enableSubmenuTimer = -1\n  private isConnected = false\n  private readonly submenuOpenDelay = 100\n\n  constructor(host: ReactiveControllerHost & DapDSNavigationMenuItem) {\n    ;(this.host = host).addController(this)\n  }\n\n  hostConnected() {\n    if (this.hasSubmenu() && !this.host.disabled) {\n      this.addListeners()\n    }\n  }\n\n  hostDisconnected() {\n    this.removeListeners()\n  }\n\n  hostUpdated() {\n    if (this.hasSubmenu() && !this.host.disabled) {\n      this.addListeners()\n    } else {\n      this.removeListeners()\n    }\n  }\n\n  private hasSubmenu(): boolean {\n    return this.host.hasNestedItems || this.host.hasContent\n  }\n\n  private addListeners() {\n    if (!this.isConnected) {\n      this.host.addEventListener('mousemove', this.handleMouseMove)\n      this.host.addEventListener('mouseover', this.handleMouseOver)\n      this.host.addEventListener('keydown', this.handleKeyDown)\n      this.host.addEventListener('click', this.handleClick)\n      this.host.addEventListener('focusout', this.handleFocusOut)\n      this.isConnected = true\n    }\n  }\n\n  private removeListeners() {\n    if (this.isConnected) {\n      this.host.removeEventListener('mousemove', this.handleMouseMove)\n      this.host.removeEventListener('mouseover', this.handleMouseOver)\n      this.host.removeEventListener('keydown', this.handleKeyDown)\n      this.host.removeEventListener('click', this.handleClick)\n      this.host.removeEventListener('focusout', this.handleFocusOut)\n      this.isConnected = false\n    }\n  }\n\n  // Set the safe triangle cursor position\n  private handleMouseMove = (event: MouseEvent) => {\n    this.host.style.setProperty(\n      '--safe-triangle-cursor-x',\n      `${event.clientX}px`,\n    )\n    this.host.style.setProperty(\n      '--safe-triangle-cursor-y',\n      `${event.clientY}px`,\n    )\n  }\n\n  private handleMouseOver = () => {\n    if (this.hasSubmenu()) {\n      this.enableSubmenu(true) // With delay for mouse\n    }\n  }\n\n  private handleSubmenuEntry(event: KeyboardEvent) {\n    if (!this.hasSubmenu()) return\n\n    // Open the submenu (if not open), and set focus to first menuitem\n    event.preventDefault()\n    event.stopPropagation()\n\n    if (this.host.opened) {\n      this.host.focusFirstDropdownChild()\n    } else {\n      this.enableSubmenu(false) // Instant for keyboard\n      this.host.updateComplete.then(() => {\n        this.host.focusFirstDropdownChild()\n      })\n    }\n  }\n\n  // Focus on the first menu-item of a submenu\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const target = event.target as HTMLElement\n\n    // Check if the event is coming from a nested navigation-menu-item\n    // If so, don't handle it - let the nested item handle it\n    const closestNavItem = target.closest('dap-ds-navigation-menu-item')\n    if (closestNavItem && closestNavItem !== this.host) {\n      // This is a nested item, don't handle the event\n      return\n    }\n\n    switch (event.key) {\n      case 'Escape':\n        event.preventDefault()\n        event.stopPropagation()\n        this.disableSubmenu()\n        this.host.focus()\n        break\n      case 'Tab':\n        this.disableSubmenu()\n        break\n      case 'ArrowLeft':\n        // Either focus is currently on the host element or a child\n        if (event.target !== this.host) {\n          event.preventDefault()\n          event.stopPropagation()\n          this.host.focus()\n          this.disableSubmenu()\n        }\n        break\n      case 'ArrowRight':\n        // Only handle ArrowRight for nested items (level > 0)\n        // For top-level items (level 0), let parent handle navigation\n        if (this.host.level > 0) {\n          this.handleSubmenuEntry(event)\n        }\n        break\n      case 'Enter':\n      case ' ':\n        // Only handle Enter/Space when focus is on the host's trigger element\n        // Not when focus is on nested items or links inside nested items\n        // Check if target is the host or is inside the host but not in a nested item\n        if (\n          target === this.host ||\n          (this.host.contains(target) &&\n            !target.closest('dap-ds-navigation-menu-item'))\n        ) {\n          this.handleSubmenuEntry(event)\n        }\n        break\n      default:\n        break\n    }\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    // Clicking on the item which heads the menu does nothing, otherwise hide submenu and propagate\n    if (event.target === this.host) {\n      event.preventDefault()\n      event.stopPropagation()\n    } else if (\n      event.target instanceof Element &&\n      (event.target.tagName.toLowerCase() === 'dap-ds-navigation-menu-item' ||\n        event.target.getAttribute('role')?.startsWith('menuitem'))\n    ) {\n      this.disableSubmenu()\n    }\n  }\n\n  // Close this submenu on focus outside of the parent or any descendants\n  private handleFocusOut = (event: FocusEvent) => {\n    if (\n      event.relatedTarget &&\n      event.relatedTarget instanceof Element &&\n      this.host.contains(event.relatedTarget)\n    ) {\n      return\n    }\n    this.disableSubmenu()\n  }\n\n  // Set the safe triangle values for the submenu when the position changes\n  updateSafeTriangle = () => {\n    const popup = this.host.popup\n    if (!popup || !this.host.opened) {\n      return\n    }\n\n    const { left, top, height } = popup.getBoundingClientRect()\n\n    this.host.style.setProperty('--safe-triangle-submenu-start-x', `${left}px`)\n    this.host.style.setProperty('--safe-triangle-submenu-start-y', `${top}px`)\n    this.host.style.setProperty('--safe-triangle-submenu-end-x', `${left}px`)\n    this.host.style.setProperty(\n      '--safe-triangle-submenu-end-y',\n      `${top + height}px`,\n    )\n  }\n\n  private setSubmenuState(state: boolean, byHover = false) {\n    if (state !== this.host.opened) {\n      if (state) {\n        this.host.showDropDown(byHover)\n        // Update safe triangle after opening\n        this.host.updateComplete.then(() => {\n          this.updateSafeTriangle()\n        })\n      } else {\n        this.host.hideDropDown()\n      }\n    }\n  }\n\n  // Shows the submenu. Supports disabling the opening delay for keyboard events\n  private enableSubmenu(delay = true) {\n    if (delay) {\n      window.clearTimeout(this.enableSubmenuTimer)\n      this.enableSubmenuTimer = window.setTimeout(() => {\n        // Mark as opened by hover when using delay (mouse hover)\n        this.setSubmenuState(true, true)\n      }, this.submenuOpenDelay)\n    } else {\n      // Keyboard navigation - not opened by hover\n      this.setSubmenuState(true, false)\n    }\n  }\n\n  private disableSubmenu() {\n    window.clearTimeout(this.enableSubmenuTimer)\n    this.setSubmenuState(false)\n  }\n\n  // Public method to cancel pending submenu opening timer\n  // Used when closing siblings to prevent race conditions\n  public cancelPendingOpen() {\n    window.clearTimeout(this.enableSubmenuTimer)\n  }\n}\n"],"names":["SubmenuController","host","event","target","closestNavItem","_a","popup","left","top","height","state","byHover","delay"],"mappings":"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"}

package/dist/components/notification-badge/notification-badge.component.d.ts

@@ -31,6 +31,7 @@ type BadgeVariant = 'round' | 'dot';
  * @cssproperty --dds-notification-badge-circular-offset-y - Vertical offset for circular positioning (default: -20px)
  */
 export default class DapDSNotificationBadge extends DdsElement {
+    static tagName: string;
     /** The content of the badge, it can be a number or a string. Content tried to be parsed as a number, if it's not a number, it will be displayed as a string. */
     badgeContent: string | number;
     /** This switch decides the visibility of the badge. This property overrides the badge content visibility. Use it for explicit control. */

package/dist/components/notification-badge/notification-badge.component.js

@@ -0,0 +1,167 @@
+import { clsx as d } 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 o } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { state as m } from "../../node_modules/@lit/reactive-element/decorators/state.js";
+import { html as y } from "../../node_modules/lit-html/static.js";
+import { DdsElement as C } from "../../internal/dds-hu-element.js";
+import g from "./notification-badge.scss.js";
+import { unsafeCSS as b } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var v = Object.defineProperty, s = (p, t, e, c) => {
+  for (var r = void 0, n = p.length - 1, l; n >= 0; n--)
+    (l = p[n]) && (r = l(t, e, r) || r);
+  return r && v(t, e, r), r;
+};
+const f = class f extends C {
+  constructor() {
+    super(...arguments), this.visible = !1, this.showZero = !1, this.type = "negative", this.variant = "round", this.max = 0, this.placement = "top-end", this.circularAuto = !0, this.forceCircular = !1, this.isCircularElement = !1, this.circularOffset = { x: 0, y: 0 };
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this.detectCircularElement();
+  }
+  detectCircularElement() {
+    var n;
+    if (!this.circularAuto && !this.forceCircular)
+      return;
+    if (this.forceCircular) {
+      this.isCircularElement = !0, this.calculateCircularOffset();
+      return;
+    }
+    const t = (n = this.shadowRoot) == null ? void 0 : n.querySelector("slot"), e = t == null ? void 0 : t.assignedElements();
+    if (!(e != null && e.length))
+      return;
+    const c = e[0], r = this.isElementCircular(c);
+    r !== this.isCircularElement && (this.isCircularElement = r, r && this.calculateCircularOffset());
+  }
+  isElementCircular(t) {
+    if (t.tagName.toLowerCase().includes("avatar"))
+      return !0;
+    const c = getComputedStyle(t).borderRadius;
+    if (c === "50%" || c.includes("50%"))
+      return !0;
+    const r = t.getBoundingClientRect(), n = Math.min(r.width, r.height);
+    return parseInt(c, 10) >= n * 0.4 ? !0 : Array.from(document.styleSheets).flatMap((a) => {
+      try {
+        return Array.from(a.cssRules);
+      } catch (u) {
+        return [];
+      }
+    }).filter((a) => a instanceof CSSStyleRule).some((a) => {
+      const u = a.selectorText;
+      return (u == null ? void 0 : u.includes("circle")) || (u == null ? void 0 : u.includes("rounded"));
+    });
+  }
+  calculateCircularOffset() {
+    var a;
+    const t = (a = this.shadowRoot) == null ? void 0 : a.querySelector("slot"), e = t == null ? void 0 : t.assignedElements();
+    if (!(e != null && e.length))
+      return;
+    const r = e[0].getBoundingClientRect(), n = Math.min(r.width, r.height) / 2, l = this.getAngleForPlacement(this.placement), h = n * 0.65;
+    this.circularOffset = {
+      x: Math.cos(l) * h,
+      y: Math.sin(l) * h
+    }, this.style.setProperty(
+      "--dds-notification-badge-circular-offset-x",
+      `${this.circularOffset.x}px`
+    ), this.style.setProperty(
+      "--dds-notification-badge-circular-offset-y",
+      `${this.circularOffset.y}px`
+    );
+  }
+  getAngleForPlacement(t) {
+    switch (t) {
+      case "top-end":
+        return -Math.PI / 4;
+      // -45 degrees (top-right)
+      case "top-start":
+        return -3 * Math.PI / 4;
+      // -135 degrees (top-left)
+      case "bottom-end":
+        return Math.PI / 4;
+      // 45 degrees (bottom-right)
+      case "bottom-start":
+        return 3 * Math.PI / 4;
+      // 135 degrees (bottom-left)
+      default:
+        return -Math.PI / 4;
+    }
+  }
+  updated(t) {
+    super.updated(t), (t.has("placement") || t.has("forceCircular") || t.has("circularAuto")) && this.detectCircularElement();
+  }
+  parseBadgeContent(t) {
+    if (!t || typeof t == "string" && !t.trim())
+      return "";
+    const e = typeof t == "number" ? t : parseInt(t, 10);
+    return isNaN(e) ? t : e;
+  }
+  handleMax(t, e) {
+    return t > e ? `${e}+` : t.toString();
+  }
+  renderContent() {
+    const t = this.parseBadgeContent(this.badgeContent);
+    return t === 0 && !this.showZero ? "" : this.max > 0 && typeof t == "number" ? this.handleMax(t, this.max).toString() : t.toString();
+  }
+  get hide() {
+    return !this.visible && !this.renderContent();
+  }
+  render() {
+    return y`<div part="base" class=${d("notification-badge")}>
+      <slot></slot>
+      <div
+        part="noty"
+        class=${d(
+      "notification-badge__info",
+      `notification-badge__info--${this.type}`,
+      `notification-badge__info--${this.placement}`,
+      `notification-badge__info--${this.variant}`,
+      {
+        "notification-badge__info--hidden": this.hide,
+        "notification-badge__info--circular": this.isCircularElement
+      }
+    )}>
+        ${this.renderContent()}
+      </div>
+    </div>`;
+  }
+};
+f.tagName = "dap-ds-notification-badge", f.styles = b(g);
+let i = f;
+s([
+  o({ type: String })
+], i.prototype, "badgeContent");
+s([
+  o({ type: Boolean })
+], i.prototype, "visible");
+s([
+  o({ type: Boolean })
+], i.prototype, "showZero");
+s([
+  o()
+], i.prototype, "type");
+s([
+  o()
+], i.prototype, "variant");
+s([
+  o({ type: Number })
+], i.prototype, "max");
+s([
+  o({ reflect: !0 })
+], i.prototype, "placement");
+s([
+  o({ type: Boolean, attribute: "circular-auto" })
+], i.prototype, "circularAuto");
+s([
+  o({ type: Boolean, attribute: "force-circular" })
+], i.prototype, "forceCircular");
+s([
+  m()
+], i.prototype, "isCircularElement");
+s([
+  m()
+], i.prototype, "circularOffset");
+export {
+  i as default
+};
+//# sourceMappingURL=notification-badge.component.js.map

package/dist/components/notification-badge/notification-badge.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-badge.component.js","sources":["../../../src/components/notification-badge/notification-badge.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { BadgeType, PopupPlacement } from '@/dap-design-system'\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport styles from './notification-badge.scss?inline'\n\ntype BadgeVariant = 'round' | 'dot'\n\n/**\n * `dap-ds-notification-badge`\n * @summary A notification badge component is a user interface element that visually indicates the presence of new information or updates, often displaying a numeric count of unread notifications, messages, or items requiring attention.\n * @element dap-ds-notification-badge\n * @title - Notification badge\n *\n * @slot - The content of the notification badge.\n *\n * @csspart base - The main container of the notification badge.\n * @csspart noty - The notification badge container.\n *\n * @cssproperty --dds-notification-badge-size - Controls the overall size of the notification badge (default: var(--dds-spacing-500))\n * @cssproperty --dds-notification-badge-min-width - Minimum width of the notification badge (default: var(--dds-spacing-500))\n * @cssproperty --dds-notification-badge-height - Height of the notification badge (default: var(--dds-spacing-500))\n * @cssproperty --dds-notification-badge-padding - Padding inside the notification badge (default: 0 var(--dds-spacing-150))\n * @cssproperty --dds-notification-badge-border-radius - Border radius of the notification badge (default: var(--dds-radius-base))\n * @cssproperty --dds-notification-badge-font-size - Font size of the notification badge text (default: var(--dds-font-xs))\n * @cssproperty --dds-notification-badge-dot-size - Size of the dot variant (default: var(--dds-spacing-200))\n * @cssproperty --dds-notification-badge-color - Text color of the notification badge (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-notification-badge-neutral-bg - Background color for neutral type (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-notification-badge-brand-bg - Background color for brand type (default: var(--dds-text-brand-subtle))\n * @cssproperty --dds-notification-badge-info-bg - Background color for info type (default: var(--dds-text-informative-subtle))\n * @cssproperty --dds-notification-badge-positive-bg - Background color for positive type (default: var(--dds-text-positive-subtle))\n * @cssproperty --dds-notification-badge-warning-bg - Background color for warning type (default: var(--dds-text-warning-subtle))\n * @cssproperty --dds-notification-badge-negative-bg - Background color for negative type (default: var(--dds-text-negative-subtle))\n * @cssproperty --dds-notification-badge-circular-offset-x - Horizontal offset for circular positioning (default: 20px)\n * @cssproperty --dds-notification-badge-circular-offset-y - Vertical offset for circular positioning (default: -20px)\n */\nexport default class DapDSNotificationBadge extends DdsElement {\n  static tagName = 'dap-ds-notification-badge'\n\n  /** The content of the badge, it can be a number or a string. Content tried to be parsed as a number, if it's not a number, it will be displayed as a string. */\n  @property({ type: String }) badgeContent: string | number\n\n  /** This switch decides the visibility of the badge. This property overrides the badge content visibility. Use it for explicit control. */\n  @property({ type: Boolean }) visible: boolean = false\n\n  /** This switch decides whether to show a zero value or not. */\n  @property({ type: Boolean }) showZero: boolean = false\n\n  /** The color scheme of the badge\n   * @type { 'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative' }\n   */\n  @property() type: BadgeType = 'negative'\n\n  /** The variant of the badge.\n   * @type { 'round' | 'dot' }\n   */\n  @property() variant: BadgeVariant = 'round'\n\n  /** The cap value of badge content, if the badge content is greater than the max value, it will be displayed as `[number]+`. Zero means no cap. */\n  @property({ type: Number }) max: number = 0\n\n  /** The position of the badge content around the slot content.\n   * @type { 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' }\n   */\n  @property({ reflect: true }) placement: PopupPlacement = 'top-end'\n\n  /** Whether to automatically detect circular elements and adjust positioning accordingly */\n  @property({ type: Boolean, attribute: 'circular-auto' })\n  circularAuto: boolean = true\n\n  /** Override circular positioning detection - forces circular positioning calculation */\n  @property({ type: Boolean, attribute: 'force-circular' })\n  forceCircular: boolean = false\n\n  @state() private isCircularElement: boolean = false\n  @state() private circularOffset: { x: number; y: number } = { x: 0, y: 0 }\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    // Detect circular elements after first render\n    // This will schedule an update if needed, which is expected for initial setup\n    this.detectCircularElement()\n  }\n\n  private detectCircularElement(): void {\n    if (!this.circularAuto && !this.forceCircular) {\n      return\n    }\n\n    if (this.forceCircular) {\n      this.isCircularElement = true\n      this.calculateCircularOffset()\n      return\n    }\n\n    const slotElement = this.shadowRoot?.querySelector('slot')\n    const slottedElements = slotElement?.assignedElements()\n\n    if (!slottedElements?.length) {\n      return\n    }\n\n    const element = slottedElements[0] as HTMLElement\n\n    // Check if element is likely circular based on various indicators\n    const isCircular = this.isElementCircular(element)\n\n    if (isCircular !== this.isCircularElement) {\n      this.isCircularElement = isCircular\n      if (isCircular) {\n        this.calculateCircularOffset()\n      }\n    }\n  }\n\n  private isElementCircular(element: HTMLElement): boolean {\n    // Check for avatar component\n    if (element.tagName.toLowerCase().includes('avatar')) {\n      return true\n    }\n\n    // Check computed styles for circular indicators\n    const computedStyle = getComputedStyle(element)\n    const borderRadius = computedStyle.borderRadius\n\n    // If border-radius is 50% or close to half the width/height, it's likely circular\n    if (borderRadius === '50%' || borderRadius.includes('50%')) {\n      return true\n    }\n\n    // Check if border-radius value is close to half the element size\n    const rect = element.getBoundingClientRect()\n    const minDimension = Math.min(rect.width, rect.height)\n    const radiusValue = parseInt(borderRadius, 10)\n\n    if (radiusValue >= minDimension * 0.4) {\n      return true\n    }\n\n    // Check CSS custom properties that might indicate circular shape\n    const customProps = Array.from(document.styleSheets)\n      .flatMap(sheet => {\n        try {\n          return Array.from(sheet.cssRules)\n        } catch {\n          return []\n        }\n      })\n      .filter(rule => rule instanceof CSSStyleRule)\n      .some(rule => {\n        const selectorText = (rule as CSSStyleRule).selectorText\n        return (\n          selectorText?.includes('circle') || selectorText?.includes('rounded')\n        )\n      })\n\n    return customProps\n  }\n\n  private calculateCircularOffset(): void {\n    const slotElement = this.shadowRoot?.querySelector('slot')\n    const slottedElements = slotElement?.assignedElements()\n\n    if (!slottedElements?.length) {\n      return\n    }\n\n    const element = slottedElements[0] as HTMLElement\n    const rect = element.getBoundingClientRect()\n    const radius = Math.min(rect.width, rect.height) / 2\n\n    // Calculate offset based on placement for circular positioning\n    // This positions the badge on the circular border rather than the rectangular corner\n    const angle = this.getAngleForPlacement(this.placement)\n    const offsetDistance = radius * 0.65 // Slightly inside the border for better visual alignment\n\n    this.circularOffset = {\n      x: Math.cos(angle) * offsetDistance,\n      y: Math.sin(angle) * offsetDistance,\n    }\n\n    // Update CSS custom properties for positioning\n    this.style.setProperty(\n      '--dds-notification-badge-circular-offset-x',\n      `${this.circularOffset.x}px`,\n    )\n    this.style.setProperty(\n      '--dds-notification-badge-circular-offset-y',\n      `${this.circularOffset.y}px`,\n    )\n  }\n\n  private getAngleForPlacement(placement: PopupPlacement): number {\n    // Convert placement to angle in radians for circular positioning\n    switch (placement) {\n      case 'top-end':\n        return -Math.PI / 4 // -45 degrees (top-right)\n      case 'top-start':\n        return (-3 * Math.PI) / 4 // -135 degrees (top-left)\n      case 'bottom-end':\n        return Math.PI / 4 // 45 degrees (bottom-right)\n      case 'bottom-start':\n        return (3 * Math.PI) / 4 // 135 degrees (bottom-left)\n      default:\n        return -Math.PI / 4 // Default to top-end\n    }\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties)\n\n    if (\n      changedProperties.has('placement') ||\n      changedProperties.has('forceCircular') ||\n      changedProperties.has('circularAuto')\n    ) {\n      this.detectCircularElement()\n    }\n  }\n\n  private parseBadgeContent(str: string | number): string | number {\n    if (!str || (typeof str === 'string' && !str.trim())) {\n      return ''\n    }\n    const parsed = typeof str === 'number' ? str : parseInt(str as string, 10)\n    if (isNaN(parsed)) {\n      return str\n    }\n    return parsed\n  }\n\n  private handleMax(value: number, max: number): string {\n    return value > max ? `${max}+` : value.toString()\n  }\n\n  private renderContent(): string {\n    const parsedContent = this.parseBadgeContent(this.badgeContent)\n    if (parsedContent === 0 && !this.showZero) {\n      return ''\n    }\n    if (this.max > 0 && typeof parsedContent === 'number') {\n      return this.handleMax(parsedContent, this.max).toString()\n    }\n    return parsedContent.toString()\n  }\n\n  private get hide(): boolean {\n    return !this.visible && !!this.renderContent() === false\n  }\n\n  render() {\n    return html`<div part=\"base\" class=${clsx('notification-badge')}>\n      <slot></slot>\n      <div\n        part=\"noty\"\n        class=${clsx(\n          'notification-badge__info',\n          `notification-badge__info--${this.type}`,\n          `notification-badge__info--${this.placement}`,\n          `notification-badge__info--${this.variant}`,\n          {\n            'notification-badge__info--hidden': this.hide,\n            'notification-badge__info--circular': this.isCircularElement,\n          },\n        )}>\n        ${this.renderContent()}\n      </div>\n    </div>`\n  }\n}\n"],"names":["_DapDSNotificationBadge","DdsElement","_changedProperties","slotElement","_a","slottedElements","element","isCircular","borderRadius","rect","minDimension","sheet","e","rule","selectorText","radius","angle","offsetDistance","placement","changedProperties","str","parsed","value","max","parsedContent","html","clsx","unsafeCSS","styles","DapDSNotificationBadge","__decorateClass","property","state"],"mappings":"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"}

package/dist/components/notification-badge/notification-badge.d.ts

@@ -1,4 +1,5 @@
-import { default as DapDSNotificationBadge } from './notification-badge.component.js';
+import { default as DapDSNotificationBadge } from './notification-badge.component';
+export * from './notification-badge.component';
 export default DapDSNotificationBadge;
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/notification-badge/notification-badge.js

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

package/dist/components/notification-badge/notification-badge.js.map

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

package/dist/components/notification-badge/notification-badge.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{display:inline-block;position:relative;width:max-content;--dds-notification-badge-size: var(--dds-spacing-500);--dds-notification-badge-min-width: var(--dds-spacing-500);--dds-notification-badge-height: var(--dds-spacing-500);--dds-notification-badge-padding: 0 var(--dds-spacing-150);--dds-notification-badge-border-radius: var(--dds-radius-base);--dds-notification-badge-font-size: var(--dds-font-xs);--dds-notification-badge-dot-size: var(--dds-spacing-200);--dds-notification-badge-circular-offset-x: 20px;--dds-notification-badge-circular-offset-y: -20px;--dds-notification-badge-color: var(--dds-background-neutral-medium);--dds-notification-badge-neutral-bg: var(--dds-text-neutral-subtle);--dds-notification-badge-brand-bg: var(--dds-text-brand-subtle);--dds-notification-badge-info-bg: var(--dds-text-informative-subtle);--dds-notification-badge-positive-bg: var(--dds-text-positive-subtle);--dds-notification-badge-warning-bg: var(--dds-text-warning-subtle);--dds-notification-badge-negative-bg: var(--dds-text-negative-subtle)}.notification-badge__info{transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:flex;position:absolute;z-index:1;box-sizing:border-box;flex-flow:row wrap;align-items:center;justify-content:center;min-width:var(--dds-notification-badge-min-width);height:var(--dds-notification-badge-height);padding:var(--dds-notification-badge-padding);border-radius:var(--dds-notification-badge-border-radius);background-color:var(--dds-notification-badge-neutral-bg);color:var(--dds-notification-badge-color);font-size:var(--dds-notification-badge-font-size);line-height:1}.notification-badge__info--neutral{background-color:var(--dds-notification-badge-neutral-bg)}.notification-badge__info--brand{background-color:var(--dds-notification-badge-brand-bg)}.notification-badge__info--info{background-color:var(--dds-notification-badge-info-bg)}.notification-badge__info--positive{background-color:var(--dds-notification-badge-positive-bg)}.notification-badge__info--warning{background-color:var(--dds-notification-badge-warning-bg)}.notification-badge__info--negative{background-color:var(--dds-notification-badge-negative-bg)}.notification-badge__info--dot{width:var(--dds-notification-badge-dot-size);min-width:var(--dds-notification-badge-dot-size);height:var(--dds-notification-badge-dot-size);padding:0;color:transparent}.notification-badge__info--round{border-radius:var(--dds-radius-rounded)}.notification-badge__info--top-start{top:0;left:0;transform:scale(1) translate(-50%,-50%);transform-origin:0% 0%}.notification-badge__info--top-end{top:0;right:0;transform:scale(1) translate(50%,-50%);transform-origin:100% 0%}.notification-badge__info--bottom-start{bottom:0;left:0;transform:scale(1) translate(-50%,50%);transform-origin:0% 100%}.notification-badge__info--bottom-end{right:0;bottom:0;transform:scale(1) translate(50%,50%);transform-origin:100% 100%}.notification-badge__info--hidden{transform:scale(0) translate(50%,-50%)}.notification-badge__info--circular.notification-badge__info--top-start{top:50%;left:50%;transform:translate(calc(-50% + var(--dds-notification-badge-circular-offset-x) - 50%),calc(-50% + var(--dds-notification-badge-circular-offset-y) - 50%))}.notification-badge__info--circular.notification-badge__info--top-end{top:50%;right:50%;transform:translate(calc(50% + var(--dds-notification-badge-circular-offset-x) + 50%),calc(-50% + var(--dds-notification-badge-circular-offset-y) - 50%))}.notification-badge__info--circular.notification-badge__info--bottom-start{bottom:50%;left:50%;transform:translate(calc(-50% + var(--dds-notification-badge-circular-offset-x) - 50%),calc(50% + var(--dds-notification-badge-circular-offset-y) + 50%))}.notification-badge__info--circular.notification-badge__info--bottom-end{right:50%;bottom:50%;transform:translate(calc(50% + var(--dds-notification-badge-circular-offset-x) + 50%),calc(50% + var(--dds-notification-badge-circular-offset-y) + 50%))}";
+export {
+  i as default
+};
+//# sourceMappingURL=notification-badge.scss.js.map

package/dist/components/notification-badge/notification-badge.scss.js.map

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

package/dist/components/number-input/number-input.component.d.ts

@@ -1,5 +1,9 @@
 import { PropertyValues } from 'lit';
+import { default as DapDSIcon } from '../icon/icon.component';
+import { default as DapDSIconButton } from '../icon-button/icon-button.component';
 import { InputBaseElement } from '../input/input-base-element';
+import { default as DapDSSpinner } from '../spinner/spinner.component';
+import { default as DapDSStack } from '../stack/stack.component';
 /**
  * `dap-ds-number-input`
  * @summary A number input component.
@@ -103,6 +107,13 @@ import { InputBaseElement } from '../input/input-base-element';
  * @csspart increment-button-content - The content of the increment button.
  */
 export default class DapDSNumberInput extends InputBaseElement {
+    static tagName: string;
+    static dependencies: {
+        'dap-ds-stack': typeof DapDSStack;
+        'dap-ds-spinner': typeof DapDSSpinner;
+        'dap-ds-icon-button': typeof DapDSIconButton;
+        'dap-ds-icon': typeof DapDSIcon;
+    };
     constructor();
     private readonly inputElement;
     thousandSeparator: string;

package/dist/components/number-input/number-input.component.js

@@ -0,0 +1,228 @@
+import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as f, html as d } from "../../node_modules/lit-html/lit-html.js";
+import "../../node_modules/lit-element/lit-element.js";
+import { property as l } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { state as S } from "../../node_modules/@lit/reactive-element/decorators/state.js";
+import { query as g } from "../../node_modules/@lit/reactive-element/decorators/query.js";
+import { ifDefined as h } from "../../node_modules/lit-html/directives/if-defined.js";
+import "../../localization/localization.js";
+import y from "../icon/icon.component.js";
+import V from "../icon-button/icon-button.component.js";
+import { InputBaseElement as b } from "../input/input-base-element.js";
+import v from "../spinner/spinner.component.js";
+import w from "../stack/stack.component.js";
+import { translate as c } from "../../node_modules/lit-i18n/src/lit-i18n.js";
+var k = Object.defineProperty, n = (p, t, e, a) => {
+  for (var i = void 0, r = p.length - 1, u; r >= 0; r--)
+    (u = p[r]) && (i = u(t, e, i) || i);
+  return i && k(t, e, i), i;
+};
+const o = class o extends b {
+  constructor() {
+    super(), this.thousandSeparator = "", this.decimalSeparator = ",", this.allowNegative = "true", this.allowDecimal = "true", this.hideControls = !1, this.decrementButtonTestId = "number-input-decrement-button", this.incrementButtonTestId = "number-input-increment-button", this.formattedValue = "", this.valueSetInternally = !1, this.manualValueSet = !0, this.type = "text";
+  }
+  get _thousandSeparator() {
+    var t;
+    return (t = this.thousandSeparator) == null ? void 0 : t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this.inputMode = this.inputMode || (this.allowDecimal === "true" ? "decimal" : "numeric"), this.inputElement.addEventListener(
+      "input",
+      (e) => this.handleInput(e)
+    ), this.inputElement.addEventListener(
+      "keydown",
+      (e) => this.handleKeydown(e)
+    ), this.inputElement.addEventListener("blur", () => this.applyPadStart()), this.value !== void 0 && (this.formattedValue = this.getMaskedValue(this.value), this.inputElement.value = this.formattedValue, this.applyPadStart());
+  }
+  handleKeydown(t) {
+    this.disabled || this.readonly || (t.key === "ArrowUp" ? (t.preventDefault(), this._increment()) : t.key === "ArrowDown" ? (t.preventDefault(), this._decrement()) : (t.key === "e" || t.key === "E" || t.key === "+" || t.key === "-" && this.allowNegative !== "true") && t.preventDefault());
+  }
+  getMaskedValue(t) {
+    if (!t && t !== 0) return "";
+    let e = t;
+    if (typeof e == "number" && e.toString().includes(".") && (e = e.toString().replace(".", this.decimalSeparator)), this.allowNegative === "true" && t.toString().startsWith("-") ? e = "-" + this.getMaskedValue(t.toString().substring(1)) : this.allowNegative === "false" && t.toString().startsWith("-") && (e = t.toString().substring(1)), this.thousandSeparator) {
+      const a = e.toString().split(this.decimalSeparator);
+      a[0] = a[0].replace(
+        /\B(?=(\d{3})+(?!\d))/g,
+        this.thousandSeparator
+      ), e = a.join(this.decimalSeparator);
+    }
+    if (this.allowDecimal === "true" && this.decimalScale !== void 0) {
+      const a = e.toString().split(this.decimalSeparator);
+      a[1] && (a[1] = a[1].slice(0, this.decimalScale), e = a.join(this.decimalSeparator));
+    } else this.allowDecimal === "false" && (e = e.toString().split(this.decimalSeparator)[0]);
+    return e.toString();
+  }
+  isBackspaceOrDelete(t) {
+    return t.inputType === "deleteContentBackward" || t.inputType === "deleteContentForward";
+  }
+  handleEmptyValue() {
+    this.valueSetInternally = !0, this.value = "", this.formattedValue = "", this.inputElement.value = "", this.emit("dds-change", {
+      value: "",
+      formattedValue: ""
+    });
+  }
+  createNumericRegex() {
+    if (this.allowDecimal === "true") {
+      const t = this.decimalSeparator.replace(
+        /[.*+?^${}()|[\]\\]/g,
+        "\\$&"
+      );
+      return this.allowNegative === "true" ? new RegExp(`^-?\\d*${t}?\\d*$`) : new RegExp(`^\\d*${t}?\\d*$`);
+    }
+    return this.allowNegative === "true" ? /^-?\d*$/ : /^\d*$/;
+  }
+  enforceDecimalScale(t) {
+    if (this.decimalScale === void 0 || this.allowDecimal !== "true")
+      return t;
+    const e = t.split(this.decimalSeparator);
+    return e[1] && e[1].length > this.decimalScale ? (e[1] = e[1].slice(0, this.decimalScale), e.join(this.decimalSeparator)) : t;
+  }
+  applyPadStart() {
+    if (!this.padStart || !this.formattedValue) return;
+    const t = this.formattedValue.padStart(this.padStart, "0");
+    this.formattedValue = t, this.inputElement.value = t;
+  }
+  convertToNumericValue(t) {
+    if (!t) return t;
+    const e = t.replace(this.decimalSeparator, "."), a = parseFloat(e);
+    return isNaN(a) ? t : a;
+  }
+  handleInput(t) {
+    const e = t.target;
+    let a = e.value;
+    if (this.thousandSeparator && (a = a.replace(new RegExp(this._thousandSeparator, "g"), "")), a === "") {
+      this.handleEmptyValue(), this.setValidity();
+      return;
+    }
+    if (this.allowNegative === "false" && a.includes("-")) {
+      e.value = a.replace("-", ""), this.formattedValue = a.replace("-", ""), this.setValidity();
+      return;
+    }
+    if (!this.createNumericRegex().test(a) && !this.isBackspaceOrDelete(t)) {
+      e.value = this.formattedValue, this.setValidity();
+      return;
+    }
+    a = this.enforceDecimalScale(a);
+    const r = this.convertToNumericValue(a);
+    this.valueSetInternally = !0, this.value = r, this.formattedValue = this.getMaskedValue(a), e.value = this.formattedValue, this.emit("dds-change", {
+      value: this.value,
+      formattedValue: this.formattedValue
+    }), this.setValidity();
+  }
+  updated(t) {
+    var e;
+    t.has("value") && (this.valueSetInternally || (this.formattedValue = this.getMaskedValue((e = this.value) != null ? e : "")), this.valueSetInternally = !1, this.inputElement.value = this.formattedValue, this.setValidity());
+  }
+  formResetCallback() {
+    super.formResetCallback(), this.formattedValue = this.getMaskedValue(this.value || ""), this.inputElement.value = this.formattedValue;
+  }
+  _decrement() {
+    var i, r;
+    if (this.disabled || this.readonly) return;
+    const t = this.value ? parseFloat(this.value.toString().replace(this._thousandSeparator, "")) : 0, e = typeof this.step == "number" ? this.step : parseFloat((r = (i = this.step) == null ? void 0 : i.toString()) != null ? r : "1");
+    let a = t - e;
+    this.min !== void 0 && a < this.min && (a = this.min), this.valueSetInternally = !0, this.value = a, this.formattedValue = this.getMaskedValue(a), this.inputElement.value = this.formattedValue, this.emit("dds-change", {
+      value: this.value,
+      formattedValue: this.formattedValue
+    });
+  }
+  _increment() {
+    var i, r;
+    if (this.disabled || this.readonly) return;
+    const t = this.value ? parseFloat(this.value.toString().replace(this.thousandSeparator, "")) : 0, e = typeof this.step == "number" ? this.step : parseFloat((r = (i = this.step) == null ? void 0 : i.toString()) != null ? r : "1");
+    let a = t + e;
+    this.max !== void 0 && a > this.max && (a = this.max), this.valueSetInternally = !0, this.value = a, this.formattedValue = this.getMaskedValue(a), this.inputElement.value = this.formattedValue, this.emit("dds-change", {
+      value: this.value,
+      formattedValue: this.formattedValue
+    });
+  }
+  render() {
+    return this.renderInput(
+      d` <span
+        part="postfix"
+        class=${m("input__addon-postfix number-input")}>
+        ${!(this.disabled || this.readonly) && !this.hideControls ? d` <dap-ds-stack direction="row" tabindex="-1" spacing="300">
+              ${this.loading ? d`<dap-ds-spinner size="lg"></dap-ds-spinner>` : f}
+              <dap-ds-icon-button
+                part="decrement-button"
+                data-testid=${this.decrementButtonTestId}
+                exportparts="base: decrement-button-base, content: decrement-button-content"
+                size=${h(this.size)}
+                @click=${this._decrement}
+                aria-label="${c("decrease")}"
+                .disabled=${this.disabled}>
+                <slot name="decrement-icon">
+                  <dap-ds-icon
+                    size="lg"
+                    name="subtract-line"
+                    part="decrement-icon"
+                    exportparts="icon: decrement-icon, base: decrement-icon-base"></dap-ds-icon>
+                </slot>
+              </dap-ds-icon-button>
+              <dap-ds-icon-button
+                part="increment-button"
+                data-testid=${this.incrementButtonTestId}
+                exportparts="base: increment-button-base, content: increment-button-content"
+                size=${h(this.size)}
+                @click=${this._increment}
+                aria-label="${c("increase")}"
+                .disabled=${this.disabled}>
+                <slot name="increment-icon">
+                  <dap-ds-icon
+                    size="lg"
+                    name="add-line"
+                    part="increment-icon"
+                    exportparts="icon: increment-icon, base: increment-icon-base"></dap-ds-icon>
+                </slot>
+              </dap-ds-icon-button>
+            </dap-ds-stack>` : ""}
+      </span>`
+    );
+  }
+};
+o.tagName = "dap-ds-number-input", o.dependencies = {
+  "dap-ds-stack": w,
+  "dap-ds-spinner": v,
+  "dap-ds-icon-button": V,
+  "dap-ds-icon": y
+};
+let s = o;
+n([
+  g("input")
+], s.prototype, "inputElement");
+n([
+  l({ type: String })
+], s.prototype, "thousandSeparator");
+n([
+  l({ type: String })
+], s.prototype, "decimalSeparator");
+n([
+  l({ type: Number })
+], s.prototype, "decimalScale");
+n([
+  l({ type: String })
+], s.prototype, "allowNegative");
+n([
+  l({ type: String })
+], s.prototype, "allowDecimal");
+n([
+  l({ type: Boolean })
+], s.prototype, "hideControls");
+n([
+  l({ type: Number })
+], s.prototype, "padStart");
+n([
+  l()
+], s.prototype, "decrementButtonTestId");
+n([
+  l()
+], s.prototype, "incrementButtonTestId");
+n([
+  S()
+], s.prototype, "formattedValue");
+export {
+  s as default
+};
+//# sourceMappingURL=number-input.component.js.map