pdm-ui-kit 0.1.17 → 0.1.18
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/esm2020/lib/components/switch/switch.component.mjs +31 -8
- package/fesm2015/pdm-ui-kit.mjs +30 -7
- package/fesm2015/pdm-ui-kit.mjs.map +1 -1
- package/fesm2020/pdm-ui-kit.mjs +30 -7
- package/fesm2020/pdm-ui-kit.mjs.map +1 -1
- package/lib/components/switch/switch.component.d.ts +9 -3
- package/package.json +1 -1
|
@@ -2,24 +2,45 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
|
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
import * as i1 from "@angular/common";
|
|
4
4
|
export class PdmSwitchComponent {
|
|
5
|
-
constructor() {
|
|
5
|
+
constructor(cdr) {
|
|
6
|
+
this.cdr = cdr;
|
|
6
7
|
this.id = '';
|
|
7
8
|
this.checked = false;
|
|
8
9
|
this.disabled = false;
|
|
9
10
|
this.label = '';
|
|
10
11
|
this.className = '';
|
|
12
|
+
this.size = 'default';
|
|
11
13
|
this.checkedChange = new EventEmitter();
|
|
12
14
|
}
|
|
13
|
-
|
|
14
|
-
|
|
15
|
+
get rootClasses() {
|
|
16
|
+
return [
|
|
17
|
+
'peer relative inline-flex shrink-0 items-center rounded-full border border-transparent outline-none transition-all focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50',
|
|
18
|
+
this.size === 'sm' ? 'h-[14px] w-[24px]' : 'h-[18.4px] w-[32px]',
|
|
19
|
+
this.checked ? 'bg-primary' : 'bg-input dark:bg-input/80'
|
|
20
|
+
];
|
|
21
|
+
}
|
|
22
|
+
get thumbClasses() {
|
|
23
|
+
return [
|
|
24
|
+
'pointer-events-none block rounded-full bg-background ring-0 transition-transform',
|
|
25
|
+
this.size === 'sm' ? 'size-3' : 'size-4',
|
|
26
|
+
this.checked ? 'translate-x-[calc(100%-2px)]' : 'translate-x-0'
|
|
27
|
+
];
|
|
28
|
+
}
|
|
29
|
+
onToggle() {
|
|
30
|
+
if (this.disabled)
|
|
31
|
+
return;
|
|
32
|
+
const next = !this.checked;
|
|
33
|
+
this.checked = next;
|
|
34
|
+
this.checkedChange.emit(next);
|
|
35
|
+
this.cdr.markForCheck();
|
|
15
36
|
}
|
|
16
37
|
}
|
|
17
|
-
PdmSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18
|
-
PdmSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSwitchComponent, selector: "pdm-switch", inputs: { id: "id", checked: "checked", disabled: "disabled", label: "label", className: "className" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<
|
|
38
|
+
PdmSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSwitchComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
39
|
+
PdmSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSwitchComponent, selector: "pdm-switch", inputs: { id: "id", checked: "checked", disabled: "disabled", label: "label", className: "className", size: "size" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<div [ngClass]=\"['flex items-center space-x-2', className]\">\n <button\n type=\"button\"\n role=\"switch\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.data-state]=\"checked ? 'checked' : 'unchecked'\"\n [attr.data-disabled]=\"disabled ? 'true' : 'false'\"\n [attr.data-size]=\"size\"\n [attr.data-slot]=\"'switch'\"\n [attr.value]=\"checked ? 'on' : 'off'\"\n [id]=\"id\"\n [disabled]=\"disabled\"\n [ngClass]=\"rootClasses\"\n (click)=\"onToggle()\"\n >\n <span\n [attr.data-state]=\"checked ? 'checked' : 'unchecked'\"\n [attr.data-slot]=\"'switch-thumb'\"\n [ngClass]=\"thumbClasses\"\n ></span>\n </button>\n <label\n *ngIf=\"label\"\n [attr.for]=\"id\"\n [attr.data-slot]=\"'label'\"\n class=\"flex cursor-pointer items-center gap-2 text-sm leading-none font-medium select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50\"\n (click)=\"onToggle()\"\n >\n {{ label }}\n </label>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
19
40
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSwitchComponent, decorators: [{
|
|
20
41
|
type: Component,
|
|
21
|
-
args: [{ selector: 'pdm-switch', changeDetection: ChangeDetectionStrategy.OnPush, template: "<
|
|
22
|
-
}], propDecorators: { id: [{
|
|
42
|
+
args: [{ selector: 'pdm-switch', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['flex items-center space-x-2', className]\">\n <button\n type=\"button\"\n role=\"switch\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.data-state]=\"checked ? 'checked' : 'unchecked'\"\n [attr.data-disabled]=\"disabled ? 'true' : 'false'\"\n [attr.data-size]=\"size\"\n [attr.data-slot]=\"'switch'\"\n [attr.value]=\"checked ? 'on' : 'off'\"\n [id]=\"id\"\n [disabled]=\"disabled\"\n [ngClass]=\"rootClasses\"\n (click)=\"onToggle()\"\n >\n <span\n [attr.data-state]=\"checked ? 'checked' : 'unchecked'\"\n [attr.data-slot]=\"'switch-thumb'\"\n [ngClass]=\"thumbClasses\"\n ></span>\n </button>\n <label\n *ngIf=\"label\"\n [attr.for]=\"id\"\n [attr.data-slot]=\"'label'\"\n class=\"flex cursor-pointer items-center gap-2 text-sm leading-none font-medium select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50\"\n (click)=\"onToggle()\"\n >\n {{ label }}\n </label>\n</div>\n" }]
|
|
43
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
|
|
23
44
|
type: Input
|
|
24
45
|
}], checked: [{
|
|
25
46
|
type: Input
|
|
@@ -29,7 +50,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
29
50
|
type: Input
|
|
30
51
|
}], className: [{
|
|
31
52
|
type: Input
|
|
53
|
+
}], size: [{
|
|
54
|
+
type: Input
|
|
32
55
|
}], checkedChange: [{
|
|
33
56
|
type: Output
|
|
34
57
|
}] } });
|
|
35
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
58
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3dpdGNoLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9zd2l0Y2gvc3dpdGNoLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9zd2l0Y2gvc3dpdGNoLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBcUIsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFTbkgsTUFBTSxPQUFPLGtCQUFrQjtJQUM3QixZQUE2QixHQUFzQjtRQUF0QixRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQUUxQyxPQUFFLEdBQUcsRUFBRSxDQUFDO1FBQ1IsWUFBTyxHQUFHLEtBQUssQ0FBQztRQUNoQixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ2pCLFVBQUssR0FBRyxFQUFFLENBQUM7UUFDWCxjQUFTLEdBQUcsRUFBRSxDQUFDO1FBQ2YsU0FBSSxHQUFrQixTQUFTLENBQUM7UUFFL0Isa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO0lBVEEsQ0FBQztJQVd2RCxJQUFJLFdBQVc7UUFDYixPQUFPO1lBQ0wsOE9BQThPO1lBQzlPLElBQUksQ0FBQyxJQUFJLEtBQUssSUFBSSxDQUFDLENBQUMsQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDLENBQUMscUJBQXFCO1lBQ2hFLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLFlBQVksQ0FBQyxDQUFDLENBQUMsMkJBQTJCO1NBQzFELENBQUM7SUFDSixDQUFDO0lBRUQsSUFBSSxZQUFZO1FBQ2QsT0FBTztZQUNMLGtGQUFrRjtZQUNsRixJQUFJLENBQUMsSUFBSSxLQUFLLElBQUksQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxRQUFRO1lBQ3hDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLDhCQUE4QixDQUFDLENBQUMsQ0FBQyxlQUFlO1NBQ2hFLENBQUM7SUFDSixDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksSUFBSSxDQUFDLFFBQVE7WUFBRSxPQUFPO1FBQzFCLE1BQU0sSUFBSSxHQUFHLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQztRQUMzQixJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztRQUNwQixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUM5QixJQUFJLENBQUMsR0FBRyxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQzFCLENBQUM7OytHQWxDVSxrQkFBa0I7bUdBQWxCLGtCQUFrQixxTkNUL0Isb2dDQWdDQTsyRkR2QmEsa0JBQWtCO2tCQUw5QixTQUFTOytCQUNFLFlBQVksbUJBRUwsdUJBQXVCLENBQUMsTUFBTTt3R0FLdEMsRUFBRTtzQkFBVixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFFSSxhQUFhO3NCQUF0QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENoYW5nZURldGVjdG9yUmVmLCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5leHBvcnQgdHlwZSBQZG1Td2l0Y2hTaXplID0gJ2RlZmF1bHQnIHwgJ3NtJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncGRtLXN3aXRjaCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9zd2l0Y2guY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxufSlcbmV4cG9ydCBjbGFzcyBQZG1Td2l0Y2hDb21wb25lbnQge1xuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHJlYWRvbmx5IGNkcjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHt9XG5cbiAgQElucHV0KCkgaWQgPSAnJztcbiAgQElucHV0KCkgY2hlY2tlZCA9IGZhbHNlO1xuICBASW5wdXQoKSBkaXNhYmxlZCA9IGZhbHNlO1xuICBASW5wdXQoKSBsYWJlbCA9ICcnO1xuICBASW5wdXQoKSBjbGFzc05hbWUgPSAnJztcbiAgQElucHV0KCkgc2l6ZTogUGRtU3dpdGNoU2l6ZSA9ICdkZWZhdWx0JztcblxuICBAT3V0cHV0KCkgY2hlY2tlZENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcblxuICBnZXQgcm9vdENsYXNzZXMoKTogc3RyaW5nW10ge1xuICAgIHJldHVybiBbXG4gICAgICAncGVlciByZWxhdGl2ZSBpbmxpbmUtZmxleCBzaHJpbmstMCBpdGVtcy1jZW50ZXIgcm91bmRlZC1mdWxsIGJvcmRlciBib3JkZXItdHJhbnNwYXJlbnQgb3V0bGluZS1ub25lIHRyYW5zaXRpb24tYWxsIGZvY3VzLXZpc2libGU6Ym9yZGVyLXJpbmcgZm9jdXMtdmlzaWJsZTpyaW5nLTMgZm9jdXMtdmlzaWJsZTpyaW5nLXJpbmcvNTAgZGlzYWJsZWQ6Y3Vyc29yLW5vdC1hbGxvd2VkIGRpc2FibGVkOm9wYWNpdHktNTAnLFxuICAgICAgdGhpcy5zaXplID09PSAnc20nID8gJ2gtWzE0cHhdIHctWzI0cHhdJyA6ICdoLVsxOC40cHhdIHctWzMycHhdJyxcbiAgICAgIHRoaXMuY2hlY2tlZCA/ICdiZy1wcmltYXJ5JyA6ICdiZy1pbnB1dCBkYXJrOmJnLWlucHV0LzgwJ1xuICAgIF07XG4gIH1cblxuICBnZXQgdGh1bWJDbGFzc2VzKCk6IHN0cmluZ1tdIHtcbiAgICByZXR1cm4gW1xuICAgICAgJ3BvaW50ZXItZXZlbnRzLW5vbmUgYmxvY2sgcm91bmRlZC1mdWxsIGJnLWJhY2tncm91bmQgcmluZy0wIHRyYW5zaXRpb24tdHJhbnNmb3JtJyxcbiAgICAgIHRoaXMuc2l6ZSA9PT0gJ3NtJyA/ICdzaXplLTMnIDogJ3NpemUtNCcsXG4gICAgICB0aGlzLmNoZWNrZWQgPyAndHJhbnNsYXRlLXgtW2NhbGMoMTAwJS0ycHgpXScgOiAndHJhbnNsYXRlLXgtMCdcbiAgICBdO1xuICB9XG5cbiAgb25Ub2dnbGUoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuZGlzYWJsZWQpIHJldHVybjtcbiAgICBjb25zdCBuZXh0ID0gIXRoaXMuY2hlY2tlZDtcbiAgICB0aGlzLmNoZWNrZWQgPSBuZXh0O1xuICAgIHRoaXMuY2hlY2tlZENoYW5nZS5lbWl0KG5leHQpO1xuICAgIHRoaXMuY2RyLm1hcmtGb3JDaGVjaygpO1xuICB9XG59XG4iLCI8ZGl2IFtuZ0NsYXNzXT1cIlsnZmxleCBpdGVtcy1jZW50ZXIgc3BhY2UteC0yJywgY2xhc3NOYW1lXVwiPlxuICA8YnV0dG9uXG4gICAgdHlwZT1cImJ1dHRvblwiXG4gICAgcm9sZT1cInN3aXRjaFwiXG4gICAgW2F0dHIuYXJpYS1jaGVja2VkXT1cImNoZWNrZWRcIlxuICAgIFthdHRyLmFyaWEtZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgIFthdHRyLmRhdGEtc3RhdGVdPVwiY2hlY2tlZCA/ICdjaGVja2VkJyA6ICd1bmNoZWNrZWQnXCJcbiAgICBbYXR0ci5kYXRhLWRpc2FibGVkXT1cImRpc2FibGVkID8gJ3RydWUnIDogJ2ZhbHNlJ1wiXG4gICAgW2F0dHIuZGF0YS1zaXplXT1cInNpemVcIlxuICAgIFthdHRyLmRhdGEtc2xvdF09XCInc3dpdGNoJ1wiXG4gICAgW2F0dHIudmFsdWVdPVwiY2hlY2tlZCA/ICdvbicgOiAnb2ZmJ1wiXG4gICAgW2lkXT1cImlkXCJcbiAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgIFtuZ0NsYXNzXT1cInJvb3RDbGFzc2VzXCJcbiAgICAoY2xpY2spPVwib25Ub2dnbGUoKVwiXG4gID5cbiAgICA8c3BhblxuICAgICAgW2F0dHIuZGF0YS1zdGF0ZV09XCJjaGVja2VkID8gJ2NoZWNrZWQnIDogJ3VuY2hlY2tlZCdcIlxuICAgICAgW2F0dHIuZGF0YS1zbG90XT1cIidzd2l0Y2gtdGh1bWInXCJcbiAgICAgIFtuZ0NsYXNzXT1cInRodW1iQ2xhc3Nlc1wiXG4gICAgPjwvc3Bhbj5cbiAgPC9idXR0b24+XG4gIDxsYWJlbFxuICAgICpuZ0lmPVwibGFiZWxcIlxuICAgIFthdHRyLmZvcl09XCJpZFwiXG4gICAgW2F0dHIuZGF0YS1zbG90XT1cIidsYWJlbCdcIlxuICAgIGNsYXNzPVwiZmxleCBjdXJzb3ItcG9pbnRlciBpdGVtcy1jZW50ZXIgZ2FwLTIgdGV4dC1zbSBsZWFkaW5nLW5vbmUgZm9udC1tZWRpdW0gc2VsZWN0LW5vbmUgcGVlci1kaXNhYmxlZDpjdXJzb3Itbm90LWFsbG93ZWQgcGVlci1kaXNhYmxlZDpvcGFjaXR5LTUwXCJcbiAgICAoY2xpY2spPVwib25Ub2dnbGUoKVwiXG4gID5cbiAgICB7eyBsYWJlbCB9fVxuICA8L2xhYmVsPlxuPC9kaXY+XG4iXX0=
|
package/fesm2015/pdm-ui-kit.mjs
CHANGED
|
@@ -2700,24 +2700,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
2700
2700
|
}] } });
|
|
2701
2701
|
|
|
2702
2702
|
class PdmSwitchComponent {
|
|
2703
|
-
constructor() {
|
|
2703
|
+
constructor(cdr) {
|
|
2704
|
+
this.cdr = cdr;
|
|
2704
2705
|
this.id = '';
|
|
2705
2706
|
this.checked = false;
|
|
2706
2707
|
this.disabled = false;
|
|
2707
2708
|
this.label = '';
|
|
2708
2709
|
this.className = '';
|
|
2710
|
+
this.size = 'default';
|
|
2709
2711
|
this.checkedChange = new EventEmitter();
|
|
2710
2712
|
}
|
|
2711
|
-
|
|
2712
|
-
|
|
2713
|
+
get rootClasses() {
|
|
2714
|
+
return [
|
|
2715
|
+
'peer relative inline-flex shrink-0 items-center rounded-full border border-transparent outline-none transition-all focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50',
|
|
2716
|
+
this.size === 'sm' ? 'h-[14px] w-[24px]' : 'h-[18.4px] w-[32px]',
|
|
2717
|
+
this.checked ? 'bg-primary' : 'bg-input dark:bg-input/80'
|
|
2718
|
+
];
|
|
2719
|
+
}
|
|
2720
|
+
get thumbClasses() {
|
|
2721
|
+
return [
|
|
2722
|
+
'pointer-events-none block rounded-full bg-background ring-0 transition-transform',
|
|
2723
|
+
this.size === 'sm' ? 'size-3' : 'size-4',
|
|
2724
|
+
this.checked ? 'translate-x-[calc(100%-2px)]' : 'translate-x-0'
|
|
2725
|
+
];
|
|
2726
|
+
}
|
|
2727
|
+
onToggle() {
|
|
2728
|
+
if (this.disabled)
|
|
2729
|
+
return;
|
|
2730
|
+
const next = !this.checked;
|
|
2731
|
+
this.checked = next;
|
|
2732
|
+
this.checkedChange.emit(next);
|
|
2733
|
+
this.cdr.markForCheck();
|
|
2713
2734
|
}
|
|
2714
2735
|
}
|
|
2715
|
-
PdmSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2716
|
-
PdmSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSwitchComponent, selector: "pdm-switch", inputs: { id: "id", checked: "checked", disabled: "disabled", label: "label", className: "className" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<
|
|
2736
|
+
PdmSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSwitchComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2737
|
+
PdmSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSwitchComponent, selector: "pdm-switch", inputs: { id: "id", checked: "checked", disabled: "disabled", label: "label", className: "className", size: "size" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<div [ngClass]=\"['flex items-center space-x-2', className]\">\n <button\n type=\"button\"\n role=\"switch\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.data-state]=\"checked ? 'checked' : 'unchecked'\"\n [attr.data-disabled]=\"disabled ? 'true' : 'false'\"\n [attr.data-size]=\"size\"\n [attr.data-slot]=\"'switch'\"\n [attr.value]=\"checked ? 'on' : 'off'\"\n [id]=\"id\"\n [disabled]=\"disabled\"\n [ngClass]=\"rootClasses\"\n (click)=\"onToggle()\"\n >\n <span\n [attr.data-state]=\"checked ? 'checked' : 'unchecked'\"\n [attr.data-slot]=\"'switch-thumb'\"\n [ngClass]=\"thumbClasses\"\n ></span>\n </button>\n <label\n *ngIf=\"label\"\n [attr.for]=\"id\"\n [attr.data-slot]=\"'label'\"\n class=\"flex cursor-pointer items-center gap-2 text-sm leading-none font-medium select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50\"\n (click)=\"onToggle()\"\n >\n {{ label }}\n </label>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2717
2738
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSwitchComponent, decorators: [{
|
|
2718
2739
|
type: Component,
|
|
2719
|
-
args: [{ selector: 'pdm-switch', changeDetection: ChangeDetectionStrategy.OnPush, template: "<
|
|
2720
|
-
}], propDecorators: { id: [{
|
|
2740
|
+
args: [{ selector: 'pdm-switch', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['flex items-center space-x-2', className]\">\n <button\n type=\"button\"\n role=\"switch\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-disabled]=\"disabled\"\n [attr.data-state]=\"checked ? 'checked' : 'unchecked'\"\n [attr.data-disabled]=\"disabled ? 'true' : 'false'\"\n [attr.data-size]=\"size\"\n [attr.data-slot]=\"'switch'\"\n [attr.value]=\"checked ? 'on' : 'off'\"\n [id]=\"id\"\n [disabled]=\"disabled\"\n [ngClass]=\"rootClasses\"\n (click)=\"onToggle()\"\n >\n <span\n [attr.data-state]=\"checked ? 'checked' : 'unchecked'\"\n [attr.data-slot]=\"'switch-thumb'\"\n [ngClass]=\"thumbClasses\"\n ></span>\n </button>\n <label\n *ngIf=\"label\"\n [attr.for]=\"id\"\n [attr.data-slot]=\"'label'\"\n class=\"flex cursor-pointer items-center gap-2 text-sm leading-none font-medium select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50\"\n (click)=\"onToggle()\"\n >\n {{ label }}\n </label>\n</div>\n" }]
|
|
2741
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
|
|
2721
2742
|
type: Input
|
|
2722
2743
|
}], checked: [{
|
|
2723
2744
|
type: Input
|
|
@@ -2727,6 +2748,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
2727
2748
|
type: Input
|
|
2728
2749
|
}], className: [{
|
|
2729
2750
|
type: Input
|
|
2751
|
+
}], size: [{
|
|
2752
|
+
type: Input
|
|
2730
2753
|
}], checkedChange: [{
|
|
2731
2754
|
type: Output
|
|
2732
2755
|
}] } });
|