@brickclay-org/ui 0.0.9 → 0.0.13

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

@@ -1,373 +0,0 @@
-.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/scheduled-date-picker/scheduled-date-picker.component.html

@@ -1,210 +0,0 @@
-<div class="scheduled-date-picker-container">
-  <!-- Header with Tabs -->
-
-
-  <!-- Main Content Area -->
-
-  <div class="scheduled-content">
-    <!-- Left Side: Calendar -->
-    <div class="calendar-section">
-      <h2 class="scheduled-title">Scheduled Dates</h2>
-      <div class="tabs">
-        <button
-          class="tab-button"
-          [class.active]="activeTab === 'single'"
-          (click)="onTabChange('single')">
-          Single Date
-        </button>
-        <button
-          class="tab-button"
-          [class.active]="activeTab === 'multiple'"
-          (click)="onTabChange('multiple')">
-          Multiple Dates
-        </button>
-        <button
-          class="tab-button"
-          [class.active]="activeTab === 'range'"
-          (click)="onTabChange('range')">
-          Date Range
-        </button>
-      </div>
-      <!-- Single Date Calendar -->
-      <div *ngIf="activeTab === 'single'" class="calendar-wrapper-inline">
-        <brickclay-custom-calendar
-          [inline]="true"
-          [dualCalendar]="false"
-          [singleDatePicker]="true"
-          [showRanges]="false"
-          [enableTimepicker]="false"
-          [showCancel]="false"
-          placeholder="Select a date"
-          (selected)="onSingleDateSelected($event)">
-        </brickclay-custom-calendar>
-      </div>
-
-      <!-- Multiple Dates Calendar -->
-      <div *ngIf="activeTab === 'multiple'" class="calendar-wrapper-inline">
-        <brickclay-custom-calendar
-          [inline]="true"
-          [dualCalendar]="false"
-          [singleDatePicker]="false"
-          [showRanges]="false"
-          [enableTimepicker]="false"
-          [multiDateSelection]="true"
-          [showCancel]="false"
-          placeholder="Select multiple dates"
-          (selected)="onMultipleDatesSelected($event)">
-        </brickclay-custom-calendar>
-      </div>
-
-      <!-- Date Range Calendar -->
-      <div *ngIf="activeTab === 'range'" class="calendar-wrapper-inline">
-        <brickclay-custom-calendar
-          [inline]="true"
-          [dualCalendar]="false"
-          [singleDatePicker]="false"
-          [showRanges]="false"
-          [enableTimepicker]="false"
-          [showCancel]="false"
-          placeholder="Select date range"
-          (selected)="onRangeSelected($event)">
-        </brickclay-custom-calendar>
-      </div>
-    </div>
-
-    <!-- Right Side: Time Configuration -->
-    <div class="time-config-section">
-      <h3 class="time-config-title">Time Configuration</h3>
-
-      <!-- Single Date Time Configuration -->
-      <div *ngIf="activeTab === 'single'">
-        <div *ngIf="singleDate" class="time-config-item">
-          <div class="time-config-header">
-            <span class="date-label">{{ formatDate(singleDate) }}</span>
-            <label class="all-day-toggle">
-              <span class="toggle-label">All Day</span>
-              <input
-                type="checkbox"
-                [checked]="singleAllDay"
-                (change)="onSingleAllDayChange()">
-            </label>
-          </div>
-          <div *ngIf="!singleAllDay" class="time-inputs">
-            <brickclay-time-picker
-              pickerId="single-start"
-              label="Start Time"
-              [value]="singleStartTime"
-              [position]="'left'"
-              [closePicker]="shouldClosePicker('single-start')"
-              (timeChange)="onSingleStartTimeChange($event)"
-              (pickerOpened)="onTimePickerOpened($event)"
-              (pickerClosed)="onTimePickerClosed($event)">
-            </brickclay-time-picker>
-            <brickclay-time-picker
-              pickerId="single-end"
-              label="End Time"
-              [value]="singleEndTime"
-              [position]="'right'"
-              [closePicker]="shouldClosePicker('single-end')"
-              (timeChange)="onSingleEndTimeChange($event)"
-              (pickerOpened)="onTimePickerOpened($event)"
-              (pickerClosed)="onTimePickerClosed($event)">
-            </brickclay-time-picker>
-          </div>
-        </div>
-        <div *ngIf="!singleDate" class="no-selection">
-          <p>No date selected. Select a date from the calendar.</p>
-        </div>
-      </div>
-
-      <!-- Multiple Dates Time Configuration -->
-      <div *ngIf="activeTab === 'multiple'" class="time-config-list">
-        <div
-          *ngFor="let dateConfig of multipleDates; let i = index"
-          class="time-config-item">
-          <div class="time-config-header">
-            <span class="date-label">{{ formatDate(dateConfig.date) }}</span>
-            <label class="all-day-toggle">
-              <span class="toggle-label">All Day</span>
-              <input
-                type="checkbox"
-                [checked]="dateConfig.allDay"
-                (change)="onMultipleDateAllDayChange(i)">
-            </label>
-          </div>
-          <div *ngIf="!dateConfig.allDay" class="time-inputs">
-            <brickclay-time-picker
-              [pickerId]="'multiple-' + i + '-start'"
-              label="Start Time"
-              [value]="dateConfig.startTime"
-              [position]="'left'"
-              [closePicker]="shouldClosePicker('multiple-' + i + '-start')"
-              (timeChange)="onMultipleDateStartTimeChange(i, $event)"
-              (pickerOpened)="onTimePickerOpened($event)"
-              (pickerClosed)="onTimePickerClosed($event)">
-            </brickclay-time-picker>
-            <brickclay-time-picker
-              [pickerId]="'multiple-' + i + '-end'"
-              label="End Time"
-              [value]="dateConfig.endTime"
-              [position]="'right'"
-              [closePicker]="shouldClosePicker('multiple-' + i + '-end')"
-              (timeChange)="onMultipleDateEndTimeChange(i, $event)"
-              (pickerOpened)="onTimePickerOpened($event)"
-              (pickerClosed)="onTimePickerClosed($event)">
-            </brickclay-time-picker>
-          </div>
-        </div>
-        <div *ngIf="multipleDates.length === 0" class="no-selection">
-          <p>No dates selected. Select dates from the calendar.</p>
-        </div>
-      </div>
-
-      <!-- Date Range Time Configuration -->
-      <div *ngIf="activeTab === 'range' && rangeStartDate && rangeEndDate" class="time-config-item">
-        <div class="time-config-header">
-          <span class="date-label">{{ formatDate(rangeStartDate) }} - {{ formatDate(rangeEndDate) }}</span>
-          <label class="all-day-toggle">
-            <span class="toggle-label">All Day</span>
-            <input
-              type="checkbox"
-              [checked]="rangeAllDay"
-              (change)="onRangeAllDayChange()">
-          </label>
-        </div>
-        <div *ngIf="!rangeAllDay" class="time-inputs">
-          <brickclay-time-picker
-            pickerId="range-start"
-            label="Start Time"
-            [value]="rangeStartTime"
-            [position]="'left'"
-            [closePicker]="shouldClosePicker('range-start')"
-            (timeChange)="onRangeStartTimeChange($event)"
-            (pickerOpened)="onTimePickerOpened($event)"
-            (pickerClosed)="onTimePickerClosed($event)">
-          </brickclay-time-picker>
-          <brickclay-time-picker
-            pickerId="range-end"
-            label="End Time"
-            [value]="rangeEndTime"
-            [position]="'right'"
-            [closePicker]="shouldClosePicker('range-end')"
-            (timeChange)="onRangeEndTimeChange($event)"
-            (pickerOpened)="onTimePickerOpened($event)"
-            (pickerClosed)="onTimePickerClosed($event)">
-          </brickclay-time-picker>
-        </div>
-      </div>
-      <div *ngIf="activeTab === 'range' && (!rangeStartDate || !rangeEndDate)" class="no-selection">
-        <p>No date range selected. Select a date range from the calendar.</p>
-      </div>
-    </div>
-  </div>
-
-  <!-- Action Buttons -->
-  <div class="action-buttons">
-    <button class="btn-clear" (click)="clear()">Clear</button>
-    <button class="btn-apply" (click)="apply()">Apply</button>
-  </div>
-</div>
-