@brickclay-org/ui 0.1.88 → 0.1.90

package/src/lib/calender/components/custom-calendar/custom-calendar.component.css

@@ -0,0 +1,898 @@
+/* @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */
+
+.calendar-container,
+.calendar-container * {
+  font-family: 'Inter', sans-serif !important;
+}
+
+/* --------------------------
+   CALENDAR CONTAINER
+---------------------------*/
+.calendar-container {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+/* --------------------------
+   INPUT WRAPPER
+---------------------------*/
+.input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.calendar-input {
+  width: 100%;
+  padding: 9px 14px 9px 40px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  font-size: 14px;
+  cursor: pointer;
+  background: #fff;
+  transition: all 0.2s;
+}
+
+.calendar-input:hover {
+  border-color: #999;
+}
+
+.calendar-input:focus {
+  outline: none;
+  border-color: #999;
+  /* box-shadow: 0 0 0 3px rgb(106 106 106 / 10%); */
+}
+
+.calendar-icon {
+  position: absolute;
+  left: 12px;
+  pointer-events: none;
+  font-size: 18px;
+}
+
+.clear-btn {
+  position: absolute;
+  right: 9px;
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: #999;
+  cursor: pointer;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  transition: color 0.2s;
+  top: 8px;
+}
+
+.clear-btn:hover {
+  color: #333;
+}
+
+/* --------------------------
+   CALENDAR POPUP
+---------------------------*/
+.calendar-popup {
+  /* Position is owned by whichever render path is active — CDK's overlay pane positions itself
+     for the non-inline path (see the component's cdkConnectedOverlay template), and
+     .inline-calendar below sets its own position for the inline path. No position/top/left here. */
+  width: 320px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  /* padding: 16px; */
+  /* Only load-bearing for .inline-calendar (position: relative, normal document flow) — a static
+     element's z-index is a no-op, and the non-inline path has no position here at all (see above).
+     For that path, stacking is CDK's job: .cdk-overlay-pane defaults to z-index:1000 on its own;
+     to go higher, raise it via the `panelClass` input (e.g. panelClass="!z-[1100]"), not here. */
+  z-index: 1000;
+  animation: slideDown 0.2s ease-out;
+  /* CDK's overlay container lives outside .calendar-container, so the inherited font from
+     `.calendar-container *` no longer reaches this element in the (non-inline) common case —
+     re-declare it unconditionally. */
+  font-family: 'Inter', sans-serif;
+  /* Only takes effect once max-width:1024px's `overflow: auto` makes this scroll — thin instead
+     of the browser's default scrollbar, matching .ranges below. */
+  scrollbar-width: thin;
+  scrollbar-color: #c1c1c1 transparent;
+}
+
+.calendar-popup::-webkit-scrollbar {
+  width: 6px;
+}
+
+.calendar-popup::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.calendar-popup::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.calendar-popup::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+.calendar-popup:focus-visible {
+  outline: 0 !important;
+}
+
+/* Inline Calendar Mode */
+.calendar-popup.inline-calendar {
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  margin-top: 0;
+  animation: none;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.calendar-container.inline-mode {
+  display: block;
+  width: 100%;
+}
+
+/* Increase width for dual calendar */
+.calendar-popup.dual-calendar-mode {
+  width: 600px;
+}
+
+.calendar-popup.dual-calendar-mode.has-ranges {
+  width: 730px;
+}
+
+.calendar-popup.has-ranges {
+  width: 450px;
+}
+
+/* .calendar-popup.dual-calendar-mode.has-ranges .dual-calendar {
+  border-left: 1px solid #eee;
+} */
+
+/* Vertical placement itself is CDK's job now (see .calendar-popup above) — this only swaps the
+   open animation direction to match whichever side CDK actually landed the popup on. */
+.calendar-popup.drop-up {
+  animation: slideUp 0.2s ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* --------------------------
+   RANGES SECTION
+---------------------------*/
+.ranges {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #eee;
+  /* max-height: 300px; */
+  /* overflow-y: auto;   */
+  min-width: 150px;
+  padding-right: 8px;
+  scrollbar-width: thin;
+  scrollbar-color: #888 #f1f1f1;
+}
+
+.range-btn {
+  padding: 7px 10px;
+  border: 1px solid transparent;
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  text-align: left;
+  font-size: 14px;
+  transition: all 0.2s;
+  color: #838383;
+  font-weight: 500;
+}
+
+.range-btn:hover {
+  background: #f5f5f5;
+  color: #000;
+}
+
+.range-btn.active {
+  background: #f0f0f0;
+  color: #000;
+  font-weight: 500;
+}
+
+/* --------------------------
+   CALENDAR WRAPPER
+---------------------------*/
+.calendar-wrapper {
+  /*width: 100%;*/
+  padding: 0 12px 12px 12px;
+  /* border-left: 1px solid #eee; */
+}
+
+/* --------------------------
+   HEADER (Month + Year + Arrows)
+---------------------------*/
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  /* margin-bottom: 8px; */
+  /* The bk-month-grid header has no nav-btn children (just centered text) — pin the same
+     height as the day/year headers (30px nav-btn + this padding) so it doesn't shrink. */
+  min-height: 54px;
+  box-sizing: border-box;
+}
+
+.month-year {
+  font-size: 15px;
+  font-weight: 500;
+  color: #333;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* gap: 4px; */
+  text-align: center;
+  text-transform: capitalize;
+}
+
+/* Clickable month / year labels — open the bk-month-grid / bk-year-grid quick-pick. */
+.bk-month-year-btn {
+  @apply bg-transparent border-0 rounded py-1 px-1 cursor-pointer transition-all duration-200;
+  font: inherit;
+  color: inherit;
+  text-transform: inherit;
+}
+
+.bk-month-year-btn:hover:not(:disabled) {
+  @apply text-black;
+}
+
+.bk-month-year-btn:disabled {
+  @apply cursor-not-allowed text-[#ccc] opacity-50;
+}
+
+.nav-btn {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  padding: 11.5px 14px;
+  color: #666;
+  border-radius: 4px;
+  transition: all 0.2s;
+  line-height: 1;
+  height: 30px;
+  width: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.nav-btn:hover {
+  background: #f0f0f0;
+  color: #000;
+}
+
+/* Shared bounding box for every header chevron ("<", ">", "<<", ">>") so the
+   single-chevron icons (native 7x12) and double-chevron icons (native 16x16)
+   read as the same size instead of the double ones looming larger. */
+.nav-btn img {
+  /* width: 9px; */
+  /* height: 14px; */
+  /* object-fit: contain; */
+  max-width: none !important;
+}
+
+.nav-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.35;
+  pointer-events: none;
+}
+
+/* --------------------------
+   MONTH / YEAR QUICK-PICK GRIDS
+   Shown in place of the day table when the header's month or year
+   label is clicked. Cell styling mirrors .calendar-day so the picker
+   reads as the same control, just at a coarser granularity.
+---------------------------*/
+/* Wraps a bk-month-grid/bk-year-grid together with its "Today" quick-jump button. Fixed (not min)
+   height, matching the day table's rendered height (thead + 6 rows) — so switching between
+   the day/month/year views never resizes the popup. The grid takes the remaining space
+   above the button instead of the button adding extra height on top. */
+.bk-grid-picker {
+  @apply flex flex-col box-border h-[256px];
+}
+
+/* Both grids: 3 cols x 4 rows (12 months / a 12-year page), same orientation. Rows size to
+   their own (short) content and pack tightly at the top instead of stretching/spreading to
+   fill the box — cells stay short like day cells, and the "Today" button sits right under
+   the packed rows instead of being pushed to the bottom by spread-out gaps. */
+.bk-month-grid,
+.bk-year-grid {
+  @apply grid grid-cols-3 auto-rows-min shrink-0 gap-[18px];
+}
+
+/* "Today" quick-jump — full width, sits right under the grid; any leftover height in the
+   fixed-height .bk-grid-picker box collapses below it instead of spreading through the grid. */
+.bk-today-btn {
+  @apply shrink-0 w-full p-2 mt-2 border border-[#eee] rounded-md bg-transparent text-[#333] text-[13px] font-medium cursor-pointer transition-all duration-200;
+}
+
+.bk-today-btn:hover:not(:disabled) {
+  @apply bg-[#efefef] text-black;
+}
+
+.bk-today-btn:disabled {
+  @apply text-[#ddd] cursor-not-allowed opacity-50;
+}
+
+/* Short, pill-like cells so the picker reads like the day-grid's cells, just at a
+   coarser granularity. */
+.bk-month-cell,
+.bk-year-cell {
+  @apply flex items-center justify-center py-2.5 px-1 text-[13px] font-medium text-[#333] bg-transparent border-0 rounded-md cursor-pointer text-center transition-all duration-200;
+}
+
+/* Excludes .active/.current so hovering a selected or today cell can't override its own
+   look — without :not(.active), :hover:not(:disabled) actually outranks .active alone on
+   specificity (three class-level selectors vs two), so hovering a selected month/year briefly
+   turned it back to the plain hover gray, losing the black "selected" indicator. */
+.bk-month-cell:hover:not(:disabled):not(.active):not(.current),
+.bk-year-cell:hover:not(:disabled):not(.active):not(.current) {
+  @apply bg-[#efefef] text-black;
+}
+
+.bk-month-cell.active,
+.bk-year-cell.active {
+  @apply bg-black text-white font-semibold;
+}
+
+/* Today's month / year — same gray-background "current" marker as .calendar-day.today gives the
+   day grid, independent of .active (the picked/displayed month or year). */
+.bk-month-cell.current:not(.active),
+.bk-year-cell.current:not(.active) {
+  @apply bg-[#e5e4e4] font-semibold;
+}
+
+.bk-month-cell:disabled,
+.bk-year-cell:disabled {
+  @apply text-[#ddd] cursor-not-allowed opacity-50;
+}
+
+/* --------------------------
+   CALENDAR TABLE
+---------------------------*/
+.calendar-table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: center;
+}
+
+.weekday-header {
+  font-size: 12px;
+  color: #7e7e7e;
+  font-weight: 600;
+  padding: 8px 4px;
+  /*text-transform: uppercase;*/
+  letter-spacing: 0.3px;
+}
+
+/* --------------------------
+   DATE CELLS
+---------------------------*/
+.calendar-day {
+  padding: 8px 4px;
+  font-size: 14px;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.2s;
+  position: relative;
+  color: #333;
+  font-weight: 500;
+  line-height: 1.5;
+  /* text-align: center; */
+  /* width: 40px; */
+  /* height: 40px; */
+  /* display: flex; */
+  /* align-items: center; */
+  /* justify-content: center; */
+}
+
+.calendar-day:hover:not(.disabled):not(.other-month) {
+  background: #efefef;
+  color: #000;
+}
+
+.calendar-day.other-month {
+  color: #ccc;
+  cursor: default;
+}
+
+.calendar-day.disabled {
+  color: #ddd;
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* --------------------------
+   SELECTED DATE (Active) - Start and End dates
+---------------------------*/
+.calendar-day.active {
+  background: #000 !important;
+  color: white !important;
+  font-weight: 600;
+  /* border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto; */
+}
+
+/* --------------------------
+   TODAY DATE
+---------------------------*/
+.calendar-day.today {
+  /* border: 2px solid #007bff; */
+  font-weight: 600;
+}
+
+.calendar-day.today:not(.active) {
+  background: #e5e4e4;
+  /* color: #007bff; */
+}
+
+.calendar-day.active:hover {
+  background: #000 !important;
+}
+
+.calendar-day.today.disabled,
+.bk-month-cell.current:disabled,
+.bk-year-cell.current:disabled {
+  color: #a9a9a9;
+}
+
+/* --------------------------
+   IN-RANGE DATES - Dates between start and end
+---------------------------*/
+.calendar-day.in-range {
+  background: #f5f5f5;
+  color: #333;
+  border-radius: 0;
+  position: relative;
+}
+
+.calendar-day.in-range:hover {
+  background: #e8e8e8;
+}
+
+/* Make in-range dates span full width */
+.calendar-day.in-range::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: #f5f5f5;
+  z-index: -1;
+}
+
+.calendar-day.in-range:hover::before {
+  background: #e8e8e8;
+}
+
+/* --------------------------
+   MULTI-SELECTED DATES
+---------------------------*/
+.calendar-day.multi-selected {
+  background: #4caf50;
+  color: white;
+  font-weight: 600;
+  border-radius: 6px;
+}
+
+.calendar-day.multi-selected:hover {
+  background: #45a049;
+}
+
+/* --------------------------
+   DUAL CALENDAR
+---------------------------*/
+.dual-calendar {
+  display: flex;
+  /* gap: 24px; */
+  width: 100%;
+  /* border-left: 1px solid #eee; */
+}
+
+.calendar-left,
+.calendar-right {
+  flex: 1;
+  min-width: 0;
+  padding: 0 12px 12px;
+}
+
+/* When ranges are shown, adjust layout */
+.calendar-popup.has-ranges {
+  display: flex;
+  flex-direction: row;
+  /* gap: 16px; */
+  /* padding: 20px; */
+}
+
+.calendar-popup.has-ranges .ranges {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+  /* border-right: 1px solid #993535; */
+  padding: 10px;
+}
+
+.calendar-popup.has-ranges .dual-calendar,
+.calendar-popup.has-ranges .calendar-wrapper {
+  flex: 1;
+}
+
+.calendar-right .header {
+  justify-content: space-between;
+}
+
+.calendar-right .header .month-year {
+  text-align: center;
+  flex: 1;
+}
+
+/* --------------------------
+   TIMEPICKER SECTION
+---------------------------*/
+.timepicker-section {
+  margin-top: 12px;
+  padding-top: 12px;
+  /* padding-bottom: 16px; */
+  border-top: 1px solid #eee;
+}
+
+.timepicker-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: #000000;
+  margin-bottom: 4px;
+  /* text-transform: uppercase; */
+  letter-spacing: -0.28px;
+}
+
+/* .timepicker-controls {
+  display: flex;
+  justify-content: center;
+} */
+
+/* --------------------------
+   FOOTER (Apply/Cancel Buttons)
+---------------------------*/
+.footer {
+  padding: 12px;
+  /* margin-top: 12px; */
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  border-top: 1px solid #eee;
+  /* padding-top: 16px; */
+  /*width: 100%;*/
+}
+
+.btn-cancel,
+.btn-apply {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  min-width: 80px;
+}
+
+.btn-cancel {
+  background: #fff;
+  color: #666;
+  border: 1px solid #ddd;
+}
+
+/* .btn-cancel:hover {
+  background: #f5f5f5;
+  border-color: #bbb;
+} */
+
+.btn-apply {
+  background: #000;
+  color: #fff;
+}
+
+/* .btn-apply:hover {
+  background: #333;
+} */
+
+.btn-apply:active {
+  transform: translateY(0);
+}
+
+/* --------------------------
+   RESPONSIVE DESIGN
+---------------------------*/
+@media (max-width: 576px) {
+  .calendar-popup.dual-calendar-mode {
+    max-width: 300px;
+  }
+}
+
+@media (max-width: 768px) {
+  .dual-calendar {
+    flex-direction: column;
+  }
+
+  /* .calendar-popup.dual-calendar-mode.append-to-body {
+    max-width: 350px;
+  } */
+}
+
+@media (min-width: 577px) and (max-width: 1024px) {
+  .calendar-popup.dual-calendar-mode {
+    max-width: 500px;
+  }
+}
+
+
+/* @media (min-width: 1025px) {
+  .calendar-popup.dual-calendar-mode.append-to-body {
+    max-width: 600px;
+  }
+} */
+
+@media (max-width: 1024px) {
+  .calendar-popup {
+    width: 100%;
+    max-width: 320px;
+    max-height: 300px;
+    overflow: auto;
+  }
+
+  .calendar-popup.dual-calendar-mode {
+    width: 100%;
+    max-width: 100%;
+  }
+
+
+  .calendar-popup.has-ranges {
+    flex-direction: column;
+  }
+
+  .calendar-popup.has-ranges .ranges {
+    border-right: none;
+    border-bottom: 1px solid #eee;
+    padding-right: 0;
+    margin-right: 0;
+    padding-bottom: 16px;
+    margin-bottom: 16px;
+  }
+
+}
+
+/* --------------------------
+   SCROLLBAR STYLING
+---------------------------*/
+.ranges::-webkit-scrollbar {
+  width: 6px;
+}
+
+.ranges::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.ranges::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 3px;
+}
+
+.ranges::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.flex-grow-1 {
+  flex-grow: 1;
+}
+
+.calendar-input.calendar-input-has-error {
+  @apply border-[#d11e14];
+}
+
+.calendar-input:disabled {
+  cursor: not-allowed;
+  border-color: rgb(227 227 231);
+  background-color: rgb(244 244 246);
+  color: rgb(161 163 174);
+}
+
+.btn-apply:disabled {
+  cursor: not-allowed !important;
+  opacity: 0.7;
+}
+
+.calendar-day.calendar-day-keyboard-focus:not(.disabled):not(.other-month) {
+  outline: 0px solid #000;
+  /* outline-offset: 0.5px; */
+}
+
+/* --------------------------
+   COMPACT VARIANT
+   Opt-in via [compact]="true". All rules are scoped to
+   .calendar-popup.compact so the default layout is never affected.
+---------------------------*/
+.calendar-popup.compact {
+  width: 240px;
+}
+
+.calendar-popup.compact.has-ranges {
+  width: 380px;
+}
+
+.calendar-popup.compact.dual-calendar-mode {
+  width: 480px;
+}
+
+.calendar-popup.compact.dual-calendar-mode.has-ranges {
+  width: 600px;
+}
+
+/* Header */
+.calendar-popup.compact .header {
+  padding: 8px 0;
+  min-height: 40px;
+}
+
+.calendar-popup.compact .month-year {
+  font-size: 13px;
+}
+
+.calendar-popup.compact .nav-btn {
+  height: 24px;
+  width: 24px;
+  padding: 6px 8px;
+}
+
+/* Wrapper padding */
+.calendar-popup.compact .calendar-wrapper {
+  padding: 0 8px 8px 8px;
+}
+
+.calendar-popup.compact .calendar-left,
+.calendar-popup.compact .calendar-right {
+  padding: 0 8px 8px;
+}
+
+/* Weekday + day cells */
+.calendar-popup.compact .weekday-header {
+  font-size: 11px;
+  padding: 4px 2px;
+}
+
+.calendar-popup.compact .calendar-day {
+  font-size: 12px;
+  padding: 5px 2px;
+  line-height: 1.3;
+}
+
+/* Ranges */
+.calendar-popup.compact .ranges {
+  min-width: 120px;
+  gap: 2px;
+  margin-bottom: 8px;
+  padding-bottom: 8px;
+}
+
+.calendar-popup.compact.has-ranges .ranges {
+  padding: 6px;
+}
+
+.calendar-popup.compact .range-btn {
+  font-size: 12px;
+  padding: 5px 8px;
+}
+
+/* Timepicker */
+.calendar-popup.compact .timepicker-section {
+  margin-top: 8px;
+  padding-top: 8px;
+}
+
+.calendar-popup.compact .timepicker-label {
+  font-size: 11px;
+}
+
+/* Footer */
+.calendar-popup.compact .footer {
+  padding: 8px;
+  gap: 6px;
+}
+
+.calendar-popup.compact .btn-cancel,
+.calendar-popup.compact .btn-apply {
+  font-size: 11px;
+  padding: 6px 12px;
+  min-width: 64px;
+}
+
+/* Month / year quick-pick */
+.calendar-popup.compact .bk-month-year-btn {
+  @apply text-[13px] py-px px-1;
+}
+
+.calendar-popup.compact .nav-btn img {
+  width: 12px;
+  height: 8px;
+}
+
+.calendar-popup.compact .bk-nav-btn-year img {
+  width: 12px;
+  height: 12px;
+}
+
+.calendar-popup.compact .bk-grid-picker {
+  /* Matches the compact day table's rendered height (thead + 6 rows). */
+  @apply h-[178px];
+  /* Unlike the default size — where the month/year grid's natural height already fills its
+     256px box almost exactly — compact's smaller gap/cell padding renders noticeably shorter
+     than 178px. Top-packing (the base .bk-grid-picker behaviour) then leaves an ugly empty band
+     dangling below the Today button. Center the grid + button in the leftover space instead. */
+  @apply justify-center;
+}
+
+.calendar-popup.compact .bk-month-grid,
+.calendar-popup.compact .bk-year-grid {
+  @apply gap-1;
+}
+
+.calendar-popup.compact .bk-month-cell,
+.calendar-popup.compact .bk-year-cell {
+  @apply text-[11px] py-1.5 px-0.5;
+}
+
+.calendar-popup.compact .bk-today-btn {
+  @apply text-[11px] p-[5px];
+}