@litigiovirtual/ius-design-components 1.0.264 → 1.0.267

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

@@ -0,0 +1,216 @@
+<div class="date-picker" [class.disabled]="disabled">
+  <div class="text">
+    @if (isRequired) {
+    <div class="required"></div>
+    }
+
+    <label class="label label-base">{{ label }}</label>
+
+    @if (iconHelp) {
+      <div class="help-icon">
+        <ius-icon-md iconName="icon-help"></ius-icon-md>
+      </div>
+    }
+
+    <label class="label label-base">:</label>
+  </div>
+
+  <div class="input-wrapper">
+    <!-- Origen del overlay -->
+    <div
+      class="container-textfield"
+      [ngClass]="{
+        disabled: disabled,
+        focused: calendarOpen || focused,
+        alert: !calendarOpen && (error || isAlertText) && !disabled,
+        selected: selectedDate
+      }"
+      (click)="toggleCalendar()"
+      cdkOverlayOrigin #origin="cdkOverlayOrigin"
+    >
+      <div class="input">
+        <input
+          [placeholder]="placeholder"
+          [value]="selectedDate ? getDisplayValue() : ''"
+          readonly
+          [disabled]="disabled"
+        />
+        <div class="cnt-icon-right">
+          <ius-icon-md iconName="icon-calendar-today"></ius-icon-md>
+        </div>
+      </div>
+    </div>
+
+    <!-- ======== OVERLAY (CDK) ======== -->
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOpen]="calendarOpen"
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayPositions]="overlayPositions"
+      [cdkConnectedOverlayHasBackdrop]="false"
+      [cdkConnectedOverlayPush]="true"
+      [cdkConnectedOverlayFlexibleDimensions]="false"
+      [cdkConnectedOverlayPanelClass]="'calendar-overlay-panel'"
+    >
+      <div
+        class="calendar-overlay"
+        [class.time-only]="mode === 'time-only'"
+        [class.date-only]="mode === 'date-only'"
+      >
+        <div class="calendar-content">
+          @if (mode !== 'time-only') {
+          <div class="calendar-side">
+            <div class="calendar-header">
+              <ius-button-standard-tertiary
+                iconName="icon-keyboard-arrow-left"
+                (buttonClicked)="prev()"
+              ></ius-button-standard-tertiary>
+
+              <span (click)="calendarView = nextView(calendarView)">
+              @switch (calendarView) { @case ('day') {
+              {{ getMonthName(viewDate.getMonth()) }}
+              {{ viewDate.getFullYear() }}
+              } @case ('month') {
+              {{ viewDate.getFullYear() }}
+              } @case ('year') {
+              {{ getDecadeStart() }}-{{ getDecadeStart() + 9 }}
+              } }
+              </span>
+
+              <ius-button-standard-tertiary
+                iconName="icon-keyboard-arrow-right"
+                (buttonClicked)="next()"
+              ></ius-button-standard-tertiary>
+            </div>
+
+            <div class="calendar-body">
+            @switch (calendarView) { @case ('day') {
+                  <div class="grid days">
+              @for (day of dayLabels; track day) {
+              <div class="header">{{ day }}</div>
+              } @for (date of calendarDays; track date) {
+                      <div
+                        class="cell"
+                [class.selected]="
+                  selectedDate && isSameDate(date, selectedDate)
+                "
+                        [class.out-of-range]="date.getMonth() !== viewDate.getMonth()"
+                        (click)="selectDate(date, true)"
+                      >
+                        {{ date.getDate() }}
+                      </div>
+                    }
+                  </div>
+            } @case ('month') {
+                  <div class="grid months">
+                    @for (m of months; track m; let i = $index) {
+                      <div class="cell" (click)="setMonth(i)">{{ 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(getDecadeStart() - 1 + i)"
+                      >
+                        {{ getDecadeStart() - 1 + i }}
+                      </div>
+                    }
+                  </div>
+            } }
+            </div>
+          </div>
+        } @if (mode !== 'date-only') {
+          <div class="time-selector">
+            <button class="time-title">
+              <span>
+                {{ selectedHour | number : "2.0" }}:{{
+                  selectedMinute === 0 ? "00" : (selectedMinute | number : "2.0")
+                }}
+                {{ selectedPeriod }}
+              </span>
+            </button>
+            <ius-simple-divider></ius-simple-divider>
+            <div class="time-columns">
+              <div class="column scrollable">
+                @for (h of hours; track h) {
+                <div
+                  [class.selected]="h === selectedHour"
+                (click)="
+                  selectedHour = h;
+                  mode === 'time-only'
+                    ? selectTime()
+                    : selectDate(viewDate, true)
+                "
+                >
+                  {{ h | number : "2.0" }}
+                </div>
+                }
+              </div>
+              <div class="divider"></div>
+              <div class="column scrollable">
+                @for (m of minutes; track m) {
+                <div
+                  [class.selected]="m === selectedMinute"
+                (click)="
+                  selectedMinute = m;
+                  mode === 'time-only'
+                    ? selectTime()
+                    : selectDate(viewDate, true)
+                "
+                >
+                  {{ m | number : "2.0" }}
+                </div>
+                }
+              </div>
+              <div class="divider"></div>
+              <div class="column">
+                <div
+                  [class.selected]="'AM' === selectedPeriod"
+                (click)="
+                  selectedPeriod = 'AM';
+                  mode === 'time-only'
+                    ? selectTime()
+                    : selectDate(viewDate, false)
+                "
+                >
+                  AM
+                </div>
+                <div
+                  [class.selected]="'PM' === selectedPeriod"
+                (click)="
+                  selectedPeriod = 'PM';
+                  mode === 'time-only'
+                    ? selectTime()
+                    : selectDate(viewDate, false)
+                "
+                >
+                  PM
+                </div>
+              </div>
+            </div>
+          </div>
+          }
+        </div>
+
+        <ius-simple-divider></ius-simple-divider>
+        <button class="today" (click)="goToToday()">
+        @if (mode === 'date-only') { Fecha actual } @else if (mode ===
+        'time-only') { Hora actual } @else { Fecha y hora actual }
+        </button>
+      </div>
+    </ng-template>
+    <!-- ======== /OVERLAY (CDK) ======== -->
+  </div>
+  @if (helpText && focused && !error && !isAlertText) {
+  <div class="help-text">
+    {{ helpText }}
+  </div>
+  } @if ((errorText || helpTextError) && (error || isAlertText)) {
+  <div class="help-text-error">
+    {{ errorText ?? helpTextError }}
+  </div>
+  }
+</div>

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

@@ -0,0 +1,516 @@
+@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;
+  aspect-ratio: 1 / 1;
+  border-radius: 50%;
+  background-color: colors.$danger-500;
+}
+
+.text {
+  display: flex;
+  align-items: center;
+  margin-bottom: variables.$spacing-xs;
+  gap: variables.$spacing-xxs;
+}
+
+.cdk-overlay-pane.calendar-overlay-panel {
+  z-index: 9000;
+  position: absolute !important;
+}
+
+.input-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.date-picker {
+  width: 100%;
+  position: relative;
+
+  &.disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  .label {
+    color: semantic.$color-text-primary-on-light;
+  }
+
+  .help-icon {
+    color: semantic.$color-text-secundary-on-light;
+  }
+}
+
+.container-textfield {
+  display: flex;
+  position: relative;
+  align-items: flex-start;
+  gap: variables.$spacing-xxs;
+
+  .input {
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    gap: variables.$spacing-xxs;
+    padding: variables.$spacing-sm;
+    border-radius: variables.$radius-md;
+    background: colors.$neutral-2;
+    cursor: pointer;
+    border: none;
+
+    input {
+      flex: 1;
+      outline: none;
+      border: none;
+      background: colors.$neutral-2;
+      color: semantic.$color-text-tertiary-on-light;
+
+      font: {
+        family: typography.$font-secondary;
+        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;
+    color: semantic.$color-text-primary-on-light;
+  }
+
+  &:hover .input {
+    background-color: colors.$info-100;
+
+    input {
+      background-color: colors.$info-100;
+    }
+
+    .cnt-icon-right {
+      color: colors.$info-900;
+    }
+  }
+
+  &.focused .input {
+    border: 1px solid colors.$primary-600;
+    background: colors.$info-100;
+
+    input {
+      background-color: colors.$info-100;
+      border: none;
+    }
+
+    .cnt-icon-right {
+      color: colors.$info-900;
+    }
+  }
+
+  &.alert {
+    .input {
+      border-radius: variables.$radius-md;
+      border: 1px solid colors.$danger-600;
+      background: colors.$danger-100;
+
+      input {
+        background: colors.$danger-100;
+      }
+
+      .cnt-icon-right {
+        color: colors.$danger-600;
+      }
+    }
+  }
+
+  &.selected {
+    .input {
+      background: colors.$neutral-2;
+
+      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;
+      }
+
+      .help-icon {
+        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: inline-block;
+  border-radius: variables.$radius-md;
+  border: 1px solid colors.$neutral-2;
+  background: colors.$neutral-white;
+  box-shadow: variables.$elevation-200;
+
+  &.time-only {
+    min-width: 200px;
+    width: auto;
+
+    .calendar-content {
+      flex-direction: column;
+      align-items: center;
+      padding: variables.$spacing-sm;
+    }
+
+    .time-selector {
+      border-left: none;
+      border-top: 1px solid colors.$neutral-3;
+      padding: variables.$spacing-sm;
+      min-width: 180px;
+      width: 100%;
+
+      .time-columns {
+        justify-content: center;
+        gap: 8px;
+      }
+
+      .column {
+        height: 150px;
+      }
+    }
+  }
+
+  &.date-only {
+    min-width: 280px;
+    width: auto;
+
+    .calendar-content {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .calendar-side {
+      min-width: 260px;
+      width: 100%;
+    }
+  }
+}
+
+.calendar-content {
+  display: flex;
+  flex-direction: row;
+  width: auto;
+  max-width: none;
+  max-height: 60vh;
+  overflow: hidden;
+}
+
+.calendar-side {
+  padding: variables.$spacing-sm;
+  flex: 1;
+  min-width: 260px;
+}
+
+.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;
+  margin: 0 10px;
+}
+
+.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;
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    min-height: 24px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    aspect-ratio: 1/1;
+    background: colors.$neutral-white;
+
+    font: {
+      family: typography.$font-secondary;
+      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;
+    }
+
+    &.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;
+
+  &:hover {
+    background-color: colors.$info-100;
+    border-radius: variables.$radius-sm;
+  }
+}
+
+.calendar-overlay .calendar-content {
+  overflow-x: hidden;
+}
+
+.time-selector {
+  border-left: 1px solid colors.$neutral-3;
+  padding: variables.$spacing-sm variables.$spacing-xs;
+  display: flex;
+  flex-direction: column;
+  gap: variables.$spacing-xs;
+  min-width: 150px;
+
+  .time-columns {
+    display: flex;
+    gap: 4px;
+    justify-content: center;
+  }
+
+  .time-title {
+    display: flex;
+    padding: variables.$spacing-xs;
+    justify-content: center;
+    align-items: center;
+    gap: variables.$spacing-xxs;
+    align-self: stretch;
+    border-radius: variables.$radius-sm;
+    border: none;
+    background-color: white;
+
+    span {
+      color: semantic.$color-text-primary-on-light;
+      font-family: typography.$font-primary;
+      font-size: typography.$font-size-large;
+      font-style: normal;
+      font-weight: 500;
+      line-height: typography.$line-height-large;
+    }
+  }
+
+  .divider {
+    background-color: rgba(182, 180, 180, 0.189);
+    height: 100%;
+    width: 1px;
+  }
+
+  .column {
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    height: 218px;
+    flex-direction: column;
+    align-items: flex-start;
+    margin: 0 2px;
+
+    .list {
+      display: flex;
+      padding: variables.$spacing-xxs variables.$spacing-xs;
+      justify-content: flex-end;
+      align-items: flex-start;
+      gap: variables.$spacing-xs;
+      align-self: stretch;
+    }
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: white;
+      border-radius: 4px;
+    }
+
+    div {
+      display: flex;
+      height: 28px;
+      padding: variables.$spacing-xxs variables.$spacing-xs;
+      justify-content: flex-end;
+      align-items: flex-start;
+      gap: variables.$spacing-xs;
+      flex-shrink: 0;
+      align-self: stretch;
+      background: colors.$neutral-white;
+      color: semantic.$color-text-secundary-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;
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      &.selected {
+        display: flex;
+        padding: variables.$spacing-xxs variables.$spacing-xs;
+        justify-content: flex-end;
+        align-items: center;
+        gap: variables.$spacing-xs;
+        align-self: stretch;
+        border-radius: variables.$radius-md;
+        background: colors.$info-500;
+        color: white;
+      }
+    }
+  }
+
+  .today {
+    margin-top: variables.$spacing-xs;
+    padding: variables.$spacing-xs;
+    text-align: center;
+    font-weight: 500;
+    color: semantic.$color-text-primary-on-light;
+  }
+}
+
+.help-text {
+  display: flex;
+  position: absolute;
+  margin-top: variables.$spacing-xxs;
+  color: semantic.$color-text-secundary-on-light;
+
+  font-family: typography.$font-primary;
+  font-size: typography.$font-size-sm;
+  font-style: italic;
+  font-weight: typography.$font-weight-medium;
+  line-height: typography.$line-height-sm;
+  letter-spacing: 0.24px;
+}
+
+.help-text-error {
+  display: flex;
+  position: absolute;
+  margin-top: variables.$spacing-xxs;
+  color: colors.$danger-800;
+
+  font-family: typography.$font-primary;
+  font-size: typography.$font-size-sm;
+  font-style: italic;
+  font-weight: typography.$font-weight-medium;
+  line-height: typography.$line-height-sm;
+  letter-spacing: 0.24px;
+}