@teipublisher/pb-components 2.26.1-next.2 → 3.0.0-next-4.1

package/src/pb-i18n.js

@@ -1,167 +1,155 @@
-import { LitElement, html } from 'lit-element';
-import { directive, NodePart, AttributePart } from "lit-html";
-
-// Cache created lit-html parts, so we can update translations
-const partCache = new Map();
+import { LitElement, html } from 'lit';
 
 // The currently used i18next translation function
-let _translate;
+let _translateFn;
+// Bump whenever the translation function or resources change
+let _i18nVersion = 0;
+// Shared, tiny in-memory cache per-version (key+options)
+const _i18nCache = new Map();
 
-/** 
+/**
  * Called by pb-page before the first pb-i18n-update
  * to make sure the translation function is set.
  */
 export function initTranslation(translate) {
-    _translate = translate;
-}
-
-function isConnected(part) {
-    if (part instanceof NodePart) {
-        return part.startNode.isConnected;
-
-    }
-    if (part instanceof AttributePart) {
-        return part.committer.element.isConnected;
-
-    }
-    return part.element.isConnected;
+  _translateFn = translate;
+  _i18nVersion++;
+  _i18nCache.clear();
 }
 
-function removeDisconnectedParts() {
-    Object.keys(partCache).forEach((part) => {
-        if (!isConnected(part)) {
-            partCache.delete(part);
-        }
-    });
-}
-
-function whenIdle(cb) {
-    "requestIdleCallback" in window ? window.requestIdleCallback(cb) : setTimeout(cb)
-}
-
-function updatePart(part, cb) {
-
-    // Grab the new value
-    const newValue = cb();
-
-    // Only set the value if it has changed
-    if (part.value === newValue) {
-        return;
-    }
-
-    // Set the new value
-    part.setValue(newValue);
-    part.commit();
-}
-
-function updateParts(options) {
-    _translate = options.t;
-    partCache.forEach((cb, part) => {
-        if (isConnected(part)) {
-            updatePart(part, cb);
-        }
-    });
-}
+// No-op helpers kept for backward compatibility of API surface
 
 /**
  * Translate the given string using i18n.
- * 
+ *
  * @param {String} key The key to translate
  * @param {Object} [value] Optional object containing interpolation values
- * @returns 
+ * @returns {string}
  */
 export function get(key, value) {
-    if (_translate) {
-        return _translate(key, value);
-    }
-    return key;
+  if (_translateFn) return _translateFn(key, value);
+  return key;
 }
 
-export const langChanged = directive((cb) => (part) => {
-    partCache.set(part, cb);
-    updatePart(part, cb);
-});
-
 /**
  * lit-html directive to translate a given key into the target language
  * using i18next.
- * 
- * @param {String} key The key to translate
- * @param {Object} [value] Optional object containing interpolation values
+ *
+ * @param {String} key
+ * @param {Object} [value]
  */
-export const translate = (key, value) => langChanged(() => get(key, value));
-
-document.addEventListener('pb-i18n-update', (ev) => {
-    updateParts(ev.detail);
-});
-
-// start a background task to garbage collect parts
-setInterval(() => whenIdle(() => removeDisconnectedParts()), 1000 * 60);
+export const translate = (key, value) => get(key, value);
+
+// Keep _translateFn in sync on updates (guard for non-browser envs)
+if (typeof document !== 'undefined') {
+  document.addEventListener('pb-i18n-update', ev => {
+    const next = ev.detail?.t;
+    if (next && next !== _translateFn) {
+      _translateFn = next;
+    }
+    // Invalidate cache regardless (resources may have changed)
+    _i18nVersion++;
+    _i18nCache.clear();
+  });
+}
 
 /**
  * Insert translated text somewhere on an HTML page. If no translation is found,
  * display the contained content.
  */
 export class PbI18n extends LitElement {
-    static get properties() {
-        return {
-            ...super.properties,
-            /**
-             * The i18n key to use for looking up the translation.
-             */
-            key: {
-                type: String
-            },
-            /**
-             * Optional interpolation parameters to be passed to the
-             * translation function
-             */
-            options: {
-                type: Object
-            },
-            _translated: {
-                type: String
-            }
-        };
+  static get properties() {
+    return {
+      ...super.properties,
+      /**
+       * The i18n key to use for looking up the translation.
+       */
+      key: { type: String },
+      /**
+       * Optional interpolation parameters to be passed to the
+       * translation function
+       */
+      options: { type: Object },
+      _translated: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.key = 'missing-key';
+    this.options = null;
+    this._translated = null;
+    this._fallback = '';
+    // stable handler so we can remove it on disconnect
+    this._onI18nUpdate = () => this._recompute();
+    this._recomputeTimer = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Capture initial fallback then clear host content so Lit fully controls light DOM
+    if (!this._capturedFallback) {
+      this._fallback = this.innerHTML;
+      this._capturedFallback = true;
     }
+    this.innerHTML = '';
 
-    constructor() {
-        super();
-        this.key = 'missing-key';
-        this._options = null;
-        this._translated = null;
+    if (typeof document !== 'undefined') {
+      document.addEventListener('pb-i18n-update', this._onI18nUpdate);
     }
 
-    connectedCallback() {
-        super.connectedCallback();
-        
-        this._fallback = this.innerHTML;
-
-        document.addEventListener('pb-i18n-update', this._translate.bind(this));
+    this._scheduleRecompute();
+  }
 
-        this._translate();
+  disconnectedCallback() {
+    if (typeof document !== 'undefined') {
+      document.removeEventListener('pb-i18n-update', this._onI18nUpdate);
     }
-
-    set options(value) {
-        this._options = value;
-        this._translate();
+    if (this._recomputeTimer) {
+      clearTimeout(this._recomputeTimer);
+      this._recomputeTimer = null;
     }
+    super.disconnectedCallback();
+  }
 
-    _translate() {
-        const transl = get(this.key, this._options);
-        if (transl && transl !== this.key) {
-            this._translated = transl;
-        } else {
-            this._translated = null;
-        }
+  updated(changed) {
+    if (changed.has('key') || changed.has('options')) {
+      this._scheduleRecompute();
     }
-
-    render() {
-        return this._translated ? this._translated : this._fallback;
+  }
+
+  _scheduleRecompute() {
+    if (this._recomputeTimer) return;
+    // Small debounce to coalesce multiple updates and event bursts
+    this._recomputeTimer = setTimeout(() => {
+      this._recomputeTimer = null;
+      this._recompute();
+    }, 20);
+  }
+
+  _recompute() {
+    const opts = this.options || {};
+    const cacheKey = `${_i18nVersion}::${this.key}::${JSON.stringify(opts)}`;
+    if (_i18nCache.has(cacheKey)) {
+      this._translated = _i18nCache.get(cacheKey);
+      return;
     }
 
-    createRenderRoot() {
-        return this;
-    }
+    const result = get(this.key, opts);
+    const value = result && result !== this.key ? result : null;
+    _i18nCache.set(cacheKey, value);
+    this._translated = value;
+  }
+
+  render() {
+    // Return text (not HTML) so translations aren’t treated as markup
+    return this._translated ?? this._fallback;
+  }
+
+  // light DOM rendering (as before)
+  createRenderRoot() {
+    return this;
+  }
 }
-customElements.define('pb-i18n', PbI18n);
+customElements.define('pb-i18n', PbI18n);

package/src/pb-icon-button.js

@@ -0,0 +1,108 @@
+import { LitElement, html, css } from 'lit';
+import './pb-icon.js';
+
+const normalizeLabel = (value = '') => value.replace(/[-_]/g, ' ').trim();
+
+export class PbIconButton extends LitElement {
+  static properties = {
+    icon: { type: String },
+    disabled: { type: Boolean, reflect: true },
+    label: { type: String },
+    toggles: { type: Boolean },
+    active: { type: Boolean, reflect: true },
+  };
+
+  constructor() {
+    super();
+    this.icon = '';
+    this.disabled = false;
+    this.label = '';
+    this.toggles = false;
+    this.active = false;
+  }
+
+  render() {
+    const hostTitle = this.title || '';
+    const iconLabel = this.icon
+      ? normalizeLabel(this.icon.includes(':') ? this.icon.split(':').pop() : this.icon)
+      : '';
+    const ariaLabel = this.label || hostTitle || iconLabel;
+
+    return html`
+      <button
+        class="pb-button pb-button--icon"
+        type="button"
+        title=${hostTitle}
+        aria-label=${ariaLabel}
+        ?disabled=${this.disabled}
+        aria-pressed=${this.toggles ? String(this.active) : undefined}
+        @click=${this._handleClick}
+      >
+        ${this.icon
+          ? html`<pb-icon icon="${this.icon}" decorative></pb-icon>`
+          : html`<slot></slot>`}
+      </button>
+    `;
+  }
+
+  _handleClick(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      return;
+    }
+
+    if (this.toggles) {
+      this.active = !this.active;
+      this.dispatchEvent(
+        new CustomEvent('active-changed', {
+          detail: { value: this.active },
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    }
+  }
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      box-sizing: border-box;
+      --pb-icon-button-size: 40px;
+    }
+
+    button {
+      width: var(--pb-icon-button-size);
+      height: var(--pb-icon-button-size);
+      border-radius: 999px;
+      border: none;
+      background: transparent;
+      color: inherit;
+      padding: 0;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.2s ease-in-out;
+    }
+
+    button:hover:not(:disabled),
+    button:focus-visible {
+      background: var(--pb-icon-button-hover-background, rgba(0, 0, 0, 0.05));
+      outline: none;
+    }
+
+    button:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    :host([active]) button {
+      background: var(--pb-icon-button-active-background, rgba(0, 0, 0, 0.08));
+    }
+  `;
+}
+
+if (!customElements.get('pb-icon-button')) {
+  customElements.define('pb-icon-button', PbIconButton);
+}

package/src/pb-icon.js

@@ -0,0 +1,283 @@
+import { LitElement, html, css } from 'lit';
+
+if (!customElements.__pbDefineGuard) {
+  const originalDefine = customElements.define.bind(customElements);
+  customElements.define = (name, constructor, options) => {
+    if (customElements.get(name)) {
+      return;
+    }
+    originalDefine(name, constructor, options);
+  };
+  customElements.__pbDefineGuard = true;
+}
+
+const polymerIconMap = {
+  'icons:file-upload': 'upload',
+  'icons:file-download': 'download',
+  'icons:cloud-download': 'download',
+  'icons:clear': 'close',
+  'icons:check': 'check',
+  'icons:error-outline': 'warning',
+  'icons:folder-open': 'folder-open',
+  'icons:arrow-upward': 'arrow-upward',
+  'icons:arrow-forward': 'chevron-right',
+  'icons:arrow-back': 'chevron-left',
+  'icons:chevron-right': 'chevron-right',
+  'icons:chevron-left': 'chevron-left',
+  'icons:open-in-new': 'open-in-new',
+  'icons:flag': 'flag',
+  'icons:code': 'code',
+  'icons:hourglass-empty': 'clock',
+  'icons:delete': 'delete',
+  'icons:create': 'edit',
+  'icons:expand-more': 'expand-more',
+  'icons:expand-less': 'expand-less',
+  'icons:view-list': 'view-list',
+  'icons:zoom-in': 'zoom-in',
+  'icons:zoom-out': 'zoom-out',
+  'icons:content-copy': 'copy',
+  'content-copy': 'copy',
+  'icons:content-paste': 'content-paste',
+  'content-paste': 'content-paste',
+  'icons:arrow-downward': 'arrow-downward',
+  'icons:refresh': 'refresh',
+  'icons:save': 'save',
+};
+
+/**
+ * A versatile icon component that replaces iron-icon and iron-icons.
+ * Supports both SVG sprite references and inline SVG content.
+ *
+ * @example
+ * <!-- Using icon name (requires icon sprite) -->
+ * <pb-icon icon="expand-more"></pb-icon>
+ *
+ * <!-- Using external sprite (default dist/images/icons.svg) -->
+ * <pb-icon icon="expand-more" sprite="dist/images/icons.svg"></pb-icon>
+ *
+ * <!-- Using inline SVG -->
+ * <pb-icon>
+ *   <svg viewBox="0 0 24 24">
+ *     <path d="M7 10l5 5 5-5z"/>
+ *   </svg>
+ * </pb-icon>
+ *
+ * @slot - Inline SVG content when not using icon name
+ * @cssprop [--pb-icon-color] - Icon color (defaults to currentColor)
+ * @cssprop [--pb-icon-size] - Icon size (defaults to 1em)
+ */
+export class PbIcon extends LitElement {
+  static get properties() {
+    return {
+      /**
+       * Icon name to display from the icon sprite.
+       * If not provided, expects SVG content in the default slot.
+       */
+      icon: { type: String },
+
+      /**
+       * Path or URL to the SVG sprite file. Optional.
+       * If not specified, defaults to 'dist/images/icons.svg'.
+       * If set to a string starting with '#', uses inline sprite.
+       */
+      sprite: { type: String },
+      /**
+       * Icon size. Can be a preset (xs, sm, md, lg, xl) or a custom size.
+       */
+      size: { type: String },
+
+      /**
+       * ARIA label for accessibility. Auto-generated from icon name if not provided.
+       */
+      label: { type: String },
+
+      /**
+       * Whether the icon is decorative (hidden from screen readers).
+       */
+      decorative: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.icon = '';
+    this.size = '';
+    this.label = '';
+    this.decorative = false;
+    // Default sprite path: try to determine the correct base URL
+    try {
+      const isDev =
+        (typeof import.meta !== 'undefined' && import.meta.env && import.meta.env.DEV) ||
+        (typeof location !== 'undefined' && /localhost|127\.0\.0\.1/.test(location.hostname));
+      
+      if (isDev) {
+        // In dev mode, check if we're running in TEI Publisher context
+        const currentHost = window.location.hostname;
+        const currentPort = window.location.port;
+        
+        // If we're on the TEI Publisher port (8080), use the app's resources path
+        if (currentPort === '8080' || currentHost.includes('tei-publisher')) {
+          this.sprite = '/exist/apps/tei-publisher/resources/images/icons.svg';
+        } else {
+          // Otherwise use the Vite dev server path
+          this.sprite = '/images/icons.svg';
+        }
+      } else {
+        this.sprite = '/dist/images/icons.svg';
+      }
+    } catch (_) {
+      this.sprite = '/dist/images/icons.svg';
+    }
+  }
+
+  render() {
+    const sizeClass = this._getSizeClass();
+    const ariaLabel = this._getAriaLabel();
+
+    return html`
+      <span
+        class="pb-icon ${sizeClass}"
+        role="img"
+        aria-label="${ariaLabel}"
+        aria-hidden="${this.decorative ? 'true' : 'false'}"
+      >
+        ${this.icon ? this._renderSpriteIcon() : this._renderSlotIcon()}
+      </span>
+    `;
+  }
+
+  _renderSpriteIcon() {
+    const iconName = this._normalizeIconName(this.icon);
+    if (!iconName) {
+      return html``;
+    }
+    const href =
+      this.sprite && !this.sprite.startsWith('#')
+        ? `${this.sprite}#icon-${iconName}`
+        : `#icon-${iconName}`;
+    return html`
+      <svg
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+        aria-hidden="${this.decorative ? 'true' : 'false'}"
+      >
+        <use href="${href}"></use>
+      </svg>
+    `;
+  }
+
+  _renderSlotIcon() {
+    return html`<slot></slot>`;
+  }
+
+  _normalizeIconName(name) {
+    if (!name) return '';
+    const lower = name.toLowerCase();
+    if (polymerIconMap[lower]) {
+      return polymerIconMap[lower];
+    }
+    if (lower.includes(':')) {
+      return lower.split(':').pop();
+    }
+    return lower;
+  }
+
+  _getSizeClass() {
+    if (!this.size) return '';
+
+    const presetSizes = ['xs', 'sm', 'md', 'lg', 'xl'];
+    if (presetSizes.includes(this.size)) {
+      return `pb-icon--${this.size}`;
+    }
+
+    // Custom size - set CSS custom property
+    this.style.setProperty('--pb-icon-size', this.size);
+    return '';
+  }
+
+  _getAriaLabel() {
+    if (this.decorative) return '';
+    if (this.label) return this.label;
+    if (this.icon) {
+      const normalized = this._normalizeIconName(this.icon);
+      return normalized.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+    }
+    return 'Icon';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .pb-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--pb-icon-size, 1em);
+        height: var(--pb-icon-size, 1em);
+        color: var(--pb-icon-color, currentColor);
+        fill: currentColor;
+        flex-shrink: 0;
+        user-select: none;
+        line-height: 1;
+      }
+
+      .pb-icon svg {
+        width: 100%;
+        height: 100%;
+        fill: inherit;
+      }
+
+      /* Size variants */
+      .pb-icon--xs {
+        font-size: 12px;
+        width: 12px;
+        height: 12px;
+      }
+
+      .pb-icon--sm {
+        font-size: 16px;
+        width: 16px;
+        height: 16px;
+      }
+
+      .pb-icon--md {
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+      }
+
+      .pb-icon--lg {
+        font-size: 24px;
+        width: 24px;
+        height: 24px;
+      }
+
+      .pb-icon--xl {
+        font-size: 32px;
+        width: 32px;
+        height: 32px;
+      }
+
+      /* Ensure slotted SVGs are properly sized */
+      ::slotted(svg) {
+        width: 100%;
+        height: 100%;
+        fill: currentColor;
+      }
+    `;
+  }
+}
+
+if (!customElements.get('pb-icon')) {
+  customElements.define('pb-icon', PbIcon);
+}
+if (!customElements.get('iron-icon')) {
+  class PbIronIcon extends PbIcon {}
+  customElements.define('iron-icon', PbIronIcon);
+}