diff --git a/addon/components/content-panel.hbs b/addon/components/content-panel.hbs index ccb2811..6f7a765 100644 --- a/addon/components/content-panel.hbs +++ b/addon/components/content-panel.hbs @@ -3,9 +3,11 @@
- - - + {{#unless @hideCaret}} + + + + {{/unless}} {{#if @isLoading}} {{/if}} diff --git a/addon/components/countdown.hbs b/addon/components/countdown.hbs index 0682e86..2480f18 100644 --- a/addon/components/countdown.hbs +++ b/addon/components/countdown.hbs @@ -1,3 +1,3 @@ -
-

{{this.remaining}}

+
+

{{this.remaining}}

\ No newline at end of file diff --git a/addon/components/countdown.js b/addon/components/countdown.js index 82e50f9..e9dede9 100644 --- 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 index 0a184ee..a12b0f7 100644 --- 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); + } } }