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

Angular modules for Cumulocity IoT applications

import { Directionality } from '@angular/cdk/bidi';
import { CdkStepper, StepState } from '@angular/cdk/stepper';
import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, QueryList, TemplateRef } from '@angular/core';
import { ProductExperienceEvent, ProductExperienceEventSource } from '../product-experience/product-experience.model';
import { C8yStepperIcon } from './stepper-icon.directive';
import * as i0 from "@angular/core";
/**
 * `C8yStepper` extends the `CdkStepper`. You can use cdk based functionality and inputs.
 * Additional to that you are able to modify the behavior and also the look and feel when
 * using the `C8yStepper`.
 *
 * The `C8yStepper` is used to present any step-based process to the user.
 * A stepper, `C8yStepper` and/or `CdkStepper` is the parent of cdk-steps.
 * Each cdk-step represents one step in the whole process that you want to provide to the user.
 *
 * The `C8yStepper` will create, based on the given `cdk-steps`, a kind of stepper-progress which looks like this:
 * `(1)---(2)---(3)---(n)`
 * The stepper will handle the state of each step and provides styles for active steps, done-steps or in edit-mode.
 * You are able to override icons for each step in the stepper-progress with a template. You are also able to activate
 * default-icons for states like 'edit' and 'done'.
 *
 * To force users through every provided step, set the stepper to 'linear'.
 * This will disable the possibility to move for example from step one to step three.
 *
 * Whenever it comes to validation try to use formGroups. It is possible to
 * assign a `formGroup` to a `cdk-step` input called `[stepControl]`, which automatically respects the
 * validation-rules that you created for this `formGroup`. If fields are required but not filled or
 * any other validation, like a pattern, is not matched the `formGroup` will be invalid. In this case
 * stepping in a linear stepper to the next step gets impossible.
 *
 * If there is the need to execute asynchronous code you have at least two possibilities.
 * First: As you learned, a cdk-step works with `formGroups` and `Validators`, so you are able to use
 * asyncValidators as well.
 * Second: The `C8yStepper` provides an event-emitter `onStepChange` which is called whenever a step-button `(1)--(2)--(n)`
 * in the stepper-progress is clicked. The event of this emitter holds the index of the step as number. You can
 * use this `EventEmitter` to call for example a custom navigate-method which performs first any async-call and then moves
 * on to the given step.
 *
 * ```typescript
 * <c8y-stepper
 * (onStepChange)="navigate($event)"
 * [disableDefaultIcons]="{ edit: true, done: false }"
 * [customClasses]="['m-l-40', 'm-r-40', 'm-t-32']"
 * linear
 * >
 * <!-- override icons -->
 * <ng-template c8yStepperIcon="final">
 *   <span [c8yIcon]="'hand-peace-o'"></span>
 * </ng-template>
 *
 * <cdk-step [stepControl]="formGroupStepOne" label="Name of the hero">
 *   <div class="m-l-40 m-r-40 m-t-32">
 *     <h4 class="p-b-8" translate>What is the name of your hero?</h4>
 *     <c8y-form-group>
 *      <div [formGroup]="formGroupStepOne">
 *       <input
 *         class="form-control"
 *         type="text"
 *         formControlName="name"
 *         placeholder="Mister X"
 *         #nameRef
 *         required
 *       />
 *       <c8y-messages>
 *         <c8y-message *ngIf="!formGroupStepOne.untouched && !nameRef.value" translate
 *           >Enter the name of the Superhero</c8y-message
 *         >
 *       </c8y-messages>
 *      </div>
 *     </c8y-form-group>
 *   </div>
 *   <c8y-stepper-buttons></c8y-stepper-buttons>
 * </cdk-step>
 * <cdk-step>
 *  ...
 * </cdk-step state="final">
 * </c8y-stepper>
 * ```
 */
export declare class C8yStepper extends CdkStepper implements AfterContentInit, OnDestroy, ProductExperienceEventSource {
    private dir;
    private changeDetectorRef;
    private elementRef?;
    /**
     * Optional
     * Indicator if icons for edit and done state should be shown in step-header buttons
     */
    disableDefaultIcons?: {
        edit: boolean;
        done: boolean;
    };
    /**
     * Optional
     * Disable/enable navigation by stepper progress buttons
     * default: false
     */
    disableProgressButtons?: boolean;
    /**
     * Optional
     * Possibility to add any kind of custom css classes to the step-header
     */
    customClasses?: string[];
    /**
     * Optional
     * Possibility to hide the stepper progress completely.
     */
    hideStepProgress?: boolean;
    /**
     * Optional
     * If `true`, the label defined on a cdk-step won't get rendered below each step-header button.
     * Instead, it will be used as a title only.
     */
    useStepLabelsAsTitlesOnly?: boolean;
    /**
     * Will emit the step index number whenever a step-header button was clicked
     * It listens to the stepIndex Subject.
     * @deprecated: Use the default `selectionChange` event emitter.
     */
    onStepChange: EventEmitter<number>;
    /**
     * Holding a QueryList of C8yStepperIcons
     * These are templateRefs which overrides any step-header button icon with matching state of cdk-step
     *
     * ```typescript
     * <!-- override icons -->
     *  <ng-template c8yStepperIcon="final">
     *   <span [c8yIcon]="'hand-peace-o'"></span>
     *  </ng-template>
     *
     * <cdk-step state="final" label="Job done!">
     *  <div class="m-l-40 m-r-40 m-t-32">
     *    <h4 class="p-b-32" style="text-align: center;" translate>
     *     Your Superhero is now ready to save the world!
     *   </h4>
     *  </div>
     *  <c8y-stepper-buttons
     *    [hidden]="!isModal"
     *    (onBack)="close()"
     *    [labels]="{ back: 'Got it!' }"
     *  ></c8y-stepper-buttons>
     *  <c8y-stepper-buttons [hidden]="isModal"></c8y-stepper-buttons>
     * </cdk-step>
     * ```
     */
    _icons: QueryList<C8yStepperIcon>;
    /** Consumer-specified template-refs to be used to override the header icons. */
    _iconOverrides: {
        [key: string]: TemplateRef<any>;
    };
    productExperienceEvent: ProductExperienceEvent;
    private _stepIndex;
    private _stepIndexSubscription;
    /**
     * @ignore
     */
    constructor(dir: Directionality, changeDetectorRef: ChangeDetectorRef, elementRef?: ElementRef<HTMLElement>);
    /**
     * @ignore
     */
    ngAfterContentInit(): void;
    /**
     * @ignore
     */
    ngOnDestroy(): void;
    /**
     * Manipulates the state based on the disabledDefaultIcons Input()
     * Changing edit or done to false will change the icons within step-header buttons
     * @param index step index
     * @param state step state, like 'done', 'edit', 'error'
     */
    getIndicatorType(index: number, state: StepState): string;
    /**
     * Pushes the step index to the subject
     * @param index step index
     */
    setIndex(index: number): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<C8yStepper, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<C8yStepper, "c8y-stepper", never, { "disableDefaultIcons": { "alias": "disableDefaultIcons"; "required": false; }; "disableProgressButtons": { "alias": "disableProgressButtons"; "required": false; }; "customClasses": { "alias": "customClasses"; "required": false; }; "hideStepProgress": { "alias": "hideStepProgress"; "required": false; }; "useStepLabelsAsTitlesOnly": { "alias": "useStepLabelsAsTitlesOnly"; "required": false; }; }, { "onStepChange": "onStepChange"; }, ["_icons"], never, true, never>;
}
//# sourceMappingURL=stepper.component.d.ts.map