@quickbutik/kit/elements

import { … } from "@quickbutik/kit/elements"

new ContextRequestEvent<T>(
   context, 
   callback, 
subscribe?): ContextRequestEvent<T>;

Event.constructor

readonly callback: ContextCallback<T>;

readonly context: Context<T>;

readonly subscribe: boolean;

<qb-add-to-cart>
  <button>Lägg i varukorg</button>
</qb-add-to-cart>

new QbAddToCartElement(): QbAddToCartElement;

static observedAttributes: string[];

add(quantity?): Promise<void>;

attributeChangedCallback(_name?): void;

connectedCallback(): void;

disconnectedCallback(): void;

<qb-product slug="cotton-tee">
  <qb-options>…</qb-options>
  <qb-add-to-cart><button>Lägg i varukorgen</button></qb-add-to-cart>
  <qb-buy-now success-url="/order" back-url="/">
    <button>Köp nu</button>
  </qb-buy-now>
</qb-product>

new QbBuyNowElement(): QbBuyNowElement;

static observedAttributes: string[];

attributeChangedCallback(_name?): void;

buy(quantity?): Promise<void>;

connectedCallback(): void;

disconnectedCallback(): void;

<a href="/cart">Varukorg (<qb-cart-count></qb-cart-count>)</a>

new QbCartCountElement(): QbCartCountElement;

attributeChangedCallback(_name?): void;

connectedCallback(): void;

disconnectedCallback(): void;

<qb-cart>
  <p data-qb-show="cart.empty">Din varukorg är tom.</p>
  <qb-cart-items>
    <template>
      <li>
        <span data-qb-text="item.productTitle"></span>
        <span data-qb-text="item.variantName"></span>
        <input type="number" data-qb-quantity data-qb-value="item.quantity">
        <span data-qb-text="item.lineTotalFormatted"></span>
        <button data-qb-action="remove">Ta bort</button>
      </li>
    </template>
  </qb-cart-items>
  <strong data-qb-text="cart.totalFormatted"></strong>
</qb-cart>

new QbCartElement(): QbCartElement;

CartAwareElement.constructor

static observedAttributes: string[];

attributeChangedCallback(_name?): void;

CartAwareElement.attributeChangedCallback

connectedCallback(): void;

CartAwareElement.connectedCallback

disconnectedCallback(): void;

CartAwareElement.disconnectedCallback

new QbCartItemsElement(): QbCartItemsElement;

CartAwareElement.constructor

static observedAttributes: string[];

attributeChangedCallback(_name?): void;

CartAwareElement.attributeChangedCallback

connectedCallback(): void;

CartAwareElement.connectedCallback

disconnectedCallback(): void;

CartAwareElement.disconnectedCallback

<qb-checkout-button success-url="/order" back-url="/">
  <button>Till kassan</button>
</qb-checkout-button>

new QbCheckoutButtonElement(): QbCheckoutButtonElement;

static observedAttributes: string[];

attributeChangedCallback(_name?): void;

checkout(): Promise<void>;

connectedCallback(): void;

disconnectedCallback(): void;

<qb-checkout success-url="/thanks" back-url="/cart" lang="sv"></qb-checkout>

new QbCheckoutElement(): QbCheckoutElement;

static observedAttributes: string[];

get checkout(): EmbeddedCheckout | null;

attributeChangedCallback(_name?): void;

connectedCallback(): void;

disconnectedCallback(): void;

<qb-consent-banner lang="sv" privacy-policy-url="/integritet"></qb-consent-banner>

<qb-consent-banner>
  <h2 data-qb-text="consent.labels.title"></h2>
  <button data-qb-action="reject-all">Only necessary</button>
  <button data-qb-action="accept-all">Accept all</button>
  <button data-qb-action="open-settings" data-qb-hide="consent.open">Settings</button>
  <fieldset data-qb-show="consent.open">
    <label><input type="checkbox" data-qb-consent="analytics"> Analytics</label>
    <label><input type="checkbox" data-qb-consent="marketing"> Marketing</label>
    <button data-qb-action="save">Save</button>
  </fieldset>
</qb-consent-banner>

new QbConsentBannerElement(): QbConsentBannerElement;

static observedAttributes: string[];

attributeChangedCallback(_name?): void;

connectedCallback(): void;

disconnectedCallback(): void;

save(): void;

<qb-consent-gate category="marketing">
  <template>
    <iframe src="https://www.youtube.com/embed/…"></iframe>
  </template>
  <p>Accept marketing cookies to watch the video.</p>
</qb-consent-gate>

new QbConsentGateElement(): QbConsentGateElement;

static observedAttributes: string[];

attributeChangedCallback(_name?): void;

connectedCallback(): void;

disconnectedCallback(): void;

<footer>
  <qb-consent-settings><button type="button">Cookie settings</button></qb-consent-settings>
</footer>

new QbConsentSettingsElement(): QbConsentSettingsElement;

static observedAttributes: string[];

attributeChangedCallback(_name?): void;

connectedCallback(): void;

disconnectedCallback(): void;

<!-- 1. Nothing inside: a native <select> of the shop's currencies is added -->
<qb-currency-select></qb-currency-select>

<!-- 2. Your own <select>: filled with the currencies (a value="" placeholder
     is kept), or left alone when you wrote the options yourself -->
<qb-currency-select>
  <label>Valuta <select class="my-select"></select></label>
</qb-currency-select>

<!-- 3. A <template>: one clone per currency, any markup at all -->
<qb-currency-select>
  <template>
    <button data-qb-action="set-currency" data-qb-text="option.code"></button>
  </template>
</qb-currency-select>

new QbCurrencySelectElement(): QbCurrencySelectElement;

static observedAttributes: string[];

get info(): CurrencyInfo | null;

attributeChangedCallback(_name?): void;

choose(code): Promise<void>;

connectedCallback(): void;

disconnectedCallback(): void;

new QbElement(): QbElement;

HTMLElement.constructor

attributeChangedCallback(_name?): void;

connectedCallback(): void;

disconnectedCallback(): void;

new QbOptionsElement(): QbOptionsElement;

OptionsRepeatElement.constructor

attributeChangedCallback(_name?): void;

OptionsRepeatElement.attributeChangedCallback

connectedCallback(): void;

OptionsRepeatElement.connectedCallback

disconnectedCallback(): void;

OptionsRepeatElement.disconnectedCallback

new QbOptionValuesElement(): QbOptionValuesElement;

OptionsRepeatElement.constructor

static observedAttributes: string[];

attributeChangedCallback(_name?): void;

OptionsRepeatElement.attributeChangedCallback

connectedCallback(): void;

OptionsRepeatElement.connectedCallback

disconnectedCallback(): void;

OptionsRepeatElement.disconnectedCallback

<qb-order-confirmation>
  <p data-qb-show="confirmation.loading">Skapar din order…</p>
  <p data-qb-show="confirmation.completed">
    Tack! Ordernummer <strong data-qb-text="confirmation.orderNumber"></strong>
  </p>
  <p data-qb-show="confirmation.failed">Betalningen gick inte igenom.</p>
</qb-order-confirmation>

new QbOrderConfirmationElement(): QbOrderConfirmationElement;

static observedAttributes: string[];

attributeChangedCallback(_name?): void;

connectedCallback(): void;

disconnectedCallback(): void;

<qb-product slug="cotton-tee">
  <h1 data-qb-text="product.name"></h1>
  <p data-qb-text="price.display"></p>
  <qb-options>…</qb-options>
  <qb-add-to-cart><button>Lägg i varukorg</button></qb-add-to-cart>
</qb-product>

new QbProductElement(): QbProductElement;

static observedAttributes: string[];

get product(): Product | null;

set product(product): void;

get selection(): ProductController | null;

addToCart(quantity?): Promise<Cart | null>;

attributeChangedCallback(name): void;

buyNow(input, quantity?): Promise<BuyNowResult | null>;

canAddToCart(): boolean;

connectedCallback(): void;

disconnectedCallback(): void;

<!-- inside <qb-product> or a <qb-product-list> row: no attributes needed -->
<qb-product-image width="800" height="800"></qb-product-image>

<!-- a gallery -->
<qb-product-image index="1" width="120"></qb-product-image>

new QbProductImageElement(): QbProductImageElement;

image: ProductImage | null;

static observedAttributes: string[];

get product(): Product | null;

set product(product): void;

attributeChangedCallback(_name?): void;

connectedCallback(): void;

disconnectedCallback(): void;

<qb-product-list limit="12" sort-by="price" sort-order="asc">
  <template>
    <a data-qb-attr="href:product.href">
      <qb-product-image width="400"></qb-product-image>
      <h3 data-qb-text="product.name"></h3>
      <span data-qb-text="product.priceFormatted"></span>
    </a>
  </template>
</qb-product-list>

new QbProductListElement(): QbProductListElement;

static observedAttributes: string[];

get products(): Product[];

attributeChangedCallback(_name?): void;

connectedCallback(): void;

disconnectedCallback(): void;

reload(): void;

new QbScopeElement(): QbScopeElement;

attributeChangedCallback(_name?): void;

connectedCallback(): void;

disconnectedCallback(): void;

<qb-product slug="cotton-tee">
  <qb-seo base-url="https://minbutik.se" product-path="/products/{slug}"></qb-seo>
  …
</qb-product>

new QbSeoElement(): QbSeoElement;

static observedAttributes: string[];

get tags(): SeoTags;

attributeChangedCallback(_name?): void;

connectedCallback(): void;

disconnectedCallback(): void;

<!-- two shops on one page -->
<qb-shop publishable-key="qb_pk_a_…"> … </qb-shop>
<qb-shop publishable-key="qb_pk_b_…"> … </qb-shop>

<!-- one section against a rig / preview gateway -->
<qb-shop publishable-key="qb_pk_…" api-url="https://gateway.platform.test"> … </qb-shop>

<!-- a campaign storefront (Säljplats): campaign prices on every product,
     cart and checkout inside -->
<qb-shop publishable-key="qb_pk_…" storefront-id="sf_…"> … </qb-shop>

<!-- browse in euro until the shopper picks something else -->
<qb-shop publishable-key="qb_pk_…" currency="EUR"> … </qb-shop>

<!-- a client you built yourself, cookies and all -->
<script>document.querySelector("qb-shop").client = myClient</script>

<!-- no analytics for this subtree's shop, or no consent at all -->
<qb-shop publishable-key="qb_pk_…" analytics="false"> … </qb-shop>
<qb-shop publishable-key="qb_pk_…" consent="false"> … </qb-shop>

new QbShopElement(): QbShopElement;

static observedAttributes: string[];

get cartStore(): CartStore | null;

get client(): ShopkitClient | null;

set client(client): void;

set initialCart(cart): void;

attributeChangedCallback(name?): void;

connectedCallback(): void;

disconnectedCallback(): void;

new Repeater(host): Repeater;

get current(): RepeatRow[];

get hasTemplate(): boolean;

clear(): void;

render<T>(
   items, 
   key, 
   fill): void;

rowFor(node): RepeatRow | null;

dispose(): void;