ogm-viewer 0.3.0 → 0.5.0

package/dist/collection/assets/webawesome/styles/utilities/text.css

@@ -0,0 +1,262 @@
+@layer wa-utilities {
+  /* #region General ~~~~~ */
+  [class*='wa-body'] {
+    font-family: var(--wa-font-family-body);
+    font-weight: var(--wa-font-weight-body);
+    line-height: var(--wa-line-height-normal);
+  }
+
+  [class*='wa-heading'] {
+    font-family: var(--wa-font-family-heading);
+    font-weight: var(--wa-font-weight-heading);
+    line-height: var(--wa-line-height-condensed);
+    text-wrap: balance;
+  }
+
+  [class*='wa-caption'] {
+    color: var(--wa-color-text-quiet);
+    font-family: var(--wa-font-family-body);
+    font-weight: var(--wa-font-weight-body);
+    line-height: var(--wa-line-height-condensed);
+  }
+
+  [class*='wa-longform'] {
+    font-family: var(--wa-font-family-longform);
+    font-weight: var(--wa-font-weight-longform);
+    line-height: var(--wa-line-height-normal);
+  }
+
+  .wa-font-size-3xs,
+  .wa-body-3xs,
+  .wa-heading-3xs,
+  .wa-caption-3xs,
+  .wa-longform-3xs {
+    font-size: var(--wa-font-size-3xs);
+  }
+
+  .wa-font-size-2xs,
+  .wa-body-2xs,
+  .wa-heading-2xs,
+  .wa-caption-2xs,
+  .wa-longform-2xs {
+    font-size: var(--wa-font-size-2xs);
+  }
+
+  .wa-font-size-xs,
+  .wa-body-xs,
+  .wa-heading-xs,
+  .wa-caption-xs,
+  .wa-longform-xs {
+    font-size: var(--wa-font-size-xs);
+  }
+
+  .wa-font-size-s,
+  .wa-body-s,
+  .wa-heading-s,
+  .wa-caption-s,
+  .wa-longform-s {
+    font-size: var(--wa-font-size-s);
+  }
+
+  .wa-font-size-m,
+  .wa-body-m,
+  .wa-heading-m,
+  .wa-caption-m,
+  .wa-longform-m {
+    font-size: var(--wa-font-size-m);
+  }
+
+  .wa-font-size-l,
+  .wa-body-l,
+  .wa-heading-l,
+  .wa-caption-l,
+  .wa-longform-l {
+    font-size: var(--wa-font-size-l);
+  }
+
+  .wa-font-size-xl,
+  .wa-body-xl,
+  .wa-heading-xl,
+  .wa-caption-xl,
+  .wa-longform-xl {
+    font-size: var(--wa-font-size-xl);
+  }
+
+  .wa-font-size-2xl,
+  .wa-body-2xl,
+  .wa-heading-2xl,
+  .wa-caption-2xl,
+  .wa-longform-2xl {
+    font-size: var(--wa-font-size-2xl);
+  }
+
+  .wa-font-size-3xl,
+  .wa-body-3xl,
+  .wa-heading-3xl,
+  .wa-caption-3xl,
+  .wa-longform-3xl {
+    font-size: var(--wa-font-size-3xl);
+  }
+
+  .wa-font-size-4xl,
+  .wa-body-4xl,
+  .wa-heading-4xl,
+  .wa-caption-4xl,
+  .wa-longform-4xl {
+    font-size: var(--wa-font-size-4xl);
+  }
+
+  .wa-font-size-5xl,
+  .wa-body-5xl,
+  .wa-heading-5xl,
+  .wa-caption-5xl,
+  .wa-longform-5xl {
+    font-size: var(--wa-font-size-5xl);
+  }
+
+  .wa-font-weight-light {
+    font-weight: var(--wa-font-weight-light);
+  }
+
+  .wa-font-weight-normal {
+    font-weight: var(--wa-font-weight-normal);
+  }
+
+  .wa-font-weight-semibold {
+    font-weight: var(--wa-font-weight-semibold);
+  }
+
+  .wa-font-weight-bold {
+    font-weight: var(--wa-font-weight-bold);
+  }
+
+  .wa-color-text-normal {
+    color: var(--wa-color-text-normal);
+  }
+
+  .wa-color-text-quiet {
+    color: var(--wa-color-text-quiet);
+  }
+
+  .wa-color-text-link {
+    color: var(--wa-color-text-link);
+  }
+
+  .wa-text-truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .wa-text-nowrap,
+  .wa-text-wrap-nowrap {
+    text-wrap: nowrap;
+  }
+
+  .wa-text-balance,
+  .wa-text-wrap-balance {
+    text-wrap: balance;
+  }
+
+  @supports (text-wrap: pretty) {
+    .wa-text-pretty,
+    .wa-text-wrap-pretty {
+      text-wrap: pretty;
+    }
+  }
+
+  .wa-text-uppercase {
+    text-transform: uppercase;
+  }
+
+  .wa-text-lowercase {
+    text-transform: lowercase;
+  }
+
+  .wa-text-capitalize {
+    text-transform: capitalize;
+  }
+
+  .wa-text-start {
+    text-align: start;
+  }
+
+  .wa-text-center {
+    text-align: center;
+  }
+
+  .wa-text-end {
+    text-align: end;
+  }
+
+  .wa-text-justify {
+    text-align: justify;
+  }
+  /* #endregion */
+
+  /* #region Links ~~~~~~~ */
+  .wa-link {
+    color: var(--wa-color-text-link);
+    text-decoration: var(--wa-link-decoration-default);
+    -webkit-text-decoration: var(--wa-link-decoration-default);
+
+    @media (hover: hover) {
+      &:hover {
+        color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-mix-hover));
+        text-decoration: var(--wa-link-decoration-hover);
+        -webkit-text-decoration: var(--wa-link-decoration-hover);
+      }
+    }
+  }
+
+  .wa-link-plain {
+    color: var(--wa-color-text-normal);
+    text-decoration: none;
+
+    @media (hover: hover) {
+      &:hover {
+        color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+        text-decoration: none;
+      }
+    }
+  }
+  /* #endregion */
+
+  /* #region Lists ~~~~~~~ */
+  .wa-list-plain:is(ol, ul) {
+    list-style: none;
+    padding-inline-start: 0;
+
+    > li {
+      margin-inline-start: 0;
+    }
+  }
+  /* #endregion */
+
+  /* #region Form Controls */
+  .wa-form-control-label {
+    color: var(--wa-form-control-label-color);
+    font-weight: var(--wa-form-control-label-font-weight);
+    line-height: var(--wa-form-control-label-line-height);
+  }
+
+  .wa-form-control-value {
+    color: var(--wa-form-control-value-color);
+    font-weight: var(--wa-form-control-value-font-weight);
+    line-height: var(--wa-form-control-value-line-height);
+  }
+
+  .wa-form-control-placeholder {
+    color: var(--wa-form-control-placeholder-color);
+    font-weight: var(--wa-form-control-value-font-weight);
+    line-height: var(--wa-form-control-value-line-height);
+  }
+
+  .wa-form-control-hint {
+    color: var(--wa-form-control-hint-color);
+    font-weight: var(--wa-form-control-hint-font-weight);
+    font-size: var(--wa-font-size-smaller);
+    line-height: var(--wa-form-control-hint-line-height);
+  }
+  /* #endregion */
+}

package/dist/collection/assets/webawesome/styles/utilities/variants.css

@@ -0,0 +1,62 @@
+@layer wa-utilities {
+  :where(:root),
+  .wa-neutral {
+    --wa-color-fill-loud: var(--wa-color-neutral-fill-loud);
+    --wa-color-fill-normal: var(--wa-color-neutral-fill-normal);
+    --wa-color-fill-quiet: var(--wa-color-neutral-fill-quiet);
+    --wa-color-border-loud: var(--wa-color-neutral-border-loud);
+    --wa-color-border-normal: var(--wa-color-neutral-border-normal);
+    --wa-color-border-quiet: var(--wa-color-neutral-border-quiet);
+    --wa-color-on-loud: var(--wa-color-neutral-on-loud);
+    --wa-color-on-normal: var(--wa-color-neutral-on-normal);
+    --wa-color-on-quiet: var(--wa-color-neutral-on-quiet);
+  }
+
+  .wa-brand {
+    --wa-color-fill-loud: var(--wa-color-brand-fill-loud);
+    --wa-color-fill-normal: var(--wa-color-brand-fill-normal);
+    --wa-color-fill-quiet: var(--wa-color-brand-fill-quiet);
+    --wa-color-border-loud: var(--wa-color-brand-border-loud);
+    --wa-color-border-normal: var(--wa-color-brand-border-normal);
+    --wa-color-border-quiet: var(--wa-color-brand-border-quiet);
+    --wa-color-on-loud: var(--wa-color-brand-on-loud);
+    --wa-color-on-normal: var(--wa-color-brand-on-normal);
+    --wa-color-on-quiet: var(--wa-color-brand-on-quiet);
+  }
+
+  .wa-success {
+    --wa-color-fill-loud: var(--wa-color-success-fill-loud);
+    --wa-color-fill-normal: var(--wa-color-success-fill-normal);
+    --wa-color-fill-quiet: var(--wa-color-success-fill-quiet);
+    --wa-color-border-loud: var(--wa-color-success-border-loud);
+    --wa-color-border-normal: var(--wa-color-success-border-normal);
+    --wa-color-border-quiet: var(--wa-color-success-border-quiet);
+    --wa-color-on-loud: var(--wa-color-success-on-loud);
+    --wa-color-on-normal: var(--wa-color-success-on-normal);
+    --wa-color-on-quiet: var(--wa-color-success-on-quiet);
+  }
+
+  .wa-warning {
+    --wa-color-fill-loud: var(--wa-color-warning-fill-loud);
+    --wa-color-fill-normal: var(--wa-color-warning-fill-normal);
+    --wa-color-fill-quiet: var(--wa-color-warning-fill-quiet);
+    --wa-color-border-loud: var(--wa-color-warning-border-loud);
+    --wa-color-border-normal: var(--wa-color-warning-border-normal);
+    --wa-color-border-quiet: var(--wa-color-warning-border-quiet);
+    --wa-color-on-loud: var(--wa-color-warning-on-loud);
+    --wa-color-on-normal: var(--wa-color-warning-on-normal);
+    --wa-color-on-quiet: var(--wa-color-warning-on-quiet);
+  }
+
+  .wa-danger {
+    --wa-color-fill-loud: var(--wa-color-danger-fill-loud);
+    --wa-color-fill-normal: var(--wa-color-danger-fill-normal);
+    --wa-color-fill-quiet: var(--wa-color-danger-fill-quiet);
+    --wa-color-border-loud: var(--wa-color-danger-border-loud);
+    --wa-color-border-normal: var(--wa-color-danger-border-normal);
+    --wa-color-border-quiet: var(--wa-color-danger-border-quiet);
+    --wa-color-on-loud: var(--wa-color-danger-on-loud);
+    --wa-color-on-normal: var(--wa-color-danger-on-normal);
+    --wa-color-on-quiet: var(--wa-color-danger-on-quiet);
+  }
+}

package/dist/collection/assets/webawesome/styles/utilities/visually-hidden.css

@@ -0,0 +1,17 @@
+@layer wa-utilities {
+  .wa-visually-hidden:not(:focus-within),
+  .wa-visually-hidden-force,
+  .wa-visually-hidden-hint::part(hint),
+  .wa-visually-hidden-label::part(label),
+  .wa-visually-hidden-label::part(form-control-label) {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    clip: rect(0 0 0 0) !important;
+    clip-path: inset(50%) !important;
+    border: none !important;
+    overflow: hidden !important;
+    white-space: nowrap !important;
+    padding: 0 !important;
+  }
+}

package/dist/collection/assets/webawesome/styles/utilities.css

@@ -0,0 +1,17 @@
+@import url('layers.css');
+
+@import url('utilities/fouce.css');
+@import url('utilities/visually-hidden.css');
+@import url('utilities/scroll-lock.css');
+@import url('utilities/placeholder.css');
+@import url('utilities/align-items.css');
+@import url('utilities/justify-content.css');
+@import url('utilities/flex-wrap.css');
+@import url('utilities/border-radius.css');
+@import url('utilities/gap.css');
+@import url('utilities/text.css');
+@import url('utilities/layout.css');
+@import url('utilities/prose.css');
+
+@import url('utilities/size.css');
+@import url('utilities/variants.css');

package/dist/collection/assets/webawesome/styles/webawesome.css

@@ -0,0 +1,11 @@
+/* Cascade layers */
+@import url('layers.css');
+
+/* Native styles */
+@import url('native.css');
+
+/* CSS utilities */
+@import url('utilities.css');
+
+/* Theme */
+@import url('themes/default.css');

package/dist/collection/collection-manifest.json

@@ -1,9 +1,13 @@
 {
   "entries": [
+    "components/ogm-alerts/ogm-alerts.js",
+    "components/ogm-attributes/ogm-attributes.js",
     "components/ogm-image/ogm-image.js",
     "components/ogm-map/ogm-map.js",
     "components/ogm-menubar/ogm-menubar.js",
     "components/ogm-metadata/ogm-metadata.js",
+    "components/ogm-preview/ogm-preview.js",
+    "components/ogm-previews/ogm-previews.js",
     "components/ogm-settings/ogm-settings.js",
     "components/ogm-sidebar/ogm-sidebar.js",
     "components/ogm-viewer/ogm-viewer.js"

package/dist/collection/components/ogm-alerts/ogm-alerts.css

@@ -0,0 +1,51 @@
+/* Fill the space left by the preview it replaces and center the error within it */
+:host {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  place-items: center;
+  place-content: center;
+  background: var(--wa-color-surface-default);
+}
+
+.alerts {
+  padding: var(--wa-space-m);
+  max-width: 40rem;
+}
+
+.alert {
+  box-shadow: var(--wa-shadow-m);
+  align-items: start;
+}
+
+.alert::part(message) {
+  display: flex;
+  align-items: start;
+  gap: var(--wa-space-s);
+  width: 100%;
+}
+
+.content {
+  flex: auto;
+  min-width: 0;
+}
+
+.title {
+  display: block;
+  font-weight: var(--wa-font-weight-bold);
+}
+
+.message {
+  margin-top: var(--wa-space-3xs);
+  font-size: var(--wa-font-size-s);
+}
+
+.url {
+  margin-top: var(--wa-space-2xs);
+  font-family: var(--wa-font-family-code);
+  font-size: var(--wa-font-size-xs);
+  color: var(--wa-color-text-quiet);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/collection/components/ogm-alerts/ogm-alerts.js

@@ -0,0 +1,71 @@
+import { Host, h } from "@stencil/core";
+// Renders a single preview error, centered and filling its container. Used in place of a failed
+// preview (inside <ogm-preview>) or in place of the previews entirely (when the record fails to load).
+export class OgmAlerts {
+    theme;
+    error;
+    render() {
+        if (!this.error)
+            return null;
+        return (h(Host, { class: this.theme && `wa-${this.theme}` }, h("div", { class: "alerts", role: "alert", "aria-live": "assertive" }, h("wa-callout", { variant: "danger", appearance: "filled-outlined", class: "alert" }, h("wa-icon", { slot: "icon", name: "exclamation-triangle-fill", canvas: "auto" }), h("div", { class: "content" }, h("strong", { class: "title" }, this.error.title), h("div", { class: "message" }, this.error.message), this.error.url && (h("div", { class: "url", title: this.error.url }, this.error.url)))))));
+    }
+    static get is() { return "ogm-alerts"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ogm-alerts.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ogm-alerts.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme"
+            },
+            "error": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PreviewError",
+                    "resolved": "PreviewError",
+                    "references": {
+                        "PreviewError": {
+                            "location": "import",
+                            "path": "../../lib/errors",
+                            "id": "src/lib/errors.ts::PreviewError",
+                            "referenceLocation": "PreviewError"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+}

package/dist/collection/components/ogm-alerts/ogm-alerts.test.js

@@ -0,0 +1,26 @@
+import { render, describe, it, expect, h } from "@stencil/vitest";
+import { referenceError } from "../../lib/errors";
+// Mock a network failure on load
+const makeError = (url) => referenceError(new TypeError('Failed to fetch'), 'GeoJSON', url);
+describe('ogm-alerts', () => {
+    it('renders nothing when there is no error', async () => {
+        const { root } = await render(h("ogm-alerts", null));
+        const shadowRoot = root.shadowRoot;
+        expect(shadowRoot.querySelector('.alerts')).toBeNull();
+    });
+    it('renders a danger callout with the error title, message, and url', async () => {
+        const { root } = await render(h("ogm-alerts", { error: makeError('http://example.com/data.json') }));
+        const shadowRoot = root.shadowRoot;
+        const callout = shadowRoot.querySelector('wa-callout');
+        expect(callout).not.toBeNull();
+        expect(callout.getAttribute('variant')).toBe('danger');
+        expect(callout.textContent).toContain('GeoJSON');
+        expect(callout.textContent).toContain('CORS');
+        expect(callout.textContent).toContain('http://example.com/data.json');
+    });
+    it('omits the url line when the error has no url', async () => {
+        const { root } = await render(h("ogm-alerts", { error: makeError() }));
+        const shadowRoot = root.shadowRoot;
+        expect(shadowRoot.querySelector('.url')).toBeNull();
+    });
+});

package/dist/collection/components/ogm-attributes/ogm-attributes.css

@@ -0,0 +1,68 @@
+wa-scroller {
+  max-height: 200px;
+  overscroll-behavior: none;
+}
+
+.attribute-table {
+  font-family: var(--wa-font-family-code);
+  font-size: var(--wa-font-size-xs);
+  line-height: var(--wa-line-height-condensed);
+  word-wrap: break-word;
+  border-collapse: collapse;
+  border-style: hidden;
+  overflow: hidden;
+
+  th,
+  td {
+    border: var(--wa-panel-border-width) solid var(--wa-color-surface-border);
+    padding: 0.2em 0.5em;
+  }
+
+  .key {
+    max-width: 50%;
+    vertical-align: top;
+  }
+
+  .header,
+  .value {
+    word-wrap: anywhere;
+  }
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1em;
+
+  .count {
+    flex-shrink: 0;
+  }
+}
+
+.label {
+  font-size: var(--wa-font-size-s);
+  font-weight: var(--wa-font-weight-bold);
+  overflow: hidden;
+  min-width: 0;
+  max-width: 40ch;
+  width: 100%;
+  padding: 0.2em 0.5em;
+  display: flex;
+  justify-content: center;
+
+  div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+wa-button + .label {
+  max-width: 30ch;
+  padding: 0;
+}
+
+.count {
+  flex-shrink: 0;
+}