@penn-libraries/web 1.1.0 → 1.1.1-dev.2

package/dist/collection/components/pennlibs-iiif-img/pennlibs-iiif-img.js

@@ -0,0 +1,432 @@
+import { h } from "@stencil/core";
+const PIXEL_DENSITIES = [1, 1.5, 2];
+/**
+ * Display responsive, high-quality images from Penn Libraries' IIIF Image API 3.0 server.
+ * Measures its own rendered width and automatically generates optimal image sources at
+ * multiple pixel densities (1x, 1.5x, 2x) with modern WebP format and JPG fallback support.
+ *
+ * @component
+ * @example
+ * <pennlibs-iiif-img
+ *   uuid="063ff35c-bbdd-4b63-bbdd-6206590e20d5"
+ *   alt="">
+ * </pennlibs-iiif-img>
+ */
+export class IIIFImg {
+    constructor() {
+        /**
+         * The IIIF [region](https://iiif.io/api/image/3.0/#41-region) of the image to display.
+         * Defines the rectangular portion of the underlying image to return.
+         *
+         * `full`: The full image is returned, without any cropping.
+         *
+         * `square`: A square area where width and height equal the shorter dimension.
+         *
+         * `width:height`: Any aspect ratio format (e.g., `16:9`, `4:3`, `3:2`, `21:9`) applies
+         * a centered crop based on the source image dimensions and sets the CSS aspect-ratio
+         * property for layout reservation.
+         *
+         * `x,y,w,h`: Absolute pixel coordinates (x, y position; w, h dimensions).
+         *
+         * `pct:x,y,w,h`: Percentage-based coordinates of full image dimensions.
+         *
+         * @default 'full'
+         */
+        this.region = 'full';
+        /**
+         * The IIIF [rotation](https://iiif.io/api/image/3.0/#44-rotation) to apply to the image.
+         * Specifies mirroring and clockwise rotation in degrees (0-360).
+         *
+         * `n`: Rotation in degrees only.
+         *
+         * `!n`: Mirror the image vertically, then rotate by n degrees.
+         *
+         * @default '0'
+         */
+        this.rotation = '0';
+        /**
+         * The IIIF [quality](https://iiif.io/api/image/3.0/#quality) of the image.
+         * Controls the color delivery mode.
+         *
+         * `default`: The server's default quality.
+         *
+         * `color`: Full color information.
+         *
+         * `gray`: Grayscale rendering.
+         *
+         * `bitonal`: Black and white only.
+         *
+         * @default 'default'
+         */
+        this.quality = 'default';
+        /**
+         * Native browser lazy loading behavior. Use "lazy" to defer loading until the image is near the viewport,
+         * or "eager" to load immediately.
+         * @default 'lazy'
+         */
+        this.loading = 'lazy';
+        /**
+         * Whether to display a fallback placeholder image when the IIIF image fails to load.
+         * @default true
+         */
+        this.showFallback = true;
+        this.isLoaded = false;
+        this.hasError = false;
+        this.baseUrl = 'https://iiif-images.library.upenn.edu/iiif/3';
+        this.handleLoad = () => {
+            this.isLoaded = true;
+        };
+        this.handleError = () => {
+            this.hasError = true;
+        };
+    }
+    /**
+     * Fetch IIIF image info to get actual dimensions.
+     */
+    async fetchImageInfo() {
+        try {
+            const currentUuid = this.uuid; // Capture current UUID
+            const infoUrl = `${this.baseUrl}/${currentUuid}/info.json`;
+            const response = await fetch(infoUrl);
+            if (!response.ok) {
+                console.error(`Failed to fetch IIIF info.json for ${currentUuid}`);
+                return;
+            }
+            const info = await response.json();
+            // Only update dimensions if UUID hasn't changed during fetch
+            // (protects against race conditions if component updates)
+            if (this.uuid === currentUuid) {
+                this.imageDimensions = {
+                    width: info.width,
+                    height: info.height,
+                };
+                this.fetchedUuid = currentUuid;
+            }
+        }
+        catch (error) {
+            console.error(`Error fetching IIIF image info for ${this.uuid}:`, error);
+        }
+    }
+    /**
+     * Check if a region value matches aspect ratio format (e.g., "16:9", "4:3", "3:2").
+     */
+    isAspectRatio(value) {
+        return /^\d+:\d+$/.test(value);
+    }
+    /**
+     * Set CSS custom property for aspect ratio on the host element.
+     */
+    setAspectRatioCss(aspectRatio) {
+        const [widthRatio, heightRatio] = aspectRatio.split(':');
+        this.hostElement.style.setProperty('--aspect-ratio', `${widthRatio} / ${heightRatio}`);
+    }
+    /**
+     * Clear CSS custom property for aspect ratio from the host element.
+     */
+    clearAspectRatioCss() {
+        this.hostElement.style.removeProperty('--aspect-ratio');
+    }
+    /**
+     * Format a number for IIIF percentage values (remove trailing zeros).
+     * IIIF spec requires no trailing zeros per section 4.7.
+     */
+    formatPercent(value) {
+        return value.toFixed(2).replace(/\.?0+$/, '');
+    }
+    /**
+     * Calculate a centered crop region for a given aspect ratio.
+     * Requires actual image dimensions to calculate correctly.
+     * @param aspectRatio - The target aspect ratio (e.g., "3:2" or "2:3")
+     * @returns A IIIF percentage-based region string (e.g., "pct:0,16.67,100,66.67")
+     */
+    calculateCenteredCrop(aspectRatio) {
+        if (!this.imageDimensions) {
+            throw new Error('Image dimensions required for aspect ratio calculation');
+        }
+        const [widthRatio, heightRatio] = aspectRatio.split(':').map(Number);
+        const targetRatio = widthRatio / heightRatio;
+        const sourceRatio = this.imageDimensions.width / this.imageDimensions.height;
+        // Determine if we need to crop width or height
+        if (sourceRatio > targetRatio) {
+            // Source is wider than target - crop left and right
+            const widthPercent = (targetRatio / sourceRatio) * 100;
+            const xOffset = (100 - widthPercent) / 2;
+            return `pct:${this.formatPercent(xOffset)},0,${this.formatPercent(widthPercent)},100`;
+        }
+        else {
+            // Source is taller than target - crop top and bottom
+            const heightPercent = (sourceRatio / targetRatio) * 100;
+            const yOffset = (100 - heightPercent) / 2;
+            return `pct:0,${this.formatPercent(yOffset)},100,${this.formatPercent(heightPercent)}`;
+        }
+    }
+    /**
+     * Get the region parameter for the IIIF URL.
+     */
+    getRegionParam() {
+        // Handle custom aspect ratios
+        let regionParam = this.region || 'full';
+        if (this.isAspectRatio(regionParam)) {
+            // Only apply crop if we have dimensions for the current UUID
+            if (this.imageDimensions && this.fetchedUuid === this.uuid) {
+                regionParam = this.calculateCenteredCrop(regionParam);
+            }
+            else {
+                // Use full image until dimensions are loaded
+                regionParam = 'full';
+            }
+        }
+        return regionParam;
+    }
+    buildIIIFUrl(width, format = 'jpg') {
+        const sizeParam = width ? `${width},` : 'max';
+        const regionParam = this.getRegionParam();
+        return `${this.baseUrl}/${this.uuid}/${regionParam}/${sizeParam}/${this.rotation}/${this.quality}.${format}`;
+    }
+    generateSrcset(baseWidth, format) {
+        return PIXEL_DENSITIES.map(density => {
+            const width = Math.round(baseWidth * density);
+            const url = this.buildIIIFUrl(width, format);
+            return `${url} ${density}x`;
+        }).join(', ');
+    }
+    handleRegionChange(newValue, oldValue) {
+        // Only process if region actually changed
+        if (newValue === oldValue) {
+            return;
+        }
+        // If new region is an aspect ratio, set CSS and fetch info
+        if (newValue && this.isAspectRatio(newValue)) {
+            this.setAspectRatioCss(newValue);
+            this.fetchImageInfo();
+        }
+        else {
+            // Clear aspect ratio CSS if no longer using aspect ratio format
+            this.clearAspectRatioCss();
+        }
+    }
+    componentDidLoad() {
+        // Set CSS aspect ratio and fetch image info if using aspect ratio format
+        if (this.region && this.isAspectRatio(this.region)) {
+            this.setAspectRatioCss(this.region);
+            this.fetchImageInfo();
+        }
+        if ('ResizeObserver' in window) {
+            this.resizeObserver = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    this.observedWidth = Math.round(entry.contentRect.width);
+                    if (this.resizeObserver) {
+                        this.resizeObserver.disconnect();
+                        this.resizeObserver = undefined;
+                    }
+                }
+            });
+            this.resizeObserver.observe(this.hostElement);
+        }
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = undefined;
+        }
+    }
+    render() {
+        // Show placeholder until we've measured the component width
+        if (!this.observedWidth) {
+            return h("pennlibs-fallback-img", null);
+        }
+        if (this.hasError && this.showFallback) {
+            return (h("div", { class: "fallback-container" }, h("pennlibs-fallback-img", null)));
+        }
+        const imgClasses = {
+            'iiif-img': true,
+            'loaded': this.isLoaded
+        };
+        return (h("picture", null, h("source", { type: "image/webp", srcSet: this.generateSrcset(this.observedWidth, 'webp') }), h("img", { class: imgClasses, src: this.buildIIIFUrl(this.observedWidth, 'jpg'), srcSet: this.generateSrcset(this.observedWidth, 'jpg'), alt: this.alt, loading: this.loading, onLoad: this.handleLoad, onError: this.handleError })));
+    }
+    static get is() { return "pennlibs-iiif-img"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pennlibs-iiif-img.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pennlibs-iiif-img.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "uuid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The IIIF [UUID identifier](https://iiif.io/api/image/3.0/#3-identifier) of the image resource on the Penn Libraries IIIF server."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "uuid"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alternative text that describes the image content for screen readers and when images fail to load.\nUse an empty string for purely decorative images."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt"
+            },
+            "region": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'full'"
+                        }],
+                    "text": "The IIIF [region](https://iiif.io/api/image/3.0/#41-region) of the image to display.\nDefines the rectangular portion of the underlying image to return.\n\n`full`: The full image is returned, without any cropping.\n\n`square`: A square area where width and height equal the shorter dimension.\n\n`width:height`: Any aspect ratio format (e.g., `16:9`, `4:3`, `3:2`, `21:9`) applies\na centered crop based on the source image dimensions and sets the CSS aspect-ratio\nproperty for layout reservation.\n\n`x,y,w,h`: Absolute pixel coordinates (x, y position; w, h dimensions).\n\n`pct:x,y,w,h`: Percentage-based coordinates of full image dimensions."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "region",
+                "defaultValue": "'full'"
+            },
+            "rotation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'0'"
+                        }],
+                    "text": "The IIIF [rotation](https://iiif.io/api/image/3.0/#44-rotation) to apply to the image.\nSpecifies mirroring and clockwise rotation in degrees (0-360).\n\n`n`: Rotation in degrees only.\n\n`!n`: Mirror the image vertically, then rotate by n degrees."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rotation",
+                "defaultValue": "'0'"
+            },
+            "quality": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'default'"
+                        }],
+                    "text": "The IIIF [quality](https://iiif.io/api/image/3.0/#quality) of the image.\nControls the color delivery mode.\n\n`default`: The server's default quality.\n\n`color`: Full color information.\n\n`gray`: Grayscale rendering.\n\n`bitonal`: Black and white only."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "quality",
+                "defaultValue": "'default'"
+            },
+            "loading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'lazy' | 'eager'",
+                    "resolved": "\"eager\" | \"lazy\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'lazy'"
+                        }],
+                    "text": "Native browser lazy loading behavior. Use \"lazy\" to defer loading until the image is near the viewport,\nor \"eager\" to load immediately."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "'lazy'"
+            },
+            "showFallback": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Whether to display a fallback placeholder image when the IIIF image fails to load."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-fallback",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isLoaded": {},
+            "hasError": {},
+            "imageDimensions": {},
+            "observedWidth": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "region",
+                "methodName": "handleRegionChange"
+            }];
+    }
+}
+//# sourceMappingURL=pennlibs-iiif-img.js.map

package/dist/collection/components/pennlibs-iiif-img/pennlibs-iiif-img.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pennlibs-iiif-img.js","sourceRoot":"","sources":["../../../src/components/pennlibs-iiif-img/pennlibs-iiif-img.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element, Watch } from '@stencil/core';\n\ntype ImageFormat = 'jpg' | 'webp';\n\nconst PIXEL_DENSITIES = [1, 1.5, 2] as const;\n\n/**\n * Display responsive, high-quality images from Penn Libraries' IIIF Image API 3.0 server.\n * Measures its own rendered width and automatically generates optimal image sources at\n * multiple pixel densities (1x, 1.5x, 2x) with modern WebP format and JPG fallback support.\n *\n * @component\n * @example\n * <pennlibs-iiif-img\n *   uuid=\"063ff35c-bbdd-4b63-bbdd-6206590e20d5\"\n *   alt=\"\">\n * </pennlibs-iiif-img>\n */\n@Component({\n  tag: 'pennlibs-iiif-img',\n  styleUrl: 'pennlibs-iiif-img.css',\n  shadow: true,\n})\nexport class IIIFImg {\n  private resizeObserver?: ResizeObserver;\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The IIIF [UUID identifier](https://iiif.io/api/image/3.0/#3-identifier) of the image resource on the Penn Libraries IIIF server.\n   */\n  @Prop() uuid!: string;\n\n  /**\n   * Alternative text that describes the image content for screen readers and when images fail to load.\n   * Use an empty string for purely decorative images.\n   */\n  @Prop() alt!: string;\n\n  /**\n   * The IIIF [region](https://iiif.io/api/image/3.0/#41-region) of the image to display.\n   * Defines the rectangular portion of the underlying image to return.\n   *\n   * `full`: The full image is returned, without any cropping.\n   *\n   * `square`: A square area where width and height equal the shorter dimension.\n   *\n   * `width:height`: Any aspect ratio format (e.g., `16:9`, `4:3`, `3:2`, `21:9`) applies\n   * a centered crop based on the source image dimensions and sets the CSS aspect-ratio\n   * property for layout reservation.\n   *\n   * `x,y,w,h`: Absolute pixel coordinates (x, y position; w, h dimensions).\n   *\n   * `pct:x,y,w,h`: Percentage-based coordinates of full image dimensions.\n   *\n   * @default 'full'\n   */\n  @Prop({ reflect: true }) region?: string = 'full';\n\n  /**\n   * The IIIF [rotation](https://iiif.io/api/image/3.0/#44-rotation) to apply to the image.\n   * Specifies mirroring and clockwise rotation in degrees (0-360).\n   * \n   * `n`: Rotation in degrees only.\n   * \n   * `!n`: Mirror the image vertically, then rotate by n degrees.\n   * \n   * @default '0'\n   */\n  @Prop() rotation?: string = '0';\n\n  /**\n   * The IIIF [quality](https://iiif.io/api/image/3.0/#quality) of the image.\n   * Controls the color delivery mode.\n   * \n   * `default`: The server's default quality.\n   * \n   * `color`: Full color information.\n   * \n   * `gray`: Grayscale rendering.\n   * \n   * `bitonal`: Black and white only.\n   * \n   * @default 'default'\n   */\n  @Prop() quality?: string = 'default';\n\n  /**\n   * Native browser lazy loading behavior. Use \"lazy\" to defer loading until the image is near the viewport,\n   * or \"eager\" to load immediately.\n   * @default 'lazy'\n   */\n  @Prop() loading?: 'lazy' | 'eager' = 'lazy';\n\n  /**\n   * Whether to display a fallback placeholder image when the IIIF image fails to load.\n   * @default true\n   */\n  @Prop() showFallback?: boolean = true;\n\n  @State() isLoaded: boolean = false;\n  @State() hasError: boolean = false;\n  @State() imageDimensions?: { width: number; height: number };\n  @State() observedWidth?: number;\n\n  private fetchedUuid?: string; // Track which UUID these dimensions belong to\n\n  private readonly baseUrl = 'https://iiif-images.library.upenn.edu/iiif/3';\n\n  /**\n   * Fetch IIIF image info to get actual dimensions.\n   */\n  private async fetchImageInfo(): Promise<void> {\n    try {\n      const currentUuid = this.uuid; // Capture current UUID\n      const infoUrl = `${this.baseUrl}/${currentUuid}/info.json`;\n      const response = await fetch(infoUrl);\n      if (!response.ok) {\n        console.error(`Failed to fetch IIIF info.json for ${currentUuid}`);\n        return;\n      }\n      const info = await response.json();\n\n      // Only update dimensions if UUID hasn't changed during fetch\n      // (protects against race conditions if component updates)\n      if (this.uuid === currentUuid) {\n        this.imageDimensions = {\n          width: info.width,\n          height: info.height,\n        };\n        this.fetchedUuid = currentUuid;\n      }\n    } catch (error) {\n      console.error(`Error fetching IIIF image info for ${this.uuid}:`, error);\n    }\n  }\n\n  /**\n   * Check if a region value matches aspect ratio format (e.g., \"16:9\", \"4:3\", \"3:2\").\n   */\n  private isAspectRatio(value: string): boolean {\n    return /^\\d+:\\d+$/.test(value);\n  }\n\n  /**\n   * Set CSS custom property for aspect ratio on the host element.\n   */\n  private setAspectRatioCss(aspectRatio: string): void {\n    const [widthRatio, heightRatio] = aspectRatio.split(':');\n    this.hostElement.style.setProperty('--aspect-ratio', `${widthRatio} / ${heightRatio}`);\n  }\n\n  /**\n   * Clear CSS custom property for aspect ratio from the host element.\n   */\n  private clearAspectRatioCss(): void {\n    this.hostElement.style.removeProperty('--aspect-ratio');\n  }\n\n  /**\n   * Format a number for IIIF percentage values (remove trailing zeros).\n   * IIIF spec requires no trailing zeros per section 4.7.\n   */\n  private formatPercent(value: number): string {\n    return value.toFixed(2).replace(/\\.?0+$/, '');\n  }\n\n  /**\n   * Calculate a centered crop region for a given aspect ratio.\n   * Requires actual image dimensions to calculate correctly.\n   * @param aspectRatio - The target aspect ratio (e.g., \"3:2\" or \"2:3\")\n   * @returns A IIIF percentage-based region string (e.g., \"pct:0,16.67,100,66.67\")\n   */\n  private calculateCenteredCrop(aspectRatio: string): string {\n    if (!this.imageDimensions) {\n      throw new Error('Image dimensions required for aspect ratio calculation');\n    }\n\n    const [widthRatio, heightRatio] = aspectRatio.split(':').map(Number);\n    const targetRatio = widthRatio / heightRatio;\n    const sourceRatio = this.imageDimensions.width / this.imageDimensions.height;\n\n    // Determine if we need to crop width or height\n    if (sourceRatio > targetRatio) {\n      // Source is wider than target - crop left and right\n      const widthPercent = (targetRatio / sourceRatio) * 100;\n      const xOffset = (100 - widthPercent) / 2;\n      return `pct:${this.formatPercent(xOffset)},0,${this.formatPercent(widthPercent)},100`;\n    } else {\n      // Source is taller than target - crop top and bottom\n      const heightPercent = (sourceRatio / targetRatio) * 100;\n      const yOffset = (100 - heightPercent) / 2;\n      return `pct:0,${this.formatPercent(yOffset)},100,${this.formatPercent(heightPercent)}`;\n    }\n  }\n\n  /**\n   * Get the region parameter for the IIIF URL.\n   */\n  private getRegionParam(): string {\n    // Handle custom aspect ratios\n    let regionParam = this.region || 'full';\n    if (this.isAspectRatio(regionParam)) {\n      // Only apply crop if we have dimensions for the current UUID\n      if (this.imageDimensions && this.fetchedUuid === this.uuid) {\n        regionParam = this.calculateCenteredCrop(regionParam);\n      } else {\n        // Use full image until dimensions are loaded\n        regionParam = 'full';\n      }\n    }\n\n    return regionParam;\n  }\n\n  private buildIIIFUrl(width?: number, format: ImageFormat = 'jpg'): string {\n    const sizeParam = width ? `${width},` : 'max';\n    const regionParam = this.getRegionParam();\n    return `${this.baseUrl}/${this.uuid}/${regionParam}/${sizeParam}/${this.rotation}/${this.quality}.${format}`;\n  }\n\n  private generateSrcset(baseWidth: number, format: ImageFormat): string {\n    return PIXEL_DENSITIES.map(density => {\n      const width = Math.round(baseWidth * density);\n      const url = this.buildIIIFUrl(width, format);\n      return `${url} ${density}x`;\n    }).join(', ');\n  }\n\n\n  private handleLoad = () => {\n    this.isLoaded = true;\n  };\n\n  private handleError = () => {\n    this.hasError = true;\n  };\n\n  @Watch('region')\n  handleRegionChange(newValue: string, oldValue: string) {\n    // Only process if region actually changed\n    if (newValue === oldValue) {\n      return;\n    }\n\n    // If new region is an aspect ratio, set CSS and fetch info\n    if (newValue && this.isAspectRatio(newValue)) {\n      this.setAspectRatioCss(newValue);\n      this.fetchImageInfo();\n    } else {\n      // Clear aspect ratio CSS if no longer using aspect ratio format\n      this.clearAspectRatioCss();\n    }\n  }\n\n  componentDidLoad() {\n    // Set CSS aspect ratio and fetch image info if using aspect ratio format\n    if (this.region && this.isAspectRatio(this.region)) {\n      this.setAspectRatioCss(this.region);\n      this.fetchImageInfo();\n    }\n\n    if ('ResizeObserver' in window) {\n      this.resizeObserver = new ResizeObserver(entries => {\n        for (const entry of entries) {\n          this.observedWidth = Math.round(entry.contentRect.width);\n\n          if (this.resizeObserver) {\n            this.resizeObserver.disconnect();\n            this.resizeObserver = undefined;\n          }\n        }\n      });\n\n      this.resizeObserver.observe(this.hostElement);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = undefined;\n    }\n  }\n\n  render() {\n    // Show placeholder until we've measured the component width\n    if (!this.observedWidth) {\n      return <pennlibs-fallback-img />;\n    }\n\n    if (this.hasError && this.showFallback) {\n      return (\n        <div class=\"fallback-container\">\n          <pennlibs-fallback-img />\n        </div>\n      );\n    }\n\n    const imgClasses = {\n      'iiif-img': true,\n      'loaded': this.isLoaded\n    };\n\n    return (\n      <picture>\n        <source\n          type=\"image/webp\"\n          srcSet={this.generateSrcset(this.observedWidth, 'webp')}\n        />\n\n        <img\n          class={imgClasses}\n          src={this.buildIIIFUrl(this.observedWidth, 'jpg')}\n          srcSet={this.generateSrcset(this.observedWidth, 'jpg')}\n          alt={this.alt}\n          loading={this.loading}\n          onLoad={this.handleLoad}\n          onError={this.handleError}\n        />\n      </picture>\n    );\n  }\n}\n"]}

package/dist/components/index.d.ts

@@ -15,6 +15,8 @@ export { Header as PennlibsHeader } from '../types/components/pennlibs-header/pe
 export { defineCustomElement as defineCustomElementPennlibsHeader } from './pennlibs-header';
 export { Hero as PennlibsHero } from '../types/components/pennlibs-hero/pennlibs-hero';
 export { defineCustomElement as defineCustomElementPennlibsHero } from './pennlibs-hero';
+export { IIIFImg as PennlibsIiifImg } from '../types/components/pennlibs-iiif-img/pennlibs-iiif-img';
+export { defineCustomElement as defineCustomElementPennlibsIiifImg } from './pennlibs-iiif-img';
 
 /**
  * Get the base path to where the assets can be found. Use "setAssetPath(path)"

package/dist/components/index.js

@@ -7,6 +7,7 @@ export { PennlibsFeedback, defineCustomElement as defineCustomElementPennlibsFee
 export { PennlibsFooter, defineCustomElement as defineCustomElementPennlibsFooter } from './pennlibs-footer.js';
 export { PennlibsHeader, defineCustomElement as defineCustomElementPennlibsHeader } from './pennlibs-header.js';
 export { PennlibsHero, defineCustomElement as defineCustomElementPennlibsHero } from './pennlibs-hero.js';
+export { PennlibsIiifImg, defineCustomElement as defineCustomElementPennlibsIiifImg } from './pennlibs-iiif-img.js';
 //# sourceMappingURL=index.js.map
 
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"index.js","mappings":";;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/pennlibs-fallback-img.js

@@ -1,35 +1,4 @@
-import { proxyCustomElement, HTMLElement, getAssetPath, h } from '@stencil/core/internal/client';
-
-const pennlibsFallbackImgCss = ":host{font-family:var(--pl-font-family);font-size:var(--pl-font-size);display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--pl-color-bg-subtle);aspect-ratio:3/2}.no-image__img{width:100%;max-width:150px;filter:grayscale(1) opacity(0.3)}";
-
-const NoImage = /*@__PURE__*/ proxyCustomElement(class NoImage extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-    }
-    render() {
-        const shieldImg = getAssetPath('./assets/simplified-shield.webp');
-        return (h("img", { key: 'ba6cc227e90aac2e22b9997ad5c794fd4fd6d5ef', src: shieldImg, alt: "", class: "no-image__img" }));
-    }
-    static get assetsDirs() { return ["assets"]; }
-    static get style() { return pennlibsFallbackImgCss; }
-}, [257, "pennlibs-fallback-img"]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pennlibs-fallback-img"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pennlibs-fallback-img":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, NoImage);
-            }
-            break;
-    } });
-}
+import { N as NoImage, d as defineCustomElement$1 } from './pennlibs-fallback-img2.js';
 
 const PennlibsFallbackImg = NoImage;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/pennlibs-fallback-img.js.map

@@ -1 +1 @@
-{"file":"pennlibs-fallback-img.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,6QAA6Q;;MCQ/R,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;;;;;;;;IAClB,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,iCAAiC,CAAC;QAEjE,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-fallback-img/pennlibs-fallback-img.css?tag=pennlibs-fallback-img&encapsulation=shadow","src/components/pennlibs-fallback-img/pennlibs-fallback-img.tsx"],"sourcesContent":[":host {\n  font-family: var(--pl-font-family);\n  font-size: var(--pl-font-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n  background: var(--pl-color-bg-subtle);\n  aspect-ratio: 3/2;\n}\n\n.no-image__img {\n  width: 100%;\n  max-width: 150px;\n  filter: grayscale(1) opacity(0.3);\n} ","import { Component, h, getAssetPath } from '@stencil/core';\n\n@Component({\n  tag: 'pennlibs-fallback-img',\n  styleUrl: 'pennlibs-fallback-img.css',\n  shadow: true,\n  assetsDirs: ['assets']\n})\nexport class NoImage {\n  render() {\n    const shieldImg = getAssetPath('./assets/simplified-shield.webp');\n\n    return (\n      <img src={shieldImg} alt=\"\" class=\"no-image__img\" />\n    );\n  }\n} "],"version":3}
+{"file":"pennlibs-fallback-img.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/pennlibs-fallback-img2.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, getAssetPath, h } from '@stencil/core/internal/client';
+
+const pennlibsFallbackImgCss = ":host{font-family:var(--pl-font-family);font-size:var(--pl-font-size);display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--pl-color-bg-subtle);aspect-ratio:3/2}.no-image__img{width:100%;max-width:150px;filter:grayscale(1) opacity(0.3)}";
+
+const NoImage = /*@__PURE__*/ proxyCustomElement(class NoImage extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    render() {
+        const shieldImg = getAssetPath('./assets/simplified-shield.webp');
+        return (h("img", { key: 'ba6cc227e90aac2e22b9997ad5c794fd4fd6d5ef', src: shieldImg, alt: "", class: "no-image__img" }));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get style() { return pennlibsFallbackImgCss; }
+}, [257, "pennlibs-fallback-img"]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pennlibs-fallback-img"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pennlibs-fallback-img":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NoImage);
+            }
+            break;
+    } });
+}
+
+export { NoImage as N, defineCustomElement as d };
+//# sourceMappingURL=pennlibs-fallback-img2.js.map
+
+//# sourceMappingURL=pennlibs-fallback-img2.js.map

package/dist/components/pennlibs-fallback-img2.js.map

@@ -0,0 +1 @@
+{"file":"pennlibs-fallback-img2.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,6QAA6Q;;MCQ/R,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;;;;;;;;IAClB,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,iCAAiC,CAAC;QAEjE,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-fallback-img/pennlibs-fallback-img.css?tag=pennlibs-fallback-img&encapsulation=shadow","src/components/pennlibs-fallback-img/pennlibs-fallback-img.tsx"],"sourcesContent":[":host {\n  font-family: var(--pl-font-family);\n  font-size: var(--pl-font-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n  background: var(--pl-color-bg-subtle);\n  aspect-ratio: 3/2;\n}\n\n.no-image__img {\n  width: 100%;\n  max-width: 150px;\n  filter: grayscale(1) opacity(0.3);\n} ","import { Component, h, getAssetPath } from '@stencil/core';\n\n@Component({\n  tag: 'pennlibs-fallback-img',\n  styleUrl: 'pennlibs-fallback-img.css',\n  shadow: true,\n  assetsDirs: ['assets']\n})\nexport class NoImage {\n  render() {\n    const shieldImg = getAssetPath('./assets/simplified-shield.webp');\n\n    return (\n      <img src={shieldImg} alt=\"\" class=\"no-image__img\" />\n    );\n  }\n} "],"version":3}

package/dist/components/pennlibs-iiif-img.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PennlibsIiifImg extends Components.PennlibsIiifImg, HTMLElement {}
+export const PennlibsIiifImg: {
+    prototype: PennlibsIiifImg;
+    new (): PennlibsIiifImg;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;