pdm-ui-kit 0.1.14 → 0.1.16

package/fesm2020/pdm-ui-kit.mjs

@@ -260,35 +260,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 class PdmButtonGroupComponent {
     constructor() {
         this.variant = 'default';
-        this.direction = 'horizontal';
         this.separated = true;
         this.className = '';
     }
     get rootClasses() {
-        const isVertical = this.variant === 'orientation' || this.direction === 'vertical';
-        const isAttached = this.variant !== 'default' && !this.separated;
+        const effectiveOrientation = this.orientation ?? this.direction ?? 'horizontal';
+        const isVertical = this.variant === 'orientation' || effectiveOrientation === 'vertical';
+        const isGroup = this.variant === 'group';
+        const isAttached = !this.separated && this.variant !== 'default';
         const isSeparator = this.variant === 'separator';
+        const attachedClasses = isAttached && !isGroup
+            ? isVertical
+                ? [
+                    '[&>*]:rounded-none',
+                    '[&>*:first-child]:rounded-t-md',
+                    '[&>*:last-child]:rounded-b-md',
+                    '[&>*:not(:first-child)]:border-t-0',
+                    '[&>*:not(:first-child)]:-mt-px'
+                ].join(' ')
+                : [
+                    '[&>*]:rounded-none',
+                    '[&>*:first-child]:rounded-l-md',
+                    '[&>*:last-child]:rounded-r-md',
+                    '[&>*:not(:first-child)]:border-l-0',
+                    '[&>*:not(:first-child)]:-ml-px'
+                ].join(' ')
+            : '';
+        const groupHorizontalClasses = isGroup && !isVertical && !this.separated
+            ? [
+                '[&>*:not(:first-child)]:-ml-px',
+                '[&>pdm-input]:flex-1',
+                '[&>pdm-input>div]:w-full',
+                '[&>pdm-button>button]:!rounded-none',
+                '[&>pdm-button:first-child>button]:!rounded-l-md',
+                '[&>pdm-button:last-child>button]:!rounded-r-md',
+                '[&>pdm-input>div>input]:!rounded-none',
+                '[&>pdm-input:first-child>div>input]:!rounded-l-md',
+                '[&>pdm-input:last-child>div>input]:!rounded-r-md',
+                '[&>pdm-input-group>div]:!rounded-none',
+                '[&>pdm-input-group:first-child>div]:!rounded-l-md',
+                '[&>pdm-input-group:last-child>div]:!rounded-r-md',
+                '[&>pdm-input>div>input]:bg-background',
+                '[&>pdm-input>div>input]:shadow-none',
+                '[&>pdm-button>button]:rounded-l-none',
+                '[&>pdm-button>button]:shadow-none'
+            ].join(' ')
+            : '';
+        const groupVerticalClasses = isGroup && isVertical && !this.separated
+            ? [
+                '[&>*:not(:first-child)]:-mt-px',
+                '[&>pdm-button>button]:!rounded-none',
+                '[&>pdm-button:first-child>button]:!rounded-t-md',
+                '[&>pdm-button:last-child>button]:!rounded-b-md',
+                '[&>pdm-input>div>input]:!rounded-none',
+                '[&>pdm-input:first-child>div>input]:!rounded-t-md',
+                '[&>pdm-input:last-child>div>input]:!rounded-b-md',
+                '[&>pdm-input-group>div]:!rounded-none',
+                '[&>pdm-input-group:first-child>div]:!rounded-t-md',
+                '[&>pdm-input-group:last-child>div]:!rounded-b-md',
+                '[&>pdm-input>div>input]:bg-background',
+                '[&>pdm-input>div>input]:shadow-none',
+                '[&>pdm-button>button]:shadow-none'
+            ].join(' ')
+            : '';
         return [
             'inline-flex w-fit',
             isVertical ? 'flex-col items-stretch' : 'items-center',
             this.variant === 'default' || this.separated ? 'gap-2' : 'gap-0',
-            isAttached
-                ? isVertical
-                    ? [
-                        '[&>*]:rounded-none',
-                        '[&>*:first-child]:rounded-t-md',
-                        '[&>*:last-child]:rounded-b-md',
-                        '[&>*:not(:first-child)]:border-t-0',
-                        '[&>*:not(:first-child)]:-mt-px'
-                    ].join(' ')
-                    : [
-                        '[&>*]:rounded-none',
-                        '[&>*:first-child]:rounded-l-md',
-                        '[&>*:last-child]:rounded-r-md',
-                        '[&>*:not(:first-child)]:border-l-0',
-                        '[&>*:not(:first-child)]:-ml-px'
-                    ].join(' ')
-                : '',
+            isGroup ? '*:focus-visible:relative *:focus-visible:z-10' : '',
+            attachedClasses,
+            groupHorizontalClasses,
+            groupVerticalClasses,
             isSeparator
                 ? 'overflow-hidden rounded-md border border-border bg-secondary shadow-sm'
                 : '',
@@ -297,12 +339,14 @@ class PdmButtonGroupComponent {
     }
 }
 PdmButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmButtonGroupComponent, selector: "pdm-button-group", inputs: { variant: "variant", direction: "direction", separated: "separated", className: "className" }, ngImport: i0, template: "<div\n  role=\"group\"\n  [attr.aria-orientation]=\"variant === 'orientation' || direction === 'vertical' ? 'vertical' : 'horizontal'\"\n  [ngClass]=\"rootClasses\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmButtonGroupComponent, selector: "pdm-button-group", inputs: { variant: "variant", orientation: "orientation", direction: "direction", separated: "separated", className: "className" }, ngImport: i0, template: "<div\n  role=\"group\"\n  [attr.aria-orientation]=\"variant === 'orientation' || orientation === 'vertical' || direction === 'vertical' ? 'vertical' : 'horizontal'\"\n  [ngClass]=\"rootClasses\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmButtonGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-button-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  role=\"group\"\n  [attr.aria-orientation]=\"variant === 'orientation' || direction === 'vertical' ? 'vertical' : 'horizontal'\"\n  [ngClass]=\"rootClasses\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
+            args: [{ selector: 'pdm-button-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  role=\"group\"\n  [attr.aria-orientation]=\"variant === 'orientation' || orientation === 'vertical' || direction === 'vertical' ? 'vertical' : 'horizontal'\"\n  [ngClass]=\"rootClasses\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { variant: [{
                 type: Input
+            }], orientation: [{
+                type: Input
             }], direction: [{
                 type: Input
             }], separated: [{
@@ -322,19 +366,19 @@ class PdmButtonComponent {
         this.className = '';
         this.pressed = new EventEmitter();
         this.toneClassMap = {
-            default: { default: 'bg-primary text-primary-foreground', hover: 'bg-primary text-primary-foreground opacity-90' },
-            primary: { default: 'bg-primary text-primary-foreground', hover: 'bg-primary text-primary-foreground opacity-90' },
-            destructive: { default: 'bg-destructive text-destructive-foreground', hover: 'bg-destructive text-destructive-foreground opacity-90' },
-            outline: { default: 'border border-border bg-background text-foreground', hover: 'border border-border bg-muted text-foreground' },
-            subtle: { default: 'bg-secondary text-secondary-foreground', hover: 'bg-accent text-accent-foreground' },
-            secondary: { default: 'bg-secondary text-secondary-foreground', hover: 'bg-accent text-accent-foreground' },
-            ghost: { default: 'bg-transparent text-foreground', hover: 'bg-accent text-accent-foreground' },
-            link: { default: 'bg-transparent text-primary', hover: 'bg-transparent text-primary underline underline-offset-4' },
-            'with-icon': { default: 'bg-primary text-primary-foreground', hover: 'bg-primary text-primary-foreground opacity-90' },
-            icon: { default: 'border border-input bg-background text-foreground', hover: 'border border-input bg-accent text-accent-foreground' },
-            'icon-circle': { default: 'border border-input bg-background text-foreground', hover: 'border border-input bg-accent text-accent-foreground' },
-            rounded: { default: 'border border-input bg-background text-foreground', hover: 'border border-input bg-accent text-accent-foreground' },
-            loading: { default: 'bg-primary text-primary-foreground opacity-70', hover: 'bg-primary text-primary-foreground opacity-70' }
+            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' },
+            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' },
+            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' }
         };
     }
     get isDisabled() {
@@ -344,7 +388,7 @@ class PdmButtonComponent {
         const currentState = this.state === 'hover' ? 'hover' : 'default';
         const toneClass = this.toneClassMap[this.variant][currentState];
         return [
-            'inline-flex items-center justify-center gap-2 rounded-md border border-transparent text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-clip-padding',
+            'inline-flex items-center justify-center gap-2 rounded-md border text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-clip-padding',
             this.variant === 'link' ? 'px-4 py-2 h-9' : '',
             this.variant === 'icon' ? 'h-9 w-9 p-0' : '',
             this.variant === 'icon-circle' ? 'h-10 w-10 rounded-full p-0' : '',
@@ -2692,7 +2736,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class PdmTabsComponent {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
         this.items = [];
         this.value = '';
         this.className = '';
@@ -2700,16 +2745,18 @@ class PdmTabsComponent {
     }
     select(item) {
         if (!item.disabled) {
+            this.value = item.value;
             this.valueChange.emit(item.value);
+            this.cdr.markForCheck();
         }
     }
 }
-PdmTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PdmTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTabsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 PdmTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmTabsComponent, selector: "pdm-tabs", inputs: { items: "items", value: "value", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [ngClass]=\"['w-full', className]\">\n  <div role=\"tablist\" class=\"inline-flex h-8 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground\">\n    <button\n      *ngFor=\"let item of items\"\n      role=\"tab\"\n      [attr.aria-selected]=\"value === item.value\"\n      [disabled]=\"item.disabled\"\n      [ngClass]=\"[\n        'relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium transition-all focus-visible:border-ring focus-visible:outline-none focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50',\n        value === item.value ? 'bg-background text-foreground shadow-sm' : 'bg-transparent text-muted-foreground'\n      ]\"\n      (click)=\"select(item)\"\n      type=\"button\"\n    >\n      {{ item.label }}\n    </button>\n  </div>\n  <div class=\"mt-4\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pdm-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['w-full', className]\">\n  <div role=\"tablist\" class=\"inline-flex h-8 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground\">\n    <button\n      *ngFor=\"let item of items\"\n      role=\"tab\"\n      [attr.aria-selected]=\"value === item.value\"\n      [disabled]=\"item.disabled\"\n      [ngClass]=\"[\n        'relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium transition-all focus-visible:border-ring focus-visible:outline-none focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50',\n        value === item.value ? 'bg-background text-foreground shadow-sm' : 'bg-transparent text-muted-foreground'\n      ]\"\n      (click)=\"select(item)\"\n      type=\"button\"\n    >\n      {{ item.label }}\n    </button>\n  </div>\n  <div class=\"mt-4\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
-        }], propDecorators: { items: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
                 type: Input
             }], value: [{
                 type: Input