add pin element plus container

configs/styles/pin-label.js

@@ -0,0 +1,15 @@
+const {cx} = require('@bsi-cx/design-build');
+
+module.exports = cx.style
+  .withIdentifier('pin-label-numbering-ba3c80c7')
+  /*.withLabel('Footer gradient')*/
+  .withLabel('Nummerierung')
+  .withCssClasses(
+    cx.cssClass
+      /*.withLabel('No gradient')*/
+      .withLabel('Mit Nummerierung')
+      .withCssClass('default'),
+    cx.cssClass
+      /*.withLabel('Show gradient')*/
+      .withLabel('Ohne Nummerierung')
+      .withCssClass('pin-label-invisible'));

content-elements/advanced/form-container-pin/index.js

@@ -0,0 +1,29 @@
+require('./styles.scss');
+const {cx, Icon} = require('@bsi-cx/design-build');
+
+const element = cx.contentElement;
+
+/**
+ * @returns {ContentElement}
+ */
+module.exports = element;
+element.withFile(require('./template.twig'))
+  .withElementId('form-container-pin-384aa4d6')
+  /*.withLabel('Form')*/
+  .withLabel('Pin-Element')
+  .withIcon(Icon.ONE_COLUMN)
+  .withStyleConfigs(
+    require('../../../configs/styles/form-width'),
+    require('../../../configs/styles/form-layout'),
+    require('../../../configs/styles/form-color'),
+    require('../../../configs/styles/form-info-text'))
+  .withParts(
+    cx.part.form
+      .withId('form-container-pin-30c44d0d')
+      /*.withLabel('Form'))*/
+      .withLabel('Pin-Element'))
+  .withDropzones(
+    cx.dropzone
+      .withDropzone('form-container-dropzone-6b6f360e')
+      .withAllowedElements(
+        require('../form-pin')));

content-elements/advanced/form-container-pin/styles.scss

@@ -0,0 +1,156 @@
+@import "../../../styles/properties";
+
+.bsi-element-form-container-692qIu {
+  padding-right: 0px;
+  padding-left: 0px;
+
+  .form-text {
+    margin-top: 0 !important;
+  }
+  input, select, textarea, input.bsi-form-tel-input-element, .bsi-poll-radio-group, .form-radio {
+    margin-top: 0.5rem !important;
+  }
+  label {
+    margin-bottom: 0;
+  }
+
+  .card, input, select, textarea {
+    border: 1px solid rgba(56, 62, 66, .3);
+  }
+
+  &.bsi-form-slim {
+    max-width: 540px;
+  }
+
+  &.bsi-form-card-visible .card-body {
+    padding-right: 32px;
+    padding-left: 32px;
+  }
+
+  &.bsi-form-card-hide {
+    .card {
+      box-shadow: none !important;
+      border: none;
+    }
+
+    .card-body {
+      padding-right: 0;
+      padding-left: 0;
+    }
+  }
+
+  &.bsi-corner-sharp {
+    input {
+      border-radius: 0;
+    }
+  }
+
+  $colors: ("primary": $primary, "secondary": $secondary);
+  @each $name, $color in $colors {
+    input:focus, select:focus, textarea:focus {
+      border-color: rgba($color, .25);
+      box-shadow: 0 0 0 .25rem rgba($color, .25);
+    }
+
+    &.bsi-form-btn-outline .btn-submit {
+      color: $color;
+      background-color: transparent;
+      border-color: $color;
+
+      &:hover {
+        color: $light;
+        background-color: $color;
+        border-color: $color;
+      }
+    }
+
+    &.bsi-form-btn-filled .btn-submit {
+      color: $light;
+      background-color: $color;
+      border-color: $color;
+
+      &:hover {
+        color: $color;
+        background-color: transparent;
+        border-color: $color;
+      }
+    }
+
+    input[type=range]::-webkit-slider-thumb {
+      background: $color;
+    }
+
+    input[type=range]::-moz-range-thumb {
+      background: $color;
+    } /* Firefox */
+
+    input[type=range]::-ms-thumb {
+      background: $color;
+    } /* IE */
+
+    input[type=range]:focus::-webkit-slider-thumb {
+      box-shadow: 0 0 0 .25rem rgba($color, .25);
+    }
+
+    input[type=range]:focus::-moz-range-thumb {
+      box-shadow: 0 0 0 .25rem rgba($color, .25);
+    } /* Firefox */
+
+    input[type=range]:focus::-ms-thumb {
+      box-shadow: 0 0 0 .25rem rgba($color, .25);
+    } /* IE */
+
+    i.bi-info-circle {
+      color: $color;
+    }
+  }
+
+
+  &.bsi-form-btn-filled .btn-outline-info {
+    color: $light;
+    background-color: $dark;
+    border-color: $dark;
+
+    &:hover {
+      color: $dark;
+      background-color: transparent;
+      border-color: $dark;
+    }
+  }
+
+  input[type=submit], input[type=reset], .bsi-btn-element {
+    margin: 0 0.25rem 0.25rem 0 !important;
+  }
+
+  input[type=reset][disabled] {
+    display: none;
+  }
+
+  .text-danger {
+    list-style-type: none;
+  }
+
+  .form-label-and-info-text {
+    &.contains-tooltip {
+      display: flex;
+      gap: 0.5rem;
+
+      .form-text {
+        display: none;
+      }
+    }
+
+    i.bi-info-circle {
+      display: none;
+
+      &.tooltip-visible {
+        display: block;
+      }
+    }
+  }
+}
+
+.bsi-tooltip {
+  --bs-tooltip-bg: var(--bs-gray-dark);
+  --bs-tooltip-color: var(--bs-light);
+}

content-elements/advanced/form-container-pin/template.twig

@@ -0,0 +1,33 @@
+{% apply spaceless %}
+    {% set formWidth = (formWidth ?: properties.formWidth) ?: 'bsi-form-wide' %}
+    {% set formLayout = (formLayout ?: properties.formLayout) ?: 'bsi-form-card-visible' %}
+    {% set formBorderRadius = (formBorderRadius ?: properties.formBorderRadius) ?: 'bsi-corner-rounded' %}
+    {% set formLabelPosition = (formLabelPosition ?: properties.formLabelPosition) ?: 'bsi-form-label-top' %}
+    {% set formColor = (formColor ?: properties.formColor) ?: 'bsi-form-color-primary' %}
+    {% set formButtonLayout = (formButtonLayout ?: properties.formButtonLayout) ?: 'bsi-form-btn-outline' %}
+
+    <div x-data="formElement" data-bsi-element="form-container-pin-384aa4d6" class="bsi-element-form-container-692qIu container mb-3 {{ formWidth }} {{ formLayout }} {{ formBorderRadius }} {{ formTooltipStyle }} {{ formColor }} {{ formButtonLayout }}">
+        <div class="card border-light shadow">
+            <div class="card-body">
+                <form x-init="initForm" x-on:submit="submitForm" data-bsi-element-part="form-container-pin-30c44d0d" id="form" data-bsi-show-form-type-field class="needs-validation" novalidate>
+                    <div data-bsi-dropzone="form-container-dropzone-6b6f360e">
+                        {% block form_container_dropzone %}
+                            {% include '../form-pin/template.twig' %}
+                        {% endblock %}
+                    </div>
+                    <div data-bsi-remove-if="draft">
+                        <ul class="text-danger" data-bsi-form-validation="">
+                            <li data-bsi-form-validation-item=""></li>
+                        </ul>
+                    </div>
+                    <div class="bsi-form-btn-row hstack flex-wrap">
+                        <div class="bsi-form-btn d-flex">
+                            <input type="submit" class="btn btn-submit hide" value="Submit"/>
+                            <input type="reset" class="btn btn-outline-dark" value="Reset"/>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+{% endapply %}

content-elements/advanced/form-pin/form-pin.js

@@ -0,0 +1,99 @@
+import Alpine from '@alpinejs/csp';
+
+Alpine.data('formPin', () => ({
+  rootEl: null,
+  maxlength: null,
+
+  initFormFieldInput() {
+    this.rootEl = this.$root.querySelector('.bsi-form-field-input');
+    var containerDiv = this.$root.querySelector('.bsi-form-pin-element');
+
+    if (this.rootEl.getAttribute('maxlength') == null) {
+      this.maxlength = 6;
+    } else {
+      this.maxlength = this.rootEl.getAttribute('maxlength');
+    }
+
+    for (var i = 0; i < this.maxlength; i++) {
+      var inputWrapper = document.createElement('div');
+      inputWrapper.classList = 'input-wrapper';
+      containerDiv.appendChild(inputWrapper);
+
+      var label = document.createElement('label');
+      label.classList = 'form-label';
+      label.innerHTML = i + 1 + ".";
+      inputWrapper.appendChild(label);
+
+      var pinBox = document.createElement('input');
+      pinBox.setAttribute('x-init', 'initFormPinInput');
+      pinBox.setAttribute('required', 'true');
+      pinBox.classList = 'bsi-form-field-input form-control bsi-form-field-input pin';
+      inputWrapper.appendChild(pinBox);
+    }
+  },
+
+  initFormPinInput() {
+    var inputPin = this.$el;
+    inputPin.setAttribute('inputmode', 'numeric');
+    inputPin.setAttribute('pattern', "[0-9]");
+    inputPin.addEventListener('focusin', (e) => {
+      inputPin.setAttribute('old', inputPin.value);
+    });
+    inputPin.addEventListener('input', (e) => {
+      this._isCompletelyFilledIn();
+      this._autoFocusNextPinInput();
+    });
+  },
+
+  _isCompletelyFilledIn() {
+    let form = this.$root.closest('form');
+    const inputPinList = this.$root.querySelectorAll('input.pin');
+    this._cleanUp();
+    this.rootEl.value = Array.from(inputPinList).reduce((result, input) => {
+      return result + input.value;
+    }, "");
+    if (form && this.rootEl.value.length == this.maxlength) {
+      form.submit();
+    }
+  },
+
+  _autoFocusNextPinInput() {
+    var inputPin = this.$el;
+    var inputWrapper = inputPin.parentNode.nextElementSibling;
+    if (inputPin.value && this._LastPinElement()!=null) {
+      var nextPinInput = inputWrapper.children[1];
+      while (nextPinInput) {
+        var pinInput = nextPinInput;
+        pinInput.focus();
+        break;
+      }
+    }
+  },
+
+  _cleanUp() {
+    var inputPin = this.$el;
+    if (inputPin.value) {
+      if (this._LastPinElement() == null){
+        inputPin.value = inputPin.value.slice(-1);
+      }
+      if (inputPin.value.length > 1) {
+        var old = inputPin.getAttribute('old');
+        var value = inputPin.value;
+        if (!/^[0-9]+$/.test(inputPin.value)) {
+          inputPin.value = old;
+        } else {
+          var newVal = value.replace(old, '');
+          inputPin.value = newVal;
+          var old = newVal;
+        }
+      } else if (!/^[0-9]+$/.test(inputPin.value)) {
+        inputPin.value = null;
+      }
+    }
+  },
+
+  _LastPinElement() {
+    var inputPin = this.$el;
+    return inputPin.parentNode.nextElementSibling;
+  },
+}));

content-elements/advanced/form-pin/index.js

@@ -0,0 +1,19 @@
+require('./styles.scss');
+
+const {cx, Icon} = require('@bsi-cx/design-build');
+
+module.exports = cx.contentElement
+  .withFile(require('./template.twig'))
+  .withElementId('form-pin-dafa5a0e')
+  .withLabel('PIN')
+  .withDescription('')
+  .withIcon(Icon.FORMFIELD)
+  .withStyleConfigs(
+    require('../../../configs/styles/pin-label'))
+  .withParts(
+    cx.part.formField
+      .withId('form-field-part-eefc3ac5')
+      .withLabel('Formularfeld'),
+    cx.part.plainText
+      .withId('form-field-part-text-cc1a1c62')
+      .withLabel('Formularfeld'));