@balinasoftware/balinaui-components 1.0.0 → 2.1.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.
|
@@ -19,6 +19,7 @@ class Navbar {
|
|
|
19
19
|
initiallyLoggedIn = false;
|
|
20
20
|
userName = 'Guest User';
|
|
21
21
|
userEmail = 'guest@example.com';
|
|
22
|
+
image = 'https://i.pinimg.com/1200x/4a/57/0c/4a570c4e8dbb4729567848eb69c19055.jpg';
|
|
22
23
|
login = new EventEmitter();
|
|
23
24
|
logout = new EventEmitter();
|
|
24
25
|
isLoggedIn = false;
|
|
@@ -48,11 +49,11 @@ class Navbar {
|
|
|
48
49
|
}
|
|
49
50
|
}
|
|
50
51
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Navbar, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
51
|
-
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" }, 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=\"
|
|
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\" alt=\"Aero logo\" class=\"anv-brand-icon\" >\n </div>\n\n <nav class=\"anv-links\">\n <a *ngFor=\"let link of links\" href=\"#\" class=\"anv-link\">{{ link }}</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: [".anv-navbar{width:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.anv-topbar{height:6px;background:#2740a8;width:100%}.anv-stripes{width:100%;background-color:#fff;border-bottom:1px solid #e5e5e5}.anv-content{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:18px 32px;gap:24px}.anv-brand{display:flex;align-items:center;gap:8px}.anv-brand-icon{height:60px;width:auto;object-fit:contain}.anv-brand-name{font-weight:700;font-size:20px;color:#1f4d4a;letter-spacing:.3px}.anv-links{display:flex;align-items:center;gap:32px;margin-left:auto;margin-right:28px}.anv-link{color:#4a4a4a;font-weight:700;font-size:16px;text-decoration:none;white-space:nowrap;transition:opacity .15s ease}.anv-link:hover{opacity:.7}.anv-actions{display:flex;align-items:center;gap:18px}.anv-icon-btn{background:none;border:none;cursor:pointer;color:#1a1a1a;display:flex;align-items:center;justify-content:center;padding:4px;transition:opacity .15s ease}.anv-icon-btn:hover{opacity:.7}.anv-divider{width:1px;height:26px;background:#d9d9d9}.anv-login-btn{background:#1f4d4a;color:#fff;border:none;padding:9px 22px;border-radius:999px;font-weight:600;font-size:14px;cursor:pointer;transition:background .15s ease,transform .1s ease}.anv-login-btn:hover{background:#163836}.anv-login-btn:active{transform:scale(.97)}.anv-profile-wrap{position:relative}.anv-profile-btn{width:42px;height:42px;border-radius:50%;background:#111;color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s ease}.anv-profile-btn:hover{transform:scale(1.05)}.anv-dropdown{position:absolute;top:calc(100% + 12px);right:0;background:#fff;border-radius:12px;box-shadow:0 8px 24px #00000026;min-width:220px;padding:8px;z-index:50;animation:anv-dropdown-in .15s ease}@keyframes anv-dropdown-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.anv-dropdown-header{display:flex;align-items:center;gap:10px;padding:10px 8px}.anv-dropdown-avatar{width:38px;height:38px;border-radius:50%;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}.anv-dropdown-info{display:flex;flex-direction:column;overflow:hidden}.anv-dropdown-name{font-weight:600;font-size:14px;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.anv-dropdown-email{font-size:12px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.anv-dropdown-sep{border:none;border-top:1px solid #eeeeee;margin:4px 0}.anv-dropdown-item{width:100%;display:flex;align-items:center;gap:10px;background:none;border:none;padding:10px 8px;border-radius:8px;font-size:14px;font-weight:500;color:#1a1a1a;cursor:pointer;text-align:left;transition:background .15s ease}.anv-dropdown-item:hover{background:#f5f5f5}.anv-logout{color:#c0392b}@media(max-width:640px){.anv-content{padding:12px 16px;gap:12px}.anv-links{gap:16px;margin-right:12px}.anv-link{font-size:13px}.anv-brand-name{font-size:17px}}\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"] }] });
|
|
52
53
|
}
|
|
53
54
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Navbar, decorators: [{
|
|
54
55
|
type: Component,
|
|
55
|
-
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=\"
|
|
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\" alt=\"Aero logo\" class=\"anv-brand-icon\" >\n </div>\n\n <nav class=\"anv-links\">\n <a *ngFor=\"let link of links\" href=\"#\" class=\"anv-link\">{{ link }}</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: [".anv-navbar{width:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.anv-topbar{height:6px;background:#2740a8;width:100%}.anv-stripes{width:100%;background-color:#fff;border-bottom:1px solid #e5e5e5}.anv-content{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:18px 32px;gap:24px}.anv-brand{display:flex;align-items:center;gap:8px}.anv-brand-icon{height:60px;width:auto;object-fit:contain}.anv-brand-name{font-weight:700;font-size:20px;color:#1f4d4a;letter-spacing:.3px}.anv-links{display:flex;align-items:center;gap:32px;margin-left:auto;margin-right:28px}.anv-link{color:#4a4a4a;font-weight:700;font-size:16px;text-decoration:none;white-space:nowrap;transition:opacity .15s ease}.anv-link:hover{opacity:.7}.anv-actions{display:flex;align-items:center;gap:18px}.anv-icon-btn{background:none;border:none;cursor:pointer;color:#1a1a1a;display:flex;align-items:center;justify-content:center;padding:4px;transition:opacity .15s ease}.anv-icon-btn:hover{opacity:.7}.anv-divider{width:1px;height:26px;background:#d9d9d9}.anv-login-btn{background:#1f4d4a;color:#fff;border:none;padding:9px 22px;border-radius:999px;font-weight:600;font-size:14px;cursor:pointer;transition:background .15s ease,transform .1s ease}.anv-login-btn:hover{background:#163836}.anv-login-btn:active{transform:scale(.97)}.anv-profile-wrap{position:relative}.anv-profile-btn{width:42px;height:42px;border-radius:50%;background:#111;color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s ease}.anv-profile-btn:hover{transform:scale(1.05)}.anv-dropdown{position:absolute;top:calc(100% + 12px);right:0;background:#fff;border-radius:12px;box-shadow:0 8px 24px #00000026;min-width:220px;padding:8px;z-index:50;animation:anv-dropdown-in .15s ease}@keyframes anv-dropdown-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.anv-dropdown-header{display:flex;align-items:center;gap:10px;padding:10px 8px}.anv-dropdown-avatar{width:38px;height:38px;border-radius:50%;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}.anv-dropdown-info{display:flex;flex-direction:column;overflow:hidden}.anv-dropdown-name{font-weight:600;font-size:14px;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.anv-dropdown-email{font-size:12px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.anv-dropdown-sep{border:none;border-top:1px solid #eeeeee;margin:4px 0}.anv-dropdown-item{width:100%;display:flex;align-items:center;gap:10px;background:none;border:none;padding:10px 8px;border-radius:8px;font-size:14px;font-weight:500;color:#1a1a1a;cursor:pointer;text-align:left;transition:background .15s ease}.anv-dropdown-item:hover{background:#f5f5f5}.anv-logout{color:#c0392b}@media(max-width:640px){.anv-content{padding:12px 16px;gap:12px}.anv-links{gap:16px;margin-right:12px}.anv-link{font-size:13px}.anv-brand-name{font-size:17px}}\n"] }]
|
|
56
57
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { brand: [{
|
|
57
58
|
type: Input
|
|
58
59
|
}], links: [{
|
|
@@ -63,6 +64,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
63
64
|
type: Input
|
|
64
65
|
}], userEmail: [{
|
|
65
66
|
type: Input
|
|
67
|
+
}], image: [{
|
|
68
|
+
type: Input
|
|
66
69
|
}], login: [{
|
|
67
70
|
type: Output
|
|
68
71
|
}], logout: [{
|
|
@@ -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: string[] = ['Contact Us', 'Parameter'];\n @Input() initiallyLoggedIn = false;\n @Input() userName = 'Guest User';\n @Input() userEmail = 'guest@example.com';\n\n @Output() login = new EventEmitter();\n @Output() logout = new EventEmitter();\n\n isLoggedIn = false;\n isDropdownOpen = false;\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=\"
|
|
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: string[] = ['Contact Us', 'Parameter'];\n @Input() initiallyLoggedIn = false;\n @Input() userName = 'Guest User';\n @Input() userEmail = 'guest@example.com';\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;\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\" alt=\"Aero logo\" class=\"anv-brand-icon\" >\n </div>\n\n <nav class=\"anv-links\">\n <a *ngFor=\"let link of links\" href=\"#\" class=\"anv-link\">{{ link }}</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
|
@@ -13,6 +13,7 @@ declare class Navbar {
|
|
|
13
13
|
initiallyLoggedIn: boolean;
|
|
14
14
|
userName: string;
|
|
15
15
|
userEmail: string;
|
|
16
|
+
image: string;
|
|
16
17
|
login: EventEmitter<any>;
|
|
17
18
|
logout: EventEmitter<any>;
|
|
18
19
|
isLoggedIn: boolean;
|
|
@@ -24,7 +25,7 @@ declare class Navbar {
|
|
|
24
25
|
handleLogoutClick(): void;
|
|
25
26
|
onDocumentClick(event: MouseEvent): void;
|
|
26
27
|
static ɵfac: i0.ɵɵFactoryDeclaration<Navbar, never>;
|
|
27
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<Navbar, "lib-navbar", never, { "brand": { "alias": "brand"; "required": false; }; "links": { "alias": "links"; "required": false; }; "initiallyLoggedIn": { "alias": "initiallyLoggedIn"; "required": false; }; "userName": { "alias": "userName"; "required": false; }; "userEmail": { "alias": "userEmail"; "required": false; }; }, { "login": "login"; "logout": "logout"; }, never, never, true, never>;
|
|
28
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<Navbar, "lib-navbar", never, { "brand": { "alias": "brand"; "required": false; }; "links": { "alias": "links"; "required": false; }; "initiallyLoggedIn": { "alias": "initiallyLoggedIn"; "required": false; }; "userName": { "alias": "userName"; "required": false; }; "userEmail": { "alias": "userEmail"; "required": false; }; "image": { "alias": "image"; "required": false; }; }, { "login": "login"; "logout": "logout"; }, never, never, true, never>;
|
|
28
29
|
}
|
|
29
30
|
|
|
30
31
|
export { BalinauiComponents, Navbar };
|