@sitecore-feaas/clientside 0.1.54 → 0.1.56

package/src/components/FEAASComponent.tsx

@@ -3,7 +3,7 @@ import { renderDOMContent, renderDOMElement } from '../dom/rendering.js'
 import { loadStylesheetAllowStale } from '../headless.js'
 import { FEAASBase } from './FEAASBase.js'
 
-export function FEAASComponentsProps(element: FEAASBase = this) {
+export function FEAASComponentsProps(element: FEAASBase) {
   let data: any
   const src = element.getAttribute('src')
   if (src) {

package/src/components/FEAASLoader.tsx

@@ -1,6 +1,6 @@
 import { FEAASBase } from './FEAASBase.js'
 
-export function FEAASLoaderProps(element: HTMLElement = this) {
+export function FEAASLoaderProps(element: HTMLElement) {
   return {
     opacity: element?.getAttribute('opacity') ? parseFloat(element?.getAttribute('opacity')) : 1,
     hidden: element?.getAttribute('hidden') != null

package/src/components/FEAASStylesheet.tsx

@@ -2,7 +2,7 @@ import { DEFAULT_CDN_URL, FEAASCDNStylesheetParams, parseStylesheetSource } from
 import { loadStylesheet } from '../dom/stylesheet.js'
 import { FEAASBase } from './FEAASBase.js'
 
-export function FEAASStylesheetProps(element: FEAASBase = this) {
+export function FEAASStylesheetProps(element: FEAASBase) {
   const src = element.getAttribute('src')
   if (src) {
     var { cdn, library, revision } = parseStylesheetSource(src)

package/src/dom/thumbnail.ts

@@ -0,0 +1,293 @@
+import type { SDK, Style, VersionModel, ComponentModel } from '@sitecore-feaas/sdk'
+import { fetchAndRevalidate } from '../fetch.js'
+import { renderComponent } from './component.js'
+
+export type Callback = (image: HTMLImageElement, isCached: boolean) => void
+
+export const convertBase64toBlob = (base64: string) => fetch(base64).then((res) => res.blob())
+
+/** Parse fetch response as blob and turn it into HTMLImageElement off thread */
+export const responseToImage = (response: Response): Promise<HTMLImageElement> =>
+  response.blob().then((blob) => {
+    return new Promise((resolve, reject) => {
+      const img = new Image()
+      img.onerror = reject
+      img.onload = () => {
+        resolve(img)
+      }
+      img.src = URL.createObjectURL(blob)
+    })
+  })
+
+/**
+ * Retrieves the version of a given component that best fits a specific display width.
+ *
+ * The function ensures that the version data for the component is available and selects the one that is most suitable
+ * for a display width of 800 pixels.
+ *
+ * @param {ComponentModel} component - The component for which the version needs to be obtained.
+ * @returns {Promise<VersionModel>} - A promise that resolves to the most suitable version for a display width of 800
+ *   pixels.
+ */
+export async function getVersionForThumbnail(component: ComponentModel): Promise<VersionModel> {
+  if (!component.versions.length) await component.versions.fetch()
+  return component.getVersionForWidth(800)
+}
+
+/**
+ * Ensures an up-to-date thumbnail for a specific component and version.
+ *
+ * This operation initiates thumbnail load and, if that fails or if file is out of date, a new thumbnail is generated.
+ * It can work with a callback, which is designed to potentially fire twice for enhancing user experience. This dual
+ * firing allows for an immediate display of a possibly stale cached image while downloading or generating new version
+ * in the background.
+ *
+ * 1. The first call can happen with the stale cached or outdated image.
+ * 2. The second call occurs with the up-to-date loaded or freshly generated generated image.
+ *
+ * @param {ComponentModel} component - Relevant component.
+ * @param {VersionModel} [version] - Relevant version (optional, falls back to responsive).
+ * @param {Callback} [callback] - Callback to handle the loaded or generated image (optional).
+ * @returns {Promise<HTMLImageElement | null>} - The final thumbnail image (either loaded or freshly generated).
+ */
+export async function get(component: ComponentModel, version?: VersionModel, callback?: Callback) {
+  try {
+    if (!component.isNew) {
+      return await load(component, version, callback)
+    }
+  } catch (e) {
+    component.sdk.log(
+      `FEAAS: Thumbnail ${component.id}, version: ${
+        version?.id || 'responsive'
+      }, status: generating ${status}, reason: ${e}`
+    )
+  }
+  // generate the image
+  const img = await generate(component, version)
+  callback?.(img, false)
+
+  // upload base64 image as blob off-thread
+  if (img && !component.isNew) {
+    convertBase64toBlob(img.src).then((blob) => upload(component, version, blob))
+  }
+  return img
+}
+
+/**
+ * Retrieves the thumbnail image for a given component/version combination, with a responsive default if version is not
+ * provided.
+ *
+ * The resulting HTML <img> element will have `width`, `height`, and `src` properties ready for use. Although it can
+ * operate as a regular promise that resolves when the thumbnail is loaded, it also supports a callback for an enhanced
+ * user experience. This callback may be invoked twice, depending on the state of the cache:
+ *
+ * 1. The first call occurs if the image was previously cached by the browser, but the cache is stale.
+ * 2. The second call happens when the image is updated from a fresh download. By this design, the user gets to see a
+ *    cached image immediately while the updated image is being downloaded in the background.
+ *
+ * If the version of a component is known to be newer than remote file, the function will throw `InvalidResponse` error.
+ * As a way to handle that error, the `generate` function may be used to produce new thumbnail (@see render).
+ *
+ * @param {ComponentModel} component - The component to load a thumbnail for.
+ * @param {VersionModel} [version] - The version of the component to load a thumbnail for. If not provided, a version
+ *   suitable for a responsive component is selected.
+ * @param {Callback} [callback] - A callback to handle the loaded image. This callback may be invoked twice for the
+ *   reasons described above.
+ * @returns {Promise<HTMLImageElement>} - The thumbnail image for the component/version combination.
+ */
+export async function load(
+  component: ComponentModel,
+  version?: VersionModel,
+  callback?: Callback
+): Promise<HTMLImageElement> {
+  const url = version ? version.getThumbnailURL() : component.getThumbnailURL()
+  const stylesheet = component.library.stylesheet
+  const lastModifiedDate = new Date(Math.max(Number(component.modifiedAt), Number(stylesheet.modifiedAt)))
+  component.sdk.log(`FEAAS: Thumbnail ${component.id}/${version?.id || 'responsive'}, loading`)
+  // Otherwise use a logic that will invoke callback for cached request and then try to revalidate it
+  var img: HTMLImageElement
+  await fetchAndRevalidate(
+    url,
+    {},
+    (response, isCached) => {
+      // <2 second difference is not considered outdated
+      // If thumbnail is detected as outdated it will throw error and promise will be rejected
+      const isUpToDate =
+        Math.abs(Number(new Date(response.headers.get('x-ms-meta-componentRenderedAt'))) - Number(lastModifiedDate)) <
+        2000
+
+      if (isCached && !isUpToDate) {
+        responseToImage(response).then((image) => {
+          img = image
+          callback(image, isCached)
+        })
+      }
+      return isUpToDate
+    },
+    (response, state, isCached) => {
+      component.sdk.log(`FEAAS: Thumbnail ${component.id}/${version?.id || 'responsive'}, status: ${state}`)
+      responseToImage(response).then((image) => {
+        img = image
+        callback(image, isCached)
+      })
+    },
+    null
+  )
+  return img
+}
+
+/**
+ * Creates a thumbnail image for a given component and version.
+ *
+ * First, it determines the appropriate version to use. If not provided, it attempts to fetch one suitable for
+ * thumbnail. It then leverages `render` to generate an image with provided parameters and finally, if the component
+ * isn't new, uploads the generated as a Blob onto cdn for future retrieval.
+ *
+ * @param {ComponentModel} component - Component instance.
+ * @param {VersionModel} [version] - Version instance.
+ * @returns {Promise<HTMLImageElement | null>} Thumbnail image or null if generation isn't possible.
+ */
+export async function generate(component: ComponentModel, version?: VersionModel) {
+  const sourceVersion = version || (component.isNew ? null : await getVersionForThumbnail(component))
+  if (!sourceVersion || sourceVersion.isViewEmpty()) {
+    return null
+  }
+  const { stylesheet, datasources } = component.library
+  const img = await render(
+    sourceVersion.classList,
+    stylesheet.getBreakpointForWidth(800, sourceVersion.getBreakpoints()),
+    sourceVersion.view,
+    datasources.reduce((object, datasource) => {
+      return Object.assign(object, { [datasource.id]: datasource.sample })
+    }, {}),
+    stylesheet.css,
+    component.sdk
+  )
+
+  return img
+}
+
+/**
+ * Transforms a specific component version into an image.
+ *
+ * Generates an isolated environment (iframe) to render the component with supplied parameters. 'html2canvas.js' is then
+ * injected into the iframe to capture the rendered component as an image. The image is created respecting the provided
+ * design breakpoint, ensuring an accurate visual representation.
+ *
+ * @param {string[]} classList - Array of class names applied to the rendered component.
+ * @param {Style.Rule<'breakpoint'>} breakpoint - Breakpoint style rule that dictates the viewport dimensions for
+ *   rendering.
+ * @param {string} template - String template of the component to render.
+ * @param {any} data - Data object to be used when rendering the component.
+ * @param {string} cssText - CSS rules to be applied during component rendering.
+ * @param {EnvironmentVariables} env - Environment variables used to set frontend and backend endpoint URLs.
+ * @returns {Promise<BasicImage>} - Promise that resolves to an object containing the src, width, and height of the
+ *   created image.
+ */
+function render(
+  classList: string[],
+  breakpoint: Style.Rule<'breakpoint'>,
+  template: string,
+  data: any,
+  cssText: string,
+  sdk: SDK
+) {
+  const iframe = document.createElement('iframe')
+  iframe.style.position = 'absolute'
+  iframe.style.top = '-2000px'
+  iframe.style.left = '-2000px'
+  iframe.style.width = breakpoint.props.minWidth + 'px'
+  iframe.style.height = '720px'
+  iframe.style.zIndex = '100011'
+  document.body.appendChild(iframe)
+
+  return new Promise<HTMLImageElement>((resolve, reject) => {
+    const script = document.createElement('script')
+    script.onerror = reject
+    script.src = sdk.frontend + '/assets/html2canvas.js'
+    script.onload = () => {
+      ;(iframe.contentWindow.document.fonts?.ready || Promise.resolve()).then(function () {
+        return (
+          iframe.contentWindow
+            //@ts-ignore
+            .html2canvas(root, {
+              // 1.1 scale is to remove shadows that are drawn incorrectly
+              scale: Math.max(1.1, 1000 / Math.min(1401, Math.max(320, breakpoint.props.minWidth))),
+              width: Math.min(1401, Math.max(320, breakpoint.props.minWidth)),
+              height: Math.max(1, Math.min(2000, root.offsetHeight)),
+              windowWidth: breakpoint.props.minWidth + 'px',
+              windowHeight: 1000,
+              proxy: sdk.backend + '/proxy/media',
+              backgroundColor: '#ffffff'
+            })
+            .then((canvas: HTMLCanvasElement) => {
+              const src = canvas.toDataURL('image/jpeg', 0.6)
+              iframe.parentElement.removeChild(iframe)
+              const img = new Image()
+              img.onload = () => {
+                resolve(img)
+              }
+              img.onerror = reject
+              img.src = src
+            })
+        )
+      })
+    }
+    iframe.contentWindow.document.head.appendChild(script)
+    const stylesheet = iframe.contentWindow.document.createElement('style')
+    stylesheet.textContent = `
+      ${cssText}
+      body, html { padding: 0; margin: 0; overflow: hidden }
+    `
+
+    iframe.contentWindow.document.head.appendChild(stylesheet)
+    const root = renderComponent({ template, data })
+    root.classList.add(...classList, '-feaas--preview', '-emulate--' + breakpoint.details.slug)
+    iframe.contentWindow.document.body.appendChild(root)
+  })
+}
+
+/**
+ * Uploads a thumbnail Blob to a CDN, enabling it for future retrieval.
+ *
+ * It constructs a URL based on component and version information, if available. The thumbnail's blob is uploaded with
+ * several metadata points, including identifiers and timestamps. Upon successful upload, it sends a no-cache fetch
+ * request to the constructed URL to bust the cache.
+ *
+ * @param {ComponentModel} component - Component instance.
+ * @param {VersionModel} version - Version instance.
+ * @param {Blob} blob - Blob instance to upload.
+ * @returns {Promise<string>} URL of the uploaded Blob.
+ */
+export async function upload(component: ComponentModel, version: VersionModel, blob: Blob): Promise<string> {
+  const url = version ? version.getThumbnailURL() : component.getThumbnailURL()
+  const lastModifiedDate = new Date(
+    Math.max(Number(component.modifiedAt), Number(component.library.stylesheet.modifiedAt))
+  )
+
+  try {
+    await component.sdk.uploadBlob('thumbnails', url.split(/\/thumbnails\//)[1], blob, {
+      headers: {
+        'x-ms-blob-content-type': 'image/jpg',
+        'x-ms-blob-cache-control': 'public,max-age=31536000,immutable',
+        'x-ms-meta-versionId': version ? version.id : null,
+        'x-ms-meta-versionRevision': version ? version.revision.toString() : null,
+        'x-ms-meta-componentId': component.id,
+        'x-ms-meta-componentRenderedAt': lastModifiedDate.toUTCString(),
+        'x-ms-meta-componentModifiedAt': component.modifiedAt.toUTCString(),
+        'x-ms-meta-componentCreatedAt': component.createdAt.toUTCString(),
+        'x-ms-meta-modifiedAt': component.modifiedAt.toUTCString()
+      }
+    })
+    // bust thumbnail cache for the future, off-thread
+    fetch(url, {
+      cache: 'no-cache'
+    }).then(() => {
+      component.sdk.log('FEAAS: Thumbnail uploaded', url)
+    })
+  } catch (e) {
+    component.sdk.log('FEAAS: Thumbnail failed to upload', url, e)
+  }
+
+  return url
+}

package/src/fetch.ts

@@ -13,12 +13,12 @@ import { ControlledPromise } from './utils/promise.js'
  * errors will not be caught. Function throws when unable to fetch valid response.
  */
 const phases = ['initial', 'check', 'updated'] as const
-export type ValidatableRequestPhase = typeof phases[number]
+export type ValidatableRequestPhase = (typeof phases)[number]
 export type FetchCache = Record<string, FetchCacheRequest>
 export interface ValidatableRequest {
   url: Parameters<typeof fetch>[0]
   options?: Parameters<typeof fetch>[1]
-  validator?: (resposne: Response) => boolean
+  validator?: (resposne: Response, isCached: boolean) => boolean
   callback?: (response: Response, status: ValidatableRequestPhase, isCached: boolean) => any
   isCached?: boolean
   response?: Response
@@ -66,6 +66,8 @@ export function getFetchCache(url: Parameters<typeof fetch>[0], dontCreate = fal
   return cache
 }
 
+export class InvalidResponse extends Error {}
+
 export async function fetchWithCacheAwareness(
   { url, options, validator, callback, cache }: ValidatableRequest,
   phase: ValidatableRequestPhase = 'initial'
@@ -88,11 +90,11 @@ export async function fetchWithCacheAwareness(
     }
   }
   if (!response.ok) throw new Error('Fetch failed')
-  if (validator?.(response) === false) throw new Error('Response is not valid')
   // see if response was pulled from cache
   const isCached =
     new Date(response.headers.get('date')) < date ||
     (promise && phase == 'initial' && (cachedRequest.phase == 'updated' || cachedRequest.phase == 'check'))
+  if (validator?.(response, isCached) === false) throw new InvalidResponse('Response is not valid')
   await callback?.(response, phase, isCached)
   return {
     url,

package/src/headless.ts

@@ -18,6 +18,7 @@ export * from './components/FEAASComponent.js'
 export * from './components/FEAASLoader.js'
 export * from './components/FEAASStylesheet.js'
 export * from './utils/datapath.js'
+export * as Thumbnail from './dom/thumbnail.js'
 
 declare global {
   interface Window {

package/src/ui/FEAASContext.tsx

@@ -1,8 +1,9 @@
 import type * as FEAASContextImports from '@sitecore-feaas/frontend/context'
 import type { AuthModel } from '@sitecore-feaas/sdk'
 import { FEAASBase, OptionalExcept } from '../components/FEAASBase.js'
+import { ControlledPromise } from '../utils/promise.js'
 
-export function FEAASContextProps(element: HTMLElement = this) {
+export function FEAASContextProps(element: HTMLElement) {
   return {
     library: element?.getAttribute('library') as string,
     src: element?.getAttribute('src') ?? '/context.js',
@@ -66,11 +67,16 @@ export class FEAASContext extends FEAASBase<FEAASContextProps, typeof FEAASConte
     super.connectedCallback()
   }
 
-  onStatusChange = (status: string) => {
+  sdk: FEAASContextImports.SDK
+  onStatusChange: FEAASContextImports.SDKStatusCallback = (status, sdk) => {
     if (status == 'ready') {
-      this.dispatchEvent(new Event('feaasReady', { bubbles: true, composed: true }))
+      this.whenSDKReady.resolve(sdk)
+      this.dispatchEvent(new CustomEvent('feaasReady', { bubbles: true, composed: true, detail: sdk }))
     }
   }
+  whenSDKReady = ControlledPromise<FEAASContextImports.SDK>((sdk) => {
+    this.sdk = sdk
+  })
 
   render(
     { children, library }: React.PropsWithChildren<FEAASContextProps>,

package/src/ui/FEAASEditor.tsx

@@ -38,7 +38,7 @@ export function getFramePosition(element: HTMLElement) {
     { left: 0, top: 0 }
   )
 }
-export function FEAASEditorProps(element: FEAASBase = this) {
+export function FEAASEditorProps(element: FEAASBase) {
   return {
     context: HTMLElement,
     frontend: element?.getContextAttribute('frontend'),
@@ -447,6 +447,7 @@ export class FEAASEditor extends FEAASBase<FEAASEditorProps, typeof FEAASEditorI
       Chrome,
       ReactDOM,
       useSDK,
+      useLibrary,
       useSlots,
       useModelObserver,
       ConfirmationContext,
@@ -455,12 +456,11 @@ export class FEAASEditor extends FEAASBase<FEAASEditorProps, typeof FEAASEditorI
   ) {
     if (!this.payload) return
     const { React } = this.payload
-    const { sdk } = useSDK()
+    const sdk = useSDK()
+    const library = useLibrary()
     const [component, setComponent] = useState<FEAASEditorImports.SDK.ComponentModel>()
     const { setConfirm } = useContext(ConfirmationContext)
-
     const usedId = instanceId || versionId
-    const library = sdk.library
 
     if (component) this.component = component
 
@@ -600,7 +600,7 @@ export class FEAASEditor extends FEAASBase<FEAASEditorProps, typeof FEAASEditorI
               <Editor
                 datasources={sdk.datasources}
                 sdk={sdk}
-                library={sdk.library}
+                library={library}
                 component={component}
                 versions={versions}
                 context={{

package/src/ui/FEAASExternal.tsx

@@ -15,13 +15,12 @@ const convertSchemaPropertiesToKebabCase = (schema: any) => {
       return acc
     }, {})
 
-    kebabRequiredProperties = schema.required.map((item: string) => kebabCase(item))
+    kebabRequiredProperties = (schema.required || []).map((item: string) => kebabCase(item))
   }
   return { ...schema, properties: kebabSchemaProperties, required: kebabRequiredProperties }
 }
 
 export const parseProps = (propName: string, propValue: string, properties: any) => {
-  debugger
   switch (properties?.[propName]?.type) {
     case 'string':
       return propValue
@@ -40,7 +39,7 @@ export const parseProps = (propName: string, propValue: string, properties: any)
   }
 }
 
-export function FEAASExternalProps(element: FEAASBase = this) {
+export function FEAASExternalProps(element: FEAASBase) {
   const attributes = element.getAttributeNames()
   const id = element.getAttribute('data-external-id')
   const schema: any = FEAASExternal.registered[id]?.schema
@@ -83,9 +82,9 @@ export default class FEAASExternal extends FEAASBase<FEAASExternalProps, ReactMo
   }
 
   static setRegistrationCallback() {
-    // if registerCallback has not already been triggered by another component, set it
-    if (!FEAASExternal.registrationCallback && typeof window !== 'undefined') {
-      FEAASExternal.registrationCallback = setTimeout(() => {
+    clearTimeout(FEAASExternal.registrationCallback)
+    FEAASExternal.registrationCallback = setTimeout(() => {
+      if (typeof window !== 'undefined') {
         // create components array from object
         const components = Object.keys(FEAASExternal.registered).map((id) => ({
           ...FEAASExternal.registered[id],
@@ -102,8 +101,8 @@ export default class FEAASExternal extends FEAASBase<FEAASExternalProps, ReactMo
           }),
           '*'
         )
-      }, 500)
-    }
+      }
+    }, 30)
   }
 
   /*static loadComponents() {

package/src/ui/FEAASPicker.tsx

@@ -1,7 +1,7 @@
 import type * as FEAASPickerImports from '@sitecore-feaas/frontend/picker'
 import { FEAASBase } from '../components/FEAASBase.js'
 
-export function FEAASPickerProps(element: FEAASBase<any, any> = this) {
+export function FEAASPickerProps(element: FEAASBase<any, any>) {
   return {
     part: element?.getAttribute('part') || 'picker',
     slot: element?.getAttribute('part') || 'picker',
@@ -35,10 +35,15 @@ export class FEAASPicker extends FEAASBase<FEAASPickerProps, typeof FEAASPickerI
 
   render(
     { placeholder, context, mode, children, variant }: React.PropsWithChildren<FEAASPickerProps>,
-    { Picker, React, ReactDOM }: typeof FEAASPickerImports
+    { Picker, React, useLibrary }: typeof FEAASPickerImports
   ) {
+    const collections = useLibrary('collections')
+    const rules = useLibrary('stylesheet.styles')
     return (
       <Picker
+        rules={rules}
+        collections={collections}
+        themeContext={context}
         placeholder={placeholder}
         mode={mode || undefined}
         onModeChange={(mode) => {

package/src/utils/promise.ts

@@ -1,5 +1,5 @@
 export type ControlledPromise<T> = Promise<T> & {
-  resolve: (...args: any) => void
+  resolve: (result?: T) => void
   reject: (e: Error) => void
   restart: () => ControlledPromise<T>
   first: ControlledPromise<T>
@@ -35,7 +35,7 @@ export type ControlledPromise<T> = Promise<T> & {
 export function ControlledPromise<T>(onSuccess?: (result: T) => void, onFailure = (e: Error) => {}) {
   var first: ControlledPromise<T>
   const restart = () => {
-    var resolve: (...args: any) => void
+    var resolve: (result?: T) => void
     var reject: (e: Error) => void
     const promise = new Promise<T>((success, failure) => {
       resolve = (value: T) => {

package/test/FEAASComponent.react.test.tsx

@@ -1,10 +1,7 @@
-import { beforeEach, afterAll, beforeAll, describe, expect, it, vi } from 'vitest'
-import { FEAASComponent } from '../src/components/FEAASComponent.js'
-import { renderDOMContent } from '../src/dom/rendering.js'
-import { clearFetchCache } from '../src/fetch.js'
-import { Component } from '../src/ui/react.js'
-import ReactDOM from 'react-dom'
 import React from 'react'
+import ReactDOM from 'react-dom'
+import { describe, expect, it } from 'vitest'
+import { Component } from '../src/ui/react.js'
 
 async function test(react: any, html: string) {
   const div = document.createElement('div')

package/types/components/FEAASComponent.d.ts

@@ -1,5 +1,5 @@
 import { FEAASBase } from './FEAASBase.js';
-export declare function FEAASComponentsProps(element?: FEAASBase): {
+export declare function FEAASComponentsProps(element: FEAASBase): {
     data: any;
     cdn: string;
     library: string;

package/types/components/FEAASComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FEAASComponent.d.ts","sourceRoot":"","sources":["../../src/components/FEAASComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,wBAAgB,oBAAoB,CAAC,OAAO,GAAE,SAAgB;;;;;;;;;;;;;;EA6B7D;AACD,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAC1E,qBAAa,cAAe,SAAQ,SAAS,CAAC,oBAAoB,EAAE,MAAM,CAAC;IACzE,MAAM,CAAC,kBAAkB,WAYxB;IAED,YAAY;;;;;;;;;;;;;;OAOsB;IAElC,YAAY,EAAE,OAAO,CAAA;IACrB,OAAO,CAAC,IAAI,EAAE,GAAG;IAIjB,QAAQ;;;;;;;;;;;;;;;IAIR,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAUhF,SAAS,IAAI,GAAG;;IAahB,IAAI;IASJ,WAAW;IAaX,aAAa;IAMb,MAAM,SAAU,MAAM,UAGrB;IAEK,IAAI;IAsBV,MAAM;CAYP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,iBAAiB,EAAE;gBACjB,IAAI,CAAC,EAAE,GAAG,CAAA;gBACV,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;gBAClB,QAAQ,CAAC,EAAE,GAAG,CAAA;gBACd,uBAAuB,CAAC,EAAE;oBAAE,MAAM,EAAE,MAAM,CAAA;iBAAE,CAAA;gBAC5C,eAAe,CAAC,EAAE,MAAM,CAAA;gBACxB,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,EAAE,CAAA;aAC1C,GAAG,CACA;gBACE,kCAAkC;gBAClC,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,GAAG,CAAC,EAAE,MAAM,CAAA;gBACZ,OAAO,EAAE,MAAM,CAAA;gBACf,SAAS,EAAE,MAAM,CAAA;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAA;gBAChB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAA;aAC5C,GACD;gBAAE,GAAG,EAAE,MAAM,CAAA;aAAE,GACf;gBAAE,QAAQ,EAAE,MAAM,CAAA;aAAE,CACvB,CAAA;SACF;KACF;CACF;AAGD,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,oBAAoB,IAAI,cAAc,EAAE,CAAA"}
+{"version":3,"file":"FEAASComponent.d.ts","sourceRoot":"","sources":["../../src/components/FEAASComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,SAAS;;;;;;;;;;;;;;EA6BtD;AACD,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAC1E,qBAAa,cAAe,SAAQ,SAAS,CAAC,oBAAoB,EAAE,MAAM,CAAC;IACzE,MAAM,CAAC,kBAAkB,WAYxB;IAED,YAAY;;;;;;;;;;;;;;OAOsB;IAElC,YAAY,EAAE,OAAO,CAAA;IACrB,OAAO,CAAC,IAAI,EAAE,GAAG;IAIjB,QAAQ;;;;;;;;;;;;;;;IAIR,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAUhF,SAAS,IAAI,GAAG;;IAahB,IAAI;IASJ,WAAW;IAaX,aAAa;IAMb,MAAM,SAAU,MAAM,UAGrB;IAEK,IAAI;IAsBV,MAAM;CAYP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,iBAAiB,EAAE;gBACjB,IAAI,CAAC,EAAE,GAAG,CAAA;gBACV,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;gBAClB,QAAQ,CAAC,EAAE,GAAG,CAAA;gBACd,uBAAuB,CAAC,EAAE;oBAAE,MAAM,EAAE,MAAM,CAAA;iBAAE,CAAA;gBAC5C,eAAe,CAAC,EAAE,MAAM,CAAA;gBACxB,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,EAAE,CAAA;aAC1C,GAAG,CACA;gBACE,kCAAkC;gBAClC,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,GAAG,CAAC,EAAE,MAAM,CAAA;gBACZ,OAAO,EAAE,MAAM,CAAA;gBACf,SAAS,EAAE,MAAM,CAAA;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAA;gBAChB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAA;aAC5C,GACD;gBAAE,GAAG,EAAE,MAAM,CAAA;aAAE,GACf;gBAAE,QAAQ,EAAE,MAAM,CAAA;aAAE,CACvB,CAAA;SACF;KACF;CACF;AAGD,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,oBAAoB,IAAI,cAAc,EAAE,CAAA"}

package/types/components/FEAASLoader.d.ts

@@ -1,5 +1,5 @@
 import { FEAASBase } from './FEAASBase.js';
-export declare function FEAASLoaderProps(element?: HTMLElement): {
+export declare function FEAASLoaderProps(element: HTMLElement): {
     opacity: number;
     hidden: boolean;
 };

package/types/components/FEAASLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FEAASLoader.d.ts","sourceRoot":"","sources":["../../src/components/FEAASLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,wBAAgB,gBAAgB,CAAC,OAAO,GAAE,WAAkB;;;EAK3D;AACD,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE3D,qBAAa,WAAY,SAAQ,SAAS,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAClE,UAAU,EAAE,gBAAgB,CAAA;IAC5B,MAAM,EAAE,cAAc,CAAA;IAEtB,QAAQ;;;;IAIR,YAAY;;;OAEkB;IAE9B,MAAM,CAAC,kBAAkB,WAAwB;IAEjD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAgBhF,iBAAiB;IA6EjB,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,cAAc,EAAE,GAAG,CAAA;SACpB;KACF;CACF;AAGD,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,CAAA"}
+{"version":3,"file":"FEAASLoader.d.ts","sourceRoot":"","sources":["../../src/components/FEAASLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW;;;EAKpD;AACD,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE3D,qBAAa,WAAY,SAAQ,SAAS,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAClE,UAAU,EAAE,gBAAgB,CAAA;IAC5B,MAAM,EAAE,cAAc,CAAA;IAEtB,QAAQ;;;;IAIR,YAAY;;;OAEkB;IAE9B,MAAM,CAAC,kBAAkB,WAAwB;IAEjD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAgBhF,iBAAiB;IA6EjB,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,cAAc,EAAE,GAAG,CAAA;SACpB;KACF;CACF;AAGD,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,CAAA"}

package/types/components/FEAASStylesheet.d.ts

@@ -1,6 +1,6 @@
 import { FEAASCDNStylesheetParams } from '../cdn.js';
 import { FEAASBase } from './FEAASBase.js';
-export declare function FEAASStylesheetProps(element?: FEAASBase): FEAASCDNStylesheetParams;
+export declare function FEAASStylesheetProps(element: FEAASBase): FEAASCDNStylesheetParams;
 export type FEAASStylesheetProps = ReturnType<typeof FEAASStylesheetProps>;
 export declare class FEAASStylesheet extends FEAASBase<FEAASStylesheetProps, string> {
     getProps(): FEAASCDNStylesheetParams;

package/types/components/FEAASStylesheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FEAASStylesheet.d.ts","sourceRoot":"","sources":["../../src/components/FEAASStylesheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,wBAAwB,EAAyB,MAAM,WAAW,CAAA;AAE5F,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,wBAAgB,oBAAoB,CAAC,OAAO,GAAE,SAAgB,4BAU7D;AACD,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAE1E,qBAAa,eAAgB,SAAQ,SAAS,CAAC,oBAAoB,EAAE,MAAM,CAAC;IAC1E,QAAQ;IAIR,aAAa,IAAI,OAAO;IAIxB,MAAM,SAAU,MAAM,UAGrB;IAED,IAAI;CAGL;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,kBAAkB,EAAE,OAAO,CAAC,oBAAoB,CAAC,GAAG;gBAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;aAAE,CAAA;SACvE;KACF;CACF;AAED,OAAO,EAAE,eAAe,IAAI,UAAU,EAAE,CAAA"}
+{"version":3,"file":"FEAASStylesheet.d.ts","sourceRoot":"","sources":["../../src/components/FEAASStylesheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,wBAAwB,EAAyB,MAAM,WAAW,CAAA;AAE5F,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,SAAS,4BAUtD;AACD,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAE1E,qBAAa,eAAgB,SAAQ,SAAS,CAAC,oBAAoB,EAAE,MAAM,CAAC;IAC1E,QAAQ;IAIR,aAAa,IAAI,OAAO;IAIxB,MAAM,SAAU,MAAM,UAGrB;IAED,IAAI;CAGL;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,kBAAkB,EAAE,OAAO,CAAC,oBAAoB,CAAC,GAAG;gBAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;aAAE,CAAA;SACvE;KACF;CACF;AAED,OAAO,EAAE,eAAe,IAAI,UAAU,EAAE,CAAA"}