@taiga-ui/kit
Version:
Taiga UI Angular main components kit
86 lines (81 loc) • 12.2 kB
JavaScript
import { AsyncPipe, NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, TemplateRef, Component, ChangeDetectionStrategy, ContentChildren, Input } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { EMPTY_QUERY } from '@taiga-ui/cdk/constants';
import * as i4 from '@taiga-ui/cdk/directives/item';
import { TuiItem } from '@taiga-ui/cdk/directives/item';
import { TuiButton } from '@taiga-ui/core/components/button';
import * as i1 from '@taiga-ui/core/components/data-list';
import { TuiDataList } from '@taiga-ui/core/components/data-list';
import { TuiIcon } from '@taiga-ui/core/components/icon';
import { tuiLinkOptionsProvider } from '@taiga-ui/core/components/link';
import * as i2 from '@taiga-ui/core/directives/dropdown';
import { TuiDropdown } from '@taiga-ui/core/directives/dropdown';
import { tuiHintOptionsProvider } from '@taiga-ui/core/directives/hint';
import { TUI_COMMON_ICONS } from '@taiga-ui/core/tokens';
import * as i3 from '@taiga-ui/kit/components/items-with-more';
import { TuiItemsWithMore } from '@taiga-ui/kit/components/items-with-more';
import { TUI_MORE_WORD } from '@taiga-ui/kit/tokens';
import { tuiCreateToken, tuiProvideOptions } from '@taiga-ui/cdk/utils/miscellaneous';
const TUI_BREADCRUMBS_DEFAULT_OPTIONS = {
icon: '.chevron-right',
size: 'm',
itemsLimit: 0,
};
const TUI_BREADCRUMBS_OPTIONS = tuiCreateToken(TUI_BREADCRUMBS_DEFAULT_OPTIONS);
function tuiBreadcrumbsOptionsProvider(options) {
return tuiProvideOptions(TUI_BREADCRUMBS_OPTIONS, options, TUI_BREADCRUMBS_DEFAULT_OPTIONS);
}
class TuiBreadcrumbs {
constructor() {
this.items = EMPTY_QUERY;
this.options = inject(TUI_BREADCRUMBS_OPTIONS);
this.icons = inject(TUI_COMMON_ICONS);
this.more = toSignal(inject(TUI_MORE_WORD), { initialValue: '' });
this.size = this.options.size;
this.itemsLimit = this.options.itemsLimit;
}
get limit() {
return this.itemsLimit ? this.itemsLimit - 2 : Infinity;
}
get offset() {
return this.itemsLimit === 2 ? 1 : 0;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiBreadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiBreadcrumbs, isStandalone: true, selector: "tui-breadcrumbs", inputs: { size: "size", itemsLimit: "itemsLimit" }, host: { properties: { "attr.data-size": "size" } }, providers: [
tuiLinkOptionsProvider({ appearance: 'action-grayscale' }),
tuiHintOptionsProvider({ direction: 'bottom' }),
], queries: [{ propertyName: "items", predicate: TuiItem, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"items.changes | async\" />\n<ng-container *ngIf=\"itemsLimit > 1; else plain\">\n <ng-container *ngIf=\"itemsLimit !== 2\">\n <ng-container [ngTemplateOutlet]=\"items.first\" />\n <ng-container [ngTemplateOutlet]=\"separator\" />\n </ng-container>\n <tui-items-with-more\n side=\"start\"\n [itemsLimit]=\"itemsLimit - 2\"\n [required]=\"items.length + offset - 2\"\n >\n <ng-container *ngFor=\"let item of items; let last = last\">\n <ng-container *ngIf=\"item !== items.first || itemsLimit === 2\">\n <ng-container *tuiItem>\n <ng-container [ngTemplateOutlet]=\"item\" />\n <ng-container\n *ngIf=\"!last\"\n [ngTemplateOutlet]=\"separator\"\n />\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-template\n let-index\n tuiMore\n >\n <span class=\"t-more\">\n <button\n appearance=\"flat\"\n size=\"xs\"\n tuiDropdownOpen\n tuiIconButton\n type=\"button\"\n [iconStart]=\"icons.ellipsis\"\n [tuiDropdown]=\"dropdown\"\n >\n {{ more() }}\n </button>\n <ng-container [ngTemplateOutlet]=\"separator\" />\n </span>\n <ng-template #dropdown>\n <tui-data-list size=\"s\">\n <ng-container *ngFor=\"let item of items; let i = index\">\n <span\n *ngIf=\"i + offset && i <= index && item !== items.last\"\n tuiOption\n class=\"t-option\"\n >\n <ng-container [ngTemplateOutlet]=\"item\" />\n </span>\n </ng-container>\n </tui-data-list>\n </ng-template>\n </ng-template>\n </tui-items-with-more>\n</ng-container>\n<ng-template #separator>\n <tui-icon\n *ngIf=\"options.icon.length > 1; else char\"\n class=\"t-icon\"\n [icon]=\"options.icon\"\n />\n <ng-template #char>\n <span class=\"t-char\">{{ options.icon }}</span>\n </ng-template>\n</ng-template>\n<ng-template #plain>\n <ng-container *ngFor=\"let item of items; let last = last\">\n <ng-container [ngTemplateOutlet]=\"item\" />\n <ng-container\n *ngIf=\"!last\"\n [ngTemplateOutlet]=\"separator\"\n />\n </ng-container>\n</ng-template>\n", styles: [":host{display:flex;align-items:center;white-space:nowrap;color:var(--tui-text-secondary)}:host[data-size=m]{font:var(--tui-font-text-s);line-height:1.5rem;block-size:1.5rem}:host[data-size=l]{font:var(--tui-font-text-m);line-height:2.5rem;block-size:2.5rem}.t-more{display:flex;align-items:center}.t-option ::ng-deep>*{color:var(--tui-text-primary)!important;background:transparent!important}.t-icon{margin:0 .5rem;font-size:1rem}.t-char{margin:0 .375rem}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: i1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i2.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i2.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "component", type: i3.TuiItemsWithMoreComponent, selector: "tui-items-with-more" }, { kind: "directive", type: i3.TuiMore, selector: "[tuiMore]" }, { kind: "directive", type: i4.TuiItem, selector: "[tuiItem]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiBreadcrumbs, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-breadcrumbs', imports: [
AsyncPipe,
NgForOf,
NgIf,
NgTemplateOutlet,
TuiButton,
TuiDataList,
TuiDropdown,
TuiIcon,
TuiItemsWithMore,
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
tuiLinkOptionsProvider({ appearance: 'action-grayscale' }),
tuiHintOptionsProvider({ direction: 'bottom' }),
], host: {
'[attr.data-size]': 'size',
}, template: "<ng-container *ngIf=\"items.changes | async\" />\n<ng-container *ngIf=\"itemsLimit > 1; else plain\">\n <ng-container *ngIf=\"itemsLimit !== 2\">\n <ng-container [ngTemplateOutlet]=\"items.first\" />\n <ng-container [ngTemplateOutlet]=\"separator\" />\n </ng-container>\n <tui-items-with-more\n side=\"start\"\n [itemsLimit]=\"itemsLimit - 2\"\n [required]=\"items.length + offset - 2\"\n >\n <ng-container *ngFor=\"let item of items; let last = last\">\n <ng-container *ngIf=\"item !== items.first || itemsLimit === 2\">\n <ng-container *tuiItem>\n <ng-container [ngTemplateOutlet]=\"item\" />\n <ng-container\n *ngIf=\"!last\"\n [ngTemplateOutlet]=\"separator\"\n />\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-template\n let-index\n tuiMore\n >\n <span class=\"t-more\">\n <button\n appearance=\"flat\"\n size=\"xs\"\n tuiDropdownOpen\n tuiIconButton\n type=\"button\"\n [iconStart]=\"icons.ellipsis\"\n [tuiDropdown]=\"dropdown\"\n >\n {{ more() }}\n </button>\n <ng-container [ngTemplateOutlet]=\"separator\" />\n </span>\n <ng-template #dropdown>\n <tui-data-list size=\"s\">\n <ng-container *ngFor=\"let item of items; let i = index\">\n <span\n *ngIf=\"i + offset && i <= index && item !== items.last\"\n tuiOption\n class=\"t-option\"\n >\n <ng-container [ngTemplateOutlet]=\"item\" />\n </span>\n </ng-container>\n </tui-data-list>\n </ng-template>\n </ng-template>\n </tui-items-with-more>\n</ng-container>\n<ng-template #separator>\n <tui-icon\n *ngIf=\"options.icon.length > 1; else char\"\n class=\"t-icon\"\n [icon]=\"options.icon\"\n />\n <ng-template #char>\n <span class=\"t-char\">{{ options.icon }}</span>\n </ng-template>\n</ng-template>\n<ng-template #plain>\n <ng-container *ngFor=\"let item of items; let last = last\">\n <ng-container [ngTemplateOutlet]=\"item\" />\n <ng-container\n *ngIf=\"!last\"\n [ngTemplateOutlet]=\"separator\"\n />\n </ng-container>\n</ng-template>\n", styles: [":host{display:flex;align-items:center;white-space:nowrap;color:var(--tui-text-secondary)}:host[data-size=m]{font:var(--tui-font-text-s);line-height:1.5rem;block-size:1.5rem}:host[data-size=l]{font:var(--tui-font-text-m);line-height:2.5rem;block-size:2.5rem}.t-more{display:flex;align-items:center}.t-option ::ng-deep>*{color:var(--tui-text-primary)!important;background:transparent!important}.t-icon{margin:0 .5rem;font-size:1rem}.t-char{margin:0 .375rem}\n"] }]
}], propDecorators: { items: [{
type: ContentChildren,
args: [TuiItem, { read: TemplateRef }]
}], size: [{
type: Input
}], itemsLimit: [{
type: Input
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { TUI_BREADCRUMBS_DEFAULT_OPTIONS, TUI_BREADCRUMBS_OPTIONS, TuiBreadcrumbs, tuiBreadcrumbsOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-breadcrumbs.mjs.map