@taiga-ui/addon-mobile 4.52.0-canary.974ca4b → 4.52.0-canary.a1004d6

package/fesm2022/taiga-ui-addon-mobile-services.mjs.map

@@ -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":";;;;;;MAQa,kBAAkB,CAAA;AAH/B,IAAA,WAAA,GAAA;AAIqB,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,QAAQ,CAAC;QACtB,IAAG,CAAA,GAAA,GAAG,KAAK,CACxB,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,UAAU,CAAC,EAC/B,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC,IAAI,CACjC,MAAM,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CACnD,CACJ,CAAC,SAAS,CAAC,MAAK;YACb,IAAI,CAAC,IAAI,EAAE;AACf,SAAC,CAAC;QAGM,IAAS,CAAA,SAAA,GAAG,EAAE;AAoCzB;IAlCU,WAAW,GAAA;AACd,QAAA,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE;QACtB,IAAI,CAAC,IAAI,EAAE;;IAGR,MAAM,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,IAAI,CAAC,IAAI,EAAE;;aACR;YACH,IAAI,CAAC,IAAI,EAAE;;;IAIZ,IAAI,GAAA;QACP,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAqB;QAE3D,IAAI,OAAO,EAAE,SAAS,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,EAAE;YAClD;;AAGJ,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,QAAA,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS;AAClC,QAAA,OAAO,CAAC,SAAS,GAAG,MAAM;;IAGvB,IAAI,GAAA;AACP,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACf;;AAGJ,QAAA,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,MAAM;QAC/B,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS;AACvC,QAAA,IAAI,CAAC,OAAO,GAAG,SAAS;;+GA9CnB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,cAFf,MAAM,EAAA,CAAA,CAAA;;4FAET,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAH9B,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,UAAU,EAAE,MAAM;AACrB,iBAAA;;;ACPD;;AAEG;;;;"}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@taiga-ui/addon-mobile",
-  "version": "4.52.0-canary.974ca4b",
+  "version": "4.52.0-canary.a1004d6",
   "description": "Extension package for Taiga UI that adds support for mobile specific behaviors such as custom data pickers, dropdowns, etc.",
   "keywords": [
     "angular",
@@ -26,22 +26,22 @@
       "types": "./components/index.d.ts",
       "default": "./fesm2022/taiga-ui-addon-mobile-components.mjs"
     },
-    "./services": {
-      "types": "./services/index.d.ts",
-      "default": "./fesm2022/taiga-ui-addon-mobile-services.mjs"
-    },
     "./directives": {
       "types": "./directives/index.d.ts",
       "default": "./fesm2022/taiga-ui-addon-mobile-directives.mjs"
     },
-    "./components/mobile-calendar": {
-      "types": "./components/mobile-calendar/index.d.ts",
-      "default": "./fesm2022/taiga-ui-addon-mobile-components-mobile-calendar.mjs"
+    "./services": {
+      "types": "./services/index.d.ts",
+      "default": "./fesm2022/taiga-ui-addon-mobile-services.mjs"
     },
     "./components/bottom-sheet": {
       "types": "./components/bottom-sheet/index.d.ts",
       "default": "./fesm2022/taiga-ui-addon-mobile-components-bottom-sheet.mjs"
     },
+    "./components/mobile-calendar": {
+      "types": "./components/mobile-calendar/index.d.ts",
+      "default": "./fesm2022/taiga-ui-addon-mobile-components-mobile-calendar.mjs"
+    },
     "./components/mobile-calendar-dropdown": {
       "types": "./components/mobile-calendar-dropdown/index.d.ts",
       "default": "./fesm2022/taiga-ui-addon-mobile-components-mobile-calendar-dropdown.mjs"
@@ -82,13 +82,13 @@
       "types": "./directives/responsive-dialog/index.d.ts",
       "default": "./fesm2022/taiga-ui-addon-mobile-directives-responsive-dialog.mjs"
     },
-    "./directives/touchable": {
-      "types": "./directives/touchable/index.d.ts",
-      "default": "./fesm2022/taiga-ui-addon-mobile-directives-touchable.mjs"
-    },
     "./directives/ripple": {
       "types": "./directives/ripple/index.d.ts",
       "default": "./fesm2022/taiga-ui-addon-mobile-directives-ripple.mjs"
+    },
+    "./directives/touchable": {
+      "types": "./directives/touchable/index.d.ts",
+      "default": "./fesm2022/taiga-ui-addon-mobile-directives-touchable.mjs"
     }
   },
   "peerDependencies": {

package/services/index.d.ts

@@ -1 +1,2 @@
 export * from './keyboard.service';
+export * from './theme-color.service';

package/services/theme-color.service.d.ts

@@ -0,0 +1,18 @@
+import { InjectionToken } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare const TUI_THEME_COLOR: InjectionToken<string>;
+interface TuiThemeColor {
+    get color(): string;
+    set color(value: string);
+}
+export declare class TuiThemeColorService implements TuiThemeColor {
+    private current;
+    private readonly doc;
+    private readonly meta;
+    constructor();
+    get color(): string;
+    set color(content: string);
+    static ɵfac: i0.ɵɵFactoryDeclaration<TuiThemeColorService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<TuiThemeColorService>;
+}
+export {};

package/styles/android/app-bar.less

@@ -1,5 +1,5 @@
 tui-app-bar {
-    font: var(--tui-font-heading-6);
+    font: var(--tui-font-heading-h6);
     block-size: 3.5rem;
 
     > .t-content {
@@ -12,6 +12,10 @@ tui-app-bar {
         > * {
             max-inline-size: calc(100% - var(--t-sides, 0px));
         }
+
+        > [tuiProgressBar] {
+            .center-left();
+        }
     }
 
     > :last-child [tuiIconButton] {

package/styles/android/switch.less

@@ -11,6 +11,7 @@ input[tuiSwitch] {
 
     &::before {
         content: '';
+        left: 0;
         display: block;
         block-size: 100%;
         inline-size: 100%;

package/styles/common/badge-notification.less

@@ -1,6 +1,6 @@
 tui-badge-notification {
     &[data-size='l'] {
-        font: var(--tui-font-text-m);
+        font: var(--tui-font-body-m);
     }
 
     &[data-size='m'] {

package/styles/common/badge.less

@@ -3,7 +3,7 @@ tui-badge,
     font-weight: 600;
 
     &[data-size='s'] {
-        font: var(--tui-font-text-xs);
+        font: var(--tui-font-body-xs);
         font-weight: bold;
     }
 
@@ -11,7 +11,7 @@ tui-badge,
         --t-padding: 0 0.625rem;
         --t-size: 1.75rem;
 
-        font: var(--tui-font-text-s);
+        font: var(--tui-font-body-s);
         font-weight: 600;
     }
 }

package/styles/common/block-status.less

@@ -24,7 +24,7 @@ tui-block-status {
     h4,
     h5,
     h6 {
-        font: var(--tui-font-heading-5);
+        font: var(--tui-font-heading-h5);
 
         & ~ .t-block-text:not(:empty) {
             margin-block-start: 0.5rem;

package/styles/common/button.less

@@ -24,7 +24,7 @@
     }
 
     &[data-size='l'] {
-        font: var(--tui-font-text-l);
+        font: var(--tui-font-body-l);
         font-weight: bold;
     }
 

package/styles/common/header.less

@@ -27,7 +27,7 @@
     &[data-size='body-m'] {
         [tuiTitle],
         [tuiAccessories] {
-            font: var(--tui-font-heading-6);
+            font: var(--tui-font-heading-h6);
         }
     }
 }

package/styles/common/message.less

@@ -1,4 +1,4 @@
 [tuiMessage] {
-    font: var(--tui-font-text-l);
+    font: var(--tui-font-body-l);
     border-radius: 0.875rem;
 }

package/styles/common/segmented.less

@@ -4,7 +4,7 @@ tui-segmented[data-size] {
     --t-margin: -0.25rem;
     --t-height: var(--tui-height-s);
 
-    font: var(--tui-font-text-s);
+    font: var(--tui-font-body-s);
     border-radius: 0.625rem;
 
     tui-icon {

package/styles/common/title.less

@@ -6,7 +6,6 @@
     }
 }
 
-tui-notification [tuiTitle] [tuiSubtitle],
 [tuiNotification] [tuiTitle] [tuiSubtitle] {
     color: var(--tui-text-primary);
 }

package/styles/common/toast.less

@@ -1,7 +1,7 @@
 [tuiToast] {
     min-block-size: 3rem;
     border-radius: 1.5rem;
-    font: var(--tui-font-text-m);
+    font: var(--tui-font-body-m);
 
     [tuiButton]:last-child {
         margin: -0.1875rem -0.4375rem -0.1875rem 0;

package/styles/ios/switch.less

@@ -1,6 +1,55 @@
 @import '@taiga-ui/core/styles/taiga-ui-local.less';
 
-input[tuiSwitch] {
+input[tuiSwitch]._native {
+    block-size: 1.9375rem;
+    inline-size: 3.1875rem;
+    appearance: auto;
+    accent-color: var(--tui-background-accent-2);
+
+    &:invalid {
+        accent-color: var(--tui-status-negative);
+    }
+
+    &::before,
+    &::after {
+        display: none;
+    }
+
+    @supports (anchor-name: --ios26) {
+        inline-size: 4rem;
+        block-size: 1.75rem;
+
+        &::before {
+            .transition(background);
+
+            position: absolute;
+            display: block;
+            inset: 0;
+            border-radius: 10rem;
+            inline-size: 100%;
+            background-color: transparent;
+            mix-blend-mode: color;
+            transform: none;
+        }
+
+        &:invalid:not(:checked)::before {
+            background-color: var(--tui-status-negative);
+        }
+
+        [data-theme='dark'] & {
+            &:invalid:not(:checked)::before {
+                background-color: var(--tui-status-negative-pale);
+            }
+
+            &:disabled:not(:checked)::before {
+                background-color: rgba(255, 255, 255, 0.2);
+                mix-blend-mode: lighten;
+            }
+        }
+    }
+}
+
+input[tuiSwitch]:not(._native) {
     block-size: 1.9375rem;
     inline-size: 3.1875rem;
     border-radius: 2rem;