added event agenda component

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

@@ -0,0 +1,87 @@
+.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;
+ }
+
+
+ /* .event-agenda-component .field-container {
+  align-items: flex-start;
+ }
+  */
+
+
+

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

@@ -0,0 +1,127 @@
+import { getLibs } from '../../scripts/utils.js';
+import { getIcon, handlize, generateToolTip } from '../../utils/utils.js';
+
+const { createTag } = await import(`${getLibs()}/utils/utils.js`);
+
+async function decorateField(row, type = 'text') {
+  const miloLibs = getLibs();
+  await Promise.all([
+    import(`${miloLibs}/deps/lit-all.min.js`),
+    import(`${miloLibs}/features/spectrum-web-components/dist/textfield.js`),
+  ]);
+
+  row.classList.add('text-field-row');
+  const cols = row.querySelectorAll(':scope > div');
+  if (!cols.length) return;
+  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-${handlize(text)}`, 
+      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;
+}
+
+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');
+    let pickerName;
+    cols.forEach((c, j) => {
+      if (j === 0) {
+        pickerName = "Time";
+        console.log(pickerName)
+      }
+
+      if (j === 0) {
+        const timeSlots = c.querySelectorAll('li');
+        const select = createTag('select', { id: `time-picker-${handlize(pickerName)}`, 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 decorateCheckBox(row) {
+  const fieldSet = createTag('fieldset', { class: 'checkboxes' });
+  row.classList.add('agenda-info-addition');
+  const checkBoxRow = [...row.querySelectorAll(':scope > div')];
+  const cn = checkBoxRow[2].textContent.trim();
+  row.innerHTML = '';
+
+
+  // Create checkbox input
+  const checkbox = createTag('input', {
+    type: 'checkbox',
+    id: `checkbox-${handlize(cn)}`,
+    name: `checkbox-${handlize(cn)}`,
+    class: 'checkbox-input',
+    value: cn
+  });
+
+  const label = createTag('label', {
+    for: checkbox.id,
+    class: 'checkbox-label'
+  }, cn);
+
+  const wrapper = createTag('div', { class: 'checkbox-wrapper' });
+  wrapper.append(checkbox, label);
+
+  fieldSet.append(wrapper);
+  row.append(fieldSet);
+}
+
+
+
+
+export default async function init(el) {
+  el.classList.add('form-component');
+  generateToolTip(el);
+  const rows = [...el.querySelectorAll(':scope > div')];
+   decorateField(rows[1], 'text');
+   decorateCheckBox(rows[3]);
+
+}

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

@@ -0,0 +1,21 @@
+export function onSubmit(component, inputMap) {
+  //Todo agenda details
+  const agendaDetails = component.querySelector('#textfield > input');
+  const time = component.querySelector('#time-picker-time').value;
+  const agendaInfoVisible = component.querySelector('#checkbox-agenda-info-will-appear-post-event').checked;
+
+
+
+
+  const eventInfo = {
+    ...getMappedInputsOutput(component, inputMap),
+    agendaInfoVisible,
+    'Time': time,
+  };
+
+
+  return eventInfo;
+ }
+
+
+