@vectoriox/iox-ui 5.7.0 → 5.9.0

package/fesm2022/vectoriox-iox-ui.mjs

@@ -2871,6 +2871,10 @@ var ControlType;
     ControlType["Textarea"] = "textarea";
     ControlType["Select"] = "select";
     ControlType["Checkbox"] = "checkbox";
+    /** A checkbox in switch clothing (role="switch") — consent toggles, settings-style forms. */
+    ControlType["Switch"] = "switch";
+    /** A slider over a numeric range — min/max/step ride the field. */
+    ControlType["Range"] = "range";
     ControlType["Radio"] = "radio";
     ControlType["Date"] = "date";
     ControlType["Time"] = "time";
@@ -3425,7 +3429,7 @@ const TEXTUAL = [
     ControlType.Password, ControlType.Textarea,
 ];
 /** Controls with a comparable magnitude. */
-const NUMERIC = [ControlType.Number, ControlType.Date, ControlType.Time];
+const NUMERIC = [ControlType.Number, ControlType.Date, ControlType.Time, ControlType.Range];
 const RULE_DESCRIPTORS = Object.freeze([
     {
         name: RuleName.MinLength, labelKey: 'forms.rules.minLength',
@@ -3457,7 +3461,7 @@ const RULE_DESCRIPTORS = Object.freeze([
         // A checkbox's `required` already becomes `accepted`, so offering it again would be a
         // duplicate — it is here for a checkbox the author wants ticked WITHOUT marking it required.
         name: RuleName.Accepted, labelKey: 'forms.rules.accepted',
-        param: RuleParamKind.None, controls: [ControlType.Checkbox],
+        param: RuleParamKind.None, controls: [ControlType.Checkbox, ControlType.Switch],
     },
 ]);
 /** The rules that can be added to a field of this control type. */
@@ -3986,6 +3990,9 @@ class IoxFieldComponent {
         this.labelHidden = false;
         this.requiredMark = '*';
         this.rows = 4;
+        this.rangeMin = 0;
+        this.rangeMax = 100;
+        this.rangeStep = 1;
         this.accept = '';
         this.options = [];
         this.value = '';
@@ -4071,7 +4078,7 @@ class IoxFieldComponent {
         this.touched.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxFieldComponent, deps: [{ token: FormRuntimeService, optional: true }, { token: IOX_FORM_MESSAGES }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: IoxFieldComponent, isStandalone: false, selector: "div[iox-field]", inputs: { nodeId: "nodeId", name: "name", label: "label", control: "control", placeholder: "placeholder", help: "help", required: "required", disabled: "disabled", labelHidden: "labelHidden", requiredMark: "requiredMark", rows: "rows", accept: "accept", options: "options", value: "value", rules: "rules", forceInvalid: "forceInvalid", designErrorText: "designErrorText", showValid: "showValid" }, outputs: { valueChange: "valueChange", touched: "touched" }, host: { properties: { "class": "'iox-field iox-node-' + nodeId", "class.iox-invalid": "invalid", "class.iox-valid": "showValid", "attr.data-iox-field": "fieldName || null", "hidden": "control === 'hidden' ? true : null" } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: IoxFieldComponent, isStandalone: false, selector: "div[iox-field]", inputs: { nodeId: "nodeId", name: "name", label: "label", control: "control", placeholder: "placeholder", help: "help", required: "required", disabled: "disabled", labelHidden: "labelHidden", requiredMark: "requiredMark", rows: "rows", rangeMin: "rangeMin", rangeMax: "rangeMax", rangeStep: "rangeStep", accept: "accept", options: "options", value: "value", rules: "rules", forceInvalid: "forceInvalid", designErrorText: "designErrorText", showValid: "showValid" }, outputs: { valueChange: "valueChange", touched: "touched" }, host: { properties: { "class": "'iox-field iox-node-' + nodeId", "class.iox-invalid": "invalid", "class.iox-valid": "showValid", "attr.data-iox-field": "fieldName || null", "hidden": "control === 'hidden' ? true : null" } }, ngImport: i0, template: `
         <label class="iox-field__label"
                [class.iox-field__label--hidden]="labelHidden"
                [attr.for]="controlId">
@@ -4112,6 +4119,33 @@ class IoxFieldComponent {
                     }
                 </select>
             }
+            @case ('switch') {
+                <input class="iox-field__control iox-field__control--switch"
+                       type="checkbox"
+                       role="switch"
+                       [id]="controlId"
+                       [name]="fieldName"
+                       [attr.aria-invalid]="invalid ? 'true' : null"
+                       [attr.aria-describedby]="describedBy"
+                       [attr.disabled]="disabled ? '' : null"
+                       [checked]="value === true"
+                       (change)="emit($any($event.target).checked)"
+                       (blur)="touch()">
+            }
+            @case ('range') {
+                <input class="iox-field__control iox-field__control--range"
+                       type="range"
+                       [id]="controlId"
+                       [name]="fieldName"
+                       [attr.min]="rangeMin"
+                       [attr.max]="rangeMax"
+                       [attr.step]="rangeStep"
+                       [attr.aria-describedby]="describedBy"
+                       [attr.disabled]="disabled ? '' : null"
+                       [value]="value ?? rangeMin"
+                       (input)="emit(+$any($event.target).value)"
+                       (blur)="touch()">
+            }
             @case ('checkbox') {
                 <input class="iox-field__control iox-field__control--checkbox"
                        type="checkbox"
@@ -4209,6 +4243,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                     }
                 </select>
             }
+            @case ('switch') {
+                <input class="iox-field__control iox-field__control--switch"
+                       type="checkbox"
+                       role="switch"
+                       [id]="controlId"
+                       [name]="fieldName"
+                       [attr.aria-invalid]="invalid ? 'true' : null"
+                       [attr.aria-describedby]="describedBy"
+                       [attr.disabled]="disabled ? '' : null"
+                       [checked]="value === true"
+                       (change)="emit($any($event.target).checked)"
+                       (blur)="touch()">
+            }
+            @case ('range') {
+                <input class="iox-field__control iox-field__control--range"
+                       type="range"
+                       [id]="controlId"
+                       [name]="fieldName"
+                       [attr.min]="rangeMin"
+                       [attr.max]="rangeMax"
+                       [attr.step]="rangeStep"
+                       [attr.aria-describedby]="describedBy"
+                       [attr.disabled]="disabled ? '' : null"
+                       [value]="value ?? rangeMin"
+                       (input)="emit(+$any($event.target).value)"
+                       (blur)="touch()">
+            }
             @case ('checkbox') {
                 <input class="iox-field__control iox-field__control--checkbox"
                        type="checkbox"
@@ -4295,6 +4356,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Input
             }], rows: [{
                 type: Input
+            }], rangeMin: [{
+                type: Input
+            }], rangeMax: [{
+                type: Input
+            }], rangeStep: [{
+                type: Input
             }], accept: [{
                 type: Input
             }], options: [{