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
package/fesm2020/pdm-ui-kit.mjs
CHANGED
|
@@ -260,35 +260,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
260
260
|
class PdmButtonGroupComponent {
|
|
261
261
|
constructor() {
|
|
262
262
|
this.variant = 'default';
|
|
263
|
-
this.direction = 'horizontal';
|
|
264
263
|
this.separated = true;
|
|
265
264
|
this.className = '';
|
|
266
265
|
}
|
|
267
266
|
get rootClasses() {
|
|
268
|
-
const
|
|
269
|
-
const
|
|
267
|
+
const effectiveOrientation = this.orientation ?? this.direction ?? 'horizontal';
|
|
268
|
+
const isVertical = this.variant === 'orientation' || effectiveOrientation === 'vertical';
|
|
269
|
+
const isGroup = this.variant === 'group';
|
|
270
|
+
const isAttached = !this.separated && this.variant !== 'default';
|
|
270
271
|
const isSeparator = this.variant === 'separator';
|
|
272
|
+
const attachedClasses = isAttached && !isGroup
|
|
273
|
+
? isVertical
|
|
274
|
+
? [
|
|
275
|
+
'[&>*]:rounded-none',
|
|
276
|
+
'[&>*:first-child]:rounded-t-md',
|
|
277
|
+
'[&>*:last-child]:rounded-b-md',
|
|
278
|
+
'[&>*:not(:first-child)]:border-t-0',
|
|
279
|
+
'[&>*:not(:first-child)]:-mt-px'
|
|
280
|
+
].join(' ')
|
|
281
|
+
: [
|
|
282
|
+
'[&>*]:rounded-none',
|
|
283
|
+
'[&>*:first-child]:rounded-l-md',
|
|
284
|
+
'[&>*:last-child]:rounded-r-md',
|
|
285
|
+
'[&>*:not(:first-child)]:border-l-0',
|
|
286
|
+
'[&>*:not(:first-child)]:-ml-px'
|
|
287
|
+
].join(' ')
|
|
288
|
+
: '';
|
|
289
|
+
const groupHorizontalClasses = isGroup && !isVertical && !this.separated
|
|
290
|
+
? [
|
|
291
|
+
'[&>*:not(:first-child)]:-ml-px',
|
|
292
|
+
'[&>pdm-input]:flex-1',
|
|
293
|
+
'[&>pdm-input>div]:w-full',
|
|
294
|
+
'[&>pdm-button>button]:!rounded-none',
|
|
295
|
+
'[&>pdm-button:first-child>button]:!rounded-l-md',
|
|
296
|
+
'[&>pdm-button:last-child>button]:!rounded-r-md',
|
|
297
|
+
'[&>pdm-input>div>input]:!rounded-none',
|
|
298
|
+
'[&>pdm-input:first-child>div>input]:!rounded-l-md',
|
|
299
|
+
'[&>pdm-input:last-child>div>input]:!rounded-r-md',
|
|
300
|
+
'[&>pdm-input-group>div]:!rounded-none',
|
|
301
|
+
'[&>pdm-input-group:first-child>div]:!rounded-l-md',
|
|
302
|
+
'[&>pdm-input-group:last-child>div]:!rounded-r-md',
|
|
303
|
+
'[&>pdm-input>div>input]:bg-background',
|
|
304
|
+
'[&>pdm-input>div>input]:shadow-none',
|
|
305
|
+
'[&>pdm-button>button]:rounded-l-none',
|
|
306
|
+
'[&>pdm-button>button]:shadow-none'
|
|
307
|
+
].join(' ')
|
|
308
|
+
: '';
|
|
309
|
+
const groupVerticalClasses = isGroup && isVertical && !this.separated
|
|
310
|
+
? [
|
|
311
|
+
'[&>*:not(:first-child)]:-mt-px',
|
|
312
|
+
'[&>pdm-button>button]:!rounded-none',
|
|
313
|
+
'[&>pdm-button:first-child>button]:!rounded-t-md',
|
|
314
|
+
'[&>pdm-button:last-child>button]:!rounded-b-md',
|
|
315
|
+
'[&>pdm-input>div>input]:!rounded-none',
|
|
316
|
+
'[&>pdm-input:first-child>div>input]:!rounded-t-md',
|
|
317
|
+
'[&>pdm-input:last-child>div>input]:!rounded-b-md',
|
|
318
|
+
'[&>pdm-input-group>div]:!rounded-none',
|
|
319
|
+
'[&>pdm-input-group:first-child>div]:!rounded-t-md',
|
|
320
|
+
'[&>pdm-input-group:last-child>div]:!rounded-b-md',
|
|
321
|
+
'[&>pdm-input>div>input]:bg-background',
|
|
322
|
+
'[&>pdm-input>div>input]:shadow-none',
|
|
323
|
+
'[&>pdm-button>button]:shadow-none'
|
|
324
|
+
].join(' ')
|
|
325
|
+
: '';
|
|
271
326
|
return [
|
|
272
327
|
'inline-flex w-fit',
|
|
273
328
|
isVertical ? 'flex-col items-stretch' : 'items-center',
|
|
274
329
|
this.variant === 'default' || this.separated ? 'gap-2' : 'gap-0',
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
'[&>*:first-child]:rounded-t-md',
|
|
280
|
-
'[&>*:last-child]:rounded-b-md',
|
|
281
|
-
'[&>*:not(:first-child)]:border-t-0',
|
|
282
|
-
'[&>*:not(:first-child)]:-mt-px'
|
|
283
|
-
].join(' ')
|
|
284
|
-
: [
|
|
285
|
-
'[&>*]:rounded-none',
|
|
286
|
-
'[&>*:first-child]:rounded-l-md',
|
|
287
|
-
'[&>*:last-child]:rounded-r-md',
|
|
288
|
-
'[&>*:not(:first-child)]:border-l-0',
|
|
289
|
-
'[&>*:not(:first-child)]:-ml-px'
|
|
290
|
-
].join(' ')
|
|
291
|
-
: '',
|
|
330
|
+
isGroup ? '*:focus-visible:relative *:focus-visible:z-10' : '',
|
|
331
|
+
attachedClasses,
|
|
332
|
+
groupHorizontalClasses,
|
|
333
|
+
groupVerticalClasses,
|
|
292
334
|
isSeparator
|
|
293
335
|
? 'overflow-hidden rounded-md border border-border bg-secondary shadow-sm'
|
|
294
336
|
: '',
|
|
@@ -297,12 +339,14 @@ class PdmButtonGroupComponent {
|
|
|
297
339
|
}
|
|
298
340
|
}
|
|
299
341
|
PdmButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
300
|
-
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 });
|
|
342
|
+
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 });
|
|
301
343
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmButtonGroupComponent, decorators: [{
|
|
302
344
|
type: Component,
|
|
303
|
-
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" }]
|
|
345
|
+
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" }]
|
|
304
346
|
}], propDecorators: { variant: [{
|
|
305
347
|
type: Input
|
|
348
|
+
}], orientation: [{
|
|
349
|
+
type: Input
|
|
306
350
|
}], direction: [{
|
|
307
351
|
type: Input
|
|
308
352
|
}], separated: [{
|