pdm-ui-kit 0.1.16 → 0.1.18

package/fesm2020/pdm-ui-kit.mjs

@@ -289,6 +289,8 @@ class PdmButtonGroupComponent {
         const groupHorizontalClasses = isGroup && !isVertical && !this.separated
             ? [
                 '[&>*:not(:first-child)]:-ml-px',
+                '[&>pdm-button]:flex',
+                '[&>pdm-button>button]:h-9',
                 '[&>pdm-input]:flex-1',
                 '[&>pdm-input>div]:w-full',
                 '[&>pdm-button>button]:!rounded-none',
@@ -309,6 +311,8 @@ class PdmButtonGroupComponent {
         const groupVerticalClasses = isGroup && isVertical && !this.separated
             ? [
                 '[&>*:not(:first-child)]:-mt-px',
+                '[&>pdm-button]:flex',
+                '[&>pdm-button>button]:h-9',
                 '[&>pdm-button>button]:!rounded-none',
                 '[&>pdm-button:first-child>button]:!rounded-t-md',
                 '[&>pdm-button:last-child>button]:!rounded-b-md',
@@ -366,19 +370,19 @@ class PdmButtonComponent {
         this.className = '';
         this.pressed = new EventEmitter();
         this.toneClassMap = {
-            default: { default: 'border-transparent bg-primary text-primary-foreground', hover: 'border-transparent bg-primary text-primary-foreground opacity-90' },
-            primary: { default: 'border-transparent bg-primary text-primary-foreground', hover: 'border-transparent bg-primary text-primary-foreground opacity-90' },
-            destructive: { default: 'border-transparent bg-destructive text-destructive-foreground', hover: 'border-transparent bg-destructive text-destructive-foreground opacity-90' },
+            default: { default: 'border-primary bg-primary text-primary-foreground', hover: 'border-primary bg-primary text-primary-foreground opacity-90' },
+            primary: { default: 'border-primary bg-primary text-primary-foreground', hover: 'border-primary bg-primary text-primary-foreground opacity-90' },
+            destructive: { default: 'border-border bg-destructive text-destructive-foreground', hover: 'border-border bg-destructive text-destructive-foreground opacity-90' },
             outline: { default: 'border-border bg-background text-foreground', hover: 'border-border bg-muted text-foreground' },
-            subtle: { default: 'border-transparent bg-secondary text-secondary-foreground', hover: 'border-transparent bg-accent text-accent-foreground' },
-            secondary: { default: 'border-transparent bg-secondary text-secondary-foreground', hover: 'border-transparent bg-accent text-accent-foreground' },
-            ghost: { default: 'border-transparent bg-transparent text-foreground', hover: 'border-transparent bg-accent text-accent-foreground' },
-            link: { default: 'border-transparent bg-transparent text-primary', hover: 'border-transparent bg-transparent text-primary underline underline-offset-4' },
-            'with-icon': { default: 'border-transparent bg-primary text-primary-foreground', hover: 'border-transparent bg-primary text-primary-foreground opacity-90' },
+            subtle: { default: 'border-secondary bg-secondary text-secondary-foreground', hover: 'border-accent bg-accent text-accent-foreground' },
+            secondary: { default: 'border-secondary bg-secondary text-secondary-foreground', hover: 'border-accent bg-accent text-accent-foreground' },
+            ghost: { default: 'border-border bg-transparent text-foreground', hover: 'border-border bg-accent text-accent-foreground' },
+            link: { default: 'border-border bg-transparent text-primary', hover: 'border-border bg-transparent text-primary underline underline-offset-4' },
+            'with-icon': { default: 'border-primary bg-primary text-primary-foreground', hover: 'border-primary bg-primary text-primary-foreground opacity-90' },
             icon: { default: 'border-border bg-background text-foreground', hover: 'border-border bg-accent text-accent-foreground' },
             'icon-circle': { default: 'border-border bg-background text-foreground', hover: 'border-border bg-accent text-accent-foreground' },
             rounded: { default: 'border-border bg-background text-foreground', hover: 'border-border bg-accent text-accent-foreground' },
-            loading: { default: 'border-transparent bg-primary text-primary-foreground opacity-70', hover: 'border-transparent bg-primary text-primary-foreground opacity-70' }
+            loading: { default: 'border-primary bg-primary text-primary-foreground opacity-70', hover: 'border-primary bg-primary text-primary-foreground opacity-70' }
         };
     }
     get isDisabled() {
@@ -2690,24 +2694,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class PdmSwitchComponent {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
         this.id = '';
         this.checked = false;
         this.disabled = false;
         this.label = '';
         this.className = '';
+        this.size = 'default';
         this.checkedChange = new EventEmitter();
     }
-    onToggle(event) {
-        this.checkedChange.emit(event.target.checked);
+    get rootClasses() {
+        return [
+            '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',
+            this.size === 'sm' ? 'h-[14px] w-[24px]' : 'h-[18.4px] w-[32px]',
+            this.checked ? 'bg-primary' : 'bg-input dark:bg-input/80'
+        ];
+    }
+    get thumbClasses() {
+        return [
+            'pointer-events-none block rounded-full bg-background ring-0 transition-transform',
+            this.size === 'sm' ? 'size-3' : 'size-4',
+            this.checked ? 'translate-x-[calc(100%-2px)]' : 'translate-x-0'
+        ];
+    }
+    onToggle() {
+        if (this.disabled)
+            return;
+        const next = !this.checked;
+        this.checked = next;
+        this.checkedChange.emit(next);
+        this.cdr.markForCheck();
     }
 }
-PdmSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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: "<label [attr.for]=\"id\" [ngClass]=\"['inline-flex items-center gap-2', className]\">\n  <input\n    [id]=\"id\"\n    type=\"checkbox\"\n    class=\"peer sr-only\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    (change)=\"onToggle($event)\"\n  />\n  <span class=\"relative inline-flex h-6 w-11 items-center rounded-full border border-transparent bg-muted transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background peer-disabled:opacity-50 peer-checked:bg-primary\">\n    <span class=\"h-5 w-5 translate-x-0.5 rounded-full bg-background shadow-sm transition-transform peer-checked:translate-x-5\"></span>\n  </span>\n  <span *ngIf=\"label\" class=\"text-sm text-foreground\">{{ label }}</span>\n</label>\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 });
+PdmSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSwitchComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-switch', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"id\" [ngClass]=\"['inline-flex items-center gap-2', className]\">\n  <input\n    [id]=\"id\"\n    type=\"checkbox\"\n    class=\"peer sr-only\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    (change)=\"onToggle($event)\"\n  />\n  <span class=\"relative inline-flex h-6 w-11 items-center rounded-full border border-transparent bg-muted transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background peer-disabled:opacity-50 peer-checked:bg-primary\">\n    <span class=\"h-5 w-5 translate-x-0.5 rounded-full bg-background shadow-sm transition-transform peer-checked:translate-x-5\"></span>\n  </span>\n  <span *ngIf=\"label\" class=\"text-sm text-foreground\">{{ label }}</span>\n</label>\n" }]
-        }], propDecorators: { id: [{
+            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" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
                 type: Input
             }], checked: [{
                 type: Input
@@ -2717,6 +2742,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], className: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], checkedChange: [{
                 type: Output
             }] } });