keevo-components 1.8.42 → 1.8.45

package/src/lib/components/kv-progress-bar/kv-progress-bar.component.scss

@@ -0,0 +1,110 @@
+@layer primeng {
+    .p-progressbar {
+        position: relative;
+        overflow: hidden;
+    }
+
+    .p-progressbar-determinate .p-progressbar-value {
+        height: 100%;
+        width: 0%;
+        position: absolute;
+        display: none;
+        border: 0 none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+    }
+
+    .p-progressbar-determinate .p-progressbar-label {
+        display: inline-flex;
+    }
+
+    .p-progressbar-determinate .p-progressbar-value-animate {
+        transition: width 1s ease-in-out;
+    }
+
+    .p-progressbar-indeterminate .p-progressbar-value::before {
+        content: '';
+        position: absolute;
+        background-color: inherit;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        will-change: left, right;
+        -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+        animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    }
+
+    .p-progressbar-indeterminate .p-progressbar-value::after {
+        content: '';
+        position: absolute;
+        background-color: inherit;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        will-change: left, right;
+        -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+        animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+        -webkit-animation-delay: 1.15s;
+        animation-delay: 1.15s;
+    }
+}
+
+@-webkit-keyframes p-progressbar-indeterminate-anim {
+    0% {
+        left: -35%;
+        right: 100%;
+    }
+    60% {
+        left: 100%;
+        right: -90%;
+    }
+    100% {
+        left: 100%;
+        right: -90%;
+    }
+}
+@keyframes p-progressbar-indeterminate-anim {
+    0% {
+        left: -35%;
+        right: 100%;
+    }
+    60% {
+        left: 100%;
+        right: -90%;
+    }
+    100% {
+        left: 100%;
+        right: -90%;
+    }
+}
+
+@-webkit-keyframes p-progressbar-indeterminate-anim-short {
+    0% {
+        left: -200%;
+        right: 100%;
+    }
+    60% {
+        left: 107%;
+        right: -8%;
+    }
+    100% {
+        left: 107%;
+        right: -8%;
+    }
+}
+@keyframes p-progressbar-indeterminate-anim-short {
+    0% {
+        left: -200%;
+        right: 100%;
+    }
+    60% {
+        left: 107%;
+        right: -8%;
+    }
+    100% {
+        left: 107%;
+        right: -8%;
+    }
+}

package/src/lib/components/kv-progress-bar/kv-progress-bar.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProgressBarComponent } from './kv-progress-bar.component';
+
+describe('ProgressBarComponent', () => {
+  let component: ProgressBarComponent;
+  let fixture: ComponentFixture<ProgressBarComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ProgressBarComponent]
+    });
+    fixture = TestBed.createComponent(ProgressBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/kv-progress-bar/kv-progress-bar.component.ts

@@ -0,0 +1,79 @@
+import {
+  Component,
+  Input
+} from '@angular/core';
+
+@Component({
+  selector: 'kv-progress-bar',
+  templateUrl: './kv-progress-bar.component.html',
+  styleUrls: ['./kv-progress-bar.component.scss']
+})
+export class ProgressBarComponent {
+  /**
+       * Current value of the progress.
+       * @group Props
+       */
+  @Input() value: number | undefined;
+
+  /**
+       * Max value of the progress.
+       * @group Props
+       */
+  @Input() maxValue: number | undefined;
+
+  /**
+     * Label value of the progress.
+     * @group Props
+     */
+  @Input() label: string | undefined;
+
+  /**
+    * Whether to display the progress bar value.
+    * @group Props
+    */
+  @Input() showValue: boolean = true;
+  /**
+    * Whether to display the progress bar value.
+    * @group Props
+    */
+  @Input() showLabel: boolean = true;
+  /**
+    * Class of the element.
+    * @group Props
+    */
+  @Input() styleClass: string | undefined;
+
+  /**
+    * Class of the element.
+    * @group Props
+    */
+  @Input() labelStyleClass: string | undefined;
+
+  /**
+    * Class of the element.
+    * @group Props
+    */
+  @Input() barStyleClass: string | undefined;
+
+  /**
+    * Inline style of the element.
+    * @group Props
+    */
+  @Input() style: { [klass: string]: any } | null | undefined;
+  /**
+    * Unit sign appended to the value.
+    * @group Props
+    */
+  @Input() unit: string = '%';
+  /**
+    * Defines the mode of the progress
+    * @group Props
+    */
+  @Input() mode: string = 'determinate';
+  /**
+    * Color for the background of the progress.
+    * @group Props
+    */
+  @Input() color: string | undefined;
+
+}

package/src/lib/components/kv-progress-bar/kv-progress-bar.module.ts

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { ProgressBarComponent as KvProgressBarComponent } from './kv-progress-bar.component';
+import { PrimeNgModule } from '../../../public-api';
+
+@NgModule({
+  declarations: [
+    KvProgressBarComponent
+  ],
+  imports: [
+    CommonModule,
+    PrimeNgModule,
+  ],
+  exports: [
+    KvProgressBarComponent
+  ]
+})
+export class KvProgressBarModule { }