@pecb-ui/components 1.1.7 → 1.1.8
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/fesm2022/pecb-ui-components.mjs +59 -17
- package/fesm2022/pecb-ui-components.mjs.map +1 -1
- package/index.d.ts +35 -3
- package/package.json +1 -1
|
@@ -1146,6 +1146,7 @@ const PECB_ICONS = {
|
|
|
1146
1146
|
<path d="M20.4 19.5L5.40002 4.5M10.2 10.4416C9.82661 10.8533 9.60002 11.394 9.60002 11.9863C9.60002 13.2761 10.6745 14.3217 12 14.3217C12.6112 14.3217 13.169 14.0994 13.5927 13.7334M20.4388 14.3217C21.265 13.0848 21.6 12.0761 21.6 12.0761C21.6 12.0761 19.4154 5.1 12 5.1C11.5837 5.1 11.1839 5.12199 10.8 5.16349M17.4 17.3494C16.0226 18.2281 14.2494 18.8495 12 18.8127C4.67695 18.693 2.40002 12.0761 2.40002 12.0761C2.40002 12.0761 3.45788 8.69808 6.60002 6.64332" stroke="black" stroke-width="2" stroke-linecap="round"/>
|
|
1147
1147
|
</svg>`,
|
|
1148
1148
|
'eye-open': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1149
|
+
<path d="M2.40002 12.0761C2.40002 12.0761 4.67695 5.1 12 5.1C19.4154 5.1 21.6 12.0761 21.6 12.0761C21.6 12.0761 19.4154 19.0522 12 19.0522C4.67695 19.0522 2.40002 12.0761 2.40002 12.0761Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1149
1150
|
<path d="M14.4 12.0291C14.4 13.3189 13.3255 14.3645 12 14.3645C10.6745 14.3645 9.60002 13.3189 9.60002 12.0291C9.60002 10.7393 10.6745 9.69377 12 9.69377C13.3255 9.69377 14.4 10.7393 14.4 12.0291Z" stroke="black" stroke-width="1.5"/>
|
|
1150
1151
|
</svg>`,
|
|
1151
1152
|
'face-id-01': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
@@ -3868,6 +3869,13 @@ class CardComponent {
|
|
|
3868
3869
|
* Whether to add padding to the card
|
|
3869
3870
|
*/
|
|
3870
3871
|
this.noPadding = input(false, ...(ngDevMode ? [{ debugName: "noPadding" }] : []));
|
|
3872
|
+
/**
|
|
3873
|
+
* Whether the card clips overflowing content to its rounded corners.
|
|
3874
|
+
* Defaults to true (clips media/sections to the rounded shape).
|
|
3875
|
+
* Set to false when the card hosts content that must escape its bounds,
|
|
3876
|
+
* e.g. a dropdown/select panel that would otherwise be cut off.
|
|
3877
|
+
*/
|
|
3878
|
+
this.clipContent = input(true, ...(ngDevMode ? [{ debugName: "clipContent" }] : []));
|
|
3871
3879
|
/**
|
|
3872
3880
|
* Border-radius: predefined token ('xs'|'sm'|'md'|'lg'|'none'|'full')
|
|
3873
3881
|
* or any CSS value e.g. '20px', '50%'
|
|
@@ -3900,7 +3908,8 @@ class CardComponent {
|
|
|
3900
3908
|
'pecb-card',
|
|
3901
3909
|
`pecb-card--elevation-${this.elevation()}`,
|
|
3902
3910
|
this.hoverable() ? 'pecb-card--hoverable' : '',
|
|
3903
|
-
this.noPadding() ? 'pecb-card--no-padding' : ''
|
|
3911
|
+
this.noPadding() ? 'pecb-card--no-padding' : '',
|
|
3912
|
+
this.clipContent() ? '' : 'pecb-card--no-clip'
|
|
3904
3913
|
].filter(Boolean);
|
|
3905
3914
|
}
|
|
3906
3915
|
get borderRadiusStyle() {
|
|
@@ -3910,12 +3919,12 @@ class CardComponent {
|
|
|
3910
3919
|
return this.role() !== 'none' ? this.role() : null;
|
|
3911
3920
|
}
|
|
3912
3921
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3913
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: CardComponent, isStandalone: true, selector: "pecb-card", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, noPadding: { classPropertyName: "noPadding", publicName: "noPadding", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [id]=\"id()\"\n [class]=\"cardClasses.join(' ')\"\n [style.border-radius]=\"borderRadiusStyle\"\n [attr.role]=\"roleAttribute\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".pecb-card{position:relative;display:flex;flex-direction:column;background-color:#fff;border-radius:16px;overflow:hidden;transition-property:box-shadow,transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-card:not(.pecb-card--no-padding){padding:20px}.pecb-card--elevation-none{box-shadow:none;border:1px solid #ececec}.pecb-card--elevation-sm{box-shadow:0 1px 2px #0000000d}.pecb-card--elevation-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--elevation-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--elevation-xl{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card--hoverable{cursor:pointer}.pecb-card--hoverable:hover{transform:translateY(-2px)}.pecb-card--hoverable:hover.pecb-card--elevation-sm{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--hoverable:hover.pecb-card--elevation-md{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--hoverable:hover.pecb-card--elevation-lg{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card__header{margin-bottom:16px}.pecb-card__header h1,.pecb-card__header h2,.pecb-card__header h3,.pecb-card__header h4,.pecb-card__header h5,.pecb-card__header h6{margin:0;font-weight:700;color:#313131}.pecb-card--no-padding .pecb-card__header{padding:20px 20px 0}.pecb-card__body{flex:1;color:#616161}.pecb-card--no-padding .pecb-card__body{padding:0 20px}.pecb-card__body p:last-child{margin-bottom:0}.pecb-card__footer{margin-top:16px;padding-top:16px;border-top:1px solid #ececec}.pecb-card--no-padding .pecb-card__footer{padding:20px 20px 0}\n"] }); }
|
|
3922
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: CardComponent, isStandalone: true, selector: "pecb-card", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, noPadding: { classPropertyName: "noPadding", publicName: "noPadding", isSignal: true, isRequired: false, transformFunction: null }, clipContent: { classPropertyName: "clipContent", publicName: "clipContent", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [id]=\"id()\"\n [class]=\"cardClasses.join(' ')\"\n [style.border-radius]=\"borderRadiusStyle\"\n [attr.role]=\"roleAttribute\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".pecb-card{position:relative;display:flex;flex-direction:column;background-color:#fff;border-radius:16px;overflow:hidden;transition-property:box-shadow,transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-card--no-clip{overflow:visible}.pecb-card:not(.pecb-card--no-padding){padding:20px}.pecb-card--elevation-none{box-shadow:none;border:1px solid #ececec}.pecb-card--elevation-sm{box-shadow:0 1px 2px #0000000d}.pecb-card--elevation-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--elevation-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--elevation-xl{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card--hoverable{cursor:pointer}.pecb-card--hoverable:hover{transform:translateY(-2px)}.pecb-card--hoverable:hover.pecb-card--elevation-sm{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--hoverable:hover.pecb-card--elevation-md{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--hoverable:hover.pecb-card--elevation-lg{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card__header{margin-bottom:16px}.pecb-card__header h1,.pecb-card__header h2,.pecb-card__header h3,.pecb-card__header h4,.pecb-card__header h5,.pecb-card__header h6{margin:0;font-weight:700;color:#313131}.pecb-card--no-padding .pecb-card__header{padding:20px 20px 0}.pecb-card__body{flex:1;color:#616161}.pecb-card--no-padding .pecb-card__body{padding:0 20px}.pecb-card__body p:last-child{margin-bottom:0}.pecb-card__footer{margin-top:16px;padding-top:16px;border-top:1px solid #ececec}.pecb-card--no-padding .pecb-card__footer{padding:20px 20px 0}\n"] }); }
|
|
3914
3923
|
}
|
|
3915
3924
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardComponent, decorators: [{
|
|
3916
3925
|
type: Component,
|
|
3917
|
-
args: [{ selector: 'pecb-card', standalone: true, template: "<div\n [id]=\"id()\"\n [class]=\"cardClasses.join(' ')\"\n [style.border-radius]=\"borderRadiusStyle\"\n [attr.role]=\"roleAttribute\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".pecb-card{position:relative;display:flex;flex-direction:column;background-color:#fff;border-radius:16px;overflow:hidden;transition-property:box-shadow,transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-card:not(.pecb-card--no-padding){padding:20px}.pecb-card--elevation-none{box-shadow:none;border:1px solid #ececec}.pecb-card--elevation-sm{box-shadow:0 1px 2px #0000000d}.pecb-card--elevation-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--elevation-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--elevation-xl{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card--hoverable{cursor:pointer}.pecb-card--hoverable:hover{transform:translateY(-2px)}.pecb-card--hoverable:hover.pecb-card--elevation-sm{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--hoverable:hover.pecb-card--elevation-md{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--hoverable:hover.pecb-card--elevation-lg{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card__header{margin-bottom:16px}.pecb-card__header h1,.pecb-card__header h2,.pecb-card__header h3,.pecb-card__header h4,.pecb-card__header h5,.pecb-card__header h6{margin:0;font-weight:700;color:#313131}.pecb-card--no-padding .pecb-card__header{padding:20px 20px 0}.pecb-card__body{flex:1;color:#616161}.pecb-card--no-padding .pecb-card__body{padding:0 20px}.pecb-card__body p:last-child{margin-bottom:0}.pecb-card__footer{margin-top:16px;padding-top:16px;border-top:1px solid #ececec}.pecb-card--no-padding .pecb-card__footer{padding:20px 20px 0}\n"] }]
|
|
3918
|
-
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], noPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "noPadding", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }] } });
|
|
3926
|
+
args: [{ selector: 'pecb-card', standalone: true, template: "<div\n [id]=\"id()\"\n [class]=\"cardClasses.join(' ')\"\n [style.border-radius]=\"borderRadiusStyle\"\n [attr.role]=\"roleAttribute\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".pecb-card{position:relative;display:flex;flex-direction:column;background-color:#fff;border-radius:16px;overflow:hidden;transition-property:box-shadow,transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-card--no-clip{overflow:visible}.pecb-card:not(.pecb-card--no-padding){padding:20px}.pecb-card--elevation-none{box-shadow:none;border:1px solid #ececec}.pecb-card--elevation-sm{box-shadow:0 1px 2px #0000000d}.pecb-card--elevation-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--elevation-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--elevation-xl{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card--hoverable{cursor:pointer}.pecb-card--hoverable:hover{transform:translateY(-2px)}.pecb-card--hoverable:hover.pecb-card--elevation-sm{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--hoverable:hover.pecb-card--elevation-md{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--hoverable:hover.pecb-card--elevation-lg{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card__header{margin-bottom:16px}.pecb-card__header h1,.pecb-card__header h2,.pecb-card__header h3,.pecb-card__header h4,.pecb-card__header h5,.pecb-card__header h6{margin:0;font-weight:700;color:#313131}.pecb-card--no-padding .pecb-card__header{padding:20px 20px 0}.pecb-card__body{flex:1;color:#616161}.pecb-card--no-padding .pecb-card__body{padding:0 20px}.pecb-card__body p:last-child{margin-bottom:0}.pecb-card__footer{margin-top:16px;padding-top:16px;border-top:1px solid #ececec}.pecb-card--no-padding .pecb-card__footer{padding:20px 20px 0}\n"] }]
|
|
3927
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], noPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "noPadding", required: false }] }], clipContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipContent", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }] } });
|
|
3919
3928
|
class CardHeaderComponent {
|
|
3920
3929
|
constructor() {
|
|
3921
3930
|
this.headingLevel = input(null, ...(ngDevMode ? [{ debugName: "headingLevel" }] : []));
|
|
@@ -3925,7 +3934,7 @@ class CardHeaderComponent {
|
|
|
3925
3934
|
<div class="pecb-card__header" role="heading" [attr.aria-level]="headingLevel()">
|
|
3926
3935
|
<ng-content></ng-content>
|
|
3927
3936
|
</div>
|
|
3928
|
-
`, isInline: true, styles: [".pecb-card{position:relative;display:flex;flex-direction:column;background-color:#fff;border-radius:16px;overflow:hidden;transition-property:box-shadow,transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-card:not(.pecb-card--no-padding){padding:20px}.pecb-card--elevation-none{box-shadow:none;border:1px solid #ececec}.pecb-card--elevation-sm{box-shadow:0 1px 2px #0000000d}.pecb-card--elevation-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--elevation-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--elevation-xl{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card--hoverable{cursor:pointer}.pecb-card--hoverable:hover{transform:translateY(-2px)}.pecb-card--hoverable:hover.pecb-card--elevation-sm{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--hoverable:hover.pecb-card--elevation-md{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--hoverable:hover.pecb-card--elevation-lg{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card__header{margin-bottom:16px}.pecb-card__header h1,.pecb-card__header h2,.pecb-card__header h3,.pecb-card__header h4,.pecb-card__header h5,.pecb-card__header h6{margin:0;font-weight:700;color:#313131}.pecb-card--no-padding .pecb-card__header{padding:20px 20px 0}.pecb-card__body{flex:1;color:#616161}.pecb-card--no-padding .pecb-card__body{padding:0 20px}.pecb-card__body p:last-child{margin-bottom:0}.pecb-card__footer{margin-top:16px;padding-top:16px;border-top:1px solid #ececec}.pecb-card--no-padding .pecb-card__footer{padding:20px 20px 0}\n"] }); }
|
|
3937
|
+
`, isInline: true, styles: [".pecb-card{position:relative;display:flex;flex-direction:column;background-color:#fff;border-radius:16px;overflow:hidden;transition-property:box-shadow,transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-card--no-clip{overflow:visible}.pecb-card:not(.pecb-card--no-padding){padding:20px}.pecb-card--elevation-none{box-shadow:none;border:1px solid #ececec}.pecb-card--elevation-sm{box-shadow:0 1px 2px #0000000d}.pecb-card--elevation-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--elevation-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--elevation-xl{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card--hoverable{cursor:pointer}.pecb-card--hoverable:hover{transform:translateY(-2px)}.pecb-card--hoverable:hover.pecb-card--elevation-sm{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--hoverable:hover.pecb-card--elevation-md{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--hoverable:hover.pecb-card--elevation-lg{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card__header{margin-bottom:16px}.pecb-card__header h1,.pecb-card__header h2,.pecb-card__header h3,.pecb-card__header h4,.pecb-card__header h5,.pecb-card__header h6{margin:0;font-weight:700;color:#313131}.pecb-card--no-padding .pecb-card__header{padding:20px 20px 0}.pecb-card__body{flex:1;color:#616161}.pecb-card--no-padding .pecb-card__body{padding:0 20px}.pecb-card__body p:last-child{margin-bottom:0}.pecb-card__footer{margin-top:16px;padding-top:16px;border-top:1px solid #ececec}.pecb-card--no-padding .pecb-card__footer{padding:20px 20px 0}\n"] }); }
|
|
3929
3938
|
}
|
|
3930
3939
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardHeaderComponent, decorators: [{
|
|
3931
3940
|
type: Component,
|
|
@@ -3933,23 +3942,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3933
3942
|
<div class="pecb-card__header" role="heading" [attr.aria-level]="headingLevel()">
|
|
3934
3943
|
<ng-content></ng-content>
|
|
3935
3944
|
</div>
|
|
3936
|
-
`, styles: [".pecb-card{position:relative;display:flex;flex-direction:column;background-color:#fff;border-radius:16px;overflow:hidden;transition-property:box-shadow,transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-card:not(.pecb-card--no-padding){padding:20px}.pecb-card--elevation-none{box-shadow:none;border:1px solid #ececec}.pecb-card--elevation-sm{box-shadow:0 1px 2px #0000000d}.pecb-card--elevation-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--elevation-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--elevation-xl{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card--hoverable{cursor:pointer}.pecb-card--hoverable:hover{transform:translateY(-2px)}.pecb-card--hoverable:hover.pecb-card--elevation-sm{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--hoverable:hover.pecb-card--elevation-md{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--hoverable:hover.pecb-card--elevation-lg{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card__header{margin-bottom:16px}.pecb-card__header h1,.pecb-card__header h2,.pecb-card__header h3,.pecb-card__header h4,.pecb-card__header h5,.pecb-card__header h6{margin:0;font-weight:700;color:#313131}.pecb-card--no-padding .pecb-card__header{padding:20px 20px 0}.pecb-card__body{flex:1;color:#616161}.pecb-card--no-padding .pecb-card__body{padding:0 20px}.pecb-card__body p:last-child{margin-bottom:0}.pecb-card__footer{margin-top:16px;padding-top:16px;border-top:1px solid #ececec}.pecb-card--no-padding .pecb-card__footer{padding:20px 20px 0}\n"] }]
|
|
3945
|
+
`, styles: [".pecb-card{position:relative;display:flex;flex-direction:column;background-color:#fff;border-radius:16px;overflow:hidden;transition-property:box-shadow,transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-card--no-clip{overflow:visible}.pecb-card:not(.pecb-card--no-padding){padding:20px}.pecb-card--elevation-none{box-shadow:none;border:1px solid #ececec}.pecb-card--elevation-sm{box-shadow:0 1px 2px #0000000d}.pecb-card--elevation-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--elevation-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--elevation-xl{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card--hoverable{cursor:pointer}.pecb-card--hoverable:hover{transform:translateY(-2px)}.pecb-card--hoverable:hover.pecb-card--elevation-sm{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--hoverable:hover.pecb-card--elevation-md{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--hoverable:hover.pecb-card--elevation-lg{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card__header{margin-bottom:16px}.pecb-card__header h1,.pecb-card__header h2,.pecb-card__header h3,.pecb-card__header h4,.pecb-card__header h5,.pecb-card__header h6{margin:0;font-weight:700;color:#313131}.pecb-card--no-padding .pecb-card__header{padding:20px 20px 0}.pecb-card__body{flex:1;color:#616161}.pecb-card--no-padding .pecb-card__body{padding:0 20px}.pecb-card__body p:last-child{margin-bottom:0}.pecb-card__footer{margin-top:16px;padding-top:16px;border-top:1px solid #ececec}.pecb-card--no-padding .pecb-card__footer{padding:20px 20px 0}\n"] }]
|
|
3937
3946
|
}], propDecorators: { headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }] } });
|
|
3938
3947
|
class CardBodyComponent {
|
|
3939
3948
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3940
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CardBodyComponent, isStandalone: true, selector: "pecb-card-body", ngImport: i0, template: '<div class="pecb-card__body"><ng-content></ng-content></div>', isInline: true, styles: [".pecb-card{position:relative;display:flex;flex-direction:column;background-color:#fff;border-radius:16px;overflow:hidden;transition-property:box-shadow,transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-card:not(.pecb-card--no-padding){padding:20px}.pecb-card--elevation-none{box-shadow:none;border:1px solid #ececec}.pecb-card--elevation-sm{box-shadow:0 1px 2px #0000000d}.pecb-card--elevation-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--elevation-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--elevation-xl{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card--hoverable{cursor:pointer}.pecb-card--hoverable:hover{transform:translateY(-2px)}.pecb-card--hoverable:hover.pecb-card--elevation-sm{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--hoverable:hover.pecb-card--elevation-md{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--hoverable:hover.pecb-card--elevation-lg{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card__header{margin-bottom:16px}.pecb-card__header h1,.pecb-card__header h2,.pecb-card__header h3,.pecb-card__header h4,.pecb-card__header h5,.pecb-card__header h6{margin:0;font-weight:700;color:#313131}.pecb-card--no-padding .pecb-card__header{padding:20px 20px 0}.pecb-card__body{flex:1;color:#616161}.pecb-card--no-padding .pecb-card__body{padding:0 20px}.pecb-card__body p:last-child{margin-bottom:0}.pecb-card__footer{margin-top:16px;padding-top:16px;border-top:1px solid #ececec}.pecb-card--no-padding .pecb-card__footer{padding:20px 20px 0}\n"] }); }
|
|
3949
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CardBodyComponent, isStandalone: true, selector: "pecb-card-body", ngImport: i0, template: '<div class="pecb-card__body"><ng-content></ng-content></div>', isInline: true, styles: [".pecb-card{position:relative;display:flex;flex-direction:column;background-color:#fff;border-radius:16px;overflow:hidden;transition-property:box-shadow,transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-card--no-clip{overflow:visible}.pecb-card:not(.pecb-card--no-padding){padding:20px}.pecb-card--elevation-none{box-shadow:none;border:1px solid #ececec}.pecb-card--elevation-sm{box-shadow:0 1px 2px #0000000d}.pecb-card--elevation-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--elevation-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--elevation-xl{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card--hoverable{cursor:pointer}.pecb-card--hoverable:hover{transform:translateY(-2px)}.pecb-card--hoverable:hover.pecb-card--elevation-sm{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--hoverable:hover.pecb-card--elevation-md{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--hoverable:hover.pecb-card--elevation-lg{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card__header{margin-bottom:16px}.pecb-card__header h1,.pecb-card__header h2,.pecb-card__header h3,.pecb-card__header h4,.pecb-card__header h5,.pecb-card__header h6{margin:0;font-weight:700;color:#313131}.pecb-card--no-padding .pecb-card__header{padding:20px 20px 0}.pecb-card__body{flex:1;color:#616161}.pecb-card--no-padding .pecb-card__body{padding:0 20px}.pecb-card__body p:last-child{margin-bottom:0}.pecb-card__footer{margin-top:16px;padding-top:16px;border-top:1px solid #ececec}.pecb-card--no-padding .pecb-card__footer{padding:20px 20px 0}\n"] }); }
|
|
3941
3950
|
}
|
|
3942
3951
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardBodyComponent, decorators: [{
|
|
3943
3952
|
type: Component,
|
|
3944
|
-
args: [{ selector: 'pecb-card-body', standalone: true, template: '<div class="pecb-card__body"><ng-content></ng-content></div>', styles: [".pecb-card{position:relative;display:flex;flex-direction:column;background-color:#fff;border-radius:16px;overflow:hidden;transition-property:box-shadow,transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-card:not(.pecb-card--no-padding){padding:20px}.pecb-card--elevation-none{box-shadow:none;border:1px solid #ececec}.pecb-card--elevation-sm{box-shadow:0 1px 2px #0000000d}.pecb-card--elevation-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--elevation-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--elevation-xl{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card--hoverable{cursor:pointer}.pecb-card--hoverable:hover{transform:translateY(-2px)}.pecb-card--hoverable:hover.pecb-card--elevation-sm{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--hoverable:hover.pecb-card--elevation-md{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--hoverable:hover.pecb-card--elevation-lg{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card__header{margin-bottom:16px}.pecb-card__header h1,.pecb-card__header h2,.pecb-card__header h3,.pecb-card__header h4,.pecb-card__header h5,.pecb-card__header h6{margin:0;font-weight:700;color:#313131}.pecb-card--no-padding .pecb-card__header{padding:20px 20px 0}.pecb-card__body{flex:1;color:#616161}.pecb-card--no-padding .pecb-card__body{padding:0 20px}.pecb-card__body p:last-child{margin-bottom:0}.pecb-card__footer{margin-top:16px;padding-top:16px;border-top:1px solid #ececec}.pecb-card--no-padding .pecb-card__footer{padding:20px 20px 0}\n"] }]
|
|
3953
|
+
args: [{ selector: 'pecb-card-body', standalone: true, template: '<div class="pecb-card__body"><ng-content></ng-content></div>', styles: [".pecb-card{position:relative;display:flex;flex-direction:column;background-color:#fff;border-radius:16px;overflow:hidden;transition-property:box-shadow,transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-card--no-clip{overflow:visible}.pecb-card:not(.pecb-card--no-padding){padding:20px}.pecb-card--elevation-none{box-shadow:none;border:1px solid #ececec}.pecb-card--elevation-sm{box-shadow:0 1px 2px #0000000d}.pecb-card--elevation-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--elevation-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--elevation-xl{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card--hoverable{cursor:pointer}.pecb-card--hoverable:hover{transform:translateY(-2px)}.pecb-card--hoverable:hover.pecb-card--elevation-sm{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--hoverable:hover.pecb-card--elevation-md{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--hoverable:hover.pecb-card--elevation-lg{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card__header{margin-bottom:16px}.pecb-card__header h1,.pecb-card__header h2,.pecb-card__header h3,.pecb-card__header h4,.pecb-card__header h5,.pecb-card__header h6{margin:0;font-weight:700;color:#313131}.pecb-card--no-padding .pecb-card__header{padding:20px 20px 0}.pecb-card__body{flex:1;color:#616161}.pecb-card--no-padding .pecb-card__body{padding:0 20px}.pecb-card__body p:last-child{margin-bottom:0}.pecb-card__footer{margin-top:16px;padding-top:16px;border-top:1px solid #ececec}.pecb-card--no-padding .pecb-card__footer{padding:20px 20px 0}\n"] }]
|
|
3945
3954
|
}] });
|
|
3946
3955
|
class CardFooterComponent {
|
|
3947
3956
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3948
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CardFooterComponent, isStandalone: true, selector: "pecb-card-footer", ngImport: i0, template: '<div class="pecb-card__footer"><ng-content></ng-content></div>', isInline: true, styles: [".pecb-card{position:relative;display:flex;flex-direction:column;background-color:#fff;border-radius:16px;overflow:hidden;transition-property:box-shadow,transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-card:not(.pecb-card--no-padding){padding:20px}.pecb-card--elevation-none{box-shadow:none;border:1px solid #ececec}.pecb-card--elevation-sm{box-shadow:0 1px 2px #0000000d}.pecb-card--elevation-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--elevation-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--elevation-xl{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card--hoverable{cursor:pointer}.pecb-card--hoverable:hover{transform:translateY(-2px)}.pecb-card--hoverable:hover.pecb-card--elevation-sm{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--hoverable:hover.pecb-card--elevation-md{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--hoverable:hover.pecb-card--elevation-lg{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card__header{margin-bottom:16px}.pecb-card__header h1,.pecb-card__header h2,.pecb-card__header h3,.pecb-card__header h4,.pecb-card__header h5,.pecb-card__header h6{margin:0;font-weight:700;color:#313131}.pecb-card--no-padding .pecb-card__header{padding:20px 20px 0}.pecb-card__body{flex:1;color:#616161}.pecb-card--no-padding .pecb-card__body{padding:0 20px}.pecb-card__body p:last-child{margin-bottom:0}.pecb-card__footer{margin-top:16px;padding-top:16px;border-top:1px solid #ececec}.pecb-card--no-padding .pecb-card__footer{padding:20px 20px 0}\n"] }); }
|
|
3957
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CardFooterComponent, isStandalone: true, selector: "pecb-card-footer", ngImport: i0, template: '<div class="pecb-card__footer"><ng-content></ng-content></div>', isInline: true, styles: [".pecb-card{position:relative;display:flex;flex-direction:column;background-color:#fff;border-radius:16px;overflow:hidden;transition-property:box-shadow,transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-card--no-clip{overflow:visible}.pecb-card:not(.pecb-card--no-padding){padding:20px}.pecb-card--elevation-none{box-shadow:none;border:1px solid #ececec}.pecb-card--elevation-sm{box-shadow:0 1px 2px #0000000d}.pecb-card--elevation-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--elevation-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--elevation-xl{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card--hoverable{cursor:pointer}.pecb-card--hoverable:hover{transform:translateY(-2px)}.pecb-card--hoverable:hover.pecb-card--elevation-sm{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--hoverable:hover.pecb-card--elevation-md{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--hoverable:hover.pecb-card--elevation-lg{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card__header{margin-bottom:16px}.pecb-card__header h1,.pecb-card__header h2,.pecb-card__header h3,.pecb-card__header h4,.pecb-card__header h5,.pecb-card__header h6{margin:0;font-weight:700;color:#313131}.pecb-card--no-padding .pecb-card__header{padding:20px 20px 0}.pecb-card__body{flex:1;color:#616161}.pecb-card--no-padding .pecb-card__body{padding:0 20px}.pecb-card__body p:last-child{margin-bottom:0}.pecb-card__footer{margin-top:16px;padding-top:16px;border-top:1px solid #ececec}.pecb-card--no-padding .pecb-card__footer{padding:20px 20px 0}\n"] }); }
|
|
3949
3958
|
}
|
|
3950
3959
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardFooterComponent, decorators: [{
|
|
3951
3960
|
type: Component,
|
|
3952
|
-
args: [{ selector: 'pecb-card-footer', standalone: true, template: '<div class="pecb-card__footer"><ng-content></ng-content></div>', styles: [".pecb-card{position:relative;display:flex;flex-direction:column;background-color:#fff;border-radius:16px;overflow:hidden;transition-property:box-shadow,transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-card:not(.pecb-card--no-padding){padding:20px}.pecb-card--elevation-none{box-shadow:none;border:1px solid #ececec}.pecb-card--elevation-sm{box-shadow:0 1px 2px #0000000d}.pecb-card--elevation-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--elevation-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--elevation-xl{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card--hoverable{cursor:pointer}.pecb-card--hoverable:hover{transform:translateY(-2px)}.pecb-card--hoverable:hover.pecb-card--elevation-sm{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--hoverable:hover.pecb-card--elevation-md{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--hoverable:hover.pecb-card--elevation-lg{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card__header{margin-bottom:16px}.pecb-card__header h1,.pecb-card__header h2,.pecb-card__header h3,.pecb-card__header h4,.pecb-card__header h5,.pecb-card__header h6{margin:0;font-weight:700;color:#313131}.pecb-card--no-padding .pecb-card__header{padding:20px 20px 0}.pecb-card__body{flex:1;color:#616161}.pecb-card--no-padding .pecb-card__body{padding:0 20px}.pecb-card__body p:last-child{margin-bottom:0}.pecb-card__footer{margin-top:16px;padding-top:16px;border-top:1px solid #ececec}.pecb-card--no-padding .pecb-card__footer{padding:20px 20px 0}\n"] }]
|
|
3961
|
+
args: [{ selector: 'pecb-card-footer', standalone: true, template: '<div class="pecb-card__footer"><ng-content></ng-content></div>', styles: [".pecb-card{position:relative;display:flex;flex-direction:column;background-color:#fff;border-radius:16px;overflow:hidden;transition-property:box-shadow,transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-card--no-clip{overflow:visible}.pecb-card:not(.pecb-card--no-padding){padding:20px}.pecb-card--elevation-none{box-shadow:none;border:1px solid #ececec}.pecb-card--elevation-sm{box-shadow:0 1px 2px #0000000d}.pecb-card--elevation-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--elevation-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--elevation-xl{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card--hoverable{cursor:pointer}.pecb-card--hoverable:hover{transform:translateY(-2px)}.pecb-card--hoverable:hover.pecb-card--elevation-sm{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.pecb-card--hoverable:hover.pecb-card--elevation-md{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-card--hoverable:hover.pecb-card--elevation-lg{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.pecb-card__header{margin-bottom:16px}.pecb-card__header h1,.pecb-card__header h2,.pecb-card__header h3,.pecb-card__header h4,.pecb-card__header h5,.pecb-card__header h6{margin:0;font-weight:700;color:#313131}.pecb-card--no-padding .pecb-card__header{padding:20px 20px 0}.pecb-card__body{flex:1;color:#616161}.pecb-card--no-padding .pecb-card__body{padding:0 20px}.pecb-card__body p:last-child{margin-bottom:0}.pecb-card__footer{margin-top:16px;padding-top:16px;border-top:1px solid #ececec}.pecb-card--no-padding .pecb-card__footer{padding:20px 20px 0}\n"] }]
|
|
3953
3962
|
}] });
|
|
3954
3963
|
|
|
3955
3964
|
class StatusComponent {
|
|
@@ -4155,11 +4164,11 @@ class PaginationComponent {
|
|
|
4155
4164
|
return pages;
|
|
4156
4165
|
}
|
|
4157
4166
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PaginationComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4158
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: PaginationComponent, isStandalone: true, selector: "pecb-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, showItemsInfo: { classPropertyName: "showItemsInfo", publicName: "showItemsInfo", isSignal: true, isRequired: false, transformFunction: null }, maxVisiblePages: { classPropertyName: "maxVisiblePages", publicName: "maxVisiblePages", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, previousPageAriaLabel: { classPropertyName: "previousPageAriaLabel", publicName: "previousPageAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, nextPageAriaLabel: { classPropertyName: "nextPageAriaLabel", publicName: "nextPageAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, pageNavigationAriaLabel: { classPropertyName: "pageNavigationAriaLabel", publicName: "pageNavigationAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, pageAriaLabel: { classPropertyName: "pageAriaLabel", publicName: "pageAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, pageSizeListboxAriaLabel: { classPropertyName: "pageSizeListboxAriaLabel", publicName: "pageSizeListboxAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageLabel: { classPropertyName: "itemsPerPageLabel", publicName: "itemsPerPageLabel", isSignal: true, isRequired: false, transformFunction: null }, itemsInfoTemplate: { classPropertyName: "itemsInfoTemplate", publicName: "itemsInfoTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemsInfoCompactTemplate: { classPropertyName: "itemsInfoCompactTemplate", publicName: "itemsInfoCompactTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", currentPage: "currentPageChange", pageChange: "pageChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<nav\n [class]=\"containerClasses.join(' ')\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"navigation\"\n>\n <!-- V4: Centered variant - prev button on left -->\n <button\n *ngIf=\"variant() === 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--prev pecb-pagination__nav-button--bordered\"\n [disabled]=\"!canGoPrevious\"\n [attr.aria-label]=\"previousPageAriaLabel()\"\n (click)=\"goToPrevious()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 12L6 8L10 4\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <!-- Info section (V1, V2, V3, V4) -->\n <div class=\"pecb-pagination__info\" *ngIf=\"showItemsInfo()\">\n <span class=\"pecb-pagination__items-text\">\n {{ itemsInfoText }}\n </span>\n </div>\n\n <!-- Page size dropdown (V1 only) -->\n <div *ngIf=\"showPageSize\" class=\"pecb-pagination__page-size\">\n <span class=\"pecb-pagination__page-size-label\">{{ itemsPerPageLabel() }}</span>\n <div class=\"pecb-pagination__dropdown\">\n <button\n type=\"button\"\n class=\"pecb-pagination__dropdown-trigger\"\n [class.pecb-pagination__dropdown-trigger--open]=\"isDropdownOpen()\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isDropdownOpen()\"\n aria-haspopup=\"listbox\"\n (click)=\"toggleDropdown()\"\n >\n <span>{{ pageSize() }}</span>\n <svg\n class=\"pecb-pagination__dropdown-icon\"\n [class.pecb-pagination__dropdown-icon--open]=\"isDropdownOpen()\"\n width=\"10\"\n height=\"10\"\n viewBox=\"0 0 10 10\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.5 3.5L5 7L8.5 3.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n </button>\n <ul\n *ngIf=\"isDropdownOpen()\"\n class=\"pecb-pagination__dropdown-menu\"\n role=\"listbox\"\n [attr.aria-label]=\"pageSizeListboxAriaLabel()\"\n >\n <li\n *ngFor=\"let option of pageSizeOptions()\"\n class=\"pecb-pagination__dropdown-item\"\n [class.pecb-pagination__dropdown-item--selected]=\"option === pageSize()\"\n role=\"option\"\n [attr.aria-selected]=\"option === pageSize()\"\n (click)=\"onPageSizeChange(option)\"\n >\n {{ option }}\n </li>\n </ul>\n </div>\n </div>\n\n <!-- Controls section -->\n <div class=\"pecb-pagination__controls\">\n <!-- Previous button (V1, V2, V3) -->\n <button\n *ngIf=\"variant() !== 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--prev\"\n [class.pecb-pagination__nav-button--bordered]=\"variant() === 'minimal'\"\n [disabled]=\"!canGoPrevious\"\n [attr.aria-label]=\"previousPageAriaLabel()\"\n (click)=\"goToPrevious()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 12L6 8L10 4\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <!-- Page numbers (V1, V2) -->\n <div *ngIf=\"showPages\" class=\"pecb-pagination__pages\" role=\"group\" [attr.aria-label]=\"pageNavigationAriaLabel()\">\n <ng-container *ngFor=\"let page of visiblePages(); trackBy: trackByPage\">\n <button\n *ngIf=\"isNumber(page)\"\n type=\"button\"\n class=\"pecb-pagination__page-button\"\n [class.pecb-pagination__page-button--active]=\"page === currentPage()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"pageAriaLabel() + ' ' + page\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n (click)=\"goToPage(+page)\"\n >\n {{ page }}\n </button>\n <span\n *ngIf=\"!isNumber(page)\"\n class=\"pecb-pagination__ellipsis\"\n aria-hidden=\"true\"\n >\n {{ page }}\n </span>\n </ng-container>\n </div>\n\n <!-- Next button (V1, V2, V3) -->\n <button\n *ngIf=\"variant() !== 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--next\"\n [class.pecb-pagination__nav-button--bordered]=\"variant() === 'minimal'\"\n [disabled]=\"!canGoNext\"\n [attr.aria-label]=\"nextPageAriaLabel()\"\n (click)=\"goToNext()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n\n <!-- V4: Centered variant - next button on right -->\n <button\n *ngIf=\"variant() === 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--next pecb-pagination__nav-button--bordered\"\n [disabled]=\"!canGoNext\"\n [attr.aria-label]=\"nextPageAriaLabel()\"\n (click)=\"goToNext()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n</nav>\n", styles: [".pecb-pagination{display:flex;align-items:center;justify-content:space-between;gap:24px;font-family:inherit;width:100%}.pecb-pagination--sm .pecb-pagination__items-text,.pecb-pagination--sm .pecb-pagination__page-size-label{font-size:12px}.pecb-pagination--sm .pecb-pagination__dropdown-trigger{height:28px;padding:0 8px;font-size:12px}.pecb-pagination--sm .pecb-pagination__nav-button,.pecb-pagination--sm .pecb-pagination__page-button{width:28px;height:28px;font-size:12px}.pecb-pagination--sm .pecb-pagination__ellipsis{width:28px;height:28px}.pecb-pagination--md .pecb-pagination__items-text,.pecb-pagination--md .pecb-pagination__page-size-label{font-size:14px}.pecb-pagination--md .pecb-pagination__dropdown-trigger{height:32px;padding:0 12px;font-size:14px}.pecb-pagination--md .pecb-pagination__nav-button,.pecb-pagination--md .pecb-pagination__page-button{width:32px;height:32px;font-size:14px}.pecb-pagination--md .pecb-pagination__ellipsis{width:32px;height:32px}.pecb-pagination--lg .pecb-pagination__items-text,.pecb-pagination--lg .pecb-pagination__page-size-label{font-size:16px}.pecb-pagination--lg .pecb-pagination__dropdown-trigger{height:40px;padding:0 16px;font-size:16px}.pecb-pagination--lg .pecb-pagination__nav-button,.pecb-pagination--lg .pecb-pagination__page-button{width:40px;height:40px;font-size:16px}.pecb-pagination--lg .pecb-pagination__ellipsis{width:40px;height:40px}.pecb-pagination--full{justify-content:space-between}.pecb-pagination--full .pecb-pagination__info{flex:1}.pecb-pagination--full .pecb-pagination__page-size{flex:0 0 auto}.pecb-pagination--full .pecb-pagination__controls{flex:1;justify-content:flex-end}.pecb-pagination--compact{justify-content:space-between}.pecb-pagination--compact .pecb-pagination__info{gap:0}.pecb-pagination--minimal{justify-content:space-between}.pecb-pagination--minimal .pecb-pagination__controls{gap:8px}.pecb-pagination--centered{justify-content:space-between}.pecb-pagination--centered .pecb-pagination__info{flex:1;justify-content:center}.pecb-pagination--centered .pecb-pagination__controls{display:none}.pecb-pagination--disabled{opacity:.5;pointer-events:none}.pecb-pagination__info{display:flex;align-items:center;gap:24px}.pecb-pagination__items-text{color:#919191;font-weight:400;white-space:nowrap}.pecb-pagination__page-size{display:flex;align-items:center;gap:8px}.pecb-pagination__page-size-label{color:#919191;font-weight:400;white-space:nowrap}.pecb-pagination__dropdown{position:relative}.pecb-pagination__dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:64px;background-color:#fff;border:1px solid #ececec;border-radius:6px;color:#919191;font-family:inherit;font-weight:400;cursor:pointer;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.pecb-pagination__dropdown-trigger:hover:not(:disabled){border-color:#919191}.pecb-pagination__dropdown-trigger:focus{outline:none;border-color:#212427;box-shadow:0 0 0 2px #2124271a}.pecb-pagination__dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.pecb-pagination__dropdown-trigger--open{border-color:#212427}.pecb-pagination__dropdown-icon{color:#616161;transition:transform .15s ease-in-out;flex-shrink:0}.pecb-pagination__dropdown-icon--open{transform:rotate(180deg)}.pecb-pagination__dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;min-width:100%;margin:0;padding:8px 0;list-style:none;background-color:#fff;border:1px solid #ececec;border-radius:6px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-pagination__dropdown-item{padding:8px 12px;color:#919191;font-size:14px;font-weight:400;cursor:pointer;text-align:center;transition:background-color .15s ease-in-out,color .15s ease-in-out}.pecb-pagination__dropdown-item:hover{color:#a11e29}.pecb-pagination__dropdown-item--selected{background-color:#ececec;color:#212427;font-weight:500;margin:0 6px;border-radius:6px}.pecb-pagination__controls{display:flex;align-items:center;gap:6px}.pecb-pagination__nav-button{display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;border-radius:8px;color:#919191;cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out,border-color .15s ease-in-out}.pecb-pagination__nav-button:hover:not(:disabled){background-color:#ececec;color:#313131}.pecb-pagination__nav-button:focus{outline:none;box-shadow:0 0 0 2px #21242733}.pecb-pagination__nav-button:disabled{color:#c2c2c2;cursor:not-allowed}.pecb-pagination__nav-button svg{width:16px;height:16px}.pecb-pagination__nav-button--bordered{background-color:#fff;border:1px solid #ececec;border-radius:8px}.pecb-pagination__nav-button--bordered:hover:not(:disabled){background-color:#fff;border-color:#c2c2c2;color:#212427}.pecb-pagination__nav-button--bordered:hover:not(:disabled) svg path{stroke:#212427}.pecb-pagination__nav-button--bordered:disabled{background-color:#fafafa;border-color:#ececec}.pecb-pagination__pages{display:flex;align-items:center;gap:6px}.pecb-pagination__page-button{display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;border-radius:8px;color:#919191;font-family:inherit;font-weight:400;cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out}.pecb-pagination__page-button:hover:not(:disabled):not(.pecb-pagination__page-button--active){background-color:#ececec;color:#a11e29}.pecb-pagination__page-button:focus{outline:none;box-shadow:0 0 0 2px #21242733}.pecb-pagination__page-button:disabled{cursor:not-allowed;opacity:.5}.pecb-pagination__page-button--active{background-color:transparent;color:#a11e29;font-weight:500}.pecb-pagination__page-button--active:hover{background-color:transparent}.pecb-pagination__ellipsis{display:flex;align-items:center;justify-content:center;color:#919191;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4167
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: PaginationComponent, isStandalone: true, selector: "pecb-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, showItemsInfo: { classPropertyName: "showItemsInfo", publicName: "showItemsInfo", isSignal: true, isRequired: false, transformFunction: null }, maxVisiblePages: { classPropertyName: "maxVisiblePages", publicName: "maxVisiblePages", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, previousPageAriaLabel: { classPropertyName: "previousPageAriaLabel", publicName: "previousPageAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, nextPageAriaLabel: { classPropertyName: "nextPageAriaLabel", publicName: "nextPageAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, pageNavigationAriaLabel: { classPropertyName: "pageNavigationAriaLabel", publicName: "pageNavigationAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, pageAriaLabel: { classPropertyName: "pageAriaLabel", publicName: "pageAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, pageSizeListboxAriaLabel: { classPropertyName: "pageSizeListboxAriaLabel", publicName: "pageSizeListboxAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageLabel: { classPropertyName: "itemsPerPageLabel", publicName: "itemsPerPageLabel", isSignal: true, isRequired: false, transformFunction: null }, itemsInfoTemplate: { classPropertyName: "itemsInfoTemplate", publicName: "itemsInfoTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemsInfoCompactTemplate: { classPropertyName: "itemsInfoCompactTemplate", publicName: "itemsInfoCompactTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", currentPage: "currentPageChange", pageChange: "pageChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<nav\n [class]=\"containerClasses.join(' ')\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"navigation\"\n>\n <!-- V4: Centered variant - prev button on left -->\n <button\n *ngIf=\"variant() === 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--prev pecb-pagination__nav-button--bordered\"\n [disabled]=\"!canGoPrevious\"\n [attr.aria-label]=\"previousPageAriaLabel()\"\n (click)=\"goToPrevious()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 12L6 8L10 4\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <!-- Info section (V1, V2, V3, V4) -->\n <div class=\"pecb-pagination__info\" *ngIf=\"showItemsInfo()\">\n <span class=\"pecb-pagination__items-text\">\n {{ itemsInfoText }}\n </span>\n </div>\n\n <!-- Page size dropdown (V1 only) -->\n <div *ngIf=\"showPageSize\" class=\"pecb-pagination__page-size\">\n <span class=\"pecb-pagination__page-size-label\">{{ itemsPerPageLabel() }}</span>\n <div class=\"pecb-pagination__dropdown\">\n <button\n type=\"button\"\n class=\"pecb-pagination__dropdown-trigger\"\n [class.pecb-pagination__dropdown-trigger--open]=\"isDropdownOpen()\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isDropdownOpen()\"\n aria-haspopup=\"listbox\"\n (click)=\"toggleDropdown()\"\n >\n <span>{{ pageSize() }}</span>\n <svg\n class=\"pecb-pagination__dropdown-icon\"\n [class.pecb-pagination__dropdown-icon--open]=\"isDropdownOpen()\"\n width=\"10\"\n height=\"10\"\n viewBox=\"0 0 10 10\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.5 3.5L5 7L8.5 3.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n </button>\n <ul\n *ngIf=\"isDropdownOpen()\"\n class=\"pecb-pagination__dropdown-menu\"\n role=\"listbox\"\n [attr.aria-label]=\"pageSizeListboxAriaLabel()\"\n >\n <li\n *ngFor=\"let option of pageSizeOptions()\"\n class=\"pecb-pagination__dropdown-item\"\n [class.pecb-pagination__dropdown-item--selected]=\"option === pageSize()\"\n role=\"option\"\n [attr.aria-selected]=\"option === pageSize()\"\n (click)=\"onPageSizeChange(option)\"\n >\n {{ option }}\n </li>\n </ul>\n </div>\n </div>\n\n <!-- Controls section -->\n <div class=\"pecb-pagination__controls\">\n <!-- Previous button (V1, V2, V3) -->\n <button\n *ngIf=\"variant() !== 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--prev\"\n [class.pecb-pagination__nav-button--bordered]=\"variant() === 'minimal'\"\n [disabled]=\"!canGoPrevious\"\n [attr.aria-label]=\"previousPageAriaLabel()\"\n (click)=\"goToPrevious()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 12L6 8L10 4\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <!-- Page numbers (V1, V2) -->\n <div *ngIf=\"showPages\" class=\"pecb-pagination__pages\" role=\"group\" [attr.aria-label]=\"pageNavigationAriaLabel()\">\n <ng-container *ngFor=\"let page of visiblePages(); trackBy: trackByPage\">\n <button\n *ngIf=\"isNumber(page)\"\n type=\"button\"\n class=\"pecb-pagination__page-button\"\n [class.pecb-pagination__page-button--active]=\"page === currentPage()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"pageAriaLabel() + ' ' + page\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n (click)=\"goToPage(+page)\"\n >\n {{ page }}\n </button>\n <span\n *ngIf=\"!isNumber(page)\"\n class=\"pecb-pagination__ellipsis\"\n aria-hidden=\"true\"\n >\n {{ page }}\n </span>\n </ng-container>\n </div>\n\n <!-- Next button (V1, V2, V3) -->\n <button\n *ngIf=\"variant() !== 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--next\"\n [class.pecb-pagination__nav-button--bordered]=\"variant() === 'minimal'\"\n [disabled]=\"!canGoNext\"\n [attr.aria-label]=\"nextPageAriaLabel()\"\n (click)=\"goToNext()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n\n <!-- V4: Centered variant - next button on right -->\n <button\n *ngIf=\"variant() === 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--next pecb-pagination__nav-button--bordered\"\n [disabled]=\"!canGoNext\"\n [attr.aria-label]=\"nextPageAriaLabel()\"\n (click)=\"goToNext()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n</nav>\n", styles: [".pecb-pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;font-family:inherit;width:100%}.pecb-pagination--sm .pecb-pagination__items-text,.pecb-pagination--sm .pecb-pagination__page-size-label{font-size:12px}.pecb-pagination--sm .pecb-pagination__dropdown-trigger{height:28px;padding:0 8px;font-size:12px}.pecb-pagination--sm .pecb-pagination__nav-button,.pecb-pagination--sm .pecb-pagination__page-button{width:28px;height:28px;font-size:12px}.pecb-pagination--sm .pecb-pagination__ellipsis{width:28px;height:28px}.pecb-pagination--md .pecb-pagination__items-text,.pecb-pagination--md .pecb-pagination__page-size-label{font-size:14px}.pecb-pagination--md .pecb-pagination__dropdown-trigger{height:32px;padding:0 12px;font-size:14px}.pecb-pagination--md .pecb-pagination__nav-button,.pecb-pagination--md .pecb-pagination__page-button{width:32px;height:32px;font-size:14px}.pecb-pagination--md .pecb-pagination__ellipsis{width:32px;height:32px}.pecb-pagination--lg .pecb-pagination__items-text,.pecb-pagination--lg .pecb-pagination__page-size-label{font-size:16px}.pecb-pagination--lg .pecb-pagination__dropdown-trigger{height:40px;padding:0 16px;font-size:16px}.pecb-pagination--lg .pecb-pagination__nav-button,.pecb-pagination--lg .pecb-pagination__page-button{width:40px;height:40px;font-size:16px}.pecb-pagination--lg .pecb-pagination__ellipsis{width:40px;height:40px}.pecb-pagination--full{justify-content:space-between}.pecb-pagination--full .pecb-pagination__info{flex:1}.pecb-pagination--full .pecb-pagination__page-size{flex:0 0 auto}.pecb-pagination--full .pecb-pagination__controls{flex:1;justify-content:flex-end}.pecb-pagination--compact{justify-content:space-between}.pecb-pagination--compact .pecb-pagination__info{gap:0}.pecb-pagination--minimal{justify-content:space-between}.pecb-pagination--minimal .pecb-pagination__controls{gap:8px}.pecb-pagination--centered{justify-content:space-between}.pecb-pagination--centered .pecb-pagination__info{flex:1;justify-content:center}.pecb-pagination--centered .pecb-pagination__controls{display:none}.pecb-pagination--disabled{opacity:.5;pointer-events:none}.pecb-pagination__info{display:flex;align-items:center;gap:24px}.pecb-pagination__items-text{color:#919191;font-weight:400;white-space:nowrap}.pecb-pagination__page-size{display:flex;align-items:center;gap:8px}.pecb-pagination__page-size-label{color:#919191;font-weight:400;white-space:nowrap}.pecb-pagination__dropdown{position:relative}.pecb-pagination__dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:64px;background-color:#fff;border:1px solid #ececec;border-radius:6px;color:#919191;font-family:inherit;font-weight:400;cursor:pointer;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.pecb-pagination__dropdown-trigger:hover:not(:disabled){border-color:#919191}.pecb-pagination__dropdown-trigger:focus{outline:none;border-color:#212427;box-shadow:0 0 0 2px #2124271a}.pecb-pagination__dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.pecb-pagination__dropdown-trigger--open{border-color:#212427}.pecb-pagination__dropdown-icon{color:#616161;transition:transform .15s ease-in-out;flex-shrink:0}.pecb-pagination__dropdown-icon--open{transform:rotate(180deg)}.pecb-pagination__dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;min-width:100%;margin:0;padding:8px 0;list-style:none;background-color:#fff;border:1px solid #ececec;border-radius:6px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-pagination__dropdown-item{padding:8px 12px;color:#919191;font-size:14px;font-weight:400;cursor:pointer;text-align:center;transition:background-color .15s ease-in-out,color .15s ease-in-out}.pecb-pagination__dropdown-item:hover{color:#a11e29}.pecb-pagination__dropdown-item--selected{background-color:#ececec;color:#212427;font-weight:500;margin:0 6px;border-radius:6px}.pecb-pagination__controls{display:flex;align-items:center;gap:6px}.pecb-pagination__nav-button{display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;border-radius:8px;color:#919191;cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out,border-color .15s ease-in-out}.pecb-pagination__nav-button:hover:not(:disabled){background-color:#ececec;color:#313131}.pecb-pagination__nav-button:focus{outline:none;box-shadow:0 0 0 2px #21242733}.pecb-pagination__nav-button:disabled{color:#c2c2c2;cursor:not-allowed}.pecb-pagination__nav-button svg{width:16px;height:16px}.pecb-pagination__nav-button--bordered{background-color:#fff;border:1px solid #ececec;border-radius:8px}.pecb-pagination__nav-button--bordered:hover:not(:disabled){background-color:#fff;border-color:#c2c2c2;color:#212427}.pecb-pagination__nav-button--bordered:hover:not(:disabled) svg path{stroke:#212427}.pecb-pagination__nav-button--bordered:disabled{background-color:#fafafa;border-color:#ececec}.pecb-pagination__pages{display:flex;align-items:center;gap:6px}.pecb-pagination__page-button{display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;border-radius:8px;color:#919191;font-family:inherit;font-weight:400;cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out}.pecb-pagination__page-button:hover:not(:disabled):not(.pecb-pagination__page-button--active){background-color:#ececec;color:#a11e29}.pecb-pagination__page-button:focus{outline:none;box-shadow:0 0 0 2px #21242733}.pecb-pagination__page-button:disabled{cursor:not-allowed;opacity:.5}.pecb-pagination__page-button--active{background-color:transparent;color:#a11e29;font-weight:500}.pecb-pagination__page-button--active:hover{background-color:transparent}.pecb-pagination__ellipsis{display:flex;align-items:center;justify-content:center;color:#919191;font-size:14px}@media (max-width: 767px){.pecb-pagination{column-gap:16px}.pecb-pagination__info{gap:16px}.pecb-pagination .pecb-pagination__controls{flex:1 1 100%;justify-content:flex-start}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4159
4168
|
}
|
|
4160
4169
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
4161
4170
|
type: Component,
|
|
4162
|
-
args: [{ selector: 'pecb-pagination', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n [class]=\"containerClasses.join(' ')\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"navigation\"\n>\n <!-- V4: Centered variant - prev button on left -->\n <button\n *ngIf=\"variant() === 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--prev pecb-pagination__nav-button--bordered\"\n [disabled]=\"!canGoPrevious\"\n [attr.aria-label]=\"previousPageAriaLabel()\"\n (click)=\"goToPrevious()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 12L6 8L10 4\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <!-- Info section (V1, V2, V3, V4) -->\n <div class=\"pecb-pagination__info\" *ngIf=\"showItemsInfo()\">\n <span class=\"pecb-pagination__items-text\">\n {{ itemsInfoText }}\n </span>\n </div>\n\n <!-- Page size dropdown (V1 only) -->\n <div *ngIf=\"showPageSize\" class=\"pecb-pagination__page-size\">\n <span class=\"pecb-pagination__page-size-label\">{{ itemsPerPageLabel() }}</span>\n <div class=\"pecb-pagination__dropdown\">\n <button\n type=\"button\"\n class=\"pecb-pagination__dropdown-trigger\"\n [class.pecb-pagination__dropdown-trigger--open]=\"isDropdownOpen()\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isDropdownOpen()\"\n aria-haspopup=\"listbox\"\n (click)=\"toggleDropdown()\"\n >\n <span>{{ pageSize() }}</span>\n <svg\n class=\"pecb-pagination__dropdown-icon\"\n [class.pecb-pagination__dropdown-icon--open]=\"isDropdownOpen()\"\n width=\"10\"\n height=\"10\"\n viewBox=\"0 0 10 10\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.5 3.5L5 7L8.5 3.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n </button>\n <ul\n *ngIf=\"isDropdownOpen()\"\n class=\"pecb-pagination__dropdown-menu\"\n role=\"listbox\"\n [attr.aria-label]=\"pageSizeListboxAriaLabel()\"\n >\n <li\n *ngFor=\"let option of pageSizeOptions()\"\n class=\"pecb-pagination__dropdown-item\"\n [class.pecb-pagination__dropdown-item--selected]=\"option === pageSize()\"\n role=\"option\"\n [attr.aria-selected]=\"option === pageSize()\"\n (click)=\"onPageSizeChange(option)\"\n >\n {{ option }}\n </li>\n </ul>\n </div>\n </div>\n\n <!-- Controls section -->\n <div class=\"pecb-pagination__controls\">\n <!-- Previous button (V1, V2, V3) -->\n <button\n *ngIf=\"variant() !== 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--prev\"\n [class.pecb-pagination__nav-button--bordered]=\"variant() === 'minimal'\"\n [disabled]=\"!canGoPrevious\"\n [attr.aria-label]=\"previousPageAriaLabel()\"\n (click)=\"goToPrevious()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 12L6 8L10 4\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <!-- Page numbers (V1, V2) -->\n <div *ngIf=\"showPages\" class=\"pecb-pagination__pages\" role=\"group\" [attr.aria-label]=\"pageNavigationAriaLabel()\">\n <ng-container *ngFor=\"let page of visiblePages(); trackBy: trackByPage\">\n <button\n *ngIf=\"isNumber(page)\"\n type=\"button\"\n class=\"pecb-pagination__page-button\"\n [class.pecb-pagination__page-button--active]=\"page === currentPage()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"pageAriaLabel() + ' ' + page\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n (click)=\"goToPage(+page)\"\n >\n {{ page }}\n </button>\n <span\n *ngIf=\"!isNumber(page)\"\n class=\"pecb-pagination__ellipsis\"\n aria-hidden=\"true\"\n >\n {{ page }}\n </span>\n </ng-container>\n </div>\n\n <!-- Next button (V1, V2, V3) -->\n <button\n *ngIf=\"variant() !== 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--next\"\n [class.pecb-pagination__nav-button--bordered]=\"variant() === 'minimal'\"\n [disabled]=\"!canGoNext\"\n [attr.aria-label]=\"nextPageAriaLabel()\"\n (click)=\"goToNext()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n\n <!-- V4: Centered variant - next button on right -->\n <button\n *ngIf=\"variant() === 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--next pecb-pagination__nav-button--bordered\"\n [disabled]=\"!canGoNext\"\n [attr.aria-label]=\"nextPageAriaLabel()\"\n (click)=\"goToNext()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n</nav>\n", styles: [".pecb-pagination{display:flex;align-items:center;justify-content:space-between;gap:24px;font-family:inherit;width:100%}.pecb-pagination--sm .pecb-pagination__items-text,.pecb-pagination--sm .pecb-pagination__page-size-label{font-size:12px}.pecb-pagination--sm .pecb-pagination__dropdown-trigger{height:28px;padding:0 8px;font-size:12px}.pecb-pagination--sm .pecb-pagination__nav-button,.pecb-pagination--sm .pecb-pagination__page-button{width:28px;height:28px;font-size:12px}.pecb-pagination--sm .pecb-pagination__ellipsis{width:28px;height:28px}.pecb-pagination--md .pecb-pagination__items-text,.pecb-pagination--md .pecb-pagination__page-size-label{font-size:14px}.pecb-pagination--md .pecb-pagination__dropdown-trigger{height:32px;padding:0 12px;font-size:14px}.pecb-pagination--md .pecb-pagination__nav-button,.pecb-pagination--md .pecb-pagination__page-button{width:32px;height:32px;font-size:14px}.pecb-pagination--md .pecb-pagination__ellipsis{width:32px;height:32px}.pecb-pagination--lg .pecb-pagination__items-text,.pecb-pagination--lg .pecb-pagination__page-size-label{font-size:16px}.pecb-pagination--lg .pecb-pagination__dropdown-trigger{height:40px;padding:0 16px;font-size:16px}.pecb-pagination--lg .pecb-pagination__nav-button,.pecb-pagination--lg .pecb-pagination__page-button{width:40px;height:40px;font-size:16px}.pecb-pagination--lg .pecb-pagination__ellipsis{width:40px;height:40px}.pecb-pagination--full{justify-content:space-between}.pecb-pagination--full .pecb-pagination__info{flex:1}.pecb-pagination--full .pecb-pagination__page-size{flex:0 0 auto}.pecb-pagination--full .pecb-pagination__controls{flex:1;justify-content:flex-end}.pecb-pagination--compact{justify-content:space-between}.pecb-pagination--compact .pecb-pagination__info{gap:0}.pecb-pagination--minimal{justify-content:space-between}.pecb-pagination--minimal .pecb-pagination__controls{gap:8px}.pecb-pagination--centered{justify-content:space-between}.pecb-pagination--centered .pecb-pagination__info{flex:1;justify-content:center}.pecb-pagination--centered .pecb-pagination__controls{display:none}.pecb-pagination--disabled{opacity:.5;pointer-events:none}.pecb-pagination__info{display:flex;align-items:center;gap:24px}.pecb-pagination__items-text{color:#919191;font-weight:400;white-space:nowrap}.pecb-pagination__page-size{display:flex;align-items:center;gap:8px}.pecb-pagination__page-size-label{color:#919191;font-weight:400;white-space:nowrap}.pecb-pagination__dropdown{position:relative}.pecb-pagination__dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:64px;background-color:#fff;border:1px solid #ececec;border-radius:6px;color:#919191;font-family:inherit;font-weight:400;cursor:pointer;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.pecb-pagination__dropdown-trigger:hover:not(:disabled){border-color:#919191}.pecb-pagination__dropdown-trigger:focus{outline:none;border-color:#212427;box-shadow:0 0 0 2px #2124271a}.pecb-pagination__dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.pecb-pagination__dropdown-trigger--open{border-color:#212427}.pecb-pagination__dropdown-icon{color:#616161;transition:transform .15s ease-in-out;flex-shrink:0}.pecb-pagination__dropdown-icon--open{transform:rotate(180deg)}.pecb-pagination__dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;min-width:100%;margin:0;padding:8px 0;list-style:none;background-color:#fff;border:1px solid #ececec;border-radius:6px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-pagination__dropdown-item{padding:8px 12px;color:#919191;font-size:14px;font-weight:400;cursor:pointer;text-align:center;transition:background-color .15s ease-in-out,color .15s ease-in-out}.pecb-pagination__dropdown-item:hover{color:#a11e29}.pecb-pagination__dropdown-item--selected{background-color:#ececec;color:#212427;font-weight:500;margin:0 6px;border-radius:6px}.pecb-pagination__controls{display:flex;align-items:center;gap:6px}.pecb-pagination__nav-button{display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;border-radius:8px;color:#919191;cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out,border-color .15s ease-in-out}.pecb-pagination__nav-button:hover:not(:disabled){background-color:#ececec;color:#313131}.pecb-pagination__nav-button:focus{outline:none;box-shadow:0 0 0 2px #21242733}.pecb-pagination__nav-button:disabled{color:#c2c2c2;cursor:not-allowed}.pecb-pagination__nav-button svg{width:16px;height:16px}.pecb-pagination__nav-button--bordered{background-color:#fff;border:1px solid #ececec;border-radius:8px}.pecb-pagination__nav-button--bordered:hover:not(:disabled){background-color:#fff;border-color:#c2c2c2;color:#212427}.pecb-pagination__nav-button--bordered:hover:not(:disabled) svg path{stroke:#212427}.pecb-pagination__nav-button--bordered:disabled{background-color:#fafafa;border-color:#ececec}.pecb-pagination__pages{display:flex;align-items:center;gap:6px}.pecb-pagination__page-button{display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;border-radius:8px;color:#919191;font-family:inherit;font-weight:400;cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out}.pecb-pagination__page-button:hover:not(:disabled):not(.pecb-pagination__page-button--active){background-color:#ececec;color:#a11e29}.pecb-pagination__page-button:focus{outline:none;box-shadow:0 0 0 2px #21242733}.pecb-pagination__page-button:disabled{cursor:not-allowed;opacity:.5}.pecb-pagination__page-button--active{background-color:transparent;color:#a11e29;font-weight:500}.pecb-pagination__page-button--active:hover{background-color:transparent}.pecb-pagination__ellipsis{display:flex;align-items:center;justify-content:center;color:#919191;font-size:14px}\n"] }]
|
|
4171
|
+
args: [{ selector: 'pecb-pagination', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n [class]=\"containerClasses.join(' ')\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"navigation\"\n>\n <!-- V4: Centered variant - prev button on left -->\n <button\n *ngIf=\"variant() === 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--prev pecb-pagination__nav-button--bordered\"\n [disabled]=\"!canGoPrevious\"\n [attr.aria-label]=\"previousPageAriaLabel()\"\n (click)=\"goToPrevious()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 12L6 8L10 4\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <!-- Info section (V1, V2, V3, V4) -->\n <div class=\"pecb-pagination__info\" *ngIf=\"showItemsInfo()\">\n <span class=\"pecb-pagination__items-text\">\n {{ itemsInfoText }}\n </span>\n </div>\n\n <!-- Page size dropdown (V1 only) -->\n <div *ngIf=\"showPageSize\" class=\"pecb-pagination__page-size\">\n <span class=\"pecb-pagination__page-size-label\">{{ itemsPerPageLabel() }}</span>\n <div class=\"pecb-pagination__dropdown\">\n <button\n type=\"button\"\n class=\"pecb-pagination__dropdown-trigger\"\n [class.pecb-pagination__dropdown-trigger--open]=\"isDropdownOpen()\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isDropdownOpen()\"\n aria-haspopup=\"listbox\"\n (click)=\"toggleDropdown()\"\n >\n <span>{{ pageSize() }}</span>\n <svg\n class=\"pecb-pagination__dropdown-icon\"\n [class.pecb-pagination__dropdown-icon--open]=\"isDropdownOpen()\"\n width=\"10\"\n height=\"10\"\n viewBox=\"0 0 10 10\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.5 3.5L5 7L8.5 3.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n </button>\n <ul\n *ngIf=\"isDropdownOpen()\"\n class=\"pecb-pagination__dropdown-menu\"\n role=\"listbox\"\n [attr.aria-label]=\"pageSizeListboxAriaLabel()\"\n >\n <li\n *ngFor=\"let option of pageSizeOptions()\"\n class=\"pecb-pagination__dropdown-item\"\n [class.pecb-pagination__dropdown-item--selected]=\"option === pageSize()\"\n role=\"option\"\n [attr.aria-selected]=\"option === pageSize()\"\n (click)=\"onPageSizeChange(option)\"\n >\n {{ option }}\n </li>\n </ul>\n </div>\n </div>\n\n <!-- Controls section -->\n <div class=\"pecb-pagination__controls\">\n <!-- Previous button (V1, V2, V3) -->\n <button\n *ngIf=\"variant() !== 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--prev\"\n [class.pecb-pagination__nav-button--bordered]=\"variant() === 'minimal'\"\n [disabled]=\"!canGoPrevious\"\n [attr.aria-label]=\"previousPageAriaLabel()\"\n (click)=\"goToPrevious()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 12L6 8L10 4\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <!-- Page numbers (V1, V2) -->\n <div *ngIf=\"showPages\" class=\"pecb-pagination__pages\" role=\"group\" [attr.aria-label]=\"pageNavigationAriaLabel()\">\n <ng-container *ngFor=\"let page of visiblePages(); trackBy: trackByPage\">\n <button\n *ngIf=\"isNumber(page)\"\n type=\"button\"\n class=\"pecb-pagination__page-button\"\n [class.pecb-pagination__page-button--active]=\"page === currentPage()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"pageAriaLabel() + ' ' + page\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n (click)=\"goToPage(+page)\"\n >\n {{ page }}\n </button>\n <span\n *ngIf=\"!isNumber(page)\"\n class=\"pecb-pagination__ellipsis\"\n aria-hidden=\"true\"\n >\n {{ page }}\n </span>\n </ng-container>\n </div>\n\n <!-- Next button (V1, V2, V3) -->\n <button\n *ngIf=\"variant() !== 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--next\"\n [class.pecb-pagination__nav-button--bordered]=\"variant() === 'minimal'\"\n [disabled]=\"!canGoNext\"\n [attr.aria-label]=\"nextPageAriaLabel()\"\n (click)=\"goToNext()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n\n <!-- V4: Centered variant - next button on right -->\n <button\n *ngIf=\"variant() === 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--next pecb-pagination__nav-button--bordered\"\n [disabled]=\"!canGoNext\"\n [attr.aria-label]=\"nextPageAriaLabel()\"\n (click)=\"goToNext()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n</nav>\n", styles: [".pecb-pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;font-family:inherit;width:100%}.pecb-pagination--sm .pecb-pagination__items-text,.pecb-pagination--sm .pecb-pagination__page-size-label{font-size:12px}.pecb-pagination--sm .pecb-pagination__dropdown-trigger{height:28px;padding:0 8px;font-size:12px}.pecb-pagination--sm .pecb-pagination__nav-button,.pecb-pagination--sm .pecb-pagination__page-button{width:28px;height:28px;font-size:12px}.pecb-pagination--sm .pecb-pagination__ellipsis{width:28px;height:28px}.pecb-pagination--md .pecb-pagination__items-text,.pecb-pagination--md .pecb-pagination__page-size-label{font-size:14px}.pecb-pagination--md .pecb-pagination__dropdown-trigger{height:32px;padding:0 12px;font-size:14px}.pecb-pagination--md .pecb-pagination__nav-button,.pecb-pagination--md .pecb-pagination__page-button{width:32px;height:32px;font-size:14px}.pecb-pagination--md .pecb-pagination__ellipsis{width:32px;height:32px}.pecb-pagination--lg .pecb-pagination__items-text,.pecb-pagination--lg .pecb-pagination__page-size-label{font-size:16px}.pecb-pagination--lg .pecb-pagination__dropdown-trigger{height:40px;padding:0 16px;font-size:16px}.pecb-pagination--lg .pecb-pagination__nav-button,.pecb-pagination--lg .pecb-pagination__page-button{width:40px;height:40px;font-size:16px}.pecb-pagination--lg .pecb-pagination__ellipsis{width:40px;height:40px}.pecb-pagination--full{justify-content:space-between}.pecb-pagination--full .pecb-pagination__info{flex:1}.pecb-pagination--full .pecb-pagination__page-size{flex:0 0 auto}.pecb-pagination--full .pecb-pagination__controls{flex:1;justify-content:flex-end}.pecb-pagination--compact{justify-content:space-between}.pecb-pagination--compact .pecb-pagination__info{gap:0}.pecb-pagination--minimal{justify-content:space-between}.pecb-pagination--minimal .pecb-pagination__controls{gap:8px}.pecb-pagination--centered{justify-content:space-between}.pecb-pagination--centered .pecb-pagination__info{flex:1;justify-content:center}.pecb-pagination--centered .pecb-pagination__controls{display:none}.pecb-pagination--disabled{opacity:.5;pointer-events:none}.pecb-pagination__info{display:flex;align-items:center;gap:24px}.pecb-pagination__items-text{color:#919191;font-weight:400;white-space:nowrap}.pecb-pagination__page-size{display:flex;align-items:center;gap:8px}.pecb-pagination__page-size-label{color:#919191;font-weight:400;white-space:nowrap}.pecb-pagination__dropdown{position:relative}.pecb-pagination__dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:64px;background-color:#fff;border:1px solid #ececec;border-radius:6px;color:#919191;font-family:inherit;font-weight:400;cursor:pointer;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.pecb-pagination__dropdown-trigger:hover:not(:disabled){border-color:#919191}.pecb-pagination__dropdown-trigger:focus{outline:none;border-color:#212427;box-shadow:0 0 0 2px #2124271a}.pecb-pagination__dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.pecb-pagination__dropdown-trigger--open{border-color:#212427}.pecb-pagination__dropdown-icon{color:#616161;transition:transform .15s ease-in-out;flex-shrink:0}.pecb-pagination__dropdown-icon--open{transform:rotate(180deg)}.pecb-pagination__dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;min-width:100%;margin:0;padding:8px 0;list-style:none;background-color:#fff;border:1px solid #ececec;border-radius:6px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-pagination__dropdown-item{padding:8px 12px;color:#919191;font-size:14px;font-weight:400;cursor:pointer;text-align:center;transition:background-color .15s ease-in-out,color .15s ease-in-out}.pecb-pagination__dropdown-item:hover{color:#a11e29}.pecb-pagination__dropdown-item--selected{background-color:#ececec;color:#212427;font-weight:500;margin:0 6px;border-radius:6px}.pecb-pagination__controls{display:flex;align-items:center;gap:6px}.pecb-pagination__nav-button{display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;border-radius:8px;color:#919191;cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out,border-color .15s ease-in-out}.pecb-pagination__nav-button:hover:not(:disabled){background-color:#ececec;color:#313131}.pecb-pagination__nav-button:focus{outline:none;box-shadow:0 0 0 2px #21242733}.pecb-pagination__nav-button:disabled{color:#c2c2c2;cursor:not-allowed}.pecb-pagination__nav-button svg{width:16px;height:16px}.pecb-pagination__nav-button--bordered{background-color:#fff;border:1px solid #ececec;border-radius:8px}.pecb-pagination__nav-button--bordered:hover:not(:disabled){background-color:#fff;border-color:#c2c2c2;color:#212427}.pecb-pagination__nav-button--bordered:hover:not(:disabled) svg path{stroke:#212427}.pecb-pagination__nav-button--bordered:disabled{background-color:#fafafa;border-color:#ececec}.pecb-pagination__pages{display:flex;align-items:center;gap:6px}.pecb-pagination__page-button{display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;border-radius:8px;color:#919191;font-family:inherit;font-weight:400;cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out}.pecb-pagination__page-button:hover:not(:disabled):not(.pecb-pagination__page-button--active){background-color:#ececec;color:#a11e29}.pecb-pagination__page-button:focus{outline:none;box-shadow:0 0 0 2px #21242733}.pecb-pagination__page-button:disabled{cursor:not-allowed;opacity:.5}.pecb-pagination__page-button--active{background-color:transparent;color:#a11e29;font-weight:500}.pecb-pagination__page-button--active:hover{background-color:transparent}.pecb-pagination__ellipsis{display:flex;align-items:center;justify-content:center;color:#919191;font-size:14px}@media (max-width: 767px){.pecb-pagination{column-gap:16px}.pecb-pagination__info{gap:16px}.pecb-pagination .pecb-pagination__controls{flex:1 1 100%;justify-content:flex-start}}\n"] }]
|
|
4163
4172
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showPageSizeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelector", required: false }] }], showItemsInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showItemsInfo", required: false }] }], maxVisiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisiblePages", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], previousPageAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPageAriaLabel", required: false }] }], nextPageAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPageAriaLabel", required: false }] }], pageNavigationAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageNavigationAriaLabel", required: false }] }], pageAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageAriaLabel", required: false }] }], pageSizeListboxAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeListboxAriaLabel", required: false }] }], itemsPerPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPageLabel", required: false }] }], itemsInfoTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsInfoTemplate", required: false }] }], itemsInfoCompactTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsInfoCompactTemplate", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], onDocumentClick: [{
|
|
4164
4173
|
type: HostListener,
|
|
4165
4174
|
args: ['document:click', ['$event']]
|
|
@@ -4257,6 +4266,18 @@ class TableComponent {
|
|
|
4257
4266
|
* Maximum height of the table body (enables scrolling)
|
|
4258
4267
|
*/
|
|
4259
4268
|
this.maxHeight = input(undefined, ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
|
|
4269
|
+
/**
|
|
4270
|
+
* Minimum width of the table (any CSS value, e.g. '800px', '60rem').
|
|
4271
|
+
* Below this, the container scrolls horizontally instead of squishing
|
|
4272
|
+
* columns — useful for wide tables on responsive / narrow screens.
|
|
4273
|
+
*/
|
|
4274
|
+
this.minWidth = input(undefined, ...(ngDevMode ? [{ debugName: "minWidth" }] : []));
|
|
4275
|
+
/**
|
|
4276
|
+
* When true, long cell text wraps onto multiple lines.
|
|
4277
|
+
* When false (default), it truncates with an ellipsis (…) and the full
|
|
4278
|
+
* value is shown on hover via the cell's title. Per-column `wrap` overrides this.
|
|
4279
|
+
*/
|
|
4280
|
+
this.wrapText = input(false, ...(ngDevMode ? [{ debugName: "wrapText" }] : []));
|
|
4260
4281
|
/**
|
|
4261
4282
|
* Column key currently being sorted
|
|
4262
4283
|
*/
|
|
@@ -4337,6 +4358,20 @@ class TableComponent {
|
|
|
4337
4358
|
return '';
|
|
4338
4359
|
return `pecb-table__cell--${column.align}`;
|
|
4339
4360
|
}
|
|
4361
|
+
/** Whether a column's cells wrap long text (per-column overrides the table default). */
|
|
4362
|
+
isCellWrapped(column) {
|
|
4363
|
+
return column.wrap ?? this.wrapText();
|
|
4364
|
+
}
|
|
4365
|
+
/** Full text shown on hover for truncated text/link cells (so nothing is lost). */
|
|
4366
|
+
getCellTitle(row, column) {
|
|
4367
|
+
if (this.isCellWrapped(column))
|
|
4368
|
+
return null;
|
|
4369
|
+
const type = this.getColumnType(column);
|
|
4370
|
+
if (type !== 'text' && type !== 'link')
|
|
4371
|
+
return null;
|
|
4372
|
+
const value = this.getCellValue(row, column.key);
|
|
4373
|
+
return value !== null && value !== undefined && value !== '' ? String(value) : null;
|
|
4374
|
+
}
|
|
4340
4375
|
onRowClick(row, index) {
|
|
4341
4376
|
if (this.selectable())
|
|
4342
4377
|
this.toggleRowSelection(index);
|
|
@@ -4479,12 +4514,12 @@ class TableComponent {
|
|
|
4479
4514
|
this.selectionChange.emit({ selectedRows, selectedIndices: this.selectedIndices() });
|
|
4480
4515
|
}
|
|
4481
4516
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, deps: [{ token: i1$1.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4482
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "pecb-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, showPagination: { classPropertyName: "showPagination", publicName: "showPagination", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, paginationVariant: { classPropertyName: "paginationVariant", publicName: "paginationVariant", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectedIndices: { classPropertyName: "selectedIndices", publicName: "selectedIndices", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, selectAllAriaLabel: { classPropertyName: "selectAllAriaLabel", publicName: "selectAllAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, selectRowAriaLabel: { classPropertyName: "selectRowAriaLabel", publicName: "selectRowAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", pageSize: "pageSizeChange", selectedIndices: "selectedIndicesChange", sortColumn: "sortColumnChange", sortDirection: "sortDirectionChange", pageChange: "pageChange", rowClick: "rowClick", rowAction: "rowAction", sortChange: "sortChange", selectionChange: "selectionChange" }, queries: [{ propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "loadingTemplate", first: true, predicate: ["loadingTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"pecb-table-wrapper\">\n <div [class]=\"containerClasses\" [style.maxHeight]=\"maxHeight()\">\n <!-- Loading State -->\n <div *ngIf=\"loading()\" class=\"pecb-table__loading\">\n <ng-container *ngIf=\"loadingTemplate; else defaultLoading\">\n <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n </ng-container>\n <ng-template #defaultLoading>\n <div class=\"pecb-table__loading-spinner\">\n <svg class=\"pecb-table__spinner-icon\" viewBox=\"0 0 24 24\" fill=\"none\">\n <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-dasharray=\"31.4 31.4\" />\n </svg>\n <span>{{ loadingText() }}</span>\n </div>\n </ng-template>\n </div>\n\n <!-- Table -->\n <table\n *ngIf=\"!loading()\"\n [class]=\"tableClasses\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"table\">\n\n <!-- Table Header -->\n <thead *ngIf=\"showHeader()\" class=\"pecb-table__head\" [class.pecb-table__head--sticky]=\"stickyHeader()\">\n <tr class=\"pecb-table__row pecb-table__row--header\" role=\"row\">\n <!-- Selection Checkbox Column -->\n <th\n *ngIf=\"selectable()\"\n class=\"pecb-table__cell pecb-table__cell--header pecb-table__cell--checkbox\"\n role=\"columnheader\"\n scope=\"col\">\n <label class=\"pecb-table__checkbox-wrapper\">\n <input\n type=\"checkbox\"\n class=\"pecb-table__checkbox\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isSomeSelected()\"\n (change)=\"toggleAllSelection()\"\n [attr.aria-label]=\"selectAllAriaLabel()\" />\n <span class=\"pecb-table__checkbox-custom\"></span>\n </label>\n </th>\n\n <!-- Data Columns -->\n <th\n *ngFor=\"let column of columns(); trackBy: trackByKey\"\n class=\"pecb-table__cell pecb-table__cell--header\"\n [class.pecb-table__cell--sortable]=\"column.sortable\"\n [class]=\"getAlignmentClass(column)\"\n [ngClass]=\"column.cssClass\"\n [style.width]=\"column.width\"\n [attr.aria-sort]=\"column.sortable ? (sortColumn() === column.key ? (sortDirection() === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n role=\"columnheader\"\n scope=\"col\"\n (click)=\"onHeaderClick(column)\"\n (keydown.enter)=\"onHeaderClick(column)\"\n (keydown.space)=\"onHeaderClick(column); $event.preventDefault()\"\n [attr.tabindex]=\"column.sortable ? 0 : null\">\n <div class=\"pecb-table__header-content\">\n <ng-container *ngIf=\"column.headerTemplate; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <span class=\"pecb-table__header-text\">{{ column.label }}</span>\n </ng-template>\n\n <!-- Sort Icon -->\n <span *ngIf=\"column.sortable\" class=\"pecb-table__sort-icon\" [attr.data-sort]=\"getSortState(column)\">\n <svg *ngIf=\"getSortState(column) === 'none'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8 3L12 7H4L8 3Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n <path d=\"M8 13L4 9H12L8 13Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n </svg>\n <svg *ngIf=\"getSortState(column) === 'asc'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8 3L12 7H4L8 3Z\" fill=\"currentColor\"/>\n <path d=\"M8 13L4 9H12L8 13Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n </svg>\n <svg *ngIf=\"getSortState(column) === 'desc'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8 3L12 7H4L8 3Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n <path d=\"M8 13L4 9H12L8 13Z\" fill=\"currentColor\"/>\n </svg>\n </span>\n </div>\n </th>\n </tr>\n </thead>\n\n <!-- Table Body -->\n <tbody class=\"pecb-table__body\">\n <!-- Empty State -->\n <tr *ngIf=\"data().length === 0\" class=\"pecb-table__row pecb-table__row--empty\">\n <td\n [attr.colspan]=\"selectable() ? columns().length + 1 : columns().length\"\n class=\"pecb-table__cell pecb-table__cell--empty\">\n <ng-container *ngIf=\"emptyTemplate; else defaultEmpty\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n </ng-container>\n <ng-template #defaultEmpty>\n <div class=\"pecb-table__empty-content\">\n <span class=\"pecb-table__empty-message\">{{ emptyMessage() }}</span>\n </div>\n </ng-template>\n </td>\n </tr>\n\n <!-- Data Rows -->\n <tr\n *ngFor=\"let row of data(); let i = index; trackBy: trackByIndex\"\n class=\"pecb-table__row pecb-table__row--data\"\n [class.pecb-table__row--selected]=\"isRowSelected(i)\"\n role=\"row\"\n (click)=\"onRowClick(row, i)\"\n [attr.tabindex]=\"0\"\n (keydown.enter)=\"onRowClick(row, i)\">\n\n <!-- Selection Checkbox -->\n <td\n *ngIf=\"selectable()\"\n class=\"pecb-table__cell pecb-table__cell--checkbox\"\n role=\"cell\"\n (click)=\"$event.stopPropagation()\">\n <label class=\"pecb-table__checkbox-wrapper\">\n <input\n type=\"checkbox\"\n class=\"pecb-table__checkbox\"\n [checked]=\"isRowSelected(i)\"\n (change)=\"toggleRowSelection(i)\"\n [attr.aria-label]=\"selectRowAriaLabel() + ' ' + (i + 1)\" />\n <span class=\"pecb-table__checkbox-custom\"></span>\n </label>\n </td>\n\n <!-- Data Cells -->\n <td\n *ngFor=\"let column of columns(); trackBy: trackByKey\"\n class=\"pecb-table__cell\"\n [class]=\"getAlignmentClass(column)\"\n [ngClass]=\"column.cssClass\"\n role=\"cell\">\n\n <!-- Custom Template -->\n <ng-container *ngIf=\"column.cellTemplate\">\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: getCellValue(row, column.key), row: row, column: column, index: i }\"></ng-container>\n </ng-container>\n\n <!-- Dynamic Component - renders any component passed via dynamicComponent -->\n <ng-container *ngIf=\"!column.cellTemplate && hasDynamicComponent(column)\">\n <ng-container\n *ngComponentOutlet=\"column.dynamicComponent!; inputs: getDynamicComponentInputs(row, column, i)\">\n </ng-container>\n </ng-container>\n\n <!-- Status Component - renders pecb-status -->\n <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'status'\">\n <pecb-status\n [type]=\"getStatusType(getCellValue(row, column.key), column)\"\n [variant]=\"getStatusVariant(column)\"\n [size]=\"getStatusSize(column)\">\n {{ getCellValue(row, column.key) }}\n </pecb-status>\n </ng-container>\n\n <!-- User Component - renders avatar + name + email -->\n <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'user'\">\n <div class=\"pecb-table__user-cell\">\n <img\n *ngIf=\"getUserData(row, column).avatar\"\n [src]=\"getUserData(row, column).avatar\"\n alt=\"\"\n class=\"pecb-table__user-avatar\">\n <div class=\"pecb-table__user-info\">\n <div class=\"pecb-table__user-name\">{{ getUserData(row, column).name }}</div>\n <div *ngIf=\"getUserData(row, column).secondary\" class=\"pecb-table__user-secondary\">\n {{ getUserData(row, column).secondary }}\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- Action Component - renders action buttons with icons -->\n <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'action'\">\n <div class=\"pecb-table__action-buttons\">\n <ng-container *ngFor=\"let action of getActions(column)\">\n <!-- Divider before this action (consumer-controlled grouping) -->\n <span *ngIf=\"action.dividerBefore\" class=\"pecb-table__action-divider\"></span>\n <button\n class=\"pecb-table__action-btn\"\n [class.pecb-table__action-btn--danger]=\"action.variant === 'danger'\"\n [title]=\"action.tooltip || action.id\"\n [disabled]=\"action.disabled\"\n (click)=\"onActionClick(action, row, i, $event)\">\n <!-- View Icon -->\n <svg *ngIf=\"action.icon === 'view'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"></path>\n <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n </svg>\n <!-- Edit Icon -->\n <svg *ngIf=\"action.icon === 'edit'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"></path>\n <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"></path>\n </svg>\n <!-- Delete Icon -->\n <svg *ngIf=\"action.icon === 'delete'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"3 6 5 6 21 6\"></polyline>\n <path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"></path>\n </svg>\n <!-- Download Icon -->\n <svg *ngIf=\"action.icon === 'download'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\n <polyline points=\"7 10 12 15 17 10\"></polyline>\n <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"></line>\n </svg>\n <!-- Copy Icon -->\n <svg *ngIf=\"action.icon === 'copy'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect>\n <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path>\n </svg>\n <!-- Custom Icon (SVG string) -->\n <span *ngIf=\"action.icon === 'custom' && action.customIcon\" class=\"pecb-table__custom-icon\" [innerHTML]=\"getSafeIcon(action.customIcon)\"></span>\n </button>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Link Cell -->\n <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'link'\">\n <a\n [href]=\"getLinkHref(getCellValue(row, column.key))\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"pecb-table__link\"\n (click)=\"$event.stopPropagation()\">\n {{ getCellValue(row, column.key) }}\n </a>\n </ng-container>\n\n <!-- Default Text -->\n <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'text'\">\n {{ getCellValue(row, column.key) }}\n </ng-container>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <!-- Pagination (outside table container) -->\n <div *ngIf=\"showPagination() && !loading() && data().length > 0\" [class]=\"paginationClasses\">\n <pecb-pagination\n [totalItems]=\"totalItems()\"\n [pageSize]=\"pageSize()\"\n [currentPage]=\"currentPage()\"\n [pageSizeOptions]=\"pageSizeOptions()\"\n [showPageSizeSelector]=\"showPageSizeSelector()\"\n [variant]=\"paginationVariant()\"\n size=\"md\"\n (pageChange)=\"onPageChange($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\">\n </pecb-pagination>\n </div>\n</div>\n", styles: [".pecb-table-wrapper{width:100%}.pecb-table-container{width:100%;background-color:#fff;border-radius:12px;overflow:hidden;border:1px solid #ececec}.pecb-table-container--sticky{position:relative;overflow:auto}.pecb-table{width:100%;border-collapse:collapse;border-spacing:0;font-family:inherit;font-size:14px;color:#313131}.pecb-table--sm{font-size:12px}.pecb-table--sm .pecb-table__cell,.pecb-table--sm .pecb-table__cell--header{padding:8px 12px}.pecb-table--md{font-size:14px}.pecb-table--md .pecb-table__cell{padding:16px 18px}.pecb-table--md .pecb-table__cell--header{padding:12px 18px}.pecb-table--lg{font-size:16px}.pecb-table--lg .pecb-table__cell{padding:18px 20px}.pecb-table--lg .pecb-table__cell--header{padding:16px 20px}.pecb-table--default .pecb-table__row--data{border-bottom:1px solid #ececec}.pecb-table--default .pecb-table__row--data:last-child{border-bottom:none}.pecb-table--default .pecb-table__row--data:last-child .pecb-table__cell{border-bottom:none}.pecb-table--default .pecb-table__row--data:nth-child(2n){background-color:#fafafa}.pecb-table--striped .pecb-table__row--data:nth-child(2n){background-color:#fafafa}.pecb-table--bordered .pecb-table__cell{border:1px solid #f7f5f5}.pecb-table--hoverable .pecb-table__row--data{transition:background-color .15s ease-in-out}.pecb-table--selectable .pecb-table__row--data{cursor:pointer}.pecb-table__head{background-color:#212427}.pecb-table__head--sticky{position:sticky;top:0;z-index:1020}.pecb-table__row--header{text-transform:uppercase;height:52px}.pecb-table__row--data{background-color:#fff;height:58px}.pecb-table__row--data:focus,.pecb-table__row--data:focus-visible{outline:none}.pecb-table__row--selected{background-color:#f4f4f4}.pecb-table__row--selected:hover{background-color:#f7f5f5}.pecb-table__row--empty{background-color:#fff}.pecb-table__cell{text-align:left;vertical-align:middle;white-space:nowrap;border-bottom:1px solid #ececec}.pecb-table__cell--header{font-weight:500;font-size:12px;color:#fff;letter-spacing:.02em;-webkit-user-select:none;user-select:none;border-bottom:none}.pecb-table__cell--sortable{cursor:pointer;transition:background-color .15s ease-in-out}.pecb-table__cell--sortable:hover{background-color:#ffffff1a}.pecb-table__cell--sortable:focus,.pecb-table__cell--sortable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #fff}.pecb-table__cell--checkbox{width:48px;text-align:center}.pecb-table__cell--center{text-align:center}.pecb-table__cell--right{text-align:right}.pecb-table__cell--empty{text-align:center;padding:24px 0}.pecb-table__header-content{display:flex;align-items:center;gap:8px}.pecb-table__header-text{flex:1}.pecb-table__sort-icon{display:flex;align-items:center;justify-content:center;color:#ffffff80;transition:color .15s ease-in-out}.pecb-table__sort-icon svg{width:16px;height:16px}.pecb-table__sort-icon[data-sort=asc],.pecb-table__sort-icon[data-sort=desc]{color:#fff}.pecb-table__checkbox-wrapper{display:inline-flex;align-items:center;justify-content:center;position:relative;cursor:pointer}.pecb-table__checkbox{position:absolute;opacity:0;width:0;height:0}.pecb-table__checkbox:checked+.pecb-table__checkbox-custom{background-color:#212427;border-color:#212427}.pecb-table__checkbox:checked+.pecb-table__checkbox-custom:after{display:block}.pecb-table__checkbox:indeterminate+.pecb-table__checkbox-custom{background-color:#212427;border-color:#212427}.pecb-table__checkbox:indeterminate+.pecb-table__checkbox-custom:before{display:block}.pecb-table__checkbox:indeterminate+.pecb-table__checkbox-custom:after{display:none}.pecb-table__checkbox:focus+.pecb-table__checkbox-custom{box-shadow:0 0 0 2px #21242733}.pecb-table__checkbox-custom{width:18px;height:18px;border:1.5px solid #c2c2c2;border-radius:6px;background-color:#fff;position:relative;transition:all .15s ease-in-out}.pecb-table__checkbox-custom:after{content:\"\";display:none;position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.pecb-table__checkbox-custom:before{content:\"\";display:none;position:absolute;left:3px;top:6px;width:8px;height:2px;background-color:#fff}.pecb-table__empty-content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 0}.pecb-table__empty-message{color:#919191;font-size:14px}.pecb-table__loading{display:flex;align-items:center;justify-content:center;padding:48px;min-height:200px}.pecb-table__loading-spinner{display:flex;flex-direction:column;align-items:center;gap:12px;color:#616161;font-size:14px;font-family:inherit;font-weight:400}.pecb-table__spinner-icon{width:32px;height:32px;animation:spin 1s linear infinite;color:#212427}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pecb-table__pagination{padding:16px 0;margin-top:16px}.pecb-table__pagination--bordered{padding:16px 18px;background-color:#fff;border:1px solid #ececec;border-radius:6px}.pecb-table__user-cell{display:flex;align-items:center;gap:12px}.pecb-table__user-avatar{width:40px;height:40px;border-radius:9999px;object-fit:cover;flex-shrink:0}.pecb-table__user-info{display:flex;flex-direction:column;min-width:0}.pecb-table__user-name{font-weight:500;color:#313131;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pecb-table__user-secondary{font-size:12px;color:#919191;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pecb-table__action-buttons{display:flex;align-items:center;gap:0;justify-content:center}.pecb-table__action-divider{display:block;width:1px;height:16px;background-color:#c2c2c2;flex-shrink:0}.pecb-table__action-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:transparent;color:#212427;cursor:pointer;border-radius:6px;transition:all .15s ease-in-out;padding:0}.pecb-table__action-btn:hover{background-color:#f7f5f5;color:#313131}.pecb-table__action-btn:focus{outline:none;box-shadow:0 0 0 2px #21242733}.pecb-table__action-btn:disabled{opacity:.5;cursor:not-allowed}.pecb-table__action-btn--danger:hover{background-color:#fdecea;color:#dc3545}.pecb-table__action-btn svg{width:18px;height:18px}.pecb-table__custom-icon{display:flex;align-items:center;justify-content:center}.pecb-table__custom-icon svg{width:18px;height:18px}.pecb-table__link{color:#212427;text-decoration:none;font-size:inherit}.pecb-table__link:hover{text-decoration:underline;color:#313131}.pecb-table__link:focus-visible{outline:2px solid #212427;outline-offset:2px;border-radius:2px}@media (min-width: 768px){.pecb-table--md,.pecb-table--lg{font-size:14px}.pecb-table--md .pecb-table__cell,.pecb-table--lg .pecb-table__cell{padding:12px 16px}.pecb-table--md .pecb-table__cell--header,.pecb-table--lg .pecb-table__cell--header{padding:8px 16px}.pecb-table__pagination{padding:12px 16px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginationComponent, selector: "pecb-pagination", inputs: ["totalItems", "pageSize", "currentPage", "pageSizeOptions", "size", "variant", "showPageSizeSelector", "showItemsInfo", "maxVisiblePages", "disabled", "aria-label", "previousPageAriaLabel", "nextPageAriaLabel", "pageNavigationAriaLabel", "pageAriaLabel", "pageSizeListboxAriaLabel", "itemsPerPageLabel", "itemsInfoTemplate", "itemsInfoCompactTemplate"], outputs: ["pageSizeChange", "currentPageChange", "pageChange"] }, { kind: "component", type: StatusComponent, selector: "pecb-status", inputs: ["type", "variant", "size", "ariaLabel", "text", "customClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4517
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "pecb-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, showPagination: { classPropertyName: "showPagination", publicName: "showPagination", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, paginationVariant: { classPropertyName: "paginationVariant", publicName: "paginationVariant", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectedIndices: { classPropertyName: "selectedIndices", publicName: "selectedIndices", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, wrapText: { classPropertyName: "wrapText", publicName: "wrapText", isSignal: true, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, selectAllAriaLabel: { classPropertyName: "selectAllAriaLabel", publicName: "selectAllAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, selectRowAriaLabel: { classPropertyName: "selectRowAriaLabel", publicName: "selectRowAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", pageSize: "pageSizeChange", selectedIndices: "selectedIndicesChange", sortColumn: "sortColumnChange", sortDirection: "sortDirectionChange", pageChange: "pageChange", rowClick: "rowClick", rowAction: "rowAction", sortChange: "sortChange", selectionChange: "selectionChange" }, queries: [{ propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "loadingTemplate", first: true, predicate: ["loadingTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"pecb-table-wrapper\">\n <div [class]=\"containerClasses\" [style.maxHeight]=\"maxHeight()\">\n <!-- Loading State -->\n <div *ngIf=\"loading()\" class=\"pecb-table__loading\">\n <ng-container *ngIf=\"loadingTemplate; else defaultLoading\">\n <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n </ng-container>\n <ng-template #defaultLoading>\n <div class=\"pecb-table__loading-spinner\">\n <svg class=\"pecb-table__spinner-icon\" viewBox=\"0 0 24 24\" fill=\"none\">\n <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-dasharray=\"31.4 31.4\" />\n </svg>\n <span>{{ loadingText() }}</span>\n </div>\n </ng-template>\n </div>\n\n <!-- Table -->\n <table\n *ngIf=\"!loading()\"\n [class]=\"tableClasses\"\n [style.min-width]=\"minWidth()\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"table\">\n\n <!-- Table Header -->\n <thead *ngIf=\"showHeader()\" class=\"pecb-table__head\" [class.pecb-table__head--sticky]=\"stickyHeader()\">\n <tr class=\"pecb-table__row pecb-table__row--header\" role=\"row\">\n <!-- Selection Checkbox Column -->\n <th\n *ngIf=\"selectable()\"\n class=\"pecb-table__cell pecb-table__cell--header pecb-table__cell--checkbox\"\n role=\"columnheader\"\n scope=\"col\">\n <label class=\"pecb-table__checkbox-wrapper\">\n <input\n type=\"checkbox\"\n class=\"pecb-table__checkbox\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isSomeSelected()\"\n (change)=\"toggleAllSelection()\"\n [attr.aria-label]=\"selectAllAriaLabel()\" />\n <span class=\"pecb-table__checkbox-custom\"></span>\n </label>\n </th>\n\n <!-- Data Columns -->\n <th\n *ngFor=\"let column of columns(); trackBy: trackByKey\"\n class=\"pecb-table__cell pecb-table__cell--header\"\n [class.pecb-table__cell--sortable]=\"column.sortable\"\n [class]=\"getAlignmentClass(column)\"\n [ngClass]=\"column.cssClass\"\n [style.width]=\"column.width\"\n [attr.aria-sort]=\"column.sortable ? (sortColumn() === column.key ? (sortDirection() === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n role=\"columnheader\"\n scope=\"col\"\n (click)=\"onHeaderClick(column)\"\n (keydown.enter)=\"onHeaderClick(column)\"\n (keydown.space)=\"onHeaderClick(column); $event.preventDefault()\"\n [attr.tabindex]=\"column.sortable ? 0 : null\">\n <div class=\"pecb-table__header-content\">\n <ng-container *ngIf=\"column.headerTemplate; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <span class=\"pecb-table__header-text\">{{ column.label }}</span>\n </ng-template>\n\n <!-- Sort Icon -->\n <span *ngIf=\"column.sortable\" class=\"pecb-table__sort-icon\" [attr.data-sort]=\"getSortState(column)\">\n <svg *ngIf=\"getSortState(column) === 'none'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8 3L12 7H4L8 3Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n <path d=\"M8 13L4 9H12L8 13Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n </svg>\n <svg *ngIf=\"getSortState(column) === 'asc'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8 3L12 7H4L8 3Z\" fill=\"currentColor\"/>\n <path d=\"M8 13L4 9H12L8 13Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n </svg>\n <svg *ngIf=\"getSortState(column) === 'desc'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8 3L12 7H4L8 3Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n <path d=\"M8 13L4 9H12L8 13Z\" fill=\"currentColor\"/>\n </svg>\n </span>\n </div>\n </th>\n </tr>\n </thead>\n\n <!-- Table Body -->\n <tbody class=\"pecb-table__body\">\n <!-- Empty State -->\n <tr *ngIf=\"data().length === 0\" class=\"pecb-table__row pecb-table__row--empty\">\n <td\n [attr.colspan]=\"selectable() ? columns().length + 1 : columns().length\"\n class=\"pecb-table__cell pecb-table__cell--empty\">\n <ng-container *ngIf=\"emptyTemplate; else defaultEmpty\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n </ng-container>\n <ng-template #defaultEmpty>\n <div class=\"pecb-table__empty-content\">\n <span class=\"pecb-table__empty-message\">{{ emptyMessage() }}</span>\n </div>\n </ng-template>\n </td>\n </tr>\n\n <!-- Data Rows -->\n <tr\n *ngFor=\"let row of data(); let i = index; trackBy: trackByIndex\"\n class=\"pecb-table__row pecb-table__row--data\"\n [class.pecb-table__row--selected]=\"isRowSelected(i)\"\n role=\"row\"\n (click)=\"onRowClick(row, i)\"\n [attr.tabindex]=\"0\"\n (keydown.enter)=\"onRowClick(row, i)\">\n\n <!-- Selection Checkbox -->\n <td\n *ngIf=\"selectable()\"\n class=\"pecb-table__cell pecb-table__cell--checkbox\"\n role=\"cell\"\n (click)=\"$event.stopPropagation()\">\n <label class=\"pecb-table__checkbox-wrapper\">\n <input\n type=\"checkbox\"\n class=\"pecb-table__checkbox\"\n [checked]=\"isRowSelected(i)\"\n (change)=\"toggleRowSelection(i)\"\n [attr.aria-label]=\"selectRowAriaLabel() + ' ' + (i + 1)\" />\n <span class=\"pecb-table__checkbox-custom\"></span>\n </label>\n </td>\n\n <!-- Data Cells -->\n <td\n *ngFor=\"let column of columns(); trackBy: trackByKey\"\n class=\"pecb-table__cell\"\n [class]=\"getAlignmentClass(column)\"\n [ngClass]=\"column.cssClass\"\n [class.pecb-table__cell--wrap]=\"isCellWrapped(column)\"\n [class.pecb-table__cell--truncate]=\"!isCellWrapped(column)\"\n [style.max-width]=\"column.maxWidth || column.width\"\n [attr.title]=\"getCellTitle(row, column)\"\n role=\"cell\">\n\n <!-- Custom Template -->\n <ng-container *ngIf=\"column.cellTemplate\">\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: getCellValue(row, column.key), row: row, column: column, index: i }\"></ng-container>\n </ng-container>\n\n <!-- Dynamic Component - renders any component passed via dynamicComponent -->\n <ng-container *ngIf=\"!column.cellTemplate && hasDynamicComponent(column)\">\n <ng-container\n *ngComponentOutlet=\"column.dynamicComponent!; inputs: getDynamicComponentInputs(row, column, i)\">\n </ng-container>\n </ng-container>\n\n <!-- Status Component - renders pecb-status -->\n <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'status'\">\n <pecb-status\n [type]=\"getStatusType(getCellValue(row, column.key), column)\"\n [variant]=\"getStatusVariant(column)\"\n [size]=\"getStatusSize(column)\">\n {{ getCellValue(row, column.key) }}\n </pecb-status>\n </ng-container>\n\n <!-- User Component - renders avatar + name + email -->\n <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'user'\">\n <div class=\"pecb-table__user-cell\">\n <img\n *ngIf=\"getUserData(row, column).avatar\"\n [src]=\"getUserData(row, column).avatar\"\n alt=\"\"\n class=\"pecb-table__user-avatar\">\n <div class=\"pecb-table__user-info\">\n <div class=\"pecb-table__user-name\">{{ getUserData(row, column).name }}</div>\n <div *ngIf=\"getUserData(row, column).secondary\" class=\"pecb-table__user-secondary\">\n {{ getUserData(row, column).secondary }}\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- Action Component - renders action buttons with icons -->\n <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'action'\">\n <div class=\"pecb-table__action-buttons\">\n <ng-container *ngFor=\"let action of getActions(column)\">\n <!-- Divider before this action (consumer-controlled grouping) -->\n <span *ngIf=\"action.dividerBefore\" class=\"pecb-table__action-divider\"></span>\n <button\n class=\"pecb-table__action-btn\"\n [class.pecb-table__action-btn--danger]=\"action.variant === 'danger'\"\n [title]=\"action.tooltip || action.id\"\n [disabled]=\"action.disabled\"\n (click)=\"onActionClick(action, row, i, $event)\">\n <!-- View Icon -->\n <svg *ngIf=\"action.icon === 'view'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"></path>\n <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n </svg>\n <!-- Edit Icon -->\n <svg *ngIf=\"action.icon === 'edit'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"></path>\n <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"></path>\n </svg>\n <!-- Delete Icon -->\n <svg *ngIf=\"action.icon === 'delete'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"3 6 5 6 21 6\"></polyline>\n <path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"></path>\n </svg>\n <!-- Download Icon -->\n <svg *ngIf=\"action.icon === 'download'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\n <polyline points=\"7 10 12 15 17 10\"></polyline>\n <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"></line>\n </svg>\n <!-- Copy Icon -->\n <svg *ngIf=\"action.icon === 'copy'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect>\n <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path>\n </svg>\n <!-- Custom Icon (SVG string) -->\n <span *ngIf=\"action.icon === 'custom' && action.customIcon\" class=\"pecb-table__custom-icon\" [innerHTML]=\"getSafeIcon(action.customIcon)\"></span>\n </button>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Link Cell -->\n <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'link'\">\n <a\n [href]=\"getLinkHref(getCellValue(row, column.key))\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"pecb-table__link\"\n (click)=\"$event.stopPropagation()\">\n {{ getCellValue(row, column.key) }}\n </a>\n </ng-container>\n\n <!-- Default Text -->\n <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'text'\">\n {{ getCellValue(row, column.key) }}\n </ng-container>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <!-- Pagination (outside table container) -->\n <div *ngIf=\"showPagination() && !loading() && data().length > 0\" [class]=\"paginationClasses\">\n <pecb-pagination\n [totalItems]=\"totalItems()\"\n [pageSize]=\"pageSize()\"\n [currentPage]=\"currentPage()\"\n [pageSizeOptions]=\"pageSizeOptions()\"\n [showPageSizeSelector]=\"showPageSizeSelector()\"\n [variant]=\"paginationVariant()\"\n size=\"md\"\n (pageChange)=\"onPageChange($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\">\n </pecb-pagination>\n </div>\n</div>\n", styles: [".pecb-table-wrapper{width:100%}.pecb-table-container{width:100%;background-color:#fff;border-radius:12px;overflow-x:auto;overflow-y:hidden;border:1px solid #ececec}.pecb-table-container--sticky{position:relative;overflow:auto}.pecb-table{width:100%;border-collapse:collapse;border-spacing:0;font-family:inherit;font-size:14px;color:#313131}.pecb-table--sm{font-size:12px}.pecb-table--sm .pecb-table__cell,.pecb-table--sm .pecb-table__cell--header{padding:8px 12px}.pecb-table--md{font-size:14px}.pecb-table--md .pecb-table__cell{padding:16px 18px}.pecb-table--md .pecb-table__cell--header{padding:12px 18px}.pecb-table--lg{font-size:16px}.pecb-table--lg .pecb-table__cell{padding:18px 20px}.pecb-table--lg .pecb-table__cell--header{padding:16px 20px}.pecb-table--default .pecb-table__row--data{border-bottom:1px solid #ececec}.pecb-table--default .pecb-table__row--data:last-child{border-bottom:none}.pecb-table--default .pecb-table__row--data:last-child .pecb-table__cell{border-bottom:none}.pecb-table--default .pecb-table__row--data:nth-child(2n){background-color:#fafafa}.pecb-table--striped .pecb-table__row--data:nth-child(2n){background-color:#fafafa}.pecb-table--bordered .pecb-table__cell{border:1px solid #f7f5f5}.pecb-table--hoverable .pecb-table__row--data{transition:background-color .15s ease-in-out}.pecb-table--selectable .pecb-table__row--data{cursor:pointer}.pecb-table__head{background-color:#212427}.pecb-table__head--sticky{position:sticky;top:0;z-index:1020}.pecb-table__row--header{text-transform:uppercase;height:52px}.pecb-table__row--data{background-color:#fff;height:58px}.pecb-table__row--data:focus,.pecb-table__row--data:focus-visible{outline:none}.pecb-table__row--selected{background-color:#f4f4f4}.pecb-table__row--selected:hover{background-color:#f7f5f5}.pecb-table__row--empty{background-color:#fff}.pecb-table__cell{text-align:left;vertical-align:middle;white-space:nowrap;border-bottom:1px solid #ececec}.pecb-table__cell--header{font-weight:500;font-size:12px;color:#fff;letter-spacing:.02em;-webkit-user-select:none;user-select:none;border-bottom:none}.pecb-table__cell--sortable{cursor:pointer;transition:background-color .15s ease-in-out}.pecb-table__cell--sortable:hover{background-color:#ffffff1a}.pecb-table__cell--sortable:focus,.pecb-table__cell--sortable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #fff}.pecb-table__cell--checkbox{width:48px;text-align:center}.pecb-table__cell--center{text-align:center}.pecb-table__cell--right{text-align:right}.pecb-table__cell--empty{text-align:center;padding:24px 0}.pecb-table__cell--truncate{overflow:hidden;text-overflow:ellipsis}.pecb-table__cell--wrap{white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pecb-table__header-content{display:flex;align-items:center;gap:8px}.pecb-table__header-text{flex:1}.pecb-table__sort-icon{display:flex;align-items:center;justify-content:center;color:#ffffff80;transition:color .15s ease-in-out}.pecb-table__sort-icon svg{width:16px;height:16px}.pecb-table__sort-icon[data-sort=asc],.pecb-table__sort-icon[data-sort=desc]{color:#fff}.pecb-table__checkbox-wrapper{display:inline-flex;align-items:center;justify-content:center;position:relative;cursor:pointer}.pecb-table__checkbox{position:absolute;opacity:0;width:0;height:0}.pecb-table__checkbox:checked+.pecb-table__checkbox-custom{background-color:#212427;border-color:#212427}.pecb-table__checkbox:checked+.pecb-table__checkbox-custom:after{display:block}.pecb-table__checkbox:indeterminate+.pecb-table__checkbox-custom{background-color:#212427;border-color:#212427}.pecb-table__checkbox:indeterminate+.pecb-table__checkbox-custom:before{display:block}.pecb-table__checkbox:indeterminate+.pecb-table__checkbox-custom:after{display:none}.pecb-table__checkbox:focus+.pecb-table__checkbox-custom{box-shadow:0 0 0 2px #21242733}.pecb-table__checkbox-custom{width:18px;height:18px;border:1.5px solid #c2c2c2;border-radius:6px;background-color:#fff;position:relative;transition:all .15s ease-in-out}.pecb-table__checkbox-custom:after{content:\"\";display:none;position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.pecb-table__checkbox-custom:before{content:\"\";display:none;position:absolute;left:3px;top:6px;width:8px;height:2px;background-color:#fff}.pecb-table__empty-content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 0}.pecb-table__empty-message{color:#919191;font-size:14px}.pecb-table__loading{display:flex;align-items:center;justify-content:center;padding:48px;min-height:200px}.pecb-table__loading-spinner{display:flex;flex-direction:column;align-items:center;gap:12px;color:#616161;font-size:14px;font-family:inherit;font-weight:400}.pecb-table__spinner-icon{width:32px;height:32px;animation:spin 1s linear infinite;color:#212427}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pecb-table__pagination{padding:16px 0;margin-top:16px}.pecb-table__pagination--bordered{padding:16px 18px;background-color:#fff;border:1px solid #ececec;border-radius:6px}.pecb-table__user-cell{display:flex;align-items:center;gap:12px}.pecb-table__user-avatar{width:40px;height:40px;border-radius:9999px;object-fit:cover;flex-shrink:0}.pecb-table__user-info{display:flex;flex-direction:column;min-width:0}.pecb-table__user-name{font-weight:500;color:#313131;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pecb-table__user-secondary{font-size:12px;color:#919191;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pecb-table__action-buttons{display:flex;align-items:center;gap:0;justify-content:center}.pecb-table__action-divider{display:block;width:1px;height:16px;background-color:#c2c2c2;flex-shrink:0}.pecb-table__action-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:transparent;color:#212427;cursor:pointer;border-radius:6px;transition:all .15s ease-in-out;padding:0}.pecb-table__action-btn:hover{background-color:#f7f5f5;color:#313131}.pecb-table__action-btn:focus{outline:none;box-shadow:0 0 0 2px #21242733}.pecb-table__action-btn:disabled{opacity:.5;cursor:not-allowed}.pecb-table__action-btn--danger:hover{background-color:#fdecea;color:#dc3545}.pecb-table__action-btn svg{width:18px;height:18px}.pecb-table__custom-icon{display:flex;align-items:center;justify-content:center}.pecb-table__custom-icon svg{width:18px;height:18px}.pecb-table__link{color:#212427;text-decoration:none;font-size:inherit}.pecb-table__link:hover{text-decoration:underline;color:#313131}.pecb-table__link:focus-visible{outline:2px solid #212427;outline-offset:2px;border-radius:2px}@media (min-width: 768px){.pecb-table--md,.pecb-table--lg{font-size:14px}.pecb-table--md .pecb-table__cell,.pecb-table--lg .pecb-table__cell{padding:12px 16px}.pecb-table--md .pecb-table__cell--header,.pecb-table--lg .pecb-table__cell--header{padding:8px 16px}.pecb-table__pagination{padding:12px 16px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginationComponent, selector: "pecb-pagination", inputs: ["totalItems", "pageSize", "currentPage", "pageSizeOptions", "size", "variant", "showPageSizeSelector", "showItemsInfo", "maxVisiblePages", "disabled", "aria-label", "previousPageAriaLabel", "nextPageAriaLabel", "pageNavigationAriaLabel", "pageAriaLabel", "pageSizeListboxAriaLabel", "itemsPerPageLabel", "itemsInfoTemplate", "itemsInfoCompactTemplate"], outputs: ["pageSizeChange", "currentPageChange", "pageChange"] }, { kind: "component", type: StatusComponent, selector: "pecb-status", inputs: ["type", "variant", "size", "ariaLabel", "text", "customClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4483
4518
|
}
|
|
4484
4519
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, decorators: [{
|
|
4485
4520
|
type: Component,
|
|
4486
|
-
args: [{ selector: 'pecb-table', imports: [CommonModule, PaginationComponent, StatusComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pecb-table-wrapper\">\n <div [class]=\"containerClasses\" [style.maxHeight]=\"maxHeight()\">\n <!-- Loading State -->\n <div *ngIf=\"loading()\" class=\"pecb-table__loading\">\n <ng-container *ngIf=\"loadingTemplate; else defaultLoading\">\n <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n </ng-container>\n <ng-template #defaultLoading>\n <div class=\"pecb-table__loading-spinner\">\n <svg class=\"pecb-table__spinner-icon\" viewBox=\"0 0 24 24\" fill=\"none\">\n <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-dasharray=\"31.4 31.4\" />\n </svg>\n <span>{{ loadingText() }}</span>\n </div>\n </ng-template>\n </div>\n\n <!-- Table -->\n <table\n *ngIf=\"!loading()\"\n [class]=\"tableClasses\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"table\">\n\n <!-- Table Header -->\n <thead *ngIf=\"showHeader()\" class=\"pecb-table__head\" [class.pecb-table__head--sticky]=\"stickyHeader()\">\n <tr class=\"pecb-table__row pecb-table__row--header\" role=\"row\">\n <!-- Selection Checkbox Column -->\n <th\n *ngIf=\"selectable()\"\n class=\"pecb-table__cell pecb-table__cell--header pecb-table__cell--checkbox\"\n role=\"columnheader\"\n scope=\"col\">\n <label class=\"pecb-table__checkbox-wrapper\">\n <input\n type=\"checkbox\"\n class=\"pecb-table__checkbox\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isSomeSelected()\"\n (change)=\"toggleAllSelection()\"\n [attr.aria-label]=\"selectAllAriaLabel()\" />\n <span class=\"pecb-table__checkbox-custom\"></span>\n </label>\n </th>\n\n <!-- Data Columns -->\n <th\n *ngFor=\"let column of columns(); trackBy: trackByKey\"\n class=\"pecb-table__cell pecb-table__cell--header\"\n [class.pecb-table__cell--sortable]=\"column.sortable\"\n [class]=\"getAlignmentClass(column)\"\n [ngClass]=\"column.cssClass\"\n [style.width]=\"column.width\"\n [attr.aria-sort]=\"column.sortable ? (sortColumn() === column.key ? (sortDirection() === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n role=\"columnheader\"\n scope=\"col\"\n (click)=\"onHeaderClick(column)\"\n (keydown.enter)=\"onHeaderClick(column)\"\n (keydown.space)=\"onHeaderClick(column); $event.preventDefault()\"\n [attr.tabindex]=\"column.sortable ? 0 : null\">\n <div class=\"pecb-table__header-content\">\n <ng-container *ngIf=\"column.headerTemplate; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <span class=\"pecb-table__header-text\">{{ column.label }}</span>\n </ng-template>\n\n <!-- Sort Icon -->\n <span *ngIf=\"column.sortable\" class=\"pecb-table__sort-icon\" [attr.data-sort]=\"getSortState(column)\">\n <svg *ngIf=\"getSortState(column) === 'none'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8 3L12 7H4L8 3Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n <path d=\"M8 13L4 9H12L8 13Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n </svg>\n <svg *ngIf=\"getSortState(column) === 'asc'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8 3L12 7H4L8 3Z\" fill=\"currentColor\"/>\n <path d=\"M8 13L4 9H12L8 13Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n </svg>\n <svg *ngIf=\"getSortState(column) === 'desc'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8 3L12 7H4L8 3Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n <path d=\"M8 13L4 9H12L8 13Z\" fill=\"currentColor\"/>\n </svg>\n </span>\n </div>\n </th>\n </tr>\n </thead>\n\n <!-- Table Body -->\n <tbody class=\"pecb-table__body\">\n <!-- Empty State -->\n <tr *ngIf=\"data().length === 0\" class=\"pecb-table__row pecb-table__row--empty\">\n <td\n [attr.colspan]=\"selectable() ? columns().length + 1 : columns().length\"\n class=\"pecb-table__cell pecb-table__cell--empty\">\n <ng-container *ngIf=\"emptyTemplate; else defaultEmpty\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n </ng-container>\n <ng-template #defaultEmpty>\n <div class=\"pecb-table__empty-content\">\n <span class=\"pecb-table__empty-message\">{{ emptyMessage() }}</span>\n </div>\n </ng-template>\n </td>\n </tr>\n\n <!-- Data Rows -->\n <tr\n *ngFor=\"let row of data(); let i = index; trackBy: trackByIndex\"\n class=\"pecb-table__row pecb-table__row--data\"\n [class.pecb-table__row--selected]=\"isRowSelected(i)\"\n role=\"row\"\n (click)=\"onRowClick(row, i)\"\n [attr.tabindex]=\"0\"\n (keydown.enter)=\"onRowClick(row, i)\">\n\n <!-- Selection Checkbox -->\n <td\n *ngIf=\"selectable()\"\n class=\"pecb-table__cell pecb-table__cell--checkbox\"\n role=\"cell\"\n (click)=\"$event.stopPropagation()\">\n <label class=\"pecb-table__checkbox-wrapper\">\n <input\n type=\"checkbox\"\n class=\"pecb-table__checkbox\"\n [checked]=\"isRowSelected(i)\"\n (change)=\"toggleRowSelection(i)\"\n [attr.aria-label]=\"selectRowAriaLabel() + ' ' + (i + 1)\" />\n <span class=\"pecb-table__checkbox-custom\"></span>\n </label>\n </td>\n\n <!-- Data Cells -->\n <td\n *ngFor=\"let column of columns(); trackBy: trackByKey\"\n class=\"pecb-table__cell\"\n [class]=\"getAlignmentClass(column)\"\n [ngClass]=\"column.cssClass\"\n role=\"cell\">\n\n <!-- Custom Template -->\n <ng-container *ngIf=\"column.cellTemplate\">\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: getCellValue(row, column.key), row: row, column: column, index: i }\"></ng-container>\n </ng-container>\n\n <!-- Dynamic Component - renders any component passed via dynamicComponent -->\n <ng-container *ngIf=\"!column.cellTemplate && hasDynamicComponent(column)\">\n <ng-container\n *ngComponentOutlet=\"column.dynamicComponent!; inputs: getDynamicComponentInputs(row, column, i)\">\n </ng-container>\n </ng-container>\n\n <!-- Status Component - renders pecb-status -->\n <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'status'\">\n <pecb-status\n [type]=\"getStatusType(getCellValue(row, column.key), column)\"\n [variant]=\"getStatusVariant(column)\"\n [size]=\"getStatusSize(column)\">\n {{ getCellValue(row, column.key) }}\n </pecb-status>\n </ng-container>\n\n <!-- User Component - renders avatar + name + email -->\n <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'user'\">\n <div class=\"pecb-table__user-cell\">\n <img\n *ngIf=\"getUserData(row, column).avatar\"\n [src]=\"getUserData(row, column).avatar\"\n alt=\"\"\n class=\"pecb-table__user-avatar\">\n <div class=\"pecb-table__user-info\">\n <div class=\"pecb-table__user-name\">{{ getUserData(row, column).name }}</div>\n <div *ngIf=\"getUserData(row, column).secondary\" class=\"pecb-table__user-secondary\">\n {{ getUserData(row, column).secondary }}\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- Action Component - renders action buttons with icons -->\n <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'action'\">\n <div class=\"pecb-table__action-buttons\">\n <ng-container *ngFor=\"let action of getActions(column)\">\n <!-- Divider before this action (consumer-controlled grouping) -->\n <span *ngIf=\"action.dividerBefore\" class=\"pecb-table__action-divider\"></span>\n <button\n class=\"pecb-table__action-btn\"\n [class.pecb-table__action-btn--danger]=\"action.variant === 'danger'\"\n [title]=\"action.tooltip || action.id\"\n [disabled]=\"action.disabled\"\n (click)=\"onActionClick(action, row, i, $event)\">\n <!-- View Icon -->\n <svg *ngIf=\"action.icon === 'view'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"></path>\n <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n </svg>\n <!-- Edit Icon -->\n <svg *ngIf=\"action.icon === 'edit'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"></path>\n <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"></path>\n </svg>\n <!-- Delete Icon -->\n <svg *ngIf=\"action.icon === 'delete'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"3 6 5 6 21 6\"></polyline>\n <path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"></path>\n </svg>\n <!-- Download Icon -->\n <svg *ngIf=\"action.icon === 'download'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\n <polyline points=\"7 10 12 15 17 10\"></polyline>\n <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"></line>\n </svg>\n <!-- Copy Icon -->\n <svg *ngIf=\"action.icon === 'copy'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect>\n <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path>\n </svg>\n <!-- Custom Icon (SVG string) -->\n <span *ngIf=\"action.icon === 'custom' && action.customIcon\" class=\"pecb-table__custom-icon\" [innerHTML]=\"getSafeIcon(action.customIcon)\"></span>\n </button>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Link Cell -->\n <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'link'\">\n <a\n [href]=\"getLinkHref(getCellValue(row, column.key))\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"pecb-table__link\"\n (click)=\"$event.stopPropagation()\">\n {{ getCellValue(row, column.key) }}\n </a>\n </ng-container>\n\n <!-- Default Text -->\n <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'text'\">\n {{ getCellValue(row, column.key) }}\n </ng-container>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <!-- Pagination (outside table container) -->\n <div *ngIf=\"showPagination() && !loading() && data().length > 0\" [class]=\"paginationClasses\">\n <pecb-pagination\n [totalItems]=\"totalItems()\"\n [pageSize]=\"pageSize()\"\n [currentPage]=\"currentPage()\"\n [pageSizeOptions]=\"pageSizeOptions()\"\n [showPageSizeSelector]=\"showPageSizeSelector()\"\n [variant]=\"paginationVariant()\"\n size=\"md\"\n (pageChange)=\"onPageChange($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\">\n </pecb-pagination>\n </div>\n</div>\n", styles: [".pecb-table-wrapper{width:100%}.pecb-table-container{width:100%;background-color:#fff;border-radius:12px;overflow:hidden;border:1px solid #ececec}.pecb-table-container--sticky{position:relative;overflow:auto}.pecb-table{width:100%;border-collapse:collapse;border-spacing:0;font-family:inherit;font-size:14px;color:#313131}.pecb-table--sm{font-size:12px}.pecb-table--sm .pecb-table__cell,.pecb-table--sm .pecb-table__cell--header{padding:8px 12px}.pecb-table--md{font-size:14px}.pecb-table--md .pecb-table__cell{padding:16px 18px}.pecb-table--md .pecb-table__cell--header{padding:12px 18px}.pecb-table--lg{font-size:16px}.pecb-table--lg .pecb-table__cell{padding:18px 20px}.pecb-table--lg .pecb-table__cell--header{padding:16px 20px}.pecb-table--default .pecb-table__row--data{border-bottom:1px solid #ececec}.pecb-table--default .pecb-table__row--data:last-child{border-bottom:none}.pecb-table--default .pecb-table__row--data:last-child .pecb-table__cell{border-bottom:none}.pecb-table--default .pecb-table__row--data:nth-child(2n){background-color:#fafafa}.pecb-table--striped .pecb-table__row--data:nth-child(2n){background-color:#fafafa}.pecb-table--bordered .pecb-table__cell{border:1px solid #f7f5f5}.pecb-table--hoverable .pecb-table__row--data{transition:background-color .15s ease-in-out}.pecb-table--selectable .pecb-table__row--data{cursor:pointer}.pecb-table__head{background-color:#212427}.pecb-table__head--sticky{position:sticky;top:0;z-index:1020}.pecb-table__row--header{text-transform:uppercase;height:52px}.pecb-table__row--data{background-color:#fff;height:58px}.pecb-table__row--data:focus,.pecb-table__row--data:focus-visible{outline:none}.pecb-table__row--selected{background-color:#f4f4f4}.pecb-table__row--selected:hover{background-color:#f7f5f5}.pecb-table__row--empty{background-color:#fff}.pecb-table__cell{text-align:left;vertical-align:middle;white-space:nowrap;border-bottom:1px solid #ececec}.pecb-table__cell--header{font-weight:500;font-size:12px;color:#fff;letter-spacing:.02em;-webkit-user-select:none;user-select:none;border-bottom:none}.pecb-table__cell--sortable{cursor:pointer;transition:background-color .15s ease-in-out}.pecb-table__cell--sortable:hover{background-color:#ffffff1a}.pecb-table__cell--sortable:focus,.pecb-table__cell--sortable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #fff}.pecb-table__cell--checkbox{width:48px;text-align:center}.pecb-table__cell--center{text-align:center}.pecb-table__cell--right{text-align:right}.pecb-table__cell--empty{text-align:center;padding:24px 0}.pecb-table__header-content{display:flex;align-items:center;gap:8px}.pecb-table__header-text{flex:1}.pecb-table__sort-icon{display:flex;align-items:center;justify-content:center;color:#ffffff80;transition:color .15s ease-in-out}.pecb-table__sort-icon svg{width:16px;height:16px}.pecb-table__sort-icon[data-sort=asc],.pecb-table__sort-icon[data-sort=desc]{color:#fff}.pecb-table__checkbox-wrapper{display:inline-flex;align-items:center;justify-content:center;position:relative;cursor:pointer}.pecb-table__checkbox{position:absolute;opacity:0;width:0;height:0}.pecb-table__checkbox:checked+.pecb-table__checkbox-custom{background-color:#212427;border-color:#212427}.pecb-table__checkbox:checked+.pecb-table__checkbox-custom:after{display:block}.pecb-table__checkbox:indeterminate+.pecb-table__checkbox-custom{background-color:#212427;border-color:#212427}.pecb-table__checkbox:indeterminate+.pecb-table__checkbox-custom:before{display:block}.pecb-table__checkbox:indeterminate+.pecb-table__checkbox-custom:after{display:none}.pecb-table__checkbox:focus+.pecb-table__checkbox-custom{box-shadow:0 0 0 2px #21242733}.pecb-table__checkbox-custom{width:18px;height:18px;border:1.5px solid #c2c2c2;border-radius:6px;background-color:#fff;position:relative;transition:all .15s ease-in-out}.pecb-table__checkbox-custom:after{content:\"\";display:none;position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.pecb-table__checkbox-custom:before{content:\"\";display:none;position:absolute;left:3px;top:6px;width:8px;height:2px;background-color:#fff}.pecb-table__empty-content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 0}.pecb-table__empty-message{color:#919191;font-size:14px}.pecb-table__loading{display:flex;align-items:center;justify-content:center;padding:48px;min-height:200px}.pecb-table__loading-spinner{display:flex;flex-direction:column;align-items:center;gap:12px;color:#616161;font-size:14px;font-family:inherit;font-weight:400}.pecb-table__spinner-icon{width:32px;height:32px;animation:spin 1s linear infinite;color:#212427}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pecb-table__pagination{padding:16px 0;margin-top:16px}.pecb-table__pagination--bordered{padding:16px 18px;background-color:#fff;border:1px solid #ececec;border-radius:6px}.pecb-table__user-cell{display:flex;align-items:center;gap:12px}.pecb-table__user-avatar{width:40px;height:40px;border-radius:9999px;object-fit:cover;flex-shrink:0}.pecb-table__user-info{display:flex;flex-direction:column;min-width:0}.pecb-table__user-name{font-weight:500;color:#313131;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pecb-table__user-secondary{font-size:12px;color:#919191;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pecb-table__action-buttons{display:flex;align-items:center;gap:0;justify-content:center}.pecb-table__action-divider{display:block;width:1px;height:16px;background-color:#c2c2c2;flex-shrink:0}.pecb-table__action-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:transparent;color:#212427;cursor:pointer;border-radius:6px;transition:all .15s ease-in-out;padding:0}.pecb-table__action-btn:hover{background-color:#f7f5f5;color:#313131}.pecb-table__action-btn:focus{outline:none;box-shadow:0 0 0 2px #21242733}.pecb-table__action-btn:disabled{opacity:.5;cursor:not-allowed}.pecb-table__action-btn--danger:hover{background-color:#fdecea;color:#dc3545}.pecb-table__action-btn svg{width:18px;height:18px}.pecb-table__custom-icon{display:flex;align-items:center;justify-content:center}.pecb-table__custom-icon svg{width:18px;height:18px}.pecb-table__link{color:#212427;text-decoration:none;font-size:inherit}.pecb-table__link:hover{text-decoration:underline;color:#313131}.pecb-table__link:focus-visible{outline:2px solid #212427;outline-offset:2px;border-radius:2px}@media (min-width: 768px){.pecb-table--md,.pecb-table--lg{font-size:14px}.pecb-table--md .pecb-table__cell,.pecb-table--lg .pecb-table__cell{padding:12px 16px}.pecb-table--md .pecb-table__cell--header,.pecb-table--lg .pecb-table__cell--header{padding:8px 16px}.pecb-table__pagination{padding:12px 16px}}\n"] }]
|
|
4487
|
-
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: i0.ChangeDetectorRef }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], showPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPagination", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showPageSizeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelector", required: false }] }], paginationVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationVariant", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selectedIndices: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndices", required: false }] }, { type: i0.Output, args: ["selectedIndicesChange"] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], sortColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortColumn", required: false }] }, { type: i0.Output, args: ["sortColumnChange"] }], sortDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirection", required: false }] }, { type: i0.Output, args: ["sortDirectionChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], selectAllAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllAriaLabel", required: false }] }], selectRowAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectRowAriaLabel", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowAction: [{ type: i0.Output, args: ["rowAction"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], emptyTemplate: [{
|
|
4521
|
+
args: [{ selector: 'pecb-table', imports: [CommonModule, PaginationComponent, StatusComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pecb-table-wrapper\">\n <div [class]=\"containerClasses\" [style.maxHeight]=\"maxHeight()\">\n <!-- Loading State -->\n <div *ngIf=\"loading()\" class=\"pecb-table__loading\">\n <ng-container *ngIf=\"loadingTemplate; else defaultLoading\">\n <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n </ng-container>\n <ng-template #defaultLoading>\n <div class=\"pecb-table__loading-spinner\">\n <svg class=\"pecb-table__spinner-icon\" viewBox=\"0 0 24 24\" fill=\"none\">\n <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-dasharray=\"31.4 31.4\" />\n </svg>\n <span>{{ loadingText() }}</span>\n </div>\n </ng-template>\n </div>\n\n <!-- Table -->\n <table\n *ngIf=\"!loading()\"\n [class]=\"tableClasses\"\n [style.min-width]=\"minWidth()\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"table\">\n\n <!-- Table Header -->\n <thead *ngIf=\"showHeader()\" class=\"pecb-table__head\" [class.pecb-table__head--sticky]=\"stickyHeader()\">\n <tr class=\"pecb-table__row pecb-table__row--header\" role=\"row\">\n <!-- Selection Checkbox Column -->\n <th\n *ngIf=\"selectable()\"\n class=\"pecb-table__cell pecb-table__cell--header pecb-table__cell--checkbox\"\n role=\"columnheader\"\n scope=\"col\">\n <label class=\"pecb-table__checkbox-wrapper\">\n <input\n type=\"checkbox\"\n class=\"pecb-table__checkbox\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isSomeSelected()\"\n (change)=\"toggleAllSelection()\"\n [attr.aria-label]=\"selectAllAriaLabel()\" />\n <span class=\"pecb-table__checkbox-custom\"></span>\n </label>\n </th>\n\n <!-- Data Columns -->\n <th\n *ngFor=\"let column of columns(); trackBy: trackByKey\"\n class=\"pecb-table__cell pecb-table__cell--header\"\n [class.pecb-table__cell--sortable]=\"column.sortable\"\n [class]=\"getAlignmentClass(column)\"\n [ngClass]=\"column.cssClass\"\n [style.width]=\"column.width\"\n [attr.aria-sort]=\"column.sortable ? (sortColumn() === column.key ? (sortDirection() === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n role=\"columnheader\"\n scope=\"col\"\n (click)=\"onHeaderClick(column)\"\n (keydown.enter)=\"onHeaderClick(column)\"\n (keydown.space)=\"onHeaderClick(column); $event.preventDefault()\"\n [attr.tabindex]=\"column.sortable ? 0 : null\">\n <div class=\"pecb-table__header-content\">\n <ng-container *ngIf=\"column.headerTemplate; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <span class=\"pecb-table__header-text\">{{ column.label }}</span>\n </ng-template>\n\n <!-- Sort Icon -->\n <span *ngIf=\"column.sortable\" class=\"pecb-table__sort-icon\" [attr.data-sort]=\"getSortState(column)\">\n <svg *ngIf=\"getSortState(column) === 'none'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8 3L12 7H4L8 3Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n <path d=\"M8 13L4 9H12L8 13Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n </svg>\n <svg *ngIf=\"getSortState(column) === 'asc'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8 3L12 7H4L8 3Z\" fill=\"currentColor\"/>\n <path d=\"M8 13L4 9H12L8 13Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n </svg>\n <svg *ngIf=\"getSortState(column) === 'desc'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8 3L12 7H4L8 3Z\" fill=\"currentColor\" opacity=\"0.4\"/>\n <path d=\"M8 13L4 9H12L8 13Z\" fill=\"currentColor\"/>\n </svg>\n </span>\n </div>\n </th>\n </tr>\n </thead>\n\n <!-- Table Body -->\n <tbody class=\"pecb-table__body\">\n <!-- Empty State -->\n <tr *ngIf=\"data().length === 0\" class=\"pecb-table__row pecb-table__row--empty\">\n <td\n [attr.colspan]=\"selectable() ? columns().length + 1 : columns().length\"\n class=\"pecb-table__cell pecb-table__cell--empty\">\n <ng-container *ngIf=\"emptyTemplate; else defaultEmpty\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n </ng-container>\n <ng-template #defaultEmpty>\n <div class=\"pecb-table__empty-content\">\n <span class=\"pecb-table__empty-message\">{{ emptyMessage() }}</span>\n </div>\n </ng-template>\n </td>\n </tr>\n\n <!-- Data Rows -->\n <tr\n *ngFor=\"let row of data(); let i = index; trackBy: trackByIndex\"\n class=\"pecb-table__row pecb-table__row--data\"\n [class.pecb-table__row--selected]=\"isRowSelected(i)\"\n role=\"row\"\n (click)=\"onRowClick(row, i)\"\n [attr.tabindex]=\"0\"\n (keydown.enter)=\"onRowClick(row, i)\">\n\n <!-- Selection Checkbox -->\n <td\n *ngIf=\"selectable()\"\n class=\"pecb-table__cell pecb-table__cell--checkbox\"\n role=\"cell\"\n (click)=\"$event.stopPropagation()\">\n <label class=\"pecb-table__checkbox-wrapper\">\n <input\n type=\"checkbox\"\n class=\"pecb-table__checkbox\"\n [checked]=\"isRowSelected(i)\"\n (change)=\"toggleRowSelection(i)\"\n [attr.aria-label]=\"selectRowAriaLabel() + ' ' + (i + 1)\" />\n <span class=\"pecb-table__checkbox-custom\"></span>\n </label>\n </td>\n\n <!-- Data Cells -->\n <td\n *ngFor=\"let column of columns(); trackBy: trackByKey\"\n class=\"pecb-table__cell\"\n [class]=\"getAlignmentClass(column)\"\n [ngClass]=\"column.cssClass\"\n [class.pecb-table__cell--wrap]=\"isCellWrapped(column)\"\n [class.pecb-table__cell--truncate]=\"!isCellWrapped(column)\"\n [style.max-width]=\"column.maxWidth || column.width\"\n [attr.title]=\"getCellTitle(row, column)\"\n role=\"cell\">\n\n <!-- Custom Template -->\n <ng-container *ngIf=\"column.cellTemplate\">\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: getCellValue(row, column.key), row: row, column: column, index: i }\"></ng-container>\n </ng-container>\n\n <!-- Dynamic Component - renders any component passed via dynamicComponent -->\n <ng-container *ngIf=\"!column.cellTemplate && hasDynamicComponent(column)\">\n <ng-container\n *ngComponentOutlet=\"column.dynamicComponent!; inputs: getDynamicComponentInputs(row, column, i)\">\n </ng-container>\n </ng-container>\n\n <!-- Status Component - renders pecb-status -->\n <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'status'\">\n <pecb-status\n [type]=\"getStatusType(getCellValue(row, column.key), column)\"\n [variant]=\"getStatusVariant(column)\"\n [size]=\"getStatusSize(column)\">\n {{ getCellValue(row, column.key) }}\n </pecb-status>\n </ng-container>\n\n <!-- User Component - renders avatar + name + email -->\n <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'user'\">\n <div class=\"pecb-table__user-cell\">\n <img\n *ngIf=\"getUserData(row, column).avatar\"\n [src]=\"getUserData(row, column).avatar\"\n alt=\"\"\n class=\"pecb-table__user-avatar\">\n <div class=\"pecb-table__user-info\">\n <div class=\"pecb-table__user-name\">{{ getUserData(row, column).name }}</div>\n <div *ngIf=\"getUserData(row, column).secondary\" class=\"pecb-table__user-secondary\">\n {{ getUserData(row, column).secondary }}\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- Action Component - renders action buttons with icons -->\n <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'action'\">\n <div class=\"pecb-table__action-buttons\">\n <ng-container *ngFor=\"let action of getActions(column)\">\n <!-- Divider before this action (consumer-controlled grouping) -->\n <span *ngIf=\"action.dividerBefore\" class=\"pecb-table__action-divider\"></span>\n <button\n class=\"pecb-table__action-btn\"\n [class.pecb-table__action-btn--danger]=\"action.variant === 'danger'\"\n [title]=\"action.tooltip || action.id\"\n [disabled]=\"action.disabled\"\n (click)=\"onActionClick(action, row, i, $event)\">\n <!-- View Icon -->\n <svg *ngIf=\"action.icon === 'view'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"></path>\n <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n </svg>\n <!-- Edit Icon -->\n <svg *ngIf=\"action.icon === 'edit'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"></path>\n <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"></path>\n </svg>\n <!-- Delete Icon -->\n <svg *ngIf=\"action.icon === 'delete'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"3 6 5 6 21 6\"></polyline>\n <path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"></path>\n </svg>\n <!-- Download Icon -->\n <svg *ngIf=\"action.icon === 'download'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\n <polyline points=\"7 10 12 15 17 10\"></polyline>\n <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"></line>\n </svg>\n <!-- Copy Icon -->\n <svg *ngIf=\"action.icon === 'copy'\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect>\n <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path>\n </svg>\n <!-- Custom Icon (SVG string) -->\n <span *ngIf=\"action.icon === 'custom' && action.customIcon\" class=\"pecb-table__custom-icon\" [innerHTML]=\"getSafeIcon(action.customIcon)\"></span>\n </button>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Link Cell -->\n <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'link'\">\n <a\n [href]=\"getLinkHref(getCellValue(row, column.key))\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"pecb-table__link\"\n (click)=\"$event.stopPropagation()\">\n {{ getCellValue(row, column.key) }}\n </a>\n </ng-container>\n\n <!-- Default Text -->\n <ng-container *ngIf=\"!column.cellTemplate && !hasDynamicComponent(column) && getColumnType(column) === 'text'\">\n {{ getCellValue(row, column.key) }}\n </ng-container>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <!-- Pagination (outside table container) -->\n <div *ngIf=\"showPagination() && !loading() && data().length > 0\" [class]=\"paginationClasses\">\n <pecb-pagination\n [totalItems]=\"totalItems()\"\n [pageSize]=\"pageSize()\"\n [currentPage]=\"currentPage()\"\n [pageSizeOptions]=\"pageSizeOptions()\"\n [showPageSizeSelector]=\"showPageSizeSelector()\"\n [variant]=\"paginationVariant()\"\n size=\"md\"\n (pageChange)=\"onPageChange($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\">\n </pecb-pagination>\n </div>\n</div>\n", styles: [".pecb-table-wrapper{width:100%}.pecb-table-container{width:100%;background-color:#fff;border-radius:12px;overflow-x:auto;overflow-y:hidden;border:1px solid #ececec}.pecb-table-container--sticky{position:relative;overflow:auto}.pecb-table{width:100%;border-collapse:collapse;border-spacing:0;font-family:inherit;font-size:14px;color:#313131}.pecb-table--sm{font-size:12px}.pecb-table--sm .pecb-table__cell,.pecb-table--sm .pecb-table__cell--header{padding:8px 12px}.pecb-table--md{font-size:14px}.pecb-table--md .pecb-table__cell{padding:16px 18px}.pecb-table--md .pecb-table__cell--header{padding:12px 18px}.pecb-table--lg{font-size:16px}.pecb-table--lg .pecb-table__cell{padding:18px 20px}.pecb-table--lg .pecb-table__cell--header{padding:16px 20px}.pecb-table--default .pecb-table__row--data{border-bottom:1px solid #ececec}.pecb-table--default .pecb-table__row--data:last-child{border-bottom:none}.pecb-table--default .pecb-table__row--data:last-child .pecb-table__cell{border-bottom:none}.pecb-table--default .pecb-table__row--data:nth-child(2n){background-color:#fafafa}.pecb-table--striped .pecb-table__row--data:nth-child(2n){background-color:#fafafa}.pecb-table--bordered .pecb-table__cell{border:1px solid #f7f5f5}.pecb-table--hoverable .pecb-table__row--data{transition:background-color .15s ease-in-out}.pecb-table--selectable .pecb-table__row--data{cursor:pointer}.pecb-table__head{background-color:#212427}.pecb-table__head--sticky{position:sticky;top:0;z-index:1020}.pecb-table__row--header{text-transform:uppercase;height:52px}.pecb-table__row--data{background-color:#fff;height:58px}.pecb-table__row--data:focus,.pecb-table__row--data:focus-visible{outline:none}.pecb-table__row--selected{background-color:#f4f4f4}.pecb-table__row--selected:hover{background-color:#f7f5f5}.pecb-table__row--empty{background-color:#fff}.pecb-table__cell{text-align:left;vertical-align:middle;white-space:nowrap;border-bottom:1px solid #ececec}.pecb-table__cell--header{font-weight:500;font-size:12px;color:#fff;letter-spacing:.02em;-webkit-user-select:none;user-select:none;border-bottom:none}.pecb-table__cell--sortable{cursor:pointer;transition:background-color .15s ease-in-out}.pecb-table__cell--sortable:hover{background-color:#ffffff1a}.pecb-table__cell--sortable:focus,.pecb-table__cell--sortable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #fff}.pecb-table__cell--checkbox{width:48px;text-align:center}.pecb-table__cell--center{text-align:center}.pecb-table__cell--right{text-align:right}.pecb-table__cell--empty{text-align:center;padding:24px 0}.pecb-table__cell--truncate{overflow:hidden;text-overflow:ellipsis}.pecb-table__cell--wrap{white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pecb-table__header-content{display:flex;align-items:center;gap:8px}.pecb-table__header-text{flex:1}.pecb-table__sort-icon{display:flex;align-items:center;justify-content:center;color:#ffffff80;transition:color .15s ease-in-out}.pecb-table__sort-icon svg{width:16px;height:16px}.pecb-table__sort-icon[data-sort=asc],.pecb-table__sort-icon[data-sort=desc]{color:#fff}.pecb-table__checkbox-wrapper{display:inline-flex;align-items:center;justify-content:center;position:relative;cursor:pointer}.pecb-table__checkbox{position:absolute;opacity:0;width:0;height:0}.pecb-table__checkbox:checked+.pecb-table__checkbox-custom{background-color:#212427;border-color:#212427}.pecb-table__checkbox:checked+.pecb-table__checkbox-custom:after{display:block}.pecb-table__checkbox:indeterminate+.pecb-table__checkbox-custom{background-color:#212427;border-color:#212427}.pecb-table__checkbox:indeterminate+.pecb-table__checkbox-custom:before{display:block}.pecb-table__checkbox:indeterminate+.pecb-table__checkbox-custom:after{display:none}.pecb-table__checkbox:focus+.pecb-table__checkbox-custom{box-shadow:0 0 0 2px #21242733}.pecb-table__checkbox-custom{width:18px;height:18px;border:1.5px solid #c2c2c2;border-radius:6px;background-color:#fff;position:relative;transition:all .15s ease-in-out}.pecb-table__checkbox-custom:after{content:\"\";display:none;position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.pecb-table__checkbox-custom:before{content:\"\";display:none;position:absolute;left:3px;top:6px;width:8px;height:2px;background-color:#fff}.pecb-table__empty-content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 0}.pecb-table__empty-message{color:#919191;font-size:14px}.pecb-table__loading{display:flex;align-items:center;justify-content:center;padding:48px;min-height:200px}.pecb-table__loading-spinner{display:flex;flex-direction:column;align-items:center;gap:12px;color:#616161;font-size:14px;font-family:inherit;font-weight:400}.pecb-table__spinner-icon{width:32px;height:32px;animation:spin 1s linear infinite;color:#212427}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pecb-table__pagination{padding:16px 0;margin-top:16px}.pecb-table__pagination--bordered{padding:16px 18px;background-color:#fff;border:1px solid #ececec;border-radius:6px}.pecb-table__user-cell{display:flex;align-items:center;gap:12px}.pecb-table__user-avatar{width:40px;height:40px;border-radius:9999px;object-fit:cover;flex-shrink:0}.pecb-table__user-info{display:flex;flex-direction:column;min-width:0}.pecb-table__user-name{font-weight:500;color:#313131;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pecb-table__user-secondary{font-size:12px;color:#919191;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pecb-table__action-buttons{display:flex;align-items:center;gap:0;justify-content:center}.pecb-table__action-divider{display:block;width:1px;height:16px;background-color:#c2c2c2;flex-shrink:0}.pecb-table__action-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:transparent;color:#212427;cursor:pointer;border-radius:6px;transition:all .15s ease-in-out;padding:0}.pecb-table__action-btn:hover{background-color:#f7f5f5;color:#313131}.pecb-table__action-btn:focus{outline:none;box-shadow:0 0 0 2px #21242733}.pecb-table__action-btn:disabled{opacity:.5;cursor:not-allowed}.pecb-table__action-btn--danger:hover{background-color:#fdecea;color:#dc3545}.pecb-table__action-btn svg{width:18px;height:18px}.pecb-table__custom-icon{display:flex;align-items:center;justify-content:center}.pecb-table__custom-icon svg{width:18px;height:18px}.pecb-table__link{color:#212427;text-decoration:none;font-size:inherit}.pecb-table__link:hover{text-decoration:underline;color:#313131}.pecb-table__link:focus-visible{outline:2px solid #212427;outline-offset:2px;border-radius:2px}@media (min-width: 768px){.pecb-table--md,.pecb-table--lg{font-size:14px}.pecb-table--md .pecb-table__cell,.pecb-table--lg .pecb-table__cell{padding:12px 16px}.pecb-table--md .pecb-table__cell--header,.pecb-table--lg .pecb-table__cell--header{padding:8px 16px}.pecb-table__pagination{padding:12px 16px}}\n"] }]
|
|
4522
|
+
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: i0.ChangeDetectorRef }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], showPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPagination", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showPageSizeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelector", required: false }] }], paginationVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationVariant", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selectedIndices: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndices", required: false }] }, { type: i0.Output, args: ["selectedIndicesChange"] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], wrapText: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapText", required: false }] }], sortColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortColumn", required: false }] }, { type: i0.Output, args: ["sortColumnChange"] }], sortDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirection", required: false }] }, { type: i0.Output, args: ["sortDirectionChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], selectAllAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllAriaLabel", required: false }] }], selectRowAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectRowAriaLabel", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowAction: [{ type: i0.Output, args: ["rowAction"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], emptyTemplate: [{
|
|
4488
4523
|
type: ContentChild,
|
|
4489
4524
|
args: ['emptyTemplate']
|
|
4490
4525
|
}], loadingTemplate: [{
|
|
@@ -6915,13 +6950,18 @@ class SpinnerComponent {
|
|
|
6915
6950
|
this.id = input(generateUniqueId('spinner'), ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
6916
6951
|
this.size = input(48, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
6917
6952
|
this.ariaLabel = input('Loading', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
|
|
6953
|
+
/**
|
|
6954
|
+
* Arc color. Any CSS color value.
|
|
6955
|
+
* Defaults to the brand primary (#a11e29) defined in SCSS when empty.
|
|
6956
|
+
*/
|
|
6957
|
+
this.color = input('', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
6918
6958
|
this.sizeValue = computed(() => this.size(), ...(ngDevMode ? [{ debugName: "sizeValue" }] : []));
|
|
6919
6959
|
this.strokeWidth = computed(() => Math.max(3, this.sizeValue() * 0.08), ...(ngDevMode ? [{ debugName: "strokeWidth" }] : []));
|
|
6920
6960
|
this.radius = computed(() => (this.sizeValue() - this.strokeWidth()) / 2, ...(ngDevMode ? [{ debugName: "radius" }] : []));
|
|
6921
6961
|
this.circumference = computed(() => 2 * Math.PI * this.radius(), ...(ngDevMode ? [{ debugName: "circumference" }] : []));
|
|
6922
6962
|
}
|
|
6923
6963
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6924
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: SpinnerComponent, isStandalone: true, selector: "pecb-spinner", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
6964
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: SpinnerComponent, isStandalone: true, selector: "pecb-spinner", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
6925
6965
|
<div
|
|
6926
6966
|
[id]="id()"
|
|
6927
6967
|
class="pecb-spinner"
|
|
@@ -6948,6 +6988,7 @@ class SpinnerComponent {
|
|
|
6948
6988
|
[attr.stroke-width]="strokeWidth()"
|
|
6949
6989
|
[attr.stroke-dasharray]="circumference()"
|
|
6950
6990
|
[attr.stroke-dashoffset]="circumference() * 0.75"
|
|
6991
|
+
[style.stroke]="color() || null"
|
|
6951
6992
|
stroke-linecap="round"
|
|
6952
6993
|
/>
|
|
6953
6994
|
</svg>
|
|
@@ -6984,13 +7025,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
6984
7025
|
[attr.stroke-width]="strokeWidth()"
|
|
6985
7026
|
[attr.stroke-dasharray]="circumference()"
|
|
6986
7027
|
[attr.stroke-dashoffset]="circumference() * 0.75"
|
|
7028
|
+
[style.stroke]="color() || null"
|
|
6987
7029
|
stroke-linecap="round"
|
|
6988
7030
|
/>
|
|
6989
7031
|
</svg>
|
|
6990
7032
|
<span class="pecb-spinner__sr-only">{{ ariaLabel() }}</span>
|
|
6991
7033
|
</div>
|
|
6992
7034
|
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".pecb-spinner{display:inline-flex;align-items:center;justify-content:center}.pecb-spinner svg{animation:pecb-spin .8s linear infinite}.pecb-spinner__track{stroke:#ececec}.pecb-spinner__arc{stroke:#a11e29}.pecb-spinner__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes pecb-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pecb-progress-bar{display:flex;flex-direction:column;width:100%;font-family:inherit}.pecb-progress-bar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.pecb-progress-bar__label{font-size:14px;font-weight:500;color:#212427;line-height:1}.pecb-progress-bar__track{width:100%;background-color:#ececec;border-radius:9999px;overflow:hidden}.pecb-progress-bar__fill{height:100%;border-radius:9999px;transition-property:width;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out;min-width:0}.pecb-progress-bar__footer{display:flex;align-items:center;justify-content:space-between;margin-top:4px}.pecb-progress-bar__metadata{font-size:14px;font-weight:500;color:#212427;line-height:1}.pecb-progress-bar__percentage{font-size:14px;font-weight:700;color:#212427;margin-left:auto}.pecb-progress-bar--lg .pecb-progress-bar__track{height:8px}.pecb-progress-bar--lg .pecb-progress-bar__label{font-size:14px}.pecb-progress-bar--sm .pecb-progress-bar__track{height:4px}.pecb-progress-bar--sm .pecb-progress-bar__label{font-size:12px}.pecb-progress-circle{display:inline-flex;align-items:center;justify-content:center;position:relative}.pecb-progress-circle svg{display:block}.pecb-progress-circle__track{stroke:#ececec}.pecb-progress-circle__fill{transition-property:stroke-dashoffset;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-progress-circle__text{position:absolute;font-weight:700;color:#212427;line-height:1.2;-webkit-user-select:none;user-select:none}\n"] }]
|
|
6993
|
-
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
7035
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
6994
7036
|
// =============================================================================
|
|
6995
7037
|
// PROGRESS BAR COMPONENT
|
|
6996
7038
|
// =============================================================================
|