@taiga-ui/addon-mobile 4.52.0-canary.e444d19 → 4.52.0-canary.eb5ffe3
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/mobile-calendar/mobile-calendar.component.d.ts +4 -4
- package/components/sheet-dialog/sheet-dialog.options.d.ts +1 -1
- package/directives/dropdown-mobile/dropdown-mobile.component.d.ts +9 -13
- package/directives/dropdown-mobile/dropdown-mobile.directive.d.ts +1 -2
- package/directives/dropdown-sheet/dropdown-sheet.component.d.ts +14 -0
- package/directives/dropdown-sheet/dropdown-sheet.directive.d.ts +6 -0
- package/directives/dropdown-sheet/index.d.ts +2 -0
- package/directives/index.d.ts +1 -1
- package/directives/ripple/ripple.directive.d.ts +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-bottom-sheet.mjs +3 -3
- package/fesm2022/taiga-ui-addon-mobile-components-bottom-sheet.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-mobile-calendar-dropdown.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-mobile-calendar-sheet.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-mobile-calendar.mjs +8 -8
- package/fesm2022/taiga-ui-addon-mobile-components-mobile-calendar.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-mobile-dialog.mjs +2 -2
- package/fesm2022/taiga-ui-addon-mobile-components-mobile-dialog.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-pull-to-refresh.mjs +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-pull-to-refresh.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-sheet-dialog.mjs +13 -13
- package/fesm2022/taiga-ui-addon-mobile-components-sheet-dialog.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-swipe-action.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-tab-bar.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-directives-dropdown-mobile.mjs +62 -85
- package/fesm2022/taiga-ui-addon-mobile-directives-dropdown-mobile.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-directives-dropdown-sheet.mjs +83 -0
- package/fesm2022/taiga-ui-addon-mobile-directives-dropdown-sheet.mjs.map +1 -0
- package/fesm2022/taiga-ui-addon-mobile-directives-ripple.mjs +14 -35
- package/fesm2022/taiga-ui-addon-mobile-directives-ripple.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-directives.mjs +1 -1
- package/fesm2022/taiga-ui-addon-mobile-services.mjs +2 -2
- package/fesm2022/taiga-ui-addon-mobile-services.mjs.map +1 -1
- package/package.json +13 -13
- package/styles/common/badge.less +2 -2
- package/styles/common/button.less +4 -0
- package/styles/common/chip.less +3 -8
- package/styles/common/toast.less +21 -0
- package/styles/taiga-ui-mobile.less +8 -0
- package/directives/sidebar/index.d.ts +0 -3
- package/directives/sidebar/sidebar.component.d.ts +0 -21
- package/directives/sidebar/sidebar.d.ts +0 -6
- package/directives/sidebar/sidebar.directive.d.ts +0 -22
- package/fesm2022/taiga-ui-addon-mobile-directives-sidebar.mjs +0 -114
- package/fesm2022/taiga-ui-addon-mobile-directives-sidebar.mjs.map +0 -1
|
@@ -2,48 +2,28 @@ import { DOCUMENT } from '@angular/common';
|
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
3
|
import { ChangeDetectionStrategy, ViewEncapsulation, Component, inject, DestroyRef, Input, Directive } from '@angular/core';
|
|
4
4
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
|
-
import { tuiTypedFromEvent } from '@taiga-ui/cdk/observables';
|
|
6
5
|
import { tuiIsHTMLElement } from '@taiga-ui/cdk/utils/dom';
|
|
7
6
|
import { tuiWithStyles, tuiPx } from '@taiga-ui/cdk/utils/miscellaneous';
|
|
8
7
|
import { TUI_ANIMATIONS_SPEED } from '@taiga-ui/core/tokens';
|
|
9
8
|
import { tuiGetDuration } from '@taiga-ui/core/utils/miscellaneous';
|
|
10
|
-
import { merge, race, switchMap, first, tap } from 'rxjs';
|
|
9
|
+
import { merge, fromEvent, race, switchMap, first, tap } from 'rxjs';
|
|
11
10
|
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
opacity: '0.12',
|
|
19
|
-
},
|
|
20
|
-
];
|
|
21
|
-
const FROM_KEYFRAMES = [
|
|
22
|
-
{
|
|
23
|
-
opacity: '0.12',
|
|
24
|
-
},
|
|
25
|
-
{
|
|
26
|
-
opacity: '0',
|
|
27
|
-
},
|
|
28
|
-
];
|
|
29
|
-
class TuiRippleStyles {
|
|
30
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiRippleStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
31
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiRippleStyles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-ripple-styles" }, ngImport: i0, template: '', isInline: true, styles: [".tui-ripple{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 }); }
|
|
11
|
+
const TO = [{ transform: 'scale(0)', opacity: '0.12' }, { opacity: '0.12' }];
|
|
12
|
+
const FROM = [{ opacity: '0.12' }, { opacity: '0' }];
|
|
13
|
+
class Styles {
|
|
14
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: Styles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: Styles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-ripple" }, ngImport: i0, template: '', isInline: true, styles: [".tui-ripple{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 }); }
|
|
32
16
|
}
|
|
33
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type:
|
|
17
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: Styles, decorators: [{
|
|
34
18
|
type: Component,
|
|
35
|
-
args: [{
|
|
36
|
-
class: 'tui-ripple-styles',
|
|
37
|
-
}, styles: [".tui-ripple{position:absolute;z-index:100;opacity:.12;border-radius:100%;background:var(--tui-ripple-background, currentColor);animation-fill-mode:forwards;pointer-events:none}\n"] }]
|
|
19
|
+
args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'tui-ripple' }, styles: [".tui-ripple{position:absolute;z-index:100;opacity:.12;border-radius:100%;background:var(--tui-ripple-background, currentColor);animation-fill-mode:forwards;pointer-events:none}\n"] }]
|
|
38
20
|
}] });
|
|
39
21
|
class TuiRipple {
|
|
40
22
|
constructor() {
|
|
41
23
|
this.doc = inject(DOCUMENT);
|
|
42
24
|
this.destroyRef = inject(DestroyRef);
|
|
43
|
-
this.
|
|
44
|
-
|
|
45
|
-
};
|
|
46
|
-
this.nothing = tuiWithStyles(TuiRippleStyles);
|
|
25
|
+
this.duration = tuiGetDuration(inject(TUI_ANIMATIONS_SPEED));
|
|
26
|
+
this.nothing = tuiWithStyles(Styles);
|
|
47
27
|
this.tuiRipple = '';
|
|
48
28
|
}
|
|
49
29
|
start(x, y, target, el) {
|
|
@@ -52,11 +32,11 @@ class TuiRipple {
|
|
|
52
32
|
return;
|
|
53
33
|
}
|
|
54
34
|
const ripple = this.createRipple(x, y, element.getBoundingClientRect());
|
|
55
|
-
const touchEnd$ = merge(
|
|
35
|
+
const touchEnd$ = merge(fromEvent(element, 'pointerup'), fromEvent(element, 'pointercancel'), fromEvent(element, 'pointermove'));
|
|
56
36
|
element.appendChild(ripple);
|
|
57
|
-
const
|
|
58
|
-
race(touchEnd$.pipe(switchMap(() =>
|
|
59
|
-
.pipe(first(), switchMap(() =>
|
|
37
|
+
const animationEnd$ = fromEvent(ripple.animate(TO, this.duration), 'finish');
|
|
38
|
+
race(touchEnd$.pipe(switchMap(() => animationEnd$)), animationEnd$.pipe(switchMap(() => touchEnd$)))
|
|
39
|
+
.pipe(first(), switchMap(() => fromEvent(ripple.animate(FROM, this.duration), 'finish')), first(), tap(() => element.removeChild(ripple)), takeUntilDestroyed(this.destroyRef))
|
|
60
40
|
.subscribe();
|
|
61
41
|
}
|
|
62
42
|
createRipple(clientX, clientY, { width, height, top, left }) {
|
|
@@ -86,7 +66,6 @@ class TuiRipple {
|
|
|
86
66
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiRipple, decorators: [{
|
|
87
67
|
type: Directive,
|
|
88
68
|
args: [{
|
|
89
|
-
standalone: true,
|
|
90
69
|
selector: '[tuiRipple]',
|
|
91
70
|
host: {
|
|
92
71
|
'(pointerdown.zoneless)': 'start($event.clientX, $event.clientY, $event.target, $event.currentTarget)',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"taiga-ui-addon-mobile-directives-ripple.mjs","sources":["../../../projects/addon-mobile/directives/ripple/ripple.directive.ts","../../../projects/addon-mobile/directives/ripple/taiga-ui-addon-mobile-directives-ripple.ts"],"sourcesContent":["import {DOCUMENT} from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n Directive,\n inject,\n Input,\n ViewEncapsulation,\n} from '@angular/core';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\nimport {
|
|
1
|
+
{"version":3,"file":"taiga-ui-addon-mobile-directives-ripple.mjs","sources":["../../../projects/addon-mobile/directives/ripple/ripple.directive.ts","../../../projects/addon-mobile/directives/ripple/taiga-ui-addon-mobile-directives-ripple.ts"],"sourcesContent":["import {DOCUMENT} from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n Directive,\n inject,\n Input,\n ViewEncapsulation,\n} from '@angular/core';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\nimport {tuiIsHTMLElement} from '@taiga-ui/cdk/utils/dom';\nimport {tuiPx, tuiWithStyles} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {TUI_ANIMATIONS_SPEED} from '@taiga-ui/core/tokens';\nimport {tuiGetDuration} from '@taiga-ui/core/utils/miscellaneous';\nimport {first, fromEvent, merge, race, switchMap, tap} from 'rxjs';\n\nconst TO = [{transform: 'scale(0)', opacity: '0.12'}, {opacity: '0.12'}];\nconst FROM = [{opacity: '0.12'}, {opacity: '0'}];\n\n@Component({\n template: '',\n styleUrl: './ripple.style.less',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {class: 'tui-ripple'},\n})\nclass Styles {}\n\n@Directive({\n selector: '[tuiRipple]',\n host: {\n '(pointerdown.zoneless)':\n 'start($event.clientX, $event.clientY, $event.target, $event.currentTarget)',\n },\n})\nexport class TuiRipple {\n private readonly doc = inject(DOCUMENT);\n private readonly destroyRef = inject(DestroyRef);\n private readonly duration = tuiGetDuration(inject(TUI_ANIMATIONS_SPEED));\n\n protected readonly nothing = tuiWithStyles(Styles);\n\n @Input()\n public tuiRipple = '';\n\n protected start(x: number, y: number, target: HTMLElement, el: HTMLElement): void {\n const element = this.tuiRipple ? target.closest(this.tuiRipple) : el;\n\n if (!tuiIsHTMLElement(element)) {\n return;\n }\n\n const ripple = this.createRipple(x, y, element.getBoundingClientRect());\n const touchEnd$ = merge(\n fromEvent(element, 'pointerup'),\n fromEvent(element, 'pointercancel'),\n fromEvent(element, 'pointermove'),\n );\n\n element.appendChild(ripple);\n\n const animationEnd$ = fromEvent(ripple.animate(TO, this.duration), 'finish');\n\n race(\n touchEnd$.pipe(switchMap(() => animationEnd$)),\n animationEnd$.pipe(switchMap(() => touchEnd$)),\n )\n .pipe(\n first(),\n switchMap(() => fromEvent(ripple.animate(FROM, this.duration), 'finish')),\n first(),\n tap(() => element.removeChild(ripple)),\n takeUntilDestroyed(this.destroyRef),\n )\n .subscribe();\n }\n\n private createRipple(\n clientX: number,\n clientY: number,\n {width, height, top, left}: DOMRect,\n ): HTMLElement {\n const ripple: HTMLElement = this.doc.createElement('div');\n const radius = Math.sqrt(width * width + height * height);\n const dimension = radius * 2;\n const x = clientX - left - radius;\n const y = clientY - top - radius;\n\n Object.assign(ripple.style, {\n position: 'absolute',\n top: tuiPx(y),\n left: tuiPx(x),\n width: tuiPx(dimension),\n height: tuiPx(dimension),\n zIndex: 100,\n opacity: 0.12,\n borderRadius: '100%',\n background: 'var(--tui-ripple-background, currentColor)',\n animationFillMode: 'forwards',\n pointerEvents: 'none',\n });\n\n return ripple;\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export * from '@taiga-ui/addon-mobile/directives/dropdown-mobile';
|
|
2
|
+
export * from '@taiga-ui/addon-mobile/directives/dropdown-sheet';
|
|
2
3
|
export * from '@taiga-ui/addon-mobile/directives/elastic-sticky';
|
|
3
4
|
export * from '@taiga-ui/addon-mobile/directives/responsive-dialog';
|
|
4
5
|
export * from '@taiga-ui/addon-mobile/directives/ripple';
|
|
5
|
-
export * from '@taiga-ui/addon-mobile/directives/sidebar';
|
|
6
6
|
export * from '@taiga-ui/addon-mobile/directives/touchable';
|
|
7
7
|
|
|
8
8
|
/**
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { DOCUMENT } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
3
|
import { inject, Injectable } from '@angular/core';
|
|
4
|
-
import {
|
|
4
|
+
import { tuiGetFocused } from '@taiga-ui/cdk/utils/focus';
|
|
5
5
|
import { merge, fromEvent, filter } from 'rxjs';
|
|
6
6
|
|
|
7
7
|
class TuiKeyboardService {
|
|
@@ -25,7 +25,7 @@ class TuiKeyboardService {
|
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
27
|
hide() {
|
|
28
|
-
const focused =
|
|
28
|
+
const focused = tuiGetFocused(this.doc);
|
|
29
29
|
if (focused?.inputMode === undefined || this.element) {
|
|
30
30
|
return;
|
|
31
31
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"taiga-ui-addon-mobile-services.mjs","sources":["../../../projects/addon-mobile/services/keyboard.service.ts","../../../projects/addon-mobile/services/taiga-ui-addon-mobile-services.ts"],"sourcesContent":["import {DOCUMENT} from '@angular/common';\nimport {inject, Injectable, type OnDestroy} from '@angular/core';\nimport {
|
|
1
|
+
{"version":3,"file":"taiga-ui-addon-mobile-services.mjs","sources":["../../../projects/addon-mobile/services/keyboard.service.ts","../../../projects/addon-mobile/services/taiga-ui-addon-mobile-services.ts"],"sourcesContent":["import {DOCUMENT} from '@angular/common';\nimport {inject, Injectable, type OnDestroy} from '@angular/core';\nimport {tuiGetFocused} from '@taiga-ui/cdk/utils/focus';\nimport {filter, fromEvent, merge} from 'rxjs';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class TuiKeyboardService implements OnDestroy {\n private readonly doc = inject(DOCUMENT);\n private readonly sub = merge(\n fromEvent(this.doc, 'focusout'),\n fromEvent(this.doc, 'mousedown').pipe(\n filter((e) => Object.is(e.target, this.element)),\n ),\n ).subscribe(() => {\n this.show();\n });\n\n private element?: ElementContentEditable;\n private inputMode = '';\n\n public ngOnDestroy(): void {\n this.sub.unsubscribe();\n this.show();\n }\n\n public toggle(): void {\n if (this.element) {\n this.show();\n } else {\n this.hide();\n }\n }\n\n public hide(): void {\n const focused = tuiGetFocused(this.doc) as HTMLInputElement;\n\n if (focused?.inputMode === undefined || this.element) {\n return;\n }\n\n this.element = focused;\n this.inputMode = focused.inputMode;\n focused.inputMode = 'none';\n }\n\n public show(): void {\n if (!this.element) {\n return;\n }\n\n this.element.inputMode = 'none';\n this.element.inputMode = this.inputMode;\n this.element = undefined;\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAQa,kBAAkB,CAAA;AAH/B,IAAA,WAAA,GAAA;AAIqB,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,QAAQ,CAAC;QACtB,IAAG,CAAA,GAAA,GAAG,KAAK,CACxB,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,UAAU,CAAC,EAC/B,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC,IAAI,CACjC,MAAM,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CACnD,CACJ,CAAC,SAAS,CAAC,MAAK;YACb,IAAI,CAAC,IAAI,EAAE;AACf,SAAC,CAAC;QAGM,IAAS,CAAA,SAAA,GAAG,EAAE;AAoCzB;IAlCU,WAAW,GAAA;AACd,QAAA,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE;QACtB,IAAI,CAAC,IAAI,EAAE;;IAGR,MAAM,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,IAAI,CAAC,IAAI,EAAE;;aACR;YACH,IAAI,CAAC,IAAI,EAAE;;;IAIZ,IAAI,GAAA;QACP,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAqB;QAE3D,IAAI,OAAO,EAAE,SAAS,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,EAAE;YAClD;;AAGJ,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,QAAA,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS;AAClC,QAAA,OAAO,CAAC,SAAS,GAAG,MAAM;;IAGvB,IAAI,GAAA;AACP,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACf;;AAGJ,QAAA,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,MAAM;QAC/B,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS;AACvC,QAAA,IAAI,CAAC,OAAO,GAAG,SAAS;;+GA9CnB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,cAFf,MAAM,EAAA,CAAA,CAAA;;4FAET,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAH9B,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,UAAU,EAAE,MAAM;AACrB,iBAAA;;;ACPD;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@taiga-ui/addon-mobile",
|
|
3
|
-
"version": "4.52.0-canary.
|
|
3
|
+
"version": "4.52.0-canary.eb5ffe3",
|
|
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",
|
|
@@ -47,14 +47,14 @@
|
|
|
47
47
|
"types": "./components/mobile-calendar-sheet/index.d.ts",
|
|
48
48
|
"default": "./fesm2022/taiga-ui-addon-mobile-components-mobile-calendar-sheet.mjs"
|
|
49
49
|
},
|
|
50
|
-
"./components/pull-to-refresh": {
|
|
51
|
-
"types": "./components/pull-to-refresh/index.d.ts",
|
|
52
|
-
"default": "./fesm2022/taiga-ui-addon-mobile-components-pull-to-refresh.mjs"
|
|
53
|
-
},
|
|
54
50
|
"./components/mobile-dialog": {
|
|
55
51
|
"types": "./components/mobile-dialog/index.d.ts",
|
|
56
52
|
"default": "./fesm2022/taiga-ui-addon-mobile-components-mobile-dialog.mjs"
|
|
57
53
|
},
|
|
54
|
+
"./components/pull-to-refresh": {
|
|
55
|
+
"types": "./components/pull-to-refresh/index.d.ts",
|
|
56
|
+
"default": "./fesm2022/taiga-ui-addon-mobile-components-pull-to-refresh.mjs"
|
|
57
|
+
},
|
|
58
58
|
"./components/sheet-dialog": {
|
|
59
59
|
"types": "./components/sheet-dialog/index.d.ts",
|
|
60
60
|
"default": "./fesm2022/taiga-ui-addon-mobile-components-sheet-dialog.mjs"
|
|
@@ -71,21 +71,21 @@
|
|
|
71
71
|
"types": "./directives/dropdown-mobile/index.d.ts",
|
|
72
72
|
"default": "./fesm2022/taiga-ui-addon-mobile-directives-dropdown-mobile.mjs"
|
|
73
73
|
},
|
|
74
|
+
"./directives/dropdown-sheet": {
|
|
75
|
+
"types": "./directives/dropdown-sheet/index.d.ts",
|
|
76
|
+
"default": "./fesm2022/taiga-ui-addon-mobile-directives-dropdown-sheet.mjs"
|
|
77
|
+
},
|
|
74
78
|
"./directives/elastic-sticky": {
|
|
75
79
|
"types": "./directives/elastic-sticky/index.d.ts",
|
|
76
80
|
"default": "./fesm2022/taiga-ui-addon-mobile-directives-elastic-sticky.mjs"
|
|
77
81
|
},
|
|
78
|
-
"./directives/responsive-dialog": {
|
|
79
|
-
"types": "./directives/responsive-dialog/index.d.ts",
|
|
80
|
-
"default": "./fesm2022/taiga-ui-addon-mobile-directives-responsive-dialog.mjs"
|
|
81
|
-
},
|
|
82
82
|
"./directives/ripple": {
|
|
83
83
|
"types": "./directives/ripple/index.d.ts",
|
|
84
84
|
"default": "./fesm2022/taiga-ui-addon-mobile-directives-ripple.mjs"
|
|
85
85
|
},
|
|
86
|
-
"./directives/
|
|
87
|
-
"types": "./directives/
|
|
88
|
-
"default": "./fesm2022/taiga-ui-addon-mobile-directives-
|
|
86
|
+
"./directives/responsive-dialog": {
|
|
87
|
+
"types": "./directives/responsive-dialog/index.d.ts",
|
|
88
|
+
"default": "./fesm2022/taiga-ui-addon-mobile-directives-responsive-dialog.mjs"
|
|
89
89
|
},
|
|
90
90
|
"./directives/touchable": {
|
|
91
91
|
"types": "./directives/touchable/index.d.ts",
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
"@angular/cdk": ">=19.0.0",
|
|
97
97
|
"@angular/common": ">=19.0.0",
|
|
98
98
|
"@angular/core": ">=19.0.0",
|
|
99
|
-
"@ng-web-apis/common": "^4.12.
|
|
99
|
+
"@ng-web-apis/common": "^4.12.2",
|
|
100
100
|
"@taiga-ui/cdk": "^4.52.0",
|
|
101
101
|
"@taiga-ui/core": "^4.52.0",
|
|
102
102
|
"@taiga-ui/kit": "^4.52.0",
|
package/styles/common/badge.less
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
tui-badge,
|
|
2
2
|
[tuiBadge] {
|
|
3
|
-
font-weight:
|
|
3
|
+
font-weight: 600;
|
|
4
4
|
|
|
5
5
|
&[data-size='s'] {
|
|
6
6
|
font: var(--tui-font-text-xs);
|
|
@@ -12,6 +12,6 @@ tui-badge,
|
|
|
12
12
|
--t-size: 1.75rem;
|
|
13
13
|
|
|
14
14
|
font: var(--tui-font-text-s);
|
|
15
|
-
font-weight:
|
|
15
|
+
font-weight: 600;
|
|
16
16
|
}
|
|
17
17
|
}
|
package/styles/common/chip.less
CHANGED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
[tuiToast] {
|
|
2
|
+
min-block-size: 3rem;
|
|
3
|
+
border-radius: 1.5rem;
|
|
4
|
+
font: var(--tui-font-text-m);
|
|
5
|
+
|
|
6
|
+
[tuiButton]:last-child {
|
|
7
|
+
margin: -0.1875rem -0.4375rem -0.1875rem 0;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
&:has([tuiAvatar]) {
|
|
11
|
+
gap: 1rem;
|
|
12
|
+
|
|
13
|
+
[tuiAvatar] {
|
|
14
|
+
margin: 0 -0.25rem;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
[tuiButton]:last-child {
|
|
18
|
+
margin-inline-end: 0;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@import '@taiga-ui/core/styles/taiga-ui-local.less';
|
|
1
2
|
@import 'common/search.less';
|
|
2
3
|
|
|
3
4
|
[data-platform='android'] {
|
|
@@ -22,6 +23,12 @@
|
|
|
22
23
|
tui-segmented > .tui-segmented_active:active {
|
|
23
24
|
opacity: var(--tui-disabled-opacity);
|
|
24
25
|
}
|
|
26
|
+
|
|
27
|
+
[tuiToast]:active {
|
|
28
|
+
.interactive({
|
|
29
|
+
transform: scale(0.95);
|
|
30
|
+
});
|
|
31
|
+
}
|
|
25
32
|
}
|
|
26
33
|
|
|
27
34
|
[data-platform='android'],
|
|
@@ -38,4 +45,5 @@
|
|
|
38
45
|
@import 'common/header.less';
|
|
39
46
|
@import 'common/message.less';
|
|
40
47
|
@import 'common/notification-middle.less';
|
|
48
|
+
@import 'common/toast.less';
|
|
41
49
|
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { type AnimationOptions } from '@angular/animations';
|
|
2
|
-
import { type DoCheck } from '@angular/core';
|
|
3
|
-
import { type TuiHorizontalDirection } from '@taiga-ui/core/types';
|
|
4
|
-
import { type PolymorpheusContent } from '@taiga-ui/polymorpheus';
|
|
5
|
-
import * as i0 from "@angular/core";
|
|
6
|
-
/**
|
|
7
|
-
* @deprecated use {@link TuiDrawer} instead
|
|
8
|
-
*/
|
|
9
|
-
export declare class TuiSidebarComponent implements DoCheck {
|
|
10
|
-
private readonly directive;
|
|
11
|
-
private readonly options;
|
|
12
|
-
private readonly left;
|
|
13
|
-
private readonly right;
|
|
14
|
-
ngDoCheck(): void;
|
|
15
|
-
protected get animation(): AnimationOptions;
|
|
16
|
-
protected get direction(): TuiHorizontalDirection;
|
|
17
|
-
protected get content(): PolymorpheusContent;
|
|
18
|
-
protected get autoWidth(): boolean;
|
|
19
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<TuiSidebarComponent, never>;
|
|
20
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<TuiSidebarComponent, "aside[tuiSidebar]", never, {}, {}, never, never, true, never>;
|
|
21
|
-
}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { TuiSidebarComponent } from './sidebar.component';
|
|
2
|
-
import { TuiSidebarDirective } from './sidebar.directive';
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated use {@link TuiDrawer} instead
|
|
5
|
-
*/
|
|
6
|
-
export declare const TuiSidebar: readonly [typeof TuiSidebarComponent, typeof TuiSidebarDirective];
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { type OnDestroy, TemplateRef } from '@angular/core';
|
|
2
|
-
import { type TuiHorizontalDirection } from '@taiga-ui/core/types';
|
|
3
|
-
import { PolymorpheusTemplate } from '@taiga-ui/polymorpheus';
|
|
4
|
-
import * as i0 from "@angular/core";
|
|
5
|
-
/**
|
|
6
|
-
* @deprecated use {@link TuiDrawer} instead
|
|
7
|
-
*/
|
|
8
|
-
export declare class TuiSidebarDirective<T = Record<string, unknown>> extends PolymorpheusTemplate<T> implements OnDestroy {
|
|
9
|
-
private readonly injector;
|
|
10
|
-
private readonly service;
|
|
11
|
-
private readonly component;
|
|
12
|
-
private sidebarRef;
|
|
13
|
-
direction: TuiHorizontalDirection;
|
|
14
|
-
autoWidth: boolean;
|
|
15
|
-
readonly content: TemplateRef<any>;
|
|
16
|
-
set tuiSidebar(open: boolean);
|
|
17
|
-
ngOnDestroy(): void;
|
|
18
|
-
private show;
|
|
19
|
-
private hide;
|
|
20
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<TuiSidebarDirective<any>, never>;
|
|
21
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<TuiSidebarDirective<any>, "[tuiSidebar]", never, { "direction": { "alias": "tuiSidebarDirection"; "required": false; }; "autoWidth": { "alias": "tuiSidebarAutoWidth"; "required": false; }; "tuiSidebar": { "alias": "tuiSidebar"; "required": false; }; }, {}, never, never, true, never>;
|
|
22
|
-
}
|
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, INJECTOR, TemplateRef, Input, Directive, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
-
import { TuiActiveZone } from '@taiga-ui/cdk/directives/active-zone';
|
|
4
|
-
import { tuiSlideIn } from '@taiga-ui/core/animations';
|
|
5
|
-
import { TUI_ANIMATIONS_SPEED } from '@taiga-ui/core/tokens';
|
|
6
|
-
import { tuiToAnimationOptions } from '@taiga-ui/core/utils/miscellaneous';
|
|
7
|
-
import { PolymorpheusTemplate, PolymorpheusComponent, PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
|
|
8
|
-
import { TuiPopupService } from '@taiga-ui/core/directives/popup';
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* @deprecated use {@link TuiDrawer} instead
|
|
12
|
-
*/
|
|
13
|
-
class TuiSidebarDirective extends PolymorpheusTemplate {
|
|
14
|
-
constructor() {
|
|
15
|
-
super(...arguments);
|
|
16
|
-
this.injector = inject(INJECTOR);
|
|
17
|
-
this.service = inject(TuiPopupService);
|
|
18
|
-
this.component = new PolymorpheusComponent(TuiSidebarComponent, this.injector);
|
|
19
|
-
this.sidebarRef = null;
|
|
20
|
-
this.direction = 'left';
|
|
21
|
-
this.autoWidth = false;
|
|
22
|
-
this.content = inject((TemplateRef));
|
|
23
|
-
}
|
|
24
|
-
set tuiSidebar(open) {
|
|
25
|
-
if (open) {
|
|
26
|
-
this.show();
|
|
27
|
-
}
|
|
28
|
-
else {
|
|
29
|
-
this.hide();
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
ngOnDestroy() {
|
|
33
|
-
this.hide();
|
|
34
|
-
}
|
|
35
|
-
show() {
|
|
36
|
-
if (this.sidebarRef !== null) {
|
|
37
|
-
return;
|
|
38
|
-
}
|
|
39
|
-
this.sidebarRef = this.service.add(this.component);
|
|
40
|
-
this.sidebarRef.changeDetectorRef.detectChanges();
|
|
41
|
-
}
|
|
42
|
-
hide() {
|
|
43
|
-
if (this.sidebarRef === null) {
|
|
44
|
-
return;
|
|
45
|
-
}
|
|
46
|
-
this.service.remove(this.sidebarRef);
|
|
47
|
-
this.sidebarRef = null;
|
|
48
|
-
}
|
|
49
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiSidebarDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
50
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiSidebarDirective, isStandalone: true, selector: "[tuiSidebar]", inputs: { direction: ["tuiSidebarDirection", "direction"], autoWidth: ["tuiSidebarAutoWidth", "autoWidth"], tuiSidebar: "tuiSidebar" }, usesInheritance: true, ngImport: i0 }); }
|
|
51
|
-
}
|
|
52
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiSidebarDirective, decorators: [{
|
|
53
|
-
type: Directive,
|
|
54
|
-
args: [{
|
|
55
|
-
standalone: true,
|
|
56
|
-
selector: '[tuiSidebar]',
|
|
57
|
-
}]
|
|
58
|
-
}], propDecorators: { direction: [{
|
|
59
|
-
type: Input,
|
|
60
|
-
args: ['tuiSidebarDirection']
|
|
61
|
-
}], autoWidth: [{
|
|
62
|
-
type: Input,
|
|
63
|
-
args: ['tuiSidebarAutoWidth']
|
|
64
|
-
}], tuiSidebar: [{
|
|
65
|
-
type: Input
|
|
66
|
-
}] } });
|
|
67
|
-
|
|
68
|
-
/**
|
|
69
|
-
* @deprecated use {@link TuiDrawer} instead
|
|
70
|
-
*/
|
|
71
|
-
class TuiSidebarComponent {
|
|
72
|
-
constructor() {
|
|
73
|
-
this.directive = inject(TuiSidebarDirective);
|
|
74
|
-
this.options = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED));
|
|
75
|
-
this.left = { ...this.options, value: 'left' };
|
|
76
|
-
this.right = { ...this.options, value: 'right' };
|
|
77
|
-
}
|
|
78
|
-
ngDoCheck() {
|
|
79
|
-
this.directive.check();
|
|
80
|
-
}
|
|
81
|
-
get animation() {
|
|
82
|
-
return this.direction === 'left' ? this.left : this.right;
|
|
83
|
-
}
|
|
84
|
-
get direction() {
|
|
85
|
-
return this.directive.direction;
|
|
86
|
-
}
|
|
87
|
-
get content() {
|
|
88
|
-
return this.directive.content;
|
|
89
|
-
}
|
|
90
|
-
get autoWidth() {
|
|
91
|
-
return this.directive.autoWidth;
|
|
92
|
-
}
|
|
93
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
94
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiSidebarComponent, isStandalone: true, selector: "aside[tuiSidebar]", host: { properties: { "class": "\"t-\" + direction", "@tuiSlideIn": "animation" } }, ngImport: i0, template: "<div\n tuiActiveZone\n class=\"t-wrapper\"\n [class.t-wrapper_auto-width]=\"autoWidth\"\n>\n <ng-container *polymorpheusOutlet=\"content as text\">\n {{ text }}\n </ng-container>\n</div>\n", styles: [":host{position:fixed;top:0;left:0;inline-size:100%;block-size:100%;display:flex}:host:before,:host:after{position:absolute;top:0;left:0;inline-size:100%;content:\"\";block-size:100%;background:#00000061;animation:tuiFadeIn var(--tui-duration)}:host:before{left:-100%;inline-size:200%}:host:after{left:100%}:host.ng-animating:before,:host.ng-animating:after{opacity:0;transition:opacity var(--tui-duration)}:host.t-right{justify-content:flex-end}:host.t-left{justify-content:flex-start}.t-wrapper{position:relative;display:flex;flex-direction:column;background:var(--tui-background-base);box-shadow:0 10rem var(--tui-background-base);inline-size:17.25rem}.t-wrapper_auto-width{inline-size:auto}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiActiveZone, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }], animations: [tuiSlideIn], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
95
|
-
}
|
|
96
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiSidebarComponent, decorators: [{
|
|
97
|
-
type: Component,
|
|
98
|
-
args: [{ selector: 'aside[tuiSidebar]', imports: [PolymorpheusOutlet, TuiActiveZone], changeDetection: ChangeDetectionStrategy.OnPush, animations: [tuiSlideIn], host: {
|
|
99
|
-
'[class]': '"t-" + direction',
|
|
100
|
-
'[@tuiSlideIn]': 'animation',
|
|
101
|
-
}, template: "<div\n tuiActiveZone\n class=\"t-wrapper\"\n [class.t-wrapper_auto-width]=\"autoWidth\"\n>\n <ng-container *polymorpheusOutlet=\"content as text\">\n {{ text }}\n </ng-container>\n</div>\n", styles: [":host{position:fixed;top:0;left:0;inline-size:100%;block-size:100%;display:flex}:host:before,:host:after{position:absolute;top:0;left:0;inline-size:100%;content:\"\";block-size:100%;background:#00000061;animation:tuiFadeIn var(--tui-duration)}:host:before{left:-100%;inline-size:200%}:host:after{left:100%}:host.ng-animating:before,:host.ng-animating:after{opacity:0;transition:opacity var(--tui-duration)}:host.t-right{justify-content:flex-end}:host.t-left{justify-content:flex-start}.t-wrapper{position:relative;display:flex;flex-direction:column;background:var(--tui-background-base);box-shadow:0 10rem var(--tui-background-base);inline-size:17.25rem}.t-wrapper_auto-width{inline-size:auto}\n"] }]
|
|
102
|
-
}] });
|
|
103
|
-
|
|
104
|
-
/**
|
|
105
|
-
* @deprecated use {@link TuiDrawer} instead
|
|
106
|
-
*/
|
|
107
|
-
const TuiSidebar = [TuiSidebarComponent, TuiSidebarDirective];
|
|
108
|
-
|
|
109
|
-
/**
|
|
110
|
-
* Generated bundle index. Do not edit.
|
|
111
|
-
*/
|
|
112
|
-
|
|
113
|
-
export { TuiSidebar, TuiSidebarComponent, TuiSidebarDirective };
|
|
114
|
-
//# sourceMappingURL=taiga-ui-addon-mobile-directives-sidebar.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"taiga-ui-addon-mobile-directives-sidebar.mjs","sources":["../../../projects/addon-mobile/directives/sidebar/sidebar.directive.ts","../../../projects/addon-mobile/directives/sidebar/sidebar.component.ts","../../../projects/addon-mobile/directives/sidebar/sidebar.template.html","../../../projects/addon-mobile/directives/sidebar/sidebar.ts","../../../projects/addon-mobile/directives/sidebar/taiga-ui-addon-mobile-directives-sidebar.ts"],"sourcesContent":["import {\n type ComponentRef,\n Directive,\n inject,\n INJECTOR,\n Input,\n type OnDestroy,\n TemplateRef,\n} from '@angular/core';\nimport {TuiPopupService} from '@taiga-ui/core/directives/popup';\nimport {type TuiHorizontalDirection} from '@taiga-ui/core/types';\nimport {PolymorpheusComponent, PolymorpheusTemplate} from '@taiga-ui/polymorpheus';\n\nimport {TuiSidebarComponent} from './sidebar.component';\n\n/**\n * @deprecated use {@link TuiDrawer} instead\n */\n@Directive({\n standalone: true,\n selector: '[tuiSidebar]',\n})\nexport class TuiSidebarDirective<T = Record<string, unknown>>\n extends PolymorpheusTemplate<T>\n implements OnDestroy\n{\n private readonly injector = inject(INJECTOR);\n private readonly service = inject(TuiPopupService);\n\n private readonly component = new PolymorpheusComponent(\n TuiSidebarComponent,\n this.injector,\n );\n\n private sidebarRef: ComponentRef<TuiSidebarComponent> | null = null;\n\n @Input('tuiSidebarDirection')\n public direction: TuiHorizontalDirection = 'left';\n\n @Input('tuiSidebarAutoWidth')\n public autoWidth = false;\n\n public readonly content = inject(TemplateRef<T>);\n\n @Input()\n public set tuiSidebar(open: boolean) {\n if (open) {\n this.show();\n } else {\n this.hide();\n }\n }\n\n public ngOnDestroy(): void {\n this.hide();\n }\n\n private show(): void {\n if (this.sidebarRef !== null) {\n return;\n }\n\n this.sidebarRef = this.service.add(this.component);\n this.sidebarRef.changeDetectorRef.detectChanges();\n }\n\n private hide(): void {\n if (this.sidebarRef === null) {\n return;\n }\n\n this.service.remove(this.sidebarRef);\n this.sidebarRef = null;\n }\n}\n","import {type AnimationOptions} from '@angular/animations';\nimport {ChangeDetectionStrategy, Component, type DoCheck, inject} from '@angular/core';\nimport {TuiActiveZone} from '@taiga-ui/cdk/directives/active-zone';\nimport {tuiSlideIn} from '@taiga-ui/core/animations';\nimport {TUI_ANIMATIONS_SPEED} from '@taiga-ui/core/tokens';\nimport {type TuiHorizontalDirection} from '@taiga-ui/core/types';\nimport {tuiToAnimationOptions} from '@taiga-ui/core/utils/miscellaneous';\nimport {type PolymorpheusContent, PolymorpheusOutlet} from '@taiga-ui/polymorpheus';\n\nimport {TuiSidebarDirective} from './sidebar.directive';\n\n/**\n * @deprecated use {@link TuiDrawer} instead\n */\n@Component({\n selector: 'aside[tuiSidebar]',\n imports: [PolymorpheusOutlet, TuiActiveZone],\n templateUrl: './sidebar.template.html',\n styleUrls: ['./sidebar.style.less'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n animations: [tuiSlideIn],\n host: {\n '[class]': '\"t-\" + direction',\n '[@tuiSlideIn]': 'animation',\n },\n})\nexport class TuiSidebarComponent implements DoCheck {\n private readonly directive = inject(TuiSidebarDirective);\n private readonly options = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED));\n private readonly left = {...this.options, value: 'left'};\n private readonly right = {...this.options, value: 'right'};\n\n public ngDoCheck(): void {\n this.directive.check();\n }\n\n protected get animation(): AnimationOptions {\n return this.direction === 'left' ? this.left : this.right;\n }\n\n protected get direction(): TuiHorizontalDirection {\n return this.directive.direction;\n }\n\n protected get content(): PolymorpheusContent {\n return this.directive.content;\n }\n\n protected get autoWidth(): boolean {\n return this.directive.autoWidth;\n }\n}\n","<div\n tuiActiveZone\n class=\"t-wrapper\"\n [class.t-wrapper_auto-width]=\"autoWidth\"\n>\n <ng-container *polymorpheusOutlet=\"content as text\">\n {{ text }}\n </ng-container>\n</div>\n","import {TuiSidebarComponent} from './sidebar.component';\nimport {TuiSidebarDirective} from './sidebar.directive';\n\n/**\n * @deprecated use {@link TuiDrawer} instead\n */\nexport const TuiSidebar = [TuiSidebarComponent, TuiSidebarDirective] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|