igniteui-angular 20.0.7 → 20.0.9

package/lib/core/styles/components/grid-summary/_grid-summary-theme.scss

@@ -1,89 +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/simeonoff" target="_blank">Simeon Simeonoff</a>
-/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
-////
-
-/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Color} $background-color [null] - The summaries background color is inherited form igx-grid__tfoot
-/// @param {Color} $label-color [null] - The summaries label color.
-/// @param {Color} $result-color [null] - The summaries value/result color.
-/// @param {Color} $border-color [null] - The summaries border color.
-/// @param {Color} $pinned-border-width [null] - The border width of the summary panel.
-/// @param {Color} $pinned-border-style [null] - The border style of the summary panel.
-/// @param {Color} $pinned-border-color [null] - The border color of the summary panel.
-/// @param {Color} $label-hover-color [null] - The summaries hover label color.
-/// @requires $light-material-schema
-/// @example scss Change the summaries background and labels color
-///   $my-summary-theme: grid-summary-theme(
-///     $background-color: black,
-///     $label-color: white
-///   );
-///   // Pass the theme to the css-vars mixin
-///   @include css-vars($my-summary-theme);
-@function grid-summary-theme(
-    $schema: $light-material-schema,
-
-    $background-color: null,
-    $label-color: null,
-    $result-color: null,
-    $border-color: null,
-    $pinned-border-width: null,
-    $pinned-border-style: null,
-    $pinned-border-color: null,
-    $label-hover-color: null
-) {
-    $name: 'igx-grid-summary';
-    $selector: '.igx-grid-summary';
-    $grid-summary-schema: ();
-
-    @if map.has-key($schema, 'grid-summary') {
-        $grid-summary-schema: map.get($schema, 'grid-summary');
-    } @else {
-        $grid-summary-schema: $schema;
-    }
-
-    $theme: digest-schema($grid-summary-schema);
-
-    @if not($label-color) and $background-color {
-        $label-color: adaptive-contrast(var(--background-color));
-    }
-
-    @if not($label-hover-color) and $label-color {
-        $label-hover-color: var(--label-color);
-    }
-
-    @if not($result-color) and $background-color {
-        $result-color: adaptive-contrast(var(--background-color));
-    }
-
-    @if not($border-color) and $background-color {
-        $border-color: hsla(from adaptive-contrast(var(--background-color)) h s l / .26);
-    }
-
-    @if not($pinned-border-color) and $background-color {
-        $pinned-border-color: hsla(from adaptive-contrast(var(--background-color)) h s l / .26);
-    }
-
-    @return extend($theme, (
-        name: $name,
-        selector: $selector,
-        background-color: $background-color,
-        label-color: $label-color,
-        result-color: $result-color,
-        border-color: $border-color,
-        pinned-border-width: $pinned-border-width,
-        pinned-border-style: $pinned-border-style,
-        pinned-border-color: $pinned-border-color,
-        label-hover-color: $label-hover-color,
-    ));
-}
 
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars

package/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss

@@ -1,97 +1,5 @@
 @use 'sass:map';
 @use '../../base' as *;
-@use '../../themes/schemas' as *;
-
-////
-/// @group themes
-/// @access public
-/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
-/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
-////
-
-/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Color} $background-color [null] - The toolbar background color.
-/// @param {Color} $title-text-color [null] - The toolbar title text color.
-/// @param {Color} $dropdown-background [null] - The toolbar drop-down background color.
-/// @param {Color} $item-text-color [null] - The toolbar drop-down item text color.
-/// @param {Color} $item-hover-background [null] - The toolbar drop-down item hover background color.
-/// @param {Color} $item-hover-text-color [null] - The toolbar drop-down item hover text color.
-/// @param {Color} $item-focus-background [null] - The toolbar drop-down item focus background color.
-/// @param {Color} $item-focus-text-color [null] - The toolbar drop-down item focus text color.
-/// @param {Color} $border-color [null] - The toolbar border-bottom color.
-/// @requires $light-material-schema
-/// @example scss Change the toolbar background color
-///   $my-toolbar-theme: grid-toolbar-theme(
-///     $background-color: black
-///   );
-///   // Pass the theme to the css-vars mixin
-///   @include css-vars($my-toolbar-theme);
-@function grid-toolbar-theme(
-    $schema: $light-material-schema,
-
-    $background-color: null,
-    $title-text-color: null,
-
-    $dropdown-background: null,
-    $item-text-color: null,
-    $item-hover-background: null,
-    $item-hover-text-color: null,
-    $item-focus-background: null,
-    $item-focus-text-color: null,
-    $size: null,
-    $border-color: null,
-) {
-    $name: 'igx-grid-toolbar';
-    $selector: 'igx-grid-toolbar, .igx-grid-toolbar__dd-list';
-    $grid-toolbar-schema: ();
-
-    @if map.has-key($schema, 'grid-toolbar') {
-        $grid-toolbar-schema: map.get($schema, 'grid-toolbar');
-    } @else {
-        $grid-toolbar-schema: $schema;
-    }
-
-    $theme: digest-schema($grid-toolbar-schema);
-
-    @if not($title-text-color) and $background-color {
-        $title-text-color: adaptive-contrast(var(--background-color));
-    }
-
-    @if not($item-text-color) and $dropdown-background {
-        $item-text-color: adaptive-contrast(var(--dropdown-background));
-    }
-
-    @if not($item-hover-text-color) and $dropdown-background {
-        $item-hover-text-color: adaptive-contrast(var(--dropdown-background));
-    }
-
-    @if not($item-focus-text-color) and $dropdown-background {
-        $item-focus-text-color: adaptive-contrast(var(--dropdown-background));
-    }
-
-    @if not($item-hover-text-color) and $item-hover-background {
-        $item-hover-text-color: adaptive-contrast(var(--item-hover-background));
-    }
-
-    @if not($item-focus-text-color) and $item-focus-background {
-        $item-focus-text-color: adaptive-contrast(var(--item-focus-background));
-    }
-
-    @return extend($theme, (
-        name: $name,
-        selector: $selector,
-        background-color: $background-color,
-        title-text-color: $title-text-color,
-        item-text-color: $item-text-color,
-        dropdown-background: $dropdown-background,
-        item-hover-background: $item-hover-background,
-        item-hover-text-color: $item-hover-text-color,
-        item-focus-background: $item-focus-background,
-        item-focus-text-color: $item-focus-text-color,
-        size: $size,
-        border-color: $border-color
-    ));
-}
 
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars

package/lib/core/styles/components/highlight/highlight-theme.scss

@@ -1,60 +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>
-////
-
-/// If only background color(s) specified, text color(s) 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} $resting-background [null]- The background color used for the highlight in its resting state.
-/// @param {Color} $resting-color [null] - The text color used for the highlight in its resting state.
-/// @param {Color} $active-background [null] - The background color used for the highlight in its active state.
-/// @param {Color} $active-color [null] - The text color used for the highlight in its active state.
-/// @requires $light-material-schema
-/// @example scss Change the background and icon colors in icon highlight
-///   $my-highlight-theme: highlight-theme($resting-background: black, $active-color: white);
-///   // Pass the theme to the css-vars() mixin
-///   @include css-vars($my-highlight-theme);
-@function highlight-theme(
-    $schema: $light-material-schema,
-    $resting-background: null,
-    $resting-color: null,
-    $active-background: null,
-    $active-color: null,
-) {
-    $name: 'igx-highlight';
-    $selector: '.igx-highlight';
-    $highlight-schema: ();
-
-    @if map.has-key($schema, 'highlight') {
-        $highlight-schema: map.get($schema, 'highlight');
-    } @else {
-        $highlight-schema: $schema;
-    }
-
-    $theme: digest-schema($highlight-schema);
-
-    @if not($resting-color) and $resting-background {
-        $resting-color: adaptive-contrast(var(--resting-background));
-    }
-
-    @if not($active-color) and $active-background {
-        $active-color: adaptive-contrast(var(--active-background));
-    }
-
-    @return extend($theme, (
-        name: $name,
-        selector: $selector,
-        resting-background: $resting-background,
-        resting-color: $resting-color,
-        active-background: $active-background,
-        active-color: $active-color,
-    ));
-}
 
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars

package/lib/core/styles/components/icon/_icon-theme.scss

@@ -1,48 +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>
-////
-
-/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Color} $color [null] - The icon color.
-/// @param {String} $size [null] - The icon size.
-/// @param {Color} $disabled-color [null] - The disabled icon color.
-/// @requires $light-material-schema
-/// @example scss Change the icon color
-///   $my-icon-theme: icon-theme($color: orange);
-///   // Pass the theme to the css-vars() mixin
-///   @include css-vars($my-icon-theme);
-@function icon-theme(
-    $schema: $light-material-schema,
-
-    $color: null,
-    $size: null,
-    $disabled-color: null
-) {
-    $name: 'igx-icon';
-    $icon-schema: ();
-
-    @if map.has-key($schema, 'icon') {
-        $icon-schema: map.get($schema, 'icon');
-    } @else {
-        $icon-schema: $schema;
-    }
-
-    $theme: digest-schema($icon-schema);
-
-    @return extend($theme, (
-        name: $name,
-        color: $color,
-        size: $size,
-        disabled-color: $disabled-color,
-    ));
-}
 
 // stylelint-disable font-family-no-missing-generic-family-keyword
 /// @deprecated Use the `css-vars` mixin instead.

package/lib/core/styles/components/icon-button/_icon-button-theme.scss

@@ -1,119 +1,7 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:list';
-@use 'sass:color';
 @use '../../base' as *;
-@use '../../themes/schemas' as *;
-
-@forward './flat-icon-button-theme';
-@forward './contained-icon-button-theme';
-@forward './outlined-icon-button-theme';
-
-////
-/// @group themes
-/// @access public
-/// @author <a href="https://github.com/SisIvanova" target="_blank">Silvia Ivanova</a>
-////
-
-@function icon-button-theme(
-    $schema: $light-material-schema,
-
-    $background: null,
-    $foreground: null,
-    $shadow-color: null,
-
-    $hover-background: null,
-    $hover-foreground: null,
-
-    $focus-background: null,
-    $focus-foreground: null,
-
-    $focus-hover-background: null,
-    $focus-hover-foreground: null,
-
-    $active-background: null,
-    $active-foreground: null,
-
-    $border-radius: null,
-    $border-color: null,
-    $focus-border-color: null,
-
-    $disabled-background: null,
-    $disabled-foreground: null,
-    $disabled-border-color: null,
-
-    $size: null,
-) {
-    $name: 'igx-icon-button';
-    $icon-button-schema: ();
-
-    @if map.has-key($schema, 'icon-button') {
-        $icon-button-schema: map.get($schema, 'icon-button');
-    } @else {
-        $icon-button-schema: $schema;
-    }
-
-    $themes: ();
-    $variant: null;
-
-    @each $_name, $_schema in $icon-button-schema {
-        @if not($variant) {
-            $variant: map.get($schema, '_meta', 'theme');
-        }
-
-        @if not($foreground) and $background {
-            $foreground: adaptive-contrast(var(--background));
-        }
-
-        @if not($hover-foreground) and $hover-background {
-            $hover-foreground: adaptive-contrast(var(--hover-background));
-        }
-
-        @if not($focus-foreground) and $focus-background {
-            $focus-foreground: adaptive-contrast(var(--focus-background));
-        }
-
-        @if not($focus-hover-foreground) and $focus-hover-background {
-            $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
-        }
-
-        $themes: map.merge($themes, (
-            $_name: extend( digest-schema($_schema), (
-                name: $name,
-                background: $background,
-                foreground: $foreground,
-                shadow-color: $shadow-color,
-
-                hover-background: $hover-background,
-                hover-foreground: $hover-foreground,
-
-                focus-background: $focus-background,
-                focus-foreground: $focus-foreground,
-
-                focus-hover-background: $focus-hover-background,
-                focus-hover-foreground: $focus-hover-foreground,
-
-                active-background: $active-background,
-                active-foreground: $active-foreground,
-
-                border-radius: $border-radius,
-                border-color: $border-color,
-                focus-border-color: $focus-border-color,
-
-                disabled-background: $disabled-background,
-                disabled-foreground: $disabled-foreground,
-                disabled-border-color: $disabled-border-color,
-                size: $size,
-            ))
-        ));
-    }
-
-    @return (
-        name: $name,
-        variant: $variant,
-        themes: $themes,
-    );
-}
 
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars

package/lib/core/styles/components/input/_file-input-component.scss

@@ -0,0 +1,72 @@
+@use '../../base' as *;
+@use 'sass:string';
+
+/// @access private
+@mixin component {
+    @include b(igx-file-input) {
+        $this: bem--selector-to-string(&);
+
+        @include register-component(
+            $name: string.slice($this, 2, -1),
+            $deps: (igx-input-group)
+        );
+
+        @include e(file-names) {
+            @extend %file-names !optional;
+        }
+
+        @include e(upload-button-wrapper) {
+            @extend %upload-button-wrapper !optional;
+        }
+
+        @include e(upload-button) {
+            @extend %upload-button !optional;
+        }
+
+        @include e(clear-icon) {
+            @extend %clear-icon !optional;
+        }
+
+        @include m(filled) {
+            @include e(file-names) {
+                @extend %file-names--filled !optional;
+            }
+
+            @include e(upload-button-wrapper) {
+                @extend %upload-button-wrapper--filled !optional;
+            }
+
+            @include e(upload-button) {
+                @extend %upload-button--filled !optional;
+            }
+        }
+
+        @include m(focused) {
+            @include e(file-names) {
+                @extend %file-names--focused !optional;
+            }
+
+            @include e(upload-button-wrapper) {
+                @extend %upload-button-wrapper--focused !optional;
+            }
+
+            @include e(upload-button) {
+                @extend %upload-button--focused !optional;
+            }
+        }
+
+        @include m(disabled) {
+            @include e(file-names) {
+                @extend %file-names--disabled !optional;
+            }
+
+            @include e(upload-button-wrapper) {
+                @extend %upload-button-wrapper--disabled !optional;
+            }
+
+            @include e(upload-button) {
+                @extend %upload-button--disabled !optional;
+            }
+        }
+    }
+}

package/lib/core/styles/components/input/_file-input-theme.scss

@@ -0,0 +1,203 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '../../base' as *;
+@use '../../themes/schemas' as *;
+@use 'igniteui-theming/sass/animations/easings' as *;
+
+////
+/// @group themes
+/// @access public
+////
+
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+/// @param {Color} $file-names-background [null] - The file names container background color.
+/// @param {Color} $file-names-background--focused [null] - The file names container background color when the file input is focused.
+/// @param {Color} $file-names-background--filled [null] - The file names container background color when the file input is filled.
+/// @param {Color} $file-names-background--disabled [null] - The file names container background color when the file input is disabled.
+/// @param {Color} $file-names-foreground [null] - The file names color.
+/// @param {Color} $file-names-foreground--focused [null] - The file names color when the file input is focused.
+/// @param {Color} $file-names-foreground--filled [null] - The file names color when the file input is filled.
+/// @param {Color} $file-names-foreground--disabled [null] - The file names color when the file input is disabled.
+/// @param {Color} $file-selector-button-background [null] - The file input selector button background color.
+/// @param {Color} $file-selector-button-background--focused [null] - The selector button background color when the file input is focused.
+/// @param {Color} $file-selector-button-background--filled [null] - The selector button background color when the file input is filled.
+/// @param {Color} $file-selector-button-background--disabled [null] - The selector button background color when the file input is disabled.
+/// @param {Color} $file-selector-button-foreground [null] - The file input selector button foreground color.
+/// @param {Color} $file-selector-button-foreground--focused [null] - The selector button foreground color when the file input is focused.
+/// @param {Color} $file-selector-button-foreground--filled [null] - The selector button foreground color when the file input is filled.
+/// @param {Color} $file-selector-button-foreground--disabled [null] - The selector button foreground color when the file input is disabled.
+/// @example scss Change the focused border and label colors
+///   $my-file-input-theme: file-input-theme($file-names-foreground: #09f);
+///   // Pass the theme to the css-vars() mixin
+///   @include css-vars($my-file-input-theme);
+@function file-input-theme(
+    $schema: $light-material-schema,
+    $file-names-background: null,
+    $file-names-background--focused: null,
+    $file-names-background--filled: null,
+    $file-names-background--disabled: null,
+    $file-names-foreground: null,
+    $file-names-foreground--focused: null,
+    $file-names-foreground--filled: null,
+    $file-names-foreground--disabled: null,
+
+    $file-selector-button-background: null,
+    $file-selector-button-background--focused: null,
+    $file-selector-button-background--filled: null,
+    $file-selector-button-background--disabled: null,
+    $file-selector-button-foreground: null,
+    $file-selector-button-foreground--focused: null,
+    $file-selector-button-foreground--filled: null,
+    $file-selector-button-foreground--disabled: null,
+) {
+    $name: 'igx-file-input';
+
+    // the variable are scoped to the selector so no other input except the file type will have them.
+    $selector: '.igx-file-input';
+
+    $file-input-schema: ();
+    @if map.has-key($schema, 'file-input') {
+        $file-input-schema: map.get($schema, 'file-input');
+    } @else {
+        $file-input-schema: $schema;
+    }
+
+    $theme: digest-schema($file-input-schema);
+
+    @return extend(
+        $theme,
+        (
+            name: $name,
+            selector: $selector,
+            file-names-background: $file-names-background,
+            file-names-background--focused: $file-names-background--focused,
+            file-names-background--filled: $file-names-background--filled,
+            file-names-background--disabled: $file-names-background--disabled,
+            file-names-foreground: $file-names-foreground,
+            file-names-foreground--focused: $file-names-foreground--focused,
+            file-names-foreground--filled: $file-names-foreground--filled,
+            file-names-foreground--disabled: $file-names-foreground--disabled,
+
+            file-selector-button-background: $file-selector-button-background,
+            file-selector-button-background--focused: $file-selector-button-background--focused,
+            file-selector-button-background--filled: $file-selector-button-background--filled,
+            file-selector-button-background--disabled: $file-selector-button-background--disabled,
+            file-selector-button-foreground: $file-selector-button-foreground,
+            file-selector-button-foreground--focused: $file-selector-button-foreground--focused,
+            file-selector-button-foreground--filled: $file-selector-button-foreground--filled,
+            file-selector-button-foreground--disabled: $file-selector-button-foreground--disabled,
+        ),
+    );
+}
+
+/// @deprecated Use the `css-vars` mixin instead.
+/// @see {mixin} css-vars
+/// @param {Map} $theme - The theme used to style the component.
+@mixin file-input($theme) {
+    @include css-vars($theme);
+    $variant: map.get($theme, '_meta', 'theme');
+
+    %file-names {
+        color: var-get($theme, 'file-names-foreground');
+        background-color: var-get($theme, 'file-names-background');
+    }
+
+    %file-names--filled {
+        color: var-get($theme, 'file-names-foreground--filled');
+        background-color: var-get($theme, 'file-names-background--filled');
+    }
+
+    %file-names--focused {
+        color: var-get($theme, 'file-names-foreground--focused');
+        background-color: var-get($theme, 'file-names-background--focused');
+    }
+
+    %file-names--disabled {
+        color: var-get($theme, 'file-names-foreground--disabled');
+        background-color: var-get($theme, 'file-names-background--disabled');
+    }
+
+    %upload-button-wrapper {
+        background: #{var-get($theme, 'file-selector-button-background')}
+    }
+
+    %upload-button {
+        border-inline: 0;
+
+        // That button can't have :focus, :active, :hover states, that's why we dont need to override them here.
+        --foreground: #{var-get($theme, 'file-selector-button-foreground')};
+        --background: transparent;
+        --resting-elevation: none;
+        --shadow-color: none;
+        --border-radius: 0;
+    }
+
+
+    %upload-button-wrapper--filled {
+        color: #{var-get($theme, 'file-selector-button-foreground--filled')};
+        background: #{var-get($theme, 'file-selector-button-background--filled')};
+    }
+
+    %upload-button--filled {
+        --foreground: #{var-get($theme, 'file-selector-button-foreground--filled')};
+        --background: transparent;
+    }
+
+    %upload-button-wrapper--focused {
+        color: #{var-get($theme, 'file-selector-button-foreground--focused')};
+        background: #{var-get($theme, 'file-selector-button-background--focused')};
+    }
+
+    %upload-button--focused {
+        --foreground: #{var-get($theme, 'file-selector-button-foreground--focused')};
+        --background: transparent;
+    }
+
+    %upload-button-wrapper--disabled {
+        color: #{var-get($theme, 'file-selector-button-foreground--disabled')};
+        background: #{var-get($theme, 'file-selector-button-background--disabled')};
+    }
+
+    %upload-button--disabled {
+        --disabled-foreground: #{var-get($theme, 'file-selector-button-foreground--disabled')};
+        --disabled-background: transparent;
+    }
+
+    %clear-icon {
+        &:focus {
+            @if $variant == 'indigo' or $variant == 'fluent' {
+                background-color: color($color: 'primary', $variant: 500);
+                color: contrast-color($color: 'primary', $variant: 600);
+            }
+
+            @if $variant == 'material' {
+                background-color: transparent;
+                color: color($color: 'secondary', $variant: 500);
+            }
+
+            @if $variant == 'bootstrap' {
+                color: contrast-color($color: 'primary', $variant: 600);
+                background-color: color($color: 'primary', $variant: 500);
+            }
+        }
+    }
+}
+
+/// Adds typography styles for the .igx-file-input.
+/// Uses the 'subtitle-1', 'caption'
+/// category from the typographic scale.
+/// @group typography
+/// @param {Map} $categories [(file-text: 'subtitle-1')] - The categories from the typographic scale used for type styles.
+@mixin file-input-typography(
+    $categories: (
+        file-text: 'subtitle-1'
+    )
+) {
+    $file-text: map.get($categories, 'file-text');
+
+    %file-names {
+        @include type-style($file-text) {
+            margin: 0;
+        }
+    }
+}