@taiga-ui/addon-mobile 4.52.0-canary.91aeb4a → 4.52.0-canary.9471234
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/README.md +2 -2
- package/components/bottom-sheet/bottom-sheet.component.d.ts +3 -3
- package/components/index.d.ts +0 -1
- 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 +16 -18
- package/components/mobile-calendar/mobile-calendar.strategy.d.ts +3 -7
- package/components/mobile-calendar-dropdown/mobile-calendar-dropdown.component.d.ts +10 -12
- 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/sheet-dialog/sheet-dialog.component.d.ts +2 -2
- package/components/sheet-dialog/sheet-dialog.options.d.ts +3 -9
- package/components/sheet-dialog/sheet-dialog.service.d.ts +2 -2
- 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/dropdown-mobile/dropdown-mobile.component.d.ts +1 -1
- package/directives/dropdown-sheet/dropdown-sheet.component.d.ts +1 -1
- package/directives/elastic-sticky/elastic-sticky.directive.d.ts +1 -2
- package/directives/responsive-dialog/responsive-dialog.directive.d.ts +5 -4
- package/directives/responsive-dialog/responsive-dialog.service.d.ts +4 -7
- 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 +15 -22
- package/fesm2022/taiga-ui-addon-mobile-components-bottom-sheet.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-mobile-calendar-dropdown.mjs +35 -57
- 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 +9 -11
- package/fesm2022/taiga-ui-addon-mobile-components-mobile-calendar-sheet.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-mobile-calendar.mjs +122 -155
- package/fesm2022/taiga-ui-addon-mobile-components-mobile-calendar.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-pull-to-refresh.mjs +45 -56
- package/fesm2022/taiga-ui-addon-mobile-components-pull-to-refresh.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-sheet-dialog.mjs +27 -37
- package/fesm2022/taiga-ui-addon-mobile-components-sheet-dialog.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-swipe-action.mjs +12 -20
- package/fesm2022/taiga-ui-addon-mobile-components-swipe-action.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-tab-bar.mjs +31 -51
- package/fesm2022/taiga-ui-addon-mobile-components-tab-bar.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components.mjs +0 -1
- package/fesm2022/taiga-ui-addon-mobile-components.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-directives-dropdown-mobile.mjs +12 -12
- package/fesm2022/taiga-ui-addon-mobile-directives-dropdown-mobile.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-directives-dropdown-sheet.mjs +12 -12
- package/fesm2022/taiga-ui-addon-mobile-directives-dropdown-sheet.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-directives-elastic-sticky.mjs +11 -15
- package/fesm2022/taiga-ui-addon-mobile-directives-elastic-sticky.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-directives-responsive-dialog.mjs +46 -29
- package/fesm2022/taiga-ui-addon-mobile-directives-responsive-dialog.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-directives-ripple.mjs +10 -12
- package/fesm2022/taiga-ui-addon-mobile-directives-ripple.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-directives-touchable.mjs +20 -27
- package/fesm2022/taiga-ui-addon-mobile-directives-touchable.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-services.mjs +34 -5
- package/fesm2022/taiga-ui-addon-mobile-services.mjs.map +1 -1
- package/package.json +16 -16
- package/services/index.d.ts +1 -0
- package/services/theme-color.service.d.ts +18 -0
- package/styles/android/app-bar.less +5 -1
- package/styles/android/switch.less +1 -0
- package/styles/common/badge-notification.less +1 -1
- package/styles/common/badge.less +2 -3
- package/styles/common/block-status.less +1 -1
- package/styles/common/button.less +1 -1
- package/styles/common/card-large.less +1 -1
- package/styles/common/chip.less +0 -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
- package/styles/ios/switch.less +50 -1
- package/styles/taiga-ui-mobile.less +6 -0
- package/components/mobile-dialog/index.d.ts +0 -3
- package/components/mobile-dialog/mobile-dialog.component.d.ts +0 -10
- package/components/mobile-dialog/mobile-dialog.options.d.ts +0 -12
- package/components/mobile-dialog/mobile-dialog.service.d.ts +0 -10
- package/fesm2022/taiga-ui-addon-mobile-components-mobile-dialog.mjs +0 -64
- package/fesm2022/taiga-ui-addon-mobile-components-mobile-dialog.mjs.map +0 -1
|
@@ -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';
|
|
@@ -11,10 +11,10 @@ import { merge, fromEvent, race, switchMap, first, tap } from 'rxjs';
|
|
|
11
11
|
const TO = [{ transform: 'scale(0)', opacity: '0.12' }, { opacity: '0.12' }];
|
|
12
12
|
const FROM = [{ opacity: '0.12' }, { opacity: '0' }];
|
|
13
13
|
class Styles {
|
|
14
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
15
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
14
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Styles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", 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 }); }
|
|
16
16
|
}
|
|
17
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
17
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Styles, decorators: [{
|
|
18
18
|
type: Component,
|
|
19
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"] }]
|
|
20
20
|
}] });
|
|
@@ -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
|
}
|
|
@@ -60,10 +60,10 @@ class TuiRipple {
|
|
|
60
60
|
});
|
|
61
61
|
return ripple;
|
|
62
62
|
}
|
|
63
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
64
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
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: "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
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
66
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiRipple, decorators: [{
|
|
67
67
|
type: Directive,
|
|
68
68
|
args: [{
|
|
69
69
|
selector: '[tuiRipple]',
|
|
@@ -71,9 +71,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", 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":"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"}
|
|
@@ -1,8 +1,9 @@
|
|
|
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';
|
|
5
|
+
import { WA_IS_IOS } from '@ng-web-apis/platform';
|
|
4
6
|
import { tuiTypedFromEvent } from '@taiga-ui/cdk/observables';
|
|
5
|
-
import { TUI_IS_IOS } from '@taiga-ui/cdk/tokens';
|
|
6
7
|
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
|
|
7
8
|
import { tap, map, switchMap, race, filter, take } from 'rxjs';
|
|
8
9
|
|
|
@@ -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;
|
|
@@ -21,57 +22,49 @@ function tuiFindTouchIndex(touches, id) {
|
|
|
21
22
|
}
|
|
22
23
|
class TuiTouchable {
|
|
23
24
|
constructor() {
|
|
24
|
-
this.isIOS = inject(
|
|
25
|
+
this.isIOS = inject(WA_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
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
60
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
55
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTouchable, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
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
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
58
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTouchable, decorators: [{
|
|
63
59
|
type: Directive,
|
|
64
60
|
args: [{
|
|
65
|
-
standalone: true,
|
|
66
61
|
selector: '[tuiTouchable]',
|
|
67
62
|
}]
|
|
68
|
-
}], ctorParameters: () => []
|
|
69
|
-
type: Input
|
|
70
|
-
}] } });
|
|
63
|
+
}], ctorParameters: () => [] });
|
|
71
64
|
|
|
72
65
|
/**
|
|
73
66
|
* Generated bundle index. Do not edit.
|
|
74
67
|
*/
|
|
75
68
|
|
|
76
|
-
export { TuiTouchable
|
|
69
|
+
export { TuiTouchable };
|
|
77
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 {WA_IS_IOS} from '@ng-web-apis/platform';\nimport {tuiTypedFromEvent} from '@taiga-ui/cdk/observables';\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(WA_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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"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { DOCUMENT } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { inject, Injectable } from '@angular/core';
|
|
3
|
+
import { inject, Injectable, InjectionToken } from '@angular/core';
|
|
4
4
|
import { tuiGetFocused } from '@taiga-ui/cdk/utils/focus';
|
|
5
5
|
import { merge, fromEvent, filter } from 'rxjs';
|
|
6
|
+
import { Meta } from '@angular/platform-browser';
|
|
6
7
|
|
|
7
8
|
class TuiKeyboardService {
|
|
8
9
|
constructor() {
|
|
@@ -41,19 +42,47 @@ class TuiKeyboardService {
|
|
|
41
42
|
this.element.inputMode = this.inputMode;
|
|
42
43
|
this.element = undefined;
|
|
43
44
|
}
|
|
44
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
45
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
45
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiKeyboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
46
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiKeyboardService, providedIn: 'root' }); }
|
|
46
47
|
}
|
|
47
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
48
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiKeyboardService, decorators: [{
|
|
48
49
|
type: Injectable,
|
|
49
50
|
args: [{
|
|
50
51
|
providedIn: 'root',
|
|
51
52
|
}]
|
|
52
53
|
}] });
|
|
53
54
|
|
|
55
|
+
const TUI_THEME_COLOR = new InjectionToken(ngDevMode ? 'TUI_THEME_COLOR' : '', {
|
|
56
|
+
factory: () => inject(Meta).getTag('name="theme-color"')?.content ?? '',
|
|
57
|
+
});
|
|
58
|
+
class TuiThemeColorService {
|
|
59
|
+
constructor() {
|
|
60
|
+
this.current = inject(TUI_THEME_COLOR);
|
|
61
|
+
this.doc = inject(DOCUMENT);
|
|
62
|
+
this.meta = inject(Meta);
|
|
63
|
+
this.color = this.current;
|
|
64
|
+
}
|
|
65
|
+
get color() {
|
|
66
|
+
return this.current;
|
|
67
|
+
}
|
|
68
|
+
set color(content) {
|
|
69
|
+
this.current = content;
|
|
70
|
+
this.meta.updateTag({ name: 'theme-color', content });
|
|
71
|
+
this.doc.documentElement.style.setProperty('--tui-theme-color', content);
|
|
72
|
+
}
|
|
73
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiThemeColorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
74
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiThemeColorService, providedIn: 'root' }); }
|
|
75
|
+
}
|
|
76
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiThemeColorService, decorators: [{
|
|
77
|
+
type: Injectable,
|
|
78
|
+
args: [{
|
|
79
|
+
providedIn: 'root',
|
|
80
|
+
}]
|
|
81
|
+
}], ctorParameters: () => [] });
|
|
82
|
+
|
|
54
83
|
/**
|
|
55
84
|
* Generated bundle index. Do not edit.
|
|
56
85
|
*/
|
|
57
86
|
|
|
58
|
-
export { TuiKeyboardService };
|
|
87
|
+
export { TUI_THEME_COLOR, TuiKeyboardService, TuiThemeColorService };
|
|
59
88
|
//# sourceMappingURL=taiga-ui-addon-mobile-services.mjs.map
|
|
@@ -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 {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":"
|
|
1
|
+
{"version":3,"file":"taiga-ui-addon-mobile-services.mjs","sources":["../../../projects/addon-mobile/services/keyboard.service.ts","../../../projects/addon-mobile/services/theme-color.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","import {DOCUMENT} from '@angular/common';\nimport {inject, Injectable, InjectionToken} from '@angular/core';\nimport {Meta} from '@angular/platform-browser';\n\nexport const TUI_THEME_COLOR = new InjectionToken<string>(\n ngDevMode ? 'TUI_THEME_COLOR' : '',\n {\n factory: () => inject(Meta).getTag('name=\"theme-color\"')?.content ?? '',\n },\n);\n\ninterface TuiThemeColor {\n get color(): string;\n set color(value: string);\n}\n\n@Injectable({\n providedIn: 'root',\n})\nexport class TuiThemeColorService implements TuiThemeColor {\n private current = inject(TUI_THEME_COLOR);\n private readonly doc = inject(DOCUMENT);\n private readonly meta = inject(Meta);\n\n constructor() {\n this.color = this.current;\n }\n\n public get color(): string {\n return this.current;\n }\n\n public set color(content: string) {\n this.current = content;\n this.meta.updateTag({name: 'theme-color', content});\n this.doc.documentElement.style.setProperty('--tui-theme-color', content);\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.9471234",
|
|
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",
|
|
@@ -8,7 +8,10 @@
|
|
|
8
8
|
"mobile"
|
|
9
9
|
],
|
|
10
10
|
"homepage": "https://github.com/taiga-family/taiga-ui",
|
|
11
|
-
"repository":
|
|
11
|
+
"repository": {
|
|
12
|
+
"type": "git",
|
|
13
|
+
"url": "https://github.com/taiga-family/taiga-ui"
|
|
14
|
+
},
|
|
12
15
|
"license": "Apache-2.0",
|
|
13
16
|
"exports": {
|
|
14
17
|
"./styles/*": "./styles/*",
|
|
@@ -23,22 +26,18 @@
|
|
|
23
26
|
"types": "./components/index.d.ts",
|
|
24
27
|
"default": "./fesm2022/taiga-ui-addon-mobile-components.mjs"
|
|
25
28
|
},
|
|
26
|
-
"./directives": {
|
|
27
|
-
"types": "./directives/index.d.ts",
|
|
28
|
-
"default": "./fesm2022/taiga-ui-addon-mobile-directives.mjs"
|
|
29
|
-
},
|
|
30
29
|
"./services": {
|
|
31
30
|
"types": "./services/index.d.ts",
|
|
32
31
|
"default": "./fesm2022/taiga-ui-addon-mobile-services.mjs"
|
|
33
32
|
},
|
|
33
|
+
"./directives": {
|
|
34
|
+
"types": "./directives/index.d.ts",
|
|
35
|
+
"default": "./fesm2022/taiga-ui-addon-mobile-directives.mjs"
|
|
36
|
+
},
|
|
34
37
|
"./components/bottom-sheet": {
|
|
35
38
|
"types": "./components/bottom-sheet/index.d.ts",
|
|
36
39
|
"default": "./fesm2022/taiga-ui-addon-mobile-components-bottom-sheet.mjs"
|
|
37
40
|
},
|
|
38
|
-
"./components/mobile-calendar": {
|
|
39
|
-
"types": "./components/mobile-calendar/index.d.ts",
|
|
40
|
-
"default": "./fesm2022/taiga-ui-addon-mobile-components-mobile-calendar.mjs"
|
|
41
|
-
},
|
|
42
41
|
"./components/mobile-calendar-dropdown": {
|
|
43
42
|
"types": "./components/mobile-calendar-dropdown/index.d.ts",
|
|
44
43
|
"default": "./fesm2022/taiga-ui-addon-mobile-components-mobile-calendar-dropdown.mjs"
|
|
@@ -47,10 +46,6 @@
|
|
|
47
46
|
"types": "./components/mobile-calendar-sheet/index.d.ts",
|
|
48
47
|
"default": "./fesm2022/taiga-ui-addon-mobile-components-mobile-calendar-sheet.mjs"
|
|
49
48
|
},
|
|
50
|
-
"./components/mobile-dialog": {
|
|
51
|
-
"types": "./components/mobile-dialog/index.d.ts",
|
|
52
|
-
"default": "./fesm2022/taiga-ui-addon-mobile-components-mobile-dialog.mjs"
|
|
53
|
-
},
|
|
54
49
|
"./components/pull-to-refresh": {
|
|
55
50
|
"types": "./components/pull-to-refresh/index.d.ts",
|
|
56
51
|
"default": "./fesm2022/taiga-ui-addon-mobile-components-pull-to-refresh.mjs"
|
|
@@ -67,6 +62,10 @@
|
|
|
67
62
|
"types": "./components/tab-bar/index.d.ts",
|
|
68
63
|
"default": "./fesm2022/taiga-ui-addon-mobile-components-tab-bar.mjs"
|
|
69
64
|
},
|
|
65
|
+
"./components/mobile-calendar": {
|
|
66
|
+
"types": "./components/mobile-calendar/index.d.ts",
|
|
67
|
+
"default": "./fesm2022/taiga-ui-addon-mobile-components-mobile-calendar.mjs"
|
|
68
|
+
},
|
|
70
69
|
"./directives/dropdown-mobile": {
|
|
71
70
|
"types": "./directives/dropdown-mobile/index.d.ts",
|
|
72
71
|
"default": "./fesm2022/taiga-ui-addon-mobile-directives-dropdown-mobile.mjs"
|
|
@@ -96,12 +95,13 @@
|
|
|
96
95
|
"@angular/cdk": ">=19.0.0",
|
|
97
96
|
"@angular/common": ">=19.0.0",
|
|
98
97
|
"@angular/core": ">=19.0.0",
|
|
99
|
-
"@ng-web-apis/common": "^
|
|
98
|
+
"@ng-web-apis/common": "^5.0.1",
|
|
99
|
+
"@ng-web-apis/platform": "^5.0.1",
|
|
100
100
|
"@taiga-ui/cdk": "^4.52.0",
|
|
101
101
|
"@taiga-ui/core": "^4.52.0",
|
|
102
102
|
"@taiga-ui/kit": "^4.52.0",
|
|
103
103
|
"@taiga-ui/layout": "^4.52.0",
|
|
104
|
-
"@taiga-ui/polymorpheus": "^
|
|
104
|
+
"@taiga-ui/polymorpheus": "^5.0.0",
|
|
105
105
|
"rxjs": ">=7.0.0"
|
|
106
106
|
},
|
|
107
107
|
"module": "fesm2022/taiga-ui-addon-mobile.mjs",
|
package/services/index.d.ts
CHANGED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { InjectionToken } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export declare const TUI_THEME_COLOR: InjectionToken<string>;
|
|
4
|
+
interface TuiThemeColor {
|
|
5
|
+
get color(): string;
|
|
6
|
+
set color(value: string);
|
|
7
|
+
}
|
|
8
|
+
export declare class TuiThemeColorService implements TuiThemeColor {
|
|
9
|
+
private current;
|
|
10
|
+
private readonly doc;
|
|
11
|
+
private readonly meta;
|
|
12
|
+
constructor();
|
|
13
|
+
get color(): string;
|
|
14
|
+
set color(content: string);
|
|
15
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TuiThemeColorService, never>;
|
|
16
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<TuiThemeColorService>;
|
|
17
|
+
}
|
|
18
|
+
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
tui-app-bar {
|
|
2
|
-
font: var(--tui-font-heading-
|
|
2
|
+
font: var(--tui-font-heading-h6);
|
|
3
3
|
block-size: 3.5rem;
|
|
4
4
|
|
|
5
5
|
> .t-content {
|
|
@@ -12,6 +12,10 @@ tui-app-bar {
|
|
|
12
12
|
> * {
|
|
13
13
|
max-inline-size: calc(100% - var(--t-sides, 0px));
|
|
14
14
|
}
|
|
15
|
+
|
|
16
|
+
> [tuiProgressBar] {
|
|
17
|
+
.center-left();
|
|
18
|
+
}
|
|
15
19
|
}
|
|
16
20
|
|
|
17
21
|
> :last-child [tuiIconButton] {
|
package/styles/common/badge.less
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
tui-badge,
|
|
2
1
|
[tuiBadge] {
|
|
3
2
|
font-weight: 600;
|
|
4
3
|
|
|
5
4
|
&[data-size='s'] {
|
|
6
|
-
font: var(--tui-font-
|
|
5
|
+
font: var(--tui-font-body-xs);
|
|
7
6
|
font-weight: bold;
|
|
8
7
|
}
|
|
9
8
|
|
|
@@ -11,7 +10,7 @@ tui-badge,
|
|
|
11
10
|
--t-padding: 0 0.625rem;
|
|
12
11
|
--t-size: 1.75rem;
|
|
13
12
|
|
|
14
|
-
font: var(--tui-font-
|
|
13
|
+
font: var(--tui-font-body-s);
|
|
15
14
|
font-weight: 600;
|
|
16
15
|
}
|
|
17
16
|
}
|
package/styles/common/chip.less
CHANGED
package/styles/common/title.less
CHANGED
package/styles/common/toast.less
CHANGED
package/styles/ios/switch.less
CHANGED
|
@@ -1,6 +1,55 @@
|
|
|
1
1
|
@import '@taiga-ui/core/styles/taiga-ui-local.less';
|
|
2
2
|
|
|
3
|
-
input[tuiSwitch] {
|
|
3
|
+
input[tuiSwitch]._native {
|
|
4
|
+
block-size: 1.9375rem;
|
|
5
|
+
inline-size: 3.1875rem;
|
|
6
|
+
appearance: auto;
|
|
7
|
+
accent-color: var(--tui-background-accent-2);
|
|
8
|
+
|
|
9
|
+
&:invalid {
|
|
10
|
+
accent-color: var(--tui-status-negative);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
&::before,
|
|
14
|
+
&::after {
|
|
15
|
+
display: none;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@supports (anchor-name: --ios26) {
|
|
19
|
+
inline-size: 4rem;
|
|
20
|
+
block-size: 1.75rem;
|
|
21
|
+
|
|
22
|
+
&::before {
|
|
23
|
+
.transition(background);
|
|
24
|
+
|
|
25
|
+
position: absolute;
|
|
26
|
+
display: block;
|
|
27
|
+
inset: 0;
|
|
28
|
+
border-radius: 10rem;
|
|
29
|
+
inline-size: 100%;
|
|
30
|
+
background-color: transparent;
|
|
31
|
+
mix-blend-mode: color;
|
|
32
|
+
transform: none;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&:invalid:not(:checked)::before {
|
|
36
|
+
background-color: var(--tui-status-negative);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
[data-theme='dark'] & {
|
|
40
|
+
&:invalid:not(:checked)::before {
|
|
41
|
+
background-color: var(--tui-status-negative-pale);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&:disabled:not(:checked)::before {
|
|
45
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
46
|
+
mix-blend-mode: lighten;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
input[tuiSwitch]:not(._native) {
|
|
4
53
|
block-size: 1.9375rem;
|
|
5
54
|
inline-size: 3.1875rem;
|
|
6
55
|
border-radius: 2rem;
|