added event agenda component

blocks/event-agenda-component/event-agenda-component.css

@@ -0,0 +1,65 @@
+.event-agenda-component .field-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 35px;
+ }
+
+ .event-agenda-component .text-field-row .time-pickers {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding-bottom: 13px;
+ }
+
+ .event-agenda-component .text-field-row .time-pickers > p {
+  font-size: var(--type-heading-m-size);
+  font-weight: 700;
+ }
+
+ .event-agenda-component .text-field-row .time-pickers .time-picker-wrapper {
+  flex: 1;
+  min-width: 150px;
+ }
+
+ .event-agenda-component .text-field-row .time-pickers .time-picker-wrapper select {
+  border-radius: 4px;
+  padding: 4px;
+  height: 40px;
+  width: 100%;
+  border: 1px solid var(--color-gray-500);
+  font-size: var(--type-body-xs-size);
+ }
+
+ .event-agenda-component .text-field-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+ }
+
+ .event-agenda-component .text-field-wrapper sp-textfield {
+  width: 100%;
+  margin-bottom: 0px;
+ }
+
+ .event-agenda-component .text-field-wrapper .attr-text {
+  font-size: var(--type-body-xs-size);
+  color: var(--color-secondary);
+  text-align: right;
+ }
+
+ .event-agenda-component .checkbox-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 12px;
+ }
+
+ .event-agenda-component .checkbox-input {
+  margin-right: 8px;
+ }
+
+ .event-agenda-component .checkbox-label {
+  font-size: var(--type-body-xs-size);
+  font-weight: normal;
+ }
+

blocks/event-agenda-component/event-agenda-component.js

@@ -0,0 +1,126 @@
+import { getLibs } from '../../scripts/utils.js';
+import { getIcon, handlize, generateToolTip } from '../../utils/utils.js';
+
+const { createTag } = await import(`${getLibs()}/utils/utils.js`);
+
+function buildTimePicker(column) {
+  column.classList.add('time-pickers');
+  const header = column.querySelector(':scope > p');
+  const rows = column.querySelectorAll('table tr');
+  const timePickerWrappers = [];
+
+  rows.forEach((r) => {
+    const timePickerWrapper = createTag('div', { class: 'time-picker-wrapper' });
+    const cols = r.querySelectorAll('td');
+
+    cols.forEach((c, j) => {
+      if (j === 0) {
+        const timeSlots = c.querySelectorAll('li');
+        const select = createTag('select', {
+          id: 'time-picker',
+          class: 'select-input',
+        });
+
+        timeSlots.forEach((t) => {
+          const text = t.textContent.trim();
+          const option = createTag('option', { value: handlize(text) }, text);
+          select.append(option);
+        });
+
+        timePickerWrapper.append(select);
+      }
+    });
+
+    timePickerWrappers.push(timePickerWrapper);
+  });
+
+  column.innerHTML = '';
+  if (header) column.append(header);
+  column.prepend(getIcon('clock'));
+  timePickerWrappers.forEach((w) => {
+    column.append(w);
+  });
+}
+
+async function decorateField(row, type = 'text') {
+  row.classList.add('text-field-row');
+  const cols = row.querySelectorAll(':scope > div');
+  if (!cols.length) return null;
+  const [placeholderCol, maxLengthCol] = cols;
+  const text = placeholderCol.textContent.trim();
+  const attrTextEl = createTag(
+    'div',
+    { class: 'attr-text' },
+    maxLengthCol.textContent.trim(),
+  );
+
+  const maxCharNum = maxLengthCol.querySelector('strong')?.textContent.trim();
+  const isRequired = attrTextEl.textContent.trim().endsWith('*');
+  let input;
+
+  if (type === 'text') {
+    input = createTag('sp-textfield', {
+      id: 'agenda-field-details',
+      class: 'text-input',
+      placeholder: text,
+      required: isRequired,
+      quiet: true,
+      size: 'xl',
+    });
+  }
+
+  if (maxCharNum) {
+    input.setAttribute('maxlength', maxCharNum);
+  }
+
+  const wrapper = createTag('div', { class: 'field-container' });
+  const textWrapper = createTag('div', { class: 'text-field-wrapper' });
+  textWrapper.append(input, attrTextEl);
+  row.innerHTML = '';
+  wrapper.append(cols[2], textWrapper);
+  row.append(wrapper);
+
+  const timePickerContainer = createTag('div');
+  timePickerContainer.classList.add('custom-time-picker');
+
+  buildTimePicker(cols[2]);
+
+  return row;
+}
+
+async function decorateCheckBox(row) {
+  const fieldSet = createTag('fieldset', { class: 'checkboxes' });
+  row.classList.add('agenda-info-addition');
+  const cols = row.querySelectorAll(':scope > div');
+  const [checkboxText] = cols;
+  const cn = checkboxText.textContent.trim();
+  row.innerHTML = '';
+
+  const checkbox = document.createElement('sp-checkbox');
+  checkbox.id = 'checkbox-agenda-info';
+  checkbox.name = 'checkbox-agenda-info-name';
+  checkbox.value = cn;
+  checkbox.textContent = cn;
+
+  const wrapper = createTag('div', { class: 'checkbox-wrapper' });
+  wrapper.append(checkbox);
+
+  fieldSet.append(wrapper);
+  row.append(fieldSet);
+}
+
+export default async function init(el) {
+  const miloLibs = getLibs();
+
+  await Promise.all([
+    import(`${miloLibs}/deps/lit-all.min.js`),
+    import(`${miloLibs}/features/spectrum-web-components/dist/textfield.js`),
+    import(`${miloLibs}/features/spectrum-web-components/dist/checkbox.js`),
+  ]);
+
+  el.classList.add('form-component');
+  generateToolTip(el);
+  const rows = [...el.querySelectorAll(':scope > div')];
+  decorateField(rows[1], 'text');
+  decorateCheckBox(rows[2]);
+}

blocks/form-handler/controllers/event-agenda-component-controller.js

@@ -0,0 +1,21 @@
+export function onSubmit(component) {
+  // TODO: agenda details
+  const time = component.querySelector('#time-picker-time').value;
+  const agendaInfoVisible = component.querySelector('#checkbox-agenda-info-will-appear-post-event').checked;
+
+  const eventInfo = {
+    agendaInfoVisible,
+    Time: time,
+  };
+
+  return eventInfo;
+}
+
+export function onResume(component, eventObj) {
+  // TODO: agenda resume function
+
+}
+
+export default function init(component) {
+  // TODO: agenda init function
+}