@taiga-ui/addon-mobile 5.17.0 → 5.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/tab-bar/index.d.ts +1 -0
- package/components/tab-bar/tab-bar-liquid-glass.directive.d.ts +10 -0
- package/components/tab-bar/tab-bar.component.d.ts +4 -2
- package/fesm2022/taiga-ui-addon-mobile-components-swipe-actions.mjs +3 -3
- package/fesm2022/taiga-ui-addon-mobile-components-tab-bar.mjs +36 -9
- package/fesm2022/taiga-ui-addon-mobile-components-tab-bar.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-directives-dropdown-mobile.mjs +3 -3
- package/fesm2022/taiga-ui-addon-mobile-directives-ripple.mjs +2 -2
- package/package.json +12 -12
- package/styles/ios/tab-bar.less +162 -0
- package/styles/taiga-ui-mobile.less +1 -0
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
export declare class TuiTabBarLiquidGlass {
|
|
3
|
+
private readonly tabBar;
|
|
4
|
+
protected readonly count: import("@angular/core").Signal<number>;
|
|
5
|
+
protected readonly index: import("@angular/core").Signal<number>;
|
|
6
|
+
protected readonly fullwidth: import("@angular/core").Signal<boolean>;
|
|
7
|
+
protected readonly mid: import("@angular/core").Signal<boolean>;
|
|
8
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TuiTabBarLiquidGlass, never>;
|
|
9
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<TuiTabBarLiquidGlass, never, never, {}, {}, never, never, true, never>;
|
|
10
|
+
}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
|
+
import * as i1 from "./tab-bar-liquid-glass.directive";
|
|
2
3
|
export declare class TuiTabBarComponent {
|
|
3
4
|
private readonly tabs;
|
|
5
|
+
protected readonly liquidGlass: boolean;
|
|
6
|
+
readonly count: import("@angular/core").Signal<number>;
|
|
4
7
|
readonly quantity: import("@angular/core").InputSignal<number>;
|
|
5
8
|
readonly activeItemIndex: import("@angular/core").ModelSignal<number>;
|
|
6
9
|
setActive(tab: Element): void;
|
|
7
|
-
private updateIndex;
|
|
8
10
|
static ɵfac: i0.ɵɵFactoryDeclaration<TuiTabBarComponent, never>;
|
|
9
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<TuiTabBarComponent, "nav[tuiTabBar]", never, { "quantity": { "alias": "quantity"; "required": false; "isSignal": true; }; "activeItemIndex": { "alias": "activeItemIndex"; "required": false; "isSignal": true; }; }, { "activeItemIndex": "activeItemIndexChange"; }, ["tabs"], ["*"], true,
|
|
11
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<TuiTabBarComponent, "nav[tuiTabBar]", never, { "quantity": { "alias": "quantity"; "required": false; "isSignal": true; }; "activeItemIndex": { "alias": "activeItemIndex"; "required": false; "isSignal": true; }; }, { "activeItemIndex": "activeItemIndexChange"; }, ["tabs"], ["*"], true, [{ directive: typeof i1.TuiTabBarLiquidGlass; inputs: {}; outputs: {}; }]>;
|
|
10
12
|
}
|
|
@@ -47,11 +47,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
|
|
|
47
47
|
|
|
48
48
|
class Styles {
|
|
49
49
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: Styles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
50
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: Styles, isStandalone: true, selector: "ng-component", exportAs: ["tui-swipe-actions-5.
|
|
50
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: Styles, isStandalone: true, selector: "ng-component", exportAs: ["tui-swipe-actions-5.18.0"], ngImport: i0, template: '', isInline: true, styles: ["tui-swipe-actions._onboarding:where(*[data-tui-version=\"5.18.0\"]){scroll-snap-type:none}tui-swipe-actions._onboarding:where(*[data-tui-version=\"5.18.0\"])>*{animation:tuiOnboardingEnter calc(var(--tui-duration) / .6) var(--tui-curve-expressive-entrance),tuiOnboardingShow var(--tui-duration) linear calc(var(--tui-duration) / .6),tuiOnboardingExit calc(var(--tui-duration) / .6) var(--tui-curve-expressive-entrance) calc(calc(var(--tui-duration) / .6) + var(--tui-duration))}@keyframes tuiOnboardingEnter{0%{transform:translate(0)}to{transform:translate(calc(-1px * var(--t-actions-width)))}}@keyframes tuiOnboardingShow{0%{transform:translate(calc(-1px * var(--t-actions-width)))}to{transform:translate(calc(-1px * var(--t-actions-width)))}}@keyframes tuiOnboardingExit{0%{transform:translate(calc(-1px * var(--t-actions-width)))}to{transform:translate(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
51
51
|
}
|
|
52
52
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: Styles, decorators: [{
|
|
53
53
|
type: Component,
|
|
54
|
-
args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-swipe-actions-${TUI_VERSION}`, styles: ["tui-swipe-actions._onboarding:where(*[data-tui-version=\"5.
|
|
54
|
+
args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-swipe-actions-${TUI_VERSION}`, styles: ["tui-swipe-actions._onboarding:where(*[data-tui-version=\"5.18.0\"]){scroll-snap-type:none}tui-swipe-actions._onboarding:where(*[data-tui-version=\"5.18.0\"])>*{animation:tuiOnboardingEnter calc(var(--tui-duration) / .6) var(--tui-curve-expressive-entrance),tuiOnboardingShow var(--tui-duration) linear calc(var(--tui-duration) / .6),tuiOnboardingExit calc(var(--tui-duration) / .6) var(--tui-curve-expressive-entrance) calc(calc(var(--tui-duration) / .6) + var(--tui-duration))}@keyframes tuiOnboardingEnter{0%{transform:translate(0)}to{transform:translate(calc(-1px * var(--t-actions-width)))}}@keyframes tuiOnboardingShow{0%{transform:translate(calc(-1px * var(--t-actions-width)))}to{transform:translate(calc(-1px * var(--t-actions-width)))}}@keyframes tuiOnboardingExit{0%{transform:translate(calc(-1px * var(--t-actions-width)))}to{transform:translate(0)}}\n"] }]
|
|
55
55
|
}] });
|
|
56
56
|
class TuiSwipeActionsOnboarding {
|
|
57
57
|
constructor() {
|
|
@@ -59,7 +59,7 @@ class TuiSwipeActionsOnboarding {
|
|
|
59
59
|
this.nothing = tuiWithStyles(Styles);
|
|
60
60
|
}
|
|
61
61
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiSwipeActionsOnboarding, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
62
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: TuiSwipeActionsOnboarding, isStandalone: true, selector: "tui-swipe-actions[onboarding]", inputs: { onboarding: { classPropertyName: "onboarding", publicName: "onboarding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onboarding: "onboardingChange" }, host: { attributes: { "data-tui-version": "5.
|
|
62
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: TuiSwipeActionsOnboarding, isStandalone: true, selector: "tui-swipe-actions[onboarding]", inputs: { onboarding: { classPropertyName: "onboarding", publicName: "onboarding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onboarding: "onboardingChange" }, host: { attributes: { "data-tui-version": "5.18.0" }, listeners: { "animationend": "onboarding.set($event.animationName !== \"tuiOnboardingExit\")" }, properties: { "class._onboarding": "onboarding()" } }, ngImport: i0 }); }
|
|
63
63
|
}
|
|
64
64
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiSwipeActionsOnboarding, decorators: [{
|
|
65
65
|
type: Directive,
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, ChangeDetectionStrategy, Component, contentChildren, ElementRef, model,
|
|
2
|
+
import { input, ChangeDetectionStrategy, Component, inject, computed, Directive, contentChildren, ElementRef, model, DestroyRef } from '@angular/core';
|
|
3
|
+
import { TUI_PLATFORM } from '@taiga-ui/cdk/tokens';
|
|
4
|
+
import { TUI_LIQUID_GLASS } from '@taiga-ui/core/utils/miscellaneous';
|
|
3
5
|
import { TuiAnimated } from '@taiga-ui/cdk/directives/animated';
|
|
4
6
|
import { TuiIcon } from '@taiga-ui/core/components/icon';
|
|
5
7
|
import { RouterLinkActive } from '@angular/router';
|
|
@@ -22,27 +24,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
|
|
|
22
24
|
args: [{ selector: 'button[tuiTabBarItem], a[tuiTabBarItem]', imports: [TuiAnimated, TuiIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<tui-icon\n class=\"t-icon\"\n [icon]=\"icon()\"\n/>\n<span class=\"t-wrapper\">\n @if (badge(); as value) {\n <span\n tuiAnimated\n class=\"t-badge\"\n >\n {{ format(value) }}\n </span>\n }\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:var(--tui-curve-productive-standard);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;display:flex;inset-block-start:.125rem;inset-inline-start:1rem;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"] }]
|
|
23
25
|
}] });
|
|
24
26
|
|
|
27
|
+
class TuiTabBarLiquidGlass {
|
|
28
|
+
constructor() {
|
|
29
|
+
this.tabBar = inject(TuiTabBarComponent);
|
|
30
|
+
this.count = this.tabBar.count;
|
|
31
|
+
this.index = computed(() => this.tabBar.activeItemIndex());
|
|
32
|
+
this.fullwidth = computed(() => (this.count() || this.tabBar.quantity()) > 3);
|
|
33
|
+
this.mid = computed(() => this.index() > 0 && this.index() < this.count() - 1);
|
|
34
|
+
}
|
|
35
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiTabBarLiquidGlass, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
36
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: TuiTabBarLiquidGlass, isStandalone: true, host: { properties: { "class.tui-liquid-glass_fullwidth": "fullwidth()", "style.--t-tab-active": "index()", "style.--t-tab-count": "count()", "style.--t-tab-mid": "mid() ? 1 : 0" } }, ngImport: i0 }); }
|
|
37
|
+
}
|
|
38
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiTabBarLiquidGlass, decorators: [{
|
|
39
|
+
type: Directive,
|
|
40
|
+
args: [{
|
|
41
|
+
host: {
|
|
42
|
+
'[class.tui-liquid-glass_fullwidth]': 'fullwidth()',
|
|
43
|
+
'[style.--t-tab-active]': 'index()',
|
|
44
|
+
'[style.--t-tab-count]': 'count()',
|
|
45
|
+
'[style.--t-tab-mid]': 'mid() ? 1 : 0',
|
|
46
|
+
},
|
|
47
|
+
}]
|
|
48
|
+
}] });
|
|
49
|
+
|
|
25
50
|
class TuiTabBarComponent {
|
|
26
51
|
constructor() {
|
|
27
52
|
this.tabs = contentChildren(TuiTabBarItem, { read: ElementRef });
|
|
53
|
+
this.liquidGlass = inject(TUI_LIQUID_GLASS) && inject(TUI_PLATFORM) === 'ios';
|
|
54
|
+
this.count = computed(() => this.tabs().length);
|
|
28
55
|
this.quantity = input(4);
|
|
29
56
|
this.activeItemIndex = model(Number.NaN);
|
|
30
57
|
}
|
|
31
58
|
setActive(tab) {
|
|
32
|
-
this.
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
59
|
+
const index = this.tabs().findIndex((el) => el.nativeElement === tab);
|
|
60
|
+
if (index > -1) {
|
|
61
|
+
this.activeItemIndex.set(index);
|
|
62
|
+
}
|
|
36
63
|
}
|
|
37
64
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiTabBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
38
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TuiTabBarComponent, isStandalone: true, selector: "nav[tuiTabBar]", inputs: { quantity: { classPropertyName: "quantity", publicName: "quantity", isSignal: true, isRequired: false, transformFunction: null }, activeItemIndex: { classPropertyName: "activeItemIndex", publicName: "activeItemIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeItemIndex: "activeItemIndexChange" }, host: { listeners: { "click": "setActive($event.target)" }, properties: { "style": "`--tui-tab-${this.activeItemIndex() + 1}: var(--tui-active-color)`" } }, queries: [{ propertyName: "tabs", predicate: TuiTabBarItem, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-content />\n<div class=\"t-skeletons\">\n @for (_ of '-'.repeat(quantity()); track $index) {\n <div class=\"t-skeleton\"></div>\n }\n</div>\n", styles: ["@keyframes shimmer{to{opacity:.5}}:host{--tui-active-color: var(--tui-text-action);position:relative;display:flex;font: .625rem/.75rem system-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;inset-block-start:0;inset-inline-start: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:shimmer 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
65
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TuiTabBarComponent, isStandalone: true, selector: "nav[tuiTabBar]", inputs: { quantity: { classPropertyName: "quantity", publicName: "quantity", isSignal: true, isRequired: false, transformFunction: null }, activeItemIndex: { classPropertyName: "activeItemIndex", publicName: "activeItemIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeItemIndex: "activeItemIndexChange" }, host: { listeners: { "click": "setActive($event.target)" }, properties: { "style": "`--tui-tab-${this.activeItemIndex() + 1}: var(--tui-active-color)`" } }, queries: [{ propertyName: "tabs", predicate: TuiTabBarItem, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: TuiTabBarLiquidGlass }], ngImport: i0, template: "<ng-content />\n\n<div class=\"t-skeletons\">\n @for (_ of '-'.repeat(quantity()); track $index) {\n <div class=\"t-skeleton\"></div>\n }\n</div>\n\n@if (liquidGlass) {\n <div class=\"t-liquid-glass-overlay\"></div>\n <div class=\"t-liquid-glass-indicator\"></div>\n}\n", styles: ["@keyframes shimmer{to{opacity:.5}}:host{--tui-active-color: var(--tui-text-action);position:relative;display:flex;font: .625rem/.75rem system-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;inset-block-start:0;inset-inline-start: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:shimmer 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
39
66
|
}
|
|
40
67
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiTabBarComponent, decorators: [{
|
|
41
68
|
type: Component,
|
|
42
|
-
args: [{ selector: 'nav[tuiTabBar]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
69
|
+
args: [{ selector: 'nav[tuiTabBar]', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [TuiTabBarLiquidGlass], host: {
|
|
43
70
|
'[style]': '`--tui-tab-${this.activeItemIndex() + 1}: var(--tui-active-color)`',
|
|
44
71
|
'(click)': 'setActive($event.target)',
|
|
45
|
-
}, template: "<ng-content />\n<div class=\"t-skeletons\">\n @for (_ of '-'.repeat(quantity()); track $index) {\n <div class=\"t-skeleton\"></div>\n }\n</div>\n", styles: ["@keyframes shimmer{to{opacity:.5}}:host{--tui-active-color: var(--tui-text-action);position:relative;display:flex;font: .625rem/.75rem system-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;inset-block-start:0;inset-inline-start: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:shimmer 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"] }]
|
|
72
|
+
}, template: "<ng-content />\n\n<div class=\"t-skeletons\">\n @for (_ of '-'.repeat(quantity()); track $index) {\n <div class=\"t-skeleton\"></div>\n }\n</div>\n\n@if (liquidGlass) {\n <div class=\"t-liquid-glass-overlay\"></div>\n <div class=\"t-liquid-glass-indicator\"></div>\n}\n", styles: ["@keyframes shimmer{to{opacity:.5}}:host{--tui-active-color: var(--tui-text-action);position:relative;display:flex;font: .625rem/.75rem system-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;inset-block-start:0;inset-inline-start: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:shimmer 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"] }]
|
|
46
73
|
}] });
|
|
47
74
|
|
|
48
75
|
class TuiTabBarItemDirective {
|
|
@@ -75,5 +102,5 @@ const TuiTabBar = [
|
|
|
75
102
|
* Generated bundle index. Do not edit.
|
|
76
103
|
*/
|
|
77
104
|
|
|
78
|
-
export { TuiTabBar, TuiTabBarComponent, TuiTabBarItem, TuiTabBarItemDirective };
|
|
105
|
+
export { TuiTabBar, TuiTabBarComponent, TuiTabBarItem, TuiTabBarItemDirective, TuiTabBarLiquidGlass };
|
|
79
106
|
//# sourceMappingURL=taiga-ui-addon-mobile-components-tab-bar.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"taiga-ui-addon-mobile-components-tab-bar.mjs","sources":["../../../projects/addon-mobile/components/tab-bar/tab-bar-item.component.ts","../../../projects/addon-mobile/components/tab-bar/tab-bar-item.template.html","../../../projects/addon-mobile/components/tab-bar/tab-bar.component.ts","../../../projects/addon-mobile/components/tab-bar/tab-bar.template.html","../../../projects/addon-mobile/components/tab-bar/tab-bar-item.directive.ts","../../../projects/addon-mobile/components/tab-bar/tab-bar.ts","../../../projects/addon-mobile/components/tab-bar/taiga-ui-addon-mobile-components-tab-bar.ts"],"sourcesContent":["import {ChangeDetectionStrategy, Component, input} from '@angular/core';\nimport {TuiAnimated} from '@taiga-ui/cdk/directives/animated';\nimport {TuiIcon} from '@taiga-ui/core/components/icon';\n\n@Component({\n selector: 'button[tuiTabBarItem], a[tuiTabBarItem]',\n imports: [TuiAnimated, TuiIcon],\n templateUrl: './tab-bar-item.template.html',\n styleUrl: './tab-bar-item.style.less',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TuiTabBarItem {\n public readonly icon = input('');\n public readonly badge = input<number>();\n\n protected format(value: number): string {\n return value > 999 ? '999+' : String(value);\n }\n}\n","<tui-icon\n class=\"t-icon\"\n [icon]=\"icon()\"\n/>\n<span class=\"t-wrapper\">\n @if (badge(); as value) {\n <span\n tuiAnimated\n class=\"t-badge\"\n >\n {{ format(value) }}\n </span>\n }\n</span>\n<span class=\"t-text\">\n <ng-content />\n</span>\n","import {\n ChangeDetectionStrategy,\n Component,\n contentChildren,\n ElementRef,\n input,\n model,\n} from '@angular/core';\n\nimport {TuiTabBarItem} from './tab-bar-item.component';\n\n@Component({\n selector: 'nav[tuiTabBar]',\n templateUrl: './tab-bar.template.html',\n styleUrl: './tab-bar.style.less',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[style]': '`--tui-tab-${this.activeItemIndex() + 1}: var(--tui-active-color)`',\n '(click)': 'setActive($event.target)',\n },\n})\nexport class TuiTabBarComponent {\n private readonly tabs = contentChildren(TuiTabBarItem, {read: ElementRef});\n\n public readonly quantity = input(4);\n public readonly activeItemIndex = model(Number.NaN);\n\n public setActive(tab: Element): void {\n this.updateIndex(this.tabs().findIndex((el) => el.nativeElement === tab));\n }\n\n private updateIndex(index: number): void {\n this.activeItemIndex.set(index);\n }\n}\n","<ng-content />\n<div class=\"t-skeletons\">\n @for (_ of '-'.repeat(quantity()); track $index) {\n <div class=\"t-skeleton\"></div>\n }\n</div>\n","import {DestroyRef, Directive, inject} from '@angular/core';\nimport {RouterLinkActive} from '@angular/router';\nimport {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';\nimport {EMPTY} from 'rxjs';\n\nimport {TuiTabBarComponent} from './tab-bar.component';\n\n@Directive({selector: '[tuiTabBarItem][routerLinkActive]'})\nexport class TuiTabBarItemDirective {\n constructor() {\n const tabs = inject(TuiTabBarComponent);\n const el = tuiInjectElement();\n const link = inject(RouterLinkActive, {optional: true})?.isActiveChange || EMPTY;\n\n const sub = link.subscribe((value) => {\n if (value) {\n tabs.setActive(el);\n }\n });\n\n inject(DestroyRef).onDestroy(() => sub.unsubscribe());\n }\n}\n","import {TuiTabBarComponent} from './tab-bar.component';\nimport {TuiTabBarItem} from './tab-bar-item.component';\nimport {TuiTabBarItemDirective} from './tab-bar-item.directive';\n\nexport const TuiTabBar = [\n TuiTabBarComponent,\n TuiTabBarItem,\n TuiTabBarItemDirective,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"taiga-ui-addon-mobile-components-tab-bar.mjs","sources":["../../../projects/addon-mobile/components/tab-bar/tab-bar-item.component.ts","../../../projects/addon-mobile/components/tab-bar/tab-bar-item.template.html","../../../projects/addon-mobile/components/tab-bar/tab-bar-liquid-glass.directive.ts","../../../projects/addon-mobile/components/tab-bar/tab-bar.component.ts","../../../projects/addon-mobile/components/tab-bar/tab-bar.template.html","../../../projects/addon-mobile/components/tab-bar/tab-bar-item.directive.ts","../../../projects/addon-mobile/components/tab-bar/tab-bar.ts","../../../projects/addon-mobile/components/tab-bar/taiga-ui-addon-mobile-components-tab-bar.ts"],"sourcesContent":["import {ChangeDetectionStrategy, Component, input} from '@angular/core';\nimport {TuiAnimated} from '@taiga-ui/cdk/directives/animated';\nimport {TuiIcon} from '@taiga-ui/core/components/icon';\n\n@Component({\n selector: 'button[tuiTabBarItem], a[tuiTabBarItem]',\n imports: [TuiAnimated, TuiIcon],\n templateUrl: './tab-bar-item.template.html',\n styleUrl: './tab-bar-item.style.less',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TuiTabBarItem {\n public readonly icon = input('');\n public readonly badge = input<number>();\n\n protected format(value: number): string {\n return value > 999 ? '999+' : String(value);\n }\n}\n","<tui-icon\n class=\"t-icon\"\n [icon]=\"icon()\"\n/>\n<span class=\"t-wrapper\">\n @if (badge(); as value) {\n <span\n tuiAnimated\n class=\"t-badge\"\n >\n {{ format(value) }}\n </span>\n }\n</span>\n<span class=\"t-text\">\n <ng-content />\n</span>\n","import {computed, Directive, inject} from '@angular/core';\n\nimport {TuiTabBarComponent} from './tab-bar.component';\n\n@Directive({\n host: {\n '[class.tui-liquid-glass_fullwidth]': 'fullwidth()',\n '[style.--t-tab-active]': 'index()',\n '[style.--t-tab-count]': 'count()',\n '[style.--t-tab-mid]': 'mid() ? 1 : 0',\n },\n})\nexport class TuiTabBarLiquidGlass {\n private readonly tabBar = inject(TuiTabBarComponent);\n\n protected readonly count = this.tabBar.count;\n protected readonly index = computed(() => this.tabBar.activeItemIndex());\n\n protected readonly fullwidth = computed(\n () => (this.count() || this.tabBar.quantity()) > 3,\n );\n\n protected readonly mid = computed(\n () => this.index() > 0 && this.index() < this.count() - 1,\n );\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChildren,\n ElementRef,\n inject,\n input,\n model,\n} from '@angular/core';\nimport {TUI_PLATFORM} from '@taiga-ui/cdk/tokens';\nimport {TUI_LIQUID_GLASS} from '@taiga-ui/core/utils/miscellaneous';\n\nimport {TuiTabBarItem} from './tab-bar-item.component';\nimport {TuiTabBarLiquidGlass} from './tab-bar-liquid-glass.directive';\n\n@Component({\n selector: 'nav[tuiTabBar]',\n templateUrl: './tab-bar.template.html',\n styleUrl: './tab-bar.style.less',\n changeDetection: ChangeDetectionStrategy.OnPush,\n hostDirectives: [TuiTabBarLiquidGlass],\n host: {\n '[style]': '`--tui-tab-${this.activeItemIndex() + 1}: var(--tui-active-color)`',\n '(click)': 'setActive($event.target)',\n },\n})\nexport class TuiTabBarComponent {\n private readonly tabs = contentChildren(TuiTabBarItem, {read: ElementRef});\n\n protected readonly liquidGlass =\n inject(TUI_LIQUID_GLASS) && inject(TUI_PLATFORM) === 'ios';\n\n public readonly count = computed(() => this.tabs().length);\n public readonly quantity = input(4);\n public readonly activeItemIndex = model(Number.NaN);\n\n public setActive(tab: Element): void {\n const index = this.tabs().findIndex((el) => el.nativeElement === tab);\n\n if (index > -1) {\n this.activeItemIndex.set(index);\n }\n }\n}\n","<ng-content />\n\n<div class=\"t-skeletons\">\n @for (_ of '-'.repeat(quantity()); track $index) {\n <div class=\"t-skeleton\"></div>\n }\n</div>\n\n@if (liquidGlass) {\n <div class=\"t-liquid-glass-overlay\"></div>\n <div class=\"t-liquid-glass-indicator\"></div>\n}\n","import {DestroyRef, Directive, inject} from '@angular/core';\nimport {RouterLinkActive} from '@angular/router';\nimport {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';\nimport {EMPTY} from 'rxjs';\n\nimport {TuiTabBarComponent} from './tab-bar.component';\n\n@Directive({selector: '[tuiTabBarItem][routerLinkActive]'})\nexport class TuiTabBarItemDirective {\n constructor() {\n const tabs = inject(TuiTabBarComponent);\n const el = tuiInjectElement();\n const link = inject(RouterLinkActive, {optional: true})?.isActiveChange || EMPTY;\n\n const sub = link.subscribe((value) => {\n if (value) {\n tabs.setActive(el);\n }\n });\n\n inject(DestroyRef).onDestroy(() => sub.unsubscribe());\n }\n}\n","import {TuiTabBarComponent} from './tab-bar.component';\nimport {TuiTabBarItem} from './tab-bar-item.component';\nimport {TuiTabBarItemDirective} from './tab-bar-item.directive';\n\nexport const TuiTabBar = [\n TuiTabBarComponent,\n TuiTabBarItem,\n TuiTabBarItemDirective,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -69,13 +69,13 @@ class TuiDropdownMobileComponent {
|
|
|
69
69
|
return this.dropdown.el.contains(tuiGetFocused(this.doc));
|
|
70
70
|
}
|
|
71
71
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
72
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: TuiDropdownMobileComponent, isStandalone: true, selector: "tui-dropdown-mobile", host: { attributes: { "data-tui-version": "5.
|
|
72
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: TuiDropdownMobileComponent, isStandalone: true, selector: "tui-dropdown-mobile", host: { attributes: { "data-tui-version": "5.18.0" }, listeners: { "document:click.zoneless.capture": "onClick($event)", "pointerdown.prevent": "0", "visualViewport>resize.zoneless": "refresh()", "visualViewport>scroll.zoneless": "refresh()", "window>scroll.zoneless.capture": "refresh()" } }, hostDirectives: [{ directive: i1.TuiAnimated }, { directive: i2.TuiActiveZone }], ngImport: i0, template: `
|
|
73
73
|
<div class="t-container">
|
|
74
74
|
<ng-container *polymorpheusOutlet="dropdown.content() as text; context: ctx">
|
|
75
75
|
{{ text }}
|
|
76
76
|
</ng-container>
|
|
77
77
|
</div>
|
|
78
|
-
`, isInline: true, styles: ["tui-dropdown-mobile:where(*[data-tui-version=\"5.
|
|
78
|
+
`, isInline: true, styles: ["tui-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"]){scrollbar-width:none;-ms-overflow-style:none;position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;visibility:visible!important;background:var(--tui-background-base);overscroll-behavior:contain;overflow:auto;box-shadow:0 -.5rem .5rem var(--tui-background-base),0 10rem var(--tui-background-base),0 20rem var(--tui-background-base),0 30rem var(--tui-background-base);box-sizing:border-box;padding-block-end:env(safe-area-inset-bottom);pointer-events:auto}tui-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"])::-webkit-scrollbar,tui-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"])::-webkit-scrollbar-thumb{display:none}tui-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"]).tui-enter,tui-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"]).tui-leave{animation-name:tuiFade,tuiSlide}tui-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"]):after{content:\"\";display:block;block-size:1px}tui-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"])>.t-container{scrollbar-width:none;-ms-overflow-style:none;position:sticky;inset-block-start:0;block-size:100%;overflow:auto;padding:0 1rem;touch-action:pan-y!important}tui-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"])>.t-container::-webkit-scrollbar,tui-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"])>.t-container::-webkit-scrollbar-thumb{display:none}tui-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"])>.t-container tui-data-list{padding:0;margin:0 -.5rem}tui-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"]) [tuiDropdownButton][tuiDropdownButton]{position:fixed;display:inline-flex;inset-inline-end:1rem;inset-block-end:max(1rem,env(safe-area-inset-bottom))}tui-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"]) tui-data-list [tuiOption]{box-sizing:content-box}.t-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"]){touch-action:none;visibility:hidden}.t-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"]) *{touch-action:inherit;visibility:inherit}.t-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"]) tui-root{visibility:visible}.t-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"]) tui-root .t-root-content,.t-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"]) tui-root tui-dialogs{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
79
79
|
}
|
|
80
80
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownMobileComponent, decorators: [{
|
|
81
81
|
type: Component,
|
|
@@ -92,7 +92,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
|
|
|
92
92
|
'(visualViewport>resize.zoneless)': 'refresh()',
|
|
93
93
|
'(visualViewport>scroll.zoneless)': 'refresh()',
|
|
94
94
|
'(window>scroll.zoneless.capture)': 'refresh()',
|
|
95
|
-
}, styles: ["tui-dropdown-mobile:where(*[data-tui-version=\"5.
|
|
95
|
+
}, styles: ["tui-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"]){scrollbar-width:none;-ms-overflow-style:none;position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;visibility:visible!important;background:var(--tui-background-base);overscroll-behavior:contain;overflow:auto;box-shadow:0 -.5rem .5rem var(--tui-background-base),0 10rem var(--tui-background-base),0 20rem var(--tui-background-base),0 30rem var(--tui-background-base);box-sizing:border-box;padding-block-end:env(safe-area-inset-bottom);pointer-events:auto}tui-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"])::-webkit-scrollbar,tui-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"])::-webkit-scrollbar-thumb{display:none}tui-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"]).tui-enter,tui-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"]).tui-leave{animation-name:tuiFade,tuiSlide}tui-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"]):after{content:\"\";display:block;block-size:1px}tui-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"])>.t-container{scrollbar-width:none;-ms-overflow-style:none;position:sticky;inset-block-start:0;block-size:100%;overflow:auto;padding:0 1rem;touch-action:pan-y!important}tui-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"])>.t-container::-webkit-scrollbar,tui-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"])>.t-container::-webkit-scrollbar-thumb{display:none}tui-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"])>.t-container tui-data-list{padding:0;margin:0 -.5rem}tui-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"]) [tuiDropdownButton][tuiDropdownButton]{position:fixed;display:inline-flex;inset-inline-end:1rem;inset-block-end:max(1rem,env(safe-area-inset-bottom))}tui-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"]) tui-data-list [tuiOption]{box-sizing:content-box}.t-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"]){touch-action:none;visibility:hidden}.t-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"]) *{touch-action:inherit;visibility:inherit}.t-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"]) tui-root{visibility:visible}.t-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"]) tui-root .t-root-content,.t-dropdown-mobile:where(*[data-tui-version=\"5.18.0\"]) tui-root tui-dialogs{visibility:hidden}\n"] }]
|
|
96
96
|
}], ctorParameters: () => [] });
|
|
97
97
|
|
|
98
98
|
class TuiDropdownMobile {
|
|
@@ -13,11 +13,11 @@ const TO = [{ transform: 'scale(0)', opacity: '0.12' }, { opacity: '0.12' }];
|
|
|
13
13
|
const FROM = [{ opacity: '0.12' }, { opacity: '0' }];
|
|
14
14
|
class Styles {
|
|
15
15
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: Styles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: Styles, isStandalone: true, selector: "ng-component", exportAs: ["tui-ripple-5.
|
|
16
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: Styles, isStandalone: true, selector: "ng-component", exportAs: ["tui-ripple-5.18.0"], ngImport: i0, template: '', isInline: true, styles: [".tui-ripple:where(*[data-tui-version=\"5.18.0\"]){position:absolute;z-index:100;opacity:.12;border-radius:100%;background:var(--tui-ripple-background, currentColor);animation-fill-mode:forwards;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
17
17
|
}
|
|
18
18
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: Styles, decorators: [{
|
|
19
19
|
type: Component,
|
|
20
|
-
args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-ripple-${TUI_VERSION}`, styles: [".tui-ripple:where(*[data-tui-version=\"5.
|
|
20
|
+
args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-ripple-${TUI_VERSION}`, styles: [".tui-ripple:where(*[data-tui-version=\"5.18.0\"]){position:absolute;z-index:100;opacity:.12;border-radius:100%;background:var(--tui-ripple-background, currentColor);animation-fill-mode:forwards;pointer-events:none}\n"] }]
|
|
21
21
|
}] });
|
|
22
22
|
class TuiRipple {
|
|
23
23
|
constructor() {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@taiga-ui/addon-mobile",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.18.0",
|
|
4
4
|
"description": "Extension package for Taiga UI that adds support for mobile specific behaviors such as custom data pickers, dropdowns, etc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -40,17 +40,13 @@
|
|
|
40
40
|
"types": "./components/index.d.ts",
|
|
41
41
|
"default": "./fesm2022/taiga-ui-addon-mobile-components.mjs"
|
|
42
42
|
},
|
|
43
|
-
"./directives": {
|
|
44
|
-
"types": "./directives/index.d.ts",
|
|
45
|
-
"default": "./fesm2022/taiga-ui-addon-mobile-directives.mjs"
|
|
46
|
-
},
|
|
47
43
|
"./services": {
|
|
48
44
|
"types": "./services/index.d.ts",
|
|
49
45
|
"default": "./fesm2022/taiga-ui-addon-mobile-services.mjs"
|
|
50
46
|
},
|
|
51
|
-
"./
|
|
52
|
-
"types": "./
|
|
53
|
-
"default": "./fesm2022/taiga-ui-addon-mobile-
|
|
47
|
+
"./directives": {
|
|
48
|
+
"types": "./directives/index.d.ts",
|
|
49
|
+
"default": "./fesm2022/taiga-ui-addon-mobile-directives.mjs"
|
|
54
50
|
},
|
|
55
51
|
"./components/mobile-calendar": {
|
|
56
52
|
"types": "./components/mobile-calendar/index.d.ts",
|
|
@@ -64,6 +60,10 @@
|
|
|
64
60
|
"types": "./components/mobile-calendar-sheet/index.d.ts",
|
|
65
61
|
"default": "./fesm2022/taiga-ui-addon-mobile-components-mobile-calendar-sheet.mjs"
|
|
66
62
|
},
|
|
63
|
+
"./components/bottom-sheet": {
|
|
64
|
+
"types": "./components/bottom-sheet/index.d.ts",
|
|
65
|
+
"default": "./fesm2022/taiga-ui-addon-mobile-components-bottom-sheet.mjs"
|
|
66
|
+
},
|
|
67
67
|
"./components/pull-to-refresh": {
|
|
68
68
|
"types": "./components/pull-to-refresh/index.d.ts",
|
|
69
69
|
"default": "./fesm2022/taiga-ui-addon-mobile-components-pull-to-refresh.mjs"
|
|
@@ -111,10 +111,10 @@
|
|
|
111
111
|
"@angular/core": ">=19.0.0",
|
|
112
112
|
"@ng-web-apis/common": "^5.3.0",
|
|
113
113
|
"@ng-web-apis/platform": "^5.3.0",
|
|
114
|
-
"@taiga-ui/cdk": "5.
|
|
115
|
-
"@taiga-ui/core": "5.
|
|
116
|
-
"@taiga-ui/kit": "5.
|
|
117
|
-
"@taiga-ui/layout": "5.
|
|
114
|
+
"@taiga-ui/cdk": "5.18.0",
|
|
115
|
+
"@taiga-ui/core": "5.18.0",
|
|
116
|
+
"@taiga-ui/kit": "5.18.0",
|
|
117
|
+
"@taiga-ui/layout": "5.18.0",
|
|
118
118
|
"@taiga-ui/polymorpheus": "^5.0.1",
|
|
119
119
|
"rxjs": ">=7.0.0"
|
|
120
120
|
},
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
@t-tab-width: 5.875rem;
|
|
2
|
+
|
|
3
|
+
&.tui-liquid-glass {
|
|
4
|
+
nav[tuiTabBar] {
|
|
5
|
+
justify-content: center;
|
|
6
|
+
isolation: isolate;
|
|
7
|
+
inline-size: fit-content;
|
|
8
|
+
margin-inline: auto;
|
|
9
|
+
margin-block-end: var(--t-tabbar-offset);
|
|
10
|
+
padding: 0.25rem;
|
|
11
|
+
border-radius: 62.5rem;
|
|
12
|
+
block-size: 3.375rem;
|
|
13
|
+
backdrop-filter: none;
|
|
14
|
+
|
|
15
|
+
--t-tabbar-offset: max(env(safe-area-inset-bottom), 1.25rem);
|
|
16
|
+
--t-tabbar-bg: rgba(255, 255, 255, 0.7);
|
|
17
|
+
--t-tabbar-glow: rgba(255, 255, 255, 1);
|
|
18
|
+
--t-tabbar-active: rgba(255, 255, 255, 0.9);
|
|
19
|
+
--t-tabbar-bevel: linear-gradient(227deg, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.35) 21%, rgba(255, 255, 255, 0.85) 40%, rgba(255, 255, 255, 0.95) 45%, #fff 48%, #fff 50%, #fff 52%, rgba(255, 255, 255, 0.95) 55%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0.35) 80%, rgba(255, 255, 255, 0) 95%);
|
|
20
|
+
|
|
21
|
+
&::before {
|
|
22
|
+
content: '';
|
|
23
|
+
position: absolute;
|
|
24
|
+
inset: 0;
|
|
25
|
+
border-radius: inherit;
|
|
26
|
+
background: var(--t-tabbar-bg);
|
|
27
|
+
box-shadow:
|
|
28
|
+
0 0.5rem 2rem rgba(0, 0, 0, 0.1),
|
|
29
|
+
inset 0 0 0.75rem var(--t-tabbar-glow);
|
|
30
|
+
backdrop-filter: blur(0.25rem) saturate(6) brightness(1.05);
|
|
31
|
+
opacity: 1;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&::after {
|
|
35
|
+
content: '';
|
|
36
|
+
position: absolute;
|
|
37
|
+
inset: 0;
|
|
38
|
+
padding: 1px;
|
|
39
|
+
pointer-events: none;
|
|
40
|
+
border-radius: inherit;
|
|
41
|
+
background: var(--t-tabbar-bevel);
|
|
42
|
+
filter: brightness(1.05);
|
|
43
|
+
-webkit-mask:
|
|
44
|
+
linear-gradient(#000 0 0) content-box,
|
|
45
|
+
linear-gradient(#000 0 0);
|
|
46
|
+
-webkit-mask-composite: xor;
|
|
47
|
+
mask-composite: exclude;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
[tuiTabBarItem] {
|
|
51
|
+
position: relative;
|
|
52
|
+
// lift the buttons above the indicator so it highlights behind them
|
|
53
|
+
// (ng-content must stay first for the nth-child colour theme, which
|
|
54
|
+
// puts the indicator after the items in the DOM)
|
|
55
|
+
z-index: 1;
|
|
56
|
+
flex: none;
|
|
57
|
+
inline-size: @t-tab-width;
|
|
58
|
+
padding-inline: 0.375rem;
|
|
59
|
+
|
|
60
|
+
.t-icon {
|
|
61
|
+
inline-size: 1.5rem;
|
|
62
|
+
block-size: 1.5rem;
|
|
63
|
+
margin-block-end: 0.1875rem;
|
|
64
|
+
margin-block-start: 0.5rem;
|
|
65
|
+
border: 0;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.t-liquid-glass-indicator {
|
|
70
|
+
position: absolute;
|
|
71
|
+
inset-block: 0.25rem;
|
|
72
|
+
inset-inline-start: calc(0.25rem + var(--t-tab-active, 0) * @t-tab-width);
|
|
73
|
+
inline-size: @t-tab-width;
|
|
74
|
+
border-radius: 62.5rem;
|
|
75
|
+
pointer-events: none;
|
|
76
|
+
background: var(--tui-background-neutral-2);
|
|
77
|
+
transition:
|
|
78
|
+
inset-inline-start var(--tui-duration) cubic-bezier(0.4, 0.1, 0.2, 1),
|
|
79
|
+
inline-size var(--tui-duration) cubic-bezier(0.4, 0.1, 0.2, 1);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.t-skeletons {
|
|
83
|
+
inline-size: auto;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.t-skeleton {
|
|
87
|
+
flex: none;
|
|
88
|
+
inline-size: @t-tab-width;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
&.tui-liquid-glass_fullwidth {
|
|
92
|
+
inline-size: auto;
|
|
93
|
+
margin-inline: 1.25rem;
|
|
94
|
+
|
|
95
|
+
[tuiTabBarItem] {
|
|
96
|
+
flex: 1 0 3.375rem;
|
|
97
|
+
inline-size: auto;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.t-skeletons {
|
|
101
|
+
inline-size: 100%;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.t-skeleton {
|
|
105
|
+
flex: 1 0 3.375rem;
|
|
106
|
+
inline-size: auto;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
// indicator matches the item width ((100% - padding) / count); middle
|
|
110
|
+
// positions additionally grow 0.25rem on each side for optical
|
|
111
|
+
// compensation (var(--t-tab-mid) is 1 for middle tabs, 0 for first/last)
|
|
112
|
+
.t-liquid-glass-indicator {
|
|
113
|
+
inline-size: calc((100% - 0.5rem) / var(--t-tab-count, 1) + var(--t-tab-mid, 0) * 0.5rem);
|
|
114
|
+
inset-inline-start: calc(
|
|
115
|
+
0.25rem - var(--t-tab-mid, 0) * 0.25rem + var(--t-tab-active, 0) * (100% - 0.5rem) /
|
|
116
|
+
var(--t-tab-count, 1)
|
|
117
|
+
);
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.t-liquid-glass-overlay {
|
|
122
|
+
position: absolute;
|
|
123
|
+
z-index: -1;
|
|
124
|
+
inset-block: auto calc(-1 * var(--t-tabbar-offset));
|
|
125
|
+
inset-inline-start: 50%;
|
|
126
|
+
margin-inline-start: -50vw;
|
|
127
|
+
inline-size: 100vw;
|
|
128
|
+
block-size: 9.375rem;
|
|
129
|
+
background: var(--tui-background-base);
|
|
130
|
+
pointer-events: none;
|
|
131
|
+
mask-image: linear-gradient(
|
|
132
|
+
180deg,
|
|
133
|
+
rgba(0, 0, 0, 0),
|
|
134
|
+
rgba(0, 0, 0, 0.01) 7%,
|
|
135
|
+
rgba(0, 0, 0, 0.04) 13%,
|
|
136
|
+
rgba(0, 0, 0, 0.08) 20%,
|
|
137
|
+
rgba(0, 0, 0, 0.15) 27%,
|
|
138
|
+
rgba(0, 0, 0, 0.23) 33%,
|
|
139
|
+
rgba(0, 0, 0, 0.33) 40%,
|
|
140
|
+
rgba(0, 0, 0, 0.44) 47%,
|
|
141
|
+
rgba(0, 0, 0, 0.56) 53%,
|
|
142
|
+
rgba(0, 0, 0, 0.67) 60%,
|
|
143
|
+
rgba(0, 0, 0, 0.77) 67%,
|
|
144
|
+
rgba(0, 0, 0, 0.85) 73%,
|
|
145
|
+
rgba(0, 0, 0, 0.92) 80%,
|
|
146
|
+
rgba(0, 0, 0, 0.96) 87%,
|
|
147
|
+
rgba(0, 0, 0, 0.99) 93%,
|
|
148
|
+
#000 100%
|
|
149
|
+
);
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
&.tui-liquid-glass [tuiTheme='dark'] nav[tuiTabBar],
|
|
155
|
+
[tuiTheme='dark'] &.tui-liquid-glass nav[tuiTabBar],
|
|
156
|
+
&[tuiTheme='dark'].tui-liquid-glass nav[tuiTabBar] {
|
|
157
|
+
--tui-active-color: var(--tui-text-primary);
|
|
158
|
+
--t-tabbar-bg: rgba(88, 88, 88, 0.31);
|
|
159
|
+
--t-tabbar-glow: rgba(31, 31, 31, 0.8);
|
|
160
|
+
--t-tabbar-active: rgba(255, 255, 255, 0.18);
|
|
161
|
+
--t-tabbar-bevel: linear-gradient(-6deg, rgba(255, 255, 255, 0.15) 5%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.04) 40%, rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0.03) 55%, rgba(255, 255, 255, 0.04) 60%, rgba(255, 255, 255, 0.1) 80%, rgba(255, 255, 255, 0.15) 95%);
|
|
162
|
+
}
|