@vectoriox/iox-ui 5.7.0 → 5.8.0

package/forms-core/index.d.ts

@@ -11,6 +11,10 @@ declare enum ControlType {
     Textarea = "textarea",
     Select = "select",
     Checkbox = "checkbox",
+    /** A checkbox in switch clothing (role="switch") — consent toggles, settings-style forms. */
+    Switch = "switch",
+    /** A slider over a numeric range — min/max/step ride the field. */
+    Range = "range",
     Radio = "radio",
     Date = "date",
     Time = "time",

package/index.d.ts

@@ -809,6 +809,10 @@ declare enum ControlType {
     Textarea = "textarea",
     Select = "select",
     Checkbox = "checkbox",
+    /** A checkbox in switch clothing (role="switch") — consent toggles, settings-style forms. */
+    Switch = "switch",
+    /** A slider over a numeric range — min/max/step ride the field. */
+    Range = "range",
     Radio = "radio",
     Date = "date",
     Time = "time",
@@ -1148,6 +1152,9 @@ declare class IoxFieldComponent implements OnInit, OnDestroy {
     labelHidden: boolean;
     requiredMark: string;
     rows: number;
+    rangeMin: number | string;
+    rangeMax: number | string;
+    rangeStep: number | string;
     accept: string;
     options: FieldOption[];
     value: any;
@@ -1192,7 +1199,7 @@ declare class IoxFieldComponent implements OnInit, OnDestroy {
     emit(value: any): void;
     touch(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<IoxFieldComponent, [{ optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IoxFieldComponent, "div[iox-field]", never, { "nodeId": { "alias": "nodeId"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "control": { "alias": "control"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "help": { "alias": "help"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "requiredMark": { "alias": "requiredMark"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "options": { "alias": "options"; "required": false; }; "value": { "alias": "value"; "required": false; }; "rules": { "alias": "rules"; "required": false; }; "forceInvalid": { "alias": "forceInvalid"; "required": false; }; "designErrorText": { "alias": "designErrorText"; "required": false; }; "showValid": { "alias": "showValid"; "required": false; }; }, { "valueChange": "valueChange"; "touched": "touched"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IoxFieldComponent, "div[iox-field]", never, { "nodeId": { "alias": "nodeId"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "control": { "alias": "control"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "help": { "alias": "help"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "requiredMark": { "alias": "requiredMark"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "rangeMin": { "alias": "rangeMin"; "required": false; }; "rangeMax": { "alias": "rangeMax"; "required": false; }; "rangeStep": { "alias": "rangeStep"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "options": { "alias": "options"; "required": false; }; "value": { "alias": "value"; "required": false; }; "rules": { "alias": "rules"; "required": false; }; "forceInvalid": { "alias": "forceInvalid"; "required": false; }; "designErrorText": { "alias": "designErrorText"; "required": false; }; "showValid": { "alias": "showValid"; "required": false; }; }, { "valueChange": "valueChange"; "touched": "touched"; }, never, never, false, never>;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectoriox/iox-ui",
-  "version": "5.7.0",
+  "version": "5.8.0",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",

package/src/forms-core/form.model.ts

@@ -16,6 +16,10 @@ export enum ControlType {
     Textarea = 'textarea',
     Select = 'select',
     Checkbox = 'checkbox',
+    /** A checkbox in switch clothing (role="switch") — consent toggles, settings-style forms. */
+    Switch = 'switch',
+    /** A slider over a numeric range — min/max/step ride the field. */
+    Range = 'range',
     Radio = 'radio',
     Date = 'date',
     Time = 'time',

package/src/forms-core/rule-catalog.ts

@@ -40,7 +40,7 @@ const TEXTUAL: readonly ControlType[] = [
 ];
 
 /** Controls with a comparable magnitude. */
-const NUMERIC: readonly ControlType[] = [ControlType.Number, ControlType.Date, ControlType.Time];
+const NUMERIC: readonly ControlType[] = [ControlType.Number, ControlType.Date, ControlType.Time, ControlType.Range];
 
 export const RULE_DESCRIPTORS: readonly RuleDescriptor[] = Object.freeze([
     {
@@ -73,7 +73,7 @@ export const RULE_DESCRIPTORS: readonly RuleDescriptor[] = 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],
     },
 ]);
 

package/styles/iox-forms.css

@@ -54,3 +54,43 @@
     position: absolute; width: 1px; height: 1px; margin: -1px;
     padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
 }
+
+/* ── switch (control='switch') — a checkbox in switch clothing; brand-aware via tokens ── */
+.iox-field__control--switch {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 38px;
+  height: 22px;
+  border-radius: 999px;
+  background: var(--iox-line, #d8d4d1);
+  position: relative;
+  cursor: pointer;
+  transition: background 150ms ease-out;
+  flex-shrink: 0;
+}
+.iox-field__control--switch::before {
+  content: '';
+  position: absolute;
+  top: 3px;
+  inset-inline-start: 3px;
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  background: #ffffff;
+  transition: transform 150ms ease-out;
+}
+.iox-field__control--switch:checked {
+  background: var(--iox-brand-500, #1f1d1b);
+}
+.iox-field__control--switch:checked::before {
+  transform: translateX(16px);
+}
+[dir='rtl'] .iox-field__control--switch:checked::before {
+  transform: translateX(-16px);
+}
+
+/* ── range (control='range') ── */
+.iox-field__control--range {
+  width: 100%;
+  accent-color: var(--iox-brand-500, #1f1d1b);
+}