Merge pull request #44 from squidit/feature/SQ-61997-melhorias-tela-d…

…e-login

feature/SQ-61997-melhorias-tela-de-login

package.json

@@ -35,6 +35,7 @@
     "@ngx-translate/http-loader": "^8.0.0",
     "@squidit/css": "latest",
     "lodash.isequal": ">=4.0.0",
+    "ngx-countdown": "^16.0.0",
     "ngx-mask": "^16.3.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

src/components/sq-countdown/sq-countdown.component.html

@@ -0,0 +1,8 @@
+<countdown 
+  [config]="{
+    leftTime: leftTime, 
+    format: format, 
+    notify: notify
+  }" 
+  (event)="eventMap($event)"
+/>

src/components/sq-countdown/sq-countdown.component.scss

@@ -0,0 +1,10 @@
+::ng-deep {
+  sq-countdown {
+    min-width: min-content;
+    countdown.count-down {
+      span {
+        color: var(--text_color);
+      }
+    }
+  }
+}

src/components/sq-countdown/sq-countdown.component.ts

@@ -0,0 +1,72 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { CountdownComponent, CountdownEvent } from 'ngx-countdown'
+
+/**
+ * Interface for the return event os emitters.
+ * @interface
+ */
+interface ReturnEvent {
+  /**
+   * The time left in the countdown.
+   */
+  left: number
+}
+
+/**
+ * Represents the SqCountdownComponent, a component for countdown.
+ * 
+ * @example
+ * <sq-countdown [leftTime]="10"></sq-countdown>
+ */
+@Component({
+  selector: 'sq-countdown',
+  templateUrl: './sq-countdown.component.html',
+  styleUrls: ['./sq-countdown.component.scss'],
+  standalone: true,
+  imports: [CountdownComponent],
+})
+export class SqCountdownComponent {
+  /**
+   * Starting time to countdown (e.g., 5.5, 30) (Unit: seconds).
+   */
+  @Input() leftTime = 10
+
+  /**
+   * Formats a date value, pls refer to [Accepted patterns](https://angular.io/api/common/DatePipe#usage-notes).
+   */
+  @Input() format?: string = 'mm:ss'
+
+  /**
+   * Should be trigger type `notify` event on the x second. When values is `0` will be trigger every time.
+   */
+  @Input() notify?: number[] | number
+
+  /**
+   * Event emitter for when the countdown starts.
+   */
+  @Output() startEmitter: EventEmitter<ReturnEvent> = new EventEmitter()
+
+  /**
+   * Event emitter for when the count reaches the input notify times.
+   */
+  @Output() notifyEmitter: EventEmitter<ReturnEvent> = new EventEmitter()
+
+  /**
+   * Event emitter for when the countdown ends.
+   */
+  @Output() doneEmitter: EventEmitter<ReturnEvent> = new EventEmitter()
+
+  /**
+   * Map the CountdownEvents to emit startEmitter, notifyEmitter or doneEmitter.
+   * @param event - The event associated with the CountdownEvents.
+   */
+  eventMap(event: CountdownEvent) {
+    const action = event.action as "start" | "notify" | "done"
+    if (action && this[`${action}Emitter`]) {
+      const returnEvent: ReturnEvent = {
+        left: event.left
+      }
+      this[`${action}Emitter`].emit(returnEvent)
+    }
+  }
+}

src/main.module.ts

@@ -37,6 +37,7 @@ import { NgxMaskDirective, NgxMaskPipe, provideNgxMask } from 'ngx-mask'
 import { SqInputMoneyComponent } from './components/sq-input-money/sq-input-money.component'
 import { SqInputNumberComponent } from './components/sq-input-number/sq-input-number.component'
 import { TranslateInternalPipe } from './pipes/translate-internal/translate-internal.pipe'
+import { SqCountdownComponent } from './components/sq-countdown/sq-countdown.component'
 
 /**
  * Array containing a collection of Angular components, directives, and pipes.
@@ -91,6 +92,7 @@ const components: (Type<any> | any)[] = [
   imports: [
     CommonModule,
     FormsModule,
+    SqCountdownComponent,
     NgxMaskDirective,
     NgxMaskPipe
   ],
@@ -99,8 +101,9 @@ const components: (Type<any> | any)[] = [
   ],
   exports: [
     ...components,
+    SqCountdownComponent,
     NgxMaskDirective,
     NgxMaskPipe
   ]
 })
-export class SquidCSSModule { }
+export class SquidCSSModule {}

src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squidit/ngx-css",
-  "version": "1.2.29",
+  "version": "1.3.0",
   "peerDependencies": {
     "@angular/common": ">=15.0.0",
     "@angular/core": ">=15.0.0",

src/public-api.ts

@@ -29,6 +29,7 @@ export * from './components/sq-select-multi-tags/sq-select-multi-tags.component'
 export * from './components/sq-input-mask/sq-input-mask.component'
 export * from './components/sq-input-money/sq-input-money.component'
 export * from './components/sq-input-number/sq-input-number.component'
+export * from './components/sq-countdown/sq-countdown.component'
 
 export * from './directives/sq-tooltip/sq-tooltip.directive'
 export * from './directives/sq-dropdown/sq-dropdown.directive'