carbon-components-angular
Version:
Next generation components
416 lines (410 loc) • 16.7 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Optional, Input, Output, HostBinding, ContentChildren, NgModule } from '@angular/core';
import * as i1 from '@angular/platform-browser';
import * as i2 from '@angular/router';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1$1 from 'carbon-components-angular/i18n';
import { I18nModule } from 'carbon-components-angular/i18n';
import * as i4 from 'carbon-components-angular/dialog';
import { DialogModule } from 'carbon-components-angular/dialog';
class BreadcrumbItemComponent {
constructor(domSanitizer, router) {
this.domSanitizer = domSanitizer;
this.router = router;
/**
* Emits the navigation status promise when the link is activated
*/
this.navigation = new EventEmitter();
this.skeleton = false;
this.ariaCurrent = "page";
this.current = false;
this.itemClass = true;
}
set href(v) {
this._href = v;
}
get href() {
return this.domSanitizer.bypassSecurityTrustUrl(this._href);
}
useTemplate() {
return this.skeleton || this._href || this.route;
}
navigate(event) {
if (this.router && this.route) {
event.preventDefault();
const status = this.router.navigate(this.route, this.routeExtras);
this.navigation.emit(status);
}
}
}
BreadcrumbItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BreadcrumbItemComponent, deps: [{ token: i1.DomSanitizer }, { token: i2.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
BreadcrumbItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BreadcrumbItemComponent, selector: "cds-breadcrumb-item, ibm-breadcrumb-item", inputs: { href: "href", route: "route", routeExtras: "routeExtras", skeleton: "skeleton", ariaCurrent: "ariaCurrent", current: "current" }, outputs: { navigation: "navigation" }, host: { properties: { "class.cds--breadcrumb-item--current": "this.current", "class.cds--breadcrumb-item": "this.itemClass" } }, ngImport: i0, template: `
<a
class="cds--link"
[href]="(skeleton ? '/#' : href)"
(click)="navigate($event)"
[attr.aria-current]="(current ? ariaCurrent : null)"
*ngIf="useTemplate(); else content">
<ng-container *ngTemplateOutlet="content"></ng-container>
</a>
<ng-template #content>
<ng-content></ng-content>
</ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BreadcrumbItemComponent, decorators: [{
type: Component,
args: [{
selector: "cds-breadcrumb-item, ibm-breadcrumb-item",
template: `
<a
class="cds--link"
[href]="(skeleton ? '/#' : href)"
(click)="navigate($event)"
[attr.aria-current]="(current ? ariaCurrent : null)"
*ngIf="useTemplate(); else content">
<ng-container *ngTemplateOutlet="content"></ng-container>
</a>
<ng-template #content>
<ng-content></ng-content>
</ng-template>`
}]
}], ctorParameters: function () {
return [{ type: i1.DomSanitizer }, { type: i2.Router, decorators: [{
type: Optional
}] }];
}, propDecorators: { href: [{
type: Input
}], route: [{
type: Input
}], routeExtras: [{
type: Input
}], navigation: [{
type: Output
}], skeleton: [{
type: Input
}], ariaCurrent: [{
type: Input
}], current: [{
type: HostBinding,
args: ["class.cds--breadcrumb-item--current"]
}, {
type: Input
}], itemClass: [{
type: HostBinding,
args: ["class.cds--breadcrumb-item"]
}] } });
const MINIMUM_OVERFLOW_THRESHOLD = 4;
/**
* Get started with importing the module:
*
* ```typescript
* import { BreadcrumbModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-breadcrumb--basic)
*/
class Breadcrumb {
constructor(i18n, router) {
this.i18n = i18n;
this.router = router;
this.noTrailingSlash = false;
this.ariaLabel = this.i18n.get().BREADCRUMB.LABEL;
/**
* Emits the navigation status promise when the link is activated
*/
this.navigation = new EventEmitter();
this._skeleton = false;
}
set skeleton(value) {
this._skeleton = value;
this.updateChildren();
}
get skeleton() {
return this._skeleton;
}
set threshold(threshold) {
this._threshold = threshold;
if (isNaN(threshold) || threshold < MINIMUM_OVERFLOW_THRESHOLD) {
this._threshold = MINIMUM_OVERFLOW_THRESHOLD;
}
}
get threshold() {
return this._threshold;
}
get shouldShowContent() {
return !this.items;
}
get shouldShowOverflow() {
if (!this.items) {
return false;
}
return this.items.length > this.threshold;
}
get first() {
return this.shouldShowOverflow ? this.items[0] : null;
}
get overflowItems() {
return this.shouldShowOverflow ? this.items.slice(1, this.items.length - 2) : [];
}
get secondLast() {
return this.shouldShowOverflow ? this.items[this.items.length - 2] : null;
}
get last() {
return this.shouldShowOverflow ? this.items[this.items.length - 1] : null;
}
ngAfterContentInit() {
this.updateChildren();
}
navigate(event, item) {
if (this.router && item.route) {
event.preventDefault();
const status = this.router.navigate(item.route, item.routeExtras);
this.navigation.emit(status);
}
}
updateChildren() {
if (this.children) {
this.children.toArray().forEach(child => child.skeleton = this.skeleton);
}
}
}
Breadcrumb.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Breadcrumb, deps: [{ token: i1$1.I18n }, { token: i2.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
Breadcrumb.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Breadcrumb, selector: "cds-breadcrumb, ibm-breadcrumb", inputs: { items: "items", noTrailingSlash: "noTrailingSlash", ariaLabel: "ariaLabel", skeleton: "skeleton", threshold: "threshold" }, outputs: { navigation: "navigation" }, queries: [{ propertyName: "children", predicate: BreadcrumbItemComponent }], ngImport: i0, template: `
<nav #nav class="cds--breadcrumb"
[ngClass]="{
'cds--skeleton' : skeleton,
'cds--breadcrumb--no-trailing-slash' : noTrailingSlash
}"
[attr.aria-label]="ariaLabel">
<ng-template [ngIf]="shouldShowContent">
<ng-content></ng-content>
</ng-template>
<ng-template [ngIf]="!shouldShowOverflow">
<cds-breadcrumb-item
*ngFor="let item of items"
[href]="item.href"
[route]="item.route"
[routeExtras]="item.routeExtras"
[current]="item.current"
[ariaCurrent]="item.ariaCurrent"
(navigation)="navigation.emit($event)">
<ng-container *ngIf="!item.template">{{item.content}}</ng-container>
<ng-template
*ngIf="item.template"
[ngTemplateOutlet]="item.template"
[ngTemplateOutletContext]="{ $implicit: item }">
</ng-template>
</cds-breadcrumb-item>
</ng-template>
<ng-template [ngIf]="shouldShowOverflow">
<cds-breadcrumb-item
[href]="first?.href"
[route]="first?.route"
[routeExtras]="first?.routeExtras"
[current]="first?.current"
[ariaCurrent]="first?.ariaCurrent"
(navigation)="navigation.emit($event)">
<ng-container *ngIf="!first?.template">{{first?.content}}</ng-container>
<ng-template
*ngIf="first?.template"
[ngTemplateOutlet]="first?.template"
[ngTemplateOutletContext]="{ $implicit: first }">
</ng-template>
</cds-breadcrumb-item>
<cds-breadcrumb-item>
<cds-overflow-menu>
<li class="cds--overflow-menu-options__option"
*ngFor="let item of overflowItems">
<a class="cds--overflow-menu-options__btn"
href="{{item?.href}}"
(click)="navigate($event, item)"
style="text-decoration: none;">
<ng-container *ngIf="!item?.template">{{item?.content}}</ng-container>
<ng-template
*ngIf="item?.template"
[ngTemplateOutlet]="item?.template"
[ngTemplateOutletContext]="{ $implicit: item }">
</ng-template>
</a>
</li>
</cds-overflow-menu>
</cds-breadcrumb-item>
<cds-breadcrumb-item
[href]="secondLast?.href"
[route]="secondLast?.route"
[routeExtras]="secondLast?.routeExtras"
[current]="secondLast?.current"
[ariaCurrent]="secondLast?.ariaCurrent"
(navigation)="navigation.emit($event)">
<ng-container *ngIf="!secondLast?.template">{{secondLast?.content}}</ng-container>
<ng-template
*ngIf="secondLast?.template"
[ngTemplateOutlet]="secondLast?.template"
[ngTemplateOutletContext]="{ $implicit: secondLast }">
</ng-template>
</cds-breadcrumb-item>
<cds-breadcrumb-item
[href]="last?.href"
[route]="last?.route"
[routeExtras]="last?.routeExtras"
[current]="last?.current"
[ariaCurrent]="last?.ariaCurrent"
(navigation)="navigation.emit($event)">
<ng-container *ngIf="!last?.template">{{last?.content}}</ng-container>
<ng-template
*ngIf="last?.template"
[ngTemplateOutlet]="last?.template"
[ngTemplateOutletContext]="{ $implicit: last }">
</ng-template>
</cds-breadcrumb-item>
</ng-template>
</nav>`, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: BreadcrumbItemComponent, selector: "cds-breadcrumb-item, ibm-breadcrumb-item", inputs: ["href", "route", "routeExtras", "skeleton", "ariaCurrent", "current"], outputs: ["navigation"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Breadcrumb, decorators: [{
type: Component,
args: [{
selector: "cds-breadcrumb, ibm-breadcrumb",
template: `
<nav #nav class="cds--breadcrumb"
[ngClass]="{
'cds--skeleton' : skeleton,
'cds--breadcrumb--no-trailing-slash' : noTrailingSlash
}"
[attr.aria-label]="ariaLabel">
<ng-template [ngIf]="shouldShowContent">
<ng-content></ng-content>
</ng-template>
<ng-template [ngIf]="!shouldShowOverflow">
<cds-breadcrumb-item
*ngFor="let item of items"
[href]="item.href"
[route]="item.route"
[routeExtras]="item.routeExtras"
[current]="item.current"
[ariaCurrent]="item.ariaCurrent"
(navigation)="navigation.emit($event)">
<ng-container *ngIf="!item.template">{{item.content}}</ng-container>
<ng-template
*ngIf="item.template"
[ngTemplateOutlet]="item.template"
[ngTemplateOutletContext]="{ $implicit: item }">
</ng-template>
</cds-breadcrumb-item>
</ng-template>
<ng-template [ngIf]="shouldShowOverflow">
<cds-breadcrumb-item
[href]="first?.href"
[route]="first?.route"
[routeExtras]="first?.routeExtras"
[current]="first?.current"
[ariaCurrent]="first?.ariaCurrent"
(navigation)="navigation.emit($event)">
<ng-container *ngIf="!first?.template">{{first?.content}}</ng-container>
<ng-template
*ngIf="first?.template"
[ngTemplateOutlet]="first?.template"
[ngTemplateOutletContext]="{ $implicit: first }">
</ng-template>
</cds-breadcrumb-item>
<cds-breadcrumb-item>
<cds-overflow-menu>
<li class="cds--overflow-menu-options__option"
*ngFor="let item of overflowItems">
<a class="cds--overflow-menu-options__btn"
href="{{item?.href}}"
(click)="navigate($event, item)"
style="text-decoration: none;">
<ng-container *ngIf="!item?.template">{{item?.content}}</ng-container>
<ng-template
*ngIf="item?.template"
[ngTemplateOutlet]="item?.template"
[ngTemplateOutletContext]="{ $implicit: item }">
</ng-template>
</a>
</li>
</cds-overflow-menu>
</cds-breadcrumb-item>
<cds-breadcrumb-item
[href]="secondLast?.href"
[route]="secondLast?.route"
[routeExtras]="secondLast?.routeExtras"
[current]="secondLast?.current"
[ariaCurrent]="secondLast?.ariaCurrent"
(navigation)="navigation.emit($event)">
<ng-container *ngIf="!secondLast?.template">{{secondLast?.content}}</ng-container>
<ng-template
*ngIf="secondLast?.template"
[ngTemplateOutlet]="secondLast?.template"
[ngTemplateOutletContext]="{ $implicit: secondLast }">
</ng-template>
</cds-breadcrumb-item>
<cds-breadcrumb-item
[href]="last?.href"
[route]="last?.route"
[routeExtras]="last?.routeExtras"
[current]="last?.current"
[ariaCurrent]="last?.ariaCurrent"
(navigation)="navigation.emit($event)">
<ng-container *ngIf="!last?.template">{{last?.content}}</ng-container>
<ng-template
*ngIf="last?.template"
[ngTemplateOutlet]="last?.template"
[ngTemplateOutletContext]="{ $implicit: last }">
</ng-template>
</cds-breadcrumb-item>
</ng-template>
</nav>`
}]
}], ctorParameters: function () {
return [{ type: i1$1.I18n }, { type: i2.Router, decorators: [{
type: Optional
}] }];
}, propDecorators: { children: [{
type: ContentChildren,
args: [BreadcrumbItemComponent]
}], items: [{
type: Input
}], noTrailingSlash: [{
type: Input
}], ariaLabel: [{
type: Input
}], skeleton: [{
type: Input
}], threshold: [{
type: Input
}], navigation: [{
type: Output
}] } });
class BreadcrumbModule {
}
BreadcrumbModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
BreadcrumbModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: BreadcrumbModule, declarations: [Breadcrumb,
BreadcrumbItemComponent], imports: [CommonModule,
DialogModule,
I18nModule], exports: [Breadcrumb,
BreadcrumbItemComponent] });
BreadcrumbModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BreadcrumbModule, imports: [CommonModule,
DialogModule,
I18nModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BreadcrumbModule, decorators: [{
type: NgModule,
args: [{
declarations: [
Breadcrumb,
BreadcrumbItemComponent
],
exports: [
Breadcrumb,
BreadcrumbItemComponent
],
imports: [
CommonModule,
DialogModule,
I18nModule
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Breadcrumb, BreadcrumbItemComponent, BreadcrumbModule };
//# sourceMappingURL=carbon-components-angular-breadcrumb.mjs.map