@penn-libraries/web 1.1.0-dev.7 → 1.1.1-dev.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"pennlibs-iiif-img.entry.esm.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}\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: auto;\n  min-height: 200px;\n}\n\n.fallback-container pennlibs-fallback-img {\n  width: 100%;\n  height: 100%;\n}\n","import { Component, h, Prop, State, Element } from '@stencil/core';\n\ntype ImageFormat = 'jpg' | 'webp';\n\nconst PIXEL_DENSITY_MULTIPLIERS = [0.5, 0.75, 1, 1.5, 2] as const;\nconst DEFAULT_IMAGE_SIZES = [400, 600, 800, 1200, 1600, 2400] as const;\n\n/**\n * Display responsive, high-quality images from Penn Libraries' IIIF Image API 3.0 server.\n * Automatically generates optimal image sources for different viewport sizes and pixel densities,\n * 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   * `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() 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\n  private observedWidth?: number;\n\n  private readonly baseUrl = 'https://iiif-images.library.upenn.edu/iiif/3';\n\n  private buildIIIFUrl(width?: number, format: ImageFormat = 'jpg'): string {\n    const sizeParam = width ? `${width},` : 'max';\n    return `${this.baseUrl}/${this.uuid}/${this.region}/${sizeParam}/${this.rotation}/${this.quality}.${format}`;\n  }\n\n  private generateSrcset(sizes: number[], format: ImageFormat): string {\n    const uniqueSizes = [...new Set(sizes)].sort((a, b) => a - b);\n\n    const srcsetEntries = uniqueSizes.map(size => {\n      const url = this.buildIIIFUrl(size, format);\n      return `${url} ${size}w`;\n    });\n\n    return srcsetEntries.join(', ');\n  }\n\n  private getOptimalSizes(): number[] {\n    if (this.observedWidth) {\n      const baseSizes = PIXEL_DENSITY_MULTIPLIERS.map(multiplier =>\n        Math.round(this.observedWidth! * multiplier)\n      );\n\n      return baseSizes;\n    }\n\n    return [...DEFAULT_IMAGE_SIZES];\n  }\n\n  private handleLoad = () => {\n    this.isLoaded = true;\n  };\n\n  private handleError = () => {\n    this.hasError = true;\n  };\n\n  componentDidLoad() {\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          // Trigger re-render with optimized sizes\n          this.isLoaded = this.isLoaded;\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    const sizes = this.getOptimalSizes();\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    const defaultSize = sizes[0];\n\n    return (\n      <picture>\n        <source\n          type=\"image/webp\"\n          srcSet={this.generateSrcset(sizes, 'webp')}\n          sizes=\"100vw\"\n        />\n\n        <img\n          class={imgClasses}\n          src={this.buildIIIFUrl(defaultSize, 'jpg')}\n          srcSet={this.generateSrcset(sizes, 'jpg')}\n          sizes=\"100vw\"\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/web/web.esm.js

@@ -1,9 +1,8 @@
-import { p as promiseResolve, b as bootstrapLazy } from './p-CE_ILdTo.js';
-export { s as setNonce } from './p-CE_ILdTo.js';
-import { g as globalScripts } from './p-DQuL1Twl.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './p-D9dYrmUF.js';
+export { s as setNonce } from './p-D9dYrmUF.js';
 
 /*
- Stencil Client Patch Browser v4.29.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.38.1 | MIT Licensed | https://stenciljs.com
  */
 
 var patchBrowser = () => {
@@ -17,8 +16,6 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["p-e1215158",[[1,"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"]]],[1,"pennlibs-footer",{"navigationByChildren":[32]}],[1,"pennlibs-header",{"serviceName":[1,"service-name"],"serviceLede":[1,"service-lede"],"serviceHref":[1,"service-href"],"theme":[1],"isMenuOpen":[32],"navigation":[32]}]]],["p-20c0bd7a",[[1,"pennlibs-banner"]]],["p-cbae5952",[[1,"pennlibs-chat",{"href":[32]}]]],["p-5e385536",[[1,"pennlibs-fallback-img"]]],["p-370e32b1",[[1,"pennlibs-feedback",{"error":[32],"answer":[32]}]]],["p-07ad051f",[[1,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]]], options);
+  return bootstrapLazy([["p-c4074cf1",[[257,"pennlibs-iiif-img",{"uuid":[1],"alt":[1],"region":[1],"rotation":[1],"quality":[1],"loading":[1],"showFallback":[4,"show-fallback"],"isLoaded":[32],"hasError":[32]}]]],["p-e6188c30",[[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]}]]],["p-43d9c2d4",[[257,"pennlibs-banner"]]],["p-ad92090a",[[257,"pennlibs-chat",{"href":[32]}]]],["p-b4b58af0",[[257,"pennlibs-feedback",{"error":[32],"answer":[32]}]]],["p-cb2584da",[[257,"pennlibs-hero",{"heroPictureElement":[32],"heroHeadingElement":[32],"heroParagraphElement":[32],"heroSrc":[32]}]]],["p-ce97059c",[[257,"pennlibs-fallback-img"]]]], options);
 });
 //# sourceMappingURL=web.esm.js.map
-
-//# sourceMappingURL=web.esm.js.map

package/dist/web/web.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"web.esm.js","sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.29.3 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":[],"mappings":";;;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAO,cAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAM,aAAa,EAAE;AACvB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC","x_google_ignoreList":[0]}
+{"version":3,"file":"web.esm.js","sources":["../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.38.1 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":[],"mappings":";;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAO,cAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAM,aAAa,EAAE;AACvB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC","x_google_ignoreList":[0]}

package/hydrate/index.d.ts

@@ -7,12 +7,14 @@ export declare function createWindowFromHtml(templateHtml: string, uniqueId: str
  * Serialize a value to a string that can be deserialized later.
  * @param {unknown} value - The value to serialize.
  * @returns {string} A string that can be deserialized later.
+ * @deprecated will be removed in v5. Use `@PropSerialize()` decorator instead.
  */
 export declare function serializeProperty(value: unknown): string | number | boolean;
 /**
  * Deserialize a value from a string that was serialized earlier.
  * @param {string} value - The string to deserialize.
  * @returns {unknown} The deserialized value.
+ * @deprecated will be removed in v5. Use `@AttrDeserialize()` decorator instead.
  */
 export declare function deserializeProperty(value: string): any;
 export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
@@ -107,6 +109,30 @@ export interface HydrateDocumentOptions {
 	 * Sets `navigator.userAgent`
 	 */
 	userAgent?: string;
+	/**
+	 * Configure how Stencil serializes the components shadow root.
+	 * - If set to `declarative-shadow-dom` the component will be rendered within a Declarative Shadow DOM.
+	 * - If set to `scoped` Stencil will render the contents of the shadow root as a `scoped: true` component
+	 *   and the shadow DOM will be created during client-side hydration.
+	 * - Alternatively you can mix and match the two by providing an object with `declarative-shadow-dom` and `scoped` keys,
+	 * the value arrays containing the tag names of the components that should be rendered in that mode.
+	 *
+	 * Examples:
+	 * - `{ 'declarative-shadow-dom': ['my-component-1', 'another-component'], default: 'scoped' }`
+	 * Render all components as `scoped` apart from `my-component-1` and `another-component`
+	 * -  `{ 'scoped': ['an-option-component'], default: 'declarative-shadow-dom' }`
+	 * Render all components within `declarative-shadow-dom` apart from `an-option-component`
+	 * - `'scoped'` Render all components as `scoped`
+	 * - `false` disables shadow root serialization
+	 *
+	 * *NOTE* `true` has been deprecated in favor of `declarative-shadow-dom` and `scoped`
+	 * @default 'declarative-shadow-dom'
+	 */
+	serializeShadowRoot?: "declarative-shadow-dom" | "scoped" | {
+		"declarative-shadow-dom"?: string[];
+		scoped?: string[];
+		default: "declarative-shadow-dom" | "scoped";
+	} | boolean;
 }
 export interface SerializeDocumentOptions extends HydrateDocumentOptions {
 	/**
@@ -149,30 +175,6 @@ export interface SerializeDocumentOptions extends HydrateDocumentOptions {
 	 * Remove HTML comments. Defaults to `true`.
 	 */
 	removeHtmlComments?: boolean;
-	/**
-	 * Configure how Stencil serializes the components shadow root.
-	 * - If set to `declarative-shadow-dom` the component will be rendered within a Declarative Shadow DOM.
-	 * - If set to `scoped` Stencil will render the contents of the shadow root as a `scoped: true` component
-	 *   and the shadow DOM will be created during client-side hydration.
-	 * - Alternatively you can mix and match the two by providing an object with `declarative-shadow-dom` and `scoped` keys,
-	 * the value arrays containing the tag names of the components that should be rendered in that mode.
-	 *
-	 * Examples:
-	 * - `{ 'declarative-shadow-dom': ['my-component-1', 'another-component'], default: 'scoped' }`
-	 * Render all components as `scoped` apart from `my-component-1` and `another-component`
-	 * -  `{ 'scoped': ['an-option-component'], default: 'declarative-shadow-dom' }`
-	 * Render all components within `declarative-shadow-dom` apart from `an-option-component`
-	 * - `'scoped'` Render all components as `scoped`
-	 * - `false` disables shadow root serialization
-	 *
-	 * *NOTE* `true` has been deprecated in favor of `declarative-shadow-dom` and `scoped`
-	 * @default 'declarative-shadow-dom'
-	 */
-	serializeShadowRoot?: "declarative-shadow-dom" | "scoped" | {
-		"declarative-shadow-dom"?: string[];
-		scoped?: string[];
-		default: "declarative-shadow-dom" | "scoped";
-	} | boolean;
 	/**
 	 * The `fullDocument` flag determines the format of the rendered output. Set it to true to
 	 * generate a complete HTML document, or false to render only the component.
@@ -254,7 +256,9 @@ export interface HydrateScriptElement extends HydrateElement {
 	type?: string;
 }
 export interface HydrateStyleElement extends HydrateElement {
+	id?: string;
 	href?: string;
+	content?: string;
 }
 export interface HydrateStaticData {
 	id: string;