igniteui-angular 20.0.7 → 20.0.9

package/lib/core/styles/components/time-picker/_time-picker-theme.scss

@@ -1,161 +1,5 @@
 @use 'sass:map';
-@use 'sass:meta';
 @use '../../base' as *;
-@use '../../themes/schemas' as *;
-
-////
-/// @group themes
-/// @access public
-/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
-////
-
-/// If only background color is specified, text/icon color
-/// will be assigned automatically to a contrasting color.
-/// Does ___not___ apply for disabled state colors.
-/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Color} $text-color [null] - The text color of a open time picker.
-/// @param {Color} $hover-text-color [null] - The hover text color of a open time picker.
-/// @param {Color} $selected-text-color [null] -  The text color of a selected item in time picker.
-/// @param {Color} $active-item-background [null] - The background color for current item in focused column inside the time picker.
-/// @param {Color} $active-item-foreground [null] - The foreground color for current item in focused column inside the time picker.
-/// @param {Color} $disabled-text-color [null] - The text color for disabled values.
-/// @param {Color} $disabled-item-background [null] - The background color for disabled values .
-/// @param {Color} $header-background [null] - The header background color of a time picker.
-/// @param {Color} $header-hour-text-color [null] - The header hour text color of a time picker.
-/// @param {Color} $background-color [null] - The time-picker panel background color.
-/// @param {Number} $time-item-size [null] - The height of the time item.
-/// @param {Color} $divider-color [null] - The color for the actions area divider.
-/// @param {Color} $border-color [null] - The border color around the time picker.
-/// @param {box-shadow} $modal-shadow [null] - The custom shadow to be used for the time picker in modal mode.
-/// @param {box-shadow} $dropdown-shadow [null] - The custom shadow to be used for the time picker in dropdown mode.
-/// @param {List} $border-radius [null] - The border radius used for the outline of the picker.
-/// @param {List} $active-item-border-radius [null] - The border radius used for the outline of the currently active item (hours, minutes, AM/PM).
-/// @requires $light-material-schema
-/// @example scss Change the background and text colors in  time picker
-///   $my-time-picker-theme: time-picker-theme(
-///     $text-color: white,
-///     $background-color: black
-///   );
-///   // Pass the theme to the css-vars() mixin
-///   @include css-vars($my-time-picker-theme);
-@function time-picker-theme(
-    $schema: $light-material-schema,
-
-    $border-radius: null,
-    $active-item-border-radius: null,
-
-    $text-color: null,
-    $hover-text-color: null,
-    $selected-text-color: null,
-    $active-item-background: null,
-    $active-item-foreground: null,
-    $disabled-text-color: null,
-    $disabled-item-background: null,
-    $header-background: null,
-    $header-hour-text-color: null,
-    $background-color: null,
-    $modal-shadow: null,
-    $dropdown-shadow: null,
-    $border-color: null,
-    $divider-color: null,
-    $time-item-size: null,
-) {
-    $name: 'igx-time-picker';
-    $selector: '.igx-time-picker';
-    $time-picker-schema: ();
-
-    @if map.has-key($schema, 'time-picker') {
-        $time-picker-schema: map.get($schema, 'time-picker');
-    } @else {
-        $time-picker-schema: $schema;
-    }
-
-    $theme: digest-schema($time-picker-schema);
-
-    @if not($text-color) and $background-color {
-        $text-color: hsla(from adaptive-contrast(var(--background-color)) h s l / 0.7);
-    }
-
-    @if not($hover-text-color) and $text-color {
-        $hover-text-color: hsla(from var(--text-color) h s l / 1);
-    }
-
-    @if not($header-background) and $selected-text-color {
-        $header-background: var(--selected-text-color);
-    }
-
-    @if not($header-background) and $background-color {
-        $header-background: var(--background-color);
-    }
-
-    @if not($header-hour-text-color) and $header-background {
-        $header-hour-text-color: adaptive-contrast(var(--header-background));
-    }
-
-    @if not($selected-text-color) and $active-item-background {
-        $selected-text-color: var(--active-item-background);
-    }
-
-    @if not($active-item-background) and $selected-text-color {
-        $active-item-background: var(--selected-text-color);
-    }
-
-    @if not($active-item-background) and $background-color {
-        $active-item-background: hsla(from adaptive-contrast(var(--background-color)) h s l / .5);
-    }
-
-    @if not($active-item-foreground) and $active-item-background {
-        $active-item-foreground: adaptive-contrast(var(--active-item-background));
-    }
-
-    @if not($selected-text-color) and $background-color {
-        $selected-text-color: adaptive-contrast(var(--background-color));
-    }
-
-    @if not($disabled-text-color) and $disabled-item-background {
-        $disabled-text-color: hsla(from adaptive-contrast(var(--disabled-item-background)) h s l / .6);
-    }
-
-    @if not($border-color) and $background-color {
-        $border-color: hsla(from adaptive-contrast(var(--background-color)) h s l / .6);
-    }
-
-    @if not($divider-color) and $border-color {
-        $divider-color: var(--border-color);
-    }
-
-    @if not($modal-shadow) {
-        $elevation: map.get($time-picker-schema, 'modal-elevation');
-        $modal-shadow: elevation($elevation);
-    }
-
-    @if not($dropdown-shadow) {
-        $elevation: map.get($time-picker-schema, 'dropdown-elevation');
-        $dropdown-shadow: elevation($elevation);
-    }
-
-    @return extend($theme, (
-        name: $name,
-        selector: $selector,
-        text-color: $text-color,
-        hover-text-color: $hover-text-color,
-        selected-text-color: $selected-text-color,
-        active-item-foreground: $active-item-foreground,
-        active-item-background: $active-item-background,
-        disabled-text-color: $disabled-text-color,
-        disabled-item-background: $disabled-item-background,
-        header-background: $header-background,
-        header-hour-text-color: $header-hour-text-color,
-        background-color: $background-color,
-        modal-shadow: $modal-shadow,
-        dropdown-shadow: $dropdown-shadow,
-        border-radius: $border-radius,
-        border-color: $border-color,
-        divider-color: $divider-color,
-        time-item-size: $time-item-size,
-        active-item-border-radius: $active-item-border-radius,
-    ));
-}
 
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars

package/lib/core/styles/components/toast/_toast-theme.scss

@@ -1,74 +1,5 @@
 @use 'sass:map';
 @use '../../base' as *;
-@use '../../themes/schemas' as *;
-
-////
-/// @group themes
-/// @access public
-/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
-/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
-////
-
-/// If only background color is specified,
-/// the text-color will be assigned automatically to a contrasting color.
-///
-/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-///
-/// @param {Color} $background [null] - The background color used for the toast.
-/// @param {Color} $text-color [null] - The text-color used for the toast.
-/// @param {Color} $border-color [null] - The border-color used for the toast.
-///
-/// @param {List} $border-radius [null] - The border radius used for the toast component.
-/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the toast.
-///
-/// @requires $light-material-schema
-///
-/// @example scss Set a custom background color
-///   $my-toast-theme: toast-theme($background: green);
-///   // Pass the theme to the css-vars() mixin
-///   @include css-vars($my-toast-theme);
-@function toast-theme(
-    $schema: $light-material-schema,
-
-    $border-radius: null,
-    $border-color: null,
-    $background: null,
-    $text-color: null,
-    $shadow: null,
-) {
-    $name: 'igx-toast';
-    $toast-schema: ();
-
-    @if map.has-key($schema, 'toast') {
-        $toast-schema: map.get($schema, 'toast');
-    } @else {
-        $toast-schema: $schema;
-    }
-
-    $theme: digest-schema($toast-schema);
-
-    @if not($text-color) and $background {
-        $text-color: adaptive-contrast(var(--background));
-    }
-
-    @if not($border-color) and $text-color {
-        $border-color: hsla(from var(--text-color) h s l / 0.3);
-    }
-
-    @if not($shadow) {
-        $elevation: map.get($toast-schema, 'elevation');
-        $shadow: elevation($elevation);
-    }
-
-    @return extend($theme, (
-        name: $name,
-        background: $background,
-        border-radius: $border-radius,
-        text-color: $text-color,
-        border-color: $border-color,
-        shadow: $shadow,
-    ));
-}
 
 /// Toast Component
 /// @deprecated Use the `css-vars` mixin instead.

package/lib/core/styles/components/tooltip/_tooltip-theme.scss

@@ -1,67 +1,5 @@
 @use 'sass:map';
 @use '../../base' as *;
-@use '../../themes/schemas' as *;
-
-////
-/// @group themes
-/// @access public
-/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
-/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
-////
-
-/// Returns a map containing all style properties related to the theming the tooltip directive.
-/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-///
-/// @param {Color} $background [null] - The background color of the tooltip.
-/// @param {Color} $text-color [null] - The text color of the tooltip.
-///
-/// @param {List} $border-radius [null] - The border radius used for the tooltip component.
-/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the tooltip component.
-///
-/// @requires $light-material-schema
-///
-/// @example scss Change the tooltip background
-///   $my-tooltip-theme: tooltip-theme($background: magenta);
-///   // Pass the theme to the css-vars() mixin
-///   @include css-vars($my-tooltip-theme);
-@function tooltip-theme(
-    $schema: $light-material-schema,
-
-    $border-radius: null,
-    $shadow: null,
-    $background: null,
-    $text-color: null
-) {
-    $name: 'igx-tooltip';
-    $selector: '.igx-tooltip';
-    $tooltip-schema: ();
-
-    @if map.has-key($schema, 'tooltip') {
-        $tooltip-schema: map.get($schema, 'tooltip');
-    } @else {
-        $tooltip-schema: $schema;
-    }
-
-    $theme: digest-schema($tooltip-schema);
-
-    @if not($shadow) {
-        $elevation: map.get($tooltip-schema, 'elevation');
-        $shadow: elevation($elevation);
-    }
-
-    @if not($text-color) and $background {
-        $text-color: adaptive-contrast($background);
-    }
-
-    @return extend($theme, (
-        name: $name,
-        selector: $selector,
-        background: $background,
-        text-color: $text-color,
-        border-radius: $border-radius,
-        shadow: $shadow,
-    ));
-}
 
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars

package/lib/core/styles/components/tree/_tree-theme.scss

@@ -1,133 +1,5 @@
 @use 'sass:map';
-@use 'sass:meta';
 @use '../../base' as *;
-@use '../../themes/schemas' as *;
-
-////
-/// @group themes
-/// @access public
-/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
-////
-
-/// Returns a map containing all style properties related to the theming of the tree component.
-/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Color} background [null] - The background color used for the tree node.
-/// @param {Color} foreground [null] - The color used for the tree node content.
-/// @param {Color} icon-color [null] - The color used for the tree node icon.
-/// @param {Color} background-selected [null] - The background color used for the selected tree node.
-/// @param {Color} foreground-selected [null] - The color used for the content of the selected tree node.
-/// @param {Color} background-active [null] - The background color used for the active tree node.
-/// @param {Color} foreground-active [null] - The color used for the content of the active tree node.
-/// @param {Color} background-active-selected [null] - The background color used for the active selected tree node.
-/// @param {Color} foreground-active-selected [null] - The color used for the content of the active selected tree node.
-/// @param {Color} background-disabled [null] - The background color used for the tree node in disabled state.
-/// @param {Color} foreground-disabled [null] - The color used for the content of the disabled tree node.
-/// @param {Color} drop-area-color [null] - The background color used for the tree node drop aria.
-/// @param {Color} border-color [null] - The outline shadow color used for tree node in focus state.
-/// @param {Color} hover-color [null] - The background color used for the tree node on hover.
-/// @param {Color} hover-selected-color [null] - The background color used for the selected tree node on hover.
-/// @requires $light-material-schema
-///
-/// @example scss Change the tree background
-///   $my-tree-theme: tree-theme($background: magenta);
-///   // Pass the theme to the css-vars() mixin
-///   @include css-vars($my-tree-theme);
-@function tree-theme(
-    $schema: $light-material-schema,
-    $background: null,
-    $background-selected: null,
-    $background-active: null,
-    $background-active-selected: null,
-    $background-disabled: null,
-    $foreground: null,
-    $foreground-selected: null,
-    $foreground-active: null,
-    $foreground-active-selected: null,
-    $foreground-disabled: null,
-    $icon-color: null,
-    $drop-area-color: null,
-    $border-color: null,
-    $hover-color: null,
-    $hover-selected-color: null,
-    $size: null,
-) {
-    $name: 'igx-tree';
-    $selector: 'igx-tree-node';
-    $tree-schema: ();
-
-    @if map.has-key($schema, 'tree') {
-        $tree-schema: map.get($schema, 'tree');
-    } @else {
-        $tree-schema: $schema;
-    }
-
-    $theme: digest-schema($tree-schema);
-
-    @if not($foreground) and $background {
-        $foreground: adaptive-contrast(var(--background));
-    }
-
-    @if not($background-selected) and $background {
-        $background-selected: hsl(from var(--background) h s calc(l * 0.9));
-    }
-
-    @if not($hover-color) and $background {
-        $hover-color: hsla(from adaptive-contrast(var(--background)) h s l / 0.1);
-    }
-
-    @if not($hover-selected-color) and $background-selected {
-        $hover-selected-color: hsl(from var(--background-selected) h s calc(l * 0.9));
-    }
-
-    @if not($foreground-selected) and $background-selected {
-        $foreground-selected: adaptive-contrast(var(--background-selected));
-    }
-
-    @if not($background-active) and $background {
-        $background-active: hsl(from var(--background) h s calc(l * 0.9));
-    }
-
-    @if not($foreground-active) and $background-active {
-        $foreground-active: adaptive-contrast(var(--background-active));
-    }
-
-    @if not($background-active-selected) and $background-active {
-        $background-active-selected: hsl(from var(--background-active) h s calc(l * 0.9));
-    }
-
-    @if not($foreground-active-selected) and $background-active-selected {
-        $foreground-active-selected: adaptive-contrast(var(--background-active-selected));
-    }
-
-    @if not($background-disabled) and $background {
-        $background-disabled: color-mix(in hsl, var(--background), transparent 50%);
-    }
-
-    @if not($foreground-disabled) and $background-disabled {
-        $foreground-disabled: adaptive-contrast(var(--background-disabled));
-    }
-
-    @return extend($theme, (
-        name: $name,
-        selector: $selector,
-        background: $background,
-        foreground: $foreground,
-        icon-color: $icon-color,
-        background-selected: $background-selected,
-        foreground-selected: $foreground-selected,
-        background-active: $background-active,
-        foreground-active: $foreground-active,
-        background-active-selected: $background-active-selected,
-        foreground-active-selected: $foreground-active-selected,
-        background-disabled: $background-disabled,
-        foreground-disabled: $foreground-disabled,
-        drop-area-color: $drop-area-color,
-        border-color: $border-color,
-        hover-color: $hover-color,
-        hover-selected-color: $hover-selected-color,
-        size: $size,
-    ));
-}
 
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars

package/lib/core/styles/components/watermark/_watermark-theme.scss

@@ -1,65 +1,5 @@
 @use 'sass:map';
 @use '../../base' as *;
-@use '../../themes/schemas' as *;
-
-////
-/// @group themes
-/// @access private
-/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
-////
-
-/// Returns a map containing all style properties related to the theming the watermark directive.
-/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Color} $base-color [null] - The base color for all elements of the watermark.
-/// @param {Color} $image-color [null] - The color used for the stamp image.
-/// @param {Number} $image-opacity [null] - The opacity of the stamp image.
-/// @param {Color} $link-background [null] - The background color used for the link.
-/// @param {Color} $color [null] - The color used for the link text.
-/// @param {Color} $border-color [null] - The border color used for the  link.
-/// @param {List} $border-radius [null] - The border radius used for the link.
-///
-/// @example scss Change the watermark link background
-///   $my-watermark-theme: watermark-theme($link-background: magenta);
-///   // Pass the theme to the css-vars() mixin
-///   @include css-vars($my-watermark-theme);
-/// @requires $light-material-schema
-@function watermark-theme(
-    $schema: $light-material-schema,
-    $base-color: null,
-    $image-color: null,
-    $image-opacity: null,
-    $link-background: null,
-    $color: null,
-    $border-color: null,
-    $border-radius: null,
-) {
-    $name: 'igx-watermark';
-    $watermark-schema: ();
-
-    @if map.has-key($schema, 'watermark') {
-        $watermark-schema: map.get($schema, 'watermark');
-    } @else {
-        $watermark-schema: $schema;
-    }
-
-    $theme: digest-schema($watermark-schema);
-
-    @if not($color) and $link-background {
-        $color: text-contrast($link-background);
-    }
-
-    @return extend($theme, (
-        name: $name,
-        selector: 'igc-trial-watermark',
-        base-color: $base-color,
-        image-color: $image-color,
-        image-opacity: $image-opacity,
-        link-background: $link-background,
-        color: $color,
-        border-color: $border-color,
-        border-radius: $border-radius,
-    ));
-}
 
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars

package/lib/core/styles/themes/_core.scss

@@ -80,6 +80,7 @@
 @use '../components/time-picker/time-picker-component' as time-picker;
 @use '../components/tree/tree-component' as tree;
 @use '../components/watermark/watermark-component' as watermark;
+@use '../components/input/file-input-component' as file-input;
 @use '../print';
 
 /// @param {boolean} $print-layout [true] - Activates the printing styles of the components.
@@ -196,6 +197,7 @@
     @include time-picker.component();
     @include tree.component();
     @include watermark.component();
+    @include file-input.component();
 
     // Build the component dependency-tree
     @include base.dependecy-tree(base.$components);

package/lib/core/styles/themes/_index.scss

@@ -5,3 +5,4 @@
 @forward 'igniteui-theming/sass/elevations/presets';
 @forward 'igniteui-theming/sass/typography/presets';
 @forward 'igniteui-theming/sass/animations';
+@forward 'igniteui-theming/sass/themes/components';

package/lib/core/styles/themes/generators/_base.scss

@@ -572,6 +572,17 @@
         @include input-group($input-group-theme-map);
     }
 
+    @if is-used('igx-file-input', $exclude) {
+        $file-input-theme-map: file-input-theme(
+            $schema: $schema,
+        );
+        $file-input-theme-map: meta.call(
+            $theme-handler,
+            $file-input-theme-map
+        );
+        @include file-input($file-input-theme-map);
+    }
+
     @if is-used('igx-list', $exclude) {
         $list-theme-map: list-theme(
             $schema: $schema,

package/lib/core/styles/typography/_bootstrap.scss

@@ -33,6 +33,7 @@
 @use '../components/tree/tree-theme' as *;
 @use '../components/label/label-theme' as *;
 @use '../components/query-builder/query-builder-theme' as *;
+@use '../components/input/file-input-theme' as *;
 
 @mixin typography($type-scale) {
     @include badge-typography();
@@ -80,6 +81,9 @@
         helper-text: 'body-2',
         input-text: 'body-1'
     ));
+    @include file-input-typography($categories: (
+        file-text: 'body-1'
+    ));
     @include linear-bar-typography();
     @include list-typography($categories: (
         item: 'body-2',

package/lib/core/styles/typography/_fluent.scss

@@ -32,6 +32,7 @@
 @use '../components/tree/tree-theme' as *;
 @use '../components/label/label-theme' as *;
 @use '../components/query-builder/query-builder-theme' as *;
+@use '../components/input/file-input-theme' as *;
 
 @mixin typography() {
     @include badge-typography();
@@ -83,6 +84,9 @@
         helper-text: 'caption',
         input-text: 'body-2'
     ));
+    @include file-input-typography($categories: (
+        file-text: 'body-2'
+    ));
     @include linear-bar-typography();
     @include list-typography($categories: (
         header: 'overline',
@@ -100,6 +104,7 @@
     @include radio-typography($categories: (
         label: 'body-2'
     ));
+
     @include slider-typography();
     @include snackbar-typography($categories: (
         text: 'caption'

package/lib/core/styles/typography/_indigo.scss

@@ -32,6 +32,7 @@
 @use '../components/tree/tree-theme' as *;
 @use '../components/label/label-theme' as *;
 @use '../components/query-builder/query-builder-theme' as *;
+@use '../components/input/file-input-theme' as *;
 
 @mixin typography($type-scale) {
     @include badge-typography($categories: (
@@ -78,6 +79,11 @@
         helper-text: 'caption',
         input-text: 'body-2'
     ));
+
+    @include file-input-typography($categories: (
+        file-text: 'body-2'
+    ));
+
     @include linear-bar-typography();
     @include list-typography($categories: (
         header: 'overline',

package/lib/core/styles/typography/_material.scss

@@ -32,6 +32,7 @@
 @use '../components/tree/tree-theme' as *;
 @use '../components/label/label-theme' as *;
 @use '../components/query-builder/query-builder-theme' as *;
+@use '../components/input/file-input-theme' as *;
 
 @mixin typography() {
     @include badge-typography();
@@ -68,4 +69,5 @@
     @include tree-typography();
     @include label-typography();
 	@include query-builder-typography();
+	@include file-input-typography();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "20.0.7",
+  "version": "20.0.9",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",
@@ -73,7 +73,7 @@
     "tslib": "^2.3.0",
     "igniteui-trial-watermark": "^3.1.0",
     "lodash-es": "^4.17.21",
-    "igniteui-theming": "^19.1.2",
+    "igniteui-theming": "^19.2.1",
     "@igniteui/material-icons-extended": "^3.1.0"
   },
   "peerDependencies": {