@fivethree/core
Version:
Fivethree Core Components
83 lines • 8.9 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: lib/stepper/stepper-horizontal/stepper-horizontal.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, QueryList, Input, ViewChild, EventEmitter, Output } from '@angular/core';
import { IonSlides } from '@ionic/angular';
import { trigger, transition, animate, state, style } from '@angular/animations';
var FivStepperHorizontal = /** @class */ (function () {
function FivStepperHorizontal() {
this.fivSelect = new EventEmitter();
}
/**
* @return {?}
*/
FivStepperHorizontal.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.slides.lockSwipes(true);
};
/**
* @return {?}
*/
FivStepperHorizontal.prototype.close = /**
* @return {?}
*/
function () {
this.slides.slideTo(0);
};
/**
* @param {?} index
* @return {?}
*/
FivStepperHorizontal.prototype.open = /**
* @param {?} index
* @return {?}
*/
function (index) {
this.slides.lockSwipes(false);
this.slides.slideTo(index);
this.slides.lockSwipes(true);
};
FivStepperHorizontal.decorators = [
{ type: Component, args: [{
selector: 'fiv-stepper-horizontal',
template: "<ion-grid fixed>\n <ion-row>\n <ion-col *ngFor=\"let content of contents.toArray(); let i = index; let f = first; let l = last;\"\n [size]=\"12 / contents.length\">\n <div class=\"ion-activatable\" (click)=\"fivSelect.emit(i)\">\n <span *ngIf=\"!f\" class=\"line left\"></span>\n <div class=\"number-container\">\n <span *ngIf=\"!content.icon\">{{i + 1}}</span>\n <ion-icon *ngIf=\"content.icon\" [name]=\"content.icon\"></ion-icon>\n </div>\n\n <ion-ripple-effect type=\"bounded\"></ion-ripple-effect>\n <span *ngIf=\"!l\" class=\"line right\"></span>\n </div>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col *ngFor=\"let content of contents.toArray(); let i = index; let f = first; let l = last;\"\n [size]=\"12 / contents.length\">\n <div class=\"ion-activatable\" (click)=\"fivSelect.emit(i)\">\n <div class=\"horizontal-content\">\n <div class=\"header-title\">{{content.title}}</div>\n <div class=\"header-subtitle\">{{content.subtitle}}</div>\n </div>\n </div>\n <ion-ripple-effect type=\"bounded\"></ion-ripple-effect>\n </ion-col>\n </ion-row>\n</ion-grid>\n\n<ion-slides #slides pager=\"false\">\n <ion-slide *ngFor=\"let content of contents; let i = index\">\n <ng-container [ngTemplateOutlet]=\"content.content\"></ng-container>\n </ion-slide>\n</ion-slides>",
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: [".number-container{width:24px;height:24px;border-radius:100%;position:relative;left:50%;transform:translateX(-50%);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)}ion-col{text-align:center;padding:0}.line{width:calc(50% - 20px);height:1px;position:absolute;background:var(--fiv-color-timeline,var(--ion-color-medium));top:50%;transform:translateY(-50%)}.left{left:0}.right{right:0}.header-title{color:var(--fiv-color-title,var(--ion-color-dark))}.header-subtitle{color:var(--fiv-color-subtitle,var(--ion-color-medium));font-size:.8em}"]
}] }
];
/** @nocollapse */
FivStepperHorizontal.ctorParameters = function () { return []; };
FivStepperHorizontal.propDecorators = {
contents: [{ type: Input }],
slides: [{ type: ViewChild, args: ['slides', { static: true },] }],
fivSelect: [{ type: Output }]
};
return FivStepperHorizontal;
}());
export { FivStepperHorizontal };
if (false) {
/** @type {?} */
FivStepperHorizontal.prototype.contents;
/** @type {?} */
FivStepperHorizontal.prototype.slides;
/** @type {?} */
FivStepperHorizontal.prototype.fivSelect;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RlcHBlci1ob3Jpem9udGFsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BmaXZldGhyZWUvY29yZS8iLCJzb3VyY2VzIjpbImxpYi9zdGVwcGVyL3N0ZXBwZXItaG9yaXpvbnRhbC9zdGVwcGVyLWhvcml6b250YWwuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFFVCxTQUFTLEVBQ1QsS0FBSyxFQUNMLFNBQVMsRUFDVCxZQUFZLEVBQ1osTUFBTSxFQUNQLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUMzQyxPQUFPLEVBQ0wsT0FBTyxFQUNQLFVBQVUsRUFDVixPQUFPLEVBQ1AsS0FBSyxFQUNMLEtBQUssRUFDTixNQUFNLHFCQUFxQixDQUFDO0FBRTdCO0lBOEJFO1FBRlUsY0FBUyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7SUFFbEMsQ0FBQzs7OztJQUVoQix1Q0FBUTs7O0lBQVI7UUFDRSxJQUFJLENBQUMsTUFBTSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUMvQixDQUFDOzs7O0lBRUQsb0NBQUs7OztJQUFMO1FBQ0UsSUFBSSxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDekIsQ0FBQzs7Ozs7SUFDRCxtQ0FBSTs7OztJQUFKLFVBQUssS0FBYTtRQUNoQixJQUFJLENBQUMsTUFBTSxDQUFDLFVBQVUsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUM5QixJQUFJLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUMzQixJQUFJLENBQUMsTUFBTSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUMvQixDQUFDOztnQkEzQ0YsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSx3QkFBd0I7b0JBQ2xDLGk1Q0FBa0Q7b0JBRWxELFVBQVUsRUFBRTt3QkFDVixPQUFPLENBQUMsWUFBWSxFQUFFOzRCQUNwQixVQUFVLENBQUMsa0JBQWtCLEVBQUUsQ0FBQyxPQUFPLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxDQUFDOzRCQUMzRCxVQUFVLENBQUMsa0JBQWtCLEVBQUUsQ0FBQyxPQUFPLENBQUMsZUFBZSxDQUFDLENBQUMsQ0FBQzs0QkFDMUQsS0FBSyxDQUNILFFBQVEsRUFDUixLQUFLLENBQUM7Z0NBQ0osT0FBTyxFQUFFLEdBQUc7Z0NBQ1osU0FBUyxFQUFFLHNDQUFzQzs2QkFDbEQsQ0FBQyxDQUNIOzRCQUNELEtBQUssQ0FDSCxRQUFRLEVBQ1IsS0FBSyxDQUFDO2dDQUNKLE9BQU8sRUFBRSxHQUFHO2dDQUNaLFNBQVMsRUFBRSxxQ0FBcUM7NkJBQ2pELENBQUMsQ0FDSDt5QkFDRixDQUFDO3FCQUNIOztpQkFDRjs7Ozs7MkJBRUUsS0FBSzt5QkFDTCxTQUFTLFNBQUMsUUFBUSxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRTs0QkFDcEMsTUFBTTs7SUFnQlQsMkJBQUM7Q0FBQSxBQTVDRCxJQTRDQztTQW5CWSxvQkFBb0I7OztJQUMvQix3Q0FBc0M7O0lBQ3RDLHNDQUF5RDs7SUFDekQseUNBQWlEIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBPbkluaXQsXG4gIFF1ZXJ5TGlzdCxcbiAgSW5wdXQsXG4gIFZpZXdDaGlsZCxcbiAgRXZlbnRFbWl0dGVyLFxuICBPdXRwdXRcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGaXZTdGVwIH0gZnJvbSAnLi4vc3RlcC9zdGVwLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBJb25TbGlkZXMgfSBmcm9tICdAaW9uaWMvYW5ndWxhcic7XG5pbXBvcnQge1xuICB0cmlnZ2VyLFxuICB0cmFuc2l0aW9uLFxuICBhbmltYXRlLFxuICBzdGF0ZSxcbiAgc3R5bGVcbn0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2Zpdi1zdGVwcGVyLWhvcml6b250YWwnLFxuICB0ZW1wbGF0ZVVybDogJy4vc3RlcHBlci1ob3Jpem9udGFsLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vc3RlcHBlci1ob3Jpem9udGFsLmNvbXBvbmVudC5zY3NzJ10sXG4gIGFuaW1hdGlvbnM6IFtcbiAgICB0cmlnZ2VyKCdyb3RhdGVBbmltJywgW1xuICAgICAgdHJhbnNpdGlvbignbm9ybWFsID0+IHJvdGF0ZScsIFthbmltYXRlKCcxMjVtcyBlYXNlLW91dCcpXSksXG4gICAgICB0cmFuc2l0aW9uKCdyb3RhdGUgPT4gbm9ybWFsJywgW2FuaW1hdGUoJzEyNW1zIGVhc2UtaW4nKV0pLFxuICAgICAgc3RhdGUoXG4gICAgICAgICdyb3RhdGUnLFxuICAgICAgICBzdHlsZSh7XG4gICAgICAgICAgb3BhY2l0eTogJzAnLFxuICAgICAgICAgIHRyYW5zZm9ybTogJ3RyYW5zbGF0ZSgtNTAlLCAtNTAlKSByb3RhdGVaKDQ1ZGVnKSdcbiAgICAgICAgfSlcbiAgICAgICksXG4gICAgICBzdGF0ZShcbiAgICAgICAgJ25vcm1hbCcsXG4gICAgICAgIHN0eWxlKHtcbiAgICAgICAgICBvcGFjaXR5OiAnMScsXG4gICAgICAgICAgdHJhbnNmb3JtOiAndHJhbnNsYXRlKC01MCUsIC01MCUpIHJvdGF0ZVooMGRlZyknXG4gICAgICAgIH0pXG4gICAgICApXG4gICAgXSlcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBGaXZTdGVwcGVySG9yaXpvbnRhbCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIGNvbnRlbnRzOiBRdWVyeUxpc3Q8Rml2U3RlcD47XG4gIEBWaWV3Q2hpbGQoJ3NsaWRlcycsIHsgc3RhdGljOiB0cnVlIH0pIHNsaWRlczogSW9uU2xpZGVzO1xuICBAT3V0cHV0KCkgZml2U2VsZWN0ID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXI+KCk7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMuc2xpZGVzLmxvY2tTd2lwZXModHJ1ZSk7XG4gIH1cblxuICBjbG9zZSgpOiBhbnkge1xuICAgIHRoaXMuc2xpZGVzLnNsaWRlVG8oMCk7XG4gIH1cbiAgb3BlbihpbmRleDogbnVtYmVyKTogYW55IHtcbiAgICB0aGlzLnNsaWRlcy5sb2NrU3dpcGVzKGZhbHNlKTtcbiAgICB0aGlzLnNsaWRlcy5zbGlkZVRvKGluZGV4KTtcbiAgICB0aGlzLnNsaWRlcy5sb2NrU3dpcGVzKHRydWUpO1xuICB9XG59XG4iXX0=