@liwe3/webcomponents 1.0.14 → 1.1.10

package/dist/MarkdownPreview.d.ts

@@ -0,0 +1,25 @@
+/**
+ * MarkdownPreview Web Component
+ * Renders markdown content using a dynamically loaded library
+ */
+export declare class MarkdownPreviewElement extends HTMLElement {
+    shadowRoot: ShadowRoot;
+    private _libUrl;
+    private _value;
+    private _isLibLoaded;
+    private _isLoadingLib;
+    private container;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    get libUrl(): string;
+    set libUrl(value: string);
+    get value(): string;
+    set value(content: string);
+    private render;
+    private loadLibrary;
+    private updateContent;
+}
+export declare const defineMarkdownPreview: (tagName?: string) => void;
+//# sourceMappingURL=MarkdownPreview.d.ts.map

package/dist/MarkdownPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownPreview.d.ts","sourceRoot":"","sources":["../src/MarkdownPreview.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,qBAAa,sBAAuB,SAAQ,WAAW;IAC7C,UAAU,EAAE,UAAU,CAAC;IAC/B,OAAO,CAAC,OAAO,CAAqE;IACpF,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,YAAY,CAAkB;IACtC,OAAO,CAAC,aAAa,CAAkB;IACvC,OAAO,CAAC,SAAS,CAAe;IAEhC,MAAM,KAAK,kBAAkB,aAE5B;;IAQD,iBAAiB;IAIjB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IAezE,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,EAEvB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,OAAO,EAAE,MAAM,EAIxB;IAED,OAAO,CAAC,MAAM;YAoEA,WAAW;IAwCzB,OAAO,CAAC,aAAa;CAoCtB;AAED,eAAO,MAAM,qBAAqB,GAAI,UAAS,MAAiC,SAI/E,CAAC"}

package/dist/MarkdownPreview.js

@@ -0,0 +1,147 @@
+class n extends HTMLElement {
+  constructor() {
+    super(), this._libUrl = "https://cdn.jsdelivr.net/npm/marked@4.3.0/marked.min.js", this._value = "", this._isLibLoaded = !1, this._isLoadingLib = !1, this.attachShadow({ mode: "open" }), this.render();
+  }
+  static get observedAttributes() {
+    return ["lib-url", "value"];
+  }
+  connectedCallback() {
+    this.loadLibrary();
+  }
+  attributeChangedCallback(e, o, i) {
+    o !== i && (e === "lib-url" ? (this._libUrl = i, this._isLibLoaded = !1, this.loadLibrary()) : e === "value" && this._value !== i && (this.value = i));
+  }
+  get libUrl() {
+    return this._libUrl;
+  }
+  set libUrl(e) {
+    this.setAttribute("lib-url", e);
+  }
+  get value() {
+    return this._value;
+  }
+  set value(e) {
+    this._value = e, this.updateContent();
+  }
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+          line-height: 1.6;
+          color: #333;
+        }
+        .markdown-body {
+          box-sizing: border-box;
+          min-width: 200px;
+          max-width: 980px;
+          margin: 0 auto;
+          padding: 15px;
+        }
+        img {
+          max-width: 100%;
+        }
+        pre {
+          background-color: #f6f8fa;
+          border-radius: 6px;
+          padding: 16px;
+          overflow: auto;
+        }
+        code {
+          font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+          font-size: 85%;
+          background-color: rgba(175, 184, 193, 0.2);
+          padding: 0.2em 0.4em;
+          border-radius: 6px;
+        }
+        pre code {
+          background-color: transparent;
+          padding: 0;
+        }
+        blockquote {
+          border-left: 0.25em solid #d0d7de;
+          color: #656d76;
+          padding: 0 1em;
+          margin: 0;
+        }
+        table {
+          border-spacing: 0;
+          border-collapse: collapse;
+          display: block;
+          width: max-content;
+          max-width: 100%;
+          overflow: auto;
+        }
+        table th,
+        table td {
+          padding: 6px 13px;
+          border: 1px solid #d0d7de;
+        }
+        table tr {
+          background-color: #ffffff;
+          border-top: 1px solid #d8dee4;
+        }
+        table tr:nth-child(2n) {
+          background-color: #f6f8fa;
+        }
+      </style>
+      <div class="markdown-body" id="content"></div>
+    `, this.container = this.shadowRoot.getElementById("content");
+  }
+  async loadLibrary() {
+    if (!(this._isLibLoaded || this._isLoadingLib)) {
+      if (typeof window.marked == "function" || typeof window.marked == "object" && typeof window.marked.parse == "function") {
+        this._isLibLoaded = !0, this.updateContent();
+        return;
+      }
+      this._isLoadingLib = !0;
+      try {
+        const e = document.createElement("script");
+        e.src = this._libUrl, e.onload = () => {
+          if (!window.marked) {
+            console.error("MarkdownPreview: Library loaded but window.marked is undefined"), this.container.innerHTML = '<div style="color: red;">Error: Markdown library loaded but not found. Try a different URL.</div>', this._isLoadingLib = !1;
+            return;
+          }
+          this._isLibLoaded = !0, this._isLoadingLib = !1, this.updateContent(), this.dispatchEvent(new CustomEvent("library-loaded"));
+        }, e.onerror = () => {
+          this._isLoadingLib = !1, console.error(`Failed to load markdown library from ${this._libUrl}`), this.container.innerHTML = '<div style="color: red;">Error loading markdown library</div>';
+        }, document.head.appendChild(e);
+      } catch (e) {
+        this._isLoadingLib = !1, console.error(e);
+      }
+    }
+  }
+  updateContent() {
+    if (!this._isLibLoaded) {
+      this._isLoadingLib || this.loadLibrary();
+      return;
+    }
+    const e = window.marked;
+    if (!e) {
+      console.error("Marked library loaded but not found in window");
+      return;
+    }
+    try {
+      const o = typeof e == "function" ? e : e.parse;
+      if (typeof o == "function") {
+        const i = o(this._value);
+        i instanceof Promise ? i.then((t) => {
+          this.container.innerHTML = t;
+        }) : this.container.innerHTML = i;
+      } else
+        console.error("Marked parse function not found"), this.container.innerHTML = '<div style="color: red;">Error: marked.parse not found</div>';
+    } catch (o) {
+      console.error("Error parsing markdown:", o), this.container.innerHTML = '<div style="color: red;">Error parsing markdown</div>';
+    }
+  }
+}
+const d = (r = "liwe3-markdown-preview") => {
+  typeof window < "u" && !customElements.get(r) && customElements.define(r, n);
+};
+d();
+export {
+  n as MarkdownPreviewElement,
+  d as defineMarkdownPreview
+};
+//# sourceMappingURL=MarkdownPreview.js.map

package/dist/MarkdownPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownPreview.js","sources":["../src/MarkdownPreview.ts"],"sourcesContent":["/**\n * MarkdownPreview Web Component\n * Renders markdown content using a dynamically loaded library\n */\n\nexport class MarkdownPreviewElement extends HTMLElement {\n  declare shadowRoot: ShadowRoot;\n  private _libUrl: string = 'https://cdn.jsdelivr.net/npm/marked@4.3.0/marked.min.js';\n  private _value: string = '';\n  private _isLibLoaded: boolean = false;\n  private _isLoadingLib: boolean = false;\n  private container!: HTMLElement;\n\n  static get observedAttributes() {\n    return ['lib-url', 'value'];\n  }\n\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n    this.render();\n  }\n\n  connectedCallback() {\n    this.loadLibrary();\n  }\n\n  attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n    if (oldValue === newValue) return;\n\n    if (name === 'lib-url') {\n      this._libUrl = newValue;\n      this._isLibLoaded = false; // Reset loaded state if URL changes\n      this.loadLibrary();\n    } else if (name === 'value') {\n      // Only update internal value if it differs, to avoid loops if we were to reflect\n      if (this._value !== newValue) {\n        this.value = newValue;\n      }\n    }\n  }\n\n  get libUrl(): string {\n    return this._libUrl;\n  }\n\n  set libUrl(value: string) {\n    this.setAttribute('lib-url', value);\n  }\n\n  get value(): string {\n    return this._value;\n  }\n\n  set value(content: string) {\n    this._value = content;\n    this.updateContent();\n    // We do NOT reflect to attribute to avoid performance issues with large content\n  }\n\n  private render() {\n    this.shadowRoot.innerHTML = `\n      <style>\n        :host {\n          display: block;\n          font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n          line-height: 1.6;\n          color: #333;\n        }\n        .markdown-body {\n          box-sizing: border-box;\n          min-width: 200px;\n          max-width: 980px;\n          margin: 0 auto;\n          padding: 15px;\n        }\n        img {\n          max-width: 100%;\n        }\n        pre {\n          background-color: #f6f8fa;\n          border-radius: 6px;\n          padding: 16px;\n          overflow: auto;\n        }\n        code {\n          font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;\n          font-size: 85%;\n          background-color: rgba(175, 184, 193, 0.2);\n          padding: 0.2em 0.4em;\n          border-radius: 6px;\n        }\n        pre code {\n          background-color: transparent;\n          padding: 0;\n        }\n        blockquote {\n          border-left: 0.25em solid #d0d7de;\n          color: #656d76;\n          padding: 0 1em;\n          margin: 0;\n        }\n        table {\n          border-spacing: 0;\n          border-collapse: collapse;\n          display: block;\n          width: max-content;\n          max-width: 100%;\n          overflow: auto;\n        }\n        table th,\n        table td {\n          padding: 6px 13px;\n          border: 1px solid #d0d7de;\n        }\n        table tr {\n          background-color: #ffffff;\n          border-top: 1px solid #d8dee4;\n        }\n        table tr:nth-child(2n) {\n          background-color: #f6f8fa;\n        }\n      </style>\n      <div class=\"markdown-body\" id=\"content\"></div>\n    `;\n    this.container = this.shadowRoot.getElementById('content') as HTMLElement;\n  }\n\n  private async loadLibrary() {\n    if (this._isLibLoaded || this._isLoadingLib) return;\n\n    // Check if marked is already available globally\n    if (typeof (window as any).marked === 'function' || (typeof (window as any).marked === 'object' && typeof (window as any).marked.parse === 'function')) {\n      this._isLibLoaded = true;\n      this.updateContent();\n      return;\n    }\n\n    this._isLoadingLib = true;\n\n    try {\n      const script = document.createElement('script');\n      script.src = this._libUrl;\n      script.onload = () => {\n        // Double check if marked is available\n        if (!(window as any).marked) {\n          console.error('MarkdownPreview: Library loaded but window.marked is undefined');\n          this.container.innerHTML = `<div style=\"color: red;\">Error: Markdown library loaded but not found. Try a different URL.</div>`;\n          this._isLoadingLib = false;\n          return;\n        }\n        this._isLibLoaded = true;\n        this._isLoadingLib = false;\n        this.updateContent();\n        this.dispatchEvent(new CustomEvent('library-loaded'));\n      };\n      script.onerror = () => {\n        this._isLoadingLib = false;\n        console.error(`Failed to load markdown library from ${this._libUrl}`);\n        this.container.innerHTML = `<div style=\"color: red;\">Error loading markdown library</div>`;\n      };\n      document.head.appendChild(script);\n    } catch (e) {\n      this._isLoadingLib = false;\n      console.error(e);\n    }\n  }\n\n  private updateContent() {\n    if (!this._isLibLoaded) {\n      if (!this._isLoadingLib) {\n        this.loadLibrary();\n      }\n      return;\n    }\n\n    const marked = (window as any).marked;\n    if (!marked) {\n       console.error('Marked library loaded but not found in window');\n       return;\n    }\n\n    try {\n      // Handle both function style (older marked) and object style (newer marked)\n      const parse = typeof marked === 'function' ? marked : marked.parse;\n      if (typeof parse === 'function') {\n        const html = parse(this._value);\n        // If it returns a promise (async), handle it\n        if (html instanceof Promise) {\n          html.then((res: string) => {\n            this.container.innerHTML = res;\n          });\n        } else {\n          this.container.innerHTML = html;\n        }\n      } else {\n        console.error('Marked parse function not found');\n        this.container.innerHTML = `<div style=\"color: red;\">Error: marked.parse not found</div>`;\n      }\n    } catch (e) {\n      console.error('Error parsing markdown:', e);\n      this.container.innerHTML = `<div style=\"color: red;\">Error parsing markdown</div>`;\n    }\n  }\n}\n\nexport const defineMarkdownPreview = (tagName: string = 'liwe3-markdown-preview') => {\n  if (typeof window !== 'undefined' && !customElements.get(tagName)) {\n    customElements.define(tagName, MarkdownPreviewElement);\n  }\n};\n\ndefineMarkdownPreview();\n"],"names":["MarkdownPreviewElement","name","oldValue","newValue","value","content","script","marked","parse","html","res","e","defineMarkdownPreview","tagName"],"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/ResizableCropper.d.ts

@@ -0,0 +1,158 @@
+/**
+ * ResizableCropper Web Component
+ * A container that wraps a single child element with drag-to-scale (resizing) and drag-to-crop (panning) capabilities
+ */
+export interface ResizableCropperState {
+    width: number;
+    height: number;
+    minWidth: number;
+    minHeight: number;
+    aspectRatio: string | null;
+    contentElement: HTMLElement | null;
+    contentLeft: number;
+    contentTop: number;
+    rotation: number;
+    wrapperLeft: number;
+    wrapperTop: number;
+}
+export interface ResizableCropperValues {
+    wrapperWidth: number;
+    wrapperHeight: number;
+    wrapperLeft: number;
+    wrapperTop: number;
+    contentWidth: number;
+    contentHeight: number;
+    contentLeft: number;
+    contentTop: number;
+    zoom: number;
+    rotation: number;
+}
+export interface ResizableCropperComponentState {
+    mode: 'transform' | 'crop';
+    disabled: boolean;
+    allowCrop: boolean;
+    allowResize: boolean;
+    allowRotate: boolean;
+    allowDrag: boolean;
+    minWidth: number;
+    minHeight: number;
+    aspectRatio: string | null;
+    values: ResizableCropperValues;
+}
+export interface ResizableCropEventDetail {
+    width: number;
+    height: number;
+    wrapperLeft: number;
+    wrapperTop: number;
+    contentLeft: number;
+    contentTop: number;
+    action: 'scale' | 'crop' | 'pan' | 'rotate' | 'move';
+    rotation?: number;
+    handle?: string;
+}
+export declare class ResizableCropperElement extends HTMLElement {
+    shadowRoot: ShadowRoot;
+    private state;
+    private wrapper;
+    private contentSlot;
+    private handlesContainer;
+    private isDragging;
+    private dragAction;
+    private dragHandle;
+    private dragStartX;
+    private dragStartY;
+    private dragStartWidth;
+    private dragStartHeight;
+    private dragStartContentLeft;
+    private dragStartContentTop;
+    private dragStartContentWidth;
+    private dragStartContentHeight;
+    private initialContentWidth;
+    private initialContentHeight;
+    private _dragStartRotation;
+    private _dragStartPointerAngle;
+    private _dragRotateCenterX;
+    private _dragRotateCenterY;
+    private _interactionMode;
+    private _dragPointerOffsetX;
+    private _dragPointerOffsetY;
+    private _dragMoveContainer;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _applyInteractionModeUI;
+    private _setInteractionMode;
+    private updateContentElement;
+    private initializeContentSize;
+    private updateWrapperDimensions;
+    private _applyWrapperTransform;
+    private updateHandlesVisibility;
+    private bindEvents;
+    private unbindEvents;
+    private handleWrapperDoubleClick;
+    private handleDocumentPointerDown;
+    private _getContainerForMove;
+    private _ensureContainerPositionedForMove;
+    private _syncWrapperPositionFromLayout;
+    private _ensureAbsolutePositionForMove;
+    private handleWrapperPointerDown;
+    private handlePointerDown;
+    private handleContentPointerDown;
+    private handlePointerMove;
+    private handleRotate;
+    private handlePointerUp;
+    private handleScale;
+    private handleCrop;
+    private clampContentPosition;
+    private handlePan;
+    private parseAspectRatio;
+    private dispatchChange;
+    private dispatchOnChange;
+    private render;
+    get width(): number;
+    set width(value: number);
+    get height(): number;
+    set height(value: number);
+    get minWidth(): number;
+    set minWidth(value: number);
+    get minHeight(): number;
+    set minHeight(value: number);
+    get aspectRatio(): string | null;
+    set aspectRatio(value: string | null);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get allowCrop(): boolean;
+    set allowCrop(value: boolean);
+    get allowResize(): boolean;
+    set allowResize(value: boolean);
+    get allowRotate(): boolean;
+    set allowRotate(value: boolean);
+    get allowDrag(): boolean;
+    set allowDrag(value: boolean);
+    /**
+     * Gets the current values including wrapper size, content size, position, and zoom level
+     */
+    getValues(): ResizableCropperValues;
+    /**
+     * Sets the values to reproduce size, zoom and pan
+     * @param values - The values to set
+     */
+    setValues(values: Partial<ResizableCropperValues>): void;
+    /**
+     * Gets a serializable state snapshot of the component including flags, constraints, mode,
+     * and the current transform/crop values.
+     */
+    getState(): ResizableCropperComponentState;
+    /**
+     * Restores a state snapshot produced by getState().
+     * @param state - State to restore
+     */
+    setState(state: Partial<ResizableCropperComponentState>): void;
+}
+/**
+ * Conditionally defines the custom element if in a browser environment.
+ */
+export declare const defineResizableCropper: (tagName?: string) => void;
+//# sourceMappingURL=ResizableCropper.d.ts.map

package/dist/ResizableCropper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizableCropper.d.ts","sourceRoot":"","sources":["../src/ResizableCropper.ts"],"names":[],"mappings":"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"}