dap-design-system 0.62.4 → 0.63.1

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

@@ -1,19 +1,15 @@
-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);
+import { clsx as p } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as y } from "lit";
+import { property as a, state as m } from "lit/decorators.js";
+import { html as C } from "lit/static-html.js";
+import { DdsElement as g } from "../../internal/dds-hu-element.js";
+import b from "./notification-badge.scss.js";
+var v = Object.defineProperty, s = (d, t, e, c) => {
+  for (var r = void 0, n = d.length - 1, l; n >= 0; n--)
+    (l = d[n]) && (r = l(t, e, r) || r);
   return r && v(t, e, r), r;
 };
-const f = class f extends C {
+const f = class f extends g {
   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 };
   }
@@ -41,20 +37,20 @@ const f = class f extends C {
     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) => {
+    return parseInt(c, 10) >= n * 0.4 ? !0 : Array.from(document.styleSheets).flatMap((o) => {
       try {
-        return Array.from(a.cssRules);
+        return Array.from(o.cssRules);
       } catch (u) {
         return [];
       }
-    }).filter((a) => a instanceof CSSStyleRule).some((a) => {
-      const u = a.selectorText;
+    }).filter((o) => o instanceof CSSStyleRule).some((o) => {
+      const u = o.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();
+    var o;
+    const t = (o = this.shadowRoot) == null ? void 0 : o.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;
@@ -107,11 +103,11 @@ const f = class f extends C {
     return !this.visible && !this.renderContent();
   }
   render() {
-    return y`<div part="base" class=${d("notification-badge")}>
+    return C`<div part="base" class=${p("notification-badge")}>
       <slot></slot>
       <div
         part="noty"
-        class=${d(
+        class=${p(
       "notification-badge__info",
       `notification-badge__info--${this.type}`,
       `notification-badge__info--${this.placement}`,
@@ -126,34 +122,34 @@ const f = class f extends C {
     </div>`;
   }
 };
-f.tagName = "dap-ds-notification-badge", f.styles = b(g);
+f.tagName = "dap-ds-notification-badge", f.styles = y(b);
 let i = f;
 s([
-  o({ type: String })
+  a({ type: String })
 ], i.prototype, "badgeContent");
 s([
-  o({ type: Boolean })
+  a({ type: Boolean })
 ], i.prototype, "visible");
 s([
-  o({ type: Boolean })
+  a({ type: Boolean })
 ], i.prototype, "showZero");
 s([
-  o()
+  a()
 ], i.prototype, "type");
 s([
-  o()
+  a()
 ], i.prototype, "variant");
 s([
-  o({ type: Number })
+  a({ type: Number })
 ], i.prototype, "max");
 s([
-  o({ reflect: !0 })
+  a({ reflect: !0 })
 ], i.prototype, "placement");
 s([
-  o({ type: Boolean, attribute: "circular-auto" })
+  a({ type: Boolean, attribute: "circular-auto" })
 ], i.prototype, "circularAuto");
 s([
-  o({ type: Boolean, attribute: "force-circular" })
+  a({ type: Boolean, attribute: "force-circular" })
 ], i.prototype, "forceCircular");
 s([
   m()

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

@@ -1 +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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"}
+{"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/number-input/number-input.component.d.ts

@@ -105,6 +105,13 @@ import { default as DapDSStack } from '../stack/stack.component';
  * @csspart increment-button-base - The base of the increment button.
  * @csspart decrement-button-content - The content of the decrement button.
  * @csspart increment-button-content - The content of the increment button.
+ * @csspart decrement-icon - The icon of the decrement button.
+ * @csspart decrement-icon-base - The base of the decrement icon.
+ * @csspart increment-icon - The icon of the increment button.
+ * @csspart increment-icon-base - The base of the increment icon.
+ * @csspart label-base - The base of the label.
+ * @csspart label-required - The required indicator of the label.
+ * @csspart label-optional - The optional indicator of the label.
  */
 export default class DapDSNumberInput extends InputBaseElement {
     static tagName: string;

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

@@ -1,24 +1,18 @@
-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;
+import { clsx as c } from "../../node_modules/clsx/dist/clsx.js";
+import { nothing as m, html as d } from "lit";
+import { query as f, property as l, state as S } from "lit/decorators.js";
+import { ifDefined as h } from "lit/directives/if-defined.js";
+import g from "../icon/icon.component.js";
+import y from "../icon-button/icon-button.component.js";
+import { InputBaseElement as V } from "../input/input-base-element.js";
+import b from "../spinner/spinner.component.js";
+import v from "../stack/stack.component.js";
+var w = Object.defineProperty, n = (u, t, e, a) => {
+  for (var i = void 0, r = u.length - 1, p; r >= 0; r--)
+    (p = u[r]) && (i = p(t, e, i) || i);
+  return i && w(t, e, i), i;
 };
-const o = class o extends b {
+const o = class o extends V {
   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";
   }
@@ -142,16 +136,16 @@ const o = class o extends b {
     return this.renderInput(
       d` <span
         part="postfix"
-        class=${m("input__addon-postfix number-input")}>
+        class=${c("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}
+              ${this.loading ? d`<dap-ds-spinner size="lg"></dap-ds-spinner>` : m}
               <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")}"
+                aria-label="${this.localize.t("decrease")}"
                 .disabled=${this.disabled}>
                 <slot name="decrement-icon">
                   <dap-ds-icon
@@ -167,7 +161,7 @@ const o = class o extends b {
                 exportparts="base: increment-button-base, content: increment-button-content"
                 size=${h(this.size)}
                 @click=${this._increment}
-                aria-label="${c("increase")}"
+                aria-label="${this.localize.t("increase")}"
                 .disabled=${this.disabled}>
                 <slot name="increment-icon">
                   <dap-ds-icon
@@ -183,14 +177,14 @@ const o = class o extends b {
   }
 };
 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
+  "dap-ds-stack": v,
+  "dap-ds-spinner": b,
+  "dap-ds-icon-button": y,
+  "dap-ds-icon": g
 };
 let s = o;
 n([
-  g("input")
+  f("input")
 ], s.prototype, "inputElement");
 n([
   l({ type: String })

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

@@ -1 +1 @@
-{"version":3,"file":"number-input.component.js","sources":["../../../src/components/number-input/number-input.component.ts"],"sourcesContent":["import { clsx } from 'clsx'\nimport { html, nothing, PropertyValues } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { CommonFormElementSize } from '@/common/types'\nimport { translate } from '@/localization/localization'\n\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport { InputBaseElement } from '../input/input-base-element'\nimport DapDSSpinner from '../spinner/spinner.component'\nimport DapDSStack from '../stack/stack.component'\n\n/**\n * `dap-ds-number-input`\n * @summary A number input component.\n * @element dap-ds-number-input\n * @title - Number input\n *\n * @property {string} label - The label of the input.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} placeholder - The placeholder of the input.\n * @property {string} description - The description of the input.\n * @property {string} tooltip - The tooltip of the input.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input.\n * @property {'success' | 'error'} status - The status of the input. Can be `success` or `error`.\n * @property {'xs' | 'sm' | 'sm'} size - The size of the input. Default is `sm`. Can be `sm` or `lg`.\n * @property {string} name - The name of the input.\n * @property {string} value - The value of the input.\n * @property {string} thousandSeparator - The thousand separator of the input.\n * @property {string} decimalSeparator - The decimal separator of the input.\n * @property {number} decimalScale - The decimal scale of the input.\n * @property {string} allowNegative - The allow negative state of the input.\n * @property {string} allowDecimal - The allow decimal state of the input.\n * @property {boolean} disabled - The disabled state of the input. Default is false.\n * @property {boolean} required - The required state of the input. Default is false.\n * @property {boolean} readonly - The readonly state of the input. Default is false.\n * @property {boolean} autofocus - The autofocus state of the input. Default is false.\n * @property {number} min - The minimum value of the number input.\n * @property {number} max - The maximum value of the number input.\n * @property {number} step - The step value of the number input.\n * @property {string} feedback - The feedback of the input.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the input. Can be `negative`, `positive`, or `warning`.\n * @property {boolean} loading - The loading state of the input. Default is false.\n * @property {boolean} optional - The optional state of the input.\n * @property {string} optionalLabel - The optional label of the input.\n * @property {string} requiredLabel - The required indicator of the input. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {boolean} disableEnter - Disables the enter key from being used to submit the form.\n * @property {boolean} hideControls - Hides the increment and decrement buttons.\n * @property {number} padStart - The number of leading zeros to add to the input.\n *\n * @event {{ value: string }} dds-change - Fired when the input value changes.\n * @event {{ value: string }} dds-input - Fired when the input value changes.\n * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.\n * @event {{ void }} dds-blur - Fired when the input loses focus.\n * @event {{ void }} dds-focus - Emitted when the input gains focus.\n *\n * @slot feedback-icon - The custom icon of the feedback.\n *\n * @cssproperty --dds-input-height-xs - The height of the extra small input. (default: var(--dds-spacing-800) ).\n * @cssproperty --dds-input-height-sm - The height of the small input. (default: var(--dds-spacing-1000)).\n * @cssproperty --dds-input-height-lg - The height of the large input. (default: var(--dds-spacing-1200)).\n * @cssproperty --dds-input-padding-xs - The padding of the extra small input. (default: 0 var(--dds-spacing-200)).\n * @cssproperty --dds-input-padding-sm - The padding of the small input. (default: 0 var(--dds-spacing-300)).\n * @cssproperty --dds-input-padding-lg - The padding of the large input. (default: 0 var(--dds-spacing-400)).\n * @cssproperty --dds-input-font-size-xs - The font size of the extra small input. (default: var(--dds-font-sm)).\n * @cssproperty --dds-input-font-size-sm - The font size of the small input. (default: var(--dds-font-base)).\n * @cssproperty --dds-input-font-size-lg - The font size of the large input. (default: var(--dds-font-lg)).\n * @cssproperty --dds-input-border - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-background - The background color of the input. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-text-color - The text color of the input. (default: var(--dds-text-neutral-base)).\n * @cssproperty --dds-input-border-radius - The border radius of the input. (default: var(--dds-radius-base)).\n * @cssproperty --dds-input-disabled-border - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)).\n * @cssproperty --dds-input-disabled-background - The background color of the disabled input. (default: var(--dds-fields-background-disabled)).\n * @cssproperty --dds-input-disabled-text - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-input-readonly-border - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)).\n * @cssproperty --dds-input-readonly-background - The background color of the readonly input. (default: var(--dds-fields-background-read-only)).\n * @cssproperty --dds-input-readonly-text - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)).\n * @cssproperty --dds-input-success-border - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-error-border - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-background - The background color of the input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-success-background - The background color of the success input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-error-background - The background color of the error input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-border-before - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-addon-border-after - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-addon-border-width-before - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-border-width-after - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n * @cssproperty --dds-input-addon-success-border - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-before - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-after - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-width-before - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-success-border-width-after - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n * @cssproperty --dds-input-addon-error-border-before - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-error-border-after - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-error-border-width-before - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-error-border-width-after - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n *\n * @csspart base - The main number input container.\n * @csspart input - The input element.\n * @csspart label - The label of the input.\n * @csspart description - The description of the input.\n * @csspart feedback - The feedback of the input.\n * @csspart tooltip - The tooltip of the input.\n * @csspart addon-before - The addon before the input.\n * @csspart addon-after - The addon after the input.\n * @csspart prefix - The prefix of the input.\n * @csspart postfix - The postfix of the input.\n * @csspart decrement-button - The decrement button of the input.\n * @csspart increment-button - The increment button of the input.\n * @csspart decrement-button-base - The base of the decrement button.\n * @csspart increment-button-base - The base of the increment button.\n * @csspart decrement-button-content - The content of the decrement button.\n * @csspart increment-button-content - The content of the increment button.\n */\nexport default class DapDSNumberInput extends InputBaseElement {\n  static tagName = 'dap-ds-number-input'\n\n  static dependencies = {\n    'dap-ds-stack': DapDSStack,\n    'dap-ds-spinner': DapDSSpinner,\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  constructor() {\n    super()\n    this.manualValueSet = true\n    // Use text type to prevent the browser from interfering with custom\n    // number formatting (thousand/decimal separators). The inputmode\n    // attribute provides the correct mobile keyboard (decimal/numeric).\n    this.type = 'text'\n  }\n\n  @query('input')\n  private readonly inputElement!: HTMLInputElement\n\n  @property({ type: String }) thousandSeparator = ''\n  @property({ type: String }) decimalSeparator = ','\n  @property({ type: Number }) decimalScale?: number\n  @property({ type: String }) allowNegative = 'true'\n  @property({ type: String }) allowDecimal = 'true'\n  @property({ type: Boolean }) hideControls = false\n  @property({ type: Number }) padStart?: number\n  /** `data-testid` for the decrement stepper button. */\n  @property() decrementButtonTestId = 'number-input-decrement-button'\n  /** `data-testid` for the increment stepper button. */\n  @property() incrementButtonTestId = 'number-input-increment-button'\n\n  @state() private formattedValue = ''\n\n  // True when `value` was changed by user input / increment / decrement, so\n  // `formattedValue` already reflects it (and preserves in-progress text such as\n  // a trailing decimal separator). External (programmatic) `value` changes leave\n  // this false, telling `updated()` to re-mask `value` so the display refreshes.\n  private valueSetInternally = false\n\n  get _thousandSeparator() {\n    //escape regex control characters with \\\n    return this.thousandSeparator?.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')\n  }\n\n  protected firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties)\n\n    this.inputMode =\n      this.inputMode || (this.allowDecimal === 'true' ? 'decimal' : 'numeric')\n\n    this.inputElement.addEventListener('input', (e: Event) =>\n      this.handleInput(e as InputEvent),\n    )\n\n    this.inputElement.addEventListener('keydown', (e: KeyboardEvent) =>\n      this.handleKeydown(e),\n    )\n\n    this.inputElement.addEventListener('blur', () => this.applyPadStart())\n\n    // Handle initial value\n    if (this.value !== undefined) {\n      this.formattedValue = this.getMaskedValue(this.value)\n      this.inputElement.value = this.formattedValue\n      this.applyPadStart()\n    }\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (this.disabled || this.readonly) return\n\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      this._increment()\n    } else if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      this._decrement()\n    } else if (\n      event.key === 'e' ||\n      event.key === 'E' ||\n      event.key === '+' ||\n      (event.key === '-' && this.allowNegative !== 'true')\n    ) {\n      // Block scientific notation and sign characters that the browser\n      // allows in type=\"number\" inputs but cause input.value to return ''\n      // while the user is mid-typing (e.g. \"1e\"), triggering a false clear.\n      event.preventDefault()\n    }\n  }\n\n  private getMaskedValue(value: string | number): string {\n    if (!value && value !== 0) return ''\n\n    let result = value\n\n    // if the value is a number and it has a decimal point, convert it to a string and replace the . with the decimal separator\n    if (typeof result === 'number' && result.toString().includes('.')) {\n      result = result.toString().replace('.', this.decimalSeparator)\n    }\n\n    // Handle negative numbers\n    if (this.allowNegative === 'true' && value.toString().startsWith('-')) {\n      result = '-' + this.getMaskedValue(value.toString().substring(1))\n    } else if (\n      this.allowNegative === 'false' &&\n      value.toString().startsWith('-')\n    ) {\n      result = value.toString().substring(1)\n    }\n\n    // Apply thousand separator\n    if (this.thousandSeparator) {\n      const parts = result.toString().split(this.decimalSeparator)\n      parts[0] = parts[0].replace(\n        /\\B(?=(\\d{3})+(?!\\d))/g,\n        this.thousandSeparator,\n      )\n      result = parts.join(this.decimalSeparator)\n    }\n\n    // Apply decimal scale\n    if (this.allowDecimal === 'true' && this.decimalScale !== undefined) {\n      const parts = result.toString().split(this.decimalSeparator)\n      if (parts[1]) {\n        parts[1] = parts[1].slice(0, this.decimalScale)\n        result = parts.join(this.decimalSeparator)\n      }\n    } else if (this.allowDecimal === 'false') {\n      const parts = result.toString().split(this.decimalSeparator)\n      result = parts[0]\n    }\n\n    return result.toString()\n  }\n\n  private isBackspaceOrDelete(event: InputEvent): boolean {\n    return (\n      event.inputType === 'deleteContentBackward' ||\n      event.inputType === 'deleteContentForward'\n    )\n  }\n\n  private handleEmptyValue() {\n    this.valueSetInternally = true\n    this.value = ''\n    this.formattedValue = ''\n    this.inputElement.value = ''\n    this.emit('dds-change', {\n      value: '',\n      formattedValue: '',\n    })\n  }\n\n  private createNumericRegex(): RegExp {\n    if (this.allowDecimal === 'true') {\n      const escapedDecimalSeparator = this.decimalSeparator.replace(\n        /[.*+?^${}()|[\\]\\\\]/g,\n        '\\\\$&',\n      )\n      return this.allowNegative === 'true'\n        ? new RegExp(`^-?\\\\d*${escapedDecimalSeparator}?\\\\d*$`)\n        : new RegExp(`^\\\\d*${escapedDecimalSeparator}?\\\\d*$`)\n    }\n    return this.allowNegative === 'true' ? /^-?\\d*$/ : /^\\d*$/\n  }\n\n  private enforceDecimalScale(value: string): string {\n    if (this.decimalScale === undefined || this.allowDecimal !== 'true') {\n      return value\n    }\n\n    const parts = value.split(this.decimalSeparator)\n    if (parts[1] && parts[1].length > this.decimalScale) {\n      parts[1] = parts[1].slice(0, this.decimalScale)\n      return parts.join(this.decimalSeparator)\n    }\n    return value\n  }\n\n  private applyPadStart() {\n    if (!this.padStart || !this.formattedValue) return\n\n    const padded = this.formattedValue.padStart(this.padStart, '0')\n    this.formattedValue = padded\n    this.inputElement.value = padded\n    // value keeps the real numeric value, padStart only affects display\n  }\n\n  private convertToNumericValue(value: string): number | string {\n    if (!value) return value\n\n    const normalizedValue = value.replace(this.decimalSeparator, '.')\n    const numericValue = parseFloat(normalizedValue)\n    return isNaN(numericValue) ? value : numericValue\n  }\n\n  private handleInput(event: InputEvent) {\n    const input = event.target as HTMLInputElement\n    let value = input.value\n\n    // Remove thousand separators\n    if (this.thousandSeparator) {\n      value = value.replace(new RegExp(this._thousandSeparator, 'g'), '')\n    }\n\n    // Handle empty value\n    if (value === '') {\n      this.handleEmptyValue()\n      this.setValidity()\n      return\n    }\n\n    // Check for negative numbers if not allowed\n    if (this.allowNegative === 'false' && value.includes('-')) {\n      input.value = value.replace('-', '')\n      this.formattedValue = value.replace('-', '')\n      this.setValidity()\n      return\n    }\n\n    // Validate numeric input\n    const numericRegex = this.createNumericRegex()\n    if (!numericRegex.test(value) && !this.isBackspaceOrDelete(event)) {\n      input.value = this.formattedValue\n      this.setValidity()\n      return\n    }\n\n    // Enforce decimal scale\n    value = this.enforceDecimalScale(value)\n\n    // Convert and update value\n    const numericValue = this.convertToNumericValue(value)\n    this.valueSetInternally = true\n    this.value = numericValue\n    this.formattedValue = this.getMaskedValue(value)\n    input.value = this.formattedValue\n\n    this.emit('dds-change', {\n      value: this.value,\n      formattedValue: this.formattedValue,\n    })\n\n    // Update validity state for form validation\n    this.setValidity()\n  }\n\n  protected updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('value')) {\n      // An external (programmatic) value change leaves formattedValue stale, so\n      // re-mask it here -- otherwise preloaded/reset values never reach the\n      // visible input. Internal edits already set formattedValue (and keep the\n      // user's in-progress text), so we leave it untouched for those.\n      if (!this.valueSetInternally) {\n        this.formattedValue = this.getMaskedValue(this.value ?? '')\n      }\n      this.valueSetInternally = false\n      this.inputElement.value = this.formattedValue\n      // Update validity state when value changes externally\n      this.setValidity()\n    }\n  }\n\n  formResetCallback() {\n    super.formResetCallback()\n    // Reset the formatted value to match the reset value\n    this.formattedValue = this.getMaskedValue(this.value || '')\n    this.inputElement.value = this.formattedValue\n  }\n\n  private _decrement() {\n    if (this.disabled || this.readonly) return\n\n    const currentValue = this.value\n      ? parseFloat(this.value.toString().replace(this._thousandSeparator, ''))\n      : 0\n    const step =\n      typeof this.step === 'number'\n        ? this.step\n        : parseFloat(this.step?.toString() ?? '1')\n\n    // Calculate new value\n    let newValue = currentValue - step\n\n    // Apply min constraint if defined\n    if (this.min !== undefined && newValue < this.min) {\n      newValue = this.min\n    }\n\n    // Update the value\n    this.valueSetInternally = true\n    this.value = newValue\n    this.formattedValue = this.getMaskedValue(newValue)\n    this.inputElement.value = this.formattedValue\n\n    this.emit('dds-change', {\n      value: this.value,\n      formattedValue: this.formattedValue,\n    })\n  }\n\n  private _increment() {\n    if (this.disabled || this.readonly) return\n\n    const currentValue = this.value\n      ? parseFloat(this.value.toString().replace(this.thousandSeparator, ''))\n      : 0\n    const step =\n      typeof this.step === 'number'\n        ? this.step\n        : parseFloat(this.step?.toString() ?? '1')\n\n    // Calculate new value\n    let newValue = currentValue + step\n\n    // Apply max constraint if defined\n    if (this.max !== undefined && newValue > this.max) {\n      newValue = this.max\n    }\n\n    // Update the value\n    this.valueSetInternally = true\n    this.value = newValue\n    this.formattedValue = this.getMaskedValue(newValue)\n    this.inputElement.value = this.formattedValue\n\n    this.emit('dds-change', {\n      value: this.value,\n      formattedValue: this.formattedValue,\n    })\n  }\n\n  render() {\n    return this.renderInput(\n      html` <span\n        part=\"postfix\"\n        class=${clsx('input__addon-postfix number-input')}>\n        ${!(this.disabled || this.readonly) && !this.hideControls\n          ? html` <dap-ds-stack direction=\"row\" tabindex=\"-1\" spacing=\"300\">\n              ${this.loading\n                ? html`<dap-ds-spinner size=\"lg\"></dap-ds-spinner>`\n                : nothing}\n              <dap-ds-icon-button\n                part=\"decrement-button\"\n                data-testid=${this.decrementButtonTestId}\n                exportparts=\"base: decrement-button-base, content: decrement-button-content\"\n                size=${ifDefined(this.size as CommonFormElementSize)}\n                @click=${this._decrement}\n                aria-label=\"${translate('decrease')}\"\n                .disabled=${this.disabled}>\n                <slot name=\"decrement-icon\">\n                  <dap-ds-icon\n                    size=\"lg\"\n                    name=\"subtract-line\"\n                    part=\"decrement-icon\"\n                    exportparts=\"icon: decrement-icon, base: decrement-icon-base\"></dap-ds-icon>\n                </slot>\n              </dap-ds-icon-button>\n              <dap-ds-icon-button\n                part=\"increment-button\"\n                data-testid=${this.incrementButtonTestId}\n                exportparts=\"base: increment-button-base, content: increment-button-content\"\n                size=${ifDefined(this.size as CommonFormElementSize)}\n                @click=${this._increment}\n                aria-label=\"${translate('increase')}\"\n                .disabled=${this.disabled}>\n                <slot name=\"increment-icon\">\n                  <dap-ds-icon\n                    size=\"lg\"\n                    name=\"add-line\"\n                    part=\"increment-icon\"\n                    exportparts=\"icon: increment-icon, base: increment-icon-base\"></dap-ds-icon>\n                </slot>\n              </dap-ds-icon-button>\n            </dap-ds-stack>`\n          : ``}\n      </span>`,\n    )\n  }\n}\n"],"names":["_DapDSNumberInput","InputBaseElement","_a","changedProperties","event","value","result","parts","escapedDecimalSeparator","padded","normalizedValue","numericValue","input","currentValue","step","_b","newValue","html","clsx","nothing","ifDefined","translate","DapDSStack","DapDSSpinner","DapDSIconButton","DapDSIcon","DapDSNumberInput","__decorateClass","query","property","state"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoHA,MAAqBA,IAArB,MAAqBA,UAAyBC,EAAiB;AAAA,EAU7D,cAAc;AACN,UAAA,GAWwC,KAAA,oBAAA,IACD,KAAA,mBAAA,KAEH,KAAA,gBAAA,QACD,KAAA,eAAA,QACC,KAAA,eAAA,IAGR,KAAA,wBAAA,iCAEA,KAAA,wBAAA,iCAE3B,KAAQ,iBAAiB,IAMlC,KAAQ,qBAAqB,IA5B3B,KAAK,iBAAiB,IAItB,KAAK,OAAO;AAAA,EAAA;AAAA,EA0Bd,IAAI,qBAAqB;;AAEvB,YAAOC,IAAA,KAAK,sBAAL,gBAAAA,EAAwB,QAAQ,uBAAuB;AAAA,EAAM;AAAA,EAG5D,aAAaC,GAAmC;AACxD,UAAM,aAAaA,CAAiB,GAEpC,KAAK,YACH,KAAK,cAAc,KAAK,iBAAiB,SAAS,YAAY,YAEhE,KAAK,aAAa;AAAA,MAAiB;AAAA,MAAS,CAAC,MAC3C,KAAK,YAAY,CAAe;AAAA,IAClC,GAEA,KAAK,aAAa;AAAA,MAAiB;AAAA,MAAW,CAAC,MAC7C,KAAK,cAAc,CAAC;AAAA,IACtB,GAEA,KAAK,aAAa,iBAAiB,QAAQ,MAAM,KAAK,eAAe,GAGjE,KAAK,UAAU,WACjB,KAAK,iBAAiB,KAAK,eAAe,KAAK,KAAK,GAC/C,KAAA,aAAa,QAAQ,KAAK,gBAC/B,KAAK,cAAc;AAAA,EACrB;AAAA,EAGM,cAAcC,GAAsB;AACtC,IAAA,KAAK,YAAY,KAAK,aAEtBA,EAAM,QAAQ,aAChBA,EAAM,eAAe,GACrB,KAAK,WAAW,KACPA,EAAM,QAAQ,eACvBA,EAAM,eAAe,GACrB,KAAK,WAAW,MAEhBA,EAAM,QAAQ,OACdA,EAAM,QAAQ,OACdA,EAAM,QAAQ,OACbA,EAAM,QAAQ,OAAO,KAAK,kBAAkB,WAK7CA,EAAM,eAAe;AAAA,EACvB;AAAA,EAGM,eAAeC,GAAgC;AACrD,QAAI,CAACA,KAASA,MAAU,EAAU,QAAA;AAElC,QAAIC,IAASD;AAkBb,QAfI,OAAOC,KAAW,YAAYA,EAAO,WAAW,SAAS,GAAG,MAC9DA,IAASA,EAAO,SAAS,EAAE,QAAQ,KAAK,KAAK,gBAAgB,IAI3D,KAAK,kBAAkB,UAAUD,EAAM,WAAW,WAAW,GAAG,IACzDC,IAAA,MAAM,KAAK,eAAeD,EAAM,SAAW,EAAA,UAAU,CAAC,CAAC,IAEhE,KAAK,kBAAkB,WACvBA,EAAM,SAAS,EAAE,WAAW,GAAG,MAE/BC,IAASD,EAAM,WAAW,UAAU,CAAC,IAInC,KAAK,mBAAmB;AAC1B,YAAME,IAAQD,EAAO,SAAW,EAAA,MAAM,KAAK,gBAAgB;AAC3D,MAAAC,EAAM,CAAC,IAAIA,EAAM,CAAC,EAAE;AAAA,QAClB;AAAA,QACA,KAAK;AAAA,MACP,GACSD,IAAAC,EAAM,KAAK,KAAK,gBAAgB;AAAA,IAAA;AAI3C,QAAI,KAAK,iBAAiB,UAAU,KAAK,iBAAiB,QAAW;AACnE,YAAMA,IAAQD,EAAO,SAAW,EAAA,MAAM,KAAK,gBAAgB;AACvD,MAAAC,EAAM,CAAC,MACHA,EAAA,CAAC,IAAIA,EAAM,CAAC,EAAE,MAAM,GAAG,KAAK,YAAY,GACrCD,IAAAC,EAAM,KAAK,KAAK,gBAAgB;AAAA,IAC3C,MACF,CAAW,KAAK,iBAAiB,YAE/BD,IADcA,EAAO,SAAW,EAAA,MAAM,KAAK,gBAAgB,EAC5C,CAAC;AAGlB,WAAOA,EAAO,SAAS;AAAA,EAAA;AAAA,EAGjB,oBAAoBF,GAA4B;AACtD,WACEA,EAAM,cAAc,2BACpBA,EAAM,cAAc;AAAA,EAAA;AAAA,EAIhB,mBAAmB;AACzB,SAAK,qBAAqB,IAC1B,KAAK,QAAQ,IACb,KAAK,iBAAiB,IACtB,KAAK,aAAa,QAAQ,IAC1B,KAAK,KAAK,cAAc;AAAA,MACtB,OAAO;AAAA,MACP,gBAAgB;AAAA,IAAA,CACjB;AAAA,EAAA;AAAA,EAGK,qBAA6B;AAC/B,QAAA,KAAK,iBAAiB,QAAQ;AAC1B,YAAAI,IAA0B,KAAK,iBAAiB;AAAA,QACpD;AAAA,QACA;AAAA,MACF;AACA,aAAO,KAAK,kBAAkB,SAC1B,IAAI,OAAO,UAAUA,CAAuB,QAAQ,IACpD,IAAI,OAAO,QAAQA,CAAuB,QAAQ;AAAA,IAAA;AAEjD,WAAA,KAAK,kBAAkB,SAAS,YAAY;AAAA,EAAA;AAAA,EAG7C,oBAAoBH,GAAuB;AACjD,QAAI,KAAK,iBAAiB,UAAa,KAAK,iBAAiB;AACpD,aAAAA;AAGT,UAAME,IAAQF,EAAM,MAAM,KAAK,gBAAgB;AAC3C,WAAAE,EAAM,CAAC,KAAKA,EAAM,CAAC,EAAE,SAAS,KAAK,gBAC/BA,EAAA,CAAC,IAAIA,EAAM,CAAC,EAAE,MAAM,GAAG,KAAK,YAAY,GACvCA,EAAM,KAAK,KAAK,gBAAgB,KAElCF;AAAA,EAAA;AAAA,EAGD,gBAAgB;AACtB,QAAI,CAAC,KAAK,YAAY,CAAC,KAAK,eAAgB;AAE5C,UAAMI,IAAS,KAAK,eAAe,SAAS,KAAK,UAAU,GAAG;AAC9D,SAAK,iBAAiBA,GACtB,KAAK,aAAa,QAAQA;AAAA,EAAA;AAAA,EAIpB,sBAAsBJ,GAAgC;AACxD,QAAA,CAACA,EAAc,QAAAA;AAEnB,UAAMK,IAAkBL,EAAM,QAAQ,KAAK,kBAAkB,GAAG,GAC1DM,IAAe,WAAWD,CAAe;AACxC,WAAA,MAAMC,CAAY,IAAIN,IAAQM;AAAA,EAAA;AAAA,EAG/B,YAAYP,GAAmB;AACrC,UAAMQ,IAAQR,EAAM;AACpB,QAAIC,IAAQO,EAAM;AAQlB,QALI,KAAK,sBACCP,IAAAA,EAAM,QAAQ,IAAI,OAAO,KAAK,oBAAoB,GAAG,GAAG,EAAE,IAIhEA,MAAU,IAAI;AAChB,WAAK,iBAAiB,GACtB,KAAK,YAAY;AACjB;AAAA,IAAA;AAIF,QAAI,KAAK,kBAAkB,WAAWA,EAAM,SAAS,GAAG,GAAG;AACzD,MAAAO,EAAM,QAAQP,EAAM,QAAQ,KAAK,EAAE,GACnC,KAAK,iBAAiBA,EAAM,QAAQ,KAAK,EAAE,GAC3C,KAAK,YAAY;AACjB;AAAA,IAAA;AAKE,QAAA,CADiB,KAAK,mBAAmB,EAC3B,KAAKA,CAAK,KAAK,CAAC,KAAK,oBAAoBD,CAAK,GAAG;AACjE,MAAAQ,EAAM,QAAQ,KAAK,gBACnB,KAAK,YAAY;AACjB;AAAA,IAAA;AAIM,IAAAP,IAAA,KAAK,oBAAoBA,CAAK;AAGhC,UAAAM,IAAe,KAAK,sBAAsBN,CAAK;AACrD,SAAK,qBAAqB,IAC1B,KAAK,QAAQM,GACR,KAAA,iBAAiB,KAAK,eAAeN,CAAK,GAC/CO,EAAM,QAAQ,KAAK,gBAEnB,KAAK,KAAK,cAAc;AAAA,MACtB,OAAO,KAAK;AAAA,MACZ,gBAAgB,KAAK;AAAA,IAAA,CACtB,GAGD,KAAK,YAAY;AAAA,EAAA;AAAA,EAGT,QAAQT,GAAmC;;AAC/C,IAAAA,EAAkB,IAAI,OAAO,MAK1B,KAAK,uBACR,KAAK,iBAAiB,KAAK,gBAAeD,IAAA,KAAK,UAAL,OAAAA,IAAc,EAAE,IAE5D,KAAK,qBAAqB,IACrB,KAAA,aAAa,QAAQ,KAAK,gBAE/B,KAAK,YAAY;AAAA,EACnB;AAAA,EAGF,oBAAoB;AAClB,UAAM,kBAAkB,GAExB,KAAK,iBAAiB,KAAK,eAAe,KAAK,SAAS,EAAE,GACrD,KAAA,aAAa,QAAQ,KAAK;AAAA,EAAA;AAAA,EAGzB,aAAa;;AACf,QAAA,KAAK,YAAY,KAAK,SAAU;AAEpC,UAAMW,IAAe,KAAK,QACtB,WAAW,KAAK,MAAM,SAAS,EAAE,QAAQ,KAAK,oBAAoB,EAAE,CAAC,IACrE,GACEC,IACJ,OAAO,KAAK,QAAS,WACjB,KAAK,OACL,YAAWC,KAAAb,IAAA,KAAK,SAAL,gBAAAA,EAAW,eAAX,OAAAa,IAAyB,GAAG;AAG7C,QAAIC,IAAWH,IAAeC;AAG9B,IAAI,KAAK,QAAQ,UAAaE,IAAW,KAAK,QAC5CA,IAAW,KAAK,MAIlB,KAAK,qBAAqB,IAC1B,KAAK,QAAQA,GACR,KAAA,iBAAiB,KAAK,eAAeA,CAAQ,GAC7C,KAAA,aAAa,QAAQ,KAAK,gBAE/B,KAAK,KAAK,cAAc;AAAA,MACtB,OAAO,KAAK;AAAA,MACZ,gBAAgB,KAAK;AAAA,IAAA,CACtB;AAAA,EAAA;AAAA,EAGK,aAAa;;AACf,QAAA,KAAK,YAAY,KAAK,SAAU;AAEpC,UAAMH,IAAe,KAAK,QACtB,WAAW,KAAK,MAAM,SAAS,EAAE,QAAQ,KAAK,mBAAmB,EAAE,CAAC,IACpE,GACEC,IACJ,OAAO,KAAK,QAAS,WACjB,KAAK,OACL,YAAWC,KAAAb,IAAA,KAAK,SAAL,gBAAAA,EAAW,eAAX,OAAAa,IAAyB,GAAG;AAG7C,QAAIC,IAAWH,IAAeC;AAG9B,IAAI,KAAK,QAAQ,UAAaE,IAAW,KAAK,QAC5CA,IAAW,KAAK,MAIlB,KAAK,qBAAqB,IAC1B,KAAK,QAAQA,GACR,KAAA,iBAAiB,KAAK,eAAeA,CAAQ,GAC7C,KAAA,aAAa,QAAQ,KAAK,gBAE/B,KAAK,KAAK,cAAc;AAAA,MACtB,OAAO,KAAK;AAAA,MACZ,gBAAgB,KAAK;AAAA,IAAA,CACtB;AAAA,EAAA;AAAA,EAGH,SAAS;AACP,WAAO,KAAK;AAAA,MACVC;AAAAA;AAAAA,gBAEUC,EAAK,mCAAmC,CAAC;AAAA,UAC/C,EAAE,KAAK,YAAY,KAAK,aAAa,CAAC,KAAK,eACzCD;AAAAA,gBACI,KAAK,UACHA,iDACAE,CAAO;AAAA;AAAA;AAAA,8BAGK,KAAK,qBAAqB;AAAA;AAAA,uBAEjCC,EAAU,KAAK,IAA6B,CAAC;AAAA,yBAC3C,KAAK,UAAU;AAAA,8BACVC,EAAU,UAAU,CAAC;AAAA,4BACvB,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAWX,KAAK,qBAAqB;AAAA;AAAA,uBAEjCD,EAAU,KAAK,IAA6B,CAAC;AAAA,yBAC3C,KAAK,UAAU;AAAA,8BACVC,EAAU,UAAU,CAAC;AAAA,4BACvB,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAU7B,EAAE;AAAA;AAAA,IAEV;AAAA,EAAA;AAEJ;AA7XErB,EAAO,UAAU,uBAEjBA,EAAO,eAAe;AAAA,EACpB,gBAAgBsB;AAAA,EAChB,kBAAkBC;AAAA,EAClB,sBAAsBC;AAAA,EACtB,eAAeC;AACjB;AARF,IAAqBC,IAArB1B;AAoBmB2B,EAAA;AAAA,EADhBC,EAAM,OAAO;AAAA,GAnBKF,EAoBF,WAAA,cAAA;AAEWC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAtBPH,EAsBS,WAAA,mBAAA;AACAC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAvBPH,EAuBS,WAAA,kBAAA;AACAC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAxBPH,EAwBS,WAAA,cAAA;AACAC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAzBPH,EAyBS,WAAA,eAAA;AACAC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GA1BPH,EA0BS,WAAA,cAAA;AACCC,EAAA;AAAA,EAA5BE,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GA3BRH,EA2BU,WAAA,cAAA;AACDC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GA5BPH,EA4BS,WAAA,UAAA;AAEhBC,EAAA;AAAA,EAAXE,EAAS;AAAA,GA9BSH,EA8BP,WAAA,uBAAA;AAEAC,EAAA;AAAA,EAAXE,EAAS;AAAA,GAhCSH,EAgCP,WAAA,uBAAA;AAEKC,EAAA;AAAA,EAAhBG,EAAM;AAAA,GAlCYJ,EAkCF,WAAA,gBAAA;"}
+{"version":3,"file":"number-input.component.js","sources":["../../../src/components/number-input/number-input.component.ts"],"sourcesContent":["import { clsx } from 'clsx'\nimport { html, nothing, PropertyValues } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { CommonFormElementSize } from '@/common/types'\n\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport { InputBaseElement } from '../input/input-base-element'\nimport DapDSSpinner from '../spinner/spinner.component'\nimport DapDSStack from '../stack/stack.component'\n\n/**\n * `dap-ds-number-input`\n * @summary A number input component.\n * @element dap-ds-number-input\n * @title - Number input\n *\n * @property {string} label - The label of the input.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} placeholder - The placeholder of the input.\n * @property {string} description - The description of the input.\n * @property {string} tooltip - The tooltip of the input.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input.\n * @property {'success' | 'error'} status - The status of the input. Can be `success` or `error`.\n * @property {'xs' | 'sm' | 'sm'} size - The size of the input. Default is `sm`. Can be `sm` or `lg`.\n * @property {string} name - The name of the input.\n * @property {string} value - The value of the input.\n * @property {string} thousandSeparator - The thousand separator of the input.\n * @property {string} decimalSeparator - The decimal separator of the input.\n * @property {number} decimalScale - The decimal scale of the input.\n * @property {string} allowNegative - The allow negative state of the input.\n * @property {string} allowDecimal - The allow decimal state of the input.\n * @property {boolean} disabled - The disabled state of the input. Default is false.\n * @property {boolean} required - The required state of the input. Default is false.\n * @property {boolean} readonly - The readonly state of the input. Default is false.\n * @property {boolean} autofocus - The autofocus state of the input. Default is false.\n * @property {number} min - The minimum value of the number input.\n * @property {number} max - The maximum value of the number input.\n * @property {number} step - The step value of the number input.\n * @property {string} feedback - The feedback of the input.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the input. Can be `negative`, `positive`, or `warning`.\n * @property {boolean} loading - The loading state of the input. Default is false.\n * @property {boolean} optional - The optional state of the input.\n * @property {string} optionalLabel - The optional label of the input.\n * @property {string} requiredLabel - The required indicator of the input. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {boolean} disableEnter - Disables the enter key from being used to submit the form.\n * @property {boolean} hideControls - Hides the increment and decrement buttons.\n * @property {number} padStart - The number of leading zeros to add to the input.\n *\n * @event {{ value: string }} dds-change - Fired when the input value changes.\n * @event {{ value: string }} dds-input - Fired when the input value changes.\n * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.\n * @event {{ void }} dds-blur - Fired when the input loses focus.\n * @event {{ void }} dds-focus - Emitted when the input gains focus.\n *\n * @slot feedback-icon - The custom icon of the feedback.\n *\n * @cssproperty --dds-input-height-xs - The height of the extra small input. (default: var(--dds-spacing-800) ).\n * @cssproperty --dds-input-height-sm - The height of the small input. (default: var(--dds-spacing-1000)).\n * @cssproperty --dds-input-height-lg - The height of the large input. (default: var(--dds-spacing-1200)).\n * @cssproperty --dds-input-padding-xs - The padding of the extra small input. (default: 0 var(--dds-spacing-200)).\n * @cssproperty --dds-input-padding-sm - The padding of the small input. (default: 0 var(--dds-spacing-300)).\n * @cssproperty --dds-input-padding-lg - The padding of the large input. (default: 0 var(--dds-spacing-400)).\n * @cssproperty --dds-input-font-size-xs - The font size of the extra small input. (default: var(--dds-font-sm)).\n * @cssproperty --dds-input-font-size-sm - The font size of the small input. (default: var(--dds-font-base)).\n * @cssproperty --dds-input-font-size-lg - The font size of the large input. (default: var(--dds-font-lg)).\n * @cssproperty --dds-input-border - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-background - The background color of the input. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-text-color - The text color of the input. (default: var(--dds-text-neutral-base)).\n * @cssproperty --dds-input-border-radius - The border radius of the input. (default: var(--dds-radius-base)).\n * @cssproperty --dds-input-disabled-border - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)).\n * @cssproperty --dds-input-disabled-background - The background color of the disabled input. (default: var(--dds-fields-background-disabled)).\n * @cssproperty --dds-input-disabled-text - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-input-readonly-border - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)).\n * @cssproperty --dds-input-readonly-background - The background color of the readonly input. (default: var(--dds-fields-background-read-only)).\n * @cssproperty --dds-input-readonly-text - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)).\n * @cssproperty --dds-input-success-border - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-error-border - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-background - The background color of the input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-success-background - The background color of the success input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-error-background - The background color of the error input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-border-before - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-addon-border-after - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-addon-border-width-before - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-border-width-after - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n * @cssproperty --dds-input-addon-success-border - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-before - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-after - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-width-before - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-success-border-width-after - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n * @cssproperty --dds-input-addon-error-border-before - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-error-border-after - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-error-border-width-before - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-error-border-width-after - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n *\n * @csspart base - The main number input container.\n * @csspart input - The input element.\n * @csspart label - The label of the input.\n * @csspart description - The description of the input.\n * @csspart feedback - The feedback of the input.\n * @csspart tooltip - The tooltip of the input.\n * @csspart addon-before - The addon before the input.\n * @csspart addon-after - The addon after the input.\n * @csspart prefix - The prefix of the input.\n * @csspart postfix - The postfix of the input.\n * @csspart decrement-button - The decrement button of the input.\n * @csspart increment-button - The increment button of the input.\n * @csspart decrement-button-base - The base of the decrement button.\n * @csspart increment-button-base - The base of the increment button.\n * @csspart decrement-button-content - The content of the decrement button.\n * @csspart increment-button-content - The content of the increment button.\n * @csspart decrement-icon - The icon of the decrement button.\n * @csspart decrement-icon-base - The base of the decrement icon.\n * @csspart increment-icon - The icon of the increment button.\n * @csspart increment-icon-base - The base of the increment icon.\n * @csspart label-base - The base of the label.\n * @csspart label-required - The required indicator of the label.\n * @csspart label-optional - The optional indicator of the label.\n */\nexport default class DapDSNumberInput extends InputBaseElement {\n  static tagName = 'dap-ds-number-input'\n\n  static dependencies = {\n    'dap-ds-stack': DapDSStack,\n    'dap-ds-spinner': DapDSSpinner,\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  constructor() {\n    super()\n    this.manualValueSet = true\n    // Use text type to prevent the browser from interfering with custom\n    // number formatting (thousand/decimal separators). The inputmode\n    // attribute provides the correct mobile keyboard (decimal/numeric).\n    this.type = 'text'\n  }\n\n  @query('input')\n  private readonly inputElement!: HTMLInputElement\n\n  @property({ type: String }) thousandSeparator = ''\n  @property({ type: String }) decimalSeparator = ','\n  @property({ type: Number }) decimalScale?: number\n  @property({ type: String }) allowNegative = 'true'\n  @property({ type: String }) allowDecimal = 'true'\n  @property({ type: Boolean }) hideControls = false\n  @property({ type: Number }) padStart?: number\n  /** `data-testid` for the decrement stepper button. */\n  @property() decrementButtonTestId = 'number-input-decrement-button'\n  /** `data-testid` for the increment stepper button. */\n  @property() incrementButtonTestId = 'number-input-increment-button'\n\n  @state() private formattedValue = ''\n\n  // True when `value` was changed by user input / increment / decrement, so\n  // `formattedValue` already reflects it (and preserves in-progress text such as\n  // a trailing decimal separator). External (programmatic) `value` changes leave\n  // this false, telling `updated()` to re-mask `value` so the display refreshes.\n  private valueSetInternally = false\n\n  get _thousandSeparator() {\n    //escape regex control characters with \\\n    return this.thousandSeparator?.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')\n  }\n\n  protected firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties)\n\n    this.inputMode =\n      this.inputMode || (this.allowDecimal === 'true' ? 'decimal' : 'numeric')\n\n    this.inputElement.addEventListener('input', (e: Event) =>\n      this.handleInput(e as InputEvent),\n    )\n\n    this.inputElement.addEventListener('keydown', (e: KeyboardEvent) =>\n      this.handleKeydown(e),\n    )\n\n    this.inputElement.addEventListener('blur', () => this.applyPadStart())\n\n    // Handle initial value\n    if (this.value !== undefined) {\n      this.formattedValue = this.getMaskedValue(this.value)\n      this.inputElement.value = this.formattedValue\n      this.applyPadStart()\n    }\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (this.disabled || this.readonly) return\n\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      this._increment()\n    } else if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      this._decrement()\n    } else if (\n      event.key === 'e' ||\n      event.key === 'E' ||\n      event.key === '+' ||\n      (event.key === '-' && this.allowNegative !== 'true')\n    ) {\n      // Block scientific notation and sign characters that the browser\n      // allows in type=\"number\" inputs but cause input.value to return ''\n      // while the user is mid-typing (e.g. \"1e\"), triggering a false clear.\n      event.preventDefault()\n    }\n  }\n\n  private getMaskedValue(value: string | number): string {\n    if (!value && value !== 0) return ''\n\n    let result = value\n\n    // if the value is a number and it has a decimal point, convert it to a string and replace the . with the decimal separator\n    if (typeof result === 'number' && result.toString().includes('.')) {\n      result = result.toString().replace('.', this.decimalSeparator)\n    }\n\n    // Handle negative numbers\n    if (this.allowNegative === 'true' && value.toString().startsWith('-')) {\n      result = '-' + this.getMaskedValue(value.toString().substring(1))\n    } else if (\n      this.allowNegative === 'false' &&\n      value.toString().startsWith('-')\n    ) {\n      result = value.toString().substring(1)\n    }\n\n    // Apply thousand separator\n    if (this.thousandSeparator) {\n      const parts = result.toString().split(this.decimalSeparator)\n      parts[0] = parts[0].replace(\n        /\\B(?=(\\d{3})+(?!\\d))/g,\n        this.thousandSeparator,\n      )\n      result = parts.join(this.decimalSeparator)\n    }\n\n    // Apply decimal scale\n    if (this.allowDecimal === 'true' && this.decimalScale !== undefined) {\n      const parts = result.toString().split(this.decimalSeparator)\n      if (parts[1]) {\n        parts[1] = parts[1].slice(0, this.decimalScale)\n        result = parts.join(this.decimalSeparator)\n      }\n    } else if (this.allowDecimal === 'false') {\n      const parts = result.toString().split(this.decimalSeparator)\n      result = parts[0]\n    }\n\n    return result.toString()\n  }\n\n  private isBackspaceOrDelete(event: InputEvent): boolean {\n    return (\n      event.inputType === 'deleteContentBackward' ||\n      event.inputType === 'deleteContentForward'\n    )\n  }\n\n  private handleEmptyValue() {\n    this.valueSetInternally = true\n    this.value = ''\n    this.formattedValue = ''\n    this.inputElement.value = ''\n    this.emit('dds-change', {\n      value: '',\n      formattedValue: '',\n    })\n  }\n\n  private createNumericRegex(): RegExp {\n    if (this.allowDecimal === 'true') {\n      const escapedDecimalSeparator = this.decimalSeparator.replace(\n        /[.*+?^${}()|[\\]\\\\]/g,\n        '\\\\$&',\n      )\n      return this.allowNegative === 'true'\n        ? new RegExp(`^-?\\\\d*${escapedDecimalSeparator}?\\\\d*$`)\n        : new RegExp(`^\\\\d*${escapedDecimalSeparator}?\\\\d*$`)\n    }\n    return this.allowNegative === 'true' ? /^-?\\d*$/ : /^\\d*$/\n  }\n\n  private enforceDecimalScale(value: string): string {\n    if (this.decimalScale === undefined || this.allowDecimal !== 'true') {\n      return value\n    }\n\n    const parts = value.split(this.decimalSeparator)\n    if (parts[1] && parts[1].length > this.decimalScale) {\n      parts[1] = parts[1].slice(0, this.decimalScale)\n      return parts.join(this.decimalSeparator)\n    }\n    return value\n  }\n\n  private applyPadStart() {\n    if (!this.padStart || !this.formattedValue) return\n\n    const padded = this.formattedValue.padStart(this.padStart, '0')\n    this.formattedValue = padded\n    this.inputElement.value = padded\n    // value keeps the real numeric value, padStart only affects display\n  }\n\n  private convertToNumericValue(value: string): number | string {\n    if (!value) return value\n\n    const normalizedValue = value.replace(this.decimalSeparator, '.')\n    const numericValue = parseFloat(normalizedValue)\n    return isNaN(numericValue) ? value : numericValue\n  }\n\n  private handleInput(event: InputEvent) {\n    const input = event.target as HTMLInputElement\n    let value = input.value\n\n    // Remove thousand separators\n    if (this.thousandSeparator) {\n      value = value.replace(new RegExp(this._thousandSeparator, 'g'), '')\n    }\n\n    // Handle empty value\n    if (value === '') {\n      this.handleEmptyValue()\n      this.setValidity()\n      return\n    }\n\n    // Check for negative numbers if not allowed\n    if (this.allowNegative === 'false' && value.includes('-')) {\n      input.value = value.replace('-', '')\n      this.formattedValue = value.replace('-', '')\n      this.setValidity()\n      return\n    }\n\n    // Validate numeric input\n    const numericRegex = this.createNumericRegex()\n    if (!numericRegex.test(value) && !this.isBackspaceOrDelete(event)) {\n      input.value = this.formattedValue\n      this.setValidity()\n      return\n    }\n\n    // Enforce decimal scale\n    value = this.enforceDecimalScale(value)\n\n    // Convert and update value\n    const numericValue = this.convertToNumericValue(value)\n    this.valueSetInternally = true\n    this.value = numericValue\n    this.formattedValue = this.getMaskedValue(value)\n    input.value = this.formattedValue\n\n    this.emit('dds-change', {\n      value: this.value,\n      formattedValue: this.formattedValue,\n    })\n\n    // Update validity state for form validation\n    this.setValidity()\n  }\n\n  protected updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('value')) {\n      // An external (programmatic) value change leaves formattedValue stale, so\n      // re-mask it here -- otherwise preloaded/reset values never reach the\n      // visible input. Internal edits already set formattedValue (and keep the\n      // user's in-progress text), so we leave it untouched for those.\n      if (!this.valueSetInternally) {\n        this.formattedValue = this.getMaskedValue(this.value ?? '')\n      }\n      this.valueSetInternally = false\n      this.inputElement.value = this.formattedValue\n      // Update validity state when value changes externally\n      this.setValidity()\n    }\n  }\n\n  formResetCallback() {\n    super.formResetCallback()\n    // Reset the formatted value to match the reset value\n    this.formattedValue = this.getMaskedValue(this.value || '')\n    this.inputElement.value = this.formattedValue\n  }\n\n  private _decrement() {\n    if (this.disabled || this.readonly) return\n\n    const currentValue = this.value\n      ? parseFloat(this.value.toString().replace(this._thousandSeparator, ''))\n      : 0\n    const step =\n      typeof this.step === 'number'\n        ? this.step\n        : parseFloat(this.step?.toString() ?? '1')\n\n    // Calculate new value\n    let newValue = currentValue - step\n\n    // Apply min constraint if defined\n    if (this.min !== undefined && newValue < this.min) {\n      newValue = this.min\n    }\n\n    // Update the value\n    this.valueSetInternally = true\n    this.value = newValue\n    this.formattedValue = this.getMaskedValue(newValue)\n    this.inputElement.value = this.formattedValue\n\n    this.emit('dds-change', {\n      value: this.value,\n      formattedValue: this.formattedValue,\n    })\n  }\n\n  private _increment() {\n    if (this.disabled || this.readonly) return\n\n    const currentValue = this.value\n      ? parseFloat(this.value.toString().replace(this.thousandSeparator, ''))\n      : 0\n    const step =\n      typeof this.step === 'number'\n        ? this.step\n        : parseFloat(this.step?.toString() ?? '1')\n\n    // Calculate new value\n    let newValue = currentValue + step\n\n    // Apply max constraint if defined\n    if (this.max !== undefined && newValue > this.max) {\n      newValue = this.max\n    }\n\n    // Update the value\n    this.valueSetInternally = true\n    this.value = newValue\n    this.formattedValue = this.getMaskedValue(newValue)\n    this.inputElement.value = this.formattedValue\n\n    this.emit('dds-change', {\n      value: this.value,\n      formattedValue: this.formattedValue,\n    })\n  }\n\n  render() {\n    return this.renderInput(\n      html` <span\n        part=\"postfix\"\n        class=${clsx('input__addon-postfix number-input')}>\n        ${!(this.disabled || this.readonly) && !this.hideControls\n          ? html` <dap-ds-stack direction=\"row\" tabindex=\"-1\" spacing=\"300\">\n              ${this.loading\n                ? html`<dap-ds-spinner size=\"lg\"></dap-ds-spinner>`\n                : nothing}\n              <dap-ds-icon-button\n                part=\"decrement-button\"\n                data-testid=${this.decrementButtonTestId}\n                exportparts=\"base: decrement-button-base, content: decrement-button-content\"\n                size=${ifDefined(this.size as CommonFormElementSize)}\n                @click=${this._decrement}\n                aria-label=\"${this.localize.t('decrease')}\"\n                .disabled=${this.disabled}>\n                <slot name=\"decrement-icon\">\n                  <dap-ds-icon\n                    size=\"lg\"\n                    name=\"subtract-line\"\n                    part=\"decrement-icon\"\n                    exportparts=\"icon: decrement-icon, base: decrement-icon-base\"></dap-ds-icon>\n                </slot>\n              </dap-ds-icon-button>\n              <dap-ds-icon-button\n                part=\"increment-button\"\n                data-testid=${this.incrementButtonTestId}\n                exportparts=\"base: increment-button-base, content: increment-button-content\"\n                size=${ifDefined(this.size as CommonFormElementSize)}\n                @click=${this._increment}\n                aria-label=\"${this.localize.t('increase')}\"\n                .disabled=${this.disabled}>\n                <slot name=\"increment-icon\">\n                  <dap-ds-icon\n                    size=\"lg\"\n                    name=\"add-line\"\n                    part=\"increment-icon\"\n                    exportparts=\"icon: increment-icon, base: increment-icon-base\"></dap-ds-icon>\n                </slot>\n              </dap-ds-icon-button>\n            </dap-ds-stack>`\n          : ``}\n      </span>`,\n    )\n  }\n}\n"],"names":["_DapDSNumberInput","InputBaseElement","_a","changedProperties","event","value","result","parts","escapedDecimalSeparator","padded","normalizedValue","numericValue","input","currentValue","step","_b","newValue","html","clsx","nothing","ifDefined","DapDSStack","DapDSSpinner","DapDSIconButton","DapDSIcon","DapDSNumberInput","__decorateClass","query","property","state"],"mappings":"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"}

package/dist/components/official-website-banner/official-website-banner.component.d.ts

@@ -33,6 +33,7 @@ import { default as DapDSStack } from '../stack/stack.component';
  * @csspart open-icon-base - The base of the icon when the accordion is opened.
  * @csspart close-icon - The icon when the accordion is closed.
  * @csspart close-icon-base - The base of the icon when the accordion is closed.
+ * @csspart heading-text - The text of the heading.
  *
  * @cssproperty --dds-official-banner-background-color - The background color of the official website banner (default: var(--dds-background-brand-medium-inverted))
  * @cssproperty --dds-official-banner-text-color - The text color of the official website banner (default: var(--dds-text-neutral-on-inverted))

package/dist/components/official-website-banner/official-website-banner.component.js

@@ -1,51 +1,46 @@
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { html as i } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import "../../localization/localization.js";
-import o from "../accordion/accordion.scss.js";
-import { AccordionBaseElement as a } from "../accordion/accordion-base-element.js";
-import r from "../icon/icon.component.js";
-import n from "../stack/stack.component.js";
+import { unsafeCSS as d, html as t } from "lit";
+import a from "../accordion/accordion.scss.js";
+import { AccordionBaseElement as o } from "../accordion/accordion-base-element.js";
+import n from "../icon/icon.component.js";
+import r from "../stack/stack.component.js";
 import c from "./official-website-banner.scss.js";
-import { unsafeCSS as m } from "../../node_modules/@lit/reactive-element/css-tag.js";
-import { translate as e } from "../../node_modules/lit-i18n/src/lit-i18n.js";
-const t = class t extends a {
+const i = class i extends o {
   headingRender() {
-    var s;
-    return i` <span>
+    var e;
+    return t` <span>
       <dap-ds-stack direction="row" spacing="100">
         <dap-ds-icon
           size="xs"
           name="shield-check-fill"
           aria-hidden="true"></dap-ds-icon>
-        ${(s = this.heading) != null ? s : e("official-website-banner.heading")}
+        ${(e = this.heading) != null ? e : this.localize.t("official-website-banner.heading")}
       </dap-ds-stack>
     </span>`;
   }
   contentRender() {
-    return i` <div
+    return t` <div
       style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem;">
       <dap-ds-stack direction="row" spacing="200">
         <dap-ds-icon name="lock-fill" aria-hidden="true"></dap-ds-icon>
         <span style="font-weight: bold"
-          >${e("official-website-banner.heading-2")}</span
+          >${this.localize.t("official-website-banner.heading-2")}</span
         >
       </dap-ds-stack>
       <div style="font-size: var(--dds-font-sm)">
-        ${e("official-website-banner.content")}
+        ${this.localize.t("official-website-banner.content")}
       </div>
     </div>`;
   }
   render() {
-    return i` ${this.renderAccordion()} `;
+    return t` ${this.renderAccordion()} `;
   }
 };
-t.tagName = "dap-ds-official-website-banner", t.dependencies = {
-  "dap-ds-stack": n,
-  "dap-ds-icon": r
-}, t.styles = m(`${o}${c}`);
-let d = t;
+i.tagName = "dap-ds-official-website-banner", i.dependencies = {
+  "dap-ds-stack": r,
+  "dap-ds-icon": n
+}, i.styles = d(`${a}${c}`);
+let s = i;
 export {
-  d as default
+  s as default
 };
 //# sourceMappingURL=official-website-banner.component.js.map

package/dist/components/official-website-banner/official-website-banner.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"official-website-banner.component.js","sources":["../../../src/components/official-website-banner/official-website-banner.component.ts"],"sourcesContent":["import { html, unsafeCSS } from 'lit'\n\nimport { translate } from '@/localization/localization'\n\nimport accordionStyles from '../accordion/accordion.scss?inline'\nimport { AccordionBaseElement } from '../accordion/accordion-base-element'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSStack from '../stack/stack.component'\nimport officialStyles from './official-website-banner.scss?inline'\n\n/**\n * `dap-ds-official-website-banner`\n * @element dap-ds-official-website-banner\n * @summary An official website banner is a banner that displays that the website is an official website.\n * @title - Official website-banner\n *\n * @property { 'sm' | 'lg' } size - The size of the official website banner. Default is `sm`.\n * @property {string} heading - The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided\n * @property { 1 | 2 | 3 | 4 | 5 | 6 } headingLevel - The heading level of the accordion. Default is `4`.\n * @property {boolean} opened - Whether the accordion is opened. Default is `false`.\n * @property { 'left' | 'right' } iconLocation - The location of the icon. Default is `right`.\n * @property { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' } variant - The variant of the accordion.\n * @property {boolean} lastItem - Whether the accordion is the last item.\n *\n * @event {{ void }} dds-opened - Event fired when the accordion is opened.\n * @event {{ void }} dds-closed - Event fired when the accordion is closed.\n *\n * @slot default - The content of the accordion.\n * @slot heading - The heading of the accordion.\n * @slot icon-opened - The icon when the accordion is opened.\n * @slot icon-closed - The icon when the accordion is closed.\n *\n * @csspart base - The main accordion container.\n * @csspart heading - The heading of the accordion.\n * @csspart button - The button of the accordion.\n * @csspart content - The content of the accordion.\n * @csspart content-container - The container of the accordion content.\n * @csspart icon-wrapper - The icon wrapper of the accordion.\n * @csspart open-icon - The icon when the accordion is opened.\n * @csspart open-icon-base - The base of the icon when the accordion is opened.\n * @csspart close-icon - The icon when the accordion is closed.\n * @csspart close-icon-base - The base of the icon when the accordion is closed.\n *\n * @cssproperty --dds-official-banner-background-color - The background color of the official website banner (default: var(--dds-background-brand-medium-inverted))\n * @cssproperty --dds-official-banner-text-color - The text color of the official website banner (default: var(--dds-text-neutral-on-inverted))\n * @cssproperty --dds-official-banner-heading-hover-color - The heading hover color of the official website banner (default: var(--dds-background-brand-medium-inverted))\n * @cssproperty --dds-official-banner-border-radius - The border radius of the official website banner (default: 0)\n * @cssproperty --dds-official-banner-icon-color - The icon color of the official website banner (default: var(--dds-text-neutral-on-inverted))\n * @cssproperty --dds-official-banner-icon-color-hover - The icon hover color of the opener icon official website banner (default: var(--dds-text-neutral-on-inverted))\n */\nexport default class DapDSOfficialWebsiteBanner extends AccordionBaseElement {\n  static tagName = 'dap-ds-official-website-banner'\n\n  static dependencies = {\n    'dap-ds-stack': DapDSStack,\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  static readonly styles = unsafeCSS(`${accordionStyles}${officialStyles}`)\n\n  headingRender() {\n    return html` <span>\n      <dap-ds-stack direction=\"row\" spacing=\"100\">\n        <dap-ds-icon\n          size=\"xs\"\n          name=\"shield-check-fill\"\n          aria-hidden=\"true\"></dap-ds-icon>\n        ${this.heading ?? translate('official-website-banner.heading')}\n      </dap-ds-stack>\n    </span>`\n  }\n\n  contentRender() {\n    return html` <div\n      style=\"display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem;\">\n      <dap-ds-stack direction=\"row\" spacing=\"200\">\n        <dap-ds-icon name=\"lock-fill\" aria-hidden=\"true\"></dap-ds-icon>\n        <span style=\"font-weight: bold\"\n          >${translate('official-website-banner.heading-2')}</span\n        >\n      </dap-ds-stack>\n      <div style=\"font-size: var(--dds-font-sm)\">\n        ${translate('official-website-banner.content')}\n      </div>\n    </div>`\n  }\n\n  render() {\n    return html` ${this.renderAccordion()} `\n  }\n}\n"],"names":["_DapDSOfficialWebsiteBanner","AccordionBaseElement","html","_a","translate","DapDSStack","DapDSIcon","unsafeCSS","accordionStyles","officialStyles","DapDSOfficialWebsiteBanner"],"mappings":";;;;;;;;;;;AAkDA,MAAqBA,IAArB,MAAqBA,UAAmCC,EAAqB;AAAA,EAU3E,gBAAgB;;AACP,WAAAC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,WAMDC,IAAA,KAAK,YAAL,OAAAA,IAAgBC,EAAU,iCAAiC,CAAC;AAAA;AAAA;AAAA,EAAA;AAAA,EAKpE,gBAAgB;AACP,WAAAF;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,aAKEE,EAAU,mCAAmC,CAAC;AAAA;AAAA;AAAA;AAAA,UAIjDA,EAAU,iCAAiC,CAAC;AAAA;AAAA;AAAA,EAAA;AAAA,EAKpD,SAAS;AACA,WAAAF,KAAQ,KAAK,gBAAA,CAAiB;AAAA,EAAA;AAEzC;AAvCEF,EAAO,UAAU,kCAEjBA,EAAO,eAAe;AAAA,EACpB,gBAAgBK;AAAA,EAChB,eAAeC;AACjB,GAEAN,EAAgB,SAASO,EAAU,GAAGC,CAAe,GAAGC,CAAc,EAAE;AAR1E,IAAqBC,IAArBV;"}
+{"version":3,"file":"official-website-banner.component.js","sources":["../../../src/components/official-website-banner/official-website-banner.component.ts"],"sourcesContent":["import { html, unsafeCSS } from 'lit'\n\nimport accordionStyles from '../accordion/accordion.scss?inline'\nimport { AccordionBaseElement } from '../accordion/accordion-base-element'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSStack from '../stack/stack.component'\nimport officialStyles from './official-website-banner.scss?inline'\n\n/**\n * `dap-ds-official-website-banner`\n * @element dap-ds-official-website-banner\n * @summary An official website banner is a banner that displays that the website is an official website.\n * @title - Official website-banner\n *\n * @property { 'sm' | 'lg' } size - The size of the official website banner. Default is `sm`.\n * @property {string} heading - The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided\n * @property { 1 | 2 | 3 | 4 | 5 | 6 } headingLevel - The heading level of the accordion. Default is `4`.\n * @property {boolean} opened - Whether the accordion is opened. Default is `false`.\n * @property { 'left' | 'right' } iconLocation - The location of the icon. Default is `right`.\n * @property { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' } variant - The variant of the accordion.\n * @property {boolean} lastItem - Whether the accordion is the last item.\n *\n * @event {{ void }} dds-opened - Event fired when the accordion is opened.\n * @event {{ void }} dds-closed - Event fired when the accordion is closed.\n *\n * @slot default - The content of the accordion.\n * @slot heading - The heading of the accordion.\n * @slot icon-opened - The icon when the accordion is opened.\n * @slot icon-closed - The icon when the accordion is closed.\n *\n * @csspart base - The main accordion container.\n * @csspart heading - The heading of the accordion.\n * @csspart button - The button of the accordion.\n * @csspart content - The content of the accordion.\n * @csspart content-container - The container of the accordion content.\n * @csspart icon-wrapper - The icon wrapper of the accordion.\n * @csspart open-icon - The icon when the accordion is opened.\n * @csspart open-icon-base - The base of the icon when the accordion is opened.\n * @csspart close-icon - The icon when the accordion is closed.\n * @csspart close-icon-base - The base of the icon when the accordion is closed.\n * @csspart heading-text - The text of the heading.\n *\n * @cssproperty --dds-official-banner-background-color - The background color of the official website banner (default: var(--dds-background-brand-medium-inverted))\n * @cssproperty --dds-official-banner-text-color - The text color of the official website banner (default: var(--dds-text-neutral-on-inverted))\n * @cssproperty --dds-official-banner-heading-hover-color - The heading hover color of the official website banner (default: var(--dds-background-brand-medium-inverted))\n * @cssproperty --dds-official-banner-border-radius - The border radius of the official website banner (default: 0)\n * @cssproperty --dds-official-banner-icon-color - The icon color of the official website banner (default: var(--dds-text-neutral-on-inverted))\n * @cssproperty --dds-official-banner-icon-color-hover - The icon hover color of the opener icon official website banner (default: var(--dds-text-neutral-on-inverted))\n */\nexport default class DapDSOfficialWebsiteBanner extends AccordionBaseElement {\n  static tagName = 'dap-ds-official-website-banner'\n\n  static dependencies = {\n    'dap-ds-stack': DapDSStack,\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  static readonly styles = unsafeCSS(`${accordionStyles}${officialStyles}`)\n\n  headingRender() {\n    return html` <span>\n      <dap-ds-stack direction=\"row\" spacing=\"100\">\n        <dap-ds-icon\n          size=\"xs\"\n          name=\"shield-check-fill\"\n          aria-hidden=\"true\"></dap-ds-icon>\n        ${this.heading ?? this.localize.t('official-website-banner.heading')}\n      </dap-ds-stack>\n    </span>`\n  }\n\n  contentRender() {\n    return html` <div\n      style=\"display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem;\">\n      <dap-ds-stack direction=\"row\" spacing=\"200\">\n        <dap-ds-icon name=\"lock-fill\" aria-hidden=\"true\"></dap-ds-icon>\n        <span style=\"font-weight: bold\"\n          >${this.localize.t('official-website-banner.heading-2')}</span\n        >\n      </dap-ds-stack>\n      <div style=\"font-size: var(--dds-font-sm)\">\n        ${this.localize.t('official-website-banner.content')}\n      </div>\n    </div>`\n  }\n\n  render() {\n    return html` ${this.renderAccordion()} `\n  }\n}\n"],"names":["_DapDSOfficialWebsiteBanner","AccordionBaseElement","html","_a","DapDSStack","DapDSIcon","unsafeCSS","accordionStyles","officialStyles","DapDSOfficialWebsiteBanner"],"mappings":";;;;;;AAiDA,MAAqBA,IAArB,MAAqBA,UAAmCC,EAAqB;AAAA,EAU3E,gBAAgB;;AACP,WAAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMDC,IAAA,KAAK,YAAL,OAAAA,IAAgB,KAAK,SAAS,EAAE,iCAAiC,CAAC;AAAA;AAAA;AAAA,EAAA;AAAA,EAK1E,gBAAgB;AACP,WAAAD;AAAA;AAAA;AAAA;AAAA;AAAA,aAKE,KAAK,SAAS,EAAE,mCAAmC,CAAC;AAAA;AAAA;AAAA;AAAA,UAIvD,KAAK,SAAS,EAAE,iCAAiC,CAAC;AAAA;AAAA;AAAA,EAAA;AAAA,EAK1D,SAAS;AACA,WAAAA,KAAQ,KAAK,gBAAA,CAAiB;AAAA,EAAA;AAEzC;AAvCEF,EAAO,UAAU,kCAEjBA,EAAO,eAAe;AAAA,EACpB,gBAAgBI;AAAA,EAChB,eAAeC;AACjB,GAEAL,EAAgB,SAASM,EAAU,GAAGC,CAAe,GAAGC,CAAc,EAAE;AAR1E,IAAqBC,IAArBT;"}