@liwe3/webcomponents 1.0.14 → 1.1.0

package/dist/ImageView.js

@@ -0,0 +1,209 @@
+class s extends HTMLElement {
+  constructor() {
+    super(), this._src = "", this._width = "100%", this._height = "auto", this._mode = "cover", this._position = "center", this._fx = "none", this._fxHover = "none", this._alt = "", this._isHovering = !1, this.attachShadow({ mode: "open" });
+    const t = document.createElement("style");
+    t.textContent = `
+            :host {
+                display: block;
+                overflow: hidden;
+                position: relative;
+            }
+
+            .container {
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+                position: relative;
+                display: flex;
+            }
+
+            img {
+                display: block;
+                transition: transform 0.5s ease, filter 0.5s ease;
+            }
+
+            /* Modes */
+            .mode-stretch img {
+                width: 100%;
+                height: 100%;
+                object-fit: fill;
+            }
+
+            .mode-cover img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+
+            .mode-contain img {
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+            }
+
+            .mode-1-1 img {
+                max-width: none;
+                max-height: none;
+                /* Default to auto, controlled by position */
+            }
+
+            /* Positions for 1:1 and others if applicable */
+            .pos-center { justify-content: center; align-items: center; }
+            .pos-top { justify-content: center; align-items: flex-start; }
+            .pos-bottom { justify-content: center; align-items: flex-end; }
+            .pos-left { justify-content: flex-start; align-items: center; }
+            .pos-right { justify-content: flex-end; align-items: center; }
+            .pos-top-left { justify-content: flex-start; align-items: flex-start; }
+            .pos-top-right { justify-content: flex-end; align-items: flex-start; }
+            .pos-bottom-left { justify-content: flex-start; align-items: flex-end; }
+            .pos-bottom-right { justify-content: flex-end; align-items: flex-end; }
+
+            /* FX */
+            .fx-bokeh img {
+                filter: blur(3px);
+            }
+
+            @keyframes pan-left {
+                0% { transform: scale(1.2) translateX(0); }
+                100% { transform: scale(1.2) translateX(-10%); }
+            }
+
+            @keyframes pan-right {
+                0% { transform: scale(1.2) translateX(0); }
+                100% { transform: scale(1.2) translateX(10%); }
+            }
+
+            @keyframes zoom-in {
+                0% { transform: scale(1); }
+                100% { transform: scale(1.2); }
+            }
+
+            @keyframes zoom-out {
+                0% { transform: scale(1.2); }
+                100% { transform: scale(1); }
+            }
+
+            .fx-pan-left img {
+                animation: pan-left 10s linear infinite alternate;
+            }
+
+            .fx-pan-right img {
+                animation: pan-right 10s linear infinite alternate;
+            }
+
+            .fx-zoom-in img {
+                animation: zoom-in 10s linear infinite alternate;
+            }
+
+            .fx-zoom-out img {
+                animation: zoom-out 10s linear infinite alternate;
+            }
+        `, this.container = document.createElement("div"), this.container.classList.add("container"), this.img = document.createElement("img"), this.container.appendChild(this.img), this.shadowRoot.appendChild(t), this.shadowRoot.appendChild(this.container), this.addEventListener("mouseenter", this._handleMouseEnter.bind(this)), this.addEventListener("mouseleave", this._handleMouseLeave.bind(this));
+  }
+  _handleMouseEnter() {
+    this._fxHover !== "none" && (this._isHovering = !0, this.updateClasses());
+  }
+  _handleMouseLeave() {
+    this._fxHover !== "none" && (this._isHovering = !1, this.updateClasses());
+  }
+  static get observedAttributes() {
+    return ["src", "width", "height", "mode", "position", "fx", "fx-hover", "alt"];
+  }
+  attributeChangedCallback(t, i, e) {
+    if (i !== e)
+      switch (t) {
+        case "src":
+          this._src = e || "", this.render();
+          break;
+        case "width":
+          this._width = e || "100%", this.updateDimensions();
+          break;
+        case "height":
+          this._height = e || "auto", this.updateDimensions();
+          break;
+        case "mode":
+          this._mode = e || "cover", this.updateClasses();
+          break;
+        case "position":
+          this._position = e || "center", this.updateClasses();
+          break;
+        case "fx":
+          this._fx = e || "none", this.updateClasses();
+          break;
+        case "fx-hover":
+          this._fxHover = e || "none", this.updateClasses();
+          break;
+        case "alt":
+          this._alt = e || "", this.render();
+          break;
+      }
+  }
+  connectedCallback() {
+    this.updateDimensions(), this.updateClasses(), this.render();
+  }
+  updateDimensions() {
+    this.style.width = this._width, this.style.height = this._height;
+  }
+  updateClasses() {
+    this.container.className = "container", this.container.classList.add(`mode-${this._mode}`), this.container.classList.add(`pos-${this._position}`);
+    const t = this._isHovering && this._fxHover !== "none" ? this._fxHover : this._fx;
+    this.container.classList.add(`fx-${t}`);
+  }
+  render() {
+    this.img.getAttribute("src") !== this._src && (this._src ? this.img.setAttribute("src", this._src) : this.img.removeAttribute("src")), this.img.getAttribute("alt") !== this._alt && (this._alt ? this.img.setAttribute("alt", this._alt) : this.img.removeAttribute("alt"));
+  }
+  // Public API
+  get src() {
+    return this._src;
+  }
+  set src(t) {
+    this.setAttribute("src", t);
+  }
+  get width() {
+    return this._width;
+  }
+  set width(t) {
+    this.setAttribute("width", t);
+  }
+  get height() {
+    return this._height;
+  }
+  set height(t) {
+    this.setAttribute("height", t);
+  }
+  get mode() {
+    return this._mode;
+  }
+  set mode(t) {
+    this.setAttribute("mode", t);
+  }
+  get position() {
+    return this._position;
+  }
+  set position(t) {
+    this.setAttribute("position", t);
+  }
+  get fx() {
+    return this._fx;
+  }
+  set fx(t) {
+    this.setAttribute("fx", t);
+  }
+  get fxHover() {
+    return this._fxHover;
+  }
+  set fxHover(t) {
+    this.setAttribute("fx-hover", t);
+  }
+  get alt() {
+    return this._alt;
+  }
+  set alt(t) {
+    this.setAttribute("alt", t);
+  }
+}
+customElements.define("liwe3-image-view", s);
+export {
+  s as ImageView
+};
+//# sourceMappingURL=ImageView.js.map

package/dist/ImageView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageView.js","sources":["../src/ImageView.ts"],"sourcesContent":["export type ImageMode = 'stretch' | '1:1' | 'cover' | 'contain';\nexport type ImagePosition = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\nexport type ImageFX = 'none' | 'bokeh' | 'pan-left' | 'pan-right' | 'zoom-in' | 'zoom-out';\n\nexport class ImageView extends HTMLElement {\n\tprivate _src: string = '';\n\tprivate _width: string = '100%';\n\tprivate _height: string = 'auto';\n\tprivate _mode: ImageMode = 'cover';\n\tprivate _position: ImagePosition = 'center';\n\tprivate _fx: ImageFX = 'none';\n\tprivate _fxHover: ImageFX = 'none';\n\tprivate _alt: string = '';\n\tprivate _isHovering: boolean = false;\n\n\tprivate container: HTMLDivElement;\n\tprivate img: HTMLImageElement;\n\n\tconstructor () {\n\t\tsuper();\n\t\tthis.attachShadow( { mode: 'open' } );\n\n\t\tconst style = document.createElement( 'style' );\n\t\tstyle.textContent = `\n            :host {\n                display: block;\n                overflow: hidden;\n                position: relative;\n            }\n\n            .container {\n                width: 100%;\n                height: 100%;\n                overflow: hidden;\n                position: relative;\n                display: flex;\n            }\n\n            img {\n                display: block;\n                transition: transform 0.5s ease, filter 0.5s ease;\n            }\n\n            /* Modes */\n            .mode-stretch img {\n                width: 100%;\n                height: 100%;\n                object-fit: fill;\n            }\n\n            .mode-cover img {\n                width: 100%;\n                height: 100%;\n                object-fit: cover;\n            }\n\n            .mode-contain img {\n                width: 100%;\n                height: 100%;\n                object-fit: contain;\n            }\n\n            .mode-1-1 img {\n                max-width: none;\n                max-height: none;\n                /* Default to auto, controlled by position */\n            }\n\n            /* Positions for 1:1 and others if applicable */\n            .pos-center { justify-content: center; align-items: center; }\n            .pos-top { justify-content: center; align-items: flex-start; }\n            .pos-bottom { justify-content: center; align-items: flex-end; }\n            .pos-left { justify-content: flex-start; align-items: center; }\n            .pos-right { justify-content: flex-end; align-items: center; }\n            .pos-top-left { justify-content: flex-start; align-items: flex-start; }\n            .pos-top-right { justify-content: flex-end; align-items: flex-start; }\n            .pos-bottom-left { justify-content: flex-start; align-items: flex-end; }\n            .pos-bottom-right { justify-content: flex-end; align-items: flex-end; }\n\n            /* FX */\n            .fx-bokeh img {\n                filter: blur(3px);\n            }\n\n            @keyframes pan-left {\n                0% { transform: scale(1.2) translateX(0); }\n                100% { transform: scale(1.2) translateX(-10%); }\n            }\n\n            @keyframes pan-right {\n                0% { transform: scale(1.2) translateX(0); }\n                100% { transform: scale(1.2) translateX(10%); }\n            }\n\n            @keyframes zoom-in {\n                0% { transform: scale(1); }\n                100% { transform: scale(1.2); }\n            }\n\n            @keyframes zoom-out {\n                0% { transform: scale(1.2); }\n                100% { transform: scale(1); }\n            }\n\n            .fx-pan-left img {\n                animation: pan-left 10s linear infinite alternate;\n            }\n\n            .fx-pan-right img {\n                animation: pan-right 10s linear infinite alternate;\n            }\n\n            .fx-zoom-in img {\n                animation: zoom-in 10s linear infinite alternate;\n            }\n\n            .fx-zoom-out img {\n                animation: zoom-out 10s linear infinite alternate;\n            }\n        `;\n\n\t\tthis.container = document.createElement( 'div' );\n\t\tthis.container.classList.add( 'container' );\n\n\t\tthis.img = document.createElement( 'img' );\n\n\t\tthis.container.appendChild( this.img );\n\t\tthis.shadowRoot!.appendChild( style );\n\t\tthis.shadowRoot!.appendChild( this.container );\n\n\t\t// Add hover listeners\n\t\tthis.addEventListener( 'mouseenter', this._handleMouseEnter.bind( this ) );\n\t\tthis.addEventListener( 'mouseleave', this._handleMouseLeave.bind( this ) );\n\t}\n\n\tprivate _handleMouseEnter () {\n\t\tif ( this._fxHover !== 'none' ) {\n\t\t\tthis._isHovering = true;\n\t\t\tthis.updateClasses();\n\t\t}\n\t}\n\n\tprivate _handleMouseLeave () {\n\t\tif ( this._fxHover !== 'none' ) {\n\t\t\tthis._isHovering = false;\n\t\t\tthis.updateClasses();\n\t\t}\n\t}\n\n\tstatic get observedAttributes () {\n\t\treturn [ 'src', 'width', 'height', 'mode', 'position', 'fx', 'fx-hover', 'alt' ];\n\t}\n\n\tattributeChangedCallback ( name: string, oldValue: string, newValue: string ) {\n\t\tif ( oldValue === newValue ) return;\n\n\t\tswitch ( name ) {\n\t\t\tcase 'src':\n\t\t\t\tthis._src = newValue || '';\n\t\t\t\tthis.render();\n\t\t\t\tbreak;\n\t\t\tcase 'width':\n\t\t\t\tthis._width = newValue || '100%';\n\t\t\t\tthis.updateDimensions();\n\t\t\t\tbreak;\n\t\t\tcase 'height':\n\t\t\t\tthis._height = newValue || 'auto';\n\t\t\t\tthis.updateDimensions();\n\t\t\t\tbreak;\n\t\t\tcase 'mode':\n\t\t\t\tthis._mode = ( newValue as ImageMode ) || 'cover';\n\t\t\t\tthis.updateClasses();\n\t\t\t\tbreak;\n\t\t\tcase 'position':\n\t\t\t\tthis._position = ( newValue as ImagePosition ) || 'center';\n\t\t\t\tthis.updateClasses();\n\t\t\t\tbreak;\n\t\t\tcase 'fx':\n\t\t\t\tthis._fx = ( newValue as ImageFX ) || 'none';\n\t\t\t\tthis.updateClasses();\n\t\t\t\tbreak;\n\t\t\tcase 'fx-hover':\n\t\t\t\tthis._fxHover = ( newValue as ImageFX ) || 'none';\n\t\t\t\tthis.updateClasses();\n\t\t\t\tbreak;\n\t\t\tcase 'alt':\n\t\t\t\tthis._alt = newValue || '';\n\t\t\t\tthis.render();\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\tconnectedCallback () {\n\t\tthis.updateDimensions();\n\t\tthis.updateClasses();\n\t\tthis.render();\n\t}\n\n\tprivate updateDimensions () {\n\t\tthis.style.width = this._width;\n\t\tthis.style.height = this._height;\n\t}\n\n\tprivate updateClasses () {\n\t\t// Reset classes\n\t\tthis.container.className = 'container';\n\n\t\t// Add mode class\n\t\tthis.container.classList.add( `mode-${ this._mode }` );\n\n\t\t// Add position class\n\t\tthis.container.classList.add( `pos-${ this._position }` );\n\n\t\t// Add FX class - use hover fx if hovering and defined, otherwise use regular fx\n\t\tconst activeFx = ( this._isHovering && this._fxHover !== 'none' ) ? this._fxHover : this._fx;\n\t\tthis.container.classList.add( `fx-${ activeFx }` );\n\t}\n\n\tprivate render () {\n\t\tconst currentSrc = this.img.getAttribute( 'src' );\n\t\tif ( currentSrc !== this._src ) {\n\t\t\tif ( this._src ) {\n\t\t\t\tthis.img.setAttribute( 'src', this._src );\n\t\t\t} else {\n\t\t\t\tthis.img.removeAttribute( 'src' );\n\t\t\t}\n\t\t}\n\n\t\tconst currentAlt = this.img.getAttribute( 'alt' );\n\t\tif ( currentAlt !== this._alt ) {\n\t\t\tif ( this._alt ) {\n\t\t\t\tthis.img.setAttribute( 'alt', this._alt );\n\t\t\t} else {\n\t\t\t\tthis.img.removeAttribute( 'alt' );\n\t\t\t}\n\t\t}\n\t}\n\n\t// Public API\n\tget src (): string { return this._src; }\n\tset src ( value: string ) { this.setAttribute( 'src', value ); }\n\n\tget width (): string { return this._width; }\n\tset width ( value: string ) { this.setAttribute( 'width', value ); }\n\n\tget height (): string { return this._height; }\n\tset height ( value: string ) { this.setAttribute( 'height', value ); }\n\n\tget mode (): ImageMode { return this._mode; }\n\tset mode ( value: ImageMode ) { this.setAttribute( 'mode', value ); }\n\n\tget position (): ImagePosition { return this._position; }\n\tset position ( value: ImagePosition ) { this.setAttribute( 'position', value ); }\n\n\tget fx (): ImageFX { return this._fx; }\n\tset fx ( value: ImageFX ) { this.setAttribute( 'fx', value ); }\n\n\tget fxHover (): ImageFX { return this._fxHover; }\n\tset fxHover ( value: ImageFX ) { this.setAttribute( 'fx-hover', value ); }\n\n\tget alt (): string { return this._alt; }\n\tset alt ( value: string ) { this.setAttribute( 'alt', value ); }\n}\n\ncustomElements.define( 'liwe3-image-view', ImageView );\n"],"names":["ImageView","style","name","oldValue","newValue","activeFx","value"],"mappings":"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"}

package/dist/PopoverMenu.d.ts

@@ -0,0 +1,103 @@
+/**
+ * PopoverMenu Web Component
+ * A customizable menu component using fixed positioning with support for nested submenus
+ */
+export type PopoverMenuItem = {
+    label: string;
+    enabled?: boolean;
+    items?: PopoverMenuItem[];
+    onclick?: () => void;
+};
+export type PopoverMenuConfig = {
+    label: string;
+    items: PopoverMenuItem[];
+};
+export declare class PopoverMenuElement extends HTMLElement {
+    shadowRoot: ShadowRoot;
+    private items;
+    private openPopovers;
+    private hoverTimeouts;
+    private initialized;
+    private globalClickHandler;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Set up global event listeners
+     */
+    private setupGlobalListeners;
+    /**
+     * Clean up global event listeners
+     */
+    private cleanupGlobalListeners;
+    /**
+     * Set menu items
+     */
+    setItems(items: PopoverMenuConfig[]): void;
+    /**
+     * Get current menu items
+     */
+    getItems(): PopoverMenuConfig[];
+    /**
+     * Add a new menu item
+     */
+    addMenuItem(item: PopoverMenuConfig, index?: number | null): void;
+    /**
+     * Remove a menu item
+     */
+    removeMenuItem(index: number): void;
+    /**
+     * Update a menu item
+     */
+    updateMenuItem(index: number, item: PopoverMenuConfig): void;
+    /**
+     * Render the menu component
+     */
+    private render;
+    /**
+     * Create a menu trigger button
+     */
+    private createMenuTrigger;
+    /**
+     * Create a popover if it doesn't exist
+     */
+    private createPopoverIfNeeded;
+    /**
+     * Populate a popover with menu items
+     */
+    private populatePopover;
+    /**
+     * Create a menu item element
+     */
+    private createMenuItem;
+    /**
+     * Show a submenu
+     */
+    private showSubmenu;
+    /**
+     * Close other submenus except the specified one and its ancestors
+     */
+    private closeOtherSubmenus;
+    /**
+     * Close all menus
+     */
+    private closeAllMenus;
+    /**
+     * Handle menu trigger click
+     */
+    private handleMenuTriggerClick;
+    /**
+     * Show the main menu
+     */
+    private showMainMenu;
+    /**
+     * Adjust popover position to handle overflow
+     */
+    private adjustPopoverPosition;
+}
+/**
+ * Conditionally defines the custom element if in a browser environment.
+ */
+declare const definePopoverMenu: (tagName?: string) => void;
+export { definePopoverMenu };
+//# sourceMappingURL=PopoverMenu.d.ts.map

package/dist/PopoverMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverMenu.d.ts","sourceRoot":"","sources":["../src/PopoverMenu.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,eAAe,EAAE,CAAC;CAC1B,CAAC;AAEF,qBAAa,kBAAmB,SAAQ,WAAW;IACzC,UAAU,EAAE,UAAU,CAAC;IAC/B,OAAO,CAAC,KAAK,CAA2B;IACxC,OAAO,CAAC,YAAY,CAAuC;IAC3D,OAAO,CAAC,aAAa,CAAkC;IACvD,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,kBAAkB,CAA8C;;IAOxE,iBAAiB,IAAK,IAAI;IAQ1B,oBAAoB,IAAK,IAAI;IAI7B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAU5B;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAO9B;;OAEG;IACH,QAAQ,CAAG,KAAK,EAAE,iBAAiB,EAAE,GAAI,IAAI;IAK7C;;OAEG;IACH,QAAQ,IAAK,iBAAiB,EAAE;IAIhC;;OAEG;IACH,WAAW,CAAG,IAAI,EAAE,iBAAiB,EAAE,KAAK,GAAE,MAAM,GAAG,IAAW,GAAI,IAAI;IAS1E;;OAEG;IACH,cAAc,CAAG,KAAK,EAAE,MAAM,GAAI,IAAI;IAOtC;;OAEG;IACH,cAAc,CAAG,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,iBAAiB,GAAI,IAAI;IAO/D;;OAEG;IACH,OAAO,CAAC,MAAM;IAiId;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAezB;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAqB7B;;OAEG;IACH,OAAO,CAAC,eAAe;IAevB;;OAEG;IACH,OAAO,CAAC,cAAc;IAsDtB;;OAEG;IACH,OAAO,CAAC,WAAW;IAmBnB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAqC1B;;OAEG;IACH,OAAO,CAAC,aAAa;IAarB;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAsB9B;;OAEG;IACH,OAAO,CAAC,YAAY;IAgBpB;;OAEG;IACH,OAAO,CAAC,qBAAqB;CA8F9B;AAED;;GAEG;AACH,QAAA,MAAM,iBAAiB,GAAK,gBAA8B,KAAI,IAI7D,CAAC;AAKF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/SmartSelect.d.ts

@@ -0,0 +1,99 @@
+/**
+ * SmartSelect Web Component
+ * A customizable select dropdown with search, multi-select, and keyboard navigation
+ */
+export type SelectOption = {
+    value: string;
+    label: string;
+};
+export declare class SmartSelectElement extends HTMLElement {
+    shadowRoot: ShadowRoot;
+    private isOpen;
+    private selectedOptions;
+    private filteredOptions;
+    private focusedIndex;
+    private searchValue;
+    private keyboardNavigating;
+    private keyboardTimer?;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get multiple(): boolean;
+    set multiple(value: boolean);
+    get searchable(): boolean;
+    set searchable(value: boolean);
+    get placeholder(): string;
+    set placeholder(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get value(): string | string[];
+    set value(val: string | string[]);
+    get options(): SelectOption[];
+    set options(opts: SelectOption[]);
+    /**
+     * Opens the dropdown
+     */
+    open(): void;
+    /**
+     * Closes the dropdown
+     */
+    close(): void;
+    /**
+     * Toggles the dropdown open/closed state
+     */
+    toggle(): void;
+    /**
+     * Selects an option by its value
+     */
+    selectOption(value: string): void;
+    /**
+     * Deselects an option by its value
+     */
+    deselectOption(value: string): void;
+    /**
+     * Returns an array of currently selected options
+     */
+    getSelectedOptions(): SelectOption[];
+    /**
+     * Sets the options for the select component
+     */
+    setOptions(options: SelectOption[]): void;
+    /**
+     * Handles search functionality
+     */
+    private handleSearch;
+    /**
+     * Updates the visual focus state without full re-render
+     */
+    private updateFocusedOption;
+    /**
+     * Scrolls the focused option into view
+     */
+    private scrollToFocusedOption;
+    /**
+     * Calculates the optimal dropdown position based on viewport constraints
+     */
+    private _calculateDropdownPosition;
+    /**
+     * Updates dropdown position using fixed positioning relative to viewport
+     */
+    private _updateDropdownPosition;
+    /**
+     * Handles keyboard navigation
+     */
+    private handleKeydown;
+    /**
+     * Binds all event listeners
+     */
+    private bindEvents;
+    /**
+     * Renders the component
+     */
+    private render;
+}
+/**
+ * Conditionally defines the custom element if in a browser environment.
+ */
+declare const defineSmartSelect: (tagName?: string) => void;
+export { defineSmartSelect };
+//# sourceMappingURL=SmartSelect.d.ts.map

package/dist/SmartSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmartSelect.d.ts","sourceRoot":"","sources":["../src/SmartSelect.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,kBAAmB,SAAQ,WAAW;IACzC,UAAU,EAAE,UAAU,CAAC;IAC/B,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,eAAe,CAAsB;IAC7C,OAAO,CAAC,eAAe,CAAsB;IAC7C,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,kBAAkB,CAAkB;IAC5C,OAAO,CAAC,aAAa,CAAC,CAAS;;IAe/B,MAAM,KAAK,kBAAkB,IAAK,MAAM,EAAE,CAEzC;IAED,wBAAwB,CAAG,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAI,IAAI;IASjG,IAAI,QAAQ,IAAK,OAAO,CAEvB;IAED,IAAI,QAAQ,CAAG,KAAK,EAAE,OAAO,EAM5B;IAED,IAAI,UAAU,IAAK,OAAO,CAEzB;IAED,IAAI,UAAU,CAAG,KAAK,EAAE,OAAO,EAM9B;IAED,IAAI,WAAW,IAAK,MAAM,CAEzB;IAED,IAAI,WAAW,CAAG,KAAK,EAAE,MAAM,EAE9B;IAED,IAAI,QAAQ,IAAK,OAAO,CAEvB;IAED,IAAI,QAAQ,CAAG,KAAK,EAAE,OAAO,EAM5B;IAED,IAAI,KAAK,IAAK,MAAM,GAAG,MAAM,EAAE,CAK9B;IAED,IAAI,KAAK,CAAG,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,EAQjC;IAED,IAAI,OAAO,IAAK,YAAY,EAAE,CAW7B;IAED,IAAI,OAAO,CAAG,IAAI,EAAE,YAAY,EAAE,EAEjC;IAED;;OAEG;IACH,IAAI,IAAK,IAAI;IAyBb;;OAEG;IACH,KAAK,IAAK,IAAI;IAuBd;;OAEG;IACH,MAAM,IAAK,IAAI;IAQf;;OAEG;IACH,YAAY,CAAG,KAAK,EAAE,MAAM,GAAI,IAAI;IAiBpC;;OAEG;IACH,cAAc,CAAG,KAAK,EAAE,MAAM,GAAI,IAAI;IAMtC;;OAEG;IACH,kBAAkB,IAAK,YAAY,EAAE;IAIrC;;OAEG;IACH,UAAU,CAAG,OAAO,EAAE,YAAY,EAAE,GAAI,IAAI;IAO5C;;OAEG;IACH,OAAO,CAAC,YAAY;IAUpB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAc3B;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAuB7B;;OAEG;IACH,OAAO,CAAC,0BAA0B;IA2ClC;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAgB/B;;OAEG;IACH,OAAO,CAAC,aAAa;IA0FrB;;OAEG;IACH,OAAO,CAAC,UAAU;IA4FlB;;OAEG;IACH,OAAO,CAAC,MAAM;CAwNf;AAED;;GAEG;AACH,QAAA,MAAM,iBAAiB,GAAK,UAAS,MAAuB,KAAI,IAI/D,CAAC;AAKF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/Toast.d.ts

@@ -0,0 +1,127 @@
+/**
+ * Toast Web Component
+ * A customizable toast notification system with multiple types, icons, buttons, and auto-dismiss
+ */
+export type ToastType = 'info' | 'warning' | 'error' | 'success';
+export type ToastPosition = 'TL' | 'T' | 'TR' | 'BL' | 'B' | 'BR';
+export type ToastButton = {
+    label: string;
+    onClick: () => void;
+};
+export type ToastConfig = {
+    title: string;
+    text: string;
+    type?: ToastType;
+    icon?: string;
+    buttons?: ToastButton[];
+    closable?: boolean;
+    duration?: number;
+    position?: ToastPosition;
+    onClose?: () => void;
+};
+export declare class ToastElement extends HTMLElement {
+    shadowRoot: ShadowRoot;
+    private config;
+    private autoCloseTimer?;
+    private remainingTime;
+    private pauseTime;
+    private progressBar?;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get title(): string;
+    set title(value: string);
+    get text(): string;
+    set text(value: string);
+    get type(): ToastType;
+    set type(value: ToastType);
+    get icon(): string | undefined;
+    set icon(value: string | undefined);
+    get closable(): boolean;
+    set closable(value: boolean);
+    get duration(): number;
+    set duration(value: number);
+    get buttons(): ToastButton[];
+    set buttons(value: ToastButton[]);
+    /**
+     * Shows the toast with the given configuration
+     */
+    show(config: ToastConfig): void;
+    /**
+     * Closes the toast
+     */
+    close(): void;
+    /**
+     * Starts the auto-close timer if duration is set
+     */
+    private startAutoCloseTimer;
+    /**
+     * Pauses the auto-close timer
+     */
+    private pauseAutoCloseTimer;
+    /**
+     * Resumes the auto-close timer
+     */
+    private resumeAutoCloseTimer;
+    /**
+     * Clears the auto-close timer
+     */
+    private clearAutoCloseTimer;
+    /**
+     * Starts the progress bar animation
+     */
+    private startProgressBarAnimation;
+    /**
+     * Pauses the progress bar animation
+     */
+    private pauseProgressBarAnimation;
+    /**
+     * Resumes the progress bar animation
+     */
+    private resumeProgressBarAnimation;
+    /**
+     * Gets the color scheme for the toast type
+     */
+    private getTypeColors;
+    /**
+     * Gets the default icon for the toast type
+     */
+    private getDefaultIcon;
+    /**
+     * Binds all event listeners
+     */
+    private bindEvents;
+    /**
+     * Renders the component
+     */
+    private render;
+}
+/**
+ * Conditionally defines the custom element if in a browser environment.
+ */
+declare const defineToast: (tagName?: string) => void;
+/**
+ * Shows a toast notification with the given configuration.
+ * This is the recommended way to display toasts.
+ *
+ * @param config - The toast configuration
+ * @returns The toast element instance
+ *
+ * @example
+ * ```typescript
+ * import { toastAdd } from '@liwe3/webcomponents';
+ *
+ * toastAdd({
+ *   title: 'Success!',
+ *   text: 'Your changes have been saved.',
+ *   type: 'success',
+ *   duration: 5000,
+ *   position: 'TR' // Optional: top-right (default)
+ * });
+ * ```
+ */
+declare const toastAdd: (config: ToastConfig) => ToastElement;
+export { defineToast, toastAdd };
+//# sourceMappingURL=Toast.d.ts.map

package/dist/Toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../src/Toast.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAEjE,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC;AAElE,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,qBAAa,YAAa,SAAQ,WAAW;IACnC,UAAU,EAAE,UAAU,CAAC;IAC/B,OAAO,CAAC,MAAM,CAMZ;IACF,OAAO,CAAC,cAAc,CAAC,CAAS;IAChC,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,WAAW,CAAC,CAAc;;IAOlC,MAAM,KAAK,kBAAkB,IAAK,MAAM,EAAE,CAEzC;IAED,wBAAwB,CAAG,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAI,IAAI;IAMlG,iBAAiB,IAAK,IAAI;IAK1B,oBAAoB,IAAK,IAAI;IAI7B,IAAI,KAAK,IAAK,MAAM,CAWnB;IAED,IAAI,KAAK,CAAG,KAAK,EAAE,MAAM,EAQxB;IAED,IAAI,IAAI,IAAK,MAAM,CAElB;IAED,IAAI,IAAI,CAAG,KAAK,EAAE,MAAM,EAGvB;IAED,IAAI,IAAI,IAAK,SAAS,CAGrB;IAED,IAAI,IAAI,CAAG,KAAK,EAAE,SAAS,EAG1B;IAED,IAAI,IAAI,IAAK,MAAM,GAAG,SAAS,CAE9B;IAED,IAAI,IAAI,CAAG,KAAK,EAAE,MAAM,GAAG,SAAS,EAQnC;IAED,IAAI,QAAQ,IAAK,OAAO,CAKvB;IAED,IAAI,QAAQ,CAAG,KAAK,EAAE,OAAO,EAO5B;IAED,IAAI,QAAQ,IAAK,MAAM,CAMtB;IAED,IAAI,QAAQ,CAAG,KAAK,EAAE,MAAM,EAG3B;IAED,IAAI,OAAO,IAAK,WAAW,EAAE,CAW5B;IAED,IAAI,OAAO,CAAG,KAAK,EAAE,WAAW,EAAE,EAGjC;IAED;;OAEG;IACH,IAAI,CAAG,MAAM,EAAE,WAAW,GAAI,IAAI;IAgClC;;OAEG;IACH,KAAK,IAAK,IAAI;IA0Dd;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAe3B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAW3B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAY5B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAO3B;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAUjC;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAcjC;;OAEG;IACH,OAAO,CAAC,0BAA0B;IAoClC;;OAEG;IACH,OAAO,CAAC,aAAa;IAgCrB;;OAEG;IACH,OAAO,CAAC,cAAc;IAgBtB;;OAEG;IACH,OAAO,CAAC,UAAU;IA+BlB;;OAEG;IACH,OAAO,CAAC,MAAM;CAmNf;AAED;;GAEG;AACH,QAAA,MAAM,WAAW,GAAK,UAAS,MAAsB,KAAI,IAIxD,CAAC;AAgGF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,QAAQ,GAAK,QAAQ,WAAW,KAAI,YAezC,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC"}