pdm-ui-kit 0.3.1 → 0.3.2
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 +13 -13
- package/fesm2015/pdm-ui-kit.mjs +11 -11
- package/fesm2015/pdm-ui-kit.mjs.map +1 -1
- package/fesm2020/pdm-ui-kit.mjs +11 -11
- package/fesm2020/pdm-ui-kit.mjs.map +1 -1
- package/lib/components/switch/switch.component.d.ts +2 -2
- package/package.json +1 -1
package/fesm2020/pdm-ui-kit.mjs
CHANGED
|
@@ -6063,26 +6063,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
6063
6063
|
class PdmSwitchComponent {
|
|
6064
6064
|
constructor(cdr) {
|
|
6065
6065
|
this.cdr = cdr;
|
|
6066
|
-
this.id =
|
|
6066
|
+
this.id = "";
|
|
6067
6067
|
this.checked = false;
|
|
6068
6068
|
this.disabled = false;
|
|
6069
|
-
this.label =
|
|
6070
|
-
this.className =
|
|
6071
|
-
this.size =
|
|
6069
|
+
this.label = "";
|
|
6070
|
+
this.className = "";
|
|
6071
|
+
this.size = "default";
|
|
6072
6072
|
this.checkedChange = new EventEmitter();
|
|
6073
6073
|
}
|
|
6074
6074
|
get rootClasses() {
|
|
6075
6075
|
return [
|
|
6076
|
-
|
|
6077
|
-
this.size ===
|
|
6078
|
-
this.checked ?
|
|
6076
|
+
"peer relative inline-flex appearance-none 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",
|
|
6077
|
+
this.size === "sm" ? "h-[14px] w-[24px]" : "h-[18.4px] w-[32px]",
|
|
6078
|
+
this.checked ? "bg-primary" : "bg-input dark:bg-input/80",
|
|
6079
6079
|
];
|
|
6080
6080
|
}
|
|
6081
6081
|
get thumbClasses() {
|
|
6082
6082
|
return [
|
|
6083
|
-
|
|
6084
|
-
this.size ===
|
|
6085
|
-
this.checked ?
|
|
6083
|
+
"pointer-events-none self-center block rounded-full bg-background ring-0 transition-transform",
|
|
6084
|
+
this.size === "sm" ? "size-3" : "size-4",
|
|
6085
|
+
this.checked ? "translate-x-[calc(100%-2px)]" : "translate-x-0",
|
|
6086
6086
|
];
|
|
6087
6087
|
}
|
|
6088
6088
|
onToggle() {
|
|
@@ -6098,7 +6098,7 @@ PdmSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
|
|
|
6098
6098
|
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 });
|
|
6099
6099
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSwitchComponent, decorators: [{
|
|
6100
6100
|
type: Component,
|
|
6101
|
-
args: [{ selector:
|
|
6101
|
+
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" }]
|
|
6102
6102
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
|
|
6103
6103
|
type: Input
|
|
6104
6104
|
}], checked: [{
|