@xv/webcomponents

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/
│── 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:

npm install xv-webcomponents

Usage

Using in an HTML Page

Simply include the Web Component in your 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:

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:

<xv-button-v2 label="Click Me" variant="primary"></xv-button-v2>

Using in a C# Razor Page (MVC)

<xv-button-v2 label="Submit" variant="secondary"></xv-button-v2>

Using in Sitefinity CMS

Embed the Web Component inside a content block:

<xv-button-v2 label="Learn More" variant="ghost"></xv-button-v2>

🛠 Development & Building

1️⃣ Build the Components

To build all components:

npm run build

This generates compiled components inside the dist/ folder.

2️⃣ Run Local Development Server

To test components locally:

npm start

This starts a development server and watches for changes.

3️⃣ Publish to npm

To publish a new version of the package:

npm version patch
npm publish --access public

Contributing

Adding a New Component

1. Generate a new component:

   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.