@litigiovirtual/ius-design-components 1.0.267 → 1.0.269

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

@@ -1,164 +0,0 @@
-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

@@ -1,176 +0,0 @@
-<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

@@ -1,365 +0,0 @@
-@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;
-}