add support for "max-occurs" extension

src/components/questionnaire/questionnaire-question.css

@@ -19,24 +19,26 @@
 .questionnaire-question__form .questionnaire-question__boolean-input {
   margin: var(--input-label-gap) 0 0;
 }
+
 .questionnaire-question__form .questionnaire-question__single-choice-input,
 .questionnaire-question__form .questionnaire-question__multiple-choice-input {
   margin: var(--input-label-gap) 0 calc(var(--padding-small) * (-1));
 }
+
 .questionnaire-question__form .questionnaire-question__date-input .fieldset__row {
   margin: calc(var(--padding-small) * (-1)) 0;
 }
+
 .questionnaire-question__form .questionnaire-question__date-input .fieldset__item {
   margin: var(--padding-small);
 }
+
 .questionnaire-question__form .questionnaire-question__date-input .date-input-datepicker {
   margin: var(--padding-medium) auto;
   width: 24px;
 }
 
-.questionnaire-question__form
-  .questionnaire-question__single-choice-dropdown-input
-  [id^='autocomplete-option-'] {
+.questionnaire-question__form .questionnaire-question__single-choice-dropdown-input [id^='autocomplete-option-'] {
   cursor: pointer;
 }
 
@@ -55,3 +57,12 @@
     margin: var(--padding-small) 0 var(--padding-small) var(--padding-medium);
   }
 }
+
+.disabled>input[type='checkbox'].sc-d4l-checkbox+label.sc-d4l-checkbox {
+  cursor: not-allowed;
+  color: var(--color-primary-lightest);
+}
+
+.disabled>input[type='checkbox'].sc-d4l-checkbox+label.sc-d4l-checkbox::before {
+  border-color: var(--color-primary-lightest);
+}

src/components/questionnaire/questions/multiple-choice-question.tsx

@@ -1,5 +1,6 @@
 import { h } from '@stencil/core';
 import { QuestionnaireQuestionComponentProps } from './types';
+import stores from 'stores';
 
 export const MultipleChoiceQuestion = ({
   question,
@@ -8,25 +9,39 @@ export const MultipleChoiceQuestion = ({
 }: QuestionnaireQuestionComponentProps) => {
   return (
     <div class="questionnaire-question__multiple-choice-input">
-      {question.availableOptions.filter(Boolean).map((option, index) => (
-        <p class="u-margin-bottom--small u-text-align--left" key={`${question.linkId}-option${index}`}>
-          <d4l-checkbox
-            checkboxId={`${question.linkId}-option${index}`}
-            classes="o-checkbox--primary"
-            name={question.linkId}
-            value={String(option.value)}
-            checked={answer.includes(option.value)}
-            label={String(option.label)}
-            handleChange={() => {
-              const update = option.value;
-              const newSelection = answer.includes(update)
-                ? answer.filter((value) => value !== update)
-                : [...answer, update];
-              onChange(question.linkId, newSelection);
-            }}
-          />
-        </p>
-      ))}
+      {question.availableOptions.filter(Boolean).map((option, index) => {
+        // checkbox is disabled if maximum number of allowed choices is reached
+        // and answer is not contained in selected choices
+        const isDisabled = question.extension.some(
+          (e) =>
+            e.url.includes('maxOccurs') && e.valueInteger == answer.length && !answer.includes(option.value)
+        );
+        return (
+          <p class={`u-margin-bottom--small u-text-align--left `} key={`${question.linkId}-option${index}`}>
+            <d4l-checkbox
+              aria-disabled={isDisabled}
+              aria-label={(isDisabled && stores.i18n.t('questionnaire.maxAnswersReached')) || undefined}
+              checkboxId={`${question.linkId}-option${index}`}
+              classes={`o-checkbox--primary ${isDisabled && 'disabled'}`}
+              name={question.linkId}
+              value={String(option.value)}
+              checked={answer.includes(option.value)}
+              label={String(option.label)}
+              onClick={(event) => {
+                if (isDisabled) {
+                  event.preventDefault();
+                } else {
+                  const update = option.value;
+                  const newSelection = answer.includes(update)
+                    ? answer.filter((value) => value !== update)
+                    : [...answer, update];
+                  onChange(question.linkId, newSelection);
+                }
+              }}
+            />
+          </p>
+        );
+      })}
     </div>
   );
 };

src/config/translations/de.ts

@@ -87,6 +87,8 @@ export default {
     infotext: 'Dieser Text wird angezeigt, wenn der Fragebogen keine Angaben zum Zweck enthält.',
     question: 'Frage {{ number }}',
     question_type_unsupported: 'Fragen vom Typ "{{ type }}" werden derzeit leider nicht unterstützt!',
+    maxAnswersReached:
+      'Maximale Anzahl Antworten erreicht. Andere Antwort abwählen, um diese Antwort auszuwählen.',
     success: {
       headline: 'Vielen Dank!',
       infotext: 'Vielen Dank für Ihren Beitrag!',

src/config/translations/en.ts

@@ -83,6 +83,8 @@ export default {
     infotext: 'This text is shown when the questionnaire does not contain information on its purpose.',
     question: 'Question {{ number }}',
     question_type_unsupported: 'Questions of type "{{ type }}" are not supported at the moment!',
+    maxAnswersReached:
+      'Maximum number of answers reached. Please deselect other choice to select this choice.',
     success: {
       headline: 'Success',
       infotext: 'Thank you for your contribution!',