@nova-design-system/nova-webcomponents 3.0.0-beta.17

package/hydrate/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@nova-design-system/nova-webcomponents/hydrate",
+  "description": "native component hydration app.",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./index.js",
+      "import": "./index.mjs"
+    }
+  }
+}

package/loader/cdn.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.d.ts

@@ -0,0 +1,24 @@
+export * from '../dist/types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  jmp?: (c: Function) => any;
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+/**
+ * @deprecated
+ */
+export declare function applyPolyfills(): Promise<void>;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/loader/index.es2017.js

@@ -0,0 +1 @@
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -0,0 +1,2 @@
+(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
+export * from '../dist/esm/loader.js';

package/loader/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "native-loader",
+  "private": true,
+  "typings": "./index.d.ts",
+  "module": "./index.js",
+  "main": "./index.cjs.js",
+  "jsnext:main": "./index.es2017.js",
+  "es2015": "./index.es2017.js",
+  "es2017": "./index.es2017.js",
+  "unpkg": "./cdn.js"
+}

package/package.json

@@ -0,0 +1,197 @@
+{
+  "name": "@nova-design-system/nova-webcomponents",
+  "version": "3.0.0-beta.17",
+  "description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
+  "publishConfig": {
+    "registry": "http://registry.npmjs.org/",
+    "scope": "@nova-design-system",
+    "access": "public"
+  },
+  "author": "Elia Group",
+  "homepage": "https://nova.eliagroup.io",
+  "license": "SEE LICENSE IN LICENSE.MD",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/native/native.esm.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ionic-team/stencil-component-starter.git"
+  },
+  "files": [
+    "dist/",
+    "loader/",
+    "hydrate/"
+  ],
+  "scripts": {
+    "build": "rimraf dist && stencil build || exit 1",
+    "dev": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec --e2e",
+    "test.ci": "stencil test --spec --e2e --runInBand",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate",
+    "clean": "rimraf dist loader hydrate www .stencil stories",
+    "storybook": "storybook dev -p 6007",
+    "storybook.watch": "concurrently \"stencil build --watch\" \"storybook dev -p 6007\"",
+    "storybook.build": "storybook build -o ../../storybook-static/native",
+    "typecheck": "tsc --emitDeclarationOnly false --noEmit",
+    "test.e2e": "stencil test --spec --e2e --runInBand && playwright test",
+    "playwright": "playwright test",
+    "playwright.ci": "playwright test --workers=1",
+    "playwright.ui": "playwright test --ui",
+    "playwright.failed": "playwright test --last-failed",
+    "postinstall": "node postinstall.js"
+  },
+  "dependencies": {
+    "@nova-design-system/nova-base": "*",
+    "@floating-ui/dom": "1.6.11",
+    "popmotion": "11.0.5",
+    "print-message": "^3.0.1",
+    "stylefire": "7.0.3",
+    "uuid": "10.0.0"
+  },
+  "devDependencies": {
+    "@open-wc/lit-helpers": "0.7.0",
+    "@pxtrn/storybook-addon-docs-stencil": "6.4.1",
+    "@stencil/core": "4.22.1 ",
+    "@stencil/sass": "3.0.12",
+    "@stencil/store": "2.0.16",
+    "@storybook/web-components": "8.2.8",
+    "@storybook/web-components-vite": "8.2.8",
+    "@types/jest": "^29.5.6",
+    "@types/node": "^16.18.11",
+    "clsx": "2.1.1",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "nova-storybook-utils": "*",
+    "nova-utils": "*",
+    "puppeteer": "^23.4.1"
+  },
+  "exports": {
+    "./nv-menuitem": {
+      "import": "./dist/components/nv-menuitem.js",
+      "types": "./dist/components/nv-menuitem.d.ts"
+    },
+    "./nv-menu": {
+      "import": "./dist/components/nv-menu.js",
+      "types": "./dist/components/nv-menu.d.ts"
+    },
+    "./nv-tooltip": {
+      "import": "./dist/components/nv-tooltip.js",
+      "types": "./dist/components/nv-tooltip.d.ts"
+    },
+    "./nv-popover": {
+      "import": "./dist/components/nv-popover.js",
+      "types": "./dist/components/nv-popover.d.ts"
+    },
+    "./nv-fieldselect": {
+      "import": "./dist/components/nv-fieldselect.js",
+      "types": "./dist/components/nv-fieldselect.d.ts"
+    },
+    "./nv-fieldtextarea": {
+      "import": "./dist/components/nv-fieldtextarea.js",
+      "types": "./dist/components/nv-fieldtextarea.d.ts"
+    },
+    "./nv-fieldnumber": {
+      "import": "./dist/components/nv-fieldnumber.js",
+      "types": "./dist/components/nv-fieldnumber.d.ts"
+    },
+    "./nv-fieldpassword": {
+      "import": "./dist/components/nv-fieldpassword.js",
+      "types": "./dist/components/nv-fieldpassword.d.ts"
+    },
+    "./nv-fieldtoggle": {
+      "import": "./dist/components/nv-fieldtoggle.js",
+      "types": "./dist/components/nv-fieldtoggle.d.ts"
+    },
+    "./nv-fieldcheckbox": {
+      "import": "./dist/components/nv-fieldcheckbox.js",
+      "types": "./dist/components/nv-fieldcheckbox.d.ts"
+    },
+    "./nv-fieldradio": {
+      "import": "./dist/components/nv-fieldradio.js",
+      "types": "./dist/components/nv-fieldradio.d.ts"
+    },
+    "./nv-iconbutton": {
+      "import": "./dist/components/nv-iconbutton.js",
+      "types": "./dist/components/nv-iconbutton.d.ts"
+    },
+    "./nv-badge": {
+      "import": "./dist/components/nv-badge.js",
+      "types": "./dist/components/nv-badge.d.ts"
+    },
+    "./nv-base": {
+      "import": "./dist/components/nv-base.js",
+      "types": "./dist/components/nv-base.d.ts"
+    },
+    "./nv-example": {
+      "import": "./dist/components/nv-example.js",
+      "types": "./dist/components/nv-example.d.ts"
+    },
+    "./nv-button": {
+      "import": "./dist/components/nv-button.js",
+      "types": "./dist/components/nv-button.d.ts"
+    },
+    "./nv-fieldtext": {
+      "import": "./dist/components/nv-fieldtext.js",
+      "types": "./dist/components/nv-fieldtext.d.ts"
+    },
+    "./nv-alert": {
+      "import": "./dist/components/nv-alert.js",
+      "types": "./dist/components/nv-alert.d.ts"
+    },
+    "./nv-avatar": {
+      "import": "./dist/components/nv-avatar.js",
+      "types": "./dist/components/nv-avatar.d.ts"
+    },
+    "./nv-icon": {
+      "import": "./dist/components/nv-icon.js",
+      "types": "./dist/components/nv-icon.d.ts"
+    },
+    "./nv-stack": {
+      "import": "./dist/components/nv-stack.js",
+      "types": "./dist/components/nv-stack.d.ts"
+    },
+    "./nv-row": {
+      "import": "./dist/components/nv-row.js",
+      "types": "./dist/components/nv-row.d.ts"
+    },
+    "./nv-col": {
+      "import": "./dist/components/nv-col.js",
+      "types": "./dist/components/nv-col.d.ts"
+    },
+    "./nv-loader": {
+      "import": "./dist/components/nv-loader.js",
+      "types": "./dist/components/nv-loader.d.ts"
+    },
+    "./hydrate/*": "./hydrate/*",
+    "./dist/*": "./dist/*",
+    "./dist/docs.json": {
+      "types": "./dist/types/docs.d.ts",
+      "import": "./dist/docs.json",
+      "require": "./dist/docs.json"
+    },
+    "./nova.css": {
+      "import": "./dist/native/native.css",
+      "require": "./dist/native/native.css",
+      "style": "./dist/native/native.css"
+    },
+    "./docs.json": {
+      "types": "./dist/types/docs.d.ts",
+      "import": "./dist/docs.json",
+      "require": "./dist/docs.json"
+    },
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/native/index.esm.js",
+      "require": "./dist/cjs/index.cjs.js"
+    },
+    "./loader": {
+      "import": "./loader/index.js",
+      "require": "./loader/index.cjs",
+      "types": "./loader/index.d.ts"
+    }
+  }
+}

package/readme.md

@@ -0,0 +1,67 @@
+# Nova Components Native Setup
+
+**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.
+
+## 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.
+
+```bash
+npm install @nova-design-system/nova-webcomponents @nova-design-system/nova-base
+```
+
+or
+
+```bash
+yarn add @nova-design-system/nova-webcomponents @nova-design-system/nova-base
+```
+
+## Setup
+
+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`):
+
+```javascript
+import '@nova-design-system/nova-base/dist/css/nova-utils.css';
+import '@nova-design-system/nova-base/assets/nova-fonts.css';
+import '@nova-design-system/nova-base/dist/css/spark.css'; // or ocean.css
+import { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
+
+defineCustomElements();
+```
+
+This file sets up the Nova components and styles, making them available for use in your HTML.
+
+## Usage
+
+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:
+
+```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>
+</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.
+
+## Conclusion
+
+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.