@lesterarte/sefin-ui 0.0.20-dev.11 → 0.0.20-dev.13
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.
|
@@ -3637,10 +3637,15 @@ class ButtonGroupComponent {
|
|
|
3637
3637
|
}
|
|
3638
3638
|
return this.selectedValues.includes(option.value);
|
|
3639
3639
|
}
|
|
3640
|
-
onButtonClick(option) {
|
|
3640
|
+
onButtonClick(option, event) {
|
|
3641
3641
|
if (this.disabled || option.disabled) {
|
|
3642
3642
|
return;
|
|
3643
3643
|
}
|
|
3644
|
+
// Prevent default if event is provided
|
|
3645
|
+
if (event) {
|
|
3646
|
+
event.preventDefault();
|
|
3647
|
+
event.stopPropagation();
|
|
3648
|
+
}
|
|
3644
3649
|
this.buttonClick.emit(option);
|
|
3645
3650
|
if (this.groupVariant === 'segmented') {
|
|
3646
3651
|
// Toggle selection for segmented
|
|
@@ -3676,6 +3681,18 @@ class ButtonGroupComponent {
|
|
|
3676
3681
|
}
|
|
3677
3682
|
}
|
|
3678
3683
|
}
|
|
3684
|
+
handleButtonClick(option) {
|
|
3685
|
+
return (event) => this.onButtonClick(option, event);
|
|
3686
|
+
}
|
|
3687
|
+
getButtonVariant(option) {
|
|
3688
|
+
if (this.groupVariant === 'segmented') {
|
|
3689
|
+
// In segmented variant, only selected buttons use the specified variant
|
|
3690
|
+
// Non-selected buttons use 'ghost' for a subtle appearance
|
|
3691
|
+
return this.isSelected(option) ? this.variant : 'ghost';
|
|
3692
|
+
}
|
|
3693
|
+
// In default variant, all buttons use the specified variant
|
|
3694
|
+
return this.variant;
|
|
3695
|
+
}
|
|
3679
3696
|
getButtonClasses(option) {
|
|
3680
3697
|
const classes = ['sefin-button-group__button-item'];
|
|
3681
3698
|
// Size class
|
|
@@ -3711,11 +3728,11 @@ class ButtonGroupComponent {
|
|
|
3711
3728
|
return this.sanitizer.sanitize(1, html) || '';
|
|
3712
3729
|
}
|
|
3713
3730
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
3714
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ButtonGroupComponent, isStandalone: true, selector: "sefin-button-group", inputs: { options: "options", value: "value", multiple: "multiple", selectedValues: "selectedValues", variant: "variant", size: "size", groupVariant: "groupVariant", disabled: "disabled", fullWidth: "fullWidth", class: "class" }, outputs: { valueChange: "valueChange", selectedValuesChange: "selectedValuesChange", buttonClick: "buttonClick" }, ngImport: i0, template: "<div\n [class]=\"buttonGroupClasses\"\n role=\"group\"\n [attr.aria-label]=\"'Button group'\"\n>\n <button\n *ngFor=\"let option of options\"\n type=\"button\"\n [class]=\"getButtonClasses(option)\"\n [disabled]=\"disabled || option.disabled\"\n (click)=\"onButtonClick(option)\"\n [attr.aria-pressed]=\"isSelected(option)\"\n [attr.aria-label]=\"option.label\"\n >\n <span\n *ngIf=\"option.icon\"\n class=\"sefin-button-group__icon\"\n [innerHTML]=\"sanitizeHtml(option.icon)\"\n ></span>\n <span class=\"sefin-button-group__label\">{{ option.label }}</span>\n </button>\n</div>\n", styles: [".sefin-button-group{display:inline-flex;align-items:stretch;gap:0;font-family:var(--sefin-font-family-base);position:relative;border-radius:var(--sefin-radius-md);overflow:hidden;box-shadow:var(--sefin-shadow-sm);background-color:transparent;flex-wrap:nowrap}.sefin-button-group--full-width{display:flex;width:100%}.sefin-button-group--full-width .sefin-button-group__button-item{flex:1 1 0;min-width:0;width:0}.sefin-button-group__button-item{position:relative;border-radius:0;margin:0;flex:0 1 auto;min-width:fit-content;text-align:center;white-space:nowrap;border:none;cursor:pointer;outline:none;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:center;box-shadow:none;-webkit-user-select:none;user-select:none}.sefin-button-group__button-item:first-child,.sefin-button-group__button-item:last-child{border-radius:0}.sefin-button-group__button-item:hover:not(:disabled){z-index:1}.sefin-button-group__button-item:focus-visible{z-index:2;outline:2px solid var(--sefin-color-border-focus);outline-offset:-2px}.sefin-button-group__button-item:active:not(:disabled){transform:translateY(1px)}.sefin-button-group__button-item:disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-button-group__button-item--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);min-height:32px}.sefin-button-group__button-item--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);min-height:40px}.sefin-button-group__button-item--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg);min-height:48px}.sefin-button-group__label{display:inline-block;font-family:inherit}.sefin-button-group__icon{display:inline-flex;align-items:center;justify-content:center;margin-right:var(--sefin-spacing-xs);flex-shrink:0;font-family:inherit}.sefin-button-group__icon svg{display:block;width:16px;height:16px}.sefin-button-group--segmented{background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);padding:var(--sefin-spacing-xs);gap:var(--sefin-spacing-xs);overflow:visible;box-shadow:var(--sefin-shadow-sm);border-radius:var(--sefin-radius-md)}.sefin-button-group--segmented .sefin-button-group__button-item{border:1px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);color:var(--sefin-color-text);border-radius:var(--sefin-radius-sm);margin:0;transition:all .2s ease-in-out}.sefin-button-group--segmented .sefin-button-group__button-item:first-child,.sefin-button-group--segmented .sefin-button-group__button-item:last-child{border-radius:var(--sefin-radius-sm)}.sefin-button-group--segmented .sefin-button-group__button-item--selected{background-color:var(--sefin-color-primary);color:#fff;border-color:var(--sefin-color-primary);box-shadow:var(--sefin-shadow-sm)}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--primary{background-color:var(--sefin-color-primary);color:#fff;border-color:var(--sefin-color-primary)}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary{background-color:var(--sefin-color-secondary);color:#fff;border-color:var(--sefin-color-secondary)}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--outline{background-color:var(--sefin-color-primary);color:#fff;border-color:var(--sefin-color-primary)}.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected){background-color:var(--sefin-color-surface);color:var(--sefin-color-text);border-color:var(--sefin-color-border)}.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected):hover:not(:disabled){background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-primary);color:var(--sefin-color-primary)}.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--primary{background-color:var(--sefin-color-primary-dark);border-color:var(--sefin-color-primary-dark)}.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary{background-color:var(--sefin-color-secondary-dark);border-color:var(--sefin-color-secondary-dark)}.sefin-button-group--default{background-color:var(--sefin-color-primary);border:1px solid var(--sefin-color-primary);box-shadow:var(--sefin-shadow-sm);padding:0}.sefin-button-group--default .sefin-button-group__button-item{border:none;border-radius:0;background-color:transparent;color:#fff;margin:0;box-shadow:none}.sefin-button-group--default .sefin-button-group__button-item--selected,.sefin-button-group--default .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected){background-color:transparent;color:#fff}.sefin-button-group--default .sefin-button-group__button-item:hover:not(:disabled){background-color:#ffffff26}.sefin-button-group--default .sefin-button-group__button-item:active:not(:disabled){background-color:#fff3;transform:translateY(0)}.sefin-button-group--default .sefin-button-group__button-item:not(:last-child):after{content:\"\";position:absolute;right:0;top:20%;bottom:20%;width:1px;background-color:#ffffff4d;pointer-events:none}.sefin-button-group--default .sefin-button-group__button-item--primary,.sefin-button-group--default .sefin-button-group__button-item--secondary,.sefin-button-group--default .sefin-button-group__button-item--outline{background-color:transparent}.sefin-button-group--default.sefin-button-group--secondary{background-color:var(--sefin-color-secondary);border-color:var(--sefin-color-secondary)}.sefin-button-group--sm .sefin-button-group__icon svg{width:14px;height:14px}.sefin-button-group--md .sefin-button-group__icon svg{width:16px;height:16px}.sefin-button-group--lg .sefin-button-group__icon svg{width:18px;height:18px}.sefin-button-group--disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.sefin-button-group--disabled .sefin-button-group__button-item{cursor:not-allowed}\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.Default });
|
|
3731
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ButtonGroupComponent, isStandalone: true, selector: "sefin-button-group", inputs: { options: "options", value: "value", multiple: "multiple", selectedValues: "selectedValues", variant: "variant", size: "size", groupVariant: "groupVariant", disabled: "disabled", fullWidth: "fullWidth", class: "class" }, outputs: { valueChange: "valueChange", selectedValuesChange: "selectedValuesChange", buttonClick: "buttonClick" }, ngImport: i0, template: "<div\n [class]=\"buttonGroupClasses\"\n role=\"group\"\n [attr.aria-label]=\"'Button group'\"\n>\n <sefin-button\n *ngFor=\"let option of options\"\n [variant]=\"getButtonVariant(option)\"\n [size]=\"size\"\n [disabled]=\"disabled || option.disabled\"\n [class]=\"getButtonClasses(option)\"\n (clicked)=\"handleButtonClick(option)($event)\"\n [attr.aria-pressed]=\"isSelected(option)\"\n [attr.aria-label]=\"option.label\"\n type=\"button\"\n >\n <span\n *ngIf=\"option.icon\"\n class=\"sefin-button-group__icon\"\n [innerHTML]=\"sanitizeHtml(option.icon)\"\n ></span>\n <span class=\"sefin-button-group__label\">{{ option.label }}</span>\n </sefin-button>\n</div>\n", styles: [".sefin-button-group{display:inline-flex;align-items:stretch;gap:0;font-family:var(--sefin-font-family-base);position:relative;border-radius:var(--sefin-radius-md);overflow:hidden;box-shadow:var(--sefin-shadow-sm);background-color:transparent;flex-wrap:nowrap}.sefin-button-group--full-width{display:flex;width:100%}.sefin-button-group--full-width .sefin-button-group__button-item{flex:1 1 0;min-width:0;width:0}.sefin-button-group__button-item{position:relative;border-radius:0!important;margin:0!important;flex:0 1 auto;min-width:fit-content;text-align:center;white-space:nowrap;border:none!important;box-shadow:none!important;-webkit-user-select:none;user-select:none;display:flex;align-items:stretch}.sefin-button-group__button-item ::ng-deep sefin-button,.sefin-button-group__button-item ::ng-deep .sefin-button{border-radius:0!important;margin:0!important;border:none!important;box-shadow:none!important;width:100%;height:100%;display:flex;align-items:center;justify-content:center;min-height:auto!important}.sefin-button-group__button-item ::ng-deep button{border-radius:0!important;margin:0!important;border:none!important;box-shadow:none!important;width:100%;height:100%;font-weight:var(--sefin-font-weight-medium);font-family:var(--sefin-font-family-base);line-height:var(--sefin-line-height-normal);cursor:pointer;outline:none;transition:all .2s ease-in-out}.sefin-button-group__button-item ::ng-deep button.sefin-button--primary,.sefin-button-group__button-item ::ng-deep button.sefin-button--secondary,.sefin-button-group__button-item ::ng-deep button.sefin-button--outline,.sefin-button-group__button-item ::ng-deep button.sefin-button--ghost,.sefin-button-group__button-item ::ng-deep button.sefin-button--danger{background-color:transparent!important;color:inherit!important;border:none!important}.sefin-button-group__button-item ::ng-deep button.sefin-button--primary:hover,.sefin-button-group__button-item ::ng-deep button.sefin-button--secondary:hover,.sefin-button-group__button-item ::ng-deep button.sefin-button--outline:hover,.sefin-button-group__button-item ::ng-deep button.sefin-button--ghost:hover,.sefin-button-group__button-item ::ng-deep button.sefin-button--danger:hover{background-color:transparent!important;color:inherit!important}.sefin-button-group__button-item ::ng-deep button.sefin-button--primary:active,.sefin-button-group__button-item ::ng-deep button.sefin-button--secondary:active,.sefin-button-group__button-item ::ng-deep button.sefin-button--outline:active,.sefin-button-group__button-item ::ng-deep button.sefin-button--ghost:active,.sefin-button-group__button-item ::ng-deep button.sefin-button--danger:active{background-color:transparent!important;color:inherit!important}.sefin-button-group__button-item:first-child ::ng-deep button{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.sefin-button-group__button-item:last-child ::ng-deep button{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.sefin-button-group__button-item:hover:not(:disabled){z-index:1}.sefin-button-group__button-item:focus-visible{z-index:2}.sefin-button-group__button-item:focus-visible ::ng-deep button{outline:2px solid var(--sefin-color-border-focus);outline-offset:-2px}.sefin-button-group__button-item:active:not(:disabled){transform:translateY(1px)}.sefin-button-group__button-item:active:not(:disabled) ::ng-deep button{transform:translateY(1px)}.sefin-button-group__button-item:disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-button-group__button-item--sm ::ng-deep button{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md)!important;font-size:var(--sefin-font-size-sm)!important;min-height:32px!important}.sefin-button-group__button-item--md ::ng-deep button{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg)!important;font-size:var(--sefin-font-size-base)!important;min-height:40px!important}.sefin-button-group__button-item--lg ::ng-deep button{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl)!important;font-size:var(--sefin-font-size-lg)!important;min-height:48px!important}.sefin-button-group__label{display:inline-block;font-family:inherit}.sefin-button-group__icon{display:inline-flex;align-items:center;justify-content:center;margin-right:var(--sefin-spacing-xs);flex-shrink:0;font-family:inherit}.sefin-button-group__icon svg{display:block;width:16px;height:16px}.sefin-button-group--segmented{background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);padding:var(--sefin-spacing-xs);gap:var(--sefin-spacing-xs);overflow:visible;box-shadow:var(--sefin-shadow-sm);border-radius:var(--sefin-radius-md)}.sefin-button-group--segmented .sefin-button-group__button-item{border:1px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);color:var(--sefin-color-text);border-radius:var(--sefin-radius-sm);margin:0;transition:all .2s ease-in-out}.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button{border-radius:var(--sefin-radius-sm)!important;border:1px solid var(--sefin-color-border)!important;background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-text)!important;transition:all .2s ease-in-out!important}.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--primary,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--secondary,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--outline,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--ghost,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--danger,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--primary,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--secondary,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--outline,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--ghost,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--danger{border:1px solid var(--sefin-color-border)!important;background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-text)!important}.sefin-button-group--segmented .sefin-button-group__button-item--selected ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item--selected ::ng-deep button{background-color:var(--sefin-color-primary)!important;color:#fff!important;border-color:var(--sefin-color-primary)!important;box-shadow:var(--sefin-shadow-sm)!important}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--primary ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--primary ::ng-deep button{background-color:var(--sefin-color-primary)!important;color:#fff!important;border-color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary ::ng-deep button{background-color:var(--sefin-color-secondary)!important;color:#fff!important;border-color:var(--sefin-color-secondary)!important}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--outline ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--outline ::ng-deep button{background-color:var(--sefin-color-primary)!important;color:#fff!important;border-color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected) ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected) ::ng-deep button{background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-text)!important;border-color:var(--sefin-color-border)!important}.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected):hover:not(:disabled) ::ng-deep .sefin-button:hover,.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected):hover:not(:disabled) ::ng-deep button:hover{background-color:var(--sefin-color-surface-hover)!important;border-color:var(--sefin-color-primary)!important;color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--primary ::ng-deep .sefin-button:hover,.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--primary ::ng-deep button:hover{background-color:var(--sefin-color-primary-dark)!important;border-color:var(--sefin-color-primary-dark)!important}.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary ::ng-deep .sefin-button:hover,.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary ::ng-deep button:hover{background-color:var(--sefin-color-secondary-dark)!important;border-color:var(--sefin-color-secondary-dark)!important}.sefin-button-group--default{background-color:var(--sefin-color-primary);border:1px solid var(--sefin-color-primary);box-shadow:var(--sefin-shadow-sm);padding:0}.sefin-button-group--default .sefin-button-group__button-item{border:none!important;border-radius:0!important;background-color:transparent!important;margin:0;box-shadow:none!important}.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button{border:none!important;border-radius:0!important;background-color:transparent!important;color:#fff!important;box-shadow:none!important}.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--primary,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--secondary,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--outline,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--ghost,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--danger,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--primary,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--secondary,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--outline,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--ghost,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--danger{border:none!important;background-color:transparent!important;color:#fff!important}.sefin-button-group--default .sefin-button-group__button-item--selected ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item--selected ::ng-deep button,.sefin-button-group--default .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected) ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected) ::ng-deep button{background-color:transparent!important;color:#fff!important}.sefin-button-group--default .sefin-button-group__button-item:hover:not(:disabled) ::ng-deep .sefin-button:hover,.sefin-button-group--default .sefin-button-group__button-item:hover:not(:disabled) ::ng-deep button:hover{background-color:#ffffff26!important}.sefin-button-group--default .sefin-button-group__button-item:active:not(:disabled) ::ng-deep .sefin-button:active,.sefin-button-group--default .sefin-button-group__button-item:active:not(:disabled) ::ng-deep button:active{background-color:#fff3!important;transform:translateY(0)!important}.sefin-button-group--default .sefin-button-group__button-item:not(:last-child):after{content:\"\";position:absolute;right:0;top:20%;bottom:20%;width:1px;background-color:#ffffff4d;pointer-events:none;z-index:1}.sefin-button-group--default .sefin-button-group__button-item--primary ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item--primary ::ng-deep button,.sefin-button-group--default .sefin-button-group__button-item--secondary ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item--secondary ::ng-deep button,.sefin-button-group--default .sefin-button-group__button-item--outline ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item--outline ::ng-deep button{background-color:transparent!important}.sefin-button-group--default.sefin-button-group--secondary{background-color:var(--sefin-color-secondary);border-color:var(--sefin-color-secondary)}.sefin-button-group--sm .sefin-button-group__icon svg{width:14px;height:14px}.sefin-button-group--md .sefin-button-group__icon svg{width:16px;height:16px}.sefin-button-group--lg .sefin-button-group__icon svg{width:18px;height:18px}.sefin-button-group--disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.sefin-button-group--disabled .sefin-button-group__button-item{cursor:not-allowed}\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"] }, { kind: "component", type: ButtonComponent, selector: "sefin-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "class"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
3715
3732
|
}
|
|
3716
3733
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonGroupComponent, decorators: [{
|
|
3717
3734
|
type: Component,
|
|
3718
|
-
args: [{ selector: 'sefin-button-group', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.Default, template: "<div\n [class]=\"buttonGroupClasses\"\n role=\"group\"\n [attr.aria-label]=\"'Button group'\"\n>\n <button\n *ngFor=\"let option of options\"\n type=\"button\"\n [class]=\"getButtonClasses(option)\"\n [disabled]=\"disabled || option.disabled\"\n (click)=\"onButtonClick(option)\"\n [attr.aria-pressed]=\"isSelected(option)\"\n [attr.aria-label]=\"option.label\"\n >\n <span\n *ngIf=\"option.icon\"\n class=\"sefin-button-group__icon\"\n [innerHTML]=\"sanitizeHtml(option.icon)\"\n ></span>\n <span class=\"sefin-button-group__label\">{{ option.label }}</span>\n </button>\n</div>\n", styles: [".sefin-button-group{display:inline-flex;align-items:stretch;gap:0;font-family:var(--sefin-font-family-base);position:relative;border-radius:var(--sefin-radius-md);overflow:hidden;box-shadow:var(--sefin-shadow-sm);background-color:transparent;flex-wrap:nowrap}.sefin-button-group--full-width{display:flex;width:100%}.sefin-button-group--full-width .sefin-button-group__button-item{flex:1 1 0;min-width:0;width:0}.sefin-button-group__button-item{position:relative;border-radius:0;margin:0;flex:0 1 auto;min-width:fit-content;text-align:center;white-space:nowrap;border:none;cursor:pointer;outline:none;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:center;box-shadow:none;-webkit-user-select:none;user-select:none}.sefin-button-group__button-item:first-child,.sefin-button-group__button-item:last-child{border-radius:0}.sefin-button-group__button-item:hover:not(:disabled){z-index:1}.sefin-button-group__button-item:focus-visible{z-index:2;outline:2px solid var(--sefin-color-border-focus);outline-offset:-2px}.sefin-button-group__button-item:active:not(:disabled){transform:translateY(1px)}.sefin-button-group__button-item:disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-button-group__button-item--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);min-height:32px}.sefin-button-group__button-item--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);min-height:40px}.sefin-button-group__button-item--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg);min-height:48px}.sefin-button-group__label{display:inline-block;font-family:inherit}.sefin-button-group__icon{display:inline-flex;align-items:center;justify-content:center;margin-right:var(--sefin-spacing-xs);flex-shrink:0;font-family:inherit}.sefin-button-group__icon svg{display:block;width:16px;height:16px}.sefin-button-group--segmented{background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);padding:var(--sefin-spacing-xs);gap:var(--sefin-spacing-xs);overflow:visible;box-shadow:var(--sefin-shadow-sm);border-radius:var(--sefin-radius-md)}.sefin-button-group--segmented .sefin-button-group__button-item{border:1px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);color:var(--sefin-color-text);border-radius:var(--sefin-radius-sm);margin:0;transition:all .2s ease-in-out}.sefin-button-group--segmented .sefin-button-group__button-item:first-child,.sefin-button-group--segmented .sefin-button-group__button-item:last-child{border-radius:var(--sefin-radius-sm)}.sefin-button-group--segmented .sefin-button-group__button-item--selected{background-color:var(--sefin-color-primary);color:#fff;border-color:var(--sefin-color-primary);box-shadow:var(--sefin-shadow-sm)}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--primary{background-color:var(--sefin-color-primary);color:#fff;border-color:var(--sefin-color-primary)}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary{background-color:var(--sefin-color-secondary);color:#fff;border-color:var(--sefin-color-secondary)}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--outline{background-color:var(--sefin-color-primary);color:#fff;border-color:var(--sefin-color-primary)}.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected){background-color:var(--sefin-color-surface);color:var(--sefin-color-text);border-color:var(--sefin-color-border)}.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected):hover:not(:disabled){background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-primary);color:var(--sefin-color-primary)}.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--primary{background-color:var(--sefin-color-primary-dark);border-color:var(--sefin-color-primary-dark)}.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary{background-color:var(--sefin-color-secondary-dark);border-color:var(--sefin-color-secondary-dark)}.sefin-button-group--default{background-color:var(--sefin-color-primary);border:1px solid var(--sefin-color-primary);box-shadow:var(--sefin-shadow-sm);padding:0}.sefin-button-group--default .sefin-button-group__button-item{border:none;border-radius:0;background-color:transparent;color:#fff;margin:0;box-shadow:none}.sefin-button-group--default .sefin-button-group__button-item--selected,.sefin-button-group--default .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected){background-color:transparent;color:#fff}.sefin-button-group--default .sefin-button-group__button-item:hover:not(:disabled){background-color:#ffffff26}.sefin-button-group--default .sefin-button-group__button-item:active:not(:disabled){background-color:#fff3;transform:translateY(0)}.sefin-button-group--default .sefin-button-group__button-item:not(:last-child):after{content:\"\";position:absolute;right:0;top:20%;bottom:20%;width:1px;background-color:#ffffff4d;pointer-events:none}.sefin-button-group--default .sefin-button-group__button-item--primary,.sefin-button-group--default .sefin-button-group__button-item--secondary,.sefin-button-group--default .sefin-button-group__button-item--outline{background-color:transparent}.sefin-button-group--default.sefin-button-group--secondary{background-color:var(--sefin-color-secondary);border-color:var(--sefin-color-secondary)}.sefin-button-group--sm .sefin-button-group__icon svg{width:14px;height:14px}.sefin-button-group--md .sefin-button-group__icon svg{width:16px;height:16px}.sefin-button-group--lg .sefin-button-group__icon svg{width:18px;height:18px}.sefin-button-group--disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.sefin-button-group--disabled .sefin-button-group__button-item{cursor:not-allowed}\n"] }]
|
|
3735
|
+
args: [{ selector: 'sefin-button-group', standalone: true, imports: [CommonModule, ButtonComponent], changeDetection: ChangeDetectionStrategy.Default, template: "<div\n [class]=\"buttonGroupClasses\"\n role=\"group\"\n [attr.aria-label]=\"'Button group'\"\n>\n <sefin-button\n *ngFor=\"let option of options\"\n [variant]=\"getButtonVariant(option)\"\n [size]=\"size\"\n [disabled]=\"disabled || option.disabled\"\n [class]=\"getButtonClasses(option)\"\n (clicked)=\"handleButtonClick(option)($event)\"\n [attr.aria-pressed]=\"isSelected(option)\"\n [attr.aria-label]=\"option.label\"\n type=\"button\"\n >\n <span\n *ngIf=\"option.icon\"\n class=\"sefin-button-group__icon\"\n [innerHTML]=\"sanitizeHtml(option.icon)\"\n ></span>\n <span class=\"sefin-button-group__label\">{{ option.label }}</span>\n </sefin-button>\n</div>\n", styles: [".sefin-button-group{display:inline-flex;align-items:stretch;gap:0;font-family:var(--sefin-font-family-base);position:relative;border-radius:var(--sefin-radius-md);overflow:hidden;box-shadow:var(--sefin-shadow-sm);background-color:transparent;flex-wrap:nowrap}.sefin-button-group--full-width{display:flex;width:100%}.sefin-button-group--full-width .sefin-button-group__button-item{flex:1 1 0;min-width:0;width:0}.sefin-button-group__button-item{position:relative;border-radius:0!important;margin:0!important;flex:0 1 auto;min-width:fit-content;text-align:center;white-space:nowrap;border:none!important;box-shadow:none!important;-webkit-user-select:none;user-select:none;display:flex;align-items:stretch}.sefin-button-group__button-item ::ng-deep sefin-button,.sefin-button-group__button-item ::ng-deep .sefin-button{border-radius:0!important;margin:0!important;border:none!important;box-shadow:none!important;width:100%;height:100%;display:flex;align-items:center;justify-content:center;min-height:auto!important}.sefin-button-group__button-item ::ng-deep button{border-radius:0!important;margin:0!important;border:none!important;box-shadow:none!important;width:100%;height:100%;font-weight:var(--sefin-font-weight-medium);font-family:var(--sefin-font-family-base);line-height:var(--sefin-line-height-normal);cursor:pointer;outline:none;transition:all .2s ease-in-out}.sefin-button-group__button-item ::ng-deep button.sefin-button--primary,.sefin-button-group__button-item ::ng-deep button.sefin-button--secondary,.sefin-button-group__button-item ::ng-deep button.sefin-button--outline,.sefin-button-group__button-item ::ng-deep button.sefin-button--ghost,.sefin-button-group__button-item ::ng-deep button.sefin-button--danger{background-color:transparent!important;color:inherit!important;border:none!important}.sefin-button-group__button-item ::ng-deep button.sefin-button--primary:hover,.sefin-button-group__button-item ::ng-deep button.sefin-button--secondary:hover,.sefin-button-group__button-item ::ng-deep button.sefin-button--outline:hover,.sefin-button-group__button-item ::ng-deep button.sefin-button--ghost:hover,.sefin-button-group__button-item ::ng-deep button.sefin-button--danger:hover{background-color:transparent!important;color:inherit!important}.sefin-button-group__button-item ::ng-deep button.sefin-button--primary:active,.sefin-button-group__button-item ::ng-deep button.sefin-button--secondary:active,.sefin-button-group__button-item ::ng-deep button.sefin-button--outline:active,.sefin-button-group__button-item ::ng-deep button.sefin-button--ghost:active,.sefin-button-group__button-item ::ng-deep button.sefin-button--danger:active{background-color:transparent!important;color:inherit!important}.sefin-button-group__button-item:first-child ::ng-deep button{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.sefin-button-group__button-item:last-child ::ng-deep button{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.sefin-button-group__button-item:hover:not(:disabled){z-index:1}.sefin-button-group__button-item:focus-visible{z-index:2}.sefin-button-group__button-item:focus-visible ::ng-deep button{outline:2px solid var(--sefin-color-border-focus);outline-offset:-2px}.sefin-button-group__button-item:active:not(:disabled){transform:translateY(1px)}.sefin-button-group__button-item:active:not(:disabled) ::ng-deep button{transform:translateY(1px)}.sefin-button-group__button-item:disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-button-group__button-item--sm ::ng-deep button{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md)!important;font-size:var(--sefin-font-size-sm)!important;min-height:32px!important}.sefin-button-group__button-item--md ::ng-deep button{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg)!important;font-size:var(--sefin-font-size-base)!important;min-height:40px!important}.sefin-button-group__button-item--lg ::ng-deep button{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl)!important;font-size:var(--sefin-font-size-lg)!important;min-height:48px!important}.sefin-button-group__label{display:inline-block;font-family:inherit}.sefin-button-group__icon{display:inline-flex;align-items:center;justify-content:center;margin-right:var(--sefin-spacing-xs);flex-shrink:0;font-family:inherit}.sefin-button-group__icon svg{display:block;width:16px;height:16px}.sefin-button-group--segmented{background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);padding:var(--sefin-spacing-xs);gap:var(--sefin-spacing-xs);overflow:visible;box-shadow:var(--sefin-shadow-sm);border-radius:var(--sefin-radius-md)}.sefin-button-group--segmented .sefin-button-group__button-item{border:1px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);color:var(--sefin-color-text);border-radius:var(--sefin-radius-sm);margin:0;transition:all .2s ease-in-out}.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button{border-radius:var(--sefin-radius-sm)!important;border:1px solid var(--sefin-color-border)!important;background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-text)!important;transition:all .2s ease-in-out!important}.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--primary,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--secondary,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--outline,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--ghost,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--danger,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--primary,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--secondary,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--outline,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--ghost,.sefin-button-group--segmented .sefin-button-group__button-item ::ng-deep button.sefin-button--danger{border:1px solid var(--sefin-color-border)!important;background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-text)!important}.sefin-button-group--segmented .sefin-button-group__button-item--selected ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item--selected ::ng-deep button{background-color:var(--sefin-color-primary)!important;color:#fff!important;border-color:var(--sefin-color-primary)!important;box-shadow:var(--sefin-shadow-sm)!important}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--primary ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--primary ::ng-deep button{background-color:var(--sefin-color-primary)!important;color:#fff!important;border-color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary ::ng-deep button{background-color:var(--sefin-color-secondary)!important;color:#fff!important;border-color:var(--sefin-color-secondary)!important}.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--outline ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item--selected.sefin-button-group__button-item--outline ::ng-deep button{background-color:var(--sefin-color-primary)!important;color:#fff!important;border-color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected) ::ng-deep .sefin-button,.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected) ::ng-deep button{background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-text)!important;border-color:var(--sefin-color-border)!important}.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected):hover:not(:disabled) ::ng-deep .sefin-button:hover,.sefin-button-group--segmented .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected):hover:not(:disabled) ::ng-deep button:hover{background-color:var(--sefin-color-surface-hover)!important;border-color:var(--sefin-color-primary)!important;color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--primary ::ng-deep .sefin-button:hover,.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--primary ::ng-deep button:hover{background-color:var(--sefin-color-primary-dark)!important;border-color:var(--sefin-color-primary-dark)!important}.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary ::ng-deep .sefin-button:hover,.sefin-button-group--segmented .sefin-button-group__button-item:hover:not(:disabled).sefin-button-group__button-item--selected.sefin-button-group__button-item--secondary ::ng-deep button:hover{background-color:var(--sefin-color-secondary-dark)!important;border-color:var(--sefin-color-secondary-dark)!important}.sefin-button-group--default{background-color:var(--sefin-color-primary);border:1px solid var(--sefin-color-primary);box-shadow:var(--sefin-shadow-sm);padding:0}.sefin-button-group--default .sefin-button-group__button-item{border:none!important;border-radius:0!important;background-color:transparent!important;margin:0;box-shadow:none!important}.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button{border:none!important;border-radius:0!important;background-color:transparent!important;color:#fff!important;box-shadow:none!important}.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--primary,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--secondary,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--outline,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--ghost,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep .sefin-button.sefin-button--danger,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--primary,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--secondary,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--outline,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--ghost,.sefin-button-group--default .sefin-button-group__button-item ::ng-deep button.sefin-button--danger{border:none!important;background-color:transparent!important;color:#fff!important}.sefin-button-group--default .sefin-button-group__button-item--selected ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item--selected ::ng-deep button,.sefin-button-group--default .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected) ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item:not(.sefin-button-group__button-item--selected) ::ng-deep button{background-color:transparent!important;color:#fff!important}.sefin-button-group--default .sefin-button-group__button-item:hover:not(:disabled) ::ng-deep .sefin-button:hover,.sefin-button-group--default .sefin-button-group__button-item:hover:not(:disabled) ::ng-deep button:hover{background-color:#ffffff26!important}.sefin-button-group--default .sefin-button-group__button-item:active:not(:disabled) ::ng-deep .sefin-button:active,.sefin-button-group--default .sefin-button-group__button-item:active:not(:disabled) ::ng-deep button:active{background-color:#fff3!important;transform:translateY(0)!important}.sefin-button-group--default .sefin-button-group__button-item:not(:last-child):after{content:\"\";position:absolute;right:0;top:20%;bottom:20%;width:1px;background-color:#ffffff4d;pointer-events:none;z-index:1}.sefin-button-group--default .sefin-button-group__button-item--primary ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item--primary ::ng-deep button,.sefin-button-group--default .sefin-button-group__button-item--secondary ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item--secondary ::ng-deep button,.sefin-button-group--default .sefin-button-group__button-item--outline ::ng-deep .sefin-button,.sefin-button-group--default .sefin-button-group__button-item--outline ::ng-deep button{background-color:transparent!important}.sefin-button-group--default.sefin-button-group--secondary{background-color:var(--sefin-color-secondary);border-color:var(--sefin-color-secondary)}.sefin-button-group--sm .sefin-button-group__icon svg{width:14px;height:14px}.sefin-button-group--md .sefin-button-group__icon svg{width:16px;height:16px}.sefin-button-group--lg .sefin-button-group__icon svg{width:18px;height:18px}.sefin-button-group--disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.sefin-button-group--disabled .sefin-button-group__button-item{cursor:not-allowed}\n"] }]
|
|
3719
3736
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { options: [{
|
|
3720
3737
|
type: Input
|
|
3721
3738
|
}], value: [{
|
|
@@ -5734,11 +5751,11 @@ class TableComponent {
|
|
|
5734
5751
|
// Expose Math to template
|
|
5735
5752
|
Math = Math;
|
|
5736
5753
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5737
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TableComponent, isStandalone: true, selector: "sefin-table", inputs: { columns: "columns", data: "data", trackByKey: "trackByKey", loading: "loading", emptyText: "emptyText", density: "density", striped: "striped", hover: "hover", selectable: "selectable", selectionMode: "selectionMode", pagination: "pagination", pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", total: "total", sort: "sort", serverSide: "serverSide", stickyHeader: "stickyHeader", headerActionsTemplate: "headerActionsTemplate", emptyIconTemplate: "emptyIconTemplate" }, outputs: { rowClicked: "rowClicked", selectionChanged: "selectionChanged", pageChanged: "pageChanged", sortChanged: "sortChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sefin-table__container\">\n <!-- Header Actions Slot -->\n <div *ngIf=\"headerActionsTemplate\" class=\"sefin-table__header-actions\">\n <ng-container *ngTemplateOutlet=\"headerActionsTemplate\"></ng-container>\n </div>\n\n <!-- Loading Overlay -->\n <div *ngIf=\"loading\" class=\"sefin-table__loading\">\n <div class=\"sefin-table__loading-bar\"></div>\n <div class=\"sefin-table__loading-rows\">\n <div *ngFor=\"let i of [1, 2, 3, 4, 5]\" class=\"sefin-table__skeleton-row\">\n <div\n class=\"sefin-table__skeleton-cell\"\n *ngFor=\"let col of columns\"\n ></div>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <div\n class=\"sefin-table__wrapper\"\n [class.sefin-table__wrapper--loading]=\"loading\"\n >\n <table [class]=\"getTableClasses()\" class=\"sefin-table__native-table\">\n <!-- Table Header -->\n <thead\n class=\"sefin-table__header\"\n [class.sefin-table__header--sticky]=\"stickyHeader\"\n >\n <tr class=\"sefin-table__header-row\">\n <!-- Selection Column Header -->\n <th\n *ngIf=\"selectable\"\n class=\"sefin-table__header-cell sefin-table__header-cell--select\"\n >\n <sefin-checkbox\n *ngIf=\"selectionMode === 'multiple'\"\n [value]=\"isAllSelected()\"\n [indeterminate]=\"isIndeterminate()\"\n (checkedChange)=\"toggleSelectAll($event)\"\n [attr.aria-label]=\"'Select all rows'\"\n size=\"sm\"\n ></sefin-checkbox>\n </th>\n\n <!-- Data Column Headers -->\n <th\n *ngFor=\"let column of columns\"\n [class]=\"getColumnClass(column)\"\n [class.sefin-table__header-cell--sortable]=\"column.sortable && sort\"\n [class.sefin-table__header-cell--sorted]=\"\n currentSortColumn() === column.key\n \"\n [class.sefin-table__header-cell--sort-asc]=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'asc'\n \"\n [class.sefin-table__header-cell--sort-desc]=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'desc'\n \"\n [class.sefin-table__header-cell--sticky]=\"column.sticky\"\n [class.sefin-table__header-cell--sticky-end]=\"\n column.sticky && column.stickyEnd\n \"\n [style.width]=\"getColumnWidth(column)\"\n class=\"sefin-table__header-cell\"\n (click)=\"column.sortable && sort ? onSort(column) : null\"\n [attr.aria-sort]=\"\n currentSortColumn() === column.key\n ? currentSortDirection() === 'asc'\n ? 'ascending'\n : currentSortDirection() === 'desc'\n ? 'descending'\n : 'none'\n : null\n \"\n role=\"columnheader\"\n [attr.tabindex]=\"column.sortable && sort ? 0 : null\"\n >\n <span class=\"sefin-table__header-content\">\n {{ column.header }}\n <span\n *ngIf=\"column.sortable && sort\"\n class=\"sefin-table__sort-icon\"\n >\n <svg\n *ngIf=\"\n currentSortColumn() !== column.key ||\n currentSortDirection() === ''\n \"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'asc'\n \"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 7.5L6 4.5L9 7.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'desc'\n \"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 4.5L6 7.5L9 4.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n </span>\n </th>\n\n <th\n *ngIf=\"hasActionsColumn()\"\n class=\"sefin-table__header-cell sefin-table__header-cell--actions\"\n ></th>\n </tr>\n </thead>\n\n <!-- Table Body -->\n <tbody class=\"sefin-table__body\">\n <!-- Data Rows -->\n <tr\n *ngFor=\"let row of displayedData(); trackBy: trackByFn\"\n class=\"sefin-table__row sefin-table__row--clickable\"\n (click)=\"onRowClick(row)\"\n >\n <!-- Selection Column Cell -->\n <td\n *ngIf=\"selectable\"\n class=\"sefin-table__cell sefin-table__cell--select\"\n >\n <sefin-checkbox\n [value]=\"isSelected(row)\"\n (checkedChange)=\"toggleRowSelection($event, row)\"\n [attr.aria-label]=\"'Select row'\"\n size=\"sm\"\n ></sefin-checkbox>\n </td>\n\n <!-- Data Column Cells -->\n <td\n *ngFor=\"let column of columns\"\n [class]=\"getColumnClass(column)\"\n [class.sefin-table__cell--sticky]=\"column.sticky\"\n [class.sefin-table__cell--sticky-end]=\"\n column.sticky && column.stickyEnd\n \"\n class=\"sefin-table__cell\"\n >\n <!-- Custom Template -->\n <ng-container *ngIf=\"column.cellTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cellTemplate;\n context: {\n $implicit: row,\n column: column,\n value: getCellValue(row, column)\n }\n \"\n ></ng-container>\n </ng-container>\n\n <!-- Badge Type -->\n <ng-container\n *ngIf=\"!column.cellTemplate && column.type === 'badge'\"\n >\n <sefin-badge\n [value]=\"getCellValue(row, column)\"\n variant=\"primary\"\n size=\"sm\"\n ></sefin-badge>\n </ng-container>\n\n <!-- Actions Type -->\n <ng-container\n *ngIf=\"!column.cellTemplate && column.type === 'actions'\"\n >\n <div class=\"sefin-table__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </ng-container>\n\n <!-- Default/Text/Number/Date Type -->\n <ng-container\n *ngIf=\"\n !column.cellTemplate &&\n column.type !== 'badge' &&\n column.type !== 'actions'\n \"\n >\n <span class=\"sefin-table__cell-content\">\n {{ formatCellValue(getCellValue(row, column), column.type) }}\n </span>\n </ng-container>\n </td>\n\n <!-- Actions Column Cell -->\n <td\n *ngIf=\"hasActionsColumn()\"\n class=\"sefin-table__cell sefin-table__cell--actions\"\n >\n <div class=\"sefin-table__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </td>\n </tr>\n\n <!-- Empty Row -->\n <tr *ngIf=\"isEmpty()\" class=\"sefin-table__row sefin-table__row--empty\">\n <td [attr.colspan]=\"totalColspan()\" class=\"sefin-table__empty-cell\">\n <div class=\"sefin-table__empty-state\">\n <ng-container *ngIf=\"emptyIconTemplate\">\n <ng-container\n *ngTemplateOutlet=\"emptyIconTemplate\"\n ></ng-container>\n </ng-container>\n <p class=\"sefin-table__empty-text\">{{ emptyText }}</p>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <!-- Pagination -->\n <sefin-pagination\n *ngIf=\"pagination && !isEmpty()\"\n [currentPage]=\"currentPage()\"\n [totalPages]=\"totalPages()\"\n [totalItems]=\"serverSide && total !== undefined ? total : undefined\"\n [itemsPerPage]=\"currentPageSize()\"\n (pageChange)=\"onPageChange($event)\"\n class=\"sefin-table__paginator\"\n size=\"md\"\n ></sefin-pagination>\n</div>\n", styles: [".sefin-table{display:block;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border-radius:var(--sefin-radius-md, 8px);overflow:hidden}.sefin-table__container{display:flex;flex-direction:column;width:100%;background-color:var(--sefin-color-surface, #ffffff);border:1px solid var(--sefin-color-border, #cecece);border-radius:var(--sefin-radius-md, 8px);overflow:hidden;box-shadow:var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05));transition:box-shadow .2s ease-in-out}.sefin-table__header-actions{display:flex;justify-content:flex-end;align-items:center;padding:var(--sefin-spacing-md, 16px);border-bottom:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);border-radius:var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px) 0 0}.sefin-table__wrapper{position:relative;overflow-x:auto;overflow-y:visible;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__wrapper--loading{opacity:.6;pointer-events:none}.sefin-table__loading{position:absolute;inset:0;z-index:10;background-color:#fffffffa;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;flex-direction:column;border-radius:var(--sefin-radius-md, 8px)}.sefin-table__loading-bar{height:3px;background:linear-gradient(90deg,transparent,var(--sefin-color-primary, #55C3D8),transparent);animation:loading-bar 1.5s ease-in-out infinite;width:100%;border-radius:0 var(--sefin-radius-lg, 12px) 0 0}@keyframes loading-bar{0%{transform:translate(-100%)}to{transform:translate(200%)}}.sefin-table__loading-rows{flex:1;display:flex;flex-direction:column;padding:var(--sefin-spacing-lg, 24px);gap:var(--sefin-spacing-md, 16px)}.sefin-table__skeleton-row{display:flex;gap:var(--sefin-spacing-md, 16px);padding:var(--sefin-spacing-sm, 8px) 0}.sefin-table__skeleton-cell{flex:1;height:20px;background:linear-gradient(90deg,var(--sefin-color-surface-hover, #f5f5f5) 0%,rgba(85,195,216,.15) 50%,var(--sefin-color-surface-hover, #f5f5f5) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--sefin-radius-sm, 4px)}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.sefin-table__native-table{width:100%;border-collapse:separate;border-spacing:0;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--density-compact .sefin-table__header-cell,.sefin-table--density-compact .sefin-table__cell{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table--density-compact .sefin-table__header-cell{padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table--density-compact .sefin-table__cell{padding-top:var(--sefin-spacing-xs, 4px);padding-bottom:var(--sefin-spacing-xs, 4px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell{padding:var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell{padding-top:var(--sefin-spacing-md, 16px);padding-bottom:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell{padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table__header{background-color:var(--sefin-color-background-elevated, #fafafa);border-bottom:2px solid var(--sefin-color-border, #e5e5e5)}.sefin-table__header--sticky{position:sticky;top:0;z-index:3;box-shadow:0 2px 8px #0000000f}.sefin-table__header-row{background-color:var(--sefin-color-background-elevated, #fafafa)}.sefin-table__header-cell{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-sm, .875rem);color:var(--sefin-color-text, #383838);text-transform:uppercase;letter-spacing:.5px;text-align:left;white-space:nowrap;border-bottom:none;position:relative;background-color:var(--sefin-color-background-elevated, #fafafa);-webkit-user-select:none;user-select:none;transition:all .2s ease-in-out;z-index:1}.sefin-table__header-cell--align-left{text-align:left}.sefin-table__header-cell--align-center{text-align:center}.sefin-table__header-cell--align-right{text-align:right}.sefin-table__header-cell--select{width:56px;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px);text-align:center}.sefin-table__header-cell--actions{width:120px;text-align:right}.sefin-table__header-cell--sortable{cursor:pointer}.sefin-table__header-cell--sortable:hover{background-color:#55c3d814;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:active{background-color:#55c3d81f}.sefin-table__header-cell--sortable:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__header-cell--sorted{color:var(--sefin-color-primary, #55C3D8);background-color:#55c3d80f}.sefin-table__header-cell--sorted .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sticky{position:sticky;background-color:var(--sefin-color-background-elevated, #fafafa);z-index:2;box-shadow:2px 0 4px #0000000a}.sefin-table__header-cell--sticky:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--sefin-color-border, #e5e5e5);opacity:.6}.sefin-table__header-cell--sticky.sefin-table__header-cell--sticky-end{right:0;box-shadow:-2px 0 4px #0000000a}.sefin-table__header-cell--sticky.sefin-table__header-cell--sticky-end:after{left:0;right:auto}.sefin-table__header-content{display:flex;align-items:center;justify-content:flex-start;gap:var(--sefin-spacing-xs, 4px);width:100%}.sefin-table__sort-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;color:var(--sefin-color-text-secondary, #9b9b9b);opacity:.4;transition:all .2s ease-in-out;flex-shrink:0;margin-left:var(--sefin-spacing-xs, 4px)}.sefin-table__sort-icon svg{display:block;width:100%;height:100%}.sefin-table__body{background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row{border-bottom:1px solid var(--sefin-color-border, #e5e5e5);transition:all .2s ease-in-out;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row--clickable{cursor:pointer}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty){background-color:#55c3d80d;box-shadow:inset 3px 0 0 var(--sefin-color-primary, #55C3D8)}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table__row--clickable:active:not(.sefin-table__row--empty){background-color:#55c3d814;box-shadow:inset 3px 0 0 var(--sefin-color-primary-dark, #3f9bb0)}.sefin-table__row--clickable:active:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d814}.sefin-table__row--empty{border-bottom:none}.sefin-table__row:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__row:last-child{border-bottom:none}.sefin-table__cell{font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);font-size:var(--sefin-font-size-base, 1rem);font-weight:var(--sefin-font-weight-normal, 400);color:var(--sefin-color-text, #383838);border-bottom:none;vertical-align:middle;background-color:inherit;transition:background-color .2s ease-in-out,color .2s ease-in-out}.sefin-table__cell--align-left{text-align:left}.sefin-table__cell--align-center{text-align:center}.sefin-table__cell--align-right{text-align:right}.sefin-table__cell--select{width:56px;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px);text-align:center}.sefin-table__cell--actions{text-align:right;width:120px}.sefin-table__cell--sticky{position:sticky;background-color:inherit;z-index:1;box-shadow:2px 0 4px #0000000a}.sefin-table__cell--sticky:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--sefin-color-border, #e5e5e5);opacity:.6}.sefin-table__cell--sticky.sefin-table__cell--sticky-end{right:0;box-shadow:-2px 0 4px #0000000a}.sefin-table__cell--sticky.sefin-table__cell--sticky-end:after{left:0;right:auto}.sefin-table__cell-content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #383838)}.sefin-table__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--sefin-spacing-xs, 4px);flex-wrap:wrap}.sefin-table--striped .sefin-table__row:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__row:nth-child(odd){background-color:#f8f9facc}.sefin-table--striped .sefin-table__cell--sticky:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__cell--sticky:nth-child(odd){background-color:#f8f9facc}.sefin-table--striped .sefin-table__row--clickable:hover,.sefin-table--striped .sefin-table__row--clickable:hover .sefin-table__cell--sticky{background-color:#55c3d814!important}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table--sticky-header .sefin-table__header{position:sticky;top:0;z-index:3;box-shadow:0 4px 12px #00000014}.sefin-table__empty-cell{padding:var(--sefin-spacing-4xl, 96px) var(--sefin-spacing-xl, 32px);text-align:center;border-bottom:none;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sefin-spacing-lg, 24px);padding:var(--sefin-spacing-2xl, 48px);background:linear-gradient(to bottom,rgba(248,249,250,.5),transparent);border-radius:var(--sefin-radius-md, 8px);margin:var(--sefin-spacing-lg, 24px)}.sefin-table__empty-text{font-size:var(--sefin-font-size-lg, 1.125rem);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-relaxed, 1.75);color:var(--sefin-color-text-secondary, #686868);margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);max-width:480px;letter-spacing:.2px}.sefin-table__paginator{border-top:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);padding:var(--sefin-spacing-md, 16px);border-radius:0 0 var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px)}.sefin-table ::ng-deep .sefin-checkbox{margin:0;transition:transform .2s ease-in-out}.sefin-table ::ng-deep .sefin-checkbox:hover{transform:scale(1.05)}.sefin-table ::ng-deep .sefin-badge{margin:0;box-shadow:0 1px 3px #0000001a;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-badge:hover{transform:translateY(-1px);box-shadow:0 2px 6px #00000026}.sefin-table ::ng-deep .sefin-button,.sefin-table ::ng-deep .sefin-icon-button{transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-button:hover,.sefin-table ::ng-deep .sefin-icon-button:hover{transform:translateY(-1px)}.sefin-table ::ng-deep .sefin-button:active,.sefin-table ::ng-deep .sefin-icon-button:active{transform:translateY(0)}\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"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginationComponent, selector: "sefin-pagination", inputs: ["currentPage", "totalPages", "totalItems", "itemsPerPage", "siblingCount", "showFirstLast", "showPrevNext", "size", "variant", "class"], outputs: ["pageChange"] }, { kind: "component", type: CheckboxComponent, selector: "sefin-checkbox", inputs: ["size", "disabled", "indeterminate", "class", "label", "name", "value"], outputs: ["valueChange", "checkedChange"] }, { kind: "component", type: BadgeComponent, selector: "sefin-badge", inputs: ["variant", "size", "dot", "max", "value", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5754
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TableComponent, isStandalone: true, selector: "sefin-table", inputs: { columns: "columns", data: "data", trackByKey: "trackByKey", loading: "loading", emptyText: "emptyText", density: "density", striped: "striped", hover: "hover", selectable: "selectable", selectionMode: "selectionMode", pagination: "pagination", pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", total: "total", sort: "sort", serverSide: "serverSide", stickyHeader: "stickyHeader", headerActionsTemplate: "headerActionsTemplate", emptyIconTemplate: "emptyIconTemplate" }, outputs: { rowClicked: "rowClicked", selectionChanged: "selectionChanged", pageChanged: "pageChanged", sortChanged: "sortChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sefin-table__container\">\n <!-- Header Actions Slot -->\n <div *ngIf=\"headerActionsTemplate\" class=\"sefin-table__header-actions\">\n <ng-container *ngTemplateOutlet=\"headerActionsTemplate\"></ng-container>\n </div>\n\n <!-- Loading Overlay -->\n <div *ngIf=\"loading\" class=\"sefin-table__loading\">\n <div class=\"sefin-table__loading-bar\"></div>\n <div class=\"sefin-table__loading-rows\">\n <div *ngFor=\"let i of [1, 2, 3, 4, 5]\" class=\"sefin-table__skeleton-row\">\n <div\n class=\"sefin-table__skeleton-cell\"\n *ngFor=\"let col of columns\"\n ></div>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <div\n class=\"sefin-table__wrapper\"\n [class.sefin-table__wrapper--loading]=\"loading\"\n >\n <table [class]=\"getTableClasses()\" class=\"sefin-table__native-table\">\n <!-- Table Header -->\n <thead\n class=\"sefin-table__header\"\n [class.sefin-table__header--sticky]=\"stickyHeader\"\n >\n <tr class=\"sefin-table__header-row\">\n <!-- Selection Column Header -->\n <th\n *ngIf=\"selectable\"\n class=\"sefin-table__header-cell sefin-table__header-cell--select\"\n >\n <sefin-checkbox\n *ngIf=\"selectionMode === 'multiple'\"\n [value]=\"isAllSelected()\"\n [indeterminate]=\"isIndeterminate()\"\n (checkedChange)=\"toggleSelectAll($event)\"\n [attr.aria-label]=\"'Select all rows'\"\n size=\"sm\"\n ></sefin-checkbox>\n </th>\n\n <!-- Data Column Headers -->\n <th\n *ngFor=\"let column of columns\"\n [class]=\"getColumnClass(column)\"\n [class.sefin-table__header-cell--sortable]=\"column.sortable && sort\"\n [class.sefin-table__header-cell--sorted]=\"\n currentSortColumn() === column.key\n \"\n [class.sefin-table__header-cell--sort-asc]=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'asc'\n \"\n [class.sefin-table__header-cell--sort-desc]=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'desc'\n \"\n [class.sefin-table__header-cell--sticky]=\"column.sticky\"\n [class.sefin-table__header-cell--sticky-end]=\"\n column.sticky && column.stickyEnd\n \"\n [style.width]=\"getColumnWidth(column)\"\n class=\"sefin-table__header-cell\"\n (click)=\"column.sortable && sort ? onSort(column) : null\"\n [attr.aria-sort]=\"\n currentSortColumn() === column.key\n ? currentSortDirection() === 'asc'\n ? 'ascending'\n : currentSortDirection() === 'desc'\n ? 'descending'\n : 'none'\n : null\n \"\n role=\"columnheader\"\n [attr.tabindex]=\"column.sortable && sort ? 0 : null\"\n >\n <span class=\"sefin-table__header-content\">\n {{ column.header }}\n <span\n *ngIf=\"column.sortable && sort\"\n class=\"sefin-table__sort-icon\"\n >\n <svg\n *ngIf=\"\n currentSortColumn() !== column.key ||\n currentSortDirection() === ''\n \"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'asc'\n \"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 7.5L6 4.5L9 7.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'desc'\n \"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 4.5L6 7.5L9 4.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n </span>\n </th>\n\n <th\n *ngIf=\"hasActionsColumn()\"\n class=\"sefin-table__header-cell sefin-table__header-cell--actions\"\n ></th>\n </tr>\n </thead>\n\n <!-- Table Body -->\n <tbody class=\"sefin-table__body\">\n <!-- Data Rows -->\n <tr\n *ngFor=\"let row of displayedData(); trackBy: trackByFn\"\n class=\"sefin-table__row sefin-table__row--clickable\"\n (click)=\"onRowClick(row)\"\n >\n <!-- Selection Column Cell -->\n <td\n *ngIf=\"selectable\"\n class=\"sefin-table__cell sefin-table__cell--select\"\n >\n <sefin-checkbox\n [value]=\"isSelected(row)\"\n (checkedChange)=\"toggleRowSelection($event, row)\"\n [attr.aria-label]=\"'Select row'\"\n size=\"sm\"\n ></sefin-checkbox>\n </td>\n\n <!-- Data Column Cells -->\n <td\n *ngFor=\"let column of columns\"\n [class]=\"getColumnClass(column)\"\n [class.sefin-table__cell--sticky]=\"column.sticky\"\n [class.sefin-table__cell--sticky-end]=\"\n column.sticky && column.stickyEnd\n \"\n class=\"sefin-table__cell\"\n >\n <!-- Custom Template -->\n <ng-container *ngIf=\"column.cellTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cellTemplate;\n context: {\n $implicit: row,\n column: column,\n value: getCellValue(row, column)\n }\n \"\n ></ng-container>\n </ng-container>\n\n <!-- Badge Type -->\n <ng-container\n *ngIf=\"!column.cellTemplate && column.type === 'badge'\"\n >\n <sefin-badge\n [value]=\"getCellValue(row, column)\"\n variant=\"primary\"\n size=\"sm\"\n ></sefin-badge>\n </ng-container>\n\n <!-- Actions Type -->\n <ng-container\n *ngIf=\"!column.cellTemplate && column.type === 'actions'\"\n >\n <div class=\"sefin-table__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </ng-container>\n\n <!-- Default/Text/Number/Date Type -->\n <ng-container\n *ngIf=\"\n !column.cellTemplate &&\n column.type !== 'badge' &&\n column.type !== 'actions'\n \"\n >\n <span class=\"sefin-table__cell-content\">\n {{ formatCellValue(getCellValue(row, column), column.type) }}\n </span>\n </ng-container>\n </td>\n\n <!-- Actions Column Cell -->\n <td\n *ngIf=\"hasActionsColumn()\"\n class=\"sefin-table__cell sefin-table__cell--actions\"\n >\n <div class=\"sefin-table__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </td>\n </tr>\n\n <!-- Empty Row -->\n <tr *ngIf=\"isEmpty()\" class=\"sefin-table__row sefin-table__row--empty\">\n <td [attr.colspan]=\"totalColspan()\" class=\"sefin-table__empty-cell\">\n <div class=\"sefin-table__empty-state\">\n <ng-container *ngIf=\"emptyIconTemplate\">\n <ng-container\n *ngTemplateOutlet=\"emptyIconTemplate\"\n ></ng-container>\n </ng-container>\n <p class=\"sefin-table__empty-text\">{{ emptyText }}</p>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <!-- Pagination -->\n <sefin-pagination\n *ngIf=\"pagination && !isEmpty()\"\n [currentPage]=\"currentPage()\"\n [totalPages]=\"totalPages()\"\n [totalItems]=\"serverSide && total !== undefined ? total : undefined\"\n [itemsPerPage]=\"currentPageSize()\"\n (pageChange)=\"onPageChange($event)\"\n class=\"sefin-table__paginator\"\n size=\"sm\"\n ></sefin-pagination>\n</div>\n", styles: [".sefin-table{display:block;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border-radius:var(--sefin-radius-md, 8px);overflow:hidden}.sefin-table__container{display:flex;flex-direction:column;width:100%;background-color:var(--sefin-color-surface, #ffffff);border:1px solid var(--sefin-color-border, #cecece);border-radius:var(--sefin-radius-md, 8px);overflow:hidden;box-shadow:var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05));transition:box-shadow .2s ease-in-out}.sefin-table__header-actions{display:flex;justify-content:flex-end;align-items:center;padding:var(--sefin-spacing-md, 16px);border-bottom:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);border-radius:var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px) 0 0}.sefin-table__wrapper{position:relative;overflow-x:auto;overflow-y:visible;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__wrapper--loading{opacity:.6;pointer-events:none}.sefin-table__loading{position:absolute;inset:0;z-index:10;background-color:#fffffffa;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;flex-direction:column;border-radius:var(--sefin-radius-md, 8px)}.sefin-table__loading-bar{height:3px;background:linear-gradient(90deg,transparent,var(--sefin-color-primary, #55C3D8),transparent);animation:loading-bar 1.5s ease-in-out infinite;width:100%;border-radius:0 var(--sefin-radius-lg, 12px) 0 0}@keyframes loading-bar{0%{transform:translate(-100%)}to{transform:translate(200%)}}.sefin-table__loading-rows{flex:1;display:flex;flex-direction:column;padding:var(--sefin-spacing-lg, 24px);gap:var(--sefin-spacing-md, 16px)}.sefin-table__skeleton-row{display:flex;gap:var(--sefin-spacing-md, 16px);padding:var(--sefin-spacing-sm, 8px) 0}.sefin-table__skeleton-cell{flex:1;height:20px;background:linear-gradient(90deg,var(--sefin-color-surface-hover, #f5f5f5) 0%,rgba(85,195,216,.15) 50%,var(--sefin-color-surface-hover, #f5f5f5) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--sefin-radius-sm, 4px)}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.sefin-table__native-table{width:100%;border-collapse:separate;border-spacing:0;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--density-compact .sefin-table__header-cell,.sefin-table--density-compact .sefin-table__cell{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table--density-compact .sefin-table__header-cell{padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table--density-compact .sefin-table__cell{padding-top:var(--sefin-spacing-xs, 4px);padding-bottom:var(--sefin-spacing-xs, 4px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell{padding:var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell{padding-top:var(--sefin-spacing-md, 16px);padding-bottom:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell{padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table__header{background-color:var(--sefin-color-background-elevated, #fafafa);border-bottom:2px solid var(--sefin-color-border, #e5e5e5)}.sefin-table__header--sticky{position:sticky;top:0;z-index:3;box-shadow:0 2px 8px #0000000f}.sefin-table__header-row{background-color:var(--sefin-color-background-elevated, #fafafa)}.sefin-table__header-cell{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-sm, .875rem);color:var(--sefin-color-text, #383838);text-transform:uppercase;letter-spacing:.5px;text-align:left;white-space:nowrap;border-bottom:none;position:relative;background-color:var(--sefin-color-background-elevated, #fafafa);-webkit-user-select:none;user-select:none;transition:all .2s ease-in-out;z-index:1}.sefin-table__header-cell--align-left{text-align:left}.sefin-table__header-cell--align-center{text-align:center}.sefin-table__header-cell--align-right{text-align:right}.sefin-table__header-cell--select{width:56px;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px);text-align:center}.sefin-table__header-cell--actions{width:120px;text-align:right}.sefin-table__header-cell--sortable{cursor:pointer}.sefin-table__header-cell--sortable:hover{background-color:#55c3d814;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:active{background-color:#55c3d81f}.sefin-table__header-cell--sortable:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__header-cell--sorted{color:var(--sefin-color-primary, #55C3D8);background-color:#55c3d80f}.sefin-table__header-cell--sorted .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sticky{position:sticky;background-color:var(--sefin-color-background-elevated, #fafafa);z-index:2;box-shadow:2px 0 4px #0000000a}.sefin-table__header-cell--sticky:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--sefin-color-border, #e5e5e5);opacity:.6}.sefin-table__header-cell--sticky.sefin-table__header-cell--sticky-end{right:0;box-shadow:-2px 0 4px #0000000a}.sefin-table__header-cell--sticky.sefin-table__header-cell--sticky-end:after{left:0;right:auto}.sefin-table__header-content{display:flex;align-items:center;justify-content:flex-start;gap:var(--sefin-spacing-xs, 4px);width:100%}.sefin-table__sort-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;color:var(--sefin-color-text-secondary, #9b9b9b);opacity:.4;transition:all .2s ease-in-out;flex-shrink:0;margin-left:var(--sefin-spacing-xs, 4px)}.sefin-table__sort-icon svg{display:block;width:100%;height:100%}.sefin-table__body{background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row{border-bottom:1px solid var(--sefin-color-border, #e5e5e5);transition:all .2s ease-in-out;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row--clickable{cursor:pointer}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty){background-color:#55c3d80d;box-shadow:inset 3px 0 0 var(--sefin-color-primary, #55C3D8)}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table__row--clickable:active:not(.sefin-table__row--empty){background-color:#55c3d814;box-shadow:inset 3px 0 0 var(--sefin-color-primary-dark, #3f9bb0)}.sefin-table__row--clickable:active:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d814}.sefin-table__row--empty{border-bottom:none}.sefin-table__row:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__row:last-child{border-bottom:none}.sefin-table__cell{font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);font-size:var(--sefin-font-size-base, 1rem);font-weight:var(--sefin-font-weight-normal, 400);color:var(--sefin-color-text, #383838);border-bottom:none;vertical-align:middle;background-color:inherit;transition:background-color .2s ease-in-out,color .2s ease-in-out}.sefin-table__cell--align-left{text-align:left}.sefin-table__cell--align-center{text-align:center}.sefin-table__cell--align-right{text-align:right}.sefin-table__cell--select{width:56px;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px);text-align:center}.sefin-table__cell--actions{text-align:right;width:120px}.sefin-table__cell--sticky{position:sticky;background-color:inherit;z-index:1;box-shadow:2px 0 4px #0000000a}.sefin-table__cell--sticky:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--sefin-color-border, #e5e5e5);opacity:.6}.sefin-table__cell--sticky.sefin-table__cell--sticky-end{right:0;box-shadow:-2px 0 4px #0000000a}.sefin-table__cell--sticky.sefin-table__cell--sticky-end:after{left:0;right:auto}.sefin-table__cell-content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #383838)}.sefin-table__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--sefin-spacing-xs, 4px);flex-wrap:wrap}.sefin-table--striped .sefin-table__row:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__row:nth-child(odd){background-color:#f8f9facc}.sefin-table--striped .sefin-table__cell--sticky:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__cell--sticky:nth-child(odd){background-color:#f8f9facc}.sefin-table--striped .sefin-table__row--clickable:hover,.sefin-table--striped .sefin-table__row--clickable:hover .sefin-table__cell--sticky{background-color:#55c3d814!important}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table--sticky-header .sefin-table__header{position:sticky;top:0;z-index:3;box-shadow:0 4px 12px #00000014}.sefin-table__empty-cell{padding:var(--sefin-spacing-4xl, 96px) var(--sefin-spacing-xl, 32px);text-align:center;border-bottom:none;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sefin-spacing-lg, 24px);padding:var(--sefin-spacing-2xl, 48px);background:linear-gradient(to bottom,rgba(248,249,250,.5),transparent);border-radius:var(--sefin-radius-md, 8px);margin:var(--sefin-spacing-lg, 24px)}.sefin-table__empty-text{font-size:var(--sefin-font-size-lg, 1.125rem);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-relaxed, 1.75);color:var(--sefin-color-text-secondary, #686868);margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);max-width:480px;letter-spacing:.2px}.sefin-table__paginator{border-top:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);padding:var(--sefin-spacing-md, 16px);border-radius:0 0 var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px)}.sefin-table ::ng-deep .sefin-checkbox{margin:0;transition:transform .2s ease-in-out}.sefin-table ::ng-deep .sefin-checkbox:hover{transform:scale(1.05)}.sefin-table ::ng-deep .sefin-badge{margin:0;box-shadow:0 1px 3px #0000001a;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-badge:hover{transform:translateY(-1px);box-shadow:0 2px 6px #00000026}.sefin-table ::ng-deep .sefin-button,.sefin-table ::ng-deep .sefin-icon-button{transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-button:hover,.sefin-table ::ng-deep .sefin-icon-button:hover{transform:translateY(-1px)}.sefin-table ::ng-deep .sefin-button:active,.sefin-table ::ng-deep .sefin-icon-button:active{transform:translateY(0)}\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"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginationComponent, selector: "sefin-pagination", inputs: ["currentPage", "totalPages", "totalItems", "itemsPerPage", "siblingCount", "showFirstLast", "showPrevNext", "size", "variant", "class"], outputs: ["pageChange"] }, { kind: "component", type: CheckboxComponent, selector: "sefin-checkbox", inputs: ["size", "disabled", "indeterminate", "class", "label", "name", "value"], outputs: ["valueChange", "checkedChange"] }, { kind: "component", type: BadgeComponent, selector: "sefin-badge", inputs: ["variant", "size", "dot", "max", "value", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5738
5755
|
}
|
|
5739
5756
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableComponent, decorators: [{
|
|
5740
5757
|
type: Component,
|
|
5741
|
-
args: [{ selector: 'sefin-table', standalone: true, imports: [CommonModule, PaginationComponent, CheckboxComponent, BadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"sefin-table__container\">\n <!-- Header Actions Slot -->\n <div *ngIf=\"headerActionsTemplate\" class=\"sefin-table__header-actions\">\n <ng-container *ngTemplateOutlet=\"headerActionsTemplate\"></ng-container>\n </div>\n\n <!-- Loading Overlay -->\n <div *ngIf=\"loading\" class=\"sefin-table__loading\">\n <div class=\"sefin-table__loading-bar\"></div>\n <div class=\"sefin-table__loading-rows\">\n <div *ngFor=\"let i of [1, 2, 3, 4, 5]\" class=\"sefin-table__skeleton-row\">\n <div\n class=\"sefin-table__skeleton-cell\"\n *ngFor=\"let col of columns\"\n ></div>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <div\n class=\"sefin-table__wrapper\"\n [class.sefin-table__wrapper--loading]=\"loading\"\n >\n <table [class]=\"getTableClasses()\" class=\"sefin-table__native-table\">\n <!-- Table Header -->\n <thead\n class=\"sefin-table__header\"\n [class.sefin-table__header--sticky]=\"stickyHeader\"\n >\n <tr class=\"sefin-table__header-row\">\n <!-- Selection Column Header -->\n <th\n *ngIf=\"selectable\"\n class=\"sefin-table__header-cell sefin-table__header-cell--select\"\n >\n <sefin-checkbox\n *ngIf=\"selectionMode === 'multiple'\"\n [value]=\"isAllSelected()\"\n [indeterminate]=\"isIndeterminate()\"\n (checkedChange)=\"toggleSelectAll($event)\"\n [attr.aria-label]=\"'Select all rows'\"\n size=\"sm\"\n ></sefin-checkbox>\n </th>\n\n <!-- Data Column Headers -->\n <th\n *ngFor=\"let column of columns\"\n [class]=\"getColumnClass(column)\"\n [class.sefin-table__header-cell--sortable]=\"column.sortable && sort\"\n [class.sefin-table__header-cell--sorted]=\"\n currentSortColumn() === column.key\n \"\n [class.sefin-table__header-cell--sort-asc]=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'asc'\n \"\n [class.sefin-table__header-cell--sort-desc]=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'desc'\n \"\n [class.sefin-table__header-cell--sticky]=\"column.sticky\"\n [class.sefin-table__header-cell--sticky-end]=\"\n column.sticky && column.stickyEnd\n \"\n [style.width]=\"getColumnWidth(column)\"\n class=\"sefin-table__header-cell\"\n (click)=\"column.sortable && sort ? onSort(column) : null\"\n [attr.aria-sort]=\"\n currentSortColumn() === column.key\n ? currentSortDirection() === 'asc'\n ? 'ascending'\n : currentSortDirection() === 'desc'\n ? 'descending'\n : 'none'\n : null\n \"\n role=\"columnheader\"\n [attr.tabindex]=\"column.sortable && sort ? 0 : null\"\n >\n <span class=\"sefin-table__header-content\">\n {{ column.header }}\n <span\n *ngIf=\"column.sortable && sort\"\n class=\"sefin-table__sort-icon\"\n >\n <svg\n *ngIf=\"\n currentSortColumn() !== column.key ||\n currentSortDirection() === ''\n \"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'asc'\n \"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 7.5L6 4.5L9 7.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'desc'\n \"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 4.5L6 7.5L9 4.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n </span>\n </th>\n\n <th\n *ngIf=\"hasActionsColumn()\"\n class=\"sefin-table__header-cell sefin-table__header-cell--actions\"\n ></th>\n </tr>\n </thead>\n\n <!-- Table Body -->\n <tbody class=\"sefin-table__body\">\n <!-- Data Rows -->\n <tr\n *ngFor=\"let row of displayedData(); trackBy: trackByFn\"\n class=\"sefin-table__row sefin-table__row--clickable\"\n (click)=\"onRowClick(row)\"\n >\n <!-- Selection Column Cell -->\n <td\n *ngIf=\"selectable\"\n class=\"sefin-table__cell sefin-table__cell--select\"\n >\n <sefin-checkbox\n [value]=\"isSelected(row)\"\n (checkedChange)=\"toggleRowSelection($event, row)\"\n [attr.aria-label]=\"'Select row'\"\n size=\"sm\"\n ></sefin-checkbox>\n </td>\n\n <!-- Data Column Cells -->\n <td\n *ngFor=\"let column of columns\"\n [class]=\"getColumnClass(column)\"\n [class.sefin-table__cell--sticky]=\"column.sticky\"\n [class.sefin-table__cell--sticky-end]=\"\n column.sticky && column.stickyEnd\n \"\n class=\"sefin-table__cell\"\n >\n <!-- Custom Template -->\n <ng-container *ngIf=\"column.cellTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cellTemplate;\n context: {\n $implicit: row,\n column: column,\n value: getCellValue(row, column)\n }\n \"\n ></ng-container>\n </ng-container>\n\n <!-- Badge Type -->\n <ng-container\n *ngIf=\"!column.cellTemplate && column.type === 'badge'\"\n >\n <sefin-badge\n [value]=\"getCellValue(row, column)\"\n variant=\"primary\"\n size=\"sm\"\n ></sefin-badge>\n </ng-container>\n\n <!-- Actions Type -->\n <ng-container\n *ngIf=\"!column.cellTemplate && column.type === 'actions'\"\n >\n <div class=\"sefin-table__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </ng-container>\n\n <!-- Default/Text/Number/Date Type -->\n <ng-container\n *ngIf=\"\n !column.cellTemplate &&\n column.type !== 'badge' &&\n column.type !== 'actions'\n \"\n >\n <span class=\"sefin-table__cell-content\">\n {{ formatCellValue(getCellValue(row, column), column.type) }}\n </span>\n </ng-container>\n </td>\n\n <!-- Actions Column Cell -->\n <td\n *ngIf=\"hasActionsColumn()\"\n class=\"sefin-table__cell sefin-table__cell--actions\"\n >\n <div class=\"sefin-table__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </td>\n </tr>\n\n <!-- Empty Row -->\n <tr *ngIf=\"isEmpty()\" class=\"sefin-table__row sefin-table__row--empty\">\n <td [attr.colspan]=\"totalColspan()\" class=\"sefin-table__empty-cell\">\n <div class=\"sefin-table__empty-state\">\n <ng-container *ngIf=\"emptyIconTemplate\">\n <ng-container\n *ngTemplateOutlet=\"emptyIconTemplate\"\n ></ng-container>\n </ng-container>\n <p class=\"sefin-table__empty-text\">{{ emptyText }}</p>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <!-- Pagination -->\n <sefin-pagination\n *ngIf=\"pagination && !isEmpty()\"\n [currentPage]=\"currentPage()\"\n [totalPages]=\"totalPages()\"\n [totalItems]=\"serverSide && total !== undefined ? total : undefined\"\n [itemsPerPage]=\"currentPageSize()\"\n (pageChange)=\"onPageChange($event)\"\n class=\"sefin-table__paginator\"\n size=\"md\"\n ></sefin-pagination>\n</div>\n", styles: [".sefin-table{display:block;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border-radius:var(--sefin-radius-md, 8px);overflow:hidden}.sefin-table__container{display:flex;flex-direction:column;width:100%;background-color:var(--sefin-color-surface, #ffffff);border:1px solid var(--sefin-color-border, #cecece);border-radius:var(--sefin-radius-md, 8px);overflow:hidden;box-shadow:var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05));transition:box-shadow .2s ease-in-out}.sefin-table__header-actions{display:flex;justify-content:flex-end;align-items:center;padding:var(--sefin-spacing-md, 16px);border-bottom:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);border-radius:var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px) 0 0}.sefin-table__wrapper{position:relative;overflow-x:auto;overflow-y:visible;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__wrapper--loading{opacity:.6;pointer-events:none}.sefin-table__loading{position:absolute;inset:0;z-index:10;background-color:#fffffffa;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;flex-direction:column;border-radius:var(--sefin-radius-md, 8px)}.sefin-table__loading-bar{height:3px;background:linear-gradient(90deg,transparent,var(--sefin-color-primary, #55C3D8),transparent);animation:loading-bar 1.5s ease-in-out infinite;width:100%;border-radius:0 var(--sefin-radius-lg, 12px) 0 0}@keyframes loading-bar{0%{transform:translate(-100%)}to{transform:translate(200%)}}.sefin-table__loading-rows{flex:1;display:flex;flex-direction:column;padding:var(--sefin-spacing-lg, 24px);gap:var(--sefin-spacing-md, 16px)}.sefin-table__skeleton-row{display:flex;gap:var(--sefin-spacing-md, 16px);padding:var(--sefin-spacing-sm, 8px) 0}.sefin-table__skeleton-cell{flex:1;height:20px;background:linear-gradient(90deg,var(--sefin-color-surface-hover, #f5f5f5) 0%,rgba(85,195,216,.15) 50%,var(--sefin-color-surface-hover, #f5f5f5) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--sefin-radius-sm, 4px)}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.sefin-table__native-table{width:100%;border-collapse:separate;border-spacing:0;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--density-compact .sefin-table__header-cell,.sefin-table--density-compact .sefin-table__cell{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table--density-compact .sefin-table__header-cell{padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table--density-compact .sefin-table__cell{padding-top:var(--sefin-spacing-xs, 4px);padding-bottom:var(--sefin-spacing-xs, 4px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell{padding:var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell{padding-top:var(--sefin-spacing-md, 16px);padding-bottom:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell{padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table__header{background-color:var(--sefin-color-background-elevated, #fafafa);border-bottom:2px solid var(--sefin-color-border, #e5e5e5)}.sefin-table__header--sticky{position:sticky;top:0;z-index:3;box-shadow:0 2px 8px #0000000f}.sefin-table__header-row{background-color:var(--sefin-color-background-elevated, #fafafa)}.sefin-table__header-cell{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-sm, .875rem);color:var(--sefin-color-text, #383838);text-transform:uppercase;letter-spacing:.5px;text-align:left;white-space:nowrap;border-bottom:none;position:relative;background-color:var(--sefin-color-background-elevated, #fafafa);-webkit-user-select:none;user-select:none;transition:all .2s ease-in-out;z-index:1}.sefin-table__header-cell--align-left{text-align:left}.sefin-table__header-cell--align-center{text-align:center}.sefin-table__header-cell--align-right{text-align:right}.sefin-table__header-cell--select{width:56px;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px);text-align:center}.sefin-table__header-cell--actions{width:120px;text-align:right}.sefin-table__header-cell--sortable{cursor:pointer}.sefin-table__header-cell--sortable:hover{background-color:#55c3d814;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:active{background-color:#55c3d81f}.sefin-table__header-cell--sortable:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__header-cell--sorted{color:var(--sefin-color-primary, #55C3D8);background-color:#55c3d80f}.sefin-table__header-cell--sorted .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sticky{position:sticky;background-color:var(--sefin-color-background-elevated, #fafafa);z-index:2;box-shadow:2px 0 4px #0000000a}.sefin-table__header-cell--sticky:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--sefin-color-border, #e5e5e5);opacity:.6}.sefin-table__header-cell--sticky.sefin-table__header-cell--sticky-end{right:0;box-shadow:-2px 0 4px #0000000a}.sefin-table__header-cell--sticky.sefin-table__header-cell--sticky-end:after{left:0;right:auto}.sefin-table__header-content{display:flex;align-items:center;justify-content:flex-start;gap:var(--sefin-spacing-xs, 4px);width:100%}.sefin-table__sort-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;color:var(--sefin-color-text-secondary, #9b9b9b);opacity:.4;transition:all .2s ease-in-out;flex-shrink:0;margin-left:var(--sefin-spacing-xs, 4px)}.sefin-table__sort-icon svg{display:block;width:100%;height:100%}.sefin-table__body{background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row{border-bottom:1px solid var(--sefin-color-border, #e5e5e5);transition:all .2s ease-in-out;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row--clickable{cursor:pointer}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty){background-color:#55c3d80d;box-shadow:inset 3px 0 0 var(--sefin-color-primary, #55C3D8)}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table__row--clickable:active:not(.sefin-table__row--empty){background-color:#55c3d814;box-shadow:inset 3px 0 0 var(--sefin-color-primary-dark, #3f9bb0)}.sefin-table__row--clickable:active:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d814}.sefin-table__row--empty{border-bottom:none}.sefin-table__row:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__row:last-child{border-bottom:none}.sefin-table__cell{font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);font-size:var(--sefin-font-size-base, 1rem);font-weight:var(--sefin-font-weight-normal, 400);color:var(--sefin-color-text, #383838);border-bottom:none;vertical-align:middle;background-color:inherit;transition:background-color .2s ease-in-out,color .2s ease-in-out}.sefin-table__cell--align-left{text-align:left}.sefin-table__cell--align-center{text-align:center}.sefin-table__cell--align-right{text-align:right}.sefin-table__cell--select{width:56px;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px);text-align:center}.sefin-table__cell--actions{text-align:right;width:120px}.sefin-table__cell--sticky{position:sticky;background-color:inherit;z-index:1;box-shadow:2px 0 4px #0000000a}.sefin-table__cell--sticky:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--sefin-color-border, #e5e5e5);opacity:.6}.sefin-table__cell--sticky.sefin-table__cell--sticky-end{right:0;box-shadow:-2px 0 4px #0000000a}.sefin-table__cell--sticky.sefin-table__cell--sticky-end:after{left:0;right:auto}.sefin-table__cell-content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #383838)}.sefin-table__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--sefin-spacing-xs, 4px);flex-wrap:wrap}.sefin-table--striped .sefin-table__row:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__row:nth-child(odd){background-color:#f8f9facc}.sefin-table--striped .sefin-table__cell--sticky:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__cell--sticky:nth-child(odd){background-color:#f8f9facc}.sefin-table--striped .sefin-table__row--clickable:hover,.sefin-table--striped .sefin-table__row--clickable:hover .sefin-table__cell--sticky{background-color:#55c3d814!important}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table--sticky-header .sefin-table__header{position:sticky;top:0;z-index:3;box-shadow:0 4px 12px #00000014}.sefin-table__empty-cell{padding:var(--sefin-spacing-4xl, 96px) var(--sefin-spacing-xl, 32px);text-align:center;border-bottom:none;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sefin-spacing-lg, 24px);padding:var(--sefin-spacing-2xl, 48px);background:linear-gradient(to bottom,rgba(248,249,250,.5),transparent);border-radius:var(--sefin-radius-md, 8px);margin:var(--sefin-spacing-lg, 24px)}.sefin-table__empty-text{font-size:var(--sefin-font-size-lg, 1.125rem);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-relaxed, 1.75);color:var(--sefin-color-text-secondary, #686868);margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);max-width:480px;letter-spacing:.2px}.sefin-table__paginator{border-top:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);padding:var(--sefin-spacing-md, 16px);border-radius:0 0 var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px)}.sefin-table ::ng-deep .sefin-checkbox{margin:0;transition:transform .2s ease-in-out}.sefin-table ::ng-deep .sefin-checkbox:hover{transform:scale(1.05)}.sefin-table ::ng-deep .sefin-badge{margin:0;box-shadow:0 1px 3px #0000001a;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-badge:hover{transform:translateY(-1px);box-shadow:0 2px 6px #00000026}.sefin-table ::ng-deep .sefin-button,.sefin-table ::ng-deep .sefin-icon-button{transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-button:hover,.sefin-table ::ng-deep .sefin-icon-button:hover{transform:translateY(-1px)}.sefin-table ::ng-deep .sefin-button:active,.sefin-table ::ng-deep .sefin-icon-button:active{transform:translateY(0)}\n"] }]
|
|
5758
|
+
args: [{ selector: 'sefin-table', standalone: true, imports: [CommonModule, PaginationComponent, CheckboxComponent, BadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"sefin-table__container\">\n <!-- Header Actions Slot -->\n <div *ngIf=\"headerActionsTemplate\" class=\"sefin-table__header-actions\">\n <ng-container *ngTemplateOutlet=\"headerActionsTemplate\"></ng-container>\n </div>\n\n <!-- Loading Overlay -->\n <div *ngIf=\"loading\" class=\"sefin-table__loading\">\n <div class=\"sefin-table__loading-bar\"></div>\n <div class=\"sefin-table__loading-rows\">\n <div *ngFor=\"let i of [1, 2, 3, 4, 5]\" class=\"sefin-table__skeleton-row\">\n <div\n class=\"sefin-table__skeleton-cell\"\n *ngFor=\"let col of columns\"\n ></div>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <div\n class=\"sefin-table__wrapper\"\n [class.sefin-table__wrapper--loading]=\"loading\"\n >\n <table [class]=\"getTableClasses()\" class=\"sefin-table__native-table\">\n <!-- Table Header -->\n <thead\n class=\"sefin-table__header\"\n [class.sefin-table__header--sticky]=\"stickyHeader\"\n >\n <tr class=\"sefin-table__header-row\">\n <!-- Selection Column Header -->\n <th\n *ngIf=\"selectable\"\n class=\"sefin-table__header-cell sefin-table__header-cell--select\"\n >\n <sefin-checkbox\n *ngIf=\"selectionMode === 'multiple'\"\n [value]=\"isAllSelected()\"\n [indeterminate]=\"isIndeterminate()\"\n (checkedChange)=\"toggleSelectAll($event)\"\n [attr.aria-label]=\"'Select all rows'\"\n size=\"sm\"\n ></sefin-checkbox>\n </th>\n\n <!-- Data Column Headers -->\n <th\n *ngFor=\"let column of columns\"\n [class]=\"getColumnClass(column)\"\n [class.sefin-table__header-cell--sortable]=\"column.sortable && sort\"\n [class.sefin-table__header-cell--sorted]=\"\n currentSortColumn() === column.key\n \"\n [class.sefin-table__header-cell--sort-asc]=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'asc'\n \"\n [class.sefin-table__header-cell--sort-desc]=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'desc'\n \"\n [class.sefin-table__header-cell--sticky]=\"column.sticky\"\n [class.sefin-table__header-cell--sticky-end]=\"\n column.sticky && column.stickyEnd\n \"\n [style.width]=\"getColumnWidth(column)\"\n class=\"sefin-table__header-cell\"\n (click)=\"column.sortable && sort ? onSort(column) : null\"\n [attr.aria-sort]=\"\n currentSortColumn() === column.key\n ? currentSortDirection() === 'asc'\n ? 'ascending'\n : currentSortDirection() === 'desc'\n ? 'descending'\n : 'none'\n : null\n \"\n role=\"columnheader\"\n [attr.tabindex]=\"column.sortable && sort ? 0 : null\"\n >\n <span class=\"sefin-table__header-content\">\n {{ column.header }}\n <span\n *ngIf=\"column.sortable && sort\"\n class=\"sefin-table__sort-icon\"\n >\n <svg\n *ngIf=\"\n currentSortColumn() !== column.key ||\n currentSortDirection() === ''\n \"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'asc'\n \"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 7.5L6 4.5L9 7.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"\n currentSortColumn() === column.key &&\n currentSortDirection() === 'desc'\n \"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3 4.5L6 7.5L9 4.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n </span>\n </th>\n\n <th\n *ngIf=\"hasActionsColumn()\"\n class=\"sefin-table__header-cell sefin-table__header-cell--actions\"\n ></th>\n </tr>\n </thead>\n\n <!-- Table Body -->\n <tbody class=\"sefin-table__body\">\n <!-- Data Rows -->\n <tr\n *ngFor=\"let row of displayedData(); trackBy: trackByFn\"\n class=\"sefin-table__row sefin-table__row--clickable\"\n (click)=\"onRowClick(row)\"\n >\n <!-- Selection Column Cell -->\n <td\n *ngIf=\"selectable\"\n class=\"sefin-table__cell sefin-table__cell--select\"\n >\n <sefin-checkbox\n [value]=\"isSelected(row)\"\n (checkedChange)=\"toggleRowSelection($event, row)\"\n [attr.aria-label]=\"'Select row'\"\n size=\"sm\"\n ></sefin-checkbox>\n </td>\n\n <!-- Data Column Cells -->\n <td\n *ngFor=\"let column of columns\"\n [class]=\"getColumnClass(column)\"\n [class.sefin-table__cell--sticky]=\"column.sticky\"\n [class.sefin-table__cell--sticky-end]=\"\n column.sticky && column.stickyEnd\n \"\n class=\"sefin-table__cell\"\n >\n <!-- Custom Template -->\n <ng-container *ngIf=\"column.cellTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cellTemplate;\n context: {\n $implicit: row,\n column: column,\n value: getCellValue(row, column)\n }\n \"\n ></ng-container>\n </ng-container>\n\n <!-- Badge Type -->\n <ng-container\n *ngIf=\"!column.cellTemplate && column.type === 'badge'\"\n >\n <sefin-badge\n [value]=\"getCellValue(row, column)\"\n variant=\"primary\"\n size=\"sm\"\n ></sefin-badge>\n </ng-container>\n\n <!-- Actions Type -->\n <ng-container\n *ngIf=\"!column.cellTemplate && column.type === 'actions'\"\n >\n <div class=\"sefin-table__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </ng-container>\n\n <!-- Default/Text/Number/Date Type -->\n <ng-container\n *ngIf=\"\n !column.cellTemplate &&\n column.type !== 'badge' &&\n column.type !== 'actions'\n \"\n >\n <span class=\"sefin-table__cell-content\">\n {{ formatCellValue(getCellValue(row, column), column.type) }}\n </span>\n </ng-container>\n </td>\n\n <!-- Actions Column Cell -->\n <td\n *ngIf=\"hasActionsColumn()\"\n class=\"sefin-table__cell sefin-table__cell--actions\"\n >\n <div class=\"sefin-table__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </td>\n </tr>\n\n <!-- Empty Row -->\n <tr *ngIf=\"isEmpty()\" class=\"sefin-table__row sefin-table__row--empty\">\n <td [attr.colspan]=\"totalColspan()\" class=\"sefin-table__empty-cell\">\n <div class=\"sefin-table__empty-state\">\n <ng-container *ngIf=\"emptyIconTemplate\">\n <ng-container\n *ngTemplateOutlet=\"emptyIconTemplate\"\n ></ng-container>\n </ng-container>\n <p class=\"sefin-table__empty-text\">{{ emptyText }}</p>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <!-- Pagination -->\n <sefin-pagination\n *ngIf=\"pagination && !isEmpty()\"\n [currentPage]=\"currentPage()\"\n [totalPages]=\"totalPages()\"\n [totalItems]=\"serverSide && total !== undefined ? total : undefined\"\n [itemsPerPage]=\"currentPageSize()\"\n (pageChange)=\"onPageChange($event)\"\n class=\"sefin-table__paginator\"\n size=\"sm\"\n ></sefin-pagination>\n</div>\n", styles: [".sefin-table{display:block;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border-radius:var(--sefin-radius-md, 8px);overflow:hidden}.sefin-table__container{display:flex;flex-direction:column;width:100%;background-color:var(--sefin-color-surface, #ffffff);border:1px solid var(--sefin-color-border, #cecece);border-radius:var(--sefin-radius-md, 8px);overflow:hidden;box-shadow:var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05));transition:box-shadow .2s ease-in-out}.sefin-table__header-actions{display:flex;justify-content:flex-end;align-items:center;padding:var(--sefin-spacing-md, 16px);border-bottom:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);border-radius:var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px) 0 0}.sefin-table__wrapper{position:relative;overflow-x:auto;overflow-y:visible;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__wrapper--loading{opacity:.6;pointer-events:none}.sefin-table__loading{position:absolute;inset:0;z-index:10;background-color:#fffffffa;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;flex-direction:column;border-radius:var(--sefin-radius-md, 8px)}.sefin-table__loading-bar{height:3px;background:linear-gradient(90deg,transparent,var(--sefin-color-primary, #55C3D8),transparent);animation:loading-bar 1.5s ease-in-out infinite;width:100%;border-radius:0 var(--sefin-radius-lg, 12px) 0 0}@keyframes loading-bar{0%{transform:translate(-100%)}to{transform:translate(200%)}}.sefin-table__loading-rows{flex:1;display:flex;flex-direction:column;padding:var(--sefin-spacing-lg, 24px);gap:var(--sefin-spacing-md, 16px)}.sefin-table__skeleton-row{display:flex;gap:var(--sefin-spacing-md, 16px);padding:var(--sefin-spacing-sm, 8px) 0}.sefin-table__skeleton-cell{flex:1;height:20px;background:linear-gradient(90deg,var(--sefin-color-surface-hover, #f5f5f5) 0%,rgba(85,195,216,.15) 50%,var(--sefin-color-surface-hover, #f5f5f5) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--sefin-radius-sm, 4px)}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.sefin-table__native-table{width:100%;border-collapse:separate;border-spacing:0;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--density-compact .sefin-table__header-cell,.sefin-table--density-compact .sefin-table__cell{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table--density-compact .sefin-table__header-cell{padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table--density-compact .sefin-table__cell{padding-top:var(--sefin-spacing-xs, 4px);padding-bottom:var(--sefin-spacing-xs, 4px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell{padding:var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell{padding-top:var(--sefin-spacing-md, 16px);padding-bottom:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell{padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table__header{background-color:var(--sefin-color-background-elevated, #fafafa);border-bottom:2px solid var(--sefin-color-border, #e5e5e5)}.sefin-table__header--sticky{position:sticky;top:0;z-index:3;box-shadow:0 2px 8px #0000000f}.sefin-table__header-row{background-color:var(--sefin-color-background-elevated, #fafafa)}.sefin-table__header-cell{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-sm, .875rem);color:var(--sefin-color-text, #383838);text-transform:uppercase;letter-spacing:.5px;text-align:left;white-space:nowrap;border-bottom:none;position:relative;background-color:var(--sefin-color-background-elevated, #fafafa);-webkit-user-select:none;user-select:none;transition:all .2s ease-in-out;z-index:1}.sefin-table__header-cell--align-left{text-align:left}.sefin-table__header-cell--align-center{text-align:center}.sefin-table__header-cell--align-right{text-align:right}.sefin-table__header-cell--select{width:56px;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px);text-align:center}.sefin-table__header-cell--actions{width:120px;text-align:right}.sefin-table__header-cell--sortable{cursor:pointer}.sefin-table__header-cell--sortable:hover{background-color:#55c3d814;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:active{background-color:#55c3d81f}.sefin-table__header-cell--sortable:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__header-cell--sorted{color:var(--sefin-color-primary, #55C3D8);background-color:#55c3d80f}.sefin-table__header-cell--sorted .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sticky{position:sticky;background-color:var(--sefin-color-background-elevated, #fafafa);z-index:2;box-shadow:2px 0 4px #0000000a}.sefin-table__header-cell--sticky:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--sefin-color-border, #e5e5e5);opacity:.6}.sefin-table__header-cell--sticky.sefin-table__header-cell--sticky-end{right:0;box-shadow:-2px 0 4px #0000000a}.sefin-table__header-cell--sticky.sefin-table__header-cell--sticky-end:after{left:0;right:auto}.sefin-table__header-content{display:flex;align-items:center;justify-content:flex-start;gap:var(--sefin-spacing-xs, 4px);width:100%}.sefin-table__sort-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;color:var(--sefin-color-text-secondary, #9b9b9b);opacity:.4;transition:all .2s ease-in-out;flex-shrink:0;margin-left:var(--sefin-spacing-xs, 4px)}.sefin-table__sort-icon svg{display:block;width:100%;height:100%}.sefin-table__body{background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row{border-bottom:1px solid var(--sefin-color-border, #e5e5e5);transition:all .2s ease-in-out;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row--clickable{cursor:pointer}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty){background-color:#55c3d80d;box-shadow:inset 3px 0 0 var(--sefin-color-primary, #55C3D8)}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table__row--clickable:active:not(.sefin-table__row--empty){background-color:#55c3d814;box-shadow:inset 3px 0 0 var(--sefin-color-primary-dark, #3f9bb0)}.sefin-table__row--clickable:active:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d814}.sefin-table__row--empty{border-bottom:none}.sefin-table__row:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__row:last-child{border-bottom:none}.sefin-table__cell{font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);font-size:var(--sefin-font-size-base, 1rem);font-weight:var(--sefin-font-weight-normal, 400);color:var(--sefin-color-text, #383838);border-bottom:none;vertical-align:middle;background-color:inherit;transition:background-color .2s ease-in-out,color .2s ease-in-out}.sefin-table__cell--align-left{text-align:left}.sefin-table__cell--align-center{text-align:center}.sefin-table__cell--align-right{text-align:right}.sefin-table__cell--select{width:56px;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px);text-align:center}.sefin-table__cell--actions{text-align:right;width:120px}.sefin-table__cell--sticky{position:sticky;background-color:inherit;z-index:1;box-shadow:2px 0 4px #0000000a}.sefin-table__cell--sticky:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--sefin-color-border, #e5e5e5);opacity:.6}.sefin-table__cell--sticky.sefin-table__cell--sticky-end{right:0;box-shadow:-2px 0 4px #0000000a}.sefin-table__cell--sticky.sefin-table__cell--sticky-end:after{left:0;right:auto}.sefin-table__cell-content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #383838)}.sefin-table__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--sefin-spacing-xs, 4px);flex-wrap:wrap}.sefin-table--striped .sefin-table__row:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__row:nth-child(odd){background-color:#f8f9facc}.sefin-table--striped .sefin-table__cell--sticky:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__cell--sticky:nth-child(odd){background-color:#f8f9facc}.sefin-table--striped .sefin-table__row--clickable:hover,.sefin-table--striped .sefin-table__row--clickable:hover .sefin-table__cell--sticky{background-color:#55c3d814!important}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table--sticky-header .sefin-table__header{position:sticky;top:0;z-index:3;box-shadow:0 4px 12px #00000014}.sefin-table__empty-cell{padding:var(--sefin-spacing-4xl, 96px) var(--sefin-spacing-xl, 32px);text-align:center;border-bottom:none;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sefin-spacing-lg, 24px);padding:var(--sefin-spacing-2xl, 48px);background:linear-gradient(to bottom,rgba(248,249,250,.5),transparent);border-radius:var(--sefin-radius-md, 8px);margin:var(--sefin-spacing-lg, 24px)}.sefin-table__empty-text{font-size:var(--sefin-font-size-lg, 1.125rem);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-relaxed, 1.75);color:var(--sefin-color-text-secondary, #686868);margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);max-width:480px;letter-spacing:.2px}.sefin-table__paginator{border-top:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);padding:var(--sefin-spacing-md, 16px);border-radius:0 0 var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px)}.sefin-table ::ng-deep .sefin-checkbox{margin:0;transition:transform .2s ease-in-out}.sefin-table ::ng-deep .sefin-checkbox:hover{transform:scale(1.05)}.sefin-table ::ng-deep .sefin-badge{margin:0;box-shadow:0 1px 3px #0000001a;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-badge:hover{transform:translateY(-1px);box-shadow:0 2px 6px #00000026}.sefin-table ::ng-deep .sefin-button,.sefin-table ::ng-deep .sefin-icon-button{transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-button:hover,.sefin-table ::ng-deep .sefin-icon-button:hover{transform:translateY(-1px)}.sefin-table ::ng-deep .sefin-button:active,.sefin-table ::ng-deep .sefin-icon-button:active{transform:translateY(0)}\n"] }]
|
|
5742
5759
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { columns: [{
|
|
5743
5760
|
type: Input
|
|
5744
5761
|
}], data: [{
|