@lesterarte/sefin-ui 0.0.21 → 0.0.25
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, ChangeDetectionStrategy, Component, EventEmitter, Output, forwardRef, ViewChild, HostListener, signal, computed } from '@angular/core';
|
|
2
|
+
import { Input, ChangeDetectionStrategy, Component, EventEmitter, Output, forwardRef, ViewChild, HostListener, signal, computed, ViewEncapsulation } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i1$1 from '@angular/platform-browser';
|
|
@@ -939,6 +939,8 @@ class ButtonComponent {
|
|
|
939
939
|
size = 'md';
|
|
940
940
|
/** Whether the button is disabled */
|
|
941
941
|
disabled = false;
|
|
942
|
+
/** Whether the button should take full width of the container */
|
|
943
|
+
fullWidth = false;
|
|
942
944
|
/** Button type. Options: 'button' | 'submit' | 'reset' */
|
|
943
945
|
type = 'button';
|
|
944
946
|
/** Additional CSS classes */
|
|
@@ -954,6 +956,7 @@ class ButtonComponent {
|
|
|
954
956
|
'sefin-button',
|
|
955
957
|
`sefin-button--${this.variant}`,
|
|
956
958
|
`sefin-button--${this.size}`,
|
|
959
|
+
this.fullWidth ? 'sefin-button--full-width' : '',
|
|
957
960
|
this.disabled ? 'sefin-button--disabled' : '',
|
|
958
961
|
this.class,
|
|
959
962
|
]
|
|
@@ -961,17 +964,19 @@ class ButtonComponent {
|
|
|
961
964
|
.join(' ');
|
|
962
965
|
}
|
|
963
966
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
964
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ButtonComponent, isStandalone: true, selector: "sefin-button", inputs: { variant: "variant", size: "size", disabled: "disabled", type: "type", class: "class" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button [type]=\"type\" [disabled]=\"disabled\" [class]=\"buttonClasses\" (click)=\"onClick($event)\">\n <ng-content></ng-content>\n</button>\n", styles: [".sefin-button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;cursor:pointer;outline:none;border:1px solid transparent}.sefin-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-button--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:32px}.sefin-button--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:40px}.sefin-button--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:48px}.sefin-button--primary{background-color:var(--sefin-color-primary);color:#fff}.sefin-button--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark)}.sefin-button--primary:active:not(:disabled){transform:translateY(1px)}.sefin-button--secondary{background-color:var(--sefin-color-secondary);color:#fff}.sefin-button--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark)}.sefin-button--secondary:active:not(:disabled){transform:translateY(1px)}.sefin-button--outline{background-color:transparent;color:var(--sefin-color-primary);border-color:var(--sefin-color-primary)}.sefin-button--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:#fff}.sefin-button--ghost{background-color:transparent;color:var(--sefin-color-primary)}.sefin-button--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-button--danger{background-color:var(--sefin-color-error);color:#fff}.sefin-button--danger:hover:not(:disabled){background-color:var(--sefin-color-error);opacity:.9}.sefin-button--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
967
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ButtonComponent, isStandalone: true, selector: "sefin-button", inputs: { variant: "variant", size: "size", disabled: "disabled", fullWidth: "fullWidth", type: "type", class: "class" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button [type]=\"type\" [disabled]=\"disabled\" [class]=\"buttonClasses\" (click)=\"onClick($event)\">\n <ng-content></ng-content>\n</button>\n", styles: [".sefin-button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;cursor:pointer;outline:none;border:1px solid transparent}.sefin-button--full-width{display:flex;width:100%}.sefin-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-button--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:32px}.sefin-button--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:40px}.sefin-button--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:48px}.sefin-button--primary{background-color:var(--sefin-color-primary);color:#fff}.sefin-button--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark)}.sefin-button--primary:active:not(:disabled){transform:translateY(1px)}.sefin-button--secondary{background-color:var(--sefin-color-secondary);color:#fff}.sefin-button--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark)}.sefin-button--secondary:active:not(:disabled){transform:translateY(1px)}.sefin-button--outline{background-color:transparent;color:var(--sefin-color-primary);border-color:var(--sefin-color-primary)}.sefin-button--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:#fff}.sefin-button--ghost{background-color:transparent;color:var(--sefin-color-primary)}.sefin-button--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-button--danger{background-color:var(--sefin-color-error);color:#fff}.sefin-button--danger:hover:not(:disabled){background-color:var(--sefin-color-error);opacity:.9}.sefin-button--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
965
968
|
}
|
|
966
969
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
967
970
|
type: Component,
|
|
968
|
-
args: [{ selector: 'sefin-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button [type]=\"type\" [disabled]=\"disabled\" [class]=\"buttonClasses\" (click)=\"onClick($event)\">\n <ng-content></ng-content>\n</button>\n", styles: [".sefin-button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;cursor:pointer;outline:none;border:1px solid transparent}.sefin-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-button--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:32px}.sefin-button--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:40px}.sefin-button--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:48px}.sefin-button--primary{background-color:var(--sefin-color-primary);color:#fff}.sefin-button--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark)}.sefin-button--primary:active:not(:disabled){transform:translateY(1px)}.sefin-button--secondary{background-color:var(--sefin-color-secondary);color:#fff}.sefin-button--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark)}.sefin-button--secondary:active:not(:disabled){transform:translateY(1px)}.sefin-button--outline{background-color:transparent;color:var(--sefin-color-primary);border-color:var(--sefin-color-primary)}.sefin-button--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:#fff}.sefin-button--ghost{background-color:transparent;color:var(--sefin-color-primary)}.sefin-button--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-button--danger{background-color:var(--sefin-color-error);color:#fff}.sefin-button--danger:hover:not(:disabled){background-color:var(--sefin-color-error);opacity:.9}.sefin-button--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}\n"] }]
|
|
971
|
+
args: [{ selector: 'sefin-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button [type]=\"type\" [disabled]=\"disabled\" [class]=\"buttonClasses\" (click)=\"onClick($event)\">\n <ng-content></ng-content>\n</button>\n", styles: [".sefin-button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;cursor:pointer;outline:none;border:1px solid transparent}.sefin-button--full-width{display:flex;width:100%}.sefin-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-button--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:32px}.sefin-button--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:40px}.sefin-button--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:48px}.sefin-button--primary{background-color:var(--sefin-color-primary);color:#fff}.sefin-button--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark)}.sefin-button--primary:active:not(:disabled){transform:translateY(1px)}.sefin-button--secondary{background-color:var(--sefin-color-secondary);color:#fff}.sefin-button--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark)}.sefin-button--secondary:active:not(:disabled){transform:translateY(1px)}.sefin-button--outline{background-color:transparent;color:var(--sefin-color-primary);border-color:var(--sefin-color-primary)}.sefin-button--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:#fff}.sefin-button--ghost{background-color:transparent;color:var(--sefin-color-primary)}.sefin-button--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-button--danger{background-color:var(--sefin-color-error);color:#fff}.sefin-button--danger:hover:not(:disabled){background-color:var(--sefin-color-error);opacity:.9}.sefin-button--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}\n"] }]
|
|
969
972
|
}], propDecorators: { variant: [{
|
|
970
973
|
type: Input
|
|
971
974
|
}], size: [{
|
|
972
975
|
type: Input
|
|
973
976
|
}], disabled: [{
|
|
974
977
|
type: Input
|
|
978
|
+
}], fullWidth: [{
|
|
979
|
+
type: Input
|
|
975
980
|
}], type: [{
|
|
976
981
|
type: Input
|
|
977
982
|
}], class: [{
|
|
@@ -1935,7 +1940,6 @@ class TypographyComponent {
|
|
|
1935
1940
|
color = 'text';
|
|
1936
1941
|
lineHeight;
|
|
1937
1942
|
class = '';
|
|
1938
|
-
text;
|
|
1939
1943
|
get typographyClasses() {
|
|
1940
1944
|
return [
|
|
1941
1945
|
'sefin-typography',
|
|
@@ -1950,11 +1954,11 @@ class TypographyComponent {
|
|
|
1950
1954
|
.join(' ');
|
|
1951
1955
|
}
|
|
1952
1956
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TypographyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1953
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TypographyComponent, isStandalone: true, selector: "sefin-typography", inputs: { variant: "variant", size: "size", weight: "weight", color: "color", lineHeight: "lineHeight", class: "class"
|
|
1957
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TypographyComponent, isStandalone: true, selector: "sefin-typography", inputs: { variant: "variant", size: "size", weight: "weight", color: "color", lineHeight: "lineHeight", class: "class" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"variant\">\n <h1 *ngSwitchCase=\"'h1'\" [class]=\"typographyClasses\"><ng-content></ng-content></h1>\n <h2 *ngSwitchCase=\"'h2'\" [class]=\"typographyClasses\"><ng-content></ng-content></h2>\n <h3 *ngSwitchCase=\"'h3'\" [class]=\"typographyClasses\"><ng-content></ng-content></h3>\n <h4 *ngSwitchCase=\"'h4'\" [class]=\"typographyClasses\"><ng-content></ng-content></h4>\n <h5 *ngSwitchCase=\"'h5'\" [class]=\"typographyClasses\"><ng-content></ng-content></h5>\n <h6 *ngSwitchCase=\"'h6'\" [class]=\"typographyClasses\"><ng-content></ng-content></h6>\n <p *ngSwitchCase=\"'p'\" [class]=\"typographyClasses\"><ng-content></ng-content></p>\n <span *ngSwitchDefault [class]=\"typographyClasses\"><ng-content></ng-content></span>\n</ng-container>\n", styles: [".sefin-typography{font-family:var(--sefin-font-family-base);margin:0;padding:0}.sefin-typography--h1{font-size:var(--sefin-font-size-4xl);font-weight:var(--sefin-font-weight-bold);line-height:var(--sefin-line-height-tight)}.sefin-typography--h2{font-size:var(--sefin-font-size-3xl);font-weight:var(--sefin-font-weight-bold);line-height:var(--sefin-line-height-tight)}.sefin-typography--h3{font-size:var(--sefin-font-size-2xl);font-weight:var(--sefin-font-weight-bold);line-height:var(--sefin-line-height-tight)}.sefin-typography--h4{font-size:var(--sefin-font-size-xl);font-weight:var(--sefin-font-weight-bold);line-height:var(--sefin-line-height-tight)}.sefin-typography--h5{font-size:var(--sefin-font-size-lg);font-weight:var(--sefin-font-weight-bold);line-height:var(--sefin-line-height-tight)}.sefin-typography--h6{font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-bold);line-height:var(--sefin-line-height-tight)}.sefin-typography--p,.sefin-typography--span{font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal)}.sefin-typography--xs{font-size:var(--sefin-font-size-xs)}.sefin-typography--sm{font-size:var(--sefin-font-size-sm)}.sefin-typography--base{font-size:var(--sefin-font-size-base)}.sefin-typography--lg{font-size:var(--sefin-font-size-lg)}.sefin-typography--xl{font-size:var(--sefin-font-size-xl)}.sefin-typography--2xl{font-size:var(--sefin-font-size-2xl)}.sefin-typography--3xl{font-size:var(--sefin-font-size-3xl)}.sefin-typography--4xl{font-size:var(--sefin-font-size-4xl)}.sefin-typography--5xl{font-size:var(--sefin-font-size-5xl)}.sefin-typography--light{font-weight:var(--sefin-font-weight-light)}.sefin-typography--normal{font-weight:var(--sefin-font-weight-normal)}.sefin-typography--medium{font-weight:var(--sefin-font-weight-medium)}.sefin-typography--semibold{font-weight:var(--sefin-font-weight-semibold)}.sefin-typography--bold{font-weight:var(--sefin-font-weight-bold)}.sefin-typography--text{color:var(--sefin-color-text)}.sefin-typography--text-secondary{color:var(--sefin-color-text-secondary)}.sefin-typography--text-disabled{color:var(--sefin-color-text-disabled)}.sefin-typography--primary{color:var(--sefin-color-primary)}.sefin-typography--secondary{color:var(--sefin-color-secondary)}.sefin-typography--success{color:var(--sefin-color-success)}.sefin-typography--warning{color:var(--sefin-color-warning)}.sefin-typography--error{color:var(--sefin-color-error)}.sefin-typography--line-height-tight{line-height:var(--sefin-line-height-tight)}.sefin-typography--line-height-normal{line-height:var(--sefin-line-height-normal)}.sefin-typography--line-height-relaxed{line-height:var(--sefin-line-height-relaxed)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
1954
1958
|
}
|
|
1955
1959
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TypographyComponent, decorators: [{
|
|
1956
1960
|
type: Component,
|
|
1957
|
-
args: [{ selector: 'sefin-typography', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.Default, template: "<ng-container [ngSwitch]=\"variant\">\n <h1 *ngSwitchCase=\"'h1'\" [class]=\"typographyClasses\"
|
|
1961
|
+
args: [{ selector: 'sefin-typography', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.Default, template: "<ng-container [ngSwitch]=\"variant\">\n <h1 *ngSwitchCase=\"'h1'\" [class]=\"typographyClasses\"><ng-content></ng-content></h1>\n <h2 *ngSwitchCase=\"'h2'\" [class]=\"typographyClasses\"><ng-content></ng-content></h2>\n <h3 *ngSwitchCase=\"'h3'\" [class]=\"typographyClasses\"><ng-content></ng-content></h3>\n <h4 *ngSwitchCase=\"'h4'\" [class]=\"typographyClasses\"><ng-content></ng-content></h4>\n <h5 *ngSwitchCase=\"'h5'\" [class]=\"typographyClasses\"><ng-content></ng-content></h5>\n <h6 *ngSwitchCase=\"'h6'\" [class]=\"typographyClasses\"><ng-content></ng-content></h6>\n <p *ngSwitchCase=\"'p'\" [class]=\"typographyClasses\"><ng-content></ng-content></p>\n <span *ngSwitchDefault [class]=\"typographyClasses\"><ng-content></ng-content></span>\n</ng-container>\n", styles: [".sefin-typography{font-family:var(--sefin-font-family-base);margin:0;padding:0}.sefin-typography--h1{font-size:var(--sefin-font-size-4xl);font-weight:var(--sefin-font-weight-bold);line-height:var(--sefin-line-height-tight)}.sefin-typography--h2{font-size:var(--sefin-font-size-3xl);font-weight:var(--sefin-font-weight-bold);line-height:var(--sefin-line-height-tight)}.sefin-typography--h3{font-size:var(--sefin-font-size-2xl);font-weight:var(--sefin-font-weight-bold);line-height:var(--sefin-line-height-tight)}.sefin-typography--h4{font-size:var(--sefin-font-size-xl);font-weight:var(--sefin-font-weight-bold);line-height:var(--sefin-line-height-tight)}.sefin-typography--h5{font-size:var(--sefin-font-size-lg);font-weight:var(--sefin-font-weight-bold);line-height:var(--sefin-line-height-tight)}.sefin-typography--h6{font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-bold);line-height:var(--sefin-line-height-tight)}.sefin-typography--p,.sefin-typography--span{font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal)}.sefin-typography--xs{font-size:var(--sefin-font-size-xs)}.sefin-typography--sm{font-size:var(--sefin-font-size-sm)}.sefin-typography--base{font-size:var(--sefin-font-size-base)}.sefin-typography--lg{font-size:var(--sefin-font-size-lg)}.sefin-typography--xl{font-size:var(--sefin-font-size-xl)}.sefin-typography--2xl{font-size:var(--sefin-font-size-2xl)}.sefin-typography--3xl{font-size:var(--sefin-font-size-3xl)}.sefin-typography--4xl{font-size:var(--sefin-font-size-4xl)}.sefin-typography--5xl{font-size:var(--sefin-font-size-5xl)}.sefin-typography--light{font-weight:var(--sefin-font-weight-light)}.sefin-typography--normal{font-weight:var(--sefin-font-weight-normal)}.sefin-typography--medium{font-weight:var(--sefin-font-weight-medium)}.sefin-typography--semibold{font-weight:var(--sefin-font-weight-semibold)}.sefin-typography--bold{font-weight:var(--sefin-font-weight-bold)}.sefin-typography--text{color:var(--sefin-color-text)}.sefin-typography--text-secondary{color:var(--sefin-color-text-secondary)}.sefin-typography--text-disabled{color:var(--sefin-color-text-disabled)}.sefin-typography--primary{color:var(--sefin-color-primary)}.sefin-typography--secondary{color:var(--sefin-color-secondary)}.sefin-typography--success{color:var(--sefin-color-success)}.sefin-typography--warning{color:var(--sefin-color-warning)}.sefin-typography--error{color:var(--sefin-color-error)}.sefin-typography--line-height-tight{line-height:var(--sefin-line-height-tight)}.sefin-typography--line-height-normal{line-height:var(--sefin-line-height-normal)}.sefin-typography--line-height-relaxed{line-height:var(--sefin-line-height-relaxed)}\n"] }]
|
|
1958
1962
|
}], propDecorators: { variant: [{
|
|
1959
1963
|
type: Input
|
|
1960
1964
|
}], size: [{
|
|
@@ -1967,8 +1971,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1967
1971
|
type: Input
|
|
1968
1972
|
}], class: [{
|
|
1969
1973
|
type: Input
|
|
1970
|
-
}], text: [{
|
|
1971
|
-
type: Input
|
|
1972
1974
|
}] } });
|
|
1973
1975
|
|
|
1974
1976
|
class DividerComponent {
|
|
@@ -3145,6 +3147,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
3145
3147
|
type: Output
|
|
3146
3148
|
}] } });
|
|
3147
3149
|
|
|
3150
|
+
class SpacerComponent {
|
|
3151
|
+
/** Size of the spacer. Options: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' */
|
|
3152
|
+
size = 'md';
|
|
3153
|
+
/** Orientation of the spacer. Options: 'vertical' | 'horizontal' */
|
|
3154
|
+
orientation = 'vertical';
|
|
3155
|
+
/** Additional CSS classes */
|
|
3156
|
+
class = '';
|
|
3157
|
+
get spacerClasses() {
|
|
3158
|
+
return [
|
|
3159
|
+
'sefin-spacer',
|
|
3160
|
+
`sefin-spacer--${this.orientation}`,
|
|
3161
|
+
`sefin-spacer--${this.size}`,
|
|
3162
|
+
this.class,
|
|
3163
|
+
]
|
|
3164
|
+
.filter(Boolean)
|
|
3165
|
+
.join(' ');
|
|
3166
|
+
}
|
|
3167
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3168
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: SpacerComponent, isStandalone: true, selector: "sefin-spacer", inputs: { size: "size", orientation: "orientation", class: "class" }, ngImport: i0, template: "<div [class]=\"spacerClasses\" aria-hidden=\"true\"></div>\n\n", styles: [".sefin-spacer{flex-shrink:0}.sefin-spacer--vertical{display:block;width:100%;height:0}.sefin-spacer--horizontal{display:inline-block;width:0;height:100%;vertical-align:middle}.sefin-spacer--xs.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-xs)}.sefin-spacer--xs.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-xs)}.sefin-spacer--sm.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-sm)}.sefin-spacer--sm.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-sm)}.sefin-spacer--md.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-md)}.sefin-spacer--md.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-md)}.sefin-spacer--lg.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-lg)}.sefin-spacer--lg.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-lg)}.sefin-spacer--xl.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-xl)}.sefin-spacer--xl.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-xl)}.sefin-spacer--2xl.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-2xl)}.sefin-spacer--2xl.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-2xl)}.sefin-spacer--3xl.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-3xl)}.sefin-spacer--3xl.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-3xl)}.sefin-spacer--4xl.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-4xl)}.sefin-spacer--4xl.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-4xl)}.sefin-spacer--5xl.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-5xl)}.sefin-spacer--5xl.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-5xl)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3169
|
+
}
|
|
3170
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SpacerComponent, decorators: [{
|
|
3171
|
+
type: Component,
|
|
3172
|
+
args: [{ selector: 'sefin-spacer', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"spacerClasses\" aria-hidden=\"true\"></div>\n\n", styles: [".sefin-spacer{flex-shrink:0}.sefin-spacer--vertical{display:block;width:100%;height:0}.sefin-spacer--horizontal{display:inline-block;width:0;height:100%;vertical-align:middle}.sefin-spacer--xs.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-xs)}.sefin-spacer--xs.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-xs)}.sefin-spacer--sm.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-sm)}.sefin-spacer--sm.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-sm)}.sefin-spacer--md.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-md)}.sefin-spacer--md.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-md)}.sefin-spacer--lg.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-lg)}.sefin-spacer--lg.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-lg)}.sefin-spacer--xl.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-xl)}.sefin-spacer--xl.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-xl)}.sefin-spacer--2xl.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-2xl)}.sefin-spacer--2xl.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-2xl)}.sefin-spacer--3xl.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-3xl)}.sefin-spacer--3xl.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-3xl)}.sefin-spacer--4xl.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-4xl)}.sefin-spacer--4xl.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-4xl)}.sefin-spacer--5xl.sefin-spacer--vertical{margin-bottom:var(--sefin-spacing-5xl)}.sefin-spacer--5xl.sefin-spacer--horizontal{margin-right:var(--sefin-spacing-5xl)}\n"] }]
|
|
3173
|
+
}], propDecorators: { size: [{
|
|
3174
|
+
type: Input
|
|
3175
|
+
}], orientation: [{
|
|
3176
|
+
type: Input
|
|
3177
|
+
}], class: [{
|
|
3178
|
+
type: Input
|
|
3179
|
+
}] } });
|
|
3180
|
+
|
|
3148
3181
|
/**
|
|
3149
3182
|
* Atoms index
|
|
3150
3183
|
*/
|
|
@@ -3572,6 +3605,8 @@ class ButtonGroupComponent {
|
|
|
3572
3605
|
groupVariant = 'default';
|
|
3573
3606
|
/** Whether the button group is disabled */
|
|
3574
3607
|
disabled = false;
|
|
3608
|
+
/** Whether buttons should take full width of the container */
|
|
3609
|
+
fullWidth = false;
|
|
3575
3610
|
/** Additional CSS classes */
|
|
3576
3611
|
class = '';
|
|
3577
3612
|
/** Event emitted when value changes (for segmented variant) */
|
|
@@ -3585,6 +3620,8 @@ class ButtonGroupComponent {
|
|
|
3585
3620
|
'sefin-button-group',
|
|
3586
3621
|
`sefin-button-group--${this.groupVariant}`,
|
|
3587
3622
|
`sefin-button-group--${this.size}`,
|
|
3623
|
+
this.groupVariant === 'default' ? `sefin-button-group--${this.variant}` : '',
|
|
3624
|
+
this.fullWidth ? 'sefin-button-group--full-width' : '',
|
|
3588
3625
|
this.disabled ? 'sefin-button-group--disabled' : '',
|
|
3589
3626
|
this.class,
|
|
3590
3627
|
]
|
|
@@ -3597,10 +3634,15 @@ class ButtonGroupComponent {
|
|
|
3597
3634
|
}
|
|
3598
3635
|
return this.selectedValues.includes(option.value);
|
|
3599
3636
|
}
|
|
3600
|
-
onButtonClick(option) {
|
|
3637
|
+
onButtonClick(option, event) {
|
|
3601
3638
|
if (this.disabled || option.disabled) {
|
|
3602
3639
|
return;
|
|
3603
3640
|
}
|
|
3641
|
+
// Prevent default if event is provided
|
|
3642
|
+
if (event) {
|
|
3643
|
+
event.preventDefault();
|
|
3644
|
+
event.stopPropagation();
|
|
3645
|
+
}
|
|
3604
3646
|
this.buttonClick.emit(option);
|
|
3605
3647
|
if (this.groupVariant === 'segmented') {
|
|
3606
3648
|
// Toggle selection for segmented
|
|
@@ -3636,16 +3678,41 @@ class ButtonGroupComponent {
|
|
|
3636
3678
|
}
|
|
3637
3679
|
}
|
|
3638
3680
|
}
|
|
3681
|
+
handleButtonClick(option) {
|
|
3682
|
+
return (event) => this.onButtonClick(option, event);
|
|
3683
|
+
}
|
|
3639
3684
|
getButtonVariant(option) {
|
|
3640
|
-
|
|
3685
|
+
if (this.groupVariant === 'segmented') {
|
|
3686
|
+
// In segmented variant, only selected buttons use the specified variant
|
|
3687
|
+
// Non-selected buttons use 'ghost' for a subtle appearance
|
|
3688
|
+
return this.isSelected(option) ? this.variant : 'ghost';
|
|
3689
|
+
}
|
|
3690
|
+
// In default variant, all buttons use the specified variant
|
|
3691
|
+
return this.variant;
|
|
3692
|
+
}
|
|
3693
|
+
getButtonClasses(option) {
|
|
3694
|
+
const classes = ['sefin-button-group__button-item'];
|
|
3695
|
+
// Size class
|
|
3696
|
+
classes.push(`sefin-button-group__button-item--${this.size}`);
|
|
3697
|
+
// Selected state
|
|
3698
|
+
if (this.isSelected(option)) {
|
|
3699
|
+
classes.push('sefin-button-group__button-item--selected');
|
|
3700
|
+
}
|
|
3701
|
+
// Variant classes
|
|
3641
3702
|
if (this.groupVariant === 'default') {
|
|
3642
|
-
|
|
3703
|
+
classes.push('sefin-button-group__button-item--default');
|
|
3704
|
+
// In default variant, all buttons use the variant style
|
|
3705
|
+
classes.push(`sefin-button-group__button-item--${this.variant}`);
|
|
3643
3706
|
}
|
|
3644
|
-
|
|
3645
|
-
|
|
3646
|
-
|
|
3707
|
+
else {
|
|
3708
|
+
// Segmented variant
|
|
3709
|
+
classes.push('sefin-button-group__button-item--segmented');
|
|
3710
|
+
if (this.isSelected(option)) {
|
|
3711
|
+
// Selected buttons use the variant style
|
|
3712
|
+
classes.push(`sefin-button-group__button-item--${this.variant}`);
|
|
3713
|
+
}
|
|
3647
3714
|
}
|
|
3648
|
-
return '
|
|
3715
|
+
return classes.join(' ');
|
|
3649
3716
|
}
|
|
3650
3717
|
sanitizeHtml(html) {
|
|
3651
3718
|
if (!html)
|
|
@@ -3658,11 +3725,11 @@ class ButtonGroupComponent {
|
|
|
3658
3725
|
return this.sanitizer.sanitize(1, html) || '';
|
|
3659
3726
|
}
|
|
3660
3727
|
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 });
|
|
3661
|
-
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", class: "class" }, outputs: { valueChange: "valueChange", selectedValuesChange: "selectedValuesChange", buttonClick: "buttonClick" }, ngImport: i0, template: "<div [class]=\"buttonGroupClasses\" role=\"group\" [attr.aria-label]=\"'Button group'\">\n <sefin-button\n *ngFor=\"let option of options\"\n [variant]=\"getButtonVariant(option)\"\n [size]=\"size\"\n [disabled]=\"disabled || option.disabled\"\n [class.sefin-button-group__button]=\"true\"\n [class.sefin-button-group__button--selected]=\"isSelected(option)\"\n (clicked)=\"onButtonClick(option)\"\n >\n <span *ngIf=\"option.icon\" class=\"sefin-button-group__icon\" [innerHTML]=\"sanitizeHtml(option.icon)\"></span>\n {{ option.label }}\n </sefin-button>\n</div>\n\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)}.sefin-button-group__button{position:relative;border-radius:0!important;margin:0;flex:1 1 0;min-width:0;width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none}.sefin-button-group__button:first-child,.sefin-button-group__button:last-child{border-radius:0!important}.sefin-button-group__button:hover:not(:disabled){z-index:1}.sefin-button-group__button:focus-visible{z-index:2;outline-offset:-2px}.sefin-button-group__icon{display:inline-flex;align-items:center;justify-content:center;margin-right:var(--sefin-spacing-xs, 4px);flex-shrink:0}.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, 4px);gap:var(--sefin-spacing-xs, 4px);overflow:visible}.sefin-button-group--segmented .sefin-button-group__button{border:1px solid var(--sefin-color-primary)!important;background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-primary)!important;border-radius:var(--sefin-radius-sm)!important;margin:0}.sefin-button-group--segmented .sefin-button-group__button:first-child,.sefin-button-group--segmented .sefin-button-group__button:last-child{border-radius:var(--sefin-radius-sm)!important}.sefin-button-group--segmented .sefin-button-group__button:not(:first-child){margin-left:var(--sefin-spacing-xs, 4px)}.sefin-button-group--segmented .sefin-button-group__button.sefin-button-group__button--selected{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:not(.sefin-button-group__button--selected){background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)!important}.sefin-button-group--segmented .sefin-button-group__button:hover:not(:disabled).sefin-button-group__button--selected{background-color:var(--sefin-color-primary-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{border:none!important;border-radius:0!important;background-color:transparent!important;color:#fff!important;margin:0;box-shadow:none!important}.sefin-button-group--default .sefin-button-group__button.sefin-button-group__button--selected,.sefin-button-group--default .sefin-button-group__button:not(.sefin-button-group__button--selected){background-color:transparent!important;color:#fff!important}.sefin-button-group--default .sefin-button-group__button:hover:not(:disabled){background-color:#ffffff1a!important}.sefin-button-group--default .sefin-button-group__button:not(:last-child):after{content:\"\";position:absolute;right:0;top:25%;bottom:25%;width:1px;background-color:#ffffff40;pointer-events:none}.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}.sefin-button-group .sefin-button{flex:1 1 0!important;min-width:0!important;width:0!important;text-align:center!important;display:flex!important;align-items:center!important;justify-content:center!important}.sefin-button-group .sefin-button:hover:not(:disabled){transform:none!important}.sefin-button-group .sefin-button:active:not(:disabled){transform:none!important}.sefin-button-group .sefin-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sefin-button-group--default .sefin-button{border-radius:0!important;border:none!important;box-shadow:none!important}.sefin-button-group--default .sefin-button.sefin-button--primary{background-color:transparent!important;border:none!important}.sefin-button-group--segmented .sefin-button{box-shadow:none!important}\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", "type", "class"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
3728
|
+
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 });
|
|
3662
3729
|
}
|
|
3663
3730
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonGroupComponent, decorators: [{
|
|
3664
3731
|
type: Component,
|
|
3665
|
-
args: [{ selector: 'sefin-button-group', standalone: true, imports: [CommonModule, ButtonComponent], changeDetection: ChangeDetectionStrategy.Default, template: "<div [class]=\"buttonGroupClasses\" role=\"group\" [attr.aria-label]=\"'Button group'\">\n <sefin-button\n *ngFor=\"let option of options\"\n [variant]=\"getButtonVariant(option)\"\n [size]=\"size\"\n [disabled]=\"disabled || option.disabled\"\n [class.sefin-button-group__button]=\"true\"\n [class.sefin-button-group__button--selected]=\"isSelected(option)\"\n (clicked)=\"onButtonClick(option)\"\n >\n <span *ngIf=\"option.icon\" class=\"sefin-button-group__icon\" [innerHTML]=\"sanitizeHtml(option.icon)\"></span>\n {{ option.label }}\n </sefin-button>\n</div>\n\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)}.sefin-button-group__button{position:relative;border-radius:0!important;margin:0;flex:1 1 0;min-width:0;width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none}.sefin-button-group__button:first-child,.sefin-button-group__button:last-child{border-radius:0!important}.sefin-button-group__button:hover:not(:disabled){z-index:1}.sefin-button-group__button:focus-visible{z-index:2;outline-offset:-2px}.sefin-button-group__icon{display:inline-flex;align-items:center;justify-content:center;margin-right:var(--sefin-spacing-xs, 4px);flex-shrink:0}.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, 4px);gap:var(--sefin-spacing-xs, 4px);overflow:visible}.sefin-button-group--segmented .sefin-button-group__button{border:1px solid var(--sefin-color-primary)!important;background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-primary)!important;border-radius:var(--sefin-radius-sm)!important;margin:0}.sefin-button-group--segmented .sefin-button-group__button:first-child,.sefin-button-group--segmented .sefin-button-group__button:last-child{border-radius:var(--sefin-radius-sm)!important}.sefin-button-group--segmented .sefin-button-group__button:not(:first-child){margin-left:var(--sefin-spacing-xs, 4px)}.sefin-button-group--segmented .sefin-button-group__button.sefin-button-group__button--selected{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:not(.sefin-button-group__button--selected){background-color:var(--sefin-color-surface)!important;color:var(--sefin-color-primary)!important}.sefin-button-group--segmented .sefin-button-group__button:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)!important}.sefin-button-group--segmented .sefin-button-group__button:hover:not(:disabled).sefin-button-group__button--selected{background-color:var(--sefin-color-primary-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{border:none!important;border-radius:0!important;background-color:transparent!important;color:#fff!important;margin:0;box-shadow:none!important}.sefin-button-group--default .sefin-button-group__button.sefin-button-group__button--selected,.sefin-button-group--default .sefin-button-group__button:not(.sefin-button-group__button--selected){background-color:transparent!important;color:#fff!important}.sefin-button-group--default .sefin-button-group__button:hover:not(:disabled){background-color:#ffffff1a!important}.sefin-button-group--default .sefin-button-group__button:not(:last-child):after{content:\"\";position:absolute;right:0;top:25%;bottom:25%;width:1px;background-color:#ffffff40;pointer-events:none}.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}.sefin-button-group .sefin-button{flex:1 1 0!important;min-width:0!important;width:0!important;text-align:center!important;display:flex!important;align-items:center!important;justify-content:center!important}.sefin-button-group .sefin-button:hover:not(:disabled){transform:none!important}.sefin-button-group .sefin-button:active:not(:disabled){transform:none!important}.sefin-button-group .sefin-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sefin-button-group--default .sefin-button{border-radius:0!important;border:none!important;box-shadow:none!important}.sefin-button-group--default .sefin-button.sefin-button--primary{background-color:transparent!important;border:none!important}.sefin-button-group--segmented .sefin-button{box-shadow:none!important}\n"] }]
|
|
3732
|
+
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"] }]
|
|
3666
3733
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { options: [{
|
|
3667
3734
|
type: Input
|
|
3668
3735
|
}], value: [{
|
|
@@ -3679,6 +3746,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
3679
3746
|
type: Input
|
|
3680
3747
|
}], disabled: [{
|
|
3681
3748
|
type: Input
|
|
3749
|
+
}], fullWidth: [{
|
|
3750
|
+
type: Input
|
|
3682
3751
|
}], class: [{
|
|
3683
3752
|
type: Input
|
|
3684
3753
|
}], valueChange: [{
|
|
@@ -4350,180 +4419,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
4350
4419
|
args: ['document:keydown', ['$event']]
|
|
4351
4420
|
}] } });
|
|
4352
4421
|
|
|
4353
|
-
class
|
|
4354
|
-
|
|
4355
|
-
|
|
4356
|
-
|
|
4357
|
-
|
|
4358
|
-
|
|
4359
|
-
return this._currentPage();
|
|
4360
|
-
}
|
|
4361
|
-
_currentPage = signal(1, ...(ngDevMode ? [{ debugName: "_currentPage" }] : []));
|
|
4362
|
-
/** Total number of pages */
|
|
4363
|
-
set totalPages(value) {
|
|
4364
|
-
this._totalPages.set(Math.max(1, value));
|
|
4365
|
-
}
|
|
4366
|
-
get totalPages() {
|
|
4367
|
-
return this._totalPages();
|
|
4368
|
-
}
|
|
4369
|
-
_totalPages = signal(1, ...(ngDevMode ? [{ debugName: "_totalPages" }] : []));
|
|
4370
|
-
/** Total number of items (alternative to totalPages) */
|
|
4371
|
-
set totalItems(value) {
|
|
4372
|
-
if (value !== undefined) {
|
|
4373
|
-
this._totalItems.set(value);
|
|
4374
|
-
}
|
|
4375
|
-
}
|
|
4376
|
-
get totalItems() {
|
|
4377
|
-
return this._totalItems();
|
|
4378
|
-
}
|
|
4379
|
-
_totalItems = signal(undefined, ...(ngDevMode ? [{ debugName: "_totalItems" }] : []));
|
|
4380
|
-
/** Items per page (used when totalItems is provided) */
|
|
4381
|
-
itemsPerPage = 10;
|
|
4382
|
-
/** Number of page buttons to show on each side of current page */
|
|
4383
|
-
siblingCount = 1;
|
|
4384
|
-
/** Show first and last page buttons */
|
|
4385
|
-
showFirstLast = true;
|
|
4386
|
-
/** Show previous and next buttons */
|
|
4387
|
-
showPrevNext = true;
|
|
4388
|
-
/** Pagination size. Options: 'sm' | 'md' | 'lg' */
|
|
4389
|
-
size = 'md';
|
|
4390
|
-
/** Pagination variant. Options: 'default' | 'compact' */
|
|
4391
|
-
variant = 'default';
|
|
4392
|
-
/** Additional CSS classes */
|
|
4393
|
-
class = '';
|
|
4394
|
-
/** Event emitted when page changes */
|
|
4395
|
-
pageChange = new EventEmitter();
|
|
4396
|
-
/** Computed total pages (from totalItems or direct input) */
|
|
4397
|
-
computedTotalPages = computed(() => {
|
|
4398
|
-
const total = this._totalItems();
|
|
4399
|
-
if (total !== undefined) {
|
|
4400
|
-
return Math.max(1, Math.ceil(total / this.itemsPerPage));
|
|
4401
|
-
}
|
|
4402
|
-
return this._totalPages();
|
|
4403
|
-
}, ...(ngDevMode ? [{ debugName: "computedTotalPages" }] : []));
|
|
4404
|
-
/** Computed page numbers to display */
|
|
4405
|
-
pageNumbers = computed(() => {
|
|
4406
|
-
const current = this._currentPage();
|
|
4407
|
-
const total = this.computedTotalPages();
|
|
4408
|
-
const sibling = this.siblingCount;
|
|
4409
|
-
const pages = [];
|
|
4410
|
-
// Always show first page if not already included
|
|
4411
|
-
if (this.showFirstLast && current > sibling + 2) {
|
|
4412
|
-
pages.push(1);
|
|
4413
|
-
if (current > sibling + 3) {
|
|
4414
|
-
pages.push('ellipsis-start');
|
|
4415
|
-
}
|
|
4416
|
-
}
|
|
4417
|
-
// Calculate start and end of page range
|
|
4418
|
-
const start = Math.max(1, current - sibling);
|
|
4419
|
-
const end = Math.min(total, current + sibling);
|
|
4420
|
-
// Add page numbers in range
|
|
4421
|
-
for (let i = start; i <= end; i++) {
|
|
4422
|
-
pages.push(i);
|
|
4423
|
-
}
|
|
4424
|
-
// Always show last page if not already included
|
|
4425
|
-
if (this.showFirstLast && current < total - sibling - 1) {
|
|
4426
|
-
if (current < total - sibling - 2) {
|
|
4427
|
-
pages.push('ellipsis-end');
|
|
4428
|
-
}
|
|
4429
|
-
pages.push(total);
|
|
4430
|
-
}
|
|
4431
|
-
return pages;
|
|
4432
|
-
}, ...(ngDevMode ? [{ debugName: "pageNumbers" }] : []));
|
|
4433
|
-
get paginationClasses() {
|
|
4434
|
-
return [
|
|
4435
|
-
'sefin-pagination',
|
|
4436
|
-
`sefin-pagination--${this.size}`,
|
|
4437
|
-
`sefin-pagination--${this.variant}`,
|
|
4438
|
-
this.class,
|
|
4439
|
-
]
|
|
4440
|
-
.filter(Boolean)
|
|
4441
|
-
.join(' ');
|
|
4442
|
-
}
|
|
4443
|
-
isDisabled(direction) {
|
|
4444
|
-
if (direction === 'prev') {
|
|
4445
|
-
return this.currentPage <= 1;
|
|
4446
|
-
}
|
|
4447
|
-
return this.currentPage >= this.computedTotalPages();
|
|
4448
|
-
}
|
|
4449
|
-
goToPage(page) {
|
|
4450
|
-
if (typeof page === 'number') {
|
|
4451
|
-
const validPage = Math.max(1, Math.min(page, this.computedTotalPages()));
|
|
4452
|
-
if (validPage !== this.currentPage) {
|
|
4453
|
-
this._currentPage.set(validPage);
|
|
4454
|
-
this.pageChange.emit(validPage);
|
|
4455
|
-
}
|
|
4456
|
-
}
|
|
4457
|
-
}
|
|
4458
|
-
goToPrevious() {
|
|
4459
|
-
if (!this.isDisabled('prev')) {
|
|
4460
|
-
this.goToPage(this.currentPage - 1);
|
|
4461
|
-
}
|
|
4462
|
-
}
|
|
4463
|
-
goToNext() {
|
|
4464
|
-
if (!this.isDisabled('next')) {
|
|
4465
|
-
this.goToPage(this.currentPage + 1);
|
|
4466
|
-
}
|
|
4467
|
-
}
|
|
4468
|
-
goToFirst() {
|
|
4469
|
-
if (this.currentPage > 1) {
|
|
4470
|
-
this.goToPage(1);
|
|
4471
|
-
}
|
|
4472
|
-
}
|
|
4473
|
-
goToLast() {
|
|
4474
|
-
const lastPage = this.computedTotalPages();
|
|
4475
|
-
if (this.currentPage < lastPage) {
|
|
4476
|
-
this.goToPage(lastPage);
|
|
4477
|
-
}
|
|
4478
|
-
}
|
|
4479
|
-
isEllipsis(item) {
|
|
4480
|
-
return item === 'ellipsis-start' || item === 'ellipsis-end';
|
|
4481
|
-
}
|
|
4482
|
-
isCurrentPage(page) {
|
|
4483
|
-
return typeof page === 'number' && page === this.currentPage;
|
|
4484
|
-
}
|
|
4485
|
-
getAriaCurrent(page) {
|
|
4486
|
-
return this.isCurrentPage(page) ? 'page' : null;
|
|
4487
|
-
}
|
|
4488
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4489
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: PaginationComponent, isStandalone: true, selector: "sefin-pagination", inputs: { currentPage: "currentPage", totalPages: "totalPages", totalItems: "totalItems", itemsPerPage: "itemsPerPage", siblingCount: "siblingCount", showFirstLast: "showFirstLast", showPrevNext: "showPrevNext", size: "size", variant: "variant", class: "class" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<nav [class]=\"paginationClasses\" aria-label=\"Pagination Navigation\">\n <ul class=\"sefin-pagination__list\">\n <!-- First button -->\n <li *ngIf=\"showFirstLast\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"currentPage <= 1\"\n (click)=\"goToFirst()\"\n aria-label=\"Go to first page\"\n [attr.aria-disabled]=\"currentPage <= 1\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M11 17L6 12L11 7M18 17L13 12L18 7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Previous button -->\n <li *ngIf=\"showPrevNext\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"isDisabled('prev')\"\n (click)=\"goToPrevious()\"\n aria-label=\"Go to previous page\"\n [attr.aria-disabled]=\"isDisabled('prev')\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M15 18L9 12L15 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Page numbers -->\n <li\n *ngFor=\"let page of pageNumbers(); let i = index\"\n class=\"sefin-pagination__item\"\n >\n <ng-container *ngIf=\"isEllipsis(page); else pageButton\">\n <span class=\"sefin-pagination__ellipsis\" aria-hidden=\"true\">...</span>\n </ng-container>\n <ng-template #pageButton>\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--page\"\n [class.sefin-pagination__button--active]=\"isCurrentPage(page)\"\n (click)=\"goToPage(page)\"\n [attr.aria-label]=\"'Go to page ' + page\"\n [attr.aria-current]=\"getAriaCurrent(page)\"\n >\n {{ page }}\n </button>\n </ng-template>\n </li>\n\n <!-- Next button -->\n <li *ngIf=\"showPrevNext\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"isDisabled('next')\"\n (click)=\"goToNext()\"\n aria-label=\"Go to next page\"\n [attr.aria-disabled]=\"isDisabled('next')\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9 18L15 12L9 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Last button -->\n <li *ngIf=\"showFirstLast\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"currentPage >= computedTotalPages()\"\n (click)=\"goToLast()\"\n aria-label=\"Go to last page\"\n [attr.aria-disabled]=\"currentPage >= computedTotalPages()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M13 17L18 12L13 7M6 17L11 12L6 7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n </ul>\n</nav>\n", styles: [".sefin-pagination{display:inline-flex;font-family:var(--sefin-font-family-base)}.sefin-pagination__list{display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);list-style:none;margin:0;padding:0}.sefin-pagination__item{display:inline-flex;align-items:center}.sefin-pagination__button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border:1px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);color:var(--sefin-color-text);cursor:pointer;outline:none;transition:all .2s ease-in-out;border-radius:var(--sefin-radius-md);-webkit-user-select:none;user-select:none}.sefin-pagination__button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-pagination__button:hover:not(:disabled):not(.sefin-pagination__button--active){background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-primary);color:var(--sefin-color-primary)}.sefin-pagination__button:active:not(:disabled){transform:translateY(1px)}.sefin-pagination__button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-pagination__button--page{min-width:40px;text-align:center}.sefin-pagination__button--active{background-color:var(--sefin-color-primary);border-color:var(--sefin-color-primary);color:#fff;font-weight:var(--sefin-font-weight-semibold)}.sefin-pagination__button--active:hover{background-color:var(--sefin-color-primary-dark);border-color:var(--sefin-color-primary-dark);color:#fff}.sefin-pagination__button--nav{padding:0}.sefin-pagination__button svg{display:block;width:16px;height:16px;flex-shrink:0}.sefin-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;color:var(--sefin-color-text-secondary);padding:0 var(--sefin-spacing-sm, 8px);-webkit-user-select:none;user-select:none;min-width:40px}.sefin-pagination--sm .sefin-pagination__button{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, 14px);min-height:32px}.sefin-pagination--sm .sefin-pagination__button--page{min-width:32px}.sefin-pagination--sm .sefin-pagination__button svg{width:14px;height:14px}.sefin-pagination--sm .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-sm, 14px);min-width:32px}.sefin-pagination--md .sefin-pagination__button{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-base, 16px);min-height:40px}.sefin-pagination--md .sefin-pagination__button--page{min-width:40px}.sefin-pagination--md .sefin-pagination__button svg{width:16px;height:16px}.sefin-pagination--md .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-base, 16px);min-width:40px}.sefin-pagination--lg .sefin-pagination__button{padding:var(--sefin-spacing-md, 16px) var(--sefin-spacing-lg, 24px);font-size:var(--sefin-font-size-lg, 18px);min-height:48px}.sefin-pagination--lg .sefin-pagination__button--page{min-width:48px}.sefin-pagination--lg .sefin-pagination__button svg{width:18px;height:18px}.sefin-pagination--lg .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-lg, 18px);min-width:48px}.sefin-pagination--compact .sefin-pagination__button--page{min-width:auto;padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-pagination--compact .sefin-pagination__ellipsis{min-width:auto;padding:0 var(--sefin-spacing-xs, 4px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4490
|
-
}
|
|
4491
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
4492
|
-
type: Component,
|
|
4493
|
-
args: [{ selector: 'sefin-pagination', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [class]=\"paginationClasses\" aria-label=\"Pagination Navigation\">\n <ul class=\"sefin-pagination__list\">\n <!-- First button -->\n <li *ngIf=\"showFirstLast\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"currentPage <= 1\"\n (click)=\"goToFirst()\"\n aria-label=\"Go to first page\"\n [attr.aria-disabled]=\"currentPage <= 1\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M11 17L6 12L11 7M18 17L13 12L18 7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Previous button -->\n <li *ngIf=\"showPrevNext\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"isDisabled('prev')\"\n (click)=\"goToPrevious()\"\n aria-label=\"Go to previous page\"\n [attr.aria-disabled]=\"isDisabled('prev')\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M15 18L9 12L15 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Page numbers -->\n <li\n *ngFor=\"let page of pageNumbers(); let i = index\"\n class=\"sefin-pagination__item\"\n >\n <ng-container *ngIf=\"isEllipsis(page); else pageButton\">\n <span class=\"sefin-pagination__ellipsis\" aria-hidden=\"true\">...</span>\n </ng-container>\n <ng-template #pageButton>\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--page\"\n [class.sefin-pagination__button--active]=\"isCurrentPage(page)\"\n (click)=\"goToPage(page)\"\n [attr.aria-label]=\"'Go to page ' + page\"\n [attr.aria-current]=\"getAriaCurrent(page)\"\n >\n {{ page }}\n </button>\n </ng-template>\n </li>\n\n <!-- Next button -->\n <li *ngIf=\"showPrevNext\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"isDisabled('next')\"\n (click)=\"goToNext()\"\n aria-label=\"Go to next page\"\n [attr.aria-disabled]=\"isDisabled('next')\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9 18L15 12L9 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Last button -->\n <li *ngIf=\"showFirstLast\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"currentPage >= computedTotalPages()\"\n (click)=\"goToLast()\"\n aria-label=\"Go to last page\"\n [attr.aria-disabled]=\"currentPage >= computedTotalPages()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M13 17L18 12L13 7M6 17L11 12L6 7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n </ul>\n</nav>\n", styles: [".sefin-pagination{display:inline-flex;font-family:var(--sefin-font-family-base)}.sefin-pagination__list{display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);list-style:none;margin:0;padding:0}.sefin-pagination__item{display:inline-flex;align-items:center}.sefin-pagination__button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border:1px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);color:var(--sefin-color-text);cursor:pointer;outline:none;transition:all .2s ease-in-out;border-radius:var(--sefin-radius-md);-webkit-user-select:none;user-select:none}.sefin-pagination__button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-pagination__button:hover:not(:disabled):not(.sefin-pagination__button--active){background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-primary);color:var(--sefin-color-primary)}.sefin-pagination__button:active:not(:disabled){transform:translateY(1px)}.sefin-pagination__button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-pagination__button--page{min-width:40px;text-align:center}.sefin-pagination__button--active{background-color:var(--sefin-color-primary);border-color:var(--sefin-color-primary);color:#fff;font-weight:var(--sefin-font-weight-semibold)}.sefin-pagination__button--active:hover{background-color:var(--sefin-color-primary-dark);border-color:var(--sefin-color-primary-dark);color:#fff}.sefin-pagination__button--nav{padding:0}.sefin-pagination__button svg{display:block;width:16px;height:16px;flex-shrink:0}.sefin-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;color:var(--sefin-color-text-secondary);padding:0 var(--sefin-spacing-sm, 8px);-webkit-user-select:none;user-select:none;min-width:40px}.sefin-pagination--sm .sefin-pagination__button{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, 14px);min-height:32px}.sefin-pagination--sm .sefin-pagination__button--page{min-width:32px}.sefin-pagination--sm .sefin-pagination__button svg{width:14px;height:14px}.sefin-pagination--sm .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-sm, 14px);min-width:32px}.sefin-pagination--md .sefin-pagination__button{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-base, 16px);min-height:40px}.sefin-pagination--md .sefin-pagination__button--page{min-width:40px}.sefin-pagination--md .sefin-pagination__button svg{width:16px;height:16px}.sefin-pagination--md .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-base, 16px);min-width:40px}.sefin-pagination--lg .sefin-pagination__button{padding:var(--sefin-spacing-md, 16px) var(--sefin-spacing-lg, 24px);font-size:var(--sefin-font-size-lg, 18px);min-height:48px}.sefin-pagination--lg .sefin-pagination__button--page{min-width:48px}.sefin-pagination--lg .sefin-pagination__button svg{width:18px;height:18px}.sefin-pagination--lg .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-lg, 18px);min-width:48px}.sefin-pagination--compact .sefin-pagination__button--page{min-width:auto;padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-pagination--compact .sefin-pagination__ellipsis{min-width:auto;padding:0 var(--sefin-spacing-xs, 4px)}\n"] }]
|
|
4494
|
-
}], propDecorators: { currentPage: [{
|
|
4495
|
-
type: Input
|
|
4496
|
-
}], totalPages: [{
|
|
4497
|
-
type: Input
|
|
4498
|
-
}], totalItems: [{
|
|
4499
|
-
type: Input
|
|
4500
|
-
}], itemsPerPage: [{
|
|
4501
|
-
type: Input
|
|
4502
|
-
}], siblingCount: [{
|
|
4503
|
-
type: Input
|
|
4504
|
-
}], showFirstLast: [{
|
|
4505
|
-
type: Input
|
|
4506
|
-
}], showPrevNext: [{
|
|
4507
|
-
type: Input
|
|
4508
|
-
}], size: [{
|
|
4509
|
-
type: Input
|
|
4510
|
-
}], variant: [{
|
|
4511
|
-
type: Input
|
|
4512
|
-
}], class: [{
|
|
4513
|
-
type: Input
|
|
4514
|
-
}], pageChange: [{
|
|
4515
|
-
type: Output
|
|
4516
|
-
}] } });
|
|
4517
|
-
|
|
4518
|
-
class TextareaComponent {
|
|
4519
|
-
textareaRef;
|
|
4520
|
-
/** Textarea variant style. Options: 'outlined' | 'filled' | 'standard' */
|
|
4422
|
+
class FormFieldComponent {
|
|
4423
|
+
cdr;
|
|
4424
|
+
inputRef;
|
|
4425
|
+
/** Label text for the field */
|
|
4426
|
+
label = '';
|
|
4427
|
+
/** FormField variant style. Options: 'outlined' | 'filled' | 'standard' */
|
|
4521
4428
|
variant = 'outlined';
|
|
4522
|
-
/**
|
|
4429
|
+
/** FormField size. Options: 'sm' | 'md' | 'lg' */
|
|
4523
4430
|
size = 'md';
|
|
4431
|
+
/** Input type. Options: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' */
|
|
4432
|
+
type = 'text';
|
|
4524
4433
|
/** Placeholder text */
|
|
4525
4434
|
placeholder = '';
|
|
4526
|
-
/** Helper text shown below the
|
|
4435
|
+
/** Helper text shown below the input */
|
|
4527
4436
|
hint = '';
|
|
4528
4437
|
/** Error message to display */
|
|
4529
4438
|
errorMessage = '';
|
|
@@ -4539,65 +4448,642 @@ class TextareaComponent {
|
|
|
4539
4448
|
minLength;
|
|
4540
4449
|
/** Pattern for validation (regex string) */
|
|
4541
4450
|
pattern;
|
|
4542
|
-
/**
|
|
4543
|
-
|
|
4544
|
-
/**
|
|
4545
|
-
|
|
4546
|
-
/** Whether to auto-resize based on content */
|
|
4547
|
-
autoResize = false;
|
|
4548
|
-
/** Minimum height when auto-resize is enabled */
|
|
4549
|
-
minHeight;
|
|
4550
|
-
/** Maximum height when auto-resize is enabled */
|
|
4551
|
-
maxHeight;
|
|
4451
|
+
/** Leading icon name */
|
|
4452
|
+
leadingIcon;
|
|
4453
|
+
/** Trailing icon name */
|
|
4454
|
+
trailingIcon;
|
|
4552
4455
|
/** Whether to show character counter */
|
|
4553
4456
|
showCounter = false;
|
|
4554
4457
|
/** Autocomplete attribute */
|
|
4555
4458
|
autocomplete;
|
|
4556
|
-
/**
|
|
4459
|
+
/** Input name attribute */
|
|
4557
4460
|
name = '';
|
|
4558
|
-
/**
|
|
4461
|
+
/** Input id attribute */
|
|
4559
4462
|
id = '';
|
|
4560
4463
|
/** Additional CSS classes */
|
|
4561
4464
|
class = '';
|
|
4562
4465
|
/** Custom validation function */
|
|
4563
4466
|
customValidator;
|
|
4564
|
-
/** Initial value for the textarea (for non-reactive forms) */
|
|
4565
|
-
set value(val) {
|
|
4566
|
-
this._value = val || '';
|
|
4567
|
-
if (this.textareaRef?.nativeElement) {
|
|
4568
|
-
this.textareaRef.nativeElement.value = this._value;
|
|
4569
|
-
if (this.autoResize) {
|
|
4570
|
-
setTimeout(() => this.adjustHeight(), 0);
|
|
4571
|
-
}
|
|
4572
|
-
}
|
|
4573
|
-
this.validateField();
|
|
4574
|
-
}
|
|
4575
|
-
get value() {
|
|
4576
|
-
return this._value;
|
|
4577
|
-
}
|
|
4578
4467
|
/** Event emitted when the value changes */
|
|
4579
4468
|
valueChange = new EventEmitter();
|
|
4580
|
-
/** Event emitted when the
|
|
4469
|
+
/** Event emitted when the input is focused */
|
|
4581
4470
|
focused = new EventEmitter();
|
|
4582
|
-
/** Event emitted when the
|
|
4471
|
+
/** Event emitted when the input is blurred */
|
|
4583
4472
|
blurred = new EventEmitter();
|
|
4584
|
-
|
|
4473
|
+
/** Event emitted when trailing icon is clicked */
|
|
4474
|
+
trailingIconClick = new EventEmitter();
|
|
4475
|
+
value = '';
|
|
4585
4476
|
isFocused = false;
|
|
4586
4477
|
hasError = false;
|
|
4587
4478
|
internalErrorMessage = '';
|
|
4588
|
-
|
|
4479
|
+
internalId = '';
|
|
4589
4480
|
onChange = (value) => { };
|
|
4590
4481
|
onTouched = () => { };
|
|
4591
4482
|
destroy$ = new Subject();
|
|
4592
4483
|
control;
|
|
4484
|
+
constructor(cdr) {
|
|
4485
|
+
this.cdr = cdr;
|
|
4486
|
+
}
|
|
4593
4487
|
ngOnInit() {
|
|
4594
4488
|
this.generateIdIfNeeded();
|
|
4595
4489
|
}
|
|
4596
4490
|
ngAfterViewInit() {
|
|
4597
|
-
if (this.
|
|
4598
|
-
|
|
4599
|
-
|
|
4600
|
-
|
|
4491
|
+
if (this.inputRef?.nativeElement) {
|
|
4492
|
+
const inputElement = this.inputRef.nativeElement;
|
|
4493
|
+
// Verificar si el input tiene un valor que no está sincronizado con el componente
|
|
4494
|
+
const inputValue = inputElement.value || '';
|
|
4495
|
+
if (inputValue && (!this.value || this.value !== inputValue)) {
|
|
4496
|
+
this.value = inputValue;
|
|
4497
|
+
}
|
|
4498
|
+
// Sincronizar el valor del componente con el input
|
|
4499
|
+
if (this.value) {
|
|
4500
|
+
inputElement.value = this.value;
|
|
4501
|
+
}
|
|
4502
|
+
if (this.type === 'password') {
|
|
4503
|
+
inputElement.style.setProperty('-webkit-appearance', 'none', 'important');
|
|
4504
|
+
inputElement.setAttribute('data-password-field', 'true');
|
|
4505
|
+
}
|
|
4506
|
+
}
|
|
4507
|
+
}
|
|
4508
|
+
ngOnDestroy() {
|
|
4509
|
+
this.destroy$.next();
|
|
4510
|
+
this.destroy$.complete();
|
|
4511
|
+
}
|
|
4512
|
+
generateIdIfNeeded() {
|
|
4513
|
+
if (!this.id) {
|
|
4514
|
+
this.internalId = `sefin-form-field-${Math.random()
|
|
4515
|
+
.toString(36)
|
|
4516
|
+
.substr(2, 9)}`;
|
|
4517
|
+
}
|
|
4518
|
+
else {
|
|
4519
|
+
this.internalId = this.id;
|
|
4520
|
+
}
|
|
4521
|
+
}
|
|
4522
|
+
get fieldId() {
|
|
4523
|
+
return this.internalId;
|
|
4524
|
+
}
|
|
4525
|
+
get labelId() {
|
|
4526
|
+
return `${this.fieldId}-label`;
|
|
4527
|
+
}
|
|
4528
|
+
get inputId() {
|
|
4529
|
+
return `${this.fieldId}-input`;
|
|
4530
|
+
}
|
|
4531
|
+
get hintId() {
|
|
4532
|
+
return `${this.fieldId}-hint`;
|
|
4533
|
+
}
|
|
4534
|
+
onInput(event) {
|
|
4535
|
+
const target = event.target;
|
|
4536
|
+
const newValue = target.value || '';
|
|
4537
|
+
if (this.value !== newValue) {
|
|
4538
|
+
this.value = newValue;
|
|
4539
|
+
this.onChange(this.value);
|
|
4540
|
+
this.valueChange.emit(this.value);
|
|
4541
|
+
this.validateField();
|
|
4542
|
+
}
|
|
4543
|
+
}
|
|
4544
|
+
onFocus(event) {
|
|
4545
|
+
this.isFocused = true;
|
|
4546
|
+
this.focused.emit(event);
|
|
4547
|
+
this.cdr.detectChanges();
|
|
4548
|
+
}
|
|
4549
|
+
onBlur(event) {
|
|
4550
|
+
this.isFocused = false;
|
|
4551
|
+
this.onTouched();
|
|
4552
|
+
this.blurred.emit(event);
|
|
4553
|
+
this.validateField();
|
|
4554
|
+
this.cdr.detectChanges();
|
|
4555
|
+
}
|
|
4556
|
+
onTrailingIconClick(event) {
|
|
4557
|
+
event.stopPropagation();
|
|
4558
|
+
if (!this.disabled) {
|
|
4559
|
+
this.trailingIconClick.emit(event);
|
|
4560
|
+
}
|
|
4561
|
+
}
|
|
4562
|
+
validateField() {
|
|
4563
|
+
this.hasError = false;
|
|
4564
|
+
this.internalErrorMessage = '';
|
|
4565
|
+
if (this.disabled || this.readonly) {
|
|
4566
|
+
return;
|
|
4567
|
+
}
|
|
4568
|
+
const value = this.value || '';
|
|
4569
|
+
// Required validation
|
|
4570
|
+
if (this.required && !value.trim()) {
|
|
4571
|
+
this.hasError = true;
|
|
4572
|
+
this.internalErrorMessage = 'Este campo es requerido';
|
|
4573
|
+
return;
|
|
4574
|
+
}
|
|
4575
|
+
// Skip other validations if field is empty and not required
|
|
4576
|
+
if (!value.trim()) {
|
|
4577
|
+
return;
|
|
4578
|
+
}
|
|
4579
|
+
// Min length validation
|
|
4580
|
+
if (this.minLength && value.length < this.minLength) {
|
|
4581
|
+
this.hasError = true;
|
|
4582
|
+
this.internalErrorMessage = `Mínimo ${this.minLength} caracteres`;
|
|
4583
|
+
return;
|
|
4584
|
+
}
|
|
4585
|
+
// Max length validation
|
|
4586
|
+
if (this.maxLength && value.length > this.maxLength) {
|
|
4587
|
+
this.hasError = true;
|
|
4588
|
+
this.internalErrorMessage = `Máximo ${this.maxLength} caracteres`;
|
|
4589
|
+
return;
|
|
4590
|
+
}
|
|
4591
|
+
// Pattern validation
|
|
4592
|
+
if (this.pattern) {
|
|
4593
|
+
try {
|
|
4594
|
+
const regex = new RegExp(this.pattern);
|
|
4595
|
+
if (!regex.test(value)) {
|
|
4596
|
+
this.hasError = true;
|
|
4597
|
+
this.internalErrorMessage = 'El formato no es válido';
|
|
4598
|
+
return;
|
|
4599
|
+
}
|
|
4600
|
+
}
|
|
4601
|
+
catch (e) {
|
|
4602
|
+
console.warn('Invalid pattern:', this.pattern);
|
|
4603
|
+
}
|
|
4604
|
+
}
|
|
4605
|
+
// Type-specific validation
|
|
4606
|
+
if (this.type === 'email' && value) {
|
|
4607
|
+
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
4608
|
+
if (!emailRegex.test(value)) {
|
|
4609
|
+
this.hasError = true;
|
|
4610
|
+
this.internalErrorMessage = 'Ingresa un email válido';
|
|
4611
|
+
return;
|
|
4612
|
+
}
|
|
4613
|
+
}
|
|
4614
|
+
if (this.type === 'url' && value) {
|
|
4615
|
+
try {
|
|
4616
|
+
new URL(value);
|
|
4617
|
+
}
|
|
4618
|
+
catch {
|
|
4619
|
+
this.hasError = true;
|
|
4620
|
+
this.internalErrorMessage = 'Ingresa una URL válida';
|
|
4621
|
+
return;
|
|
4622
|
+
}
|
|
4623
|
+
}
|
|
4624
|
+
// Custom validator
|
|
4625
|
+
if (this.customValidator) {
|
|
4626
|
+
const customError = this.customValidator(value);
|
|
4627
|
+
if (customError) {
|
|
4628
|
+
this.hasError = true;
|
|
4629
|
+
this.internalErrorMessage = customError;
|
|
4630
|
+
return;
|
|
4631
|
+
}
|
|
4632
|
+
}
|
|
4633
|
+
}
|
|
4634
|
+
get displayError() {
|
|
4635
|
+
return this.hasError && (!!this.errorMessage || !!this.internalErrorMessage);
|
|
4636
|
+
}
|
|
4637
|
+
get displayErrorMessage() {
|
|
4638
|
+
return this.errorMessage || this.internalErrorMessage;
|
|
4639
|
+
}
|
|
4640
|
+
get characterCount() {
|
|
4641
|
+
return this.value?.length || 0;
|
|
4642
|
+
}
|
|
4643
|
+
get formFieldClasses() {
|
|
4644
|
+
return [
|
|
4645
|
+
'sefin-form-field',
|
|
4646
|
+
`sefin-form-field--${this.variant}`,
|
|
4647
|
+
`sefin-form-field--${this.size}`,
|
|
4648
|
+
this.isFocused ? 'sefin-form-field--focused' : '',
|
|
4649
|
+
this.hasError ? 'sefin-form-field--error' : '',
|
|
4650
|
+
this.disabled ? 'sefin-form-field--disabled' : '',
|
|
4651
|
+
this.readonly ? 'sefin-form-field--readonly' : '',
|
|
4652
|
+
this.leadingIcon ? 'sefin-form-field--with-leading-icon' : '',
|
|
4653
|
+
this.trailingIcon ? 'sefin-form-field--with-trailing-icon' : '',
|
|
4654
|
+
this.required ? 'sefin-form-field--required' : '',
|
|
4655
|
+
this.class,
|
|
4656
|
+
]
|
|
4657
|
+
.filter(Boolean)
|
|
4658
|
+
.join(' ');
|
|
4659
|
+
}
|
|
4660
|
+
// ControlValueAccessor implementation
|
|
4661
|
+
writeValue(value) {
|
|
4662
|
+
const newValue = value || '';
|
|
4663
|
+
if (this.value !== newValue) {
|
|
4664
|
+
this.value = newValue;
|
|
4665
|
+
if (this.inputRef?.nativeElement) {
|
|
4666
|
+
this.inputRef.nativeElement.value = this.value;
|
|
4667
|
+
}
|
|
4668
|
+
this.validateField();
|
|
4669
|
+
this.cdr.markForCheck();
|
|
4670
|
+
this.cdr.detectChanges();
|
|
4671
|
+
}
|
|
4672
|
+
else if (this.inputRef?.nativeElement && this.inputRef.nativeElement.value !== newValue) {
|
|
4673
|
+
// Asegurar que el input esté sincronizado incluso si el valor del componente no cambió
|
|
4674
|
+
this.inputRef.nativeElement.value = newValue;
|
|
4675
|
+
this.cdr.markForCheck();
|
|
4676
|
+
}
|
|
4677
|
+
}
|
|
4678
|
+
registerOnChange(fn) {
|
|
4679
|
+
this.onChange = fn;
|
|
4680
|
+
}
|
|
4681
|
+
registerOnTouched(fn) {
|
|
4682
|
+
this.onTouched = fn;
|
|
4683
|
+
}
|
|
4684
|
+
setDisabledState(isDisabled) {
|
|
4685
|
+
this.disabled = isDisabled;
|
|
4686
|
+
}
|
|
4687
|
+
// Validator implementation
|
|
4688
|
+
validate(control) {
|
|
4689
|
+
this.control = control;
|
|
4690
|
+
const value = control.value || '';
|
|
4691
|
+
if (this.disabled || this.readonly) {
|
|
4692
|
+
return null;
|
|
4693
|
+
}
|
|
4694
|
+
// Required validation
|
|
4695
|
+
if (this.required && !value.trim()) {
|
|
4696
|
+
return { required: true };
|
|
4697
|
+
}
|
|
4698
|
+
// Skip other validations if field is empty and not required
|
|
4699
|
+
if (!value.trim()) {
|
|
4700
|
+
return null;
|
|
4701
|
+
}
|
|
4702
|
+
const errors = {};
|
|
4703
|
+
// Min length validation
|
|
4704
|
+
if (this.minLength && value.length < this.minLength) {
|
|
4705
|
+
errors['minlength'] = {
|
|
4706
|
+
requiredLength: this.minLength,
|
|
4707
|
+
actualLength: value.length,
|
|
4708
|
+
};
|
|
4709
|
+
}
|
|
4710
|
+
// Max length validation
|
|
4711
|
+
if (this.maxLength && value.length > this.maxLength) {
|
|
4712
|
+
errors['maxlength'] = {
|
|
4713
|
+
requiredLength: this.maxLength,
|
|
4714
|
+
actualLength: value.length,
|
|
4715
|
+
};
|
|
4716
|
+
}
|
|
4717
|
+
// Pattern validation
|
|
4718
|
+
if (this.pattern) {
|
|
4719
|
+
try {
|
|
4720
|
+
const regex = new RegExp(this.pattern);
|
|
4721
|
+
if (!regex.test(value)) {
|
|
4722
|
+
errors['pattern'] = {
|
|
4723
|
+
requiredPattern: this.pattern,
|
|
4724
|
+
actualValue: value,
|
|
4725
|
+
};
|
|
4726
|
+
}
|
|
4727
|
+
}
|
|
4728
|
+
catch (e) {
|
|
4729
|
+
console.warn('Invalid pattern:', this.pattern);
|
|
4730
|
+
}
|
|
4731
|
+
}
|
|
4732
|
+
// Type-specific validation
|
|
4733
|
+
if (this.type === 'email' && value) {
|
|
4734
|
+
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
4735
|
+
if (!emailRegex.test(value)) {
|
|
4736
|
+
errors['email'] = true;
|
|
4737
|
+
}
|
|
4738
|
+
}
|
|
4739
|
+
if (this.type === 'url' && value) {
|
|
4740
|
+
try {
|
|
4741
|
+
new URL(value);
|
|
4742
|
+
}
|
|
4743
|
+
catch {
|
|
4744
|
+
errors['url'] = true;
|
|
4745
|
+
}
|
|
4746
|
+
}
|
|
4747
|
+
// Custom validator
|
|
4748
|
+
if (this.customValidator) {
|
|
4749
|
+
const customError = this.customValidator(value);
|
|
4750
|
+
if (customError) {
|
|
4751
|
+
errors['custom'] = { message: customError };
|
|
4752
|
+
}
|
|
4753
|
+
}
|
|
4754
|
+
return Object.keys(errors).length > 0 ? errors : null;
|
|
4755
|
+
}
|
|
4756
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4757
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: FormFieldComponent, isStandalone: true, selector: "sefin-form-field", inputs: { label: "label", variant: "variant", size: "size", type: "type", placeholder: "placeholder", hint: "hint", errorMessage: "errorMessage", required: "required", disabled: "disabled", readonly: "readonly", maxLength: "maxLength", minLength: "minLength", pattern: "pattern", leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", showCounter: "showCounter", autocomplete: "autocomplete", name: "name", id: "id", class: "class", customValidator: "customValidator" }, outputs: { valueChange: "valueChange", focused: "focused", blurred: "blurred", trailingIconClick: "trailingIconClick" }, providers: [
|
|
4758
|
+
{
|
|
4759
|
+
provide: NG_VALUE_ACCESSOR,
|
|
4760
|
+
useExisting: forwardRef(() => FormFieldComponent),
|
|
4761
|
+
multi: true,
|
|
4762
|
+
},
|
|
4763
|
+
{
|
|
4764
|
+
provide: NG_VALIDATORS,
|
|
4765
|
+
useExisting: forwardRef(() => FormFieldComponent),
|
|
4766
|
+
multi: true,
|
|
4767
|
+
},
|
|
4768
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div [class]=\"formFieldClasses\">\n <!-- Label -->\n <label\n *ngIf=\"label\"\n [id]=\"labelId\"\n [for]=\"inputId\"\n class=\"sefin-form-field__label\"\n [class.sefin-form-field__label--required]=\"required\"\n >\n {{ label }}\n </label>\n\n <!-- Input Container -->\n <div class=\"sefin-form-field__input-container\">\n <!-- Leading Icon -->\n <div *ngIf=\"leadingIcon\" class=\"sefin-form-field__leading-icon\">\n <sefin-icon\n [name]=\"leadingIcon\"\n [size]=\"size === 'sm' ? 'sm' : 'md'\"\n ></sefin-icon>\n </div>\n\n <!-- Input Wrapper -->\n <div class=\"sefin-form-field__input-wrapper\">\n <!-- Input -->\n <input\n #inputRef\n [id]=\"inputId\"\n [name]=\"name\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [pattern]=\"pattern\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-label]=\"label || placeholder\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"hasError\"\n [attr.aria-describedby]=\"\n displayError || hint || showCounter ? hintId : null\n \"\n [attr.aria-labelledby]=\"label ? labelId : null\"\n [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n class=\"sefin-form-field__input\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- Trailing Icon -->\n <div\n *ngIf=\"trailingIcon\"\n class=\"sefin-form-field__trailing-icon\"\n (click)=\"onTrailingIconClick($event)\"\n [attr.aria-label]=\"'Trailing icon'\"\n role=\"button\"\n tabindex=\"0\"\n >\n <sefin-icon\n [name]=\"trailingIcon\"\n [size]=\"size === 'sm' ? 'sm' : 'md'\"\n ></sefin-icon>\n </div>\n\n <!-- Outline/Filled border -->\n <div class=\"sefin-form-field__border\"></div>\n </div>\n\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint || showCounter\"\n [id]=\"hintId\"\n class=\"sefin-form-field__helper\"\n [class.sefin-form-field__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-form-field__error-message\">\n {{ displayErrorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-form-field__hint\">\n {{ hint }}\n </span>\n <span\n *ngIf=\"showCounter && !displayError\"\n class=\"sefin-form-field__counter\"\n [class.sefin-form-field__counter--warning]=\"\n maxLength && characterCount > maxLength * 0.8\n \"\n >\n {{ characterCount }}{{ maxLength ? \" / \" + maxLength : \"\" }}\n </span>\n </div>\n</div>\n", styles: [".sefin-form-field{position:relative;display:flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-form-field__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:56px;overflow:visible;z-index:0}.sefin-form-field__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;overflow:visible;z-index:1}.sefin-form-field__label{display:block;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-sm, 14px);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);margin-bottom:var(--sefin-spacing-xs, 4px);cursor:pointer}.sefin-form-field__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336);margin-left:2px}.sefin-form-field__input{width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;line-height:1.5;position:relative;z-index:1}.sefin-form-field__input::placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1;transition:opacity .2s ease-in-out}.sefin-form-field__input::-webkit-input-placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1}.sefin-form-field__input::-moz-placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1}.sefin-form-field__input:-ms-input-placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1}.sefin-form-field__input:disabled,.sefin-form-field__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-form-field__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-form-field__input[data-password-field=true]::-webkit-credentials-auto-fill-button{display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;right:0!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-form-field__input[type=password]::-ms-reveal,.sefin-form-field__input[type=password]::-ms-clear,.sefin-form-field__input[data-password-field=true]::-ms-reveal,.sefin-form-field__input[data-password-field=true]::-ms-clear{display:none!important;visibility:hidden!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-form-field__input[type=password]::-moz-focus-inner,.sefin-form-field__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-form-field__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border, #e0e0e0);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-form-field__leading-icon{display:flex;align-items:center;justify-content:center;padding-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);flex-shrink:0;z-index:1;height:100%}.sefin-form-field__trailing-icon{display:flex;align-items:center;justify-content:center;padding-right:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);cursor:pointer;flex-shrink:0;transition:color .2s ease-in-out;border-radius:var(--sefin-border-radius-sm, 4px);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-form-field__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-form-field__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-form-field__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-form-field__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:20px;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-form-field__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-form-field__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-form-field__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-form-field__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-form-field--outlined .sefin-form-field__input-container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-border-radius-md, 8px);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0;margin:0}.sefin-form-field--outlined.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-form-field--outlined.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:0}.sefin-form-field--outlined .sefin-form-field__border{display:none}.sefin-form-field--outlined.sefin-form-field--focused .sefin-form-field__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 1px var(--sefin-color-primary-light, rgba(25, 118, 210, .1))}.sefin-form-field--outlined.sefin-form-field--focused .sefin-form-field__label,.sefin-form-field--outlined.sefin-form-field--focused .sefin-form-field__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error, #f44336);border-width:.5px}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--outlined.sefin-form-field--disabled .sefin-form-field__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--filled .sefin-form-field__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-border-radius-md, 8px) var(--sefin-border-radius-md, 8px) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0;margin:0}.sefin-form-field--filled.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-form-field--filled.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:0}.sefin-form-field--filled .sefin-form-field__border{display:none}.sefin-form-field--filled.sefin-form-field--focused .sefin-form-field__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-form-field--filled.sefin-form-field--focused .sefin-form-field__label,.sefin-form-field--filled.sefin-form-field--focused .sefin-form-field__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--filled.sefin-form-field--disabled .sefin-form-field__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--standard .sefin-form-field__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-form-field--standard .sefin-form-field__input-wrapper{padding-left:0;padding-right:0}.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-form-field--standard.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper,.sefin-form-field--standard.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-form-field--standard .sefin-form-field__border{height:1px}.sefin-form-field--standard.sefin-form-field--focused .sefin-form-field__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-form-field--standard.sefin-form-field--focused .sefin-form-field__label,.sefin-form-field--standard.sefin-form-field--focused .sefin-form-field__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--standard.sefin-form-field--disabled .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--sm .sefin-form-field__input-container{min-height:40px}.sefin-form-field--sm .sefin-form-field__input,.sefin-form-field--sm .sefin-form-field__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-form-field--sm.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-form-field--sm.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--sm.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-form-field--sm.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--sm.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-form-field--md .sefin-form-field__input-container{min-height:56px}.sefin-form-field--lg .sefin-form-field__input-container{min-height:64px}.sefin-form-field--lg .sefin-form-field__input,.sefin-form-field--lg .sefin-form-field__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-form-field--lg.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--lg.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-form-field--lg.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--lg.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-form-field--lg.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--disabled{cursor:not-allowed;opacity:.6}.sefin-form-field--disabled .sefin-form-field__label{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-form-field--readonly .sefin-form-field__input{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
4769
|
+
}
|
|
4770
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
4771
|
+
type: Component,
|
|
4772
|
+
args: [{ selector: 'sefin-form-field', standalone: true, imports: [CommonModule, FormsModule, IconComponent], changeDetection: ChangeDetectionStrategy.Default, providers: [
|
|
4773
|
+
{
|
|
4774
|
+
provide: NG_VALUE_ACCESSOR,
|
|
4775
|
+
useExisting: forwardRef(() => FormFieldComponent),
|
|
4776
|
+
multi: true,
|
|
4777
|
+
},
|
|
4778
|
+
{
|
|
4779
|
+
provide: NG_VALIDATORS,
|
|
4780
|
+
useExisting: forwardRef(() => FormFieldComponent),
|
|
4781
|
+
multi: true,
|
|
4782
|
+
},
|
|
4783
|
+
], template: "<div [class]=\"formFieldClasses\">\n <!-- Label -->\n <label\n *ngIf=\"label\"\n [id]=\"labelId\"\n [for]=\"inputId\"\n class=\"sefin-form-field__label\"\n [class.sefin-form-field__label--required]=\"required\"\n >\n {{ label }}\n </label>\n\n <!-- Input Container -->\n <div class=\"sefin-form-field__input-container\">\n <!-- Leading Icon -->\n <div *ngIf=\"leadingIcon\" class=\"sefin-form-field__leading-icon\">\n <sefin-icon\n [name]=\"leadingIcon\"\n [size]=\"size === 'sm' ? 'sm' : 'md'\"\n ></sefin-icon>\n </div>\n\n <!-- Input Wrapper -->\n <div class=\"sefin-form-field__input-wrapper\">\n <!-- Input -->\n <input\n #inputRef\n [id]=\"inputId\"\n [name]=\"name\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [pattern]=\"pattern\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-label]=\"label || placeholder\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"hasError\"\n [attr.aria-describedby]=\"\n displayError || hint || showCounter ? hintId : null\n \"\n [attr.aria-labelledby]=\"label ? labelId : null\"\n [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n class=\"sefin-form-field__input\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- Trailing Icon -->\n <div\n *ngIf=\"trailingIcon\"\n class=\"sefin-form-field__trailing-icon\"\n (click)=\"onTrailingIconClick($event)\"\n [attr.aria-label]=\"'Trailing icon'\"\n role=\"button\"\n tabindex=\"0\"\n >\n <sefin-icon\n [name]=\"trailingIcon\"\n [size]=\"size === 'sm' ? 'sm' : 'md'\"\n ></sefin-icon>\n </div>\n\n <!-- Outline/Filled border -->\n <div class=\"sefin-form-field__border\"></div>\n </div>\n\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint || showCounter\"\n [id]=\"hintId\"\n class=\"sefin-form-field__helper\"\n [class.sefin-form-field__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-form-field__error-message\">\n {{ displayErrorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-form-field__hint\">\n {{ hint }}\n </span>\n <span\n *ngIf=\"showCounter && !displayError\"\n class=\"sefin-form-field__counter\"\n [class.sefin-form-field__counter--warning]=\"\n maxLength && characterCount > maxLength * 0.8\n \"\n >\n {{ characterCount }}{{ maxLength ? \" / \" + maxLength : \"\" }}\n </span>\n </div>\n</div>\n", styles: [".sefin-form-field{position:relative;display:flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-form-field__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:56px;overflow:visible;z-index:0}.sefin-form-field__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;overflow:visible;z-index:1}.sefin-form-field__label{display:block;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-sm, 14px);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);margin-bottom:var(--sefin-spacing-xs, 4px);cursor:pointer}.sefin-form-field__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336);margin-left:2px}.sefin-form-field__input{width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;line-height:1.5;position:relative;z-index:1}.sefin-form-field__input::placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1;transition:opacity .2s ease-in-out}.sefin-form-field__input::-webkit-input-placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1}.sefin-form-field__input::-moz-placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1}.sefin-form-field__input:-ms-input-placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1}.sefin-form-field__input:disabled,.sefin-form-field__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-form-field__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-form-field__input[data-password-field=true]::-webkit-credentials-auto-fill-button{display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;right:0!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-form-field__input[type=password]::-ms-reveal,.sefin-form-field__input[type=password]::-ms-clear,.sefin-form-field__input[data-password-field=true]::-ms-reveal,.sefin-form-field__input[data-password-field=true]::-ms-clear{display:none!important;visibility:hidden!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-form-field__input[type=password]::-moz-focus-inner,.sefin-form-field__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-form-field__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border, #e0e0e0);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-form-field__leading-icon{display:flex;align-items:center;justify-content:center;padding-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);flex-shrink:0;z-index:1;height:100%}.sefin-form-field__trailing-icon{display:flex;align-items:center;justify-content:center;padding-right:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);cursor:pointer;flex-shrink:0;transition:color .2s ease-in-out;border-radius:var(--sefin-border-radius-sm, 4px);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-form-field__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-form-field__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-form-field__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-form-field__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:20px;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-form-field__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-form-field__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-form-field__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-form-field__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-form-field--outlined .sefin-form-field__input-container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-border-radius-md, 8px);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0;margin:0}.sefin-form-field--outlined.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-form-field--outlined.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:0}.sefin-form-field--outlined .sefin-form-field__border{display:none}.sefin-form-field--outlined.sefin-form-field--focused .sefin-form-field__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 1px var(--sefin-color-primary-light, rgba(25, 118, 210, .1))}.sefin-form-field--outlined.sefin-form-field--focused .sefin-form-field__label,.sefin-form-field--outlined.sefin-form-field--focused .sefin-form-field__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error, #f44336);border-width:.5px}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--outlined.sefin-form-field--disabled .sefin-form-field__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--filled .sefin-form-field__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-border-radius-md, 8px) var(--sefin-border-radius-md, 8px) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0;margin:0}.sefin-form-field--filled.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-form-field--filled.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:0}.sefin-form-field--filled .sefin-form-field__border{display:none}.sefin-form-field--filled.sefin-form-field--focused .sefin-form-field__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-form-field--filled.sefin-form-field--focused .sefin-form-field__label,.sefin-form-field--filled.sefin-form-field--focused .sefin-form-field__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--filled.sefin-form-field--disabled .sefin-form-field__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--standard .sefin-form-field__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-form-field--standard .sefin-form-field__input-wrapper{padding-left:0;padding-right:0}.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-form-field--standard.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper,.sefin-form-field--standard.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-form-field--standard .sefin-form-field__border{height:1px}.sefin-form-field--standard.sefin-form-field--focused .sefin-form-field__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-form-field--standard.sefin-form-field--focused .sefin-form-field__label,.sefin-form-field--standard.sefin-form-field--focused .sefin-form-field__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--standard.sefin-form-field--disabled .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--sm .sefin-form-field__input-container{min-height:40px}.sefin-form-field--sm .sefin-form-field__input,.sefin-form-field--sm .sefin-form-field__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-form-field--sm.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-form-field--sm.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--sm.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-form-field--sm.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--sm.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-form-field--md .sefin-form-field__input-container{min-height:56px}.sefin-form-field--lg .sefin-form-field__input-container{min-height:64px}.sefin-form-field--lg .sefin-form-field__input,.sefin-form-field--lg .sefin-form-field__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-form-field--lg.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--lg.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-form-field--lg.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--lg.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-form-field--lg.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--disabled{cursor:not-allowed;opacity:.6}.sefin-form-field--disabled .sefin-form-field__label{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-form-field--readonly .sefin-form-field__input{cursor:default}\n"] }]
|
|
4784
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { inputRef: [{
|
|
4785
|
+
type: ViewChild,
|
|
4786
|
+
args: ['inputRef', { static: false }]
|
|
4787
|
+
}], label: [{
|
|
4788
|
+
type: Input
|
|
4789
|
+
}], variant: [{
|
|
4790
|
+
type: Input
|
|
4791
|
+
}], size: [{
|
|
4792
|
+
type: Input
|
|
4793
|
+
}], type: [{
|
|
4794
|
+
type: Input
|
|
4795
|
+
}], placeholder: [{
|
|
4796
|
+
type: Input
|
|
4797
|
+
}], hint: [{
|
|
4798
|
+
type: Input
|
|
4799
|
+
}], errorMessage: [{
|
|
4800
|
+
type: Input
|
|
4801
|
+
}], required: [{
|
|
4802
|
+
type: Input
|
|
4803
|
+
}], disabled: [{
|
|
4804
|
+
type: Input
|
|
4805
|
+
}], readonly: [{
|
|
4806
|
+
type: Input
|
|
4807
|
+
}], maxLength: [{
|
|
4808
|
+
type: Input
|
|
4809
|
+
}], minLength: [{
|
|
4810
|
+
type: Input
|
|
4811
|
+
}], pattern: [{
|
|
4812
|
+
type: Input
|
|
4813
|
+
}], leadingIcon: [{
|
|
4814
|
+
type: Input
|
|
4815
|
+
}], trailingIcon: [{
|
|
4816
|
+
type: Input
|
|
4817
|
+
}], showCounter: [{
|
|
4818
|
+
type: Input
|
|
4819
|
+
}], autocomplete: [{
|
|
4820
|
+
type: Input
|
|
4821
|
+
}], name: [{
|
|
4822
|
+
type: Input
|
|
4823
|
+
}], id: [{
|
|
4824
|
+
type: Input
|
|
4825
|
+
}], class: [{
|
|
4826
|
+
type: Input
|
|
4827
|
+
}], customValidator: [{
|
|
4828
|
+
type: Input
|
|
4829
|
+
}], valueChange: [{
|
|
4830
|
+
type: Output
|
|
4831
|
+
}], focused: [{
|
|
4832
|
+
type: Output
|
|
4833
|
+
}], blurred: [{
|
|
4834
|
+
type: Output
|
|
4835
|
+
}], trailingIconClick: [{
|
|
4836
|
+
type: Output
|
|
4837
|
+
}] } });
|
|
4838
|
+
|
|
4839
|
+
class PaginationComponent {
|
|
4840
|
+
/** Current page (1-based) */
|
|
4841
|
+
set currentPage(value) {
|
|
4842
|
+
this._currentPage.set(Math.max(1, value));
|
|
4843
|
+
}
|
|
4844
|
+
get currentPage() {
|
|
4845
|
+
return this._currentPage();
|
|
4846
|
+
}
|
|
4847
|
+
_currentPage = signal(1, ...(ngDevMode ? [{ debugName: "_currentPage" }] : []));
|
|
4848
|
+
/** Total number of pages */
|
|
4849
|
+
set totalPages(value) {
|
|
4850
|
+
this._totalPages.set(Math.max(1, value));
|
|
4851
|
+
}
|
|
4852
|
+
get totalPages() {
|
|
4853
|
+
return this._totalPages();
|
|
4854
|
+
}
|
|
4855
|
+
_totalPages = signal(1, ...(ngDevMode ? [{ debugName: "_totalPages" }] : []));
|
|
4856
|
+
/** Total number of items (alternative to totalPages) */
|
|
4857
|
+
set totalItems(value) {
|
|
4858
|
+
if (value !== undefined) {
|
|
4859
|
+
this._totalItems.set(value);
|
|
4860
|
+
}
|
|
4861
|
+
}
|
|
4862
|
+
get totalItems() {
|
|
4863
|
+
return this._totalItems();
|
|
4864
|
+
}
|
|
4865
|
+
_totalItems = signal(undefined, ...(ngDevMode ? [{ debugName: "_totalItems" }] : []));
|
|
4866
|
+
/** Items per page (used when totalItems is provided) */
|
|
4867
|
+
itemsPerPage = 10;
|
|
4868
|
+
/** Number of page buttons to show on each side of current page */
|
|
4869
|
+
siblingCount = 1;
|
|
4870
|
+
/** Show first and last page buttons */
|
|
4871
|
+
showFirstLast = true;
|
|
4872
|
+
/** Show previous and next buttons */
|
|
4873
|
+
showPrevNext = true;
|
|
4874
|
+
/** Pagination size. Options: 'sm' | 'md' | 'lg' */
|
|
4875
|
+
size = 'md';
|
|
4876
|
+
/** Pagination variant. Options: 'default' | 'compact' */
|
|
4877
|
+
variant = 'default';
|
|
4878
|
+
/** Additional CSS classes */
|
|
4879
|
+
class = '';
|
|
4880
|
+
/** Event emitted when page changes */
|
|
4881
|
+
pageChange = new EventEmitter();
|
|
4882
|
+
/** Computed total pages (from totalItems or direct input) */
|
|
4883
|
+
computedTotalPages = computed(() => {
|
|
4884
|
+
const total = this._totalItems();
|
|
4885
|
+
if (total !== undefined) {
|
|
4886
|
+
return Math.max(1, Math.ceil(total / this.itemsPerPage));
|
|
4887
|
+
}
|
|
4888
|
+
return this._totalPages();
|
|
4889
|
+
}, ...(ngDevMode ? [{ debugName: "computedTotalPages" }] : []));
|
|
4890
|
+
/** Computed page numbers to display */
|
|
4891
|
+
pageNumbers = computed(() => {
|
|
4892
|
+
const current = this._currentPage();
|
|
4893
|
+
const total = this.computedTotalPages();
|
|
4894
|
+
const sibling = this.siblingCount;
|
|
4895
|
+
const pages = [];
|
|
4896
|
+
// Always show first page if not already included
|
|
4897
|
+
if (this.showFirstLast && current > sibling + 2) {
|
|
4898
|
+
pages.push(1);
|
|
4899
|
+
if (current > sibling + 3) {
|
|
4900
|
+
pages.push('ellipsis-start');
|
|
4901
|
+
}
|
|
4902
|
+
}
|
|
4903
|
+
// Calculate start and end of page range
|
|
4904
|
+
const start = Math.max(1, current - sibling);
|
|
4905
|
+
const end = Math.min(total, current + sibling);
|
|
4906
|
+
// Add page numbers in range
|
|
4907
|
+
for (let i = start; i <= end; i++) {
|
|
4908
|
+
pages.push(i);
|
|
4909
|
+
}
|
|
4910
|
+
// Always show last page if not already included
|
|
4911
|
+
if (this.showFirstLast && current < total - sibling - 1) {
|
|
4912
|
+
if (current < total - sibling - 2) {
|
|
4913
|
+
pages.push('ellipsis-end');
|
|
4914
|
+
}
|
|
4915
|
+
pages.push(total);
|
|
4916
|
+
}
|
|
4917
|
+
return pages;
|
|
4918
|
+
}, ...(ngDevMode ? [{ debugName: "pageNumbers" }] : []));
|
|
4919
|
+
get paginationClasses() {
|
|
4920
|
+
return [
|
|
4921
|
+
'sefin-pagination',
|
|
4922
|
+
`sefin-pagination--${this.size}`,
|
|
4923
|
+
`sefin-pagination--${this.variant}`,
|
|
4924
|
+
this.class,
|
|
4925
|
+
]
|
|
4926
|
+
.filter(Boolean)
|
|
4927
|
+
.join(' ');
|
|
4928
|
+
}
|
|
4929
|
+
isDisabled(direction) {
|
|
4930
|
+
if (direction === 'prev') {
|
|
4931
|
+
return this.currentPage <= 1;
|
|
4932
|
+
}
|
|
4933
|
+
return this.currentPage >= this.computedTotalPages();
|
|
4934
|
+
}
|
|
4935
|
+
goToPage(page) {
|
|
4936
|
+
if (typeof page === 'number') {
|
|
4937
|
+
const validPage = Math.max(1, Math.min(page, this.computedTotalPages()));
|
|
4938
|
+
if (validPage !== this.currentPage) {
|
|
4939
|
+
this._currentPage.set(validPage);
|
|
4940
|
+
this.pageChange.emit(validPage);
|
|
4941
|
+
}
|
|
4942
|
+
}
|
|
4943
|
+
}
|
|
4944
|
+
goToPrevious() {
|
|
4945
|
+
if (!this.isDisabled('prev')) {
|
|
4946
|
+
this.goToPage(this.currentPage - 1);
|
|
4947
|
+
}
|
|
4948
|
+
}
|
|
4949
|
+
goToNext() {
|
|
4950
|
+
if (!this.isDisabled('next')) {
|
|
4951
|
+
this.goToPage(this.currentPage + 1);
|
|
4952
|
+
}
|
|
4953
|
+
}
|
|
4954
|
+
goToFirst() {
|
|
4955
|
+
if (this.currentPage > 1) {
|
|
4956
|
+
this.goToPage(1);
|
|
4957
|
+
}
|
|
4958
|
+
}
|
|
4959
|
+
goToLast() {
|
|
4960
|
+
const lastPage = this.computedTotalPages();
|
|
4961
|
+
if (this.currentPage < lastPage) {
|
|
4962
|
+
this.goToPage(lastPage);
|
|
4963
|
+
}
|
|
4964
|
+
}
|
|
4965
|
+
isEllipsis(item) {
|
|
4966
|
+
return item === 'ellipsis-start' || item === 'ellipsis-end';
|
|
4967
|
+
}
|
|
4968
|
+
isCurrentPage(page) {
|
|
4969
|
+
return typeof page === 'number' && page === this.currentPage;
|
|
4970
|
+
}
|
|
4971
|
+
getAriaCurrent(page) {
|
|
4972
|
+
return this.isCurrentPage(page) ? 'page' : null;
|
|
4973
|
+
}
|
|
4974
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4975
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: PaginationComponent, isStandalone: true, selector: "sefin-pagination", inputs: { currentPage: "currentPage", totalPages: "totalPages", totalItems: "totalItems", itemsPerPage: "itemsPerPage", siblingCount: "siblingCount", showFirstLast: "showFirstLast", showPrevNext: "showPrevNext", size: "size", variant: "variant", class: "class" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<nav [class]=\"paginationClasses\" aria-label=\"Pagination Navigation\">\n <ul class=\"sefin-pagination__list\">\n <!-- First button -->\n <li *ngIf=\"showFirstLast\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"currentPage <= 1\"\n (click)=\"goToFirst()\"\n aria-label=\"Go to first page\"\n [attr.aria-disabled]=\"currentPage <= 1\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M11 17L6 12L11 7M18 17L13 12L18 7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Previous button -->\n <li *ngIf=\"showPrevNext\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"isDisabled('prev')\"\n (click)=\"goToPrevious()\"\n aria-label=\"Go to previous page\"\n [attr.aria-disabled]=\"isDisabled('prev')\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M15 18L9 12L15 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Page numbers -->\n <li\n *ngFor=\"let page of pageNumbers(); let i = index\"\n class=\"sefin-pagination__item\"\n >\n <ng-container *ngIf=\"isEllipsis(page); else pageButton\">\n <span class=\"sefin-pagination__ellipsis\" aria-hidden=\"true\">...</span>\n </ng-container>\n <ng-template #pageButton>\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--page\"\n [class.sefin-pagination__button--active]=\"isCurrentPage(page)\"\n (click)=\"goToPage(page)\"\n [attr.aria-label]=\"'Go to page ' + page\"\n [attr.aria-current]=\"getAriaCurrent(page)\"\n >\n {{ page }}\n </button>\n </ng-template>\n </li>\n\n <!-- Next button -->\n <li *ngIf=\"showPrevNext\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"isDisabled('next')\"\n (click)=\"goToNext()\"\n aria-label=\"Go to next page\"\n [attr.aria-disabled]=\"isDisabled('next')\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9 18L15 12L9 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Last button -->\n <li *ngIf=\"showFirstLast\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"currentPage >= computedTotalPages()\"\n (click)=\"goToLast()\"\n aria-label=\"Go to last page\"\n [attr.aria-disabled]=\"currentPage >= computedTotalPages()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M13 17L18 12L13 7M6 17L11 12L6 7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n </ul>\n</nav>\n", styles: [".sefin-pagination{display:inline-flex;font-family:var(--sefin-font-family-base)}.sefin-pagination__list{display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);list-style:none;margin:0;padding:0}.sefin-pagination__item{display:inline-flex;align-items:center}.sefin-pagination__button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border:1px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);color:var(--sefin-color-text);cursor:pointer;outline:none;transition:all .2s ease-in-out;border-radius:var(--sefin-radius-md);-webkit-user-select:none;user-select:none}.sefin-pagination__button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-pagination__button:hover:not(:disabled):not(.sefin-pagination__button--active){background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-primary);color:var(--sefin-color-primary)}.sefin-pagination__button:active:not(:disabled){transform:translateY(1px)}.sefin-pagination__button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-pagination__button--page{min-width:40px;text-align:center}.sefin-pagination__button--active{background-color:var(--sefin-color-primary);border-color:var(--sefin-color-primary);color:#fff;font-weight:var(--sefin-font-weight-semibold)}.sefin-pagination__button--active:hover{background-color:var(--sefin-color-primary-dark);border-color:var(--sefin-color-primary-dark);color:#fff}.sefin-pagination__button--nav{padding:0}.sefin-pagination__button svg{display:block;width:16px;height:16px;flex-shrink:0}.sefin-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;color:var(--sefin-color-text-secondary);padding:0 var(--sefin-spacing-sm, 8px);-webkit-user-select:none;user-select:none;min-width:40px}.sefin-pagination--sm .sefin-pagination__button{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, 14px);min-height:32px}.sefin-pagination--sm .sefin-pagination__button--page{min-width:32px}.sefin-pagination--sm .sefin-pagination__button svg{width:14px;height:14px}.sefin-pagination--sm .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-sm, 14px);min-width:32px}.sefin-pagination--md .sefin-pagination__button{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-base, 16px);min-height:40px}.sefin-pagination--md .sefin-pagination__button--page{min-width:40px}.sefin-pagination--md .sefin-pagination__button svg{width:16px;height:16px}.sefin-pagination--md .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-base, 16px);min-width:40px}.sefin-pagination--lg .sefin-pagination__button{padding:var(--sefin-spacing-md, 16px) var(--sefin-spacing-lg, 24px);font-size:var(--sefin-font-size-lg, 18px);min-height:48px}.sefin-pagination--lg .sefin-pagination__button--page{min-width:48px}.sefin-pagination--lg .sefin-pagination__button svg{width:18px;height:18px}.sefin-pagination--lg .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-lg, 18px);min-width:48px}.sefin-pagination--compact .sefin-pagination__button--page{min-width:auto;padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-pagination--compact .sefin-pagination__ellipsis{min-width:auto;padding:0 var(--sefin-spacing-xs, 4px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4976
|
+
}
|
|
4977
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
4978
|
+
type: Component,
|
|
4979
|
+
args: [{ selector: 'sefin-pagination', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [class]=\"paginationClasses\" aria-label=\"Pagination Navigation\">\n <ul class=\"sefin-pagination__list\">\n <!-- First button -->\n <li *ngIf=\"showFirstLast\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"currentPage <= 1\"\n (click)=\"goToFirst()\"\n aria-label=\"Go to first page\"\n [attr.aria-disabled]=\"currentPage <= 1\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M11 17L6 12L11 7M18 17L13 12L18 7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Previous button -->\n <li *ngIf=\"showPrevNext\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"isDisabled('prev')\"\n (click)=\"goToPrevious()\"\n aria-label=\"Go to previous page\"\n [attr.aria-disabled]=\"isDisabled('prev')\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M15 18L9 12L15 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Page numbers -->\n <li\n *ngFor=\"let page of pageNumbers(); let i = index\"\n class=\"sefin-pagination__item\"\n >\n <ng-container *ngIf=\"isEllipsis(page); else pageButton\">\n <span class=\"sefin-pagination__ellipsis\" aria-hidden=\"true\">...</span>\n </ng-container>\n <ng-template #pageButton>\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--page\"\n [class.sefin-pagination__button--active]=\"isCurrentPage(page)\"\n (click)=\"goToPage(page)\"\n [attr.aria-label]=\"'Go to page ' + page\"\n [attr.aria-current]=\"getAriaCurrent(page)\"\n >\n {{ page }}\n </button>\n </ng-template>\n </li>\n\n <!-- Next button -->\n <li *ngIf=\"showPrevNext\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"isDisabled('next')\"\n (click)=\"goToNext()\"\n aria-label=\"Go to next page\"\n [attr.aria-disabled]=\"isDisabled('next')\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9 18L15 12L9 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n\n <!-- Last button -->\n <li *ngIf=\"showFirstLast\" class=\"sefin-pagination__item\">\n <button\n type=\"button\"\n class=\"sefin-pagination__button sefin-pagination__button--nav\"\n [disabled]=\"currentPage >= computedTotalPages()\"\n (click)=\"goToLast()\"\n aria-label=\"Go to last page\"\n [attr.aria-disabled]=\"currentPage >= computedTotalPages()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M13 17L18 12L13 7M6 17L11 12L6 7\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </li>\n </ul>\n</nav>\n", styles: [".sefin-pagination{display:inline-flex;font-family:var(--sefin-font-family-base)}.sefin-pagination__list{display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);list-style:none;margin:0;padding:0}.sefin-pagination__item{display:inline-flex;align-items:center}.sefin-pagination__button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border:1px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);color:var(--sefin-color-text);cursor:pointer;outline:none;transition:all .2s ease-in-out;border-radius:var(--sefin-radius-md);-webkit-user-select:none;user-select:none}.sefin-pagination__button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-pagination__button:hover:not(:disabled):not(.sefin-pagination__button--active){background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-primary);color:var(--sefin-color-primary)}.sefin-pagination__button:active:not(:disabled){transform:translateY(1px)}.sefin-pagination__button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-pagination__button--page{min-width:40px;text-align:center}.sefin-pagination__button--active{background-color:var(--sefin-color-primary);border-color:var(--sefin-color-primary);color:#fff;font-weight:var(--sefin-font-weight-semibold)}.sefin-pagination__button--active:hover{background-color:var(--sefin-color-primary-dark);border-color:var(--sefin-color-primary-dark);color:#fff}.sefin-pagination__button--nav{padding:0}.sefin-pagination__button svg{display:block;width:16px;height:16px;flex-shrink:0}.sefin-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;color:var(--sefin-color-text-secondary);padding:0 var(--sefin-spacing-sm, 8px);-webkit-user-select:none;user-select:none;min-width:40px}.sefin-pagination--sm .sefin-pagination__button{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, 14px);min-height:32px}.sefin-pagination--sm .sefin-pagination__button--page{min-width:32px}.sefin-pagination--sm .sefin-pagination__button svg{width:14px;height:14px}.sefin-pagination--sm .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-sm, 14px);min-width:32px}.sefin-pagination--md .sefin-pagination__button{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-base, 16px);min-height:40px}.sefin-pagination--md .sefin-pagination__button--page{min-width:40px}.sefin-pagination--md .sefin-pagination__button svg{width:16px;height:16px}.sefin-pagination--md .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-base, 16px);min-width:40px}.sefin-pagination--lg .sefin-pagination__button{padding:var(--sefin-spacing-md, 16px) var(--sefin-spacing-lg, 24px);font-size:var(--sefin-font-size-lg, 18px);min-height:48px}.sefin-pagination--lg .sefin-pagination__button--page{min-width:48px}.sefin-pagination--lg .sefin-pagination__button svg{width:18px;height:18px}.sefin-pagination--lg .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-lg, 18px);min-width:48px}.sefin-pagination--compact .sefin-pagination__button--page{min-width:auto;padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-pagination--compact .sefin-pagination__ellipsis{min-width:auto;padding:0 var(--sefin-spacing-xs, 4px)}\n"] }]
|
|
4980
|
+
}], propDecorators: { currentPage: [{
|
|
4981
|
+
type: Input
|
|
4982
|
+
}], totalPages: [{
|
|
4983
|
+
type: Input
|
|
4984
|
+
}], totalItems: [{
|
|
4985
|
+
type: Input
|
|
4986
|
+
}], itemsPerPage: [{
|
|
4987
|
+
type: Input
|
|
4988
|
+
}], siblingCount: [{
|
|
4989
|
+
type: Input
|
|
4990
|
+
}], showFirstLast: [{
|
|
4991
|
+
type: Input
|
|
4992
|
+
}], showPrevNext: [{
|
|
4993
|
+
type: Input
|
|
4994
|
+
}], size: [{
|
|
4995
|
+
type: Input
|
|
4996
|
+
}], variant: [{
|
|
4997
|
+
type: Input
|
|
4998
|
+
}], class: [{
|
|
4999
|
+
type: Input
|
|
5000
|
+
}], pageChange: [{
|
|
5001
|
+
type: Output
|
|
5002
|
+
}] } });
|
|
5003
|
+
|
|
5004
|
+
class TextareaComponent {
|
|
5005
|
+
textareaRef;
|
|
5006
|
+
/** Textarea variant style. Options: 'outlined' | 'filled' | 'standard' */
|
|
5007
|
+
variant = 'outlined';
|
|
5008
|
+
/** Textarea size. Options: 'sm' | 'md' | 'lg' */
|
|
5009
|
+
size = 'md';
|
|
5010
|
+
/** Placeholder text */
|
|
5011
|
+
placeholder = '';
|
|
5012
|
+
/** Helper text shown below the textarea */
|
|
5013
|
+
hint = '';
|
|
5014
|
+
/** Error message to display */
|
|
5015
|
+
errorMessage = '';
|
|
5016
|
+
/** Whether the field is required */
|
|
5017
|
+
required = false;
|
|
5018
|
+
/** Whether the field is disabled */
|
|
5019
|
+
disabled = false;
|
|
5020
|
+
/** Whether the field is readonly */
|
|
5021
|
+
readonly = false;
|
|
5022
|
+
/** Maximum length of the input */
|
|
5023
|
+
maxLength;
|
|
5024
|
+
/** Minimum length of the input */
|
|
5025
|
+
minLength;
|
|
5026
|
+
/** Pattern for validation (regex string) */
|
|
5027
|
+
pattern;
|
|
5028
|
+
/** Number of visible text lines */
|
|
5029
|
+
rows = 4;
|
|
5030
|
+
/** Number of visible text columns */
|
|
5031
|
+
cols;
|
|
5032
|
+
/** Whether to auto-resize based on content */
|
|
5033
|
+
autoResize = false;
|
|
5034
|
+
/** Minimum height when auto-resize is enabled */
|
|
5035
|
+
minHeight;
|
|
5036
|
+
/** Maximum height when auto-resize is enabled */
|
|
5037
|
+
maxHeight;
|
|
5038
|
+
/** Whether to show character counter */
|
|
5039
|
+
showCounter = false;
|
|
5040
|
+
/** Autocomplete attribute */
|
|
5041
|
+
autocomplete;
|
|
5042
|
+
/** Textarea name attribute */
|
|
5043
|
+
name = '';
|
|
5044
|
+
/** Textarea id attribute */
|
|
5045
|
+
id = '';
|
|
5046
|
+
/** Additional CSS classes */
|
|
5047
|
+
class = '';
|
|
5048
|
+
/** Custom validation function */
|
|
5049
|
+
customValidator;
|
|
5050
|
+
/** Initial value for the textarea (for non-reactive forms) */
|
|
5051
|
+
set value(val) {
|
|
5052
|
+
this._value = val || '';
|
|
5053
|
+
if (this.textareaRef?.nativeElement) {
|
|
5054
|
+
this.textareaRef.nativeElement.value = this._value;
|
|
5055
|
+
if (this.autoResize) {
|
|
5056
|
+
setTimeout(() => this.adjustHeight(), 0);
|
|
5057
|
+
}
|
|
5058
|
+
}
|
|
5059
|
+
this.validateField();
|
|
5060
|
+
}
|
|
5061
|
+
get value() {
|
|
5062
|
+
return this._value;
|
|
5063
|
+
}
|
|
5064
|
+
/** Event emitted when the value changes */
|
|
5065
|
+
valueChange = new EventEmitter();
|
|
5066
|
+
/** Event emitted when the textarea is focused */
|
|
5067
|
+
focused = new EventEmitter();
|
|
5068
|
+
/** Event emitted when the textarea is blurred */
|
|
5069
|
+
blurred = new EventEmitter();
|
|
5070
|
+
_value = '';
|
|
5071
|
+
isFocused = false;
|
|
5072
|
+
hasError = false;
|
|
5073
|
+
internalErrorMessage = '';
|
|
5074
|
+
currentHeight = 0;
|
|
5075
|
+
onChange = (value) => { };
|
|
5076
|
+
onTouched = () => { };
|
|
5077
|
+
destroy$ = new Subject();
|
|
5078
|
+
control;
|
|
5079
|
+
ngOnInit() {
|
|
5080
|
+
this.generateIdIfNeeded();
|
|
5081
|
+
}
|
|
5082
|
+
ngAfterViewInit() {
|
|
5083
|
+
if (this.textareaRef?.nativeElement) {
|
|
5084
|
+
// Set initial value if provided
|
|
5085
|
+
if (this._value) {
|
|
5086
|
+
this.textareaRef.nativeElement.value = this._value;
|
|
4601
5087
|
}
|
|
4602
5088
|
// Initialize auto-resize if enabled
|
|
4603
5089
|
if (this.autoResize) {
|
|
@@ -4893,6 +5379,711 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
4893
5379
|
* Molecules index
|
|
4894
5380
|
*/
|
|
4895
5381
|
|
|
5382
|
+
/**
|
|
5383
|
+
* SVG icon paths for sort indicators
|
|
5384
|
+
*/
|
|
5385
|
+
const SORT_ICONS = {
|
|
5386
|
+
unsorted: 'M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5',
|
|
5387
|
+
ascending: 'M3 7.5L6 4.5L9 7.5',
|
|
5388
|
+
descending: 'M3 4.5L6 7.5L9 4.5',
|
|
5389
|
+
};
|
|
5390
|
+
/**
|
|
5391
|
+
* Helper function to build displayed columns array including selection and actions
|
|
5392
|
+
*/
|
|
5393
|
+
function buildDisplayedColumns(columns, selectable, hasActions) {
|
|
5394
|
+
const displayedColumns = [];
|
|
5395
|
+
if (selectable) {
|
|
5396
|
+
displayedColumns.push('select');
|
|
5397
|
+
}
|
|
5398
|
+
displayedColumns.push(...columns.map((col) => col.key));
|
|
5399
|
+
if (hasActions) {
|
|
5400
|
+
displayedColumns.push('actions');
|
|
5401
|
+
}
|
|
5402
|
+
return displayedColumns;
|
|
5403
|
+
}
|
|
5404
|
+
class TableComponent {
|
|
5405
|
+
cdr;
|
|
5406
|
+
/** Column definitions */
|
|
5407
|
+
columns = [];
|
|
5408
|
+
/** Table data */
|
|
5409
|
+
data = [];
|
|
5410
|
+
/** Property key used for tracking rows (default: 'id') */
|
|
5411
|
+
trackByKey = 'id';
|
|
5412
|
+
/** Loading state */
|
|
5413
|
+
loading = false;
|
|
5414
|
+
/** Empty state message */
|
|
5415
|
+
emptyText = 'No data available';
|
|
5416
|
+
/** Table density */
|
|
5417
|
+
density = 'comfortable';
|
|
5418
|
+
/** Striped rows */
|
|
5419
|
+
striped = false;
|
|
5420
|
+
/** Row hover effect */
|
|
5421
|
+
hover = false;
|
|
5422
|
+
/** Enable row selection */
|
|
5423
|
+
selectable = false;
|
|
5424
|
+
/** Selection mode: 'single' or 'multiple' */
|
|
5425
|
+
selectionMode = 'multiple';
|
|
5426
|
+
/** Enable pagination */
|
|
5427
|
+
pagination = false;
|
|
5428
|
+
/** Page size options */
|
|
5429
|
+
pageSizeOptions = [10, 25, 50];
|
|
5430
|
+
/** Current page size */
|
|
5431
|
+
pageSize = 10;
|
|
5432
|
+
/** Total items (for server-side mode) */
|
|
5433
|
+
total;
|
|
5434
|
+
/** Enable sorting */
|
|
5435
|
+
sort = false;
|
|
5436
|
+
/** Server-side mode (don't slice data locally) */
|
|
5437
|
+
serverSide = false;
|
|
5438
|
+
/** Sticky header */
|
|
5439
|
+
stickyHeader = false;
|
|
5440
|
+
/** Header actions template slot */
|
|
5441
|
+
headerActionsTemplate;
|
|
5442
|
+
/** Empty state icon template slot */
|
|
5443
|
+
emptyIconTemplate;
|
|
5444
|
+
/** Row clicked event */
|
|
5445
|
+
rowClicked = new EventEmitter();
|
|
5446
|
+
/** Selection changed event */
|
|
5447
|
+
selectionChanged = new EventEmitter();
|
|
5448
|
+
/** Page changed event */
|
|
5449
|
+
pageChanged = new EventEmitter();
|
|
5450
|
+
/** Sort changed event */
|
|
5451
|
+
sortChanged = new EventEmitter();
|
|
5452
|
+
selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
|
|
5453
|
+
currentSortColumn = signal('', ...(ngDevMode ? [{ debugName: "currentSortColumn" }] : []));
|
|
5454
|
+
currentSortDirection = signal('', ...(ngDevMode ? [{ debugName: "currentSortDirection" }] : []));
|
|
5455
|
+
currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
|
|
5456
|
+
currentPageSize = signal(this.pageSize, ...(ngDevMode ? [{ debugName: "currentPageSize" }] : []));
|
|
5457
|
+
// Computed sorted and paginated data
|
|
5458
|
+
sortedData = computed(() => {
|
|
5459
|
+
// Early returns for performance
|
|
5460
|
+
if (!this.sort || !this.currentSortColumn() || this.serverSide) {
|
|
5461
|
+
return this.data;
|
|
5462
|
+
}
|
|
5463
|
+
const column = this.columns.find((col) => col.key === this.currentSortColumn());
|
|
5464
|
+
if (!column || !column.sortable) {
|
|
5465
|
+
return this.data;
|
|
5466
|
+
}
|
|
5467
|
+
const direction = this.currentSortDirection();
|
|
5468
|
+
if (!direction) {
|
|
5469
|
+
return this.data;
|
|
5470
|
+
}
|
|
5471
|
+
// Early return if no data to sort
|
|
5472
|
+
if (!this.data || this.data.length === 0) {
|
|
5473
|
+
return this.data;
|
|
5474
|
+
}
|
|
5475
|
+
// Create a copy to avoid mutating original data
|
|
5476
|
+
const sorted = [...this.data].sort((a, b) => {
|
|
5477
|
+
const aValue = this.getCellValue(a, column);
|
|
5478
|
+
const bValue = this.getCellValue(b, column);
|
|
5479
|
+
// Handle null/undefined values - place them at the end
|
|
5480
|
+
if (aValue === null || aValue === undefined) {
|
|
5481
|
+
return 1;
|
|
5482
|
+
}
|
|
5483
|
+
if (bValue === null || bValue === undefined) {
|
|
5484
|
+
return -1;
|
|
5485
|
+
}
|
|
5486
|
+
let comparison = 0;
|
|
5487
|
+
if (column.type === 'number') {
|
|
5488
|
+
const aNum = typeof aValue === 'number' ? aValue : Number(aValue);
|
|
5489
|
+
const bNum = typeof bValue === 'number' ? bValue : Number(bValue);
|
|
5490
|
+
comparison = (isNaN(aNum) ? 0 : aNum) - (isNaN(bNum) ? 0 : bNum);
|
|
5491
|
+
}
|
|
5492
|
+
else if (column.type === 'date') {
|
|
5493
|
+
const aDate = this.parseDate(aValue);
|
|
5494
|
+
const bDate = this.parseDate(bValue);
|
|
5495
|
+
// Handle invalid dates
|
|
5496
|
+
const aTime = isNaN(aDate.getTime()) ? 0 : aDate.getTime();
|
|
5497
|
+
const bTime = isNaN(bDate.getTime()) ? 0 : bDate.getTime();
|
|
5498
|
+
comparison = aTime - bTime;
|
|
5499
|
+
}
|
|
5500
|
+
else {
|
|
5501
|
+
// Use locale-aware string comparison for better internationalization
|
|
5502
|
+
const aStr = String(aValue || '').trim();
|
|
5503
|
+
const bStr = String(bValue || '').trim();
|
|
5504
|
+
comparison = aStr.localeCompare(bStr, undefined, {
|
|
5505
|
+
sensitivity: 'base',
|
|
5506
|
+
numeric: true,
|
|
5507
|
+
});
|
|
5508
|
+
}
|
|
5509
|
+
return direction === 'asc' ? comparison : -comparison;
|
|
5510
|
+
});
|
|
5511
|
+
return sorted;
|
|
5512
|
+
}, ...(ngDevMode ? [{ debugName: "sortedData" }] : []));
|
|
5513
|
+
paginatedData = computed(() => {
|
|
5514
|
+
if (this.serverSide || !this.pagination) {
|
|
5515
|
+
return this.sortedData();
|
|
5516
|
+
}
|
|
5517
|
+
const startIndex = (this.currentPage() - 1) * this.currentPageSize();
|
|
5518
|
+
const endIndex = startIndex + this.currentPageSize();
|
|
5519
|
+
return this.sortedData().slice(startIndex, endIndex);
|
|
5520
|
+
}, ...(ngDevMode ? [{ debugName: "paginatedData" }] : []));
|
|
5521
|
+
displayedData = computed(() => {
|
|
5522
|
+
// Directly return paginated data (no need for intermediate computation)
|
|
5523
|
+
return this.paginatedData();
|
|
5524
|
+
}, ...(ngDevMode ? [{ debugName: "displayedData" }] : []));
|
|
5525
|
+
totalPages = computed(() => {
|
|
5526
|
+
if (this.serverSide && this.total !== undefined) {
|
|
5527
|
+
return Math.ceil(this.total / this.currentPageSize());
|
|
5528
|
+
}
|
|
5529
|
+
return Math.ceil(this.sortedData().length / this.currentPageSize());
|
|
5530
|
+
}, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
|
|
5531
|
+
isEmpty = computed(() => {
|
|
5532
|
+
return !this.loading && this.displayedData().length === 0;
|
|
5533
|
+
}, ...(ngDevMode ? [{ debugName: "isEmpty" }] : []));
|
|
5534
|
+
hasActionsColumn = computed(() => {
|
|
5535
|
+
return this.columns.some((col) => col.type === 'actions');
|
|
5536
|
+
}, ...(ngDevMode ? [{ debugName: "hasActionsColumn" }] : []));
|
|
5537
|
+
totalColspan = computed(() => {
|
|
5538
|
+
const selectableCol = this.selectable ? 1 : 0;
|
|
5539
|
+
const actionsCol = this.hasActionsColumn() ? 1 : 0;
|
|
5540
|
+
return selectableCol + this.columns.length + actionsCol;
|
|
5541
|
+
}, ...(ngDevMode ? [{ debugName: "totalColspan" }] : []));
|
|
5542
|
+
isAllSelected = computed(() => {
|
|
5543
|
+
if (!this.selectable || this.selectionMode === 'single') {
|
|
5544
|
+
return false;
|
|
5545
|
+
}
|
|
5546
|
+
const currentPageData = this.displayedData();
|
|
5547
|
+
if (currentPageData.length === 0) {
|
|
5548
|
+
return false;
|
|
5549
|
+
}
|
|
5550
|
+
const currentPageIds = new Set(currentPageData.map((row) => this.getItemId(row)));
|
|
5551
|
+
const selectedItems = this.selectedItems();
|
|
5552
|
+
const selectedInPage = selectedItems.filter((item) => currentPageIds.has(this.getItemId(item)));
|
|
5553
|
+
return selectedInPage.length === currentPageData.length;
|
|
5554
|
+
}, ...(ngDevMode ? [{ debugName: "isAllSelected" }] : []));
|
|
5555
|
+
isIndeterminate = computed(() => {
|
|
5556
|
+
if (!this.selectable || this.selectionMode === 'single') {
|
|
5557
|
+
return false;
|
|
5558
|
+
}
|
|
5559
|
+
const currentPageData = this.displayedData();
|
|
5560
|
+
if (currentPageData.length === 0) {
|
|
5561
|
+
return false;
|
|
5562
|
+
}
|
|
5563
|
+
const currentPageIds = new Set(currentPageData.map((row) => this.getItemId(row)));
|
|
5564
|
+
const selectedItems = this.selectedItems();
|
|
5565
|
+
const selectedInPage = selectedItems.filter((item) => currentPageIds.has(this.getItemId(item)));
|
|
5566
|
+
return (selectedInPage.length > 0 &&
|
|
5567
|
+
selectedInPage.length < currentPageData.length);
|
|
5568
|
+
}, ...(ngDevMode ? [{ debugName: "isIndeterminate" }] : []));
|
|
5569
|
+
// Expose sort icons to template
|
|
5570
|
+
sortIcons = SORT_ICONS;
|
|
5571
|
+
constructor(cdr) {
|
|
5572
|
+
this.cdr = cdr;
|
|
5573
|
+
}
|
|
5574
|
+
ngOnInit() {
|
|
5575
|
+
this.currentPageSize.set(this.pageSize);
|
|
5576
|
+
this.validateInputs();
|
|
5577
|
+
}
|
|
5578
|
+
ngOnChanges(changes) {
|
|
5579
|
+
if (changes['pageSize']) {
|
|
5580
|
+
const newPageSize = changes['pageSize'].currentValue;
|
|
5581
|
+
if (newPageSize && newPageSize > 0) {
|
|
5582
|
+
this.currentPageSize.set(newPageSize);
|
|
5583
|
+
}
|
|
5584
|
+
}
|
|
5585
|
+
if (changes['data'] && this.serverSide) {
|
|
5586
|
+
this.cdr.markForCheck();
|
|
5587
|
+
}
|
|
5588
|
+
if (changes['columns'] || changes['data']) {
|
|
5589
|
+
this.validateInputs();
|
|
5590
|
+
}
|
|
5591
|
+
}
|
|
5592
|
+
/**
|
|
5593
|
+
* Validates component inputs and logs warnings for invalid configurations
|
|
5594
|
+
* @private
|
|
5595
|
+
*/
|
|
5596
|
+
validateInputs() {
|
|
5597
|
+
if (this.columns && this.columns.length > 0) {
|
|
5598
|
+
// Check for duplicate column keys
|
|
5599
|
+
const keys = this.columns.map((col) => col.key);
|
|
5600
|
+
const duplicates = keys.filter((key, index) => keys.indexOf(key) !== index);
|
|
5601
|
+
if (duplicates.length > 0) {
|
|
5602
|
+
console.warn(`[sefin-table] Duplicate column keys detected: ${duplicates.join(', ')}`);
|
|
5603
|
+
}
|
|
5604
|
+
// Check for columns with sortable=true but sort=false
|
|
5605
|
+
const sortableColumns = this.columns.filter((col) => col.sortable);
|
|
5606
|
+
if (sortableColumns.length > 0 && !this.sort) {
|
|
5607
|
+
console.warn(`[sefin-table] Columns with sortable=true found but sort input is false. Sorting will be disabled.`);
|
|
5608
|
+
}
|
|
5609
|
+
}
|
|
5610
|
+
if (this.selectable && this.selectionMode === 'multiple' && !this.trackByKey) {
|
|
5611
|
+
console.warn(`[sefin-table] selectable is true but trackByKey is not set. Row selection may not work correctly.`);
|
|
5612
|
+
}
|
|
5613
|
+
if (this.pagination && this.pageSize <= 0) {
|
|
5614
|
+
console.warn(`[sefin-table] pagination is enabled but pageSize is ${this.pageSize}. Using default value of 10.`);
|
|
5615
|
+
}
|
|
5616
|
+
}
|
|
5617
|
+
trackByFn(index, item) {
|
|
5618
|
+
return item[this.trackByKey] !== undefined ? item[this.trackByKey] : index;
|
|
5619
|
+
}
|
|
5620
|
+
/**
|
|
5621
|
+
* Gets the cell value from a row, supporting nested property paths (e.g., 'user.name')
|
|
5622
|
+
* @param row - The row data object
|
|
5623
|
+
* @param column - The column definition
|
|
5624
|
+
* @returns The cell value or undefined if not found
|
|
5625
|
+
*/
|
|
5626
|
+
getCellValue(row, column) {
|
|
5627
|
+
if (!row || !column?.key) {
|
|
5628
|
+
return undefined;
|
|
5629
|
+
}
|
|
5630
|
+
// Support nested property paths (e.g., 'user.name' or 'address.street')
|
|
5631
|
+
const keys = column.key.split('.');
|
|
5632
|
+
let value = row;
|
|
5633
|
+
for (const key of keys) {
|
|
5634
|
+
if (value === null || value === undefined) {
|
|
5635
|
+
return undefined;
|
|
5636
|
+
}
|
|
5637
|
+
value = value[key];
|
|
5638
|
+
}
|
|
5639
|
+
return value;
|
|
5640
|
+
}
|
|
5641
|
+
/**
|
|
5642
|
+
* Formats a cell value based on its type
|
|
5643
|
+
* @param value - The value to format
|
|
5644
|
+
* @param type - The column type
|
|
5645
|
+
* @param column - Optional column definition for additional formatting options
|
|
5646
|
+
* @returns Formatted string representation
|
|
5647
|
+
*/
|
|
5648
|
+
formatCellValue(value, type, column) {
|
|
5649
|
+
if (value === null || value === undefined) {
|
|
5650
|
+
return '';
|
|
5651
|
+
}
|
|
5652
|
+
if (type === 'number') {
|
|
5653
|
+
if (typeof value === 'number') {
|
|
5654
|
+
// Use locale-aware number formatting
|
|
5655
|
+
return value.toLocaleString(undefined, {
|
|
5656
|
+
minimumFractionDigits: 0,
|
|
5657
|
+
maximumFractionDigits: 2,
|
|
5658
|
+
});
|
|
5659
|
+
}
|
|
5660
|
+
// Try to parse string numbers
|
|
5661
|
+
const numValue = Number(value);
|
|
5662
|
+
return !isNaN(numValue) ? numValue.toLocaleString() : String(value);
|
|
5663
|
+
}
|
|
5664
|
+
if (type === 'date') {
|
|
5665
|
+
const date = this.parseDate(value);
|
|
5666
|
+
if (!isNaN(date.getTime())) {
|
|
5667
|
+
// Use locale-aware date formatting
|
|
5668
|
+
return date.toLocaleDateString(undefined, {
|
|
5669
|
+
year: 'numeric',
|
|
5670
|
+
month: 'short',
|
|
5671
|
+
day: 'numeric',
|
|
5672
|
+
});
|
|
5673
|
+
}
|
|
5674
|
+
// If date parsing fails, return original value as string
|
|
5675
|
+
return String(value);
|
|
5676
|
+
}
|
|
5677
|
+
return String(value);
|
|
5678
|
+
}
|
|
5679
|
+
/**
|
|
5680
|
+
* Parses a value into a Date object
|
|
5681
|
+
* @param value - The value to parse (Date, string, or number timestamp)
|
|
5682
|
+
* @returns A Date object
|
|
5683
|
+
*/
|
|
5684
|
+
parseDate(value) {
|
|
5685
|
+
if (value instanceof Date) {
|
|
5686
|
+
return value;
|
|
5687
|
+
}
|
|
5688
|
+
if (typeof value === 'string') {
|
|
5689
|
+
const date = new Date(value);
|
|
5690
|
+
// Check if it's a valid date
|
|
5691
|
+
if (!isNaN(date.getTime())) {
|
|
5692
|
+
return date;
|
|
5693
|
+
}
|
|
5694
|
+
}
|
|
5695
|
+
if (typeof value === 'number') {
|
|
5696
|
+
// Assume it's a timestamp
|
|
5697
|
+
return new Date(value);
|
|
5698
|
+
}
|
|
5699
|
+
// Return invalid date as fallback
|
|
5700
|
+
return new Date(NaN);
|
|
5701
|
+
}
|
|
5702
|
+
onRowClick(row) {
|
|
5703
|
+
if (!this.loading) {
|
|
5704
|
+
this.rowClicked.emit(row);
|
|
5705
|
+
}
|
|
5706
|
+
}
|
|
5707
|
+
/**
|
|
5708
|
+
* Handles column sorting when header is clicked
|
|
5709
|
+
* @param column - The column to sort by
|
|
5710
|
+
* @param event - Optional keyboard event for accessibility
|
|
5711
|
+
*/
|
|
5712
|
+
onSort(column, event) {
|
|
5713
|
+
// Handle keyboard events (Enter or Space)
|
|
5714
|
+
if (event && event.key !== 'Enter' && event.key !== ' ') {
|
|
5715
|
+
return;
|
|
5716
|
+
}
|
|
5717
|
+
if (event) {
|
|
5718
|
+
event.preventDefault();
|
|
5719
|
+
event.stopPropagation();
|
|
5720
|
+
}
|
|
5721
|
+
if (!this.sort || !column.sortable || this.loading) {
|
|
5722
|
+
return;
|
|
5723
|
+
}
|
|
5724
|
+
const currentColumn = this.currentSortColumn();
|
|
5725
|
+
const currentDirection = this.currentSortDirection();
|
|
5726
|
+
let newDirection = 'asc';
|
|
5727
|
+
if (currentColumn === column.key) {
|
|
5728
|
+
if (currentDirection === 'asc') {
|
|
5729
|
+
newDirection = 'desc';
|
|
5730
|
+
}
|
|
5731
|
+
else if (currentDirection === 'desc') {
|
|
5732
|
+
newDirection = '';
|
|
5733
|
+
this.currentSortColumn.set('');
|
|
5734
|
+
this.currentSortDirection.set('');
|
|
5735
|
+
const sortEvent = {
|
|
5736
|
+
active: '',
|
|
5737
|
+
direction: '',
|
|
5738
|
+
};
|
|
5739
|
+
this.sortChanged.emit(sortEvent);
|
|
5740
|
+
this.cdr.markForCheck();
|
|
5741
|
+
return;
|
|
5742
|
+
}
|
|
5743
|
+
}
|
|
5744
|
+
this.currentSortColumn.set(column.key);
|
|
5745
|
+
this.currentSortDirection.set(newDirection);
|
|
5746
|
+
const sortEvent = {
|
|
5747
|
+
active: column.key,
|
|
5748
|
+
direction: newDirection,
|
|
5749
|
+
};
|
|
5750
|
+
this.sortChanged.emit(sortEvent);
|
|
5751
|
+
this.cdr.markForCheck();
|
|
5752
|
+
}
|
|
5753
|
+
onPageChange(page) {
|
|
5754
|
+
this.currentPage.set(page);
|
|
5755
|
+
const pageEvent = {
|
|
5756
|
+
pageIndex: page - 1,
|
|
5757
|
+
pageSize: this.currentPageSize(),
|
|
5758
|
+
};
|
|
5759
|
+
this.pageChanged.emit(pageEvent);
|
|
5760
|
+
this.cdr.markForCheck();
|
|
5761
|
+
}
|
|
5762
|
+
isSelected(row) {
|
|
5763
|
+
return this.selectedItems().some((item) => this.getItemId(item) === this.getItemId(row));
|
|
5764
|
+
}
|
|
5765
|
+
/**
|
|
5766
|
+
* Toggles the selection state of a row
|
|
5767
|
+
* @param checked - Whether the row should be selected
|
|
5768
|
+
* @param row - The row to toggle selection for
|
|
5769
|
+
*/
|
|
5770
|
+
toggleRowSelection(checked, row) {
|
|
5771
|
+
if (row === undefined) {
|
|
5772
|
+
return;
|
|
5773
|
+
}
|
|
5774
|
+
if (this.selectionMode === 'single') {
|
|
5775
|
+
// Single selection mode: replace selection
|
|
5776
|
+
this.selectedItems.set(checked ? [row] : []);
|
|
5777
|
+
}
|
|
5778
|
+
else {
|
|
5779
|
+
// Multiple selection mode: add/remove from selection
|
|
5780
|
+
const current = this.selectedItems();
|
|
5781
|
+
const itemId = this.getItemId(row);
|
|
5782
|
+
if (checked) {
|
|
5783
|
+
// Only add if not already selected
|
|
5784
|
+
const isAlreadySelected = current.some((item) => this.getItemId(item) === itemId);
|
|
5785
|
+
if (!isAlreadySelected) {
|
|
5786
|
+
this.selectedItems.set([...current, row]);
|
|
5787
|
+
}
|
|
5788
|
+
}
|
|
5789
|
+
else {
|
|
5790
|
+
// Remove from selection
|
|
5791
|
+
const updated = current.filter((item) => this.getItemId(item) !== itemId);
|
|
5792
|
+
this.selectedItems.set(updated);
|
|
5793
|
+
}
|
|
5794
|
+
}
|
|
5795
|
+
// Emit the updated selection
|
|
5796
|
+
this.selectionChanged.emit([...this.selectedItems()]);
|
|
5797
|
+
this.cdr.markForCheck();
|
|
5798
|
+
}
|
|
5799
|
+
/**
|
|
5800
|
+
* Toggles selection for all rows on the current page
|
|
5801
|
+
* @param checked - Whether all rows should be selected
|
|
5802
|
+
*/
|
|
5803
|
+
toggleSelectAll(checked) {
|
|
5804
|
+
if (this.selectionMode === 'single') {
|
|
5805
|
+
return;
|
|
5806
|
+
}
|
|
5807
|
+
const currentPageData = this.displayedData();
|
|
5808
|
+
if (currentPageData.length === 0) {
|
|
5809
|
+
return;
|
|
5810
|
+
}
|
|
5811
|
+
const selectedItems = this.selectedItems();
|
|
5812
|
+
const selectedIds = new Set(selectedItems.map((item) => this.getItemId(item)));
|
|
5813
|
+
if (checked) {
|
|
5814
|
+
// Add all page items that aren't already selected
|
|
5815
|
+
const newItems = currentPageData.filter((row) => !selectedIds.has(this.getItemId(row)));
|
|
5816
|
+
if (newItems.length > 0) {
|
|
5817
|
+
this.selectedItems.set([...selectedItems, ...newItems]);
|
|
5818
|
+
}
|
|
5819
|
+
}
|
|
5820
|
+
else {
|
|
5821
|
+
// Remove all page items from selection
|
|
5822
|
+
const currentPageIds = new Set(currentPageData.map((row) => this.getItemId(row)));
|
|
5823
|
+
const updated = selectedItems.filter((item) => !currentPageIds.has(this.getItemId(item)));
|
|
5824
|
+
this.selectedItems.set(updated);
|
|
5825
|
+
}
|
|
5826
|
+
this.selectionChanged.emit([...this.selectedItems()]);
|
|
5827
|
+
this.cdr.markForCheck();
|
|
5828
|
+
}
|
|
5829
|
+
/**
|
|
5830
|
+
* Gets the unique identifier for an item using the trackByKey
|
|
5831
|
+
* @param item - The item to get the ID for
|
|
5832
|
+
* @returns The item's ID or the item itself if no ID property exists
|
|
5833
|
+
* @private
|
|
5834
|
+
*/
|
|
5835
|
+
getItemId(item) {
|
|
5836
|
+
if (!item) {
|
|
5837
|
+
return item;
|
|
5838
|
+
}
|
|
5839
|
+
return item[this.trackByKey] !== undefined ? item[this.trackByKey] : item;
|
|
5840
|
+
}
|
|
5841
|
+
/**
|
|
5842
|
+
* Gets CSS classes for a column cell
|
|
5843
|
+
* @param column - The column definition
|
|
5844
|
+
* @returns Space-separated string of CSS classes
|
|
5845
|
+
*/
|
|
5846
|
+
getColumnClass(column) {
|
|
5847
|
+
if (!column) {
|
|
5848
|
+
return '';
|
|
5849
|
+
}
|
|
5850
|
+
const classes = [];
|
|
5851
|
+
if (column.align) {
|
|
5852
|
+
classes.push(`sefin-table__cell--align-${column.align}`);
|
|
5853
|
+
}
|
|
5854
|
+
if (column.sticky) {
|
|
5855
|
+
classes.push('sefin-table__cell--sticky');
|
|
5856
|
+
if (column.stickyEnd) {
|
|
5857
|
+
classes.push('sefin-table__cell--sticky-end');
|
|
5858
|
+
}
|
|
5859
|
+
}
|
|
5860
|
+
return classes.join(' ');
|
|
5861
|
+
}
|
|
5862
|
+
/**
|
|
5863
|
+
* Gets CSS classes for the table element
|
|
5864
|
+
* @returns Space-separated string of CSS classes
|
|
5865
|
+
*/
|
|
5866
|
+
getTableClasses() {
|
|
5867
|
+
const classes = ['sefin-table'];
|
|
5868
|
+
if (this.density === 'compact') {
|
|
5869
|
+
classes.push('sefin-table--density-compact');
|
|
5870
|
+
}
|
|
5871
|
+
if (this.striped) {
|
|
5872
|
+
classes.push('sefin-table--striped');
|
|
5873
|
+
}
|
|
5874
|
+
if (this.hover) {
|
|
5875
|
+
classes.push('sefin-table--hover');
|
|
5876
|
+
}
|
|
5877
|
+
if (this.stickyHeader) {
|
|
5878
|
+
classes.push('sefin-table--sticky-header');
|
|
5879
|
+
}
|
|
5880
|
+
return classes.join(' ');
|
|
5881
|
+
}
|
|
5882
|
+
/**
|
|
5883
|
+
* Gets the width CSS value for a column
|
|
5884
|
+
* @param column - The column definition
|
|
5885
|
+
* @returns The width value or undefined
|
|
5886
|
+
*/
|
|
5887
|
+
getColumnWidth(column) {
|
|
5888
|
+
return column?.width;
|
|
5889
|
+
}
|
|
5890
|
+
/**
|
|
5891
|
+
* Gets the appropriate sort icon path for a column
|
|
5892
|
+
* @param column - The column to get the icon for
|
|
5893
|
+
* @returns The SVG path string for the sort icon
|
|
5894
|
+
*/
|
|
5895
|
+
getSortIconPath(column) {
|
|
5896
|
+
if (!column.sortable || !this.sort) {
|
|
5897
|
+
return '';
|
|
5898
|
+
}
|
|
5899
|
+
const currentColumn = this.currentSortColumn();
|
|
5900
|
+
const currentDirection = this.currentSortDirection();
|
|
5901
|
+
if (currentColumn === column.key) {
|
|
5902
|
+
if (currentDirection === 'asc') {
|
|
5903
|
+
return SORT_ICONS.ascending;
|
|
5904
|
+
}
|
|
5905
|
+
else if (currentDirection === 'desc') {
|
|
5906
|
+
return SORT_ICONS.descending;
|
|
5907
|
+
}
|
|
5908
|
+
}
|
|
5909
|
+
return SORT_ICONS.unsorted;
|
|
5910
|
+
}
|
|
5911
|
+
/**
|
|
5912
|
+
* Determines if a column should show the unsorted icon
|
|
5913
|
+
* @param column - The column to check
|
|
5914
|
+
* @returns True if unsorted icon should be shown
|
|
5915
|
+
*/
|
|
5916
|
+
showUnsortedIcon(column) {
|
|
5917
|
+
if (!column.sortable || !this.sort) {
|
|
5918
|
+
return false;
|
|
5919
|
+
}
|
|
5920
|
+
const currentColumn = this.currentSortColumn();
|
|
5921
|
+
const currentDirection = this.currentSortDirection();
|
|
5922
|
+
return currentColumn !== column.key || currentDirection === '';
|
|
5923
|
+
}
|
|
5924
|
+
/**
|
|
5925
|
+
* Determines if a column should show the ascending icon
|
|
5926
|
+
* @param column - The column to check
|
|
5927
|
+
* @returns True if ascending icon should be shown
|
|
5928
|
+
*/
|
|
5929
|
+
showAscendingIcon(column) {
|
|
5930
|
+
if (!column.sortable || !this.sort) {
|
|
5931
|
+
return false;
|
|
5932
|
+
}
|
|
5933
|
+
return (this.currentSortColumn() === column.key &&
|
|
5934
|
+
this.currentSortDirection() === 'asc');
|
|
5935
|
+
}
|
|
5936
|
+
/**
|
|
5937
|
+
* Determines if a column should show the descending icon
|
|
5938
|
+
* @param column - The column to check
|
|
5939
|
+
* @returns True if descending icon should be shown
|
|
5940
|
+
*/
|
|
5941
|
+
showDescendingIcon(column) {
|
|
5942
|
+
if (!column.sortable || !this.sort) {
|
|
5943
|
+
return false;
|
|
5944
|
+
}
|
|
5945
|
+
return (this.currentSortColumn() === column.key &&
|
|
5946
|
+
this.currentSortDirection() === 'desc');
|
|
5947
|
+
}
|
|
5948
|
+
/**
|
|
5949
|
+
* Gets the ARIA sort state for a column
|
|
5950
|
+
* @param column - The column to get the sort state for
|
|
5951
|
+
* @returns The ARIA sort value ('ascending', 'descending', or 'none')
|
|
5952
|
+
*/
|
|
5953
|
+
getAriaSort(column) {
|
|
5954
|
+
if (!column.sortable || !this.sort) {
|
|
5955
|
+
return 'none';
|
|
5956
|
+
}
|
|
5957
|
+
if (this.currentSortColumn() === column.key) {
|
|
5958
|
+
const direction = this.currentSortDirection();
|
|
5959
|
+
return direction === 'asc' ? 'ascending' : direction === 'desc' ? 'descending' : 'none';
|
|
5960
|
+
}
|
|
5961
|
+
return 'none';
|
|
5962
|
+
}
|
|
5963
|
+
/**
|
|
5964
|
+
* Gets the ARIA label for a sortable column header
|
|
5965
|
+
* @param column - The column to get the label for
|
|
5966
|
+
* @returns The ARIA label string or null if not sortable
|
|
5967
|
+
*/
|
|
5968
|
+
getSortAriaLabel(column) {
|
|
5969
|
+
if (!column.sortable || !this.sort) {
|
|
5970
|
+
return null;
|
|
5971
|
+
}
|
|
5972
|
+
let currentState = 'not sorted';
|
|
5973
|
+
if (this.currentSortColumn() === column.key) {
|
|
5974
|
+
const direction = this.currentSortDirection();
|
|
5975
|
+
if (direction === 'asc') {
|
|
5976
|
+
currentState = 'ascending';
|
|
5977
|
+
}
|
|
5978
|
+
else if (direction === 'desc') {
|
|
5979
|
+
currentState = 'descending';
|
|
5980
|
+
}
|
|
5981
|
+
}
|
|
5982
|
+
return `Sort by ${column.header}. Currently ${currentState}`;
|
|
5983
|
+
}
|
|
5984
|
+
/**
|
|
5985
|
+
* Generates page numbers array for pagination display
|
|
5986
|
+
* This method is currently not used in the template but kept for potential future use
|
|
5987
|
+
* @returns Array of page numbers and ellipsis strings
|
|
5988
|
+
*/
|
|
5989
|
+
getPageNumbers() {
|
|
5990
|
+
const current = this.currentPage();
|
|
5991
|
+
const total = this.totalPages();
|
|
5992
|
+
const pages = [];
|
|
5993
|
+
if (total <= 7) {
|
|
5994
|
+
for (let i = 1; i <= total; i++) {
|
|
5995
|
+
pages.push(i);
|
|
5996
|
+
}
|
|
5997
|
+
}
|
|
5998
|
+
else {
|
|
5999
|
+
if (current <= 3) {
|
|
6000
|
+
for (let i = 1; i <= 4; i++) {
|
|
6001
|
+
pages.push(i);
|
|
6002
|
+
}
|
|
6003
|
+
pages.push('ellipsis');
|
|
6004
|
+
pages.push(total);
|
|
6005
|
+
}
|
|
6006
|
+
else if (current >= total - 2) {
|
|
6007
|
+
pages.push(1);
|
|
6008
|
+
pages.push('ellipsis');
|
|
6009
|
+
for (let i = total - 3; i <= total; i++) {
|
|
6010
|
+
pages.push(i);
|
|
6011
|
+
}
|
|
6012
|
+
}
|
|
6013
|
+
else {
|
|
6014
|
+
pages.push(1);
|
|
6015
|
+
pages.push('ellipsis');
|
|
6016
|
+
for (let i = current - 1; i <= current + 1; i++) {
|
|
6017
|
+
pages.push(i);
|
|
6018
|
+
}
|
|
6019
|
+
pages.push('ellipsis');
|
|
6020
|
+
pages.push(total);
|
|
6021
|
+
}
|
|
6022
|
+
}
|
|
6023
|
+
return pages;
|
|
6024
|
+
}
|
|
6025
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6026
|
+
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\n [class]=\"getTableClasses()\"\n class=\"sefin-table__native-table\"\n role=\"table\"\n [attr.aria-label]=\"'Data table with ' + columns.length + ' columns'\"\n [attr.aria-rowcount]=\"serverSide && total !== undefined ? total : sortedData().length\"\n [attr.aria-colcount]=\"totalColspan()\"\n >\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 (keydown)=\"column.sortable && sort ? onSort(column, $event) : null\"\n [attr.aria-sort]=\"getAriaSort(column)\"\n [attr.aria-label]=\"getSortAriaLabel(column)\"\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 [attr.aria-hidden]=\"true\"\n >\n <svg\n *ngIf=\"showUnsortedIcon(column)\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n [attr.d]=\"sortIcons.unsorted\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"showAscendingIcon(column)\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n [attr.d]=\"sortIcons.ascending\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"showDescendingIcon(column)\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n [attr.d]=\"sortIcons.descending\"\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\" role=\"rowgroup\">\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 [attr.aria-selected]=\"selectable ? isSelected(row) : null\"\n [attr.aria-label]=\"'Row ' + (trackByFn(0, row) || '')\"\n role=\"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, column) }}\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 rgba(0,0,0,.06);border-radius:var(--sefin-radius-lg, 12px);overflow:hidden;box-shadow:0 2px 8px #0000000a,0 1px 2px #00000005;transition:box-shadow .3s ease-in-out,border-color .3s 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);table-layout:auto;min-width:100%}.sefin-table--density-compact .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions),.sefin-table--density-compact .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){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:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions){padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table--density-compact .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding-top:var(--sefin-spacing-xs, 4px);padding-bottom:var(--sefin-spacing-xs, 4px)}.sefin-table--density-compact .sefin-table__header-cell--select,.sefin-table--density-compact .sefin-table__cell--select{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-sm, 8px) var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px)!important}.sefin-table--density-compact .sefin-table__header-cell--actions,.sefin-table--density-compact .sefin-table__cell--actions{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px)!important}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions),.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-lg, 24px);padding-right:var(--sefin-spacing-lg, 24px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions){padding-top:var(--sefin-spacing-lg, 24px);padding-bottom:var(--sefin-spacing-lg, 24px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding-top:var(--sefin-spacing-md, 16px);padding-bottom:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--select,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--select{font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-lg, 24px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--select{padding-top:var(--sefin-spacing-lg, 24px);padding-bottom:var(--sefin-spacing-lg, 24px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--select{padding-top:var(--sefin-spacing-md, 16px);padding-bottom:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--actions,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--actions{font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-lg, 24px);padding-right:var(--sefin-spacing-lg, 24px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--actions{padding-top:var(--sefin-spacing-lg, 24px);padding-bottom:var(--sefin-spacing-lg, 24px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--actions{padding-top:var(--sefin-spacing-md, 16px);padding-bottom:var(--sefin-spacing-md, 16px)}.sefin-table__header{background:linear-gradient(to bottom,#fff,#fafafa);border-bottom:1px solid rgba(0,0,0,.08);position:relative}.sefin-table__header:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent 0%,rgba(0,0,0,.06) 50%,transparent 100%)}.sefin-table__header--sticky{position:sticky;top:0;z-index:3;box-shadow:0 4px 12px #00000014,0 2px 4px #0000000a}.sefin-table__header-row{background:transparent}.sefin-table__header-cell{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-xs, .75rem);color:var(--sefin-color-text-secondary, #6b7280);text-transform:uppercase;letter-spacing:.8px;text-align:left;border-bottom:none;background:transparent;-webkit-user-select:none;user-select:none;transition:background-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1);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;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:#55c3d80f;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8);transform:scale(1.1)}.sefin-table__header-cell--sortable:active{background-color:#55c3d81a}.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:linear-gradient(to bottom,#55c3d814,#55c3d80a)}.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}.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;min-width:14px;color:var(--sefin-color-text-secondary, #9b9b9b);opacity:.5;transition:all .25s cubic-bezier(.4,0,.2,1);flex-shrink:0;margin-left:var(--sefin-spacing-xs, 4px)}.sefin-table__sort-icon svg{display:block;width:100%;height:100%;transition:transform .2s ease-out}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;transform:scale(1.1)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon svg{transform:scale(1.05)}.sefin-table__body{background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row{border-bottom:1px solid rgba(0,0,0,.04);transition:background-color .25s cubic-bezier(.4,0,.2,1),transform .15s ease-out;background-color:var(--sefin-color-surface, #ffffff);position:relative}.sefin-table__row--clickable{cursor:pointer}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty){background-color:#55c3d80a;transform:translateY(-1px);box-shadow:0 2px 4px #00000005}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80a}.sefin-table__row--clickable:active:not(.sefin-table__row--empty){background-color:#55c3d80f;transform:translateY(0);box-shadow:none}.sefin-table__row--clickable:active:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80f}.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);z-index:1}.sefin-table__row:last-child{border-bottom:none}.sefin-table__row[data-animate]{animation:fadeInRow .3s ease-in-out}@keyframes fadeInRow{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.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, #1f2937);border-bottom:none;vertical-align:middle;background-color:inherit;transition:background-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1)}.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;text-align:center}.sefin-table__cell--actions{text-align:right;width:120px}.sefin-table__cell--sticky{position:sticky;background-color:inherit;z-index:1}.sefin-table__cell-content{display:block;line-height:var(--sefin-line-height-relaxed, 1.75);color:var(--sefin-color-text, #1f2937);font-weight:var(--sefin-font-weight-normal, 400);word-wrap:break-word;word-break:break-word;max-width:100%;overflow:hidden;text-overflow:ellipsis;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.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:#f9fafb99}.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:#f9fafb99}.sefin-table--striped .sefin-table__row--clickable:hover,.sefin-table--striped .sefin-table__row--clickable:hover .sefin-table__cell--sticky{background-color:#55c3d80f!important}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover{background-color:#55c3d80a}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80a}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover{background-color:#55c3d80a}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80a}.sefin-table--sticky-header .sefin-table__header{position:sticky;top:0;z-index:3;box-shadow:0 4px 16px #00000014,0 2px 4px #0000000a}.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{background-color:var(--sefin-color-background, #ffffff);padding:var(--sefin-spacing-lg, 24px) var(--sefin-spacing-md, 16px);border-radius:0 0 var(--sefin-radius-lg, 12px) var(--sefin-radius-lg, 12px);display:flex;justify-content:flex-end;align-items:center}.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 });
|
|
6027
|
+
}
|
|
6028
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableComponent, decorators: [{
|
|
6029
|
+
type: Component,
|
|
6030
|
+
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\n [class]=\"getTableClasses()\"\n class=\"sefin-table__native-table\"\n role=\"table\"\n [attr.aria-label]=\"'Data table with ' + columns.length + ' columns'\"\n [attr.aria-rowcount]=\"serverSide && total !== undefined ? total : sortedData().length\"\n [attr.aria-colcount]=\"totalColspan()\"\n >\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 (keydown)=\"column.sortable && sort ? onSort(column, $event) : null\"\n [attr.aria-sort]=\"getAriaSort(column)\"\n [attr.aria-label]=\"getSortAriaLabel(column)\"\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 [attr.aria-hidden]=\"true\"\n >\n <svg\n *ngIf=\"showUnsortedIcon(column)\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n [attr.d]=\"sortIcons.unsorted\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"showAscendingIcon(column)\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n [attr.d]=\"sortIcons.ascending\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"showDescendingIcon(column)\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n [attr.d]=\"sortIcons.descending\"\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\" role=\"rowgroup\">\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 [attr.aria-selected]=\"selectable ? isSelected(row) : null\"\n [attr.aria-label]=\"'Row ' + (trackByFn(0, row) || '')\"\n role=\"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, column) }}\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 rgba(0,0,0,.06);border-radius:var(--sefin-radius-lg, 12px);overflow:hidden;box-shadow:0 2px 8px #0000000a,0 1px 2px #00000005;transition:box-shadow .3s ease-in-out,border-color .3s 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);table-layout:auto;min-width:100%}.sefin-table--density-compact .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions),.sefin-table--density-compact .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){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:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions){padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table--density-compact .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding-top:var(--sefin-spacing-xs, 4px);padding-bottom:var(--sefin-spacing-xs, 4px)}.sefin-table--density-compact .sefin-table__header-cell--select,.sefin-table--density-compact .sefin-table__cell--select{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-sm, 8px) var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px)!important}.sefin-table--density-compact .sefin-table__header-cell--actions,.sefin-table--density-compact .sefin-table__cell--actions{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px)!important}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions),.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-lg, 24px);padding-right:var(--sefin-spacing-lg, 24px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions){padding-top:var(--sefin-spacing-lg, 24px);padding-bottom:var(--sefin-spacing-lg, 24px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding-top:var(--sefin-spacing-md, 16px);padding-bottom:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--select,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--select{font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-lg, 24px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--select{padding-top:var(--sefin-spacing-lg, 24px);padding-bottom:var(--sefin-spacing-lg, 24px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--select{padding-top:var(--sefin-spacing-md, 16px);padding-bottom:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--actions,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--actions{font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-lg, 24px);padding-right:var(--sefin-spacing-lg, 24px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--actions{padding-top:var(--sefin-spacing-lg, 24px);padding-bottom:var(--sefin-spacing-lg, 24px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--actions{padding-top:var(--sefin-spacing-md, 16px);padding-bottom:var(--sefin-spacing-md, 16px)}.sefin-table__header{background:linear-gradient(to bottom,#fff,#fafafa);border-bottom:1px solid rgba(0,0,0,.08);position:relative}.sefin-table__header:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent 0%,rgba(0,0,0,.06) 50%,transparent 100%)}.sefin-table__header--sticky{position:sticky;top:0;z-index:3;box-shadow:0 4px 12px #00000014,0 2px 4px #0000000a}.sefin-table__header-row{background:transparent}.sefin-table__header-cell{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-xs, .75rem);color:var(--sefin-color-text-secondary, #6b7280);text-transform:uppercase;letter-spacing:.8px;text-align:left;border-bottom:none;background:transparent;-webkit-user-select:none;user-select:none;transition:background-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1);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;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:#55c3d80f;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8);transform:scale(1.1)}.sefin-table__header-cell--sortable:active{background-color:#55c3d81a}.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:linear-gradient(to bottom,#55c3d814,#55c3d80a)}.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}.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;min-width:14px;color:var(--sefin-color-text-secondary, #9b9b9b);opacity:.5;transition:all .25s cubic-bezier(.4,0,.2,1);flex-shrink:0;margin-left:var(--sefin-spacing-xs, 4px)}.sefin-table__sort-icon svg{display:block;width:100%;height:100%;transition:transform .2s ease-out}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;transform:scale(1.1)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon svg{transform:scale(1.05)}.sefin-table__body{background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row{border-bottom:1px solid rgba(0,0,0,.04);transition:background-color .25s cubic-bezier(.4,0,.2,1),transform .15s ease-out;background-color:var(--sefin-color-surface, #ffffff);position:relative}.sefin-table__row--clickable{cursor:pointer}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty){background-color:#55c3d80a;transform:translateY(-1px);box-shadow:0 2px 4px #00000005}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80a}.sefin-table__row--clickable:active:not(.sefin-table__row--empty){background-color:#55c3d80f;transform:translateY(0);box-shadow:none}.sefin-table__row--clickable:active:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80f}.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);z-index:1}.sefin-table__row:last-child{border-bottom:none}.sefin-table__row[data-animate]{animation:fadeInRow .3s ease-in-out}@keyframes fadeInRow{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.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, #1f2937);border-bottom:none;vertical-align:middle;background-color:inherit;transition:background-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1)}.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;text-align:center}.sefin-table__cell--actions{text-align:right;width:120px}.sefin-table__cell--sticky{position:sticky;background-color:inherit;z-index:1}.sefin-table__cell-content{display:block;line-height:var(--sefin-line-height-relaxed, 1.75);color:var(--sefin-color-text, #1f2937);font-weight:var(--sefin-font-weight-normal, 400);word-wrap:break-word;word-break:break-word;max-width:100%;overflow:hidden;text-overflow:ellipsis;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.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:#f9fafb99}.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:#f9fafb99}.sefin-table--striped .sefin-table__row--clickable:hover,.sefin-table--striped .sefin-table__row--clickable:hover .sefin-table__cell--sticky{background-color:#55c3d80f!important}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover{background-color:#55c3d80a}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80a}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover{background-color:#55c3d80a}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80a}.sefin-table--sticky-header .sefin-table__header{position:sticky;top:0;z-index:3;box-shadow:0 4px 16px #00000014,0 2px 4px #0000000a}.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{background-color:var(--sefin-color-background, #ffffff);padding:var(--sefin-spacing-lg, 24px) var(--sefin-spacing-md, 16px);border-radius:0 0 var(--sefin-radius-lg, 12px) var(--sefin-radius-lg, 12px);display:flex;justify-content:flex-end;align-items:center}.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"] }]
|
|
6031
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { columns: [{
|
|
6032
|
+
type: Input
|
|
6033
|
+
}], data: [{
|
|
6034
|
+
type: Input
|
|
6035
|
+
}], trackByKey: [{
|
|
6036
|
+
type: Input
|
|
6037
|
+
}], loading: [{
|
|
6038
|
+
type: Input
|
|
6039
|
+
}], emptyText: [{
|
|
6040
|
+
type: Input
|
|
6041
|
+
}], density: [{
|
|
6042
|
+
type: Input
|
|
6043
|
+
}], striped: [{
|
|
6044
|
+
type: Input
|
|
6045
|
+
}], hover: [{
|
|
6046
|
+
type: Input
|
|
6047
|
+
}], selectable: [{
|
|
6048
|
+
type: Input
|
|
6049
|
+
}], selectionMode: [{
|
|
6050
|
+
type: Input
|
|
6051
|
+
}], pagination: [{
|
|
6052
|
+
type: Input
|
|
6053
|
+
}], pageSizeOptions: [{
|
|
6054
|
+
type: Input
|
|
6055
|
+
}], pageSize: [{
|
|
6056
|
+
type: Input
|
|
6057
|
+
}], total: [{
|
|
6058
|
+
type: Input
|
|
6059
|
+
}], sort: [{
|
|
6060
|
+
type: Input
|
|
6061
|
+
}], serverSide: [{
|
|
6062
|
+
type: Input
|
|
6063
|
+
}], stickyHeader: [{
|
|
6064
|
+
type: Input
|
|
6065
|
+
}], headerActionsTemplate: [{
|
|
6066
|
+
type: Input
|
|
6067
|
+
}], emptyIconTemplate: [{
|
|
6068
|
+
type: Input
|
|
6069
|
+
}], rowClicked: [{
|
|
6070
|
+
type: Output
|
|
6071
|
+
}], selectionChanged: [{
|
|
6072
|
+
type: Output
|
|
6073
|
+
}], pageChanged: [{
|
|
6074
|
+
type: Output
|
|
6075
|
+
}], sortChanged: [{
|
|
6076
|
+
type: Output
|
|
6077
|
+
}] } });
|
|
6078
|
+
|
|
6079
|
+
/**
|
|
6080
|
+
* Table component exports
|
|
6081
|
+
*/
|
|
6082
|
+
|
|
6083
|
+
/**
|
|
6084
|
+
* Organisms index
|
|
6085
|
+
*/
|
|
6086
|
+
|
|
4896
6087
|
/*
|
|
4897
6088
|
* Public API Surface of @lesterarte/sefin-ui
|
|
4898
6089
|
*/
|
|
@@ -4904,5 +6095,5 @@ const STYLES_PATH = './styles/index.scss';
|
|
|
4904
6095
|
* Generated bundle index. Do not edit.
|
|
4905
6096
|
*/
|
|
4906
6097
|
|
|
4907
|
-
export { AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, PaginationComponent, ProgressBarComponent, RadioComponent, RateComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
|
|
6098
|
+
export { AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, FormFieldComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, PaginationComponent, ProgressBarComponent, RadioComponent, RateComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpacerComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TableComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent, buildDisplayedColumns };
|
|
4908
6099
|
//# sourceMappingURL=lesterarte-sefin-ui.mjs.map
|