ng-shopping-cart/components/add-to-cart/add-to-cart.component.d.ts

An Angular component library to create shopping carts

import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { DropdownValue } from '../../interfaces/dropdown-value';
import { AddToCartPosition, AddToCartType } from '../../types';
import { CartService } from '../../services/cart.service';
import { CartItem } from '../../classes/cart-item';
/**
 * A component to add items to the cart by pressing a button. Has different built-in editors to select quantity.
 *
 * @order 1
 * @howToUse "With a custom button or projected content"
 * ```html
 * <add-to-cart [item]="item" [custom]="true">
 *    <button type="button" class="my-custom-class">Add item</button>
 * </add-to-cart>
 * ```
 *
 * @howToUse "With different text and classes"
 * ```html
 * <add-to-cart [item]="item" [buttonText]="'Add item'" [buttonClass]="'my-custom-class'">
 * </add-to-cart>
 * ```
 *
 * @howToUse "With a html number input positioned on top"
 * ```html
 * <add-to-cart [item]="item" [type]="'number'" [position]="'top'">
 * </add-to-cart>
 * ```
 *
 * @howToUse "With a select for selecting quantity"
 * ```html
 * <add-to-cart [item]="item" [type]="'dropdown'" [dropdown]="[{ label: 'One item', value: 1 }, { label: 'Two items', value: 2 }]">
 * </add-to-cart>
 * ```
 *
 * @howToUse "With the default button and different quantity"
 * ```html
 * <add-to-cart [item]="item" [quantity]="5">
 * </add-to-cart>
 * ```
 *
 * @note {warning} This component captures click events that bubble from its projected content if you are using `[custom]=true` therefore if
 * you have html content other than buttons inside you must stop the event propagation unless the click originated in the button that
 * add the items to the cart.
 */
export declare class AddToCartComponent implements OnInit, OnChanges {
    private cartService;
    private _editorQuantity;
    containerClass: any;
    hasEditor: boolean;
    horizontalEditor: boolean;
    editorPrecedence: 'before' | 'after';
    /**
     * If `false` displays a default button provided by the component, otherwise projects the contents of the component to be used as a
     * button.
     */
    custom: boolean;
    /**
     * The item that will be added to the cart on click. If no item is provided the button will be disabled unless you use custom buttons.
     *
     * If you specify an editor using the type input the quantity of the item might be modified prior to insertion in the service.
     */
    item: CartItem;
    /**
     * Changes the default text of the component's button.
     */
    buttonText: string;
    /**
     * Changes the default CSS class of the component's button.
     */
    buttonClass: string;
    /**
     * Renders a button or a button with an editor to select the quantity of the item that will be added in the cart. When it has a value
     * other than `'button'` an editor is displayed depending on the selected `[type]`; it can be a `select`, or a text or a number `input`.
     *
     * > Do not confuse this input with the html attribute `type`. The default button is always generated with this attribute set to
     * `button` to prevent accidental form submissions.
     */
    type: AddToCartType;
    /**
     * Sets the position where the editor will be placed. If the `[type]` is set to `'button'` no editor is displayed and this setting has
     * no effect.
     */
    position: AddToCartPosition;
    /**
     * If `[type]` is set to `'dropdown'` it can be used to set the options of the rendered `select` editor. Is an array of objects with
     * label and a value properties used to populate the select's `option` elements.
     */
    dropdown: DropdownValue[];
    /**
     * If you use this binding you can easily override the quantity that will be added to the cart when the button is clicked.
     *
     * > When the `[type]` is **not** set to `'button'` this binding is ignored and the value from the editor is used instead.
     */
    quantity: number;
    /**
     * This event is fired when the component uses an editor and its value is changed by the user.
     */
    change: EventEmitter<number>;
    /**
     * This event is fired when the item is added to the cart.
     */
    added: EventEmitter<CartItem>;
    editorQuantity: number;
    constructor(cartService: CartService<any>);
    ngOnInit(): void;
    private itemQuantity();
    ngOnChanges(changes: SimpleChanges): void;
    addToCart(evt: any): void;
    computeClass(): void;
}