@nova-design-system/nova-react 3.14.0 → 3.16.0

package/dist/providers/NotificationProvider.js

@@ -0,0 +1,83 @@
+import React, { createContext, useContext, useState, useCallback, createRef, useEffect, useRef, } from 'react';
+import { createPortal } from 'react-dom';
+import { NvNotificationcontainer, NvNotification, NvButton, } from '../generated/components';
+const NotificationContext = createContext(null);
+const DEFAULT_POSITION = 'top-right';
+const DEFAULT_MAX_NOTIFICATIONS = 50;
+const generateId = () => {
+    return `notification-${Date.now()}-${Math.random()
+        .toString(36)
+        .substr(2, 9)}`;
+};
+export const NotificationProvider = ({ children, position = DEFAULT_POSITION, maxNotifications = DEFAULT_MAX_NOTIFICATIONS, className, }) => {
+    const [notifications, setNotifications] = useState([]);
+    const notificationsRef = useRef([]);
+    useEffect(() => {
+        notificationsRef.current = notifications;
+    }, [notifications]);
+    const show = useCallback((options) => {
+        const id = options.id || generateId();
+        const ref = createRef();
+        const notification = {
+            id,
+            heading: options.heading,
+            message: options.message,
+            dismissible: options.dismissible ?? true,
+            emphasis: options.emphasis ?? 'medium',
+            feedback: options.feedback ?? 'information',
+            icon: options.icon,
+            actions: options.actions ?? [],
+            actionSlot: options.actionSlot,
+            createdAt: Date.now(),
+            ref,
+        };
+        setNotifications((prev) => {
+            const newNotifications = [notification, ...prev];
+            if (newNotifications.length > maxNotifications) {
+                return newNotifications.slice(0, maxNotifications);
+            }
+            return newNotifications;
+        });
+        setTimeout(() => {
+            notification.ref.current?.show();
+        }, 0);
+        return id;
+    }, [maxNotifications]);
+    const dismiss = useCallback((id) => {
+        const n = notificationsRef.current.find((item) => item.id === id);
+        n?.ref.current?.dismiss();
+    }, []);
+    const remove = useCallback((id) => {
+        setNotifications((prev) => prev.filter((notification) => notification.id !== id));
+    }, []);
+    const removeAll = useCallback(() => {
+        setNotifications([]);
+    }, []);
+    const handleNotificationClose = useCallback((id) => {
+        remove(id);
+    }, [remove]);
+    const contextValue = {
+        notifications,
+        show,
+        dismiss,
+        remove,
+        removeAll,
+    };
+    return (React.createElement(NotificationContext.Provider, { value: contextValue },
+        children,
+        createPortal(React.createElement(NvNotificationcontainer, { position: position, className: className, "data-testid": "notification-container" }, notifications.map((notification) => (React.createElement(NvNotification, { key: notification.id, heading: notification.heading, message: notification.message, dismissible: notification.dismissible, emphasis: notification.emphasis, feedback: notification.feedback, icon: notification.icon, onHiddenChanged: (event) => {
+                if (event.detail) {
+                    handleNotificationClose(notification.id);
+                }
+            }, initiallyHidden: true, ref: notification.ref }, (Boolean(notification.actionSlot) ||
+            Boolean(notification.actions.length)) && (React.createElement("div", { slot: "actions" },
+            notification.actions.map((action) => (React.createElement(NvButton, { key: action.label, emphasis: "low", size: "md", onClick: action.onClick }, action.label))),
+            notification.actionSlot)))))), document.body)));
+};
+export const useNotifications = () => {
+    const context = useContext(NotificationContext);
+    if (!context) {
+        throw new Error('useNotifications must be used within a NotificationProvider');
+    }
+    return context;
+};

package/dist/types/components/NvDatatable.d.ts

@@ -0,0 +1,25 @@
+import React, { type ComponentProps } from 'react';
+declare const NvDatatable: {
+    <T extends NvDatatableRow = NvDatatableRow>({ columns, rows, ...htmlProps }: NvDatatableProps<T>): React.JSX.Element;
+    displayName: string;
+};
+export { NvDatatable };
+export type NvDatatableProps<T> = {
+    columns: Array<NvDatatableColumn<T>>;
+    rows: Array<T>;
+} & Pick<ComponentProps<'div'>, 'className' | 'style'>;
+export interface NvDatatableColumn<T> {
+    field: keyof T;
+    headerName?: string;
+    width?: number;
+    resizable?: boolean;
+    hidden?: boolean;
+    renderCell?: (params: NvTableRenderCellParams<T, T[keyof T]>) => React.ReactNode;
+}
+export type NvDatatableRow = Record<string, string | number | boolean | null | undefined | typeof Date>;
+export interface NvTableRenderCellParams<T, V> {
+    value: V;
+    row: T;
+    field: keyof T;
+    rowIndex: number;
+}

package/dist/types/generated/components.d.ts

@@ -36,20 +36,18 @@ import { NvLoader as NvLoaderElement } from "@nova-design-system/nova-webcompone
 import { NvMenu as NvMenuElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-menu.js";
 import { NvMenuitem as NvMenuitemElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-menuitem.js";
 import { NvNotification as NvNotificationElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-notification.js";
+import { NvNotificationcontainer as NvNotificationcontainerElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-notificationcontainer.js";
 import { NvPopover as NvPopoverElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-popover.js";
 import { NvRow as NvRowElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-row.js";
 import { NvStack as NvStackElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-stack.js";
 import { NvTable as NvTableElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-table.js";
-import { NvTablecolumn as NvTablecolumnElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-tablecolumn.js";
 import { NvToggle as NvToggleElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-toggle.js";
 import { NvTogglebutton as NvTogglebuttonElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-togglebutton.js";
 import { NvTogglebuttongroup as NvTogglebuttongroupElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-togglebuttongroup.js";
 import { NvTooltip as NvTooltipElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-tooltip.js";
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
 export type NvAccordionEvents = {
-    onOpenChanged: EventName<CustomEvent<{
-        openIndexes: number[];
-    }>>;
+    onOpenIndexesChanged: EventName<CustomEvent<number[]>>;
 };
 export declare const NvAccordion: StencilReactComponent<NvAccordionElement, NvAccordionEvents>;
 export type NvAccordionItemEvents = {
@@ -210,6 +208,8 @@ export type NvNotificationEvents = {
     onHiddenChanged: EventName<CustomEvent<boolean>>;
 };
 export declare const NvNotification: StencilReactComponent<NvNotificationElement, NvNotificationEvents>;
+export type NvNotificationcontainerEvents = NonNullable<unknown>;
+export declare const NvNotificationcontainer: StencilReactComponent<NvNotificationcontainerElement, NvNotificationcontainerEvents>;
 export type NvPopoverEvents = {
     onOpenChanged: EventName<CustomEvent<boolean>>;
 };
@@ -218,15 +218,8 @@ export type NvRowEvents = NonNullable<unknown>;
 export declare const NvRow: StencilReactComponent<NvRowElement, NvRowEvents>;
 export type NvStackEvents = NonNullable<unknown>;
 export declare const NvStack: StencilReactComponent<NvStackElement, NvStackEvents>;
-export type NvTableEvents = {
-    onAction: EventName<CustomEvent<{
-        keyAction: string;
-        details: any;
-    }>>;
-};
+export type NvTableEvents = NonNullable<unknown>;
 export declare const NvTable: StencilReactComponent<NvTableElement, NvTableEvents>;
-export type NvTablecolumnEvents = NonNullable<unknown>;
-export declare const NvTablecolumn: StencilReactComponent<NvTablecolumnElement, NvTablecolumnEvents>;
 export type NvToggleEvents = {
     onCheckedChanged: EventName<CustomEvent<boolean>>;
 };

package/dist/types/generated/components.server.d.ts

@@ -36,11 +36,11 @@ import { NvLoader as NvLoaderElement } from "@nova-design-system/nova-webcompone
 import { NvMenu as NvMenuElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-menu.js";
 import { NvMenuitem as NvMenuitemElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-menuitem.js";
 import { NvNotification as NvNotificationElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-notification.js";
+import { NvNotificationcontainer as NvNotificationcontainerElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-notificationcontainer.js";
 import { NvPopover as NvPopoverElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-popover.js";
 import { NvRow as NvRowElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-row.js";
 import { NvStack as NvStackElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-stack.js";
 import { NvTable as NvTableElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-table.js";
-import { NvTablecolumn as NvTablecolumnElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-tablecolumn.js";
 import { NvToggle as NvToggleElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-toggle.js";
 import { NvTogglebutton as NvTogglebuttonElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-togglebutton.js";
 import { NvTogglebuttongroup as NvTogglebuttongroupElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-togglebuttongroup.js";
@@ -49,9 +49,7 @@ import type { EventName, StencilReactComponent } from '@stencil/react-output-tar
 import { type SerializeShadowRootOptions } from '@stencil/react-output-target/ssr';
 export declare const serializeShadowRoot: SerializeShadowRootOptions;
 export type NvAccordionEvents = {
-    onOpenChanged: EventName<CustomEvent<{
-        openIndexes: number[];
-    }>>;
+    onOpenIndexesChanged: EventName<CustomEvent<number[]>>;
 };
 export declare const NvAccordion: StencilReactComponent<NvAccordionElement, NvAccordionEvents>;
 export type NvAccordionItemEvents = {
@@ -212,6 +210,8 @@ export type NvNotificationEvents = {
     onHiddenChanged: EventName<CustomEvent<boolean>>;
 };
 export declare const NvNotification: StencilReactComponent<NvNotificationElement, NvNotificationEvents>;
+export type NvNotificationcontainerEvents = NonNullable<unknown>;
+export declare const NvNotificationcontainer: StencilReactComponent<NvNotificationcontainerElement, NvNotificationcontainerEvents>;
 export type NvPopoverEvents = {
     onOpenChanged: EventName<CustomEvent<boolean>>;
 };
@@ -220,15 +220,8 @@ export type NvRowEvents = NonNullable<unknown>;
 export declare const NvRow: StencilReactComponent<NvRowElement, NvRowEvents>;
 export type NvStackEvents = NonNullable<unknown>;
 export declare const NvStack: StencilReactComponent<NvStackElement, NvStackEvents>;
-export type NvTableEvents = {
-    onAction: EventName<CustomEvent<{
-        keyAction: string;
-        details: any;
-    }>>;
-};
+export type NvTableEvents = NonNullable<unknown>;
 export declare const NvTable: StencilReactComponent<NvTableElement, NvTableEvents>;
-export type NvTablecolumnEvents = NonNullable<unknown>;
-export declare const NvTablecolumn: StencilReactComponent<NvTablecolumnElement, NvTablecolumnEvents>;
 export type NvToggleEvents = {
     onCheckedChanged: EventName<CustomEvent<boolean>>;
 };

package/dist/types/index.d.ts

@@ -1,3 +1,5 @@
 export * from './generated/components';
 export * from '@nova-design-system/nova-webcomponents/constants';
 export { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
+export { useNotifications, NotificationProvider, type NotificationOptions, type NotificationContextValue, type NotificationProviderProps, type Notification, } from './providers/NotificationProvider';
+export * from './components/NvDatatable';

package/dist/types/providers/NotificationProvider.d.ts

@@ -0,0 +1,36 @@
+import React, { ReactNode } from 'react';
+import { type NotificationPosition, type NotificationEmphasis, FeedbackColors } from '../index';
+export interface NotificationAction {
+    label: string;
+    onClick: () => void;
+}
+export interface NotificationOptions {
+    id?: string;
+    heading?: string;
+    message?: string;
+    dismissible?: boolean;
+    emphasis?: `${NotificationEmphasis}`;
+    feedback?: `${FeedbackColors}`;
+    icon?: string;
+    actions?: NotificationAction[];
+    actionSlot?: React.ReactElement;
+}
+export interface Notification extends NotificationOptions {
+    createdAt: number;
+    ref: React.RefObject<HTMLNvNotificationElement>;
+}
+export interface NotificationContextValue {
+    notifications: Notification[];
+    show: (options: NotificationOptions) => string;
+    dismiss: (id: string) => void;
+    remove: (id: string) => void;
+    removeAll: () => void;
+}
+export interface NotificationProviderProps {
+    children: ReactNode;
+    position?: `${NotificationPosition}`;
+    maxNotifications?: number;
+    className?: string;
+}
+export declare const NotificationProvider: React.FC<NotificationProviderProps>;
+export declare const useNotifications: () => NotificationContextValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-react",
-  "version": "3.14.0",
+  "version": "3.16.0",
   "description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
   "author": "Elia Group",
   "homepage": "https://nova.eliagroup.io",
@@ -27,14 +27,18 @@
   "scripts": {
     "build": "npm run build:cjs && npm run tsc",
     "build:cjs": "rollup -c",
+    "build:watch": "npm run build:cjs:watch & npm run tsc:watch",
+    "build:cjs:watch": "rollup -c --watch",
     "tsc": "tsc -p . --outDir ./dist --declarationDir ./dist/types --declaration true",
+    "tsc:watch": "tsc -p . --outDir ./dist --declarationDir ./dist/types --declaration true --watch",
     "storybook": "storybook dev -p 6006",
     "storybook.build": "storybook build -o ../../storybook-static/react",
-    "clean": "rimraf dist lib/generated",
+    "clean": "rimraf dist lib/generated lib/stories/generated",
     "typecheck": "tsc --emitDeclarationOnly false --noEmit"
   },
   "dependencies": {
-    "@nova-design-system/nova-webcomponents": "*"
+    "@nova-design-system/nova-webcomponents": "*",
+    "@tanstack/react-table": "8.21.3"
   },
   "devDependencies": {
     "react": "^18.3.1",

package/dist/cjs/dom.utils-ac71e0ef-CmIwRr6O.js

@@ -1,168 +0,0 @@
-'use strict';
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/**
- * All properties that should be excluded from the deep copy of an HTML element.
- */
-const excludedProps = new Set([
-    // Text and content-related properties
-    'textContent',
-    'innerText',
-    'outerText',
-    'innerHTML',
-    'outerHTML',
-    'text',
-    // Form element properties
-    'value',
-    'defaultValue',
-    'checked',
-    'defaultChecked',
-    'selectionStart',
-    'selectionEnd',
-    'selectionDirection',
-    'form',
-    'willValidate',
-    'validity',
-    'validationMessage',
-    'labels',
-    'list',
-    'maxLength',
-    'minLength',
-    'valueAsDate',
-    'valueAsNumber',
-    // Editability and namespaces
-    'contentEditable',
-    'isContentEditable',
-    'namespaceURI',
-    // Child-related properties (handled recursively)
-    'attributes',
-    'children',
-    'childNodes',
-    'firstChild',
-    'lastChild',
-    // Blazor-related properties
-    'origin',
-    'dataset',
-    'attributeStyleMap',
-    'prefix',
-    'localName',
-    'tagName',
-    'shadowRoot',
-    'assignedSlot',
-    'scrollWidth',
-    'scrollHeight',
-    'clientTop',
-    'clientLeft',
-    'clientWidth',
-    'clientHeight',
-    'firstElementChild',
-    'lastElementChild',
-    'childElementCount',
-    'previousElementSibling',
-    'nextElementSibling',
-    'currentCSSZoom',
-    'nodeType',
-    'nodeName',
-    'baseURI',
-    'isConnected',
-    'ownerDocument',
-    'parentNode',
-    'parentElement',
-    'previousSibling',
-    'nextSibling',
-    'ELEMENT_NODE',
-    'ATTRIBUTE_NODE',
-    'TEXT_NODE',
-    'CDATA_SECTION_NODE',
-    'ENTITY_REFERENCE_NODE',
-    'ENTITY_NODE',
-    'PROCESSING_INSTRUCTION_NODE',
-    'COMMENT_NODE',
-    'DOCUMENT_NODE',
-    'DOCUMENT_TYPE_NODE',
-    'DOCUMENT_FRAGMENT_NODE',
-    'NOTATION_NODE',
-    'DOCUMENT_POSITION_DISCONNECTED',
-    'DOCUMENT_POSITION_PRECEDING',
-    'DOCUMENT_POSITION_FOLLOWING',
-    'DOCUMENT_POSITION_CONTAINS',
-    'DOCUMENT_POSITION_CONTAINED_BY',
-    'DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC',
-]);
-/**
- * Deep copy an HTML element with all its attributes, properties, and child nodes.
- * This method is useful for creating a clone of an element that can be safely modified without affecting the original.
- * @param {HTMLElement} element - The HTML element to copy.
- * @returns {HTMLElement} - A deep copy of the HTML element.
- * @example const copy = deepCopyElement(document.getElementById('myElement'));
- */
-function deepCopyElement(element) {
-    const copy = document.createElement(element.tagName);
-    // ✅ Copy attributes
-    Array.from(element.attributes).forEach(attr => {
-        copy.setAttribute(attr.name, attr.value);
-    });
-    // ✅ Dynamically extract relevant properties
-    const properties = new Set();
-    // Collect only own enumerable properties
-    Object.keys(element).forEach(key => properties.add(key));
-    // Collect inherited properties from prototypes (HTMLElement -> Element -> Node)
-    let proto = Object.getPrototypeOf(element);
-    while (proto && proto !== HTMLElement.prototype) {
-        Object.keys(proto).forEach(key => properties.add(key));
-        proto = Object.getPrototypeOf(proto);
-    }
-    // ✅ Filter and copy only non-function properties (methods are excluded) and non-event listeners
-    properties.forEach(prop => {
-        if (typeof element[prop] !== 'function' && // Ignore methods
-            !prop.startsWith('on') && // Ignore event listeners (onclick, oninput, etc.)
-            !excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props
-        ) {
-            try {
-                copy[prop] = element[prop];
-            }
-            catch (error) {
-                console.warn(`Could not copy property ${prop}:`, error.message);
-            }
-        }
-    });
-    // ✅ Copy dataset separately
-    Object.assign(copy.dataset, element.dataset);
-    // ✅ Handle form elements specifically
-    if (element instanceof HTMLInputElement) {
-        copy.value = element.value;
-        copy.checked = element.checked;
-        copy.defaultValue = element.defaultValue;
-        copy.defaultChecked = element.defaultChecked;
-        copy.selectionStart = element.selectionStart;
-        copy.selectionEnd = element.selectionEnd;
-        copy.selectionDirection = element.selectionDirection;
-    }
-    else if (element instanceof HTMLTextAreaElement) {
-        copy.value = element.value;
-        copy.defaultValue = element.defaultValue;
-        copy.selectionStart = element.selectionStart;
-        copy.selectionEnd = element.selectionEnd;
-        copy.selectionDirection =
-            element.selectionDirection;
-    }
-    else if (element instanceof HTMLSelectElement) {
-        copy.value = element.value;
-        copy.selectedIndex = element.selectedIndex;
-    }
-    // ✅ Recursively copy child nodes (prevent duplicates)
-    element.childNodes.forEach(child => {
-        let childCopy;
-        if (child.nodeType === Node.ELEMENT_NODE) {
-            childCopy = deepCopyElement(child);
-        }
-        else {
-            childCopy = child.cloneNode(true);
-        }
-        copy.appendChild(childCopy);
-    });
-    return copy;
-}
-
-exports.deepCopyElement = deepCopyElement;
-exports.excludedProps = excludedProps;

package/dist/cjs/nv-avatar.entry-CuNYdZl_.js

@@ -1,67 +0,0 @@
-'use strict';
-
-var index = require('./index-CKAZvszR.js');
-var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
-var constantsD0f19e7b = require('./constants-d0f19e7b-s0SCO_vi.js');
-require('react');
-
-const nvAvatarCss = "nv-avatar{align-items:center !important;background-color:var(--components-avatar-background-1);border-radius:var(--radius-rounded-full) !important;display:flex !important;flex-shrink:0 !important;font-family:\"TT Norms Pro\", sans-serif;font-style:normal;font-weight:var(--font-weight-medium-emphasis);justify-content:center !important;leading-trim:both;line-height:1 !important;text-align:center;text-edge:cap;text-transform:uppercase}nv-avatar.avatar-color-1{background-color:var(--components-avatar-background-1);color:var(--components-avatar-content-1)}nv-avatar.avatar-color-2{background-color:var(--components-avatar-background-2);color:var(--components-avatar-content-2)}nv-avatar.avatar-color-3{background-color:var(--components-avatar-background-3);color:var(--components-avatar-content-3)}nv-avatar.avatar-color-4{background-color:var(--components-avatar-background-4);color:var(--components-avatar-content-4)}nv-avatar.avatar-color-5{background-color:var(--components-avatar-background-5);color:var(--components-avatar-content-5)}nv-avatar.avatar-color-6{background-color:var(--components-avatar-background-6);color:var(--components-avatar-content-6)}nv-avatar.avatar-color-7{background-color:var(--components-avatar-background-7);color:var(--components-avatar-content-7)}nv-avatar.avatar-color-8{background-color:var(--components-avatar-background-8);color:var(--components-avatar-content-8)}nv-avatar.avatar-color-9{background-color:var(--components-avatar-background-9);color:var(--components-avatar-content-9)}nv-avatar.avatar-color-10{background-color:var(--components-avatar-background-10);color:var(--components-avatar-content-10)}nv-avatar img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:50%}nv-avatar.avatar-xs{width:var(--avatar-xs-size);height:var(--avatar-xs-size);font-size:var(--avatar-xs-font-size);line-height:var(--avatar-xs-font-size)}nv-avatar.avatar-xs nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-avatar.avatar-sm{width:var(--avatar-sm-size);height:var(--avatar-sm-size);font-size:var(--avatar-sm-font-size);line-height:var(--avatar-sm-font-size)}nv-avatar.avatar-sm nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-avatar.avatar-md{width:var(--avatar-md-size);height:var(--avatar-md-size);font-size:var(--avatar-md-font-size);line-height:var(--avatar-md-font-size)}nv-avatar.avatar-md nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-avatar.avatar-lg{width:var(--avatar-lg-size);height:var(--avatar-lg-size);font-size:var(--avatar-lg-font-size);line-height:var(--avatar-lg-font-size)}nv-avatar.avatar-lg nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-avatar.avatar-xl{width:var(--avatar-xl-size);height:var(--avatar-xl-size);font-size:var(--avatar-xl-font-size);line-height:var(--avatar-xl-font-size)}nv-avatar.avatar-xl nv-icon>svg{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}";
-const NvAvatarStyle0 = nvAvatarCss;
-
-const NvAvatar = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**
-         * Define the size of the avatar. You can use t-shirt sizes.
-         */
-        this.size = 'md';
-        /**
-         * You can apply different colors on the Avatar.
-         * Use a string number between 1 and 10.
-         */
-        this.color = '1';
-    }
-    componentWillRender() {
-        if (this.xsmall) {
-            this.size = constantsD0f19e7b.SemanticSizes.ExtraSmall;
-        }
-        if (this.small) {
-            this.size = constantsD0f19e7b.SemanticSizes.Small;
-        }
-        if (this.medium) {
-            this.size = constantsD0f19e7b.SemanticSizes.Medium;
-        }
-        if (this.large) {
-            this.size = constantsD0f19e7b.SemanticSizes.Large;
-        }
-        if (this.xlarge) {
-            this.size = constantsD0f19e7b.SemanticSizes.ExtraLarge;
-        }
-        if (this.text) {
-            this.initials = this.text;
-        }
-        if (this.url) {
-            this.src = this.url;
-        }
-    }
-    //#endregion PROPERTIES
-    /****************************************************************************/
-    //#region METHODS
-    /**
-     * Makes sure the initials are trimmed to 2 letters.
-     * @param {string} initials - The initials to be trimmed.
-     * @returns {string} The trimmed initials.
-     */
-    trimInitials(initials) {
-        return initials.trim().substring(0, 2);
-    }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (index.h(index.Host, { key: '127d470eb9121f611f9e18f029ab9ef15a4a49df', class: clsx297c1ffe.clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (index.h("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (index.h("slot", { name: "icon" }, index.h("nv-icon", { name: "user" })))));
-    }
-};
-NvAvatar.style = NvAvatarStyle0;
-
-exports.nv_avatar = NvAvatar;