@lesterarte/sefin-ui 0.0.40 → 0.0.41
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.
|
@@ -1026,11 +1026,11 @@ class IconButtonComponent {
|
|
|
1026
1026
|
.join(' ');
|
|
1027
1027
|
}
|
|
1028
1028
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1029
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: IconButtonComponent, isStandalone: true, selector: "sefin-icon-button", inputs: { variant: "variant", size: "size", disabled: "disabled", type: "type", class: "class", ariaLabel: "ariaLabel", rounded: "rounded" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button \n [type]=\"type\" \n [disabled]=\"disabled\" \n [class]=\"buttonClasses\" \n (click)=\"onClick($event)\"\n [attr.aria-label]=\"ariaLabel || null\"\n>\n <ng-content></ng-content>\n</button>\n\n", styles: [".sefin-icon-button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;cursor:pointer;outline:none;border:1px solid transparent;padding:0;aspect-ratio:1;flex-shrink:0}.sefin-icon-button:focus-visible{outline:
|
|
1029
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: IconButtonComponent, isStandalone: true, selector: "sefin-icon-button", inputs: { variant: "variant", size: "size", disabled: "disabled", type: "type", class: "class", ariaLabel: "ariaLabel", rounded: "rounded" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button \n [type]=\"type\" \n [disabled]=\"disabled\" \n [class]=\"buttonClasses\" \n (click)=\"onClick($event)\"\n [attr.aria-label]=\"ariaLabel || null\"\n>\n <ng-content></ng-content>\n</button>\n\n", styles: [".sefin-icon-button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;cursor:pointer;outline:none;border:1px solid transparent;padding:0;aspect-ratio:1;flex-shrink:0}.sefin-icon-button:focus-visible{outline:none}.sefin-icon-button--sm{width:32px;height:32px;min-width:32px;min-height:32px}.sefin-icon-button--md{width:40px;height:40px;min-width:40px;min-height:40px}.sefin-icon-button--lg{width:48px;height:48px;min-width:48px;min-height:48px}.sefin-icon-button--rounded{border-radius:50%}.sefin-icon-button--primary{background-color:var(--sefin-color-primary);color:#fff}.sefin-icon-button--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark)}.sefin-icon-button--primary:active:not(:disabled){transform:translateY(1px)}.sefin-icon-button--secondary{background-color:var(--sefin-color-secondary);color:#fff}.sefin-icon-button--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark)}.sefin-icon-button--secondary:active:not(:disabled){transform:translateY(1px)}.sefin-icon-button--outline{background-color:transparent;color:var(--sefin-color-primary);border-color:var(--sefin-color-primary)}.sefin-icon-button--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:#fff}.sefin-icon-button--ghost{background-color:transparent;color:var(--sefin-color-primary)}.sefin-icon-button--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-icon-button--danger{background-color:var(--sefin-color-error);color:#fff}.sefin-icon-button--danger:hover:not(:disabled){background-color:var(--sefin-color-error);opacity:.9}.sefin-icon-button--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-icon-button svg{width:100%;height:100%;display:block}.sefin-icon-button--sm svg{width:16px;height:16px}.sefin-icon-button--md svg{width:20px;height:20px}.sefin-icon-button--lg svg{width:24px;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1030
1030
|
}
|
|
1031
1031
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
1032
1032
|
type: Component,
|
|
1033
|
-
args: [{ selector: 'sefin-icon-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n [type]=\"type\" \n [disabled]=\"disabled\" \n [class]=\"buttonClasses\" \n (click)=\"onClick($event)\"\n [attr.aria-label]=\"ariaLabel || null\"\n>\n <ng-content></ng-content>\n</button>\n\n", styles: [".sefin-icon-button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;cursor:pointer;outline:none;border:1px solid transparent;padding:0;aspect-ratio:1;flex-shrink:0}.sefin-icon-button:focus-visible{outline:
|
|
1033
|
+
args: [{ selector: 'sefin-icon-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n [type]=\"type\" \n [disabled]=\"disabled\" \n [class]=\"buttonClasses\" \n (click)=\"onClick($event)\"\n [attr.aria-label]=\"ariaLabel || null\"\n>\n <ng-content></ng-content>\n</button>\n\n", styles: [".sefin-icon-button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;cursor:pointer;outline:none;border:1px solid transparent;padding:0;aspect-ratio:1;flex-shrink:0}.sefin-icon-button:focus-visible{outline:none}.sefin-icon-button--sm{width:32px;height:32px;min-width:32px;min-height:32px}.sefin-icon-button--md{width:40px;height:40px;min-width:40px;min-height:40px}.sefin-icon-button--lg{width:48px;height:48px;min-width:48px;min-height:48px}.sefin-icon-button--rounded{border-radius:50%}.sefin-icon-button--primary{background-color:var(--sefin-color-primary);color:#fff}.sefin-icon-button--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark)}.sefin-icon-button--primary:active:not(:disabled){transform:translateY(1px)}.sefin-icon-button--secondary{background-color:var(--sefin-color-secondary);color:#fff}.sefin-icon-button--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark)}.sefin-icon-button--secondary:active:not(:disabled){transform:translateY(1px)}.sefin-icon-button--outline{background-color:transparent;color:var(--sefin-color-primary);border-color:var(--sefin-color-primary)}.sefin-icon-button--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:#fff}.sefin-icon-button--ghost{background-color:transparent;color:var(--sefin-color-primary)}.sefin-icon-button--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-icon-button--danger{background-color:var(--sefin-color-error);color:#fff}.sefin-icon-button--danger:hover:not(:disabled){background-color:var(--sefin-color-error);opacity:.9}.sefin-icon-button--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-icon-button svg{width:100%;height:100%;display:block}.sefin-icon-button--sm svg{width:16px;height:16px}.sefin-icon-button--md svg{width:20px;height:20px}.sefin-icon-button--lg svg{width:24px;height:24px}\n"] }]
|
|
1034
1034
|
}], propDecorators: { variant: [{
|
|
1035
1035
|
type: Input
|
|
1036
1036
|
}], size: [{
|
|
@@ -6812,11 +6812,11 @@ class AppBarComponent {
|
|
|
6812
6812
|
return this.sanitizer.bypassSecurityTrustHtml(svg);
|
|
6813
6813
|
}
|
|
6814
6814
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppBarComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
6815
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: AppBarComponent, isStandalone: true, selector: "sefin-app-bar", inputs: { title: "title", subtitle: "subtitle", logoIcon: "logoIcon", logoImage: "logoImage", showMenuButton: "showMenuButton", isMobile: "isMobile", actions: "actions", elevation: "elevation" }, outputs: { menuClicked: "menuClicked", actionClicked: "actionClicked" }, usesOnChanges: true, ngImport: i0, template: "<header\n class=\"sefin-app-bar\"\n [class.sefin-app-bar--mobile]=\"effectiveIsMobile\"\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__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
|
|
6815
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: AppBarComponent, isStandalone: true, selector: "sefin-app-bar", inputs: { title: "title", subtitle: "subtitle", logoIcon: "logoIcon", logoImage: "logoImage", showMenuButton: "showMenuButton", isMobile: "isMobile", actions: "actions", elevation: "elevation" }, outputs: { menuClicked: "menuClicked", actionClicked: "actionClicked" }, usesOnChanges: true, ngImport: i0, template: "<header\n class=\"sefin-app-bar\"\n [class.sefin-app-bar--mobile]=\"effectiveIsMobile\"\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__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"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
|
|
6816
6816
|
}
|
|
6817
6817
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppBarComponent, decorators: [{
|
|
6818
6818
|
type: Component,
|
|
6819
|
-
args: [{ selector: 'sefin-app-bar', standalone: true, imports: [CommonModule, IconComponent, IconButtonComponent], changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<header\n class=\"sefin-app-bar\"\n [class.sefin-app-bar--mobile]=\"effectiveIsMobile\"\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__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
|
|
6819
|
+
args: [{ selector: 'sefin-app-bar', standalone: true, imports: [CommonModule, IconComponent, IconButtonComponent], changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<header\n class=\"sefin-app-bar\"\n [class.sefin-app-bar--mobile]=\"effectiveIsMobile\"\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__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"] }]
|
|
6820
6820
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { title: [{
|
|
6821
6821
|
type: Input
|
|
6822
6822
|
}], subtitle: [{
|