@litigiovirtual/ius-design-components 1.0.265 → 1.0.267

package/src/lib/directives/popover.directive.ts

@@ -0,0 +1,164 @@
+import { Directive, ElementRef, Input, OnDestroy, HostListener, inject, ViewContainerRef, ComponentRef } from '@angular/core';
+import { Overlay, OverlayRef, ConnectedPosition, FlexibleConnectedPositionStrategy, OverlayModule } from '@angular/cdk/overlay';
+import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
+import { PopoverComponent } from '../popover/popover.component';
+
+type PrefPos = 'left' | 'right' | 'top' | 'bottom';
+
+@Directive({
+  selector: '[iusPopover], [iusPopoverTitle], [iusPopoverContent]',
+  standalone: true,
+  host: { '(keydown.Escape)': 'forceClose()' }
+})
+export class PopoverDirective implements OnDestroy {
+  private overlay = inject(Overlay);
+  private vcr = inject(ViewContainerRef);
+  private hostEl = inject(ElementRef<HTMLElement>);
+  private overlayRef?: OverlayRef;
+  private portal?: ComponentPortal<PopoverComponent>;
+  private compRef?: ComponentRef<PopoverComponent>;
+
+  private openT?: any;
+  private closeT?: any;
+  private overHost = false;
+  private overOverlay = false;
+  private isOpen = false;
+
+  // API simple
+  @Input('iusPopover') data?: { title?: string; content?: string };
+  @Input('iusPopoverTitle') title?: string;
+  @Input('iusPopoverContent') content?: string;
+
+  // Opcionales
+  @Input() iusPopoverPosition: PrefPos | PrefPos[] = ['right','left','top','bottom'];
+  @Input() iusPopoverOpenDelay = 400;
+  @Input() iusPopoverCloseDelay = 200;
+
+  // Eventos host
+  @HostListener('mouseenter') _enterHost() { this.overHost = true; this.show(); }
+  @HostListener('focusin') _focusHost() { this.overHost = true; this.show(); }
+  @HostListener('mouseleave') _leaveHost() { this.overHost = false; this.hide(); }
+  @HostListener('focusout') _blurHost() { this.overHost = false; this.hide(); }
+
+  ngOnDestroy() { this.dispose(); }
+
+  getPositions(): ConnectedPosition[] {
+    const order: PrefPos[] = Array.isArray(this.iusPopoverPosition)
+      ? this.iusPopoverPosition : [this.iusPopoverPosition];
+
+    const map: Record<PrefPos, ConnectedPosition> = {
+      left: { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -10 },
+      right: { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 10 },
+      top: { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -10 },
+      bottom: { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 10 },
+    };
+
+    const all = ['left', 'right', 'top', 'bottom'].map(p => map[p as PrefPos]);
+    const preferred = order.map(p => map[p]).filter(Boolean);
+    return [...preferred, ...all];
+  }
+
+  ensureOverlay(): OverlayRef {
+    if (this.overlayRef) return this.overlayRef;
+
+    const strategy: FlexibleConnectedPositionStrategy = this.overlay.position()
+      .flexibleConnectedTo(this.hostEl)
+      .withPositions(this.getPositions())
+      .withFlexibleDimensions(false)
+      .withViewportMargin(8)
+      .withPush(true);
+
+    this.overlayRef = this.overlay.create({
+      positionStrategy: strategy,
+      hasBackdrop: false,
+      panelClass: 'ius-popover-panel',
+      scrollStrategy: this.overlay.scrollStrategies.reposition(),
+    });
+
+    const el = this.overlayRef.overlayElement;
+    el.addEventListener('mouseenter', () => { this.overOverlay = true; clearTimeout(this.closeT); });
+    el.addEventListener('mouseleave', () => { this.overOverlay = false; this.hide(); });
+
+    // Cuando CDK re-posiciona, recalculamos el lado real y seteamos la clase de cola
+    strategy.positionChanges.subscribe(() => {
+      if (this.compRef && this.overlayRef) {
+        const cls = this.computeTailFromRects();
+        this.compRef.instance.positionClass = cls;
+        this.compRef.changeDetectorRef.markForCheck();
+      }
+    });
+
+    return this.overlayRef;
+  }
+
+  // Decide el lado de la cola comparando rects reales del host vs overlay
+  computeTailFromRects(): 'tail-left' | 'tail-right' | 'tail-top' | 'tail-bottom' {
+    const host = this.hostEl.nativeElement.getBoundingClientRect();
+    const pane = this.overlayRef!.overlayElement.getBoundingClientRect();
+
+    const dLeft = Math.abs(pane.right - host.left);    // popover a la IZQUIERDA
+    const dRight = Math.abs(pane.left - host.right);   // popover a la DERECHA
+    const dTop = Math.abs(pane.bottom - host.top);     // popover ARRIBA
+    const dBot = Math.abs(pane.top - host.bottom);  // popover ABAJO
+
+    const min = Math.min(dLeft, dRight, dTop, dBot);
+    if (min === dRight) return 'tail-left';   // popover a la DERECHA -> cola IZQUIERDA
+    if (min === dLeft) return 'tail-right';  // popover a la IZQUIERDA -> cola DERECHA
+    if (min === dBot) return 'tail-top';    // popover ABAJO -> cola ARRIBA
+    return 'tail-bottom';                     // popover ARRIBA -> cola ABAJO
+  }
+
+  show(): void {
+    clearTimeout(this.closeT);
+    if (this.isOpen) return;
+
+    this.openT = setTimeout(() => {
+      const overlayRef = this.ensureOverlay();
+      if (!this.portal) this.portal = new ComponentPortal(PopoverComponent, this.vcr);
+
+      if (!overlayRef.hasAttached()) {
+        this.compRef = overlayRef.attach(this.portal);
+        this.compRef.instance.label = this.data?.title ?? this.title ?? '';
+        this.compRef.instance.content = this.data?.content ?? this.content ?? '';
+      }
+
+      overlayRef.updatePosition();
+
+      // Tras el layout real, calculamos la cola exacta
+      setTimeout(() => {
+        if (this.compRef && this.overlayRef) {
+          this.compRef.instance.positionClass = this.computeTailFromRects();
+          this.compRef.changeDetectorRef.markForCheck();
+        }
+      });
+
+      this.isOpen = true;
+    }, this.iusPopoverOpenDelay);
+  }
+
+  hide(): void {
+    clearTimeout(this.openT);
+    if (this.overHost || this.overOverlay) return;
+
+    this.closeT = setTimeout(() => {
+      if (this.overlayRef?.hasAttached()) this.overlayRef.detach();
+      this.isOpen = false;
+      this.compRef = undefined;
+    }, this.iusPopoverCloseDelay);
+  }
+
+  forceClose() {
+    this.overHost = this.overOverlay = false;
+    clearTimeout(this.openT);
+    clearTimeout(this.closeT);
+    if (this.overlayRef?.hasAttached()) this.overlayRef.detach();
+    this.isOpen = false;
+    this.compRef = undefined;
+  }
+
+  dispose() {
+    this.forceClose();
+    this.overlayRef?.dispose();
+    this.overlayRef = undefined;
+  }
+}

package/src/lib/double-date-picker/double-date-picker.component.html

@@ -0,0 +1,176 @@
+<div class="date-picker" [class.disabled]="disabled">
+  <div class="text">
+    @if (isRequired) {
+      <div class="required"></div>
+    }
+
+    <label class="label">{{ label }}</label>
+
+    @if (iconHelp) {
+      <div class="help-icon">
+        <ius-icon-md iconName="icon-help"></ius-icon-md>
+      </div>
+      }
+
+    <label class="label">:</label>
+  </div>
+
+  <div class="input-wrapper">
+    <div
+      class="container-textfield"
+      [ngClass]="{
+        disabled: disabled,
+        focused: calendarOpen || focused,
+        alert: !calendarOpen && error && !disabled,
+        selected: startDate && endDate
+      }"
+      (click)="toggleCalendar()"
+    >
+      <div class="input">
+          <div class="fechas">
+            <input
+              [placeholder]="placeholder"
+              [value]="startDate ? (startDate | date : 'dd/MM/yyyy') : ''"
+              readonly
+              [disabled]="disabled"
+            />
+          </div>
+          <div style="color: #595959;">
+            <ius-icon-md [iconName]="'icon-east'" ></ius-icon-md>
+          </div>
+          <div class="fechas">
+            <input
+              [placeholder]="placeholder"
+              [value]="endDate ? (endDate | date : 'dd/MM/yyyy') : ''"
+              readonly
+              [disabled]="disabled"
+            />
+          </div>
+        <div class="cnt-icon-right">
+          <ius-icon-md iconName="icon-calendar-today"></ius-icon-md>
+        </div>
+      </div>
+    </div>
+
+    @if (calendarOpen) {
+      <div class="calendar-overlay">
+        <div class="mes">
+          <div class="calendar-header">
+            <ius-button-standard-tertiary iconName="icon-keyboard-arrow-left" (buttonClicked)="prevLeft()"></ius-button-standard-tertiary>
+      
+            <span (click)="nextView('left')">
+              @switch (calendarViewLeft) {
+                @case ('day') { {{ getMonthName(viewDateLeft.getMonth()) }} {{ viewDateLeft.getFullYear() }} }
+                @case ('month') { {{ viewDateLeft.getFullYear() }} }
+                @case ('year') { {{ getDecadeStart(viewDateLeft) }}–{{ getDecadeStart(viewDateLeft) + 9 }} }
+              }
+            </span>
+      
+            <ius-button-standard-tertiary iconName="icon-keyboard-arrow-right" (buttonClicked)="nextLeft()"></ius-button-standard-tertiary>
+          </div>
+      
+          <div class="calendar-body">
+            @switch (calendarViewLeft) {
+              @case ('day') {
+                <div class="grid days">
+                  @for (day of dayLabels; track day) { <div class="header">{{ day }}</div> }
+                  @for (date of calendarDaysLeft; track date) {
+                    <div class="cell"
+                      [class.selected]="isSameDate(date, startDate)"
+                      [class.range]="isInRangeForView(date, viewDateLeft)"
+                      [class.out-of-range]="isDateOutOfRange(date, viewDateLeft)"
+                      (click)="selectDateFrom('left', date)">
+                      {{ date.getDate() }}
+                    </div>
+                  }
+                </div>
+              }
+              @case ('month') {
+                <div class="grid months">
+                  @for (m of months; track m; let i = $index) {
+                    <div class="cell" (click)="setMonth('left', i, $event)">{{ m }}</div>
+                  }
+                </div>
+              }
+              @case ('year') {
+                <div class="grid years">
+                  @for (i of yearsArray; track i) {
+                    <div class="cell"
+                      [class.out-of-range]="i === 0 || i === 11"
+                      (click)="setYear('left', getDecadeStart(viewDateLeft) - 1 + i, $event)">
+                      {{ getDecadeStart(viewDateLeft) - 1 + i }}
+                    </div>
+                  }
+                </div>
+              }
+            }
+          </div>
+        </div>
+
+        <div class="mes">
+          <div class="calendar-header">
+            <ius-button-standard-tertiary iconName="icon-keyboard-arrow-left" (buttonClicked)="prevRight()"></ius-button-standard-tertiary>
+      
+            <span (click)="nextView('right')">
+              @switch (calendarViewRight) {
+                @case ('day') { {{ getMonthName(viewDateRight.getMonth()) }} {{ viewDateRight.getFullYear() }} }
+                @case ('month') { {{ viewDateRight.getFullYear() }} }
+                @case ('year') { {{ getDecadeStart(viewDateRight) }}–{{ getDecadeStart(viewDateRight) + 9 }} }
+              }
+            </span>
+      
+            <ius-button-standard-tertiary iconName="icon-keyboard-arrow-right" (buttonClicked)="nextRight()"></ius-button-standard-tertiary>
+          </div>
+      
+          <div class="calendar-body">
+            @switch (calendarViewRight) {
+              @case ('day') {
+                <div class="grid days">
+                  @for (day of dayLabels; track day) { <div class="header">{{ day }}</div> }
+                  @for (date of calendarDaysRight; track date) {
+                    <div class="cell"
+                    [class.selected]="isSameDate(date, endDate)"
+                    [class.range]="isInRangeForView(date, viewDateRight)"
+                    [class.out-of-range]="isDateOutOfRange(date, viewDateRight)"
+                    [class.disabled]="isDisabledDate(date, 'right')"
+                    (click)="!isDisabledDate(date, 'right') && selectDateFrom('right', date)">
+                    {{ date.getDate() }}
+                    </div>
+                  }
+                </div>
+              }
+              @case ('month') {
+                <div class="grid months">
+                  @for (m of months; track m; let i = $index) {
+                    <div class="cell" (click)="setMonth('right', i, $event)">{{ m }}</div>
+                  }
+                </div>
+              }
+              @case ('year') {
+                <div class="grid years">
+                  @for (i of yearsArray; track i) {
+                    <div class="cell"
+                      [class.out-of-range]="i === 0 || i === 11"
+                      (click)="setYear('right', getDecadeStart(viewDateRight) - 1 + i, $event)">
+                      {{ getDecadeStart(viewDateRight) - 1 + i }}
+                    </div>
+                  }
+                </div>
+              }
+            }
+          </div>
+        </div>
+      </div>
+    }
+  </div>
+  @if (helpText && focused && !error) {
+    <div class="help-text">
+      {{helpText}}
+    </div>
+  }
+  @if (helpTextError && error) {
+    <div class="help-text-error">
+      {{helpTextError}}
+    </div>
+  }
+</div>

package/src/lib/double-date-picker/double-date-picker.component.scss

@@ -0,0 +1,365 @@
+@use "@litigiovirtual/ius-design-styles/lib/colors" as colors;
+@use "@litigiovirtual/ius-design-styles/lib/typography" as typography;
+@use "@litigiovirtual/ius-design-styles/lib/variables" as variables;
+@use "@litigiovirtual/ius-design-styles/lib/semantic-colors" as semantic;
+
+.required {
+  width: 4px;
+  height: 4px;
+  margin-right: 4px;
+  aspect-ratio: 1 / 1;
+  border-radius: 50%;
+  background-color: colors.$danger-500;
+}
+
+.text {
+  display: flex;
+  align-items: center;
+}
+
+.date-picker {
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  &.disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  .label {
+    margin: 0 4px;
+    color: semantic.$color-text-primary-on-light;
+    font: {
+      family: Rubik;
+      size: typography.$font-size-base;
+      weight: 500;
+      style: normal;
+    }
+    line-height: typography.$line-height-base;
+    letter-spacing: 0.28px;
+  }
+
+  .help-icon {
+    color: semantic.$color-text-secundary-on-light;
+  }
+
+  .container-textfield {
+    width: 100%;
+    align-items: flex-start;
+    gap: variables.$spacing-xxs;
+
+    .input {
+      display: flex;
+      justify-content: space-between;
+      gap: variables.$spacing-xxs;
+      padding: variables.$spacing-sm;
+      border-radius: variables.$radius-md;
+      background: colors.$neutral-2;
+      cursor: pointer;
+      border: none;
+
+      .fechas {
+        width: 30%;
+
+        input {
+          max-width: 100%;
+          flex: 1;
+          outline: none;
+          border: none;
+          background: colors.$neutral-2;
+          color: semantic.$color-text-tertiary-on-light;
+          font: {
+            family: Rubik;
+            size: typography.$font-size-base;
+            weight: 400;
+            style: normal;
+          }
+          line-height: typography.$line-height-base;
+          letter-spacing: 0.28px;
+          cursor: pointer;
+        }
+      }
+    }
+
+    .cnt-icon-right {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: 3%;
+      color: semantic.$color-text-primary-on-light;
+    }
+
+    &:hover .input {
+      background-color: colors.$info-100;
+
+      .fechas input {
+        background-color: colors.$info-100;
+      }
+
+      .cnt-icon-right {
+        color: colors.$info-700;
+      }
+    }
+
+    &.focused .input {
+      border: 1px solid colors.$primary-600;
+      background: colors.$info-100;
+
+      .fechas input {
+        background-color: colors.$info-100;
+        border: none;
+      }
+
+      .cnt-icon-right {
+        color: colors.$info-700;
+      }
+    }
+
+    &.alert {
+      .input {
+        border-radius: variables.$radius-md;
+        border: 1px solid colors.$danger-600;
+        background: colors.$danger-100;
+
+        .fechas input {
+          background: colors.$danger-100;
+        }
+
+        .cnt-icon-right {
+          color: colors.$danger-600;
+        }
+      }
+    }
+
+    &.selected {
+      .input {
+        background: colors.$neutral-2;
+
+        .fechas input {
+          background: colors.$neutral-2;
+          border: none;
+
+          color: semantic.$color-text-primary-on-light;
+
+          font-family: typography.$font-secondary;
+          font-size: typography.$font-size-base;
+          font-style: normal;
+          font-weight: 400;
+          line-height: typography.$line-height-base;
+          letter-spacing: 0.28px;
+        }
+
+        .cnt-icon-right {
+          color: semantic.$color-text-secundary-on-light;
+        }
+      }
+    }
+
+    &.disabled {
+      background: colors.$neutral-2;
+
+      input::placeholder {
+        color: semantic.$color-text-disabled-on-light;
+        opacity: 1;
+      }
+
+      .cnt-icon-right {
+        color: colors.$neutral-6;
+      }
+    }
+  }
+
+  .calendar-overlay {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    min-width: 540px;
+    padding: 0;
+    gap: 0;
+    border-radius: variables.$radius-md;
+    border: 1px solid colors.$neutral-2;
+    background: colors.$neutral-white;
+
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14), 0 1px 10px rgba(0, 0, 0, 0.1);
+
+    .calendars {
+      display: flex;
+    }
+
+    .mes {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      padding: variables.$spacing-md variables.$spacing-sm;
+    }
+
+    .calendar-header {
+      display: flex;
+      align-items: center;
+      align-self: stretch;
+
+      span {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: semantic.$color-text-primary-on-light;
+        cursor: pointer;
+        font: {
+          family: Roboto;
+          size: typography.$font-size-large;
+          weight: 500;
+          style: normal;
+        }
+        line-height: typography.$line-height-large;
+      }
+    }
+
+    .calendar-body {
+      display: flex;
+      flex-direction: column;
+      gap: variables.$spacing-xs;
+    }
+
+    .grid {
+      display: grid;
+      gap: variables.$spacing-xs;
+
+      &.days {
+        grid-template-columns: repeat(7, 1fr);
+      }
+
+      &.months,
+      &.years {
+        margin-left: 27px;
+        grid-template-columns: repeat(3, 1fr);
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        height: 30px;
+        padding: 2px 4px;
+        gap: variables.$spacing-md;
+        color: semantic.$color-text-primary-on-light;
+        font: {
+          family: Rubik;
+          size: typography.$font-size-sm;
+          weight: 500;
+          style: normal;
+        }
+        line-height: typography.$line-height-sm;
+        letter-spacing: 0.24px;
+      }
+
+      .cell {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        align-self: stretch;
+        padding: 2px 4px;
+        border-radius: 10px;
+        background: colors.$neutral-white;
+        font: {
+          family: Rubik;
+          size: typography.$font-size-base;
+          weight: 400;
+          style: normal;
+        }
+        line-height: typography.$line-height-base;
+        letter-spacing: 0.28px;
+        cursor: pointer;
+
+        &:hover {
+          background: colors.$info-100;
+        }
+
+        &.out-of-range {
+          color: semantic.$color-text-disabled-on-light;
+          pointer-events: none;
+        }
+
+        &.disabled {
+          pointer-events: none;
+          color: semantic.$color-text-disabled-on-light;
+          background: colors.$neutral-1;
+          opacity: 0.6;
+        }
+
+        &.range {
+          padding: 0;
+          border-radius: 0;
+          margin: 0;
+          background-color: colors.$info-100;
+          color: semantic.$color-text-primary-on-light;
+        }
+
+        &.selected {
+          border-radius: variables.$radius-pill;
+          border: 1px solid colors.$info-600;
+          background: colors.$info-500;
+          color: white;
+        }
+      }
+    }
+
+    .today {
+      margin-top: variables.$spacing-xs;
+      width: 100%;
+      padding: variables.$spacing-xs;
+      border: none;
+      background: transparent;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: variables.$spacing-xxs;
+      color: semantic.$color-text-primary-on-light;
+      cursor: pointer;
+      font: {
+        family: Roboto;
+        size: typography.$font-size-large;
+        weight: 500;
+        style: normal;
+      }
+      line-height: typography.$line-height-large;
+    }
+  }
+}
+
+.cell.empty {
+  pointer-events: none;
+  background: transparent;
+  border: none;
+}
+
+.help-text {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: semantic.$color-text-secundary-on-light;
+
+  font-family: typography.$font-secondary;
+  font-size: typography.$font-size-sm;
+  font-style: italic;
+  font-weight: 500;
+  line-height: typography.$line-height-sm;
+  letter-spacing: 0.24px;
+}
+
+.help-text-error {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: colors.$danger-800;
+
+  font-family: typography.$font-secondary;
+  font-size: typography.$font-size-sm;
+  font-style: italic;
+  font-weight: 500;
+  line-height: typography.$line-height-sm;
+  letter-spacing: 0.24px;
+}