xv-webcomponents 0.1.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 crossvertise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,129 @@
+# @xv/webcomponents-base
+
+**Reusable Web Components for XV Applications**  
+This repository contains Web Components built with Stencil.js to provide a modular and reusable UI across multiple applications.
+
+---
+
+## Features
+
+**Reusable Web Components** – Designed for multiple XV applications  
+**Stencil.js Powered** – Built using modern Web Component standards  
+**Shadow DOM Support** – Encapsulated styles and functionality  
+**Brand-Specific Theming** – Automatically detects and applies brand styles  
+**Framework Agnostic** – Works with Angular, React, Vue, and plain HTML  
+
+---
+
+## Folder Structure
+
+```
+xv-webcomponents-base/
+│── src/
+│   ├── components/       # Web Component source files
+│   │   ├── button/
+│   │   │   ├── xv-button.tsx
+│   │   │   ├── xv-button.css
+│   │   │   ├── xv-button.e2e.ts
+│   │   │   ├── xv-button.spec.ts
+│   │   ├── checkbox/
+│   │   │   ├── xv-checkbox.tsx
+│   │   │   ├── xv-checkbox.css
+│   │   │   ├── xv-checkbox.e2e.ts
+│   │   │   ├── xv-checkbox.spec.ts
+│   ├── utils/            # Utility functions for components
+│── dist/                 # Compiled distribution files
+│── loader/               # Loader scripts for consuming Web Components
+│── package.json
+│── README.md
+│── stencil.config.ts     # Stencil.js configuration
+```
+
+---
+
+## Installation
+
+To install the package from npm:
+```bash
+npm install @xv/webcomponents-base
+```
+
+---
+
+## Usage
+
+### **Using in an HTML Page**
+Simply include the Web Component in your HTML:
+```html
+<script type="module" src="https://cdn.yourcompany.com/xv-webcomponents/xv-webcomponents.esm.js"></script>
+<xv-button-v2 label="Click Me" variant="accent"></xv-button-v2>
+```
+
+### **Using in an Angular Project**
+First, import `CUSTOM_ELEMENTS_SCHEMA` in your module:
+```typescript
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+@NgModule({
+  declarations: [],
+  imports: [BrowserModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AppModule {}
+```
+Now, use the Web Component in your Angular templates:
+```html
+<xv-button-v2 label="Click Me" variant="primary"></xv-button-v2>
+```
+
+### **Using in a C# Razor Page (MVC)**
+```html
+<xv-button-v2 label="Submit" variant="secondary"></xv-button-v2>
+```
+
+### **Using in Sitefinity CMS**
+Embed the Web Component inside a content block:
+```html
+<xv-button-v2 label="Learn More" variant="ghost"></xv-button-v2>
+```
+
+---
+
+## 🛠 Development & Building
+
+### **1️⃣ Build the Components**
+To build all components:
+```bash
+npm run build
+```
+This generates compiled components inside the `dist/` folder.
+
+### **2️⃣ Run Local Development Server**
+To test components locally:
+```bash
+npm start
+```
+This starts a development server and watches for changes.
+
+### **3️⃣ Publish to npm**
+To publish a new version of the package:
+```bash
+npm version patch
+npm publish --access public
+```
+
+---
+
+## Contributing
+
+### **Adding a New Component**
+1. Generate a new component:
+   ```bash
+   npm run generate component xv-new-component
+   ```
+2. Implement logic and styles inside `src/components/xv-new-component/`.
+3. Test the component using Jest (`.spec.ts`) and e2e tests.
+4. Run `npm run build` to generate the compiled version.
+5. Commit changes and submit a pull request.
+

package/dist/components/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => 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 const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  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 const setPlatformOptions: (opts: SetPlatformOptions) => void;

package/dist/components/xv-button-v2.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XvButtonV2 extends Components.XvButtonV2, HTMLElement {}
+export const XvButtonV2: {
+    prototype: XvButtonV2;
+    new (): XvButtonV2;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/xv-checkbox-v2.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XvCheckboxV2 extends Components.XvCheckboxV2, HTMLElement {}
+export const XvCheckboxV2: {
+    prototype: XvCheckboxV2;
+    new (): XvCheckboxV2;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/xv-checkbox.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XvCheckbox extends Components.XvCheckbox, HTMLElement {}
+export const XvCheckbox: {
+    prototype: XvCheckbox;
+    new (): XvCheckbox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/types/components/xv-button/xv-button.d.ts

@@ -0,0 +1,16 @@
+export declare class XvButton {
+    el: HTMLElement;
+    /** Button label */
+    label: string;
+    /** Variant */
+    variant: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'ghost';
+    /** Size */
+    size: 'small' | 'medium' | 'large';
+    /** Disabled state */
+    disabled: boolean;
+    /** Automatically detected brand */
+    detectedBrand: string;
+    private applyGlobalStyles;
+    componentWillLoad(): void;
+    render(): any;
+}

package/dist/types/components/xv-checkbox/xv-checkbox.d.ts

@@ -0,0 +1,7 @@
+export declare class XvCheckbox {
+    el: HTMLElement;
+    detectedBrand: string;
+    private applyGlobalStyles;
+    componentWillLoad(): void;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -0,0 +1,95 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+export namespace Components {
+    interface XvButtonV2 {
+        /**
+          * Disabled state
+         */
+        "disabled": boolean;
+        /**
+          * Button label
+         */
+        "label": string;
+        /**
+          * Size
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * Variant
+         */
+        "variant": 'accent' | 'primary' | 'secondary' | 'tertiary' | 'ghost';
+    }
+    interface XvCheckbox {
+    }
+    interface XvCheckboxV2 {
+    }
+}
+declare global {
+    interface HTMLXvButtonV2Element extends Components.XvButtonV2, HTMLStencilElement {
+    }
+    var HTMLXvButtonV2Element: {
+        prototype: HTMLXvButtonV2Element;
+        new (): HTMLXvButtonV2Element;
+    };
+    interface HTMLXvCheckboxElement extends Components.XvCheckbox, HTMLStencilElement {
+    }
+    var HTMLXvCheckboxElement: {
+        prototype: HTMLXvCheckboxElement;
+        new (): HTMLXvCheckboxElement;
+    };
+    interface HTMLXvCheckboxV2Element extends Components.XvCheckboxV2, HTMLStencilElement {
+    }
+    var HTMLXvCheckboxV2Element: {
+        prototype: HTMLXvCheckboxV2Element;
+        new (): HTMLXvCheckboxV2Element;
+    };
+    interface HTMLElementTagNameMap {
+        "xv-button-v2": HTMLXvButtonV2Element;
+        "xv-checkbox": HTMLXvCheckboxElement;
+        "xv-checkbox-v2": HTMLXvCheckboxV2Element;
+    }
+}
+declare namespace LocalJSX {
+    interface XvButtonV2 {
+        /**
+          * Disabled state
+         */
+        "disabled"?: boolean;
+        /**
+          * Button label
+         */
+        "label"?: string;
+        /**
+          * Size
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * Variant
+         */
+        "variant"?: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'ghost';
+    }
+    interface XvCheckbox {
+    }
+    interface XvCheckboxV2 {
+    }
+    interface IntrinsicElements {
+        "xv-button-v2": XvButtonV2;
+        "xv-checkbox": XvCheckbox;
+        "xv-checkbox-v2": XvCheckboxV2;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "xv-button-v2": LocalJSX.XvButtonV2 & JSXBase.HTMLAttributes<HTMLXvButtonV2Element>;
+            "xv-checkbox": LocalJSX.XvCheckbox & JSXBase.HTMLAttributes<HTMLXvCheckboxElement>;
+            "xv-checkbox-v2": LocalJSX.XvCheckboxV2 & JSXBase.HTMLAttributes<HTMLXvCheckboxV2Element>;
+        }
+    }
+}

package/dist/types/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @fileoverview entry point for your component library
+ *
+ * This is the entry point for your component library. Use this file to export utilities,
+ * constants or data structure that accompany your components.
+ *
+ * DO NOT use this file to export your components. Instead, use the recommended approaches
+ * to consume components of this package as outlined in the `README.md`.
+ */
+export { format } from './utils/utils';
+export type * from './components.d.ts';