diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index 7a9cd0047fd..8e835b60e64 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -536,21 +536,21 @@ // @include paginator($paginator-theme-map); // } - @if is-used('igx-circular-bar', $exclude) { - $progress-circular-theme-map: progress-circular-theme( - $schema: $schema, - ); - $progress-circular-theme-map: meta.call($theme-handler, $progress-circular-theme-map); - @include progress-circular($progress-circular-theme-map); - } + //@if is-used('igx-circular-bar', $exclude) { + // $progress-circular-theme-map: progress-circular-theme( + // $schema: $schema, + // ); + // $progress-circular-theme-map: meta.call($theme-handler, $progress-circular-theme-map); + // @include progress-circular($progress-circular-theme-map); + //} - @if is-used('igx-linear-bar', $exclude) { - $progress-linear-theme-map: progress-linear-theme( - $schema: $schema, - ); - $progress-linear-theme-map: meta.call($theme-handler, $progress-linear-theme-map); - @include progress-linear($progress-linear-theme-map); - } + //@if is-used('igx-linear-bar', $exclude) { + // $progress-linear-theme-map: progress-linear-theme( + // $schema: $schema, + // ); + // $progress-linear-theme-map: meta.call($theme-handler, $progress-linear-theme-map); + // @include progress-linear($progress-linear-theme-map); + //} // @if is-used('igx-radio', $exclude) { // $radio-theme-map: radio-theme( diff --git a/projects/igniteui-angular/src/lib/progressbar/templates/circular-bar.component.html b/projects/igniteui-angular/src/lib/progressbar/circular/circular-bar.component.html similarity index 72% rename from projects/igniteui-angular/src/lib/progressbar/templates/circular-bar.component.html rename to projects/igniteui-angular/src/lib/progressbar/circular/circular-bar.component.html index b2d9ce057c5..becbd272f1d 100644 --- a/projects/igniteui-angular/src/lib/progressbar/templates/circular-bar.component.html +++ b/projects/igniteui-angular/src/lib/progressbar/circular/circular-bar.component.html @@ -1,10 +1,11 @@ - - + + - - + + diff --git a/projects/igniteui-angular/src/lib/progressbar/circular/circular-bar.component.scss b/projects/igniteui-angular/src/lib/progressbar/circular/circular-bar.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/circular/circular-bar.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/progressbar/circular/themes/_animations.scss b/projects/igniteui-angular/src/lib/progressbar/circular/themes/_animations.scss new file mode 100644 index 00000000000..234fc354651 --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/circular/themes/_animations.scss @@ -0,0 +1,113 @@ +$diameter: calc(var(--circular-size) + var(--stroke-thickness)); +$radius: calc(var(--circular-size) / 2 - var(--stroke-thickness) * .5); +$circumference: calc(#{$radius} * 2 * 3.1416); + +@keyframes igx-indeterminate-accordion { + 0% { + stroke-dashoffset: calc(#{$circumference} * 2); + stroke-dasharray: calc(#{$circumference} * 9 / 10); + } + + 100% { + stroke-dashoffset: calc(#{$circumference} * 2 / 5); + } +} + +@keyframes igx-indeterminate-accordion-rtl { + 0% { + stroke-dashoffset: calc(#{$circumference} * -2); + stroke-dasharray: calc(#{$circumference} * 9 / 10); + } + + 100% { + stroke-dashoffset: calc(#{$circumference} * -2 / 5); + } +} + +// Fluent: Circular progress animation for indeterminate state. +// Dynamically changes stroke-dasharray and rotates for a smooth spinning effect. +@keyframes igx-indeterminate-circular-fluent { + 0% { + // Start the stroke at the correct position by adjusting the dasharray and dashoffset + stroke-dasharray: calc(#{$circumference} * 0.0001), #{$circumference}; + stroke-dashoffset: calc(-1 * #{$circumference} / 4); + + // Start at 12 o'clock + transform: rotate(-90deg); + } + + 50% { + stroke-dasharray: calc(#{$circumference} / 2), calc(#{$circumference} / 2); + + // Adjust to keep starting point correct + stroke-dashoffset: calc(-1 * #{$circumference} / 4); + + // Continue rotating smoothly + transform: rotate(360deg); + } + + 100% { + stroke-dasharray: calc(#{$circumference} * 0.0001), #{$circumference}; + + // Reset properly + stroke-dashoffset: calc(-1 * #{$circumference} / 4); + + // Complete the full rotation + transform: rotate(990deg); + } +} + +@keyframes igx-indeterminate-circular-fluent-rtl { + 0% { + stroke-dasharray: calc(#{$circumference} * 0.0001), #{$circumference}; + + // Positive offset for opposite direction + stroke-dashoffset: calc(#{$circumference} / 4); + transform: rotate(90deg); + } + + 50% { + stroke-dasharray: calc(#{$circumference} / 2), calc(#{$circumference} / 2); + + // Positive offset for opposite direction + stroke-dashoffset: calc(#{$circumference} / 4); + transform: rotate(-360deg); + } + + 100% { + stroke-dasharray: calc(#{$circumference} * 0.0001), #{$circumference}; + + // Positive offset for opposite direction + stroke-dashoffset: calc(#{$circumference} / 4); + transform: rotate(-990deg); + } +} + +@keyframes igx-initial-dashoffset { + from { + /* Start with no progress (0%) */ + stroke-dashoffset: #{$circumference}; + } + + to { + stroke-dashoffset: calc(#{$circumference} - var(--_progress-percentage) * #{$circumference}); + } +} + +// Generic animations +@keyframes igc-initial-counter { + from { + --_progress-integer: 0; + --_progress-fraction: 0; + } +} + +@keyframes igx-rotate-center { + 0% { + transform: rotate(0); + } + + 100% { + transform: rotate(360deg); + } +} diff --git a/projects/igniteui-angular/src/lib/progressbar/circular/themes/_base.scss b/projects/igniteui-angular/src/lib/progressbar/circular/themes/_base.scss new file mode 100644 index 00000000000..a00c77b1d91 --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/circular/themes/_base.scss @@ -0,0 +1,148 @@ +@use 'sass:map'; +@use 'igniteui-theming/sass/typography/index' as *; +@use 'igniteui-theming/sass/bem/index' as *; +@use 'igniteui-theming/sass/themes/index' as *; +@use 'igniteui-theming/sass/animations' as *; +@use 'styles/themes/standalone' as *; +@use 'light/tokens' as *; +@use 'animations' as *; + +$theme: $base; + +%circle { + width: 100%; + height: 100%; + fill: transparent; + cx: calc(#{$diameter} / 2); + cy: calc(#{$diameter} / 2); + r: $radius; + transform-origin: center; +} +@include layer(base) { + @include b(igx-circular-bar) { + --circular-size: calc(#{var-get($theme, 'diameter')} - var(--stroke-thickness)); + + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + + + @include e(text) { + position: absolute; + color: var-get($theme, 'text-color'); + font-size: round(calc(#{var-get($theme, 'diameter')} / var(--scale-factor) - var(--stroke-thickness)), 1px); + line-height: normal; + text-align: center; + font-weight: 600; + + animation: igx-initial-counter var(--_transition-duration) ease-in-out; + counter-reset: + progress-integer var(--_progress-integer, 0) + progress-fraction var(--_progress-fraction, 0); + transition: + --_progress-integer var(--_transition-duration) ease-in-out, + --_progress-fraction var(--_transition-duration) ease-in-out; + } + + @include e(text, $not: ('fraction')) { + &::before { + content: counter(progress-integer) '%'; + } + } + + @include e(value, $m: fraction) { + &::before { + content: counter(progress-integer) '.' counter(progress-fraction, decimal-leading-zero) '%'; + } + } + + @include m(indeterminate) { + @include e(text) { + visibility: hidden; + } + } + + @each $modifier in ('danger', 'warning', 'info', 'success') { + @include m($modifier) { + @include e(outer) { + stroke: var-get($theme, 'fill-color-#{$modifier}'); + } + } + } + + @include m(animation-none) { + --_transition-duration: 0s !important; + } + + @include m(hide-counter) { + @include e(text) { + &::before { + display: none; + } + } + } + } + + @include b(igx-circular-svg) { + width: $diameter; + height: $diameter; + transform: rotate(-90deg); + transform-origin: center; + + @include e(gradient-start) { + stop-color: var(--igx-circular-bar-fill-color-default-end, var(--fill-color-default-end)); + } + + @include e(gradient-end) { + stop-color: var(--igx-circular-bar-fill-color-default-start, var(--fill-color-default-start)); + } + + @include e(inner) { + @extend %circle; + + stroke-width: var(--stroke-thickness); + stroke: var-get($theme, 'base-circle-color'); + } + + @include e(outer) { + --_progress-percentage: calc(var(--_progress-whole, 0) / 100); + + @extend %circle; + + transition: stroke-dashoffset var(--_transition-duration) linear; + + stroke: var-get($theme, 'fill-color-default'); + stroke-dasharray: #{$circumference} #{$circumference}; + stroke-dashoffset: calc(#{$circumference} - var(--_progress-percentage) * #{$circumference}); + } + + @include m(indeterminate) { + @include e(outer) { + stroke-dashoffset: calc(#{$circumference} * 2); + animation: igx-indeterminate-accordion 1.5s cubic-bezier(0, 0.085, 0.68, 0.53) normal infinite; + } + + &:dir(rtl) { + @include e(outer) { + stroke-dashoffset: calc(#{$circumference} + var(--_progress-percentage) * #{$circumference}); + } + } + } + } + + .igx-circular-svg:not(.igx-circular-svg--indeterminate) { + .igx-circular-svg__outer { + animation: igx-initial-dashoffset var(--_transition-duration) linear; + stroke-dasharray: #{$circumference} #{$circumference}; + stroke-dashoffset: calc(#{$circumference} - var(--_progress-percentage) * #{$circumference}); + } + + &:dir(rtl) { + .igx-circular-svg__outer { + animation: igx-initial-dashoffset-rtl var(--_transition-duration) linear; + animation-direction: reverse; + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/progressbar/circular/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/progressbar/circular/themes/dark/_index.scss new file mode 100644 index 00000000000..c90d325a2c1 --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/circular/themes/dark/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-circular-bar, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/progressbar/circular/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/progressbar/circular/themes/dark/_tokens.scss new file mode 100644 index 00000000000..0d466d12ae6 --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/circular/themes/dark/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes/index' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/progress' as *; + +$base: digest-schema($dark-base-progress-circular); +$material: digest-schema($dark-material-progress-circular); +$bootstrap: digest-schema($dark-bootstrap-progress-circular); +$fluent: digest-schema($dark-fluent-progress-circular); +$indigo: digest-schema($dark-indigo-progress-circular); diff --git a/projects/igniteui-angular/src/lib/progressbar/circular/themes/light/_index.scss b/projects/igniteui-angular/src/lib/progressbar/circular/themes/light/_index.scss new file mode 100644 index 00000000000..284f3eb517d --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/circular/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-circular-bar, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/progressbar/circular/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/progressbar/circular/themes/light/_tokens.scss new file mode 100644 index 00000000000..ba367d4b98c --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/circular/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes/index' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/progress' as *; + +$base: digest-schema($light-progress-circular); +$material: digest-schema($material-progress-circular); +$bootstrap: digest-schema($bootstrap-progress-circular); +$fluent: digest-schema($fluent-progress-circular); +$indigo: digest-schema($indigo-progress-circular); diff --git a/projects/igniteui-angular/src/lib/progressbar/circular/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/progressbar/circular/themes/shared/_bootstrap.scss new file mode 100644 index 00000000000..2b65d341b23 --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/circular/themes/shared/_bootstrap.scss @@ -0,0 +1,44 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use 'igniteui-theming/sass/animations' as *; + +@use '../light/tokens' as *; + +$_theme: $bootstrap; + +@include themed-block(igx-circular-bar, bootstrap) { + // Do not use rem values here + // This will break the component in Safari + // https://github.com/IgniteUI/igniteui-webcomponents/issues/377 + --stroke-thickness: 2px; + --scale-factor: 3.05; + + @include e(text) { + font-weight: 700; + } +} + +@include themed-block(igx-circular-svg, bootstrap) { + @include e(outer) { + stroke-width: var(--stroke-thickness); + } + + @include m(indeterminate) { + animation: 3s linear 0s infinite normal none running igx-rotate-center; + animation-duration: .75s; + + &:dir(rtl) { + animation-direction: reverse; + } + + @include e(inner) { + stroke: transparent; + } + + @include e(outer) { + stroke-dashoffset: 60%; + animation: none; + } + } +} diff --git a/projects/igniteui-angular/src/lib/progressbar/circular/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/progressbar/circular/themes/shared/_fluent.scss new file mode 100644 index 00000000000..333af1ad4c3 --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/circular/themes/shared/_fluent.scss @@ -0,0 +1,43 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $fluent; + +@include themed-block(igx-circular-bar, fluent) { + // Do not use rem values here + // This will break the component in Safari + // https://github.com/IgniteUI/igniteui-webcomponents/issues/377 + --stroke-thickness: 2px; + --scale-factor: 2.75; + + @include e(text) { + font-weight: 700; + } +} + +@include themed-block(igx-circular-svg, fluent) { + @include e(outer) { + stroke-width: var(--stroke-thickness); + animation: igx-initial-dashoffset var(--_transition-duration) linear; + } + + @include m(indeterminate) { + transform-origin: 50% 50%; + + @include e(outer) { + stroke-linecap: round; + animation: 2s linear 0s infinite normal none running igx-indeterminate-circular-fluent; + stroke-dasharray: 289; + } + + &:dir(rtl) { + animation-direction: reverse; + + @include e(outer) { + animation-direction: reverse; + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/progressbar/circular/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/progressbar/circular/themes/shared/_index.scss new file mode 100644 index 00000000000..0ca60c75786 --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/circular/themes/shared/_index.scss @@ -0,0 +1,4 @@ +@forward 'material'; +@forward 'bootstrap'; +@forward 'fluent'; +@forward 'indigo'; diff --git a/projects/igniteui-angular/src/lib/progressbar/circular/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/progressbar/circular/themes/shared/_indigo.scss new file mode 100644 index 00000000000..fb344391c2a --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/circular/themes/shared/_indigo.scss @@ -0,0 +1,42 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $indigo; + +@include themed-block(igx-circular-bar, indigo) { + // Do not use rem values here + // This will break the component in Safari + // https://github.com/IgniteUI/igniteui-webcomponents/issues/377 + --stroke-thickness: 3px; + --scale-factor: 3.4; +} + +@include themed-block(igx-circular-svg, indigo) { + @include e(outer) { + stroke-width: var(--stroke-thickness); + animation: igx-initial-dashoffset var(--_transition-duration) linear; + } + + @include m(indeterminate) { + $radius: calc(var(--circular-size) / 2 - var(--stroke-thickness) * .5); + $circumference: calc(#{$radius} * 2 * 3.1416); + + animation: 3s linear 0s infinite normal none running igx-rotate-center; + transform-origin: 50% 50%; + + @include e(outer) { + animation: igx-indeterminate-accordion 1.5s cubic-bezier(0, 0.085, 0.68, 0.53) normal infinite; + stroke-dasharray: #{$circumference} #{$circumference}; + } + + &:dir(rtl) { + animation-direction: reverse; + + @include e(outer) { + animation-direction: reverse; + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/progressbar/circular/themes/shared/_material.scss b/projects/igniteui-angular/src/lib/progressbar/circular/themes/shared/_material.scss new file mode 100644 index 00000000000..4a5d8b4532b --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/circular/themes/shared/_material.scss @@ -0,0 +1,42 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $material; + +@include themed-block(igx-circular-bar, material) { + // Do not use rem values here + // This will break the component in Safari + // https://github.com/IgniteUI/igniteui-webcomponents/issues/377 + --stroke-thickness: 1.3px; + --scale-factor: 2.95; +} + +@include themed-block(igx-circular-svg, material) { + @include e(outer) { + animation: igx-initial-dashoffset var(--_transition-duration) linear; + stroke-width: calc(var(--stroke-thickness) + rem(0.75px)); + } + + @include m(indeterminate) { + $radius: calc(var(--circular-size) / 2 - var(--stroke-thickness) * .5); + $circumference: calc(#{$radius} * 2 * 3.1416); + + animation: 3s linear 0s infinite normal none running igx-rotate-center; + transform-origin: 50% 50%; + + @include e(outer) { + animation: igx-indeterminate-accordion 1.5s cubic-bezier(0, 0.085, 0.68, 0.53) normal infinite; + stroke-dasharray: #{$circumference} #{$circumference}; + } + + &:dir(rtl) { + animation-direction: reverse; + + @include e(outer) { + animation-direction: reverse; + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/progressbar/linear/linear-bar.component.html b/projects/igniteui-angular/src/lib/progressbar/linear/linear-bar.component.html new file mode 100644 index 00000000000..1712191a465 --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/linear/linear-bar.component.html @@ -0,0 +1,17 @@ +
+
+
+
+ + {{text}} + + diff --git a/projects/igniteui-angular/src/lib/progressbar/linear/linear-bar.component.scss b/projects/igniteui-angular/src/lib/progressbar/linear/linear-bar.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/linear/linear-bar.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/progressbar/linear/themes/_animations.scss b/projects/igniteui-angular/src/lib/progressbar/linear/themes/_animations.scss new file mode 100644 index 00000000000..0f392d4215f --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/linear/themes/_animations.scss @@ -0,0 +1,161 @@ +@use 'sass:map'; + +@mixin striped-gradient($variant: default, $gradient-orientation, $stripe-color) { + $fill-color-default: if($variant == 'indigo', transparent, $stripe-color); + $stripes-color: if($variant == 'indigo', $stripe-color, transparent); + + & { + background-image: repeating-linear-gradient( + $gradient-orientation, + $stripes-color, + $stripes-color var(--stripe-size), + $fill-color-default var(--stripe-size), + $fill-color-default calc(var(--stripe-size) * 2) + ); + } +} + +$easing-curves: ( + // Primary translate easing curves + primary-translate-start: cubic-bezier(0.5, 0, 0.7017, 0.4958), + primary-translate-mid: cubic-bezier(0.3024, 0.3813, 0.55, 0.9563), + // Primary scale easing curves + primary-scale-slow-start: cubic-bezier(0.3347, 0.124, 0.7858, 1), + primary-scale-quick-end: cubic-bezier(0.06, 0.11, 0.6, 1), + // Secondary translate easing curves + secondary-translate-start: cubic-bezier(0.15, 0, 0.515, 0.4096), + secondary-translate-mid: cubic-bezier(0.31, 0.284, 0.8, 0.7337), + secondary-translate-end: cubic-bezier(0.4, 0.627, 0.6, 0.902), + // Secondary scale easing curves + secondary-scale-slow-start: cubic-bezier(0.15, 0, 0.515, 0.4096), + secondary-scale-mid: cubic-bezier(0.31, 0.284, 0.8, 0.7337), + secondary-scale-smooth-end: cubic-bezier(0.4, 0.627, 0.6, 0.902) +); + +// Helper function to retrieve easing curves +@function get-easing($curve) { + @if not map.has-key($easing-curves, $curve) { + @warn 'Easing curve #{$curve} does not exist.'; + } + @return map.get($easing-curves, $curve); +} + +// Primary animation +@keyframes igx-indeterminate-primary { + 0% { + transform: translateX(0); + } + + 20% { + animation-timing-function: get-easing('primary-translate-start'); + transform: translateX(0); + } + + 59.15% { + animation-timing-function: get-easing('primary-translate-mid'); + transform: translateX(83.671%); + } + + 100% { + transform: translateX(200.611%); + } +} + +@keyframes igx-indeterminate-primary-scale { + 0% { + transform: scaleX(0.08); + } + + 36.65% { + animation-timing-function: get-easing('primary-scale-slow-start'); + transform: scaleX(0.08); + } + + 69.15% { + animation-timing-function: get-easing('primary-scale-quick-end'); + transform: scaleX(0.6614); + } + + 100% { + transform: scaleX(0.08); + } +} + +// Secondary animation +@keyframes igx-indeterminate-secondary { + 0% { + animation-timing-function: get-easing('secondary-translate-start'); + transform: translateX(0); + } + + 25% { + animation-timing-function: get-easing('secondary-translate-mid'); + transform: translateX(37.6519%); + } + + 48.35% { + animation-timing-function: get-easing('secondary-translate-end'); + transform: translateX(84.3861%); + } + + 100% { + transform: translateX(160.2777%); + } +} + +@keyframes igx-indeterminate-secondary-scale { + 0% { + animation-timing-function: get-easing('secondary-scale-slow-start'); + transform: scaleX(0.08); + } + + 19.15% { + animation-timing-function: get-easing('secondary-scale-mid'); + transform: scaleX(0.4571); + } + + 44.15% { + animation-timing-function: get-easing('secondary-scale-smooth-end'); + transform: scaleX(0.727); + } + + 100% { + transform: scaleX(0.08); + } +} + +// Fluent linear animations +@keyframes igx-indeterminate-bar-fluent { + 0% { + transform: translateX(-100%); + transform-origin: left; + } + + 100% { + transform: translateX(310%); + transform-origin: right; + } +} + +@keyframes igx-indeterminate-bar-fluent-rtl { + 0% { + transform: translateX(100%); + transform-origin: right; + } + + 100% { + transform: translateX(-310%); + transform-origin: left; + } +} + +// Initial animations +@keyframes igx-initial-width { + from { + width: 0; + } + + to { + width: calc(var(--_progress-whole, 0) * 1%); + } +} diff --git a/projects/igniteui-angular/src/lib/progressbar/linear/themes/_base.scss b/projects/igniteui-angular/src/lib/progressbar/linear/themes/_base.scss new file mode 100644 index 00000000000..ea83d7f3cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/linear/themes/_base.scss @@ -0,0 +1,183 @@ +@use 'sass:map'; +@use 'igniteui-theming/sass/bem/index' as *; +@use 'igniteui-theming/sass/themes/index' as *; +@use 'igniteui-theming/sass/typography/index' as *; +@use 'styles/themes/standalone' as *; +@use 'light/tokens' as *; +@use 'animations' as *; + +$theme: $base; + +@include layer(base) { + // TODO change this once Not selector can be added to the block + .igx-linear-bar:not(.igx-linear-bar--indeterminate) { + .igx-linear-bar__indicator { + animation: igx-initial-width var(--_transition-duration) linear; + background-color: var-get($theme, 'fill-color-default') + } + } + + @include b(igx-linear-bar) { + position: relative; + display: flex; + width: 100%; + flex: 1 1 100%; + flex-direction: column; + + @include e(base) { + --stripe-size: #{var-get($theme, 'strip-size')}; + --linear-animation-duration: 2000ms; + + display: flex; + flex-direction: column; + position: relative; + width: inherit; + height: var-get($theme, 'track-height'); + background: var-get($theme, 'track-color'); + overflow: hidden; + border-radius: var-get($theme, 'track-border-radius'); + z-index: 0; + } + + @include e(indicator) { + width: calc(var(--_progress-whole) * 1%); + position: absolute; + height: 100%; + transition: width var(--_transition-duration) linear; + } + + @include e(value) { + @include type-style(subtitle-2) { + margin: 0; + } + ; + + color: var-get($theme, 'text-color'); + animation: initial-counter var(--_transition-duration) ease-in-out; + counter-reset: progress-integer var(--_progress-integer, 0) progress-fraction var(--_progress-fraction, 0); + transition: --_progress-integer var(--_transition-duration) ease-in-out, + --_progress-fraction var(--_transition-duration) ease-in-out; + } + + @each $modifier in ('start', 'center', 'end') { + @include e(value, $m: $modifier) { + @if $modifier == 'center' { + align-self: #{$modifier}; + } @else { + align-self: flex-#{$modifier}; + } + } + } + + @include e(value, $m: top) { + order: -1; + } + + @include e(value, $m: hidden) { + display: none; + } + + @include e(value, $m: fraction) { + &::before { + content: counter(progress-integer) '.' counter(progress-fraction, decimal-leading-zero) '%'; + } + } + + @include e(value, $not: ('fraction')) { + &::before { + content: counter(progress-integer) '%'; + } + } + + @each $modifier in ('danger', 'warning', 'info', 'success') { + @include m($modifier, $not: ('indeterminate')) { + @include e(indicator) { + background-color: var-get($theme, 'fill-color-#{$modifier}'); + } + + @include e(indicator-secondary) { + background-color: var-get($theme, 'fill-color-#{$modifier}'); + } + } + + @include mx($modifier) { + /* stylelint-disable max-nesting-depth */ + @include e(indicator) { + &::after { + background-color: var-get($theme, 'fill-color-#{$modifier}'); + } + } + + @include e(indicator-secondary) { + &::after { + background-color: var-get($theme, 'fill-color-#{$modifier}'); + } + } + /* stylelint-enable max-nesting-depth */ + } + } + + @include m(indeterminate, $not: ('danger', 'warning', 'info', 'success')) { + @include e(indicator) { + &::after { + background-color: var-get($theme, 'fill-color-default'); + } + } + + @include e(indicator-secondary) { + &::after { + background-color: var-get($theme, 'fill-color-default'); + } + } + } + + @include m(striped, $not: ('indeterminate')) { + --linear-strips-orientation: -45deg; + + &:dir(rtl) { + --linear-strips-orientation: 45deg + } + + @include e(indicator) { + @include striped-gradient( + map.get($theme, 'variant'), + var(--linear-strips-orientation), + var-get($theme, 'stripes-color') + ); + } + } + + @include m(indeterminate) { + @include e(indicator) { + animation-name: igx-indeterminate-bar-fluent-rtl; + } + + @include e(indicator-secondary) { + animation: igx-indeterminate-secondary var(--linear-animation-duration) infinite linear; + left: -54.8888%; + + &::after { + animation: igx-indeterminate-secondary-scale var(--linear-animation-duration) infinite linear; + width: 100%; + height: inherit; + } + } + + @include e(value) { + display: none; + } + } + + @include m(animation-none, $not: ('indeterminate')) { + --_transition-duration: 0s !important; + } + + @include m(hide-counter) { + @include e(value) { + &::before { + display: none; + } + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/progressbar/linear/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/progressbar/linear/themes/dark/_index.scss new file mode 100644 index 00000000000..715447a57dd --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/linear/themes/dark/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-linear-bar, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/progressbar/linear/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/progressbar/linear/themes/dark/_tokens.scss new file mode 100644 index 00000000000..01d0c6b8a04 --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/linear/themes/dark/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes/index' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/progress' as *; + +$base: digest-schema($dark-base-progress-linear); +$material: digest-schema($dark-material-progress-linear); +$bootstrap: digest-schema($dark-bootstrap-progress-linear); +$fluent: digest-schema($dark-fluent-progress-linear); +$indigo: digest-schema($dark-indigo-progress-linear); diff --git a/projects/igniteui-angular/src/lib/progressbar/linear/themes/light/_index.scss b/projects/igniteui-angular/src/lib/progressbar/linear/themes/light/_index.scss new file mode 100644 index 00000000000..cab260de6a3 --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/linear/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-linear-bar, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/progressbar/linear/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/progressbar/linear/themes/light/_tokens.scss new file mode 100644 index 00000000000..cf0180dd1c9 --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/linear/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes/index' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/progress' as *; + +$base: digest-schema($light-progress-linear); +$material: digest-schema($material-progress-linear); +$bootstrap: digest-schema($bootstrap-progress-linear); +$fluent: digest-schema($fluent-progress-linear); +$indigo: digest-schema($indigo-progress-linear); diff --git a/projects/igniteui-angular/src/lib/progressbar/linear/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/progressbar/linear/themes/shared/_bootstrap.scss new file mode 100644 index 00000000000..5a3aa942eda --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/linear/themes/shared/_bootstrap.scss @@ -0,0 +1,54 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $bootstrap; + +@include themed-block(igx-linear-bar, bootstrap) { + @include m(indeterminate) { + &:dir(rtl) { + @include e(base) { + transform: rotateY(180deg); + } + } + + @include e(indicator) { + transform-origin: top left; + width: 100% !important; + height: inherit; + position: absolute; + transform: scale3d(0, 1, 1); + animation: igx-indeterminate-primary var(--linear-animation-duration) infinite linear; + left: -145.1666%; + + &::after { + content: ''; + position: absolute; + top: 0; + inset-inline-start: 0; + width: inherit; + height: inherit; + backface-visibility: hidden; + animation: igx-indeterminate-primary-scale var(--linear-animation-duration) infinite linear; + } + } + + @include e(indicator-secondary) { + transform-origin: top left; + width: 100% !important; + height: inherit; + position: absolute; + + &::after { + content: ''; + position: absolute; + top: 0; + inset-inline-start: 0; + width: inherit; + height: inherit; + backface-visibility: hidden; + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/progressbar/linear/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/progressbar/linear/themes/shared/_fluent.scss new file mode 100644 index 00000000000..fae93d8786e --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/linear/themes/shared/_fluent.scss @@ -0,0 +1,41 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $fluent; + +@include themed-block(igx-linear-bar, fluent) { + gap: rem(2px); + + @include m(indeterminate) { + @include e(indicator) { + background: linear-gradient(90deg, transparent 0%, var-get($_theme, 'fill-color-default') 50%, transparent 100%); + width: 33% !important; + min-width: 33%; + animation-name: igx-indeterminate-bar-fluent; + animation-duration: var(--linear-animation-duration); + animation-timing-function: ease; + animation-iteration-count: infinite; + left: auto; + } + + &:dir(rtl) { + @include e(indicator) { + animation-name: igx-indeterminate-bar-fluent-rtl; + } + } + + @include e(indicator-secondary) { + display: none; + } + } + + @each $modifier in ('danger', 'warning', 'info', 'success') { + @include mx($modifier, 'indeterminate') { + @include e(indicator) { + background: linear-gradient(90deg, transparent 0%, var-get($_theme, 'fill-color-#{$modifier}') 50%, transparent 100%) + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/progressbar/linear/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/progressbar/linear/themes/shared/_index.scss new file mode 100644 index 00000000000..0ca60c75786 --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/linear/themes/shared/_index.scss @@ -0,0 +1,4 @@ +@forward 'material'; +@forward 'bootstrap'; +@forward 'fluent'; +@forward 'indigo'; diff --git a/projects/igniteui-angular/src/lib/progressbar/linear/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/progressbar/linear/themes/shared/_indigo.scss new file mode 100644 index 00000000000..7876648aca3 --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/linear/themes/shared/_indigo.scss @@ -0,0 +1,56 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $indigo; + +@include themed-block(igx-linear-bar, indigo) { + gap: rem(4px); + + @include m(indeterminate) { + &:dir(rtl) { + @include e(base) { + transform: rotateY(180deg); + } + } + + @include e(indicator) { + transform-origin: top left; + width: 100% !important; + height: inherit; + position: absolute; + transform: scale3d(0, 1, 1); + animation: igx-indeterminate-primary var(--linear-animation-duration) infinite linear; + left: -145.1666%; + + &::after { + content: ''; + position: absolute; + top: 0; + inset-inline-start: 0; + width: inherit; + height: inherit; + backface-visibility: hidden; + animation: igx-indeterminate-primary-scale var(--linear-animation-duration) infinite linear; + } + } + + @include e(indicator-secondary) { + transform-origin: top left; + width: 100% !important; + height: inherit; + position: absolute; + + &::after { + content: ''; + position: absolute; + top: 0; + inset-inline-start: 0; + width: inherit; + height: inherit; + backface-visibility: hidden; + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/progressbar/linear/themes/shared/_material.scss b/projects/igniteui-angular/src/lib/progressbar/linear/themes/shared/_material.scss new file mode 100644 index 00000000000..5aa08399e87 --- /dev/null +++ b/projects/igniteui-angular/src/lib/progressbar/linear/themes/shared/_material.scss @@ -0,0 +1,54 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $material; + +@include themed-block(igx-linear-bar, material) { + @include m(indeterminate) { + &:dir(rtl) { + @include e(base) { + transform: rotateY(180deg); + } + } + + @include e(indicator) { + transform-origin: top left; + width: 100% !important; + height: inherit; + position: absolute; + transform: scale3d(0, 1, 1); + animation: igx-indeterminate-primary var(--linear-animation-duration) infinite linear; + left: -145.1666%; + + &::after { + content: ''; + position: absolute; + top: 0; + inset-inline-start: 0; + width: inherit; + height: inherit; + backface-visibility: hidden; + animation: igx-indeterminate-primary-scale var(--linear-animation-duration) infinite linear; + } + } + + @include e(indicator-secondary) { + transform-origin: top left; + width: 100% !important; + height: inherit; + position: absolute; + + &::after { + content: ''; + position: absolute; + top: 0; + inset-inline-start: 0; + width: inherit; + height: inherit; + backface-visibility: hidden; + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/progressbar/progressbar.component.ts b/projects/igniteui-angular/src/lib/progressbar/progressbar.component.ts index 1f527791130..e38f7ece489 100644 --- a/projects/igniteui-angular/src/lib/progressbar/progressbar.component.ts +++ b/projects/igniteui-angular/src/lib/progressbar/progressbar.component.ts @@ -15,7 +15,7 @@ import { booleanAttribute, inject, ChangeDetectorRef, - NgZone, + NgZone, ViewEncapsulation, } from '@angular/core'; import { IgxProgressBarTextTemplateDirective, @@ -368,7 +368,9 @@ let NEXT_CIRCULAR_ID = 0; let NEXT_GRADIENT_ID = 0; @Component({ selector: 'igx-linear-bar', - templateUrl: 'templates/linear-bar.component.html', + templateUrl: 'linear/linear-bar.component.html', + styleUrl: 'linear/linear-bar.component.css', + encapsulation: ViewEncapsulation.None, imports: [NgClass] }) export class IgxLinearProgressBarComponent extends BaseProgressDirective implements AfterContentInit { @@ -516,7 +518,9 @@ export class IgxLinearProgressBarComponent extends BaseProgressDirective impleme @Component({ selector: 'igx-circular-bar', - templateUrl: 'templates/circular-bar.component.html', + templateUrl: 'circular/circular-bar.component.html', + styleUrl: 'circular/circular-bar.component.css', + encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, NgClass] }) export class IgxCircularProgressBarComponent extends BaseProgressDirective implements AfterContentInit { diff --git a/projects/igniteui-angular/src/lib/progressbar/templates/linear-bar.component.html b/projects/igniteui-angular/src/lib/progressbar/templates/linear-bar.component.html deleted file mode 100644 index 088baf0a008..00000000000 --- a/projects/igniteui-angular/src/lib/progressbar/templates/linear-bar.component.html +++ /dev/null @@ -1,19 +0,0 @@ - -
-
-
-
- - - {{text}} - -