@taiga-ui/addon-mobile 5.1.0 → 5.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/taiga-ui-addon-mobile-components-swipe-actions.mjs +2 -2
- package/fesm2022/taiga-ui-addon-mobile-directives-dropdown-mobile.mjs +3 -3
- package/fesm2022/taiga-ui-addon-mobile-directives-ripple.mjs +2 -2
- package/package.json +9 -9
- package/styles/common/card-large.less +1 -1
- package/styles/common/header.less +23 -8
- package/styles/common/notification.less +0 -1
|
@@ -53,11 +53,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
53
53
|
|
|
54
54
|
class Styles {
|
|
55
55
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: Styles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
56
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: Styles, isStandalone: true, selector: "ng-component", exportAs: ["tui-swipe-actions-5.
|
|
56
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: Styles, isStandalone: true, selector: "ng-component", exportAs: ["tui-swipe-actions-5.2.0"], ngImport: i0, template: '', isInline: true, styles: ["tui-swipe-actions._onboarding:where(*[data-tui-version=\"5.2.0\"]){scroll-snap-type:none}tui-swipe-actions._onboarding:where(*[data-tui-version=\"5.2.0\"])>*{animation:tuiOnboardingEnter var(--tui-duration-slow) var(--tui-curve-expressive-entrance),tuiOnboardingShow var(--tui-duration-moderate) linear var(--tui-duration-slow),tuiOnboardingExit var(--tui-duration-slow) var(--tui-curve-expressive-entrance) calc(var(--tui-duration-slow) + var(--tui-duration-moderate))}@keyframes tuiOnboardingEnter{0%{transform:translate(0)}to{transform:translate(calc(-1px * var(--t-actions-width)))}}@keyframes tuiOnboardingShow{0%{transform:translate(calc(-1px * var(--t-actions-width)))}to{transform:translate(calc(-1px * var(--t-actions-width)))}}@keyframes tuiOnboardingExit{0%{transform:translate(calc(-1px * var(--t-actions-width)))}to{transform:translate(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
57
57
|
}
|
|
58
58
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: Styles, decorators: [{
|
|
59
59
|
type: Component,
|
|
60
|
-
args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-swipe-actions-${TUI_VERSION}`, styles: ["tui-swipe-actions._onboarding:where(*[data-tui-version=\"5.
|
|
60
|
+
args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-swipe-actions-${TUI_VERSION}`, styles: ["tui-swipe-actions._onboarding:where(*[data-tui-version=\"5.2.0\"]){scroll-snap-type:none}tui-swipe-actions._onboarding:where(*[data-tui-version=\"5.2.0\"])>*{animation:tuiOnboardingEnter var(--tui-duration-slow) var(--tui-curve-expressive-entrance),tuiOnboardingShow var(--tui-duration-moderate) linear var(--tui-duration-slow),tuiOnboardingExit var(--tui-duration-slow) var(--tui-curve-expressive-entrance) calc(var(--tui-duration-slow) + var(--tui-duration-moderate))}@keyframes tuiOnboardingEnter{0%{transform:translate(0)}to{transform:translate(calc(-1px * var(--t-actions-width)))}}@keyframes tuiOnboardingShow{0%{transform:translate(calc(-1px * var(--t-actions-width)))}to{transform:translate(calc(-1px * var(--t-actions-width)))}}@keyframes tuiOnboardingExit{0%{transform:translate(calc(-1px * var(--t-actions-width)))}to{transform:translate(0)}}\n"] }]
|
|
61
61
|
}] });
|
|
62
62
|
class TuiSwipeActionsOnboarding {
|
|
63
63
|
constructor() {
|
|
@@ -68,13 +68,13 @@ class TuiDropdownMobileComponent {
|
|
|
68
68
|
return this.dropdown.el.contains(tuiGetFocused(this.doc));
|
|
69
69
|
}
|
|
70
70
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiDropdownMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
71
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TuiDropdownMobileComponent, isStandalone: true, selector: "tui-dropdown-mobile", host: { attributes: { "data-tui-version": "5.
|
|
71
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TuiDropdownMobileComponent, isStandalone: true, selector: "tui-dropdown-mobile", host: { attributes: { "data-tui-version": "5.2.0" }, listeners: { "pointerdown.prevent": "0", "document:click.zoneless.capture": "onClick($event)", "window>scroll.zoneless.capture": "refresh()", "visualViewport>resize.zoneless": "refresh()", "visualViewport>scroll.zoneless": "refresh()" } }, hostDirectives: [{ directive: i1.TuiAnimated }, { directive: i2.TuiActiveZone }], ngImport: i0, template: `
|
|
72
72
|
<div class="t-container">
|
|
73
73
|
<ng-container *polymorpheusOutlet="dropdown.content() as text; context: ctx">
|
|
74
74
|
{{ text }}
|
|
75
75
|
</ng-container>
|
|
76
76
|
</div>
|
|
77
|
-
`, isInline: true, styles: ["tui-dropdown-mobile:where(*[data-tui-version=\"5.
|
|
77
|
+
`, isInline: true, styles: ["tui-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"]){scrollbar-width:none;-ms-overflow-style:none;position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;visibility:visible!important;background:var(--tui-background-base);overscroll-behavior:contain;overflow:auto;box-shadow:0 -.5rem .5rem var(--tui-background-base),0 10rem var(--tui-background-base),0 20rem var(--tui-background-base),0 30rem var(--tui-background-base);box-sizing:border-box;padding-block-end:env(safe-area-inset-bottom);pointer-events:auto}tui-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"])::-webkit-scrollbar,tui-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"])::-webkit-scrollbar-thumb{display:none}tui-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"]).tui-enter,tui-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"]).tui-leave{animation-name:tuiFade,tuiSlide}tui-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"]):after{content:\"\";display:block;block-size:1px}tui-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"])>.t-container{scrollbar-width:none;-ms-overflow-style:none;position:sticky;inset-block-start:0;block-size:100%;overflow:auto;padding:0 1rem;touch-action:pan-y!important}tui-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"])>.t-container::-webkit-scrollbar,tui-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"])>.t-container::-webkit-scrollbar-thumb{display:none}tui-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"])>.t-container tui-data-list{padding:0;margin:0 -.5rem}tui-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"]) [tuiDropdownButton][tuiDropdownButton]{position:fixed;display:inline-flex;inset-inline-end:1rem;inset-block-end:max(1rem,env(safe-area-inset-bottom))}.t-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"]){touch-action:none;visibility:hidden}.t-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"]) *{touch-action:inherit;visibility:inherit}.t-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"]) tui-root{visibility:visible}.t-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"]) tui-root .t-root-content,.t-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"]) tui-root tui-dialogs{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
78
78
|
}
|
|
79
79
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiDropdownMobileComponent, decorators: [{
|
|
80
80
|
type: Component,
|
|
@@ -91,7 +91,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
91
91
|
'(window>scroll.zoneless.capture)': 'refresh()',
|
|
92
92
|
'(visualViewport>resize.zoneless)': 'refresh()',
|
|
93
93
|
'(visualViewport>scroll.zoneless)': 'refresh()',
|
|
94
|
-
}, styles: ["tui-dropdown-mobile:where(*[data-tui-version=\"5.
|
|
94
|
+
}, styles: ["tui-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"]){scrollbar-width:none;-ms-overflow-style:none;position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;visibility:visible!important;background:var(--tui-background-base);overscroll-behavior:contain;overflow:auto;box-shadow:0 -.5rem .5rem var(--tui-background-base),0 10rem var(--tui-background-base),0 20rem var(--tui-background-base),0 30rem var(--tui-background-base);box-sizing:border-box;padding-block-end:env(safe-area-inset-bottom);pointer-events:auto}tui-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"])::-webkit-scrollbar,tui-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"])::-webkit-scrollbar-thumb{display:none}tui-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"]).tui-enter,tui-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"]).tui-leave{animation-name:tuiFade,tuiSlide}tui-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"]):after{content:\"\";display:block;block-size:1px}tui-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"])>.t-container{scrollbar-width:none;-ms-overflow-style:none;position:sticky;inset-block-start:0;block-size:100%;overflow:auto;padding:0 1rem;touch-action:pan-y!important}tui-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"])>.t-container::-webkit-scrollbar,tui-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"])>.t-container::-webkit-scrollbar-thumb{display:none}tui-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"])>.t-container tui-data-list{padding:0;margin:0 -.5rem}tui-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"]) [tuiDropdownButton][tuiDropdownButton]{position:fixed;display:inline-flex;inset-inline-end:1rem;inset-block-end:max(1rem,env(safe-area-inset-bottom))}.t-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"]){touch-action:none;visibility:hidden}.t-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"]) *{touch-action:inherit;visibility:inherit}.t-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"]) tui-root{visibility:visible}.t-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"]) tui-root .t-root-content,.t-dropdown-mobile:where(*[data-tui-version=\"5.2.0\"]) tui-root tui-dialogs{visibility:hidden}\n"] }]
|
|
95
95
|
}], ctorParameters: () => [] });
|
|
96
96
|
|
|
97
97
|
class TuiDropdownMobile {
|
|
@@ -13,11 +13,11 @@ const TO = [{ transform: 'scale(0)', opacity: '0.12' }, { opacity: '0.12' }];
|
|
|
13
13
|
const FROM = [{ opacity: '0.12' }, { opacity: '0' }];
|
|
14
14
|
class Styles {
|
|
15
15
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: Styles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: Styles, isStandalone: true, selector: "ng-component", exportAs: ["tui-ripple-5.
|
|
16
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: Styles, isStandalone: true, selector: "ng-component", exportAs: ["tui-ripple-5.2.0"], ngImport: i0, template: '', isInline: true, styles: [".tui-ripple:where(*[data-tui-version=\"5.2.0\"]){position:absolute;z-index:100;opacity:.12;border-radius:100%;background:var(--tui-ripple-background, currentColor);animation-fill-mode:forwards;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
17
17
|
}
|
|
18
18
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: Styles, decorators: [{
|
|
19
19
|
type: Component,
|
|
20
|
-
args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-ripple-${TUI_VERSION}`, styles: [".tui-ripple:where(*[data-tui-version=\"5.
|
|
20
|
+
args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-ripple-${TUI_VERSION}`, styles: [".tui-ripple:where(*[data-tui-version=\"5.2.0\"]){position:absolute;z-index:100;opacity:.12;border-radius:100%;background:var(--tui-ripple-background, currentColor);animation-fill-mode:forwards;pointer-events:none}\n"] }]
|
|
21
21
|
}] });
|
|
22
22
|
class TuiRipple {
|
|
23
23
|
constructor() {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@taiga-ui/addon-mobile",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.2.0",
|
|
4
4
|
"description": "Extension package for Taiga UI that adds support for mobile specific behaviors such as custom data pickers, dropdowns, etc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -40,10 +40,6 @@
|
|
|
40
40
|
"types": "./components/index.d.ts",
|
|
41
41
|
"default": "./fesm2022/taiga-ui-addon-mobile-components.mjs"
|
|
42
42
|
},
|
|
43
|
-
"./directives": {
|
|
44
|
-
"types": "./directives/index.d.ts",
|
|
45
|
-
"default": "./fesm2022/taiga-ui-addon-mobile-directives.mjs"
|
|
46
|
-
},
|
|
47
43
|
"./services": {
|
|
48
44
|
"types": "./services/index.d.ts",
|
|
49
45
|
"default": "./fesm2022/taiga-ui-addon-mobile-services.mjs"
|
|
@@ -80,6 +76,10 @@
|
|
|
80
76
|
"types": "./components/tab-bar/index.d.ts",
|
|
81
77
|
"default": "./fesm2022/taiga-ui-addon-mobile-components-tab-bar.mjs"
|
|
82
78
|
},
|
|
79
|
+
"./directives": {
|
|
80
|
+
"types": "./directives/index.d.ts",
|
|
81
|
+
"default": "./fesm2022/taiga-ui-addon-mobile-directives.mjs"
|
|
82
|
+
},
|
|
83
83
|
"./directives/dropdown-mobile": {
|
|
84
84
|
"types": "./directives/dropdown-mobile/index.d.ts",
|
|
85
85
|
"default": "./fesm2022/taiga-ui-addon-mobile-directives-dropdown-mobile.mjs"
|
|
@@ -111,10 +111,10 @@
|
|
|
111
111
|
"@angular/core": ">=19.0.0",
|
|
112
112
|
"@ng-web-apis/common": "^5.2.0",
|
|
113
113
|
"@ng-web-apis/platform": "^5.2.0",
|
|
114
|
-
"@taiga-ui/cdk": "5.
|
|
115
|
-
"@taiga-ui/core": "5.
|
|
116
|
-
"@taiga-ui/kit": "5.
|
|
117
|
-
"@taiga-ui/layout": "5.
|
|
114
|
+
"@taiga-ui/cdk": "5.2.0",
|
|
115
|
+
"@taiga-ui/core": "5.2.0",
|
|
116
|
+
"@taiga-ui/kit": "5.2.0",
|
|
117
|
+
"@taiga-ui/layout": "5.2.0",
|
|
118
118
|
"@taiga-ui/polymorpheus": "^5.0.0",
|
|
119
119
|
"rxjs": ">=7.0.0"
|
|
120
120
|
},
|
|
@@ -7,11 +7,12 @@
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
[tuiSubtitle] {
|
|
10
|
-
font: var(--tui-typography-
|
|
10
|
+
font: var(--tui-typography-ui-m);
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
+ [tuiDescription] {
|
|
14
14
|
margin-block-start: 1rem;
|
|
15
|
+
font: var(--tui-typography-ui-l);
|
|
15
16
|
}
|
|
16
17
|
}
|
|
17
18
|
|
|
@@ -20,13 +21,9 @@
|
|
|
20
21
|
[tuiTitle] {
|
|
21
22
|
gap: 0.5rem;
|
|
22
23
|
}
|
|
23
|
-
}
|
|
24
24
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
[tuiLink] {
|
|
29
|
-
font: var(--tui-typography-body-l);
|
|
25
|
+
[tuiSubtitle] {
|
|
26
|
+
font: var(--tui-typography-ui-m);
|
|
30
27
|
}
|
|
31
28
|
}
|
|
32
29
|
|
|
@@ -34,13 +31,31 @@
|
|
|
34
31
|
&[data-size='body-l'],
|
|
35
32
|
&[data-size='body-m'],
|
|
36
33
|
&[data-size='body-s'] {
|
|
34
|
+
font: var(--tui-typography-heading-h6);
|
|
35
|
+
|
|
37
36
|
[tuiTitle],
|
|
38
37
|
[tuiAccessories] {
|
|
39
|
-
font:
|
|
38
|
+
font: inherit;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
[tuiTitle] {
|
|
42
|
+
gap: 0.25rem;
|
|
40
43
|
}
|
|
41
44
|
|
|
42
45
|
[tuiSubtitle] {
|
|
43
46
|
font: var(--tui-typography-ui-s);
|
|
44
47
|
}
|
|
48
|
+
|
|
49
|
+
+ [tuiDescription] {
|
|
50
|
+
margin-block-start: 0.5rem;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
[tuiAccessories] {
|
|
55
|
+
gap: 1rem;
|
|
56
|
+
|
|
57
|
+
[tuiLink] {
|
|
58
|
+
font: var(--tui-typography-ui-l);
|
|
59
|
+
}
|
|
45
60
|
}
|
|
46
61
|
}
|