@salla.sa/twilight-components
Version:
Salla Web Component
89 lines (88 loc) • 2.93 kB
TypeScript
import { Offer, Currency, Category, Product } from './interfaces';
/**
* `salla-offer` is a StencilJS component that displays offers, categories, products, banks, and discount information.
* It uses the `salla-slider` component for carousel functionality.
*
* @slot category - The slot for customizing the category entry layout.
*
* @csspart custom - Custom CSS part to target specific elements in the component.
*
* @example
* <salla-offer product-id="123"></salla-offer>
*/
export declare class SallaOffer {
constructor();
/**
* Custom Card Component for the Salla Products List.
*
* This component allows you to customize the appearance of individual product cards within a Salla Products List.
*
* @example
* <salla-products-list product-card-component="my-custom-card-style1" ...
* <salla-products-list product-card-component="my-custom-card-style2" ...
*/
productCardComponent: string;
offersList: Offer[];
userCurrency: Currency;
title?: string;
currentPage: string;
hasCustomComponent: boolean;
canRender: boolean;
showOffer: boolean;
showAllOffersModal: boolean;
showProductsModal: boolean;
selectedOfferProducts: Product[];
collapsedOffers: {
[offerId: number]: boolean;
};
expandedCategories: {
[offerId: number]: boolean;
};
productsLoaded: boolean;
offer_with_price_text: string;
with_discount_text: string;
product_discount_text: string;
special_offer_text: string;
buy_quantity_text: (quantity: number) => string;
products_link_text: string;
min_spend_text: (amount: number, currency: string) => string;
min_items_text: (items: number) => string;
product_text: string;
host: HTMLElement;
private getEndpointByPageName;
/**
* Emits a promotion viewed event for analytics tracking
*/
private emitPromotionViewed;
/**
* Emits a promotion clicked event
*/
private emitPromotionClicked;
componentWillLoad(): Promise<void>;
componentDidLoad(): void;
findCategories(categories: Category[], ids: any[]): Category[];
render(): any[];
private renderShowMoreCard;
private openAllOffersModal;
private closeAllOffersModal;
private closeProductsModal;
private handleAccordionToggle;
private getOfferProducts;
private renderProductsLinkForModalCard;
private renderAllOffersModal;
private renderProductsModal;
private renderModalOfferCard;
private renderOfferCard;
private getOfferIcon;
private renderDiscountTableOfferContent;
private renderPercentageOrFixedOfferContent;
private groupDiscountsByRows;
private formatDiscountCondition;
private renderOfferCategories;
private renderOfferBrands;
private renderOfferTags;
/**
* Toggle category expansion for a specific offer
*/
private toggleCategoryExpansion;
}