@litigiovirtual/ius-design-components 1.0.267 → 1.0.269

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

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

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