@brickclay-org/ui 0.1.88 → 0.1.89

package/src/lib/calender/components/scheduled-date-picker/scheduled-date-picker.component.css

@@ -0,0 +1,373 @@
+.scheduled-date-picker-container {
+  font-family: 'Inter', sans-serif;
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+/* Header Section */
+.scheduled-header {
+  padding: 24px 24px 16px;
+  border-bottom: 1px solid #e5e7eb;
+  background: #ffffff;
+}
+
+.scheduled-title {
+  font-size: 18px;
+    font-weight: 500;
+    line-height: 26px;
+    color: #111827;
+    letter-spacing: -0.28px;
+    margin: 0 0 16px 0;
+}
+
+/* Tabs */
+.tabs {
+  display: flex;
+  /* gap: 8px; */
+  /* border-bottom: 1px solid #e5e7eb; */
+  margin-bottom: 16px;
+  border-radius: 6px;
+  padding: 3px;
+  background-color: #54578E12;
+}
+
+.tab-button {
+  padding: 5px 11px;
+    border: none;
+    background: transparent;
+    color: #6B7080;
+    font-size: 11px;
+    font-weight: 500;
+    cursor: pointer;
+    border: 1px solid transparent;
+    transition: all 0.2s;
+    font-family: "Inter", sans-serif;
+    flex: 1;
+    border-radius: 4px;
+}
+
+/* .tab-button:hover {
+  color: #111827;
+  background: #f9fafb;
+} */
+
+.tab-button.active {
+  color: #15191E;
+  border-color: #42578A26;
+  background: #FFFFFF;
+}
+
+/* Main Content Area */
+.scheduled-content {
+  display: flex;
+  gap: 0;
+  align-items: stretch;
+  /* Two-column layout by default on large screens */
+}
+
+/* Calendar Section (Left) */
+.calendar-section {
+  flex: 0 0 55%;
+  max-width: 55%;
+  padding: 12px;
+  border-right: 1px solid #e5e7eb;
+  background: #ffffff;
+  box-sizing: border-box;
+}
+
+.calendar-wrapper-inline {
+  width: 100%;
+}
+
+.calendar-wrapper-inline app-custom-calendar {
+  width: 100%;
+}
+
+/* Time Configuration Section (Right) */
+.time-config-section {
+  flex: 0 0 45%;
+  max-width: 45%;
+  padding: 12px;
+  background: #ffffff;
+  overflow-y: auto;
+  max-height: 600px;
+  box-sizing: border-box;
+}
+
+.time-config-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #111827;
+  margin: 17px 0 14px 0;
+  /* padding-bottom: 12px; */
+  /* border-bottom: 1px solid #e5e7eb; */
+}
+
+/* Time Configuration Item */
+.time-config-item {
+  padding: 14px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  /* margin-bottom: 12px; */
+  background: #ffffff;
+}
+
+.time-config-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  /* margin-bottom: 12px; */
+}
+
+.date-label {
+  font-size: 12px;
+    font-weight: 500;
+    color: #15191E;
+    /* text-transform: uppercase; */
+    letter-spacing: -0.28px;
+}
+
+/* All Day Toggle */
+.all-day-toggle {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.all-day-toggle input[type="checkbox"] {
+  width: 28px;
+    height: 16px;
+    appearance: none;
+    background: #BBBDC5;
+    border-radius: 10px;
+    position: relative;
+    cursor: pointer;
+    transition: background 0.2s;
+    margin: 0;
+}
+
+.all-day-toggle input[type="checkbox"]:checked {
+  background: #22973F;
+}
+
+.all-day-toggle input[type="checkbox"]::before {
+  content: "";
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: #ffffff;
+    top: 1.5px;
+    left: 2.5px;
+    transition: transform 0.2s;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.all-day-toggle input[type="checkbox"]:checked::before {
+  transform: translateX(12px);
+}
+
+.toggle-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: #111827;
+}
+
+.all-day-toggle input[type="checkbox"]:checked + .toggle-label {
+  color: #111827;
+}
+
+/* Time Inputs */
+.time-inputs {
+  display: flex;
+  gap: 14px;
+  margin-top: 12px;
+}
+
+
+/* Time Configuration List (for multiple dates) */
+.time-config-list {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  max-height: 350px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+
+/* Scrollbar Styling */
+.time-config-list::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.time-config-list::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.time-config-list::-webkit-scrollbar-thumb {
+  background: #b4b4b4;
+  border-radius: 3px;
+}
+
+.time-config-list::-webkit-scrollbar-thumb:hover {
+  background: #9b9b9b;
+}
+
+.no-selection {
+  padding: 24px;
+  text-align: center;
+  color: #9ca3af;
+  font-size: 14px;
+}
+
+/* Action Buttons */
+.action-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 12px;
+  border-top: 1px solid #e5e7eb;
+  background: #ffffff;
+}
+
+.btn-clear,
+.btn-apply {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: 'Inter', sans-serif;
+  min-width: 80px;
+}
+
+.btn-clear {
+  background: #ffffff;
+  color: #6b7280;
+  border: 1px solid #d1d5db;
+}
+
+.btn-clear:hover {
+  background: #f9fafb;
+  border-color: #9ca3af;
+}
+
+.btn-apply {
+  background: #111827;
+  color: #ffffff;
+}
+
+.btn-apply:hover {
+  background: #374151;
+}
+
+/* Responsive Design */
+@media (max-width: 1200px) {
+  .calendar-section {
+    flex: 0 0 52%;
+    max-width: 52%;
+  }
+
+  .time-config-section {
+    flex: 0 0 48%;
+    max-width: 48%;
+  }
+}
+
+@media (max-width: 1024px) {
+  .scheduled-content {
+    flex-direction: column;
+  }
+
+  .calendar-section {
+    flex: 1 1 auto;
+    max-width: 100%;
+    border-right: none;
+    border-bottom: 1px solid #e5e7eb;
+  }
+
+  .time-config-section {
+    flex: 1 1 auto;
+    max-width: 100%;
+    max-height: none;
+  }
+
+  .time-config-list {
+    max-height: 320px;
+  }
+}
+
+@media (max-width: 768px) {
+  .scheduled-date-picker-container {
+    border-radius: 0;
+  }
+
+  .scheduled-header {
+    padding: 16px;
+  }
+
+  .calendar-section,
+  .time-config-section {
+    padding: 12px 16px;
+  }
+
+  .tabs {
+    overflow-x: auto;
+  }
+
+  .tab-button {
+    white-space: nowrap;
+    font-size: 12px;
+    padding: 6px 10px;
+  }
+
+  .time-inputs {
+    flex-direction: column;
+  }
+
+  .time-config-item {
+    padding: 12px;
+  }
+
+  .action-buttons {
+    padding: 10px;
+  }
+}
+
+@media (max-width: 480px) {
+  .scheduled-title {
+    font-size: 16px;
+  }
+
+  .time-config-title {
+    font-size: 14px;
+  }
+
+  .date-label {
+    font-size: 11px;
+  }
+
+  .time-config-list {
+    max-height: 260px;
+  }
+
+  .btn-clear,
+  .btn-apply {
+    padding: 8px 14px;
+    font-size: 13px;
+  }
+}
+

package/src/lib/calender/components/time-picker/time-picker.component.css

@@ -0,0 +1,331 @@
+.time-picker-wrapper {
+  width: 100%;
+  font-family: 'Inter', sans-serif;
+}
+
+.time-input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.time-input-group label {
+  font-size: 11px;
+  font-weight: 500;
+  color: #15191E;
+  text-transform: uppercase;
+  letter-spacing: -0.28px;
+}
+
+.time-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.time-input-wrapper.has-value .time-input {
+  padding-right: 56px;
+}
+
+.time-input {
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  font-family: 'Inter', sans-serif;
+  color: #707280;
+  background: #ffffff;
+  transition: all 0.2s;
+  width: 100%;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.time-input::placeholder {
+  color: #6B7080;
+}
+
+.time-input-group.default .time-input {
+  font-size: 12px;
+  padding: 6px 40px 5px 12px;
+}
+
+.time-input-group.lg .time-input {
+  font-size: 14px;
+  line-height: 18px;
+  padding: 10px 40px 10px 12px;
+}
+
+.time-input:focus {
+  outline: none;
+  border-color: #111827;
+  /* box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.1); */
+}
+
+.time-input:hover {
+  border-color: #9ca3af;
+}
+
+.time-clear-btn {
+  position: absolute;
+  /* right: 32px; */
+  right: 26px;
+  background: none;
+  border: none;
+  font-size: 18px;
+  color: #9ca3af;
+  cursor: pointer;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  /*  */
+  /* top: 7px; */
+}
+
+
+.time-clear-btn:hover {
+  color: #374151;
+}
+
+.time-input-group.default .time-clear-btn {
+  top: 5px;
+}
+
+.time-input-group.lg .time-clear-btn {
+  top: 10px;
+}
+
+.time-icon {
+  position: absolute;
+  right: 12px;
+  font-size: 16px;
+  pointer-events: none;
+  color: #9ca3af;
+  cursor: pointer;
+}
+
+/* Custom Time Picker Dropdown */
+/* .custom-time-picker-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: 1000;
+  width: 172px;
+  min-width: 172px;
+} */
+
+.custom-time-picker-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.custom-time-picker {
+  /* Position is owned by the CDK overlay pane (see the component's cdkConnectedOverlay
+     template) — no position/top/left/z-index here; this element renders at natural (0,0) offset
+     inside the pane, which CDK has already placed correctly. */
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 10px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  width: 182px;
+  /* CDK's overlay container lives outside .time-picker-wrapper, so any inherited font from an
+     ancestor no longer reaches this element in the common (non-inline) case — re-declare it. */
+  font-family: 'Inter', sans-serif;
+}
+
+/* 24-hour format: no AM/PM column, narrower width */
+.custom-time-picker.format-24 {
+  width: 124px;
+}
+
+/* `left-position`/`right-position` no longer position anything themselves (CDK's
+   cdkConnectedOverlayPositions does, driven by the same `position` input) — kept as pure style
+   hooks in case a future tweak needs to key off which side the dropdown opened on. */
+
+.time-column {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.time-scroll {
+  display: flex;
+  flex-direction: column;
+  max-height: 96px; /* exactly 3 rows * 32px so items always align cleanly (no half-cut slivers) */
+  overflow-y: auto;
+  overflow-x: hidden;
+  /* Row-boundary snapping is done in JS (see settleColumn() in the component), not via CSS
+     scroll-snap-type. CSS snap on a list this short (rows only 28-32px apart) hits a well-known
+     Chrome/Windows mouse-wheel bug: each wheel tick is its own scroll gesture, and the browser
+     re-snaps after every one, so the list can appear to "get stuck" and need several more ticks
+     to move past a snap point. JS settling only runs once scrolling has actually stopped, so it
+     never fights an in-progress wheel/trackpad gesture. */
+  scrollbar-width: thin;
+  scrollbar-color: #cbd5e1 transparent;
+  /* padding: 4px 0; */
+  scrollbar-width: none;
+  /* For Firefox */
+  -ms-overflow-style: none;
+  /* For Internet Explorer and Edge */
+}
+
+
+.time-scroll::-webkit-scrollbar {
+  display: none;
+  /* For Chrome, Safari, and Opera */
+  /* width: 4px; */
+}
+
+.time-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.time-scroll::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 2px;
+}
+
+.time-scroll::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+.time-item {
+  min-width: 40px;
+  width: 40px;
+  height: 32px;
+  min-height: 32px;
+  /* No scroll-snap-align — snapping is handled in JS (see .time-scroll's comment above). */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 400;
+  color: #374151;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.15s ease;
+  user-select: none;
+  font-family: 'Inter', sans-serif;
+}
+
+.time-item:hover {
+  background: #f3f4f6;
+}
+
+.time-item.selected {
+  background: #111827;
+  color: #ffffff;
+  font-weight: 500;
+  /* box-shadow: 0 1px 2px rgba(37, 99, 235, 0.3); */
+}
+
+/* Scroll highlight on the minute/second wheels: shows where the wheel is currently
+   pointing while scrolling. It is NOT the committed value — the user must click to
+   select it. Suppressed when it coincides with the committed `.selected` item. */
+.time-item.active:not(.selected) {
+  background: #eef2ff;
+  color: #111827;
+  font-weight: 500;
+}
+
+.ampm-column .time-item {
+  min-width: 40px;
+  width: 40px;
+}
+
+.time-separator {
+  font-size: 16px;
+  font-weight: 600;
+  color: #6b7280;
+  margin: 5px 0 0px;
+}
+
+.time-input:disabled {
+  cursor: not-allowed;
+  border-color: rgb(227 227 231);
+  background-color: rgb(244 244 246);
+  color: rgb(161 163 174);
+}
+
+/* --------------------------
+   COMPACT DROPDOWN (default variation)
+   The base rules above match the `lg` dropdown. These overrides apply only
+   to the `default` variation so it gets a smaller, compact dropdown.
+   NOTE: .time-item height MUST stay in sync with ITEM_HEIGHT (28) in the TS,
+   otherwise the cyclic minute/second wheel will not snap correctly.
+---------------------------*/
+.time-input-group.default .custom-time-picker {
+  width: fit-content;
+  gap: 6px;
+  padding: 8px;
+}
+
+.time-input-group.default .custom-time-picker.format-24 {
+  width: fit-content;
+}
+
+.time-input-group.default .time-scroll {
+  max-height: 84px; /* 3 rows * 28px */
+}
+
+.time-input-group.default .time-item {
+  min-width: 26px;
+  width: 26px;
+  height: 28px;
+  min-height: 28px;
+  font-size: 12px;
+}
+
+.time-input-group.default .ampm-column .time-item {
+  min-width: 26px;
+  width: 26px;
+}
+
+.time-input-group.default .time-separator {
+  font-size: 14px;
+}
+
+/* --------------------------
+   CDK-PORTAL-SAFE COMPACT SIZING
+   The dropdown is now always portalled into the shared cdk-overlay-container (see
+   .custom-time-picker's own comment), which leaves the `.time-input-group.default` ancestor that
+   used to supply compact sizing. This self-class rule re-applies it on the portalled panel — the
+   font-family equivalent now lives directly on .custom-time-picker instead, unconditionally.
+---------------------------*/
+.custom-time-picker.tp-compact {
+  width: fit-content;
+  gap: 6px;
+  padding: 8px;
+}
+
+.custom-time-picker.tp-compact.format-24 {
+  width: fit-content;
+}
+
+.custom-time-picker.tp-compact .time-scroll {
+  max-height: 84px; /* 3 rows * 28px */
+}
+
+.custom-time-picker.tp-compact .time-item {
+  min-width: 26px;
+  width: 26px;
+  height: 28px;
+  min-height: 28px;
+  font-size: 12px;
+}
+
+.custom-time-picker.tp-compact .ampm-column .time-item {
+  min-width: 26px;
+  width: 26px;
+}
+
+.custom-time-picker.tp-compact .time-separator {
+  font-size: 14px;
+}

package/src/styles.css

@@ -44,3 +44,6 @@
 @import './lib/menu/menu.css';
 @import './lib/ui-avatar-group/ui-avatar-group.css';
 @import './lib/table/table.css';
+@import './lib/calender/components/custom-calendar/custom-calendar.component.css';
+@import './lib/calender/components/scheduled-date-picker/scheduled-date-picker.component.css';
+@import './lib/calender/components/time-picker/time-picker.component.css';