@lesterarte/sefin-ui 0.0.64 → 0.0.66
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.
|
@@ -690,6 +690,21 @@ const ICON_COMPONENT_MAP = {
|
|
|
690
690
|
'log-out': LucideIcons.LogOut,
|
|
691
691
|
'log-in': LucideIcons.LogIn,
|
|
692
692
|
};
|
|
693
|
+
/**
|
|
694
|
+
* SEFIN design token names mapped to CSS variables for icon stroke/fill.
|
|
695
|
+
* When color input is one of these keys, the icon uses the theme variable.
|
|
696
|
+
*/
|
|
697
|
+
const COLOR_TOKEN_MAP = {
|
|
698
|
+
primary: 'var(--sefin-color-primary)',
|
|
699
|
+
secondary: 'var(--sefin-color-secondary)',
|
|
700
|
+
success: 'var(--sefin-color-success)',
|
|
701
|
+
warning: 'var(--sefin-color-warning)',
|
|
702
|
+
error: 'var(--sefin-color-error)',
|
|
703
|
+
info: 'var(--sefin-color-info)',
|
|
704
|
+
'text-primary': 'var(--sefin-color-text)',
|
|
705
|
+
'text-secondary': 'var(--sefin-color-text-secondary)',
|
|
706
|
+
'text-disabled': 'var(--sefin-color-text-disabled)',
|
|
707
|
+
};
|
|
693
708
|
const ICON_NAME_MAP = {
|
|
694
709
|
home: 'home',
|
|
695
710
|
menu: 'menu',
|
|
@@ -802,7 +817,7 @@ class IconComponent {
|
|
|
802
817
|
}
|
|
803
818
|
try {
|
|
804
819
|
const size = this.sizeValue;
|
|
805
|
-
const color = this.color || 'currentColor';
|
|
820
|
+
const color = this.resolveColor(this.color || 'currentColor');
|
|
806
821
|
const transform = this.getTransform();
|
|
807
822
|
const paths = iconData
|
|
808
823
|
.map((item) => {
|
|
@@ -869,6 +884,17 @@ class IconComponent {
|
|
|
869
884
|
transforms.push('scaleY(-1)');
|
|
870
885
|
return transforms.length > 0 ? transforms.join(' ') : '';
|
|
871
886
|
}
|
|
887
|
+
/**
|
|
888
|
+
* Resolves color input to a valid SVG stroke value.
|
|
889
|
+
* SEFIN token names (e.g. "primary", "error") are mapped to CSS variables.
|
|
890
|
+
*/
|
|
891
|
+
resolveColor(value) {
|
|
892
|
+
const trimmed = value?.trim();
|
|
893
|
+
if (!trimmed)
|
|
894
|
+
return 'currentColor';
|
|
895
|
+
const token = COLOR_TOKEN_MAP[trimmed];
|
|
896
|
+
return token ?? trimmed;
|
|
897
|
+
}
|
|
872
898
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IconComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
873
899
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: IconComponent, isStandalone: true, selector: "sefin-icon", inputs: { name: "name", size: "size", color: "color", rotate: "rotate", flipH: "flipH", flipV: "flipV", class: "class" }, ngImport: i0, template: "<span\n [class]=\"iconClasses\"\n [attr.aria-hidden]=\"true\"\n role=\"img\"\n style=\"display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%;\"\n>\n <span [innerHTML]=\"iconSvgHtml\" style=\"display: inline-block; width: 100%; height: 100%;\"></span>\n</span>\n\n", styles: [".sefin-icon{display:flex;align-items:center;justify-content:center;width:100%;flex-shrink:0;vertical-align:middle;box-sizing:border-box;color:currentColor;line-height:1}.sefin-icon--xs{width:var(--sefin-icon-size-xs);height:var(--sefin-icon-size-xs);font-size:var(--sefin-icon-size-xs)}.sefin-icon--xs ::ng-deep svg{width:var(--sefin-icon-size-xs);height:var(--sefin-icon-size-xs)}.sefin-icon--sm{width:var(--sefin-icon-size-sm);height:var(--sefin-icon-size-sm);font-size:16px}.sefin-icon--sm ::ng-deep svg{width:16px;height:16px}.sefin-icon--md{width:var(--sefin-icon-size-lg);height:var(--sefin-icon-size-lg);font-size:var(--sefin-icon-size-lg)}.sefin-icon--md ::ng-deep svg{width:var(--sefin-icon-size-lg);height:var(--sefin-icon-size-lg)}.sefin-icon--lg{width:var(--sefin-icon-size-xl);height:var(--sefin-icon-size-xl);font-size:32px}.sefin-icon--lg ::ng-deep svg{width:32px;height:32px}.sefin-icon--xl{width:var(--sefin-icon-size-2xl);height:var(--sefin-icon-size-2xl);font-size:var(--sefin-icon-size-2xl)}.sefin-icon--xl ::ng-deep svg{width:var(--sefin-icon-size-2xl);height:var(--sefin-icon-size-2xl)}.sefin-icon--rotate{transform:rotate(180deg)}.sefin-icon--flip-h{transform:scaleX(-1)}.sefin-icon--flip-v{transform:scaleY(-1)}.sefin-icon--flip-h.sefin-icon--flip-v{transform:scale(-1)}.sefin-icon ::ng-deep svg{display:block!important;width:100%!important;height:100%!important;max-width:100%;max-height:100%}.sefin-icon>*{display:inline-block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
874
900
|
}
|
|
@@ -4273,11 +4299,11 @@ class CardComponent {
|
|
|
4273
4299
|
.join(' ');
|
|
4274
4300
|
}
|
|
4275
4301
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4276
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: CardComponent, isStandalone: true, selector: "sefin-card", inputs: { variant: "variant", borderRadius: "borderRadius", rounded: "rounded", clickable: "clickable", disabled: "disabled", padding: "padding", class: "class" }, host: { listeners: { "keydown": "onKeydown($event)" } }, ngImport: i0, template: "<div [class]=\"cardClasses\" [attr.tabindex]=\"clickable && !disabled ? 0 : null\" [attr.role]=\"clickable ? 'button' : null\">\n <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-card{position:relative;display:flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border:none;transition:box-shadow .
|
|
4302
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: CardComponent, isStandalone: true, selector: "sefin-card", inputs: { variant: "variant", borderRadius: "borderRadius", rounded: "rounded", clickable: "clickable", disabled: "disabled", padding: "padding", class: "class" }, host: { listeners: { "keydown": "onKeydown($event)" } }, ngImport: i0, template: "<div [class]=\"cardClasses\" [attr.tabindex]=\"clickable && !disabled ? 0 : null\" [attr.role]=\"clickable ? 'button' : null\">\n <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-card{position:relative;display:flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border:none;transition:box-shadow .15s ease-in-out,transform .15s ease-in-out;box-sizing:border-box}.sefin-card--radius-none{border-radius:var(--sefin-radius-none)}.sefin-card--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-card--radius-md{border-radius:var(--sefin-radius-md)}.sefin-card--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-card--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-card--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-card--radius-full{border-radius:var(--sefin-radius-full)}.sefin-card--default{background-color:var(--sefin-color-surface, #ffffff);box-shadow:0 0 0 .5px var(--sefin-color-border, #e0e0e0),var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05))}.sefin-card--elevated{background-color:var(--sefin-color-surface, #ffffff);box-shadow:0 0 0 .5px var(--sefin-color-border, #e0e0e0),var(--sefin-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05))}.sefin-card--outlined{background-color:var(--sefin-color-surface, #ffffff);box-shadow:0 0 0 .5px var(--sefin-color-border, #e0e0e0)}.sefin-card--padding-none{padding:0}.sefin-card--padding-sm{padding:var(--sefin-spacing-sm, 8px)}.sefin-card--padding-md{padding:var(--sefin-spacing-md, 16px)}.sefin-card--padding-lg{padding:var(--sefin-spacing-lg, 24px)}.sefin-card--clickable{cursor:pointer;outline:none}.sefin-card--clickable:hover:not(.sefin-card--disabled),.sefin-card--clickable:focus-visible:not(.sefin-card--disabled){transform:translateY(-4px)}.sefin-card--clickable:hover:not(.sefin-card--disabled).sefin-card--default,.sefin-card--clickable:focus-visible:not(.sefin-card--disabled).sefin-card--default{box-shadow:0 0 0 .5px var(--sefin-color-primary, #55C3D8),var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05))}.sefin-card--clickable:hover:not(.sefin-card--disabled).sefin-card--elevated,.sefin-card--clickable:focus-visible:not(.sefin-card--disabled).sefin-card--elevated{box-shadow:0 0 0 .5px var(--sefin-color-primary, #55C3D8),var(--sefin-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05))}.sefin-card--clickable:hover:not(.sefin-card--disabled).sefin-card--outlined,.sefin-card--clickable:focus-visible:not(.sefin-card--disabled).sefin-card--outlined{box-shadow:0 0 0 .5px var(--sefin-color-primary, #55C3D8)}.sefin-card--clickable:active:not(.sefin-card--disabled){transform:translateY(-2px);box-shadow:var(--sefin-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06))}.sefin-card--clickable:active:not(.sefin-card--disabled).sefin-card--elevated{box-shadow:var(--sefin-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05))}.sefin-card--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4277
4303
|
}
|
|
4278
4304
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CardComponent, decorators: [{
|
|
4279
4305
|
type: Component,
|
|
4280
|
-
args: [{ selector: 'sefin-card', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"cardClasses\" [attr.tabindex]=\"clickable && !disabled ? 0 : null\" [attr.role]=\"clickable ? 'button' : null\">\n <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-card{position:relative;display:flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border:none;transition:box-shadow .
|
|
4306
|
+
args: [{ selector: 'sefin-card', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"cardClasses\" [attr.tabindex]=\"clickable && !disabled ? 0 : null\" [attr.role]=\"clickable ? 'button' : null\">\n <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-card{position:relative;display:flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border:none;transition:box-shadow .15s ease-in-out,transform .15s ease-in-out;box-sizing:border-box}.sefin-card--radius-none{border-radius:var(--sefin-radius-none)}.sefin-card--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-card--radius-md{border-radius:var(--sefin-radius-md)}.sefin-card--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-card--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-card--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-card--radius-full{border-radius:var(--sefin-radius-full)}.sefin-card--default{background-color:var(--sefin-color-surface, #ffffff);box-shadow:0 0 0 .5px var(--sefin-color-border, #e0e0e0),var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05))}.sefin-card--elevated{background-color:var(--sefin-color-surface, #ffffff);box-shadow:0 0 0 .5px var(--sefin-color-border, #e0e0e0),var(--sefin-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05))}.sefin-card--outlined{background-color:var(--sefin-color-surface, #ffffff);box-shadow:0 0 0 .5px var(--sefin-color-border, #e0e0e0)}.sefin-card--padding-none{padding:0}.sefin-card--padding-sm{padding:var(--sefin-spacing-sm, 8px)}.sefin-card--padding-md{padding:var(--sefin-spacing-md, 16px)}.sefin-card--padding-lg{padding:var(--sefin-spacing-lg, 24px)}.sefin-card--clickable{cursor:pointer;outline:none}.sefin-card--clickable:hover:not(.sefin-card--disabled),.sefin-card--clickable:focus-visible:not(.sefin-card--disabled){transform:translateY(-4px)}.sefin-card--clickable:hover:not(.sefin-card--disabled).sefin-card--default,.sefin-card--clickable:focus-visible:not(.sefin-card--disabled).sefin-card--default{box-shadow:0 0 0 .5px var(--sefin-color-primary, #55C3D8),var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05))}.sefin-card--clickable:hover:not(.sefin-card--disabled).sefin-card--elevated,.sefin-card--clickable:focus-visible:not(.sefin-card--disabled).sefin-card--elevated{box-shadow:0 0 0 .5px var(--sefin-color-primary, #55C3D8),var(--sefin-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05))}.sefin-card--clickable:hover:not(.sefin-card--disabled).sefin-card--outlined,.sefin-card--clickable:focus-visible:not(.sefin-card--disabled).sefin-card--outlined{box-shadow:0 0 0 .5px var(--sefin-color-primary, #55C3D8)}.sefin-card--clickable:active:not(.sefin-card--disabled){transform:translateY(-2px);box-shadow:var(--sefin-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06))}.sefin-card--clickable:active:not(.sefin-card--disabled).sefin-card--elevated{box-shadow:var(--sefin-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05))}.sefin-card--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}\n"] }]
|
|
4281
4307
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { variant: [{
|
|
4282
4308
|
type: Input
|
|
4283
4309
|
}], borderRadius: [{
|
|
@@ -7439,7 +7465,10 @@ class AppBarComponent {
|
|
|
7439
7465
|
this.sanitizer = sanitizer;
|
|
7440
7466
|
}
|
|
7441
7467
|
ngOnChanges(changes) {
|
|
7442
|
-
if (changes['isMobile'] &&
|
|
7468
|
+
if (changes['isMobile'] &&
|
|
7469
|
+
this.isMobile === null &&
|
|
7470
|
+
typeof window !== 'undefined' &&
|
|
7471
|
+
window.matchMedia) {
|
|
7443
7472
|
if (!this.mediaQuery) {
|
|
7444
7473
|
this.mediaQuery = window.matchMedia('(max-width: 768px)');
|
|
7445
7474
|
this._autoDetectedMobile = this.mediaQuery.matches;
|
|
@@ -7448,7 +7477,9 @@ class AppBarComponent {
|
|
|
7448
7477
|
}
|
|
7449
7478
|
ngOnInit() {
|
|
7450
7479
|
// Detect screen size changes (only if isMobile is not explicitly set by parent)
|
|
7451
|
-
if (typeof window !== 'undefined' &&
|
|
7480
|
+
if (typeof window !== 'undefined' &&
|
|
7481
|
+
window.matchMedia &&
|
|
7482
|
+
this.isMobile === null) {
|
|
7452
7483
|
if (!this.mediaQuery) {
|
|
7453
7484
|
this.mediaQuery = window.matchMedia('(max-width: 768px)');
|
|
7454
7485
|
this._autoDetectedMobile = this.mediaQuery.matches;
|
|
@@ -7490,14 +7521,14 @@ class AppBarComponent {
|
|
|
7490
7521
|
*/
|
|
7491
7522
|
getIconSvg(iconName, size = 24) {
|
|
7492
7523
|
const icons = {
|
|
7493
|
-
|
|
7524
|
+
home: 'M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z M9 22V12h6v10',
|
|
7494
7525
|
'building-2': 'M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18M6 12h12M6 12V8M6 12h12M12 2v20',
|
|
7495
|
-
|
|
7496
|
-
|
|
7497
|
-
|
|
7498
|
-
|
|
7499
|
-
|
|
7500
|
-
|
|
7526
|
+
menu: 'M3 12H21M3 6H21M3 18H21',
|
|
7527
|
+
x: 'M18 6L6 18M6 6L18 18',
|
|
7528
|
+
bell: 'M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9',
|
|
7529
|
+
search: 'M21 21l-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0z',
|
|
7530
|
+
settings: 'M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z',
|
|
7531
|
+
user: 'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2 M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',
|
|
7501
7532
|
'user-circle': 'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2 M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',
|
|
7502
7533
|
'more-vertical': 'M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2z M12 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2z M12 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2z',
|
|
7503
7534
|
};
|
|
@@ -7510,7 +7541,7 @@ class AppBarComponent {
|
|
|
7510
7541
|
}
|
|
7511
7542
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppBarComponent, decorators: [{
|
|
7512
7543
|
type: Component,
|
|
7513
|
-
args: [{ selector: 'sefin-app-bar', standalone: true, imports: [CommonModule
|
|
7544
|
+
args: [{ selector: 'sefin-app-bar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<header\n class=\"sefin-app-bar\"\n [class.sefin-app-bar--mobile]=\"effectiveIsMobile\"\n [class.sefin-app-bar--radius-none]=\"borderRadius === 'none'\"\n [class.sefin-app-bar--radius-sm]=\"borderRadius === 'sm'\"\n [class.sefin-app-bar--radius-md]=\"borderRadius === 'md'\"\n [class.sefin-app-bar--radius-lg]=\"borderRadius === 'lg'\"\n [class.sefin-app-bar--radius-xl]=\"borderRadius === 'xl'\"\n [class.sefin-app-bar--radius-2xl]=\"borderRadius === '2xl'\"\n [class.sefin-app-bar--radius-full]=\"borderRadius === 'full'\"\n [style.box-shadow]=\"'var(--sefin-shadow-' + elevation + ', 0 ' + elevation + 'px ' + (elevation * 2) + 'px rgba(0, 0, 0, 0.1))'\"\n>\n <div class=\"sefin-app-bar__container\">\n <!-- Left section: Menu button and logo/title -->\n <div class=\"sefin-app-bar__left\">\n @if (showMenuButton) {\n <button\n type=\"button\"\n class=\"sefin-app-bar__menu-button\"\n (click)=\"handleMenuClick()\"\n aria-label=\"Toggle menu\"\n aria-expanded=\"false\"\n >\n <span class=\"sefin-app-bar__menu-icon\" [innerHTML]=\"getIconSvg('menu', 24)\"></span>\n </button>\n }\n\n <div class=\"sefin-app-bar__brand\">\n @if (logoImage) {\n <img\n [src]=\"logoImage\"\n [alt]=\"title\"\n class=\"sefin-app-bar__logo-image\"\n />\n }\n @if (logoIcon && !logoImage) {\n <div class=\"sefin-app-bar__logo-icon-container\">\n <span class=\"sefin-app-bar__logo-icon\" [innerHTML]=\"getIconSvg(logoIcon, 24)\"></span>\n </div>\n }\n <div class=\"sefin-app-bar__title-section\">\n <h1 class=\"sefin-app-bar__title\">{{ title }}</h1>\n @if (subtitle) {\n <span class=\"sefin-app-bar__subtitle\">{{ subtitle }}</span>\n }\n </div>\n </div>\n </div>\n\n <!-- Center section: Projected content -->\n <div class=\"sefin-app-bar__center\">\n <ng-content select=\"[slot=center]\"></ng-content>\n </div>\n\n <!-- Right section: Actions and projected content -->\n <div class=\"sefin-app-bar__right\">\n @if (actions.length > 0) {\n <div class=\"sefin-app-bar__actions\">\n @for (action of actions; track action.label) {\n <button\n type=\"button\"\n class=\"sefin-app-bar__action-button\"\n [class.sefin-app-bar__action-button--disabled]=\"action.disabled\"\n [class]=\"action.class || ''\"\n [disabled]=\"action.disabled\"\n [attr.aria-label]=\"action.label\"\n (click)=\"!action.disabled && handleActionClick(action)\"\n >\n <span class=\"sefin-app-bar__action-icon\" [innerHTML]=\"getIconSvg(action.icon, 20)\"></span>\n </button>\n }\n </div>\n }\n <ng-content select=\"[slot=right]\"></ng-content>\n </div>\n </div>\n</header>\n", styles: [".sefin-app-bar{width:100%;height:64px;min-height:64px;background:#fff;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;position:relative;z-index:10;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:box-shadow .3s ease-in-out}.sefin-app-bar--radius-none{border-bottom-left-radius:var(--sefin-radius-none);border-bottom-right-radius:var(--sefin-radius-none)}.sefin-app-bar--radius-sm{border-bottom-left-radius:var(--sefin-radius-sm);border-bottom-right-radius:var(--sefin-radius-sm)}.sefin-app-bar--radius-md{border-bottom-left-radius:var(--sefin-radius-md);border-bottom-right-radius:var(--sefin-radius-md)}.sefin-app-bar--radius-lg{border-bottom-left-radius:var(--sefin-radius-lg);border-bottom-right-radius:var(--sefin-radius-lg)}.sefin-app-bar--radius-xl{border-bottom-left-radius:var(--sefin-radius-xl);border-bottom-right-radius:var(--sefin-radius-xl)}.sefin-app-bar--radius-2xl{border-bottom-left-radius:var(--sefin-radius-2xl);border-bottom-right-radius:var(--sefin-radius-2xl)}.sefin-app-bar--radius-full{border-bottom-left-radius:var(--sefin-radius-full);border-bottom-right-radius:var(--sefin-radius-full)}.sefin-app-bar__container{width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 var(--sefin-spacing-lg, 1.5rem);gap:var(--sefin-spacing-lg, 1.5rem)}.sefin-app-bar__left{display:flex;align-items:center;gap:var(--sefin-spacing-md, 1rem);flex:0 0 auto;min-width:0}.sefin-app-bar__menu-button{width:40px;height:40px;border-radius:8px;border:none;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;color:var(--sefin-color-text, #383838);padding:0;margin:0;flex-shrink:0}.sefin-app-bar__menu-button .sefin-app-bar__menu-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0}.sefin-app-bar__menu-button .sefin-app-bar__menu-icon svg{width:24px;height:24px;color:currentColor;fill:none;stroke:currentColor}.sefin-app-bar__menu-button:hover,.sefin-app-bar__menu-button:active{color:#55c3d8}.sefin-app-bar__menu-button:focus{outline:none}.sefin-app-bar__brand{display:flex;align-items:center;gap:var(--sefin-spacing-md, 1rem);min-width:0}.sefin-app-bar__logo-image{width:40px;height:40px;object-fit:contain;flex-shrink:0}.sefin-app-bar__logo-icon-container{width:40px;height:40px;border-radius:12px;background:linear-gradient(to right,#55c3d8,#4aafc4);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-app-bar__logo-icon-container .sefin-app-bar__logo-icon{color:#fff;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.sefin-app-bar__logo-icon-container .sefin-app-bar__logo-icon svg{width:24px;height:24px;color:#fff;fill:none;stroke:currentColor}.sefin-app-bar__title-section{display:flex;flex-direction:column;gap:0;min-width:0}.sefin-app-bar__title{color:var(--sefin-color-text, #383838);font-size:var(--sefin-font-size-lg, 1.125rem);font-weight:700;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sefin-app-bar__subtitle{color:#828282;font-size:var(--sefin-font-size-sm, .875rem);line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sefin-app-bar__center{display:flex;align-items:center;flex:1 1 auto;min-width:0;justify-content:center}.sefin-app-bar__right{display:flex;align-items:center;gap:var(--sefin-spacing-sm, .75rem);flex:0 0 auto;min-width:0}.sefin-app-bar__actions{display:flex;align-items:center;gap:var(--sefin-spacing-xs, .5rem)}.sefin-app-bar__action-button{width:40px;height:40px;border-radius:8px;border:none;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;color:var(--sefin-color-text, #383838);padding:0;margin:0;flex-shrink:0}.sefin-app-bar__action-button .sefin-app-bar__action-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}.sefin-app-bar__action-button .sefin-app-bar__action-icon svg{width:20px;height:20px;color:currentColor;fill:none;stroke:currentColor}.sefin-app-bar__action-button:hover:not(.sefin-app-bar__action-button--disabled){color:#55c3d8}.sefin-app-bar__action-button:active:not(.sefin-app-bar__action-button--disabled){color:#55c3d8}.sefin-app-bar__action-button:focus{outline:none}.sefin-app-bar__action-button.sefin-app-bar__action-button--disabled{opacity:.5;cursor:not-allowed}.sefin-app-bar.sefin-app-bar--mobile{height:56px;min-height:56px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__container{padding:0 var(--sefin-spacing-md, 1rem);gap:var(--sefin-spacing-md, 1rem)}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__title{font-size:var(--sefin-font-size-base, 1rem)}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__subtitle{font-size:var(--sefin-font-size-xs, .75rem)}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-image,.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-icon-container{width:32px;height:32px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-image .sefin-app-bar__logo-icon,.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-icon-container .sefin-app-bar__logo-icon{width:20px;height:20px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-image .sefin-app-bar__logo-icon svg,.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__logo-icon-container .sefin-app-bar__logo-icon svg{width:20px;height:20px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__menu-button{width:36px;height:36px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__menu-button .sefin-app-bar__menu-icon{width:20px;height:20px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__menu-button .sefin-app-bar__menu-icon svg{width:20px;height:20px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__action-button{width:36px;height:36px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__action-button .sefin-app-bar__action-icon{width:18px;height:18px}.sefin-app-bar.sefin-app-bar--mobile .sefin-app-bar__action-button .sefin-app-bar__action-icon svg{width:18px;height:18px}\n"] }]
|
|
7514
7545
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { title: [{
|
|
7515
7546
|
type: Input
|
|
7516
7547
|
}], subtitle: [{
|