@liwe3/webcomponents 1.0.2 → 1.1.0

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"}

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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"}