@penn-libraries/web 1.2.0-dev.0 → 1.2.0-dev.1

package/dist/esm/pennlibs-iiif-img.entry.js

@@ -0,0 +1,247 @@
+import { r as registerInstance, h, c as getElement } from './index-CNQ9-Wwh.js';
+
+const pennlibsIiifImgCss = ":host{display:block;width:100%;max-width:100%;align-self:flex-start;aspect-ratio:var(--aspect-ratio, auto)}picture{display:block;line-height:0}.iiif-img{display:block;width:100%;max-width:100%;height:auto;opacity:0;filter:blur(5px);transition:opacity 0.15s ease-in, filter 0.15s ease-in}.iiif-img.loaded{opacity:1;filter:blur(0)}.fallback-container{display:block;width:100%;height:100%}.fallback-container pennlibs-fallback-img{width:100%;height:100%}pennlibs-fallback-img{display:block;width:100%;height:100%}";
+
+const PIXEL_DENSITIES = [1, 1.5, 2];
+const IIIFImg = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * 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 })));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "region": ["handleRegionChange"]
+    }; }
+};
+IIIFImg.style = pennlibsIiifImgCss;
+
+export { IIIFImg as pennlibs_iiif_img };
+//# sourceMappingURL=pennlibs-iiif-img.entry.js.map

package/dist/esm/pennlibs-iiif-img.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pennlibs-iiif-img.entry.js","sources":["src/components/pennlibs-iiif-img/pennlibs-iiif-img.css?tag=pennlibs-iiif-img&encapsulation=shadow","src/components/pennlibs-iiif-img/pennlibs-iiif-img.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  align-self: flex-start;\n  aspect-ratio: var(--aspect-ratio, auto);\n}\n\npicture {\n  display: block;\n  line-height: 0;\n}\n\n.iiif-img {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  height: auto;\n  opacity: 0;\n  filter: blur(5px);\n  transition: opacity 0.15s ease-in, filter 0.15s ease-in;\n}\n\n.iiif-img.loaded {\n  opacity: 1;\n  filter: blur(0);\n}\n\n.fallback-container {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.fallback-container pennlibs-fallback-img {\n  width: 100%;\n  height: 100%;\n}\n\npennlibs-fallback-img {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n","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"],"names":[],"mappings":"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"}

package/dist/esm/web.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-RqnbThKP.js';
-export { s as setNonce } from './index-RqnbThKP.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-CNQ9-Wwh.js';
+export { s as setNonce } from './index-CNQ9-Wwh.js';
 
 /*
  Stencil Client Patch Browser v4.38.1 | MIT Licensed | https://stenciljs.com
@@ -16,6 +16,6 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["pennlibs-banner",[[257,"pennlibs-banner"]]],["pennlibs-chat",[[257,"pennlibs-chat",{"href":[32]}]]],["pennlibs-feedback",[[257,"pennlibs-feedback",{"error":[32],"answer":[32]}]]],["pennlibs-hero",[[257,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["pennlibs-autocomplete_5",[[257,"pennlibs-iiif-img",{"uuid":[1],"alt":[1],"region":[513],"rotation":[1],"quality":[1],"loading":[1],"showFallback":[4,"show-fallback"],"isLoaded":[32],"hasError":[32],"imageDimensions":[32],"observedWidth":[32]},null,{"region":["handleRegionChange"]}],[257,"pennlibs-autocomplete",{"for":[1],"showSuggestions":[32],"currentIndex":[32],"originalValue":[32],"options":[32]},[[0,"slotchange","handleSlotChange"],[16,"input","handleInputEvent"],[16,"focus","handleFocusEvent"],[16,"blur","handleBlurEvent"],[0,"focusout","handleFocusOut"],[4,"keydown","handleKeyDown"]]],[257,"pennlibs-footer",{"navigationByChildren":[32]}],[257,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}],[257,"pennlibs-fallback-img"]]]], options);
+  return bootstrapLazy([["pennlibs-iiif-img",[[257,"pennlibs-iiif-img",{"uuid":[1],"alt":[1],"region":[513],"rotation":[1],"quality":[1],"loading":[1],"showFallback":[4,"show-fallback"],"isLoaded":[32],"hasError":[32],"imageDimensions":[32],"observedWidth":[32]},null,{"region":["handleRegionChange"]}]]],["pennlibs-autocomplete_4",[[257,"pennlibs-autocomplete",{"for":[1],"showSuggestions":[32],"currentIndex":[32],"originalValue":[32],"options":[32]},[[0,"slotchange","handleSlotChange"],[16,"input","handleInputEvent"],[16,"focus","handleFocusEvent"],[16,"blur","handleBlurEvent"],[0,"focusout","handleFocusOut"],[4,"keydown","handleKeyDown"]]],[257,"pennlibs-feedback",{"hideQuestion":[4,"hide-question"],"error":[32],"answer":[32]}],[257,"pennlibs-footer",{"navigationByChildren":[32]}],[257,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}]]],["pennlibs-banner",[[257,"pennlibs-banner"]]],["pennlibs-chat",[[257,"pennlibs-chat",{"href":[32]}]]],["pennlibs-hero",[[257,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["pennlibs-fallback-img",[[257,"pennlibs-fallback-img"]]]], options);
 });
 //# sourceMappingURL=web.js.map

package/dist/types/components/pennlibs-feedback/pennlibs-feedback.d.ts

@@ -1,7 +1,26 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A feedback component that asks visitors "Did you find what you need?" and
+ * links to a feedback form. The answer is stored in sessionStorage for 5 minutes
+ * to avoid re-prompting during a browsing session.
+ *
+ * @example
+ * <pennlibs-feedback></pennlibs-feedback>
+ *
+ * @example
+ * <pennlibs-feedback hide-question></pennlibs-feedback>
+ */
 export declare class PennlibsFeedback {
+    /**
+     * When true, hides the yes/no question and only shows the "share your feedback" link.
+     */
+    hideQuestion: boolean;
     error: boolean;
     answer: string | undefined;
+    /**
+     * Emitted when a visitor answers the feedback question. Includes the question,
+     * answer, current URL, and page heading/title for context.
+     */
     feedbackEvent: EventEmitter<{
         question: string;
         answer: string;
@@ -9,10 +28,7 @@ export declare class PennlibsFeedback {
         pageHeading?: string;
         pageTitle?: string;
     }>;
-    private yesMessageRef?;
-    private noMessageRef?;
     componentWillLoad(): void;
-    componentDidRender(): void;
     handleFeedback(answer: string): void;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -24,7 +24,19 @@ export namespace Components {
     }
     interface PennlibsFallbackImg {
     }
+    /**
+     * A feedback component that asks visitors "Did you find what you need?" and
+     * links to a feedback form. The answer is stored in sessionStorage for 5 minutes
+     * to avoid re-prompting during a browsing session.
+     * @example <pennlibs-feedback></pennlibs-feedback>
+     * @example <pennlibs-feedback hide-question></pennlibs-feedback>
+     */
     interface PennlibsFeedback {
+        /**
+          * When true, hides the yes/no question and only shows the "share your feedback" link.
+          * @default false
+         */
+        "hideQuestion": boolean;
     }
     /**
      * A footer component for Penn Libraries websites that displays contact information,
@@ -191,6 +203,13 @@ declare global {
     pageTitle?: string;
   };
     }
+    /**
+     * A feedback component that asks visitors "Did you find what you need?" and
+     * links to a feedback form. The answer is stored in sessionStorage for 5 minutes
+     * to avoid re-prompting during a browsing session.
+     * @example <pennlibs-feedback></pennlibs-feedback>
+     * @example <pennlibs-feedback hide-question></pennlibs-feedback>
+     */
     interface HTMLPennlibsFeedbackElement extends Components.PennlibsFeedback, HTMLStencilElement {
         addEventListener<K extends keyof HTMLPennlibsFeedbackElementEventMap>(type: K, listener: (this: HTMLPennlibsFeedbackElement, ev: PennlibsFeedbackCustomEvent<HTMLPennlibsFeedbackElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -312,7 +331,22 @@ declare namespace LocalJSX {
     }
     interface PennlibsFallbackImg {
     }
+    /**
+     * A feedback component that asks visitors "Did you find what you need?" and
+     * links to a feedback form. The answer is stored in sessionStorage for 5 minutes
+     * to avoid re-prompting during a browsing session.
+     * @example <pennlibs-feedback></pennlibs-feedback>
+     * @example <pennlibs-feedback hide-question></pennlibs-feedback>
+     */
     interface PennlibsFeedback {
+        /**
+          * When true, hides the yes/no question and only shows the "share your feedback" link.
+          * @default false
+         */
+        "hideQuestion"?: boolean;
+        /**
+          * Emitted when a visitor answers the feedback question. Includes the question, answer, current URL, and page heading/title for context.
+         */
         "onPennlibs-feedback"?: (event: PennlibsFeedbackCustomEvent<{
     question: string;
     answer: string;
@@ -452,6 +486,13 @@ declare module "@stencil/core" {
             "pennlibs-banner": LocalJSX.PennlibsBanner & JSXBase.HTMLAttributes<HTMLPennlibsBannerElement>;
             "pennlibs-chat": LocalJSX.PennlibsChat & JSXBase.HTMLAttributes<HTMLPennlibsChatElement>;
             "pennlibs-fallback-img": LocalJSX.PennlibsFallbackImg & JSXBase.HTMLAttributes<HTMLPennlibsFallbackImgElement>;
+            /**
+             * A feedback component that asks visitors "Did you find what you need?" and
+             * links to a feedback form. The answer is stored in sessionStorage for 5 minutes
+             * to avoid re-prompting during a browsing session.
+             * @example <pennlibs-feedback></pennlibs-feedback>
+             * @example <pennlibs-feedback hide-question></pennlibs-feedback>
+             */
             "pennlibs-feedback": LocalJSX.PennlibsFeedback & JSXBase.HTMLAttributes<HTMLPennlibsFeedbackElement>;
             /**
              * A footer component for Penn Libraries websites that displays contact information,

package/dist/web/index.esm.js

@@ -1,2 +1,2 @@
-export { e as setAssetPath } from './p-RqnbThKP.js';
+export { e as setAssetPath } from './p-CNQ9-Wwh.js';
 //# sourceMappingURL=index.esm.js.map

package/dist/web/p-662e4125.entry.js

@@ -0,0 +1,18 @@
+import { r as registerInstance, a as getAssetPath, h } from './p-CNQ9-Wwh.js';
+
+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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    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"]; }
+};
+NoImage.style = pennlibsFallbackImgCss;
+
+export { NoImage as pennlibs_fallback_img };
+//# sourceMappingURL=pennlibs-fallback-img.entry.esm.js.map

package/dist/{esm/index-RqnbThKP.js → web/p-CNQ9-Wwh.js}

@@ -1186,11 +1186,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
         }
       }
     }
-  } else if (memberName === "key") ; else if (memberName === "ref") {
-    if (newValue) {
-      newValue(elm);
-    }
-  } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
+  } else if (memberName === "key") ; else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
     if (memberName[2] === "-") {
       memberName = memberName.slice(3);
     } else if (isMemberInElement(win, ln)) {
@@ -1365,7 +1361,6 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
     const vnode = vnodes[index];
     if (vnode) {
       const elm = vnode.$elm$;
-      nullifyVNodeRefs(vnode);
       if (elm) {
         elm.remove();
       }
@@ -1503,12 +1498,6 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     elm.data = text;
   }
 };
-var nullifyVNodeRefs = (vNode) => {
-  {
-    vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
-    vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
-  }
-};
 var insertBefore = (parent, newNode, reference) => {
   {
     return parent == null ? void 0 : parent.insertBefore(newNode, reference);
@@ -2268,7 +2257,7 @@ var hostListenerOpts = (flags) => supportsListenerOptions ? {
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
-export { getAssetPath as a, bootstrapLazy as b, createEvent as c, getElement as d, setAssetPath as e, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
-//# sourceMappingURL=index-RqnbThKP.js.map
+export { getAssetPath as a, bootstrapLazy as b, getElement as c, createEvent as d, setAssetPath as e, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+//# sourceMappingURL=p-CNQ9-Wwh.js.map
 
-//# sourceMappingURL=index-RqnbThKP.js.map
+//# sourceMappingURL=p-CNQ9-Wwh.js.map