@fivethree/core/esm5/lib/stepper/step-header/step-header.component.js

Fivethree Core Components

/**
 * @fileoverview added by tsickle
 * Generated from: lib/stepper/step-header/step-header.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import { Component, Input } from '@angular/core';
import { trigger, transition, animate, state, style } from '@angular/animations';
var FivStepHeader = /** @class */ (function () {
    function FivStepHeader() {
        this.iconCompleted = 'checkmark';
        this.iconState = 'normal';
    }
    /**
     * @return {?}
     */
    FivStepHeader.prototype.ngOnInit = /**
     * @return {?}
     */
    function () { };
    /**
     * @param {?} event
     * @param {?} icon
     * @return {?}
     */
    FivStepHeader.prototype.changeIconAndReveal = /**
     * @param {?} event
     * @param {?} icon
     * @return {?}
     */
    function (event, icon) {
        if (event.fromState === 'normal') {
            this.tempIcon = this.icon;
            this.icon = icon;
            this.iconState = 'normal';
        }
    };
    /**
     * @return {?}
     */
    FivStepHeader.prototype.complete = /**
     * @return {?}
     */
    function () {
        this.iconState = 'rotate';
    };
    /**
     * @return {?}
     */
    FivStepHeader.prototype.reset = /**
     * @return {?}
     */
    function () {
        this.icon = this.tempIcon;
    };
    FivStepHeader.decorators = [
        { type: Component, args: [{
                    selector: 'fiv-step-header',
                    template: "<div class=\"number-container\">\n  <span *ngIf=\"index && !icon\" [@rotateAnim]=\"iconState\"\n    (@rotateAnim.done)=\"changeIconAndReveal($event,iconCompleted)\">{{index}}</span>\n  <ion-icon *ngIf=\"icon\" [@rotateAnim]=\"iconState\" (@rotateAnim.done)=\"changeIconAndReveal($event,iconCompleted)\"\n    [name]=\"icon\"></ion-icon>\n</div>\n<div class=\"step-content\">\n  <ng-content>\n  </ng-content>\n</div>",
                    animations: [
                        trigger('rotateAnim', [
                            transition('normal => rotate', [animate('125ms ease-out')]),
                            transition('rotate => normal', [animate('125ms ease-in')]),
                            state('rotate', style({
                                opacity: '0',
                                transform: 'translate(-50%, -50%) rotateZ(45deg)'
                            })),
                            state('normal', style({
                                opacity: '1',
                                transform: 'translate(-50%, -50%) rotateZ(0deg)'
                            }))
                        ])
                    ],
                    styles: [":host{display:block;width:100%;height:72px;align-items:center;position:relative;padding-top:8px}.number-container{width:24px;height:24px;border-radius:100%;position:absolute;left:16px;background:var(--fiv-color-circle,var(--ion-color-primary));color:var(--fiv-color-circle-color,var(--ion-color-light))}.number-container *{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotateZ(0)}.step-content{padding-left:56px}"]
                }] }
    ];
    /** @nocollapse */
    FivStepHeader.ctorParameters = function () { return []; };
    FivStepHeader.propDecorators = {
        index: [{ type: Input }],
        icon: [{ type: Input }],
        iconCompleted: [{ type: Input }]
    };
    return FivStepHeader;
}());
export { FivStepHeader };
if (false) {
    /** @type {?} */
    FivStepHeader.prototype.index;
    /** @type {?} */
    FivStepHeader.prototype.icon;
    /** @type {?} */
    FivStepHeader.prototype.iconCompleted;
    /** @type {?} */
    FivStepHeader.prototype.iconState;
    /** @type {?} */
    FivStepHeader.prototype.tempIcon;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RlcC1oZWFkZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGZpdmV0aHJlZS9jb3JlLyIsInNvdXJjZXMiOlsibGliL3N0ZXBwZXIvc3RlcC1oZWFkZXIvc3RlcC1oZWFkZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekQsT0FBTyxFQUNMLE9BQU8sRUFDUCxVQUFVLEVBQ1YsT0FBTyxFQUNQLEtBQUssRUFDTCxLQUFLLEVBQ04sTUFBTSxxQkFBcUIsQ0FBQztBQUU3QjtJQWlDRTtRQUxTLGtCQUFhLEdBQUcsV0FBVyxDQUFDO1FBRXJDLGNBQVMsR0FBRyxRQUFRLENBQUM7SUFHTixDQUFDOzs7O0lBRWhCLGdDQUFROzs7SUFBUixjQUFZLENBQUM7Ozs7OztJQUViLDJDQUFtQjs7Ozs7SUFBbkIsVUFBb0IsS0FBSyxFQUFFLElBQVk7UUFDckMsSUFBSSxLQUFLLENBQUMsU0FBUyxLQUFLLFFBQVEsRUFBRTtZQUNoQyxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUM7WUFDMUIsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUM7WUFDakIsSUFBSSxDQUFDLFNBQVMsR0FBRyxRQUFRLENBQUM7U0FDM0I7SUFDSCxDQUFDOzs7O0lBRUQsZ0NBQVE7OztJQUFSO1FBQ0UsSUFBSSxDQUFDLFNBQVMsR0FBRyxRQUFRLENBQUM7SUFDNUIsQ0FBQzs7OztJQUVELDZCQUFLOzs7SUFBTDtRQUNFLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQztJQUM1QixDQUFDOztnQkFuREYsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxpQkFBaUI7b0JBQzNCLDBhQUEyQztvQkFFM0MsVUFBVSxFQUFFO3dCQUNWLE9BQU8sQ0FBQyxZQUFZLEVBQUU7NEJBQ3BCLFVBQVUsQ0FBQyxrQkFBa0IsRUFBRSxDQUFDLE9BQU8sQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDLENBQUM7NEJBQzNELFVBQVUsQ0FBQyxrQkFBa0IsRUFBRSxDQUFDLE9BQU8sQ0FBQyxlQUFlLENBQUMsQ0FBQyxDQUFDOzRCQUMxRCxLQUFLLENBQ0gsUUFBUSxFQUNSLEtBQUssQ0FBQztnQ0FDSixPQUFPLEVBQUUsR0FBRztnQ0FDWixTQUFTLEVBQUUsc0NBQXNDOzZCQUNsRCxDQUFDLENBQ0g7NEJBQ0QsS0FBSyxDQUNILFFBQVEsRUFDUixLQUFLLENBQUM7Z0NBQ0osT0FBTyxFQUFFLEdBQUc7Z0NBQ1osU0FBUyxFQUFFLHFDQUFxQzs2QkFDakQsQ0FBQyxDQUNIO3lCQUNGLENBQUM7cUJBQ0g7O2lCQUNGOzs7Ozt3QkFFRSxLQUFLO3VCQUNMLEtBQUs7Z0NBQ0wsS0FBSzs7SUF3QlIsb0JBQUM7Q0FBQSxBQXBERCxJQW9EQztTQTNCWSxhQUFhOzs7SUFDeEIsOEJBQXVCOztJQUN2Qiw2QkFBc0I7O0lBQ3RCLHNDQUFxQzs7SUFFckMsa0NBQXFCOztJQUNyQixpQ0FBaUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gIHRyaWdnZXIsXG4gIHRyYW5zaXRpb24sXG4gIGFuaW1hdGUsXG4gIHN0YXRlLFxuICBzdHlsZVxufSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZml2LXN0ZXAtaGVhZGVyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3N0ZXAtaGVhZGVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vc3RlcC1oZWFkZXIuY29tcG9uZW50LnNjc3MnXSxcbiAgYW5pbWF0aW9uczogW1xuICAgIHRyaWdnZXIoJ3JvdGF0ZUFuaW0nLCBbXG4gICAgICB0cmFuc2l0aW9uKCdub3JtYWwgPT4gcm90YXRlJywgW2FuaW1hdGUoJzEyNW1zIGVhc2Utb3V0JyldKSxcbiAgICAgIHRyYW5zaXRpb24oJ3JvdGF0ZSA9PiBub3JtYWwnLCBbYW5pbWF0ZSgnMTI1bXMgZWFzZS1pbicpXSksXG4gICAgICBzdGF0ZShcbiAgICAgICAgJ3JvdGF0ZScsXG4gICAgICAgIHN0eWxlKHtcbiAgICAgICAgICBvcGFjaXR5OiAnMCcsXG4gICAgICAgICAgdHJhbnNmb3JtOiAndHJhbnNsYXRlKC01MCUsIC01MCUpIHJvdGF0ZVooNDVkZWcpJ1xuICAgICAgICB9KVxuICAgICAgKSxcbiAgICAgIHN0YXRlKFxuICAgICAgICAnbm9ybWFsJyxcbiAgICAgICAgc3R5bGUoe1xuICAgICAgICAgIG9wYWNpdHk6ICcxJyxcbiAgICAgICAgICB0cmFuc2Zvcm06ICd0cmFuc2xhdGUoLTUwJSwgLTUwJSkgcm90YXRlWigwZGVnKSdcbiAgICAgICAgfSlcbiAgICAgIClcbiAgICBdKVxuICBdXG59KVxuZXhwb3J0IGNsYXNzIEZpdlN0ZXBIZWFkZXIgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBpbmRleDogbnVtYmVyO1xuICBASW5wdXQoKSBpY29uOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGljb25Db21wbGV0ZWQgPSAnY2hlY2ttYXJrJztcblxuICBpY29uU3RhdGUgPSAnbm9ybWFsJztcbiAgdGVtcEljb246IHN0cmluZztcblxuICBjb25zdHJ1Y3RvcigpIHt9XG5cbiAgbmdPbkluaXQoKSB7fVxuXG4gIGNoYW5nZUljb25BbmRSZXZlYWwoZXZlbnQsIGljb246IHN0cmluZykge1xuICAgIGlmIChldmVudC5mcm9tU3RhdGUgPT09ICdub3JtYWwnKSB7XG4gICAgICB0aGlzLnRlbXBJY29uID0gdGhpcy5pY29uO1xuICAgICAgdGhpcy5pY29uID0gaWNvbjtcbiAgICAgIHRoaXMuaWNvblN0YXRlID0gJ25vcm1hbCc7XG4gICAgfVxuICB9XG5cbiAgY29tcGxldGUoKSB7XG4gICAgdGhpcy5pY29uU3RhdGUgPSAncm90YXRlJztcbiAgfVxuXG4gIHJlc2V0KCkge1xuICAgIHRoaXMuaWNvbiA9IHRoaXMudGVtcEljb247XG4gIH1cbn1cbiJdfQ==