xv-webcomponents 0.1.43 → 0.1.44

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/cjs/app-globals-V2Kpy_OQ.js

@@ -0,0 +1,8 @@
+'use strict';
+
+const globalScripts = () => {};
+
+exports.globalScripts = globalScripts;
+//# sourceMappingURL=app-globals-V2Kpy_OQ.js.map
+
+//# sourceMappingURL=app-globals-V2Kpy_OQ.js.map

package/dist/cjs/app-globals-V2Kpy_OQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-globals-V2Kpy_OQ.js","sources":["@stencil/core/internal/app-globals"],"sourcesContent":["export const globalScripts = () => {};\n"],"names":[],"mappings":";;AAAY,MAAC,aAAa,GAAG,MAAM;;;;"}

package/dist/cjs/index-BE3kw7I4.js

@@ -0,0 +1,36 @@
+'use strict';
+
+function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+function uidGenerator() {
+    return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c => (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16));
+}
+/**
+ * Walks through the given DOM collection and runs the given callback.
+ * @param a A DOM collection.
+ * @param predicate The callback function.
+ * @param [thisObject] The context object for the given callback function.
+ */
+const forEach = (a, predicate, thisObject) => Array.prototype.forEach.call(a, predicate, thisObject);
+const setAttr = (node, name, value) => {
+    if (typeof value === 'string') {
+        !node.hasAttribute(name) && node.setAttribute(name, value);
+        return node;
+    }
+    if (value) {
+        !node.hasAttribute(name) && node.setAttribute(name, '');
+    }
+    else {
+        node.hasAttribute(name) && node.removeAttribute(name);
+    }
+    return node;
+};
+
+exports.forEach = forEach;
+exports.format = format;
+exports.setAttr = setAttr;
+exports.uidGenerator = uidGenerator;
+//# sourceMappingURL=index-BE3kw7I4.js.map
+
+//# sourceMappingURL=index-BE3kw7I4.js.map

package/dist/cjs/index-BE3kw7I4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-BE3kw7I4.js","sources":["src/utils/utils.ts"],"sourcesContent":["export function format(first?: string, middle?: string, last?: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport function uidGenerator() {\n  return \"10000000-1000-4000-8000-100000000000\".replace(/[018]/g, c =>\n    (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)\n  );\n}\n\n/**\n * Walks through the given DOM collection and runs the given callback.\n * @param a A DOM collection.\n * @param predicate The callback function.\n * @param [thisObject] The context object for the given callback function.\n */\nexport const forEach = (\n  a: NodeListOf<Node> | HTMLCollectionOf<Element>,\n  predicate: (search: Element, index?: number) => void,\n  thisObject?: any\n) => Array.prototype.forEach.call(a, predicate, thisObject);\n\n/**\n * Debounce the current function for some delay.\n * @param func The delayed function.\n * @param [delay = 500] The time to function delay call.\n */\nexport const debounce = (func: Function, delay: number = 500) => {\n  let timeoutId: ReturnType<typeof setTimeout>;\n  return function (...args: any[]) {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() => {\n      func.apply(this, args);\n    }, delay);\n  };\n};\n\nexport const checkTag = <T extends Element, G = T>(element: T, tag: string) => {\n  if (element?.tagName !== tag) return undefined;\n  return element as unknown as G;\n};\n\nexport const setAttr = (node: Element, name: string, value: string | boolean) => {\n  if (typeof value === 'string') {\n    !node.hasAttribute(name) && node.setAttribute(name, value);\n    return node;\n  }\n\n  if (value) {\n    !node.hasAttribute(name) && node.setAttribute(name, '');\n  } else {\n    node.hasAttribute(name) && node.removeAttribute(name);\n  }\n\n  return node;\n};\n"],"names":[],"mappings":";;SAAgB,MAAM,CAAC,KAAc,EAAE,MAAe,EAAE,IAAa,EAAA;AACnE,IAAA,OAAO,CAAC,KAAK,IAAI,EAAE,KAAK,MAAM,GAAG,CAAI,CAAA,EAAA,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,IAAI,GAAG,CAAI,CAAA,EAAA,IAAI,EAAE,GAAG,EAAE,CAAC;AAChF;SAEgB,YAAY,GAAA;AAC1B,IAAA,OAAO,sCAAsC,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,IAC/D,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,eAAe,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,CAChF;AACH;AAEA;;;;;AAKG;AACU,MAAA,OAAO,GAAG,CACrB,CAA+C,EAC/C,SAAoD,EACpD,UAAgB,KACb,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,SAAS,EAAE,UAAU;AAsB7C,MAAA,OAAO,GAAG,CAAC,IAAa,EAAE,IAAY,EAAE,KAAuB,KAAI;AAC9E,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC7B,QAAA,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC;AAC1D,QAAA,OAAO,IAAI;;IAGb,IAAI,KAAK,EAAE;AACT,QAAA,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC;;SAClD;AACL,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;;AAGvD,IAAA,OAAO,IAAI;AACb;;;;;;;"}