UNPKG

@fivethree/core

Version:
200 lines 15.1 kB
/** * @fileoverview added by tsickle * Generated from: lib/router-item/router-item.component.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ import { FivIcon } from './../icon/icon.component'; import { FivExpandable } from './../expandable/expandable.component'; import { Component, Input, HostBinding, HostListener, Optional, Host, ViewChild } from '@angular/core'; import { Router, NavigationEnd } from '@angular/router'; import { filter } from 'rxjs/operators'; export class FivRouterItem { /** * @param {?} router * @param {?} host */ constructor(router, host) { this.router = router; this.host = host; this.active = false; this.detailIcon = 'chevron-forward'; this.disabled = false; this.matchChildUrl = false; this.navigate = true; /** * The position of the active state. * Default value is: `"left"` */ this.position = 'left'; /** * The shape of the active state. * Possible values are: `"line"`, `"dot"` and `"rounded"`. * Default value is: `"line"` */ this.shape = 'line'; } /** * @return {?} */ onclick() { if (this.navigate && this.pageUrl) { this.router.navigateByUrl(this.pageUrl); } } /** * @return {?} */ get classes() { return `${this.position} ${this.shape}`; } /** * @return {?} */ get activeClass() { return this.matchActiveUrl() || this.active; } /** * @return {?} */ get disabledClass() { return this.disabled; } /** * @return {?} */ ngOnInit() { } /** * @return {?} */ ngAfterViewInit() { this.router.events .pipe(filter((/** * @param {?} event * @return {?} */ event => event instanceof NavigationEnd)), filter((/** * @param {?} event * @return {?} */ (event) => event.url === this.pageUrl))) .subscribe((/** * @return {?} */ () => this.openExpandableHost())); } /** * @return {?} */ openExpandableHost() { /** @type {?} */ const isActive = this.matchActiveUrl() || this.active; if (isActive) { if (this.host && !this.host.isOpen) { this.host.open(); } } } /** * @return {?} */ getClasses() { return [this.position, this.shape]; } /** * @return {?} */ matchActiveUrl() { return this.matchChildUrl ? this.isChildUrl() : this.isCurrentUrl(); } /** * @return {?} */ isCurrentUrl() { return this.router.url === this.pageUrl; } /** * @return {?} */ isChildUrl() { return this.router.url.startsWith(this.pageUrl); } } FivRouterItem.decorators = [ { type: Component, args: [{ selector: 'fiv-router-item', template: "<ion-menu-toggle auto-hide=\"false\">\n <ion-item class=\"ion-activatable\" [color]=\"color\" [detail]=\"detail\" [detailIcon]=\"detailIcon\" [disabled]=\"disabled\"\n [lines]=\"lines\">\n <fiv-icon #fivIcon *ngIf=\"icon\" [name]=\"icon\"></fiv-icon>\n <ion-label>{{text}}</ion-label>\n <ion-ripple-effect type=\"bounded\"></ion-ripple-effect>\n </ion-item>\n</ion-menu-toggle>\n<span [ngClass]=\"getClasses()\" class=\"indicator\"></span>", styles: [":host{display:block;position:relative;width:100%}:host(.active){--color-active:var(--ion-color-primary)}:host(.active) ion-item{--color:var(--color-active);--background:var(--fiv-background, var(--ion-color-light))}:host(.line){--width-line:4px;--background-line:var(--ion-color-primary)}:host(.active) .line{display:block;background:var(--background-line)}:host.active.left .line{width:var(--width-line);height:100%;top:0}:host.active.right .line{width:var(--width-line);height:100%;top:0}.indicator{position:absolute}:host.active .dot{display:block}:host.active.dot.left{padding-left:24px}.dot{width:var(--fiv-dot-width,8px);height:var(--fiv-dot-heigt,8px);background-color:var(--fiv-dot-color,var(--ion-color-primary));top:50%;border-radius:100%;transform:translateY(-50%);right:8px;display:none}.dot.left{left:8px;right:unset}.dot.right{right:8px}:host(.rounded.left){--border-radius-rounded-left:0 50px 50px 0}:host(.rounded.left) ion-item{--border-radius:var(--border-radius-rounded-left);--background:var(--fiv-background)}:host(.rounded.right){--border-radius-rounded-right:50px 0 0 50px}:host(.rounded.right) ion-item{--border-radius:var(--border-radius-rounded-right);--background:var(--fiv-background)}:host(.active.rounded){--background-rounded:var(--ion-color-primary-rgb);--opacity-rounded:0.25}:host(.active.rounded) ion-item{--background:rgba(var(--background-rounded), var(--opacity-rounded))}@media (any-hover:hover){:host(:hover){cursor:pointer}:host(:hover) ion-label{--color:var(--ion-color-primary)}:host(.dot:hover) ion-item,:host(.line:hover) ion-item,:host(.rounded:hover) ion-item{--background:var(--fiv-background-hover, var(--ion-color-light))}}.left{left:0}.right{right:0}ion-item{--border-style:none}fiv-icon{--fiv-padding-end:8px}:host(.router-item-disabled){pointer-events:none}"] }] } ]; /** @nocollapse */ FivRouterItem.ctorParameters = () => [ { type: Router }, { type: FivExpandable, decorators: [{ type: Optional }, { type: Host }] } ]; FivRouterItem.propDecorators = { fivIcon: [{ type: ViewChild, args: ['fivIcon', { static: false },] }], active: [{ type: Input }], color: [{ type: Input }], detail: [{ type: Input }], detailIcon: [{ type: Input }], disabled: [{ type: Input }], icon: [{ type: Input }], lines: [{ type: Input }], matchChildUrl: [{ type: Input }], navigate: [{ type: Input }], pageUrl: [{ type: Input }], position: [{ type: Input }], shape: [{ type: Input }], text: [{ type: Input }], onclick: [{ type: HostListener, args: ['click',] }], classes: [{ type: HostBinding, args: ['class',] }], activeClass: [{ type: HostBinding, args: ['class.active',] }], disabledClass: [{ type: HostBinding, args: ['class.router-item-disabled',] }] }; if (false) { /** @type {?} */ FivRouterItem.prototype.fivIcon; /** @type {?} */ FivRouterItem.prototype.active; /** @type {?} */ FivRouterItem.prototype.color; /** @type {?} */ FivRouterItem.prototype.detail; /** @type {?} */ FivRouterItem.prototype.detailIcon; /** @type {?} */ FivRouterItem.prototype.disabled; /** @type {?} */ FivRouterItem.prototype.icon; /** @type {?} */ FivRouterItem.prototype.lines; /** @type {?} */ FivRouterItem.prototype.matchChildUrl; /** @type {?} */ FivRouterItem.prototype.navigate; /** @type {?} */ FivRouterItem.prototype.pageUrl; /** * The position of the active state. * Default value is: `"left"` * @type {?} */ FivRouterItem.prototype.position; /** * The shape of the active state. * Possible values are: `"line"`, `"dot"` and `"rounded"`. * Default value is: `"line"` * @type {?} */ FivRouterItem.prototype.shape; /** @type {?} */ FivRouterItem.prototype.text; /** @type {?} */ FivRouterItem.prototype.router; /** * @type {?} * @private */ FivRouterItem.prototype.host; } //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicm91dGVyLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGZpdmV0aHJlZS9jb3JlLyIsInNvdXJjZXMiOlsibGliL3JvdXRlci1pdGVtL3JvdXRlci1pdGVtLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUFBLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUNuRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDckUsT0FBTyxFQUNMLFNBQVMsRUFFVCxLQUFLLEVBQ0wsV0FBVyxFQUNYLFlBQVksRUFDWixRQUFRLEVBQ1IsSUFBSSxFQUNKLFNBQVMsRUFFVixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsTUFBTSxFQUFFLGFBQWEsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBRXhELE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQU94QyxNQUFNLE9BQU8sYUFBYTs7Ozs7SUF3RHhCLFlBQ1MsTUFBYyxFQUNPLElBQW1CO1FBRHhDLFdBQU0sR0FBTixNQUFNLENBQVE7UUFDTyxTQUFJLEdBQUosSUFBSSxDQUFlO1FBdkR4QyxXQUFNLEdBQUcsS0FBSyxDQUFDO1FBTWYsZUFBVSxHQUFHLGlCQUFpQixDQUFDO1FBRS9CLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFNakIsa0JBQWEsR0FBRyxLQUFLLENBQUM7UUFFdEIsYUFBUSxHQUFHLElBQUksQ0FBQzs7Ozs7UUFRaEIsYUFBUSxHQUFxQixNQUFNLENBQUM7Ozs7OztRQU9wQyxVQUFLLEdBQStCLE1BQU0sQ0FBQztJQXlCakQsQ0FBQzs7OztJQXJCbUIsT0FBTztRQUM1QixJQUFJLElBQUksQ0FBQyxRQUFRLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRTtZQUNqQyxJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7U0FDekM7SUFDSCxD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bnRlbnQiOlsiaW1wb3J0IHsgRml2SWNvbiB9IGZyb20gJy4vLi4vaWNvbi9pY29uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBGaXZFeHBhbmRhYmxlIH0gZnJvbSAnLi8uLi9leHBhbmRhYmxlL2V4cGFuZGFibGUuY29tcG9uZW50JztcbmltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgT25Jbml0LFxuICBJbnB1dCxcbiAgSG9zdEJpbmRpbmcsXG4gIEhvc3RMaXN0ZW5lcixcbiAgT3B0aW9uYWwsXG4gIEhvc3QsXG4gIFZpZXdDaGlsZCxcbiAgQWZ0ZXJWaWV3SW5pdFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFJvdXRlciwgTmF2aWdhdGlvbkVuZCB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XG5pbXBvcnQgeyBDb2xvciB9IGZyb20gJ0Bpb25pYy9jb3JlJztcbmltcG9ydCB7IGZpbHRlciB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZml2LXJvdXRlci1pdGVtJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3JvdXRlci1pdGVtLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcm91dGVyLWl0ZW0uY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBGaXZSb3V0ZXJJdGVtIGltcGxlbWVudHMgT25Jbml0LCBBZnRlclZpZXdJbml0IHtcbiAgQFZpZXdDaGlsZCgnZml2SWNvbicsIHsgc3RhdGljOiBmYWxzZSB9KSBmaXZJY29uOiBGaXZJY29uO1xuXG4gIEBJbnB1dCgpIGFjdGl2ZSA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpIGNvbG9yPzogQ29sb3I7XG5cbiAgQElucHV0KCkgZGV0YWlsPzogYm9vbGVhbjtcblxuICBASW5wdXQoKSBkZXRhaWxJY29uID0gJ2NoZXZyb24tZm9yd2FyZCc7XG5cbiAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcblxuICBASW5wdXQoKSBpY29uPzogc3RyaW5nO1xuXG4gIEBJbnB1dCgpIGxpbmVzPzogJ2Z1bGwnIHwgJ2luc2V0JyB8ICdub25lJztcblxuICBASW5wdXQoKSBtYXRjaENoaWxkVXJsID0gZmFsc2U7XG5cbiAgQElucHV0KCkgbmF2aWdhdGUgPSB0cnVlO1xuXG4gIEBJbnB1dCgpIHBhZ2VVcmw6IHN0cmluZztcblxuICAvKipcbiAgICogVGhlIHBvc2l0aW9uIG9mIHRoZSBhY3RpdmUgc3RhdGUuXG4gICAqIERlZmF1bHQgdmFsdWUgaXM6IGBcImxlZnRcImBcbiAgICovXG4gIEBJbnB1dCgpIHBvc2l0aW9uOiAnbGVmdCcgfCAncmlnaHQnID0gJ2xlZnQnO1xuXG4gIC8qKlxuICAgKiBUaGUgc2hhcGUgb2YgdGhlIGFjdGl2ZSBzdGF0ZS5cbiAgICogUG9zc2libGUgdmFsdWVzIGFyZTogYFwibGluZVwiYCwgYFwiZG90XCJgIGFuZCBgXCJyb3VuZGVkXCJgLlxuICAgKiBEZWZhdWx0IHZhbHVlIGlzOiBgXCJsaW5lXCJgXG4gICAqL1xuICBASW5wdXQoKSBzaGFwZTogJ2xpbmUnIHwgJ2RvdCcgfCAncm91bmRlZCcgPSAnbGluZSc7XG5cbiAgQElucHV0KCkgdGV4dDogc3RyaW5nO1xuXG4gIEBIb3N0TGlzdGVuZXIoJ2NsaWNrJykgb25jbGljaygpIHtcbiAgICBpZiAodGhpcy5uYXZpZ2F0ZSAmJiB0aGlzLnBhZ2VVcmwpIHtcbiAgICAgIHRoaXMucm91dGVyLm5hdmlnYXRlQnlVcmwodGhpcy5wYWdlVXJsKTtcbiAgICB9XG4gIH1cblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzJykgZ2V0IGNsYXNzZXMoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gYCR7dGhpcy5wb3NpdGlvbn0gJHt0aGlzLnNoYXBlfWA7XG4gIH1cblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmFjdGl2ZScpIGdldCBhY3RpdmVDbGFzcygpIHtcbiAgICByZXR1cm4gdGhpcy5tYXRjaEFjdGl2ZVVybCgpIHx8IHRoaXMuYWN0aXZlO1xuICB9XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5yb3V0ZXItaXRlbS1kaXNhYmxlZCcpIGdldCBkaXNhYmxlZENsYXNzKCkge1xuICAgIHJldHVybiB0aGlzLmRpc2FibGVkO1xuICB9XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHVibGljIHJvdXRlcjogUm91dGVyLFxuICAgIEBPcHRpb25hbCgpIEBIb3N0KCkgcHJpdmF0ZSBob3N0OiBGaXZFeHBhbmRhYmxlXG4gICkge31cblxuICBuZ09uSW5pdCgpIHt9XG5cbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIHRoaXMucm91dGVyLmV2ZW50c1xuICAgICAgLnBpcGUoXG4gICAgICAgIGZpbHRlcihldmVudCA9PiBldmVudCBpbnN0YW5jZW9mIE5hdmlnYXRpb25FbmQpLFxuICAgICAgICBmaWx0ZXIoKGV2ZW50OiBOYXZpZ2F0aW9uRW5kKSA9PiBldmVudC51cmwgPT09IHRoaXMucGFnZVVybClcbiAgICAgIClcbiAgICAgIC5zdWJzY3JpYmUoKCkgPT4gdGhpcy5vcGVuRXhwYW5kYWJsZUhvc3QoKSk7XG4gIH1cblxuICBvcGVuRXhwYW5kYWJsZUhvc3QoKSB7XG4gICAgY29uc3QgaXNBY3RpdmUgPSB0aGlzLm1hdGNoQWN0aXZlVXJsKCkgfHwgdGhpcy5hY3RpdmU7XG4gICAgaWYgKGlzQWN0aXZlKSB7XG4gICAgICBpZiAodGhpcy5ob3N0ICYmICF0aGlzLmhvc3QuaXNPcGVuKSB7XG4gICAgICAgIHRoaXMuaG9zdC5vcGVuKCk7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgZ2V0Q2xhc3NlcygpOiBzdHJpbmdbXSB7XG4gICAgcmV0dXJuIFt0aGlzLnBvc2l0aW9uLCB0aGlzLnNoYXBlXTtcbiAgfVxuXG4gIG1hdGNoQWN0aXZlVXJsKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLm1hdGNoQ2hpbGRVcmwgPyB0aGlzLmlzQ2hpbGRVcmwoKSA6IHRoaXMuaXNDdXJyZW50VXJsKCk7XG4gIH1cblxuICBpc0N1cnJlbnRVcmwoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMucm91dGVyLnVybCA9PT0gdGhpcy5wYWdlVXJsO1xuICB9XG5cbiAgaXNDaGlsZFVybCgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5yb3V0ZXIudXJsLnN0YXJ0c1dpdGgodGhpcy5wYWdlVXJsKTtcbiAgfVxufVxuIl19