@taiga-ui/addon-mobile 4.52.0-canary.763e67d → 4.52.0-canary.7c53ccc
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/bottom-sheet/bottom-sheet.component.d.ts +3 -3
- package/components/mobile-calendar/calendar-date-stream.d.ts +6 -0
- package/components/mobile-calendar/index.d.ts +1 -0
- package/components/mobile-calendar/mobile-calendar.component.d.ts +15 -18
- package/components/mobile-calendar/mobile-calendar.strategy.d.ts +1 -2
- package/components/mobile-calendar-dropdown/mobile-calendar-dropdown.component.d.ts +6 -6
- package/components/mobile-calendar-dropdown/mobile-calendar-dropdown.directive.d.ts +6 -6
- package/components/pull-to-refresh/pull-to-refresh.component.d.ts +8 -7
- package/components/swipe-action/swipe-actions-auto-close.directive.d.ts +2 -2
- package/components/tab-bar/tab-bar-item.component.d.ts +3 -3
- package/components/tab-bar/tab-bar.component.d.ts +4 -7
- package/directives/elastic-sticky/elastic-sticky.directive.d.ts +1 -2
- package/directives/ripple/ripple.directive.d.ts +2 -2
- package/directives/touchable/touchable.directive.d.ts +5 -5
- package/fesm2022/taiga-ui-addon-mobile-components-bottom-sheet.mjs +11 -19
- package/fesm2022/taiga-ui-addon-mobile-components-bottom-sheet.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-mobile-calendar-dropdown.mjs +23 -31
- 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 +2 -2
- package/fesm2022/taiga-ui-addon-mobile-components-mobile-calendar.mjs +102 -123
- package/fesm2022/taiga-ui-addon-mobile-components-mobile-calendar.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-pull-to-refresh.mjs +29 -39
- package/fesm2022/taiga-ui-addon-mobile-components-pull-to-refresh.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-sheet-dialog.mjs +2 -2
- package/fesm2022/taiga-ui-addon-mobile-components-sheet-dialog.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-swipe-action.mjs +7 -14
- package/fesm2022/taiga-ui-addon-mobile-components-swipe-action.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-tab-bar.mjs +23 -41
- package/fesm2022/taiga-ui-addon-mobile-components-tab-bar.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-directives-elastic-sticky.mjs +4 -6
- package/fesm2022/taiga-ui-addon-mobile-directives-elastic-sticky.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-directives-ripple.mjs +5 -7
- package/fesm2022/taiga-ui-addon-mobile-directives-ripple.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-directives-touchable.mjs +16 -22
- package/fesm2022/taiga-ui-addon-mobile-directives-touchable.mjs.map +1 -1
- package/package.json +9 -9
- package/styles/android/app-bar.less +5 -1
- package/styles/common/badge-notification.less +1 -1
- package/styles/common/badge.less +2 -2
- package/styles/common/block-status.less +1 -1
- package/styles/common/button.less +1 -1
- package/styles/common/header.less +1 -1
- package/styles/common/message.less +1 -1
- package/styles/common/segmented.less +1 -1
- package/styles/common/title.less +0 -1
- package/styles/common/toast.less +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, ChangeDetectorRef, ChangeDetectionStrategy, Component,
|
|
2
|
+
import { inject, ChangeDetectorRef, ChangeDetectionStrategy, Component, input, Directive } from '@angular/core';
|
|
3
3
|
import { WaResizeObserver } from '@ng-web-apis/resize-observer';
|
|
4
4
|
import { tuiInjectElement, tuiGetActualTarget } from '@taiga-ui/cdk/utils/dom';
|
|
5
5
|
|
|
@@ -17,26 +17,21 @@ class TuiSwipeActions {
|
|
|
17
17
|
}
|
|
18
18
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiSwipeActions, decorators: [{
|
|
19
19
|
type: Component,
|
|
20
|
-
args: [{ selector: 'tui-swipe-actions', imports: [WaResizeObserver], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
21
|
-
'[style.--t-actions-width]': 'actionsWidth',
|
|
22
|
-
}, template: "<div class=\"t-content\">\n <ng-content />\n</div>\n\n<div\n class=\"t-actions\"\n (waResizeObserver)=\"$event[0] && onResize($event[0])\"\n>\n <ng-content select=\"[tuiSwipeAction]\" />\n</div>\n", styles: [":host{scrollbar-width:none;-ms-overflow-style:none;--tui-action-gap: 24;--tui-actions-padding: .5rem;--tui-item-size: 44;--t-x: calc(50% + 50% * var(--tui-inline));display:flex;inline-size:stretch;align-items:center;overflow-x:scroll;overflow-y:hidden;scroll-snap-type:x mandatory;perspective:1px;perspective-origin:calc(var(--t-x) + var(--tui-inline) * (calc(1px * var(--tui-item-size) / 2) + var(--tui-actions-padding)))}:host::-webkit-scrollbar,:host::-webkit-scrollbar-thumb{display:none}.t-content{scroll-snap-align:start;flex-shrink:0;inline-size:100%}.t-actions{display:flex;gap:calc(1px * var(--tui-action-gap));padding:0 1rem 0 var(--tui-actions-padding);scroll-snap-align:start;align-items:center;transform-style:preserve-3d;pointer-events:none;transform:translateZ(-.00001px)}.t-actions:empty{display:none}::ng-deep .t-actions>*{pointer-events:auto}::ng-deep .t-actions>*:nth-child(2){--t-distance: calc(var(--tui-item-size) + var(--tui-action-gap)) * 1 ;--t-factor: calc((var(--t-actions-width) - var(--t-distance)) / var(--t-actions-width));--t-scale: calc(1 / var(--t-factor));--t-translate: calc(1px * (1 - 1 / var(--t-factor)));transform:translate3d(calc(calc((-100% * var(--tui-inline) - calc(1px * var(--tui-inline) * var(--tui-action-gap))) * (2 - 1)) / var(--t-scale)),0,var(--t-translate));scale:var(--t-scale)}::ng-deep .t-actions>*:nth-child(3){--t-distance: calc(var(--tui-item-size) + var(--tui-action-gap)) * 2 ;--t-factor: calc((var(--t-actions-width) - var(--t-distance)) / var(--t-actions-width));--t-scale: calc(1 / var(--t-factor));--t-translate: calc(1px * (1 - 1 / var(--t-factor)));transform:translate3d(calc(calc((-100% * var(--tui-inline) - calc(1px * var(--tui-inline) * var(--tui-action-gap))) * (3 - 1)) / var(--t-scale)),0,var(--t-translate));scale:var(--t-scale)}::ng-deep .t-actions>*:nth-child(4){--t-distance: calc(var(--tui-item-size) + var(--tui-action-gap)) * 3 ;--t-factor: calc((var(--t-actions-width) - var(--t-distance)) / var(--t-actions-width));--t-scale: calc(1 / var(--t-factor));--t-translate: calc(1px * (1 - 1 / var(--t-factor)));transform:translate3d(calc(calc((-100% * var(--tui-inline) - calc(1px * var(--tui-inline) * var(--tui-action-gap))) * (4 - 1)) / var(--t-scale)),0,var(--t-translate));scale:var(--t-scale)}::ng-deep .t-actions>*:nth-child(5){--t-distance: calc(var(--tui-item-size) + var(--tui-action-gap)) * 4 ;--t-factor: calc((var(--t-actions-width) - var(--t-distance)) / var(--t-actions-width));--t-scale: calc(1 / var(--t-factor));--t-translate: calc(1px * (1 - 1 / var(--t-factor)));transform:translate3d(calc(calc((-100% * var(--tui-inline) - calc(1px * var(--tui-inline) * var(--tui-action-gap))) * (5 - 1)) / var(--t-scale)),0,var(--t-translate));scale:var(--t-scale)}::ng-deep .t-actions>*:nth-child(6){--t-distance: calc(var(--tui-item-size) + var(--tui-action-gap)) * 5 ;--t-factor: calc((var(--t-actions-width) - var(--t-distance)) / var(--t-actions-width));--t-scale: calc(1 / var(--t-factor));--t-translate: calc(1px * (1 - 1 / var(--t-factor)));transform:translate3d(calc(calc((-100% * var(--tui-inline) - calc(1px * var(--tui-inline) * var(--tui-action-gap))) * (6 - 1)) / var(--t-scale)),0,var(--t-translate));scale:var(--t-scale)}@media (hover: hover) and (pointer: fine){.t-actions{display:none}}\n"] }]
|
|
20
|
+
args: [{ selector: 'tui-swipe-actions', imports: [WaResizeObserver], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[style.--t-actions-width]': 'actionsWidth' }, template: "<div class=\"t-content\">\n <ng-content />\n</div>\n\n<div\n class=\"t-actions\"\n (waResizeObserver)=\"$event[0] && onResize($event[0])\"\n>\n <ng-content select=\"[tuiSwipeAction]\" />\n</div>\n", styles: [":host{scrollbar-width:none;-ms-overflow-style:none;--tui-action-gap: 24;--tui-actions-padding: .5rem;--tui-item-size: 44;--t-x: calc(50% + 50% * var(--tui-inline));display:flex;inline-size:stretch;align-items:center;overflow-x:scroll;overflow-y:hidden;scroll-snap-type:x mandatory;perspective:1px;perspective-origin:calc(var(--t-x) + var(--tui-inline) * (calc(1px * var(--tui-item-size) / 2) + var(--tui-actions-padding)))}:host::-webkit-scrollbar,:host::-webkit-scrollbar-thumb{display:none}.t-content{scroll-snap-align:start;flex-shrink:0;inline-size:100%}.t-actions{display:flex;gap:calc(1px * var(--tui-action-gap));padding:0 1rem 0 var(--tui-actions-padding);scroll-snap-align:start;align-items:center;transform-style:preserve-3d;pointer-events:none;transform:translateZ(-.00001px)}.t-actions:empty{display:none}::ng-deep .t-actions>*{pointer-events:auto}::ng-deep .t-actions>*:nth-child(2){--t-distance: calc(var(--tui-item-size) + var(--tui-action-gap)) * 1 ;--t-factor: calc((var(--t-actions-width) - var(--t-distance)) / var(--t-actions-width));--t-scale: calc(1 / var(--t-factor));--t-translate: calc(1px * (1 - 1 / var(--t-factor)));transform:translate3d(calc(calc((-100% * var(--tui-inline) - calc(1px * var(--tui-inline) * var(--tui-action-gap))) * (2 - 1)) / var(--t-scale)),0,var(--t-translate));scale:var(--t-scale)}::ng-deep .t-actions>*:nth-child(3){--t-distance: calc(var(--tui-item-size) + var(--tui-action-gap)) * 2 ;--t-factor: calc((var(--t-actions-width) - var(--t-distance)) / var(--t-actions-width));--t-scale: calc(1 / var(--t-factor));--t-translate: calc(1px * (1 - 1 / var(--t-factor)));transform:translate3d(calc(calc((-100% * var(--tui-inline) - calc(1px * var(--tui-inline) * var(--tui-action-gap))) * (3 - 1)) / var(--t-scale)),0,var(--t-translate));scale:var(--t-scale)}::ng-deep .t-actions>*:nth-child(4){--t-distance: calc(var(--tui-item-size) + var(--tui-action-gap)) * 3 ;--t-factor: calc((var(--t-actions-width) - var(--t-distance)) / var(--t-actions-width));--t-scale: calc(1 / var(--t-factor));--t-translate: calc(1px * (1 - 1 / var(--t-factor)));transform:translate3d(calc(calc((-100% * var(--tui-inline) - calc(1px * var(--tui-inline) * var(--tui-action-gap))) * (4 - 1)) / var(--t-scale)),0,var(--t-translate));scale:var(--t-scale)}::ng-deep .t-actions>*:nth-child(5){--t-distance: calc(var(--tui-item-size) + var(--tui-action-gap)) * 4 ;--t-factor: calc((var(--t-actions-width) - var(--t-distance)) / var(--t-actions-width));--t-scale: calc(1 / var(--t-factor));--t-translate: calc(1px * (1 - 1 / var(--t-factor)));transform:translate3d(calc(calc((-100% * var(--tui-inline) - calc(1px * var(--tui-inline) * var(--tui-action-gap))) * (5 - 1)) / var(--t-scale)),0,var(--t-translate));scale:var(--t-scale)}::ng-deep .t-actions>*:nth-child(6){--t-distance: calc(var(--tui-item-size) + var(--tui-action-gap)) * 5 ;--t-factor: calc((var(--t-actions-width) - var(--t-distance)) / var(--t-actions-width));--t-scale: calc(1 / var(--t-factor));--t-translate: calc(1px * (1 - 1 / var(--t-factor)));transform:translate3d(calc(calc((-100% * var(--tui-inline) - calc(1px * var(--tui-inline) * var(--tui-action-gap))) * (6 - 1)) / var(--t-scale)),0,var(--t-translate));scale:var(--t-scale)}@media (hover: hover) and (pointer: fine){.t-actions{display:none}}\n"] }]
|
|
23
21
|
}] });
|
|
24
22
|
|
|
25
23
|
class TuiSwipeActionsAutoClose {
|
|
26
24
|
constructor() {
|
|
27
25
|
this.el = tuiInjectElement();
|
|
28
|
-
this.autoClose = true;
|
|
26
|
+
this.autoClose = input(true);
|
|
29
27
|
}
|
|
30
28
|
handleEvent(event) {
|
|
31
|
-
if (this.autoClose !== false && !this.el.contains(tuiGetActualTarget(event))) {
|
|
32
|
-
this.el.scrollTo({
|
|
33
|
-
left: 0,
|
|
34
|
-
behavior: 'smooth',
|
|
35
|
-
});
|
|
29
|
+
if (this.autoClose() !== false && !this.el.contains(tuiGetActualTarget(event))) {
|
|
30
|
+
this.el.scrollTo({ left: 0, behavior: 'smooth' });
|
|
36
31
|
}
|
|
37
32
|
}
|
|
38
33
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiSwipeActionsAutoClose, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
39
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
34
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiSwipeActionsAutoClose, isStandalone: true, selector: "tui-swipe-actions[autoClose]", inputs: { autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:pointerdown.zoneless": "handleEvent($event)", "document:focusin.zoneless": "handleEvent($event)" } }, ngImport: i0 }); }
|
|
40
35
|
}
|
|
41
36
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiSwipeActionsAutoClose, decorators: [{
|
|
42
37
|
type: Directive,
|
|
@@ -47,9 +42,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
47
42
|
'(document:focusin.zoneless)': 'handleEvent($event)',
|
|
48
43
|
},
|
|
49
44
|
}]
|
|
50
|
-
}]
|
|
51
|
-
type: Input
|
|
52
|
-
}] } });
|
|
45
|
+
}] });
|
|
53
46
|
|
|
54
47
|
/**
|
|
55
48
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"taiga-ui-addon-mobile-components-swipe-action.mjs","sources":["../../../projects/addon-mobile/components/swipe-action/swipe-actions.component.ts","../../../projects/addon-mobile/components/swipe-action/swipe-actions.template.html","../../../projects/addon-mobile/components/swipe-action/swipe-actions-auto-close.directive.ts","../../../projects/addon-mobile/components/swipe-action/taiga-ui-addon-mobile-components-swipe-action.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n inject,\n} from '@angular/core';\nimport {WaResizeObserver} from '@ng-web-apis/resize-observer';\n\n@Component({\n selector: 'tui-swipe-actions',\n imports: [WaResizeObserver],\n templateUrl: './swipe-actions.template.html',\n styleUrl: './swipe-actions.style.less',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {
|
|
1
|
+
{"version":3,"file":"taiga-ui-addon-mobile-components-swipe-action.mjs","sources":["../../../projects/addon-mobile/components/swipe-action/swipe-actions.component.ts","../../../projects/addon-mobile/components/swipe-action/swipe-actions.template.html","../../../projects/addon-mobile/components/swipe-action/swipe-actions-auto-close.directive.ts","../../../projects/addon-mobile/components/swipe-action/taiga-ui-addon-mobile-components-swipe-action.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n inject,\n} from '@angular/core';\nimport {WaResizeObserver} from '@ng-web-apis/resize-observer';\n\n@Component({\n selector: 'tui-swipe-actions',\n imports: [WaResizeObserver],\n templateUrl: './swipe-actions.template.html',\n styleUrl: './swipe-actions.style.less',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {'[style.--t-actions-width]': 'actionsWidth'},\n})\nexport class TuiSwipeActions {\n protected actionsWidth = 0;\n protected readonly cdr = inject(ChangeDetectorRef);\n\n protected onResize({target}: ResizeObserverEntry): void {\n this.actionsWidth = target.clientWidth;\n this.cdr.detectChanges();\n }\n}\n","<div class=\"t-content\">\n <ng-content />\n</div>\n\n<div\n class=\"t-actions\"\n (waResizeObserver)=\"$event[0] && onResize($event[0])\"\n>\n <ng-content select=\"[tuiSwipeAction]\" />\n</div>\n","import {Directive, input} from '@angular/core';\nimport {tuiGetActualTarget, tuiInjectElement} from '@taiga-ui/cdk/utils/dom';\n\n@Directive({\n selector: 'tui-swipe-actions[autoClose]',\n host: {\n '(document:pointerdown.zoneless)': 'handleEvent($event)',\n '(document:focusin.zoneless)': 'handleEvent($event)',\n },\n})\nexport class TuiSwipeActionsAutoClose {\n private readonly el = tuiInjectElement();\n\n public readonly autoClose = input<boolean | string>(true);\n\n protected handleEvent(event: Event): void {\n if (this.autoClose() !== false && !this.el.contains(tuiGetActualTarget(event))) {\n this.el.scrollTo({left: 0, behavior: 'smooth'});\n }\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAgBa,eAAe,CAAA;AAR5B,IAAA,WAAA,GAAA;QASc,IAAY,CAAA,YAAA,GAAG,CAAC;AACP,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAMrD;IAJa,QAAQ,CAAC,EAAC,MAAM,EAAsB,EAAA;AAC5C,QAAA,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,WAAW;AACtC,QAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE;;+GANnB,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,yBAAA,EAAA,cAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChB5B,kNAUA,EAAA,MAAA,EAAA,CAAA,2tGAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDAc,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,KAAA,CAAA,EAAA,OAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAMjB,eAAe,EAAA,UAAA,EAAA,CAAA;kBAR3B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EACpB,OAAA,EAAA,CAAC,gBAAgB,CAAC,EAGV,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACzC,IAAA,EAAA,EAAC,2BAA2B,EAAE,cAAc,EAAC,EAAA,QAAA,EAAA,kNAAA,EAAA,MAAA,EAAA,CAAA,2tGAAA,CAAA,EAAA;;;MEJ1C,wBAAwB,CAAA;AAPrC,IAAA,WAAA,GAAA;QAQqB,IAAE,CAAA,EAAA,GAAG,gBAAgB,EAAE;AAExB,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAmB,IAAI,CAAC;AAO5D;AALa,IAAA,WAAW,CAAC,KAAY,EAAA;QAC9B,IAAI,IAAI,CAAC,SAAS,EAAE,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,EAAE;AAC5E,YAAA,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAC,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAC,CAAC;;;+GAP9C,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAxB,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,8BAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,+BAAA,EAAA,qBAAA,EAAA,2BAAA,EAAA,qBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAAxB,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAPpC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,8BAA8B;AACxC,oBAAA,IAAI,EAAE;AACF,wBAAA,iCAAiC,EAAE,qBAAqB;AACxD,wBAAA,6BAA6B,EAAE,qBAAqB;AACvD,qBAAA;AACJ,iBAAA;;;ACTD;;AAEG;;;;"}
|
|
@@ -1,79 +1,61 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
3
|
-
import { EMPTY_QUERY } from '@taiga-ui/cdk/constants';
|
|
4
|
-
import { tuiIsElement, tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
|
|
2
|
+
import { input, ChangeDetectionStrategy, Component, contentChildren, ElementRef, model, inject, DestroyRef, Directive } from '@angular/core';
|
|
5
3
|
import { TuiAnimated } from '@taiga-ui/cdk/directives/animated';
|
|
6
4
|
import { TuiIcon } from '@taiga-ui/core/components/icon';
|
|
7
|
-
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
8
5
|
import { RouterLinkActive } from '@angular/router';
|
|
9
|
-
import {
|
|
10
|
-
import { EMPTY
|
|
6
|
+
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
|
|
7
|
+
import { EMPTY } from 'rxjs';
|
|
11
8
|
|
|
12
9
|
class TuiTabBarItem {
|
|
13
10
|
constructor() {
|
|
14
|
-
this.icon = '';
|
|
15
|
-
this.badge =
|
|
11
|
+
this.icon = input('');
|
|
12
|
+
this.badge = input();
|
|
16
13
|
}
|
|
17
14
|
format(value) {
|
|
18
15
|
return value > 999 ? '999+' : String(value);
|
|
19
16
|
}
|
|
20
17
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTabBarItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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 @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: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: TuiAnimated, selector: "[tuiAnimated]" }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
18
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiTabBarItem, isStandalone: true, selector: "button[tuiTabBarItem], a[tuiTabBarItem]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, 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: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: TuiAnimated, selector: "[tuiAnimated]" }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
22
19
|
}
|
|
23
20
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTabBarItem, decorators: [{
|
|
24
21
|
type: Component,
|
|
25
|
-
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: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"] }]
|
|
26
|
-
}]
|
|
27
|
-
type: Input
|
|
28
|
-
}], badge: [{
|
|
29
|
-
type: Input
|
|
30
|
-
}] } });
|
|
22
|
+
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: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"] }]
|
|
23
|
+
}] });
|
|
31
24
|
|
|
32
25
|
class TuiTabBarComponent {
|
|
33
26
|
constructor() {
|
|
34
|
-
this.tabs =
|
|
35
|
-
this.quantity = 4;
|
|
36
|
-
this.activeItemIndex = NaN;
|
|
37
|
-
this.activeItemIndexChange = new EventEmitter();
|
|
27
|
+
this.tabs = contentChildren(TuiTabBarItem, { read: ElementRef });
|
|
28
|
+
this.quantity = input(4);
|
|
29
|
+
this.activeItemIndex = model(NaN);
|
|
38
30
|
}
|
|
39
31
|
setActive(tab) {
|
|
40
|
-
|
|
41
|
-
this.updateIndex(this.tabs.toArray().findIndex(({ nativeElement }) => nativeElement === tab));
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
get style() {
|
|
45
|
-
return `--tui-tab-${this.activeItemIndex + 1}: var(--tui-active-color)`;
|
|
32
|
+
this.updateIndex(this.tabs().findIndex((el) => el.nativeElement === tab));
|
|
46
33
|
}
|
|
47
34
|
updateIndex(index) {
|
|
48
|
-
this.activeItemIndex
|
|
49
|
-
this.activeItemIndexChange.emit(index);
|
|
35
|
+
this.activeItemIndex.set(index);
|
|
50
36
|
}
|
|
51
37
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTabBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
52
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiTabBarComponent, isStandalone: true, selector: "nav[tuiTabBar]", inputs: { quantity: "quantity", activeItemIndex: "activeItemIndex" }, outputs: {
|
|
38
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";background:var(--tui-background-base-alt);box-shadow:inset 0 1px var(--tui-border-normal);opacity:.8}[tuiTheme=dark] :host:before{opacity:.7}.t-skeletons{display:none;block-size:100%;inline-size:100%;justify-content:space-around}.t-skeletons:first-child{display:flex}.t-skeleton{display:flex;flex-direction:column;align-items:center;justify-content:center;animation: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 }); }
|
|
53
39
|
}
|
|
54
40
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTabBarComponent, decorators: [{
|
|
55
41
|
type: Component,
|
|
56
42
|
args: [{ selector: 'nav[tuiTabBar]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
57
|
-
'[style]': '
|
|
43
|
+
'[style]': '`--tui-tab-${this.activeItemIndex() + 1}: var(--tui-active-color)`',
|
|
58
44
|
'(click)': 'setActive($event.target)',
|
|
59
|
-
}, 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;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";background:var(--tui-background-base-alt);box-shadow:inset 0 1px var(--tui-border-normal);opacity:.8}[tuiTheme=dark] :host:before{opacity:.7}.t-skeletons{display:none;block-size:100%;inline-size:100%;justify-content:space-around}.t-skeletons:first-child{display:flex}.t-skeleton{display:flex;flex-direction:column;align-items:center;justify-content:center;animation: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"] }]
|
|
60
|
-
}]
|
|
61
|
-
type: ContentChildren,
|
|
62
|
-
args: [forwardRef(() => TuiTabBarItem), { read: ElementRef }]
|
|
63
|
-
}], quantity: [{
|
|
64
|
-
type: Input
|
|
65
|
-
}], activeItemIndex: [{
|
|
66
|
-
type: Input
|
|
67
|
-
}], activeItemIndexChange: [{
|
|
68
|
-
type: Output
|
|
69
|
-
}] } });
|
|
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;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";background:var(--tui-background-base-alt);box-shadow:inset 0 1px var(--tui-border-normal);opacity:.8}[tuiTheme=dark] :host:before{opacity:.7}.t-skeletons{display:none;block-size:100%;inline-size:100%;justify-content:space-around}.t-skeletons:first-child{display:flex}.t-skeleton{display:flex;flex-direction:column;align-items:center;justify-content:center;animation: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
|
+
}] });
|
|
70
47
|
|
|
71
48
|
class TuiTabBarItemDirective {
|
|
72
49
|
constructor() {
|
|
73
50
|
const tabs = inject(TuiTabBarComponent);
|
|
74
51
|
const el = tuiInjectElement();
|
|
75
52
|
const link = inject(RouterLinkActive, { optional: true })?.isActiveChange || EMPTY;
|
|
76
|
-
|
|
53
|
+
const sub = link.subscribe((value) => {
|
|
54
|
+
if (value) {
|
|
55
|
+
tabs.setActive(el);
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
inject(DestroyRef).onDestroy(() => sub.unsubscribe());
|
|
77
59
|
}
|
|
78
60
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTabBarItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
79
61
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiTabBarItemDirective, isStandalone: true, selector: "[tuiTabBarItem][routerLinkActive]", ngImport: i0 }); }
|
|
@@ -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,
|
|
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(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({\n selector: '[tuiTabBarItem][routerLinkActive]',\n})\nexport class TuiTabBarItemDirective {\n constructor() {\n const tabs = inject(TuiTabBarComponent);\n const el = tuiInjectElement();\n const link = inject(RouterLinkActive, {optional: true})?.isActiveChange || EMPTY;\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,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { afterNextRender, inject, INJECTOR, DestroyRef, NgZone, Injectable,
|
|
3
|
-
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
2
|
+
import { afterNextRender, inject, INJECTOR, DestroyRef, NgZone, Injectable, Directive } from '@angular/core';
|
|
3
|
+
import { takeUntilDestroyed, outputFromObservable } from '@angular/core/rxjs-interop';
|
|
4
4
|
import { tuiScrollFrom, tuiZoneOptimized } from '@taiga-ui/cdk/observables';
|
|
5
5
|
import { tuiInjectElement, tuiGetElementOffset } from '@taiga-ui/cdk/utils/dom';
|
|
6
6
|
import { TUI_SCROLL_REF, SCROLL_REF_SELECTOR } from '@taiga-ui/core/components/scrollbar';
|
|
@@ -52,7 +52,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
52
52
|
|
|
53
53
|
class TuiElasticSticky {
|
|
54
54
|
constructor() {
|
|
55
|
-
this.tuiElasticSticky = inject(TuiElasticStickyService);
|
|
55
|
+
this.tuiElasticSticky = outputFromObservable(inject(TuiElasticStickyService));
|
|
56
56
|
}
|
|
57
57
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiElasticSticky, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
58
58
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiElasticSticky, isStandalone: true, selector: "[tuiElasticSticky]", outputs: { tuiElasticSticky: "tuiElasticSticky" }, providers: [TuiElasticStickyService], exportAs: ["tuiElasticSticky"], ngImport: i0 }); }
|
|
@@ -64,9 +64,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
64
64
|
providers: [TuiElasticStickyService],
|
|
65
65
|
exportAs: 'tuiElasticSticky',
|
|
66
66
|
}]
|
|
67
|
-
}]
|
|
68
|
-
type: Output
|
|
69
|
-
}] } });
|
|
67
|
+
}] });
|
|
70
68
|
|
|
71
69
|
/**
|
|
72
70
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"taiga-ui-addon-mobile-directives-elastic-sticky.mjs","sources":["../../../projects/addon-mobile/directives/elastic-sticky/elastic-sticky.service.ts","../../../projects/addon-mobile/directives/elastic-sticky/elastic-sticky.directive.ts","../../../projects/addon-mobile/directives/elastic-sticky/taiga-ui-addon-mobile-directives-elastic-sticky.ts"],"sourcesContent":["import {\n afterNextRender,\n DestroyRef,\n inject,\n Injectable,\n INJECTOR,\n NgZone,\n} from '@angular/core';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\nimport {tuiScrollFrom, tuiZoneOptimized} from '@taiga-ui/cdk/observables';\nimport {tuiGetElementOffset, tuiInjectElement} from '@taiga-ui/cdk/utils/dom';\nimport {SCROLL_REF_SELECTOR, TUI_SCROLL_REF} from '@taiga-ui/core/components/scrollbar';\nimport {distinctUntilChanged, map, Observable, scan, Subscription} from 'rxjs';\n\n@Injectable()\nexport class TuiElasticStickyService extends Observable<number> {\n private readonly injector = inject(INJECTOR);\n private readonly el = tuiInjectElement();\n private readonly scrollRef = inject(TUI_SCROLL_REF).nativeElement;\n private readonly destroyRef = inject(DestroyRef);\n private readonly zone = inject(NgZone);\n\n constructor() {\n super((subscriber) => {\n const subscription = new Subscription();\n\n afterNextRender(\n () => {\n const teardown = tuiScrollFrom(this.host)\n .pipe(\n scan(\n (top) => (this.pinned ? top : this.offsetTop),\n this.offsetTop,\n ),\n map((top) =>\n Math.max(\n 1 -\n Math.max(\n Math.round(this.host.scrollTop) - top,\n 0,\n ) /\n this.el.offsetHeight,\n 0,\n ),\n ),\n distinctUntilChanged(),\n tuiZoneOptimized(this.zone),\n takeUntilDestroyed(this.destroyRef),\n )\n .subscribe(subscriber);\n\n if (!subscription.closed) {\n subscription.add(teardown);\n } else {\n teardown.unsubscribe();\n }\n },\n {injector: this.injector},\n );\n\n return subscription;\n });\n }\n\n private get host(): Element {\n // TODO: Test if we still need it now, that templates pass injector\n return this.el.closest(SCROLL_REF_SELECTOR) || this.scrollRef;\n }\n\n private get offsetTop(): number {\n return tuiGetElementOffset(this.host, this.el).offsetTop;\n }\n\n private get pinned(): boolean {\n return (\n this.el.getBoundingClientRect().top -\n this.host.getBoundingClientRect().top ===\n 0\n );\n }\n}\n","import {Directive, inject
|
|
1
|
+
{"version":3,"file":"taiga-ui-addon-mobile-directives-elastic-sticky.mjs","sources":["../../../projects/addon-mobile/directives/elastic-sticky/elastic-sticky.service.ts","../../../projects/addon-mobile/directives/elastic-sticky/elastic-sticky.directive.ts","../../../projects/addon-mobile/directives/elastic-sticky/taiga-ui-addon-mobile-directives-elastic-sticky.ts"],"sourcesContent":["import {\n afterNextRender,\n DestroyRef,\n inject,\n Injectable,\n INJECTOR,\n NgZone,\n} from '@angular/core';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\nimport {tuiScrollFrom, tuiZoneOptimized} from '@taiga-ui/cdk/observables';\nimport {tuiGetElementOffset, tuiInjectElement} from '@taiga-ui/cdk/utils/dom';\nimport {SCROLL_REF_SELECTOR, TUI_SCROLL_REF} from '@taiga-ui/core/components/scrollbar';\nimport {distinctUntilChanged, map, Observable, scan, Subscription} from 'rxjs';\n\n@Injectable()\nexport class TuiElasticStickyService extends Observable<number> {\n private readonly injector = inject(INJECTOR);\n private readonly el = tuiInjectElement();\n private readonly scrollRef = inject(TUI_SCROLL_REF).nativeElement;\n private readonly destroyRef = inject(DestroyRef);\n private readonly zone = inject(NgZone);\n\n constructor() {\n super((subscriber) => {\n const subscription = new Subscription();\n\n afterNextRender(\n () => {\n const teardown = tuiScrollFrom(this.host)\n .pipe(\n scan(\n (top) => (this.pinned ? top : this.offsetTop),\n this.offsetTop,\n ),\n map((top) =>\n Math.max(\n 1 -\n Math.max(\n Math.round(this.host.scrollTop) - top,\n 0,\n ) /\n this.el.offsetHeight,\n 0,\n ),\n ),\n distinctUntilChanged(),\n tuiZoneOptimized(this.zone),\n takeUntilDestroyed(this.destroyRef),\n )\n .subscribe(subscriber);\n\n if (!subscription.closed) {\n subscription.add(teardown);\n } else {\n teardown.unsubscribe();\n }\n },\n {injector: this.injector},\n );\n\n return subscription;\n });\n }\n\n private get host(): Element {\n // TODO: Test if we still need it now, that templates pass injector\n return this.el.closest(SCROLL_REF_SELECTOR) || this.scrollRef;\n }\n\n private get offsetTop(): number {\n return tuiGetElementOffset(this.host, this.el).offsetTop;\n }\n\n private get pinned(): boolean {\n return (\n this.el.getBoundingClientRect().top -\n this.host.getBoundingClientRect().top ===\n 0\n );\n }\n}\n","import {Directive, inject} from '@angular/core';\nimport {outputFromObservable} from '@angular/core/rxjs-interop';\n\nimport {TuiElasticStickyService} from './elastic-sticky.service';\n\n@Directive({\n selector: '[tuiElasticSticky]',\n providers: [TuiElasticStickyService],\n exportAs: 'tuiElasticSticky',\n})\nexport class TuiElasticSticky {\n public readonly tuiElasticSticky = outputFromObservable(\n inject(TuiElasticStickyService),\n );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { DOCUMENT } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { ChangeDetectionStrategy, ViewEncapsulation, Component, inject, DestroyRef,
|
|
3
|
+
import { ChangeDetectionStrategy, ViewEncapsulation, Component, inject, DestroyRef, input, Directive } from '@angular/core';
|
|
4
4
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
5
|
import { tuiIsHTMLElement } from '@taiga-ui/cdk/utils/dom';
|
|
6
6
|
import { tuiWithStyles, tuiPx } from '@taiga-ui/cdk/utils/miscellaneous';
|
|
@@ -24,10 +24,10 @@ class TuiRipple {
|
|
|
24
24
|
this.destroyRef = inject(DestroyRef);
|
|
25
25
|
this.duration = tuiGetDuration(inject(TUI_ANIMATIONS_SPEED));
|
|
26
26
|
this.nothing = tuiWithStyles(Styles);
|
|
27
|
-
this.tuiRipple = '';
|
|
27
|
+
this.tuiRipple = input('');
|
|
28
28
|
}
|
|
29
29
|
start(x, y, target, el) {
|
|
30
|
-
const element = this.tuiRipple ? target.closest(this.tuiRipple) : el;
|
|
30
|
+
const element = this.tuiRipple() ? target.closest(this.tuiRipple()) : el;
|
|
31
31
|
if (!tuiIsHTMLElement(element)) {
|
|
32
32
|
return;
|
|
33
33
|
}
|
|
@@ -61,7 +61,7 @@ class TuiRipple {
|
|
|
61
61
|
return ripple;
|
|
62
62
|
}
|
|
63
63
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiRipple, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
64
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
64
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiRipple, isStandalone: true, selector: "[tuiRipple]", inputs: { tuiRipple: { classPropertyName: "tuiRipple", publicName: "tuiRipple", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown.zoneless": "start($event.clientX, $event.clientY, $event.target, $event.currentTarget)" } }, ngImport: i0 }); }
|
|
65
65
|
}
|
|
66
66
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiRipple, decorators: [{
|
|
67
67
|
type: Directive,
|
|
@@ -71,9 +71,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
71
71
|
'(pointerdown.zoneless)': 'start($event.clientX, $event.clientY, $event.target, $event.currentTarget)',
|
|
72
72
|
},
|
|
73
73
|
}]
|
|
74
|
-
}]
|
|
75
|
-
type: Input
|
|
76
|
-
}] } });
|
|
74
|
+
}] });
|
|
77
75
|
|
|
78
76
|
/**
|
|
79
77
|
* Generated bundle index. Do not edit.
|
|
@@ -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
|
|
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 public readonly tuiRipple = input('');\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":";;;;;;;;;;AAiBA,MAAM,EAAE,GAAG,CAAC,EAAC,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAC,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,CAAC;AACxE,MAAM,IAAI,GAAG,CAAC,EAAC,OAAO,EAAE,MAAM,EAAC,EAAE,EAAC,OAAO,EAAE,GAAG,EAAC,CAAC;AAEhD,MAOM,MAAM,CAAA;+GAAN,MAAM,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAN,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,MAAM,gHANE,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,oLAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAMV,MAAM,EAAA,UAAA,EAAA,CAAA;kBAPX,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAE,EAEG,aAAA,EAAA,iBAAiB,CAAC,IAAI,EACpB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACzC,IAAA,EAAA,EAAC,KAAK,EAAE,YAAY,EAAC,EAAA,MAAA,EAAA,CAAA,oLAAA,CAAA,EAAA;;MAWlB,SAAS,CAAA;AAPtB,IAAA,WAAA,GAAA;AAQqB,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,QAAQ,CAAC;AACtB,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;QAC/B,IAAQ,CAAA,QAAA,GAAG,cAAc,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC;AAErD,QAAA,IAAA,CAAA,OAAO,GAAG,aAAa,CAAC,MAAM,CAAC;AAElC,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAC,EAAE,CAAC;AA6DxC;AA3Da,IAAA,KAAK,CAAC,CAAS,EAAE,CAAS,EAAE,MAAmB,EAAE,EAAe,EAAA;QACtE,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,GAAG,EAAE;AAExE,QAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE;YAC5B;;AAGJ,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,qBAAqB,EAAE,CAAC;QACvE,MAAM,SAAS,GAAG,KAAK,CACnB,SAAS,CAAC,OAAO,EAAE,WAAW,CAAC,EAC/B,SAAS,CAAC,OAAO,EAAE,eAAe,CAAC,EACnC,SAAS,CAAC,OAAO,EAAE,aAAa,CAAC,CACpC;AAED,QAAA,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC;AAE3B,QAAA,MAAM,aAAa,GAAG,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC;QAE5E,IAAI,CACA,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,aAAa,CAAC,CAAC,EAC9C,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,SAAS,CAAC,CAAC;aAE7C,IAAI,CACD,KAAK,EAAE,EACP,SAAS,CAAC,MAAM,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,EACzE,KAAK,EAAE,EACP,GAAG,CAAC,MAAM,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,EACtC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;AAEtC,aAAA,SAAS,EAAE;;AAGZ,IAAA,YAAY,CAChB,OAAe,EACf,OAAe,EACf,EAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAU,EAAA;QAEnC,MAAM,MAAM,GAAgB,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC;AACzD,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AACzD,QAAA,MAAM,SAAS,GAAG,MAAM,GAAG,CAAC;AAC5B,QAAA,MAAM,CAAC,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM;AACjC,QAAA,MAAM,CAAC,GAAG,OAAO,GAAG,GAAG,GAAG,MAAM;AAEhC,QAAA,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE;AACxB,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;AACb,YAAA,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;AACd,YAAA,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;AACvB,YAAA,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;AACxB,YAAA,MAAM,EAAE,GAAG;AACX,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,YAAY,EAAE,MAAM;AACpB,YAAA,UAAU,EAAE,4CAA4C;AACxD,YAAA,iBAAiB,EAAE,UAAU;AAC7B,YAAA,aAAa,EAAE,MAAM;AACxB,SAAA,CAAC;AAEF,QAAA,OAAO,MAAM;;+GAlER,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,sBAAA,EAAA,4EAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAAT,SAAS,EAAA,UAAA,EAAA,CAAA;kBAPrB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,IAAI,EAAE;AACF,wBAAA,wBAAwB,EACpB,4EAA4E;AACnF,qBAAA;AACJ,iBAAA;;;ACnCD;;AAEG;;;;"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import { DOCUMENT } from '@angular/common';
|
|
1
2
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject,
|
|
3
|
+
import { inject, computed, input, Directive } from '@angular/core';
|
|
3
4
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
4
5
|
import { tuiTypedFromEvent } from '@taiga-ui/cdk/observables';
|
|
5
6
|
import { TUI_IS_IOS } from '@taiga-ui/cdk/tokens';
|
|
@@ -11,7 +12,7 @@ const STYLE = {
|
|
|
11
12
|
opacity: '0.6',
|
|
12
13
|
background: 'rgba(146, 153, 162, 0.12)',
|
|
13
14
|
};
|
|
14
|
-
function
|
|
15
|
+
function findIndex(touches, id = 0) {
|
|
15
16
|
for (let i = 0; i < touches.length; i++) {
|
|
16
17
|
if (touches[i]?.identifier === id) {
|
|
17
18
|
return i;
|
|
@@ -23,54 +24,47 @@ class TuiTouchable {
|
|
|
23
24
|
constructor() {
|
|
24
25
|
this.isIOS = inject(TUI_IS_IOS);
|
|
25
26
|
this.el = tuiInjectElement();
|
|
26
|
-
this.
|
|
27
|
+
this.doc = inject(DOCUMENT);
|
|
28
|
+
this.style = computed(() => this.tuiTouchable() || 'transform');
|
|
29
|
+
this.tuiTouchable = input('');
|
|
27
30
|
if (!this.isIOS) {
|
|
28
31
|
return;
|
|
29
32
|
}
|
|
30
33
|
tuiTypedFromEvent(this.el, 'touchstart', { passive: true })
|
|
31
|
-
.pipe(tap(() => this.onTouchStart()), map(({ touches }) => touches[touches.length - 1]?.identifier), switchMap((
|
|
34
|
+
.pipe(tap(() => this.onTouchStart()), map(({ touches }) => touches[touches.length - 1]?.identifier), switchMap((id) => race(tuiTypedFromEvent(this.el, 'touchend'), tuiTypedFromEvent(this.el, 'touchmove', { passive: true }).pipe(filter(({ touches }) => this.hasTouches(this.el, touches, id)))).pipe(take(1))), takeUntilDestroyed())
|
|
32
35
|
.subscribe(() => {
|
|
33
36
|
this.el.style.removeProperty('transform');
|
|
34
37
|
this.el.style.removeProperty('opacity');
|
|
35
38
|
this.el.style.removeProperty('background');
|
|
36
39
|
});
|
|
37
40
|
}
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
const { ownerDocument } = element;
|
|
43
|
-
const id = tuiFindTouchIndex(touches, identifier);
|
|
44
|
-
if (!ownerDocument || id === -1) {
|
|
45
|
-
return true;
|
|
46
|
-
}
|
|
47
|
-
const { clientX = 0, clientY = 0 } = touches[id] ?? {};
|
|
48
|
-
return !element.contains(ownerDocument.elementFromPoint(clientX, clientY));
|
|
41
|
+
hasTouches(el, touches, id) {
|
|
42
|
+
const index = findIndex(touches, id);
|
|
43
|
+
const { clientX = 0, clientY = 0 } = touches[index] ?? {};
|
|
44
|
+
return index === -1 || !el.contains(this.doc.elementFromPoint(clientX, clientY));
|
|
49
45
|
}
|
|
50
46
|
onTouchStart() {
|
|
51
|
-
if (this.style !== 'transform') {
|
|
47
|
+
if (this.style() !== 'transform') {
|
|
52
48
|
this.el.style.removeProperty('transition');
|
|
53
49
|
}
|
|
54
50
|
else {
|
|
55
51
|
this.el.style.setProperty('transition', 'transform 0.2s');
|
|
56
52
|
}
|
|
57
|
-
this.el.style.setProperty(this.style, STYLE[this.style]);
|
|
53
|
+
this.el.style.setProperty(this.style(), STYLE[this.style()]);
|
|
58
54
|
}
|
|
59
55
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTouchable, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
60
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
56
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiTouchable, isStandalone: true, selector: "[tuiTouchable]", inputs: { tuiTouchable: { classPropertyName: "tuiTouchable", publicName: "tuiTouchable", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
61
57
|
}
|
|
62
58
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTouchable, decorators: [{
|
|
63
59
|
type: Directive,
|
|
64
60
|
args: [{
|
|
65
61
|
selector: '[tuiTouchable]',
|
|
66
62
|
}]
|
|
67
|
-
}], ctorParameters: () => []
|
|
68
|
-
type: Input
|
|
69
|
-
}] } });
|
|
63
|
+
}], ctorParameters: () => [] });
|
|
70
64
|
|
|
71
65
|
/**
|
|
72
66
|
* Generated bundle index. Do not edit.
|
|
73
67
|
*/
|
|
74
68
|
|
|
75
|
-
export { TuiTouchable
|
|
69
|
+
export { TuiTouchable };
|
|
76
70
|
//# sourceMappingURL=taiga-ui-addon-mobile-directives-touchable.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"taiga-ui-addon-mobile-directives-touchable.mjs","sources":["../../../projects/addon-mobile/directives/touchable/touchable.directive.ts","../../../projects/addon-mobile/directives/touchable/taiga-ui-addon-mobile-directives-touchable.ts"],"sourcesContent":["import {Directive, inject,
|
|
1
|
+
{"version":3,"file":"taiga-ui-addon-mobile-directives-touchable.mjs","sources":["../../../projects/addon-mobile/directives/touchable/touchable.directive.ts","../../../projects/addon-mobile/directives/touchable/taiga-ui-addon-mobile-directives-touchable.ts"],"sourcesContent":["import {DOCUMENT} from '@angular/common';\nimport {computed, Directive, inject, input} from '@angular/core';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\nimport {tuiTypedFromEvent} from '@taiga-ui/cdk/observables';\nimport {TUI_IS_IOS} from '@taiga-ui/cdk/tokens';\nimport {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';\nimport {filter, map, race, switchMap, take, tap} from 'rxjs';\n\nconst STYLE = {\n transform: 'scale(0.95)',\n opacity: '0.6',\n background: 'rgba(146, 153, 162, 0.12)',\n} as const;\n\nfunction findIndex(touches: TouchList, id = 0): number {\n for (let i = 0; i < touches.length; i++) {\n if (touches[i]?.identifier === id) {\n return i;\n }\n }\n\n return -1;\n}\n\n@Directive({\n selector: '[tuiTouchable]',\n})\nexport class TuiTouchable {\n private readonly isIOS = inject(TUI_IS_IOS);\n private readonly el = tuiInjectElement();\n private readonly doc = inject(DOCUMENT);\n\n protected readonly style = computed<'background' | 'opacity' | 'transform'>(\n () => this.tuiTouchable() || 'transform',\n );\n\n public readonly tuiTouchable = input<'' | 'background' | 'opacity' | 'transform'>('');\n\n constructor() {\n if (!this.isIOS) {\n return;\n }\n\n tuiTypedFromEvent(this.el, 'touchstart', {passive: true})\n .pipe(\n tap(() => this.onTouchStart()),\n map(({touches}) => touches[touches.length - 1]?.identifier),\n switchMap((id) =>\n race(\n tuiTypedFromEvent(this.el, 'touchend'),\n tuiTypedFromEvent(this.el, 'touchmove', {passive: true}).pipe(\n filter(({touches}) => this.hasTouches(this.el, touches, id)),\n ),\n ).pipe(take(1)),\n ),\n takeUntilDestroyed(),\n )\n .subscribe(() => {\n this.el.style.removeProperty('transform');\n this.el.style.removeProperty('opacity');\n this.el.style.removeProperty('background');\n });\n }\n\n private hasTouches(el: HTMLElement, touches: TouchList, id?: number): boolean {\n const index = findIndex(touches, id);\n const {clientX = 0, clientY = 0} = touches[index] ?? {};\n\n return index === -1 || !el.contains(this.doc.elementFromPoint(clientX, clientY));\n }\n\n private onTouchStart(): void {\n if (this.style() !== 'transform') {\n this.el.style.removeProperty('transition');\n } else {\n this.el.style.setProperty('transition', 'transform 0.2s');\n }\n\n this.el.style.setProperty(this.style(), STYLE[this.style()]);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
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.7c53ccc",
|
|
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",
|
|
@@ -26,22 +26,18 @@
|
|
|
26
26
|
"types": "./components/index.d.ts",
|
|
27
27
|
"default": "./fesm2022/taiga-ui-addon-mobile-components.mjs"
|
|
28
28
|
},
|
|
29
|
-
"./directives": {
|
|
30
|
-
"types": "./directives/index.d.ts",
|
|
31
|
-
"default": "./fesm2022/taiga-ui-addon-mobile-directives.mjs"
|
|
32
|
-
},
|
|
33
29
|
"./services": {
|
|
34
30
|
"types": "./services/index.d.ts",
|
|
35
31
|
"default": "./fesm2022/taiga-ui-addon-mobile-services.mjs"
|
|
36
32
|
},
|
|
33
|
+
"./directives": {
|
|
34
|
+
"types": "./directives/index.d.ts",
|
|
35
|
+
"default": "./fesm2022/taiga-ui-addon-mobile-directives.mjs"
|
|
36
|
+
},
|
|
37
37
|
"./components/bottom-sheet": {
|
|
38
38
|
"types": "./components/bottom-sheet/index.d.ts",
|
|
39
39
|
"default": "./fesm2022/taiga-ui-addon-mobile-components-bottom-sheet.mjs"
|
|
40
40
|
},
|
|
41
|
-
"./components/mobile-calendar": {
|
|
42
|
-
"types": "./components/mobile-calendar/index.d.ts",
|
|
43
|
-
"default": "./fesm2022/taiga-ui-addon-mobile-components-mobile-calendar.mjs"
|
|
44
|
-
},
|
|
45
41
|
"./components/mobile-calendar-dropdown": {
|
|
46
42
|
"types": "./components/mobile-calendar-dropdown/index.d.ts",
|
|
47
43
|
"default": "./fesm2022/taiga-ui-addon-mobile-components-mobile-calendar-dropdown.mjs"
|
|
@@ -54,6 +50,10 @@
|
|
|
54
50
|
"types": "./components/pull-to-refresh/index.d.ts",
|
|
55
51
|
"default": "./fesm2022/taiga-ui-addon-mobile-components-pull-to-refresh.mjs"
|
|
56
52
|
},
|
|
53
|
+
"./components/mobile-calendar": {
|
|
54
|
+
"types": "./components/mobile-calendar/index.d.ts",
|
|
55
|
+
"default": "./fesm2022/taiga-ui-addon-mobile-components-mobile-calendar.mjs"
|
|
56
|
+
},
|
|
57
57
|
"./components/sheet-dialog": {
|
|
58
58
|
"types": "./components/sheet-dialog/index.d.ts",
|
|
59
59
|
"default": "./fesm2022/taiga-ui-addon-mobile-components-sheet-dialog.mjs"
|