@erst-vg/dkfds-vite 8.0.1

package/src/components/form/controls/date-input.njk

@@ -0,0 +1,30 @@
+{% from "components/icons/icons--svg.njk" import icon_svg as icon_svg %}
+{% macro datoinput(params) %}
+<div class="form-group {% if params.errorMessage %} form-error {% endif %} {{ params.classes }}">
+  <fieldset aria-describedby="{{params.id.helptext | default('example-date-field-hint')}} {% if params.errorMessage %}{{params.id.errorMessage | default('example-date-field-error')}}{% endif %}">
+    <legend class="form-label">{{params.labels.legend}}{% if params.tooltip %}<button type="button" class="js-tooltip button-unstyled ml-3" data-tooltip="{{params.tooltip}}" data-tooltip-trigger="click"><svg class="icon-svg" focusable="false" aria-hidden="true" ><use xlink:href="#help"></use></svg><span class="sr-only">Hvad betyder det?</span></button>{% endif %}</legend>
+    <span class="form-hint" id="{{params.id.helptext | default('example-date-field-hint')}}">{{params.helptext}}</span>
+    {% if params.errorMessage %}<span class="form-error-message {% if not params.errorMessage %} d-none{% endif %}" id="{{ params.id.errorMessage | default('example-date-field-error') }}"><span class="sr-only">Fejl:</span> {{params.errorMessage}}</span>{% endif %}
+    <div class="date-group js-calendar-group mt-3">
+      <div class="form-group form-group-day">
+        <label class="form-label" for="{{ params.id.day | default('date-day') }}">{{params.labels.day}}</label>
+        <input class="form-input js-calendar-day-input" id="{{ params.id.day | default('date-day') }}" value="{{params.values.day}}" type="tel" data-min="1" data-max="31" maxlength="2" pattern="^[0-9]{0,2}$" data-input-regex="^[0-9]{0,2}$" title="Indskriv dag på måneden som tal"  aria-describedby="{{params.id.helptext | default('example-date-field-hint')}}"/>
+      </div>
+      <div class="form-group form-group-month">
+        <label class="form-label" for="{{ params.id.month | default('date-month') }}">{{params.labels.month}}</label>
+        <input class="form-input js-calendar-month-input" id="{{ params.id.month | default('date-month') }}" value="{{params.values.month}}" type="tel" data-min="1" data-max="12" maxlength="2" pattern="^[0-9]{0,2}$"  data-input-regex="^[0-9]{0,2}$" title="Indskriv månedens nummer"  aria-describedby="{{params.id.helptext | default('example-date-field-hint')}}"/>
+      </div>
+      <div class="form-group form-group-year ">
+        <label class="form-label" for="{{ params.id.year | default('date-year') }}">{{params.labels.year}}</label>
+        <input class="form-input js-calendar-year-input" id="{{ params.id.year | default('date-year') }}" value="{{params.values.year}}" type="tel" data-min="1900" data-max="3000" maxlength="4" pattern="^[0-9]{0,4}$" data-input-regex="^[0-9]{0,4}$" title="Indskriv årstal" aria-describedby="{{params.id.helptext | default('example-date-field-hint')}}"/>
+      </div>
+      {% if params.datepicker %}
+       <button class="button-unstyled button-open-calendar js-calendar-datepicker">
+        <span class="sr-only">Åben kalenderen</span>
+        <svg class="icon-svg" aria-hidden="true" focusable="false" tabindex="-1"><use xlink:href="#insert-invitation"></use></svg>
+       </button>
+      {% endif %}
+    </div>
+  </fieldset>
+</div>
+{% endmacro %}

package/src/components/form/controls/date-input.yaml

@@ -0,0 +1,81 @@
+params:
+- name: id
+  type: object
+  required: true
+  description: Ids of the elements.
+  - name: helptext
+    type: string
+    required: true
+    description: Id of the helptext element.
+  - name: errorMessage
+    type: string
+    required: true
+    description: Id of the error element.
+  - name: day
+    type: string
+    required: true
+    description: Id of the day input.
+  - name: month
+    type: string
+    required: true
+    description: Id of the month input.
+  - name: year
+    type: string
+    required: true
+    description: Id of the year input.
+- name: tooltip
+  type: string
+  required: false
+  description: Tooltip text.
+- name: helptext
+  type: string
+  required: false
+  description: Helptext.
+- name: labels
+  type: object
+  required: true
+  description: Labels for the inputs.
+  - name: legend
+    type: string
+    required: true
+    description: Legend label text.
+  - name: day
+    type: string
+    required: true
+    description: Day label text.
+  - name: month
+    type: string
+    required: true
+    description: Month label text.
+  - name: year
+    type: string
+    required: true
+    description: Year label text.
+- name: datepicker
+  type: boolean
+  required: false
+  description: Enables datepicker on true.
+- name: errorMessage
+  type: string
+  required: false
+  description: Error message text
+- name: values
+  type: object
+  required: false
+  description: value object containing values for each input.
+  - name: day
+    type: string
+    required: false
+    description: Value for the day input.
+  - name: month
+    type: string
+    required: false
+    description: Value for the month input.
+  - name: year
+    type: string
+    required: false
+    description: Value for the year input.
+- name: classes
+  type: string
+  required: false
+  description: Additional classes for the form-group

package/src/components/form/controls/date-picker.njk

@@ -0,0 +1,13 @@
+{% from "components/icons/icons--svg.njk" import icon_svg as icon_svg %}
+{% from "components/form/controls/label.njk" import label as label %}
+{% from "components/form/controls/helptext.njk" import helptext as helptext %}
+{% from "components/form/controls/errormessage.njk" import errorMessage as errorMessage %}
+
+{% macro datepicker(params) %}
+{% set required = params.required | default(true) %}
+<div class="form-group{% if params.success %} form-success{% endif %}{% if params.errorMessage %} form-error{% endif %}">
+  {{label(params.label)}}
+  {{helptext(params.helptext)}}
+  {{errorMessage(params.errorMessage)}}
+  <div class="date-picker" {% if params.minDate %}data-min-date="{{params.minDate}}" {%endif%}{% if params.maxDate %}data-max-date="{{params.maxDate}}" {%endif%}{% if params.defaultDate %}data-default-date="{{params.defaultDate}}" {%endif%}><input class="form-input {{params.classes}}" {% if required == true %}required {% endif %} id="{{params.id}}" value="{{params.value}}" name="{{params.name}}" type="{{params.type | default('text') }}" {% if params.disabled %}disabled="disabled"{% endif %} {% if params.errorMessage %}aria-invalid="true" {% endif %}{% if params.errorMessage or params.helptext %}aria-describedby="{% if params.helptext%}{{params.helptext.id}}{% endif %} {% if params.errorMessage %}{{params.errorMessage.id}}{% endif %}"{% endif %}></div>
+</div>{% endmacro %}

package/src/components/form/controls/date-picker.yaml

@@ -0,0 +1,62 @@
+params:
+- name: id
+  type: string
+  required: true
+  description: Id of the input field.
+- name: tooltip
+  type: string
+  required: false
+  description: Tooltip text.
+- name: helptext
+  type: string
+  required: false
+  description: Helptext object.
+- name: label
+  type: object
+  required: true
+  description: Label object.
+- name: minDate
+  type: string
+  required: false
+  description: Sets dateinterval minium date in format YYYY-MM-DD.
+- name: maxDate
+  type: string
+  required: false
+  description: Sets dateinterval minium date in format YYYY-MM-DD.
+- name: defaultDate
+  type: string
+  required: false
+  description: First focused date is per default todays date. Set default date to change the first focused date in format YYYY-MM-DD.
+- name: errorMessage
+  type: string
+  required: false
+  description: Error message object
+- name: success
+  type: boolean
+  required: false
+  description: Sets field as successfull.
+- name: value
+  type: string
+  required: false
+  description: Date value.
+- name: name
+  type: string
+  required: true
+  description: Name of the input element.
+- name: type
+  type: string
+  required: false
+  description: Type of input. Defaults to text.
+- name: classes
+  type: string
+  required: false
+  description: Additional classes for the form-group
+- name: required
+  type: boolean
+  required: false
+  description: Is field required? False if not. Default is true.
+- name: disabled
+  type: boolean
+  required: false
+  description: Is field disabled? Set to true if it is disabled. Default is false.
+  

package/src/components/form/controls/errormessage.njk

@@ -0,0 +1,5 @@
+{% macro errorMessage(params) %}
+ {% if params.text %}<span class="form-error-message" id="{{params.id}}-error">
+<span class="sr-only">Fejl:</span> {{params.text}}
+</span>{% endif %}
+{% endmacro %}

package/src/components/form/controls/errormessage.yaml

@@ -0,0 +1,9 @@
+params:
+- name: id
+  type: string
+  required: true
+  description: Id of the error message element.
+- name: text
+  type: string
+  required: true
+  description: Error message text

package/src/components/form/controls/helptext.njk

@@ -0,0 +1,7 @@
+{% macro helptext(params) %}
+{%- if params.text -%}
+<span class="form-hint" id="{{id}}">
+{{params.text}}
+</span>
+{%- endif -%}
+{% endmacro %}

package/src/components/form/controls/helptext.yaml

@@ -0,0 +1,9 @@
+params:
+- name: id
+  type: string
+  required: true
+  description: Id of the helptext element.
+- name: text
+  type: string
+  required: true
+  description: Helptext

package/src/components/form/controls/label.njk

@@ -0,0 +1,8 @@
+{% from "components/icons/icons--svg.njk" import icon_svg as icon_svg %}
+{% macro label(params) %}
+{%- if params.text -%}
+<label class="form-label{% if params.classes %} {{params.classes}}{% endif %}" for="{{params.for}}">
+{{params.text}}{% if params.optionalLabel %}<span class="weight-normal"> (frivilligt)</span>{% endif %}{% if params.requiredLabel %}<span class="weight-normal"> (*skal udfyldes)</span>{% endif %}{% if params.tooltip %}<button class="button-unstyled js-tooltip" data-tooltip="{{params.tooltip}}" data-tooltip-trigger="click">{{icon_svg({"name": "help"})}}<span class="sr-only">Hvad betyder det?</span></button>{% endif %}
+</label>
+{%- endif -%}
+{% endmacro %}

package/src/components/form/controls/label.yaml

@@ -0,0 +1,28 @@
+params:
+- name: text
+  type: string
+  required: true
+  description: Label text.
+- name: classes
+  type: string
+  required: true
+  description: Classes of the label.
+- name: optionalLabel
+  type: boolean
+  required: false
+  description: True if the input is optional. Appends optional label.
+- name: requiredLabel
+  type: boolean
+  required: false
+  description: Appends required label.
+- name: for
+  type: string
+  required: true
+  description: Id of the input element.
+- name: Tooltip
+  type: string
+  required: false
+  description: Tooltip text.
+  
+
+

package/src/components/form/controls/radiobutton.njk

@@ -0,0 +1,7 @@
+{% macro radiobutton(params) %}
+  <div class="form-group-radio">
+    <input id="{{params.id}}" type="radio" name="{{params.name}}" value="{{params.value}}" {% if params.helptext %}aria-labelledby="form-label-{{params.id}} helptext-{{params.id}}"{% endif %}class="form-radio {% if params.large %}radio-large{% endif %} {{params.inputClasses}}" {% if params.disabled %}disabled{% endif %} {% if params.checked %}checked{% endif %} {{params.inputAttributes | safe }} />
+    <label for="{{params.id}}" id="form-label-{{params.id}}" class="{{params.labelClassses}}" {{params.labelAttrirbutes | safe}}>{{params.label}} {% if params.srOnly %}<span class="sr-only">{{params.srOnly}}</span>{% endif %}</label>
+    {% if params.helptext %}<span class="form-hint" id="helptext-{{params.id}}">{{ params.helptext }}</span>{% endif %}
+  </div>
+{% endmacro %}

package/src/components/form/controls/radiobutton.yaml

@@ -0,0 +1,54 @@
+params:
+- name: id
+  type: string
+  required: true
+  description: Id of the input.
+- name: name
+  type: string
+  required: true
+  description: Name of the input.
+- name: value
+  type: string
+  required: true
+  description: Value of the input.
+- name: helptext
+  type: string
+  required: false
+  description: Helptext.
+- name: large
+  type: boolean
+  required: false
+  description: Sets radio-large on input.
+- name: disabled
+  type: boolean
+  required: false
+  description: true on disabled.
+- name: checked
+  type: boolean
+  required: false
+  description: true on checked.
+- name: inputClasses
+  type: string
+  required: false
+  description: Additional classes for the input.
+- name: inputAttributes
+  type: string
+  required: false
+  description: Additional attributes for the input.
+- name: labelClasses
+  type: string
+  required: false
+  description: Additional classes for the label.
+- name: labelAttributes
+  type: string
+  required: false
+  description: Additional attributes for the label.
+- name: label
+  type: string
+  required: true
+  description: Label text
+- name: srOnly
+  type: string
+  required: false
+  description: Additional text only accessible for screenreaders. Is appended to the label text.
+  

package/src/components/form/controls/select.njk

@@ -0,0 +1,19 @@
+{% from "components/form/controls/label.njk" import label as label %}
+{% macro select(params) %}
+  <div class="form-group {% if params.errorMessage %}form-error{% endif %}">
+     {{label({
+    text: params.label.text,
+    classes: params.label.classes,
+    tooltip: params.label.tooltip,
+    for: params.id,
+    optionalLabel: params.label.optionalLabel,
+    requiredLabel: params.label.requiredLabel
+  }) | indent(2) | trim }}
+    {% if params.errorMessage %}<span class="form-error-message"><span class="sr-only">Fejl:</span> {{ params.errorMessage }}</span> {% endif %}
+    <select class="{{params.classes}} form-select" name="{{params.name}}" id="{{params.id}}"  {% if params.disabled %}disabled="disabled"{% endif %}{% if params.multiple %} multiple{% endif %}>
+      {% for option in params.options %}
+        <option value="{{option.value}}" {%if option.selected %}selected{% endif %}>{{option.text}}</option>
+      {% endfor %}
+    </select>
+  </div>
+{% endmacro %}

package/src/components/form/controls/select.yaml

@@ -0,0 +1,73 @@
+params:
+- name: id
+  type: string
+  required: true
+  description: The ID of the input.
+- name: label
+  type: object
+  required: true
+  description: The label attached to the input.
+  - name: text
+    type: string
+    required: true
+    description: Text for the label.
+  - name: for
+    type: string
+    required: true
+    description: Id of the input.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the label.
+  - name: requiredLabel
+    type: boolean
+    required: false
+    description: Show label saying the input is required and most inputs in form aren't required.
+  - name: optionalLabel
+    type: boolean
+    required: false
+    description: Show label saying the input is not required and most inputs in form are required.
+  - name: tooltip
+    type: string
+    required: false
+    description: Additional text to show in a tooltip next to the label
+- name: name
+  type: string
+  required: true
+  description: The name of the input, which is submitted with the form data.
+- name: options
+  type: array
+  required: true
+  description: Array of options
+  - name: value
+    type: string
+    required: false
+    description: Value of the option.
+  - name: text
+    type: string
+    required: true
+    description: Text of the option.
+  - name: selected
+    type: boolean
+    required: false
+    description: True of option is selected
+- name: disabled
+  type: boolean
+  required: false
+  description: true for disabled input. Defaults to false.
+- name: required
+  type: boolean
+  required: false
+  description: Enter true for required input. Enter false for optional input. Defaults to true.
+- name: errorMessage
+  type: string
+  required: false
+  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the input.
+- name: multiple
+  type: boolean
+  required: false
+  description: Allows for multiple options to be selected.

package/src/components/form/controls/text-area.njk

@@ -0,0 +1,16 @@
+{% from "components/form/controls/label.njk" import label as label %}
+{% macro textarea(params) %}
+  <div class="form-group{% if params.errorMessage %} form-error{% endif %}">
+     {{label({
+    text: params.label.text,
+    classes: params.label.classes,
+    tooltip: params.label.tooltip,
+    for: params.id,
+    optionalLabel: params.label.optionalLabel,
+    requiredLabel: params.label.requiredLabel
+  }) | indent(2) | trim }}
+     {% if params.helptext %}<span class="form-hint" id="input-hint-message-{{params.id}}">{{params.helptext}}</span>{% endif %}
+     {% if params.errorMessage %}<span class="form-error-message" id="form-error-message-{{params.id}}"><span class="sr-only">Fejl:</span> {{params.errorMessage}}</span>{% endif %}
+     <textarea class="form-input {{params.classes}}"{% if params.rows %} rows="{{ params.rows }}"{% endif %}{% if params.placeholder %} placeholder="{{params.placeholder}}"{% endif %}{% if params.required %} required{% endif %}{% if params.disabled %} disabled{% endif %}{% if params.readonly %} readonly{% endif %} id="{{params.id}}" name="{{params.name}}" {% if params.errorMessage or params.helptext %}aria-describedby="{% if params.errorMessage %}form-error-message-{{params.id}}{% endif %} {% if params.helptext %}input-hint-message-{{params.id}}"{% endif %}{% endif %}>{{params.value}}</textarea>
+  </div>
+{% endmacro %}

package/src/components/form/controls/text-area.yaml

@@ -0,0 +1,74 @@
+params:
+params:
+- name: id
+  type: string
+  required: true
+  description: The ID of the textarea.
+- name: label
+  type: object
+  required: true
+  description: The label attached to the textarea.
+  - name: text
+    type: string
+    required: true
+    description: Text for the label.
+  - name: for
+    type: string
+    required: true
+    description: Id of the textarea.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the label.
+  - name: requiredLabel
+    type: boolean
+    required: false
+    description: Show label saying the textarea is required and most textareas in form aren't required.
+  - name: optionalLabel
+    type: boolean
+    required: false
+    description: Show label saying the textarea is not required and most textareas in form are required.
+  - name: tooltip
+    type: string
+    required: false
+    description: Additional text to show in a tooltip next to the label
+- name: name
+  type: string
+  required: true
+  description: The name of the textarea, which is submitted with the form data.
+- name: value
+  type: string
+  required: false
+  description: Optional initial value of the textarea.
+- name: helptext
+  type: string
+  required: false
+  description: Text under label meant to help the user enter the correct value.
+- name: rows
+  type: string
+  required: false
+  description: Height of the textarea.
+- name: placeholder
+  type: string
+  required: false
+  description: Placeholder text in the textarea
+- name: disabled
+  type: boolean
+  required: false
+  description: true for disabled textarea. Defaults to false.
+- name: readonly
+  type: boolean
+  required: false
+  description: true for read only textarea. Defaults to false.
+- name: required
+  type: boolean
+  required: false
+  description: Enter true for required textarea. Enter false for optional textarea. Defaults to true.
+- name: errorMessage
+  type: string
+  required: false
+  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the textarea.

package/src/components/form/controls/text-input.njk

@@ -0,0 +1,29 @@
+{% from "components/icons/icons--svg.njk" import icon_svg as icon_svg %}
+{% from "components/form/controls/label.njk" import label as label %}
+{% macro textinput(params) %}<div class="form-group{% if params.success %} form-success{% endif %}{% if params.errorMessage %} form-error{% endif %}">
+{% set isRequired = params.required | default(true) %}
+{% set hintId = params.id + '-hint' %}
+{% set errorId = params.id + '-error' %}
+  {{label({
+    text: params.label.text,
+    classes: params.label.classes,
+    tooltip: params.label.tooltip,
+    for: params.id,
+    optionalLabel: params.label.optionalLabel,
+    requiredLabel: params.label.requiredLabel
+  }) | indent(2) | trim }}
+      {% if params.hint %}<span class="form-hint" id="{{hintId}}">
+      {{params.hint}}
+      </span>{% endif %}
+      {% if params.errorMessage %}<span class="form-error-message" id="{{errorId}}">
+      <span class="sr-only">Fejl:</span> {{params.errorMessage | safe}}
+      </span>{% endif %}
+      {%- if params.suffix or params.prefix %}<div class="form-input-wrapper{% if params.prefix %} form-input-wrapper--prefix{% endif %}{% if params.suffix %} form-input-wrapper--suffix{% endif %}">{% endif -%}
+       {%- if params.prefix -%}
+       <div class="form-input-prefix" aria-hidden="true">{{params.prefix}}</div>
+       {%- endif -%}
+      <input class="form-input{% if params.classes %} {{params.classes}}{% endif %}" {% if params.placeholder %} placeholder="{{params.placeholder}}" {% endif %}id="{{params.id}}"{% if params.value %} value="{{params.value}}"{% endif %} name="{{params.name}}" type="{{params.type | default('text') }}" {% if params.disabled %}disabled="disabled"{% endif %} {% if params.errorMessage %}aria-invalid="true" {% endif %}{% if params.errorMessage or params.hint %}aria-describedby="{% if params.hint %}{{hintId}}{% endif %}{% if params.errorMessage %} {{errorId}}{% endif %}"{% endif %}{% if params.readonly %} readonly{% endif %}{% if isRequired %} required{% endif %}{% if params.autocomplete %} autocomplete="{{params.autocomplete}}"{% endif %} />
+       {%- if params.suffix -%}
+       <div class="form-input-suffix" aria-hidden="true">{{params.suffix}}</div>{%- endif -%}
+      {% if params.suffix or params.prefix %}</div>{% endif %}
+  </div>{% endmacro %}

package/src/components/form/controls/text-input.yaml

@@ -0,0 +1,89 @@
+params:
+- name: id
+  type: string
+  required: true
+  description: The ID of the input.
+- name: label
+  type: object
+  required: true
+  description: The label attached to the input.
+  - name: text
+    type: string
+    required: true
+    description: Text for the label.
+  - name: for
+    type: string
+    required: true
+    description: Id of the input.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the label.
+  - name: requiredLabel
+    type: boolean
+    required: false
+    description: Show label saying the input is required and most inputs in form aren't required.
+  - name: optionalLabel
+    type: boolean
+    required: false
+    description: Show label saying the input is not required and most inputs in form are required.
+  - name: tooltip
+    type: string
+    required: false
+    description: Additional text to show in a tooltip next to the label
+- name: name
+  type: string
+  required: true
+  description: The name of the input, which is submitted with the form data.
+- name: type
+  type: string
+  required: false
+  description: Type of input control to render. Defaults to `text`.
+- name: value
+  type: string
+  required: false
+  description: Optional initial value of the input.
+- name: hint
+  type: string
+  required: false
+  description: Text under label meant to help the user enter the correct value.
+- name: suffix
+  type: string
+  required: false
+  description: Text added after the input
+- name: prefix
+  type: string
+  required: false
+  description: Text added before the input
+- name: placeholder
+  type: string
+  required: false
+  description: Placeholder text in the input
+- name: disabled
+  type: boolean
+  required: false
+  description: true for disabled input. Defaults to false.
+- name: readonly
+  type: boolean
+  required: false
+  description: true for read only input. Defaults to false.
+- name: required
+  type: boolean
+  required: false
+  description: Enter true for required input. Enter false for optional input. Defaults to true.
+- name: autocomplete
+  type: string
+  required: false
+  description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance "postal-code" or "username". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used.
+- name: errorMessage
+  type: string
+  required: false
+  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
+- name: success
+  type: boolean
+  required: false
+  description: Adds form-success to form-group on true. Defaults to false.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the input.