@liwe3/webcomponents 1.0.14 → 1.1.0

package/dist/DateSelector.d.ts

@@ -0,0 +1,103 @@
+/**
+ * DateSelector Web Component
+ * A customizable date picker with single date and range selection modes
+ */
+export type DateRange = {
+    start: string | null;
+    end: string | null;
+};
+export declare class DateSelectorElement extends HTMLElement {
+    shadowRoot: ShadowRoot;
+    private currentDate;
+    private selectedDate;
+    private selectedRange;
+    private readonly MONTH_NAMES;
+    private readonly DAY_NAMES;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string): void;
+    get rangeMode(): boolean;
+    set rangeMode(value: boolean);
+    /**
+     * Renders the date selector component
+     */
+    private render;
+    /**
+     * Generates year options for the dropdown (current year ±10 years)
+     */
+    private generateYearOptions;
+    /**
+     * Generates the calendar grid with day headers and day cells
+     */
+    private generateCalendarGrid;
+    /**
+     * Checks if two date strings match
+     */
+    private dateMatches;
+    /**
+     * Checks if a date is within the selected range
+     */
+    private isDateInRange;
+    /**
+     * Attaches main event listeners (called once during construction)
+     */
+    private attachEventListeners;
+    /**
+     * Called after each render to setup any post-render event listeners
+     */
+    private attachEventListenersToShadowRoot;
+    /**
+     * Navigates to the previous or next month
+     */
+    private navigateMonth;
+    /**
+     * Navigates to a specific year
+     */
+    private navigateToYear;
+    /**
+     * Handles click on a day cell
+     */
+    private handleDayClick;
+    /**
+     * Handles single date selection
+     */
+    private handleSingleSelection;
+    /**
+     * Handles range selection
+     */
+    private handleRangeSelection;
+    /**
+     * Updates hover effect when selecting a range
+     */
+    private updateRangeHover;
+    /**
+     * Clears the hover effect for range selection
+     */
+    private clearRangeHover;
+    /**
+     * Sets the selected date programmatically (single date mode only)
+     */
+    setDate(dateStr: string): void;
+    /**
+     * Sets the selected range programmatically (range mode only)
+     */
+    setRange(startDate: string, endDate: string): void;
+    /**
+     * Gets the currently selected date
+     */
+    getSelectedDate(): string | null;
+    /**
+     * Gets the currently selected range
+     */
+    getSelectedRange(): DateRange;
+    /**
+     * Clears the current selection
+     */
+    clear(): void;
+}
+/**
+ * Conditionally defines the custom element if in a browser environment.
+ */
+declare const defineDateSelector: (tagName?: string) => void;
+export { defineDateSelector };
+//# sourceMappingURL=DateSelector.d.ts.map

package/dist/DateSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateSelector.d.ts","sourceRoot":"","sources":["../src/DateSelector.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB,CAAC;AAEF,qBAAa,mBAAoB,SAAQ,WAAW;IAC1C,UAAU,EAAE,UAAU,CAAC;IAC/B,OAAO,CAAC,WAAW,CAAoB;IACvC,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,aAAa,CAAyC;IAG9D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAG1B;IAEF,OAAO,CAAC,QAAQ,CAAC,SAAS,CAA+D;;IASzF,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAQ5C,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAM3B;IAED;;OAEG;IACH,OAAO,CAAC,MAAM;IAsKd;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAa3B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAkE5B;;OAEG;IACH,OAAO,CAAC,WAAW;IAInB;;OAEG;IACH,OAAO,CAAC,aAAa;IAUrB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAoC5B;;OAEG;IACH,OAAO,CAAC,gCAAgC;IAKxC;;OAEG;IACH,OAAO,CAAC,aAAa;IAiBrB;;OAEG;IACH,OAAO,CAAC,cAAc;IAKtB;;OAEG;IACH,OAAO,CAAC,cAAc;IAYtB;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAU7B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IA2B5B;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAgBxB;;OAEG;IACH,OAAO,CAAC,eAAe;IAOvB;;OAEG;IACI,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAQrC;;OAEG;IACI,QAAQ,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IAQzD;;OAEG;IACI,eAAe,IAAI,MAAM,GAAG,IAAI;IAIvC;;OAEG;IACI,gBAAgB,IAAI,SAAS;IAIpC;;OAEG;IACI,KAAK,IAAI,IAAI;CAKrB;AAED;;GAEG;AACH,QAAA,MAAM,kBAAkB,GAAI,UAAS,MAA8B,KAAG,IAIrE,CAAC;AAKF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/Drawer.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Drawer Web Component
+ * A container that can be expanded, shrunk, or closed with smooth animations
+ */
+export type DrawerDirection = 'horizontal' | 'vertical';
+export type DrawerState = 'expanded' | 'shrunk' | 'closed';
+export interface DrawerConfig {
+    direction?: DrawerDirection;
+    duration?: number;
+    showTitleWhenShrunk?: boolean;
+    closable?: boolean;
+    title?: string;
+    icon?: string;
+    showToggleButton?: boolean;
+    contentPadding?: string;
+}
+export declare class DrawerElement extends HTMLElement {
+    shadowRoot: ShadowRoot;
+    private currentState;
+    private config;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get direction(): DrawerDirection;
+    set direction(value: DrawerDirection);
+    get duration(): number;
+    set duration(value: number);
+    get showTitleWhenShrunk(): boolean;
+    set showTitleWhenShrunk(value: boolean);
+    get closable(): boolean;
+    set closable(value: boolean);
+    get title(): string;
+    set title(value: string);
+    get icon(): string;
+    set icon(value: string);
+    get showToggleButton(): boolean;
+    set showToggleButton(value: boolean);
+    get contentPadding(): string;
+    set contentPadding(value: string);
+    get state(): DrawerState;
+    set state(value: DrawerState);
+    /**
+     * Expand the drawer
+     */
+    expand(): void;
+    /**
+     * Shrink the drawer
+     */
+    shrink(): void;
+    /**
+     * Close the drawer (removes from DOM)
+     */
+    close(): void;
+    /**
+     * Toggle between expanded and shrunk states
+     */
+    toggle(): void;
+    private setState;
+    private bindEvents;
+    private render;
+}
+export declare function defineDrawer(tagName?: string): void;
+//# sourceMappingURL=Drawer.d.ts.map

package/dist/Drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../src/Drawer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,UAAU,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE3D,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,qBAAa,aAAc,SAAQ,WAAW;IACpC,UAAU,EAAE,UAAU,CAAC;IAC/B,OAAO,CAAC,YAAY,CAA2B;IAC/C,OAAO,CAAC,MAAM,CASZ;;IASF,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;IAmCjG,IAAI,SAAS,IAAK,eAAe,CAEhC;IAED,IAAI,SAAS,CAAG,KAAK,EAAE,eAAe,EAGrC;IAED,IAAI,QAAQ,IAAK,MAAM,CAEtB;IAED,IAAI,QAAQ,CAAG,KAAK,EAAE,MAAM,EAG3B;IAED,IAAI,mBAAmB,IAAK,OAAO,CAElC;IAED,IAAI,mBAAmB,CAAG,KAAK,EAAE,OAAO,EAGvC;IAED,IAAI,QAAQ,IAAK,OAAO,CAEvB;IAED,IAAI,QAAQ,CAAG,KAAK,EAAE,OAAO,EAG5B;IAED,IAAI,KAAK,IAAK,MAAM,CAEnB;IAED,IAAI,KAAK,CAAG,KAAK,EAAE,MAAM,EAGxB;IAED,IAAI,IAAI,IAAK,MAAM,CAElB;IAED,IAAI,IAAI,CAAG,KAAK,EAAE,MAAM,EAGvB;IAED,IAAI,gBAAgB,IAAK,OAAO,CAE/B;IAED,IAAI,gBAAgB,CAAG,KAAK,EAAE,OAAO,EAGpC;IAED,IAAI,cAAc,IAAK,MAAM,CAE5B;IAED,IAAI,cAAc,CAAG,KAAK,EAAE,MAAM,EAGjC;IAED,IAAI,KAAK,IAAK,WAAW,CAExB;IAED,IAAI,KAAK,CAAG,KAAK,EAAE,WAAW,EAE7B;IAED;;OAEG;IACH,MAAM,IAAK,IAAI;IAIf;;OAEG;IACH,MAAM,IAAK,IAAI;IAIf;;OAEG;IACH,KAAK,IAAK,IAAI;IAId;;OAEG;IACH,MAAM,IAAK,IAAI;IAQf,OAAO,CAAC,QAAQ;IAwChB,OAAO,CAAC,UAAU;IAgBlB,OAAO,CAAC,MAAM;CA+Kf;AAQD,wBAAgB,YAAY,CAAG,OAAO,GAAE,MAAuB,GAAI,IAAI,CAItE"}

package/dist/Drawer.js

@@ -0,0 +1,340 @@
+class n extends HTMLElement {
+  constructor() {
+    super(), this.currentState = "expanded", this.config = {
+      direction: "horizontal",
+      duration: 300,
+      showTitleWhenShrunk: !1,
+      closable: !0,
+      title: "",
+      icon: "☰",
+      showToggleButton: !0,
+      contentPadding: "16px"
+    }, this.attachShadow({ mode: "open" }), this.render(), this.bindEvents();
+  }
+  static get observedAttributes() {
+    return ["direction", "duration", "show-title-when-shrunk", "closable", "title", "icon", "state", "show-toggle-button", "content-padding"];
+  }
+  attributeChangedCallback(t, r, e) {
+    if (r !== e) {
+      switch (t) {
+        case "direction":
+          this.config.direction = e || "horizontal";
+          break;
+        case "duration":
+          this.config.duration = parseInt(e || "300", 10);
+          break;
+        case "show-title-when-shrunk":
+          this.config.showTitleWhenShrunk = e === "true";
+          break;
+        case "closable":
+          this.config.closable = e !== "false";
+          break;
+        case "title":
+          this.config.title = e || "";
+          break;
+        case "icon":
+          this.config.icon = e || "☰";
+          break;
+        case "state":
+          this.currentState = e || "expanded";
+          break;
+        case "show-toggle-button":
+          this.config.showToggleButton = e !== "false";
+          break;
+        case "content-padding":
+          this.config.contentPadding = e ?? void 0;
+          break;
+      }
+      this.render();
+    }
+  }
+  get direction() {
+    return this.config.direction;
+  }
+  set direction(t) {
+    this.config.direction = t, this.setAttribute("direction", t);
+  }
+  get duration() {
+    return this.config.duration;
+  }
+  set duration(t) {
+    this.config.duration = t, this.setAttribute("duration", t.toString());
+  }
+  get showTitleWhenShrunk() {
+    return this.config.showTitleWhenShrunk;
+  }
+  set showTitleWhenShrunk(t) {
+    this.config.showTitleWhenShrunk = t, this.setAttribute("show-title-when-shrunk", t.toString());
+  }
+  get closable() {
+    return this.config.closable;
+  }
+  set closable(t) {
+    this.config.closable = t, this.setAttribute("closable", t.toString());
+  }
+  get title() {
+    return this.config.title;
+  }
+  set title(t) {
+    this.config.title = t, this.setAttribute("title", t);
+  }
+  get icon() {
+    return this.config.icon;
+  }
+  set icon(t) {
+    this.config.icon = t, this.setAttribute("icon", t);
+  }
+  get showToggleButton() {
+    return this.config.showToggleButton;
+  }
+  set showToggleButton(t) {
+    this.config.showToggleButton = t, this.setAttribute("show-toggle-button", t.toString());
+  }
+  get contentPadding() {
+    return this.config.contentPadding ?? "16px";
+  }
+  set contentPadding(t) {
+    this.config.contentPadding = t, this.setAttribute("content-padding", t);
+  }
+  get state() {
+    return this.currentState;
+  }
+  set state(t) {
+    this.setState(t);
+  }
+  /**
+   * Expand the drawer
+   */
+  expand() {
+    this.setState("expanded");
+  }
+  /**
+   * Shrink the drawer
+   */
+  shrink() {
+    this.setState("shrunk");
+  }
+  /**
+   * Close the drawer (removes from DOM)
+   */
+  close() {
+    this.setState("closed");
+  }
+  /**
+   * Toggle between expanded and shrunk states
+   */
+  toggle() {
+    this.currentState === "expanded" ? this.shrink() : this.currentState === "shrunk" && this.expand();
+  }
+  setState(t) {
+    const r = this.currentState;
+    this.currentState = t, this.setAttribute("state", t);
+    const e = this.shadowRoot.querySelector(".drawer-container");
+    if (e) {
+      if (this.dispatchEvent(new CustomEvent("drawer-state-change", {
+        detail: { oldState: r, newState: t },
+        bubbles: !0,
+        composed: !0
+      })), t === "closed") {
+        e.style.display = "none", this.dispatchEvent(new CustomEvent("drawer-closed", { bubbles: !0, composed: !0 })), this.remove();
+        return;
+      }
+      if (t === "shrunk") {
+        e.style.display = "block", e.classList.add("shrunk"), e.classList.remove("expanded"), this.dispatchEvent(new CustomEvent("drawer-shrunk", { bubbles: !0, composed: !0 }));
+        return;
+      }
+      if (t === "expanded") {
+        e.style.display = "block", e.classList.remove("shrunk"), e.classList.add("expanded"), this.dispatchEvent(new CustomEvent("drawer-expanded", { bubbles: !0, composed: !0 }));
+        return;
+      }
+    }
+  }
+  bindEvents() {
+    this.shadowRoot.addEventListener("click", (t) => {
+      const r = t.target;
+      r.closest(".drawer-toggle") && (t.preventDefault(), this.toggle()), r.closest(".drawer-close") && this.config.closable && (t.preventDefault(), this.close());
+    });
+  }
+  render() {
+    const t = this.config.direction === "horizontal", r = this.config.showTitleWhenShrunk, e = this.config.showToggleButton !== !1, o = this.config.contentPadding ?? "16px";
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          --drawer-duration: ${this.config.duration}ms;
+          --drawer-bg: #ffffff;
+          --drawer-border: #e5e7eb;
+          --drawer-text: #1f2937;
+          --drawer-icon-bg: #f3f4f6;
+          --drawer-icon-hover: #e5e7eb;
+          --drawer-button-hover: #f9fafb;
+          --drawer-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+
+        /* Container when expanded */
+        .drawer-container {
+          background: var(--drawer-bg);
+          border: 1px solid var(--drawer-border);
+          border-radius: 8px;
+          box-shadow: var(--drawer-shadow);
+          overflow: hidden;
+          position: relative;
+        }
+
+        .drawer-container.horizontal {
+          width: var(--drawer-horizontal-size, 300px);
+          height: auto;
+          transition: none;
+        }
+
+        .drawer-container.vertical {
+          width: auto;
+          height: var(--drawer-vertical-size, 300px);
+          transition: none;
+        }
+
+        .drawer-container.expanded {
+          opacity: 1;
+        }
+
+        .drawer-container.shrunk.horizontal {
+          width: var(--drawer-horizontal-shrunk-size, 48px);
+        }
+
+        .drawer-container.shrunk.vertical {
+          height: var(--drawer-vertical-shrunk-size, 48px);
+        }
+
+        /* Header area with title and buttons */
+        .drawer-header {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          padding: 12px;
+          border-bottom: 1px solid var(--drawer-border);
+          transition: none;
+        }
+
+        .drawer-container.shrunk .drawer-header {
+          border-bottom: none;
+        }
+
+        .drawer-container.shrunk .drawer-title:not(.keep-visible),
+        .drawer-container.shrunk .drawer-close {
+          display: none;
+        }
+
+        .drawer-container.shrunk .drawer-title.keep-visible {
+          display: block;
+        }
+
+        .drawer-toggle {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 28px;
+          height: 28px;
+          background: var(--drawer-icon-bg);
+          border: none;
+          border-radius: 6px;
+          cursor: pointer;
+          font-size: 16px;
+          transition: background 0.2s;
+          flex-shrink: 0;
+        }
+
+        .drawer-toggle:hover {
+          background: var(--drawer-icon-hover);
+        }
+
+        .drawer-title {
+          flex: 1;
+          font-size: 16px;
+          font-weight: 600;
+          color: var(--drawer-text);
+          transition: none;
+          white-space: nowrap;
+          overflow: hidden;
+        }
+
+        .drawer-close {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 24px;
+          height: 24px;
+          background: transparent;
+          border: none;
+          border-radius: 4px;
+          cursor: pointer;
+          font-size: 18px;
+          color: #6b7280;
+          transition: none;
+          flex-shrink: 0;
+        }
+
+        .drawer-close:hover {
+          background: var(--drawer-button-hover);
+          color: #ef4444;
+        }
+
+        /* Content area */
+        .drawer-content {
+          padding: var(--drawer-content-padding, 16px);
+          transition: none;
+          overflow: auto;
+        }
+
+        .drawer-container.shrunk .drawer-content {
+          opacity: 0;
+          height: 0;
+          padding: 0;
+          overflow: hidden;
+          position: absolute;
+          z-index: -1;
+        }
+
+        /* Vertical specific styles */
+        .drawer-container.vertical {
+          display: flex;
+          flex-direction: column;
+        }
+
+        .drawer-container.vertical .drawer-content {
+          flex: 1;
+          overflow: auto;
+        }
+      </style>
+
+      <div class="drawer-container ${t ? "horizontal" : "vertical"} ${this.currentState}" style="display:block; --drawer-content-padding:${o};">
+        <div class="drawer-header">
+          ${e ? `
+          <button class="drawer-toggle" aria-label="Toggle drawer">
+            ${this.config.icon}
+          </button>
+          ` : ""}
+          <div class="drawer-title ${r ? "keep-visible" : ""}">
+            ${this.config.title}
+          </div>
+          ${this.config.closable ? `
+            <button class="drawer-close" aria-label="Close drawer">
+              ×
+            </button>
+          ` : ""}
+        </div>
+        <div class="drawer-content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.get("liwe3-drawer") || customElements.define("liwe3-drawer", n);
+function s(i = "liwe3-drawer") {
+  customElements.get(i) || customElements.define(i, n);
+}
+export {
+  n as DrawerElement,
+  s as defineDrawer
+};
+//# sourceMappingURL=Drawer.js.map

package/dist/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../src/Drawer.ts"],"sourcesContent":["/**\n * Drawer Web Component\n * A container that can be expanded, shrunk, or closed with smooth animations\n */\n\nexport type DrawerDirection = 'horizontal' | 'vertical';\nexport type DrawerState = 'expanded' | 'shrunk' | 'closed';\n\nexport interface DrawerConfig {\n  direction?: DrawerDirection;\n  duration?: number;\n  showTitleWhenShrunk?: boolean;\n  closable?: boolean;\n  title?: string;\n  icon?: string;\n  showToggleButton?: boolean;\n  contentPadding?: string;\n}\n\nexport class DrawerElement extends HTMLElement {\n  declare shadowRoot: ShadowRoot;\n  private currentState: DrawerState = 'expanded';\n  private config: DrawerConfig = {\n    direction: 'horizontal',\n    duration: 300,\n    showTitleWhenShrunk: false,\n    closable: true,\n    title: '',\n    icon: '☰',\n    showToggleButton: true,\n    contentPadding: '16px'\n  };\n\n  constructor () {\n    super();\n    this.attachShadow( { mode: 'open' } );\n    this.render();\n    this.bindEvents();\n  }\n\n  static get observedAttributes (): string[] {\n    return [ 'direction', 'duration', 'show-title-when-shrunk', 'closable', 'title', 'icon', 'state', 'show-toggle-button', 'content-padding' ];\n  }\n\n  attributeChangedCallback ( name: string, oldValue: string | null, newValue: string | null ): void {\n    if ( oldValue !== newValue ) {\n      switch ( name ) {\n        case 'direction':\n          this.config.direction = ( newValue as DrawerDirection ) || 'horizontal';\n          break;\n        case 'duration':\n          this.config.duration = parseInt( newValue || '300', 10 );\n          break;\n        case 'show-title-when-shrunk':\n          this.config.showTitleWhenShrunk = newValue === 'true';\n          break;\n        case 'closable':\n          this.config.closable = newValue !== 'false';\n          break;\n        case 'title':\n          this.config.title = newValue || '';\n          break;\n        case 'icon':\n          this.config.icon = newValue || '☰';\n          break;\n        case 'state':\n          this.currentState = ( newValue as DrawerState ) || 'expanded';\n          break;\n        case 'show-toggle-button':\n          this.config.showToggleButton = newValue !== 'false';\n          break;\n        case 'content-padding':\n          this.config.contentPadding = newValue ?? undefined;\n          break;\n      }\n      this.render();\n    }\n  }\n\n  get direction (): DrawerDirection {\n    return this.config.direction!;\n  }\n\n  set direction ( value: DrawerDirection ) {\n    this.config.direction = value;\n    this.setAttribute( 'direction', value );\n  }\n\n  get duration (): number {\n    return this.config.duration!;\n  }\n\n  set duration ( value: number ) {\n    this.config.duration = value;\n    this.setAttribute( 'duration', value.toString() );\n  }\n\n  get showTitleWhenShrunk (): boolean {\n    return this.config.showTitleWhenShrunk!;\n  }\n\n  set showTitleWhenShrunk ( value: boolean ) {\n    this.config.showTitleWhenShrunk = value;\n    this.setAttribute( 'show-title-when-shrunk', value.toString() );\n  }\n\n  get closable (): boolean {\n    return this.config.closable!;\n  }\n\n  set closable ( value: boolean ) {\n    this.config.closable = value;\n    this.setAttribute( 'closable', value.toString() );\n  }\n\n  get title (): string {\n    return this.config.title!;\n  }\n\n  set title ( value: string ) {\n    this.config.title = value;\n    this.setAttribute( 'title', value );\n  }\n\n  get icon (): string {\n    return this.config.icon!;\n  }\n\n  set icon ( value: string ) {\n    this.config.icon = value;\n    this.setAttribute( 'icon', value );\n  }\n\n  get showToggleButton (): boolean {\n    return this.config.showToggleButton!;\n  }\n\n  set showToggleButton ( value: boolean ) {\n    this.config.showToggleButton = value;\n    this.setAttribute( 'show-toggle-button', value.toString() );\n  }\n\n  get contentPadding (): string {\n    return this.config.contentPadding ?? '16px';\n  }\n\n  set contentPadding ( value: string ) {\n    this.config.contentPadding = value;\n    this.setAttribute( 'content-padding', value );\n  }\n\n  get state (): DrawerState {\n    return this.currentState;\n  }\n\n  set state ( value: DrawerState ) {\n    this.setState( value );\n  }\n\n  /**\n   * Expand the drawer\n   */\n  expand (): void {\n    this.setState( 'expanded' );\n  }\n\n  /**\n   * Shrink the drawer\n   */\n  shrink (): void {\n    this.setState( 'shrunk' );\n  }\n\n  /**\n   * Close the drawer (removes from DOM)\n   */\n  close (): void {\n    this.setState( 'closed' );\n  }\n\n  /**\n   * Toggle between expanded and shrunk states\n   */\n  toggle (): void {\n    if ( this.currentState === 'expanded' ) {\n      this.shrink();\n    } else if ( this.currentState === 'shrunk' ) {\n      this.expand();\n    }\n  }\n\n  private setState ( newState: DrawerState ): void {\n    const oldState = this.currentState;\n    this.currentState = newState;\n    this.setAttribute( 'state', newState );\n\n    const container = this.shadowRoot.querySelector( '.drawer-container' ) as HTMLElement;\n    if ( !container ) return;\n\n    // Dispatch state change event\n    this.dispatchEvent( new CustomEvent( 'drawer-state-change', {\n      detail: { oldState, newState },\n      bubbles: true,\n      composed: true\n    } ) );\n\n    if ( newState === 'closed' ) {\n      // Immediately remove from DOM (no animation) without visual jump\n      container.style.display = 'none';\n      this.dispatchEvent( new CustomEvent( 'drawer-closed', { bubbles: true, composed: true } ) );\n      this.remove();\n      return;\n    }\n\n    if ( newState === 'shrunk' ) {\n      container.style.display = 'block';\n      container.classList.add( 'shrunk' );\n      container.classList.remove( 'expanded' );\n      this.dispatchEvent( new CustomEvent( 'drawer-shrunk', { bubbles: true, composed: true } ) );\n      return;\n    }\n\n    if ( newState === 'expanded' ) {\n      container.style.display = 'block';\n      container.classList.remove( 'shrunk' );\n      container.classList.add( 'expanded' );\n      this.dispatchEvent( new CustomEvent( 'drawer-expanded', { bubbles: true, composed: true } ) );\n      return;\n    }\n  }\n\n  private bindEvents (): void {\n    this.shadowRoot.addEventListener( 'click', ( e ) => {\n      const target = e.target as HTMLElement;\n\n      if ( target.closest( '.drawer-toggle' ) ) {\n        e.preventDefault();\n        this.toggle();\n      }\n\n      if ( target.closest( '.drawer-close' ) && this.config.closable ) {\n        e.preventDefault();\n        this.close();\n      }\n    } );\n  }\n\n  private render (): void {\n    const isHorizontal = this.config.direction === 'horizontal';\n    const showTitle = this.config.showTitleWhenShrunk;\n    const showToggleButton = this.config.showToggleButton !== false;\n    const contentPadding = this.config.contentPadding ?? '16px';\n\n    this.shadowRoot.innerHTML = `\n      <style>\n        :host {\n          display: block;\n          --drawer-duration: ${ this.config.duration }ms;\n          --drawer-bg: #ffffff;\n          --drawer-border: #e5e7eb;\n          --drawer-text: #1f2937;\n          --drawer-icon-bg: #f3f4f6;\n          --drawer-icon-hover: #e5e7eb;\n          --drawer-button-hover: #f9fafb;\n          --drawer-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n        }\n\n        /* Container when expanded */\n        .drawer-container {\n          background: var(--drawer-bg);\n          border: 1px solid var(--drawer-border);\n          border-radius: 8px;\n          box-shadow: var(--drawer-shadow);\n          overflow: hidden;\n          position: relative;\n        }\n\n        .drawer-container.horizontal {\n          width: var(--drawer-horizontal-size, 300px);\n          height: auto;\n          transition: none;\n        }\n\n        .drawer-container.vertical {\n          width: auto;\n          height: var(--drawer-vertical-size, 300px);\n          transition: none;\n        }\n\n        .drawer-container.expanded {\n          opacity: 1;\n        }\n\n        .drawer-container.shrunk.horizontal {\n          width: var(--drawer-horizontal-shrunk-size, 48px);\n        }\n\n        .drawer-container.shrunk.vertical {\n          height: var(--drawer-vertical-shrunk-size, 48px);\n        }\n\n        /* Header area with title and buttons */\n        .drawer-header {\n          display: flex;\n          align-items: center;\n          gap: 12px;\n          padding: 12px;\n          border-bottom: 1px solid var(--drawer-border);\n          transition: none;\n        }\n\n        .drawer-container.shrunk .drawer-header {\n          border-bottom: none;\n        }\n\n        .drawer-container.shrunk .drawer-title:not(.keep-visible),\n        .drawer-container.shrunk .drawer-close {\n          display: none;\n        }\n\n        .drawer-container.shrunk .drawer-title.keep-visible {\n          display: block;\n        }\n\n        .drawer-toggle {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 28px;\n          height: 28px;\n          background: var(--drawer-icon-bg);\n          border: none;\n          border-radius: 6px;\n          cursor: pointer;\n          font-size: 16px;\n          transition: background 0.2s;\n          flex-shrink: 0;\n        }\n\n        .drawer-toggle:hover {\n          background: var(--drawer-icon-hover);\n        }\n\n        .drawer-title {\n          flex: 1;\n          font-size: 16px;\n          font-weight: 600;\n          color: var(--drawer-text);\n          transition: none;\n          white-space: nowrap;\n          overflow: hidden;\n        }\n\n        .drawer-close {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 24px;\n          height: 24px;\n          background: transparent;\n          border: none;\n          border-radius: 4px;\n          cursor: pointer;\n          font-size: 18px;\n          color: #6b7280;\n          transition: none;\n          flex-shrink: 0;\n        }\n\n        .drawer-close:hover {\n          background: var(--drawer-button-hover);\n          color: #ef4444;\n        }\n\n        /* Content area */\n        .drawer-content {\n          padding: var(--drawer-content-padding, 16px);\n          transition: none;\n          overflow: auto;\n        }\n\n        .drawer-container.shrunk .drawer-content {\n          opacity: 0;\n          height: 0;\n          padding: 0;\n          overflow: hidden;\n          position: absolute;\n          z-index: -1;\n        }\n\n        /* Vertical specific styles */\n        .drawer-container.vertical {\n          display: flex;\n          flex-direction: column;\n        }\n\n        .drawer-container.vertical .drawer-content {\n          flex: 1;\n          overflow: auto;\n        }\n      </style>\n\n      <div class=\"drawer-container ${ isHorizontal ? 'horizontal' : 'vertical' } ${ this.currentState }\" style=\"display:block; --drawer-content-padding:${ contentPadding };\">\n        <div class=\"drawer-header\">\n          ${ showToggleButton ? `\n          <button class=\"drawer-toggle\" aria-label=\"Toggle drawer\">\n            ${ this.config.icon }\n          </button>\n          ` : '' }\n          <div class=\"drawer-title ${ showTitle ? 'keep-visible' : '' }\">\n            ${ this.config.title }\n          </div>\n          ${ this.config.closable ? `\n            <button class=\\\"drawer-close\\\" aria-label=\\\"Close drawer\\\">\\n              ×\\n            </button>\n          ` : '' }\n        </div>\n        <div class=\"drawer-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\n// Auto-register the custom element\nif ( !customElements.get( 'liwe3-drawer' ) ) {\n  customElements.define( 'liwe3-drawer', DrawerElement );\n}\n\n// Export a function to manually register with a custom tag name\nexport function defineDrawer ( tagName: string = 'liwe3-drawer' ): void {\n  if ( !customElements.get( tagName ) ) {\n    customElements.define( tagName, DrawerElement );\n  }\n}\n"],"names":["DrawerElement","name","oldValue","newValue","value","newState","oldState","container","e","target","isHorizontal","showTitle","showToggleButton","contentPadding","defineDrawer","tagName"],"mappings":"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"}

package/dist/ImageView.d.ts

@@ -0,0 +1,42 @@
+export type ImageMode = 'stretch' | '1:1' | 'cover' | 'contain';
+export type ImagePosition = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type ImageFX = 'none' | 'bokeh' | 'pan-left' | 'pan-right' | 'zoom-in' | 'zoom-out';
+export declare class ImageView extends HTMLElement {
+    private _src;
+    private _width;
+    private _height;
+    private _mode;
+    private _position;
+    private _fx;
+    private _fxHover;
+    private _alt;
+    private _isHovering;
+    private container;
+    private img;
+    constructor();
+    private _handleMouseEnter;
+    private _handleMouseLeave;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    connectedCallback(): void;
+    private updateDimensions;
+    private updateClasses;
+    private render;
+    get src(): string;
+    set src(value: string);
+    get width(): string;
+    set width(value: string);
+    get height(): string;
+    set height(value: string);
+    get mode(): ImageMode;
+    set mode(value: ImageMode);
+    get position(): ImagePosition;
+    set position(value: ImagePosition);
+    get fx(): ImageFX;
+    set fx(value: ImageFX);
+    get fxHover(): ImageFX;
+    set fxHover(value: ImageFX);
+    get alt(): string;
+    set alt(value: string);
+}
+//# sourceMappingURL=ImageView.d.ts.map

package/dist/ImageView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageView.d.ts","sourceRoot":"","sources":["../src/ImageView.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,SAAS,CAAC;AAChE,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;AACvI,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,CAAC;AAE3F,qBAAa,SAAU,SAAQ,WAAW;IACzC,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,GAAG,CAAmB;IAC9B,OAAO,CAAC,QAAQ,CAAmB;IACnC,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,CAAC,WAAW,CAAkB;IAErC,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,GAAG,CAAmB;;IAuH9B,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,iBAAiB;IAOzB,MAAM,KAAK,kBAAkB,aAE5B;IAED,wBAAwB,CAAG,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IAuC3E,iBAAiB;IAMjB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,MAAM;IAqBd,IAAI,GAAG,IAAK,MAAM,CAAsB;IACxC,IAAI,GAAG,CAAG,KAAK,EAAE,MAAM,EAAyC;IAEhE,IAAI,KAAK,IAAK,MAAM,CAAwB;IAC5C,IAAI,KAAK,CAAG,KAAK,EAAE,MAAM,EAA2C;IAEpE,IAAI,MAAM,IAAK,MAAM,CAAyB;IAC9C,IAAI,MAAM,CAAG,KAAK,EAAE,MAAM,EAA4C;IAEtE,IAAI,IAAI,IAAK,SAAS,CAAuB;IAC7C,IAAI,IAAI,CAAG,KAAK,EAAE,SAAS,EAA0C;IAErE,IAAI,QAAQ,IAAK,aAAa,CAA2B;IACzD,IAAI,QAAQ,CAAG,KAAK,EAAE,aAAa,EAA8C;IAEjF,IAAI,EAAE,IAAK,OAAO,CAAqB;IACvC,IAAI,EAAE,CAAG,KAAK,EAAE,OAAO,EAAwC;IAE/D,IAAI,OAAO,IAAK,OAAO,CAA0B;IACjD,IAAI,OAAO,CAAG,KAAK,EAAE,OAAO,EAA8C;IAE1E,IAAI,GAAG,IAAK,MAAM,CAAsB;IACxC,IAAI,GAAG,CAAG,KAAK,EAAE,MAAM,EAAyC;CAChE"}