xv-webcomponents 0.1.9 → 0.1.10

package/README.md

@@ -1,4 +1,4 @@
-# @xv/webcomponents-base
+# @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.
@@ -18,7 +18,7 @@ This repository contains Web Components built with Stencil.js to provide a modul
 ## Folder Structure
 
 ```
-xv-webcomponents-base/
+xv-webcomponents/
 │── src/
 │   ├── components/       # Web Component source files
 │   │   ├── button/

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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,15 @@
+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

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

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

@@ -1,6 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class XvButton {
-    el: HTMLElement;
     /** Button label */
     label: string;
     /** Variant */
@@ -9,9 +8,7 @@ export declare class XvButton {
     disabled: boolean;
     /** Emits when the button is clicked */
     buttonClick: EventEmitter<void>;
-    private applyGlobalStyles;
     /** Handle click only if not disabled */
     private handleClick;
-    componentWillLoad(): void;
     render(): any;
 }

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

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

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

@@ -0,0 +1,9 @@
+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

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

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

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

@@ -0,0 +1,11 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XvTag {
+    size: 'sm' | 'md' | 'lg';
+    color: string;
+    bg: string;
+    disabled: boolean;
+    closeable: boolean;
+    closeClick: EventEmitter<PointerEvent>;
+    closeHandler(e: PointerEvent): void;
+    render(): any;
+}

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

@@ -0,0 +1,11 @@
+export declare class XvTooltip {
+    /** Message what will be shown for tooltip **/
+    message: string;
+    /**
+     * 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';
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -6,6 +6,23 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 export namespace Components {
+    interface XvAccordion {
+        "multiple": boolean;
+        "toggleItem": (value: string) => Promise<{ opened: Set<string>; id: string; }>;
+        "value": string;
+        "xvId": string;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "xv-id"?: string;
+    }
+    interface XvAccordionItem {
+        "disabled": boolean;
+        "label": string;
+        "value": string;
+    }
+    interface XvBreadcrumbs {
+    }
     interface XvButtonV2 {
         /**
           * Disabled state
@@ -20,14 +37,103 @@ export namespace Components {
          */
         "variant": 'accent' | 'primary' | 'secondary' | 'tertiary' | 'ghost';
     }
+    interface XvCard {
+        "body": string;
+        "footer": string;
+        "header": string;
+        "media": string;
+        "variant": 'horizontal' | 'vertical';
+    }
     interface XvCheckboxV2 {
     }
+    interface XvLink {
+        "disabled": boolean;
+        "href": string;
+        "size": 'sm' | 'md' | 'lg';
+        "target": '_self' | '_blank' | '_parent' | '_top';
+        "variant": 'standalone' | 'inline';
+    }
+    interface XvProgressIndicator {
+        "progress": number;
+    }
+    interface XvProgressIndicatorItem {
+        "done": boolean;
+    }
+    interface XvTag {
+        "bg": string;
+        "closeable": boolean;
+        "color": string;
+        "disabled": boolean;
+        "size": 'sm' | 'md' | 'lg';
+    }
+    interface XvTooltip {
+        /**
+          * Message what will be shown for tooltip *
+         */
+        "message": string;
+        /**
+          * 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';
+    }
+}
+export interface XvAccordionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXvAccordionElement;
+}
+export interface XvAccordionItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXvAccordionItemElement;
 }
 export interface XvButtonV2CustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXvButtonV2Element;
 }
+export interface XvTagCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXvTagElement;
+}
 declare global {
+    interface HTMLXvAccordionElementEventMap {
+        "accordionChange": { opened: Set<string>, id: string };
+    }
+    interface HTMLXvAccordionElement extends Components.XvAccordion, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXvAccordionElementEventMap>(type: K, listener: (this: HTMLXvAccordionElement, ev: XvAccordionCustomEvent<HTMLXvAccordionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXvAccordionElementEventMap>(type: K, listener: (this: HTMLXvAccordionElement, ev: XvAccordionCustomEvent<HTMLXvAccordionElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXvAccordionElement: {
+        prototype: HTMLXvAccordionElement;
+        new (): HTMLXvAccordionElement;
+    };
+    interface HTMLXvAccordionItemElementEventMap {
+        "itemToggle": any;
+    }
+    interface HTMLXvAccordionItemElement extends Components.XvAccordionItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXvAccordionItemElementEventMap>(type: K, listener: (this: HTMLXvAccordionItemElement, ev: XvAccordionItemCustomEvent<HTMLXvAccordionItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXvAccordionItemElementEventMap>(type: K, listener: (this: HTMLXvAccordionItemElement, ev: XvAccordionItemCustomEvent<HTMLXvAccordionItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXvAccordionItemElement: {
+        prototype: HTMLXvAccordionItemElement;
+        new (): HTMLXvAccordionItemElement;
+    };
+    interface HTMLXvBreadcrumbsElement extends Components.XvBreadcrumbs, HTMLStencilElement {
+    }
+    var HTMLXvBreadcrumbsElement: {
+        prototype: HTMLXvBreadcrumbsElement;
+        new (): HTMLXvBreadcrumbsElement;
+    };
     interface HTMLXvButtonV2ElementEventMap {
         "buttonClick": void;
     }
@@ -45,18 +151,92 @@ declare global {
         prototype: HTMLXvButtonV2Element;
         new (): HTMLXvButtonV2Element;
     };
+    interface HTMLXvCardElement extends Components.XvCard, HTMLStencilElement {
+    }
+    var HTMLXvCardElement: {
+        prototype: HTMLXvCardElement;
+        new (): HTMLXvCardElement;
+    };
     interface HTMLXvCheckboxV2Element extends Components.XvCheckboxV2, HTMLStencilElement {
     }
     var HTMLXvCheckboxV2Element: {
         prototype: HTMLXvCheckboxV2Element;
         new (): HTMLXvCheckboxV2Element;
     };
+    interface HTMLXvLinkElement extends Components.XvLink, HTMLStencilElement {
+    }
+    var HTMLXvLinkElement: {
+        prototype: HTMLXvLinkElement;
+        new (): HTMLXvLinkElement;
+    };
+    interface HTMLXvProgressIndicatorElement extends Components.XvProgressIndicator, HTMLStencilElement {
+    }
+    var HTMLXvProgressIndicatorElement: {
+        prototype: HTMLXvProgressIndicatorElement;
+        new (): HTMLXvProgressIndicatorElement;
+    };
+    interface HTMLXvProgressIndicatorItemElement extends Components.XvProgressIndicatorItem, HTMLStencilElement {
+    }
+    var HTMLXvProgressIndicatorItemElement: {
+        prototype: HTMLXvProgressIndicatorItemElement;
+        new (): HTMLXvProgressIndicatorItemElement;
+    };
+    interface HTMLXvTagElementEventMap {
+        "closeClick": PointerEvent;
+    }
+    interface HTMLXvTagElement extends Components.XvTag, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXvTagElementEventMap>(type: K, listener: (this: HTMLXvTagElement, ev: XvTagCustomEvent<HTMLXvTagElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXvTagElementEventMap>(type: K, listener: (this: HTMLXvTagElement, ev: XvTagCustomEvent<HTMLXvTagElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXvTagElement: {
+        prototype: HTMLXvTagElement;
+        new (): HTMLXvTagElement;
+    };
+    interface HTMLXvTooltipElement extends Components.XvTooltip, HTMLStencilElement {
+    }
+    var HTMLXvTooltipElement: {
+        prototype: HTMLXvTooltipElement;
+        new (): HTMLXvTooltipElement;
+    };
     interface HTMLElementTagNameMap {
+        "xv-accordion": HTMLXvAccordionElement;
+        "xv-accordion-item": HTMLXvAccordionItemElement;
+        "xv-breadcrumbs": HTMLXvBreadcrumbsElement;
         "xv-button-v2": HTMLXvButtonV2Element;
+        "xv-card": HTMLXvCardElement;
         "xv-checkbox-v2": HTMLXvCheckboxV2Element;
+        "xv-link": HTMLXvLinkElement;
+        "xv-progress-indicator": HTMLXvProgressIndicatorElement;
+        "xv-progress-indicator-item": HTMLXvProgressIndicatorItemElement;
+        "xv-tag": HTMLXvTagElement;
+        "xv-tooltip": HTMLXvTooltipElement;
     }
 }
 declare namespace LocalJSX {
+    interface XvAccordion {
+        "multiple"?: boolean;
+        "onAccordionChange"?: (event: XvAccordionCustomEvent<{ opened: Set<string>, id: string }>) => void;
+        "value"?: string;
+        "xvId"?: string;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "xv-id"?: string;
+    }
+    interface XvAccordionItem {
+        "disabled"?: boolean;
+        "label"?: string;
+        "onItemToggle"?: (event: XvAccordionItemCustomEvent<any>) => void;
+        "value"?: string;
+    }
+    interface XvBreadcrumbs {
+    }
     interface XvButtonV2 {
         /**
           * Disabled state
@@ -75,19 +255,75 @@ declare namespace LocalJSX {
          */
         "variant"?: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'ghost';
     }
+    interface XvCard {
+        "body"?: string;
+        "footer"?: string;
+        "header"?: string;
+        "media"?: string;
+        "variant"?: 'horizontal' | 'vertical';
+    }
     interface XvCheckboxV2 {
     }
+    interface XvLink {
+        "disabled"?: boolean;
+        "href"?: string;
+        "size"?: 'sm' | 'md' | 'lg';
+        "target"?: '_self' | '_blank' | '_parent' | '_top';
+        "variant"?: 'standalone' | 'inline';
+    }
+    interface XvProgressIndicator {
+        "progress"?: number;
+    }
+    interface XvProgressIndicatorItem {
+        "done"?: boolean;
+    }
+    interface XvTag {
+        "bg"?: string;
+        "closeable"?: boolean;
+        "color"?: string;
+        "disabled"?: boolean;
+        "onCloseClick"?: (event: XvTagCustomEvent<PointerEvent>) => void;
+        "size"?: 'sm' | 'md' | 'lg';
+    }
+    interface XvTooltip {
+        /**
+          * Message what will be shown for tooltip *
+         */
+        "message"?: string;
+        /**
+          * 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';
+    }
     interface IntrinsicElements {
+        "xv-accordion": XvAccordion;
+        "xv-accordion-item": XvAccordionItem;
+        "xv-breadcrumbs": XvBreadcrumbs;
         "xv-button-v2": XvButtonV2;
+        "xv-card": XvCard;
         "xv-checkbox-v2": XvCheckboxV2;
+        "xv-link": XvLink;
+        "xv-progress-indicator": XvProgressIndicator;
+        "xv-progress-indicator-item": XvProgressIndicatorItem;
+        "xv-tag": XvTag;
+        "xv-tooltip": XvTooltip;
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "xv-accordion": LocalJSX.XvAccordion & JSXBase.HTMLAttributes<HTMLXvAccordionElement>;
+            "xv-accordion-item": LocalJSX.XvAccordionItem & JSXBase.HTMLAttributes<HTMLXvAccordionItemElement>;
+            "xv-breadcrumbs": LocalJSX.XvBreadcrumbs & JSXBase.HTMLAttributes<HTMLXvBreadcrumbsElement>;
             "xv-button-v2": LocalJSX.XvButtonV2 & JSXBase.HTMLAttributes<HTMLXvButtonV2Element>;
+            "xv-card": LocalJSX.XvCard & JSXBase.HTMLAttributes<HTMLXvCardElement>;
             "xv-checkbox-v2": LocalJSX.XvCheckboxV2 & JSXBase.HTMLAttributes<HTMLXvCheckboxV2Element>;
+            "xv-link": LocalJSX.XvLink & JSXBase.HTMLAttributes<HTMLXvLinkElement>;
+            "xv-progress-indicator": LocalJSX.XvProgressIndicator & JSXBase.HTMLAttributes<HTMLXvProgressIndicatorElement>;
+            "xv-progress-indicator-item": LocalJSX.XvProgressIndicatorItem & JSXBase.HTMLAttributes<HTMLXvProgressIndicatorItemElement>;
+            "xv-tag": LocalJSX.XvTag & JSXBase.HTMLAttributes<HTMLXvTagElement>;
+            "xv-tooltip": LocalJSX.XvTooltip & JSXBase.HTMLAttributes<HTMLXvTooltipElement>;
         }
     }
 }

package/dist/types/utils/utils.d.ts

@@ -1 +1,2 @@
 export declare function format(first?: string, middle?: string, last?: string): string;
+export declare function uidGenerator(): string;