minor changes two otp-input and countdown component

fleetbase · Jan 15, 2024 · 73fe4f2 · 73fe4f2
1 parent 61f7f47
commit 73fe4f2
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 11 deletions.
diff --git a/addon/components/content-panel.hbs b/addon/components/content-panel.hbs
@@ -3,9 +3,11 @@
         <div class="next-content-panel {{if this.isOpen 'next-content-panel-is-open' 'next-content-panel-is-closed'}} {{@panelClass}} {{if @isLoading 'is-loading'}}">
             <div class="next-content-panel-header next-content-panel-toggle {{if this.isOpen 'next-content-panel-is-open' 'next-content-panel-is-closed'}} {{@panelHeaderClass}} {{if @isLoading 'is-loading'}}">
                 <a href="javascript:;" aria-expanded={{this.isOpen}} class="next-content-panel-header-left {{@panelHeaderLeftClass}}" {{on "click" this.toggle}}>
-                    <span class="icon-container">
-                        <FaIcon @icon={{if this.isOpen "caret-down" "caret-right"}} @prefix="fas" />
-                    </span>
+                    {{#unless @hideCaret}}
+                        <span class="icon-container">
+                            <FaIcon @icon={{if this.isOpen "caret-down" "caret-right"}} @prefix="fas" />
+                        </span>
+                    {{/unless}}
                     {{#if @isLoading}}
                         <Spinner @iconClass="text-sky-500 fa-spin-800ms" class="flex mr-2i" />
                     {{/if}}

diff --git a/addon/components/countdown.hbs b/addon/components/countdown.hbs
@@ -1,3 +1,3 @@
-<div class="countdown-container">
-    <p class={{this.remainingClass}}>{{this.remaining}}</p>
+<div class="countdown-container {{@countdownContainerClass}}">
+    <p class="{{this.remainingClass}} {{@countdownClass}}">{{this.remaining}}</p>
 </div>
diff --git a/addon/components/countdown.js b/addon/components/countdown.js
@@ -4,6 +4,7 @@ import { formatDuration, intervalToDuration } from 'date-fns';
 import { isArray } from '@ember/array';
 import { run } from '@ember/runloop';
 import { computed } from '@ember/object';
+
 export default class CountdownComponent extends Component {
     /**
      * An array that defines the units to display in the countdown.
@@ -78,8 +79,7 @@ export default class CountdownComponent extends Component {
         this.startCountdown();
     }
 
-    @computed('remaining')
-    get remainingClass() {
+    @computed('remaining', 'duration') get remainingClass() {
         // Customize the threshold and class names as needed
         if (this.remaining && this.durationToSeconds(this.duration) <= 5) {
             return 'remaining-low'; // Add a CSS class for low time

diff --git a/addon/components/otp-input.js b/addon/components/otp-input.js
@@ -1,7 +1,7 @@
 // app/components/otp-input.js
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
+import { isBlank } from '@ember/utils';
 
 /**
  * Glimmer component for handling OTP (One-Time Password) input.
@@ -34,7 +34,7 @@ export default class OtpInputComponent extends Component {
      *
      * @constructor
      */
-    constructor() {
+    constructor(owner, { numberOfDigits }) {
         super(...arguments);
         this.otpValues = Array.from({ length: this.numberOfDigits }, () => '');
         this.handleInput = this.handleInput.bind(this);
@@ -100,9 +100,17 @@ export default class OtpInputComponent extends Component {
             this.handleFocus(index + 1);
         }
 
-        if (this.otpValues.every(value => value !== '')) {
+        // on every input
+        if (typeof this.args.onInput === 'function') {
+            this.args.onInput(inputValue);
+        }
+
+        if (this.otpValues.every((value) => !isBlank(value))) {
             const completeOtpValue = this.otpValues.join('');
-            this.args.onInput(completeOtpValue);
+
+            if (typeof this.args.onInputCompleted === 'function') {
+                this.args.onInputCompleted(completeOtpValue);
+            }
         }
     }