@jungherz-de/glasskit-elements 1.15.2 → 1.16.1

package/dist/components/glk-image-picker.js

@@ -0,0 +1,175 @@
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
+
+// One image with a preview, resized on the client before it goes anywhere.
+// Came back from EhrenPfoten in 1.16.0, where it was the photo picker.
+//
+// Attributes: src (starting image: URL or data URL), label (visible; names
+//             the group), hint (small muted line; none by default), round
+//             (circular preview, for avatars), max (longest edge after
+//             resizing, default 1024), type (output MIME, default
+//             image/jpeg; image/webp where the browser encodes it, PNG
+//             otherwise), quality (0–1, default 0.82), accept (file dialog
+//             filter, default image/*), choose-label, change-label,
+//             remove-label (button texts, English by default)
+// Property:   src — the current image as a data URL or the given URL; set
+//             it to swap the preview. Not reflected to the attribute, so a
+//             data URL of megabytes never lands in the DOM.
+// Events:     glk-change { dataUrl, width, height, size } — after a pick;
+//             on remove with an empty dataUrl and zeros
+//             glk-error { message, name } — when the file cannot be decoded
+//             (Chrome cannot read HEIC; a corrupt file)
+// Parts:      picker, preview, meta, label, hint, actions
+//
+// Decoding goes through createImageBitmap with imageOrientation 'from-image',
+// which applies the EXIF rotation of a phone photo without a library, then
+// onto a canvas no larger than max. The file input is hidden and opened from
+// a real button — a <label> around a hidden input cannot be reached by
+// keyboard — and cleared after every pick, so the same file can be chosen
+// again. Not form-associated: the form value would be either the original
+// file, which is not what gets uploaded, or a data URL of megabytes. Listen
+// to glk-change and upload, or copy the data URL into a hidden field.
+
+const PLACEHOLDER = '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="10" r="2"/><path d="M21 15l-5-4-8 8"/></svg>';
+
+function dataUrlBytes(url) {
+  const b64 = url.slice(url.indexOf(',') + 1);
+  const padding = b64.endsWith('==') ? 2 : b64.endsWith('=') ? 1 : 0;
+  return Math.floor((b64.length * 3) / 4) - padding;
+}
+
+class GlkImagePicker extends GlkElement {
+  static get observedAttributes() {
+    return ['src', 'label', 'hint', 'round', 'max', 'type', 'quality', 'accept', 'choose-label', 'change-label', 'remove-label'];
+  }
+
+  constructor() {
+    super();
+    this._src = '';
+  }
+
+  render() {
+    this._src = this.getAttribute('src') || '';
+    this._root = this.createElement('div', ['glass-image-picker'], { part: 'picker', role: 'group' });
+    this._preview = this.createElement('div', ['glass-image-picker__preview'], { part: 'preview' });
+    const meta = this.createElement('div', ['glass-image-picker__meta'], { part: 'meta' });
+    this._label = this.createElement('span', ['glass-image-picker__label'], { part: 'label', id: 'label' });
+    this._hint = this.createElement('span', ['glass-image-picker__hint'], { part: 'hint', id: 'hint' });
+    const actions = this.createElement('div', ['glass-image-picker__actions'], { part: 'actions' });
+    this._choose = this.createElement('button', ['glass-btn', 'glass-btn--secondary', 'glass-btn--sm', 'glass-btn--auto'], { type: 'button' });
+    this._remove = this.createElement('button', ['glass-btn', 'glass-btn--tertiary', 'glass-btn--sm', 'glass-btn--auto'], { type: 'button' });
+    this._input = this.createElement('input', [], { type: 'file', tabindex: '-1' });
+    this._input.hidden = true;
+    actions.append(this._choose, this._remove, this._input);
+    meta.append(this._label, this._hint, actions);
+    this._root.append(this._preview, meta);
+    this._wrapper.appendChild(this._root);
+    this._update();
+  }
+
+  get _max() { return Math.max(1, Math.floor(Number(this.getAttribute('max'))) || 1024); }
+  get _type() { return this.getAttribute('type') || 'image/jpeg'; }
+  get _quality() {
+    const q = Number(this.getAttribute('quality'));
+    return this.hasAttribute('quality') && q >= 0 && q <= 1 ? q : 0.82;
+  }
+
+  _update() {
+    if (!this._root) return;
+    const label = this.getAttribute('label') || '';
+    const hint = this.getAttribute('hint') || '';
+    this._preview.classList.toggle('glass-image-picker__preview--round', this.getBoolAttr('round'));
+    if (!this._src) {
+      this._img = null;
+      this._preview.innerHTML = PLACEHOLDER;
+    } else if (!this._img || this._img.getAttribute('src') !== this._src) {
+      this._img = this.createElement('img', [], { alt: '', src: this._src });
+      this._preview.replaceChildren(this._img);
+    }
+    this._label.textContent = label;
+    this._label.hidden = !label;
+    this._hint.textContent = hint;
+    this._hint.hidden = !hint;
+    if (label) this._root.setAttribute('aria-labelledby', 'label');
+    else this._root.removeAttribute('aria-labelledby');
+    if (hint) this._root.setAttribute('aria-describedby', 'hint');
+    else this._root.removeAttribute('aria-describedby');
+    this._choose.textContent = this._src
+      ? (this.getAttribute('change-label') || 'Change')
+      : (this.getAttribute('choose-label') || 'Choose');
+    this._remove.textContent = this.getAttribute('remove-label') || 'Remove';
+    this._remove.hidden = !this._src;
+    this._input.accept = this.getAttribute('accept') || 'image/*';
+  }
+
+  async _pick(file) {
+    if (!file) return;
+    try {
+      const bitmap = await createImageBitmap(file, { imageOrientation: 'from-image' });
+      const scale = Math.min(1, this._max / Math.max(bitmap.width, bitmap.height));
+      const canvas = document.createElement('canvas');
+      canvas.width = Math.max(1, Math.round(bitmap.width * scale));
+      canvas.height = Math.max(1, Math.round(bitmap.height * scale));
+      const ctx = canvas.getContext('2d');
+      if (this._type === 'image/jpeg') {
+        // JPEG has no alpha; without this a transparent PNG comes out on black.
+        ctx.fillStyle = '#fff';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+      }
+      ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+      bitmap.close();
+      const dataUrl = canvas.toDataURL(this._type, this._quality);
+      this.src = dataUrl;
+      this.emit('glk-change', { dataUrl, width: canvas.width, height: canvas.height, size: dataUrlBytes(dataUrl) });
+    } catch (error) {
+      this.emit('glk-error', { message: error?.message || String(error), name: file.name });
+    }
+  }
+
+  setupEvents() {
+    this._onChoose = () => this._input.click();
+    this._onChange = (event) => {
+      const file = event.target.files?.[0];
+      event.target.value = '';
+      this._pick(file);
+    };
+    this._onRemove = () => {
+      this.src = '';
+      this._choose.focus();   // the remove button just went away under the focus
+      this.emit('glk-change', { dataUrl: '', width: 0, height: 0, size: 0 });
+    };
+    this._choose.addEventListener('click', this._onChoose);
+    this._input.addEventListener('change', this._onChange);
+    this._remove.addEventListener('click', this._onRemove);
+  }
+
+  teardownEvents() {
+    this._choose?.removeEventListener('click', this._onChoose);
+    this._input?.removeEventListener('change', this._onChange);
+    this._remove?.removeEventListener('click', this._onRemove);
+  }
+
+  onAttributeChanged(name, _old, value) {
+    if (name === 'src') this._src = value || '';
+    this._update();
+  }
+
+  get src() { return this._src; }
+  set src(v) {
+    this._src = v || '';
+    this._update();
+  }
+
+  get label() { return this.getAttribute('label') || ''; }
+  set label(v) {
+    if (v) this.setAttribute('label', v);
+    else this.removeAttribute('label');
+  }
+
+  get round() { return this.getBoolAttr('round'); }
+  set round(v) { this.setBoolAttr('round', v); }
+}
+
+customElements.define('glk-image-picker', GlkImagePicker);
+
+export { GlkImagePicker };

package/dist/components/glk-list-item.js

@@ -49,7 +49,8 @@ class GlkListItem extends GlkElement {
     // Content — title + optional subtitle.
     this._content = this.createElement('div', ['glass-list__content']);
     this._titleEl = this.createElement('div', ['glass-list__title']);
-    this._titleEl.textContent = this.getAttribute('title') || '';
+    this.takeTitle();
+    this._titleEl.textContent = this._title || '';
     this._subtitleEl = this.createElement('div', ['glass-list__subtitle']);
     if (this.getBoolAttr('wrap')) this._subtitleEl.classList.add('glass-list__subtitle--wrap');
     const initialSubtitle = this.getAttribute('subtitle') || '';
@@ -115,11 +116,11 @@ class GlkListItem extends GlkElement {
     this._item?.removeEventListener('click', this._onClick);
   }
 
-  onAttributeChanged(name) {
+  onAttributeChanged(name, _old, value) {
     if (!this._item) return;
     switch (name) {
       case 'title':
-        this._titleEl.textContent = this.getAttribute('title') || '';
+        if (this.takeTitle(value)) this._applyTitle();
         break;
       case 'subtitle': {
         const value = this.getAttribute('subtitle') || '';
@@ -159,6 +160,17 @@ class GlkListItem extends GlkElement {
     }
   }
 
+  _applyTitle() {
+    if (this._titleEl) this._titleEl.textContent = this._title || '';
+  }
+
+  // `title` is the heading, never a tooltip — see GlkElement.takeTitle().
+  get title() { return this._title ?? ''; }
+  set title(v) {
+    this._title = v == null ? '' : String(v);
+    this._applyTitle();
+  }
+
   get interactive() { return this.getBoolAttr('interactive'); }
   set interactive(v) { this.setBoolAttr('interactive', v); }
 

package/dist/components/glk-modal.js

@@ -16,7 +16,8 @@ class GlkModal extends GlkElement {
     // Header
     const header = this.createElement('div', ['glass-modal__header'], { part: 'header' });
     this._titleEl = this.createElement('h2', ['glass-modal__title']);
-    this._titleEl.textContent = this.getAttribute('title') || '';
+    this.takeTitle();
+    this._applyTitle();
     header.appendChild(this._titleEl);
 
     // Body
@@ -85,14 +86,14 @@ class GlkModal extends GlkElement {
     document.removeEventListener('keydown', this._onKeydown);
   }
 
-  onAttributeChanged(name) {
+  onAttributeChanged(name, _old, value) {
     if (!this._overlay) return;
     switch (name) {
       case 'open':
         this._overlay.classList.toggle('is-active', this.getBoolAttr('open'));
         break;
       case 'title':
-        this._titleEl.textContent = this.getAttribute('title') || '';
+        if (this.takeTitle(value)) this._applyTitle();
         break;
     }
   }
@@ -100,6 +101,17 @@ class GlkModal extends GlkElement {
   show() { this.setAttribute('open', ''); }
   close() { this.removeAttribute('open'); }
 
+  _applyTitle() {
+    if (this._titleEl) this._titleEl.textContent = this._title || '';
+  }
+
+  // `title` is the heading, never a tooltip — see GlkElement.takeTitle().
+  get title() { return this._title ?? ''; }
+  set title(v) {
+    this._title = v == null ? '' : String(v);
+    this._applyTitle();
+  }
+
   get open() { return this.getBoolAttr('open'); }
   set open(v) { this.setBoolAttr('open', v); }
 }

package/dist/components/glk-sheet.js

@@ -38,12 +38,14 @@ class GlkSheet extends GlkElement {
     this._panel.append(this._titleEl, body, actions);
     this._overlay.appendChild(this._panel);
     this._wrapper.appendChild(this._overlay);
+    this.takeTitle();
     this._applyTitle();
     this._applyMode();
   }
 
   _applyTitle() {
-    const title = this.getAttribute('title') || '';
+    if (!this._titleEl) return;
+    const title = this._title || '';
     this._titleEl.textContent = title;
     this._titleEl.hidden = !title;
     if (title) this._panel.setAttribute('aria-label', title);
@@ -113,7 +115,7 @@ class GlkSheet extends GlkElement {
     document.removeEventListener('keydown', this._onKeydown);
   }
 
-  onAttributeChanged(name) {
+  onAttributeChanged(name, _old, value) {
     if (!this._overlay) return;
     switch (name) {
       case 'open':
@@ -122,13 +124,20 @@ class GlkSheet extends GlkElement {
         else this._hide();
         break;
       case 'inline': this._applyMode(); break;
-      case 'title': this._applyTitle(); break;
+      case 'title': if (this.takeTitle(value)) this._applyTitle(); break;
     }
   }
 
   show() { this.setAttribute('open', ''); }
   close() { this.removeAttribute('open'); }
 
+  // `title` is the heading, never a tooltip — see GlkElement.takeTitle().
+  get title() { return this._title ?? ''; }
+  set title(v) {
+    this._title = v == null ? '' : String(v);
+    this._applyTitle();
+  }
+
   get open() { return this.getBoolAttr('open'); }
   set open(v) { this.setBoolAttr('open', v); }
 

package/dist/components/shared/dates-CNWaJf09.js

@@ -0,0 +1,76 @@
+// Date helpers shared by <glk-date-strip> and <glk-calendar>. Everything
+// works on local calendar days — a date is "YYYY-MM-DD" in the element API
+// and a local Date inside — so a day never shifts across midnight the way a
+// UTC timestamp would. Names come from Intl, keyed by the element's locale
+// attribute or the browser language.
+
+const pad = n => String(n).padStart(2, '0');
+
+/** Local Date → "YYYY-MM-DD". */
+const isoDate = d => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+
+/** "YYYY-MM-DD" or "YYYY-MM" → local Date, or null when unreadable. */
+function parseIso(text) {
+  const m = /^(\d{4})-(\d{2})(?:-(\d{2}))?$/.exec(String(text ?? '').trim());
+  if (!m) return null;
+  const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3] ?? 1));
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+
+/** Days after a date; the Date constructor rolls over month and year ends. */
+const addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+
+/** A JSON object attribute → object; anything else → {}. */
+function parseJsonObject(text) {
+  try {
+    const v = JSON.parse(text || '{}');
+    return v && typeof v === 'object' && !Array.isArray(v) ? v : {};
+  } catch {
+    return {};
+  }
+}
+
+function resolveLocale(attr) {
+  return attr || (typeof navigator !== 'undefined' && navigator.language) || 'en';
+}
+
+// Intl formatters are cheap to keep and not to make; one set per locale.
+const cache = new Map();
+function formatters(locale) {
+  let f = cache.get(locale);
+  if (!f) {
+    try {
+      f = {
+        weekday: new Intl.DateTimeFormat(locale, { weekday: 'short' }),
+        day: new Intl.DateTimeFormat(locale, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }),
+        month: new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' })
+      };
+    } catch {
+      return formatters('en');   // an unknown locale tag throws a RangeError
+    }
+    cache.set(locale, f);
+  }
+  return f;
+}
+
+/** Short weekday without the trailing dot some locales add ("Mo." → "Mo"). */
+const weekdayShort = (f, d) => f.weekday.format(d).replace(/\.$/, '');
+
+/**
+ * First day of the week for a locale, 0 = Sunday … 6 = Saturday. Read from
+ * Intl.Locale where the browser has it (getWeekInfo(), or the older weekInfo
+ * accessor); Monday where it cannot say.
+ */
+function firstWeekday(locale) {
+  try {
+    const loc = new Intl.Locale(locale);
+    const info = typeof loc.getWeekInfo === 'function' ? loc.getWeekInfo() : loc.weekInfo;
+    if (info && info.firstDay >= 1 && info.firstDay <= 7) return info.firstDay % 7;
+  } catch { /* no Intl.Locale, or an unknown tag */ }
+  return 1;
+}
+
+/** A tone is a short lowercase token that becomes a __mark--<tone> modifier. */
+const isTone = v => typeof v === 'string' && /^[a-z][a-z0-9-]*$/.test(v);
+
+export { firstWeekday as a, parseJsonObject as b, addDays as c, isTone as d, formatters as f, isoDate as i, parseIso as p, resolveLocale as r, weekdayShort as w };