ogm-viewer 0.3.0 → 0.4.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,11 @@
 {
   "entries": [
+    "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-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-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;
+}

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

@@ -0,0 +1,112 @@
+import { h } from "@stencil/core";
+import Autolinker from "autolinker";
+const LABEL_KEYS = ['name', 'title', 'label', 'id'];
+const getFeatureLabel = (feature) => {
+    const originalKeys = Object.keys(feature.properties || {});
+    if (originalKeys.length === 0)
+        return;
+    const key = LABEL_KEYS.map(k => originalKeys.find(ok => ok.toLowerCase() === k)).find(Boolean);
+    if (key)
+        return feature.properties?.[key];
+};
+export class OgmAttributes {
+    features = [];
+    featureSelected;
+    currentIndex = 0;
+    onFeaturesChange() {
+        this.currentIndex = 0;
+    }
+    onCurrentIndexChange() {
+        const feature = this.features[this.currentIndex];
+        if (feature)
+            this.featureSelected.emit(feature);
+    }
+    render() {
+        if (this.features.length === 0)
+            return null;
+        const feature = this.features[this.currentIndex];
+        const multiple = this.features.length > 1;
+        const label = getFeatureLabel(feature);
+        return (h("wa-scroller", { orientation: "vertical" }, h("table", { class: "attribute-table" }, multiple && label ? (h("thead", null, h("tr", { class: "header" }, h("td", { colSpan: 2 }, h("div", { class: "pagination" }, h("wa-button", { appearance: "plain", disabled: this.currentIndex === 0, onClick: () => this.currentIndex-- }, h("wa-icon", { name: "arrow-left", label: "Previous feature", canvas: "auto" })), label && (h("div", { class: "label" }, h("div", null, label))), h("div", { class: "count" }, ' ', "(", this.currentIndex + 1, "/", this.features.length, ")"), h("wa-button", { appearance: "plain", disabled: this.currentIndex === this.features.length - 1, onClick: () => this.currentIndex++ }, h("wa-icon", { name: "arrow-right", label: "Next feature", canvas: "auto" }))))))) : (label && (h("thead", null, h("tr", { class: "header" }, h("td", { colSpan: 2 }, h("div", { class: "label" }, h("div", null, label))))))), h("tbody", null, Object.entries(feature.properties || {}).map(([key, value]) => (h("tr", { key: key }, h("td", { class: "key" }, key), h("td", { class: "value", innerHTML: Autolinker.link(value.toString(), { hashtag: false, mention: false, phone: false }) }))))))));
+    }
+    static get is() { return "ogm-attributes"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ogm-attributes.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ogm-attributes.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "features": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "MapGeoJSONFeature[]",
+                    "resolved": "MapGeoJSONFeature[]",
+                    "references": {
+                        "MapGeoJSONFeature": {
+                            "location": "import",
+                            "path": "maplibre-gl",
+                            "id": "node_modules::MapGeoJSONFeature",
+                            "referenceLocation": "MapGeoJSONFeature"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "featureSelected",
+                "name": "featureSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "MapGeoJSONFeature",
+                    "resolved": "GeoJSONFeature & { layer: (Omit<FillLayerSpecification, \"source\"> | Omit<LineLayerSpecification, \"source\"> | Omit<SymbolLayerSpecification, \"source\"> | Omit<CircleLayerSpecification, \"source\"> | Omit<HeatmapLayerSpecification, \"source\"> | Omit<FillExtrusionLayerSpecification, \"source\"> | Omit<RasterLayerSpecification, \"source\"> | Omit<HillshadeLayerSpecification, \"source\"> | Omit<ColorReliefLayerSpecification, \"source\"> | Omit<BackgroundLayerSpecification, \"source\">) & { source: string; }; source: string; sourceLayer?: string; state: { [key: string]: any; }; }",
+                    "references": {
+                        "MapGeoJSONFeature": {
+                            "location": "import",
+                            "path": "maplibre-gl",
+                            "id": "node_modules::MapGeoJSONFeature",
+                            "referenceLocation": "MapGeoJSONFeature"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "features",
+                "methodName": "onFeaturesChange"
+            }, {
+                "propName": "currentIndex",
+                "methodName": "onCurrentIndexChange"
+            }];
+    }
+}

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

@@ -7,7 +7,7 @@
 
 #openseadragon {
   height: 100%;
-  background-color: var(--sl-panel-background-color);
+  background-color: var(--wa-color-surface-raised);
 }
 
 .controls {

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

@@ -3,7 +3,7 @@ import { Viewer } from "openseadragon";
 import { getElement, findElement } from "../../lib/elements";
 export class OgmImage {
     el;
-    record;
+    source;
     theme;
     padding = 0;
     imageLoaded;
@@ -27,12 +27,12 @@ export class OgmImage {
             previousButton: getElement(this.el, '.prev'),
         });
         this.viewer.addHandler('open', () => this.imageLoaded.emit());
-        if (this.record)
+        if (this.source)
             await this.loadImages();
     }
-    // Update preview when record changes
-    async onRecordChange() {
-        if (this.record)
+    // Update preview when source changes
+    async onSourceChange() {
+        if (this.source)
             await this.loadImages();
     }
     async onPaddingChange() {
@@ -47,13 +47,13 @@ export class OgmImage {
     // This makes a request to fetch and cache the manifest
     async loadImages() {
         this.imageLoading.emit();
-        const images = await this.record.references.iiifImageUrls();
+        const images = await this.source.getIIIFImageUrls();
         if (!images)
-            throw new Error('No IIIF images found for record');
+            throw new Error('No IIIF images found for source');
         this.viewer.open(images);
     }
     render() {
-        return (h(Host, { key: 'c28429837984f688efbd0fd7be5d2c22cb213109' }, h("div", { key: 'ab4de1759a7d962840674d248cf9a15bc5f4e2b2', id: "openseadragon" }, h("div", { key: '59be4dd45b938f81787239162295de0f3db50401', class: "controls" }, h("sl-button", { key: '14bda0b404dd75a43d146ffa835ce82fbc338655', class: "zoom-in", size: "small", circle: true }, h("sl-icon", { key: '620b15a8ecca41fe547d2aa9a85b190aedfee4bf', name: "zoom-in", label: "Zoom In" })), h("sl-button", { key: 'e12c3c58fd65e04fc2568f941aab72101d443bf8', class: "zoom-out", size: "small", circle: true }, h("sl-icon", { key: '99938bb923d76ebd30f4aa344d714deabdd16e6b', name: "zoom-out", label: "Zoom Out" })), h("sl-button", { key: '2836926f056be59df8c74034c032edea1a2b42f6', class: "home", size: "small", circle: true }, h("sl-icon", { key: 'a1e532707374c5161462483e7b0ff84d62ac28b2', name: "house", label: "Reset View" })), h("sl-button", { key: 'a328228cf8b5ca07d08d972c066ad6cba7cb76d1', class: "full-page", size: "small", circle: true }, h("sl-icon", { key: '743ba0fa2af8df3fe00e037c1e2d89db328001f1', name: "arrows-fullscreen", label: "Full Screen" })), h("sl-button", { key: '100f2e7be8b44aab83e9e99de2f04d6897a2e5a6', class: "next", size: "small", circle: true }, h("sl-icon", { key: 'f1b9f5c24913f27b41e5dfa665bd62764f597a20', name: "arrow-right", label: "Next" })), h("sl-button", { key: '0b6c31c6af12718d256703f4f3b47d1879c14d9a', class: "prev", size: "small", circle: true }, h("sl-icon", { key: '1d9dce41e3dfd2be557417a19309f3fc888a84a2', name: "arrow-left", label: "Previous" }))))));
+        return (h(Host, { key: '155b1ad9e24bc0148c90fa6c0d456a09437e08b6' }, h("div", { key: 'e0cf7750187e9a322f72c59a23f40e5897f31756', id: "openseadragon" }, h("div", { key: '59fadbbbe2e10fa53a0e1a3b311eef2c483d0800', class: "controls" }, h("wa-button", { key: '8c2323085fef8326b663c26aaa42dee935b09f0b', class: "zoom-in", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: '129a1e11cf602e922a977a35c9d1001cfb64dc4c', name: "zoom-in", label: "Zoom In", canvas: "auto" })), h("wa-button", { key: '944656ac675915dc589ed72b7cc76a9273a6dc5f', class: "zoom-out", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: 'b76f8cda3420937d45431e9d41a3eeac116b9fad', name: "zoom-out", label: "Zoom Out", canvas: "auto" })), h("wa-button", { key: 'c1d11fae3106ef08de6e7de68fdfdcdbe28a06a0', class: "home", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: '1a6cc9c1f3b49ef2284faa0c506afe558bfc5e73', name: "house", label: "Reset View", canvas: "auto" })), h("wa-button", { key: '55924e70820e7118745115b08b8b0fce17ffd6c0', class: "full-page", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: '0e719e259f142cfec5a8fd0276f6beee2b522e51', name: "arrows-fullscreen", label: "Full Screen", canvas: "auto" })), h("wa-button", { key: '76335703d0b4e9944bde2d077e26db7fa3aba223', class: "next", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: 'a543fa9e9822eafb31c35700a1f19df8d23225b1', name: "arrow-right", label: "Next", canvas: "auto" })), h("wa-button", { key: 'a2680c1b66ecea112a01327af560fb1b49607d09', class: "prev", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: '00d8226e18ecb42471601b005f90198b8baa14d2', name: "arrow-left", label: "Previous", canvas: "auto" }))))));
     }
     static get is() { return "ogm-image"; }
     static get encapsulation() { return "shadow"; }
@@ -69,18 +69,16 @@ export class OgmImage {
     }
     static get properties() {
         return {
-            "record": {
+            "source": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "OgmRecord",
-                    "resolved": "OgmRecord",
+                    "original": "IIIFSource",
+                    "resolved": "IIIFSource",
                     "references": {
-                        "OgmRecord": {
-                            "location": "import",
-                            "path": "../../lib/record",
-                            "id": "src/lib/record.ts::OgmRecord",
-                            "referenceLocation": "OgmRecord"
+                        "IIIFSource": {
+                            "location": "global",
+                            "id": "global::IIIFSource"
                         }
                     }
                 },
@@ -170,8 +168,8 @@ export class OgmImage {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "record",
-                "methodName": "onRecordChange"
+                "propName": "source",
+                "methodName": "onSourceChange"
             }, {
                 "propName": "padding",
                 "methodName": "onPaddingChange"