atomicuilibrary 0.0.1

package/dist/collection/components/badge/badge.js

@@ -0,0 +1,723 @@
+import { h, Host } from "@stencil/core";
+export class Badge {
+    /**
+     * Content/number to display in badge
+     */
+    value;
+    /**
+     * Maximum value to display before showing "+"
+     */
+    max = 99;
+    /**
+     * Color variant
+     */
+    color = 'danger';
+    /**
+     * Badge size
+     */
+    size = 'md';
+    /**
+     * Show as dot instead of number
+     */
+    dot = false;
+    /**
+     * Position of the badge
+     */
+    position = 'top-right';
+    /**
+     * Variant style
+     */
+    variant = 'standard';
+    /**
+     * Whether to show badge if value is zero
+     */
+    showZero = false;
+    /**
+     * Animation type
+     */
+    animation = 'none';
+    /**
+     * Horizontal offset from position
+     */
+    offsetX = 0;
+    /**
+     * Vertical offset from position
+     */
+    offsetY = 0;
+    /**
+     * Icon to display
+     */
+    icon;
+    /**
+     * Icon position
+     */
+    iconPosition = 'left';
+    /**
+     * Library for the icon (e.g., 'se', 'fontawesome', 'lucide', etc.)
+     */
+    iconLibrary = 'default';
+    /**
+     * Gradient variant (e.g., 'blue-purple', 'green-teal', 'orange-red')
+     */
+    gradient;
+    /**
+     * Custom background color
+     */
+    customColor;
+    /**
+     * Custom text color
+     */
+    customTextColor;
+    /**
+     * Make badge interactive/clickable
+     */
+    interactive = false;
+    /**
+     * Add close button
+     */
+    closeable = false;
+    /**
+     * Add glow effect
+     */
+    glow = false;
+    /**
+     * Badge shape
+     */
+    shape = 'default';
+    /**
+     * Use inline positioning instead of absolute anchors
+     */
+    inline = false;
+    /**
+     * High-Fidelity: RTL support
+     */
+    rtl = false;
+    isVisible = true;
+    /**
+     * Fired when badge is clicked (interactive mode)
+     */
+    badgeClick;
+    /**
+     * Fired when badge is closed
+     */
+    badgeClose;
+    handleClick = (e) => {
+        if (this.interactive) {
+            e.stopPropagation();
+            this.badgeClick.emit();
+        }
+    };
+    handleClose = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        // Immediately hide the badge
+        this.isVisible = false;
+        // Emit the close event
+        this.badgeClose.emit();
+    };
+    getDisplayValue() {
+        if (this.dot)
+            return '';
+        if (this.value === undefined || this.value === null)
+            return '';
+        const numValue = typeof this.value === 'number' ? this.value : parseInt(this.value);
+        if (!isNaN(numValue)) {
+            if (numValue === 0 && !this.showZero)
+                return '';
+            return numValue > (this.max ?? 99) ? `${this.max ?? 99}+` : numValue.toString();
+        }
+        return this.value.toString();
+    }
+    render() {
+        if (!this.isVisible)
+            return null;
+        const displayValue = this.getDisplayValue();
+        const shouldShow = this.dot || displayValue !== '' || this.icon;
+        const displayValueStr = displayValue.toString();
+        const isSingleChar = displayValueStr.length === 1 && !this.icon;
+        const classes = [
+            'badge',
+            `badge-${this.color}`,
+            `badge-${this.size}`,
+            `badge-${this.position}`,
+            `badge-${this.variant}`,
+            this.dot ? 'badge-dot' : '',
+            (isSingleChar && !this.closeable) ? 'badge-single' : 'badge-pill',
+            this.animation !== 'none' ? `badge-${this.animation}` : '',
+            this.interactive ? 'badge-interactive' : '',
+            this.glow ? 'badge-glow' : '',
+            this.gradient ? `badge-gradient-${this.gradient}` : '',
+            this.shape !== 'default' ? `badge-shape-${this.shape}` : '',
+            this.inline ? 'badge-inline' : '',
+            this.closeable ? 'badge-closable' : '',
+        ].filter(Boolean).join(' ');
+        const style = {};
+        if (this.offsetX)
+            style['--badge-offset-x'] = `${this.offsetX}px`;
+        if (this.offsetY)
+            style['--badge-offset-y'] = `${this.offsetY}px`;
+        if (this.customColor)
+            style['background-color'] = this.customColor;
+        if (this.customTextColor)
+            style['color'] = this.customTextColor;
+        return (h(Host, { dir: this.rtl ? 'rtl' : undefined }, h("div", { class: "badge-wrapper" }, h("slot", null), shouldShow && (h("span", { class: classes, style: style, onClick: this.handleClick }, this.icon && this.iconPosition === 'left' && !this.dot && (h("span", { class: "badge-icon" }, h("ui-icon", { name: this.icon, library: this.iconLibrary, size: "1.1em" }))), h("slot", { name: "badge-content" }, !this.dot && displayValue), this.icon && this.iconPosition === 'right' && !this.dot && (h("span", { class: "badge-icon" }, h("ui-icon", { name: this.icon, library: this.iconLibrary, size: "1.1em" }))), this.closeable && (h("ui-button", { variant: "ghost", class: "badge-close", onClick: this.handleClose, ariaLabel: "Close badge", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" })))))));
+    }
+    static get is() { return "ui-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["badge.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Content/number to display in badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum value to display before showing \"+\""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "99"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StatusColor",
+                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "references": {
+                        "StatusColor": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::StatusColor",
+                            "referenceLocation": "StatusColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'danger'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComponentSize",
+                    "resolved": "\"default\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\" | \"xxxl\" | \"xxxs\"",
+                    "references": {
+                        "ComponentSize": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::ComponentSize",
+                            "referenceLocation": "ComponentSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "dot": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show as dot instead of number"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dot",
+                "defaultValue": "false"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FourCornerPosition",
+                    "resolved": "\"bottom-left\" | \"bottom-right\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "FourCornerPosition": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::FourCornerPosition",
+                            "referenceLocation": "FourCornerPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'top-right'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComponentVariant",
+                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
+                    "references": {
+                        "ComponentVariant": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::ComponentVariant",
+                            "referenceLocation": "ComponentVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'standard'"
+            },
+            "showZero": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show badge if value is zero"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-zero",
+                "defaultValue": "false"
+            },
+            "animation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComponentAnimation",
+                    "resolved": "\"bounce\" | \"expand\" | \"fade\" | \"fade-down\" | \"fade-in\" | \"fade-in-out\" | \"fade-left\" | \"fade-out\" | \"fade-right\" | \"fade-up\" | \"flip\" | \"flip-x\" | \"flip-y\" | \"float\" | \"none\" | \"pulse\" | \"ripple\" | \"rotate\" | \"scale\" | \"shake\" | \"shimmer\" | \"slide\" | \"slide-down\" | \"slide-in\" | \"slide-in-out\" | \"slide-left\" | \"slide-left-right\" | \"slide-out\" | \"slide-right\" | \"slide-up\" | \"slide-up-down\" | \"spin\" | \"spring\" | \"swing\" | \"wave\" | \"wobble\" | \"zoom\" | \"zoom-in\" | \"zoom-out\"",
+                    "references": {
+                        "ComponentAnimation": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::AnimationType",
+                            "referenceLocation": "ComponentAnimation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animation",
+                "defaultValue": "'none'"
+            },
+            "offsetX": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Horizontal offset from position"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "offset-x",
+                "defaultValue": "0"
+            },
+            "offsetY": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Vertical offset from position"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "offset-y",
+                "defaultValue": "0"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon to display"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LeftRight",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {
+                        "LeftRight": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::LeftRight",
+                            "referenceLocation": "LeftRight"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon position"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-position",
+                "defaultValue": "'left'"
+            },
+            "iconLibrary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconLibrary",
+                    "resolved": "\"bootstrap\" | \"default\" | \"emoji\" | \"fontawesome\" | \"google\" | \"iconoir\" | \"icons8\" | \"ionicons\" | \"lucide\" | \"remixicon\" | \"se\"",
+                    "references": {
+                        "IconLibrary": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::IconLibrary",
+                            "referenceLocation": "IconLibrary"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Library for the icon (e.g., 'se', 'fontawesome', 'lucide', etc.)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-library",
+                "defaultValue": "'default'"
+            },
+            "gradient": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Gradient variant (e.g., 'blue-purple', 'green-teal', 'orange-red')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gradient"
+            },
+            "customColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom background color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-color"
+            },
+            "customTextColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom text color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-text-color"
+            },
+            "interactive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Make badge interactive/clickable"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "interactive",
+                "defaultValue": "false"
+            },
+            "closeable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Add close button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closeable",
+                "defaultValue": "false"
+            },
+            "glow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Add glow effect"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "glow",
+                "defaultValue": "false"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'circle' | 'square'",
+                    "resolved": "\"circle\" | \"default\" | \"square\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge shape"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'default'"
+            },
+            "inline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use inline positioning instead of absolute anchors"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inline",
+                "defaultValue": "false"
+            },
+            "rtl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "High-Fidelity: RTL support"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rtl",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "badgeClick",
+                "name": "badgeClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when badge is clicked (interactive mode)"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "badgeClose",
+                "name": "badgeClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when badge is closed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}