@block-auth.io/angular 0.1.0

package/src/lib/primitives/oval-spinner.component.ts

@@ -0,0 +1,158 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+// Sin react-loader-spinner (`<Oval>`)
+// ni `animate.css`: el anillo animado se dibuja con un <svg> propio (pista +
+// arco giratorio con la clase `bas-oval-spin` de transitions.css) y el
+// fade-in de entrada se resuelve con una animación CSS local equivalente a
+// `animate__fadeIn`. `icon` (ReactNode / slot `icon`) pasa a ser
+// `<ng-content select="[slot=icon]" />`.
+const BLOCKAUTH_LOGO = 'https://dashboard.block-auth.io/img/blockauth_logo.png';
+
+type OvalSize = 'xs' | 'small' | 'medium' | 'large';
+type OvalPosition =
+  | 'center'
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right';
+
+@Component({
+  selector: 'ba-oval-spinner',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div
+      [class]="
+        'bal-ba-backdrop-blur-base bal-ba-backdrop-blur-xl bas-absolute bas-flex bas-h-full bas-w-full ' +
+        (animateBg() ? 'bas-oval-fadein' : '') +
+        ' ' +
+        positionClasses() +
+        ' ' +
+        zIndex() +
+        ' ' +
+        classNames()
+      "
+    >
+      <div
+        [class]="'bas-relative bas-flex bas-items-center bas-justify-center ' + positionClassNames()"
+      >
+        <svg
+          class="bas-oval-fadein"
+          [attr.width]="ovalSize()"
+          [attr.height]="ovalSize()"
+          role="img"
+          aria-label="oval-loading"
+          [attr.viewBox]="'0 0 ' + ovalSize() + ' ' + ovalSize()"
+        >
+          <circle
+            [attr.cx]="ovalSize() / 2"
+            [attr.cy]="ovalSize() / 2"
+            [attr.r]="radius()"
+            fill="none"
+            stroke="#93C5FD"
+            [attr.stroke-width]="strokeWidth"
+          />
+          <circle
+            class="bas-oval-spin"
+            [attr.cx]="ovalSize() / 2"
+            [attr.cy]="ovalSize() / 2"
+            [attr.r]="radius()"
+            fill="none"
+            stroke="#00509A"
+            [attr.stroke-width]="strokeWidth"
+            [attr.stroke-dasharray]="circumference() * 0.25 + ' ' + circumference()"
+            stroke-linecap="round"
+            style="transform-origin: 50% 50%"
+          />
+        </svg>
+        <div [class]="showLogo() ? 'bas-absolute ' + (customLogoSize() || imageSize()) : 'bas-hidden'">
+          @if (!isIcon()) {
+            <img
+              id="loader-image"
+              [src]="imageLogoSrc()"
+              class="bas-aspect-square bas-h-full bas-w-full bas-rounded-full"
+              [alt]="imageAlt()"
+            />
+          } @else {
+            <ng-content select="[slot=icon]" />
+          }
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      @keyframes bas-oval-fadein-kf {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+      .bas-oval-fadein {
+        animation: bas-oval-fadein-kf 0.3s ease-in;
+      }
+    `,
+  ],
+})
+export class OvalSpinnerComponent {
+  size = input<OvalSize>('medium');
+  customSize = input<number | undefined>(undefined);
+  classNames = input('');
+  position = input<OvalPosition>('center');
+  positionClassNames = input('');
+  animateBg = input(true);
+  showLogo = input(false);
+  logoSize = input<OvalSize>('medium');
+  customLogoSize = input<string | undefined>(undefined);
+  isIcon = input(false);
+  imageLogoSrc = input(BLOCKAUTH_LOGO);
+  zIndex = input('bas-z-50');
+
+  readonly strokeWidth = 2;
+
+  ovalSize = computed(() => {
+    if (this.customSize()) return this.customSize()!;
+    if (this.size() === 'xs') return 48;
+    if (this.size() === 'small') return 64;
+    if (this.size() === 'medium') return 80;
+    return 112; // large
+  });
+
+  positionClasses = computed(
+    () =>
+      ({
+        center: 'bas-items-center bas-justify-center',
+        top: 'bas-items-start bas-justify-center',
+        bottom: 'bas-items-end bas-justify-center',
+        left: 'bas-items-center bas-justify-start',
+        right: 'bas-items-center bas-justify-end',
+        'top-left': 'bas-items-start bas-justify-start',
+        'top-right': 'bas-items-start bas-justify-end',
+        'bottom-left': 'bas-items-end bas-justify-start',
+        'bottom-right': 'bas-items-end bas-justify-end',
+      })[this.position()],
+  );
+
+  imageSize = computed(
+    () =>
+      ({
+        xs: 'bas-h-10 bas-w-10',
+        small: 'bas-h-12 bas-w-12',
+        medium: 'bas-h-16 bas-w-16',
+        large: 'bas-h-20 bas-w-20',
+      })[this.logoSize()],
+  );
+
+  imageAlt = computed(() =>
+    this.imageLogoSrc() === BLOCKAUTH_LOGO ? 'Block-Auth Logo' : 'Image inside loader',
+  );
+
+  radius = computed(() => this.ovalSize() / 2 - this.strokeWidth);
+  circumference = computed(() => 2 * Math.PI * this.radius());
+}

package/src/lib/primitives/pickers/dropdown-picker-animated-base.component.ts

@@ -0,0 +1,220 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  PLATFORM_ID,
+  computed,
+  effect,
+  inject,
+  input,
+  output,
+  viewChild,
+} from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { PickerButtonComponent } from './picker-button.component';
+
+// Shell animado de los pickers: el `<ba-picker-button>` más el revelado del
+// cuerpo del dropdown (posicionado en absoluto, por lo que su orden en el DOM
+// respecto del botón es irrelevante — se renderiza el botón UNA sola vez y el
+// dropdown se coloca arriba/abajo según `dropdownDirection`).
+//
+// - La animación (framer-motion en react / `<Transition clip-path>` en vue)
+//   pasa a una animación CSS `.ba-clip-down`/`.ba-clip-up` (revelado circular).
+// - `icon` (ReactNode / slot #icon) se reenvía por `[slot=icon]` a
+//   `<ba-picker-button>` (vía `ngProjectAs`); los hijos van al slot por defecto.
+// - `setIsOpen`/`toggleDropdown`/`clickedOutside` -> outputs `isOpenChange`/
+//   `toggleDropdown`/`clickOutside`.
+// - Click-outside anclado a `document` (o al elemento del modal cuando
+//   `isInsideModal`); NO se retira el listener del modal (al desmontar ya no
+//   existe — mismo leak deliberado que el original). Se replica con `effect()`
+//   sobre `isOpen()`, sólo en navegador (SSR-safe).
+@Component({
+  selector: 'ba-dropdown-picker-animated-base',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents' },
+  imports: [PickerButtonComponent],
+  template: `
+    <div
+      [class]="
+        displayClassNames() + ' bas-w-full bas-items-center bas-gap-1.5 ' +
+        getHeightAndGridClassNames(size(), enableError(), enableWhiteSpaces()) + ' ' + classNames()
+      "
+      [style.width]="widthStyle()"
+    >
+      @if (enableError() && enableWhiteSpaces()) {
+        <p
+          [class]="
+            'bas-m-0 bas-h-[18px] ' + (error() ? 'bal-ba-error-text' : 'bal-ba-error-text-invisible')
+          "
+        >{{ errorMessage() }}</p>
+      }
+      <div #internalContainer class="bas-relative bas-h-full bas-w-full">
+        <section
+          [class]="
+            'bal-ba-transition-2 bas-relative bas-flex bas-w-full bas-flex-col bas-items-center ' +
+            'bas-justify-start ' + getHeightAndGridClassNames(size(), false, false)
+          "
+        >
+          <ba-picker-button
+            [size]="size()"
+            [isOpen]="isOpen()"
+            [blueStyles]="blueStyles()"
+            [btnId]="btnId()"
+            [inputId]="inputId()"
+            [inputValue]="inputValue()"
+            [btnZIndexClassNames]="btnZIndexClassNames()"
+            (toggleDropdown)="toggleDropdown.emit()"
+          >
+            <ng-container ngProjectAs="[slot=icon]"><ng-content select="[slot=icon]" /></ng-container>
+          </ba-picker-button>
+
+          @if (activeDropdown() && isOpen()) {
+            <div [class]="dropdownClasses()">
+              <ng-content />
+            </div>
+          }
+        </section>
+      </div>
+      @if (enableError()) {
+        <p class="bal-ba-error-text-invisible bas-m-0 bas-h-[18px]">white space</p>
+      }
+    </div>
+  `,
+  styles: [
+    `
+      .ba-clip-down {
+        animation: ba-clip-down-in 0.2s ease;
+        transform-origin: top center;
+      }
+      .ba-clip-up {
+        animation: ba-clip-up-in 0.2s ease;
+        transform-origin: bottom center;
+      }
+      @keyframes ba-clip-down-in {
+        from { clip-path: circle(0% at 50% 0%); opacity: 0.4; }
+        to { clip-path: circle(150% at 50% 0%); opacity: 1; }
+      }
+      @keyframes ba-clip-up-in {
+        from { clip-path: circle(0% at 50% 100%); opacity: 0.4; }
+        to { clip-path: circle(150% at 50% 100%); opacity: 1; }
+      }
+    `,
+  ],
+})
+export class DropdownPickerAnimatedBaseComponent {
+  size = input<'xxs' | 'xs' | 'small' | 'base' | 'large'>('base');
+  isOpen = input(false);
+  closeWhenClickedOutside = input(true);
+  enableError = input(true);
+  enableWhiteSpaces = input(true);
+  error = input(false);
+  errorMessage = input('');
+  btnId = input('');
+  inputId = input('');
+  inputValue = input('');
+  container = input<HTMLElement | null>(null);
+  exceptions = input<(HTMLElement | null)[]>([]);
+  blueStyles = input(true);
+  activeDropdown = input(true);
+  width = input<number | string>('100%');
+  classNames = input('');
+  displayClassNames = input('bas-grid');
+  btnZIndexClassNames = input('bas-z-0');
+  dropdownZIndexClassNames = input('bas-z-50');
+  isInsideModal = input(false);
+  modalId = input('txns-overview');
+  dropdownDirection = input<'up' | 'down'>('down');
+
+  isOpenChange = output<boolean>();
+  toggleDropdown = output<void>();
+  clickOutside = output<EventTarget | null>();
+
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+  private readonly internalContainer =
+    viewChild<ElementRef<HTMLDivElement>>('internalContainer');
+
+  protected readonly widthStyle = computed(() => {
+    const w = this.width();
+    return typeof w === 'number' ? `${w}px` : w;
+  });
+
+  protected readonly dropdownClasses = computed(() => {
+    const down = this.dropdownDirection() === 'down';
+    return (
+      'bal-ba-transition-2 bal-ba-shadow-base bas-w-full bas-min-w-[152px] ' +
+      'bas-rounded-md bas-border bas-border-solid bas-border-[#a9d6e5] ' +
+      'bas-bg-white hover:bas-border-[#98c0ce] ' +
+      this.dropdownZIndexClassNames() +
+      ' ' +
+      (down
+        ? 'ba-clip-down bal-ba-hover-shadow-md bas-absolute bas-top-full bas-mt-2'
+        : 'ba-clip-up bal-ba-hover-shadow-top-md bas-absolute bas-mb-2 bas-bottom-full')
+    );
+  });
+
+  private readonly handleClickOutsideTimer = (e: Event): void => {
+    if (!this.isOpen()) return;
+    const target = e.target as HTMLElement;
+    const activeException = this.exceptions().some((el) => el && el.id === target.id);
+    if (activeException) return;
+    const el = this.internalContainer()?.nativeElement;
+    if (el && !el.contains(target)) {
+      if (this.closeWhenClickedOutside()) this.isOpenChange.emit(false);
+      else this.clickOutside.emit(target);
+    }
+  };
+
+  constructor() {
+    // Port 1:1 del useEffect([isOpen]) de DropdownPickerAnimatedBase.tsx.
+    effect((onCleanup) => {
+      if (!this.isBrowser || !this.activeDropdown()) return;
+      const open = this.isOpen();
+      const insideModal = this.isInsideModal();
+      const removeListener = (): void => {
+        if (!insideModal) document.removeEventListener('click', this.handleClickOutsideTimer);
+      };
+      if (open) {
+        if (!insideModal) {
+          document.addEventListener('click', this.handleClickOutsideTimer);
+        } else {
+          const modal = document.getElementById(this.modalId());
+          if (modal) modal.addEventListener('click', this.handleClickOutsideTimer);
+        }
+      } else {
+        removeListener();
+      }
+      onCleanup(removeListener);
+    });
+  }
+
+  getHeightAndGridClassNames(size: string, enableError: boolean, enableWhiteSpaces: boolean): string {
+    return {
+      xxs: enableError
+        ? enableWhiteSpaces
+          ? 'bas-h-[82px] bas-grid-rows-[18px_34px_18px]'
+          : 'bas-h-[58px] bas-grid-rows-[34px_18px]'
+        : 'bas-h-[34px]',
+      xs: enableError
+        ? enableWhiteSpaces
+          ? 'bas-h-[86px] bas-grid-rows-[18px_38px_18px]'
+          : 'bas-h-[62px] bas-grid-rows-[38px_18px]'
+        : 'bas-h-[38px]',
+      small: enableError
+        ? enableWhiteSpaces
+          ? 'bas-h-[90px] bas-grid-rows-[18px_42px_18px]'
+          : 'bas-h-[66px] bas-grid-rows-[42px_18px]'
+        : 'bas-h-[42px]',
+      base: enableError
+        ? enableWhiteSpaces
+          ? 'bas-h-[94px] bas-grid-rows-[18px_46px_18px]'
+          : 'bas-h-[70px] bas-grid-rows-[46px_18px]'
+        : 'bas-h-[46px]',
+      large: enableError
+        ? enableWhiteSpaces
+          ? 'bas-h-[102px] bas-grid-rows-[18px_54px_18px]'
+          : 'bas-h-[78px] bas-grid-rows-[54px_18px]'
+        : 'bas-h-[54px]',
+    }[size]!;
+  }
+}

package/src/lib/primitives/pickers/picker-button.component.ts

@@ -0,0 +1,74 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+
+// Input de solo-lectura + icono al final que alterna la apertura del dropdown
+// del picker. El icono llega por el slot `[slot=icon]` (en react era la prop
+// `icon?: ReactNode`). `toggleDropdown` (callback prop) -> output `toggleDropdown`.
+// `:host { display: contents }`: el `<button>` es el hijo real del flex/grid del
+// contenedor del picker (como en react/vue).
+@Component({
+  selector: 'ba-picker-button',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents' },
+  template: `
+    <button
+      type="button"
+      [id]="btnId()"
+      [class]="
+        'bal-ba-outline-none bal-ba-transition-150 bas-grid bas-h-full ' +
+        'bas-w-full bas-cursor-pointer bas-grid-cols-[1fr_28px] bas-items-center ' +
+        'bas-rounded-lg bas-border-2 bas-border-solid ' + bgColor() + ' ' +
+        getHeightClassNames(size()) + ' ' + btnZIndexClassNames() + ' ' +
+        (blueStyles() || isOpen()
+          ? 'bas-border-[var(--bal-primary-100)] hover:bas-border-[var(--bal-primary-300)]'
+          : 'bas-border-gray-300 hover:bas-border-slate-400')
+      "
+      (click)="onBtnClicked($event)"
+    >
+      <input
+        [id]="inputId()"
+        [class]="
+          'bal-ba-outline-none bal-ba-transition-150 bal-ba-shadow-base bal-ba-focus-shadow-none ' +
+          'bas-box-border bas-h-full bas-w-full bas-cursor-pointer bas-border-none bas-px-0 ' +
+          'bas-py-1 bas-text-start bas-font-normal xsm1:bas-pl-2 ' +
+          (size() !== 'xxs' ? 'bas-text-lg' : 'bas-text-sm') + ' ' +
+          (blueStyles() || isOpen()
+            ? 'bas-text-[#004e98] hover:bas-text-[#00296b]'
+            : 'bas-text-gray-500 hover:bas-text-slate-600') + ' ' + bgColor()
+        "
+        [value]="inputValue()"
+        readonly
+      />
+      <span class="bas-flex bas-h-full bas-w-full bas-items-center bas-justify-center bas-rounded-full">
+        <ng-content select="[slot=icon]" />
+      </span>
+    </button>
+  `,
+})
+export class PickerButtonComponent {
+  size = input<'xxs' | 'xs' | 'small' | 'base' | 'large'>('base');
+  isOpen = input(false);
+  blueStyles = input(false);
+  btnId = input('picker-btn-id');
+  inputId = input('picker-btn-id');
+  inputValue = input('Picker Value');
+  bgColor = input('bas-bg-transparent');
+  btnZIndexClassNames = input('bas-z-0');
+
+  toggleDropdown = output<void>();
+
+  onBtnClicked(e: MouseEvent): void {
+    e.preventDefault();
+    this.toggleDropdown.emit();
+  }
+
+  getHeightClassNames(size: string): string {
+    return {
+      xxs: 'bas-h-[34px] bas-px-1.5 bas-pb-0.5 bas-pt-0.5',
+      xs: 'bas-h-[38px] bas-px-1.5 bas-pb-0.5 bas-pt-1',
+      small: 'bas-h-[42px] bas-px-1.5 bas-pb-1 bas-pt-1.5',
+      base: 'bas-h-[46px] bas-px-1.5 bas-pb-1.5 bas-pt-2',
+      large: 'bas-h-[54px] bas-px-1.5 bas-pb-2.5 bas-pt-3',
+    }[size]!;
+  }
+}

package/src/lib/primitives/pickers/time-picker-dropdown-selector.component.ts

@@ -0,0 +1,188 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  effect,
+  input,
+  output,
+  signal,
+  untracked,
+} from '@angular/core';
+import { getSecFromTimeValue } from '../helpers';
+import { TimeUnitSelectorComponent } from './time-unit-selector.component';
+
+export interface TimeArrays {
+  minRange: string[];
+  defaultRange: string[];
+  maxRange: string[];
+}
+
+// Selector de tiempo de tres columnas (horas/minutos/segundos) dentro del
+// dropdown del picker, más el botón Guardar. `onChangeTimeUnit` reconcilia los
+// rangos min/max a medida que el usuario cambia cada unidad (máximo total
+// 29100s → 08:05:00); Guardar confía el tiempo elegido al padre como segundos
+// totales vía el output `timeChanged`. Los `useState` de react -> signals; el
+// `useEffect([defaultValues])` (reset) -> effect() que sólo trackea
+// `defaultValues`. `:host { display: contents }`: el grid interno es el hijo
+// real del contenedor del dropdown.
+const range = (length: number, offset = 0): string[] =>
+  Array.from({ length }, (_, i) => String(i + offset).padStart(2, '0'));
+
+const initialStates = {
+  hoursArray: range(8, 1),
+  minutesArrays: { minRange: range(50, 10), defaultRange: range(60), maxRange: range(41) },
+  secondsArrays: { minRange: range(50, 10), defaultRange: range(60), maxRange: range(1) },
+};
+
+@Component({
+  selector: 'ba-time-picker-dropdown-selector',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents' },
+  imports: [TimeUnitSelectorComponent],
+  template: `
+    <div class="bas-grid bas-grid-rows-[232px_32px] bas-justify-center bas-gap-1 bas-py-1.5 bas-pl-2.5 bas-pr-1">
+      <div class="bas-grid bas-h-full bas-w-[136px] bas-grid-cols-3 bas-gap-0.5">
+        <ba-time-unit-selector
+          [id]="id()"
+          [timeUnitArray]="hoursArray()"
+          timeUnit="hours"
+          [selectedValue]="selectedValues()[0]"
+          [firstValue]="parseIntSafe(hoursArray()[0])"
+          (changeTimeUnit)="onChangeTimeUnit($event.timeUnit, $event.value)"
+        />
+        <ba-time-unit-selector
+          [id]="id()"
+          [timeUnitArray]="minutesArray()"
+          timeUnit="minutes"
+          [selectedValue]="selectedValues()[1]"
+          [firstValue]="parseIntSafe(minutesArray()[0])"
+          (changeTimeUnit)="onChangeTimeUnit($event.timeUnit, $event.value)"
+        />
+        <ba-time-unit-selector
+          [id]="id()"
+          [timeUnitArray]="secondsArray()"
+          timeUnit="seconds"
+          [selectedValue]="selectedValues()[2]"
+          [firstValue]="parseIntSafe(secondsArray()[0])"
+          (changeTimeUnit)="onChangeTimeUnit($event.timeUnit, $event.value)"
+        />
+      </div>
+      <div class="bas-flex bas-items-center bas-justify-end bas-px-1.5">
+        <button
+          type="button"
+          [id]="id() + '-btn-save'"
+          class="bal-ba-transition-2 bas-cursor-pointer bas-rounded-md
+            bas-border-none bas-bg-[var(--bal-primary-300)] bas-px-1.5 bas-py-1
+            bas-text-sm bas-text-white hover:bas-bg-[#4d849b]
+            disabled:bas-cursor-not-allowed disabled:bas-opacity-50"
+          [disabled]="isBtnSaveDisabled()"
+          (click)="onSaveTimeBtnClicked()"
+        >
+          {{ btnSaveText() }}
+        </button>
+      </div>
+    </div>
+  `,
+})
+export class TimePickerDropdownSelectorComponent {
+  id = input('time-picker');
+  hoursArray = input<string[]>(initialStates.hoursArray);
+  minutesArrays = input<TimeArrays>(initialStates.minutesArrays);
+  secondsArrays = input<TimeArrays>(initialStates.secondsArrays);
+  defaultValues = input('08:05:00');
+  btnSaveText = input('Save');
+
+  timeChanged = output<number>();
+  toggleTimerDropdown = output<void>();
+
+  protected readonly minutesArray = signal<string[]>(initialStates.minutesArrays.defaultRange);
+  protected readonly secondsArray = signal<string[]>(initialStates.secondsArrays.defaultRange);
+  protected readonly selectedValues = signal<string[]>('08:05:00'.split(':'));
+  protected readonly isBtnSaveDisabled = signal(true);
+  private initialValues: string[] = '08:05:00'.split(':');
+
+  constructor() {
+    // Reset: sólo trackea defaultValues;
+    // el resto se lee sin tracking para no re-disparar en cascada.
+    effect(() => {
+      const defaultValues = this.defaultValues();
+      untracked(() => {
+        const splitted = defaultValues.split(':');
+        this.initialValues = [...splitted];
+        this.selectedValues.set([...splitted]);
+        this.isBtnSaveDisabled.set(true);
+        this.onChangeTimeUnit('hours', splitted[0], [...splitted], true);
+      });
+    });
+  }
+
+  parseIntSafe(v: string | undefined): number {
+    return parseInt(v ?? '0', 10) || 0;
+  }
+
+  onChangeTimeUnit(
+    timeUnit: string,
+    newValue: string,
+    timeArrayValues: string[] = this.selectedValues(),
+    isDefaultTime = false,
+  ): void {
+    const timeArray = [...timeArrayValues];
+    const hoursArray = this.hoursArray();
+    if (timeUnit === 'hours' || timeUnit === 'minutes') {
+      const minMinutesArray = this.minutesArrays().minRange;
+      const defaultMinutesArray = this.minutesArrays().defaultRange;
+      const maxMinutesArray = this.minutesArrays().maxRange;
+      const minSecondsArray = this.secondsArrays().minRange;
+      const defaultSecondsArray = this.secondsArrays().defaultRange;
+      const maxSecondsArray = this.secondsArrays().maxRange;
+      let newMinutesArray = defaultMinutesArray;
+      let newSecondsArray = defaultSecondsArray;
+      if (timeUnit === 'hours') timeArray[0] = newValue;
+      else timeArray[1] = newValue;
+      if (timeArray[0] === hoursArray[hoursArray.length - 1]) {
+        newMinutesArray = maxMinutesArray;
+        if (
+          !maxMinutesArray.includes(timeArray[1]) ||
+          timeArray[1] === maxMinutesArray[maxMinutesArray.length - 1]
+        ) {
+          if (!maxMinutesArray.includes(timeArray[1])) {
+            timeArray[1] = maxMinutesArray[maxMinutesArray.length - 1];
+          }
+          newSecondsArray = maxSecondsArray;
+          if (!maxSecondsArray.includes(timeArray[2])) {
+            timeArray[2] = maxSecondsArray[maxSecondsArray.length - 1];
+          }
+        }
+      } else if (timeArray[0] === hoursArray[0]) {
+        newMinutesArray = minMinutesArray;
+        if (!minMinutesArray.includes(timeArray[1]) || timeArray[1] === minMinutesArray[0]) {
+          if (!minMinutesArray.includes(timeArray[1])) {
+            timeArray[1] = minMinutesArray[0];
+          }
+          newSecondsArray = minSecondsArray;
+          if (!minSecondsArray.includes(timeArray[2])) {
+            timeArray[2] = minSecondsArray[0];
+          }
+        }
+      }
+      this.minutesArray.set([...newMinutesArray]);
+      this.secondsArray.set([...newSecondsArray]);
+    } else timeArray[2] = newValue;
+
+    this.selectedValues.set([...timeArray]);
+
+    if (isDefaultTime) this.isBtnSaveDisabled.set(true);
+    else {
+      this.isBtnSaveDisabled.set(
+        timeArray.every((timeValue, index) => timeValue === this.initialValues[index]),
+      );
+    }
+  }
+
+  onSaveTimeBtnClicked(): void {
+    this.initialValues = this.selectedValues();
+    const newTimeValue = this.selectedValues().join(':');
+    this.timeChanged.emit(getSecFromTimeValue(newTimeValue));
+    this.toggleTimerDropdown.emit();
+  }
+}