Issue #3584687: Make office_hours.js compatible with all field_types

  const clearTimeSlotElement = (selector, context) => {

    context.find(selector).each((_, el) => {

      if (el instanceof HTMLInputElement || el instanceof HTMLSelectElement) {

        el.value =

          document.querySelector('#target option:first-child')?.value || '';

        el.value = '';

      }

    });

  };

    // For each add-link, show the next slot if clicked upon.

    // Show the add-link, except if the next time slot is hidden.

    $('.js-office-hours-operation[data-drupal-selector$=add]', this)

    // Use 'a[href*="front"]' or find by link text to support multiple field types.

    $('a.office-hours-link', this)

      .filter((_, el) => {

        const text = $(el).text().trim().toLowerCase();

        return text.includes('add') || text.includes('time');

      })

      .on('click', addTimeSlot)

      .each(showAddLink);

    // For each clear-link, clear the slot if clicked upon.

    $('.js-office-hours-operation[data-drupal-selector$=clear]', this).on(

      'click',

      clearTimeSlot,

    );

    $('a.office-hours-link', this)

      .filter((_, el) => {

        const text = $(el).text().trim().toLowerCase();

        return text === 'clear';

      })

      .on('click', clearTimeSlot);

    // For each copy-link, copy the previous day's values if clicked upon.

    // @todo This works for Table widget, not yet for List Widget.

    $('.js-office-hours-operation[data-drupal-selector$=copy]', this).on(

      'click',

      copyPreviousDay,

    );

    $('a.office-hours-link', this)

      .filter((_, el) => {

        const text = $(el).text().trim().toLowerCase();

        return text.includes('copy');

      })

      .on('click', copyPreviousDay);

  };

  /**

   */

  Drupal.behaviors.officeHours = {

    attach(context) {

      // For the Widget element.

      // Find ALL office-hours widgets regardless of field type or container.

      // This supports office_hours fields, different widget types, and webform elements.

      once(

        'office-hours-widget-once',

        '.field--type-office-hours .office-hours-slot',

        'office-hours-init',

        '.office-hours-slot',

        context,

      ).forEach((el) => initializeTimeSlot.call(el));

      // Apply striping to tables.

      once(

        'office-hours-striping',

        '.field--type-office-hours',

        context,

      ).forEach(fixStriping);

      // For the WebformOfficeHours element.

      once(

        'office-hour-webform-once',

        '.js-webform-type-office-hours .office-hours-slot',

        '.field--type-office-hours, .js-webform-type-office-hours',

        context,

      ).forEach((el) => initializeTimeSlot.call(el));

      ).forEach((el) => {

        // Find the closest tbody.

        const tbody = $(el).find('tbody')[0];

        if (tbody) {

          fixStriping(tbody);

        } else {

          fixStriping(el);

        }

      });

    },

  };

})(jQuery, Drupal, once);