MOBILE-3594 core: Add progress bar component

src/core/components/components.module.ts

@@ -31,6 +31,7 @@ import { CoreShowPasswordComponent } from './show-password/show-password';
 import { CoreEmptyBoxComponent } from './empty-box/empty-box';
 import { CoreTabsComponent } from './tabs/tabs';
 import { CoreInfiniteLoadingComponent } from './infinite-loading/infinite-loading';
+import { CoreProgressBarComponent } from './progress-bar/progress-bar';
 
 import { CoreDirectivesModule } from '@directives/directives.module';
 import { CorePipesModule } from '@pipes/pipes.module';
@@ -51,6 +52,7 @@ import { CorePipesModule } from '@pipes/pipes.module';
         CoreEmptyBoxComponent,
         CoreTabsComponent,
         CoreInfiniteLoadingComponent,
+        CoreProgressBarComponent,
     ],
     imports: [
         CommonModule,
@@ -74,6 +76,7 @@ import { CorePipesModule } from '@pipes/pipes.module';
         CoreEmptyBoxComponent,
         CoreTabsComponent,
         CoreInfiniteLoadingComponent,
+        CoreProgressBarComponent,
     ],
 })
 export class CoreComponentsModule {}

src/core/components/progress-bar/core-progress-bar.html

@@ -0,0 +1,5 @@
+<ng-container *ngIf="progress >= 0">
+    <progress max="100" [value]="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" [attr.aria-valuenow]="progress">
+    </progress>
+    <div class="core-progress-text">{{ 'core.percentagenumber' | translate: {$a: text} }}</div>
+</ng-container>

src/core/components/progress-bar/progress-bar.scss

@@ -0,0 +1,33 @@
+:host {
+    display: flex;
+
+    .core-progress-text {
+        line-height: 40px;
+        font-size: 1rem;
+        color: var(--text-color);
+        width: 55px;
+        text-align: center;
+    }
+
+    progress {
+        -webkit-appearance: none;
+        appearance: none;
+        height: var(--height);
+        margin: 16px 0;
+        padding: 0;
+        display: block;
+        width: calc(100% - 55px);
+
+        &[value]::-webkit-progress-bar {
+            background-color: var(--background);
+            border-radius: 0;
+            border: 0;
+            box-shadow: none;
+        }
+
+        &[value]::-webkit-progress-value {
+            background-color: var(--color);
+            border-radius: 0;
+        }
+    }
+}

src/core/components/progress-bar/progress-bar.ts

@@ -0,0 +1,71 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component, Input, OnChanges, SimpleChange, ChangeDetectionStrategy } from '@angular/core';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
+
+/**
+ * Component to show a progress bar and its value.
+ *
+ * Example usage:
+ * <core-progress-bar [progress]="percentage"></core-progress-bar>
+ */
+@Component({
+    selector: 'core-progress-bar',
+    templateUrl: 'core-progress-bar.html',
+    styleUrls: ['progress-bar.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CoreProgressBarComponent implements OnChanges {
+
+    @Input() progress!: number | string; // Percentage from 0 to 100.
+    @Input() text?: string; // Percentage in text to be shown at the right. If not defined, progress will be used.
+    width?: SafeStyle;
+    protected textSupplied = false;
+
+    constructor(private sanitizer: DomSanitizer) { }
+
+    /**
+     * Detect changes on input properties.
+     */
+    ngOnChanges(changes: { [name: string]: SimpleChange }): void {
+        if (changes.text && typeof changes.text.currentValue != 'undefined') {
+            // User provided a custom text, don't use default.
+            this.textSupplied = true;
+        }
+
+        if (changes.progress) {
+            // Progress has changed.
+            if (typeof this.progress == 'string') {
+                this.progress = parseInt(this.progress, 10);
+            }
+
+            if (this.progress < 0 || isNaN(this.progress)) {
+                this.progress = -1;
+            }
+
+            if (this.progress != -1) {
+                // Remove decimals.
+                this.progress = Math.floor(this.progress);
+
+                if (!this.textSupplied) {
+                    this.text = String(this.progress);
+                }
+
+                this.width = this.sanitizer.bypassSecurityTrustStyle(this.progress + '%');
+            }
+        }
+    }
+
+}

src/theme/variables.scss

@@ -135,13 +135,20 @@
         --color: var(--core-color);
     }
 
+    core-progress-bar {
+        --height: var(--custom-progress-bar-height, 8px);
+        --color: var(--custom-progress-color, var(--core-color));
+        --text-color: var(--custom-progress-text-color, var(--gray-darker));
+        --background: var(--custom-progress-background, var(--gray-lighter));
+    }
+
     --selected-item-color: var(--custom-selected-item-color, var(--core-color));
     --selected-item-border-width: var(--custom-selected-item-border-width, 5px);
 
     --drop-shadow: var(--custom-drop-shadow, 0, 0, 0, 0.2);
 
     --core-login-background: var(--custom-login-background, var(--white));
-    --core-login-text-color: var(--custom-login-text-color,  var(--black));
+    --core-login-text-color: var(--custom-login-text-color, var(--black));
 }
 
 /*
@@ -196,6 +203,10 @@
         }
     }
 
+    core-progress-bar {
+        --text-color: var(--custom-progress-text-color, var(--gray-lighter));
+    }
+
     --core-login-background: var(--custom-login-background, #3a3a3a);
     --core-login-text-color: var(--custom-login-text-color, white);
 }