pdm-ui-kit 0.1.15 → 0.1.16
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/button-group/button-group.component.mjs +67 -23
- package/fesm2015/pdm-ui-kit.mjs +67 -22
- package/fesm2015/pdm-ui-kit.mjs.map +1 -1
- package/fesm2020/pdm-ui-kit.mjs +66 -22
- package/fesm2020/pdm-ui-kit.mjs.map +1 -1
- package/lib/components/button-group/button-group.component.d.ts +4 -3
- package/package.json +1 -1
|
@@ -4,35 +4,77 @@ import * as i1 from "@angular/common";
|
|
|
4
4
|
export class PdmButtonGroupComponent {
|
|
5
5
|
constructor() {
|
|
6
6
|
this.variant = 'default';
|
|
7
|
-
this.direction = 'horizontal';
|
|
8
7
|
this.separated = true;
|
|
9
8
|
this.className = '';
|
|
10
9
|
}
|
|
11
10
|
get rootClasses() {
|
|
12
|
-
const
|
|
13
|
-
const
|
|
11
|
+
const effectiveOrientation = this.orientation ?? this.direction ?? 'horizontal';
|
|
12
|
+
const isVertical = this.variant === 'orientation' || effectiveOrientation === 'vertical';
|
|
13
|
+
const isGroup = this.variant === 'group';
|
|
14
|
+
const isAttached = !this.separated && this.variant !== 'default';
|
|
14
15
|
const isSeparator = this.variant === 'separator';
|
|
16
|
+
const attachedClasses = isAttached && !isGroup
|
|
17
|
+
? isVertical
|
|
18
|
+
? [
|
|
19
|
+
'[&>*]:rounded-none',
|
|
20
|
+
'[&>*:first-child]:rounded-t-md',
|
|
21
|
+
'[&>*:last-child]:rounded-b-md',
|
|
22
|
+
'[&>*:not(:first-child)]:border-t-0',
|
|
23
|
+
'[&>*:not(:first-child)]:-mt-px'
|
|
24
|
+
].join(' ')
|
|
25
|
+
: [
|
|
26
|
+
'[&>*]:rounded-none',
|
|
27
|
+
'[&>*:first-child]:rounded-l-md',
|
|
28
|
+
'[&>*:last-child]:rounded-r-md',
|
|
29
|
+
'[&>*:not(:first-child)]:border-l-0',
|
|
30
|
+
'[&>*:not(:first-child)]:-ml-px'
|
|
31
|
+
].join(' ')
|
|
32
|
+
: '';
|
|
33
|
+
const groupHorizontalClasses = isGroup && !isVertical && !this.separated
|
|
34
|
+
? [
|
|
35
|
+
'[&>*:not(:first-child)]:-ml-px',
|
|
36
|
+
'[&>pdm-input]:flex-1',
|
|
37
|
+
'[&>pdm-input>div]:w-full',
|
|
38
|
+
'[&>pdm-button>button]:!rounded-none',
|
|
39
|
+
'[&>pdm-button:first-child>button]:!rounded-l-md',
|
|
40
|
+
'[&>pdm-button:last-child>button]:!rounded-r-md',
|
|
41
|
+
'[&>pdm-input>div>input]:!rounded-none',
|
|
42
|
+
'[&>pdm-input:first-child>div>input]:!rounded-l-md',
|
|
43
|
+
'[&>pdm-input:last-child>div>input]:!rounded-r-md',
|
|
44
|
+
'[&>pdm-input-group>div]:!rounded-none',
|
|
45
|
+
'[&>pdm-input-group:first-child>div]:!rounded-l-md',
|
|
46
|
+
'[&>pdm-input-group:last-child>div]:!rounded-r-md',
|
|
47
|
+
'[&>pdm-input>div>input]:bg-background',
|
|
48
|
+
'[&>pdm-input>div>input]:shadow-none',
|
|
49
|
+
'[&>pdm-button>button]:rounded-l-none',
|
|
50
|
+
'[&>pdm-button>button]:shadow-none'
|
|
51
|
+
].join(' ')
|
|
52
|
+
: '';
|
|
53
|
+
const groupVerticalClasses = isGroup && isVertical && !this.separated
|
|
54
|
+
? [
|
|
55
|
+
'[&>*:not(:first-child)]:-mt-px',
|
|
56
|
+
'[&>pdm-button>button]:!rounded-none',
|
|
57
|
+
'[&>pdm-button:first-child>button]:!rounded-t-md',
|
|
58
|
+
'[&>pdm-button:last-child>button]:!rounded-b-md',
|
|
59
|
+
'[&>pdm-input>div>input]:!rounded-none',
|
|
60
|
+
'[&>pdm-input:first-child>div>input]:!rounded-t-md',
|
|
61
|
+
'[&>pdm-input:last-child>div>input]:!rounded-b-md',
|
|
62
|
+
'[&>pdm-input-group>div]:!rounded-none',
|
|
63
|
+
'[&>pdm-input-group:first-child>div]:!rounded-t-md',
|
|
64
|
+
'[&>pdm-input-group:last-child>div]:!rounded-b-md',
|
|
65
|
+
'[&>pdm-input>div>input]:bg-background',
|
|
66
|
+
'[&>pdm-input>div>input]:shadow-none',
|
|
67
|
+
'[&>pdm-button>button]:shadow-none'
|
|
68
|
+
].join(' ')
|
|
69
|
+
: '';
|
|
15
70
|
return [
|
|
16
71
|
'inline-flex w-fit',
|
|
17
72
|
isVertical ? 'flex-col items-stretch' : 'items-center',
|
|
18
73
|
this.variant === 'default' || this.separated ? 'gap-2' : 'gap-0',
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
'[&>*:first-child]:rounded-t-md',
|
|
24
|
-
'[&>*:last-child]:rounded-b-md',
|
|
25
|
-
'[&>*:not(:first-child)]:border-t-0',
|
|
26
|
-
'[&>*:not(:first-child)]:-mt-px'
|
|
27
|
-
].join(' ')
|
|
28
|
-
: [
|
|
29
|
-
'[&>*]:rounded-none',
|
|
30
|
-
'[&>*:first-child]:rounded-l-md',
|
|
31
|
-
'[&>*:last-child]:rounded-r-md',
|
|
32
|
-
'[&>*:not(:first-child)]:border-l-0',
|
|
33
|
-
'[&>*:not(:first-child)]:-ml-px'
|
|
34
|
-
].join(' ')
|
|
35
|
-
: '',
|
|
74
|
+
isGroup ? '*:focus-visible:relative *:focus-visible:z-10' : '',
|
|
75
|
+
attachedClasses,
|
|
76
|
+
groupHorizontalClasses,
|
|
77
|
+
groupVerticalClasses,
|
|
36
78
|
isSeparator
|
|
37
79
|
? 'overflow-hidden rounded-md border border-border bg-secondary shadow-sm'
|
|
38
80
|
: '',
|
|
@@ -41,12 +83,14 @@ export class PdmButtonGroupComponent {
|
|
|
41
83
|
}
|
|
42
84
|
}
|
|
43
85
|
PdmButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
44
|
-
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 });
|
|
86
|
+
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 });
|
|
45
87
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmButtonGroupComponent, decorators: [{
|
|
46
88
|
type: Component,
|
|
47
|
-
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" }]
|
|
89
|
+
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" }]
|
|
48
90
|
}], propDecorators: { variant: [{
|
|
49
91
|
type: Input
|
|
92
|
+
}], orientation: [{
|
|
93
|
+
type: Input
|
|
50
94
|
}], direction: [{
|
|
51
95
|
type: Input
|
|
52
96
|
}], separated: [{
|
|
@@ -54,4 +98,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
54
98
|
}], className: [{
|
|
55
99
|
type: Input
|
|
56
100
|
}] } });
|
|
57
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
101
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLWdyb3VwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9idXR0b24tZ3JvdXAvYnV0dG9uLWdyb3VwLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9idXR0b24tZ3JvdXAvYnV0dG9uLWdyb3VwLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFVMUUsTUFBTSxPQUFPLHVCQUF1QjtJQUxwQztRQU1XLFlBQU8sR0FBMEIsU0FBUyxDQUFDO1FBRzNDLGNBQVMsR0FBRyxJQUFJLENBQUM7UUFDakIsY0FBUyxHQUFHLEVBQUUsQ0FBQztLQWdGekI7SUE5RUMsSUFBSSxXQUFXO1FBQ2IsTUFBTSxvQkFBb0IsR0FBRyxJQUFJLENBQUMsV0FBVyxJQUFJLElBQUksQ0FBQyxTQUFTLElBQUksWUFBWSxDQUFDO1FBQ2hGLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxPQUFPLEtBQUssYUFBYSxJQUFJLG9CQUFvQixLQUFLLFVBQVUsQ0FBQztRQUN6RixNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsT0FBTyxLQUFLLE9BQU8sQ0FBQztRQUN6QyxNQUFNLFVBQVUsR0FBRyxDQUFDLElBQUksQ0FBQyxTQUFTLElBQUksSUFBSSxDQUFDLE9BQU8sS0FBSyxTQUFTLENBQUM7UUFDakUsTUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLE9BQU8sS0FBSyxXQUFXLENBQUM7UUFFakQsTUFBTSxlQUFlLEdBQUcsVUFBVSxJQUFJLENBQUMsT0FBTztZQUM1QyxDQUFDLENBQUMsVUFBVTtnQkFDVixDQUFDLENBQUM7b0JBQ0Usb0JBQW9CO29CQUNwQixnQ0FBZ0M7b0JBQ2hDLCtCQUErQjtvQkFDL0Isb0NBQW9DO29CQUNwQyxnQ0FBZ0M7aUJBQ2pDLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQztnQkFDYixDQUFDLENBQUM7b0JBQ0Usb0JBQW9CO29CQUNwQixnQ0FBZ0M7b0JBQ2hDLCtCQUErQjtvQkFDL0Isb0NBQW9DO29CQUNwQyxnQ0FBZ0M7aUJBQ2pDLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQztZQUNmLENBQUMsQ0FBQyxFQUFFLENBQUM7UUFFUCxNQUFNLHNCQUFzQixHQUFHLE9BQU8sSUFBSSxDQUFDLFVBQVUsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTO1lBQ3RFLENBQUMsQ0FBQztnQkFDRSxnQ0FBZ0M7Z0JBQ2hDLHNCQUFzQjtnQkFDdEIsMEJBQTBCO2dCQUMxQixxQ0FBcUM7Z0JBQ3JDLGlEQUFpRDtnQkFDakQsZ0RBQWdEO2dCQUNoRCx1Q0FBdUM7Z0JBQ3ZDLG1EQUFtRDtnQkFDbkQsa0RBQWtEO2dCQUNsRCx1Q0FBdUM7Z0JBQ3ZDLG1EQUFtRDtnQkFDbkQsa0RBQWtEO2dCQUNsRCx1Q0FBdUM7Z0JBQ3ZDLHFDQUFxQztnQkFDckMsc0NBQXNDO2dCQUN0QyxtQ0FBbUM7YUFDcEMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDO1lBQ2IsQ0FBQyxDQUFDLEVBQUUsQ0FBQztRQUVQLE1BQU0sb0JBQW9CLEdBQUcsT0FBTyxJQUFJLFVBQVUsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTO1lBQ25FLENBQUMsQ0FBQztnQkFDRSxnQ0FBZ0M7Z0JBQ2hDLHFDQUFxQztnQkFDckMsaURBQWlEO2dCQUNqRCxnREFBZ0Q7Z0JBQ2hELHVDQUF1QztnQkFDdkMsbURBQW1EO2dCQUNuRCxrREFBa0Q7Z0JBQ2xELHVDQUF1QztnQkFDdkMsbURBQW1EO2dCQUNuRCxrREFBa0Q7Z0JBQ2xELHVDQUF1QztnQkFDdkMscUNBQXFDO2dCQUNyQyxtQ0FBbUM7YUFDcEMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDO1lBQ2IsQ0FBQyxDQUFDLEVBQUUsQ0FBQztRQUVQLE9BQU87WUFDTCxtQkFBbUI7WUFDbkIsVUFBVSxDQUFDLENBQUMsQ0FBQyx3QkFBd0IsQ0FBQyxDQUFDLENBQUMsY0FBYztZQUN0RCxJQUFJLENBQUMsT0FBTyxLQUFLLFNBQVMsSUFBSSxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLE9BQU87WUFDaEUsT0FBTyxDQUFDLENBQUMsQ0FBQywrQ0FBK0MsQ0FBQyxDQUFDLENBQUMsRUFBRTtZQUM5RCxlQUFlO1lBQ2Ysc0JBQXNCO1lBQ3RCLG9CQUFvQjtZQUNwQixXQUFXO2dCQUNULENBQUMsQ0FBQyx3RUFBd0U7Z0JBQzFFLENBQUMsQ0FBQyxFQUFFO1lBQ04sSUFBSSxDQUFDLFNBQVM7U0FDZixDQUFDO0lBQ0osQ0FBQzs7b0hBcEZVLHVCQUF1Qjt3R0FBdkIsdUJBQXVCLDRMQ1ZwQyw4T0FPQTsyRkRHYSx1QkFBdUI7a0JBTG5DLFNBQVM7K0JBQ0Usa0JBQWtCLG1CQUVYLHVCQUF1QixDQUFDLE1BQU07OEJBR3RDLE9BQU87c0JBQWYsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuZXhwb3J0IHR5cGUgUGRtQnV0dG9uR3JvdXBWYXJpYW50ID0gJ2RlZmF1bHQnIHwgJ2dyb3VwJyB8ICdvcmllbnRhdGlvbicgfCAnc2VwYXJhdG9yJztcbmV4cG9ydCB0eXBlIFBkbUJ1dHRvbkdyb3VwT3JpZW50YXRpb24gPSAnaG9yaXpvbnRhbCcgfCAndmVydGljYWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdwZG0tYnV0dG9uLWdyb3VwJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2J1dHRvbi1ncm91cC5jb21wb25lbnQuaHRtbCcsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIFBkbUJ1dHRvbkdyb3VwQ29tcG9uZW50IHtcbiAgQElucHV0KCkgdmFyaWFudDogUGRtQnV0dG9uR3JvdXBWYXJpYW50ID0gJ2RlZmF1bHQnO1xuICBASW5wdXQoKSBvcmllbnRhdGlvbj86IFBkbUJ1dHRvbkdyb3VwT3JpZW50YXRpb247XG4gIEBJbnB1dCgpIGRpcmVjdGlvbj86IFBkbUJ1dHRvbkdyb3VwT3JpZW50YXRpb247XG4gIEBJbnB1dCgpIHNlcGFyYXRlZCA9IHRydWU7XG4gIEBJbnB1dCgpIGNsYXNzTmFtZSA9ICcnO1xuXG4gIGdldCByb290Q2xhc3NlcygpOiBzdHJpbmdbXSB7XG4gICAgY29uc3QgZWZmZWN0aXZlT3JpZW50YXRpb24gPSB0aGlzLm9yaWVudGF0aW9uID8/IHRoaXMuZGlyZWN0aW9uID8/ICdob3Jpem9udGFsJztcbiAgICBjb25zdCBpc1ZlcnRpY2FsID0gdGhpcy52YXJpYW50ID09PSAnb3JpZW50YXRpb24nIHx8IGVmZmVjdGl2ZU9yaWVudGF0aW9uID09PSAndmVydGljYWwnO1xuICAgIGNvbnN0IGlzR3JvdXAgPSB0aGlzLnZhcmlhbnQgPT09ICdncm91cCc7XG4gICAgY29uc3QgaXNBdHRhY2hlZCA9ICF0aGlzLnNlcGFyYXRlZCAmJiB0aGlzLnZhcmlhbnQgIT09ICdkZWZhdWx0JztcbiAgICBjb25zdCBpc1NlcGFyYXRvciA9IHRoaXMudmFyaWFudCA9PT0gJ3NlcGFyYXRvcic7XG5cbiAgICBjb25zdCBhdHRhY2hlZENsYXNzZXMgPSBpc0F0dGFjaGVkICYmICFpc0dyb3VwXG4gICAgICA/IGlzVmVydGljYWxcbiAgICAgICAgPyBbXG4gICAgICAgICAgICAnWyY+Kl06cm91bmRlZC1ub25lJyxcbiAgICAgICAgICAgICdbJj4qOmZpcnN0LWNoaWxkXTpyb3VuZGVkLXQtbWQnLFxuICAgICAgICAgICAgJ1smPio6bGFzdC1jaGlsZF06cm91bmRlZC1iLW1kJyxcbiAgICAgICAgICAgICdbJj4qOm5vdCg6Zmlyc3QtY2hpbGQpXTpib3JkZXItdC0wJyxcbiAgICAgICAgICAgICdbJj4qOm5vdCg6Zmlyc3QtY2hpbGQpXTotbXQtcHgnXG4gICAgICAgICAgXS5qb2luKCcgJylcbiAgICAgICAgOiBbXG4gICAgICAgICAgICAnWyY+Kl06cm91bmRlZC1ub25lJyxcbiAgICAgICAgICAgICdbJj4qOmZpcnN0LWNoaWxkXTpyb3VuZGVkLWwtbWQnLFxuICAgICAgICAgICAgJ1smPio6bGFzdC1jaGlsZF06cm91bmRlZC1yLW1kJyxcbiAgICAgICAgICAgICdbJj4qOm5vdCg6Zmlyc3QtY2hpbGQpXTpib3JkZXItbC0wJyxcbiAgICAgICAgICAgICdbJj4qOm5vdCg6Zmlyc3QtY2hpbGQpXTotbWwtcHgnXG4gICAgICAgICAgXS5qb2luKCcgJylcbiAgICAgIDogJyc7XG5cbiAgICBjb25zdCBncm91cEhvcml6b250YWxDbGFzc2VzID0gaXNHcm91cCAmJiAhaXNWZXJ0aWNhbCAmJiAhdGhpcy5zZXBhcmF0ZWRcbiAgICAgID8gW1xuICAgICAgICAgICdbJj4qOm5vdCg6Zmlyc3QtY2hpbGQpXTotbWwtcHgnLFxuICAgICAgICAgICdbJj5wZG0taW5wdXRdOmZsZXgtMScsXG4gICAgICAgICAgJ1smPnBkbS1pbnB1dD5kaXZdOnctZnVsbCcsXG4gICAgICAgICAgJ1smPnBkbS1idXR0b24+YnV0dG9uXTohcm91bmRlZC1ub25lJyxcbiAgICAgICAgICAnWyY+cGRtLWJ1dHRvbjpmaXJzdC1jaGlsZD5idXR0b25dOiFyb3VuZGVkLWwtbWQnLFxuICAgICAgICAgICdbJj5wZG0tYnV0dG9uOmxhc3QtY2hpbGQ+YnV0dG9uXTohcm91bmRlZC1yLW1kJyxcbiAgICAgICAgICAnWyY+cGRtLWlucHV0PmRpdj5pbnB1dF06IXJvdW5kZWQtbm9uZScsXG4gICAgICAgICAgJ1smPnBkbS1pbnB1dDpmaXJzdC1jaGlsZD5kaXY+aW5wdXRdOiFyb3VuZGVkLWwtbWQnLFxuICAgICAgICAgICdbJj5wZG0taW5wdXQ6bGFzdC1jaGlsZD5kaXY+aW5wdXRdOiFyb3VuZGVkLXItbWQnLFxuICAgICAgICAgICdbJj5wZG0taW5wdXQtZ3JvdXA+ZGl2XTohcm91bmRlZC1ub25lJyxcbiAgICAgICAgICAnWyY+cGRtLWlucHV0LWdyb3VwOmZpcnN0LWNoaWxkPmRpdl06IXJvdW5kZWQtbC1tZCcsXG4gICAgICAgICAgJ1smPnBkbS1pbnB1dC1ncm91cDpsYXN0LWNoaWxkPmRpdl06IXJvdW5kZWQtci1tZCcsXG4gICAgICAgICAgJ1smPnBkbS1pbnB1dD5kaXY+aW5wdXRdOmJnLWJhY2tncm91bmQnLFxuICAgICAgICAgICdbJj5wZG0taW5wdXQ+ZGl2PmlucHV0XTpzaGFkb3ctbm9uZScsXG4gICAgICAgICAgJ1smPnBkbS1idXR0b24+YnV0dG9uXTpyb3VuZGVkLWwtbm9uZScsXG4gICAgICAgICAgJ1smPnBkbS1idXR0b24+YnV0dG9uXTpzaGFkb3ctbm9uZSdcbiAgICAgICAgXS5qb2luKCcgJylcbiAgICAgIDogJyc7XG5cbiAgICBjb25zdCBncm91cFZlcnRpY2FsQ2xhc3NlcyA9IGlzR3JvdXAgJiYgaXNWZXJ0aWNhbCAmJiAhdGhpcy5zZXBhcmF0ZWRcbiAgICAgID8gW1xuICAgICAgICAgICdbJj4qOm5vdCg6Zmlyc3QtY2hpbGQpXTotbXQtcHgnLFxuICAgICAgICAgICdbJj5wZG0tYnV0dG9uPmJ1dHRvbl06IXJvdW5kZWQtbm9uZScsXG4gICAgICAgICAgJ1smPnBkbS1idXR0b246Zmlyc3QtY2hpbGQ+YnV0dG9uXTohcm91bmRlZC10LW1kJyxcbiAgICAgICAgICAnWyY+cGRtLWJ1dHRvbjpsYXN0LWNoaWxkPmJ1dHRvbl06IXJvdW5kZWQtYi1tZCcsXG4gICAgICAgICAgJ1smPnBkbS1pbnB1dD5kaXY+aW5wdXRdOiFyb3VuZGVkLW5vbmUnLFxuICAgICAgICAgICdbJj5wZG0taW5wdXQ6Zmlyc3QtY2hpbGQ+ZGl2PmlucHV0XTohcm91bmRlZC10LW1kJyxcbiAgICAgICAgICAnWyY+cGRtLWlucHV0Omxhc3QtY2hpbGQ+ZGl2PmlucHV0XTohcm91bmRlZC1iLW1kJyxcbiAgICAgICAgICAnWyY+cGRtLWlucHV0LWdyb3VwPmRpdl06IXJvdW5kZWQtbm9uZScsXG4gICAgICAgICAgJ1smPnBkbS1pbnB1dC1ncm91cDpmaXJzdC1jaGlsZD5kaXZdOiFyb3VuZGVkLXQtbWQnLFxuICAgICAgICAgICdbJj5wZG0taW5wdXQtZ3JvdXA6bGFzdC1jaGlsZD5kaXZdOiFyb3VuZGVkLWItbWQnLFxuICAgICAgICAgICdbJj5wZG0taW5wdXQ+ZGl2PmlucHV0XTpiZy1iYWNrZ3JvdW5kJyxcbiAgICAgICAgICAnWyY+cGRtLWlucHV0PmRpdj5pbnB1dF06c2hhZG93LW5vbmUnLFxuICAgICAgICAgICdbJj5wZG0tYnV0dG9uPmJ1dHRvbl06c2hhZG93LW5vbmUnXG4gICAgICAgIF0uam9pbignICcpXG4gICAgICA6ICcnO1xuXG4gICAgcmV0dXJuIFtcbiAgICAgICdpbmxpbmUtZmxleCB3LWZpdCcsXG4gICAgICBpc1ZlcnRpY2FsID8gJ2ZsZXgtY29sIGl0ZW1zLXN0cmV0Y2gnIDogJ2l0ZW1zLWNlbnRlcicsXG4gICAgICB0aGlzLnZhcmlhbnQgPT09ICdkZWZhdWx0JyB8fCB0aGlzLnNlcGFyYXRlZCA/ICdnYXAtMicgOiAnZ2FwLTAnLFxuICAgICAgaXNHcm91cCA/ICcqOmZvY3VzLXZpc2libGU6cmVsYXRpdmUgKjpmb2N1cy12aXNpYmxlOnotMTAnIDogJycsXG4gICAgICBhdHRhY2hlZENsYXNzZXMsXG4gICAgICBncm91cEhvcml6b250YWxDbGFzc2VzLFxuICAgICAgZ3JvdXBWZXJ0aWNhbENsYXNzZXMsXG4gICAgICBpc1NlcGFyYXRvclxuICAgICAgICA/ICdvdmVyZmxvdy1oaWRkZW4gcm91bmRlZC1tZCBib3JkZXIgYm9yZGVyLWJvcmRlciBiZy1zZWNvbmRhcnkgc2hhZG93LXNtJ1xuICAgICAgICA6ICcnLFxuICAgICAgdGhpcy5jbGFzc05hbWVcbiAgICBdO1xuICB9XG59XG4iLCI8ZGl2XG4gIHJvbGU9XCJncm91cFwiXG4gIFthdHRyLmFyaWEtb3JpZW50YXRpb25dPVwidmFyaWFudCA9PT0gJ29yaWVudGF0aW9uJyB8fCBvcmllbnRhdGlvbiA9PT0gJ3ZlcnRpY2FsJyB8fCBkaXJlY3Rpb24gPT09ICd2ZXJ0aWNhbCcgPyAndmVydGljYWwnIDogJ2hvcml6b250YWwnXCJcbiAgW25nQ2xhc3NdPVwicm9vdENsYXNzZXNcIlxuPlxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L2Rpdj5cbiJdfQ==
|
package/fesm2015/pdm-ui-kit.mjs
CHANGED
|
@@ -261,35 +261,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
261
261
|
class PdmButtonGroupComponent {
|
|
262
262
|
constructor() {
|
|
263
263
|
this.variant = 'default';
|
|
264
|
-
this.direction = 'horizontal';
|
|
265
264
|
this.separated = true;
|
|
266
265
|
this.className = '';
|
|
267
266
|
}
|
|
268
267
|
get rootClasses() {
|
|
269
|
-
|
|
270
|
-
const
|
|
268
|
+
var _a, _b;
|
|
269
|
+
const effectiveOrientation = (_b = (_a = this.orientation) !== null && _a !== void 0 ? _a : this.direction) !== null && _b !== void 0 ? _b : 'horizontal';
|
|
270
|
+
const isVertical = this.variant === 'orientation' || effectiveOrientation === 'vertical';
|
|
271
|
+
const isGroup = this.variant === 'group';
|
|
272
|
+
const isAttached = !this.separated && this.variant !== 'default';
|
|
271
273
|
const isSeparator = this.variant === 'separator';
|
|
274
|
+
const attachedClasses = isAttached && !isGroup
|
|
275
|
+
? isVertical
|
|
276
|
+
? [
|
|
277
|
+
'[&>*]:rounded-none',
|
|
278
|
+
'[&>*:first-child]:rounded-t-md',
|
|
279
|
+
'[&>*:last-child]:rounded-b-md',
|
|
280
|
+
'[&>*:not(:first-child)]:border-t-0',
|
|
281
|
+
'[&>*:not(:first-child)]:-mt-px'
|
|
282
|
+
].join(' ')
|
|
283
|
+
: [
|
|
284
|
+
'[&>*]:rounded-none',
|
|
285
|
+
'[&>*:first-child]:rounded-l-md',
|
|
286
|
+
'[&>*:last-child]:rounded-r-md',
|
|
287
|
+
'[&>*:not(:first-child)]:border-l-0',
|
|
288
|
+
'[&>*:not(:first-child)]:-ml-px'
|
|
289
|
+
].join(' ')
|
|
290
|
+
: '';
|
|
291
|
+
const groupHorizontalClasses = isGroup && !isVertical && !this.separated
|
|
292
|
+
? [
|
|
293
|
+
'[&>*:not(:first-child)]:-ml-px',
|
|
294
|
+
'[&>pdm-input]:flex-1',
|
|
295
|
+
'[&>pdm-input>div]:w-full',
|
|
296
|
+
'[&>pdm-button>button]:!rounded-none',
|
|
297
|
+
'[&>pdm-button:first-child>button]:!rounded-l-md',
|
|
298
|
+
'[&>pdm-button:last-child>button]:!rounded-r-md',
|
|
299
|
+
'[&>pdm-input>div>input]:!rounded-none',
|
|
300
|
+
'[&>pdm-input:first-child>div>input]:!rounded-l-md',
|
|
301
|
+
'[&>pdm-input:last-child>div>input]:!rounded-r-md',
|
|
302
|
+
'[&>pdm-input-group>div]:!rounded-none',
|
|
303
|
+
'[&>pdm-input-group:first-child>div]:!rounded-l-md',
|
|
304
|
+
'[&>pdm-input-group:last-child>div]:!rounded-r-md',
|
|
305
|
+
'[&>pdm-input>div>input]:bg-background',
|
|
306
|
+
'[&>pdm-input>div>input]:shadow-none',
|
|
307
|
+
'[&>pdm-button>button]:rounded-l-none',
|
|
308
|
+
'[&>pdm-button>button]:shadow-none'
|
|
309
|
+
].join(' ')
|
|
310
|
+
: '';
|
|
311
|
+
const groupVerticalClasses = isGroup && isVertical && !this.separated
|
|
312
|
+
? [
|
|
313
|
+
'[&>*:not(:first-child)]:-mt-px',
|
|
314
|
+
'[&>pdm-button>button]:!rounded-none',
|
|
315
|
+
'[&>pdm-button:first-child>button]:!rounded-t-md',
|
|
316
|
+
'[&>pdm-button:last-child>button]:!rounded-b-md',
|
|
317
|
+
'[&>pdm-input>div>input]:!rounded-none',
|
|
318
|
+
'[&>pdm-input:first-child>div>input]:!rounded-t-md',
|
|
319
|
+
'[&>pdm-input:last-child>div>input]:!rounded-b-md',
|
|
320
|
+
'[&>pdm-input-group>div]:!rounded-none',
|
|
321
|
+
'[&>pdm-input-group:first-child>div]:!rounded-t-md',
|
|
322
|
+
'[&>pdm-input-group:last-child>div]:!rounded-b-md',
|
|
323
|
+
'[&>pdm-input>div>input]:bg-background',
|
|
324
|
+
'[&>pdm-input>div>input]:shadow-none',
|
|
325
|
+
'[&>pdm-button>button]:shadow-none'
|
|
326
|
+
].join(' ')
|
|
327
|
+
: '';
|
|
272
328
|
return [
|
|
273
329
|
'inline-flex w-fit',
|
|
274
330
|
isVertical ? 'flex-col items-stretch' : 'items-center',
|
|
275
331
|
this.variant === 'default' || this.separated ? 'gap-2' : 'gap-0',
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
'[&>*:first-child]:rounded-t-md',
|
|
281
|
-
'[&>*:last-child]:rounded-b-md',
|
|
282
|
-
'[&>*:not(:first-child)]:border-t-0',
|
|
283
|
-
'[&>*:not(:first-child)]:-mt-px'
|
|
284
|
-
].join(' ')
|
|
285
|
-
: [
|
|
286
|
-
'[&>*]:rounded-none',
|
|
287
|
-
'[&>*:first-child]:rounded-l-md',
|
|
288
|
-
'[&>*:last-child]:rounded-r-md',
|
|
289
|
-
'[&>*:not(:first-child)]:border-l-0',
|
|
290
|
-
'[&>*:not(:first-child)]:-ml-px'
|
|
291
|
-
].join(' ')
|
|
292
|
-
: '',
|
|
332
|
+
isGroup ? '*:focus-visible:relative *:focus-visible:z-10' : '',
|
|
333
|
+
attachedClasses,
|
|
334
|
+
groupHorizontalClasses,
|
|
335
|
+
groupVerticalClasses,
|
|
293
336
|
isSeparator
|
|
294
337
|
? 'overflow-hidden rounded-md border border-border bg-secondary shadow-sm'
|
|
295
338
|
: '',
|
|
@@ -298,12 +341,14 @@ class PdmButtonGroupComponent {
|
|
|
298
341
|
}
|
|
299
342
|
}
|
|
300
343
|
PdmButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
301
|
-
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 });
|
|
344
|
+
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 });
|
|
302
345
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmButtonGroupComponent, decorators: [{
|
|
303
346
|
type: Component,
|
|
304
|
-
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" }]
|
|
347
|
+
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" }]
|
|
305
348
|
}], propDecorators: { variant: [{
|
|
306
349
|
type: Input
|
|
350
|
+
}], orientation: [{
|
|
351
|
+
type: Input
|
|
307
352
|
}], direction: [{
|
|
308
353
|
type: Input
|
|
309
354
|
}], separated: [{
|