@taiga-ui/addon-mobile
Version:
Extension package for Taiga UI that adds support for mobile specific behaviors such as custom data pickers, dropdowns, etc.
46 lines • 9.88 kB
JavaScript
import { ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, forwardRef, Input, Output, } from '@angular/core';
import { EMPTY_QUERY } from '@taiga-ui/cdk/constants';
import { TuiRepeatTimes } from '@taiga-ui/cdk/directives/repeat-times';
import { tuiIsElement } from '@taiga-ui/cdk/utils/dom';
import { TuiTabBarItem } from './tab-bar-item.component';
import * as i0 from "@angular/core";
class TuiTabBarComponent {
constructor() {
this.tabs = EMPTY_QUERY;
this.quantity = 4;
this.activeItemIndex = NaN;
this.activeItemIndexChange = new EventEmitter();
}
setActive(tab) {
if (tuiIsElement(tab)) {
this.updateIndex(this.tabs.toArray().findIndex(({ nativeElement }) => nativeElement === tab));
}
}
get style() {
return `--tui-tab-${this.activeItemIndex + 1}: var(--tui-active-color)`;
}
updateIndex(index) {
this.activeItemIndex = index;
this.activeItemIndexChange.emit(index);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTabBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiTabBarComponent, isStandalone: true, selector: "nav[tuiTabBar]", inputs: { quantity: "quantity", activeItemIndex: "activeItemIndex" }, outputs: { activeItemIndexChange: "activeItemIndexChange" }, host: { listeners: { "click": "setActive($event.target)" }, properties: { "style": "style" } }, queries: [{ propertyName: "tabs", predicate: i0.forwardRef(function () { return TuiTabBarItem; }), read: ElementRef }], ngImport: i0, template: "<ng-content />\n<div class=\"t-skeletons\">\n <div\n *tuiRepeatTimes=\"let index of quantity\"\n class=\"t-skeleton\"\n ></div>\n</div>\n", styles: [":host{--tui-active-color: var(--tui-text-action);position:relative;display:flex;font: .625rem/.75rem -apple-system,BlinkMacSystemFont,system-ui,Roboto,Segoe UI,sans-serif;block-size:var(--tui-height-l);color:var(--tui-text-secondary);-webkit-backdrop-filter:blur(.3125rem);backdrop-filter:blur(.3125rem)}:host:before{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";background:var(--tui-background-base-alt);box-shadow:inset 0 1px var(--tui-border-normal);opacity:.8}[tuiTheme=dark] :host:before{opacity:.7}.t-skeletons{display:none;block-size:100%;inline-size:100%;justify-content:space-around}.t-skeletons:first-child{display:flex}.t-skeleton{display:flex;flex-direction:column;align-items:center;justify-content:center;animation:tuiSkeletonVibe ease-in-out 1s infinite alternate}.t-skeleton:before{content:\"\";inline-size:1.375rem;block-size:1.375rem;margin-block-end:.5rem;border-radius:100%;background:var(--tui-background-neutral-2)}.t-skeleton:after{content:\"\";inline-size:2.5rem;block-size:.375rem;border-radius:1rem;background:var(--tui-background-neutral-2)}\n"], dependencies: [{ kind: "directive", type: TuiRepeatTimes, selector: "[tuiRepeatTimes][tuiRepeatTimesOf]", inputs: ["tuiRepeatTimesOf"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiTabBarComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTabBarComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'nav[tuiTabBar]', imports: [TuiRepeatTimes], changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[style]': 'style',
'(click)': 'setActive($event.target)',
}, template: "<ng-content />\n<div class=\"t-skeletons\">\n <div\n *tuiRepeatTimes=\"let index of quantity\"\n class=\"t-skeleton\"\n ></div>\n</div>\n", styles: [":host{--tui-active-color: var(--tui-text-action);position:relative;display:flex;font: .625rem/.75rem -apple-system,BlinkMacSystemFont,system-ui,Roboto,Segoe UI,sans-serif;block-size:var(--tui-height-l);color:var(--tui-text-secondary);-webkit-backdrop-filter:blur(.3125rem);backdrop-filter:blur(.3125rem)}:host:before{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";background:var(--tui-background-base-alt);box-shadow:inset 0 1px var(--tui-border-normal);opacity:.8}[tuiTheme=dark] :host:before{opacity:.7}.t-skeletons{display:none;block-size:100%;inline-size:100%;justify-content:space-around}.t-skeletons:first-child{display:flex}.t-skeleton{display:flex;flex-direction:column;align-items:center;justify-content:center;animation:tuiSkeletonVibe ease-in-out 1s infinite alternate}.t-skeleton:before{content:\"\";inline-size:1.375rem;block-size:1.375rem;margin-block-end:.5rem;border-radius:100%;background:var(--tui-background-neutral-2)}.t-skeleton:after{content:\"\";inline-size:2.5rem;block-size:.375rem;border-radius:1rem;background:var(--tui-background-neutral-2)}\n"] }]
}], propDecorators: { tabs: [{
type: ContentChildren,
args: [forwardRef(() => TuiTabBarItem), { read: ElementRef }]
}], quantity: [{
type: Input
}], activeItemIndex: [{
type: Input
}], activeItemIndexChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hZGRvbi1tb2JpbGUvY29tcG9uZW50cy90YWItYmFyL3RhYi1iYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYWRkb24tbW9iaWxlL2NvbXBvbmVudHMvdGFiLWJhci90YWItYmFyLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNILHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsZUFBZSxFQUNmLFVBQVUsRUFDVixZQUFZLEVBQ1osVUFBVSxFQUNWLEtBQUssRUFDTCxNQUFNLEdBRVQsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFdBQVcsRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBQ3BELE9BQU8sRUFBQyxjQUFjLEVBQUMsTUFBTSx1Q0FBdUMsQ0FBQztBQUNyRSxPQUFPLEVBQUMsWUFBWSxFQUFDLE1BQU0seUJBQXlCLENBQUM7QUFFckQsT0FBTyxFQUFDLGFBQWEsRUFBQyxNQUFNLDBCQUEwQixDQUFDOztBQUV2RCxNQVlhLGtCQUFrQjtJQVovQjtRQWNxQixTQUFJLEdBQXVDLFdBQVcsQ0FBQztRQUdqRSxhQUFRLEdBQUcsQ0FBQyxDQUFDO1FBR2Isb0JBQWUsR0FBRyxHQUFHLENBQUM7UUFHYiwwQkFBcUIsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0tBa0J0RTtJQWhCVSxTQUFTLENBQUMsR0FBZ0I7UUFDN0IsSUFBSSxZQUFZLENBQUMsR0FBRyxDQUFDLEVBQUU7WUFDbkIsSUFBSSxDQUFDLFdBQVcsQ0FDWixJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDLFNBQVMsQ0FBQyxDQUFDLEVBQUMsYUFBYSxFQUFDLEVBQUUsRUFBRSxDQUFDLGFBQWEsS0FBSyxHQUFHLENBQUMsQ0FDNUUsQ0FBQztTQUNMO0lBQ0wsQ0FBQztJQUVELElBQWMsS0FBSztRQUNmLE9BQU8sYUFBYSxJQUFJLENBQUMsZUFBZSxHQUFHLENBQUMsMkJBQTJCLENBQUM7SUFDNUUsQ0FBQztJQUVPLFdBQVcsQ0FBQyxLQUFhO1FBQzdCLElBQUksQ0FBQyxlQUFlLEdBQUcsS0FBSyxDQUFDO1FBQzdCLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDM0MsQ0FBQzsrR0E1QlEsa0JBQWtCO21HQUFsQixrQkFBa0IscVdBQ08sYUFBYSxZQUFVLFVBQVUsNkJDOUJ2RSwrSkFPQSx1b0NEYWMsY0FBYzs7U0FTZixrQkFBa0I7NEZBQWxCLGtCQUFrQjtrQkFaOUIsU0FBUztpQ0FDTSxJQUFJLFlBQ04sZ0JBQWdCLFdBQ2pCLENBQUMsY0FBYyxDQUFDLG1CQUdSLHVCQUF1QixDQUFDLE1BQU0sUUFDekM7d0JBQ0YsU0FBUyxFQUFFLE9BQU87d0JBQ2xCLFNBQVMsRUFBRSwwQkFBMEI7cUJBQ3hDOzhCQUlnQixJQUFJO3NCQURwQixlQUFlO3VCQUFDLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxhQUFhLENBQUMsRUFBRSxFQUFDLElBQUksRUFBRSxVQUFVLEVBQUM7Z0JBSTdELFFBQVE7c0JBRGQsS0FBSztnQkFJQyxlQUFlO3NCQURyQixLQUFLO2dCQUlVLHFCQUFxQjtzQkFEcEMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ29tcG9uZW50LFxuICAgIENvbnRlbnRDaGlsZHJlbixcbiAgICBFbGVtZW50UmVmLFxuICAgIEV2ZW50RW1pdHRlcixcbiAgICBmb3J3YXJkUmVmLFxuICAgIElucHV0LFxuICAgIE91dHB1dCxcbiAgICB0eXBlIFF1ZXJ5TGlzdCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0VNUFRZX1FVRVJZfSBmcm9tICdAdGFpZ2EtdWkvY2RrL2NvbnN0YW50cyc7XG5pbXBvcnQge1R1aVJlcGVhdFRpbWVzfSBmcm9tICdAdGFpZ2EtdWkvY2RrL2RpcmVjdGl2ZXMvcmVwZWF0LXRpbWVzJztcbmltcG9ydCB7dHVpSXNFbGVtZW50fSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL2RvbSc7XG5cbmltcG9ydCB7VHVpVGFiQmFySXRlbX0gZnJvbSAnLi90YWItYmFyLWl0ZW0uY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ25hdlt0dWlUYWJCYXJdJyxcbiAgICBpbXBvcnRzOiBbVHVpUmVwZWF0VGltZXNdLFxuICAgIHRlbXBsYXRlVXJsOiAnLi90YWItYmFyLnRlbXBsYXRlLmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3RhYi1iYXIuc3R5bGUubGVzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgJ1tzdHlsZV0nOiAnc3R5bGUnLFxuICAgICAgICAnKGNsaWNrKSc6ICdzZXRBY3RpdmUoJGV2ZW50LnRhcmdldCknLFxuICAgIH0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aVRhYkJhckNvbXBvbmVudCB7XG4gICAgQENvbnRlbnRDaGlsZHJlbihmb3J3YXJkUmVmKCgpID0+IFR1aVRhYkJhckl0ZW0pLCB7cmVhZDogRWxlbWVudFJlZn0pXG4gICAgcHJpdmF0ZSByZWFkb25seSB0YWJzOiBRdWVyeUxpc3Q8RWxlbWVudFJlZjxIVE1MRWxlbWVudD4+ID0gRU1QVFlfUVVFUlk7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBxdWFudGl0eSA9IDQ7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBhY3RpdmVJdGVtSW5kZXggPSBOYU47XG5cbiAgICBAT3V0cHV0KClcbiAgICBwdWJsaWMgcmVhZG9ubHkgYWN0aXZlSXRlbUluZGV4Q2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXI+KCk7XG5cbiAgICBwdWJsaWMgc2V0QWN0aXZlKHRhYjogRXZlbnRUYXJnZXQpOiB2b2lkIHtcbiAgICAgICAgaWYgKHR1aUlzRWxlbWVudCh0YWIpKSB7XG4gICAgICAgICAgICB0aGlzLnVwZGF0ZUluZGV4KFxuICAgICAgICAgICAgICAgIHRoaXMudGFicy50b0FycmF5KCkuZmluZEluZGV4KCh7bmF0aXZlRWxlbWVudH0pID0+IG5hdGl2ZUVsZW1lbnQgPT09IHRhYiksXG4gICAgICAgICAgICApO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgcHJvdGVjdGVkIGdldCBzdHlsZSgpOiBzdHJpbmcge1xuICAgICAgICByZXR1cm4gYC0tdHVpLXRhYi0ke3RoaXMuYWN0aXZlSXRlbUluZGV4ICsgMX06IHZhcigtLXR1aS1hY3RpdmUtY29sb3IpYDtcbiAgICB9XG5cbiAgICBwcml2YXRlIHVwZGF0ZUluZGV4KGluZGV4OiBudW1iZXIpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5hY3RpdmVJdGVtSW5kZXggPSBpbmRleDtcbiAgICAgICAgdGhpcy5hY3RpdmVJdGVtSW5kZXhDaGFuZ2UuZW1pdChpbmRleCk7XG4gICAgfVxufVxuIiwiPG5nLWNvbnRlbnQgLz5cbjxkaXYgY2xhc3M9XCJ0LXNrZWxldG9uc1wiPlxuICAgIDxkaXZcbiAgICAgICAgKnR1aVJlcGVhdFRpbWVzPVwibGV0IGluZGV4IG9mIHF1YW50aXR5XCJcbiAgICAgICAgY2xhc3M9XCJ0LXNrZWxldG9uXCJcbiAgICA+PC9kaXY+XG48L2Rpdj5cbiJdfQ==