atomicuilibrary 0.0.1

package/dist/collection/components/horizontal-nav/horizontal-nav.js

@@ -0,0 +1,375 @@
+import { h } from "@stencil/core";
+export class HorizontalNav {
+    /**
+     * Navigation items
+     */
+    items = [];
+    /**
+     * Active item ID
+     */
+    activeId;
+    /**
+     * Variant style
+     */
+    variant = 'default';
+    /**
+     * Size of navigation items
+     */
+    size = 'md';
+    /**
+     * Alignment of items
+     */
+    align = 'start';
+    /**
+     * Enable scrolling for overflow items
+     */
+    scrollable = false;
+    /**
+     * Show divider between items
+     */
+    showDivider = false;
+    /**
+     * Full width items
+     */
+    fullWidth = false;
+    /**
+     * Display format: 'buttons' (default) or 'list'
+     */
+    displayAs = 'buttons';
+    /**
+     * Default library for icons
+     */
+    iconLibrary = 'default';
+    /**
+     * Event emitted when a nav item is clicked
+     */
+    navItemClick;
+    scrollLeft = 0;
+    canScrollLeft = false;
+    canScrollRight = false;
+    navRef;
+    parseItems() {
+        if (typeof this.items === 'string') {
+            try {
+                return JSON.parse(this.items);
+            }
+            catch (e) {
+                console.error('Failed to parse items JSON:', e);
+                return [];
+            }
+        }
+        return this.items;
+    }
+    handleItemClick = (item, event) => {
+        if (item.disabled) {
+            event.preventDefault();
+            return;
+        }
+        if (!item.href) {
+            event.preventDefault();
+        }
+        this.activeId = item.id;
+        this.navItemClick.emit(item);
+    };
+    handleScroll = () => {
+        if (!this.navRef)
+            return;
+        const { scrollLeft, scrollWidth, clientWidth } = this.navRef;
+        this.scrollLeft = scrollLeft;
+        this.canScrollLeft = scrollLeft > 0;
+        this.canScrollRight = scrollLeft < scrollWidth - clientWidth - 1;
+    };
+    scrollToDirection = (direction) => {
+        if (!this.navRef)
+            return;
+        const scrollAmount = 200;
+        const newScrollLeft = direction === 'left'
+            ? this.navRef.scrollLeft - scrollAmount
+            : this.navRef.scrollLeft + scrollAmount;
+        this.navRef.scrollTo({ left: newScrollLeft, behavior: 'smooth' });
+    };
+    componentDidLoad() {
+        if (this.scrollable && this.navRef) {
+            this.handleScroll();
+        }
+    }
+    render() {
+        const items = this.parseItems();
+        const containerClasses = {
+            'horizontal-nav-container': true,
+            'scrollable': this.scrollable,
+        };
+        const navClasses = {
+            'horizontal-nav': true,
+            [`variant-${this.variant}`]: true,
+            [`size-${this.size}`]: true,
+            [`align-${this.align}`]: true,
+            'full-width': this.fullWidth,
+            'with-divider': this.showDivider,
+            [`display-${this.displayAs}`]: true,
+        };
+        return (h("div", { key: 'fbcf314495c91cb99bc90db33029196edfdb63a2', class: containerClasses }, this.scrollable && this.canScrollLeft && (h("button", { key: 'f8de2c214e9d6f5b2a98c8f15dd11d21590e21bc', class: "scroll-button left", onClick: () => this.scrollToDirection('left'), "aria-label": "Scroll left" }, h("svg", { key: 'f578cf8f8051944b9d172fb4d6b97e23e0534e1a', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { key: 'dc8225738c6d416bff540136ce13421bf92ab06d', points: "15 18 9 12 15 6" })))), h("nav", { key: '3296d5d35db2f5447bbf0081e4a2670e65b25046', class: navClasses, ref: (el) => (this.navRef = el), onScroll: this.handleScroll }, h("ul", { key: '66db7520e79ced35998900fb72abe09ac99b15c1', class: "nav-list" }, items.map((item) => this.renderItem(item)))), this.scrollable && this.canScrollRight && (h("button", { key: 'bdf0b40342ff2c07a541258a4cda3310dfa07c5e', class: "scroll-button right", onClick: () => this.scrollToDirection('right'), "aria-label": "Scroll right" }, h("svg", { key: '6cd30d589d60113d2e3cccda8d6c3f7914d23750', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { key: '02dcff53f897c9dff39369fc1b9c48cd06cb5365', points: "9 18 15 12 9 6" }))))));
+    }
+    renderItem(item) {
+        const isActive = item.active || item.id === this.activeId;
+        const itemClasses = {
+            'nav-item': true,
+            'active': isActive,
+            'disabled': item.disabled,
+        };
+        const content = (h("span", { class: "nav-item-content" }, item.icon && (h("span", { class: "nav-icon" }, h("ui-icon", { name: item.icon, library: item.iconLibrary || this.iconLibrary, size: "1.2em" }))), h("span", { class: "nav-label" }, item.label), item.badge && h("span", { class: "nav-badge" }, item.badge)));
+        return (h("li", { key: item.id, class: "nav-list-item" }, item.href && !item.disabled ? (h("a", { href: item.href, class: itemClasses, onClick: (e) => this.handleItemClick(item, e) }, content)) : (h("button", { class: itemClasses, disabled: item.disabled, onClick: (e) => this.handleItemClick(item, e) }, content))));
+    }
+    static get is() { return "ui-horizontal-nav"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["horizontal-nav.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["horizontal-nav.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HorizontalNavItem[] | string",
+                    "resolved": "HorizontalNavItem[] | string",
+                    "references": {
+                        "HorizontalNavItem": {
+                            "location": "local",
+                            "path": "P:/Repository/stenciljs/atomicUILibrary/src/components/horizontal-nav/horizontal-nav.tsx",
+                            "id": "src/components/horizontal-nav/horizontal-nav.tsx::HorizontalNavItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Navigation items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "[]"
+            },
+            "activeId": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active item ID"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-id"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'pills' | 'underline' | 'segmented'",
+                    "resolved": "\"default\" | \"pills\" | \"segmented\" | \"underline\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of navigation items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'end' | 'space-between'",
+                    "resolved": "\"center\" | \"end\" | \"space-between\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alignment of items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align",
+                "defaultValue": "'start'"
+            },
+            "scrollable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable scrolling for overflow items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scrollable",
+                "defaultValue": "false"
+            },
+            "showDivider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show divider between items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-divider",
+                "defaultValue": "false"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Full width items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "displayAs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'buttons' | 'list'",
+                    "resolved": "\"buttons\" | \"list\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display format: 'buttons' (default) or 'list'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "display-as",
+                "defaultValue": "'buttons'"
+            },
+            "iconLibrary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'se' | 'fontawesome' | 'icons8' | 'iconoir' | 'ionicons' | 'lucide' | 'bootstrap' | 'default'",
+                    "resolved": "\"bootstrap\" | \"default\" | \"fontawesome\" | \"iconoir\" | \"icons8\" | \"ionicons\" | \"lucide\" | \"se\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default library for icons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-library",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "scrollLeft": {},
+            "canScrollLeft": {},
+            "canScrollRight": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "navItemClick",
+                "name": "navItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a nav item is clicked"
+                },
+                "complexType": {
+                    "original": "HorizontalNavItem",
+                    "resolved": "HorizontalNavItem",
+                    "references": {
+                        "HorizontalNavItem": {
+                            "location": "local",
+                            "path": "P:/Repository/stenciljs/atomicUILibrary/src/components/horizontal-nav/horizontal-nav.tsx",
+                            "id": "src/components/horizontal-nav/horizontal-nav.tsx::HorizontalNavItem"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/icon/icon.css

@@ -0,0 +1,113 @@
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+.a11y-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+  line-height: 1;
+  vertical-align: middle;
+  color: inherit; /* Ensure currentColor resolves from the parent context */
+}
+
+/* Material Symbols - Direct Font Application */
+.material-symbols-outlined {
+  font-family: "Material Symbols Outlined" !important;
+  font-weight: normal;
+  font-style: normal;
+  font-size: 1em;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: "liga";
+}
+
+.icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  user-select: none;
+  width: 100%;
+  height: 100%;
+}
+
+.icon-container svg,
+.icon-container .lucide-wrapper svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.icon-container img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.icon-container i {
+  font-size: inherit;
+  color: inherit;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  height: 1em;
+}
+
+.emoji-icon {
+  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
+  font-style: normal;
+  font-size: inherit;
+  line-height: 1;
+  /* Reset any inherited colour so the native emoji palette shows through */
+  color: unset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+}
+
+.fa-spin {
+  animation: fa-spin 2s infinite linear;
+}
+
+@keyframes fa-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}