xv-webcomponents 0.1.41 → 0.1.43

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/dist/types/components/xv-button/xv-button.d.ts

@@ -1,27 +1,18 @@
-import { SIZE_VAR } from '../../types/enum';
+import { EventEmitter } from '../../stencil-public-runtime';
 export declare class XvButton {
-    el: HTMLElement;
-    /** Button label is optional you can use just inside content */
-    label?: string;
-    /** Button variants */
-    variant: 'primary' | 'secondary' | 'ghost' | 'danger' | 'tertiary';
-    /** Button size */
-    size: SIZE_VAR;
-    /** Button disabled state */
-    disabled: boolean;
-    /** Button loading state */
-    loading: boolean;
-    /** Button for full width */
+    /** Button label */
+    label: string;
+    /** Container width Button */
     block: boolean;
     /** Button type */
-    type: 'button' | 'submit' | 'reset';
-    hasLeftIcon: boolean;
-    hasRightIcon: boolean;
-    hasContent: boolean;
-    internals: ElementInternals;
-    private handleSlotChangeLeft;
-    private handleSlotChangeContent;
-    private handleSlotChangeRight;
+    type: 'button' | 'reset' | 'submit';
+    /** Variant */
+    variant: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'ghost';
+    /** Disabled state */
+    disabled: boolean;
+    /** Emits when the button is clicked */
+    buttonClick: EventEmitter<MouseEvent>;
+    /** Handle click only if not disabled */
     private handleClick;
     render(): any;
 }

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

@@ -13,7 +13,6 @@ export declare class XvDropdown {
     helper?: string;
     warning?: string;
     placeholder?: string;
-    info?: string;
     size: SIZE_VAR;
     defaultValue?: DropdownItemData['value'];
     selected: DropdownItemData['text'][];

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

@@ -1,7 +1,9 @@
+import { UserMenuProps } from '../xv-user-menu/xv-user-menu';
 export declare class XvHeader {
     htmlContent: string;
     showLoginModal: boolean;
     el: HTMLElement;
+    userMenuConfig: UserMenuProps;
     private openLoginModal;
     private closeLoginModal;
     componentWillLoad(): Promise<void>;

package/dist/types/components/xv-text-input/_vars.d.ts

@@ -0,0 +1,5 @@
+export declare enum TextInputStatus {
+    ERROR = "error",
+    WARNING = "warning",
+    DEF = ""
+}

package/dist/types/components/xv-text-input/xv-text-input.d.ts

@@ -1,26 +1,27 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { SIZE_VAR } from '../../types/enum';
+import { TextInputStatus } from './_vars';
 /**
  * xv-text-input — custom input
  * ti get data you can use default Input event
  * Angular - (input), React - (onInput), Pure - addEventListener('input', e => ...)
  */
 export declare class XvTextInput {
-    type: 'text' | 'email' | 'password' | 'url' | 'tel';
-    label: string;
+    el: HTMLElement;
+    label?: string;
     placeholder?: string;
-    name: string;
+    helper: string;
+    name?: string;
+    size: SIZE_VAR;
+    status: TextInputStatus;
     value: string;
     valueChange: EventEmitter<string>;
-    helper?: string;
-    error?: string | boolean;
-    warning?: string | boolean;
-    readonly?: boolean;
-    disabled?: boolean;
+    disabled: boolean;
+    readonly: boolean;
     loading: boolean;
-    block?: boolean;
-    size: SIZE_VAR;
     internals: ElementInternals;
     private handleInput;
     render(): any;
+    componentWillLoad(): void;
+    private getControlIcon;
 }

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

@@ -1,14 +1,12 @@
-import { Placement } from '@popperjs/core';
 export declare class XvTooltip {
-    el: HTMLElement;
+    /** Message what will be shown for tooltip **/
     message: string;
-    position: Placement;
-    visible: boolean;
-    private tooltipEl;
-    private popperInstance;
-    onMouseEnter(): void;
-    onMouseLeave(): void;
-    private createPopper;
-    private destroyPopper;
+    /**
+     * Tooltip and arrow position related to element
+     * possible options: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right'.
+     * By default, "top"
+     */
+    position: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    multiline: boolean;
     render(): any;
 }

package/dist/types/components/xv-user-menu/xv-user-menu.d.ts

@@ -0,0 +1,41 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface MenuItem {
+    text: string;
+    url: string;
+    target?: string;
+    cssClass: string;
+    badgeText?: string;
+}
+export interface ImpersonationInfo {
+    isImpersonated: boolean;
+    nameAndTitle: string;
+    companyName: string;
+    email: string;
+    phoneOffice: string;
+    clearImpersonationUrl: string;
+}
+export interface UserMenuProps {
+    authenticated: boolean;
+    isManager: boolean;
+    userMenuText: string;
+    pendingItems: number;
+    managerCockpitMenu: MenuItem[];
+    managerEntitiesMenu: MenuItem[];
+    managerMenu: MenuItem[];
+    userMenu: MenuItem[];
+    actionsMenu: MenuItem[];
+    impersonationInfo: ImpersonationInfo;
+}
+export declare class XvUserMenu {
+    config: UserMenuProps;
+    isCockpitMenuExpanded: boolean;
+    isEntitiesMenuExpanded: boolean;
+    isUserMenuExpanded: boolean;
+    menuItemClick: EventEmitter<MenuItem>;
+    private toggleCockpitMenu;
+    private toggleEntitiesMenu;
+    private toggleUserMenu;
+    private handleMenuItemClick;
+    private renderMenuItem;
+    render(): any;
+}