@lesterarte/sefin-ui 0.0.45 → 0.0.47
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.
|
@@ -5704,6 +5704,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
5704
5704
|
type: Output
|
|
5705
5705
|
}] } });
|
|
5706
5706
|
|
|
5707
|
+
class ModalComponent {
|
|
5708
|
+
cdr;
|
|
5709
|
+
/** Whether the modal is open */
|
|
5710
|
+
isOpen = false;
|
|
5711
|
+
/** Modal size. Options: 'sm' | 'md' | 'lg' | 'xl' | 'full' */
|
|
5712
|
+
size = 'md';
|
|
5713
|
+
/** Whether to show overlay backdrop */
|
|
5714
|
+
showOverlay = true;
|
|
5715
|
+
/** Whether to close on overlay click */
|
|
5716
|
+
closeOnOverlayClick = true;
|
|
5717
|
+
/** Whether to close on escape key */
|
|
5718
|
+
closeOnEscape = true;
|
|
5719
|
+
/** Whether to show close button */
|
|
5720
|
+
showCloseButton = true;
|
|
5721
|
+
/** Modal title (optional) */
|
|
5722
|
+
title;
|
|
5723
|
+
/** Additional CSS classes */
|
|
5724
|
+
class = '';
|
|
5725
|
+
/** Event emitted when modal opens */
|
|
5726
|
+
opened = new EventEmitter();
|
|
5727
|
+
/** Event emitted when modal closes */
|
|
5728
|
+
closed = new EventEmitter();
|
|
5729
|
+
constructor(cdr) {
|
|
5730
|
+
this.cdr = cdr;
|
|
5731
|
+
}
|
|
5732
|
+
ngOnChanges(changes) {
|
|
5733
|
+
if (changes['isOpen']) {
|
|
5734
|
+
const currentValue = changes['isOpen'].currentValue;
|
|
5735
|
+
const previousValue = changes['isOpen'].previousValue;
|
|
5736
|
+
if (currentValue && !previousValue) {
|
|
5737
|
+
// Modal opened
|
|
5738
|
+
this.opened.emit();
|
|
5739
|
+
}
|
|
5740
|
+
else if (!currentValue && previousValue) {
|
|
5741
|
+
// Modal closed
|
|
5742
|
+
this.closed.emit();
|
|
5743
|
+
}
|
|
5744
|
+
this.cdr.markForCheck();
|
|
5745
|
+
}
|
|
5746
|
+
}
|
|
5747
|
+
/** Overlay click handler */
|
|
5748
|
+
handleOverlayClick() {
|
|
5749
|
+
if (this.isOpen && this.closeOnOverlayClick) {
|
|
5750
|
+
this.handleClose();
|
|
5751
|
+
}
|
|
5752
|
+
}
|
|
5753
|
+
/** Close handler */
|
|
5754
|
+
handleClose() {
|
|
5755
|
+
if (this.isOpen) {
|
|
5756
|
+
this.closed.emit();
|
|
5757
|
+
}
|
|
5758
|
+
}
|
|
5759
|
+
/** Close button click handler */
|
|
5760
|
+
handleCloseButtonClick(event) {
|
|
5761
|
+
event.stopPropagation();
|
|
5762
|
+
this.handleClose();
|
|
5763
|
+
}
|
|
5764
|
+
/** Escape key handler */
|
|
5765
|
+
handleEscapeKey(event) {
|
|
5766
|
+
if (event.key === 'Escape' && this.isOpen && this.closeOnEscape) {
|
|
5767
|
+
event.preventDefault();
|
|
5768
|
+
this.handleClose();
|
|
5769
|
+
}
|
|
5770
|
+
}
|
|
5771
|
+
/** Get modal container classes */
|
|
5772
|
+
get modalClasses() {
|
|
5773
|
+
return [
|
|
5774
|
+
'sefin-modal',
|
|
5775
|
+
this.isOpen ? 'sefin-modal--open' : '',
|
|
5776
|
+
`sefin-modal--${this.size}`,
|
|
5777
|
+
this.class,
|
|
5778
|
+
]
|
|
5779
|
+
.filter(Boolean)
|
|
5780
|
+
.join(' ');
|
|
5781
|
+
}
|
|
5782
|
+
/** Get overlay classes */
|
|
5783
|
+
get overlayClasses() {
|
|
5784
|
+
return [
|
|
5785
|
+
'sefin-modal__overlay',
|
|
5786
|
+
this.isOpen ? 'sefin-modal__overlay--open' : '',
|
|
5787
|
+
]
|
|
5788
|
+
.filter(Boolean)
|
|
5789
|
+
.join(' ');
|
|
5790
|
+
}
|
|
5791
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ModalComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5792
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ModalComponent, isStandalone: true, selector: "sefin-modal", inputs: { isOpen: "isOpen", size: "size", showOverlay: "showOverlay", closeOnOverlayClick: "closeOnOverlayClick", closeOnEscape: "closeOnEscape", showCloseButton: "showCloseButton", title: "title", class: "class" }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown": "handleEscapeKey($event)" } }, usesOnChanges: true, ngImport: i0, template: "<!-- Overlay for modal -->\n@if (isOpen && showOverlay) {\n <div\n [class]=\"overlayClasses\"\n (click)=\"handleOverlayClick()\"\n [attr.aria-hidden]=\"!isOpen\"\n role=\"presentation\"\n ></div>\n}\n\n<!-- Modal container -->\n@if (isOpen) {\n <div\n [class]=\"modalClasses\"\n role=\"dialog\"\n [attr.aria-modal]=\"isOpen\"\n [attr.aria-labelledby]=\"title ? 'sefin-modal-title' : null\"\n (click)=\"$event.stopPropagation()\"\n >\n <div class=\"sefin-modal__content\">\n <!-- Header with title and close button -->\n @if (title || showCloseButton) {\n <div class=\"sefin-modal__header\">\n @if (title) {\n <h2 id=\"sefin-modal-title\" class=\"sefin-modal__title\">{{ title }}</h2>\n }\n @if (showCloseButton) {\n <button\n type=\"button\"\n class=\"sefin-modal__close-button\"\n (click)=\"handleCloseButtonClick($event)\"\n aria-label=\"Close modal\"\n >\n <sefin-icon name=\"x\" size=\"sm\"></sefin-icon>\n </button>\n }\n </div>\n }\n\n <!-- Modal body -->\n <div class=\"sefin-modal__body\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n}\n", styles: [".sefin-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);z-index:1000;background:var(--sefin-color-background, #ffffff);border-radius:var(--sefin-radius-lg, 12px);box-shadow:var(--sefin-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04));font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);opacity:0;transition:all .2s ease-in-out;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;outline:none}.sefin-modal--open{opacity:1;transform:translate(-50%,-50%) scale(1);animation:modal-enter .2s ease-in-out forwards}.sefin-modal--sm{width:400px;min-width:320px}.sefin-modal--md{width:500px;min-width:400px}.sefin-modal--lg{width:700px;min-width:500px}.sefin-modal--xl{width:900px;min-width:600px}.sefin-modal--full{width:95vw;height:95vh;max-width:95vw;max-height:95vh}.sefin-modal__content{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.sefin-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--sefin-spacing-lg, 24px);border-bottom:1px solid var(--sefin-color-border, #cecece);flex-shrink:0}.sefin-modal__title{margin:0;font-size:var(--sefin-font-size-xl, 1.25rem);font-weight:var(--sefin-font-weight-semibold, 600);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #383838);flex:1}.sefin-modal__close-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:var(--sefin-radius-md, 8px);cursor:pointer;color:var(--sefin-color-text-secondary, #686868);transition:all .2s ease-in-out;flex-shrink:0;margin-left:var(--sefin-spacing-md, 16px);padding:0}.sefin-modal__close-button:hover:not(:disabled){background-color:var(--sefin-color-surface-hover, #f5f5f5);color:var(--sefin-color-text, #383838)}.sefin-modal__close-button:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:2px}.sefin-modal__close-button:active:not(:disabled){transform:scale(.95)}.sefin-modal__close-button:disabled{opacity:.6;cursor:not-allowed}.sefin-modal__body{flex:1;overflow-y:auto;padding:var(--sefin-spacing-lg, 24px);color:var(--sefin-color-text, #383838);font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-modal__body::-webkit-scrollbar{width:8px}.sefin-modal__body::-webkit-scrollbar-track{background:transparent}.sefin-modal__body::-webkit-scrollbar-thumb{background:var(--sefin-color-border, #cecece);border-radius:var(--sefin-radius-full, 9999px)}.sefin-modal__body::-webkit-scrollbar-thumb:hover{background:var(--sefin-color-text-secondary, #686868)}.sefin-modal__overlay{position:fixed;inset:0;background:#00000080;z-index:999;opacity:0;transition:opacity .2s ease-in-out;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.sefin-modal__overlay--open{opacity:1;animation:overlay-fade-in .2s ease-in-out forwards}@keyframes modal-enter{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5793
|
+
}
|
|
5794
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ModalComponent, decorators: [{
|
|
5795
|
+
type: Component,
|
|
5796
|
+
args: [{ selector: 'sefin-modal', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- Overlay for modal -->\n@if (isOpen && showOverlay) {\n <div\n [class]=\"overlayClasses\"\n (click)=\"handleOverlayClick()\"\n [attr.aria-hidden]=\"!isOpen\"\n role=\"presentation\"\n ></div>\n}\n\n<!-- Modal container -->\n@if (isOpen) {\n <div\n [class]=\"modalClasses\"\n role=\"dialog\"\n [attr.aria-modal]=\"isOpen\"\n [attr.aria-labelledby]=\"title ? 'sefin-modal-title' : null\"\n (click)=\"$event.stopPropagation()\"\n >\n <div class=\"sefin-modal__content\">\n <!-- Header with title and close button -->\n @if (title || showCloseButton) {\n <div class=\"sefin-modal__header\">\n @if (title) {\n <h2 id=\"sefin-modal-title\" class=\"sefin-modal__title\">{{ title }}</h2>\n }\n @if (showCloseButton) {\n <button\n type=\"button\"\n class=\"sefin-modal__close-button\"\n (click)=\"handleCloseButtonClick($event)\"\n aria-label=\"Close modal\"\n >\n <sefin-icon name=\"x\" size=\"sm\"></sefin-icon>\n </button>\n }\n </div>\n }\n\n <!-- Modal body -->\n <div class=\"sefin-modal__body\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n}\n", styles: [".sefin-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);z-index:1000;background:var(--sefin-color-background, #ffffff);border-radius:var(--sefin-radius-lg, 12px);box-shadow:var(--sefin-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04));font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);opacity:0;transition:all .2s ease-in-out;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;outline:none}.sefin-modal--open{opacity:1;transform:translate(-50%,-50%) scale(1);animation:modal-enter .2s ease-in-out forwards}.sefin-modal--sm{width:400px;min-width:320px}.sefin-modal--md{width:500px;min-width:400px}.sefin-modal--lg{width:700px;min-width:500px}.sefin-modal--xl{width:900px;min-width:600px}.sefin-modal--full{width:95vw;height:95vh;max-width:95vw;max-height:95vh}.sefin-modal__content{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.sefin-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--sefin-spacing-lg, 24px);border-bottom:1px solid var(--sefin-color-border, #cecece);flex-shrink:0}.sefin-modal__title{margin:0;font-size:var(--sefin-font-size-xl, 1.25rem);font-weight:var(--sefin-font-weight-semibold, 600);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #383838);flex:1}.sefin-modal__close-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:var(--sefin-radius-md, 8px);cursor:pointer;color:var(--sefin-color-text-secondary, #686868);transition:all .2s ease-in-out;flex-shrink:0;margin-left:var(--sefin-spacing-md, 16px);padding:0}.sefin-modal__close-button:hover:not(:disabled){background-color:var(--sefin-color-surface-hover, #f5f5f5);color:var(--sefin-color-text, #383838)}.sefin-modal__close-button:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:2px}.sefin-modal__close-button:active:not(:disabled){transform:scale(.95)}.sefin-modal__close-button:disabled{opacity:.6;cursor:not-allowed}.sefin-modal__body{flex:1;overflow-y:auto;padding:var(--sefin-spacing-lg, 24px);color:var(--sefin-color-text, #383838);font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-modal__body::-webkit-scrollbar{width:8px}.sefin-modal__body::-webkit-scrollbar-track{background:transparent}.sefin-modal__body::-webkit-scrollbar-thumb{background:var(--sefin-color-border, #cecece);border-radius:var(--sefin-radius-full, 9999px)}.sefin-modal__body::-webkit-scrollbar-thumb:hover{background:var(--sefin-color-text-secondary, #686868)}.sefin-modal__overlay{position:fixed;inset:0;background:#00000080;z-index:999;opacity:0;transition:opacity .2s ease-in-out;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.sefin-modal__overlay--open{opacity:1;animation:overlay-fade-in .2s ease-in-out forwards}@keyframes modal-enter{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
5797
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { isOpen: [{
|
|
5798
|
+
type: Input
|
|
5799
|
+
}], size: [{
|
|
5800
|
+
type: Input
|
|
5801
|
+
}], showOverlay: [{
|
|
5802
|
+
type: Input
|
|
5803
|
+
}], closeOnOverlayClick: [{
|
|
5804
|
+
type: Input
|
|
5805
|
+
}], closeOnEscape: [{
|
|
5806
|
+
type: Input
|
|
5807
|
+
}], showCloseButton: [{
|
|
5808
|
+
type: Input
|
|
5809
|
+
}], title: [{
|
|
5810
|
+
type: Input
|
|
5811
|
+
}], class: [{
|
|
5812
|
+
type: Input
|
|
5813
|
+
}], opened: [{
|
|
5814
|
+
type: Output
|
|
5815
|
+
}], closed: [{
|
|
5816
|
+
type: Output
|
|
5817
|
+
}], handleEscapeKey: [{
|
|
5818
|
+
type: HostListener,
|
|
5819
|
+
args: ['document:keydown', ['$event']]
|
|
5820
|
+
}] } });
|
|
5821
|
+
|
|
5707
5822
|
/**
|
|
5708
5823
|
* Molecules index
|
|
5709
5824
|
*/
|
|
@@ -6591,11 +6706,11 @@ class SidebarComponent {
|
|
|
6591
6706
|
return this.sanitizer.bypassSecurityTrustHtml(svg);
|
|
6592
6707
|
}
|
|
6593
6708
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SidebarComponent, deps: [{ token: i1$2.Router }, { token: i0.ChangeDetectorRef }, { token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
6594
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SidebarComponent, isStandalone: true, selector: "sefin-sidebar", inputs: { navItems: "navItems", isMobile: "isMobile", isOpen: "isOpen", isCollapsed: "isCollapsed", headerTitle: "headerTitle", headerSubtitle: "headerSubtitle", headerIcon: "headerIcon", footerVersion: "footerVersion", showFooter: "showFooter" }, outputs: { toggleCollapse: "toggleCollapse", toggleOpen: "toggleOpen", close: "close" }, usesOnChanges: true, ngImport: i0, template: "<aside\n class=\"sefin-sidebar\"\n [class.sefin-sidebar--mobile]=\"effectiveIsMobile\"\n [class.sefin-sidebar--collapsed]=\"effectiveIsMobile || isCollapsed\"\n>\n <div class=\"sefin-sidebar__header\">\n @if (!effectiveIsMobile && !isCollapsed) {\n <div class=\"sefin-sidebar__header-content\">\n <div class=\"sefin-sidebar__header-icon-container\">\n <span class=\"sefin-sidebar__header-icon\" [innerHTML]=\"getIconSvg(headerIcon, 24)\"></span>\n </div>\n <div class=\"sefin-sidebar__header-text\">\n <h1 class=\"sefin-sidebar__header-title\">{{ headerTitle }}</h1>\n <span class=\"sefin-sidebar__header-subtitle\">{{ headerSubtitle }}</span>\n </div>\n </div>\n }\n @if (effectiveIsMobile) {\n <div class=\"sefin-sidebar__header-content\">\n <div class=\"sefin-sidebar__header-icon-container\">\n <span class=\"sefin-sidebar__header-icon\" [innerHTML]=\"getIconSvg(headerIcon, 24)\"></span>\n </div>\n </div>\n }\n @if (!effectiveIsMobile) {\n <button\n type=\"button\"\n class=\"sefin-sidebar__toggle\"\n (click)=\"handleToggleCollapse()\"\n [attr.aria-label]=\"isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'\"\n [attr.aria-expanded]=\"!isCollapsed\"\n >\n <span class=\"sefin-sidebar__toggle-icon\" [innerHTML]=\"getIconSvg(isCollapsed ? 'chevron-right' : 'chevron-left', 14)\"></span>\n </button>\n }\n </div>\n\n <nav class=\"sefin-sidebar__nav\">\n <ul class=\"sefin-sidebar__nav-list\">\n @for (item of navItems; track item.label) {\n <li class=\"sefin-sidebar__nav-item\" [class.sefin-sidebar__nav-item--has-children]=\"hasChildren(item)\">\n <!-- Parent item -->\n <button\n type=\"button\"\n class=\"sefin-sidebar__nav-link\"\n [class.sefin-sidebar__nav-link--expandable]=\"hasChildren(item)\"\n [class.sefin-sidebar__nav-link--expanded]=\"item.expanded\"\n [class.sefin-sidebar__nav-link--active]=\"hasActiveChild(item, currentRoute)\"\n [attr.aria-expanded]=\"hasChildren(item) ? item.expanded : null\"\n [attr.aria-label]=\"(effectiveIsMobile || isCollapsed) ? item.label : null\"\n (click)=\"hasChildren(item) ? toggleExpand(item) : navigate(item.route || '')\"\n >\n @if (item.icon) {\n <div class=\"sefin-sidebar__nav-icon-wrapper\">\n <span class=\"sefin-sidebar__nav-icon\" [innerHTML]=\"getIconSvg(item.icon, 20)\"></span>\n </div>\n }\n @if (!effectiveIsMobile && !isCollapsed) {\n <span class=\"sefin-sidebar__nav-label\">{{ item.label }}</span>\n @if (hasChildren(item)) {\n <div class=\"sefin-sidebar__nav-expand-icon-wrapper\" [class.sefin-sidebar__nav-expand-icon-wrapper--expanded]=\"item.expanded\">\n <span class=\"sefin-sidebar__nav-expand-icon\" [innerHTML]=\"getIconSvg('chevron-down', 16)\"></span>\n </div>\n }\n }\n </button>\n <!-- Children items -->\n @if (hasChildren(item) && item.expanded && !effectiveIsMobile && !isCollapsed) {\n <ul class=\"sefin-sidebar__nav-sub-list\">\n @for (child of item.children; track child.label) {\n <li class=\"sefin-sidebar__nav-sub-item\" [class.sefin-sidebar__nav-sub-item--has-children]=\"hasChildren(child)\">\n <!-- Level 1: Section headers (non-clickable) -->\n <div class=\"sefin-sidebar__nav-section-header\">\n <span class=\"sefin-sidebar__section-header-text\">{{ child.label }}</span>\n </div>\n <!-- Level 2: Grandchildren items (clickable with bullets) -->\n @if (hasChildren(child)) {\n <ul class=\"sefin-sidebar__nav-sub-sub-list\">\n @for (grandchild of child.children; track grandchild.label) {\n <li class=\"sefin-sidebar__nav-sub-sub-item\">\n <button\n type=\"button\"\n class=\"sefin-sidebar__nav-link sefin-sidebar__nav-link--sub-sub\"\n [class.sefin-sidebar__nav-link--active]=\"isActive(grandchild.route || '')\"\n [attr.aria-current]=\"isActive(grandchild.route || '') ? 'page' : null\"\n (click)=\"navigate(grandchild.route || '')\"\n >\n @if (!isActive(grandchild.route || '')) {\n <div class=\"sefin-sidebar__nav-bullet\"></div>\n }\n <span class=\"sefin-sidebar__nav-label\">{{ grandchild.label }}</span>\n </button>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </nav>\n \n @if (showFooter) {\n <div class=\"sefin-sidebar__footer\">\n <div class=\"sefin-sidebar__footer-content\">\n <span class=\"sefin-sidebar__footer-text\">{{ footerVersion }}</span>\n </div>\n </div>\n }\n</aside>\n", styles: [".sefin-sidebar{width:288px;min-width:288px;height:100vh;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;position:relative;z-index:100;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:width .3s ease-in-out,transform .3s ease-in-out}.sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem);border-bottom:1px solid #e8e8e8;display:flex;align-items:center;position:relative;background:linear-gradient(to right,#55c3d8,#4aafc4);min-height:auto}.sefin-sidebar__header .sefin-sidebar__header-content{display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);width:100%}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container{width:40px;height:40px;border-radius:12px;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon{color:#fff;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon svg{width:24px;height:24px;color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:flex;flex-direction:column;gap:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-title{color:#fff;font-size:18px;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)}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-subtitle{color:#fffc;font-size:12px;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)}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem) var(--sefin-spacing-sm, .5rem);justify-content:center}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content{flex-direction:column}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:none}.sefin-sidebar__footer{padding:var(--sefin-spacing-md, 1rem);border-top:1px solid #e8e8e8}.sefin-sidebar__footer .sefin-sidebar__footer-content{background:#f5f5f5;border-radius:8px;padding:var(--sefin-spacing-sm, .75rem);text-align:center}.sefin-sidebar__footer .sefin-sidebar__footer-content .sefin-sidebar__footer-text{color:#828282;font-size:12px;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__toggle{position:absolute;right:-14px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:none;background:linear-gradient(135deg,#fff,#f8f9fa);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #0000001a,0 0 0 1px #0000000d,inset 0 1px #ffffffe6;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:101;color:var(--sefin-color-text, #4a5568);padding:0;margin:0;line-height:0}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex-shrink:0;transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon svg{width:14px;height:14px;color:currentColor;fill:none;stroke:currentColor;pointer-events:none}.sefin-sidebar__toggle:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,transparent 50%);pointer-events:none;opacity:.5}.sefin-sidebar__toggle:hover{background:linear-gradient(135deg,#55c3d8,#4db8cc);color:#fff;transform:translateY(-50%) scale(1.08);box-shadow:0 4px 20px #55c3d866,0 0 0 1px #55c3d833,inset 0 1px #ffffff4d}.sefin-sidebar__toggle:hover:before{opacity:.2;background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,transparent 50%)}.sefin-sidebar__toggle:hover .sefin-sidebar__toggle-icon{transform:scale(1.1)}.sefin-sidebar__toggle:active{transform:translateY(-50%) scale(1.02);box-shadow:0 2px 12px #55c3d880,0 0 0 1px #55c3d84d,inset 0 2px 4px #0000001a}.sefin-sidebar__toggle:focus{outline:2px solid var(--sefin-color-primary, #55c3d8);outline-offset:4px;outline-style:solid}.sefin-sidebar--collapsed .sefin-sidebar__toggle{right:-14px}.sefin-sidebar__close-button{position:absolute;right:var(--sefin-spacing-md, 1rem);top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:none;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;z-index:101;color:#fff;padding:0;margin:0;line-height:0}.sefin-sidebar__close-button .sefin-sidebar__close-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;pointer-events:none}.sefin-sidebar__close-button .sefin-sidebar__close-icon svg{width:20px;height:20px;color:currentColor;fill:none;stroke:currentColor;stroke-width:2;pointer-events:none}.sefin-sidebar__close-button:hover{background:#ffffff4d;transform:translateY(-50%) scale(1.05)}.sefin-sidebar__close-button:active{transform:translateY(-50%) scale(.95)}.sefin-sidebar__close-button:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.sefin-sidebar__nav{flex:1;padding:var(--sefin-spacing-sm, .75rem);overflow:hidden}.sefin-sidebar__nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.sefin-sidebar__nav-item{margin:0}.sefin-sidebar__nav-item.sefin-sidebar__nav-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-link{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#383838;font-size:var(--sefin-font-size-base, 1rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0;justify-content:flex-start;overflow:hidden;min-width:0;font-weight:500}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link:focus{outline:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--expandable{font-weight:500}.sefin-sidebar__nav-icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:8px;background:#e6f7fb;transition:all .2s ease-in-out}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{width:20px;height:20px;color:#55c3d8;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper{background:#55c3d8}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__nav-expand-icon-wrapper{margin-left:auto;transition:transform .2s ease;display:flex;align-items:center;justify-content:center}.sefin-sidebar__nav-expand-icon-wrapper.sefin-sidebar__nav-expand-icon-wrapper--expanded{transform:rotate(180deg)}.sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#828282;width:16px;height:16px;fill:none;stroke:currentColor;transition:color .2s ease-in-out}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#fff}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#55c3d8}.sefin-sidebar__nav-label{flex:1;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;opacity:1;transition:opacity .2s ease;min-width:0;overflow:hidden;display:block;line-height:1.4;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-list{list-style:none;margin:4px 0 8px;padding:0;animation:slideDown .2s ease-out}.sefin-sidebar__nav-sub-item{margin:0 0 2px}.sefin-sidebar__nav-sub-item.sefin-sidebar__nav-sub-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-section-header{padding:var(--sefin-spacing-md, 1rem) var(--sefin-spacing-md, 1rem) var(--sefin-spacing-xs, .5rem) var(--sefin-spacing-md, 1rem)}.sefin-sidebar__nav-section-header .sefin-sidebar__section-header-text{color:#828282;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-sub-list{list-style:none;margin:2px 0 8px;padding:0;animation:slideDown .2s ease-out;display:flex;flex-direction:column;gap:2px}.sefin-sidebar__nav-sub-sub-item{margin:0 0 2px}.sefin-sidebar__nav-link--sub-sub{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#4f4f4f;font-size:var(--sefin-font-size-sm, .875rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0 var(--sefin-spacing-md, .5rem);justify-content:flex-start;overflow:hidden;min-width:0}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-bullet{background:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:focus{outline:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-bullet{width:6px;height:6px;border-radius:50%;background:#cecece;transition:background-color .2s ease-in-out;flex-shrink:0}.sefin-sidebar .sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-bullet{display:none}@keyframes slideDown{0%{opacity:0;max-height:0;overflow:hidden}to{opacity:1;max-height:1000px}}.sefin-sidebar.sefin-sidebar--collapsed{width:80px;min-width:80px}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-link{justify-content:center;padding:var(--sefin-spacing-md, 1rem);border-radius:12px;margin:0}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-label{opacity:0;width:0;overflow:hidden}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-expand-icon,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-list,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-sub-list{display:none}.sefin-sidebar.sefin-sidebar--mobile .sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem) var(--sefin-spacing-sm, .5rem);justify-content:center}.sefin-sidebar.sefin-sidebar--mobile .sefin-sidebar__header .sefin-sidebar__header-content{flex-direction:column}.sefin-sidebar.sefin-sidebar--mobile .sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:none}.sefin-sidebar.sefin-sidebar--mobile{transform:translate(0);z-index:1000;width:80px;min-width:80px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
|
|
6709
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SidebarComponent, isStandalone: true, selector: "sefin-sidebar", inputs: { navItems: "navItems", isMobile: "isMobile", isOpen: "isOpen", isCollapsed: "isCollapsed", headerTitle: "headerTitle", headerSubtitle: "headerSubtitle", headerIcon: "headerIcon", footerVersion: "footerVersion", showFooter: "showFooter" }, outputs: { toggleCollapse: "toggleCollapse", toggleOpen: "toggleOpen", close: "close" }, usesOnChanges: true, ngImport: i0, template: "<aside\n class=\"sefin-sidebar\"\n [class.sefin-sidebar--mobile]=\"effectiveIsMobile\"\n [class.sefin-sidebar--collapsed]=\"effectiveIsMobile || isCollapsed\"\n>\n <div class=\"sefin-sidebar__header\">\n @if (!effectiveIsMobile && !isCollapsed) {\n <div class=\"sefin-sidebar__header-content\">\n <div class=\"sefin-sidebar__header-icon-container\">\n <span class=\"sefin-sidebar__header-icon\" [innerHTML]=\"getIconSvg(headerIcon, 24)\"></span>\n </div>\n <div class=\"sefin-sidebar__header-text\">\n <h1 class=\"sefin-sidebar__header-title\">{{ headerTitle }}</h1>\n <span class=\"sefin-sidebar__header-subtitle\">{{ headerSubtitle }}</span>\n </div>\n </div>\n }\n @if (effectiveIsMobile) {\n <div class=\"sefin-sidebar__header-content\">\n <div class=\"sefin-sidebar__header-icon-container\">\n <span class=\"sefin-sidebar__header-icon\" [innerHTML]=\"getIconSvg(headerIcon, 24)\"></span>\n </div>\n </div>\n }\n @if (!effectiveIsMobile) {\n <button\n type=\"button\"\n class=\"sefin-sidebar__toggle\"\n (click)=\"handleToggleCollapse()\"\n [attr.aria-label]=\"isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'\"\n [attr.aria-expanded]=\"!isCollapsed\"\n >\n <span class=\"sefin-sidebar__toggle-icon\" [innerHTML]=\"getIconSvg(isCollapsed ? 'chevron-right' : 'chevron-left', 14)\"></span>\n </button>\n }\n </div>\n\n <nav class=\"sefin-sidebar__nav\">\n <ul class=\"sefin-sidebar__nav-list\">\n @for (item of navItems; track item.label) {\n <li class=\"sefin-sidebar__nav-item\" [class.sefin-sidebar__nav-item--has-children]=\"hasChildren(item)\">\n <!-- Parent item -->\n <button\n type=\"button\"\n class=\"sefin-sidebar__nav-link\"\n [class.sefin-sidebar__nav-link--expandable]=\"hasChildren(item)\"\n [class.sefin-sidebar__nav-link--expanded]=\"item.expanded\"\n [class.sefin-sidebar__nav-link--active]=\"hasActiveChild(item, currentRoute)\"\n [attr.aria-expanded]=\"hasChildren(item) ? item.expanded : null\"\n [attr.aria-label]=\"(effectiveIsMobile || isCollapsed) ? item.label : null\"\n (click)=\"hasChildren(item) ? toggleExpand(item) : navigate(item.route || '')\"\n >\n @if (item.icon) {\n <div class=\"sefin-sidebar__nav-icon-wrapper\">\n <span class=\"sefin-sidebar__nav-icon\" [innerHTML]=\"getIconSvg(item.icon, 20)\"></span>\n </div>\n }\n @if (!effectiveIsMobile && !isCollapsed) {\n <span class=\"sefin-sidebar__nav-label\">{{ item.label }}</span>\n @if (hasChildren(item)) {\n <div class=\"sefin-sidebar__nav-expand-icon-wrapper\" [class.sefin-sidebar__nav-expand-icon-wrapper--expanded]=\"item.expanded\">\n <span class=\"sefin-sidebar__nav-expand-icon\" [innerHTML]=\"getIconSvg('chevron-down', 16)\"></span>\n </div>\n }\n }\n </button>\n <!-- Children items -->\n @if (hasChildren(item) && item.expanded && !effectiveIsMobile && !isCollapsed) {\n <ul class=\"sefin-sidebar__nav-sub-list\">\n @for (child of item.children; track child.label) {\n <li class=\"sefin-sidebar__nav-sub-item\" [class.sefin-sidebar__nav-sub-item--has-children]=\"hasChildren(child)\">\n <!-- Level 1: Section headers (non-clickable) -->\n <div class=\"sefin-sidebar__nav-section-header\">\n <span class=\"sefin-sidebar__section-header-text\">{{ child.label }}</span>\n </div>\n <!-- Level 2: Grandchildren items (clickable with bullets) -->\n @if (hasChildren(child)) {\n <ul class=\"sefin-sidebar__nav-sub-sub-list\">\n @for (grandchild of child.children; track grandchild.label) {\n <li class=\"sefin-sidebar__nav-sub-sub-item\">\n <button\n type=\"button\"\n class=\"sefin-sidebar__nav-link sefin-sidebar__nav-link--sub-sub\"\n [class.sefin-sidebar__nav-link--active]=\"isActive(grandchild.route || '')\"\n [attr.aria-current]=\"isActive(grandchild.route || '') ? 'page' : null\"\n (click)=\"navigate(grandchild.route || '')\"\n >\n @if (!isActive(grandchild.route || '')) {\n <div class=\"sefin-sidebar__nav-bullet\"></div>\n }\n <span class=\"sefin-sidebar__nav-label\">{{ grandchild.label }}</span>\n </button>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </nav>\n \n @if (showFooter) {\n <div class=\"sefin-sidebar__footer\">\n <div class=\"sefin-sidebar__footer-content\">\n <span class=\"sefin-sidebar__footer-text\">{{ footerVersion }}</span>\n </div>\n </div>\n }\n</aside>\n", styles: [".sefin-sidebar{width:288px;min-width:288px;height:100%;min-height:100%;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;position:relative;z-index:100;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:width .3s ease-in-out,transform .3s ease-in-out}.sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem);border-bottom:1px solid #e8e8e8;display:flex;align-items:center;position:relative;background:linear-gradient(to right,#55c3d8,#4aafc4);min-height:auto}.sefin-sidebar__header .sefin-sidebar__header-content{display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);width:100%}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container{width:40px;height:40px;border-radius:12px;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon{color:#fff;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon svg{width:24px;height:24px;color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:flex;flex-direction:column;gap:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-title{color:#fff;font-size:18px;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)}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-subtitle{color:#fffc;font-size:12px;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)}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem) var(--sefin-spacing-sm, .5rem);justify-content:center}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content{flex-direction:column}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:none}.sefin-sidebar__footer{padding:var(--sefin-spacing-md, 1rem);border-top:1px solid #e8e8e8}.sefin-sidebar__footer .sefin-sidebar__footer-content{background:#f5f5f5;border-radius:8px;padding:var(--sefin-spacing-sm, .75rem);text-align:center}.sefin-sidebar__footer .sefin-sidebar__footer-content .sefin-sidebar__footer-text{color:#828282;font-size:12px;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__toggle{position:absolute;right:-14px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:none;background:linear-gradient(135deg,#fff,#f8f9fa);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #0000001a,0 0 0 1px #0000000d,inset 0 1px #ffffffe6;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:101;color:var(--sefin-color-text, #4a5568);padding:0;margin:0;line-height:0}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex-shrink:0;transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon svg{width:14px;height:14px;color:currentColor;fill:none;stroke:currentColor;pointer-events:none}.sefin-sidebar__toggle:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,transparent 50%);pointer-events:none;opacity:.5}.sefin-sidebar__toggle:hover{background:linear-gradient(135deg,#55c3d8,#4db8cc);color:#fff;transform:translateY(-50%) scale(1.08);box-shadow:0 4px 20px #55c3d866,0 0 0 1px #55c3d833,inset 0 1px #ffffff4d}.sefin-sidebar__toggle:hover:before{opacity:.2;background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,transparent 50%)}.sefin-sidebar__toggle:hover .sefin-sidebar__toggle-icon{transform:scale(1.1)}.sefin-sidebar__toggle:active{transform:translateY(-50%) scale(1.02);box-shadow:0 2px 12px #55c3d880,0 0 0 1px #55c3d84d,inset 0 2px 4px #0000001a}.sefin-sidebar__toggle:focus{outline:2px solid var(--sefin-color-primary, #55c3d8);outline-offset:4px;outline-style:solid}.sefin-sidebar--collapsed .sefin-sidebar__toggle{right:-14px}.sefin-sidebar__close-button{position:absolute;right:var(--sefin-spacing-md, 1rem);top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:none;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;z-index:101;color:#fff;padding:0;margin:0;line-height:0}.sefin-sidebar__close-button .sefin-sidebar__close-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;pointer-events:none}.sefin-sidebar__close-button .sefin-sidebar__close-icon svg{width:20px;height:20px;color:currentColor;fill:none;stroke:currentColor;stroke-width:2;pointer-events:none}.sefin-sidebar__close-button:hover{background:#ffffff4d;transform:translateY(-50%) scale(1.05)}.sefin-sidebar__close-button:active{transform:translateY(-50%) scale(.95)}.sefin-sidebar__close-button:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.sefin-sidebar__nav{flex:1;padding:var(--sefin-spacing-sm, .75rem);overflow:hidden}.sefin-sidebar__nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.sefin-sidebar__nav-item{margin:0}.sefin-sidebar__nav-item.sefin-sidebar__nav-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-link{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#383838;font-size:var(--sefin-font-size-base, 1rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0;justify-content:flex-start;overflow:hidden;min-width:0;font-weight:500}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link:focus{outline:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--expandable{font-weight:500}.sefin-sidebar__nav-icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:8px;background:#e6f7fb;transition:all .2s ease-in-out}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{width:20px;height:20px;color:#55c3d8;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper{background:#55c3d8}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__nav-expand-icon-wrapper{margin-left:auto;transition:transform .2s ease;display:flex;align-items:center;justify-content:center}.sefin-sidebar__nav-expand-icon-wrapper.sefin-sidebar__nav-expand-icon-wrapper--expanded{transform:rotate(180deg)}.sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#828282;width:16px;height:16px;fill:none;stroke:currentColor;transition:color .2s ease-in-out}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#fff}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#55c3d8}.sefin-sidebar__nav-label{flex:1;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;opacity:1;transition:opacity .2s ease;min-width:0;overflow:hidden;display:block;line-height:1.4;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-list{list-style:none;margin:4px 0 8px;padding:0;animation:slideDown .2s ease-out}.sefin-sidebar__nav-sub-item{margin:0 0 2px}.sefin-sidebar__nav-sub-item.sefin-sidebar__nav-sub-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-section-header{padding:var(--sefin-spacing-md, 1rem) var(--sefin-spacing-md, 1rem) var(--sefin-spacing-xs, .5rem) var(--sefin-spacing-md, 1rem)}.sefin-sidebar__nav-section-header .sefin-sidebar__section-header-text{color:#828282;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-sub-list{list-style:none;margin:2px 0 8px;padding:0;animation:slideDown .2s ease-out;display:flex;flex-direction:column;gap:2px}.sefin-sidebar__nav-sub-sub-item{margin:0 0 2px}.sefin-sidebar__nav-link--sub-sub{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#4f4f4f;font-size:var(--sefin-font-size-sm, .875rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0 var(--sefin-spacing-md, .5rem);justify-content:flex-start;overflow:hidden;min-width:0}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-bullet{background:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:focus{outline:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-bullet{width:6px;height:6px;border-radius:50%;background:#cecece;transition:background-color .2s ease-in-out;flex-shrink:0}.sefin-sidebar .sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-bullet{display:none}@keyframes slideDown{0%{opacity:0;max-height:0;overflow:hidden}to{opacity:1;max-height:1000px}}.sefin-sidebar.sefin-sidebar--collapsed{width:80px;min-width:80px}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-link{justify-content:center;padding:var(--sefin-spacing-md, 1rem);border-radius:12px;margin:0}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-label{opacity:0;width:0;overflow:hidden}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-expand-icon,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-list,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-sub-list{display:none}.sefin-sidebar.sefin-sidebar--mobile .sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem) var(--sefin-spacing-sm, .5rem);justify-content:center}.sefin-sidebar.sefin-sidebar--mobile .sefin-sidebar__header .sefin-sidebar__header-content{flex-direction:column}.sefin-sidebar.sefin-sidebar--mobile .sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:none}.sefin-sidebar.sefin-sidebar--mobile{transform:translate(0);z-index:1000;width:80px;min-width:80px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
|
|
6595
6710
|
}
|
|
6596
6711
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
6597
6712
|
type: Component,
|
|
6598
|
-
args: [{ selector: 'sefin-sidebar', standalone: true, imports: [CommonModule, RouterModule], changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<aside\n class=\"sefin-sidebar\"\n [class.sefin-sidebar--mobile]=\"effectiveIsMobile\"\n [class.sefin-sidebar--collapsed]=\"effectiveIsMobile || isCollapsed\"\n>\n <div class=\"sefin-sidebar__header\">\n @if (!effectiveIsMobile && !isCollapsed) {\n <div class=\"sefin-sidebar__header-content\">\n <div class=\"sefin-sidebar__header-icon-container\">\n <span class=\"sefin-sidebar__header-icon\" [innerHTML]=\"getIconSvg(headerIcon, 24)\"></span>\n </div>\n <div class=\"sefin-sidebar__header-text\">\n <h1 class=\"sefin-sidebar__header-title\">{{ headerTitle }}</h1>\n <span class=\"sefin-sidebar__header-subtitle\">{{ headerSubtitle }}</span>\n </div>\n </div>\n }\n @if (effectiveIsMobile) {\n <div class=\"sefin-sidebar__header-content\">\n <div class=\"sefin-sidebar__header-icon-container\">\n <span class=\"sefin-sidebar__header-icon\" [innerHTML]=\"getIconSvg(headerIcon, 24)\"></span>\n </div>\n </div>\n }\n @if (!effectiveIsMobile) {\n <button\n type=\"button\"\n class=\"sefin-sidebar__toggle\"\n (click)=\"handleToggleCollapse()\"\n [attr.aria-label]=\"isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'\"\n [attr.aria-expanded]=\"!isCollapsed\"\n >\n <span class=\"sefin-sidebar__toggle-icon\" [innerHTML]=\"getIconSvg(isCollapsed ? 'chevron-right' : 'chevron-left', 14)\"></span>\n </button>\n }\n </div>\n\n <nav class=\"sefin-sidebar__nav\">\n <ul class=\"sefin-sidebar__nav-list\">\n @for (item of navItems; track item.label) {\n <li class=\"sefin-sidebar__nav-item\" [class.sefin-sidebar__nav-item--has-children]=\"hasChildren(item)\">\n <!-- Parent item -->\n <button\n type=\"button\"\n class=\"sefin-sidebar__nav-link\"\n [class.sefin-sidebar__nav-link--expandable]=\"hasChildren(item)\"\n [class.sefin-sidebar__nav-link--expanded]=\"item.expanded\"\n [class.sefin-sidebar__nav-link--active]=\"hasActiveChild(item, currentRoute)\"\n [attr.aria-expanded]=\"hasChildren(item) ? item.expanded : null\"\n [attr.aria-label]=\"(effectiveIsMobile || isCollapsed) ? item.label : null\"\n (click)=\"hasChildren(item) ? toggleExpand(item) : navigate(item.route || '')\"\n >\n @if (item.icon) {\n <div class=\"sefin-sidebar__nav-icon-wrapper\">\n <span class=\"sefin-sidebar__nav-icon\" [innerHTML]=\"getIconSvg(item.icon, 20)\"></span>\n </div>\n }\n @if (!effectiveIsMobile && !isCollapsed) {\n <span class=\"sefin-sidebar__nav-label\">{{ item.label }}</span>\n @if (hasChildren(item)) {\n <div class=\"sefin-sidebar__nav-expand-icon-wrapper\" [class.sefin-sidebar__nav-expand-icon-wrapper--expanded]=\"item.expanded\">\n <span class=\"sefin-sidebar__nav-expand-icon\" [innerHTML]=\"getIconSvg('chevron-down', 16)\"></span>\n </div>\n }\n }\n </button>\n <!-- Children items -->\n @if (hasChildren(item) && item.expanded && !effectiveIsMobile && !isCollapsed) {\n <ul class=\"sefin-sidebar__nav-sub-list\">\n @for (child of item.children; track child.label) {\n <li class=\"sefin-sidebar__nav-sub-item\" [class.sefin-sidebar__nav-sub-item--has-children]=\"hasChildren(child)\">\n <!-- Level 1: Section headers (non-clickable) -->\n <div class=\"sefin-sidebar__nav-section-header\">\n <span class=\"sefin-sidebar__section-header-text\">{{ child.label }}</span>\n </div>\n <!-- Level 2: Grandchildren items (clickable with bullets) -->\n @if (hasChildren(child)) {\n <ul class=\"sefin-sidebar__nav-sub-sub-list\">\n @for (grandchild of child.children; track grandchild.label) {\n <li class=\"sefin-sidebar__nav-sub-sub-item\">\n <button\n type=\"button\"\n class=\"sefin-sidebar__nav-link sefin-sidebar__nav-link--sub-sub\"\n [class.sefin-sidebar__nav-link--active]=\"isActive(grandchild.route || '')\"\n [attr.aria-current]=\"isActive(grandchild.route || '') ? 'page' : null\"\n (click)=\"navigate(grandchild.route || '')\"\n >\n @if (!isActive(grandchild.route || '')) {\n <div class=\"sefin-sidebar__nav-bullet\"></div>\n }\n <span class=\"sefin-sidebar__nav-label\">{{ grandchild.label }}</span>\n </button>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </nav>\n \n @if (showFooter) {\n <div class=\"sefin-sidebar__footer\">\n <div class=\"sefin-sidebar__footer-content\">\n <span class=\"sefin-sidebar__footer-text\">{{ footerVersion }}</span>\n </div>\n </div>\n }\n</aside>\n", styles: [".sefin-sidebar{width:288px;min-width:288px;height:100vh;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;position:relative;z-index:100;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:width .3s ease-in-out,transform .3s ease-in-out}.sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem);border-bottom:1px solid #e8e8e8;display:flex;align-items:center;position:relative;background:linear-gradient(to right,#55c3d8,#4aafc4);min-height:auto}.sefin-sidebar__header .sefin-sidebar__header-content{display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);width:100%}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container{width:40px;height:40px;border-radius:12px;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon{color:#fff;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon svg{width:24px;height:24px;color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:flex;flex-direction:column;gap:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-title{color:#fff;font-size:18px;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)}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-subtitle{color:#fffc;font-size:12px;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)}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem) var(--sefin-spacing-sm, .5rem);justify-content:center}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content{flex-direction:column}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:none}.sefin-sidebar__footer{padding:var(--sefin-spacing-md, 1rem);border-top:1px solid #e8e8e8}.sefin-sidebar__footer .sefin-sidebar__footer-content{background:#f5f5f5;border-radius:8px;padding:var(--sefin-spacing-sm, .75rem);text-align:center}.sefin-sidebar__footer .sefin-sidebar__footer-content .sefin-sidebar__footer-text{color:#828282;font-size:12px;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__toggle{position:absolute;right:-14px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:none;background:linear-gradient(135deg,#fff,#f8f9fa);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #0000001a,0 0 0 1px #0000000d,inset 0 1px #ffffffe6;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:101;color:var(--sefin-color-text, #4a5568);padding:0;margin:0;line-height:0}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex-shrink:0;transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon svg{width:14px;height:14px;color:currentColor;fill:none;stroke:currentColor;pointer-events:none}.sefin-sidebar__toggle:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,transparent 50%);pointer-events:none;opacity:.5}.sefin-sidebar__toggle:hover{background:linear-gradient(135deg,#55c3d8,#4db8cc);color:#fff;transform:translateY(-50%) scale(1.08);box-shadow:0 4px 20px #55c3d866,0 0 0 1px #55c3d833,inset 0 1px #ffffff4d}.sefin-sidebar__toggle:hover:before{opacity:.2;background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,transparent 50%)}.sefin-sidebar__toggle:hover .sefin-sidebar__toggle-icon{transform:scale(1.1)}.sefin-sidebar__toggle:active{transform:translateY(-50%) scale(1.02);box-shadow:0 2px 12px #55c3d880,0 0 0 1px #55c3d84d,inset 0 2px 4px #0000001a}.sefin-sidebar__toggle:focus{outline:2px solid var(--sefin-color-primary, #55c3d8);outline-offset:4px;outline-style:solid}.sefin-sidebar--collapsed .sefin-sidebar__toggle{right:-14px}.sefin-sidebar__close-button{position:absolute;right:var(--sefin-spacing-md, 1rem);top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:none;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;z-index:101;color:#fff;padding:0;margin:0;line-height:0}.sefin-sidebar__close-button .sefin-sidebar__close-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;pointer-events:none}.sefin-sidebar__close-button .sefin-sidebar__close-icon svg{width:20px;height:20px;color:currentColor;fill:none;stroke:currentColor;stroke-width:2;pointer-events:none}.sefin-sidebar__close-button:hover{background:#ffffff4d;transform:translateY(-50%) scale(1.05)}.sefin-sidebar__close-button:active{transform:translateY(-50%) scale(.95)}.sefin-sidebar__close-button:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.sefin-sidebar__nav{flex:1;padding:var(--sefin-spacing-sm, .75rem);overflow:hidden}.sefin-sidebar__nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.sefin-sidebar__nav-item{margin:0}.sefin-sidebar__nav-item.sefin-sidebar__nav-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-link{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#383838;font-size:var(--sefin-font-size-base, 1rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0;justify-content:flex-start;overflow:hidden;min-width:0;font-weight:500}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link:focus{outline:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--expandable{font-weight:500}.sefin-sidebar__nav-icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:8px;background:#e6f7fb;transition:all .2s ease-in-out}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{width:20px;height:20px;color:#55c3d8;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper{background:#55c3d8}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__nav-expand-icon-wrapper{margin-left:auto;transition:transform .2s ease;display:flex;align-items:center;justify-content:center}.sefin-sidebar__nav-expand-icon-wrapper.sefin-sidebar__nav-expand-icon-wrapper--expanded{transform:rotate(180deg)}.sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#828282;width:16px;height:16px;fill:none;stroke:currentColor;transition:color .2s ease-in-out}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#fff}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#55c3d8}.sefin-sidebar__nav-label{flex:1;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;opacity:1;transition:opacity .2s ease;min-width:0;overflow:hidden;display:block;line-height:1.4;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-list{list-style:none;margin:4px 0 8px;padding:0;animation:slideDown .2s ease-out}.sefin-sidebar__nav-sub-item{margin:0 0 2px}.sefin-sidebar__nav-sub-item.sefin-sidebar__nav-sub-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-section-header{padding:var(--sefin-spacing-md, 1rem) var(--sefin-spacing-md, 1rem) var(--sefin-spacing-xs, .5rem) var(--sefin-spacing-md, 1rem)}.sefin-sidebar__nav-section-header .sefin-sidebar__section-header-text{color:#828282;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-sub-list{list-style:none;margin:2px 0 8px;padding:0;animation:slideDown .2s ease-out;display:flex;flex-direction:column;gap:2px}.sefin-sidebar__nav-sub-sub-item{margin:0 0 2px}.sefin-sidebar__nav-link--sub-sub{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#4f4f4f;font-size:var(--sefin-font-size-sm, .875rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0 var(--sefin-spacing-md, .5rem);justify-content:flex-start;overflow:hidden;min-width:0}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-bullet{background:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:focus{outline:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-bullet{width:6px;height:6px;border-radius:50%;background:#cecece;transition:background-color .2s ease-in-out;flex-shrink:0}.sefin-sidebar .sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-bullet{display:none}@keyframes slideDown{0%{opacity:0;max-height:0;overflow:hidden}to{opacity:1;max-height:1000px}}.sefin-sidebar.sefin-sidebar--collapsed{width:80px;min-width:80px}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-link{justify-content:center;padding:var(--sefin-spacing-md, 1rem);border-radius:12px;margin:0}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-label{opacity:0;width:0;overflow:hidden}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-expand-icon,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-list,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-sub-list{display:none}.sefin-sidebar.sefin-sidebar--mobile .sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem) var(--sefin-spacing-sm, .5rem);justify-content:center}.sefin-sidebar.sefin-sidebar--mobile .sefin-sidebar__header .sefin-sidebar__header-content{flex-direction:column}.sefin-sidebar.sefin-sidebar--mobile .sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:none}.sefin-sidebar.sefin-sidebar--mobile{transform:translate(0);z-index:1000;width:80px;min-width:80px}\n"] }]
|
|
6713
|
+
args: [{ selector: 'sefin-sidebar', standalone: true, imports: [CommonModule, RouterModule], changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<aside\n class=\"sefin-sidebar\"\n [class.sefin-sidebar--mobile]=\"effectiveIsMobile\"\n [class.sefin-sidebar--collapsed]=\"effectiveIsMobile || isCollapsed\"\n>\n <div class=\"sefin-sidebar__header\">\n @if (!effectiveIsMobile && !isCollapsed) {\n <div class=\"sefin-sidebar__header-content\">\n <div class=\"sefin-sidebar__header-icon-container\">\n <span class=\"sefin-sidebar__header-icon\" [innerHTML]=\"getIconSvg(headerIcon, 24)\"></span>\n </div>\n <div class=\"sefin-sidebar__header-text\">\n <h1 class=\"sefin-sidebar__header-title\">{{ headerTitle }}</h1>\n <span class=\"sefin-sidebar__header-subtitle\">{{ headerSubtitle }}</span>\n </div>\n </div>\n }\n @if (effectiveIsMobile) {\n <div class=\"sefin-sidebar__header-content\">\n <div class=\"sefin-sidebar__header-icon-container\">\n <span class=\"sefin-sidebar__header-icon\" [innerHTML]=\"getIconSvg(headerIcon, 24)\"></span>\n </div>\n </div>\n }\n @if (!effectiveIsMobile) {\n <button\n type=\"button\"\n class=\"sefin-sidebar__toggle\"\n (click)=\"handleToggleCollapse()\"\n [attr.aria-label]=\"isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'\"\n [attr.aria-expanded]=\"!isCollapsed\"\n >\n <span class=\"sefin-sidebar__toggle-icon\" [innerHTML]=\"getIconSvg(isCollapsed ? 'chevron-right' : 'chevron-left', 14)\"></span>\n </button>\n }\n </div>\n\n <nav class=\"sefin-sidebar__nav\">\n <ul class=\"sefin-sidebar__nav-list\">\n @for (item of navItems; track item.label) {\n <li class=\"sefin-sidebar__nav-item\" [class.sefin-sidebar__nav-item--has-children]=\"hasChildren(item)\">\n <!-- Parent item -->\n <button\n type=\"button\"\n class=\"sefin-sidebar__nav-link\"\n [class.sefin-sidebar__nav-link--expandable]=\"hasChildren(item)\"\n [class.sefin-sidebar__nav-link--expanded]=\"item.expanded\"\n [class.sefin-sidebar__nav-link--active]=\"hasActiveChild(item, currentRoute)\"\n [attr.aria-expanded]=\"hasChildren(item) ? item.expanded : null\"\n [attr.aria-label]=\"(effectiveIsMobile || isCollapsed) ? item.label : null\"\n (click)=\"hasChildren(item) ? toggleExpand(item) : navigate(item.route || '')\"\n >\n @if (item.icon) {\n <div class=\"sefin-sidebar__nav-icon-wrapper\">\n <span class=\"sefin-sidebar__nav-icon\" [innerHTML]=\"getIconSvg(item.icon, 20)\"></span>\n </div>\n }\n @if (!effectiveIsMobile && !isCollapsed) {\n <span class=\"sefin-sidebar__nav-label\">{{ item.label }}</span>\n @if (hasChildren(item)) {\n <div class=\"sefin-sidebar__nav-expand-icon-wrapper\" [class.sefin-sidebar__nav-expand-icon-wrapper--expanded]=\"item.expanded\">\n <span class=\"sefin-sidebar__nav-expand-icon\" [innerHTML]=\"getIconSvg('chevron-down', 16)\"></span>\n </div>\n }\n }\n </button>\n <!-- Children items -->\n @if (hasChildren(item) && item.expanded && !effectiveIsMobile && !isCollapsed) {\n <ul class=\"sefin-sidebar__nav-sub-list\">\n @for (child of item.children; track child.label) {\n <li class=\"sefin-sidebar__nav-sub-item\" [class.sefin-sidebar__nav-sub-item--has-children]=\"hasChildren(child)\">\n <!-- Level 1: Section headers (non-clickable) -->\n <div class=\"sefin-sidebar__nav-section-header\">\n <span class=\"sefin-sidebar__section-header-text\">{{ child.label }}</span>\n </div>\n <!-- Level 2: Grandchildren items (clickable with bullets) -->\n @if (hasChildren(child)) {\n <ul class=\"sefin-sidebar__nav-sub-sub-list\">\n @for (grandchild of child.children; track grandchild.label) {\n <li class=\"sefin-sidebar__nav-sub-sub-item\">\n <button\n type=\"button\"\n class=\"sefin-sidebar__nav-link sefin-sidebar__nav-link--sub-sub\"\n [class.sefin-sidebar__nav-link--active]=\"isActive(grandchild.route || '')\"\n [attr.aria-current]=\"isActive(grandchild.route || '') ? 'page' : null\"\n (click)=\"navigate(grandchild.route || '')\"\n >\n @if (!isActive(grandchild.route || '')) {\n <div class=\"sefin-sidebar__nav-bullet\"></div>\n }\n <span class=\"sefin-sidebar__nav-label\">{{ grandchild.label }}</span>\n </button>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </nav>\n \n @if (showFooter) {\n <div class=\"sefin-sidebar__footer\">\n <div class=\"sefin-sidebar__footer-content\">\n <span class=\"sefin-sidebar__footer-text\">{{ footerVersion }}</span>\n </div>\n </div>\n }\n</aside>\n", styles: [".sefin-sidebar{width:288px;min-width:288px;height:100%;min-height:100%;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;position:relative;z-index:100;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:width .3s ease-in-out,transform .3s ease-in-out}.sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem);border-bottom:1px solid #e8e8e8;display:flex;align-items:center;position:relative;background:linear-gradient(to right,#55c3d8,#4aafc4);min-height:auto}.sefin-sidebar__header .sefin-sidebar__header-content{display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);width:100%}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container{width:40px;height:40px;border-radius:12px;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon{color:#fff;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon svg{width:24px;height:24px;color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:flex;flex-direction:column;gap:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-title{color:#fff;font-size:18px;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)}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-subtitle{color:#fffc;font-size:12px;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)}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem) var(--sefin-spacing-sm, .5rem);justify-content:center}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content{flex-direction:column}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:none}.sefin-sidebar__footer{padding:var(--sefin-spacing-md, 1rem);border-top:1px solid #e8e8e8}.sefin-sidebar__footer .sefin-sidebar__footer-content{background:#f5f5f5;border-radius:8px;padding:var(--sefin-spacing-sm, .75rem);text-align:center}.sefin-sidebar__footer .sefin-sidebar__footer-content .sefin-sidebar__footer-text{color:#828282;font-size:12px;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__toggle{position:absolute;right:-14px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:none;background:linear-gradient(135deg,#fff,#f8f9fa);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #0000001a,0 0 0 1px #0000000d,inset 0 1px #ffffffe6;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:101;color:var(--sefin-color-text, #4a5568);padding:0;margin:0;line-height:0}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex-shrink:0;transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon svg{width:14px;height:14px;color:currentColor;fill:none;stroke:currentColor;pointer-events:none}.sefin-sidebar__toggle:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,transparent 50%);pointer-events:none;opacity:.5}.sefin-sidebar__toggle:hover{background:linear-gradient(135deg,#55c3d8,#4db8cc);color:#fff;transform:translateY(-50%) scale(1.08);box-shadow:0 4px 20px #55c3d866,0 0 0 1px #55c3d833,inset 0 1px #ffffff4d}.sefin-sidebar__toggle:hover:before{opacity:.2;background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,transparent 50%)}.sefin-sidebar__toggle:hover .sefin-sidebar__toggle-icon{transform:scale(1.1)}.sefin-sidebar__toggle:active{transform:translateY(-50%) scale(1.02);box-shadow:0 2px 12px #55c3d880,0 0 0 1px #55c3d84d,inset 0 2px 4px #0000001a}.sefin-sidebar__toggle:focus{outline:2px solid var(--sefin-color-primary, #55c3d8);outline-offset:4px;outline-style:solid}.sefin-sidebar--collapsed .sefin-sidebar__toggle{right:-14px}.sefin-sidebar__close-button{position:absolute;right:var(--sefin-spacing-md, 1rem);top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:none;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;z-index:101;color:#fff;padding:0;margin:0;line-height:0}.sefin-sidebar__close-button .sefin-sidebar__close-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;pointer-events:none}.sefin-sidebar__close-button .sefin-sidebar__close-icon svg{width:20px;height:20px;color:currentColor;fill:none;stroke:currentColor;stroke-width:2;pointer-events:none}.sefin-sidebar__close-button:hover{background:#ffffff4d;transform:translateY(-50%) scale(1.05)}.sefin-sidebar__close-button:active{transform:translateY(-50%) scale(.95)}.sefin-sidebar__close-button:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.sefin-sidebar__nav{flex:1;padding:var(--sefin-spacing-sm, .75rem);overflow:hidden}.sefin-sidebar__nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.sefin-sidebar__nav-item{margin:0}.sefin-sidebar__nav-item.sefin-sidebar__nav-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-link{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#383838;font-size:var(--sefin-font-size-base, 1rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0;justify-content:flex-start;overflow:hidden;min-width:0;font-weight:500}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link:focus{outline:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--expandable{font-weight:500}.sefin-sidebar__nav-icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:8px;background:#e6f7fb;transition:all .2s ease-in-out}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{width:20px;height:20px;color:#55c3d8;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper{background:#55c3d8}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__nav-expand-icon-wrapper{margin-left:auto;transition:transform .2s ease;display:flex;align-items:center;justify-content:center}.sefin-sidebar__nav-expand-icon-wrapper.sefin-sidebar__nav-expand-icon-wrapper--expanded{transform:rotate(180deg)}.sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#828282;width:16px;height:16px;fill:none;stroke:currentColor;transition:color .2s ease-in-out}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#fff}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#55c3d8}.sefin-sidebar__nav-label{flex:1;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;opacity:1;transition:opacity .2s ease;min-width:0;overflow:hidden;display:block;line-height:1.4;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-list{list-style:none;margin:4px 0 8px;padding:0;animation:slideDown .2s ease-out}.sefin-sidebar__nav-sub-item{margin:0 0 2px}.sefin-sidebar__nav-sub-item.sefin-sidebar__nav-sub-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-section-header{padding:var(--sefin-spacing-md, 1rem) var(--sefin-spacing-md, 1rem) var(--sefin-spacing-xs, .5rem) var(--sefin-spacing-md, 1rem)}.sefin-sidebar__nav-section-header .sefin-sidebar__section-header-text{color:#828282;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-sub-list{list-style:none;margin:2px 0 8px;padding:0;animation:slideDown .2s ease-out;display:flex;flex-direction:column;gap:2px}.sefin-sidebar__nav-sub-sub-item{margin:0 0 2px}.sefin-sidebar__nav-link--sub-sub{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#4f4f4f;font-size:var(--sefin-font-size-sm, .875rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0 var(--sefin-spacing-md, .5rem);justify-content:flex-start;overflow:hidden;min-width:0}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-bullet{background:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:focus{outline:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-bullet{width:6px;height:6px;border-radius:50%;background:#cecece;transition:background-color .2s ease-in-out;flex-shrink:0}.sefin-sidebar .sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-bullet{display:none}@keyframes slideDown{0%{opacity:0;max-height:0;overflow:hidden}to{opacity:1;max-height:1000px}}.sefin-sidebar.sefin-sidebar--collapsed{width:80px;min-width:80px}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-link{justify-content:center;padding:var(--sefin-spacing-md, 1rem);border-radius:12px;margin:0}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-label{opacity:0;width:0;overflow:hidden}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-expand-icon,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-list,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-sub-list{display:none}.sefin-sidebar.sefin-sidebar--mobile .sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem) var(--sefin-spacing-sm, .5rem);justify-content:center}.sefin-sidebar.sefin-sidebar--mobile .sefin-sidebar__header .sefin-sidebar__header-content{flex-direction:column}.sefin-sidebar.sefin-sidebar--mobile .sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:none}.sefin-sidebar.sefin-sidebar--mobile{transform:translate(0);z-index:1000;width:80px;min-width:80px}\n"] }]
|
|
6599
6714
|
}], ctorParameters: () => [{ type: i1$2.Router }, { type: i0.ChangeDetectorRef }, { type: i1$1.DomSanitizer }], propDecorators: { navItems: [{
|
|
6600
6715
|
type: Input
|
|
6601
6716
|
}], isMobile: [{
|
|
@@ -6861,5 +6976,5 @@ const STYLES_PATH = './styles/index.scss';
|
|
|
6861
6976
|
* Generated bundle index. Do not edit.
|
|
6862
6977
|
*/
|
|
6863
6978
|
|
|
6864
|
-
export { AccordionItemComponent, AlertComponent, AppBarComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, DrawerComponent, DropdownMenuComponent, FabButtonComponent, FormFieldComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, PaginationComponent, ProgressBarComponent, RadioComponent, RateComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SidebarComponent, SpacerComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TableComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent, buildDisplayedColumns, isMenuItem };
|
|
6979
|
+
export { AccordionItemComponent, AlertComponent, AppBarComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, DrawerComponent, DropdownMenuComponent, FabButtonComponent, FormFieldComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, ModalComponent, PaginationComponent, ProgressBarComponent, RadioComponent, RateComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SidebarComponent, SpacerComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TableComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent, buildDisplayedColumns, isMenuItem };
|
|
6865
6980
|
//# sourceMappingURL=lesterarte-sefin-ui.mjs.map
|