@nova-design-system/nova-react 3.15.0 → 3.17.0

package/dist/components/NvDatatable.js

@@ -0,0 +1,45 @@
+import React, { useMemo } from 'react';
+import { flexRender, getCoreRowModel, useReactTable, } from '@tanstack/react-table';
+import { NvTable } from '../generated/components';
+const NvDatatable = ({ columns, rows, ...htmlProps }) => {
+    const tableColumns = useMemo(() => columns
+        .filter((col) => !col.hidden)
+        .map((col) => ({
+        accessorKey: col.field,
+        header: col.headerName || String(col.field),
+        size: col.width,
+        enableResizing: col.resizable ?? true,
+        cell: (context) => {
+            const value = context.getValue();
+            const row = context.row.original;
+            const rowIndex = context.row.index;
+            if (col.renderCell) {
+                return col.renderCell({
+                    value,
+                    row,
+                    field: col.field,
+                    rowIndex,
+                });
+            }
+            return value;
+        },
+    })), [columns]);
+    const table = useReactTable({
+        data: rows,
+        columns: tableColumns,
+        getCoreRowModel: getCoreRowModel(),
+    });
+    return (React.createElement(NvTable, { ...htmlProps },
+        React.createElement("table", null,
+            React.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => (React.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map((header) => (React.createElement("th", { key: header.id, "data-testid": `datatable-header-${header.id}`, style: {
+                    width: header.column.columnDef.size + 'px',
+                }, "data-no-resize": header.column.columnDef.enableResizing ? null : true }, header.isPlaceholder
+                ? null
+                : flexRender(header.column.columnDef.header, header.getContext())))))))),
+            React.createElement("tbody", null, table.getRowModel().rows.map((row) => (React.createElement("tr", { key: row.id, "data-testid": `datatable-row-${row.id}` }, row.getVisibleCells().map((cell) => (React.createElement("td", { key: cell.id, "data-testid": `datatable-cell-${cell.id}`, style: {
+                    padding: '8px',
+                    borderBottom: '1px solid #eee',
+                } }, flexRender(cell.column.columnDef.cell, cell.getContext())))))))))));
+};
+NvDatatable.displayName = 'NvDatatable';
+export { NvDatatable };

package/dist/generated/components.js

@@ -39,9 +39,9 @@ import { NvNotification as NvNotificationElement, defineCustomElement as defineN
 import { NvNotificationcontainer as NvNotificationcontainerElement, defineCustomElement as defineNvNotificationcontainer } from "@nova-design-system/nova-webcomponents/dist/components/nv-notificationcontainer.js";
 import { NvPopover as NvPopoverElement, defineCustomElement as defineNvPopover } from "@nova-design-system/nova-webcomponents/dist/components/nv-popover.js";
 import { NvRow as NvRowElement, defineCustomElement as defineNvRow } from "@nova-design-system/nova-webcomponents/dist/components/nv-row.js";
+import { NvSplit as NvSplitElement, defineCustomElement as defineNvSplit } from "@nova-design-system/nova-webcomponents/dist/components/nv-split.js";
 import { NvStack as NvStackElement, defineCustomElement as defineNvStack } from "@nova-design-system/nova-webcomponents/dist/components/nv-stack.js";
 import { NvTable as NvTableElement, defineCustomElement as defineNvTable } from "@nova-design-system/nova-webcomponents/dist/components/nv-table.js";
-import { NvTablecolumn as NvTablecolumnElement, defineCustomElement as defineNvTablecolumn } from "@nova-design-system/nova-webcomponents/dist/components/nv-tablecolumn.js";
 import { NvToggle as NvToggleElement, defineCustomElement as defineNvToggle } from "@nova-design-system/nova-webcomponents/dist/components/nv-toggle.js";
 import { NvTogglebutton as NvTogglebuttonElement, defineCustomElement as defineNvTogglebutton } from "@nova-design-system/nova-webcomponents/dist/components/nv-togglebutton.js";
 import { NvTogglebuttongroup as NvTogglebuttongroupElement, defineCustomElement as defineNvTogglebuttongroup } from "@nova-design-system/nova-webcomponents/dist/components/nv-togglebuttongroup.js";
@@ -52,7 +52,7 @@ export const NvAccordion = createComponent({
     tagName: 'nv-accordion',
     elementClass: NvAccordionElement,
     react: React,
-    events: { onOpenChanged: 'openChanged' },
+    events: { onOpenIndexesChanged: 'openIndexesChanged' },
     defineCustomElement: defineNvAccordion
 });
 export const NvAccordionItem = createComponent({
@@ -356,6 +356,13 @@ export const NvRow = createComponent({
     events: {},
     defineCustomElement: defineNvRow
 });
+export const NvSplit = createComponent({
+    tagName: 'nv-split',
+    elementClass: NvSplitElement,
+    react: React,
+    events: { onSizesChanged: 'sizesChanged' },
+    defineCustomElement: defineNvSplit
+});
 export const NvStack = createComponent({
     tagName: 'nv-stack',
     elementClass: NvStackElement,
@@ -367,15 +374,8 @@ export const NvTable = createComponent({
     tagName: 'nv-table',
     elementClass: NvTableElement,
     react: React,
-    events: { onAction: 'action' },
-    defineCustomElement: defineNvTable
-});
-export const NvTablecolumn = createComponent({
-    tagName: 'nv-tablecolumn',
-    elementClass: NvTablecolumnElement,
-    react: React,
     events: {},
-    defineCustomElement: defineNvTablecolumn
+    defineCustomElement: defineNvTable
 });
 export const NvToggle = createComponent({
     tagName: 'nv-toggle',

package/dist/generated/components.server.js

@@ -694,6 +694,15 @@ export const NvRow = createComponent({
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot
 });
+export const NvSplit = createComponent({
+    tagName: 'nv-split',
+    properties: {
+        direction: 'direction',
+        gutterSize: 'gutter-size'
+    },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
 export const NvStack = createComponent({
     tagName: 'nv-stack',
     properties: {
@@ -708,22 +717,7 @@ export const NvStack = createComponent({
 });
 export const NvTable = createComponent({
     tagName: 'nv-table',
-    properties: {
-        dataJson: 'data-json',
-        columnsConfigJson: 'columns-config-json',
-        fallbackValue: 'fallback-value',
-        noDataMessage: 'no-data-message',
-        noColumnsNoDataMessage: 'no-columns-no-data-message'
-    },
-    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
-    serializeShadowRoot
-});
-export const NvTablecolumn = createComponent({
-    tagName: 'nv-tablecolumn',
-    properties: {
-        name: 'name',
-        header: 'header'
-    },
+    properties: {},
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot
 });

package/dist/index.js

@@ -2,3 +2,4 @@ export * from './generated/components';
 export * from '@nova-design-system/nova-webcomponents/constants';
 export { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
 export { useNotifications, NotificationProvider, } from './providers/NotificationProvider';
+export * from './components/NvDatatable';

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

@@ -39,18 +39,16 @@ import { NvNotification as NvNotificationElement } from "@nova-design-system/nov
 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 { NvSplit as NvSplitElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-split.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 = {
@@ -219,17 +217,14 @@ export type NvPopoverEvents = {
 export declare const NvPopover: StencilReactComponent<NvPopoverElement, NvPopoverEvents>;
 export type NvRowEvents = NonNullable<unknown>;
 export declare const NvRow: StencilReactComponent<NvRowElement, NvRowEvents>;
+export type NvSplitEvents = {
+    onSizesChanged: EventName<CustomEvent<number[]>>;
+};
+export declare const NvSplit: StencilReactComponent<NvSplitElement, NvSplitEvents>;
 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

@@ -39,9 +39,9 @@ import { NvNotification as NvNotificationElement } from "@nova-design-system/nov
 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 { NvSplit as NvSplitElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-split.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";
@@ -50,9 +50,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 = {
@@ -221,17 +219,14 @@ export type NvPopoverEvents = {
 export declare const NvPopover: StencilReactComponent<NvPopoverElement, NvPopoverEvents>;
 export type NvRowEvents = NonNullable<unknown>;
 export declare const NvRow: StencilReactComponent<NvRowElement, NvRowEvents>;
+export type NvSplitEvents = {
+    onSizesChanged: EventName<CustomEvent<number[]>>;
+};
+export declare const NvSplit: StencilReactComponent<NvSplitElement, NvSplitEvents>;
 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

@@ -2,3 +2,4 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-react",
-  "version": "3.15.0",
+  "version": "3.17.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",
@@ -16,9 +16,16 @@
     "dist"
   ],
   "exports": {
-    "import": "./dist/index.js",
-    "require": "./dist/cjs/index.js",
-    "types": "./dist/types/index.d.ts"
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts",
+      "node": "./dist/generated/components.server.js"
+    },
+    "./server": {
+      "import": "./dist/generated/components.server.js",
+      "types": "./dist/types/generated/components.server.d.ts"
+    }
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -33,11 +40,12 @@
     "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-BTmGyeGF.js

@@ -1,68 +0,0 @@
-'use strict';
-
-var index = require('./index-BK1_MpRZ.js');
-var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
-var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
-require('react');
-require('react-dom');
-
-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 = constants69bafca2.SemanticSizes.ExtraSmall;
-        }
-        if (this.small) {
-            this.size = constants69bafca2.SemanticSizes.Small;
-        }
-        if (this.medium) {
-            this.size = constants69bafca2.SemanticSizes.Medium;
-        }
-        if (this.large) {
-            this.size = constants69bafca2.SemanticSizes.Large;
-        }
-        if (this.xlarge) {
-            this.size = constants69bafca2.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;