@c8y/ngx-components/core/stepper/stepper-buttons.component.d.ts

Angular modules for Cumulocity IoT applications

import { CdkStep } from '@angular/cdk/stepper';
import { AfterContentInit, EventEmitter, OnDestroy } from '@angular/core';
import { GainsightService } from '../product-experience/gainsight.service';
import { C8yStepper } from './stepper.component';
import { StepperButtonsVisibility } from './stepper.model';
import * as i0 from "@angular/core";
/**
 * `C8yStepperButtons` provides a convenient way to have, according to
 * the `C8yStepper` and each `cdk-step`, buttons to navigate between steps or to cancel the whole
 * step-process. Buttons rendered with the help of this component will use the branding css.
 *
 * By default all steps with this component in use will render a next button, expect the last step.
 * The other way around, every step using this component will render a back button, expect the first step.
 * To get a cancel button rendered you need to handle the onCancel event.
 * For next and back button you don't need to handle the available events `onNext` and `onBack` because default behavior
 * is implemented. The default will just call, according to the button, the `stepper.next()` or `stepper.previous()`
 * methods and moves the stepper forth or back. Using the `EventEmitter` `onNext` and `onBack` will emit for you the following
 * object: `{stepper: C8yStepper, step: CdkStep}`. This is useful if you need to implement custom logic before moving
 * to the next step or sending data to a backend. In this case you need to tell the stepper to move forward or back
 * on your own.
 *
 * With the component input `[labels]` you can change the label of each button in each step. It takes an object like this:
 * `{next?: string, back?: string, cancel?: string}`
 *
 * The `[pending]` input is of type boolean and will enable css animation for the next button when true.
 *
 * If the `cdk-step` provides a `stepControl` the component will set the next button disabled when the formGroup
 * behind it is invalid. As long as the `[pending]` input is true the back and next button is also disabled.
 * This will prevent multiple clicks while running a request or stepping back while a request is ongoing.
 *
 * ```html
 * <c8y-stepper>
 *  <cdk-step>
 *    <!--
 *      your html code
 *          ...
 *          ...    -->
 *    <c8y-stepper-buttons
 *     (onNext)="save()"
 *     [labels]="{ next: 'Save' }"
 *     [pending]="pendingStatus"
 *     ></c8y-stepper-buttons>
 *  </cdk-step>
 * </c8y-stepper>
 * ```
 *
 * ```js
 * // in your component:
 * async save() {
 *   this.pendingStatus = true;
 *   // your async request goes here ...
 *   // await something();
 *   this.pendingStatus = false;
 *   this.stepper.next();
 * }
 * ```
 */
export declare class C8yStepperButtons implements AfterContentInit, OnDestroy {
    private stepper;
    private step;
    private gainsightService;
    /**
     * Optional
     * Specify custom labels for each button (cancel, back or next)
     */
    labels?: {
        cancel?: string;
        back?: string;
        next?: string;
        custom?: string;
    };
    /**
     * Optional
     * Indicates if a request is pending and sets the next button
     * to disabled when true
     */
    pending?: boolean;
    /**
     * Disabled state of a button
     */
    disabled?: boolean;
    /**
     * EventEmitter which emits when cancel button is clicked
     */
    onCancel: EventEmitter<any>;
    /**
     * EventEmitter which emits {stepper: C8yStepper; step: CdkStep} when next button is clicked.
     */
    onNext: EventEmitter<{
        stepper: C8yStepper;
        step: CdkStep;
    }>;
    /**
     * EventEmitter which emits {stepper: C8yStepper; step: CdkStep} when back button is clicked.
     */
    onBack: EventEmitter<{
        stepper: C8yStepper;
        step: CdkStep;
    }>;
    /**
     * EventEmitter which emits when the optional custom button is clicked
     */
    onCustom: EventEmitter<any>;
    /**
     * Indicator which button should be shown.
     * Based on the cdk-steps within the c8y-stepper
     * next and back buttons are rendered.
     */
    showBtns: StepperButtonsVisibility;
    /**
     * Flag that indicates that the default settings defined in the showBtns have been overwritten.
     */
    forceShowBtns: boolean;
    private statusChangeSubscription;
    constructor(stepper: C8yStepper, step: CdkStep, gainsightService: GainsightService);
    /**
     * This option forces the display of the buttons passed by the input.
     * It will override the default settings and take precedence over the standard settings.
     *
     * ```html
     * <c8y-stepper-buttons
     *   [labels]="{ custom: 'Custom btn', cancel: 'Cancel btn' }"
     *   [showButtons]="{ custom: true, cancel: true }"
     * ></c8y-stepper-buttons>
     * ```
     *
     * @param btns An object that contains options for displaying buttons.
     */
    set showButtons(btns: StepperButtonsVisibility);
    /**
     * @ignore
     */
    ngAfterContentInit(): void;
    ngOnDestroy(): void;
    /**
     * Gets called when cancel button is clicked.
     * It will emit immediate.
     */
    cancel(): void;
    /**
     * Gets called when next button is clicked. When onNext EventEmitter has an observer registered
     * it will emit the following object {stepper: C8yStepper; step: CdkStep}.
     * Otherwise it will call stepper.next() as default.
     */
    next(): void;
    /**
     * Gets called when back button is clicked. When onBack EventEmitter has an observer registered
     * it will emit the following object {stepper: C8yStepper; step: CdkStep}.
     * Otherwise it will call stepper.previous() as default.
     */
    back(): void;
    /**
     * Gets called when the custom button is clicked.
     * It will emit immediately.
     */
    custom(): void;
    private triggerEvent;
    static ɵfac: i0.ɵɵFactoryDeclaration<C8yStepperButtons, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<C8yStepperButtons, "c8y-stepper-buttons", never, { "labels": { "alias": "labels"; "required": false; }; "pending": { "alias": "pending"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "showButtons": { "alias": "showButtons"; "required": false; }; }, { "onCancel": "onCancel"; "onNext": "onNext"; "onBack": "onBack"; "onCustom": "onCustom"; }, never, ["button"], true, never>;
}
//# sourceMappingURL=stepper-buttons.component.d.ts.map