diff --git a/configs/styles/pin-auto-submit.js b/configs/styles/pin-auto-submit.js
index 29015cb..9b9acd2 100644
--- a/configs/styles/pin-auto-submit.js
+++ b/configs/styles/pin-auto-submit.js
@@ -2,14 +2,14 @@ const {cx} = require('@bsi-cx/design-build');
module.exports = cx.style
.withIdentifier('pin-auto-submit-ae00c3ca')
- /*.withLabel('Footer gradient')*/
+ /*.withLabel('Pin auto submit')*/
.withLabel('automatisch versenden ')
.withCssClasses(
cx.cssClass
- /*.withLabel('No gradient')*/
+ /*.withLabel('No auto submit')*/
.withLabel('nein')
.withCssClass('default'),
cx.cssClass
- /*.withLabel('Show gradient')*/
+ /*.withLabel('Show auto submit')*/
.withLabel('ja')
.withCssClass('auto-submit'));
\ No newline at end of file
diff --git a/configs/styles/pin-label.js b/configs/styles/pin-label.js
index 64cf80e..b49b9c3 100644
--- a/configs/styles/pin-label.js
+++ b/configs/styles/pin-label.js
@@ -2,14 +2,14 @@ const {cx} = require('@bsi-cx/design-build');
module.exports = cx.style
.withIdentifier('pin-label-numbering-ba3c80c7')
- /*.withLabel('Footer gradient')*/
+ /*.withLabel('Numbered label')*/
.withLabel('Nummerierung')
.withCssClasses(
cx.cssClass
- /*.withLabel('No gradient')*/
+ /*.withLabel('Show numbering')*/
.withLabel('Mit Nummerierung')
.withCssClass('pin-label-visible'),
cx.cssClass
- /*.withLabel('Show gradient')*/
+ /*.withLabel('No numbering')*/
.withLabel('Ohne Nummerierung')
.withCssClass('pin-label-invisible'));
\ No newline at end of file
diff --git a/content-elements/form/form-pin/form-pin.js b/content-elements/form/form-pin/form-pin.js
index b9d1900..8bc9509 100644
--- a/content-elements/form/form-pin/form-pin.js
+++ b/content-elements/form/form-pin/form-pin.js
@@ -1,9 +1,8 @@
import Alpine from '@alpinejs/csp';
-import { Tooltip } from 'bootstrap';
Alpine.data('formPin', () => ({
bsiInputElement: null, // Input field required for CX story / value flow
- maxlength: null,
+ maxLength: null,
requiredErrorElement: null,
form: null,
root: null,
@@ -17,20 +16,6 @@ Alpine.data('formPin', () => ({
this._initFloatingLabels(floatingElement);
}
}
-
- if (this.root.classList.contains('bsi-form-info-as-tooltip')
- && ['bsi-form-label-top', 'bsi-form-label-left'].some(labelClass => this.root.classList.contains(labelClass))) {
- this.form.querySelectorAll('.bsi-form-element').forEach((formElement) => {
- let infoTextField = formElement.querySelector('.form-text');
- let tooltipIcon = formElement.querySelector('i');
- if (infoTextField && infoTextField.innerText && tooltipIcon) {
- tooltipIcon.classList.add('tooltip-visible');
- tooltipIcon.parentElement.classList.add('contains-tooltip');
- tooltipIcon.setAttribute('title', infoTextField.innerText);
- new Tooltip(tooltipIcon);
- }
- })
- }
},
submitForm(e) {
@@ -47,7 +32,7 @@ Alpine.data('formPin', () => ({
},
validateInput() {
- if (this.bsiInputElement.value.length != this.maxlength) {
+ if (this.bsiInputElement.value.length != this.maxLength) {
this.requiredErrorElement.style.display = "block";
} else {
this.requiredErrorElement.style.display = "none";
@@ -58,14 +43,9 @@ Alpine.data('formPin', () => ({
this.bsiInputElement = this.$root.querySelector('.bsi-form-field-input-original');
let containerDiv = this.$root.querySelector('.bsi-form-pin-element');
- const maxLength = this.bsiInputElement.getAttribute('maxlength');
- if (maxLength == null) {
- this.maxlength = 6;
- } else {
- this.maxlength = this.bsiInputElement.getAttribute('maxlength');
- }
+ this.maxLength = this.bsiInputElement.getAttribute('maxlength') ?? 6;
- for (let i = 0; i < this.maxlength; i++) {
+ for (let i = 0; i < this.maxLength; i++) {
this._initPinNumberField(containerDiv, i);
}
},
@@ -73,59 +53,52 @@ Alpine.data('formPin', () => ({
_initPinNumberField(containerDiv, i) {
let div = document.createElement('div');
let label = document.createElement('label');
- let pinInput = document.createElement('input');
+ let inputPin = document.createElement('input');
div.classList = 'input-wrapper';
label.classList = 'form-label';
label.innerHTML = (i + 1) + ".";
- pinInput.classList = 'bsi-form-field-input form-control bsi-form-field-input pin';
+ inputPin.classList = 'bsi-form-field-input form-control bsi-form-field-input pin';
- pinInput.setAttribute('x-init', 'initFormPinInput');
- pinInput.setAttribute('required', 'true');
+ inputPin.setAttribute('required', 'true');
+ inputPin.setAttribute('inputmode', 'numeric');
+ inputPin.setAttribute('type', "number");
div.appendChild(label);
- div.appendChild(pinInput);
+ div.appendChild(inputPin);
containerDiv.appendChild(div);
- },
-
- initFormPinInput() {
- let inputPin = this.$el;
- inputPin.setAttribute('inputmode', 'numeric');
- inputPin.setAttribute('pattern', "[0-9]");
inputPin.addEventListener('focusin', (e) => {
inputPin.setAttribute('old', inputPin.value);
});
inputPin.addEventListener('keydown', (e) => {
- if (e.key ==='Backspace' && !inputPin.value) {
- this._autoFocusPreviousPinInput();
+ if ((e.key =='Backspace') && !inputPin.value) {
+ this._autoFocusPreviousPinInput(inputPin);
}
});
-
+
inputPin.addEventListener('input', (e) => {
const inputPinList = this.$root.querySelectorAll('input.pin');
- this._cleanUp();
+ this._cleanUp(inputPin);
this.bsiInputElement.value = Array.from(inputPinList).reduce((result, input) => {
return result + input.value;
}, "");
if (this.$root.classList.contains('auto-submit')) {
this._autoSubmitIfFilledIn();
}
- this._autoFocusNextPinInput();
+ this._autoFocusNextPinInput(inputPin);
});
},
- _autoFocusNextPinInput() {
- let inputPin = this.$el;
+ _autoFocusNextPinInput(inputPin) {
let nextWrapper = inputPin.parentNode.nextElementSibling;
- if (inputPin.value && !this._isLastPinElement()) {
+ if (inputPin.value && !this._isLastPinElement(inputPin)) {
this._autoFocus(nextWrapper);
}
},
- _autoFocusPreviousPinInput() {
- let inputPin = this.$el;
+ _autoFocusPreviousPinInput(inputPin) {
let previousWrapper = inputPin.parentNode.previousSibling;
if (previousWrapper != null) {
this._autoFocus(previousWrapper);
@@ -140,40 +113,26 @@ Alpine.data('formPin', () => ({
},
_autoSubmitIfFilledIn() {
- let form = this.$root.querySelector('.formular-pin');;
- if (form && (this.bsiInputElement.value.length == this.maxlength)) {
+ let form = this.$root.querySelector('.formular-pin');
+ if (form && (this.bsiInputElement.value.length == this.maxLength)) {
form.submit();
}
},
- _cleanUp() {
- // TODO: auch im DOM lösbar?
- let inputPin = this.$el;
+ _cleanUp(inputPin) {
if (inputPin.value) {
- if (this._isLastPinElement()){
+ if (this._isLastPinElement(inputPin)){
inputPin.value = inputPin.value.slice(-1);
- }
-
- const numberPattern = /^[0-9]+$/;
- if (inputPin.value.length > 1) {
+ } else if (inputPin.value.length > 1) {
var oldValue = inputPin.getAttribute('old');
- var currentValue = inputPin.value;
-
- if (!numberPattern.test(inputPin.value)) {
- inputPin.value = oldValue;
- } else {
- var newValue = currentValue.replace(oldValue, '');
- inputPin.value = newValue;
- oldValue = newValue;
+ var newValue = inputPin.value.replace(oldValue, '');
+ inputPin.value = newValue;
+ oldValue = newValue;
}
-
- } else if (!numberPattern.test(inputPin.value)) {
- inputPin.value = null;
- }
}
},
- _isLastPinElement() {
- return this.$el.parentNode.nextElementSibling == null;
+ _isLastPinElement(inputPin) {
+ return inputPin.parentNode.nextElementSibling == null;
},
}));
diff --git a/content-elements/form/form-pin/index.js b/content-elements/form/form-pin/index.js
index 00548e9..3a97aaf 100644
--- a/content-elements/form/form-pin/index.js
+++ b/content-elements/form/form-pin/index.js
@@ -16,7 +16,6 @@ element.withFile(require('./template.twig'))
require('../../../configs/styles/form-width'),
require('../../../configs/styles/form-layout'),
require('../../../configs/styles/form-color'),
- require('../../../configs/styles/form-info-text'),
require('../../../configs/styles/pin-label'),
require('../../../configs/styles/pin-auto-submit'))
.withParts(
diff --git a/content-elements/form/form-pin/styles.scss b/content-elements/form/form-pin/styles.scss
index b6e287b..5c1ce66 100644
--- a/content-elements/form/form-pin/styles.scss
+++ b/content-elements/form/form-pin/styles.scss
@@ -129,25 +129,6 @@
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;
- }
- }
- }
-
.hide { display: none; }
.bsi-form-pin-element {
@@ -203,9 +184,4 @@
background-image: none !important;
background-color: rgb(217, 19, 41, 0.05) !important;
border: 1px solid #d91329 !important;
-}
-
-.bsi-tooltip {
- --bs-tooltip-bg: var(--bs-gray-dark);
- --bs-tooltip-color: var(--bs-light);
}
\ No newline at end of file
diff --git a/content-elements/form/form-pin/template.twig b/content-elements/form/form-pin/template.twig
index ab5402d..43ecb3c 100644
--- a/content-elements/form/form-pin/template.twig
+++ b/content-elements/form/form-pin/template.twig
@@ -24,7 +24,6 @@
{{ formFieldInfoText }}
-