@ardium-ui/ui 3.3.0-alpha.9 → 3.3.0

package/fesm2022/ardium-ui-ui.mjs

@@ -359,8 +359,7 @@ class DigitInputModel {
         this._ardHost = _ardHost;
         this._configArray = signal([]);
         this.configArrayData = computed(() => {
-            let inputIndex = 0;
-            return this._configArray().map(v => {
+            return this._configArray().map((v, i) => {
                 if ('static' in v) {
                     return {
                         type: DigitInputConfigDataType.Static,
@@ -369,29 +368,32 @@ class DigitInputModel {
                 }
                 return {
                     type: DigitInputConfigDataType.Input,
-                    index: inputIndex++,
+                    index: i,
                     readonly: v.readonly,
                     placeholder: v.placeholder ?? '',
                 };
             });
         });
-        this._configArrayNoStatics = computed(() => this._configArray().filter(v => !('static' in v)));
         this.isConfigDefined = computed(() => this._configArray().length > 0);
         this.value = signal(null);
         this.stringValue = computed(() => this.value()
             ?.map(v => v ?? ' ')
-            .join('')
-            .trimEnd() ?? '');
-        this.isValueFull = computed(() => this.value()?.filter(v => v).length === this._configArrayNoStatics().length);
+            .join('') ?? '');
+        this.isValueFull = computed(() => this.value()?.filter(v => v).length === this._configArray().length);
         //set the value array to be the same length
         effect(() => {
-            const length = this.configArrayData().length;
+            const configArr = this.configArrayData();
+            const length = configArr.length;
             this.value.update(arr => {
                 if (!arr)
-                    return new Array(length).fill(null);
-                if (arr.length >= length)
-                    return arr.slice(0, length);
-                return [...arr, ...new Array(length - arr.length).fill(null)];
+                    arr = [];
+                const newArr = [];
+                for (let i = 0; i < length; i++) {
+                    const curr = arr[i];
+                    const config = configArr[i];
+                    newArr.push(config.type === DigitInputConfigDataType.Static ? config.char : curr ?? null);
+                }
+                return newArr;
             });
         }, { allowSignalWrites: true });
     }
@@ -404,8 +406,8 @@ class DigitInputModel {
                 throw new Error(`ARD-FT0040b: Trying to set <ard-digit-input>'s value to "${v}" (of type ${typeof v}), but the input uses [outputAsString]="true", and thus expects string or null.`);
             }
             const vArray = v?.split('') ?? [];
-            if (vArray.length > this._configArrayNoStatics().length) {
-                console.warn(`ARD-WA0041: Value provided to <ard-digit-input> is too long. Got ${vArray.length} characters, but expected a maximum of ${this._configArrayNoStatics().length} characters.`);
+            if (vArray.length > this._configArray().length) {
+                console.warn(`ARD-WA0041: Value provided to <ard-digit-input> is too long. Got ${vArray.length} characters, but expected a maximum of ${this._configArray().length} characters.`);
             }
             return this._writeValue(vArray);
         }
@@ -413,8 +415,8 @@ class DigitInputModel {
             throw new Error(`ARD-FT0041: Trying to set <ard-digit-input>'s value to "${v}" (of type ${typeof v}), expected string or array of characters.`);
         }
         const vArray = coerceArrayProperty(v);
-        if (vArray.length > this._configArrayNoStatics().length) {
-            console.warn(`ARD-WA0041: Value provided to <ard-digit-input> is too long. Got ${vArray.length} characters, but expected a maximum of ${this._configArrayNoStatics().length} characters.`);
+        if (vArray.length > this._configArray().length) {
+            console.warn(`ARD-WA0041: Value provided to <ard-digit-input> is too long. Got ${vArray.length} characters, but expected a maximum of ${this._configArray().length} characters.`);
         }
         const problemIndex = vArray.findIndex(el => !isAnyString(el) || el.length > 1);
         if (problemIndex !== -1) {
@@ -488,7 +490,7 @@ class DigitInputModel {
     }
     //! validate against the config
     validateInputAndSetValue(input, index) {
-        if (index < 0 || index > this._configArrayNoStatics().length)
+        if (index < 0 || index > this._configArray().length)
             return null;
         let v = this.value();
         //prepare the value array if does not exist
@@ -507,7 +509,7 @@ class DigitInputModel {
         const lastChar = input.charAt(input.length - 1);
         input = firstChar === before ? lastChar : firstChar;
         //validate and transform, if necessary
-        const inputChar = this._validateSingleChar(input, before, this._configArrayNoStatics()[index]);
+        const inputChar = this._validateSingleChar(input, before, this._configArray()[index]);
         //get the corresponding HTML input element
         const inputEl = this._ardHost.inputs()[index];
         if (!inputEl) {
@@ -532,32 +534,38 @@ class DigitInputModel {
             return;
         let before = '';
         const newValue = [];
-        for (let i = 0; i < Math.min(this._configArrayNoStatics().length, v.length); i++) {
+        for (let i = 0; i < Math.min(this._configArray().length, v.length); i++) {
             const char = v[i];
             before += char ?? ' ';
             if (!char) {
                 newValue.push(char);
                 continue;
             }
-            const config = this._configArrayNoStatics()[i];
-            const newChar = this._validateSingleChar(char, before, config);
+            const newChar = this._validateSingleChar(char, before, this._configArray()[i]);
             newValue.push(newChar);
         }
         this.value.set(newValue);
     }
     _validateSingleChar(char, before, config) {
+        // return the character if it is static
+        if ('static' in config)
+            return config.static;
+        // for peace of mind protect against modifying read-only fields
         if (config.readonly) {
             throw new Error(`ARD-IS0049R: trying to set value of a <ard-digit-input>'s readonly field. This is error is fatal to the functioning of Ardium UI. Please report this issue to the creators.`);
         }
+        // process regex or convert string into regex
         if (!isFunction(config.accept)) {
             const regExp = isRegExp(config.accept) ? config.accept : new RegExp(`[${_sanitizeRegExpString(config.accept)}]`);
             config.accept = str => regExp.test(str);
         }
         if (!char)
             return char;
+        // check if input fits the criteria
         const canAccept = config.accept(char, before);
         if (!canAccept)
             return null;
+        // transform if needed
         if (config.transform) {
             if (config.transform === TransformType.Lowercase) {
                 return char.toLowerCase();
@@ -565,6 +573,9 @@ class DigitInputModel {
             if (config.transform === TransformType.Uppercase) {
                 return char.toUpperCase();
             }
+            if (isFunction(config.transform)) {
+                return config.transform(char).charAt(0);
+            }
             console.warn(`ARD-IS0049T: <ard-digit-input>'s value validator encountered an unexpected value of the config's "transform" property. Ardium UI was able to handle this issue, but please report it to the creators.`);
         }
         return char;
@@ -658,19 +669,20 @@ class ArdiumDigitInputComponent extends _FormFieldComponentBase {
             this.model.validateInputAndSetValue(char, index + i);
         });
         this.focusByIndex(index - 1 + Math.min(value.length, maxLength));
+        this._emitChange();
     }
     onInput(event, index) {
-        this._updateSingleInputValue(event.target.value, index);
+        const changeSuccessful = this._updateSingleInputValue(event.target.value, index);
+        if (!changeSuccessful)
+            return;
         this.focusByIndex(index + 1);
     }
     _updateSingleInputValue(value, index) {
         const changeResult = this.model.validateInputAndSetValue(value, index);
         if (!changeResult?.wasChanged)
-            return;
+            return false;
         this._emitChange();
-        if (this.model.isValueFull()) {
-            this.blur();
-        }
+        return true;
     }
     focusByIndex(index, tryFocusingNext, direction) {
         if (index < 0 || index >= this.inputs().length)
@@ -678,6 +690,9 @@ class ArdiumDigitInputComponent extends _FormFieldComponentBase {
         const nextEl = this.inputs()[index]?.nativeElement;
         if (!nextEl)
             return false;
+        if (nextEl.getAttribute('data-ard-static') !== null) {
+            return this.focusByIndex(index + (direction ?? 1));
+        }
         nextEl.focus();
         if (tryFocusingNext && direction && document.activeElement !== nextEl) {
             return this.focusByIndex(index + direction);
@@ -735,7 +750,7 @@ class ArdiumDigitInputComponent extends _FormFieldComponentBase {
                 provide: _FormFieldComponentBase,
                 useExisting: ArdiumDigitInputComponent,
             },
-        ], viewQueries: [{ propertyName: "inputs", predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-digit-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n>\r\n  @for (data of configArrayData(); track $index) {\r\n  <div\r\n    class=\"ard-digit-input__item\"\r\n    [class.ard-digit-input__item-with-input]=\"data.type === 'input'\"\r\n  >\r\n    @if (data.type === 'input') {\r\n    <input\r\n      #input\r\n      #focusableElement\r\n      class=\"ard-digit-input__input\"\r\n      type=\"text\"\r\n      autocomplete=\"off\"\r\n      [readonly]=\"data.readonly\"\r\n      [placeholder]=\"data.placeholder\"\r\n      [attr.tabindex]=\"tabIndex()\"\r\n      [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n      [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n      (paste)=\"onPaste($event, data.index!)\"\r\n      (input)=\"onInput($event, data.index!)\"\r\n      (focus)=\"onFocusMaster($event, data.index!)\"\r\n      (blur)=\"onBlurMaster($event, data.index!)\"\r\n      (keydown)=\"onKeydown($event, data.index!)\"\r\n    />\r\n    } @else {\r\n    <div class=\"ard-digit-input__static\">\r\n      {{ data.char }}\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "inputs", predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-digit-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n>\r\n  @for (data of configArrayData(); track $index) {\r\n  <div\r\n    class=\"ard-digit-input__item\"\r\n    [class.ard-digit-input__item-with-input]=\"data.type === 'input'\"\r\n  >\r\n    @if (data.type === 'input') {\r\n    <input\r\n      #input\r\n      #focusableElement\r\n      class=\"ard-digit-input__input\"\r\n      type=\"text\"\r\n      autocomplete=\"off\"\r\n      [readonly]=\"data.readonly\"\r\n      [placeholder]=\"data.placeholder\"\r\n      [attr.tabindex]=\"tabIndex()\"\r\n      [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n      [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n      (paste)=\"onPaste($event, data.index!)\"\r\n      (input)=\"onInput($event, data.index!)\"\r\n      (focus)=\"onFocusMaster($event, data.index!)\"\r\n      (blur)=\"onBlurMaster($event, data.index!)\"\r\n      (keydown)=\"onKeydown($event, data.index!)\"\r\n    />\r\n    } @else {\r\n    <div class=\"ard-digit-input__static\">\r\n      {{ data.char }}\r\n    </div>\r\n    <input\r\n      #input\r\n      type=\"text\"\r\n      class=\"ard-digit-input__static-input\"\r\n      data-ard-static\r\n      autocomplete=\"off\"\r\n      tabindex=\"-1\"\r\n      aria-hidden=\"true\"\r\n      [value]=\"data.char\"\r\n    />\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".ard-digit-input__static-input{position:absolute;opacity:0;appearance:none;pointer-events:none;width:0;height:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDigitInputComponent, decorators: [{
             type: Component,
@@ -749,7 +764,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: _FormFieldComponentBase,
                             useExisting: ArdiumDigitInputComponent,
                         },
-                    ], template: "<div\r\n  class=\"ard-digit-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n>\r\n  @for (data of configArrayData(); track $index) {\r\n  <div\r\n    class=\"ard-digit-input__item\"\r\n    [class.ard-digit-input__item-with-input]=\"data.type === 'input'\"\r\n  >\r\n    @if (data.type === 'input') {\r\n    <input\r\n      #input\r\n      #focusableElement\r\n      class=\"ard-digit-input__input\"\r\n      type=\"text\"\r\n      autocomplete=\"off\"\r\n      [readonly]=\"data.readonly\"\r\n      [placeholder]=\"data.placeholder\"\r\n      [attr.tabindex]=\"tabIndex()\"\r\n      [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n      [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n      (paste)=\"onPaste($event, data.index!)\"\r\n      (input)=\"onInput($event, data.index!)\"\r\n      (focus)=\"onFocusMaster($event, data.index!)\"\r\n      (blur)=\"onBlurMaster($event, data.index!)\"\r\n      (keydown)=\"onKeydown($event, data.index!)\"\r\n    />\r\n    } @else {\r\n    <div class=\"ard-digit-input__static\">\r\n      {{ data.char }}\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n" }]
+                    ], template: "<div\r\n  class=\"ard-digit-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n>\r\n  @for (data of configArrayData(); track $index) {\r\n  <div\r\n    class=\"ard-digit-input__item\"\r\n    [class.ard-digit-input__item-with-input]=\"data.type === 'input'\"\r\n  >\r\n    @if (data.type === 'input') {\r\n    <input\r\n      #input\r\n      #focusableElement\r\n      class=\"ard-digit-input__input\"\r\n      type=\"text\"\r\n      autocomplete=\"off\"\r\n      [readonly]=\"data.readonly\"\r\n      [placeholder]=\"data.placeholder\"\r\n      [attr.tabindex]=\"tabIndex()\"\r\n      [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n      [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n      (paste)=\"onPaste($event, data.index!)\"\r\n      (input)=\"onInput($event, data.index!)\"\r\n      (focus)=\"onFocusMaster($event, data.index!)\"\r\n      (blur)=\"onBlurMaster($event, data.index!)\"\r\n      (keydown)=\"onKeydown($event, data.index!)\"\r\n    />\r\n    } @else {\r\n    <div class=\"ard-digit-input__static\">\r\n      {{ data.char }}\r\n    </div>\r\n    <input\r\n      #input\r\n      type=\"text\"\r\n      class=\"ard-digit-input__static-input\"\r\n      data-ard-static\r\n      autocomplete=\"off\"\r\n      tabindex=\"-1\"\r\n      aria-hidden=\"true\"\r\n      [value]=\"data.char\"\r\n    />\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".ard-digit-input__static-input{position:absolute;opacity:0;appearance:none;pointer-events:none;width:0;height:0}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_DIGIT_INPUT_DEFAULTS]
@@ -3668,7 +3683,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
     }
     //! change & touch event emitters
     _emitChange() {
-        const value = this.itemStorage.value();
+        const value = this.multiselectable() ? this.itemStorage.value() : this.itemStorage.value()[0];
         this._onChangeRegistered?.(value);
         this.changeEvent.emit(value);
         this.valueChange.emit(value);
@@ -6738,7 +6753,7 @@ class _SelectableListComponentBase extends _FormFieldComponentBase {
         return this.touched();
     }
     _emitChange() {
-        const value = this.itemStorage.value();
+        const value = this.singleselectable() ? this.itemStorage.value()[0] : this.itemStorage.value();
         this._onChangeRegistered?.(value);
         this.changeEvent.emit(value);
         this.valueChange.emit(value);