Developer Components

app-bar-1

Styled numbered component app-bar-1.

Invocation example:

<app-bar-1><cart-button-1 slot="desktopRightEnd" /></app-bar-1>

HTML structure:

<ng-template #mobileMenuStartX>
  <ng-content select="[mobile-menu-start]" />
</ng-template>
<ng-template #mobileMenuEndX>
  <ng-content select="[mobile-menu-end]" />
</ng-template>
<ng-template #mobileToolbarStartX>
  <ng-content select="[mobile-toolbar-start]" />
</ng-template>
<ng-template #mobileToolbarEndX>
  <ng-content select="[mobile-toolbar-end]" />
</ng-template>
<div class="mobileContainer">
  <div class="innerFlex">
    <div class="toolbarGroup">
      <ng-container #mobileToolbarStart />
      <ng-container *ngTemplateOutlet="mobileToolbarStartX" />
    </div>
    <span class="logoWrapper">
      <img class="logoImg" />
      <span class="titleText"></span>
    </span>
    <div class="toolbarGroup">
      <ng-container #mobileToolbarEnd />
      <mat-icon class="menuIcon"></mat-icon>
    </div>
    <mat-menu #mobileMenu="matMenu">
      <ng-container #mobileMenuStart />
      <button mat-menu-item id="mobile-login-btn">
        <mat-icon></mat-icon>
      </button>
      <button mat-menu-item id="mobile-admin-btn">
        <mat-icon></mat-icon>
        <span class="adminBadge"></span>
      </button>
      <button mat-menu-item>
        <span></span>
      </button>
      <ng-container #mobileMenuEnd />
    </mat-menu>
  </div>
</div>
<div class="desktopContainer">
  <div>
    <div>
      <span>
        <img class="logoImg" />
      </span>
      <ng-container #desktopToolbarStart />
      <button mat-button>
        <span></span>
      </button>
      <ng-container #desktopToolbarEnd />
    </div>
    <div>
      <ng-container #desktopRightStart />
      <button mat-button id="desktop-login-btn"></button>
      <button mat-button id="desktop-admin-btn"></button>
      <ng-container #desktopRightEnd />
    </div>
  </div>
</div>

Overrides: names in this tree are shorthand editable style keys; runtime keys are prefixed by componentName() + "--" + class() + "__". In raw JSON, set theme_svc.ThemeConfig.classes[styleKey].rawCss; in file-based templates, add classes/<styleKey>.css. The mobile container renders toolbar groups, logo/title wrapper, and menu trigger; the desktop container renders logo, toolbar slots, nav buttons, auth/admin buttons, and right-side slots.

Inputs

icon string -

url string -

noModal boolean -

appsModal boolean -

noBackButton boolean -

themeKey string -

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>

Outputs

loaded HeaderContextState ▶-

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.

Inputs

style string -

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. When the basket grows the icon plays a short bump animation so the header cart draws attention to itself.

Inputs

type "button" | "menu-item" -

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>

Outputs

output string -

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>

Inputs

id string Optional DOM id for anchor links or section targeting.

emailLabel string Accessible label for the email input.

placeholder string Placeholder text shown inside the email field.

buttonLabel string Primary submit button label.

submittingLabel string Temporary button label shown while the request is in flight.

successText string Success feedback message shown after a completed submission.

topic string Topic stored with the lead contact for downstream segmentation.

Outputs

submitted string Emits the submitted email address after a successful request.

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 class="products__productThumb">
        <responsive-img />
      </div>
      <div class="products__productMeta">
        <h3 class="products__productTitle"></h3>
        <div class="products__productPrice"></div>
        <div class="products__productDescription"></div>
      </div>
    </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 a responsive file-id thumbnail, meta, title, price, and truncated description; empty filtered results render the empty paragraph, while an unfiltered empty load renders app-empty-product-card.

Inputs

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

query string -

product-1

Styled DSL component product-1. Invocation example:

<product-1 />
<product editableClass="cqProductDetail" />

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">
             <button mat-icon-button><mat-icon></mat-icon></button>
             <input class="product__quantityInput" />
             <button mat-icon-button><mat-icon></mat-icon></button>
           </div>
           <button class="product__cartButton"></button>
         </div>
       </section>
       <section class="product__sectionCard">
         <div class="product__description"></div>
       </section>
       <section class="product__feedbackBox">
         <button class="product__feedbackToggle"></button>
         <div class="product__feedbackContent">
           <textarea class="product__feedbackField"></textarea>
           <button class="product__feedbackSubmit"></button>
         </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 class="product__recommendations">
       <article class="product__recommendation"><button class="product__recommendationSummary"></button></article>
     </section>
   </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 controls, description, private feedback, choices, and request fields. Recommendations are a direct grid child below the desktop gallery and after all personalization on narrow screens; cards open the choice/quantity modal with exact Undo, while invalid choices use the product fallback and preserve limits/defaults.

Inputs

hostEditableClass string -

centered-1

Registered DSL component centered-1.

Inputs

style string -

vertical boolean -

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">
  <a [href]="p.pageURL">
    <responsive-image [src]="p.imageFileId" [alt]="p.name" />
    <span>{{ p.name }}</span>
  </a>
</loop>

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

Inputs

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

filters ProductListFilter[] ▶Optional list of low-level ShopSvc filters. These can be produced by dedicated filter components (range, multiselect, etc.).

Outputs

loaded ShopSvcProductExtended[] ▶Emits the loaded product list. Emits an empty array if loading fails.

daily-offer-loader

DailyOfferLoader is a renderless DSL component for today's coupon set.

Invocation example:

<daily-offer-loader (loaded)="dailyOffers = $event" />

<loop [data]="dailyOffers.coupons" let="coupon">
  <h2>{{ coupon.title }}</h2>
</loop>

A successful pending response is preserved so templates can distinguish pre-opening from true empty states. Missing, disabled, or unavailable responses emit an empty set instead of rejecting the render.

Outputs

loaded DailyOfferViewModel ▶Emits today's set, including pending metadata, or a true empty set.

coupon-offer-action-1

The styled coupon-offer-action-1 cart action for a template-authored tile.

Invocation example:

<coupon-offer-action-1 [coupon]="c" />

HTML structure:

<button class="coupon-cta">Use offer</button>

The button delegates to CouponOfferCartService and disables itself for malformed, unavailable, or currently-configuring offers. Overrides: the coupon-cta style key can be changed via theme_svc.ThemeConfig.classes[coupon-cta].rawCss or classes/coupon-cta.css.

Inputs

coupon ShopSvcDailyCoupon ▶-

coupon-price-1

Styled coupon-price-1 component that formats complete bundle pricing.

Invocation example:

<coupon-price-1 [coupon]="c" />

HTML structure:

<div class="coupon-price">
  <s class="coupon-price-original"></s>
  <strong class="coupon-price-discounted"></strong>
  <span class="coupon-price-saving"></span>
</div>

Minor units stay internal; the component applies the canonical discount and locale formatting. Overrides: style keys can be changed through theme_svc.ThemeConfig.classes[styleKey].rawCss or classes/<styleKey>.css.

Inputs

coupon ShopSvcDailyCoupon ▶-

coupon-magazine-1

Styled DSL bridge for the shared admin/storefront coupon magazine card.

Invocation example:

<coupon-magazine-1 [coupon]="coupon" [index]="$index" />

HTML structure:

<article class="coupon-card">
  <div class="coupon-media"></div>
  <div class="coupon-body">
    <div class="coupon-bundle"></div>
    <h2 class="coupon-title"></h2>
    <p class="coupon-desc"></p>
    <div class="coupon-price"></div>
    <button class="coupon-cta"></button>
  </div>
</article>

This bridge deliberately delegates markup, responsive layout, pricing, and interaction to the same CouponMagazine component used by the admin preview. Its palette inherits the active storefront theme tokens. Overrides: the shared magazine component owns its internal styles; customize the storefront palette through the standard --color-* theme tokens.

Inputs

coupon ShopSvcDailyCoupon ▶-

index number -

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.

Outputs

loaded ProductLoaderData | null ▶-

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>

Outputs

loaded ShopSvcCategory[] ▶Emits the loaded category list.

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 }}

Outputs

loaded ShopSvcShopConfig ▶Emits the normalized shop configuration once the config load has settled, then emits again whenever the shop config changes.

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" />

Inputs

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 string 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" />

Inputs

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 string DEPRECATED. Will be removed.

Outputs

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" />`.

responsive-image

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-image
  src="/upload/gallery-1.jpg"
  alt="Gallery image"
/>

The DSL tag responsive-image loads component identity responsive-img.

Inputs

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 string 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-image-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-image-modal
  src="/upload/gallery-1.jpg"
  alt="Gallery image"
/>

The DSL tag responsive-image-modal loads component identity responsive-img-modal.

Inputs

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.

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>
          <a mat-stroked-button></a>
        </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.

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>

Inputs

fallbackUrl string -

label string -

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>

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.

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>

login-1

Registered DSL component login-1.

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.

Inputs

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.

Outputs

changed ProductListFilter[] ▶Emits the current filter list whenever range values change.

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.

Inputs

fieldPath string Dot path used in the emitted filter.

heading string Heading rendered on top of the component.

options Array<string | MultiSelectFilterOption> ▶Available options. Accepts either a string list (`['A', 'B']`) or explicit objects (`[{ label: 'A', value: 'a' }]`).

selected string[] Preselected values that should start checked.

Outputs

changed ProductListFilter[] ▶Emits API-ready filters on every selection change.

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>

Inputs

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.

Outputs

changed ProductListFilter[] ▶Emits API-ready filters whenever the toggle state changes.

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.

Inputs

definitions ProductCustomFieldDefinition[] | ProductCustomFieldDefinition | string ▶Custom field definitions to register for products. Accepts: - a single definition object - an array of definition objects - a JSON string containing either a single definition or an array Supported definition shape: - `fieldPath`: unique config path for the custom field - `name`: optional admin label - `type`: optional value type (`string`, `number`, `boolean`, `json`) Invalid or unparsable values are ignored. Definitions already present in `products.customFieldDefinitions` are not duplicated.

appBar

Styled numbered component app-bar-1.

Invocation example:

<app-bar-1><cart-button-1 slot="desktopRightEnd" /></app-bar-1>

HTML structure:

<ng-template #mobileMenuStartX>
  <ng-content select="[mobile-menu-start]" />
</ng-template>
<ng-template #mobileMenuEndX>
  <ng-content select="[mobile-menu-end]" />
</ng-template>
<ng-template #mobileToolbarStartX>
  <ng-content select="[mobile-toolbar-start]" />
</ng-template>
<ng-template #mobileToolbarEndX>
  <ng-content select="[mobile-toolbar-end]" />
</ng-template>
<div class="mobileContainer">
  <div class="innerFlex">
    <div class="toolbarGroup">
      <ng-container #mobileToolbarStart />
      <ng-container *ngTemplateOutlet="mobileToolbarStartX" />
    </div>
    <span class="logoWrapper">
      <img class="logoImg" />
      <span class="titleText"></span>
    </span>
    <div class="toolbarGroup">
      <ng-container #mobileToolbarEnd />
      <mat-icon class="menuIcon"></mat-icon>
    </div>
    <mat-menu #mobileMenu="matMenu">
      <ng-container #mobileMenuStart />
      <button mat-menu-item id="mobile-login-btn">
        <mat-icon></mat-icon>
      </button>
      <button mat-menu-item id="mobile-admin-btn">
        <mat-icon></mat-icon>
        <span class="adminBadge"></span>
      </button>
      <button mat-menu-item>
        <span></span>
      </button>
      <ng-container #mobileMenuEnd />
    </mat-menu>
  </div>
</div>
<div class="desktopContainer">
  <div>
    <div>
      <span>
        <img class="logoImg" />
      </span>
      <ng-container #desktopToolbarStart />
      <button mat-button>
        <span></span>
      </button>
      <ng-container #desktopToolbarEnd />
    </div>
    <div>
      <ng-container #desktopRightStart />
      <button mat-button id="desktop-login-btn"></button>
      <button mat-button id="desktop-admin-btn"></button>
      <ng-container #desktopRightEnd />
    </div>
  </div>
</div>

Inputs

icon string -

url string -

noModal boolean -

appsModal boolean -

noBackButton boolean -

themeKey string -

openIcon

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.

Inputs

style string -

cartButton

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. When the basket grows the icon plays a short bump animation so the header cart draws attention to itself.

Inputs

type "button" | "menu-item" -

search

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>

Outputs

output string -

products

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 class="products__productThumb">
        <responsive-img />
      </div>
      <div class="products__productMeta">
        <h3 class="products__productTitle"></h3>
        <div class="products__productPrice"></div>
        <div class="products__productDescription"></div>
      </div>
    </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 a responsive file-id thumbnail, meta, title, price, and truncated description; empty filtered results render the empty paragraph, while an unfiltered empty load renders app-empty-product-card.

Inputs

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

query string -

product

Styled DSL component product-1. Invocation example:

<product-1 />
<product editableClass="cqProductDetail" />

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">
             <button mat-icon-button><mat-icon></mat-icon></button>
             <input class="product__quantityInput" />
             <button mat-icon-button><mat-icon></mat-icon></button>
           </div>
           <button class="product__cartButton"></button>
         </div>
       </section>
       <section class="product__sectionCard">
         <div class="product__description"></div>
       </section>
       <section class="product__feedbackBox">
         <button class="product__feedbackToggle"></button>
         <div class="product__feedbackContent">
           <textarea class="product__feedbackField"></textarea>
           <button class="product__feedbackSubmit"></button>
         </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 class="product__recommendations">
       <article class="product__recommendation"><button class="product__recommendationSummary"></button></article>
     </section>
   </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 controls, description, private feedback, choices, and request fields. Recommendations are a direct grid child below the desktop gallery and after all personalization on narrow screens; cards open the choice/quantity modal with exact Undo, while invalid choices use the product fallback and preserve limits/defaults.

Inputs

hostEditableClass string -

centered

Registered DSL component centered.

Inputs

style string -

vertical boolean -

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>

Inputs

condition boolean The primary evaluation criteria. When true, the children blocks are rendered to the DOM.

not boolean Inverts the condition logic. If true, the component acts as an "Unless" toggle (renders only when condition is false).

childrenBlocks Block[] ▶Ignore this.

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>

Inputs

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`.

childrenBlocks Block[] ▶-

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" />

Inputs

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" />

Inputs

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}]" />

Inputs

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-image
  src="/upload/gallery-1.jpg"
  alt="Gallery image"
/>