@nova-design-system/nova-webcomponents 3.11.0 → 3.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-webcomponents",
-  "version": "3.11.0",
+  "version": "3.13.0",
   "description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -72,6 +72,10 @@
     "extract-comments": "1.1.0"
   },
   "exports": {
+    "./nv-notification": {
+      "import": "./dist/components/nv-notification.js",
+      "types": "./dist/components/nv-notification.d.ts"
+    },
     "./nv-togglebuttongroup": {
       "import": "./dist/components/nv-togglebuttongroup.js",
       "types": "./dist/components/nv-togglebuttongroup.d.ts"
@@ -306,6 +310,10 @@
       "import": "./loader/index.js",
       "require": "./loader/index.cjs.js",
       "types": "./loader/index.d.ts"
+    },
+    "./constants": {
+      "import": "./dist/collection/utils/constants.js",
+      "types": "./dist/types/utils/constants.d.ts"
     }
   }
 }

package/readme.md

@@ -1,10 +1,34 @@
-# Nova Components Native Setup
+# Nova Web Components (Vanilla)
 
-**Nova Components** allows you to use Nova's native UI elements directly in your HTML pages without the need for a framework like React. This setup is ideal for projects where you prefer a simple, framework-independent approach while still leveraging the power and flexibility of Nova UI components.
+Use Nova’s native Web Components directly in plain HTML/TypeScript without a framework. This package exposes the same UI components used across all Nova wrappers, ready to drop into any site or app.
+
+- [Nova Web Components (Vanilla)](#nova-web-components-vanilla)
+  - [Key Points](#key-points)
+  - [Installation](#installation)
+  - [Setting up Tailwind](#setting-up-tailwind)
+    - [About Tailwind and the Nova Plugin](#about-tailwind-and-the-nova-plugin)
+    - [1. Install Tailwind CSS](#1-install-tailwind-css)
+    - [2. Configure Vite](#2-configure-vite)
+    - [3. Create `tailwind.config.ts`](#3-create-tailwindconfigts)
+    - [4. Configure Tailwind and the Nova Plugin in your CSS](#4-configure-tailwind-and-the-nova-plugin-in-your-css)
+    - [5. Import Nova Tokens (Spark or Ocean) and register components](#5-import-nova-tokens-spark-or-ocean-and-register-components)
+    - [6. Use components in HTML with Tailwind utilities](#6-use-components-in-html-with-tailwind-utilities)
+    - [Dark mode](#dark-mode)
+  - [Nova Font Pro Integration](#nova-font-pro-integration)
+
+---
+
+## Key Points
+
+- Tailwind CSS is required. Nova’s Tailwind theme and plugin bind Nova design tokens to Tailwind’s utilities for consistent, token-driven styling.
+- Do not import `nova-utils.css` when using Tailwind. The Tailwind pipeline produces a smaller, optimized bundle and richer utilities.
+- Import exactly one token CSS file (`spark.css` or `ocean.css`) so the underlying CSS variables exist at runtime.
+
+---
 
 ## Installation
 
-To get started, include the necessary Nova packages in your project. You can install them via npm or yarn if you're using a package manager, or you can link directly to the CSS and JavaScript files from your project.
+Install the required packages:
 
 ```bash
 npm install @nova-design-system/nova-webcomponents @nova-design-system/nova-base
@@ -16,62 +40,165 @@ or
 yarn add @nova-design-system/nova-webcomponents @nova-design-system/nova-base
 ```
 
-> In some case, you might experience SSL certificate issues when working on Developers' VM. As documented in the [Developers' setup guide](https://wiki.eliagroup.eu/spaces/EAing/pages/89296007/2.3.3.10+Developer+Setup#id-2.3.3.10DeveloperSetup-NPMconfig), you need to turn off the SSL certificate verification:
+> In some cases, you might experience SSL certificate issues when working on Developers' VM. As documented in the [Developers' setup guide](https://wiki.eliagroup.eu/spaces/EAing/pages/89296007/2.3.3.10+Developer+Setup#id-2.3.3.10DeveloperSetup-NPMconfig), you need to turn off the SSL certificate verification:
+>
+> ```bash
+> npm config set strict-ssl false
+> ```
+
+---
+
+## Setting up Tailwind
+
+Nova Web Components rely on Tailwind for all of the utility classes. The Nova Tailwind theme and plugin map Nova’s tokens into Tailwind’s system, and generate utilities that resolve to token-backed CSS variables at runtime.
+
+> Tailwind version
+> This guide targets Tailwind v4. While compatible with v3, some features may not work as expected.
+
+### About Tailwind and the Nova Plugin
+
+- What is Tailwind? A utility‑first CSS framework with low‑level, composable classes (flex, grid, spacing, color, typography) to quickly build UIs.
+- Nova Tokens: Nova ships design tokens as CSS variables (Spark/Ocean themes) for colors, spacing, typography, radii, shadows, etc.
+- Integration:
+  - `novaTailwindTheme` wires Nova tokens into Tailwind’s theme scales.
+  - The Nova Tailwind plugin emits utilities and variants that read those token variables at runtime.
+- Why import tokens CSS? Import one of `spark.css` or `ocean.css` so the CSS variables exist. Tailwind utilities produced by the Nova plugin reference these variables.
+
+### 1. Install Tailwind CSS
+
+**This example uses Vite**, but there are multiple ways to set up Tailwind with your project. See the [Tailwind documentation](https://tailwindcss.com/docs/installation) for more information.
 
 ```bash
-npm config set strict-ssl false
+npm install -D tailwindcss @tailwindcss/vite
 ```
 
-## Setup
+> Tip: Install the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) VS Code extension for autocomplete on Tailwind and Nova tokens.
+
+### 2. Configure Vite
 
-After installing the package, you'll need to include the Nova UI CSS and define the custom elements in your JavaScript setup file. Here's an example setup file (`setup.js`):
+`vite.config.ts`:
 
-```javascript
-import '@nova-design-system/nova-base/dist/css/nova-utils.css';
-import '@nova-design-system/nova-base/dist/css/spark.css'; // or ocean.css
-import url('https://novaassets.azureedge.net/fonts/nova-fonts-pro.css'); // replace with the correct font url
-import { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
+```ts
+import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
 
-defineCustomElements();
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+  ],
+})
 ```
 
-This file sets up the Nova components and styles, making them available for use in your HTML.
+### 3. Create `tailwind.config.ts`
 
-> [!WARNING]
-> Nova Fonts is a protected asset and is not included in the Nova Base package. You need to include the Nova Fonts CSS file in your project.
-> To get the Nova Fonts URL, please contact us via Teams or get the URL in the Nova Design System [internal wiki](https://dev.azure.com/elia-digitization/Nova/_wiki/wikis/Nova.wiki/30245/Nova-Font-Pro).
+In your project root:
+
+```ts
+import type { Config } from 'tailwindcss'
+import { novaTailwindTheme } from '@nova-design-system/nova-base/theme'
+
+export default {
+  theme: novaTailwindTheme,
+} satisfies Config
+```
+
+### 4. Configure Tailwind and the Nova Plugin in your CSS
+
+Create a global CSS file (e.g., `src/index.css`) and add:
+
+```css
+@import 'tailwindcss';
 
-## Usage
+/* Adjust the path to your tailwind.config.ts as needed */
+@config "../tailwind.config.ts";
+@plugin "@nova-design-system/nova-base/theme/plugin";
+@custom-variant dark (&:where(.dark, .dark *));
+```
+
+### 5. Import Nova Tokens (Spark or Ocean) and register components
+
+Create `src/setup.ts` (or `main.ts`):
+
+```ts
+// Import ONE tokens theme so CSS variables exist at runtime
+import '@nova-design-system/nova-base/dist/css/spark.css' // or ocean.css
+import './index.css'
+
+// Register Nova Web Components
+import { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader'
+defineCustomElements()
+```
 
-Once the setup is complete, you can use Nova components directly in your HTML. Here's an example of how to use the `nv-button` component:
+> Do not import `@nova-design-system/nova-base/dist/css/nova-utils.css` when using Tailwind.
+
+### 6. Use components in HTML with Tailwind utilities
+
+`index.html`:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Nova Components Example</title>
-  <script type="module" src="setup.js"></script>
-</head>
-<body>
-  <nv-button id="counter" danger>Click me</nv-button>
-
-  <script>
-    const button = document.getElementById('counter');
-    let count = 0;
-
-    button.addEventListener('click', () => {
-      count += 1;
-      button.textContent = `Count is ${count}`;
-    });
-  </script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <title>Nova Web Components</title>
+    <script type="module" src="/src/setup.ts"></script>
+  </head>
+  <body class="min-h-screen flex items-center justify-center bg-background text-foreground">
+    <!-- Layout with Tailwind utilities; styling flows into nv-* hosts (no shadow) -->
+    <div class="flex flex-col items-center gap-4 p-6 rounded-md shadow-sm">
+      <h1 class="text-2xl font-semibold">Nova Button</h1>
+      <nv-button id="counter" danger>Click me</nv-button>
+    </div>
+
+    <script type="module">
+      const button = document.getElementById('counter');
+      let count = 0;
+      button.addEventListener('click', () => {
+        count += 1;
+        button.textContent = `Count is ${count}`;
+      });
+    </script>
+  </body>
 </html>
 ```
 
-In this example, the `nv-button` component is used directly in the HTML, and a simple JavaScript script is included to handle the button click event.
+- Use Tailwind utilities to create layouts (e.g., `flex`, `grid`, `gap-*`, `p-*`, `m-*`).
+- Apply utilities directly to `nv-*` elements and surrounding/ slotted content to customize spacing and appearance.
+- Consolidate repeated class patterns with Tailwind’s `@apply` in your own CSS utilities when useful.
+
+### Dark mode
+
+Enable dark mode by adding the `dark` class on the `body` (or a root container):
+
+```html
+<body class="dark">
+  <!-- content -->
+</body>
+```
+
+---
+
+## Nova Font Pro Integration
+
+> [!WARNING]
+> Nova Fonts is a protected asset and is not included in the Nova Base package. You need to include the Nova Fonts CSS file in your project.
+> To get the Nova Fonts URL, **please contact us via Teams** or get the URL in the Nova Design System [internal wiki](https://dev.azure.com/elia-digitization/Nova/_wiki/wikis/Nova.wiki/30245/Nova-Font-Pro).
+
+Once you have the URL, integrate it using one of the following:
+
+- Import in global CSS (recommended):
+  ```css
+  /* e.g., in src/index.css */
+  @import url('contact-us-for-URL/nova-fonts-pro.css');
+  ```
 
-## Conclusion
+- Link in HTML:
+  ```html
+  <link rel="stylesheet" href="contact-us-for-URL/nova-fonts-pro.css" />
+  ```
 
-Nova Components Vanilla makes it easy to integrate Nova's web components into any project without the overhead of a frontend framework. With just a few lines of setup, you can start building rich, interactive user interfaces using Nova UI components. For more detailed documentation and examples, refer to the official Nova documentation.
+The `nova-fonts-pro.css` file includes font-face definitions and a `body { font-family: ... }` rule to apply fonts across your application.

package/dist/cjs/collapse.animation-a129dc3f.js

@@ -1,86 +0,0 @@
-'use strict';
-
-const stylefire_es = require('./stylefire.es-717e022a.js');
-
-const useCollapse = (node, { duration } = { duration: 200 }) => {
-    const nodeStyler = stylefire_es.index(node);
-    /**
-     * Will set the overflow to hidden, and animate the max height to 0. Make sure
-     * the element has no border or y padding set, otherwise the animation will
-     * not work as expected.
-     */
-    function collapse() {
-        return new Promise(resolve => {
-            const height = node.getBoundingClientRect().height;
-            nodeStyler.set({ overflow: 'hidden' });
-            stylefire_es.animate({
-                from: height,
-                to: 0,
-                duration,
-                onUpdate: value => {
-                    nodeStyler.set({
-                        maxHeight: value,
-                    });
-                },
-                onComplete: () => {
-                    resolve();
-                },
-            });
-        });
-    }
-    /**
-     * Apply the collapsed styles without animating, useful when initial state
-     * is collapsed.
-     */
-    function setCollapsed() {
-        node.style.maxHeight = '0';
-        node.style.overflow = 'hidden';
-    }
-    /**
-     * Apply the expanded styles without animating, useful when initial state
-     * is expanded.
-     */
-    function setExpanded() {
-        node.style.maxHeight = '';
-        node.style.overflow = '';
-    }
-    /**
-     * Will set the overflow to hidden, and animate the max height to the value
-     * of the scrollHeight. Make sure the element has no border or y padding set,
-     * otherwise the animation will not work as expected. Once complete, the
-     * max-height and overflow style properties will be removed.
-     */
-    function expand() {
-        return new Promise(resolve => {
-            const scrollHeight = node.scrollHeight;
-            nodeStyler.set({
-                overflow: 'hidden',
-            });
-            stylefire_es.animate({
-                from: 0,
-                to: scrollHeight,
-                duration,
-                onUpdate: value => {
-                    nodeStyler.set({
-                        maxHeight: value,
-                    });
-                },
-                onComplete: () => {
-                    node.style.removeProperty('max-height');
-                    node.style.removeProperty('overflow');
-                    resolve();
-                },
-            });
-        });
-    }
-    return {
-        collapse,
-        expand,
-        setCollapsed,
-        setExpanded,
-    };
-};
-
-exports.useCollapse = useCollapse;
-
-//# sourceMappingURL=collapse.animation-a129dc3f.js.map

package/dist/cjs/collapse.animation-a129dc3f.js.map

@@ -1 +0,0 @@
-{"file":"collapse.animation-a129dc3f.js","mappings":";;;;MAQM,WAAW,GAAG,CAClB,IAAiB,EACjB,EAAE,QAAQ,KAAsB,EAAE,QAAQ,EAAE,GAAG,EAAE;IAEjD,MAAM,UAAU,GAAGA,kBAAM,CAAC,IAAI,CAAC,CAAC;;;;;;IAOhC,SAAS,QAAQ;QACf,OAAO,IAAI,OAAO,CAAO,OAAO;YAC9B,MAAM,MAAM,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;YAEnD,UAAU,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;YAEvCC,oBAAO,CAAC;gBACN,IAAI,EAAE,MAAM;gBACZ,EAAE,EAAE,CAAC;gBACL,QAAQ;gBACR,QAAQ,EAAE,KAAK;oBACb,UAAU,CAAC,GAAG,CAAC;wBACb,SAAS,EAAE,KAAK;qBACjB,CAAC,CAAC;iBACJ;gBACD,UAAU,EAAE;oBACV,OAAO,EAAE,CAAC;iBACX;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;;;;;IAMD,SAAS,YAAY;QACnB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC;QAC3B,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;KAChC;;;;;IAMD,SAAS,WAAW;QAClB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;QAC1B,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;KAC1B;;;;;;;IAQD,SAAS,MAAM;QACb,OAAO,IAAI,OAAO,CAAO,OAAO;YAC9B,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;YACvC,UAAU,CAAC,GAAG,CAAC;gBACb,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;YAEHA,oBAAO,CAAC;gBACN,IAAI,EAAE,CAAC;gBACP,EAAE,EAAE,YAAY;gBAChB,QAAQ;gBACR,QAAQ,EAAE,KAAK;oBACb,UAAU,CAAC,GAAG,CAAC;wBACb,SAAS,EAAE,KAAK;qBACjB,CAAC,CAAC;iBACJ;gBACD,UAAU,EAAE;oBACV,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;oBACxC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;oBACtC,OAAO,EAAE,CAAC;iBACX;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;IAED,OAAO;QACL,QAAQ;QACR,MAAM;QACN,YAAY;QACZ,WAAW;KACZ,CAAC;AACJ;;;;","names":["styler","animate"],"sources":["src/animations/collapse.animation.ts"],"sourcesContent":["import { animate } from 'popmotion';\nimport styler from 'stylefire';\n\nexport type CollapseOptions = {\n  /** How long the animation should take in ms @default 200 */\n  duration?: number;\n};\n\nconst useCollapse = (\n  node: HTMLElement,\n  { duration }: CollapseOptions = { duration: 200 },\n) => {\n  const nodeStyler = styler(node);\n\n  /**\n   * Will set the overflow to hidden, and animate the max height to 0. Make sure\n   * the element has no border or y padding set, otherwise the animation will\n   * not work as expected.\n   */\n  function collapse() {\n    return new Promise<void>(resolve => {\n      const height = node.getBoundingClientRect().height;\n\n      nodeStyler.set({ overflow: 'hidden' });\n\n      animate({\n        from: height,\n        to: 0,\n        duration,\n        onUpdate: value => {\n          nodeStyler.set({\n            maxHeight: value,\n          });\n        },\n        onComplete: () => {\n          resolve();\n        },\n      });\n    });\n  }\n\n  /**\n   * Apply the collapsed styles without animating, useful when initial state\n   * is collapsed.\n   */\n  function setCollapsed() {\n    node.style.maxHeight = '0';\n    node.style.overflow = 'hidden';\n  }\n\n  /**\n   * Apply the expanded styles without animating, useful when initial state\n   * is expanded.\n   */\n  function setExpanded() {\n    node.style.maxHeight = '';\n    node.style.overflow = '';\n  }\n\n  /**\n   * Will set the overflow to hidden, and animate the max height to the value\n   * of the scrollHeight. Make sure the element has no border or y padding set,\n   * otherwise the animation will not work as expected. Once complete, the\n   * max-height and overflow style properties will be removed.\n   */\n  function expand() {\n    return new Promise<void>(resolve => {\n      const scrollHeight = node.scrollHeight;\n      nodeStyler.set({\n        overflow: 'hidden',\n      });\n\n      animate({\n        from: 0,\n        to: scrollHeight,\n        duration,\n        onUpdate: value => {\n          nodeStyler.set({\n            maxHeight: value,\n          });\n        },\n        onComplete: () => {\n          node.style.removeProperty('max-height');\n          node.style.removeProperty('overflow');\n          resolve();\n        },\n      });\n    });\n  }\n\n  return {\n    collapse,\n    expand,\n    setCollapsed,\n    setExpanded,\n  };\n};\n\nexport { useCollapse };\n"],"version":3}

package/dist/cjs/constants-3b6beb66.js.map

@@ -1 +0,0 @@
-{"file":"constants-3b6beb66.js","mappings":"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","names":["FeedbackColors","SemanticSizes","ButtonSize","ButtonType","TimeType","SortingPossibility"],"sources":["src/utils/constants.ts"],"sourcesContent":["import { WeekAbbreviations } from '../interfaces/localization';\n\nexport enum FeedbackColors {\n  Information = 'information',\n  Warning = 'warning',\n  Success = 'success',\n  Error = 'error',\n  Neutral = 'neutral',\n}\nexport enum DeprecatedSemanticColors {\n  Neutral = 'neutral',\n  Primary = 'primary',\n  Secondary = 'secondary',\n  Success = 'success',\n  Error = 'error',\n}\nexport enum SemanticSizes {\n  ExtraSmall = 'xs',\n  Small = 'sm',\n  Medium = 'md',\n  Large = 'lg',\n  ExtraLarge = 'xl',\n}\nexport enum ButtonSize {\n  ExtraSmall = 'xs',\n  Small = 'sm',\n  Medium = 'md',\n  Large = 'lg',\n}\nexport enum ButtonEmphasis {\n  High = 'high',\n  Medium = 'medium',\n  Low = 'low',\n  Lower = 'lower',\n}\nexport enum ButtonType {\n  Submit = 'submit',\n  Reset = 'reset',\n  Button = 'button',\n}\nexport enum ToggleButtonEmphasis {\n  High = 'high',\n  Low = 'low',\n}\nexport enum ToggleButtonSize {\n  ExtraSmall = 'xs',\n  Small = 'sm',\n  Medium = 'md',\n  Large = 'lg',\n}\nexport enum IconButtonShape {\n  Square = 'square',\n  Rounded = 'rounded',\n}\nexport enum LoaderColors {\n  High = 'brand',\n  Low = 'white',\n}\nexport enum LabelPlacement {\n  Before = 'before',\n  After = 'after',\n}\n\nexport enum TextInputAutocomplete {\n  On = 'on',\n  Off = 'off',\n  Section = 'section-*',\n  Shipping = 'shipping',\n  Billing = 'billing',\n  Home = 'home',\n  Work = 'work',\n  Mobile = 'mobile',\n  Fax = 'fax',\n  Pager = 'pager',\n  Tel = 'tel',\n  TelCountryCode = 'tel-country-code',\n  TelNational = 'tel-national',\n  TelAreaCode = 'tel-area-code',\n  TelLocal = 'tel-local',\n  TelLocalPrefix = 'tel-local-prefix',\n  TelLocalSuffix = 'tel-local-suffix',\n  TelExtension = 'tel-extension',\n  Email = 'email',\n  IMProtocol = 'impp',\n  Name = 'name',\n  HonorificPrefix = 'honorific-prefix',\n  GivenName = 'given-name',\n  AdditionalName = 'additional-name',\n  FamilyName = 'family-name',\n  HonorificSuffix = 'honorific-suffix',\n  Nickname = 'nickname',\n  Username = 'username',\n  NewPassword = 'new-password',\n  CurrentPassword = 'current-password',\n  OneTimeCode = 'one-time-code',\n  OrganizationTitle = 'organization-title',\n  Organization = 'organization',\n  StreetAddress = 'street-address',\n  AddressLine1 = 'address-line1',\n  AddressLine2 = 'address-line2',\n  AddressLine3 = 'address-line3',\n  AddressLevel4 = 'address-level4',\n  AddressLevel3 = 'address-level3',\n  AddressLevel2 = 'address-level2',\n  AddressLevel1 = 'address-level1',\n  Country = 'country',\n  CountryName = 'country-name',\n  PostalCode = 'postal-code',\n  CCName = 'cc-name',\n  CCGivenName = 'cc-given-name',\n  CCAdditionalName = 'cc-additional-name',\n  CCFamilyName = 'cc-family-name',\n  CCNumber = 'cc-number',\n  CCExp = 'cc-exp',\n  CCExpMonth = 'cc-exp-month',\n  CCExpYear = 'cc-exp-year',\n  CCCSC = 'cc-csc',\n  CCType = 'cc-type',\n  TransactionCurrency = 'transaction-currency',\n  TransactionAmount = 'transaction-amount',\n  Language = 'language',\n  Bday = 'bday',\n  BdayDay = 'bday-day',\n  BdayMonth = 'bday-month',\n  BdayYear = 'bday-year',\n  Sex = 'sex',\n  Url = 'url',\n  Photo = 'photo',\n}\n\nexport enum TimeType {\n  Hours = 'hours',\n  Minutes = 'minutes',\n  Seconds = 'seconds',\n}\n\nexport enum GlobalFilterPosition {\n  End = 'end',\n  Start = 'start',\n  Center = 'center',\n}\nexport enum SortingPossibility {\n  Asc = 'asc',\n  Desc = 'desc',\n}\n\nexport const WEEK_ABBREVIATIONS: WeekAbbreviations = {\n  'fr-FR': 'Sem', // Semaine\n  'fr-BE': 'Sem', // Semaine\n  'nl-BE': 'W', // Week\n  'en-BE': 'W', // Week\n  'en-US': 'W', // Week\n  'en-GB': 'W', // Week\n  'es-ES': 'Sem', // Semana\n  'de-DE': 'KW', // Kalenderwoche\n  'it-IT': 'Set', // Settimana\n  'pt-PT': 'Sem', // Semana\n  'nl-NL': 'W', // Week\n  'pl-PL': 'Tyd', // Tydzień\n  'ru-RU': 'Нед', // Неделя\n  'ja-JP': '週', // Shū\n  'zh-CN': '周', // Zhōu\n  'ko-KR': '주', // Ju\n};\n\nexport const CUSTOM_DAY_NAMES: { [key: string]: string[] } = {\n  'fr-BE': ['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di'],\n  'nl-BE': ['Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za', 'Zo'],\n  'de-DE': ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],\n  'en-BE': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n  'en-US': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n  'en-GB': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n};\n\nexport const CUSTOM_MONTH_NAMES: { [key: string]: string[] } = {\n  'fr-BE': [\n    'Jan',\n    'Fev',\n    'Mar',\n    'Avr',\n    'Mai',\n    'Jun',\n    'Jul',\n    'Aou',\n    'Sep',\n    'Oct',\n    'Nov',\n    'Dec',\n  ],\n  'nl-BE': [\n    'Jan',\n    'Feb',\n    'Maa',\n    'Apr',\n    'Mei',\n    'Jun',\n    'Jul',\n    'Aug',\n    'Sep',\n    'Okt',\n    'Nov',\n    'Dec',\n  ],\n  'de-DE': [\n    'Jan',\n    'Feb',\n    'Mär',\n    'Apr',\n    'Mai',\n    'Jun',\n    'Jul',\n    'Aug',\n    'Sep',\n    'Okt',\n    'Nov',\n    'Dez',\n  ],\n  'en-BE': [\n    'Jan',\n    'Feb',\n    'Mar',\n    'Apr',\n    'May',\n    'Jun',\n    'Jul',\n    'Aug',\n    'Sep',\n    'Oct',\n    'Nov',\n    'Dec',\n  ],\n  'en-US': [\n    'Jan',\n    'Feb',\n    'Mar',\n    'Apr',\n    'May',\n    'Jun',\n    'Jul',\n    'Aug',\n    'Sep',\n    'Oct',\n    'Nov',\n    'Dec',\n  ],\n  'en-GB': [\n    'Jan',\n    'Feb',\n    'Mar',\n    'Apr',\n    'May',\n    'Jun',\n    'Jul',\n    'Aug',\n    'Sep',\n    'Oct',\n    'Nov',\n    'Dec',\n  ],\n};\n"],"version":3}

package/dist/cjs/fade.animation-644b5c4d.js

@@ -1,70 +0,0 @@
-'use strict';
-
-const stylefire_es = require('./stylefire.es-717e022a.js');
-
-const useFade = (node, { duration } = { duration: 200 }) => {
-    const nodeStyler = stylefire_es.index(node);
-    /**
-     * Will animate the opacity to 1, and removes the opacity style attribute once
-     * complete.
-     */
-    function fadeIn() {
-        return new Promise(resolve => {
-            stylefire_es.animate({
-                from: { opacity: 0 },
-                to: { opacity: 1 },
-                duration,
-                onUpdate(latest) {
-                    nodeStyler.set({ opacity: latest.opacity });
-                },
-                onComplete() {
-                    resolve();
-                    node.style.removeProperty('opacity');
-                },
-            });
-        });
-    }
-    /**
-     * Applies the fadeOut styles without animating, useful when initial state
-     * is hidden.
-     */
-    function setFadeOut() {
-        node.style.opacity = '0';
-    }
-    /**
-     * Applies the fadeIn styles without animating, useful when initial state
-     * is visible.
-     */
-    function setFadeIn() {
-        node.style.opacity = '1';
-    }
-    /**
-     * Will animate the opacity to 0, once complete, the opacity style attribute
-     * will stay on the element.
-     */
-    function fadeOut() {
-        return new Promise(resolve => {
-            stylefire_es.animate({
-                from: { opacity: 1 },
-                to: { opacity: 0 },
-                duration,
-                onUpdate(latest) {
-                    nodeStyler.set({ opacity: latest.opacity });
-                },
-                onComplete() {
-                    resolve();
-                },
-            });
-        });
-    }
-    return {
-        fadeIn,
-        fadeOut,
-        setFadeOut,
-        setFadeIn,
-    };
-};
-
-exports.useFade = useFade;
-
-//# sourceMappingURL=fade.animation-644b5c4d.js.map

package/dist/cjs/fade.animation-644b5c4d.js.map

@@ -1 +0,0 @@
-{"file":"fade.animation-644b5c4d.js","mappings":";;;;MAQM,OAAO,GAAG,CACd,IAAiB,EACjB,EAAE,QAAQ,KAAkB,EAAE,QAAQ,EAAE,GAAG,EAAE;IAE7C,MAAM,UAAU,GAAGA,kBAAM,CAAC,IAAI,CAAC,CAAC;;;;;IAMhC,SAAS,MAAM;QACb,OAAO,IAAI,OAAO,CAAO,OAAO;YAC9BC,oBAAO,CAAC;gBACN,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;gBACpB,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;gBAClB,QAAQ;gBACR,QAAQ,CAAC,MAAM;oBACb,UAAU,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC;iBAC7C;gBACD,UAAU;oBACR,OAAO,EAAE,CAAC;oBACV,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;iBACtC;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;;;;;IAMD,SAAS,UAAU;QACjB,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;KAC1B;;;;;IAMD,SAAS,SAAS;QAChB,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;KAC1B;;;;;IAMD,SAAS,OAAO;QACd,OAAO,IAAI,OAAO,CAAO,OAAO;YAC9BA,oBAAO,CAAC;gBACN,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;gBACpB,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;gBAClB,QAAQ;gBACR,QAAQ,CAAC,MAAM;oBACb,UAAU,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC;iBAC7C;gBACD,UAAU;oBACR,OAAO,EAAE,CAAC;iBACX;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;IAED,OAAO;QACL,MAAM;QACN,OAAO;QACP,UAAU;QACV,SAAS;KACV,CAAC;AACJ;;;;","names":["styler","animate"],"sources":["src/animations/fade.animation.ts"],"sourcesContent":["import { animate } from 'popmotion';\nimport styler from 'stylefire';\n\nexport type FadeOptions = {\n  /** How long the animation should take in ms @default 200 */\n  duration?: number;\n};\n\nconst useFade = (\n  node: HTMLElement,\n  { duration }: FadeOptions = { duration: 200 },\n) => {\n  const nodeStyler = styler(node);\n\n  /**\n   * Will animate the opacity to 1, and removes the opacity style attribute once\n   * complete.\n   */\n  function fadeIn() {\n    return new Promise<void>(resolve => {\n      animate({\n        from: { opacity: 0 },\n        to: { opacity: 1 },\n        duration,\n        onUpdate(latest) {\n          nodeStyler.set({ opacity: latest.opacity });\n        },\n        onComplete() {\n          resolve();\n          node.style.removeProperty('opacity');\n        },\n      });\n    });\n  }\n\n  /**\n   * Applies the fadeOut styles without animating, useful when initial state\n   * is hidden.\n   */\n  function setFadeOut() {\n    node.style.opacity = '0';\n  }\n\n  /**\n   * Applies the fadeIn styles without animating, useful when initial state\n   * is visible.\n   */\n  function setFadeIn() {\n    node.style.opacity = '1';\n  }\n\n  /**\n   * Will animate the opacity to 0, once complete, the opacity style attribute\n   * will stay on the element.\n   */\n  function fadeOut() {\n    return new Promise<void>(resolve => {\n      animate({\n        from: { opacity: 1 },\n        to: { opacity: 0 },\n        duration,\n        onUpdate(latest) {\n          nodeStyler.set({ opacity: latest.opacity });\n        },\n        onComplete() {\n          resolve();\n        },\n      });\n    });\n  }\n\n  return {\n    fadeIn,\n    fadeOut,\n    setFadeOut,\n    setFadeIn,\n  };\n};\n\nexport { useFade };\n"],"version":3}

package/dist/cjs/grow.animation-6d003803.js.map

@@ -1 +0,0 @@
-{"file":"grow.animation-6d003803.js","mappings":";;;;MAYM,OAAO,GAAG,CACd,IAAiB,EACjB,EAAE,QAAQ,GAAG,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,OAAO,GAAG,IAAI,KAAkB,EAAE;IAElE,MAAM,UAAU,GAAGA,kBAAM,CAAC,IAAI,CAAC,CAAC;;;;;IAMhC,SAAS,MAAM;QACb,OAAO,IAAI,OAAO,CAAO,OAAO;YAC9BC,oBAAO,CAAC;gBACN,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE;gBACjD,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;gBAC5B,QAAQ;gBACR,QAAQ,CAAC,MAAM;oBACb,MAAM,OAAO,GAAG;wBACd,KAAK,EAAE,MAAM,CAAC,KAAK;qBACpB,CAAC;oBACF,IAAI,OAAO,EAAE;wBACX,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC;qBACrC;oBACD,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;iBACzB;gBACD,UAAU;oBACR,OAAO,EAAE,CAAC;oBACV,IAAI,OAAO,EAAE;wBACX,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;qBACtC;oBACD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;iBACxC;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;;;;;IAMD,SAAS,UAAU;QACjB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,MAAM,GAAG,CAAC;QAC1C,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;SAC1B;KACF;;;;;IAMD,SAAS,SAAS;QAChB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,UAAU,CAAC;QAClC,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;SAC1B;KACF;;;;;IAMD,SAAS,OAAO;QACd,OAAO,IAAI,OAAO,CAAO,OAAO;YAC9BA,oBAAO,CAAC;gBACN,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;gBAC9B,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE;gBAC/C,QAAQ;gBACR,QAAQ,CAAC,MAAM;oBACb,MAAM,OAAO,GAAG;wBACd,KAAK,EAAE,MAAM,CAAC,KAAK;qBACpB,CAAC;oBACF,IAAI,OAAO,EAAE;wBACX,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC;qBACrC;oBACD,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;iBACzB;gBACD,UAAU;oBACR,OAAO,EAAE,CAAC;iBACX;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;IAED,OAAO;QACL,MAAM;QACN,OAAO;QACP,UAAU;QACV,SAAS;KACV,CAAC;AACJ;;;;","names":["styler","animate"],"sources":["src/animations/grow.animation.ts"],"sourcesContent":["import { animate } from 'popmotion';\nimport styler from 'stylefire';\n\nexport type GrowOptions = {\n  /** How long the animation should take in ms @default 200 */\n  duration?: number;\n  /** The amount to scale the element by @default 0.8 */\n  amount?: number;\n  /** Whether to include a fade effect in the animation @default true */\n  hasFade?: boolean;\n};\n\nconst useGrow = (\n  node: HTMLElement,\n  { duration = 200, amount = 0.8, hasFade = true }: GrowOptions = {},\n) => {\n  const nodeStyler = styler(node);\n\n  /**\n   * Will animate the scale and optionally the opacity to make the element grow and fade in,\n   * and removes the scale and opacity style attributes once complete.\n   */\n  function growIn() {\n    return new Promise<void>(resolve => {\n      animate({\n        from: { opacity: hasFade ? 0 : 1, scale: amount },\n        to: { opacity: 1, scale: 1 },\n        duration,\n        onUpdate(latest) {\n          const updates = {\n            scale: latest.scale,\n          };\n          if (hasFade) {\n            updates['opacity'] = latest.opacity;\n          }\n          nodeStyler.set(updates);\n        },\n        onComplete() {\n          resolve();\n          if (hasFade) {\n            node.style.removeProperty('opacity');\n          }\n          node.style.removeProperty('transform');\n        },\n      });\n    });\n  }\n\n  /**\n   * Applies the growOut styles without animating, useful when the initial\n   * state is hidden.\n   */\n  function setGrowOut() {\n    node.style.transform = `scale(${amount})`;\n    if (hasFade) {\n      node.style.opacity = '0';\n    }\n  }\n\n  /**\n   * Applies the growIn styles without animating, useful when the initial\n   * state is visible.\n   */\n  function setGrowIn() {\n    node.style.transform = `scale(1)`;\n    if (hasFade) {\n      node.style.opacity = '1';\n    }\n  }\n\n  /**\n   * Will animate the scale and optionally the opacity to make the element shrink and fade out,\n   * leaving the scale and opacity styles on the element.\n   */\n  function growOut() {\n    return new Promise<void>(resolve => {\n      animate({\n        from: { opacity: 1, scale: 1 },\n        to: { opacity: hasFade ? 0 : 1, scale: amount },\n        duration,\n        onUpdate(latest) {\n          const updates = {\n            scale: latest.scale,\n          };\n          if (hasFade) {\n            updates['opacity'] = latest.opacity;\n          }\n          nodeStyler.set(updates);\n        },\n        onComplete() {\n          resolve();\n        },\n      });\n    });\n  }\n\n  return {\n    growIn,\n    growOut,\n    setGrowOut,\n    setGrowIn,\n  };\n};\n\nexport { useGrow };\n"],"version":3}