@taiga-ui/core 4.51.0 → 4.52.0-canary.34c26c6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiga-ui/core",
-  "version": "4.51.0",
+  "version": "4.52.0-canary.34c26c6",
   "description": "Core library for creating Angular components and applications using Taiga UI",
   "keywords": [
     "angular",
@@ -21,317 +21,217 @@
     },
     ".": {
       "types": "./index.d.ts",
-      "esm2022": "./esm2022/taiga-ui-core.mjs",
-      "esm": "./esm2022/taiga-ui-core.mjs",
       "default": "./fesm2022/taiga-ui-core.mjs"
     },
     "./animations": {
       "types": "./animations/index.d.ts",
-      "esm2022": "./esm2022/animations/taiga-ui-core-animations.mjs",
-      "esm": "./esm2022/animations/taiga-ui-core-animations.mjs",
       "default": "./fesm2022/taiga-ui-core-animations.mjs"
     },
     "./classes": {
       "types": "./classes/index.d.ts",
-      "esm2022": "./esm2022/classes/taiga-ui-core-classes.mjs",
-      "esm": "./esm2022/classes/taiga-ui-core-classes.mjs",
       "default": "./fesm2022/taiga-ui-core-classes.mjs"
     },
     "./components": {
       "types": "./components/index.d.ts",
-      "esm2022": "./esm2022/components/taiga-ui-core-components.mjs",
-      "esm": "./esm2022/components/taiga-ui-core-components.mjs",
       "default": "./fesm2022/taiga-ui-core-components.mjs"
     },
     "./directives": {
       "types": "./directives/index.d.ts",
-      "esm2022": "./esm2022/directives/taiga-ui-core-directives.mjs",
-      "esm": "./esm2022/directives/taiga-ui-core-directives.mjs",
       "default": "./fesm2022/taiga-ui-core-directives.mjs"
     },
     "./pipes": {
       "types": "./pipes/index.d.ts",
-      "esm2022": "./esm2022/pipes/taiga-ui-core-pipes.mjs",
-      "esm": "./esm2022/pipes/taiga-ui-core-pipes.mjs",
       "default": "./fesm2022/taiga-ui-core-pipes.mjs"
     },
     "./services": {
       "types": "./services/index.d.ts",
-      "esm2022": "./esm2022/services/taiga-ui-core-services.mjs",
-      "esm": "./esm2022/services/taiga-ui-core-services.mjs",
       "default": "./fesm2022/taiga-ui-core-services.mjs"
     },
     "./tokens": {
       "types": "./tokens/index.d.ts",
-      "esm2022": "./esm2022/tokens/taiga-ui-core-tokens.mjs",
-      "esm": "./esm2022/tokens/taiga-ui-core-tokens.mjs",
       "default": "./fesm2022/taiga-ui-core-tokens.mjs"
     },
     "./types": {
       "types": "./types/index.d.ts",
-      "esm2022": "./esm2022/types/taiga-ui-core-types.mjs",
-      "esm": "./esm2022/types/taiga-ui-core-types.mjs",
       "default": "./fesm2022/taiga-ui-core-types.mjs"
     },
     "./utils": {
       "types": "./utils/index.d.ts",
-      "esm2022": "./esm2022/utils/taiga-ui-core-utils.mjs",
-      "esm": "./esm2022/utils/taiga-ui-core-utils.mjs",
       "default": "./fesm2022/taiga-ui-core-utils.mjs"
     },
     "./components/alert": {
       "types": "./components/alert/index.d.ts",
-      "esm2022": "./esm2022/components/alert/taiga-ui-core-components-alert.mjs",
-      "esm": "./esm2022/components/alert/taiga-ui-core-components-alert.mjs",
       "default": "./fesm2022/taiga-ui-core-components-alert.mjs"
     },
     "./components/button": {
       "types": "./components/button/index.d.ts",
-      "esm2022": "./esm2022/components/button/taiga-ui-core-components-button.mjs",
-      "esm": "./esm2022/components/button/taiga-ui-core-components-button.mjs",
       "default": "./fesm2022/taiga-ui-core-components-button.mjs"
     },
     "./components/calendar": {
       "types": "./components/calendar/index.d.ts",
-      "esm2022": "./esm2022/components/calendar/taiga-ui-core-components-calendar.mjs",
-      "esm": "./esm2022/components/calendar/taiga-ui-core-components-calendar.mjs",
       "default": "./fesm2022/taiga-ui-core-components-calendar.mjs"
     },
     "./components/data-list": {
       "types": "./components/data-list/index.d.ts",
-      "esm2022": "./esm2022/components/data-list/taiga-ui-core-components-data-list.mjs",
-      "esm": "./esm2022/components/data-list/taiga-ui-core-components-data-list.mjs",
       "default": "./fesm2022/taiga-ui-core-components-data-list.mjs"
     },
     "./components/dialog": {
       "types": "./components/dialog/index.d.ts",
-      "esm2022": "./esm2022/components/dialog/taiga-ui-core-components-dialog.mjs",
-      "esm": "./esm2022/components/dialog/taiga-ui-core-components-dialog.mjs",
       "default": "./fesm2022/taiga-ui-core-components-dialog.mjs"
     },
     "./components/error": {
       "types": "./components/error/index.d.ts",
-      "esm2022": "./esm2022/components/error/taiga-ui-core-components-error.mjs",
-      "esm": "./esm2022/components/error/taiga-ui-core-components-error.mjs",
       "default": "./fesm2022/taiga-ui-core-components-error.mjs"
     },
     "./components/expand": {
       "types": "./components/expand/index.d.ts",
-      "esm2022": "./esm2022/components/expand/taiga-ui-core-components-expand.mjs",
-      "esm": "./esm2022/components/expand/taiga-ui-core-components-expand.mjs",
       "default": "./fesm2022/taiga-ui-core-components-expand.mjs"
     },
     "./components/fullscreen": {
       "types": "./components/fullscreen/index.d.ts",
-      "esm2022": "./esm2022/components/fullscreen/taiga-ui-core-components-fullscreen.mjs",
-      "esm": "./esm2022/components/fullscreen/taiga-ui-core-components-fullscreen.mjs",
       "default": "./fesm2022/taiga-ui-core-components-fullscreen.mjs"
     },
     "./components/icon": {
       "types": "./components/icon/index.d.ts",
-      "esm2022": "./esm2022/components/icon/taiga-ui-core-components-icon.mjs",
-      "esm": "./esm2022/components/icon/taiga-ui-core-components-icon.mjs",
       "default": "./fesm2022/taiga-ui-core-components-icon.mjs"
     },
     "./components/label": {
       "types": "./components/label/index.d.ts",
-      "esm2022": "./esm2022/components/label/taiga-ui-core-components-label.mjs",
-      "esm": "./esm2022/components/label/taiga-ui-core-components-label.mjs",
       "default": "./fesm2022/taiga-ui-core-components-label.mjs"
     },
     "./components/link": {
       "types": "./components/link/index.d.ts",
-      "esm2022": "./esm2022/components/link/taiga-ui-core-components-link.mjs",
-      "esm": "./esm2022/components/link/taiga-ui-core-components-link.mjs",
       "default": "./fesm2022/taiga-ui-core-components-link.mjs"
     },
     "./components/loader": {
       "types": "./components/loader/index.d.ts",
-      "esm2022": "./esm2022/components/loader/taiga-ui-core-components-loader.mjs",
-      "esm": "./esm2022/components/loader/taiga-ui-core-components-loader.mjs",
       "default": "./fesm2022/taiga-ui-core-components-loader.mjs"
     },
     "./components/notification": {
       "types": "./components/notification/index.d.ts",
-      "esm2022": "./esm2022/components/notification/taiga-ui-core-components-notification.mjs",
-      "esm": "./esm2022/components/notification/taiga-ui-core-components-notification.mjs",
       "default": "./fesm2022/taiga-ui-core-components-notification.mjs"
     },
     "./components/root": {
       "types": "./components/root/index.d.ts",
-      "esm2022": "./esm2022/components/root/taiga-ui-core-components-root.mjs",
-      "esm": "./esm2022/components/root/taiga-ui-core-components-root.mjs",
       "default": "./fesm2022/taiga-ui-core-components-root.mjs"
     },
     "./components/scrollbar": {
       "types": "./components/scrollbar/index.d.ts",
-      "esm2022": "./esm2022/components/scrollbar/taiga-ui-core-components-scrollbar.mjs",
-      "esm": "./esm2022/components/scrollbar/taiga-ui-core-components-scrollbar.mjs",
       "default": "./fesm2022/taiga-ui-core-components-scrollbar.mjs"
     },
     "./components/spin-button": {
       "types": "./components/spin-button/index.d.ts",
-      "esm2022": "./esm2022/components/spin-button/taiga-ui-core-components-spin-button.mjs",
-      "esm": "./esm2022/components/spin-button/taiga-ui-core-components-spin-button.mjs",
       "default": "./fesm2022/taiga-ui-core-components-spin-button.mjs"
     },
     "./components/textfield": {
       "types": "./components/textfield/index.d.ts",
-      "esm2022": "./esm2022/components/textfield/taiga-ui-core-components-textfield.mjs",
-      "esm": "./esm2022/components/textfield/taiga-ui-core-components-textfield.mjs",
       "default": "./fesm2022/taiga-ui-core-components-textfield.mjs"
     },
     "./directives/appearance": {
       "types": "./directives/appearance/index.d.ts",
-      "esm2022": "./esm2022/directives/appearance/taiga-ui-core-directives-appearance.mjs",
-      "esm": "./esm2022/directives/appearance/taiga-ui-core-directives-appearance.mjs",
       "default": "./fesm2022/taiga-ui-core-directives-appearance.mjs"
     },
     "./directives/date-format": {
       "types": "./directives/date-format/index.d.ts",
-      "esm2022": "./esm2022/directives/date-format/taiga-ui-core-directives-date-format.mjs",
-      "esm": "./esm2022/directives/date-format/taiga-ui-core-directives-date-format.mjs",
       "default": "./fesm2022/taiga-ui-core-directives-date-format.mjs"
     },
     "./directives/dropdown": {
       "types": "./directives/dropdown/index.d.ts",
-      "esm2022": "./esm2022/directives/dropdown/taiga-ui-core-directives-dropdown.mjs",
-      "esm": "./esm2022/directives/dropdown/taiga-ui-core-directives-dropdown.mjs",
       "default": "./fesm2022/taiga-ui-core-directives-dropdown.mjs"
     },
     "./directives/group": {
       "types": "./directives/group/index.d.ts",
-      "esm2022": "./esm2022/directives/group/taiga-ui-core-directives-group.mjs",
-      "esm": "./esm2022/directives/group/taiga-ui-core-directives-group.mjs",
       "default": "./fesm2022/taiga-ui-core-directives-group.mjs"
     },
     "./directives/hint": {
       "types": "./directives/hint/index.d.ts",
-      "esm2022": "./esm2022/directives/hint/taiga-ui-core-directives-hint.mjs",
-      "esm": "./esm2022/directives/hint/taiga-ui-core-directives-hint.mjs",
       "default": "./fesm2022/taiga-ui-core-directives-hint.mjs"
     },
     "./directives/icons": {
       "types": "./directives/icons/index.d.ts",
-      "esm2022": "./esm2022/directives/icons/taiga-ui-core-directives-icons.mjs",
-      "esm": "./esm2022/directives/icons/taiga-ui-core-directives-icons.mjs",
       "default": "./fesm2022/taiga-ui-core-directives-icons.mjs"
     },
     "./directives/items-handlers": {
       "types": "./directives/items-handlers/index.d.ts",
-      "esm2022": "./esm2022/directives/items-handlers/taiga-ui-core-directives-items-handlers.mjs",
-      "esm": "./esm2022/directives/items-handlers/taiga-ui-core-directives-items-handlers.mjs",
       "default": "./fesm2022/taiga-ui-core-directives-items-handlers.mjs"
     },
     "./directives/number-format": {
       "types": "./directives/number-format/index.d.ts",
-      "esm2022": "./esm2022/directives/number-format/taiga-ui-core-directives-number-format.mjs",
-      "esm": "./esm2022/directives/number-format/taiga-ui-core-directives-number-format.mjs",
       "default": "./fesm2022/taiga-ui-core-directives-number-format.mjs"
     },
     "./directives/popup": {
       "types": "./directives/popup/index.d.ts",
-      "esm2022": "./esm2022/directives/popup/taiga-ui-core-directives-popup.mjs",
-      "esm": "./esm2022/directives/popup/taiga-ui-core-directives-popup.mjs",
       "default": "./fesm2022/taiga-ui-core-directives-popup.mjs"
     },
     "./directives/surface": {
       "types": "./directives/surface/index.d.ts",
-      "esm2022": "./esm2022/directives/surface/taiga-ui-core-directives-surface.mjs",
-      "esm": "./esm2022/directives/surface/taiga-ui-core-directives-surface.mjs",
       "default": "./fesm2022/taiga-ui-core-directives-surface.mjs"
     },
     "./directives/title": {
       "types": "./directives/title/index.d.ts",
-      "esm2022": "./esm2022/directives/title/taiga-ui-core-directives-title.mjs",
-      "esm": "./esm2022/directives/title/taiga-ui-core-directives-title.mjs",
       "default": "./fesm2022/taiga-ui-core-directives-title.mjs"
     },
     "./pipes/auto-color": {
       "types": "./pipes/auto-color/index.d.ts",
-      "esm2022": "./esm2022/pipes/auto-color/taiga-ui-core-pipes-auto-color.mjs",
-      "esm": "./esm2022/pipes/auto-color/taiga-ui-core-pipes-auto-color.mjs",
       "default": "./fesm2022/taiga-ui-core-pipes-auto-color.mjs"
     },
     "./pipes/calendar-sheet": {
       "types": "./pipes/calendar-sheet/index.d.ts",
-      "esm2022": "./esm2022/pipes/calendar-sheet/taiga-ui-core-pipes-calendar-sheet.mjs",
-      "esm": "./esm2022/pipes/calendar-sheet/taiga-ui-core-pipes-calendar-sheet.mjs",
       "default": "./fesm2022/taiga-ui-core-pipes-calendar-sheet.mjs"
     },
     "./pipes/fallback-src": {
       "types": "./pipes/fallback-src/index.d.ts",
-      "esm2022": "./esm2022/pipes/fallback-src/taiga-ui-core-pipes-fallback-src.mjs",
-      "esm": "./esm2022/pipes/fallback-src/taiga-ui-core-pipes-fallback-src.mjs",
       "default": "./fesm2022/taiga-ui-core-pipes-fallback-src.mjs"
     },
     "./pipes/flag": {
       "types": "./pipes/flag/index.d.ts",
-      "esm2022": "./esm2022/pipes/flag/taiga-ui-core-pipes-flag.mjs",
-      "esm": "./esm2022/pipes/flag/taiga-ui-core-pipes-flag.mjs",
       "default": "./fesm2022/taiga-ui-core-pipes-flag.mjs"
     },
     "./pipes/format-date": {
       "types": "./pipes/format-date/index.d.ts",
-      "esm2022": "./esm2022/pipes/format-date/taiga-ui-core-pipes-format-date.mjs",
-      "esm": "./esm2022/pipes/format-date/taiga-ui-core-pipes-format-date.mjs",
       "default": "./fesm2022/taiga-ui-core-pipes-format-date.mjs"
     },
     "./pipes/format-number": {
       "types": "./pipes/format-number/index.d.ts",
-      "esm2022": "./esm2022/pipes/format-number/taiga-ui-core-pipes-format-number.mjs",
-      "esm": "./esm2022/pipes/format-number/taiga-ui-core-pipes-format-number.mjs",
       "default": "./fesm2022/taiga-ui-core-pipes-format-number.mjs"
     },
     "./pipes/initials": {
       "types": "./pipes/initials/index.d.ts",
-      "esm2022": "./esm2022/pipes/initials/taiga-ui-core-pipes-initials.mjs",
-      "esm": "./esm2022/pipes/initials/taiga-ui-core-pipes-initials.mjs",
       "default": "./fesm2022/taiga-ui-core-pipes-initials.mjs"
     },
     "./pipes/month": {
       "types": "./pipes/month/index.d.ts",
-      "esm2022": "./esm2022/pipes/month/taiga-ui-core-pipes-month.mjs",
-      "esm": "./esm2022/pipes/month/taiga-ui-core-pipes-month.mjs",
       "default": "./fesm2022/taiga-ui-core-pipes-month.mjs"
     },
     "./pipes/order-week-days": {
       "types": "./pipes/order-week-days/index.d.ts",
-      "esm2022": "./esm2022/pipes/order-week-days/taiga-ui-core-pipes-order-week-days.mjs",
-      "esm": "./esm2022/pipes/order-week-days/taiga-ui-core-pipes-order-week-days.mjs",
       "default": "./fesm2022/taiga-ui-core-pipes-order-week-days.mjs"
     },
     "./utils/dom": {
       "types": "./utils/dom/index.d.ts",
-      "esm2022": "./esm2022/utils/dom/taiga-ui-core-utils-dom.mjs",
-      "esm": "./esm2022/utils/dom/taiga-ui-core-utils-dom.mjs",
       "default": "./fesm2022/taiga-ui-core-utils-dom.mjs"
     },
     "./utils/format": {
       "types": "./utils/format/index.d.ts",
-      "esm2022": "./esm2022/utils/format/taiga-ui-core-utils-format.mjs",
-      "esm": "./esm2022/utils/format/taiga-ui-core-utils-format.mjs",
       "default": "./fesm2022/taiga-ui-core-utils-format.mjs"
     },
     "./utils/miscellaneous": {
       "types": "./utils/miscellaneous/index.d.ts",
-      "esm2022": "./esm2022/utils/miscellaneous/taiga-ui-core-utils-miscellaneous.mjs",
-      "esm": "./esm2022/utils/miscellaneous/taiga-ui-core-utils-miscellaneous.mjs",
       "default": "./fesm2022/taiga-ui-core-utils-miscellaneous.mjs"
     }
   },
   "peerDependencies": {
-    "@angular/animations": ">=16.0.0",
-    "@angular/common": ">=16.0.0",
-    "@angular/core": ">=16.0.0",
-    "@angular/forms": ">=16.0.0",
-    "@angular/platform-browser": ">=16.0.0",
-    "@angular/router": ">=16.0.0",
+    "@angular/animations": ">=19.0.0",
+    "@angular/common": ">=19.0.0",
+    "@angular/core": ">=19.0.0",
+    "@angular/forms": ">=19.0.0",
+    "@angular/platform-browser": ">=19.0.0",
+    "@angular/router": ">=19.0.0",
     "@ng-web-apis/common": "^4.12.0",
     "@ng-web-apis/mutation-observer": "^4.12.0",
-    "@taiga-ui/cdk": "^4.51.0",
-    "@taiga-ui/event-plugins": "^4.6.0",
-    "@taiga-ui/i18n": "^4.51.0",
+    "@taiga-ui/cdk": "^4.52.0",
+    "@taiga-ui/event-plugins": "^4.7.0",
+    "@taiga-ui/i18n": "^4.52.0",
     "@taiga-ui/polymorpheus": "^4.9.0",
     "rxjs": ">=7.0.0"
   },

package/styles/components/icon.less

@@ -5,14 +5,15 @@
  * @selector tui-icon
  *
  * @description
- * Container for displaying icons colored with CSS (color/background) using mask
+ * Container for displaying icons colored with CSS (color/background)
  *
  * @vars
- * --t-icon — mask for the icon
+ * --t-icon — depending on the data-icon, it can serve as either a mask (`svg`),
+  a background (`image`), or content (`font`) for the icon.
  * --t-icon-bg — mask for the background
  *
  * @example
- * <tui-icon style="--t-icon: url('icon.svg')"></tui-icon>
+ * <tui-icon data-icon="svg" style="--t-icon: url('icon.svg')"></tui-icon>
  *
  * @see-also
  * Icons
@@ -44,4 +45,18 @@ tui-icon {
         mask: var(--t-icon) no-repeat center/contain;
         background: currentColor;
     }
+
+    &[data-icon='image']::after {
+        mask: none;
+        background: var(--t-icon) no-repeat center/contain;
+    }
+
+    &[data-icon='font']::after {
+        content: var(--t-icon);
+        mask: none;
+        background: none;
+        font: 1em/1 var(--tui-font-icon, inherit);
+        text-align: center;
+        text-transform: none;
+    }
 }

package/styles/components/icons.less

@@ -3,14 +3,16 @@
  * @selector [tuiIcons]
  *
  * @description
- * Icons directive applies CSS mask to ::before and ::after pseudo elements
+ * Icons directive applies styles to ::before and ::after pseudo elements
  *
  * @vars
- * --t-icon-start — mask for ::before element
- * --t-icon-end — mask for ::after element
+ * --t-icon-start — depending on the data-icon-start, it can serve as either a mask (`svg`),
+  a background (`image`), or content (`font`) for the ::before element
+ * --t-icon-end — depending on the data-icon-end, it can serve as either a mask (`svg`),
+  a background (`image`), or content (`font`) for the ::after element
  *
  * @example
- * <button tuiIcons style="--t-icon-start: url('icon.svg')"></button>
+ * <button tuiIcons data-icon-start="svg" style="--t-icon-start: url('icon.svg')"></button>
  *
  * @see-also
  * Button, Icon, Link
@@ -22,7 +24,6 @@
     &::before,
     &::after {
         content: '';
-        display: var(--t-icon-start);
         inline-size: 1em;
         block-size: 1em;
         line-height: 1em;
@@ -30,11 +31,44 @@
         flex-shrink: 0;
         box-sizing: content-box;
         background: currentColor;
+    }
+
+    &::before {
+        display: var(--t-icon-start, none);
         mask: var(--t-icon-start) no-repeat center/contain padding-box;
     }
 
     &::after {
-        display: var(--t-icon-end);
+        display: var(--t-icon-end, none);
         mask: var(--t-icon-end) no-repeat center/contain padding-box;
     }
+
+    &[data-icon-start='image']::before {
+        mask: none;
+        background: var(--t-icon-start) no-repeat center/contain padding-box;
+    }
+
+    &[data-icon-end='image']::after {
+        mask: none;
+        background: var(--t-icon-end) no-repeat center/contain padding-box;
+    }
+
+    &[data-icon-start='font']::before,
+    &[data-icon-end='font']::after {
+        display: grid;
+        mask: none;
+        background: none;
+        font: 1.3em/1 var(--tui-font-icon, inherit);
+        text-align: center;
+        place-content: center;
+        text-transform: none;
+    }
+
+    &[data-icon-start='font']::before {
+        content: var(--t-icon-start);
+    }
+
+    &[data-icon-end='font']::after {
+        content: var(--t-icon-end);
+    }
 }

package/tokens/icon-resolver.d.ts

@@ -5,5 +5,6 @@ export declare const TUI_ICON_RESOLVER: InjectionToken<TuiStringHandler<string>>
  * @deprecated use {@link TUI_ICON_RESOLVER}
  */
 export declare const TUI_ICON_START_RESOLVER: InjectionToken<TuiStringHandler<string>>;
+export declare function tuiGetIconMode(icon?: string | null): 'font' | 'image' | 'svg' | null;
 export declare function tuiInjectIconResolver(): TuiStringHandler<string>;
 export declare function tuiIconResolverProvider(useValue: TuiStringHandler<string>): Provider;