openproject-primer_view_components 0.6.3

data/app/components/primer/alpha/menu.pcss

@@ -0,0 +1,119 @@
+/* menu */
+
+/* A menu on the side of a page, defaults to left side. e.g. github.com/about */
+
+.menu {
+  margin-bottom: var(--stack-gap-normal);
+  list-style: none;
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-radius: var(--borderRadius-medium);
+}
+
+.menu-item {
+  position: relative;
+  display: block;
+  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
+  color: var(--fgColor-default);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
+
+  &:first-child {
+    border-top: 0;
+    border-top-left-radius: var(--borderRadius-medium);
+    border-top-right-radius: var(--borderRadius-medium);
+
+    &::before {
+      border-top-left-radius: var(--borderRadius-medium);
+    }
+  }
+
+  &:last-child {
+    border-bottom: 0;
+    border-bottom-right-radius: var(--borderRadius-medium);
+    border-bottom-left-radius: var(--borderRadius-medium);
+
+    &::before {
+      border-bottom-left-radius: var(--borderRadius-medium);
+    }
+  }
+
+  &:hover {
+    text-decoration: none;
+    background-color: var(--bgColor-neutral-muted);
+  }
+
+  &:active {
+    background-color: var(--bgColor-muted);
+  }
+
+  &.selected,
+  &[aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
+    cursor: default;
+    background-color: var(--menu-bgColor-active);
+
+    &::before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 2px;
+      content: '';
+      background-color: var(--underlineNav-borderColor-active);
+    }
+  }
+
+  & .octicon {
+    width: 16px;
+    margin-right: var(--control-medium-gap);
+    color: var(--fgColor-muted);
+    text-align: center;
+  }
+
+  & .Counter {
+    float: right;
+    margin-left: var(--control-small-gap);
+  }
+
+  & .menu-warning {
+    float: right;
+    color: var(--fgColor-attention);
+  }
+
+  & .avatar {
+    float: left;
+    margin-right: var(--control-small-gap);
+  }
+
+  &.alert {
+    & .Counter {
+      color: var(--fgColor-danger);
+    }
+  }
+}
+
+.menu-heading {
+  display: block;
+  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: inherit;
+  font-weight: var(--base-text-weight-semibold);
+  color: var(--fgColor-default);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:first-child {
+    border-top-left-radius: var(--borderRadius-medium);
+    border-top-right-radius: var(--borderRadius-medium);
+  }
+
+  &:last-child {
+    border-bottom: 0;
+    border-bottom-right-radius: var(--borderRadius-medium);
+    border-bottom-left-radius: var(--borderRadius-medium);
+  }
+}

data/app/components/primer/alpha/menu.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `Menu` to create vertical lists of navigational links.
+    class Menu < Primer::Component
+      HEADING_TAG_OPTIONS = [:h1, :h2, :h3, :h4, :h5, :h6].freeze
+      HEADING_TAG_FALLBACK = :h2
+
+      # Optional menu heading
+      #
+      # @param tag [Symbol] <%= one_of(Primer::Alpha::Menu::HEADING_TAG_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :heading, lambda { |tag:, **system_arguments|
+        system_arguments[:tag] = fetch_or_fallback(HEADING_TAG_OPTIONS, tag, HEADING_TAG_FALLBACK)
+        system_arguments[:classes] = class_names(
+          "menu-heading",
+          system_arguments[:classes]
+        )
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # Required list of navigational links
+      #
+      # @param href [String] URL to be used for the Link
+      # @param selected [Boolean] Whether the item is the current selection
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :items, lambda { |href:, selected: false, **system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :a
+        system_arguments[:href] = href
+        system_arguments[:"aria-current"] = :page if selected
+        system_arguments[:classes] = class_names(
+          "menu-item",
+          system_arguments[:classes]
+        )
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Default
+      #   <%= render(Primer::Alpha::Menu.new) do |component| %>
+      #     <% component.with_heading(tag: :h2) do %>
+      #       Heading
+      #     <% end %>
+      #     <% component.with_item(selected: true, href: "#url") do %>
+      #       Item 1
+      #     <% end %>
+      #     <% component.with_item(href: "#url") do %>
+      #       <%= render(Primer::Beta::Octicon.new("check")) %>
+      #       With Icon
+      #     <% end %>
+      #     <% component.with_item(href: "#url") do %>
+      #       <%= render(Primer::Beta::Octicon.new("check")) %>
+      #       With Icon and Counter
+      #       <%= render(Primer::Beta::Counter.new(count: 25)) %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :nav
+        @system_arguments[:classes] = class_names(
+          "menu",
+          @system_arguments[:classes]
+        )
+      end
+
+      def render?
+        items.any?
+      end
+    end
+  end
+end

data/app/components/primer/alpha/modal_dialog.d.ts

@@ -0,0 +1,18 @@
+export declare class ModalDialogElement extends HTMLElement {
+    #private;
+    openButton: HTMLButtonElement | null;
+    get open(): boolean;
+    set open(value: boolean);
+    get showButtons(): NodeList;
+    connectedCallback(): void;
+    show(): void;
+    close(closedNotCancelled?: boolean): void;
+}
+declare global {
+    interface Window {
+        ModalDialogElement: typeof ModalDialogElement;
+    }
+    interface HTMLElementTagNameMap {
+        'modal-dialog': ModalDialogElement;
+    }
+}

data/app/components/primer/alpha/modal_dialog.js

@@ -0,0 +1,189 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _ModalDialogElement_instances, _ModalDialogElement_focusAbortController, _ModalDialogElement_overlayBackdrop_get, _ModalDialogElement_keydown;
+import { focusTrap } from '@primer/behaviors';
+import { getFocusableChild } from '@primer/behaviors/utils';
+function focusIfNeeded(elem) {
+    if (document.activeElement !== elem) {
+        elem === null || elem === void 0 ? void 0 : elem.focus();
+    }
+}
+const overlayStack = [];
+function clickHandler(event) {
+    const target = event.target;
+    const button = target === null || target === void 0 ? void 0 : target.closest('button');
+    if (!button || button.hasAttribute('disabled') || button.getAttribute('aria-disabled') === 'true')
+        return;
+    // If the user is clicking a valid dialog trigger
+    let dialogId = button === null || button === void 0 ? void 0 : button.getAttribute('data-show-dialog-id');
+    if (dialogId) {
+        event.stopPropagation();
+        const dialog = document.getElementById(dialogId);
+        if (dialog instanceof ModalDialogElement) {
+            dialog.openButton = button;
+            dialog.show();
+            // A buttons default behaviour in some browsers it to send a pointer event
+            // If the behaviour is allowed through the dialog will be shown but then
+            // quickly hidden- as if it were never shown. This prevents that.
+            event.preventDefault();
+            return;
+        }
+    }
+    // Find the top level dialog that is open.
+    const topLevelDialog = overlayStack[overlayStack.length - 1];
+    if (!topLevelDialog)
+        return;
+    dialogId = button.getAttribute('data-close-dialog-id');
+    if (dialogId === topLevelDialog.id) {
+        overlayStack.pop();
+        topLevelDialog.close();
+    }
+    dialogId = button.getAttribute('data-submit-dialog-id');
+    if (dialogId === topLevelDialog.id) {
+        overlayStack.pop();
+        topLevelDialog.close(true);
+    }
+}
+function keydownHandler(event) {
+    if (!(event instanceof KeyboardEvent) ||
+        event.type !== 'keydown' ||
+        event.key !== 'Enter' ||
+        event.ctrlKey ||
+        event.altKey ||
+        event.metaKey ||
+        event.shiftKey)
+        return;
+    clickHandler(event);
+}
+function mousedownHandler(event) {
+    const target = event.target;
+    if (target === null || target === void 0 ? void 0 : target.closest('button'))
+        return;
+    // Find the top level dialog that is open.
+    const topLevelDialog = overlayStack[overlayStack.length - 1];
+    if (!topLevelDialog)
+        return;
+    // Check if the mousedown happened outside the boundary of the top level dialog
+    const mouseDownOutsideDialog = !target.closest(`#${topLevelDialog.getAttribute('id')}`);
+    // Only close dialog if it's a click outside the dialog and the dialog has a button?
+    if (mouseDownOutsideDialog) {
+        target.ownerDocument.addEventListener('mouseup', (upEvent) => {
+            if (upEvent.target === target) {
+                overlayStack.pop();
+                topLevelDialog.close();
+            }
+        }, { once: true });
+    }
+}
+export class ModalDialogElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _ModalDialogElement_instances.add(this);
+        //TODO: Do we remove the abortController from focusTrap?
+        _ModalDialogElement_focusAbortController.set(this, new AbortController());
+    }
+    get open() {
+        return this.hasAttribute('open');
+    }
+    set open(value) {
+        var _a, _b, _c, _d;
+        if (value) {
+            if (this.open)
+                return;
+            this.setAttribute('open', '');
+            this.setAttribute('aria-disabled', 'false');
+            document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`;
+            document.body.style.overflow = 'hidden';
+            (_a = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _a === void 0 ? void 0 : _a.classList.remove('Overlay--hidden');
+            if (__classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal.aborted) {
+                __classPrivateFieldSet(this, _ModalDialogElement_focusAbortController, new AbortController(), "f");
+            }
+            focusTrap(this, undefined, __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal);
+            overlayStack.push(this);
+        }
+        else {
+            if (!this.open)
+                return;
+            this.removeAttribute('open');
+            this.setAttribute('aria-disabled', 'true');
+            (_b = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _b === void 0 ? void 0 : _b.classList.add('Overlay--hidden');
+            document.body.style.paddingRight = '0';
+            document.body.style.overflow = 'initial';
+            __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").abort();
+            // if #openButton is a child of a menu, we need to focus a suitable child of the menu
+            // element since it is expected for the menu to close on click
+            const menu = ((_c = this.openButton) === null || _c === void 0 ? void 0 : _c.closest('details')) || ((_d = this.openButton) === null || _d === void 0 ? void 0 : _d.closest('action-menu'));
+            if (menu) {
+                focusIfNeeded(getFocusableChild(menu));
+            }
+            else {
+                focusIfNeeded(this.openButton);
+            }
+            this.openButton = null;
+        }
+    }
+    get showButtons() {
+        // Dialogs may also be opened from any arbitrary button with a matching show-dialog-id data attribute
+        return document.querySelectorAll(`button[data-show-dialog-id='${this.id}']`);
+    }
+    connectedCallback() {
+        if (!this.hasAttribute('role'))
+            this.setAttribute('role', 'dialog');
+        document.addEventListener('click', clickHandler);
+        document.addEventListener('keydown', keydownHandler);
+        document.addEventListener('mousedown', mousedownHandler);
+        this.addEventListener('keydown', e => __classPrivateFieldGet(this, _ModalDialogElement_instances, "m", _ModalDialogElement_keydown).call(this, e));
+    }
+    show() {
+        this.open = true;
+    }
+    close(closedNotCancelled = false) {
+        if (this.open === false)
+            return;
+        const eventType = closedNotCancelled ? 'close' : 'cancel';
+        const dialogEvent = new Event(eventType);
+        this.dispatchEvent(dialogEvent);
+        this.open = false;
+    }
+}
+_ModalDialogElement_focusAbortController = new WeakMap(), _ModalDialogElement_instances = new WeakSet(), _ModalDialogElement_overlayBackdrop_get = function _ModalDialogElement_overlayBackdrop_get() {
+    var _a;
+    if ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('data-modal-dialog-overlay')) {
+        return this.parentElement;
+    }
+    return null;
+}, _ModalDialogElement_keydown = function _ModalDialogElement_keydown(event) {
+    if (!(event instanceof KeyboardEvent))
+        return;
+    if (event.isComposing)
+        return;
+    if (!this.open)
+        return;
+    switch (event.key) {
+        case 'Escape':
+            this.close();
+            event.preventDefault();
+            event.stopPropagation();
+            break;
+        case 'Enter': {
+            const target = event.target;
+            if (target.getAttribute('data-close-dialog-id') === this.id) {
+                event.stopPropagation();
+            }
+            break;
+        }
+    }
+};
+if (!window.customElements.get('modal-dialog')) {
+    window.ModalDialogElement = ModalDialogElement;
+    window.customElements.define('modal-dialog', ModalDialogElement);
+}

data/app/components/primer/alpha/modal_dialog.ts

@@ -0,0 +1,202 @@
+import {focusTrap} from '@primer/behaviors'
+import {getFocusableChild} from '@primer/behaviors/utils'
+
+function focusIfNeeded(elem: HTMLElement | undefined | null) {
+  if (document.activeElement !== elem) {
+    elem?.focus()
+  }
+}
+
+const overlayStack: ModalDialogElement[] = []
+
+function clickHandler(event: Event) {
+  const target = event.target as HTMLElement
+  const button = target?.closest('button')
+
+  if (!button || button.hasAttribute('disabled') || button.getAttribute('aria-disabled') === 'true') return
+
+  // If the user is clicking a valid dialog trigger
+  let dialogId = button?.getAttribute('data-show-dialog-id')
+  if (dialogId) {
+    event.stopPropagation()
+    const dialog = document.getElementById(dialogId)
+    if (dialog instanceof ModalDialogElement) {
+      dialog.openButton = button
+      dialog.show()
+      // A buttons default behaviour in some browsers it to send a pointer event
+      // If the behaviour is allowed through the dialog will be shown but then
+      // quickly hidden- as if it were never shown. This prevents that.
+      event.preventDefault()
+      return
+    }
+  }
+  // Find the top level dialog that is open.
+  const topLevelDialog = overlayStack[overlayStack.length - 1]
+  if (!topLevelDialog) return
+
+  dialogId = button.getAttribute('data-close-dialog-id')
+  if (dialogId === topLevelDialog.id) {
+    overlayStack.pop()
+    topLevelDialog.close()
+  }
+
+  dialogId = button.getAttribute('data-submit-dialog-id')
+  if (dialogId === topLevelDialog.id) {
+    overlayStack.pop()
+    topLevelDialog.close(true)
+  }
+}
+
+function keydownHandler(event: Event) {
+  if (
+    !(event instanceof KeyboardEvent) ||
+    event.type !== 'keydown' ||
+    event.key !== 'Enter' ||
+    event.ctrlKey ||
+    event.altKey ||
+    event.metaKey ||
+    event.shiftKey
+  )
+    return
+
+  clickHandler(event)
+}
+
+function mousedownHandler(event: Event) {
+  const target = event.target as HTMLElement
+  if (target?.closest('button')) return
+
+  // Find the top level dialog that is open.
+  const topLevelDialog = overlayStack[overlayStack.length - 1]
+  if (!topLevelDialog) return
+
+  // Check if the mousedown happened outside the boundary of the top level dialog
+  const mouseDownOutsideDialog = !target.closest(`#${topLevelDialog.getAttribute('id')}`)
+
+  // Only close dialog if it's a click outside the dialog and the dialog has a button?
+  if (mouseDownOutsideDialog) {
+    target.ownerDocument.addEventListener(
+      'mouseup',
+      (upEvent: Event) => {
+        if (upEvent.target === target) {
+          overlayStack.pop()
+          topLevelDialog.close()
+        }
+      },
+      {once: true}
+    )
+  }
+}
+
+export class ModalDialogElement extends HTMLElement {
+  //TODO: Do we remove the abortController from focusTrap?
+  #focusAbortController = new AbortController()
+  openButton: HTMLButtonElement | null
+
+  get open() {
+    return this.hasAttribute('open')
+  }
+  set open(value: boolean) {
+    if (value) {
+      if (this.open) return
+      this.setAttribute('open', '')
+      this.setAttribute('aria-disabled', 'false')
+      document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`
+      document.body.style.overflow = 'hidden'
+      this.#overlayBackdrop?.classList.remove('Overlay--hidden')
+      if (this.#focusAbortController.signal.aborted) {
+        this.#focusAbortController = new AbortController()
+      }
+      focusTrap(this, undefined, this.#focusAbortController.signal)
+      overlayStack.push(this)
+    } else {
+      if (!this.open) return
+      this.removeAttribute('open')
+      this.setAttribute('aria-disabled', 'true')
+      this.#overlayBackdrop?.classList.add('Overlay--hidden')
+      document.body.style.paddingRight = '0'
+      document.body.style.overflow = 'initial'
+      this.#focusAbortController.abort()
+      // if #openButton is a child of a menu, we need to focus a suitable child of the menu
+      // element since it is expected for the menu to close on click
+      const menu = this.openButton?.closest('details') || this.openButton?.closest('action-menu')
+      if (menu) {
+        focusIfNeeded(getFocusableChild(menu))
+      } else {
+        focusIfNeeded(this.openButton)
+      }
+      this.openButton = null
+    }
+  }
+
+  get #overlayBackdrop(): HTMLElement | null {
+    if (this.parentElement?.hasAttribute('data-modal-dialog-overlay')) {
+      return this.parentElement
+    }
+
+    return null
+  }
+
+  get showButtons(): NodeList {
+    // Dialogs may also be opened from any arbitrary button with a matching show-dialog-id data attribute
+    return document.querySelectorAll(`button[data-show-dialog-id='${this.id}']`)
+  }
+
+  connectedCallback(): void {
+    if (!this.hasAttribute('role')) this.setAttribute('role', 'dialog')
+
+    document.addEventListener('click', clickHandler)
+    document.addEventListener('keydown', keydownHandler)
+    document.addEventListener('mousedown', mousedownHandler)
+
+    this.addEventListener('keydown', e => this.#keydown(e))
+  }
+
+  show() {
+    this.open = true
+  }
+
+  close(closedNotCancelled = false) {
+    if (this.open === false) return
+    const eventType = closedNotCancelled ? 'close' : 'cancel'
+    const dialogEvent = new Event(eventType)
+    this.dispatchEvent(dialogEvent)
+    this.open = false
+  }
+
+  #keydown(event: Event) {
+    if (!(event instanceof KeyboardEvent)) return
+    if (event.isComposing) return
+    if (!this.open) return
+
+    switch (event.key) {
+      case 'Escape':
+        this.close()
+        event.preventDefault()
+        event.stopPropagation()
+        break
+      case 'Enter': {
+        const target = event.target as HTMLElement
+
+        if (target.getAttribute('data-close-dialog-id') === this.id) {
+          event.stopPropagation()
+        }
+        break
+      }
+    }
+  }
+}
+
+declare global {
+  interface Window {
+    ModalDialogElement: typeof ModalDialogElement
+  }
+  interface HTMLElementTagNameMap {
+    'modal-dialog': ModalDialogElement
+  }
+}
+
+if (!window.customElements.get('modal-dialog')) {
+  window.ModalDialogElement = ModalDialogElement
+  window.customElements.define('modal-dialog', ModalDialogElement)
+}

data/app/components/primer/alpha/multi_input.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    MultiInput = Primer::FormComponents.from_input(Primer::Forms::Dsl::MultiInput)
+
+    # Multi inputs are comprised of multiple constituent fields, only one of which is visible
+    # at a given time. They are designed for situations where constituent inputs are shown or
+    # hidden based on the value of another field. For example, consider an address form. If
+    # the user chooses the USA as the country, the region input should show a list of states
+    # and US territories; if the user instead chooses Canada, the region input should show a
+    # list of Canadian provinces, etc.
+    #
+    # Unlike everywhere else in Primer forms, constituent inputs are not directly passed a
+    # `name` attribute. Instead, developers pass a `name` attribute to the multi input itself.
+    # The multi input then automatically assigns each constituent input the same name. This is
+    # done so that the multi input looks like a single field from the server's point of view.
+    # Using the address form example from earlier, this means only one value - either a US state
+    # or a Canadian provice - will be submitted to the server under the `region` key.
+    #
+    # Actually, that's not quite true. Constituent inputs _are_ given a `name`, but it's added to
+    # the input as the `data-name` attribute as a way to identify constituent inputs, and will not
+    # be sent to the server.
+    #
+    # @form_usage
+    #   class ExampleForm < ApplicationForm
+    #     form do |example_form|
+    #       example_form.multi(attributes) do |multi|
+    #         # can define any number of child inputs, for example:
+    #         multi.text_field(text_field_attributes)
+    #         multi.select_list(select_list_attributes, hidden: true) do |list|
+    #           list.option(option_attributes)
+    #           list.option(option_attributes)
+    #         end
+    #       end
+    #     end
+    #   end
+    class MultiInput < Primer::Component
+      # @!parse include Primer::Forms::Dsl::InputMethods
+
+      status :alpha
+
+      # @!method initialize
+      #
+      # @example Default
+      #   <%= render(Primer::Alpha::Select.new(name: :dietary_pref, label: "Dietary preference")) do |c| %>
+      #     <% c.option(label: "Meatatarian", value: "meatatarian") %>
+      #     <% c.option(label: "Vegetarian", value: "vegetarian") %>
+      #   <% end %>
+      #
+      #   <%= render(Primer::Alpha::MultiInput.new(name: :dish, label: "Select dish")) do |c| %>
+      #     <% c.select_list(name: :meatatarian) do |list| %>
+      #       <% list.option(label: "Steak", value: "steak") %>
+      #       <% list.option(label: "Salmon", value: "salmon") %>
+      #     <% end %>
+      #     <% c.select_list(name: :vegetarian, hidden: true) do |list| %>
+      #       <% list.option(label: "Portobello mushroom", value: "portobello") %>
+      #       <% list.option(label: "Tofu curry", value: "tofu") %>
+      #     <% end %>
+      #   <% end %>
+      #
+      #   <script type="text/javascript" data-eval="true">
+      #     const dietaryPrefList = document.querySelector("[name=dietary_pref]");
+      #     const dishMulti = document.querySelector("[data-name=dish]");
+      #
+      #     dietaryPrefList.onchange = (evt) => {
+      #       switch (evt.target.value) {
+      #         case 'meatatarian':
+      #           dishMulti.activateField('meatatarian');
+      #           break;
+      #         case 'vegetarian':
+      #           dishMulti.activateField('vegetarian');
+      #           break;
+      #       }
+      #     };
+      #   </script>
+      #
+      # @macro form_input_arguments
+    end
+  end
+end