xv-webcomponents 0.1.20 → 0.1.22

package/LICENSE

@@ -1,21 +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.
+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

@@ -1,129 +1,129 @@
-# @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:
-```bash
-npm install xv-webcomponents
-```
-
----
-
-## 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.
-
+# @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:
+```bash
+npm install xv-webcomponents
+```
+
+---
+
+## 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/package.json

@@ -1,51 +1,51 @@
-{
-  "name": "xv-webcomponents",
-  "version": "0.1.20",
-  "description": "Reusable Web Components for XV Applications",
-  "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/xv-webcomponents/xv-webcomponents.esm.js",
-  "exports": {
-    ".": {
-      "import": "./dist/xv-webcomponents/xv-webcomponents.esm.js",
-      "require": "./dist/xv-webcomponents/xv-webcomponents.cjs.js"
-    },
-    "./loader": {
-      "import": "./loader/index.js",
-      "require": "./loader/index.cjs",
-      "types": "./loader/index.d.ts"
-    }
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ionic-team/stencil-component-starter.git"
-  },
-  "files": [
-    "dist/",
-    "loader/"
-  ],
-  "scripts": {
-    "build": "stencil build",
-    "start": "stencil build --dev --watch --serve",
-    "test": "stencil test --spec --e2e",
-    "test.watch": "stencil test --spec --e2e --watchAll",
-    "generate": "stencil generate"
-  },
-  "devDependencies": {
-    "@stencil/angular-output-target": "^0.10.2",
-    "@stencil/core": "^4.7.0",
-    "@stencil/sass": "^2.0.4",
-    "@types/jest": "^29.5.6",
-    "@types/node": "^16.18.11",
-    "jest": "^29.7.0",
-    "jest-cli": "^29.7.0",
-    "puppeteer": "^24.3.0"
-  },
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "xv-webcomponents",
+  "version": "0.1.22",
+  "description": "Reusable Web Components for XV Applications",
+  "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/xv-webcomponents/xv-webcomponents.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/xv-webcomponents/xv-webcomponents.esm.js",
+      "require": "./dist/xv-webcomponents/xv-webcomponents.cjs.js"
+    },
+    "./loader": {
+      "import": "./loader/index.js",
+      "require": "./loader/index.cjs",
+      "types": "./loader/index.d.ts"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ionic-team/stencil-component-starter.git"
+  },
+  "files": [
+    "dist/",
+    "loader/"
+  ],
+  "scripts": {
+    "build": "stencil build",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec --e2e",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate"
+  },
+  "devDependencies": {
+    "@stencil/angular-output-target": "^0.10.2",
+    "@stencil/core": "^4.7.0",
+    "@stencil/sass": "^2.0.4",
+    "@types/jest": "^29.5.6",
+    "@types/node": "^16.18.11",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "puppeteer": "^24.3.0"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}

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

@@ -1,20 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export declare class XvAccordion {
-    multiple: boolean;
-    xvId: string;
-    value: string;
-    opened: Set<string>;
-    accordionChange: EventEmitter<{
-        opened: Set<string>;
-        id: string;
-    }>;
-    toggleItem(value: string): Promise<{
-        opened: Set<string>;
-        id: string;
-    }>;
-    componentWillLoad(): Promise<{
-        opened: Set<string>;
-        id: string;
-    }>;
-    render(): any;
-}

package/dist/types/components/xv-accordion-item/xv-accordion-item.d.ts

@@ -1,15 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export declare class XvAccordionItem {
-    el: HTMLElement;
-    disabled: boolean;
-    label: string;
-    value: string;
-    isOpen: boolean;
-    itemToggle: EventEmitter;
-    handleAccordionChange(event: CustomEvent<{
-        opened: Set<string>;
-        id: string;
-    }>): void;
-    toggle(): void;
-    render(): any;
-}

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

@@ -1,3 +0,0 @@
-export declare class XvBreadcrumbs {
-    render(): any;
-}

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

@@ -1,16 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export declare class XvButton {
-    /** Button label */
-    label: string;
-    /** Container width Button */
-    block: boolean;
-    /** Variant */
-    variant: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'ghost';
-    /** Disabled state */
-    disabled: boolean;
-    /** Emits when the button is clicked */
-    buttonClick: EventEmitter<void>;
-    /** Handle click only if not disabled */
-    private handleClick;
-    render(): any;
-}

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

@@ -1,8 +0,0 @@
-export declare class XvCard {
-    variant: 'horizontal' | 'vertical';
-    media: string;
-    header: string;
-    body: string;
-    footer: string;
-    render(): any;
-}

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

@@ -1,70 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-import { SIZE_VAR } from '../../types/enum';
-export declare class XvCheckbox {
-    private inputEl;
-    private internals;
-    el: HTMLElement;
-    /**
-     * Default checked status
-     */
-    checked: boolean;
-    /**
-     * Using for forms
-     */
-    indeterminate: boolean;
-    /**
-     * Disabled status
-     */
-    disabled: boolean;
-    /**
-     * Input name
-     */
-    name: string;
-    /**
-     * Input value
-     */
-    value: string;
-    /**
-     * The same like default checkbox prop
-     */
-    required: boolean;
-    /**
-     * Change checkmark icon to minus
-     */
-    partial: boolean;
-    /**
-     * Can be used like property or like slot
-     */
-    label: string;
-    size?: SIZE_VAR;
-    error?: string | boolean;
-    hasFocus: boolean;
-    /**
-     * event 'onEventChange'
-     */
-    changeEvent: EventEmitter<boolean>;
-    /**
-     * event 'onEventInput'
-     */
-    inputEvent: EventEmitter<boolean>;
-    /**
-     * event 'onEventFocus'
-     */
-    focusEvent: EventEmitter<void>;
-    /**
-     * event 'onEventBlur'
-     */
-    blurEvent: EventEmitter<void>;
-    constructor();
-    connectedCallback(): void;
-    onCheckedChange(newValue: boolean): void;
-    private onInput;
-    private onChange;
-    private onFocus;
-    private onBlur;
-    render(): any;
-    componentDidLoad(): void;
-    componentDidUpdate(): void;
-    formResetCallback(): void;
-    formStateRestoreCallback(state: string): void;
-}

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

@@ -1,9 +0,0 @@
-export declare class XvLink {
-    href: string;
-    target: '_self' | '_blank' | '_parent' | '_top';
-    disabled: boolean;
-    size: 'sm' | 'md' | 'lg';
-    variant: 'standalone' | 'inline';
-    preventLinkHandler(e: PointerEvent): void;
-    render(): any;
-}

package/dist/types/components/xv-progress-indicator/xv-progress-indicator.d.ts

@@ -1,7 +0,0 @@
-export declare class XvProgressIndicator {
-    el: HTMLElement;
-    progress: number;
-    updateChildItems(): void;
-    componentDidLoad(): void;
-    render(): any;
-}

package/dist/types/components/xv-progress-indicator-item/xv-progress-indicator-item.d.ts

@@ -1,5 +0,0 @@
-export declare class XvProgressIndicatorItem {
-    el: HTMLElement;
-    done: boolean;
-    render(): any;
-}

package/dist/types/components/xv-table/defs.d.ts

@@ -1,16 +0,0 @@
-export declare enum TABLE_COLOR_SCHEMA {
-    DEF = "",
-    ZEBRA = "zebra"
-}
-export declare enum TABLE_SIZE {
-    EXTRA_SMALL = "xs",
-    SMALL = "sm",
-    MEDIUM = "md",
-    LARGE = "lg",
-    EXTRA_LARGE = "xl"
-}
-export type TableSelectionEvent = CustomEvent<{
-    name: string;
-    checked: boolean;
-    value?: string;
-}>;

package/dist/types/components/xv-table/xv-table-col/xv-table-col.d.ts

@@ -1,3 +0,0 @@
-export declare class XvTableCol {
-    render(): any;
-}

package/dist/types/components/xv-table/xv-table-header-row/xv-table-header-row.d.ts

@@ -1,25 +0,0 @@
-import { EventEmitter } from '../../../stencil-public-runtime';
-export declare class XvTableHeaderRow {
-    el: HTMLElement;
-    /**
-     * Checkbox row name
-     */
-    selectionName?: string;
-    /**
-     * Checkbox row selected partially
-     */
-    partial?: boolean;
-    /**
-     * Checkbox row checked
-     */
-    checked?: boolean;
-    cols: number;
-    checkedChange: EventEmitter<{
-        name: string;
-        value?: string;
-        checked: boolean;
-    }>;
-    private slotChangeHandle;
-    private checkboxChange;
-    render(): any;
-}