@odx/angular 12.18.0 → 12.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @odx/angular
|
|
2
2
|
|
|
3
|
+
## 12.19.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 448c241: OdxSwitchComponent now supports @odx/icons v4
|
|
8
|
+
|
|
9
|
+
## 12.18.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- d15a22b: Notes about programmatic control of the disabled state for reactive forms have been added
|
|
14
|
+
|
|
3
15
|
## 12.18.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
|
@@ -19,7 +19,7 @@ import * as i1 from "@odx/angular";
|
|
|
19
19
|
*/
|
|
20
20
|
let SwitchComponent = class SwitchComponent extends CheckBoxControl {
|
|
21
21
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
22
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SwitchComponent, isStandalone: true, selector: "odx-switch", host: { properties: { "class.is-active": "checked" } }, providers: [ReadonlyController.connect()], usesInheritance: true, hostDirectives: [{ directive: i1.WithDisabledState }], ngImport: i0, template: "<label class=\"odx-switch__label\">\n <input\n odxControl\n class=\"odx-switch__input\"\n [attr.aria-checked]=\"ariaChecked\"\n [attr.aria-invalid]=\"hasError || null\"\n [attr.aria-readonly]=\"isReadonly || null\"\n [attr.aria-required]=\"isRequired || null\"\n [attr.tabindex]=\"tabindex || null\"\n [checked]=\"checked\"\n [disabled]=\"isDisabled || isReadonly\"\n [name]=\"name\"\n [readonly]=\"isReadonly\"\n [value]=\"value\"\n type=\"checkbox\"\n (blur)=\"onTouched()\"\n (change)=\"onChanged($event)\"\n />\n <odx-icon class=\"odx-
|
|
22
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SwitchComponent, isStandalone: true, selector: "odx-switch", host: { properties: { "class.is-active": "checked" } }, providers: [ReadonlyController.connect()], usesInheritance: true, hostDirectives: [{ directive: i1.WithDisabledState }], ngImport: i0, template: "<label class=\"odx-switch__label\">\n <input\n odxControl\n class=\"odx-switch__input\"\n [attr.aria-checked]=\"ariaChecked\"\n [attr.aria-invalid]=\"hasError || null\"\n [attr.aria-readonly]=\"isReadonly || null\"\n [attr.aria-required]=\"isRequired || null\"\n [attr.tabindex]=\"tabindex || null\"\n [checked]=\"checked\"\n [disabled]=\"isDisabled || isReadonly\"\n [name]=\"name\"\n [readonly]=\"isReadonly\"\n [value]=\"value\"\n type=\"checkbox\"\n (blur)=\"onTouched()\"\n (change)=\"onChanged($event)\"\n />\n <div class=\"odx-switch__track\">\n <div class=\"odx-switch__thumb\">\n <odx-icon class=\"odx-switch__icon\" iconSet=\"core\" [name]=\"checked ? 'check' : 'close'\" />\n </div>\n </div>\n <div class=\"odx-switch__content\">\n <ng-content />\n @if (isRequired) {\n <span class=\"odx-switch__required\">*</span>\n }\n </div>\n</label>\n", dependencies: [{ kind: "directive", type: ControlDirective, selector: "[odxControl]", exportAs: ["odxControl"] }, { kind: "component", type: IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name", "iconSet", "identifier"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
23
23
|
};
|
|
24
24
|
SwitchComponent = __decorate([
|
|
25
25
|
CSSComponent('switch')
|
|
@@ -29,6 +29,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
29
29
|
type: Component,
|
|
30
30
|
args: [{ standalone: true, selector: 'odx-switch', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [ControlDirective, IconComponent], providers: [ReadonlyController.connect()], hostDirectives: [WithDisabledState], host: {
|
|
31
31
|
'[class.is-active]': 'checked',
|
|
32
|
-
}, template: "<label class=\"odx-switch__label\">\n <input\n odxControl\n class=\"odx-switch__input\"\n [attr.aria-checked]=\"ariaChecked\"\n [attr.aria-invalid]=\"hasError || null\"\n [attr.aria-readonly]=\"isReadonly || null\"\n [attr.aria-required]=\"isRequired || null\"\n [attr.tabindex]=\"tabindex || null\"\n [checked]=\"checked\"\n [disabled]=\"isDisabled || isReadonly\"\n [name]=\"name\"\n [readonly]=\"isReadonly\"\n [value]=\"value\"\n type=\"checkbox\"\n (blur)=\"onTouched()\"\n (change)=\"onChanged($event)\"\n />\n <odx-icon class=\"odx-
|
|
32
|
+
}, template: "<label class=\"odx-switch__label\">\n <input\n odxControl\n class=\"odx-switch__input\"\n [attr.aria-checked]=\"ariaChecked\"\n [attr.aria-invalid]=\"hasError || null\"\n [attr.aria-readonly]=\"isReadonly || null\"\n [attr.aria-required]=\"isRequired || null\"\n [attr.tabindex]=\"tabindex || null\"\n [checked]=\"checked\"\n [disabled]=\"isDisabled || isReadonly\"\n [name]=\"name\"\n [readonly]=\"isReadonly\"\n [value]=\"value\"\n type=\"checkbox\"\n (blur)=\"onTouched()\"\n (change)=\"onChanged($event)\"\n />\n <div class=\"odx-switch__track\">\n <div class=\"odx-switch__thumb\">\n <odx-icon class=\"odx-switch__icon\" iconSet=\"core\" [name]=\"checked ? 'check' : 'close'\" />\n </div>\n </div>\n <div class=\"odx-switch__content\">\n <ng-content />\n @if (isRequired) {\n <span class=\"odx-switch__required\">*</span>\n }\n </div>\n</label>\n" }]
|
|
33
33
|
}] });
|
|
34
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
34
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3dpdGNoLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci9jb21wb25lbnRzL3N3aXRjaC9zcmMvbGliL3N3aXRjaC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXIvY29tcG9uZW50cy9zd2l0Y2gvc3JjL2xpYi9zd2l0Y2guY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdEYsT0FBTyxFQUFFLGtCQUFrQixFQUFFLGlCQUFpQixFQUFFLE1BQU0sY0FBYyxDQUFDO0FBQ3JFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQztBQUNwRSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQztBQUN4RSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDN0QsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLHVCQUF1QixDQUFDOzs7QUFFckQ7Ozs7Ozs7OztHQVNHO0FBZUksSUFBTSxlQUFlLEdBQXJCLE1BQU0sZUFBZ0IsU0FBUSxlQUFlOytHQUF2QyxlQUFlO21HQUFmLGVBQWUsaUhBTmYsQ0FBQyxrQkFBa0IsQ0FBQyxPQUFPLEVBQUUsQ0FBQyx3R0N6QjNDLGk2QkE4QkEsNENETlksZ0JBQWdCLG1GQUFFLGFBQWE7O0FBTzlCLGVBQWU7SUFkM0IsWUFBWSxDQUFDLFFBQVEsQ0FBQztHQWNWLGVBQWUsQ0FBMkI7OzRGQUExQyxlQUFlO2tCQWIzQixTQUFTO2lDQUNJLElBQUksWUFDTixZQUFZLG1CQUVMLHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUksV0FDNUIsQ0FBQyxnQkFBZ0IsRUFBRSxhQUFhLENBQUMsYUFDL0IsQ0FBQyxrQkFBa0IsQ0FBQyxPQUFPLEVBQUUsQ0FBQyxrQkFDekIsQ0FBQyxpQkFBaUIsQ0FBQyxRQUM3Qjt3QkFDSixtQkFBbUIsRUFBRSxTQUFTO3FCQUMvQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBSZWFkb25seUNvbnRyb2xsZXIsIFdpdGhEaXNhYmxlZFN0YXRlIH0gZnJvbSAnQG9keC9hbmd1bGFyJztcbmltcG9ydCB7IENoZWNrQm94Q29udHJvbCB9IGZyb20gJ0BvZHgvYW5ndWxhci9jZGsvY2hlY2tib3gtY29udHJvbCc7XG5pbXBvcnQgeyBDb250cm9sRGlyZWN0aXZlIH0gZnJvbSAnQG9keC9hbmd1bGFyL2Nkay9jdXN0b20tZm9ybS1jb250cm9sJztcbmltcG9ydCB7IEljb25Db21wb25lbnQgfSBmcm9tICdAb2R4L2FuZ3VsYXIvY29tcG9uZW50cy9pY29uJztcbmltcG9ydCB7IENTU0NvbXBvbmVudCB9IGZyb20gJ0BvZHgvYW5ndWxhci9pbnRlcm5hbCc7XG5cbi8qKlxuICogU3dpdGNoQ29tcG9uZW50IHByb3ZpZGVzIGEgY3VzdG9tIHN3aXRjaCAodG9nZ2xlKSBjb250cm9sIHRoYXQgY2FuIGJlIHVzZWQgd2l0aGluIGZvcm1zXG4gKiBvciBzdGFuZGFsb25lIGZvciB0b2dnbGluZyBhIHNwZWNpZmljIGJpbmFyeSBzdGF0ZS4gSXQgc3VwcG9ydHMgcmVhZG9ubHkgYW5kIGRpc2FibGVkIHN0YXRlcyxcbiAqIGFuZCBpbnRlZ3JhdGVzIHNlYW1sZXNzbHkgd2l0aCBBbmd1bGFyJ3MgZm9ybSBjb250cm9scyBmb3IgZGF0YSBiaW5kaW5nIGFuZCBzdGF0ZSBtYW5hZ2VtZW50LlxuICogSGFzIGhvc3QgZGlyZWN0aXZlcyBmb3IgZGlzYWJsZWQgc3RhdGUgaGFuZGxpbmcuXG4gKiBFeHRlbmRzIENoZWNrQm94Q29udHJvbCB0byBwcm92aWRlIGFkZGl0aW9uYWwgYmVoYXZpb3IuXG4gKlxuICogQHNlZSB7V2l0aERpc2FibGVkU3RhdGV9XG4gKiBAc2VlIHtDaGVja0JveENvbnRyb2x9XG4gKi9cbkBDU1NDb21wb25lbnQoJ3N3aXRjaCcpXG5AQ29tcG9uZW50KHtcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgc2VsZWN0b3I6ICdvZHgtc3dpdGNoJyxcbiAgdGVtcGxhdGVVcmw6ICdzd2l0Y2guY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgaW1wb3J0czogW0NvbnRyb2xEaXJlY3RpdmUsIEljb25Db21wb25lbnRdLFxuICBwcm92aWRlcnM6IFtSZWFkb25seUNvbnRyb2xsZXIuY29ubmVjdCgpXSxcbiAgaG9zdERpcmVjdGl2ZXM6IFtXaXRoRGlzYWJsZWRTdGF0ZV0sXG4gIGhvc3Q6IHtcbiAgICAnW2NsYXNzLmlzLWFjdGl2ZV0nOiAnY2hlY2tlZCcsXG4gIH0sXG59KVxuZXhwb3J0IGNsYXNzIFN3aXRjaENvbXBvbmVudCBleHRlbmRzIENoZWNrQm94Q29udHJvbCB7fVxuIiwiPGxhYmVsIGNsYXNzPVwib2R4LXN3aXRjaF9fbGFiZWxcIj5cbiAgPGlucHV0XG4gICAgb2R4Q29udHJvbFxuICAgIGNsYXNzPVwib2R4LXN3aXRjaF9faW5wdXRcIlxuICAgIFthdHRyLmFyaWEtY2hlY2tlZF09XCJhcmlhQ2hlY2tlZFwiXG4gICAgW2F0dHIuYXJpYS1pbnZhbGlkXT1cImhhc0Vycm9yIHx8IG51bGxcIlxuICAgIFthdHRyLmFyaWEtcmVhZG9ubHldPVwiaXNSZWFkb25seSB8fCBudWxsXCJcbiAgICBbYXR0ci5hcmlhLXJlcXVpcmVkXT1cImlzUmVxdWlyZWQgfHwgbnVsbFwiXG4gICAgW2F0dHIudGFiaW5kZXhdPVwidGFiaW5kZXggfHwgbnVsbFwiXG4gICAgW2NoZWNrZWRdPVwiY2hlY2tlZFwiXG4gICAgW2Rpc2FibGVkXT1cImlzRGlzYWJsZWQgfHwgaXNSZWFkb25seVwiXG4gICAgW25hbWVdPVwibmFtZVwiXG4gICAgW3JlYWRvbmx5XT1cImlzUmVhZG9ubHlcIlxuICAgIFt2YWx1ZV09XCJ2YWx1ZVwiXG4gICAgdHlwZT1cImNoZWNrYm94XCJcbiAgICAoYmx1cik9XCJvblRvdWNoZWQoKVwiXG4gICAgKGNoYW5nZSk9XCJvbkNoYW5nZWQoJGV2ZW50KVwiXG4gIC8+XG4gIDxkaXYgY2xhc3M9XCJvZHgtc3dpdGNoX190cmFja1wiPlxuICAgIDxkaXYgY2xhc3M9XCJvZHgtc3dpdGNoX190aHVtYlwiPlxuICAgICAgPG9keC1pY29uIGNsYXNzPVwib2R4LXN3aXRjaF9faWNvblwiIGljb25TZXQ9XCJjb3JlXCIgW25hbWVdPVwiY2hlY2tlZCA/ICdjaGVjaycgOiAnY2xvc2UnXCIgLz5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJvZHgtc3dpdGNoX19jb250ZW50XCI+XG4gICAgPG5nLWNvbnRlbnQgLz5cbiAgICBAaWYgKGlzUmVxdWlyZWQpIHtcbiAgICAgIDxzcGFuIGNsYXNzPVwib2R4LXN3aXRjaF9fcmVxdWlyZWRcIj4qPC9zcGFuPlxuICAgIH1cbiAgPC9kaXY+XG48L2xhYmVsPlxuIl19
|
|
@@ -21,7 +21,7 @@ import { CheckboxRequiredValidator, NG_VALIDATORS } from '@angular/forms';
|
|
|
21
21
|
*/
|
|
22
22
|
let SwitchComponent = class SwitchComponent extends CheckBoxControl {
|
|
23
23
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
24
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SwitchComponent, isStandalone: true, selector: "odx-switch", host: { properties: { "class.is-active": "checked" } }, providers: [ReadonlyController.connect()], usesInheritance: true, hostDirectives: [{ directive: i1.WithDisabledState }], ngImport: i0, template: "<label class=\"odx-switch__label\">\n <input\n odxControl\n class=\"odx-switch__input\"\n [attr.aria-checked]=\"ariaChecked\"\n [attr.aria-invalid]=\"hasError || null\"\n [attr.aria-readonly]=\"isReadonly || null\"\n [attr.aria-required]=\"isRequired || null\"\n [attr.tabindex]=\"tabindex || null\"\n [checked]=\"checked\"\n [disabled]=\"isDisabled || isReadonly\"\n [name]=\"name\"\n [readonly]=\"isReadonly\"\n [value]=\"value\"\n type=\"checkbox\"\n (blur)=\"onTouched()\"\n (change)=\"onChanged($event)\"\n />\n <odx-icon class=\"odx-
|
|
24
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SwitchComponent, isStandalone: true, selector: "odx-switch", host: { properties: { "class.is-active": "checked" } }, providers: [ReadonlyController.connect()], usesInheritance: true, hostDirectives: [{ directive: i1.WithDisabledState }], ngImport: i0, template: "<label class=\"odx-switch__label\">\n <input\n odxControl\n class=\"odx-switch__input\"\n [attr.aria-checked]=\"ariaChecked\"\n [attr.aria-invalid]=\"hasError || null\"\n [attr.aria-readonly]=\"isReadonly || null\"\n [attr.aria-required]=\"isRequired || null\"\n [attr.tabindex]=\"tabindex || null\"\n [checked]=\"checked\"\n [disabled]=\"isDisabled || isReadonly\"\n [name]=\"name\"\n [readonly]=\"isReadonly\"\n [value]=\"value\"\n type=\"checkbox\"\n (blur)=\"onTouched()\"\n (change)=\"onChanged($event)\"\n />\n <div class=\"odx-switch__track\">\n <div class=\"odx-switch__thumb\">\n <odx-icon class=\"odx-switch__icon\" iconSet=\"core\" [name]=\"checked ? 'check' : 'close'\" />\n </div>\n </div>\n <div class=\"odx-switch__content\">\n <ng-content />\n @if (isRequired) {\n <span class=\"odx-switch__required\">*</span>\n }\n </div>\n</label>\n", dependencies: [{ kind: "directive", type: ControlDirective, selector: "[odxControl]", exportAs: ["odxControl"] }, { kind: "component", type: IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name", "iconSet", "identifier"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
25
25
|
};
|
|
26
26
|
SwitchComponent = __decorate([
|
|
27
27
|
CSSComponent('switch')
|
|
@@ -30,7 +30,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
30
30
|
type: Component,
|
|
31
31
|
args: [{ standalone: true, selector: 'odx-switch', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [ControlDirective, IconComponent], providers: [ReadonlyController.connect()], hostDirectives: [WithDisabledState], host: {
|
|
32
32
|
'[class.is-active]': 'checked',
|
|
33
|
-
}, template: "<label class=\"odx-switch__label\">\n <input\n odxControl\n class=\"odx-switch__input\"\n [attr.aria-checked]=\"ariaChecked\"\n [attr.aria-invalid]=\"hasError || null\"\n [attr.aria-readonly]=\"isReadonly || null\"\n [attr.aria-required]=\"isRequired || null\"\n [attr.tabindex]=\"tabindex || null\"\n [checked]=\"checked\"\n [disabled]=\"isDisabled || isReadonly\"\n [name]=\"name\"\n [readonly]=\"isReadonly\"\n [value]=\"value\"\n type=\"checkbox\"\n (blur)=\"onTouched()\"\n (change)=\"onChanged($event)\"\n />\n <odx-icon class=\"odx-
|
|
33
|
+
}, template: "<label class=\"odx-switch__label\">\n <input\n odxControl\n class=\"odx-switch__input\"\n [attr.aria-checked]=\"ariaChecked\"\n [attr.aria-invalid]=\"hasError || null\"\n [attr.aria-readonly]=\"isReadonly || null\"\n [attr.aria-required]=\"isRequired || null\"\n [attr.tabindex]=\"tabindex || null\"\n [checked]=\"checked\"\n [disabled]=\"isDisabled || isReadonly\"\n [name]=\"name\"\n [readonly]=\"isReadonly\"\n [value]=\"value\"\n type=\"checkbox\"\n (blur)=\"onTouched()\"\n (change)=\"onChanged($event)\"\n />\n <div class=\"odx-switch__track\">\n <div class=\"odx-switch__thumb\">\n <odx-icon class=\"odx-switch__icon\" iconSet=\"core\" [name]=\"checked ? 'check' : 'close'\" />\n </div>\n </div>\n <div class=\"odx-switch__content\">\n <ng-content />\n @if (isRequired) {\n <span class=\"odx-switch__required\">*</span>\n }\n </div>\n</label>\n" }]
|
|
34
34
|
}] });
|
|
35
35
|
|
|
36
36
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"odx-angular-components-switch.mjs","sources":["../../../../libs/angular/components/switch/src/lib/switch.component.ts","../../../../libs/angular/components/switch/src/lib/switch.component.html","../../../../libs/angular/components/switch/src/lib/switch.validator.ts","../../../../libs/angular/components/switch/src/lib/switch.module.ts","../../../../libs/angular/components/switch/src/odx-angular-components-switch.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\nimport { ReadonlyController, WithDisabledState } from '@odx/angular';\nimport { CheckBoxControl } from '@odx/angular/cdk/checkbox-control';\nimport { ControlDirective } from '@odx/angular/cdk/custom-form-control';\nimport { IconComponent } from '@odx/angular/components/icon';\nimport { CSSComponent } from '@odx/angular/internal';\n\n/**\n * SwitchComponent provides a custom switch (toggle) control that can be used within forms\n * or standalone for toggling a specific binary state. It supports readonly and disabled states,\n * and integrates seamlessly with Angular's form controls for data binding and state management.\n * Has host directives for disabled state handling.\n * Extends CheckBoxControl to provide additional behavior.\n *\n * @see {WithDisabledState}\n * @see {CheckBoxControl}\n */\n@CSSComponent('switch')\n@Component({\n standalone: true,\n selector: 'odx-switch',\n templateUrl: 'switch.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [ControlDirective, IconComponent],\n providers: [ReadonlyController.connect()],\n hostDirectives: [WithDisabledState],\n host: {\n '[class.is-active]': 'checked',\n },\n})\nexport class SwitchComponent extends CheckBoxControl {}\n","<label class=\"odx-switch__label\">\n <input\n odxControl\n class=\"odx-switch__input\"\n [attr.aria-checked]=\"ariaChecked\"\n [attr.aria-invalid]=\"hasError || null\"\n [attr.aria-readonly]=\"isReadonly || null\"\n [attr.aria-required]=\"isRequired || null\"\n [attr.tabindex]=\"tabindex || null\"\n [checked]=\"checked\"\n [disabled]=\"isDisabled || isReadonly\"\n [name]=\"name\"\n [readonly]=\"isReadonly\"\n [value]=\"value\"\n type=\"checkbox\"\n (blur)=\"onTouched()\"\n (change)=\"onChanged($event)\"\n />\n <odx-icon class=\"odx-
|
|
1
|
+
{"version":3,"file":"odx-angular-components-switch.mjs","sources":["../../../../libs/angular/components/switch/src/lib/switch.component.ts","../../../../libs/angular/components/switch/src/lib/switch.component.html","../../../../libs/angular/components/switch/src/lib/switch.validator.ts","../../../../libs/angular/components/switch/src/lib/switch.module.ts","../../../../libs/angular/components/switch/src/odx-angular-components-switch.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\nimport { ReadonlyController, WithDisabledState } from '@odx/angular';\nimport { CheckBoxControl } from '@odx/angular/cdk/checkbox-control';\nimport { ControlDirective } from '@odx/angular/cdk/custom-form-control';\nimport { IconComponent } from '@odx/angular/components/icon';\nimport { CSSComponent } from '@odx/angular/internal';\n\n/**\n * SwitchComponent provides a custom switch (toggle) control that can be used within forms\n * or standalone for toggling a specific binary state. It supports readonly and disabled states,\n * and integrates seamlessly with Angular's form controls for data binding and state management.\n * Has host directives for disabled state handling.\n * Extends CheckBoxControl to provide additional behavior.\n *\n * @see {WithDisabledState}\n * @see {CheckBoxControl}\n */\n@CSSComponent('switch')\n@Component({\n standalone: true,\n selector: 'odx-switch',\n templateUrl: 'switch.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [ControlDirective, IconComponent],\n providers: [ReadonlyController.connect()],\n hostDirectives: [WithDisabledState],\n host: {\n '[class.is-active]': 'checked',\n },\n})\nexport class SwitchComponent extends CheckBoxControl {}\n","<label class=\"odx-switch__label\">\n <input\n odxControl\n class=\"odx-switch__input\"\n [attr.aria-checked]=\"ariaChecked\"\n [attr.aria-invalid]=\"hasError || null\"\n [attr.aria-readonly]=\"isReadonly || null\"\n [attr.aria-required]=\"isRequired || null\"\n [attr.tabindex]=\"tabindex || null\"\n [checked]=\"checked\"\n [disabled]=\"isDisabled || isReadonly\"\n [name]=\"name\"\n [readonly]=\"isReadonly\"\n [value]=\"value\"\n type=\"checkbox\"\n (blur)=\"onTouched()\"\n (change)=\"onChanged($event)\"\n />\n <div class=\"odx-switch__track\">\n <div class=\"odx-switch__thumb\">\n <odx-icon class=\"odx-switch__icon\" iconSet=\"core\" [name]=\"checked ? 'check' : 'close'\" />\n </div>\n </div>\n <div class=\"odx-switch__content\">\n <ng-content />\n @if (isRequired) {\n <span class=\"odx-switch__required\">*</span>\n }\n </div>\n</label>\n","import { Directive, forwardRef } from '@angular/core';\nimport { CheckboxRequiredValidator, NG_VALIDATORS } from '@angular/forms';\n\n/**\n * SwitchValidator extends CheckboxRequiredValidator to provide required field validation\n * for switch components used within Angular forms. It ensures that the switch is marked as required\n * and must be toggled (checked) to meet form validation criteria.\n *\n * This directive automatically attaches itself to any switch component with a 'required' attribute\n * and a form control binding (formControlName, formControl, or ngModel).\n *\n * Extends CheckboxRequiredValidator.\n *\n * @see {CheckboxRequiredValidator}\n */\n@Directive({\n standalone: true,\n selector: 'odx-switch[required][formControlName], odx-switch[required][formControl], odx-switch[required][ngModel]',\n providers: [\n {\n provide: NG_VALIDATORS,\n useExisting: forwardRef(() => SwitchValidator),\n multi: true,\n },\n ],\n})\nexport class SwitchValidator extends CheckboxRequiredValidator {}\n","import { NgModule } from '@angular/core';\nimport { CoreModule } from '@odx/angular';\nimport { SwitchComponent } from './switch.component';\nimport { SwitchValidator } from './switch.validator';\n\nconst modules = [SwitchComponent, SwitchValidator];\n\n@NgModule({\n imports: modules,\n exports: [CoreModule, ...modules],\n})\nexport class SwitchModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@odx/angular",
|
|
3
|
-
"version": "12.
|
|
3
|
+
"version": "12.19.0",
|
|
4
4
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"peerDependencies": {
|
|
@@ -316,18 +316,18 @@
|
|
|
316
316
|
"esm": "./esm2022/components/header-navigation/odx-angular-components-header-navigation.mjs",
|
|
317
317
|
"default": "./fesm2022/odx-angular-components-header-navigation.mjs"
|
|
318
318
|
},
|
|
319
|
-
"./components/inline-message": {
|
|
320
|
-
"types": "./components/inline-message/index.d.ts",
|
|
321
|
-
"esm2022": "./esm2022/components/inline-message/odx-angular-components-inline-message.mjs",
|
|
322
|
-
"esm": "./esm2022/components/inline-message/odx-angular-components-inline-message.mjs",
|
|
323
|
-
"default": "./fesm2022/odx-angular-components-inline-message.mjs"
|
|
324
|
-
},
|
|
325
319
|
"./components/icon": {
|
|
326
320
|
"types": "./components/icon/index.d.ts",
|
|
327
321
|
"esm2022": "./esm2022/components/icon/odx-angular-components-icon.mjs",
|
|
328
322
|
"esm": "./esm2022/components/icon/odx-angular-components-icon.mjs",
|
|
329
323
|
"default": "./fesm2022/odx-angular-components-icon.mjs"
|
|
330
324
|
},
|
|
325
|
+
"./components/inline-message": {
|
|
326
|
+
"types": "./components/inline-message/index.d.ts",
|
|
327
|
+
"esm2022": "./esm2022/components/inline-message/odx-angular-components-inline-message.mjs",
|
|
328
|
+
"esm": "./esm2022/components/inline-message/odx-angular-components-inline-message.mjs",
|
|
329
|
+
"default": "./fesm2022/odx-angular-components-inline-message.mjs"
|
|
330
|
+
},
|
|
331
331
|
"./components/link": {
|
|
332
332
|
"types": "./components/link/index.d.ts",
|
|
333
333
|
"esm2022": "./esm2022/components/link/odx-angular-components-link.mjs",
|