@up_si_vale/sivale-componentes-angular 1.0.0

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

@@ -0,0 +1,1002 @@
+.date-picker-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-bottom: 6px;
+  padding: 0 4px;
+
+  label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-family: 'Quicksand', sans-serif;
+    font-weight: 500;
+    font-size: 14px;
+    color: #585D61;
+  }
+}
+
+.date-picker-container {
+  position: relative;
+  width: 100%;
+}
+
+.date-picker-input {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  min-height: 44px;
+  height: 44px;
+  padding: 0 0.75rem;
+  border: 1px solid #EAECF5;
+  box-shadow: 0 1px 2px 0 #A1AFEC66;
+  border-radius: 8px;
+  background: white;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family: 'Quicksand', sans-serif;
+
+  &:hover:not(.disabled) {
+    border-color: #FBD399;
+  }
+
+  &.open {
+    border-color: #FBD399;
+    box-shadow: 0 0 0 4px #FFE8C8, 0 1px 2px 0 #0A0D120D;
+  }
+
+  &.error {
+    border-color: #F04438;
+  }
+
+  &.disabled {
+    background: #F9FAFB;
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .calendar-icon {
+    color: #A4A7AE;
+    flex-shrink: 0;
+  }
+
+  .date-picker-placeholder {
+    color: #A4A7AE;
+    font-size: 14px;
+    flex: 1;
+  }
+
+  .date-picker-value {
+    color: #2E353A;
+    font-size: 14px;
+    font-weight: 500;
+    flex: 1;
+  }
+}
+
+.field-error {
+  color: #F04438;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+  font-family: 'Quicksand', sans-serif;
+}
+
+// Overlay (covers entire viewport)
+.date-picker-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  pointer-events: none;
+}
+
+// Dropdown styles
+.date-picker-dropdown {
+  pointer-events: all;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: all 0.2s ease;
+  overflow: visible;
+
+  &.open {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.date-picker-content {
+  display: flex;
+  font-family: 'Quicksand', sans-serif;
+  overflow: visible;
+}
+
+// Main content column (calendars + footer)
+.date-picker-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: visible;
+}
+
+// Sidebar (only for range mode)
+.filter-sidebar {
+  padding: 0.5rem 0.8rem;
+  min-width: 170px;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid #F3F4F6;
+
+  .filter-option {
+    font-family: Quicksand, sans-serif;
+    padding: 0.625rem 0.8rem;
+    color: #6B7280;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    white-space: nowrap;
+    position: relative;
+    font-weight: 400;
+    font-size: 14px;
+
+    &:hover:not(.active) {
+      background: #F9FAFB;
+    }
+
+    &.active {
+      background: #FEF4E6;
+      color: #F7A733;
+      font-weight: 500;
+      border-radius: 6px;
+    }
+  }
+}
+
+// Calendars
+.calendars-container {
+  display: flex;
+  gap: 3rem;
+  padding: 1rem;
+  overflow: visible;
+
+  // Single calendar mode - center the calendar
+  .date-picker-dropdown:not(.range-mode) & {
+    gap: 0;
+    justify-content: center;
+  }
+}
+
+.calendar {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  position: relative;
+  overflow: visible;
+
+  .calendar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 0.25rem;
+    margin-bottom: 0.5rem;
+    position: relative;
+    overflow: visible;
+
+    .month-year-selector {
+      position: relative;
+      flex: 1;
+      display: flex;
+      justify-content: center;
+    }
+
+    .month-year {
+      font-size: 0.9375rem;
+      font-weight: 600;
+      color: #1F2937;
+      min-width: 160px;
+      text-align: center;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      padding: 0.375rem 0.5rem;
+      border-radius: 6px;
+      transition: all 0.15s ease;
+
+      &:hover {
+        background: #F3F4F6;
+      }
+    }
+
+    .nav-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: transparent;
+      border-radius: 6px;
+      cursor: pointer;
+      color: #6B7280;
+      transition: all 0.15s ease;
+      padding: 0;
+
+      &:hover:not(:disabled):not(.disabled) {
+        background: #F3F4F6;
+        color: #1F2937;
+      }
+
+      &.disabled,
+      &:disabled {
+        color: #D1D5DB;
+        cursor: not-allowed;
+        opacity: 0.4;
+      }
+
+      svg {
+        width: 10px;
+        height: 10px;
+      }
+    }
+
+    .nav-button-placeholder {
+      width: 28px;
+      height: 28px;
+    }
+  }
+
+  // Month/Year Picker Dropdown
+  .month-year-picker {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 0.5rem;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    z-index: 10002;
+    padding: 1rem;
+    min-width: 280px;
+    border: 1px solid #E5E7EB;
+
+    .picker-section {
+      margin-bottom: 1rem;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .picker-title {
+        font-size: 0.75rem;
+        font-weight: 600;
+        color: #6B7280;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        margin-bottom: 0.5rem;
+      }
+
+      .picker-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 0.5rem;
+
+        .picker-title {
+          margin-bottom: 0;
+          font-size: 0.75rem;
+          font-weight: 600;
+          color: #1F2937;
+          text-transform: none;
+          letter-spacing: 0;
+        }
+
+        .year-nav-button {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 24px;
+          height: 24px;
+          border: none;
+          background: transparent;
+          border-radius: 4px;
+          cursor: pointer;
+          color: #6B7280;
+          transition: all 0.15s ease;
+          padding: 0;
+
+          &:hover:not(:disabled):not(.disabled) {
+            background: #F3F4F6;
+            color: #1F2937;
+          }
+
+          &.disabled,
+          &:disabled {
+            color: #D1D5DB;
+            cursor: not-allowed;
+            opacity: 0.5;
+          }
+
+          svg {
+            width: 10px;
+            height: 10px;
+          }
+        }
+      }
+    }
+
+    .months-grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 0.375rem;
+
+      .month-option {
+        padding: 0.5rem;
+        border: 1px solid #E5E7EB;
+        background: white;
+        border-radius: 6px;
+        font-size: 0.75rem;
+        font-weight: 500;
+        color: #6B7280;
+        cursor: pointer;
+        transition: all 0.15s ease;
+
+        &:hover {
+          background: #F9FAFB;
+          border-color: #D1D5DB;
+        }
+
+        &.active {
+          background: #F59100;
+          color: white;
+          border-color: #F59100;
+        }
+
+        &.disabled,
+        &:disabled {
+          background: #F9FAFB;
+          color: #D1D5DB;
+          border-color: #E5E7EB;
+          cursor: not-allowed;
+          pointer-events: none;
+        }
+      }
+    }
+
+    .years-grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 0.375rem;
+      max-height: 200px;
+      overflow-y: auto;
+
+      .year-option {
+        padding: 0.5rem;
+        border: 1px solid #E5E7EB;
+        background: white;
+        border-radius: 6px;
+        font-size: 0.75rem;
+        font-weight: 500;
+        color: #6B7280;
+        cursor: pointer;
+        transition: all 0.15s ease;
+
+        &:hover {
+          background: #F9FAFB;
+          border-color: #D1D5DB;
+        }
+
+        &.active {
+          background: #F59100;
+          color: white;
+          border-color: #F59100;
+        }
+
+        &.disabled,
+        &:disabled {
+          background: #F9FAFB;
+          color: #D1D5DB;
+          border-color: #E5E7EB;
+          cursor: not-allowed;
+          pointer-events: none;
+        }
+      }
+    }
+  }
+
+  .calendar-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 4px 0;
+
+    .weekday-header {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.6875rem;
+      font-weight: 500;
+      color: #9CA3AF;
+      padding: 0.5rem 0;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .calendar-day {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      font-size: 0.8125rem;
+      color: #1F2937;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      position: relative;
+      font-weight: 400;
+      border-radius: 0;
+
+      &.other-month {
+        color: #D1D5DB;
+      }
+
+      &.today {
+        font-weight: 600;
+        color: #F59100;
+        background: transparent;
+
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 4px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 4px;
+          height: 4px;
+          background: #F59100;
+          border-radius: 50%;
+        }
+      }
+
+      &:hover:not(.disabled):not(.selected):not(.range-start):not(.range-end):not(.in-range) {
+        background: #FEF4E6;
+        border-radius: 50%;
+      }
+
+      &.in-range:hover:not(.disabled):not(.range-start):not(.range-end) {
+        position: relative;
+        background: transparent;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          right: 0;
+          background: #FEF4E6;
+          z-index: -1;
+          border-radius: 0;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          width: 100%;
+          height: 100%;
+          background: #FEF4E6;
+          border-radius: 50%;
+          z-index: 0;
+        }
+
+        span {
+          position: relative;
+          z-index: 1;
+          color: #F59100;
+        }
+      }
+
+      &.in-range:not(.disabled):not(.range-start):not(.range-end) {
+        background: #FEF4E6;
+        color: #F59100;
+        border-radius: 0;
+      }
+
+      // Border radius for in-range days at row edges
+      &.in-range:not(.disabled):not(.range-start):not(.range-end):nth-child(7n+8) {
+        border-radius: 50% 0 0 50%;
+      }
+
+      &.in-range:not(.disabled):not(.range-start):not(.range-end):nth-child(7n+14) {
+        border-radius: 0 50% 50% 0;
+      }
+
+      &.in-range:not(.disabled):not(.range-start):not(.range-end):nth-child(7n+8):nth-child(7n+14) {
+        border-radius: 50%;
+      }
+
+      &.range-start:not(.disabled) {
+        position: relative;
+        background: transparent;
+        color: white;
+        font-weight: 600;
+        z-index: 2;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          right: 0;
+          background: #FEF4E6;
+          z-index: -1;
+          border-radius: 50% 0 0 50%;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          width: 100%;
+          height: 100%;
+          background: #F59100;
+          border-radius: 50%;
+          z-index: 1;
+        }
+
+        span {
+          position: relative;
+          z-index: 2;
+        }
+
+        &.range-end::before {
+          border-radius: 50%;
+        }
+      }
+
+      &.range-end:not(.disabled) {
+        position: relative;
+        background: transparent;
+        color: white;
+        font-weight: 600;
+        z-index: 2;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          right: 0;
+          background: #FEF4E6;
+          z-index: -1;
+          border-radius: 0 50% 50% 0;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          width: 100%;
+          height: 100%;
+          background: #F59100;
+          border-radius: 50%;
+          z-index: 1;
+        }
+
+        span {
+          position: relative;
+          z-index: 2;
+        }
+
+        &.range-start::before {
+          border-radius: 50%;
+        }
+      }
+
+      &.range-start.in-range:not(.disabled) {
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 50%;
+          top: 0;
+          bottom: 0;
+          right: -2px;
+          background: #FEF4E6;
+          z-index: -1;
+        }
+      }
+
+      &.range-end.in-range:not(.disabled) {
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          right: 50%;
+          top: 0;
+          bottom: 0;
+          left: -2px;
+          background: #FEF4E6;
+          z-index: -1;
+        }
+      }
+
+      // Single date selection style
+      &.selected:not(.range-start):not(.range-end) {
+        background: #F59100;
+        color: white;
+        font-weight: 600;
+        border-radius: 50%;
+      }
+
+      &.disabled {
+        color: #E5E7EB;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+    }
+  }
+}
+
+// Footer (only for range mode)
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  border-top: 1px solid #E5E7EB;
+
+  .selected-dates {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+
+    .date-display {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.5rem 0.75rem;
+      background: white;
+      border: 1px solid #E5E7EB;
+      border-radius: 6px;
+      font-size: 0.8125rem;
+      color: #6B7280;
+
+      svg {
+        flex-shrink: 0;
+        color: #9CA3AF;
+      }
+
+      .date-text {
+        font-weight: 400;
+        white-space: nowrap;
+        user-select: none;
+      }
+    }
+
+    .date-separator {
+      color: #9CA3AF;
+      font-weight: 400;
+      font-size: 0.875rem;
+    }
+  }
+
+  .action-buttons {
+    display: flex;
+    gap: 0.75rem;
+
+    button {
+      padding: 0.625rem 1.75rem;
+      border-radius: 8px;
+      font-size: 0.875rem;
+      font-weight: 500;
+      font-family: 'Quicksand', sans-serif;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      border: none;
+      outline: none;
+
+      &:focus-visible {
+        outline: 2px solid rgba(245, 145, 0, 0.3);
+        outline-offset: 2px;
+      }
+    }
+
+    .btn-cancel {
+      background: white;
+      color: #6B7280;
+      border: 1px solid #D1D5DB;
+
+      &:hover {
+        background: #F9FAFB;
+        border-color: #9CA3AF;
+      }
+    }
+
+    .btn-apply {
+      background: #F59100;
+      color: white;
+      border: 1px solid #F59100;
+
+      &:hover {
+        background: #E08500;
+        border-color: #E08500;
+      }
+
+      &:active {
+        background: #CC7A00;
+        border-color: #CC7A00;
+      }
+    }
+  }
+}
+
+// Responsive styles
+@media (max-width: 768px) {
+  .date-picker-content {
+    flex-direction: column;
+  }
+
+  // Hide filter sidebar on mobile
+  .filter-sidebar {
+    display: none;
+  }
+
+  .calendars-container {
+    padding: 0.75rem;
+    gap: 0;
+    justify-content: center;
+
+    // Hide the second calendar on mobile (for range mode)
+    .calendar:last-child:not(:first-child) {
+      display: none;
+    }
+  }
+
+  .calendar {
+    .calendar-header {
+      .month-year-selector {
+        flex: 1;
+      }
+
+      .month-year {
+        min-width: auto;
+        font-size: 0.875rem;
+        padding: 0.25rem 0.375rem;
+      }
+
+      .nav-button {
+        width: 28px;
+        height: 28px;
+
+        svg {
+          width: 10px;
+          height: 10px;
+        }
+      }
+
+      .nav-button-placeholder {
+        display: none;
+      }
+    }
+
+    .month-year-picker {
+      min-width: 240px;
+      padding: 0.75rem;
+
+      .picker-section {
+        .picker-title {
+          font-size: 0.7rem;
+        }
+      }
+
+      .months-grid {
+        grid-template-columns: repeat(3, 1fr);
+        gap: 0.25rem;
+
+        .month-option {
+          padding: 0.4rem;
+          font-size: 0.7rem;
+        }
+      }
+
+      .years-grid {
+        grid-template-columns: repeat(3, 1fr);
+        gap: 0.25rem;
+        max-height: 150px;
+
+        .year-option {
+          padding: 0.4rem;
+          font-size: 0.7rem;
+        }
+      }
+    }
+
+    .calendar-grid {
+      gap: 2px 0;
+
+      .calendar-day {
+        width: 30px;
+        height: 30px;
+        font-size: 0.75rem;
+      }
+
+      .weekday-header {
+        font-size: 0.65rem;
+      }
+    }
+  }
+
+  .footer {
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 0.75rem;
+
+    .selected-dates {
+      width: 100%;
+      justify-content: center;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+
+      .date-display {
+        font-size: 0.7rem;
+        padding: 0.35rem 0.5rem;
+
+        svg {
+          width: 12px;
+          height: 12px;
+        }
+      }
+
+      .date-separator {
+        font-size: 0.7rem;
+      }
+    }
+
+    .action-buttons {
+      width: 100%;
+      gap: 0.5rem;
+
+      button {
+        flex: 1;
+        padding: 0.625rem 0.75rem;
+        font-size: 0.75rem;
+      }
+    }
+  }
+
+  .date-picker-dropdown {
+    width: 280px !important;
+    max-width: calc(100vw - 2rem);
+    max-height: calc(100vh - 4rem);
+    overflow-y: auto;
+
+    &.range-mode {
+      width: 280px !important;
+    }
+  }
+}
+
+// Extra small devices
+@media (max-width: 480px) {
+  .calendars-container {
+    padding: 0.5rem;
+  }
+
+  .calendar {
+    .calendar-header {
+      .month-year {
+        font-size: 0.8125rem;
+        padding: 0.2rem 0.3rem;
+      }
+
+      .nav-button {
+        width: 26px;
+        height: 26px;
+
+        svg {
+          width: 9px;
+          height: 9px;
+        }
+      }
+    }
+
+    .month-year-picker {
+      min-width: 220px;
+      padding: 0.625rem;
+
+      .picker-section {
+        margin-bottom: 0.75rem;
+
+        .picker-title {
+          font-size: 0.65rem;
+          margin-bottom: 0.375rem;
+        }
+      }
+
+      .months-grid {
+        gap: 0.2rem;
+
+        .month-option {
+          padding: 0.35rem;
+          font-size: 0.65rem;
+        }
+      }
+
+      .years-grid {
+        gap: 0.2rem;
+        max-height: 120px;
+
+        .year-option {
+          padding: 0.35rem;
+          font-size: 0.65rem;
+        }
+      }
+    }
+
+    .calendar-grid {
+      gap: 1px 0;
+
+      .weekday-header {
+        font-size: 0.6rem;
+        padding: 0.35rem 0;
+      }
+
+      .calendar-day {
+        width: 28px;
+        height: 28px;
+        font-size: 0.7rem;
+      }
+    }
+  }
+
+  .footer {
+    padding: 0.5rem;
+    gap: 0.5rem;
+
+    .selected-dates {
+      gap: 0.4rem;
+
+      .date-display {
+        font-size: 0.65rem;
+        padding: 0.3rem 0.4rem;
+
+        svg {
+          width: 11px;
+          height: 11px;
+        }
+      }
+
+      .date-separator {
+        font-size: 0.65rem;
+      }
+    }
+
+    .action-buttons {
+      gap: 0.4rem;
+
+      button {
+        padding: 0.5rem 0.625rem;
+        font-size: 0.7rem;
+      }
+    }
+  }
+
+  .date-picker-dropdown {
+    width: 260px !important;
+    max-width: calc(100vw - 1rem);
+  }
+}