@liwe3/webcomponents 1.1.0 → 1.1.10

package/dist/ButtonToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonToolbar.js","sources":["../src/ButtonToolbar.ts"],"sourcesContent":["/**\n * ButtonToolbar Web Component\n * A customizable toolbar with groups of buttons, supporting horizontal/vertical orientation\n */\n\nexport type ButtonToolbarItem = {\n  id: string;\n  label?: string;\n  icon?: string; // SVG content or icon class\n  image?: string; // Image URL\n  type?: 'default' | 'info' | 'error' | 'warn' | 'success';\n  disabled?: boolean;\n  tooltip?: string;\n  action?: string; // Optional action name to dispatch\n};\n\nexport type ButtonToolbarGroup = {\n  id?: string;\n  items: ButtonToolbarItem[];\n  class?: string; // Optional CSS class for the group\n};\n\nexport class ButtonToolbarElement extends HTMLElement {\n  declare shadowRoot: ShadowRoot;\n  private _groups: ButtonToolbarGroup[] = [];\n\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n  }\n\n  static get observedAttributes(): string[] {\n    return ['orientation', 'groups'];\n  }\n\n  attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void {\n    if (oldValue !== newValue) {\n      this.render();\n    }\n  }\n\n  get orientation(): 'horizontal' | 'vertical' {\n    return (this.getAttribute('orientation') as 'horizontal' | 'vertical') || 'horizontal';\n  }\n\n  set orientation(value: 'horizontal' | 'vertical') {\n    this.setAttribute('orientation', value);\n  }\n\n  get groups(): ButtonToolbarGroup[] {\n    const groupsAttr = this.getAttribute('groups');\n    if (groupsAttr) {\n      try {\n        return JSON.parse(groupsAttr);\n      } catch (e) {\n        console.error('Invalid groups format:', e);\n        return [];\n      }\n    }\n    return this._groups;\n  }\n\n  set groups(value: ButtonToolbarGroup[]) {\n    this._groups = value;\n    // Also update attribute for consistency, but be careful with large data\n    // For now, let's just render. If we want to sync property to attribute:\n    // this.setAttribute('groups', JSON.stringify(value));\n    // But usually for complex data, property is preferred source of truth if set directly.\n    \n    // SmartSelect implementation:\n    // set options ( opts: SelectOption[] ) {\n    //   this.setAttribute( 'options', JSON.stringify( opts ) );\n    // }\n    \n    // I'll follow SmartSelect pattern for consistency\n    this.setAttribute('groups', JSON.stringify(value));\n  }\n\n  connectedCallback(): void {\n    this.render();\n  }\n\n  private handleButtonClick(item: ButtonToolbarItem, event: Event): void {\n    if (item.disabled) return;\n    \n    this.dispatchEvent(new CustomEvent('button-click', {\n      detail: {\n        id: item.id,\n        action: item.action || item.id,\n        originalEvent: event,\n        item\n      },\n      bubbles: true,\n      composed: true\n    }));\n  }\n\n  private render(): void {\n    if (!this.shadowRoot) return;\n\n    const style = `\n      :host {\n        display: block;\n        font-family: var(--liwe3-font-family, system-ui, -apple-system, sans-serif);\n      }\n\n      .toolbar {\n        display: flex;\n        gap: var(--liwe3-toolbar-gap, 0.5rem);\n        width: 100%;\n        box-sizing: border-box;\n      }\n\n      .toolbar.horizontal {\n        flex-direction: row;\n        align-items: center;\n      }\n\n      .toolbar.vertical {\n        flex-direction: column;\n        align-items: stretch;\n      }\n\n      .group {\n        display: flex;\n        gap: 1px; /* Gap between buttons in a group */\n        background-color: var(--liwe3-toolbar-group-bg, transparent);\n        border-radius: var(--liwe3-toolbar-radius, 0.375rem);\n        overflow: hidden;\n      }\n\n      .toolbar.horizontal .group {\n        flex-direction: row;\n      }\n\n      .toolbar.vertical .group {\n        flex-direction: column;\n      }\n\n      .button {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: 0.5rem;\n        padding: var(--liwe3-button-padding, 0.5rem 1rem);\n        border: none;\n        cursor: pointer;\n        font-size: var(--liwe3-button-font-size, 0.875rem);\n        line-height: 1.25;\n        transition: all 0.2s;\n        background-color: var(--liwe3-button-bg, #f3f4f6);\n        color: var(--liwe3-button-color, #1f2937);\n        min-height: var(--liwe3-button-height, 2.5rem);\n      }\n\n      .button:hover:not(:disabled) {\n        filter: brightness(0.95);\n      }\n\n      .button:active:not(:disabled) {\n        filter: brightness(0.9);\n      }\n\n      .button:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n\n      /* Button Types */\n      .button.default {\n        background-color: var(--liwe3-button-default-bg, #f3f4f6);\n        color: var(--liwe3-button-default-color, #1f2937);\n      }\n\n      .button.info {\n        background-color: var(--liwe3-button-info-bg, #3b82f6);\n        color: var(--liwe3-button-info-color, #ffffff);\n      }\n\n      .button.error {\n        background-color: var(--liwe3-button-error-bg, #ef4444);\n        color: var(--liwe3-button-error-color, #ffffff);\n      }\n\n      .button.warn {\n        background-color: var(--liwe3-button-warn-bg, #f59e0b);\n        color: var(--liwe3-button-warn-color, #ffffff);\n      }\n      \n      .button.success {\n        background-color: var(--liwe3-button-success-bg, #10b981);\n        color: var(--liwe3-button-success-color, #ffffff);\n      }\n\n      /* Content styling */\n      .icon {\n        width: 1.25em;\n        height: 1.25em;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      \n      .icon svg {\n        width: 100%;\n        height: 100%;\n        fill: currentColor;\n      }\n\n      .image {\n        width: 1.5em;\n        height: 1.5em;\n        object-fit: cover;\n        border-radius: 50%;\n      }\n      \n      /* Group styling - rounded corners logic */\n      .toolbar.horizontal .group .button:first-child {\n        border-top-left-radius: var(--liwe3-toolbar-radius, 0.375rem);\n        border-bottom-left-radius: var(--liwe3-toolbar-radius, 0.375rem);\n      }\n      \n      .toolbar.horizontal .group .button:last-child {\n        border-top-right-radius: var(--liwe3-toolbar-radius, 0.375rem);\n        border-bottom-right-radius: var(--liwe3-toolbar-radius, 0.375rem);\n      }\n      \n      .toolbar.vertical .group .button:first-child {\n        border-top-left-radius: var(--liwe3-toolbar-radius, 0.375rem);\n        border-top-right-radius: var(--liwe3-toolbar-radius, 0.375rem);\n      }\n      \n      .toolbar.vertical .group .button:last-child {\n        border-bottom-left-radius: var(--liwe3-toolbar-radius, 0.375rem);\n        border-bottom-right-radius: var(--liwe3-toolbar-radius, 0.375rem);\n      }\n    `;\n\n    const renderButton = (item: ButtonToolbarItem) => {\n      const btn = document.createElement('button');\n      btn.className = `button ${item.type || 'default'}`;\n      if (item.disabled) btn.disabled = true;\n      if (item.tooltip) btn.title = item.tooltip;\n      \n      btn.onclick = (e) => this.handleButtonClick(item, e);\n\n      if (item.icon) {\n        const iconSpan = document.createElement('span');\n        iconSpan.className = 'icon';\n        // Check if it's an SVG string or just a class name (simple heuristic)\n        if (item.icon.trim().startsWith('<')) {\n          iconSpan.innerHTML = item.icon;\n        } else {\n          // Assuming it might be a class name if not SVG\n          const i = document.createElement('i');\n          i.className = item.icon;\n          iconSpan.appendChild(i);\n        }\n        btn.appendChild(iconSpan);\n      }\n\n      if (item.image) {\n        const img = document.createElement('img');\n        img.src = item.image;\n        img.className = 'image';\n        img.alt = item.label || '';\n        btn.appendChild(img);\n      }\n\n      if (item.label) {\n        const span = document.createElement('span');\n        span.textContent = item.label;\n        btn.appendChild(span);\n      }\n\n      return btn;\n    };\n\n    const container = document.createElement('div');\n    container.className = `toolbar ${this.orientation}`;\n\n    this._groups.forEach(group => {\n      const groupDiv = document.createElement('div');\n      groupDiv.className = `group ${group.class || ''}`;\n      \n      group.items.forEach(item => {\n        groupDiv.appendChild(renderButton(item));\n      });\n      \n      container.appendChild(groupDiv);\n    });\n\n    this.shadowRoot.innerHTML = `<style>${style}</style>`;\n    this.shadowRoot.appendChild(container);\n  }\n}\n\nexport const defineButtonToolbar = (): void => {\n  if (typeof window !== 'undefined' && !customElements.get('liwe3-button-toolbar')) {\n    customElements.define('liwe3-button-toolbar', ButtonToolbarElement);\n  }\n};\n"],"names":["ButtonToolbarElement","_name","oldValue","newValue","value","groupsAttr","e","item","event","style","renderButton","btn","iconSpan","i","img","span","container","group","groupDiv","defineButtonToolbar"],"mappings":"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"}

package/dist/CheckList.d.ts

@@ -0,0 +1,31 @@
+/**
+ * CheckList Web Component
+ * A customizable checklist with progress bar and JSON support
+ */
+export type CheckListItem = {
+    label: string;
+    checked: boolean;
+};
+export declare class CheckListElement extends HTMLElement {
+    shadowRoot: ShadowRoot;
+    private _items;
+    private _title;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get title(): string;
+    set title(value: string);
+    get items(): CheckListItem[];
+    set items(value: CheckListItem[]);
+    get percentage(): number;
+    loadJSON(json: string): void;
+    toJSON(): string;
+    private addItem;
+    private removeItem;
+    private toggleItem;
+    private updateItemLabel;
+    private render;
+    private bindEvents;
+}
+export declare const defineCheckList: (tagName?: string) => void;
+//# sourceMappingURL=CheckList.d.ts.map

package/dist/CheckList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckList.d.ts","sourceRoot":"","sources":["../src/CheckList.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,qBAAa,gBAAiB,SAAQ,WAAW;IACvC,UAAU,EAAE,UAAU,CAAC;IAC/B,OAAO,CAAC,MAAM,CAAuB;IACrC,OAAO,CAAC,MAAM,CAAuB;;IAQrC,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;IAejG,IAAI,KAAK,IAAK,MAAM,CAEnB;IAED,IAAI,KAAK,CAAG,KAAK,EAAE,MAAM,EAIxB;IAED,IAAI,KAAK,IAAK,aAAa,EAAE,CAE5B;IAED,IAAI,KAAK,CAAG,KAAK,EAAE,aAAa,EAAE,EAIjC;IAED,IAAI,UAAU,IAAK,MAAM,CAIxB;IAED,QAAQ,CAAG,IAAI,EAAE,MAAM,GAAI,IAAI;IAY/B,MAAM,IAAK,MAAM;IAOjB,OAAO,CAAC,OAAO;IAaf,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,MAAM;IA0Pd,OAAO,CAAC,UAAU;CA+DnB;AAED,eAAO,MAAM,eAAe,GAAK,UAAS,MAA0B,KAAI,IAIvE,CAAC"}

package/dist/CheckList.js

@@ -0,0 +1,336 @@
+class c extends HTMLElement {
+  constructor() {
+    super(), this._items = [], this._title = "Checklist", this.attachShadow({ mode: "open" }), this.render();
+  }
+  static get observedAttributes() {
+    return ["title", "items"];
+  }
+  attributeChangedCallback(t, e, i) {
+    if (e !== i) {
+      if (t === "title")
+        this._title = i || "Checklist";
+      else if (t === "items" && i)
+        try {
+          this._items = JSON.parse(i);
+        } catch (r) {
+          console.error("Invalid items JSON:", r);
+        }
+      this.render();
+    }
+  }
+  get title() {
+    return this._title;
+  }
+  set title(t) {
+    this._title = t, this.setAttribute("title", t), this.render();
+  }
+  get items() {
+    return [...this._items];
+  }
+  set items(t) {
+    this._items = [...t], this.render(), this.dispatchEvent(new CustomEvent("change", { detail: { items: this._items } }));
+  }
+  get percentage() {
+    if (this._items.length === 0) return 0;
+    const t = this._items.filter((e) => e.checked).length;
+    return Math.round(t / this._items.length * 100);
+  }
+  loadJSON(t) {
+    try {
+      const e = JSON.parse(t);
+      e.title && (this.title = e.title), e.items && Array.isArray(e.items) && (this.items = e.items);
+    } catch (e) {
+      console.error("Error loading JSON:", e);
+    }
+  }
+  toJSON() {
+    return JSON.stringify({
+      title: this.title,
+      items: this.items
+    }, null, 2);
+  }
+  addItem(t) {
+    t.trim() && (this._items.push({ label: t, checked: !1 }), this.render(), this.dispatchEvent(new CustomEvent("change", { detail: { items: this._items } })), requestAnimationFrame(() => {
+      const e = this.shadowRoot.querySelector(".add-item-input");
+      e && e.focus();
+    }));
+  }
+  removeItem(t) {
+    this._items.splice(t, 1), this.render(), this.dispatchEvent(new CustomEvent("change", { detail: { items: this._items } }));
+  }
+  toggleItem(t) {
+    this._items[t].checked = !this._items[t].checked, this.render(), this.dispatchEvent(new CustomEvent("change", { detail: { items: this._items } }));
+  }
+  updateItemLabel(t, e) {
+    this._items[t].label = e, this.dispatchEvent(new CustomEvent("change", { detail: { items: this._items } }));
+  }
+  render() {
+    const t = this.percentage, e = this._items.filter((n) => n.checked).length, i = this._items.length;
+    this.shadowRoot.querySelector(".list") || (this.shadowRoot.innerHTML = `
+        <style>
+          :host {
+            display: block;
+            font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+            background: var(--background, #fff);
+            border-radius: var(--border-radius, 8px);
+            padding: var(--padding, 16px);
+            box-shadow: var(--box-shadow, 0 2px 4px rgba(0,0,0,0.1));
+            max-width: var(--max-width, 100%);
+          }
+  
+          .header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 16px;
+          }
+  
+          .title {
+            font-size: 1.1rem;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            color: var(--text-color, #333);
+          }
+  
+          .title-icon {
+            width: 20px;
+            height: 20px;
+            fill: currentColor;
+          }
+  
+          .progress-container {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 20px;
+          }
+  
+          .progress-text {
+            font-size: 0.9rem;
+            font-weight: 600;
+            color: var(--text-color, #333);
+            min-width: 40px;
+          }
+  
+          .progress-bar-bg {
+            flex: 1;
+            height: 6px;
+            background: #e0e0e0;
+            border-radius: 3px;
+            overflow: hidden;
+          }
+  
+          .progress-bar-fill {
+            height: 100%;
+            background: var(--primary-color, #1976d2);
+            width: 0%;
+            transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+          }
+  
+          .list {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+          }
+  
+          .list-item {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 4px 0;
+          }
+  
+          .checkbox {
+            width: 20px;
+            height: 20px;
+            border: 2px solid #757575;
+            border-radius: 4px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s;
+            flex-shrink: 0;
+          }
+  
+          .checkbox.checked {
+            background: var(--primary-color, #1976d2);
+            border-color: var(--primary-color, #1976d2);
+          }
+  
+          .checkbox svg {
+            width: 14px;
+            height: 14px;
+            fill: white;
+            display: none;
+          }
+  
+          .checkbox.checked svg {
+            display: block;
+          }
+  
+          .item-input {
+            flex: 1;
+            padding: 8px 12px;
+            border: 1px solid #e0e0e0;
+            border-radius: 4px;
+            font-size: 0.95rem;
+            outline: none;
+            transition: border-color 0.2s;
+            color: var(--text-color, #333);
+          }
+  
+          .item-input:focus {
+            border-color: var(--primary-color, #1976d2);
+          }
+  
+          .item-input.add-item-input {
+            color: #666;
+          }
+          
+          .item-input.add-item-input::placeholder {
+            color: #999;
+          }
+  
+          .delete-btn {
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 4px;
+            color: #9e9e9e;
+            transition: color 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+  
+          .delete-btn:hover {
+            color: #f44336;
+          }
+  
+          .delete-btn svg {
+            width: 18px;
+            height: 18px;
+            fill: currentColor;
+          }
+  
+          .add-btn {
+            background: #f5f5f5;
+            border: none;
+            border-radius: 50%;
+            width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            color: #757575;
+            transition: background 0.2s;
+          }
+  
+          .add-btn:hover {
+            background: #e0e0e0;
+          }
+        </style>
+  
+        <div class="header">
+          <div class="title">
+            <svg class="title-icon" viewBox="0 0 24 24">
+              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+            </svg>
+            <span class="title-text">${this._title}</span>
+          </div>
+          <slot name="menu"></slot>
+        </div>
+  
+        <div class="progress-container">
+          <div class="progress-text"></div>
+          <div class="progress-bar-bg">
+            <div class="progress-bar-fill"></div>
+          </div>
+        </div>
+  
+        <div class="list"></div>
+      `);
+    const r = this.shadowRoot.querySelector(".title-text");
+    r && (r.textContent = this._title);
+    const s = this.shadowRoot.querySelector(".progress-text");
+    s && (s.textContent = `${e} / ${i}`);
+    const o = this.shadowRoot.querySelector(".progress-bar-fill");
+    o && (o.style.width = `${t}%`);
+    const l = this.shadowRoot.querySelector(".list");
+    l && (l.innerHTML = `
+        ${this._items.map((n, a) => `
+          <div class="list-item">
+            <div class="checkbox ${n.checked ? "checked" : ""}" data-index="${a}">
+              <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+            </div>
+            <input 
+              type="text" 
+              class="item-input" 
+              value="${n.label}" 
+              data-index="${a}"
+            >
+            <button class="delete-btn" data-index="${a}" title="Delete item">
+              <svg viewBox="0 0 24 24">
+                <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
+              </svg>
+            </button>
+          </div>
+        `).join("")}
+
+        <div class="list-item">
+          <div class="checkbox" style="border-color: transparent; cursor: default;"></div>
+          <input 
+            type="text" 
+            class="item-input add-item-input" 
+            placeholder="Add an item"
+          >
+          <div class="add-btn" title="Add item">
+            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
+            </svg>
+          </div>
+        </div>
+      `), this.bindEvents();
+  }
+  bindEvents() {
+    this.shadowRoot.querySelectorAll(".checkbox").forEach((i) => {
+      i.addEventListener("click", (r) => {
+        const s = r.currentTarget.dataset.index;
+        s !== void 0 && this.toggleItem(parseInt(s));
+      });
+    }), this.shadowRoot.querySelectorAll(".delete-btn").forEach((i) => {
+      i.addEventListener("click", (r) => {
+        const s = r.currentTarget.dataset.index;
+        s !== void 0 && this.removeItem(parseInt(s));
+      });
+    }), this.shadowRoot.querySelectorAll(".item-input:not(.add-item-input)").forEach((i) => {
+      i.addEventListener("input", (r) => {
+        const s = r.target, o = s.dataset.index;
+        o !== void 0 && this.updateItemLabel(parseInt(o), s.value);
+      });
+    });
+    const t = this.shadowRoot.querySelector(".add-item-input");
+    t && (t.addEventListener("keydown", (i) => {
+      i.key === "Enter" && (this.addItem(t.value), t.value = "");
+    }), t.addEventListener("blur", () => {
+      t.value.trim() && (this.addItem(t.value), t.value = "");
+    }));
+    const e = this.shadowRoot.querySelector(".add-btn");
+    e && t && e.addEventListener("click", () => {
+      t.value.trim() ? (this.addItem(t.value), t.value = "") : t.focus();
+    });
+  }
+}
+const h = (d = "liwe3-checklist") => {
+  typeof window < "u" && !window.customElements.get(d) && customElements.define(d, c);
+};
+h();
+export {
+  c as CheckListElement,
+  h as defineCheckList
+};
+//# sourceMappingURL=CheckList.js.map

package/dist/CheckList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckList.js","sources":["../src/CheckList.ts"],"sourcesContent":["/**\n * CheckList Web Component\n * A customizable checklist with progress bar and JSON support\n */\n\nexport type CheckListItem = {\n  label: string;\n  checked: boolean;\n};\n\nexport class CheckListElement extends HTMLElement {\n  declare shadowRoot: ShadowRoot;\n  private _items: CheckListItem[] = [];\n  private _title: string = 'Checklist';\n\n  constructor () {\n    super();\n    this.attachShadow( { mode: 'open' } );\n    this.render();\n  }\n\n  static get observedAttributes (): string[] {\n    return [ 'title', 'items' ];\n  }\n\n  attributeChangedCallback ( name: string, oldValue: string | null, newValue: string | null ): void {\n    if ( oldValue !== newValue ) {\n      if ( name === 'title' ) {\n        this._title = newValue || 'Checklist';\n      } else if ( name === 'items' && newValue ) {\n        try {\n          this._items = JSON.parse( newValue );\n        } catch ( e ) {\n          console.error( 'Invalid items JSON:', e );\n        }\n      }\n      this.render();\n    }\n  }\n\n  get title (): string {\n    return this._title;\n  }\n\n  set title ( value: string ) {\n    this._title = value;\n    this.setAttribute( 'title', value );\n    this.render();\n  }\n\n  get items (): CheckListItem[] {\n    return [ ...this._items ];\n  }\n\n  set items ( value: CheckListItem[] ) {\n    this._items = [ ...value ];\n    this.render();\n    this.dispatchEvent( new CustomEvent( 'change', { detail: { items: this._items } } ) );\n  }\n\n  get percentage (): number {\n    if ( this._items.length === 0 ) return 0;\n    const completed = this._items.filter( item => item.checked ).length;\n    return Math.round( ( completed / this._items.length ) * 100 );\n  }\n\n  loadJSON ( json: string ): void {\n    try {\n      const data = JSON.parse( json );\n      if ( data.title ) this.title = data.title;\n      if ( data.items && Array.isArray( data.items ) ) {\n        this.items = data.items;\n      }\n    } catch ( e ) {\n      console.error( 'Error loading JSON:', e );\n    }\n  }\n\n  toJSON (): string {\n    return JSON.stringify( {\n      title: this.title,\n      items: this.items\n    }, null, 2 );\n  }\n\n  private addItem ( label: string ): void {\n    if ( !label.trim() ) return;\n    this._items.push( { label, checked: false } );\n    this.render();\n    this.dispatchEvent( new CustomEvent( 'change', { detail: { items: this._items } } ) );\n    \n    // Focus the new add item input after rendering\n    requestAnimationFrame( () => {\n      const addInput = this.shadowRoot.querySelector( '.add-item-input' ) as HTMLInputElement;\n      if ( addInput ) addInput.focus();\n    } );\n  }\n\n  private removeItem ( index: number ): void {\n    this._items.splice( index, 1 );\n    this.render();\n    this.dispatchEvent( new CustomEvent( 'change', { detail: { items: this._items } } ) );\n  }\n\n  private toggleItem ( index: number ): void {\n    this._items[ index ].checked = !this._items[ index ].checked;\n    this.render();\n    this.dispatchEvent( new CustomEvent( 'change', { detail: { items: this._items } } ) );\n  }\n\n  private updateItemLabel ( index: number, label: string ): void {\n    this._items[ index ].label = label;\n    // We don't re-render here to avoid losing focus, just update the model\n    this.dispatchEvent( new CustomEvent( 'change', { detail: { items: this._items } } ) );\n  }\n\n  private render (): void {\n    const percentage = this.percentage;\n    const completedCount = this._items.filter( i => i.checked ).length;\n    const totalCount = this._items.length;\n\n    // Initial render of structure if needed\n    if ( !this.shadowRoot.querySelector( '.list' ) ) {\n      this.shadowRoot.innerHTML = `\n        <style>\n          :host {\n            display: block;\n            font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);\n            background: var(--background, #fff);\n            border-radius: var(--border-radius, 8px);\n            padding: var(--padding, 16px);\n            box-shadow: var(--box-shadow, 0 2px 4px rgba(0,0,0,0.1));\n            max-width: var(--max-width, 100%);\n          }\n  \n          .header {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            margin-bottom: 16px;\n          }\n  \n          .title {\n            font-size: 1.1rem;\n            font-weight: 600;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            color: var(--text-color, #333);\n          }\n  \n          .title-icon {\n            width: 20px;\n            height: 20px;\n            fill: currentColor;\n          }\n  \n          .progress-container {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            margin-bottom: 20px;\n          }\n  \n          .progress-text {\n            font-size: 0.9rem;\n            font-weight: 600;\n            color: var(--text-color, #333);\n            min-width: 40px;\n          }\n  \n          .progress-bar-bg {\n            flex: 1;\n            height: 6px;\n            background: #e0e0e0;\n            border-radius: 3px;\n            overflow: hidden;\n          }\n  \n          .progress-bar-fill {\n            height: 100%;\n            background: var(--primary-color, #1976d2);\n            width: 0%;\n            transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n          }\n  \n          .list {\n            display: flex;\n            flex-direction: column;\n            gap: 8px;\n          }\n  \n          .list-item {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            padding: 4px 0;\n          }\n  \n          .checkbox {\n            width: 20px;\n            height: 20px;\n            border: 2px solid #757575;\n            border-radius: 4px;\n            cursor: pointer;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            transition: all 0.2s;\n            flex-shrink: 0;\n          }\n  \n          .checkbox.checked {\n            background: var(--primary-color, #1976d2);\n            border-color: var(--primary-color, #1976d2);\n          }\n  \n          .checkbox svg {\n            width: 14px;\n            height: 14px;\n            fill: white;\n            display: none;\n          }\n  \n          .checkbox.checked svg {\n            display: block;\n          }\n  \n          .item-input {\n            flex: 1;\n            padding: 8px 12px;\n            border: 1px solid #e0e0e0;\n            border-radius: 4px;\n            font-size: 0.95rem;\n            outline: none;\n            transition: border-color 0.2s;\n            color: var(--text-color, #333);\n          }\n  \n          .item-input:focus {\n            border-color: var(--primary-color, #1976d2);\n          }\n  \n          .item-input.add-item-input {\n            color: #666;\n          }\n          \n          .item-input.add-item-input::placeholder {\n            color: #999;\n          }\n  \n          .delete-btn {\n            background: none;\n            border: none;\n            cursor: pointer;\n            padding: 4px;\n            color: #9e9e9e;\n            transition: color 0.2s;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n          }\n  \n          .delete-btn:hover {\n            color: #f44336;\n          }\n  \n          .delete-btn svg {\n            width: 18px;\n            height: 18px;\n            fill: currentColor;\n          }\n  \n          .add-btn {\n            background: #f5f5f5;\n            border: none;\n            border-radius: 50%;\n            width: 32px;\n            height: 32px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: pointer;\n            color: #757575;\n            transition: background 0.2s;\n          }\n  \n          .add-btn:hover {\n            background: #e0e0e0;\n          }\n        </style>\n  \n        <div class=\"header\">\n          <div class=\"title\">\n            <svg class=\"title-icon\" viewBox=\"0 0 24 24\">\n              <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/>\n            </svg>\n            <span class=\"title-text\">${ this._title }</span>\n          </div>\n          <slot name=\"menu\"></slot>\n        </div>\n  \n        <div class=\"progress-container\">\n          <div class=\"progress-text\"></div>\n          <div class=\"progress-bar-bg\">\n            <div class=\"progress-bar-fill\"></div>\n          </div>\n        </div>\n  \n        <div class=\"list\"></div>\n      `;\n    }\n\n    // Update Title\n    const titleText = this.shadowRoot.querySelector( '.title-text' );\n    if ( titleText ) titleText.textContent = this._title;\n\n    // Update Progress\n    const progressText = this.shadowRoot.querySelector( '.progress-text' );\n    if ( progressText ) progressText.textContent = `${ completedCount } / ${ totalCount }`;\n\n    const progressBar = this.shadowRoot.querySelector( '.progress-bar-fill' ) as HTMLElement;\n    if ( progressBar ) progressBar.style.width = `${ percentage }%`;\n\n    // Update List\n    const list = this.shadowRoot.querySelector( '.list' );\n    if ( list ) {\n      list.innerHTML = `\n        ${ this._items.map( ( item, index ) => `\n          <div class=\"list-item\">\n            <div class=\"checkbox ${ item.checked ? 'checked' : '' }\" data-index=\"${ index }\">\n              <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>\n            </div>\n            <input \n              type=\"text\" \n              class=\"item-input\" \n              value=\"${ item.label }\" \n              data-index=\"${ index }\"\n            >\n            <button class=\"delete-btn\" data-index=\"${ index }\" title=\"Delete item\">\n              <svg viewBox=\"0 0 24 24\">\n                <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\"/>\n              </svg>\n            </button>\n          </div>\n        `).join( '' ) }\n\n        <div class=\"list-item\">\n          <div class=\"checkbox\" style=\"border-color: transparent; cursor: default;\"></div>\n          <input \n            type=\"text\" \n            class=\"item-input add-item-input\" \n            placeholder=\"Add an item\"\n          >\n          <div class=\"add-btn\" title=\"Add item\">\n            <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"currentColor\">\n              <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"/>\n            </svg>\n          </div>\n        </div>\n      `;\n    }\n\n    this.bindEvents();\n  }\n\n  private bindEvents (): void {\n    // Checkbox toggle\n    this.shadowRoot.querySelectorAll( '.checkbox' ).forEach( checkbox => {\n      checkbox.addEventListener( 'click', ( e ) => {\n        const index = ( e.currentTarget as HTMLElement ).dataset.index;\n        if ( index !== undefined ) {\n          this.toggleItem( parseInt( index ) );\n        }\n      } );\n    } );\n\n    // Delete button\n    this.shadowRoot.querySelectorAll( '.delete-btn' ).forEach( btn => {\n      btn.addEventListener( 'click', ( e ) => {\n        const index = ( e.currentTarget as HTMLElement ).dataset.index;\n        if ( index !== undefined ) {\n          this.removeItem( parseInt( index ) );\n        }\n      } );\n    } );\n\n    // Item input update\n    this.shadowRoot.querySelectorAll( '.item-input:not(.add-item-input)' ).forEach( input => {\n      input.addEventListener( 'input', ( e ) => {\n        const target = e.target as HTMLInputElement;\n        const index = target.dataset.index;\n        if ( index !== undefined ) {\n          this.updateItemLabel( parseInt( index ), target.value );\n        }\n      } );\n    } );\n\n    // Add item input\n    const addInput = this.shadowRoot.querySelector( '.add-item-input' ) as HTMLInputElement;\n    if ( addInput ) {\n      addInput.addEventListener( 'keydown', ( e ) => {\n        if ( e.key === 'Enter' ) {\n          this.addItem( addInput.value );\n          addInput.value = '';\n        }\n      } );\n      \n      addInput.addEventListener( 'blur', () => {\n        if ( addInput.value.trim() ) {\n          this.addItem( addInput.value );\n          addInput.value = '';\n        }\n      } );\n    }\n    \n    // Add button click\n    const addBtn = this.shadowRoot.querySelector( '.add-btn' );\n    if ( addBtn && addInput ) {\n      addBtn.addEventListener( 'click', () => {\n        if ( addInput.value.trim() ) {\n          this.addItem( addInput.value );\n          addInput.value = '';\n        } else {\n          addInput.focus();\n        }\n      } );\n    }\n  }\n}\n\nexport const defineCheckList = ( tagName: string = 'liwe3-checklist' ): void => {\n  if ( typeof window !== 'undefined' && !window.customElements.get( tagName ) ) {\n    customElements.define( tagName, CheckListElement );\n  }\n};\n\ndefineCheckList();\n"],"names":["CheckListElement","name","oldValue","newValue","e","value","completed","item","json","data","label","addInput","index","percentage","completedCount","i","totalCount","titleText","progressText","progressBar","list","checkbox","btn","input","target","addBtn","defineCheckList","tagName"],"mappings":"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"}

package/dist/ChunkUploader.d.ts

@@ -19,8 +19,13 @@ export interface ChunkUploaderConfig {
     authToken?: string;
     validFiletypes?: string[];
     maxFileSize?: number;
+    labelDropFiles?: string;
+    labelBrowse?: string;
+    folder?: string;
+    compact?: boolean;
     onfilecomplete?: (file: UploadedFile) => void;
     onuploadcomplete?: (files: UploadedFile[]) => void;
+    parseResponse?: (response: any, endpoint: 'initiate' | 'part' | 'complete') => any;
 }
 export declare class ChunkUploaderElement extends HTMLElement {
     shadowRoot: ShadowRoot;
@@ -41,8 +46,25 @@ export declare class ChunkUploaderElement extends HTMLElement {
     set validFiletypes(value: string[] | undefined);
     get maxFileSize(): number;
     set maxFileSize(value: number);
+    get labelDropFiles(): string | undefined;
+    set labelDropFiles(value: string | undefined);
+    get labelBrowse(): string | undefined;
+    set labelBrowse(value: string | undefined);
+    get folder(): string | undefined;
+    set folder(value: string | undefined);
+    get compact(): boolean;
+    set compact(value: boolean);
     set onfilecomplete(callback: ((file: UploadedFile) => void) | undefined);
     set onuploadcomplete(callback: ((files: UploadedFile[]) => void) | undefined);
+    set parseResponse(callback: ((response: any, endpoint: 'initiate' | 'part' | 'complete') => any) | undefined);
+    /**
+     * Updates labels in the DOM when properties change
+     */
+    private updateLabels;
+    /**
+     * Updates compact mode styles and attributes
+     */
+    private updateCompactMode;
     /**
      * Formats bytes to human readable string
      */

package/dist/ChunkUploader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChunkUploader.d.ts","sourceRoot":"","sources":["../src/ChunkUploader.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,SAAS,GAAG,WAAW,GAAG,WAAW,GAAG,OAAO,GAAG,SAAS,CAAC;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,CAAE,IAAI,EAAE,YAAY,KAAM,IAAI,CAAC;IAChD,gBAAgB,CAAC,EAAE,CAAE,KAAK,EAAE,YAAY,EAAE,KAAM,IAAI,CAAC;CACtD;AAKD,qBAAa,oBAAqB,SAAQ,WAAW;IAC3C,UAAU,EAAE,UAAU,CAAC;IAC/B,OAAO,CAAC,KAAK,CAAwC;IACrD,OAAO,CAAC,MAAM,CAIZ;IACF,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,eAAe,CAAgC;;IASvD,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;IAuBjG,IAAI,SAAS,IAAK,MAAM,CAEvB;IAED,IAAI,SAAS,CAAG,KAAK,EAAE,MAAM,EAG5B;IAED,IAAI,SAAS,IAAK,MAAM,CAEvB;IAED,IAAI,SAAS,CAAG,KAAK,EAAE,MAAM,EAG5B;IAED,IAAI,SAAS,IAAK,MAAM,GAAG,SAAS,CAEnC;IAED,IAAI,SAAS,CAAG,KAAK,EAAE,MAAM,GAAG,SAAS,EAQxC;IAED,IAAI,cAAc,IAAK,MAAM,EAAE,GAAG,SAAS,CAE1C;IAED,IAAI,cAAc,CAAG,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,EAO/C;IAED,IAAI,WAAW,IAAK,MAAM,CAEzB;IAED,IAAI,WAAW,CAAG,KAAK,EAAE,MAAM,EAG9B;IAED,IAAI,cAAc,CAAG,QAAQ,EAAE,CAAE,CAAE,IAAI,EAAE,YAAY,KAAM,IAAI,CAAE,GAAG,SAAS,EAE5E;IAED,IAAI,gBAAgB,CAAG,QAAQ,EAAE,CAAE,CAAE,KAAK,EAAE,YAAY,EAAE,KAAM,IAAI,CAAE,GAAG,SAAS,EAEjF;IAED;;OAEG;IACH,OAAO,CAAC,WAAW;IAQnB;;OAEG;IACH,OAAO,CAAC,cAAc;IAItB;;OAEG;IACH,OAAO,CAAC,YAAY;IAwBpB;;OAEG;YACW,eAAe;IAW7B;;OAEG;YACW,QAAQ;IA0BtB;;OAEG;IACH,OAAO,CAAC,UAAU;IAKlB;;OAEG;YACW,UAAU;IAoIxB;;OAEG;YACW,WAAW;IA2DzB;;OAEG;YACW,eAAe;IAiE7B;;OAEG;IACH,OAAO,CAAC,cAAc;IAoCtB;;OAEG;IACH,OAAO,CAAC,eAAe;IA6CvB;;OAEG;IACH,OAAO,CAAC,UAAU;IA6ClB;;OAEG;IACH,OAAO,CAAC,MAAM;CA8Qf;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAAK,gBAAgC,KAAI,IAIxE,CAAC"}
+{"version":3,"file":"ChunkUploader.d.ts","sourceRoot":"","sources":["../src/ChunkUploader.ts"],"names":[],"mappings":"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"}