Components Documentation Feed

29 Found
💡 Try "exact match" or use OR for multiple terms (e.g., term OR "exact match")

back-button-1

Styled DSL component back-button-1.

Invocation example:

<back-button-1 fallbackUrl="/" label="Back" />

HTML structure:

<button mat-button class="backButton__button">
  <mat-icon></mat-icon>
</button>

Overrides: editable style keys are shown as classes in this tree. In raw JSON, set theme_svc.ThemeConfig.classes[styleKey].rawCss; in file-based templates, add classes/<styleKey>.css. Renders an arrow icon and translated label.

fallbackUrl any -
label any -

boolean-filter-1

Styled DSL component boolean-filter-1.

Invocation example:

<boolean-filter-1 fieldPath="customFields.inStock" label="In stock" (changed)="filters = $event" />

HTML structure:

<label class="booleanFilter__filter">
  <input />
  <span></span>
</label>

Overrides: editable style keys are shown as classes in this tree. In raw JSON, set theme_svc.ThemeConfig.classes[styleKey].rawCss; in file-based templates, add classes/<styleKey>.css. Contains a checkbox input bound to isEnabled() and a translated label span.

fieldPath string Dot-notated field path, for example `customFields.inStock`.
label string Label displayed beside the toggle.
enabled boolean Optional initial state of the toggle.

my-cart-1

Styled DSL component my-cart-1.

Invocation example:

<my-cart-1 />

HTML structure:

<div class="cart__container">
  <div>
    <div class="cart__row">
      <div class="cart__info">
        <div class="cart__title">
          <span class="cart__itemPrice"></span>
        </div>
        <div class="cart__options">
          <div>
            <ng-container>
              <strong></strong>
              <span></span>
            </ng-container>
          </div>
        </div>
        <div class="cart__itemExtra">
          <div class="cart__itemComment">
            <span class="cart__itemExtraLabel"></span>
            <span class="cart__itemExtraValue"></span>
          </div>
          <div class="cart__itemImage">
            <span class="cart__itemExtraLabel"></span>
            <responsive-img-modal />
          </div>
        </div>
      </div>
      <div class="cart__subtotal">
        <span class="cart__price"></span>
        <div class="cart__quantityControls">
          <button mat-icon-button><mat-icon></mat-icon></button>
          <input class="cart__quantityInput" />
          <button mat-icon-button><mat-icon></mat-icon></button>
        </div>
        <button mat-icon-button><mat-icon></mat-icon></button>
      </div>
    </div>
    <mat-divider />
  </div>
  <div class="cart__footer">
    <h3></h3>
    <div class="cart__orderWrapper">
      <div class="cart__note">
        <span class="cart__line"></span>
      </div>
      <button mat-flat-button class="cart__orderButton"></button>
    </div>
  </div>
</div>
<ng-template #emptyCart>
  <p class="cart__empty"></p>
</ng-template>

Overrides: editable style keys are shown as classes in this tree. In raw JSON, set theme_svc.ThemeConfig.classes[styleKey].rawCss; in file-based templates, add classes/<styleKey>.css. Renders guarded cart/loading state, cart item title/options/comment/image, price, quantity controls, remove button, dividers, total, order notes, and place-order button.

cart-button-1

Styled DSL component cart-button-1.

Invocation example:

<cart-button-1 type="button" />

HTML structure:

<button mat-button>
  <mat-icon></mat-icon>
</button>
<button mat-menu-item>
  <mat-icon></mat-icon>
</button>

Renders the button variant selected by type(), with a shopping_cart icon and cart count.

type "button" | "menu-item" -

categories-loader

CategoriesLoader is a renderless data loader component for shop categories. It loads categories from the backend and emits them through the loaded output.

Invocation example:

<categories-loader (loaded)="categories = $event" />

<loop [data]="categories" let="category">
  <!-- render category -->
</loop>

custom-field-definition

Headless helper component that allows templates to declare product custom field definitions.

Invocation example:

<custom-field-definition
  definitions='[{"fieldPath":"material","name":"Material","type":"string"}]'
/>

Outcome: - Enables template authors to declaratively define custom product fields, which then appear in the admin product edit form.

editable-image

EditableImage is the standard component for in-place editable images.

Use this when the image should be both displayed and replaceable through the editor UI. In edit mode, authorized users can click the image and swap it without changing template code. Outside edit mode, it behaves like a normal image display component.

Unlike ResponsiveImg and ResponsiveImgModal, this component is content-backed: the rendered image is resolved from elementId, so the same elementId can be reused in multiple places to keep those instances synchronized.

If no image has been configured yet, the component falls back to placeholder.

Invocation example:

<editable-image elementId="mainHeroImage" />

Recommended with placeholder:

<editable-image
  elementId="mainHeroImage"
  placeholder="https://images.example.com/hero-fallback.jpg"
/>

Reusing the same image in multiple locations:

<editable-image elementId="brandLogo" width="160" height="160" />
<editable-image elementId="brandLogo" width="48" height="48" />
elementId string Unique content key for this editable image. The component uses this ID to load and update the stored image asset. Multiple instances may intentionally share the same `elementId` to render the same image in different places or sizes.
width number Preferred rendered width used for the default image URL and automatic srcset generation.
height number | undefined Optional explicit rendered height forwarded to the underlying image. Defaults to no fixed height.
quality number Controls the generated image quality for both `src` and `srcset` candidates.
placeholder string A fallback image used if no editable image is configured or if the primary source fails to load. Providing this is a best practice as it ensures: - Seamless template portability across different environments. - Transparent sourcing for easier image license verification.
modal boolean Enables the shared image modal instead of rendering the plain inline image.
sizes string | undefined Responsive slot sizes passed to the browser. Defaults to `(max-width: {width}px) 100vw, {width}px` when not provided.
widths number[] | undefined Optional list of candidate widths used to build `srcset`. Leave undefined for sensible defaults or pass an empty array to disable `srcset` entirely.
loading "lazy" | "eager" Native loading hint forwarded to the underlying `<img>`.
decoding "async" | "sync" | "auto" Native decoding hint forwarded to the underlying `<img>`.
fetchPriority "high" | "low" | "auto" Native fetch priority hint forwarded to the underlying `<img>`.
styleKey string | undefined DEPRECATED. Will be removed.
defaultCss any DEPRECATED. Will be removed.

editable-text

EditableText is the canonical component for all text display across the platform. It serves as the primary interface for dynamic, user-adjustable text content, allowing authorized users to modify text values directly through the UI in edit mode.

Invocation example:

<editable-text elementId="mainHeroTitle" placeholder="This does not really matter" />
<editable-text elementId="mainHeroTitle" (loaded)="heroTitle = $event" />
placeholder Record<string, string> | string Fallback text if no content has been saved yet. For multilingual content, pass language-keyed values. Example: <editable-text placeholder='{\"en\":\"Hello world\", \"hu\":\"Helló világ\"}' />. A plain string value is still accepted to maintain compatibility with older templates.
elementId string The authoritative identifier for this component. This ID is mandatory as it functions as the lookup key for the specific text asset data. Note: Multiple instances can share the same elementId to display and synchronize the same text content across different parts of the UI.
styleKey string | undefined DEPRECATED. Will be removed.
defaultCss any DEPRECATED. Will be removed.
loaded string Emits the resolved text whenever it changes. Use this to capture editable content into DSL state: `<editable-text elementId="mainHeroTitle" (loaded)="heroTitle = $event" />`.

free-tier-banner-1

Styled DSL component free-tier-banner-1.

Invocation example:

<free-tier-banner-1 />

HTML structure:

<div class="freeTierBanner__banner">
  <span></span>
  <a class="freeTierBanner__brandLink"></a>
  <span></span>
</div>

Overrides: editable style keys are shown as classes in this tree. In raw JSON, set theme_svc.ThemeConfig.classes[styleKey].rawCss; in file-based templates, add classes/<styleKey>.css. Renders leading and trailing translated text around an external brand link.

header-context

Header context loads information into the template to enable you to implement custom headers.

Invocation example:

<header-context (loaded)="hdr = $event" />

<!-- Then somewhere down the line in your template -->
<loop [data]="hdr.navigation.entries" let="item">
  <a [href]="item.url" class="honey1-nav-link">{{ item.title }}</a>
</loop>

multiselect-filter-1

Styled DSL component multiselect-filter-1.

Invocation example:

<multiselect-filter-1 fieldPath="customFields.material" options='["Cotton","Wool"]' (changed)="filters = $event" />

HTML structure:

<div class="multiselectFilter__filter">
  <div class="multiselectFilter__heading"></div>
  <div class="multiselectFilter__list">
    <label class="multiselectFilter__option">
      <input />
      <span></span>
    </label>
  </div>
  <button class="multiselectFilter__clear"></button>
</div>

Overrides: editable style keys are shown as classes in this tree. In raw JSON, set theme_svc.ThemeConfig.classes[styleKey].rawCss; in file-based templates, add classes/<styleKey>.css. Renders a heading, label/input/span checkbox options from normalizedOptions(), and a clear button with visibility based on selected values.

fieldPath string Dot path used in the emitted filter.
heading string Heading rendered on top of the component.
selected string[] Preselected values that should start checked.

my-orders-1

Styled DSL component my-orders-1.

Invocation example:

<my-orders-1 />

HTML structure:

<div class="myOrders__root">
  <div class="myOrders__infoText"></div>
  <div>
    <div class="myOrders__infoText"></div>
    <mat-accordion>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title>
            <p class="myOrders__date"></p>
            <p class="myOrders__price"></p>
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div class="myOrders__addToCart">
          <button mat-stroked-button></button>
        </div>
        <div class="myOrders__content">
          <div class="myOrders__items">
            <h3></h3>
            <div class="myOrders__item">
              <p class="myOrders__productLine">
                <b></b>
                <span class="myOrders__price"></span>
              </p>
              <ul class="myOrders__choices">
                <li>
                  <span class="myOrders__label"></span>
                  <span class="myOrders__value"></span>
                </li>
              </ul>
            </div>
          </div>
          <div class="myOrders__meta">
            <div class="myOrders__metaColumns">
              <div class="myOrders__orderInfo">
                <h3></h3>
                <div class="myOrders__row">
                  <span class="myOrders__label"></span>
                  <span class="myOrders__value"></span>
                </div>
              </div>
              <div class="myOrders__customerInfo">
                <h3></h3>
                <div class="myOrders__row">
                  <span class="myOrders__label"></span>
                  <span class="myOrders__value"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </mat-expansion-panel>
    </mat-accordion>
  </div>
</div>

Overrides: editable style keys are shown as classes in this tree. In raw JSON, set theme_svc.ThemeConfig.classes[styleKey].rawCss; in file-based templates, add classes/<styleKey>.css. Renders logged-out and empty states, or order panels with date/price, add-to-cart button, product choices, detail rows, and optional guest customer rows.

numeric-range-filter-1

Styled DSL component numeric-range-filter-1.

Invocation example:

<numeric-range-filter-1 fieldPath="customFields.width" heading="Width" (changed)="filters = $event" />

HTML structure:

<div class="numericRangeFilter__filter">
  <div class="numericRangeFilter__heading"></div>
  <div class="numericRangeFilter__inputs">
    <label class="numericRangeFilter__field">
      <span></span>
      <input />
    </label>
    <label class="numericRangeFilter__field">
      <span></span>
      <input />
    </label>
  </div>
  <button class="numericRangeFilter__clear"></button>
</div>

Overrides: editable style keys are shown as classes in this tree. In raw JSON, set theme_svc.ThemeConfig.classes[styleKey].rawCss; in file-based templates, add classes/<styleKey>.css. Renders a heading, minimum and maximum label/input fields, and a clear button with visibility based on entered range values.

fieldPath string Dot-notated product field path (for example `customFields.width`).
min number | null Optional initial minimum value displayed in the minimum input.
max number | null Optional initial maximum value displayed in the maximum input.
heading string Optional visible heading shown above the filter controls.

open-icon-1

Styled DSL component open-icon-1.

Invocation example:

<open-icon-1 />

HTML structure:

<div class="openIcon__shell">
  <button class="openIcon__trigger">
    <span class="openIcon__dot"></span>
    <span class="openIcon__label">
      <span class="openIcon__countdownValue"></span>
    </span>
    <span class="openIcon__sr"></span>
  </button>
  <div class="openIcon__panel">
    <div class="openIcon__panelContent">
      <p class="openIcon__panelTitle"></p>
      <p class="openIcon__countdown">
        <span class="openIcon__countdownValue"></span>
      </p>
      <p class="openIcon__alwaysOpen"></p>
      <dl class="openIcon__schedule">
        <div class="openIcon__row">
          <dt class="openIcon__day">
            <span class="openIcon__today"></span>
          </dt>
          <dd class="openIcon__hours">
            <span class="openIcon__closed"></span>
            <span></span>
            <span class="openIcon__range">
              <span></span>
              <span class="openIcon__nextDay"></span>
            </span>
          </dd>
        </div>
      </dl>
    </div>
  </div>
</div>

Overrides: editable style keys are shown as classes in this tree. In raw JSON, set theme_svc.ThemeConfig.classes[styleKey].rawCss; in file-based templates, add classes/<styleKey>.css. Uses data-state for open/closed styling and data-today for the current schedule row. The trigger contains status dot, visible label/countdown, and screen-reader text; the panel renders title, optional countdown, always-open text, or schedule rows.

style any -

place-order-1

Styled DSL component place-order-1.

Invocation example:

<place-order-1 />

HTML structure:

<app-order-form />
<app-payment />
<app-order-summary />
<div class="placeOrder__successStep">
  <div class="placeOrder__successContainer">
    <mat-icon class="placeOrder__successIcon"></mat-icon>
    <h2></h2>
    <p></p>
    <div class="placeOrder__actions">
      <button mat-flat-button></button>
    </div>
  </div>
</div>

Overrides: editable style keys are shown as classes in this tree. In raw JSON, set theme_svc.ThemeConfig.classes[styleKey].rawCss; in file-based templates, add classes/<styleKey>.css. Renders the step-switched order flow, including success icon, heading, message, and back-home button.

product-1

Styled DSL component product-1.

Invocation example:

<product-1 />
<product />

The legacy product tag also loads component identity product-1.

HTML structure:

<section class="product__shell">
  <div class="product__wrapper">
    <section class="product__layout">
      <div class="product__mediaColumn">
        <section class="product__galleryCard">
          <figure class="product__image"></figure>
          <div class="product__imagePlaceholder">
            <mat-icon class="product__imagePlaceholderIcon"></mat-icon>
            <span class="product__imagePlaceholderText"></span>
          </div>
          <div class="product__thumbnails">
            <button class="product__thumbnail"></button>
          </div>
        </section>
      </div>
      <article class="product__content">
        <section class="product__purchaseCard">
          <header class="product__purchaseHeader">
            <h1 class="product__title"></h1>
            <div class="product__price"></div>
          </header>
          <div class="product__buybar">
            <div class="product__quantityControls"></div>
            <button class="product__cartButton"></button>
          </div>
        </section>
        <section class="product__sectionCard">
          <div class="product__description"></div>
        </section>
        <section class="product__choices">
          <section class="product__choiceCard">
            <div class="product__choiceOptions">
              <div class="product__choiceOption"></div>
            </div>
          </section>
        </section>
        <section class="product__requestBox">
          <div class="product__requestContent">
            <div class="product__requestField"></div>
          </div>
        </section>
      </article>
    </section>
  </div>
</section>

Overrides: editable style keys are shown as classes in this tree. In raw JSON, set theme_svc.ThemeConfig.classes[styleKey].rawCss; in file-based templates, add classes/<styleKey>.css. The left media column renders a sticky gallery card with selected image or placeholder plus thumbnails; the right content article contains purchase header/title/price, quantity controls, cart button, optional description, choice cards with radio or checkbox option groups, and a request box for comment/upload fields.

product-loader

ProductLoader is a renderless data loader component for a single shop product. It resolves the product id from the current route, loads the product from the backend, and emits it through the loaded output.

Invocation example:

<product-loader (loaded)="product = $event" />

Intended for product detail pages where the route contains a product ID param.

products-1

Styled DSL component products-1.

Invocation example:

<products-1 eagerCount="4" [query]="searchQuery" />
<products />

The legacy products tag also loads component identity products-1.

HTML structure:

<section class="products__productList">
  <div class="products__productListGrid">
    <div class="products__productTile"></div>
    <p class="products__productListEmpty"></p>
    <app-empty-product-card />
  </div>
</section>

Overrides: editable style keys are shown as classes in this tree. In raw JSON, set theme_svc.ThemeConfig.classes[styleKey].rawCss; in file-based templates, add classes/<styleKey>.css. Each product tile renders thumbnail image, meta, title, price, and truncated description; empty filtered results render the empty paragraph, while an unfiltered empty load renders app-empty-product-card.

eagerCount number The number of product images to load immediately with high priority. *
query string -

products-loader

ProductsLoader is a renderless data loader component for shop products. It loads products from the backend and emits them through the loaded output.

Invocation example:

<products-loader (loaded)="products = $event" />

<loop [data]="products" let="p">
  <!-- render product -->
</loop>

If categoryId is provided, it only loads products in that category.

categoryId string Optional category id filter. When set, only products from that category are loaded.

search-1

Styled DSL component search-1.

Invocation example:

<search-1 (output)="searchQuery = $event" />
<search />

The legacy search tag also loads component identity search-1.

HTML structure:

<div class="search__pill">
  <input class="search__input" />
  <button class="search__clear"></button>
</div>

Overrides: editable style keys are shown as classes in this tree. In raw JSON, set theme_svc.ThemeConfig.classes[styleKey].rawCss; in file-based templates, add classes/<styleKey>.css. The input is bound to searchQuery(), and the clear button is conditional.

output string -

shop-config-loader

ShopConfigLoader is a renderless DSL component that exposes the resolved shop configuration to template state.

Invocation example:

<shop-config-loader (loaded)="shopConfig = $event" />
{{ shopConfig.general.currency }}

subscription-form-1

Styled DSL component subscription-form-1.

Invocation example:

<subscription-form-1 topic="newsletter" buttonLabel="Join" />

HTML structure:

<section class="subscriptionForm__shell">
  <form class="subscriptionForm__form">
    <input class="subscriptionForm__input" />
    <button class="subscriptionForm__button"></button>
  </form>
  <div class="subscriptionForm__success">
    <span class="subscriptionForm__successIcon"></span>
    <div class="subscriptionForm__successBody">
      <p class="subscriptionForm__successTitle"></p>
      <p class="subscriptionForm__successMeta"></p>
    </div>
  </div>
  <p class="subscriptionForm__feedback"></p>
</section>

Overrides: editable style keys are shown as classes in this tree. In raw JSON, set theme_svc.ThemeConfig.classes[styleKey].rawCss; in file-based templates, add classes/<styleKey>.css. Contains an email input and submit button, status icon/title/email, and a feedback paragraph.

id string Optional DOM id for anchor links or section targeting.
emailLabel any Accessible label for the email input.
placeholder any Placeholder text shown inside the email field.
buttonLabel any Primary submit button label.
submittingLabel any Temporary button label shown while the request is in flight.
successText any Success feedback message shown after a completed submission.
topic any Topic stored with the lead contact for downstream segmentation.
submitted string Emits the submitted email address after a successful request.

if

If is a visibility toggle that shows or hides content based on a specific condition. It is commonly used to handle "empty states," loading indicators, or gated features.

Invocation example:

<if [condition]="items.length == 0">
  <div>No results found.</div>
</if>

<if not [condition]="items.length == 0">
  <div>Results found! <3</div>
</if>
condition boolean The primary evaluation criteria. When true, the children blocks are rendered to the DOM.
not any Inverts the condition logic. If true, the component acts as an "Unless" toggle (renders only when condition is false).

loop

Loop is used to display a list of items by repeating a template for every entry in a collection. It makes the data for the "current" item available to all components inside it using a custom name.

Invocation example:

<loop [data]="products" let="item">
 <div>
  Name: {{ item.name }}
  Price: {{ item.cost }}
 </div>
</loop>
data any[] The collection of items to iterate over. Can be an array of objects, strings, or numbers. If null/undefined, the loop handles it gracefully by rendering nothing.
let string Name for the current item inside the loop. Defines the variable name used to reference each item in the template. Defaults to `"e"` if not specified.
height string | undefined The fixed height of the scroll container. Setting this value triggers `overflow: hidden` on the host and is typically required for virtual scrolling to function correctly.
virtualize boolean Enables Virtual Scrolling (CDK). When true, only the items currently visible in the viewport are rendered. Best used with large datasets and a defined `height`.

block

Block defines a globally accessible UI fragment. Once defined, this snippet is stored in a shared registry, making it available for use across different pages or even entirely different websites within the platform. It serves as the single source of truth for shared design patterns.

Invocation example:

<block key="global-footer">
  <footer class="site-footer">© 2024 Platform Inc.</footer>
</block>

To display the content of a block anywhere in your layout (even on other pages), use the <include /> component with the corresponding key:

<include src="global-footer" />
key string The unique identifier used to reference this snippet globally.
name string A friendly name for the block. This title appears in the Snippet Explorer to help others identify the component.
description string A brief summary of the block's purpose. This description is displayed in the Snippet Explorer to explain how the component should be used.
publish boolean * When enabled, this block is added to the Public Snippet Explorer (https://rikrol.com/snippets), allowing others to discover and use it.
display boolean Controls whether the block is visible at the location where it is defined. Set to 'false' if you only want to register the block without rendering it immediately.

include

Include pulls in a shared UI fragment from the global registry. It can resolve blocks defined locally, on other pages, or from external sites, allowing you to build unified interfaces using pre-existing components without duplicating code.

Invocation example:

<include src="shared-nav-menu" />

To include a block from a different website or project, prefix the source with the target application ID followed by a colon:

<include src="app-1234:footer" />
src string Format: "appId:templateId" or just "templateId" (local) Example: "system:navbar" or "my-custom-footer"

let

Let is the state-initialization component for the DSL. It allows developers to explicitly declare and initialize variables.

Invocation example:

<let name="selectedCategory" value="'all'" />
<let name="itemCount" value="0" />
<let name="myArray" value="[{'id': 1}, {'id': 2}]" />
name string The variable name the let statement sets
value any The value to be assigned to the variable. This input supports: - **Literals**: Numbers (100) or Strings ('hello' or "world"). - **Variable References**: Unquoted keys (e.g., `user.name`) are resolved to variables. - **Concatenation**: Combine values using `+` (e.g., `'Hello ' + firstName`). - **Comparisons**: Evaluates to boolean using `==` or `!=`. * *Note: While the DSL evaluates strings, you can also pass raw JS Objects/Arrays directly via Angular property binding [value]="{id: 1}".*

responsive-img

ResponsiveImg is the standard display-only component for responsive images.

Use this when an image should be rendered with generated src / srcset but should not be editable through the CMS or editor UI.

It supports responsive sizing, loading hints, fallback placeholders, and common layout controls such as width, height, and object fit.

Invocation example:

<responsive-img
  src="/upload/gallery-1.jpg"
  alt="Gallery image"
/>
src string Source URL of the image. Required input. Can be absolute or relative path, or file ID.
placeholder string | undefined A fallback image used if no editable image is configured or if the primary source fails to load. Providing this is a best practice as it ensures: - Seamless template portability across different environments. - Transparent sourcing for easier image license verification.
alt any Alternative text for accessibility. Defaults to empty string.
sizes string Value for the `sizes` attribute. Defines how the image should scale across viewport widths. Defaults to `"100vw"`.
quality number Image quality (typically 1–100). Passed to the responsive image service. Defaults to `80`.
widths number[] | undefined Array of widths used to generate responsive `srcset`. Defaults to predefined breakpoints.
loading "eager" | "lazy" | undefined Loading behavior of the image. `"lazy"` defers loading, `"eager"` loads immediately.
decoding "sync" | "async" | "auto" | undefined Decoding hint for the browser. `"async"` (default), `"sync"`, or `"auto"`.
fetchPriority "high" | "low" | "auto" | undefined Fetch priority hint for the browser. `"high"`, `"low"`, or `"auto"`.
id string Standard HTML `id` attribute forwarded to the rendered `<img>`.
class string Standard HTML `class` attribute forwarded to the rendered `<img>`.
style string Standard HTML `style` attribute forwarded to the rendered `<img>`. If the inline style already defines `width` or `height`, those values take precedence over the component's width/height inputs.
title string Standard HTML `title` attribute forwarded to the rendered `<img>`.
width string | number | undefined Explicit width of the image. Can be a number (pixels) or any valid CSS size string.
height string | number | undefined Explicit height of the image. Can be a number (pixels) or any valid CSS size string.
maxWidth string | number | undefined Maximum width constraint. Accepts number (pixels) or CSS size string.
maxHeight string | number | undefined Maximum height constraint. Accepts number (pixels) or CSS size string.
objectFit string | undefined CSS `object-fit` value applied to the image. Example: `"cover"`, `"contain"`, `"fill"`, etc.

responsive-img-modal

ResponsiveImgModal is a display-only image component with lightbox behavior.

Use this when an image should render inline as a responsive preview and open into an interactive modal when clicked.

The modal supports zooming, rotation, and panning. This component does not provide in-place editing.

Invocation example:

<responsive-img-modal
  src="/upload/gallery-1.jpg"
  alt="Gallery image"
/>
src string Source URL of the image. Required input. Can be absolute or relative path, or file id.
alt string Alternative text for accessibility. Defaults to empty string.
width string | number | undefined Explicit width of the thumbnail image. Accepts number (pixels) or any valid CSS size string.
maxWidth string | undefined Maximum width constraint for the thumbnail or container. Accepts any valid CSS size string.
maxHeight string | undefined Maximum height constraint. Accepts number (pixels) or CSS size string.
fitContainer boolean | undefined Determines how the thumbnail fits within its container. `true` uses "contain", `false` uses "cover". Defaults to `true`.
sizes string Value for the `sizes` attribute of the responsive image. Controls how the browser selects appropriate image sizes. Defaults to `"100vw"`.
quality number Image quality parameter (typically 1–100). Passed to image processing services. Defaults to `80`.
thumbnailWidths number[] Width breakpoints used to generate the responsive thumbnail `srcset`. Defaults to predefined thumbnail widths.