UNPKG

@taiga-ui/addon-mobile

Version:

Extension package for Taiga UI that adds support for mobile specific behaviors such as custom data pickers, dropdowns, etc.

26 lines 8.11 kB
import { NgIf } from '@angular/common'; import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; import { TuiAnimated } from '@taiga-ui/cdk/directives/animated'; import { TuiIcon } from '@taiga-ui/core/components/icon'; import * as i0 from "@angular/core"; class TuiTabBarItem { constructor() { this.icon = ''; this.badge = null; } format(value) { return value > 999 ? '999+' : String(value); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTabBarItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiTabBarItem, isStandalone: true, selector: "button[tuiTabBarItem], a[tuiTabBarItem]", inputs: { icon: "icon", badge: "badge" }, ngImport: i0, template: "<tui-icon\n class=\"t-icon\"\n [icon]=\"icon\"\n/>\n<span class=\"t-wrapper\">\n <span\n *ngIf=\"badge as value\"\n tuiAnimated\n class=\"t-badge\"\n >\n {{ format(value) }}\n </span>\n</span>\n<span class=\"t-text\">\n <ng-content />\n</span>\n", styles: [":host{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;line-height:inherit;text-decoration:none;transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;display:flex;flex:1 0;font:inherit;flex-direction:column;align-items:center;overflow:hidden}:host:nth-child(1){color:var(--tui-tab-1, inherit)}:host:nth-child(2){color:var(--tui-tab-2, inherit)}:host:nth-child(3){color:var(--tui-tab-3, inherit)}:host:nth-child(4){color:var(--tui-tab-4, inherit)}:host:nth-child(5){color:var(--tui-tab-5, inherit)}:host:nth-child(6){color:var(--tui-tab-6, inherit)}:host:nth-child(7){color:var(--tui-tab-7, inherit)}:host:nth-child(8){color:var(--tui-tab-8, inherit)}:host:nth-child(9){color:var(--tui-tab-9, inherit)}:host:nth-child(10){color:var(--tui-tab-10, inherit)}.t-icon{inline-size:1.75rem;block-size:1.75rem;margin:.375rem 0 .125rem;pointer-events:none;border:.125rem solid transparent}.t-wrapper{position:absolute;top:.125rem;left:1rem;display:flex;inline-size:100%;justify-content:center;pointer-events:none}.t-badge{display:flex;block-size:1.125rem;min-inline-size:1.125rem;align-items:center;justify-content:center;padding:0 .25rem;border-radius:1rem;font-size:.8125rem;box-sizing:border-box;color:var(--tui-background-base);background:var(--tui-status-negative)}.t-badge .tui-enter,.t-badge .tui-leave{animation-name:tuiScale}.t-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TuiAnimated, selector: "[tuiAnimated]" }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); } } export { TuiTabBarItem }; i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTabBarItem, decorators: [{ type: Component, args: [{ standalone: true, selector: 'button[tuiTabBarItem], a[tuiTabBarItem]', imports: [NgIf, TuiAnimated, TuiIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<tui-icon\n class=\"t-icon\"\n [icon]=\"icon\"\n/>\n<span class=\"t-wrapper\">\n <span\n *ngIf=\"badge as value\"\n tuiAnimated\n class=\"t-badge\"\n >\n {{ format(value) }}\n </span>\n</span>\n<span class=\"t-text\">\n <ng-content />\n</span>\n", styles: [":host{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;line-height:inherit;text-decoration:none;transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;display:flex;flex:1 0;font:inherit;flex-direction:column;align-items:center;overflow:hidden}:host:nth-child(1){color:var(--tui-tab-1, inherit)}:host:nth-child(2){color:var(--tui-tab-2, inherit)}:host:nth-child(3){color:var(--tui-tab-3, inherit)}:host:nth-child(4){color:var(--tui-tab-4, inherit)}:host:nth-child(5){color:var(--tui-tab-5, inherit)}:host:nth-child(6){color:var(--tui-tab-6, inherit)}:host:nth-child(7){color:var(--tui-tab-7, inherit)}:host:nth-child(8){color:var(--tui-tab-8, inherit)}:host:nth-child(9){color:var(--tui-tab-9, inherit)}:host:nth-child(10){color:var(--tui-tab-10, inherit)}.t-icon{inline-size:1.75rem;block-size:1.75rem;margin:.375rem 0 .125rem;pointer-events:none;border:.125rem solid transparent}.t-wrapper{position:absolute;top:.125rem;left:1rem;display:flex;inline-size:100%;justify-content:center;pointer-events:none}.t-badge{display:flex;block-size:1.125rem;min-inline-size:1.125rem;align-items:center;justify-content:center;padding:0 .25rem;border-radius:1rem;font-size:.8125rem;box-sizing:border-box;color:var(--tui-background-base);background:var(--tui-status-negative)}.t-badge .tui-enter,.t-badge .tui-leave{animation-name:tuiScale}.t-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%;pointer-events:none}\n"] }] }], propDecorators: { icon: [{ type: Input }], badge: [{ type: Input }] } }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLWJhci1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FkZG9uLW1vYmlsZS9jb21wb25lbnRzL3RhYi1iYXIvdGFiLWJhci1pdGVtLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FkZG9uLW1vYmlsZS9jb21wb25lbnRzL3RhYi1iYXIvdGFiLWJhci1pdGVtLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLElBQUksRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQ3JDLE9BQU8sRUFBQyx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ3hFLE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSxtQ0FBbUMsQ0FBQztBQUM5RCxPQUFPLEVBQUMsT0FBTyxFQUFDLE1BQU0sZ0NBQWdDLENBQUM7O0FBRXZELE1BUWEsYUFBYTtJQVIxQjtRQVVXLFNBQUksR0FBRyxFQUFFLENBQUM7UUFHVixVQUFLLEdBQW1CLElBQUksQ0FBQztLQUt2QztJQUhhLE1BQU0sQ0FBQyxLQUFhO1FBQzFCLE9BQU8sS0FBSyxHQUFHLEdBQUcsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDaEQsQ0FBQzsrR0FUUSxhQUFhO21HQUFiLGFBQWEsNklDYjFCLHFTQWdCQSx1akREUmMsSUFBSSw2RkFBRSxXQUFXLDBEQUFFLE9BQU87O1NBSzNCLGFBQWE7NEZBQWIsYUFBYTtrQkFSekIsU0FBUztpQ0FDTSxJQUFJLFlBQ04seUNBQXlDLFdBQzFDLENBQUMsSUFBSSxFQUFFLFdBQVcsRUFBRSxPQUFPLENBQUMsbUJBR3BCLHVCQUF1QixDQUFDLE1BQU07OEJBSXhDLElBQUk7c0JBRFYsS0FBSztnQkFJQyxLQUFLO3NCQURYLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge05nSWZ9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge0NoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7VHVpQW5pbWF0ZWR9IGZyb20gJ0B0YWlnYS11aS9jZGsvZGlyZWN0aXZlcy9hbmltYXRlZCc7XG5pbXBvcnQge1R1aUljb259IGZyb20gJ0B0YWlnYS11aS9jb3JlL2NvbXBvbmVudHMvaWNvbic7XG5cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICdidXR0b25bdHVpVGFiQmFySXRlbV0sIGFbdHVpVGFiQmFySXRlbV0nLFxuICAgIGltcG9ydHM6IFtOZ0lmLCBUdWlBbmltYXRlZCwgVHVpSWNvbl0sXG4gICAgdGVtcGxhdGVVcmw6ICcuL3RhYi1iYXItaXRlbS50ZW1wbGF0ZS5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi90YWItYmFyLWl0ZW0uc3R5bGUubGVzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBUdWlUYWJCYXJJdGVtIHtcbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBpY29uID0gJyc7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBiYWRnZT86IG51bWJlciB8IG51bGwgPSBudWxsO1xuXG4gICAgcHJvdGVjdGVkIGZvcm1hdCh2YWx1ZTogbnVtYmVyKTogc3RyaW5nIHtcbiAgICAgICAgcmV0dXJuIHZhbHVlID4gOTk5ID8gJzk5OSsnIDogU3RyaW5nKHZhbHVlKTtcbiAgICB9XG59XG4iLCI8dHVpLWljb25cbiAgICBjbGFzcz1cInQtaWNvblwiXG4gICAgW2ljb25dPVwiaWNvblwiXG4vPlxuPHNwYW4gY2xhc3M9XCJ0LXdyYXBwZXJcIj5cbiAgICA8c3BhblxuICAgICAgICAqbmdJZj1cImJhZGdlIGFzIHZhbHVlXCJcbiAgICAgICAgdHVpQW5pbWF0ZWRcbiAgICAgICAgY2xhc3M9XCJ0LWJhZGdlXCJcbiAgICA+XG4gICAgICAgIHt7IGZvcm1hdCh2YWx1ZSkgfX1cbiAgICA8L3NwYW4+XG48L3NwYW4+XG48c3BhbiBjbGFzcz1cInQtdGV4dFwiPlxuICAgIDxuZy1jb250ZW50IC8+XG48L3NwYW4+XG4iXX0=