@mosaicajs/components 0.1.0 → 0.3.0

package/dist/explorer.d.ts

@@ -211,6 +211,8 @@ export declare class MosaicaExplorer extends MosaicaElement {
     accessor subtitleField: string;
     /** The fields the item card shows before "Show all", in order, as for `<mosaica-item-card>`. Unset, the first three. */
     accessor cardFields: string;
+    /** The fields the item card draws as images, as for `<mosaica-item-card>`'s `image-fields`. */
+    accessor imageFields: string;
     /** The link template for the item card's Open button, as for `<mosaica-item-card>`. Without it or `open`, there is no Open button. */
     accessor openUrl: string;
     /** A function the item card calls when Open is pressed, as for `<mosaica-item-card>`. Takes precedence over `open-url`. */

package/dist/explorer.js

@@ -305,6 +305,9 @@ let MosaicaExplorer = (() => {
     let _cardFields_decorators;
     let _cardFields_initializers = [];
     let _cardFields_extraInitializers = [];
+    let _imageFields_decorators;
+    let _imageFields_initializers = [];
+    let _imageFields_extraInitializers = [];
     let _openUrl_decorators;
     let _openUrl_initializers = [];
     let _openUrl_extraInitializers = [];
@@ -448,6 +451,7 @@ let MosaicaExplorer = (() => {
             _titleField_decorators = [property({ attribute: 'title-field' })];
             _subtitleField_decorators = [property({ attribute: 'subtitle-field' })];
             _cardFields_decorators = [property({ attribute: 'card-fields' })];
+            _imageFields_decorators = [property({ attribute: 'image-fields' })];
             _openUrl_decorators = [property({ attribute: 'open-url' })];
             _open_decorators = [property({ attribute: false })];
             _budget_decorators = [property({ type: Number })];
@@ -500,6 +504,7 @@ let MosaicaExplorer = (() => {
             __esDecorate(this, null, _titleField_decorators, { kind: "accessor", name: "titleField", static: false, private: false, access: { has: obj => "titleField" in obj, get: obj => obj.titleField, set: (obj, value) => { obj.titleField = value; } }, metadata: _metadata }, _titleField_initializers, _titleField_extraInitializers);
             __esDecorate(this, null, _subtitleField_decorators, { kind: "accessor", name: "subtitleField", static: false, private: false, access: { has: obj => "subtitleField" in obj, get: obj => obj.subtitleField, set: (obj, value) => { obj.subtitleField = value; } }, metadata: _metadata }, _subtitleField_initializers, _subtitleField_extraInitializers);
             __esDecorate(this, null, _cardFields_decorators, { kind: "accessor", name: "cardFields", static: false, private: false, access: { has: obj => "cardFields" in obj, get: obj => obj.cardFields, set: (obj, value) => { obj.cardFields = value; } }, metadata: _metadata }, _cardFields_initializers, _cardFields_extraInitializers);
+            __esDecorate(this, null, _imageFields_decorators, { kind: "accessor", name: "imageFields", static: false, private: false, access: { has: obj => "imageFields" in obj, get: obj => obj.imageFields, set: (obj, value) => { obj.imageFields = value; } }, metadata: _metadata }, _imageFields_initializers, _imageFields_extraInitializers);
             __esDecorate(this, null, _openUrl_decorators, { kind: "accessor", name: "openUrl", static: false, private: false, access: { has: obj => "openUrl" in obj, get: obj => obj.openUrl, set: (obj, value) => { obj.openUrl = value; } }, metadata: _metadata }, _openUrl_initializers, _openUrl_extraInitializers);
             __esDecorate(this, null, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
             __esDecorate(this, null, _budget_decorators, { kind: "accessor", name: "budget", static: false, private: false, access: { has: obj => "budget" in obj, get: obj => obj.budget, set: (obj, value) => { obj.budget = value; } }, metadata: _metadata }, _budget_initializers, _budget_extraInitializers);
@@ -1038,7 +1043,11 @@ let MosaicaExplorer = (() => {
         /** The fields the item card shows before "Show all", in order, as for `<mosaica-item-card>`. Unset, the first three. */
         get cardFields() { return this.#cardFields_accessor_storage; }
         set cardFields(value) { this.#cardFields_accessor_storage = value; }
-        #openUrl_accessor_storage = (__runInitializers(this, _cardFields_extraInitializers), __runInitializers(this, _openUrl_initializers, ''));
+        #imageFields_accessor_storage = (__runInitializers(this, _cardFields_extraInitializers), __runInitializers(this, _imageFields_initializers, ''));
+        /** The fields the item card draws as images, as for `<mosaica-item-card>`'s `image-fields`. */
+        get imageFields() { return this.#imageFields_accessor_storage; }
+        set imageFields(value) { this.#imageFields_accessor_storage = value; }
+        #openUrl_accessor_storage = (__runInitializers(this, _imageFields_extraInitializers), __runInitializers(this, _openUrl_initializers, ''));
         /** The link template for the item card's Open button, as for `<mosaica-item-card>`. Without it or `open`, there is no Open button. */
         get openUrl() { return this.#openUrl_accessor_storage; }
         set openUrl(value) { this.#openUrl_accessor_storage = value; }
@@ -1514,7 +1523,7 @@ let MosaicaExplorer = (() => {
          */
         itemCard(item, actions) {
             return html `<mosaica-item-card exportparts=${FORWARD['item-card']} compact .item=${item} .pick=${item ? null : (this.map?.lastPick ?? null)}
-      title-field=${this.titleField || nothing} subtitle-field=${this.subtitleField || nothing} card-fields=${this.cardFields || nothing} open-url=${this.openUrl || nothing} .open=${this.open}>${actions}</mosaica-item-card>`;
+      title-field=${this.titleField || nothing} subtitle-field=${this.subtitleField || nothing} card-fields=${this.cardFields || nothing} image-fields=${this.imageFields || nothing} open-url=${this.openUrl || nothing} .open=${this.open}>${actions}</mosaica-item-card>`;
         }
         /** Whether the card for the selection is the artifact card: the artifact, or its refusal, changed last. */
         showsArtifact() {

package/dist/item-card.d.ts

@@ -11,6 +11,11 @@ import { MosaicaElement, type PickOutcome } from './base.js';
  * empty. To render a field your own way, as a link for example, put an element in its
  * `field-<name>` slot.
  *
+ * A field named in `image-fields` whose value is an `http:` or `https:` address, or a path
+ * resolved against the page, is drawn as the image at that address, across the card's width. The viewer's browser loads it from the host
+ * that serves it, without a referrer. A value that is not such an address, and an image that does
+ * not load, are shown as text.
+ *
  * The Open button appears only when you set `open-url` or `open`. `open-url` is a link template
  * such as `https://www.geonames.org/{geonameid}`, in which each `{name}` is replaced by the item's
  * value for that field. Because the values are URL-encoded, a template cannot open an address that
@@ -43,6 +48,7 @@ import { MosaicaElement, type PickOutcome } from './base.js';
  * @csspart field - One field, with `data-name`, and `data-prose` on a value over 60 characters.
  * @csspart label - A field's name, and the heading above the view chips.
  * @csspart value - A field's value.
+ * @csspart image - A field's value drawn as an image, under `image-fields`.
  * @csspart scoped - The group-scoped values, grouped by key.
  * @csspart key - One key's heading among the group-scoped values, with `data-key`.
  * @csspart open - The Open button.
@@ -75,6 +81,11 @@ export declare class MosaicaItemCard extends MosaicaElement {
      * Unset, the first three. The full list shows these fields first, then the rest.
      */
     accessor cardFields: string;
+    /**
+     * The fields whose value is the address of an image, separated by spaces or commas. Each is drawn
+     * as its image rather than as text.
+     */
+    accessor imageFields: string;
     /**
      * The link template for Open, with `{name}` for the value of the field `name` and `{mosaica_id}`
      * for the item's id. Without it or `open`, there is no Open button.
@@ -85,6 +96,10 @@ export declare class MosaicaItemCard extends MosaicaElement {
     /** Whether "Show all" was pressed, for the item it was pressed on. @internal */
     accessor expanded: boolean;
     private expandedFor;
+    /** The image addresses that failed to load, shown as text. @internal */
+    accessor broken: ReadonlySet<string>;
+    /** `image-fields` as a list, kept in step by `willUpdate`. */
+    private imageNames;
     /** A category value's title as the store holds it, else from the legend or a suggestion page, else its key. */
     private titleOf;
     /** A field's value as text: a category value by its title, anything else by its declared type. */
@@ -105,6 +120,8 @@ export declare class MosaicaItemCard extends MosaicaElement {
     private openButton;
     /** The fields of `fields` that `card-fields` names, in its order. */
     private named;
+    /** The address of the image a field's value names, where `image-fields` lists the field. */
+    private imageOf;
     /** `fields` with those `card-fields` names first, in its order. */
     private namedFirst;
     /**
@@ -124,7 +141,7 @@ export declare class MosaicaItemCard extends MosaicaElement {
      * key through a `members` group share a heading.
      */
     private scoped;
-    /** One field, presented by its declared type; prose spans the grid. */
+    /** One field, presented by its declared type; prose and images span the grid. */
     private field;
 }
 declare global {

package/dist/item-card.js

@@ -49,6 +49,11 @@ import { chrome, tokens } from './tokens.js';
  * empty. To render a field your own way, as a link for example, put an element in its
  * `field-<name>` slot.
  *
+ * A field named in `image-fields` whose value is an `http:` or `https:` address, or a path
+ * resolved against the page, is drawn as the image at that address, across the card's width. The viewer's browser loads it from the host
+ * that serves it, without a referrer. A value that is not such an address, and an image that does
+ * not load, are shown as text.
+ *
  * The Open button appears only when you set `open-url` or `open`. `open-url` is a link template
  * such as `https://www.geonames.org/{geonameid}`, in which each `{name}` is replaced by the item's
  * value for that field. Because the values are URL-encoded, a template cannot open an address that
@@ -81,6 +86,7 @@ import { chrome, tokens } from './tokens.js';
  * @csspart field - One field, with `data-name`, and `data-prose` on a value over 60 characters.
  * @csspart label - A field's name, and the heading above the view chips.
  * @csspart value - A field's value.
+ * @csspart image - A field's value drawn as an image, under `image-fields`.
  * @csspart scoped - The group-scoped values, grouped by key.
  * @csspart key - One key's heading among the group-scoped values, with `data-key`.
  * @csspart open - The Open button.
@@ -112,6 +118,9 @@ let MosaicaItemCard = (() => {
     let _cardFields_decorators;
     let _cardFields_initializers = [];
     let _cardFields_extraInitializers = [];
+    let _imageFields_decorators;
+    let _imageFields_initializers = [];
+    let _imageFields_extraInitializers = [];
     let _openUrl_decorators;
     let _openUrl_initializers = [];
     let _openUrl_extraInitializers = [];
@@ -121,6 +130,9 @@ let MosaicaItemCard = (() => {
     let _expanded_decorators;
     let _expanded_initializers = [];
     let _expanded_extraInitializers = [];
+    let _broken_decorators;
+    let _broken_initializers = [];
+    let _broken_extraInitializers = [];
     return class MosaicaItemCard extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -132,9 +144,11 @@ let MosaicaItemCard = (() => {
             _compact_decorators = [property({ type: Boolean, reflect: true })];
             _subtitleField_decorators = [property({ attribute: 'subtitle-field' })];
             _cardFields_decorators = [property({ attribute: 'card-fields' })];
+            _imageFields_decorators = [property({ attribute: 'image-fields' })];
             _openUrl_decorators = [property({ attribute: 'open-url' })];
             _open_decorators = [property({ attribute: false })];
             _expanded_decorators = [state()];
+            _broken_decorators = [state()];
             __esDecorate(this, null, _item_decorators, { kind: "accessor", name: "item", static: false, private: false, access: { has: obj => "item" in obj, get: obj => obj.item, set: (obj, value) => { obj.item = value; } }, metadata: _metadata }, _item_initializers, _item_extraInitializers);
             __esDecorate(this, null, _refusal_decorators, { kind: "accessor", name: "refusal", static: false, private: false, access: { has: obj => "refusal" in obj, get: obj => obj.refusal, set: (obj, value) => { obj.refusal = value; } }, metadata: _metadata }, _refusal_initializers, _refusal_extraInitializers);
             __esDecorate(this, null, _pick_decorators, { kind: "accessor", name: "pick", static: false, private: false, access: { has: obj => "pick" in obj, get: obj => obj.pick, set: (obj, value) => { obj.pick = value; } }, metadata: _metadata }, _pick_initializers, _pick_extraInitializers);
@@ -143,9 +157,11 @@ let MosaicaItemCard = (() => {
             __esDecorate(this, null, _compact_decorators, { kind: "accessor", name: "compact", static: false, private: false, access: { has: obj => "compact" in obj, get: obj => obj.compact, set: (obj, value) => { obj.compact = value; } }, metadata: _metadata }, _compact_initializers, _compact_extraInitializers);
             __esDecorate(this, null, _subtitleField_decorators, { kind: "accessor", name: "subtitleField", static: false, private: false, access: { has: obj => "subtitleField" in obj, get: obj => obj.subtitleField, set: (obj, value) => { obj.subtitleField = value; } }, metadata: _metadata }, _subtitleField_initializers, _subtitleField_extraInitializers);
             __esDecorate(this, null, _cardFields_decorators, { kind: "accessor", name: "cardFields", static: false, private: false, access: { has: obj => "cardFields" in obj, get: obj => obj.cardFields, set: (obj, value) => { obj.cardFields = value; } }, metadata: _metadata }, _cardFields_initializers, _cardFields_extraInitializers);
+            __esDecorate(this, null, _imageFields_decorators, { kind: "accessor", name: "imageFields", static: false, private: false, access: { has: obj => "imageFields" in obj, get: obj => obj.imageFields, set: (obj, value) => { obj.imageFields = value; } }, metadata: _metadata }, _imageFields_initializers, _imageFields_extraInitializers);
             __esDecorate(this, null, _openUrl_decorators, { kind: "accessor", name: "openUrl", static: false, private: false, access: { has: obj => "openUrl" in obj, get: obj => obj.openUrl, set: (obj, value) => { obj.openUrl = value; } }, metadata: _metadata }, _openUrl_initializers, _openUrl_extraInitializers);
             __esDecorate(this, null, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
             __esDecorate(this, null, _expanded_decorators, { kind: "accessor", name: "expanded", static: false, private: false, access: { has: obj => "expanded" in obj, get: obj => obj.expanded, set: (obj, value) => { obj.expanded = value; } }, metadata: _metadata }, _expanded_initializers, _expanded_extraInitializers);
+            __esDecorate(this, null, _broken_decorators, { kind: "accessor", name: "broken", static: false, private: false, access: { has: obj => "broken" in obj, get: obj => obj.broken, set: (obj, value) => { obj.broken = value; } }, metadata: _metadata }, _broken_initializers, _broken_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static styles = [
@@ -225,9 +241,18 @@ let MosaicaItemCard = (() => {
       .head [part='state'] {
         min-height: 24px;
       }
-      [part='field'][data-prose] {
+      [part='field'][data-prose],
+      [part='field'][data-image] {
         grid-column: 1 / -1;
       }
+      [part='image'] {
+        display: block;
+        max-width: 100%;
+        max-height: 240px;
+        margin-top: 4px;
+        border-radius: 6px;
+        object-fit: contain;
+      }
       [part='field'][data-prose] [part='value'] {
         display: -webkit-box;
         -webkit-line-clamp: 6;
@@ -317,7 +342,14 @@ let MosaicaItemCard = (() => {
          */
         get cardFields() { return this.#cardFields_accessor_storage; }
         set cardFields(value) { this.#cardFields_accessor_storage = value; }
-        #openUrl_accessor_storage = (__runInitializers(this, _cardFields_extraInitializers), __runInitializers(this, _openUrl_initializers, ''));
+        #imageFields_accessor_storage = (__runInitializers(this, _cardFields_extraInitializers), __runInitializers(this, _imageFields_initializers, ''));
+        /**
+         * The fields whose value is the address of an image, separated by spaces or commas. Each is drawn
+         * as its image rather than as text.
+         */
+        get imageFields() { return this.#imageFields_accessor_storage; }
+        set imageFields(value) { this.#imageFields_accessor_storage = value; }
+        #openUrl_accessor_storage = (__runInitializers(this, _imageFields_extraInitializers), __runInitializers(this, _openUrl_initializers, ''));
         /**
          * The link template for Open, with `{name}` for the value of the field `name` and `{mosaica_id}`
          * for the item's id. Without it or `open`, there is no Open button.
@@ -333,6 +365,12 @@ let MosaicaItemCard = (() => {
         get expanded() { return this.#expanded_accessor_storage; }
         set expanded(value) { this.#expanded_accessor_storage = value; }
         expandedFor = (__runInitializers(this, _expanded_extraInitializers), null);
+        #broken_accessor_storage = __runInitializers(this, _broken_initializers, new Set());
+        /** The image addresses that failed to load, shown as text. @internal */
+        get broken() { return this.#broken_accessor_storage; }
+        set broken(value) { this.#broken_accessor_storage = value; }
+        /** `image-fields` as a list, kept in step by `willUpdate`. */
+        imageNames = (__runInitializers(this, _broken_extraInitializers), []);
         /** A category value's title as the store holds it, else from the legend or a suggestion page, else its key. */
         titleOf(field, key) {
             return this.resolvedStore?.heldTitle(field, key) ?? keyTitle(this.resolvedStore, field, key);
@@ -347,6 +385,8 @@ let MosaicaItemCard = (() => {
          */
         willUpdate(changed) {
             super.willUpdate(changed);
+            if (changed.has('imageFields'))
+                this.imageNames = listed(this.imageFields);
             const { item, meta } = this.shown;
             const id = item?.id ?? null;
             if (id !== this.expandedFor) {
@@ -484,8 +524,15 @@ let MosaicaItemCard = (() => {
         }
         /** The fields of `fields` that `card-fields` names, in its order. */
         named(fields) {
-            const names = this.cardFields.split(/[\s,]+/);
-            return names.filter((n, i) => n && fields.includes(n) && names.indexOf(n) === i);
+            const names = listed(this.cardFields);
+            return names.filter((n, i) => fields.includes(n) && names.indexOf(n) === i);
+        }
+        /** The address of the image a field's value names, where `image-fields` lists the field. */
+        imageOf(name, value) {
+            if (typeof value !== 'string' || !this.imageNames.includes(name))
+                return null;
+            const address = webAddress(value);
+            return address && !this.broken.has(address) ? address : null;
         }
         /** `fields` with those `card-fields` names first, in its order. */
         namedFirst(fields) {
@@ -547,12 +594,21 @@ let MosaicaItemCard = (() => {
           </div>`)}
     </div>`;
         }
-        /** One field, presented by its declared type; prose spans the grid. */
+        /** One field, presented by its declared type; prose and images span the grid. */
         field(name, value, column) {
+            const caption = column ? columnCaption(name) : name;
+            const image = this.imageOf(name, value);
+            if (image) {
+                const failed = () => (this.broken = new Set([...this.broken, image]));
+                return html `<div part="field" data-name=${name} data-image>
+        <span part="label" class="k">${caption}</span>
+        <slot name=${`field-${name}`}><img part="image" src=${image} alt=${caption} loading="lazy" referrerpolicy="no-referrer" @error=${failed} /></slot>
+      </div>`;
+            }
             const text = this.text(name, value, column);
             const prose = text.length > 60;
             return html `<div part="field" data-name=${name} ?data-prose=${prose} style=${prose ? nothing : 'display:contents'}>
-      <span part="label" class="k">${column ? columnCaption(name) : name}</span>
+      <span part="label" class="k">${caption}</span>
       <slot name=${`field-${name}`}><span part="value" class="v" title=${prose ? text : nothing}>${text}</span></slot>
     </div>`;
         }
@@ -573,15 +629,26 @@ function openAddress(template, values) {
                 missing = true;
             return encodeURIComponent(String(value));
         });
-        if (missing)
-            return null;
-        const url = new URL(filled, document.baseURI);
+        return missing ? null : webAddress(filled);
+    }
+    catch {
+        return null;
+    }
+}
+/** `text` resolved against the page, where it is an `http:` or `https:` address. */
+function webAddress(text) {
+    try {
+        const url = new URL(text, document.baseURI);
         return url.protocol === 'http:' || url.protocol === 'https:' ? url.href : null;
     }
     catch {
         return null;
     }
 }
+/** The names in a list separated by spaces or commas. */
+function listed(names) {
+    return names.split(/[\s,]+/).filter(Boolean);
+}
 /** A value as text, by the column's declared type. */
 function present(value, column) {
     if (value === null || value === undefined)