@nova-design-system/nova-webcomponents 3.23.0 → 3.24.0

package/dist/components/{p-CBF8V1L7.js → p-tyaJ-nGV.js}

@@ -52,8 +52,7 @@ const NvNotificationBullet = /*@__PURE__*/ proxyCustomElement(class NvNotificati
     }
     //#region RENDER
     render() {
-        var _a;
-        const displayCount = (_a = this.count) !== null && _a !== void 0 ? _a : 0;
+        const displayCount = this.count ?? 0;
         const displayText = displayCount > 99 ? '99+' : String(displayCount);
         if (displayCount <= 0) {
             return h(Host, { style: { display: 'none' } });
@@ -93,6 +92,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { NvNotificationBullet as N, defineCustomElement as d };
-//# sourceMappingURL=p-CBF8V1L7.js.map
+//# sourceMappingURL=p-tyaJ-nGV.js.map
 
-//# sourceMappingURL=p-CBF8V1L7.js.map
+//# sourceMappingURL=p-tyaJ-nGV.js.map

package/dist/components/p-tyaJ-nGV.js.map

@@ -0,0 +1 @@
+{"file":"p-tyaJ-nGV.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,8kHAA8kH;;MCYjmH,oBAAoB,iBAAAA,kBAAA,CAAA,MAAA,oBAAA,SAAAC,CAAA,CAAA;AALjC,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAqCE;;;;AAIG;AAEM,QAAA,IAAI,CAAA,IAAA,GAA0B,SAAS;AAEhD;;AAEG;AAEM,QAAA,IAAiB,CAAA,iBAAA,GAAY,KAAK;AAoE5C;;;;IAhES,YAAY,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,OAAO,IAAI,CAAC,SAAS;;;QAGvB,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;QAC7C,IAAI,OAAO,EAAE;YACX,MAAM,gBAAgB,GAAG,OAAO,CAAC,YAAY,CAAC,wBAAwB,CAAC;YACvE,IAAI,gBAAgB,KAAK,SAAS,IAAI,gBAAgB,KAAK,OAAO,EAAE;AAClE,gBAAA,OAAO,gBAAgB;;;QAG3B,OAAO,OAAO,CAAC;;IAGT,WAAW,GAAA;AACjB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAC,QAAQ;;;QAGtB,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;QAC7C,IAAI,OAAO,EAAE;YACX,MAAM,eAAe,GAAG,OAAO,CAAC,YAAY,CAAC,uBAAuB,CAAC;YACrE,IAAI,eAAe,KAAK,MAAM,IAAI,eAAe,KAAK,KAAK,EAAE;AAC3D,gBAAA,OAAO,eAAe;;;QAG1B,OAAO,MAAM,CAAC;;;IAGhB,MAAM,GAAA;AACJ,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;AACpC,QAAA,MAAM,WAAW,GAAG,YAAY,GAAG,EAAE,GAAG,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC;AAEpE,QAAA,IAAI,YAAY,IAAI,CAAC,EAAE;AACrB,YAAA,OAAO,CAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAA,CAAS;;AAGlD,QAAA,MAAM,SAAS,GACb,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,gCAAgC,GAAG,EAAE;AACjE,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE;AACrC,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE;AACnC,QAAA,MAAM,cAAc,GAAG,CAA0B,uBAAA,EAAA,SAAS,EAAE;AAC5D,QAAA,MAAM,aAAa,GAAG,CAA0B,uBAAA,EAAA,QAAQ,EAAE;AAC1D,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC;AACvB,cAAE;cACA,EAAE;QAEN,QACE,CAAC,CAAA,IAAI,IACH,KAAK,EAAE,CAAA,EAAG,cAAc,CAAA,CAAA,EACtB,WAAW,GAAG,0CAA0C,GAAG,EAC7D,CAAE,CAAA,EAAA,EAEF,CAAA,CAAA,MAAA,EAAA,EACE,KAAK,EAAE,0BAA0B,aAAa,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,EAAI,WAAW,CAAA,CAAE,EAChE,YAAA,EAAA,CAAG,EAAA,YAAY,CAAgB,cAAA,CAAA,EAAA,EAE1C,WAAW,CACP,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-notification-bullet/styles/nv-notification-bullet.scss?tag=nv-notification-bullet","src/components/nv-notification-bullet/nv-notification-bullet.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-notification-bullet {\n  @include bullet-base-styles();\n  position: relative; // Needed for cross-border pseudo-element positioning\n\n\n  /* Intention: brand */\n  &.nv-notification-bullet-brand {\n    .nv-notification-bullet {\n      @include bullet-inner-styles();\n      &.nv-notification-bullet-high {\n        @include bullet-brand-high();\n      }\n      &.nv-notification-bullet-low {\n        @include bullet-brand-low();\n      }\n    }\n  }\n\n  /* Intention: neutral */\n  &.nv-notification-bullet-neutral {\n    @include bullet-inner-styles();\n    .nv-notification-bullet {\n      &.nv-notification-bullet-high {\n        @include bullet-neutral-high();\n      }\n      &.nv-notification-bullet-low {\n        @include bullet-neutral-low();\n      }\n    }\n  }\n\n  /* Contrasting border (cross-border backdrop) - creates a larger circle behind the bullet */\n  /* The cross-border intelligently inherits the background color from the parent (nv-sidebarnavitem-trigger) */\n  &.nv-notification-bullet-with-cross-border::before {\n    content: '';\n    position: absolute;\n    top: 55%;\n    left: 45%;\n    transform: translate(-50%, -50%);\n    width: calc(var(--sidebar-notification-bullet-size) + 1.5px);\n    height: calc(var(--sidebar-notification-bullet-size) * 1.5);\n    border-radius: var(--radius-rounded-full);\n    /* Intelligently inherits background color from parent via CSS variable */\n    /* Supports multiple parent types: --nv-component-background (generic) or --nv-sidebarnavitem-background (sidebar specific) */\n    background-color: var(--nv-component-background, var(--nv-sidebarnavitem-background, var(--color-interaction-container-neutral-background)));\n    z-index: -1;\n    pointer-events: none;\n  }\n  \n  /* Cross-border for reduced size (when sidebar is collapsed) */\n  nv-sidebar[collapsed] &.nv-notification-bullet-with-cross-border::before {\n    width: calc(var(--sidebar-notification-bullet-size-reduced) * 1.5);\n    height: calc(var(--sidebar-notification-bullet-size-reduced) * 1.5);\n  }\n  \n  /* Size: reduced */\n  .nv-notification-bullet.nv-notification-bullet-reduced,\n  /* When inside a collapsed sidebar, use reduced size automatically */\n  nv-sidebar[collapsed] & .nv-notification-bullet {\n    @include bullet-styles-reduced();\n  }\n}\n\n","import { Component, Host, Prop, Element, h } from '@stencil/core';\n\n/**\n * Notification bullet component for displaying notification counts in the sidebar.\n * Automatically adapts its size when the sidebar is collapsed.\n * Inherits intention and emphasis from parent nv-sidebar if not explicitly set.\n */\n@Component({\n  tag: 'nv-notification-bullet',\n  styleUrl: 'styles/nv-notification-bullet.scss',\n  shadow: false,\n})\nexport class NvNotificationBullet {\n  @Element() el: HTMLNvNotificationBulletElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n  /**\n   * The number of notifications to display.\n   * If 0 or not provided, the component will not be visible.\n   */\n  @Prop({ reflect: true })\n  readonly count?: number;\n\n  /**\n   * Determines the type of the notification.\n   * - neutral: Uses neutral colors (gray)\n   * - brand: Uses brand colors (orange/teal depending on theme)\n   * If not set, inherits from parent nv-sidebar's notificationIntention prop.\n   * @deprecated Use notificationIntention prop on nv-sidebar instead. This prop is kept for backward compatibility but will be removed in a future version.\n   */\n  @Prop({ reflect: true })\n  readonly intention?: 'neutral' | 'brand';\n\n  /**\n   * Determines the emphasis and importance of the notification.\n   * - high: More prominent appearance\n   * - low: Less prominent appearance\n   * If not set, inherits from parent nv-sidebar's notificationEmphasis prop.\n   * @deprecated Use notificationEmphasis prop on nv-sidebar instead. This prop is kept for backward compatibility but will be removed in a future version.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis?: 'high' | 'low';\n\n  /**\n   * Determines the size of the notification bullet.\n   * - default: Normal size with text visible\n   * - reduced: Smaller size, text hidden (just a dot)\n   */\n  @Prop({ reflect: true })\n  readonly size: 'default' | 'reduced' = 'default';\n\n  /**\n   * Allows to add a border to add contrast on background.\n   */\n  @Prop({ reflect: true })\n  readonly contrastingBorder: boolean = false;\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n  private getIntention(): 'neutral' | 'brand' {\n    if (this.intention) {\n      return this.intention;\n    }\n    // Inherit from parent nv-sidebar\n    const sidebar = this.el.closest('nv-sidebar');\n    if (sidebar) {\n      const sidebarIntention = sidebar.getAttribute('notification-intention');\n      if (sidebarIntention === 'neutral' || sidebarIntention === 'brand') {\n        return sidebarIntention;\n      }\n    }\n    return 'brand'; // Default fallback\n  }\n\n  private getEmphasis(): 'high' | 'low' {\n    if (this.emphasis) {\n      return this.emphasis;\n    }\n    // Inherit from parent nv-sidebar\n    const sidebar = this.el.closest('nv-sidebar');\n    if (sidebar) {\n      const sidebarEmphasis = sidebar.getAttribute('notification-emphasis');\n      if (sidebarEmphasis === 'high' || sidebarEmphasis === 'low') {\n        return sidebarEmphasis;\n      }\n    }\n    return 'high'; // Default fallback\n  }\n  //#region RENDER\n  render() {\n    const displayCount = this.count ?? 0;\n    const displayText = displayCount > 99 ? '99+' : String(displayCount);\n\n    if (displayCount <= 0) {\n      return <Host style={{ display: 'none' }}></Host>;\n    }\n\n    const sizeClass =\n      this.size === 'reduced' ? 'nv-notification-bullet-reduced' : '';\n    const intention = this.getIntention();\n    const emphasis = this.getEmphasis();\n    const intentionClass = `nv-notification-bullet-${intention}`;\n    const emphasisClass = `nv-notification-bullet-${emphasis}`;\n    const borderClass = this.contrastingBorder\n      ? 'nv-notification-bullet-with-border'\n      : '';\n\n    return (\n      <Host\n        class={`${intentionClass} ${\n          borderClass ? 'nv-notification-bullet-with-cross-border' : ''\n        }`}\n      >\n        <span\n          class={`nv-notification-bullet ${emphasisClass} ${sizeClass} ${borderClass}`}\n          aria-label={`${displayCount} notifications`}\n        >\n          {displayText}\n        </span>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"],"version":3}

package/dist/components/p-u-maNLLs.js

@@ -0,0 +1,145 @@
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-C63Xpg9a.js';
+import { b as ButtonType } from './p-BReL3Lsa.js';
+import { d as defineCustomElement$3 } from './p-B45HbBWe.js';
+import { d as defineCustomElement$2 } from './p-nfYynlVq.js';
+import { d as defineCustomElement$1 } from './p-COnt5ux_.js';
+
+const nvDrawerfooterCss = "nv-drawerfooter{display:flex;padding:var(--drawer-padding-y, var(--dialog-footer-padding-top)) var(--drawer-padding-x, var(--dialog-footer-padding-x)) var(--drawer-padding-y, var(--dialog-footer-padding-bottom)) var(--drawer-padding-x, var(--dialog-footer-padding-x));justify-content:flex-end;align-items:flex-end;gap:var(--drawer-gap-y, var(--dialog-footer-gap-y));align-self:stretch}";
+
+const NvDrawerfooter = /*@__PURE__*/ proxyCustomElement(class NvDrawerfooter extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.drawerCanceled = createEvent(this, "drawerCanceled", 3);
+        this.drawerPrimaryClicked = createEvent(this, "drawerPrimaryClicked", 3);
+        this.internals = this.attachInternals();
+        this.hasSlot = false;
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Disables the primary button, preventing user interaction.
+         */
+        this.disabled = false;
+        /**
+         * Controls the visibility of the cancel button. When true, the cancel button is
+         * hidden.
+         */
+        this.undismissable = false;
+        /**
+         * Sets the leading icon for the primary button.
+         */
+        this.leadingIcon = null;
+        /**
+         * Sets the trailing icon for the primary button.
+         */
+        this.trailingIcon = null;
+        /**
+         * Sets the danger state for the primary button.
+         */
+        this.danger = false;
+        /**
+         * Sets the label for the cancel button.
+         */
+        this.cancelLabel = 'Cancel';
+        /**
+         * Sets the label for the primary button.
+         */
+        this.primaryLabel = 'Primary';
+        /**
+         * A form inside the drawer can be submitted through the drawer footer by
+         * giving the form an id and passing that id to the form attribute.
+         */
+        this.form = null;
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region METHODS
+        /**
+         * Handles the primary action when the primary button is clicked.
+         * @param {Event} event - The click event.
+         */
+        this.handlePrimary = (event) => {
+            event.stopPropagation();
+            this.drawerPrimaryClicked.emit();
+        };
+        /**
+         * Handles the cancel action when the cancel button is clicked. This will close the drawer.
+         * @param {Event} event - The click event.
+         */
+        this.handleCancel = (event) => {
+            event.stopPropagation();
+            this.drawerCanceled.emit();
+        };
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        // Check if there are any child elements that don't have a slot attribute
+        this.hasSlot = Array.from(this.el.childNodes).some(node => {
+            return (node.nodeType === Node.ELEMENT_NODE &&
+                !node.hasAttribute('slot'));
+        });
+    }
+    componentDidLoad() {
+        // Set the default button type based on the form property
+        this.primaryButtonType =
+            this.primaryButtonType || this.form
+                ? ButtonType.Submit
+                : ButtonType.Button;
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '75b11ed4b84aa602f76895c473595423d38cc21d' }, !this.hasSlot ? (h(Fragment, null, !this.undismissable && (h("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), h("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (h("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (h("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (h("slot", null))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return this; }
+    static get style() { return nvDrawerfooterCss; }
+}, [324, "nv-drawerfooter", {
+        "disabled": [516],
+        "undismissable": [516],
+        "leadingIcon": [513, "leading-icon"],
+        "trailingIcon": [513, "trailing-icon"],
+        "danger": [516],
+        "cancelLabel": [513, "cancel-label"],
+        "primaryLabel": [513, "primary-label"],
+        "primaryButtonType": [1537, "primary-button-type"],
+        "form": [513]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-drawerfooter", "nv-button", "nv-icon", "nv-loader"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-drawerfooter":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvDrawerfooter);
+            }
+            break;
+        case "nv-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "nv-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "nv-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { NvDrawerfooter as N, defineCustomElement as d };
+//# sourceMappingURL=p-u-maNLLs.js.map
+
+//# sourceMappingURL=p-u-maNLLs.js.map

package/dist/components/p-u-maNLLs.js.map

@@ -0,0 +1 @@
+{"file":"p-u-maNLLs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,mYAAmY;;MCsBhZ,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAN3B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AASU,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;;;AAKvB;;AAEG;AAEM,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElC;;;AAGG;AAEM,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAEvC;;AAEG;AAEM,QAAA,IAAW,CAAA,WAAA,GAAmB,IAAI;AAE3C;;AAEG;AAEM,QAAA,IAAY,CAAA,YAAA,GAAmB,IAAI;AAE5C;;AAEG;AAEM,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEhC;;AAEG;AAEM,QAAA,IAAW,CAAA,WAAA,GAAkB,QAAQ;AAE9C;;AAEG;AAEM,QAAA,IAAY,CAAA,YAAA,GAAkB,SAAS;AAShD;;;AAGG;AAEM,QAAA,IAAI,CAAA,IAAA,GAAmB,IAAI;;;;AAuBpC;;;AAGG;AAEK,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAY,KAAI;YACvC,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE;AAClC,SAAC;AAED;;;AAGG;AACK,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAAY,KAAI;YACtC,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE;AAC5B,SAAC;AAwEF;;;;IAlEC,iBAAiB,GAAA;;AAEf,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,IAAG;AACxD,YAAA,QACE,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;AACnC,gBAAA,CAAE,IAAgB,CAAC,YAAY,CAAC,MAAM,CAAC;AAE3C,SAAC,CAAC;;IAGJ,gBAAgB,GAAA;;AAEd,QAAA,IAAI,CAAC,iBAAiB;AACpB,YAAA,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC;kBAC3B,UAAU,CAAC;AACb,kBAAE,UAAU,CAAC,MAAM;;;;;IAOzB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,CAAC,IAAI,CAAC,OAAO,IACZ,EAAC,QAAQ,EAAA,IAAA,EACN,CAAC,IAAI,CAAC,aAAa,KAClB,iBAAW,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAC,KAAK,EAAC,IAAI,EAAC,IAAI,IAC5D,IAAI,CAAC,WAAW,CACP,CACb,EACD,CAAA,CAAA,WAAA,EAAA,EACE,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,iBAAiB,EAAA,EAE3B,IAAI,CAAC,WAAW,KACf,CACE,CAAA,SAAA,EAAA,EAAA,IAAI,EAAC,cAAc,EACnB,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,IAAI,EAAC,IAAI,GACT,CACH,EACA,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,YAAY,KAChB,CACE,CAAA,SAAA,EAAA,EAAA,IAAI,EAAC,eAAe,EACpB,IAAI,EAAE,IAAI,CAAC,YAAY,EACvB,IAAI,EAAC,IAAI,EAAA,CACT,CACH,CACS,CACH,KAEX,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACd,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-drawerfooter/nv-drawerfooter.scss?tag=nv-drawerfooter","src/components/nv-drawerfooter/nv-drawerfooter.tsx"],"sourcesContent":["nv-drawerfooter {\n  display: flex;\n  padding: var(--drawer-padding-y, var(--dialog-footer-padding-top)) var(--drawer-padding-x, var(--dialog-footer-padding-x))\n    var(--drawer-padding-y, var(--dialog-footer-padding-bottom)) var(--drawer-padding-x, var(--dialog-footer-padding-x));\n\n  justify-content: flex-end;\n  align-items: flex-end;\n  gap: var(--drawer-gap-y, var(--dialog-footer-gap-y));\n  align-self: stretch;\n}","import {\n  AttachInternals,\n  Component,\n  h,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Fragment,\n  Element,\n} from '@stencil/core';\nimport { ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Custom content for the drawer footer. When provided, the default buttons will not be rendered.\n */\n@Component({\n  tag: 'nv-drawerfooter',\n  styleUrl: 'nv-drawerfooter.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvDrawerfooter {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvDrawerfooterElement;\n  private hasSlot = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Disables the primary button, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Controls the visibility of the cancel button. When true, the cancel button is\n   * hidden.\n   */\n  @Prop({ reflect: true })\n  readonly undismissable: boolean = false;\n\n  /**\n   * Sets the leading icon for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly leadingIcon?: string | null = null;\n\n  /**\n   * Sets the trailing icon for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly trailingIcon?: string | null = null;\n\n  /**\n   * Sets the danger state for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\n\n  /**\n   * Sets the label for the cancel button.\n   */\n  @Prop({ reflect: true })\n  readonly cancelLabel: string | null = 'Cancel';\n\n  /**\n   * Sets the label for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly primaryLabel: string | null = 'Primary';\n\n  /**\n   * Sets the type of the primary button. If using a form, this will default to\n   * 'submit' if nothing passed.\n   */\n  @Prop({ reflect: true, mutable: true })\n  primaryButtonType: `${ButtonType}`;\n\n  /**\n   * A form inside the drawer can be submitted through the drawer footer by\n   * giving the form an id and passing that id to the form attribute.\n   */\n  @Prop({ reflect: true })\n  readonly form?: string | null = null;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the cancel button is clicked. This will close the drawer.\n   */\n  @Event({ bubbles: false })\n  drawerCanceled: EventEmitter<void>;\n\n  /**\n   * Emitted when the primary button is clicked. This allows to handle the\n   * primary action and potential data capture before closing the drawer.\n   */\n  @Event({ bubbles: false })\n  drawerPrimaryClicked: EventEmitter<void>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the primary action when the primary button is clicked.\n   * @param {Event} event - The click event.\n   */\n\n  private handlePrimary = (event: Event) => {\n    event.stopPropagation();\n    this.drawerPrimaryClicked.emit();\n  };\n\n  /**\n   * Handles the cancel action when the cancel button is clicked. This will close the drawer.\n   * @param {Event} event - The click event.\n   */\n  private handleCancel = (event: Event) => {\n    event.stopPropagation();\n    this.drawerCanceled.emit();\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    // Check if there are any child elements that don't have a slot attribute\n    this.hasSlot = Array.from(this.el.childNodes).some(node => {\n      return (\n        node.nodeType === Node.ELEMENT_NODE &&\n        !(node as Element).hasAttribute('slot')\n      );\n    });\n  }\n\n  componentDidLoad() {\n    // Set the default button type based on the form property\n    this.primaryButtonType =\n      this.primaryButtonType || this.form\n        ? ButtonType.Submit\n        : ButtonType.Button;\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {!this.hasSlot ? (\n          <Fragment>\n            {!this.undismissable && (\n              <nv-button onClick={this.handleCancel} emphasis=\"low\" size=\"sm\">\n                {this.cancelLabel}\n              </nv-button>\n            )}\n            <nv-button\n              onClick={this.handlePrimary}\n              disabled={this.disabled}\n              danger={this.danger}\n              size=\"sm\"\n              emphasis=\"high\"\n              form={this.form}\n              type={this.primaryButtonType}\n            >\n              {this.leadingIcon && (\n                <nv-icon\n                  slot=\"leading-icon\"\n                  name={this.leadingIcon}\n                  size=\"sm\"\n                />\n              )}\n              {this.primaryLabel}\n              {this.trailingIcon && (\n                <nv-icon\n                  slot=\"trailing-icon\"\n                  name={this.trailingIcon}\n                  size=\"sm\"\n                />\n              )}\n            </nv-button>\n          </Fragment>\n        ) : (\n          <slot></slot>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}