@balinasoftware/balinaui-components 2.1.0 → 2.2.0
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.
|
@@ -15,7 +15,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
15
15
|
class Navbar {
|
|
16
16
|
elementRef;
|
|
17
17
|
brand = 'Aero';
|
|
18
|
-
links = [
|
|
18
|
+
links = [
|
|
19
|
+
{ label: 'Home', url: '/' },
|
|
20
|
+
{ label: 'About', url: '/about' },
|
|
21
|
+
{ label: 'Contact', url: '/contact' }
|
|
22
|
+
];
|
|
19
23
|
initiallyLoggedIn = false;
|
|
20
24
|
userName = 'Guest User';
|
|
21
25
|
userEmail = 'guest@example.com';
|
|
@@ -24,6 +28,7 @@ class Navbar {
|
|
|
24
28
|
logout = new EventEmitter();
|
|
25
29
|
isLoggedIn = false;
|
|
26
30
|
isDropdownOpen = false;
|
|
31
|
+
Aerologo;
|
|
27
32
|
constructor(elementRef) {
|
|
28
33
|
this.elementRef = elementRef;
|
|
29
34
|
}
|
|
@@ -49,11 +54,11 @@ class Navbar {
|
|
|
49
54
|
}
|
|
50
55
|
}
|
|
51
56
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Navbar, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
52
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: Navbar, isStandalone: true, selector: "lib-navbar", inputs: { brand: "brand", links: "links", initiallyLoggedIn: "initiallyLoggedIn", userName: "userName", userEmail: "userEmail", image: "image" }, outputs: { login: "login", logout: "logout" }, host: { listeners: { "document:mousedown": "onDocumentClick($event)" } }, ngImport: i0, template: "<header class=\"anv-navbar\">\n <div class=\"anv-topbar\"></div>\n <div class=\"anv-stripes\">\n <div class=\"anv-content\">\n <div class=\"anv-brand\">\n <img [src]=\"image\"
|
|
57
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: Navbar, isStandalone: true, selector: "lib-navbar", inputs: { brand: "brand", links: "links", initiallyLoggedIn: "initiallyLoggedIn", userName: "userName", userEmail: "userEmail", image: "image" }, outputs: { login: "login", logout: "logout" }, host: { listeners: { "document:mousedown": "onDocumentClick($event)" } }, ngImport: i0, template: "<header class=\"anv-navbar\">\n <div class=\"anv-topbar\"></div>\n <div class=\"anv-stripes\">\n <div class=\"anv-content\">\n <div class=\"anv-brand\">\n <img [src]=\"image\"\n [alt]=\"Aerologo\"\n class=\"anv-brand-icon\" >\n </div>\n\n <nav class=\"anv-links\">\n <a\n *ngFor=\"let link of links\"\n [href]=\"link.url\"\n class=\"anv-link\">\n {{ link.label }}\n </a>\n </nav>\n\n <div class=\"anv-actions\">\n <button class=\"anv-icon-btn\" aria-label=\"Notifications\">\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"/>\n <path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"/>\n </svg>\n </button>\n\n <span class=\"anv-divider\"></span>\n\n <button *ngIf=\"!isLoggedIn\" class=\"anv-login-btn\" (click)=\"handleLoginClick()\">\n Login\n </button>\n\n <div *ngIf=\"isLoggedIn\" class=\"anv-profile-wrap\">\n <button\n class=\"anv-profile-btn\"\n (click)=\"handleProfileClick()\"\n [attr.aria-expanded]=\"isDropdownOpen\"\n aria-haspopup=\"true\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/>\n <circle cx=\"12\" cy=\"7\" r=\"4\"/>\n </svg>\n </button>\n\n <div *ngIf=\"isDropdownOpen\" class=\"anv-dropdown\">\n <div class=\"anv-dropdown-header\">\n <div class=\"anv-dropdown-avatar\">\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/>\n <circle cx=\"12\" cy=\"7\" r=\"4\"/>\n </svg>\n </div>\n <div class=\"anv-dropdown-info\">\n <span class=\"anv-dropdown-name\">{{ userName }}</span>\n <span class=\"anv-dropdown-email\">{{ userEmail }}</span>\n </div>\n </div>\n <hr class=\"anv-dropdown-sep\" />\n <button class=\"anv-dropdown-item anv-logout\" (click)=\"handleLogoutClick()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/>\n <polyline points=\"16 17 21 12 16 7\"/>\n <line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\n </svg>\n Log out\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n</header>", styles: ["*,*:before,*:after{box-sizing:border-box}.anv-navbar{width:100%;font-family:Inter,Arial,sans-serif;background:#fff;position:relative;z-index:1000}.anv-topbar{width:100%;height:6px;background:#2755c8}.anv-stripes{width:100%;background:#fff;border-bottom:1px solid #e6e6e6;box-shadow:0 2px 12px #0000000d}.anv-content{width:min(1350px,100%);margin:auto 20px auto auto;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:18px clamp(50px,3vw,60px)}.anv-brand{display:flex;align-items:center;gap:12px;flex-shrink:0}.anv-brand-icon{width:clamp(55px,5vw,90px);height:auto;object-fit:contain;transition:.3s}.anv-brand-icon:hover{transform:scale(1.08)}.anv-brand-name{font-size:22px;font-weight:700;color:#1f4d4a;white-space:nowrap}.anv-links{display:flex;justify-content:right;align-items:center;flex:1;gap:clamp(18px,3vw,40px);min-width:0}.anv-link{position:relative;text-decoration:none;color:#555;font-size:17px;font-weight:600;transition:.3s;white-space:nowrap}.anv-link:hover{color:#1f4d4a}.anv-link:after{content:\"\";position:absolute;left:0;bottom:-8px;width:0;height:2px;background:#1f4d4a;transition:.3s}.anv-link:hover:after{width:100%}.anv-actions{display:flex;align-items:center;gap:18px;flex-shrink:0;margin-left:auto}.anv-icon-btn{width:42px;height:42px;display:flex;justify-content:center;align-items:center;border:none;background:none;cursor:pointer;transition:.3s;border-radius:50%}.anv-icon-btn:hover{background:#f4f4f4;transform:translateY(-2px)}.anv-divider{width:1px;height:32px;background:#d8d8d8}.anv-login-btn{padding:10px 24px;border:none;border-radius:30px;background:#1f4d4a;color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:.3s}.anv-login-btn:hover{background:#163836;transform:translateY(-2px);box-shadow:0 8px 18px #0000002e}.anv-login-btn:active{transform:scale(.96)}.anv-profile-wrap{position:relative}.anv-profile-btn{width:48px;height:48px;border:none;border-radius:50%;background:#111;color:#fff;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:.3s}.anv-profile-btn:hover{transform:scale(1.08);box-shadow:0 8px 18px #00000026}.anv-dropdown{position:absolute;top:calc(100% + 12px);right:0;width:260px;background:#fff;border-radius:14px;box-shadow:0 12px 30px #0000002e;overflow:hidden;animation:dropdown .25s ease;z-index:999}@keyframes dropdown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.anv-dropdown-header{display:flex;align-items:center;gap:12px;padding:16px}.anv-dropdown-avatar{width:45px;height:45px;border-radius:50%;background:#111;color:#fff;display:flex;justify-content:center;align-items:center;font-weight:700}.anv-dropdown-info{display:flex;flex-direction:column;overflow:hidden}.anv-dropdown-name{font-weight:700;font-size:15px}.anv-dropdown-email{font-size:13px;color:#777;overflow:hidden;text-overflow:ellipsis}.anv-dropdown-sep{border:none;border-top:1px solid #eee;margin:0}.anv-dropdown-item{width:100%;padding:14px 18px;background:none;border:none;cursor:pointer;text-align:left;font-size:15px;transition:.3s}.anv-dropdown-item:hover{background:#f7f7f7}.anv-logout{color:#d32f2f;font-weight:600}@media(max-width:992px){.anv-content{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 20px;gap:12px}.anv-brand{flex-shrink:0}.anv-brand-icon{width:60px}.anv-links{flex:1;display:flex;justify-content:center;gap:18px;min-width:0;overflow:hidden}.anv-link{font-size:14px}.anv-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}.anv-login-btn{padding:8px 16px;font-size:13px}.anv-profile-btn{width:40px;height:40px}}@media(max-width:768px){.anv-content{padding:12px 16px;gap:10px}.anv-brand-icon{width:50px}.anv-link{font-size:13px}.anv-links{gap:10px;overflow-x:auto;scrollbar-width:none}.anv-links::-webkit-scrollbar{display:none}.anv-login-btn{padding:7px 12px;font-size:12px}.anv-profile-btn{width:36px;height:36px}}.anv-navbar,.anv-stripes{width:100%;background:#fff}.anv-content{width:100%;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
53
58
|
}
|
|
54
59
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Navbar, decorators: [{
|
|
55
60
|
type: Component,
|
|
56
|
-
args: [{ selector: 'lib-navbar', imports: [CommonModule], template: "<header class=\"anv-navbar\">\n <div class=\"anv-topbar\"></div>\n <div class=\"anv-stripes\">\n <div class=\"anv-content\">\n <div class=\"anv-brand\">\n <img [src]=\"image\"
|
|
61
|
+
args: [{ selector: 'lib-navbar', imports: [CommonModule], template: "<header class=\"anv-navbar\">\n <div class=\"anv-topbar\"></div>\n <div class=\"anv-stripes\">\n <div class=\"anv-content\">\n <div class=\"anv-brand\">\n <img [src]=\"image\"\n [alt]=\"Aerologo\"\n class=\"anv-brand-icon\" >\n </div>\n\n <nav class=\"anv-links\">\n <a\n *ngFor=\"let link of links\"\n [href]=\"link.url\"\n class=\"anv-link\">\n {{ link.label }}\n </a>\n </nav>\n\n <div class=\"anv-actions\">\n <button class=\"anv-icon-btn\" aria-label=\"Notifications\">\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"/>\n <path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"/>\n </svg>\n </button>\n\n <span class=\"anv-divider\"></span>\n\n <button *ngIf=\"!isLoggedIn\" class=\"anv-login-btn\" (click)=\"handleLoginClick()\">\n Login\n </button>\n\n <div *ngIf=\"isLoggedIn\" class=\"anv-profile-wrap\">\n <button\n class=\"anv-profile-btn\"\n (click)=\"handleProfileClick()\"\n [attr.aria-expanded]=\"isDropdownOpen\"\n aria-haspopup=\"true\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/>\n <circle cx=\"12\" cy=\"7\" r=\"4\"/>\n </svg>\n </button>\n\n <div *ngIf=\"isDropdownOpen\" class=\"anv-dropdown\">\n <div class=\"anv-dropdown-header\">\n <div class=\"anv-dropdown-avatar\">\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/>\n <circle cx=\"12\" cy=\"7\" r=\"4\"/>\n </svg>\n </div>\n <div class=\"anv-dropdown-info\">\n <span class=\"anv-dropdown-name\">{{ userName }}</span>\n <span class=\"anv-dropdown-email\">{{ userEmail }}</span>\n </div>\n </div>\n <hr class=\"anv-dropdown-sep\" />\n <button class=\"anv-dropdown-item anv-logout\" (click)=\"handleLogoutClick()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/>\n <polyline points=\"16 17 21 12 16 7\"/>\n <line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\n </svg>\n Log out\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n</header>", styles: ["*,*:before,*:after{box-sizing:border-box}.anv-navbar{width:100%;font-family:Inter,Arial,sans-serif;background:#fff;position:relative;z-index:1000}.anv-topbar{width:100%;height:6px;background:#2755c8}.anv-stripes{width:100%;background:#fff;border-bottom:1px solid #e6e6e6;box-shadow:0 2px 12px #0000000d}.anv-content{width:min(1350px,100%);margin:auto 20px auto auto;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:18px clamp(50px,3vw,60px)}.anv-brand{display:flex;align-items:center;gap:12px;flex-shrink:0}.anv-brand-icon{width:clamp(55px,5vw,90px);height:auto;object-fit:contain;transition:.3s}.anv-brand-icon:hover{transform:scale(1.08)}.anv-brand-name{font-size:22px;font-weight:700;color:#1f4d4a;white-space:nowrap}.anv-links{display:flex;justify-content:right;align-items:center;flex:1;gap:clamp(18px,3vw,40px);min-width:0}.anv-link{position:relative;text-decoration:none;color:#555;font-size:17px;font-weight:600;transition:.3s;white-space:nowrap}.anv-link:hover{color:#1f4d4a}.anv-link:after{content:\"\";position:absolute;left:0;bottom:-8px;width:0;height:2px;background:#1f4d4a;transition:.3s}.anv-link:hover:after{width:100%}.anv-actions{display:flex;align-items:center;gap:18px;flex-shrink:0;margin-left:auto}.anv-icon-btn{width:42px;height:42px;display:flex;justify-content:center;align-items:center;border:none;background:none;cursor:pointer;transition:.3s;border-radius:50%}.anv-icon-btn:hover{background:#f4f4f4;transform:translateY(-2px)}.anv-divider{width:1px;height:32px;background:#d8d8d8}.anv-login-btn{padding:10px 24px;border:none;border-radius:30px;background:#1f4d4a;color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:.3s}.anv-login-btn:hover{background:#163836;transform:translateY(-2px);box-shadow:0 8px 18px #0000002e}.anv-login-btn:active{transform:scale(.96)}.anv-profile-wrap{position:relative}.anv-profile-btn{width:48px;height:48px;border:none;border-radius:50%;background:#111;color:#fff;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:.3s}.anv-profile-btn:hover{transform:scale(1.08);box-shadow:0 8px 18px #00000026}.anv-dropdown{position:absolute;top:calc(100% + 12px);right:0;width:260px;background:#fff;border-radius:14px;box-shadow:0 12px 30px #0000002e;overflow:hidden;animation:dropdown .25s ease;z-index:999}@keyframes dropdown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.anv-dropdown-header{display:flex;align-items:center;gap:12px;padding:16px}.anv-dropdown-avatar{width:45px;height:45px;border-radius:50%;background:#111;color:#fff;display:flex;justify-content:center;align-items:center;font-weight:700}.anv-dropdown-info{display:flex;flex-direction:column;overflow:hidden}.anv-dropdown-name{font-weight:700;font-size:15px}.anv-dropdown-email{font-size:13px;color:#777;overflow:hidden;text-overflow:ellipsis}.anv-dropdown-sep{border:none;border-top:1px solid #eee;margin:0}.anv-dropdown-item{width:100%;padding:14px 18px;background:none;border:none;cursor:pointer;text-align:left;font-size:15px;transition:.3s}.anv-dropdown-item:hover{background:#f7f7f7}.anv-logout{color:#d32f2f;font-weight:600}@media(max-width:992px){.anv-content{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 20px;gap:12px}.anv-brand{flex-shrink:0}.anv-brand-icon{width:60px}.anv-links{flex:1;display:flex;justify-content:center;gap:18px;min-width:0;overflow:hidden}.anv-link{font-size:14px}.anv-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}.anv-login-btn{padding:8px 16px;font-size:13px}.anv-profile-btn{width:40px;height:40px}}@media(max-width:768px){.anv-content{padding:12px 16px;gap:10px}.anv-brand-icon{width:50px}.anv-link{font-size:13px}.anv-links{gap:10px;overflow-x:auto;scrollbar-width:none}.anv-links::-webkit-scrollbar{display:none}.anv-login-btn{padding:7px 12px;font-size:12px}.anv-profile-btn{width:36px;height:36px}}.anv-navbar,.anv-stripes{width:100%;background:#fff}.anv-content{width:100%;box-sizing:border-box}\n"] }]
|
|
57
62
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { brand: [{
|
|
58
63
|
type: Input
|
|
59
64
|
}], links: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"balinasoftware-balinaui-components.mjs","sources":["../../../projects/balinaui-components/src/lib/balinaui-components.ts","../../../projects/balinaui-components/src/lib/navbar/navbar.ts","../../../projects/balinaui-components/src/lib/navbar/navbar.html","../../../projects/balinaui-components/src/public-api.ts","../../../projects/balinaui-components/src/balinasoftware-balinaui-components.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n selector: 'lib-balinaui-components',\n imports: [],\n template: ` <p>balinaui-components works!</p> `,\n styles: ``,\n})\nexport class BalinauiComponents {}\n","import { Component,ElementRef,HostListener,Input,Output,ViewEncapsulation, } from '@angular/core';\nimport { EventEmitter } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n@Component({\n selector: 'lib-navbar',\n imports: [CommonModule],\n templateUrl: './navbar.html',\n styleUrl: './navbar.css',\n})\nexport class Navbar {\n @Input() brand = 'Aero';\n @Input() links:
|
|
1
|
+
{"version":3,"file":"balinasoftware-balinaui-components.mjs","sources":["../../../projects/balinaui-components/src/lib/balinaui-components.ts","../../../projects/balinaui-components/src/lib/navbar/navbar.ts","../../../projects/balinaui-components/src/lib/navbar/navbar.html","../../../projects/balinaui-components/src/public-api.ts","../../../projects/balinaui-components/src/balinasoftware-balinaui-components.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n selector: 'lib-balinaui-components',\n imports: [],\n template: ` <p>balinaui-components works!</p> `,\n styles: ``,\n})\nexport class BalinauiComponents {}\n","import { Component,ElementRef,HostListener,Input,Output,ViewEncapsulation, } from '@angular/core';\nimport { EventEmitter } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nexport interface NavLink {\n label: string;\n url: string;\n}\n\n@Component({\n selector: 'lib-navbar',\n imports: [CommonModule],\n templateUrl: './navbar.html',\n styleUrl: './navbar.css',\n})\nexport class Navbar {\n @Input() brand = 'Aero';\n @Input() links: NavLink[] = [\n { label: 'Home', url: '/' },\n { label: 'About', url: '/about' },\n { label: 'Contact', url: '/contact' }\n ];\n @Input() initiallyLoggedIn = false;\n @Input() userName = 'Guest User';\n @Input() userEmail = 'guest@example.com';\n \n @Input()image = 'https://i.pinimg.com/1200x/4a/57/0c/4a570c4e8dbb4729567848eb69c19055.jpg';\n\n @Output() login = new EventEmitter();\n @Output() logout = new EventEmitter();\n\n isLoggedIn = false;\n isDropdownOpen = false;\nAerologo: any;\n\n constructor(private elementRef: ElementRef) {}\n\n ngOnInit() {\n this.isLoggedIn = this.initiallyLoggedIn;\n }\n\n handleLoginClick() {\n this.isLoggedIn = true;\n this.login.emit();\n }\n\n handleProfileClick() {\n this.isDropdownOpen = !this.isDropdownOpen;\n }\n\n handleLogoutClick() {\n this.isLoggedIn = false;\n this.isDropdownOpen = false;\n this.logout.emit();\n }\n\n // Close the dropdown when clicking outside of it\n @HostListener('document:mousedown', ['$event'])\n onDocumentClick(event: MouseEvent) {\n if (this.isDropdownOpen && !this.elementRef.nativeElement.contains(event.target)) {\n this.isDropdownOpen = false;\n }\n }\n}\n","<header class=\"anv-navbar\">\n <div class=\"anv-topbar\"></div>\n <div class=\"anv-stripes\">\n <div class=\"anv-content\">\n <div class=\"anv-brand\">\n <img [src]=\"image\"\n [alt]=\"Aerologo\"\n class=\"anv-brand-icon\" >\n </div>\n\n <nav class=\"anv-links\">\n <a\n *ngFor=\"let link of links\"\n [href]=\"link.url\"\n class=\"anv-link\">\n {{ link.label }}\n </a>\n </nav>\n\n <div class=\"anv-actions\">\n <button class=\"anv-icon-btn\" aria-label=\"Notifications\">\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"/>\n <path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"/>\n </svg>\n </button>\n\n <span class=\"anv-divider\"></span>\n\n <button *ngIf=\"!isLoggedIn\" class=\"anv-login-btn\" (click)=\"handleLoginClick()\">\n Login\n </button>\n\n <div *ngIf=\"isLoggedIn\" class=\"anv-profile-wrap\">\n <button\n class=\"anv-profile-btn\"\n (click)=\"handleProfileClick()\"\n [attr.aria-expanded]=\"isDropdownOpen\"\n aria-haspopup=\"true\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/>\n <circle cx=\"12\" cy=\"7\" r=\"4\"/>\n </svg>\n </button>\n\n <div *ngIf=\"isDropdownOpen\" class=\"anv-dropdown\">\n <div class=\"anv-dropdown-header\">\n <div class=\"anv-dropdown-avatar\">\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/>\n <circle cx=\"12\" cy=\"7\" r=\"4\"/>\n </svg>\n </div>\n <div class=\"anv-dropdown-info\">\n <span class=\"anv-dropdown-name\">{{ userName }}</span>\n <span class=\"anv-dropdown-email\">{{ userEmail }}</span>\n </div>\n </div>\n <hr class=\"anv-dropdown-sep\" />\n <button class=\"anv-dropdown-item anv-logout\" (click)=\"handleLogoutClick()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/>\n <polyline points=\"16 17 21 12 16 7\"/>\n <line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\n </svg>\n Log out\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n</header>","/*\n * Public API Surface of balinaui-components\n */\n\nexport * from './lib/balinaui-components';\nexport * from './lib/navbar/navbar';","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -6,10 +6,14 @@ declare class BalinauiComponents {
|
|
|
6
6
|
static ɵcmp: i0.ɵɵComponentDeclaration<BalinauiComponents, "lib-balinaui-components", never, {}, {}, never, never, true, never>;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
+
interface NavLink {
|
|
10
|
+
label: string;
|
|
11
|
+
url: string;
|
|
12
|
+
}
|
|
9
13
|
declare class Navbar {
|
|
10
14
|
private elementRef;
|
|
11
15
|
brand: string;
|
|
12
|
-
links:
|
|
16
|
+
links: NavLink[];
|
|
13
17
|
initiallyLoggedIn: boolean;
|
|
14
18
|
userName: string;
|
|
15
19
|
userEmail: string;
|
|
@@ -18,6 +22,7 @@ declare class Navbar {
|
|
|
18
22
|
logout: EventEmitter<any>;
|
|
19
23
|
isLoggedIn: boolean;
|
|
20
24
|
isDropdownOpen: boolean;
|
|
25
|
+
Aerologo: any;
|
|
21
26
|
constructor(elementRef: ElementRef);
|
|
22
27
|
ngOnInit(): void;
|
|
23
28
|
handleLoginClick(): void;
|
|
@@ -29,3 +34,4 @@ declare class Navbar {
|
|
|
29
34
|
}
|
|
30
35
|
|
|
31
36
|
export { BalinauiComponents, Navbar };
|
|
37
|
+
export type { NavLink };
|