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

package/dist/cjs/slide.animation-CmH5d1of-BZuw607U.js

@@ -0,0 +1,90 @@
+'use strict';
+
+var fade_animationDcRL9lcm = require('./fade.animation-DcRL9lcm-DAZeHoKN.js');
+var styleValueTypes_esXlgmw4x8 = require('./style-value-types.es-xlgmw4x8-B1vLqX9m.js');
+
+const useSlide = (node, { duration } = { duration: 200 }) => {
+    const nodeStyler = fade_animationDcRL9lcm.index(node);
+    /**
+     * Will animate the translateX property.
+     *
+     * @param {object} options - The options for the animation.
+     * @param {number} options.from - The starting value for the translateX property.
+     * @param {number} options.to - The ending value for the translateX property.
+     * @returns {Promise<void>} - A promise that resolves when the animation is
+     * complete.
+     */
+    const slideX = (options = { from: 0, to: 100 }) => () => {
+        return new Promise(resolve => {
+            styleValueTypes_esXlgmw4x8.animate({
+                from: { x: options.from },
+                to: { x: options.to },
+                ease: styleValueTypes_esXlgmw4x8.easeOut,
+                duration,
+                onUpdate(latest) {
+                    nodeStyler.set({ transform: `translateX(${latest.x}%)` });
+                },
+                onComplete() {
+                    resolve();
+                },
+            });
+        });
+    };
+    /**
+     * Will animate the translateY property.
+     *
+     * @param {object} options - The options for the animation.
+     * @param {number} options.from - The starting value for the translateY property.
+     * @param {number} options.to - The ending value for the translateY property.
+     * @returns {Promise<void>} - A promise that resolves when the animation is
+     * complete.
+     */
+    const slideY = (options = { from: 0, to: 100 }) => () => {
+        return new Promise(resolve => {
+            styleValueTypes_esXlgmw4x8.animate({
+                from: { y: options.from },
+                to: { y: options.to },
+                ease: styleValueTypes_esXlgmw4x8.easeOut,
+                duration,
+                onUpdate(latest) {
+                    nodeStyler.set({ transform: `translateY(${latest.y}%)` });
+                },
+                onComplete() {
+                    resolve();
+                },
+            });
+        });
+    };
+    /**
+     * Applies the slideX styles without animating, useful when initial state
+     * is slid out.
+     *
+     * @param {number} amount - The amount to translate the element by.
+     * @returns {function} - A function that applies the slideX styles.
+     */
+    const setSlideX = (amount = 100) => nodeStyler.set({ transform: `translateX(${amount}%)` });
+    /**
+     * Applies the slideY styles without animating, useful when initial state
+     * is slid out.
+     *
+     * @param {number} amount - The amount to translate the element by.
+     * @returns {function} - A function that applies the slideY styles.
+     */
+    const setSlideY = (amount = 100) => nodeStyler.set({ transform: `translateY(${amount}%)` });
+    /**
+     * Applies the slideIn styles without animating, useful when initial state
+     * is slid in.
+     */
+    function setSlideReset() {
+        nodeStyler.set({ transform: `translateX(${0}%) translateY(${0}%)` });
+    }
+    return {
+        slideX,
+        slideY,
+        setSlideX,
+        setSlideY,
+        setSlideReset,
+    };
+};
+
+exports.useSlide = useSlide;

package/dist/components/NvDatatable/NvDatatable.js

@@ -1,7 +1,8 @@
 import React, { useMemo, useState, useEffect, useRef, useCallback, } from 'react';
 import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, useReactTable, } from '@tanstack/react-table';
 import { NvTable, NvTableheader } from '../../generated/components';
-function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagination, renderFiltering, stickyHeader, ...htmlProps }) {
+function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filtering, renderPagination, renderFiltering, stickyHeader, ...htmlProps }) {
+    const isInfiniteScroll = pagination?.infinite && mode === 'server';
     const [paginationState, setPaginationState] = useState({
         pageIndex: 0,
         pageSize: pagination?.initialPageSize || 10,
@@ -17,11 +18,11 @@ function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagi
         }
         debouncedSetFilter.current = setTimeout(() => {
             setGlobalFilterState(value);
-            if (filtering?.mode === 'server' && filtering.onFilterChange) {
+            if (mode === 'server' && filtering?.onFilterChange) {
                 filtering.onFilterChange(value);
             }
         }, debounceMs);
-    }, [filtering]);
+    }, [filtering, mode]);
     useEffect(() => {
         return () => {
             if (debouncedSetFilter.current) {
@@ -37,6 +38,7 @@ function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagi
     const tableColumns = useMemo(() => columns
         .filter((col) => !col.hidden)
         .map((col) => {
+        const headerName = col.headerName || String(col.field);
         const columnDef = {
             accessorKey: col.field,
             accessorFn: col.valueFormatter
@@ -49,7 +51,12 @@ function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagi
                     });
                 }
                 : undefined,
-            header: col.headerName || String(col.field),
+            header: col.renderHeader
+                ? () => col.renderHeader({
+                    headerName,
+                    field: col.field,
+                })
+                : headerName,
             size: col.width,
             enableResizing: col.resizable ?? true,
             enableSorting: sorting ? col.sortable ?? true : false,
@@ -92,7 +99,7 @@ function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagi
                     sorting: sorting.sortState || sortingState,
                     ...(filtering && { globalFilter: globalFilterState }),
                 },
-                onSortingChange: sorting.mode === 'server'
+                onSortingChange: mode === 'server'
                     ? (updater) => {
                         const newSort = typeof updater === 'function'
                             ? updater(sortingState)
@@ -101,14 +108,14 @@ function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagi
                         sorting.onSortingChange?.(newSort);
                     }
                     : setSortingState,
-                manualSorting: sorting.mode === 'server',
+                manualSorting: mode === 'server',
                 enableSorting: true,
                 enableMultiSort: sorting.enableMultiSort ?? false,
                 enableSortingRemoval: sorting.enableSortingRemoval ?? true,
                 maxMultiSortColCount: sorting.maxMultiSortColCount,
                 sortDescFirst: sorting.sortDescFirst ?? false,
                 isMultiSortEvent: sorting.enableMultiSort ? () => true : undefined,
-                getSortedRowModel: sorting.mode === 'client' ? getSortedRowModel() : undefined,
+                getSortedRowModel: mode === 'client' ? getSortedRowModel() : undefined,
             }),
             ...(filtering && {
                 state: {
@@ -120,18 +127,18 @@ function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagi
                         ? updater(globalFilterState)
                         : updater;
                     setGlobalFilterState(newFilter);
-                    if (filtering.mode === 'server' && filtering.onFilterChange) {
+                    if (mode === 'server' && filtering.onFilterChange) {
                         filtering.onFilterChange(newFilter);
                     }
                 },
                 globalFilterFn: filtering.globalFilterFn,
-                getFilteredRowModel: filtering.mode === 'client' ? getFilteredRowModel() : undefined,
+                getFilteredRowModel: mode === 'client' ? getFilteredRowModel() : undefined,
             }),
         };
         if (!pagination) {
             return baseConfig;
         }
-        if (pagination.mode === 'client') {
+        if (mode === 'client' && !pagination.infinite) {
             return {
                 ...baseConfig,
                 getPaginationRowModel: getPaginationRowModel(),
@@ -143,7 +150,7 @@ function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagi
                 },
             };
         }
-        if (pagination.mode === 'server') {
+        if (mode === 'server' && !pagination.infinite) {
             const pageSize = paginationState.pageSize;
             let pageCount = -1;
             if (pagination.totalPageCount !== undefined) {
@@ -173,27 +180,30 @@ function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagi
         sortingState,
         filtering,
         globalFilterState,
+        mode,
     ]);
     const table = useReactTable(tableConfig);
     useEffect(() => {
-        if (pagination?.mode === 'server' && pagination.onPaginationChange) {
+        if (mode === 'server' &&
+            !pagination?.infinite &&
+            pagination?.onPaginationChange) {
             pagination.onPaginationChange({
                 pageIndex: paginationState.pageIndex,
                 pageSize: paginationState.pageSize,
             });
         }
-    }, [paginationState, pagination]);
+    }, [paginationState, pagination, mode]);
     useEffect(() => {
-        if (pagination?.mode !== 'infinite' || !lastRowRef.current) {
+        if (!isInfiniteScroll || !lastRowRef.current) {
             return;
         }
-        const threshold = pagination.loadMoreThreshold || 500;
+        const threshold = pagination?.loadMoreThreshold || 500;
         const observer = new IntersectionObserver((entries) => {
             const entry = entries[0];
             if (entry.isIntersecting &&
-                pagination.hasMore &&
-                !pagination.isLoading &&
-                pagination.onLoadMore) {
+                pagination?.hasMore &&
+                !pagination?.isLoading &&
+                pagination?.onLoadMore) {
                 pagination.onLoadMore();
             }
         }, {
@@ -204,14 +214,14 @@ function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagi
         return () => {
             observer.disconnect();
         };
-    }, [rows, pagination]);
+    }, [rows, pagination, isInfiniteScroll]);
     const tablePaginationState = table.getState().pagination;
     const paginationAPI = useMemo(() => {
         if (!pagination) {
             return null;
         }
         const pageCount = table.getPageCount();
-        const rowCount = pagination.mode === 'server'
+        const rowCount = mode === 'server' && !pagination.infinite
             ? pagination.totalRowCount || rows.length
             : rows.length;
         return {
@@ -227,12 +237,18 @@ function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagi
             setPageSize: (size) => table.setPageSize(size),
             canPreviousPage: table.getCanPreviousPage(),
             canNextPage: table.getCanNextPage(),
-            isLoading: pagination.mode === 'infinite' ? pagination.isLoading : undefined,
-            hasMore: pagination.mode === 'infinite' ? pagination.hasMore : undefined,
+            isLoading: isInfiniteScroll ? pagination.isLoading : undefined,
+            hasMore: isInfiniteScroll ? pagination.hasMore : undefined,
         };
-    }, [pagination, table, rows.length, tablePaginationState]);
+    }, [
+        pagination,
+        table,
+        rows.length,
+        tablePaginationState,
+        mode,
+        isInfiniteScroll,
+    ]);
     const tableRows = table.getRowModel().rows;
-    const isInfiniteScroll = pagination?.mode === 'infinite';
     const filteringAPI = useMemo(() => {
         if (!filtering) {
             return null;

package/dist/generated/components.js

@@ -15,6 +15,9 @@ import { NvDatagridcolumn as NvDatagridcolumnElement, defineCustomElement as def
 import { NvDialog as NvDialogElement, defineCustomElement as defineNvDialog } from "@nova-design-system/nova-webcomponents/dist/components/nv-dialog.js";
 import { NvDialogfooter as NvDialogfooterElement, defineCustomElement as defineNvDialogfooter } from "@nova-design-system/nova-webcomponents/dist/components/nv-dialogfooter.js";
 import { NvDialogheader as NvDialogheaderElement, defineCustomElement as defineNvDialogheader } from "@nova-design-system/nova-webcomponents/dist/components/nv-dialogheader.js";
+import { NvDrawer as NvDrawerElement, defineCustomElement as defineNvDrawer } from "@nova-design-system/nova-webcomponents/dist/components/nv-drawer.js";
+import { NvDrawerfooter as NvDrawerfooterElement, defineCustomElement as defineNvDrawerfooter } from "@nova-design-system/nova-webcomponents/dist/components/nv-drawerfooter.js";
+import { NvDrawerheader as NvDrawerheaderElement, defineCustomElement as defineNvDrawerheader } from "@nova-design-system/nova-webcomponents/dist/components/nv-drawerheader.js";
 import { NvFieldcheckbox as NvFieldcheckboxElement, defineCustomElement as defineNvFieldcheckbox } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldcheckbox.js";
 import { NvFielddate as NvFielddateElement, defineCustomElement as defineNvFielddate } from "@nova-design-system/nova-webcomponents/dist/components/nv-fielddate.js";
 import { NvFielddaterange as NvFielddaterangeElement, defineCustomElement as defineNvFielddaterange } from "@nova-design-system/nova-webcomponents/dist/components/nv-fielddaterange.js";
@@ -190,6 +193,30 @@ export const NvDialogheader = createComponent({
     events: {},
     defineCustomElement: defineNvDialogheader
 });
+export const NvDrawer = createComponent({
+    tagName: 'nv-drawer',
+    elementClass: NvDrawerElement,
+    react: React,
+    events: { onOpenChanged: 'openChanged' },
+    defineCustomElement: defineNvDrawer
+});
+export const NvDrawerfooter = createComponent({
+    tagName: 'nv-drawerfooter',
+    elementClass: NvDrawerfooterElement,
+    react: React,
+    events: {
+        onDrawerCanceled: 'drawerCanceled',
+        onDrawerPrimaryClicked: 'drawerPrimaryClicked'
+    },
+    defineCustomElement: defineNvDrawerfooter
+});
+export const NvDrawerheader = createComponent({
+    tagName: 'nv-drawerheader',
+    elementClass: NvDrawerheaderElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvDrawerheader
+});
 export const NvFieldcheckbox = createComponent({
     tagName: 'nv-fieldcheckbox',
     elementClass: NvFieldcheckboxElement,

package/dist/generated/components.server.js

@@ -225,6 +225,50 @@ export const NvDialogheader = createComponent({
     clientModule: clientComponents.NvDialogheader,
     serializeShadowRoot,
 });
+export const NvDrawer = createComponent({
+    tagName: 'nv-drawer',
+    properties: {
+        open: 'open',
+        undismissable: 'undismissable',
+        clickOutside: 'click-outside',
+        controlled: 'controlled',
+        side: 'side',
+        size: 'size',
+        width: 'width',
+        autofocus: 'autofocus',
+        swipeToOpen: 'swipe-to-open'
+    },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    clientModule: clientComponents.NvDrawer,
+    serializeShadowRoot,
+});
+export const NvDrawerfooter = createComponent({
+    tagName: 'nv-drawerfooter',
+    properties: {
+        disabled: 'disabled',
+        undismissable: 'undismissable',
+        leadingIcon: 'leading-icon',
+        trailingIcon: 'trailing-icon',
+        danger: 'danger',
+        cancelLabel: 'cancel-label',
+        primaryLabel: 'primary-label',
+        primaryButtonType: 'primary-button-type',
+        form: 'form'
+    },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    clientModule: clientComponents.NvDrawerfooter,
+    serializeShadowRoot,
+});
+export const NvDrawerheader = createComponent({
+    tagName: 'nv-drawerheader',
+    properties: {
+        heading: 'heading',
+        subheading: 'subheading'
+    },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    clientModule: clientComponents.NvDrawerheader,
+    serializeShadowRoot,
+});
 export const NvFieldcheckbox = createComponent({
     tagName: 'nv-fieldcheckbox',
     properties: {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { NvDatatableProps } from './types';
-declare function NvDatatable<T>({ columns, rows, pagination, sorting, filtering, renderPagination, renderFiltering, stickyHeader, ...htmlProps }: NvDatatableProps<T>): React.JSX.Element;
+declare function NvDatatable<T>({ mode, columns, rows, pagination, sorting, filtering, renderPagination, renderFiltering, stickyHeader, ...htmlProps }: NvDatatableProps<T>): React.JSX.Element;
 declare namespace NvDatatable {
     var displayName: string;
 }

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

@@ -1,6 +1,8 @@
 import type { ComponentProps } from 'react';
 import type { SortingFn, NoInfer, SortingState, Row } from '@tanstack/react-table';
+export type NvDatatableMode = 'client' | 'server';
 export type NvDatatableProps<T> = {
+    mode?: NvDatatableMode;
     columns: Array<NvDatatableColumn<T>>;
     rows: Array<T>;
     pagination?: NvDatatablePaginationConfig;
@@ -18,12 +20,17 @@ export interface NvDatatableColumn<Row, K extends keyof Row = keyof Row, F = Row
     hidden?: boolean;
     valueFormatter?: (params: NvTableValueFormatterParams<Row, Row[K], K>) => F;
     renderCell?: (params: NvTableRenderCellParams<Row, F, K>) => React.ReactNode;
+    renderHeader?: (params: NvTableRenderHeaderParams<K>) => React.ReactNode;
     sortable?: boolean;
     sortingFn?: SortingFn<Row> | string;
     sortDescFirst?: boolean;
     invertSorting?: boolean;
     sortUndefined?: 'first' | 'last' | false | -1 | 1;
 }
+export interface NvTableRenderHeaderParams<Field> {
+    headerName: string;
+    field: Field;
+}
 export interface NvTableRenderCellParams<Row, Value, Field> {
     value: Value | NoInfer<Value>;
     row: Row;
@@ -36,7 +43,7 @@ export interface NvTableValueFormatterParams<Row, Value, Field> {
     field: Field;
 }
 export interface NvDatatablePaginationConfig {
-    mode: 'client' | 'server' | 'infinite';
+    infinite?: boolean;
     initialPageSize?: number;
     pageSizeOptions?: number[];
     totalRowCount?: number;
@@ -68,7 +75,6 @@ export interface NvDatatableRenderPaginationAPI {
 }
 export type NvDataTableSortingState = SortingState;
 export interface NvDatatableSortingConfig {
-    mode: 'client' | 'server';
     enableMultiSort?: boolean;
     enableSortingRemoval?: boolean;
     maxMultiSortColCount?: number;
@@ -77,7 +83,6 @@ export interface NvDatatableSortingConfig {
     onSortingChange?: (sorting: SortingState) => void;
 }
 export interface NvDatatableFilteringConfig<T> {
-    mode: 'client' | 'server';
     filterState?: unknown;
     onFilterChange?: (filterState: unknown) => void;
     globalFilterFn?: (row: Row<T>, columnId: string, filterValue: unknown) => boolean;

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

@@ -15,6 +15,9 @@ import { NvDatagridcolumn as NvDatagridcolumnElement } from "@nova-design-system
 import { NvDialog as NvDialogElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-dialog.js";
 import { NvDialogfooter as NvDialogfooterElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-dialogfooter.js";
 import { NvDialogheader as NvDialogheaderElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-dialogheader.js";
+import { NvDrawer as NvDrawerElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-drawer.js";
+import { NvDrawerfooter as NvDrawerfooterElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-drawerfooter.js";
+import { NvDrawerheader as NvDrawerheaderElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-drawerheader.js";
 import { NvFieldcheckbox as NvFieldcheckboxElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldcheckbox.js";
 import { NvFielddate as NvFielddateElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fielddate.js";
 import { NvFielddaterange as NvFielddaterangeElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fielddaterange.js";
@@ -128,6 +131,17 @@ export type NvDialogfooterEvents = {
 export declare const NvDialogfooter: StencilReactComponent<NvDialogfooterElement, NvDialogfooterEvents>;
 export type NvDialogheaderEvents = NonNullable<unknown>;
 export declare const NvDialogheader: StencilReactComponent<NvDialogheaderElement, NvDialogheaderEvents>;
+export type NvDrawerEvents = {
+    onOpenChanged: EventName<CustomEvent<boolean>>;
+};
+export declare const NvDrawer: StencilReactComponent<NvDrawerElement, NvDrawerEvents>;
+export type NvDrawerfooterEvents = {
+    onDrawerCanceled: EventName<CustomEvent<void>>;
+    onDrawerPrimaryClicked: EventName<CustomEvent<void>>;
+};
+export declare const NvDrawerfooter: StencilReactComponent<NvDrawerfooterElement, NvDrawerfooterEvents>;
+export type NvDrawerheaderEvents = NonNullable<unknown>;
+export declare const NvDrawerheader: StencilReactComponent<NvDrawerheaderElement, NvDrawerheaderEvents>;
 export type NvFieldcheckboxEvents = {
     onCheckedChanged: EventName<CustomEvent<boolean>>;
 };

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

@@ -15,6 +15,9 @@ import { NvDatagridcolumn as NvDatagridcolumnElement } from "@nova-design-system
 import { NvDialog as NvDialogElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-dialog.js";
 import { NvDialogfooter as NvDialogfooterElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-dialogfooter.js";
 import { NvDialogheader as NvDialogheaderElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-dialogheader.js";
+import { NvDrawer as NvDrawerElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-drawer.js";
+import { NvDrawerfooter as NvDrawerfooterElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-drawerfooter.js";
+import { NvDrawerheader as NvDrawerheaderElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-drawerheader.js";
 import { NvFieldcheckbox as NvFieldcheckboxElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldcheckbox.js";
 import { NvFielddate as NvFielddateElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fielddate.js";
 import { NvFielddaterange as NvFielddaterangeElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fielddaterange.js";
@@ -130,6 +133,17 @@ export type NvDialogfooterEvents = {
 export declare const NvDialogfooter: StencilReactComponent<NvDialogfooterElement, NvDialogfooterEvents>;
 export type NvDialogheaderEvents = NonNullable<unknown>;
 export declare const NvDialogheader: StencilReactComponent<NvDialogheaderElement, NvDialogheaderEvents>;
+export type NvDrawerEvents = {
+    onOpenChanged: EventName<CustomEvent<boolean>>;
+};
+export declare const NvDrawer: StencilReactComponent<NvDrawerElement, NvDrawerEvents>;
+export type NvDrawerfooterEvents = {
+    onDrawerCanceled: EventName<CustomEvent<void>>;
+    onDrawerPrimaryClicked: EventName<CustomEvent<void>>;
+};
+export declare const NvDrawerfooter: StencilReactComponent<NvDrawerfooterElement, NvDrawerfooterEvents>;
+export type NvDrawerheaderEvents = NonNullable<unknown>;
+export declare const NvDrawerheader: StencilReactComponent<NvDrawerheaderElement, NvDrawerheaderEvents>;
 export type NvFieldcheckboxEvents = {
     onCheckedChanged: EventName<CustomEvent<boolean>>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-react",
-  "version": "3.23.0",
+  "version": "3.24.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",

package/dist/cjs/nv-togglebutton.entry-BTWCzbS9.js

@@ -1,67 +0,0 @@
-'use strict';
-
-var index = require('./index-CtjeeUI-.js');
-require('@stencil/react-output-target/runtime');
-require('react');
-require('react-dom');
-
-const nvTogglebuttonCss = "nv-togglebutton{display:inline-flex;justify-content:center;align-items:center}nv-togglebutton:focus-visible,nv-togglebutton:has(:focus-visible){z-index:1}nv-togglebutton[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);height:var(--button-xs-height);font-size:var(--button-xs-font-size)}nv-togglebutton[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-togglebutton[size=xs]{padding-top:calc(var(--togglegroup-xs-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-xs-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-xs-button-radius));border-width:0}nv-togglebutton[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);height:var(--button-sm-height);font-size:var(--button-sm-font-size)}nv-togglebutton[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-togglebutton[size=sm]{padding-top:calc(var(--togglegroup-sm-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-sm-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-sm-button-radius));border-width:0}nv-togglebutton[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);height:var(--button-md-height);font-size:var(--button-md-font-size)}nv-togglebutton[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-togglebutton[size=md]{padding-top:calc(var(--togglegroup-md-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-md-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-md-button-radius));border-width:0}nv-togglebutton[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);height:var(--button-lg-height);font-size:var(--button-lg-font-size)}nv-togglebutton[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-togglebutton[size=lg]{padding-top:calc(var(--togglegroup-lg-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-lg-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-lg-button-radius));border-width:0}nv-togglebutton[emphasis=high]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-togglebutton[emphasis=high]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-togglebutton[emphasis=high]:active{background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=high]:focus,nv-togglebutton[emphasis=high]:focus-within{outline:none}nv-togglebutton[emphasis=high]:focus-visible,nv-togglebutton[emphasis=high]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-togglebutton[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=high][active]:not([active=false]){background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=low]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-togglebutton[emphasis=low]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-togglebutton[emphasis=low]:focus,nv-togglebutton[emphasis=low]:focus-within{outline:none}nv-togglebutton[emphasis=low]:focus-visible,nv-togglebutton[emphasis=low]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-togglebutton[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=low][active]:not([active=false]),nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}";
-
-const NvTogglebutton = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.toggled = index.createEvent(this, "toggled", 7);
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Determines how large or small the togglebutton appears, allowing for
-         * customization of the togglebutton's dimensions to fit different design
-         * specifications and user needs.
-         */
-        this.size = 'md';
-        /**
-         * Prevents all interaction, rendering the toggle in a non-interactive state.
-         */
-        this.disabled = false;
-        /**
-         * Whether the button is active or not. Will not toggle automatically but
-         * needs to be controlled externally.
-         */
-        this.active = false;
-        /**
-         * Make it more or less visually prominent to users.
-         */
-        this.emphasis = 'high';
-        //#endregion PROPERTIES
-        /****************************************************************************/
-        //#region METHODS
-        this.handleClick = () => {
-            if (this.disabled)
-                return;
-            this.toggled.emit({
-                value: this.value,
-                active: this.active,
-            });
-        };
-    }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region LISTENERS
-    handleKeyDown(event) {
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            this.el.click();
-        }
-    }
-    /* eslint-enable nova/event-bubbling */
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (index.h(index.Host, { key: '0285637cb14c292c67d767dc83b72f52c5368269', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: 'a84f303e76070b99ff2c01e5ec400f2e78503b19' })));
-    }
-    get el() { return index.getElement(this); }
-};
-NvTogglebutton.style = nvTogglebuttonCss;
-
-exports.nv_togglebutton = NvTogglebutton;