@balinasoftware/balinaui-components 3.3.12 → 3.3.14
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.
|
@@ -8,11 +8,11 @@ import { MatIconModule } from '@angular/material/icon';
|
|
|
8
8
|
|
|
9
9
|
class BalinauiComponents {
|
|
10
10
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: BalinauiComponents, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: BalinauiComponents, isStandalone: true, selector: "
|
|
11
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: BalinauiComponents, isStandalone: true, selector: "brb-balinaui-components", ngImport: i0, template: ` <p>balinaui-components works!</p> `, isInline: true, styles: [""] });
|
|
12
12
|
}
|
|
13
13
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: BalinauiComponents, decorators: [{
|
|
14
14
|
type: Component,
|
|
15
|
-
args: [{ selector: '
|
|
15
|
+
args: [{ selector: 'brb-balinaui-components', imports: [], template: ` <p>balinaui-components works!</p> ` }]
|
|
16
16
|
}] });
|
|
17
17
|
|
|
18
18
|
class Navbar {
|
|
@@ -21,7 +21,7 @@ class Navbar {
|
|
|
21
21
|
brand = '';
|
|
22
22
|
logoAlt = '';
|
|
23
23
|
image = '';
|
|
24
|
-
|
|
24
|
+
customClass = '';
|
|
25
25
|
links = [];
|
|
26
26
|
// Authentication
|
|
27
27
|
initiallyLoggedIn = false;
|
|
@@ -62,18 +62,23 @@ class Navbar {
|
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
64
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Navbar, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
65
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: Navbar, isStandalone: true, selector: "
|
|
65
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: Navbar, isStandalone: true, selector: "brb-navbar", inputs: { brand: "brand", logoAlt: "logoAlt", image: "image", customClass: "customClass", links: "links", initiallyLoggedIn: "initiallyLoggedIn", user: "user", notificationIcon: "notificationIcon", profileIcon: "profileIcon", userIcon: "userIcon", logoutIcon: "logoutIcon" }, outputs: { login: "login", logout: "logout" }, host: { listeners: { "document:mousedown": "onDocumentClick($event)" }, properties: { "class": "this.links" } }, ngImport: i0, template: "<header class=\"anv-navbar\">\n\n <!--TOP STRIPE-->\n <div class=\"anv-topbar\"></div>\n <!--NAVBAR-->\n <div class=\"anv-stripes\">\n <div class=\"anv-content\">\n\n <!--BRAND / LOGO-->\n <img *ngIf=\"image\" [src]=\"image\" [alt]=\"logoAlt\" class=\"anv-brand-icon\" />\n <span *ngIf=\"brand\" class=\"anv-brand-name\">\n {{ brand }}\n </span>\n\n <!--NAVIGATION LINKS-->\n <nav class=\"anv-links\" aria-label=\"Main navigation\">\n <a *ngFor=\"let link of links\" [routerLink]=\"link.url\" routerLinkActive=\"anv-link-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\" class=\"anv-link\">\n {{ link.label }}\n </a>\n </nav>\n\n\n <!--ACTIONS-->\n <div class=\"anv-actions\">\n <!--NOTIFICATION-->\n <button type=\"button\" class=\"anv-icon-btn\" aria-label=\"Notifications\">\n <span class=\"material-icons\">\n {{ notificationIcon }}\n </span>\n </button>\n\n \n <!--DIVIDER-->\n <span class=\"anv-divider\"></span>\n\n <!--LOGIN-->\n <button *ngIf=\"!isLoggedIn\" type=\"button\" class=\"anv-login-btn\" (click)=\"handleLoginClick()\">\n Login\n </button>\n\n <!--PROFILE-->\n <div *ngIf=\"isLoggedIn\" class=\"anv-profile-wrap\">\n\n <!-- PROFILE BUTTON -->\n <button type=\"button\" class=\"anv-profile-btn\" (click)=\"handleProfileClick()\"\n [attr.aria-expanded]=\"isDropdownOpen\" aria-haspopup=\"true\" aria-label=\"User profile\">\n <img *ngIf=\"user.image\" [src]=\"user.image\" [alt]=\"user.name\" class=\"anv-profile-image\" />\n <span *ngIf=\"!user.image\" class=\"material-icons\">\n {{ profileIcon }}\n </span>\n \n </button>\n\n <!-- PROFILE DROPDOWN-->\n\n <div *ngIf=\"isDropdownOpen\" class=\"anv-dropdown\">\n <!-- USER INFORMATION -->\n <div class=\"anv-dropdown-header\">\n <!-- USER IMAGE -->\n <div class=\"anv-dropdown-avatar\">\n <img *ngIf=\"user.image\" [src]=\"user.image\" [alt]=\"user.name\" />\n <span *ngIf=\"!user.image\" class=\"material-icons\">\n {{ userIcon }}\n </span>\n </div>\n\n <!-- USER DETAILS -->\n\n <div class=\"anv-dropdown-info\">\n <span class=\"anv-dropdown-name\">\n {{ user.name }}\n </span>\n <span class=\"anv-dropdown-email\">\n {{ user.email }}\n </span>\n <span *ngIf=\"user.role\" class=\"anv-dropdown-role\">\n {{ user.role }}\n </span>\n </div>\n </div>\n\n <!-- DIVIDER -->\n <hr class=\"anv-dropdown-sep\">\n <!-- LOGOUT -->\n <button type=\"button\" class=\"anv-dropdown-item anv-logout\" (click)=\"handleLogoutClick()\">\n <span class=\"material-icons\">\n {{ logoutIcon }}\n </span>\n <span>\n Log out\n </span>\n </button>\n\n </div>\n </div>\n </div>\n </div>\n </div>\n</header>", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";:host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block;width:100%}:host .anv-navbar{display:flex;font-family:Inter,Arial,sans-serif;background:#fff;position:relative;z-index:1000}:host .anv-stripes{width:100%;background:#fff;border-bottom:1px solid #e6e6e6;box-shadow:0 2px 12px #0000000d}:host .anv-content{width:min(1350px,100%);margin:auto 20px auto auto;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:18px}:host .anv-brand{display:flex;align-items:center;gap:12px;flex-shrink:0}:host .anv-brand-icon{width:clamp(60px,7vw,100px);height:auto;object-fit:contain;transition:.3s}:host .anv-brand-icon:hover{transform:scale(1.08)}:host .anv-brand-name{font-size:22px;font-weight:700;color:#1f4d4a;white-space:nowrap}:host .anv-links{display:flex;justify-content:right;align-items:center;flex:1;gap:clamp(18px,3vw,40px);min-width:0}:host .anv-link{position:relative;text-decoration:none;color:#555;font-size:17px;font-weight:600;transition:.3s;white-space:nowrap}:host .anv-link:hover{color:#1f4d4a}:host .anv-link:after{content:\"\";position:absolute;left:0;bottom:-8px;width:0;height:2px;background:#1f4d4a;transition:.3s}:host .anv-link:hover:after{width:100%}:host .anv-actions{display:flex;align-items:center;gap:18px;flex-shrink:0;margin-left:auto}:host .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%}:host .anv-icon-btn:hover{background:#f4f4f4;transform:translateY(-2px)}:host .anv-divider{width:1px;height:32px;background:#d8d8d8}:host .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}:host .anv-login-btn:hover{background:#163836;transform:translateY(-2px);box-shadow:0 8px 18px #0000002e}:host .anv-login-btn:active{transform:scale(.96)}:host .anv-profile-wrap{position:relative}:host .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}:host .anv-profile-btn:hover{transform:scale(1.08);box-shadow:0 8px 18px #00000026}:host .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)}}:host .anv-dropdown-header{display:flex;align-items:center;gap:12px;padding:16px}:host .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}:host .anv-dropdown-info{display:flex;flex-direction:column;overflow:hidden}:host .anv-dropdown-name{font-weight:700;font-size:15px}:host .anv-dropdown-email{font-size:13px;color:#777;overflow:hidden;text-overflow:ellipsis}:host .anv-dropdown-sep{border:none;border-top:1px solid #eee;margin:0}:host .anv-dropdown-item{width:100%;padding:14px 18px;background:none;border:none;cursor:pointer;text-align:left;font-size:15px;transition:.3s}:host .anv-dropdown-item:hover{background:#f7f7f7}:host .anv-logout{color:#d32f2f;font-weight:600}@media(max-width:992px){:host .anv-content{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 20px;gap:12px}:host .anv-brand{flex-shrink:0}:host .anv-brand-icon{width:90px}:host .anv-links{flex:1;display:flex;justify-content:center;gap:18px;min-width:0;overflow:hidden}:host .anv-link{font-size:14px}:host .anv-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}:host .anv-login-btn{padding:8px 16px;font-size:13px}:host .anv-profile-btn{width:40px;height:40px}}@media(max-width:768px){:host .anv-content{padding:12px 16px;gap:10px}:host .anv-brand-icon{width:80px}:host .anv-link{font-size:13px}:host .anv-links{gap:10px;overflow-x:auto;scrollbar-width:none}:host .anv-links::-webkit-scrollbar{display:none}:host .anv-login-btn{padding:7px 12px;font-size:12px}:host .anv-profile-btn{width:36px;height:36px}}:host .anv-navbar{width:100%;background:#fff}:host .anv-stripes{width:100%;background:#fff}:host .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"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatIconModule }] });
|
|
66
66
|
}
|
|
67
67
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Navbar, decorators: [{
|
|
68
68
|
type: Component,
|
|
69
|
-
args: [{ selector: '
|
|
69
|
+
args: [{ selector: 'brb-navbar', standalone: true, imports: [CommonModule, RouterModule, MatIconModule], template: "<header class=\"anv-navbar\">\n\n <!--TOP STRIPE-->\n <div class=\"anv-topbar\"></div>\n <!--NAVBAR-->\n <div class=\"anv-stripes\">\n <div class=\"anv-content\">\n\n <!--BRAND / LOGO-->\n <img *ngIf=\"image\" [src]=\"image\" [alt]=\"logoAlt\" class=\"anv-brand-icon\" />\n <span *ngIf=\"brand\" class=\"anv-brand-name\">\n {{ brand }}\n </span>\n\n <!--NAVIGATION LINKS-->\n <nav class=\"anv-links\" aria-label=\"Main navigation\">\n <a *ngFor=\"let link of links\" [routerLink]=\"link.url\" routerLinkActive=\"anv-link-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\" class=\"anv-link\">\n {{ link.label }}\n </a>\n </nav>\n\n\n <!--ACTIONS-->\n <div class=\"anv-actions\">\n <!--NOTIFICATION-->\n <button type=\"button\" class=\"anv-icon-btn\" aria-label=\"Notifications\">\n <span class=\"material-icons\">\n {{ notificationIcon }}\n </span>\n </button>\n\n \n <!--DIVIDER-->\n <span class=\"anv-divider\"></span>\n\n <!--LOGIN-->\n <button *ngIf=\"!isLoggedIn\" type=\"button\" class=\"anv-login-btn\" (click)=\"handleLoginClick()\">\n Login\n </button>\n\n <!--PROFILE-->\n <div *ngIf=\"isLoggedIn\" class=\"anv-profile-wrap\">\n\n <!-- PROFILE BUTTON -->\n <button type=\"button\" class=\"anv-profile-btn\" (click)=\"handleProfileClick()\"\n [attr.aria-expanded]=\"isDropdownOpen\" aria-haspopup=\"true\" aria-label=\"User profile\">\n <img *ngIf=\"user.image\" [src]=\"user.image\" [alt]=\"user.name\" class=\"anv-profile-image\" />\n <span *ngIf=\"!user.image\" class=\"material-icons\">\n {{ profileIcon }}\n </span>\n \n </button>\n\n <!-- PROFILE DROPDOWN-->\n\n <div *ngIf=\"isDropdownOpen\" class=\"anv-dropdown\">\n <!-- USER INFORMATION -->\n <div class=\"anv-dropdown-header\">\n <!-- USER IMAGE -->\n <div class=\"anv-dropdown-avatar\">\n <img *ngIf=\"user.image\" [src]=\"user.image\" [alt]=\"user.name\" />\n <span *ngIf=\"!user.image\" class=\"material-icons\">\n {{ userIcon }}\n </span>\n </div>\n\n <!-- USER DETAILS -->\n\n <div class=\"anv-dropdown-info\">\n <span class=\"anv-dropdown-name\">\n {{ user.name }}\n </span>\n <span class=\"anv-dropdown-email\">\n {{ user.email }}\n </span>\n <span *ngIf=\"user.role\" class=\"anv-dropdown-role\">\n {{ user.role }}\n </span>\n </div>\n </div>\n\n <!-- DIVIDER -->\n <hr class=\"anv-dropdown-sep\">\n <!-- LOGOUT -->\n <button type=\"button\" class=\"anv-dropdown-item anv-logout\" (click)=\"handleLogoutClick()\">\n <span class=\"material-icons\">\n {{ logoutIcon }}\n </span>\n <span>\n Log out\n </span>\n </button>\n\n </div>\n </div>\n </div>\n </div>\n </div>\n</header>", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";:host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block;width:100%}:host .anv-navbar{display:flex;font-family:Inter,Arial,sans-serif;background:#fff;position:relative;z-index:1000}:host .anv-stripes{width:100%;background:#fff;border-bottom:1px solid #e6e6e6;box-shadow:0 2px 12px #0000000d}:host .anv-content{width:min(1350px,100%);margin:auto 20px auto auto;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:18px}:host .anv-brand{display:flex;align-items:center;gap:12px;flex-shrink:0}:host .anv-brand-icon{width:clamp(60px,7vw,100px);height:auto;object-fit:contain;transition:.3s}:host .anv-brand-icon:hover{transform:scale(1.08)}:host .anv-brand-name{font-size:22px;font-weight:700;color:#1f4d4a;white-space:nowrap}:host .anv-links{display:flex;justify-content:right;align-items:center;flex:1;gap:clamp(18px,3vw,40px);min-width:0}:host .anv-link{position:relative;text-decoration:none;color:#555;font-size:17px;font-weight:600;transition:.3s;white-space:nowrap}:host .anv-link:hover{color:#1f4d4a}:host .anv-link:after{content:\"\";position:absolute;left:0;bottom:-8px;width:0;height:2px;background:#1f4d4a;transition:.3s}:host .anv-link:hover:after{width:100%}:host .anv-actions{display:flex;align-items:center;gap:18px;flex-shrink:0;margin-left:auto}:host .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%}:host .anv-icon-btn:hover{background:#f4f4f4;transform:translateY(-2px)}:host .anv-divider{width:1px;height:32px;background:#d8d8d8}:host .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}:host .anv-login-btn:hover{background:#163836;transform:translateY(-2px);box-shadow:0 8px 18px #0000002e}:host .anv-login-btn:active{transform:scale(.96)}:host .anv-profile-wrap{position:relative}:host .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}:host .anv-profile-btn:hover{transform:scale(1.08);box-shadow:0 8px 18px #00000026}:host .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)}}:host .anv-dropdown-header{display:flex;align-items:center;gap:12px;padding:16px}:host .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}:host .anv-dropdown-info{display:flex;flex-direction:column;overflow:hidden}:host .anv-dropdown-name{font-weight:700;font-size:15px}:host .anv-dropdown-email{font-size:13px;color:#777;overflow:hidden;text-overflow:ellipsis}:host .anv-dropdown-sep{border:none;border-top:1px solid #eee;margin:0}:host .anv-dropdown-item{width:100%;padding:14px 18px;background:none;border:none;cursor:pointer;text-align:left;font-size:15px;transition:.3s}:host .anv-dropdown-item:hover{background:#f7f7f7}:host .anv-logout{color:#d32f2f;font-weight:600}@media(max-width:992px){:host .anv-content{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 20px;gap:12px}:host .anv-brand{flex-shrink:0}:host .anv-brand-icon{width:90px}:host .anv-links{flex:1;display:flex;justify-content:center;gap:18px;min-width:0;overflow:hidden}:host .anv-link{font-size:14px}:host .anv-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}:host .anv-login-btn{padding:8px 16px;font-size:13px}:host .anv-profile-btn{width:40px;height:40px}}@media(max-width:768px){:host .anv-content{padding:12px 16px;gap:10px}:host .anv-brand-icon{width:80px}:host .anv-link{font-size:13px}:host .anv-links{gap:10px;overflow-x:auto;scrollbar-width:none}:host .anv-links::-webkit-scrollbar{display:none}:host .anv-login-btn{padding:7px 12px;font-size:12px}:host .anv-profile-btn{width:36px;height:36px}}:host .anv-navbar{width:100%;background:#fff}:host .anv-stripes{width:100%;background:#fff}:host .anv-content{width:100%;box-sizing:border-box}\n"] }]
|
|
70
70
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { brand: [{
|
|
71
71
|
type: Input
|
|
72
72
|
}], logoAlt: [{
|
|
73
73
|
type: Input
|
|
74
74
|
}], image: [{
|
|
75
75
|
type: Input
|
|
76
|
+
}], customClass: [{
|
|
77
|
+
type: Input
|
|
76
78
|
}], links: [{
|
|
79
|
+
type: HostBinding,
|
|
80
|
+
args: ['class']
|
|
81
|
+
}, {
|
|
77
82
|
type: Input
|
|
78
83
|
}], initiallyLoggedIn: [{
|
|
79
84
|
type: Input
|
|
@@ -128,11 +133,11 @@ class Button {
|
|
|
128
133
|
this.clicked.emit(event);
|
|
129
134
|
}
|
|
130
135
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
131
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: Button, isStandalone: true, selector: "
|
|
136
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: Button, isStandalone: true, selector: "brb-button", inputs: { label: "label", type: "type", disabled: "disabled", loading: "loading", clickable: "clickable", customClass: "customClass" }, outputs: { clicked: "clicked" }, host: { properties: { "class": "this.customClass", "class.button-clickable": "this.buttonClickable", "class.button-disabled": "this.buttonDisabled" } }, ngImport: i0, template: "<button class=\"balina-button\" [type]=\"type\" [disabled]=\"\n disabled ||\n loading ||\n !clickable\n \" [attr.aria-disabled]=\"\n disabled ||\n loading ||\n !clickable\n \" [attr.aria-busy]=\"loading\" (click)=\"onClick($event)\">\n\n\n @if (loading) {\n\n <span class=\"button-spinner\" aria-hidden=\"true\"></span>\n\n <span class=\"button-loading-text\">\n Loading...\n </span>\n\n }\n @else {\n\n <span class=\"button-label\">\n {{ label }}\n </span>\n\n }\n\n</button>", styles: [":host{--button-width: auto;--button-height: 44px;--button-padding: 0 22px;--button-background: #68479b;--button-background-hover: #593b84;--button-background-active: #4b326f;--button-text-color: #ffffff;--button-border: 1px solid #68479b;--button-radius: 6px;--button-font-family: Arial, Helvetica, sans-serif;--button-font-size: 14px;--button-font-weight: 600;--button-gap: 8px;--button-shadow: 0 2px 5px rgba(0, 0, 0, .08);--button-disabled-background: #dddddd;--button-disabled-text: #999999;--button-disabled-border: #dddddd;--button-focus-ring: rgba(104, 71, 155, .2);--button-spinner-size: 16px;--button-spinner-border: 2px;display:inline-block;width:var(--button-width);box-sizing:border-box;font-family:var(--button-font-family)}.balina-button{width:100%;min-height:var(--button-height);padding:var(--button-padding);display:inline-flex;align-items:center;justify-content:center;gap:var(--button-gap);box-sizing:border-box;border:var(--button-border);border-radius:var(--button-radius);background:var(--button-background);color:var(--button-text-color);font-family:var(--button-font-family);font-size:var(--button-font-size);font-weight:var(--button-font-weight);line-height:1;box-shadow:var(--button-shadow);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .1s ease,color .2s ease}:host(.button-clickable) .balina-button{cursor:pointer}:host(:not(.button-clickable)) .balina-button{cursor:default}:host(.button-clickable) .balina-button:hover{background:var(--button-background-hover)}:host(.button-clickable) .balina-button:active{background:var(--button-background-active);transform:translateY(1px)}.balina-button:focus-visible{box-shadow:0 0 0 3px var(--button-focus-ring)}:host(.button-disabled) .balina-button{background:var(--button-disabled-background);color:var(--button-disabled-text);border-color:var(--button-disabled-border);cursor:not-allowed;box-shadow:none;transform:none}.balina-button[aria-busy=true]{cursor:wait}.button-label{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.button-loading-text{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}.button-spinner{width:var(--button-spinner-size);height:var(--button-spinner-size);flex:0 0 auto;box-sizing:border-box;border:var(--button-spinner-border) solid rgba(255,255,255,.4);border-top-color:var(--button-text-color);border-radius:50%;animation:button-spin .7s linear infinite}@keyframes button-spin{to{transform:rotate(360deg)}}@media(max-width:768px){:host{width:var(--button-width)}.balina-button{min-height:var(--button-height);font-size:var(--button-font-size)}}\n"] });
|
|
132
137
|
}
|
|
133
138
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Button, decorators: [{
|
|
134
139
|
type: Component,
|
|
135
|
-
args: [{ selector: '
|
|
140
|
+
args: [{ selector: 'brb-button', standalone: true, imports: [], template: "<button class=\"balina-button\" [type]=\"type\" [disabled]=\"\n disabled ||\n loading ||\n !clickable\n \" [attr.aria-disabled]=\"\n disabled ||\n loading ||\n !clickable\n \" [attr.aria-busy]=\"loading\" (click)=\"onClick($event)\">\n\n\n @if (loading) {\n\n <span class=\"button-spinner\" aria-hidden=\"true\"></span>\n\n <span class=\"button-loading-text\">\n Loading...\n </span>\n\n }\n @else {\n\n <span class=\"button-label\">\n {{ label }}\n </span>\n\n }\n\n</button>", styles: [":host{--button-width: auto;--button-height: 44px;--button-padding: 0 22px;--button-background: #68479b;--button-background-hover: #593b84;--button-background-active: #4b326f;--button-text-color: #ffffff;--button-border: 1px solid #68479b;--button-radius: 6px;--button-font-family: Arial, Helvetica, sans-serif;--button-font-size: 14px;--button-font-weight: 600;--button-gap: 8px;--button-shadow: 0 2px 5px rgba(0, 0, 0, .08);--button-disabled-background: #dddddd;--button-disabled-text: #999999;--button-disabled-border: #dddddd;--button-focus-ring: rgba(104, 71, 155, .2);--button-spinner-size: 16px;--button-spinner-border: 2px;display:inline-block;width:var(--button-width);box-sizing:border-box;font-family:var(--button-font-family)}.balina-button{width:100%;min-height:var(--button-height);padding:var(--button-padding);display:inline-flex;align-items:center;justify-content:center;gap:var(--button-gap);box-sizing:border-box;border:var(--button-border);border-radius:var(--button-radius);background:var(--button-background);color:var(--button-text-color);font-family:var(--button-font-family);font-size:var(--button-font-size);font-weight:var(--button-font-weight);line-height:1;box-shadow:var(--button-shadow);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .1s ease,color .2s ease}:host(.button-clickable) .balina-button{cursor:pointer}:host(:not(.button-clickable)) .balina-button{cursor:default}:host(.button-clickable) .balina-button:hover{background:var(--button-background-hover)}:host(.button-clickable) .balina-button:active{background:var(--button-background-active);transform:translateY(1px)}.balina-button:focus-visible{box-shadow:0 0 0 3px var(--button-focus-ring)}:host(.button-disabled) .balina-button{background:var(--button-disabled-background);color:var(--button-disabled-text);border-color:var(--button-disabled-border);cursor:not-allowed;box-shadow:none;transform:none}.balina-button[aria-busy=true]{cursor:wait}.button-label{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.button-loading-text{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}.button-spinner{width:var(--button-spinner-size);height:var(--button-spinner-size);flex:0 0 auto;box-sizing:border-box;border:var(--button-spinner-border) solid rgba(255,255,255,.4);border-top-color:var(--button-text-color);border-radius:50%;animation:button-spin .7s linear infinite}@keyframes button-spin{to{transform:rotate(360deg)}}@media(max-width:768px){:host{width:var(--button-width)}.balina-button{min-height:var(--button-height);font-size:var(--button-font-size)}}\n"] }]
|
|
136
141
|
}], propDecorators: { label: [{
|
|
137
142
|
type: Input
|
|
138
143
|
}], type: [{
|
|
@@ -167,6 +172,19 @@ class Card {
|
|
|
167
172
|
customClass = '';
|
|
168
173
|
clickable = true;
|
|
169
174
|
disabled = false;
|
|
175
|
+
get hostClasses() {
|
|
176
|
+
return [
|
|
177
|
+
this.customClass,
|
|
178
|
+
this.clickable
|
|
179
|
+
? 'card-clickable'
|
|
180
|
+
: '',
|
|
181
|
+
this.disabled
|
|
182
|
+
? 'card-disabled'
|
|
183
|
+
: ''
|
|
184
|
+
]
|
|
185
|
+
.filter(Boolean)
|
|
186
|
+
.join(' ');
|
|
187
|
+
}
|
|
170
188
|
// OUTPUTS
|
|
171
189
|
cardClick = new EventEmitter();
|
|
172
190
|
clicked = new EventEmitter();
|
|
@@ -184,11 +202,11 @@ class Card {
|
|
|
184
202
|
this.cardClick.emit();
|
|
185
203
|
}
|
|
186
204
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Card, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
187
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: Card, isStandalone: true, selector: "
|
|
205
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: Card, isStandalone: true, selector: "brb-card", inputs: { title: "title", month: "month", day: "day", description: "description", customClass: "customClass", clickable: "clickable", disabled: "disabled" }, outputs: { cardClick: "cardClick", clicked: "clicked" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<div class=\"balina-card\"\n (click)=\"onClick($event)\">\n\n\n <h2 class=\"card-title\">\n {{ title }}\n </h2>\n\n\n <div class=\"card-content\">\n\n <div class=\"card-date\">\n\n <div class=\"card-month\">\n {{ month }}\n </div>\n\n <div class=\"card-line\"></div>\n\n <div class=\"card-day\">\n {{ day }}\n </div>\n\n </div>\n\n\n <div class=\"card-description\">\n\n {{ description }}\n\n </div>\n\n </div>\n\n</div>", styles: [":host{--card-width: 100%;--card-height: 280px;--card-padding: 28px;--card-background: #ffffff;--card-border: 3px solid #dddddd;--card-radius: 12px;--card-title-color: #000000;--card-description-color: #222222;--card-date-background: #eef5ff;--card-month-color: #2962ff;--card-day-color: #000000;--card-line-color: #b7b7b7;--card-title-size: 38px;--card-description-size: 20px;--card-month-size: 24px;--card-day-size: 24px;--card-font-family: Arial, Helvetica, sans-serif;--card-font-weight: 600;--card-hover-shadow: 0 4px 12px rgba(0, 0, 0, .08);--card-hover-transform: translateY(-1px);--card-disabled-background: #f5f5f5;--card-disabled-border: #d0d0d0;--card-disabled-text: #999999}:host .balina-card{width:var(--card-width);min-height:var(--card-height);padding:var(--card-padding);background:var(--card-background);border:var(--card-border);border-radius:var(--card-radius);font-family:var(--card-font-family);font-weight:var(--card-font-weight);transition:box-shadow .2s ease,transform .2s ease,background-color .2s ease,border-color .2s ease;box-sizing:border-box}:host(.card-clickable) .balina-card{cursor:pointer}:host(:not(.card-clickable)) .balina-card{cursor:default}:host(.card-clickable) .balina-card:hover{box-shadow:var(--card-hover-shadow);transform:var(--card-hover-transform)}:host(.card-clickable) .balina-card:active{transform:translateY(0)}:host .card-title{margin:0;color:var(--card-title-color);font-size:var(--card-title-size);font-weight:700;line-height:1.2}:host .card-content{display:flex;align-items:center;gap:28px;margin-top:36px}:host .card-date{width:92px;height:96px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;padding:8px;background:var(--card-date-background);border-radius:10px}:host .card-month{color:var(--card-month-color);font-size:var(--card-month-size);font-weight:700;line-height:1}:host .card-line{width:80%;height:2px;margin:7px 0;background:var(--card-line-color)}:host .card-day{color:var(--card-day-color);font-size:var(--card-day-size);font-weight:600;line-height:1}:host .card-description{flex:1;color:var(--card-description-color);font-size:var(--card-description-size);font-weight:600;line-height:1.4}:host(.card-disabled) .balina-card{background:var(--card-disabled-background);border-color:var(--card-disabled-border);color:var(--card-disabled-text);cursor:not-allowed;box-shadow:none;transform:none}:host(.card-disabled) .balina-card:hover{box-shadow:none;transform:none}:host(.card-disabled) .balina-card .card-title,:host(.card-disabled) .balina-card .card-description{color:var(--card-disabled-text)}@media(max-width:768px){:host .balina-card{--card-title-size: 30px;--card-description-size: 17px;--card-height: auto;padding:22px}:host .card-content{gap:18px;margin-top:28px}:host .card-date{width:80px;height:88px}}@media(max-width:480px){:host .balina-card{--card-title-size: 26px;--card-description-size: 15px;padding:18px}:host .card-content{align-items:flex-start;gap:14px}:host .card-date{width:70px;height:80px}:host .card-month{font-size:20px}:host .card-day{font-size:20px}}\n"] });
|
|
188
206
|
}
|
|
189
207
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Card, decorators: [{
|
|
190
208
|
type: Component,
|
|
191
|
-
args: [{ selector: '
|
|
209
|
+
args: [{ selector: 'brb-card', standalone: true, imports: [], template: "<div class=\"balina-card\"\n (click)=\"onClick($event)\">\n\n\n <h2 class=\"card-title\">\n {{ title }}\n </h2>\n\n\n <div class=\"card-content\">\n\n <div class=\"card-date\">\n\n <div class=\"card-month\">\n {{ month }}\n </div>\n\n <div class=\"card-line\"></div>\n\n <div class=\"card-day\">\n {{ day }}\n </div>\n\n </div>\n\n\n <div class=\"card-description\">\n\n {{ description }}\n\n </div>\n\n </div>\n\n</div>", styles: [":host{--card-width: 100%;--card-height: 280px;--card-padding: 28px;--card-background: #ffffff;--card-border: 3px solid #dddddd;--card-radius: 12px;--card-title-color: #000000;--card-description-color: #222222;--card-date-background: #eef5ff;--card-month-color: #2962ff;--card-day-color: #000000;--card-line-color: #b7b7b7;--card-title-size: 38px;--card-description-size: 20px;--card-month-size: 24px;--card-day-size: 24px;--card-font-family: Arial, Helvetica, sans-serif;--card-font-weight: 600;--card-hover-shadow: 0 4px 12px rgba(0, 0, 0, .08);--card-hover-transform: translateY(-1px);--card-disabled-background: #f5f5f5;--card-disabled-border: #d0d0d0;--card-disabled-text: #999999}:host .balina-card{width:var(--card-width);min-height:var(--card-height);padding:var(--card-padding);background:var(--card-background);border:var(--card-border);border-radius:var(--card-radius);font-family:var(--card-font-family);font-weight:var(--card-font-weight);transition:box-shadow .2s ease,transform .2s ease,background-color .2s ease,border-color .2s ease;box-sizing:border-box}:host(.card-clickable) .balina-card{cursor:pointer}:host(:not(.card-clickable)) .balina-card{cursor:default}:host(.card-clickable) .balina-card:hover{box-shadow:var(--card-hover-shadow);transform:var(--card-hover-transform)}:host(.card-clickable) .balina-card:active{transform:translateY(0)}:host .card-title{margin:0;color:var(--card-title-color);font-size:var(--card-title-size);font-weight:700;line-height:1.2}:host .card-content{display:flex;align-items:center;gap:28px;margin-top:36px}:host .card-date{width:92px;height:96px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;padding:8px;background:var(--card-date-background);border-radius:10px}:host .card-month{color:var(--card-month-color);font-size:var(--card-month-size);font-weight:700;line-height:1}:host .card-line{width:80%;height:2px;margin:7px 0;background:var(--card-line-color)}:host .card-day{color:var(--card-day-color);font-size:var(--card-day-size);font-weight:600;line-height:1}:host .card-description{flex:1;color:var(--card-description-color);font-size:var(--card-description-size);font-weight:600;line-height:1.4}:host(.card-disabled) .balina-card{background:var(--card-disabled-background);border-color:var(--card-disabled-border);color:var(--card-disabled-text);cursor:not-allowed;box-shadow:none;transform:none}:host(.card-disabled) .balina-card:hover{box-shadow:none;transform:none}:host(.card-disabled) .balina-card .card-title,:host(.card-disabled) .balina-card .card-description{color:var(--card-disabled-text)}@media(max-width:768px){:host .balina-card{--card-title-size: 30px;--card-description-size: 17px;--card-height: auto;padding:22px}:host .card-content{gap:18px;margin-top:28px}:host .card-date{width:80px;height:88px}}@media(max-width:480px){:host .balina-card{--card-title-size: 26px;--card-description-size: 15px;padding:18px}:host .card-content{align-items:flex-start;gap:14px}:host .card-date{width:70px;height:80px}:host .card-month{font-size:20px}:host .card-day{font-size:20px}}\n"] }]
|
|
192
210
|
}], propDecorators: { title: [{
|
|
193
211
|
type: Input
|
|
194
212
|
}], month: [{
|
|
@@ -203,6 +221,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
203
221
|
type: Input
|
|
204
222
|
}], disabled: [{
|
|
205
223
|
type: Input
|
|
224
|
+
}], hostClasses: [{
|
|
225
|
+
type: HostBinding,
|
|
226
|
+
args: ['class']
|
|
206
227
|
}], cardClick: [{
|
|
207
228
|
type: Output
|
|
208
229
|
}], clicked: [{
|
|
@@ -217,6 +238,19 @@ class TimeFilter {
|
|
|
217
238
|
customClass = '';
|
|
218
239
|
clickable = true;
|
|
219
240
|
disabled = false;
|
|
241
|
+
get hostClasses() {
|
|
242
|
+
return [
|
|
243
|
+
this.customClass,
|
|
244
|
+
this.clickable
|
|
245
|
+
? 'time-filter-clickable'
|
|
246
|
+
: '',
|
|
247
|
+
this.disabled
|
|
248
|
+
? 'time-filter-disabled'
|
|
249
|
+
: ''
|
|
250
|
+
]
|
|
251
|
+
.filter(Boolean)
|
|
252
|
+
.join(' ');
|
|
253
|
+
}
|
|
220
254
|
// OUTPUTS
|
|
221
255
|
selectedValueChange = new EventEmitter();
|
|
222
256
|
clicked = new EventEmitter();
|
|
@@ -255,11 +289,11 @@ class TimeFilter {
|
|
|
255
289
|
this.clicked.emit(event);
|
|
256
290
|
}
|
|
257
291
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TimeFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
258
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: TimeFilter, isStandalone: true, selector: "
|
|
292
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: TimeFilter, isStandalone: true, selector: "brb-time-filter", inputs: { label: "label", value: "value", selectedValue: "selectedValue", customClass: "customClass", clickable: "clickable", disabled: "disabled" }, outputs: { selectedValueChange: "selectedValueChange", clicked: "clicked" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<div class=\"time-filter\" [class.time-filter-selected]=\"selected\" (click)=\"onClick($event)\"\n role=\"button\" tabindex=\"0\">\n\n\n <div class=\"radio-circle\" [class.selected]=\"selected\">\n\n <div class=\"radio-dot\"></div>\n\n </div>\n\n\n <span class=\"label\">\n {{ label }}\n </span>\n\n</div>", styles: [":host{--time-filter-gap: 16px;--time-filter-circle-size: 24px;--time-filter-circle-border-width: 2px;--time-filter-dot-size: 12px;--time-filter-border-color: #a6a6a6;--time-filter-selected-color: #1976d2;--time-filter-text-color: #000000;--time-filter-text-hover: #333333;--time-filter-font-family: Arial, Helvetica, sans-serif;--time-filter-font-size: 20px;--time-filter-font-weight: 400;--time-filter-disabled-color: #aaaaaa}:host .time-filter{display:flex;align-items:center;gap:var(--time-filter-gap);width:fit-content;box-sizing:border-box;font-family:var(--time-filter-font-family);-webkit-user-select:none;user-select:none;transition:opacity .2s ease}:host(.time-filter-clickable) .time-filter{cursor:pointer}:host .radio-circle{width:var(--time-filter-circle-size);height:var(--time-filter-circle-size);flex-shrink:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:var(--time-filter-circle-border-width) solid var(--time-filter-border-color);border-radius:50%;transition:border-color .2s ease,background-color .2s ease}:host .radio-dot{width:var(--time-filter-dot-size);height:var(--time-filter-dot-size);border-radius:50%;background:transparent;transition:background-color .2s ease,transform .2s ease}:host .radio-circle.selected{border-color:var(--time-filter-selected-color)}:host .radio-circle.selected .radio-dot{background:var(--time-filter-selected-color);transform:scale(1)}:host .label{color:var(--time-filter-text-color);font-size:var(--time-filter-font-size);font-weight:var(--time-filter-font-weight);line-height:1;transition:color .2s ease}:host(.time-filter-clickable) .time-filter:hover .label{color:var(--time-filter-text-hover)}:host(.time-filter-clickable) .time-filter:hover .radio-circle{border-color:var(--time-filter-selected-color)}:host(.time-filter-disabled) .time-filter{opacity:.6;cursor:not-allowed}:host(.time-filter-disabled) .time-filter .radio-circle{border-color:var(--time-filter-disabled-color)}:host(.time-filter-disabled) .time-filter .label{color:var(--time-filter-disabled-color)}:host(.time-filter-disabled) .time-filter .radio-circle.selected{border-color:var(--time-filter-disabled-color)}:host(.time-filter-disabled) .time-filter .radio-circle.selected .radio-dot{background:var(--time-filter-disabled-color)}@media(max-width:768px){:host .time-filter{--time-filter-font-size: 18px;--time-filter-circle-size: 22px;--time-filter-dot-size: 10px;--time-filter-gap: 12px}}@media(max-width:480px){:host .time-filter{--time-filter-font-size: 16px;--time-filter-circle-size: 20px;--time-filter-dot-size: 9px;--time-filter-gap: 10px}}\n"] });
|
|
259
293
|
}
|
|
260
294
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TimeFilter, decorators: [{
|
|
261
295
|
type: Component,
|
|
262
|
-
args: [{ selector: '
|
|
296
|
+
args: [{ selector: 'brb-time-filter', standalone: true, imports: [], template: "<div class=\"time-filter\" [class.time-filter-selected]=\"selected\" (click)=\"onClick($event)\"\n role=\"button\" tabindex=\"0\">\n\n\n <div class=\"radio-circle\" [class.selected]=\"selected\">\n\n <div class=\"radio-dot\"></div>\n\n </div>\n\n\n <span class=\"label\">\n {{ label }}\n </span>\n\n</div>", styles: [":host{--time-filter-gap: 16px;--time-filter-circle-size: 24px;--time-filter-circle-border-width: 2px;--time-filter-dot-size: 12px;--time-filter-border-color: #a6a6a6;--time-filter-selected-color: #1976d2;--time-filter-text-color: #000000;--time-filter-text-hover: #333333;--time-filter-font-family: Arial, Helvetica, sans-serif;--time-filter-font-size: 20px;--time-filter-font-weight: 400;--time-filter-disabled-color: #aaaaaa}:host .time-filter{display:flex;align-items:center;gap:var(--time-filter-gap);width:fit-content;box-sizing:border-box;font-family:var(--time-filter-font-family);-webkit-user-select:none;user-select:none;transition:opacity .2s ease}:host(.time-filter-clickable) .time-filter{cursor:pointer}:host .radio-circle{width:var(--time-filter-circle-size);height:var(--time-filter-circle-size);flex-shrink:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:var(--time-filter-circle-border-width) solid var(--time-filter-border-color);border-radius:50%;transition:border-color .2s ease,background-color .2s ease}:host .radio-dot{width:var(--time-filter-dot-size);height:var(--time-filter-dot-size);border-radius:50%;background:transparent;transition:background-color .2s ease,transform .2s ease}:host .radio-circle.selected{border-color:var(--time-filter-selected-color)}:host .radio-circle.selected .radio-dot{background:var(--time-filter-selected-color);transform:scale(1)}:host .label{color:var(--time-filter-text-color);font-size:var(--time-filter-font-size);font-weight:var(--time-filter-font-weight);line-height:1;transition:color .2s ease}:host(.time-filter-clickable) .time-filter:hover .label{color:var(--time-filter-text-hover)}:host(.time-filter-clickable) .time-filter:hover .radio-circle{border-color:var(--time-filter-selected-color)}:host(.time-filter-disabled) .time-filter{opacity:.6;cursor:not-allowed}:host(.time-filter-disabled) .time-filter .radio-circle{border-color:var(--time-filter-disabled-color)}:host(.time-filter-disabled) .time-filter .label{color:var(--time-filter-disabled-color)}:host(.time-filter-disabled) .time-filter .radio-circle.selected{border-color:var(--time-filter-disabled-color)}:host(.time-filter-disabled) .time-filter .radio-circle.selected .radio-dot{background:var(--time-filter-disabled-color)}@media(max-width:768px){:host .time-filter{--time-filter-font-size: 18px;--time-filter-circle-size: 22px;--time-filter-dot-size: 10px;--time-filter-gap: 12px}}@media(max-width:480px){:host .time-filter{--time-filter-font-size: 16px;--time-filter-circle-size: 20px;--time-filter-dot-size: 9px;--time-filter-gap: 10px}}\n"] }]
|
|
263
297
|
}], propDecorators: { label: [{
|
|
264
298
|
type: Input
|
|
265
299
|
}], value: [{
|
|
@@ -272,6 +306,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
272
306
|
type: Input
|
|
273
307
|
}], disabled: [{
|
|
274
308
|
type: Input
|
|
309
|
+
}], hostClasses: [{
|
|
310
|
+
type: HostBinding,
|
|
311
|
+
args: ['class']
|
|
275
312
|
}], selectedValueChange: [{
|
|
276
313
|
type: Output
|
|
277
314
|
}], clicked: [{
|
|
@@ -322,11 +359,11 @@ class TextBox {
|
|
|
322
359
|
this.clicked.emit(event);
|
|
323
360
|
}
|
|
324
361
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TextBox, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
325
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: TextBox, isStandalone: true, selector: "
|
|
362
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: TextBox, isStandalone: true, selector: "brb-text-box", inputs: { placeholder: "placeholder", value: "value", type: "type", disabled: "disabled", readonly: "readonly", customClass: "customClass" }, outputs: { valueChange: "valueChange", inputChange: "inputChange", clicked: "clicked" }, host: { properties: { "class": "this.customClass" } }, ngImport: i0, template: "<div class=\"text-box-container\">\n\n <div class=\"text-box-input-wrapper\">\n\n <input class=\"text-box-input\" [type]=\"inputType\" [placeholder]=\"placeholder\" [value]=\"value\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" (input)=\"onInput($event)\" (click)=\"onClick($event)\" />\n\n <!-- Password Eye Button -->\n @if (type === 'password') {\n\n <button type=\"button\" class=\"text-box-password-button\" [disabled]=\"disabled\" (click)=\"togglePassword($event)\"\n aria-label=\"Toggle password visibility\">\n\n @if (showPassword) {\n\n <!-- Eye Off -->\n <svg class=\"text-box-password-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M3 3l18 18\" />\n\n <path d=\"M10.6 10.6a2 2 0 1 0 2.8 2.8\" />\n\n <path d=\"M9.9 4.2A10.8 10.8 0 0 1 12 4c5 0 8.7 4.2 9.8 8a10.8 10.8 0 0 1-3.1 5.1\" />\n\n <path d=\"M6.2 6.2C4.5 7.4 3.2 9.2 2.2 12c1.1 3.8 4.8 8 9.8 8 1.7 0 3.3-.5 4.7-1.2\" />\n </svg>\n\n } @else {\n\n <!-- Eye -->\n <svg class=\"text-box-password-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M2 12s3.5-7 10-7\n 10 7 10 7\n -3.5 7-10 7\n -10-7-10-7z\" />\n\n <circle cx=\"12\" cy=\"12\" r=\"3\" />\n </svg>\n\n }\n\n </button>\n\n }\n\n </div>\n\n</div>", styles: [":host{--textbox-width: 300px;--textbox-height: 44px;--textbox-background: #ffffff;--textbox-border: 1px solid #a9a9a9;--textbox-border-hover: #777777;--textbox-border-focus: #68479b;--textbox-radius: 6px;--textbox-text-color: #222222;--textbox-placeholder-color: #777777;--textbox-font-family: Arial, Helvetica, sans-serif;--textbox-font-size: 14px;--textbox-font-weight: 600;--textbox-padding: 0 18px;--textbox-focus-shadow: 0 0 0 1px rgba(104, 71, 155, .15);--textbox-disabled-background: #f5f5f5;--textbox-disabled-color: #999999;--textbox-disabled-border: #d0d0d0;--textbox-icon-color: #777777;--textbox-icon-hover-color: #333333;display:block;width:var(--textbox-width);height:var(--textbox-height);box-sizing:border-box}.text-box-container{width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box}.text-box-input-wrapper{position:relative;width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box}.text-box-input{width:100%;height:100%;box-sizing:border-box;padding:var(--textbox-padding);border:var(--textbox-border);border-radius:var(--textbox-radius);outline:none;background:var(--textbox-background);color:var(--textbox-text-color);font-family:var(--textbox-font-family);font-size:var(--textbox-font-size);font-weight:var(--textbox-font-weight);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;cursor:text}.text-box-input[type=password]{padding-right:48px}.text-box-input::placeholder{color:var(--textbox-placeholder-color);opacity:1;font-family:var(--textbox-font-family);font-size:var(--textbox-font-size);font-weight:var(--textbox-font-weight)}.text-box-input:hover:not(:disabled){border-color:var(--textbox-border-hover)}.text-box-input:focus{border-color:var(--textbox-border-focus);box-shadow:var(--textbox-focus-shadow)}.text-box-input:disabled{background:var(--textbox-disabled-background);color:var(--textbox-disabled-color);border-color:var(--textbox-disabled-border);cursor:not-allowed}.text-box-input:read-only{cursor:default}.text-box-password-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--textbox-icon-color);cursor:pointer;border-radius:4px;transition:color .2s ease,background-color .2s ease}.text-box-password-button:hover:not(:disabled){color:var(--textbox-icon-hover-color);background:#0000000d}.text-box-password-button:disabled{cursor:not-allowed;opacity:.5}.text-box-password-icon{width:19px;height:19px;display:block}@media(max-width:768px){:host{width:100%}.text-box-input{font-size:var(--textbox-font-size)}}\n"] });
|
|
326
363
|
}
|
|
327
364
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TextBox, decorators: [{
|
|
328
365
|
type: Component,
|
|
329
|
-
args: [{ selector: '
|
|
366
|
+
args: [{ selector: 'brb-text-box', standalone: true, imports: [], template: "<div class=\"text-box-container\">\n\n <div class=\"text-box-input-wrapper\">\n\n <input class=\"text-box-input\" [type]=\"inputType\" [placeholder]=\"placeholder\" [value]=\"value\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" (input)=\"onInput($event)\" (click)=\"onClick($event)\" />\n\n <!-- Password Eye Button -->\n @if (type === 'password') {\n\n <button type=\"button\" class=\"text-box-password-button\" [disabled]=\"disabled\" (click)=\"togglePassword($event)\"\n aria-label=\"Toggle password visibility\">\n\n @if (showPassword) {\n\n <!-- Eye Off -->\n <svg class=\"text-box-password-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M3 3l18 18\" />\n\n <path d=\"M10.6 10.6a2 2 0 1 0 2.8 2.8\" />\n\n <path d=\"M9.9 4.2A10.8 10.8 0 0 1 12 4c5 0 8.7 4.2 9.8 8a10.8 10.8 0 0 1-3.1 5.1\" />\n\n <path d=\"M6.2 6.2C4.5 7.4 3.2 9.2 2.2 12c1.1 3.8 4.8 8 9.8 8 1.7 0 3.3-.5 4.7-1.2\" />\n </svg>\n\n } @else {\n\n <!-- Eye -->\n <svg class=\"text-box-password-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M2 12s3.5-7 10-7\n 10 7 10 7\n -3.5 7-10 7\n -10-7-10-7z\" />\n\n <circle cx=\"12\" cy=\"12\" r=\"3\" />\n </svg>\n\n }\n\n </button>\n\n }\n\n </div>\n\n</div>", styles: [":host{--textbox-width: 300px;--textbox-height: 44px;--textbox-background: #ffffff;--textbox-border: 1px solid #a9a9a9;--textbox-border-hover: #777777;--textbox-border-focus: #68479b;--textbox-radius: 6px;--textbox-text-color: #222222;--textbox-placeholder-color: #777777;--textbox-font-family: Arial, Helvetica, sans-serif;--textbox-font-size: 14px;--textbox-font-weight: 600;--textbox-padding: 0 18px;--textbox-focus-shadow: 0 0 0 1px rgba(104, 71, 155, .15);--textbox-disabled-background: #f5f5f5;--textbox-disabled-color: #999999;--textbox-disabled-border: #d0d0d0;--textbox-icon-color: #777777;--textbox-icon-hover-color: #333333;display:block;width:var(--textbox-width);height:var(--textbox-height);box-sizing:border-box}.text-box-container{width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box}.text-box-input-wrapper{position:relative;width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box}.text-box-input{width:100%;height:100%;box-sizing:border-box;padding:var(--textbox-padding);border:var(--textbox-border);border-radius:var(--textbox-radius);outline:none;background:var(--textbox-background);color:var(--textbox-text-color);font-family:var(--textbox-font-family);font-size:var(--textbox-font-size);font-weight:var(--textbox-font-weight);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;cursor:text}.text-box-input[type=password]{padding-right:48px}.text-box-input::placeholder{color:var(--textbox-placeholder-color);opacity:1;font-family:var(--textbox-font-family);font-size:var(--textbox-font-size);font-weight:var(--textbox-font-weight)}.text-box-input:hover:not(:disabled){border-color:var(--textbox-border-hover)}.text-box-input:focus{border-color:var(--textbox-border-focus);box-shadow:var(--textbox-focus-shadow)}.text-box-input:disabled{background:var(--textbox-disabled-background);color:var(--textbox-disabled-color);border-color:var(--textbox-disabled-border);cursor:not-allowed}.text-box-input:read-only{cursor:default}.text-box-password-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--textbox-icon-color);cursor:pointer;border-radius:4px;transition:color .2s ease,background-color .2s ease}.text-box-password-button:hover:not(:disabled){color:var(--textbox-icon-hover-color);background:#0000000d}.text-box-password-button:disabled{cursor:not-allowed;opacity:.5}.text-box-password-icon{width:19px;height:19px;display:block}@media(max-width:768px){:host{width:100%}.text-box-input{font-size:var(--textbox-font-size)}}\n"] }]
|
|
330
367
|
}], propDecorators: { placeholder: [{
|
|
331
368
|
type: Input
|
|
332
369
|
}], value: [{
|
|
@@ -555,11 +592,11 @@ class DateInput {
|
|
|
555
592
|
this.openedChange.emit(false);
|
|
556
593
|
}
|
|
557
594
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DateInput, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
558
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DateInput, isStandalone: true, selector: "
|
|
595
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DateInput, isStandalone: true, selector: "brb-date-input", inputs: { label: "label", placeholder: "placeholder", value: "value", disabled: "disabled", readonly: "readonly", customClass: "customClass" }, outputs: { valueChange: "valueChange", dateChange: "dateChange", openedChange: "openedChange", clicked: "clicked" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "this.customClass" } }, ngImport: i0, template: "<div class=\"date-input-container\" [class.date-input-disabled]=\"disabled\" [class.date-input-open]=\"isOpen\">\n <div class=\"date-input-field\" (click)=\"toggleCalendar($event)\">\n\n <!-- LABEL -->\n\n @if (label) {\n\n <label class=\"date-input-label\">\n\n {{ label }}\n\n </label>\n\n }\n\n\n <!-- VALUE -->\n\n <span class=\"date-input-value\" [class.date-input-placeholder]=\"!value\">\n\n {{ value || placeholder }}\n\n </span>\n\n\n <!-- CALENDAR ICON -->\n\n <span class=\"calendar-icon\">\n\n <span class=\"calendar-top\"></span>\n\n <span class=\"calendar-body\"></span>\n\n </span>\n\n </div>\n\n\n\n @if (isOpen) {\n\n <div class=\"date-picker\" (click)=\"$event.stopPropagation()\">\n\n\n <div class=\"date-picker-header\">\n\n <button type=\"button\" class=\"month-button\" aria-label=\"Previous month\" (click)=\"previousMonth($event)\">\n\n \u2039\n\n </button>\n\n\n <span class=\"month-title\">\n\n {{ monthName }} {{ year }}\n\n </span>\n\n\n <button type=\"button\" class=\"month-button\" aria-label=\"Next month\" (click)=\"nextMonth($event)\">\n\n \u203A\n\n </button>\n\n </div>\n\n\n <div class=\"week-days\">\n\n <span>Sun</span>\n\n <span>Mon</span>\n\n <span>Tue</span>\n\n <span>Wed</span>\n\n <span>Thu</span>\n\n <span>Fri</span>\n\n <span>Sat</span>\n\n </div>\n\n\n\n <div class=\"calendar-days\">\n\n @for (\n date of calendarDays;\n track date.getTime()\n ) {\n\n <button type=\"button\" class=\"calendar-day\" [class.other-month]=\"\n !isCurrentMonth(date)\n \" [class.today]=\"\n isToday(date)\n \" [class.selected]=\"\n isSelected(date)\n \" (click)=\"\n selectDate(date, $event)\n \">\n\n {{ date.getDate() }}\n\n </button>\n\n }\n\n </div>\n\n </div>\n\n }\n\n</div>", styles: [":host{--date-width: 300px;--date-height: 44px;--date-background: #ffffff;--date-border: 1px solid #a9a9a9;--date-border-hover: #777777;--date-border-focus: #68479b;--date-radius: 6px;--date-text: #222222;--date-placeholder: #777777;--date-primary: #68479b;--date-hover: #f3f0f7;--date-selected: #68479b;--date-selected-text: #ffffff;--date-font-family: Arial, Helvetica, sans-serif;--date-font-size: 14px;--date-font-weight: 600;--date-shadow: 0 4px 12px rgba(0, 0, 0, .12);--date-icon-color: #555555;--date-disabled-background: #f5f5f5;--date-disabled-border: #d0d0d0;--date-disabled-text: #999999;display:block;position:relative;width:var(--date-width);box-sizing:border-box;font-family:var(--date-font-family)}.date-input-container{position:relative;width:100%;box-sizing:border-box}.date-input-field{position:relative;width:100%;height:var(--date-height);display:flex;align-items:center;box-sizing:border-box;padding:0 50px 0 18px;border:var(--date-border);border-radius:var(--date-radius);background:var(--date-background);color:var(--date-text);font-size:var(--date-font-size);font-weight:var(--date-font-weight);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.date-input-field:hover{border-color:var(--date-border-hover)}.date-input-open .date-input-field{border-color:var(--date-border-focus);box-shadow:0 0 0 1px #68479b1f}.date-input-label{position:absolute;top:0;left:14px;transform:translateY(-50%);padding:0 6px;background:var(--date-background);color:var(--date-border-focus);font-size:13px;font-weight:500;line-height:1;pointer-events:none}.date-input-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--date-text)}.date-input-placeholder{color:var(--date-placeholder)}.calendar-icon{position:absolute;right:17px;width:18px;height:18px;box-sizing:border-box;border:1.8px solid var(--date-icon-color);border-radius:3px}.calendar-top{position:absolute;left:0;top:4px;width:100%;border-top:1.8px solid var(--date-icon-color)}.calendar-icon:before,.calendar-icon:after{content:\"\";position:absolute;top:-4px;width:2px;height:6px;background:var(--date-icon-color);border-radius:2px}.calendar-icon:before{left:4px}.calendar-icon:after{right:4px}.date-picker{position:absolute;top:calc(100% + 6px);left:0;width:100%;min-width:300px;z-index:1000;padding:14px;box-sizing:border-box;background:#fff;border:1px solid #d5d5d5;border-radius:var(--date-radius);box-shadow:var(--date-shadow)}.date-picker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.month-title{font-size:15px;font-weight:700;color:var(--date-text)}.month-button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:#555;font-size:24px;line-height:1;cursor:pointer;transition:background-color .15s ease,color .15s ease}.month-button:hover{background:var(--date-hover);color:var(--date-primary)}.week-days{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:6px;text-align:center;color:#777;font-size:12px;font-weight:600}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-day{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:var(--date-text);font-family:var(--date-font-family);font-size:13px;cursor:pointer;transition:background-color .15s ease,color .15s ease}.calendar-day:hover{background:var(--date-hover)}.calendar-day.other-month{color:silver}.calendar-day.today{border:1px solid var(--date-primary);color:var(--date-primary)}.calendar-day.selected{background:var(--date-selected);color:var(--date-selected-text);border:none}.calendar-day.selected.today{background:var(--date-selected);color:var(--date-selected-text)}.date-input-disabled .date-input-field{background:var(--date-disabled-background);border-color:var(--date-disabled-border);color:var(--date-disabled-text);cursor:not-allowed}@media(max-width:768px){:host{width:100%}.date-picker{min-width:100%}}\n"] });
|
|
559
596
|
}
|
|
560
597
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DateInput, decorators: [{
|
|
561
598
|
type: Component,
|
|
562
|
-
args: [{ selector: '
|
|
599
|
+
args: [{ selector: 'brb-date-input', standalone: true, imports: [], template: "<div class=\"date-input-container\" [class.date-input-disabled]=\"disabled\" [class.date-input-open]=\"isOpen\">\n <div class=\"date-input-field\" (click)=\"toggleCalendar($event)\">\n\n <!-- LABEL -->\n\n @if (label) {\n\n <label class=\"date-input-label\">\n\n {{ label }}\n\n </label>\n\n }\n\n\n <!-- VALUE -->\n\n <span class=\"date-input-value\" [class.date-input-placeholder]=\"!value\">\n\n {{ value || placeholder }}\n\n </span>\n\n\n <!-- CALENDAR ICON -->\n\n <span class=\"calendar-icon\">\n\n <span class=\"calendar-top\"></span>\n\n <span class=\"calendar-body\"></span>\n\n </span>\n\n </div>\n\n\n\n @if (isOpen) {\n\n <div class=\"date-picker\" (click)=\"$event.stopPropagation()\">\n\n\n <div class=\"date-picker-header\">\n\n <button type=\"button\" class=\"month-button\" aria-label=\"Previous month\" (click)=\"previousMonth($event)\">\n\n \u2039\n\n </button>\n\n\n <span class=\"month-title\">\n\n {{ monthName }} {{ year }}\n\n </span>\n\n\n <button type=\"button\" class=\"month-button\" aria-label=\"Next month\" (click)=\"nextMonth($event)\">\n\n \u203A\n\n </button>\n\n </div>\n\n\n <div class=\"week-days\">\n\n <span>Sun</span>\n\n <span>Mon</span>\n\n <span>Tue</span>\n\n <span>Wed</span>\n\n <span>Thu</span>\n\n <span>Fri</span>\n\n <span>Sat</span>\n\n </div>\n\n\n\n <div class=\"calendar-days\">\n\n @for (\n date of calendarDays;\n track date.getTime()\n ) {\n\n <button type=\"button\" class=\"calendar-day\" [class.other-month]=\"\n !isCurrentMonth(date)\n \" [class.today]=\"\n isToday(date)\n \" [class.selected]=\"\n isSelected(date)\n \" (click)=\"\n selectDate(date, $event)\n \">\n\n {{ date.getDate() }}\n\n </button>\n\n }\n\n </div>\n\n </div>\n\n }\n\n</div>", styles: [":host{--date-width: 300px;--date-height: 44px;--date-background: #ffffff;--date-border: 1px solid #a9a9a9;--date-border-hover: #777777;--date-border-focus: #68479b;--date-radius: 6px;--date-text: #222222;--date-placeholder: #777777;--date-primary: #68479b;--date-hover: #f3f0f7;--date-selected: #68479b;--date-selected-text: #ffffff;--date-font-family: Arial, Helvetica, sans-serif;--date-font-size: 14px;--date-font-weight: 600;--date-shadow: 0 4px 12px rgba(0, 0, 0, .12);--date-icon-color: #555555;--date-disabled-background: #f5f5f5;--date-disabled-border: #d0d0d0;--date-disabled-text: #999999;display:block;position:relative;width:var(--date-width);box-sizing:border-box;font-family:var(--date-font-family)}.date-input-container{position:relative;width:100%;box-sizing:border-box}.date-input-field{position:relative;width:100%;height:var(--date-height);display:flex;align-items:center;box-sizing:border-box;padding:0 50px 0 18px;border:var(--date-border);border-radius:var(--date-radius);background:var(--date-background);color:var(--date-text);font-size:var(--date-font-size);font-weight:var(--date-font-weight);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.date-input-field:hover{border-color:var(--date-border-hover)}.date-input-open .date-input-field{border-color:var(--date-border-focus);box-shadow:0 0 0 1px #68479b1f}.date-input-label{position:absolute;top:0;left:14px;transform:translateY(-50%);padding:0 6px;background:var(--date-background);color:var(--date-border-focus);font-size:13px;font-weight:500;line-height:1;pointer-events:none}.date-input-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--date-text)}.date-input-placeholder{color:var(--date-placeholder)}.calendar-icon{position:absolute;right:17px;width:18px;height:18px;box-sizing:border-box;border:1.8px solid var(--date-icon-color);border-radius:3px}.calendar-top{position:absolute;left:0;top:4px;width:100%;border-top:1.8px solid var(--date-icon-color)}.calendar-icon:before,.calendar-icon:after{content:\"\";position:absolute;top:-4px;width:2px;height:6px;background:var(--date-icon-color);border-radius:2px}.calendar-icon:before{left:4px}.calendar-icon:after{right:4px}.date-picker{position:absolute;top:calc(100% + 6px);left:0;width:100%;min-width:300px;z-index:1000;padding:14px;box-sizing:border-box;background:#fff;border:1px solid #d5d5d5;border-radius:var(--date-radius);box-shadow:var(--date-shadow)}.date-picker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.month-title{font-size:15px;font-weight:700;color:var(--date-text)}.month-button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:#555;font-size:24px;line-height:1;cursor:pointer;transition:background-color .15s ease,color .15s ease}.month-button:hover{background:var(--date-hover);color:var(--date-primary)}.week-days{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:6px;text-align:center;color:#777;font-size:12px;font-weight:600}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-day{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:var(--date-text);font-family:var(--date-font-family);font-size:13px;cursor:pointer;transition:background-color .15s ease,color .15s ease}.calendar-day:hover{background:var(--date-hover)}.calendar-day.other-month{color:silver}.calendar-day.today{border:1px solid var(--date-primary);color:var(--date-primary)}.calendar-day.selected{background:var(--date-selected);color:var(--date-selected-text);border:none}.calendar-day.selected.today{background:var(--date-selected);color:var(--date-selected-text)}.date-input-disabled .date-input-field{background:var(--date-disabled-background);border-color:var(--date-disabled-border);color:var(--date-disabled-text);cursor:not-allowed}@media(max-width:768px){:host{width:100%}.date-picker{min-width:100%}}\n"] }]
|
|
563
600
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
|
|
564
601
|
type: Input
|
|
565
602
|
}], placeholder: [{
|
|
@@ -682,11 +719,11 @@ class Dropdown {
|
|
|
682
719
|
input.value;
|
|
683
720
|
}
|
|
684
721
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Dropdown, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
685
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: Dropdown, isStandalone: true, selector: "
|
|
722
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: Dropdown, isStandalone: true, selector: "brb-dropdown", inputs: { label: "label", placeholder: "placeholder", options: "options", value: "value", disabled: "disabled", searchable: "searchable", customClass: "customClass" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", openedChange: "openedChange", clicked: "clicked" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "this.customClass" } }, ngImport: i0, template: "<div class=\"dropdown-container\" [class.dropdown-disabled]=\"disabled\" [class.dropdown-open]=\"isOpen\">\n\n <div class=\"dropdown-field\" (click)=\"toggleDropdown($event)\">\n\n <!-- Label -->\n\n @if (label) {\n\n <label class=\"dropdown-label\">\n {{ label }}\n </label>\n\n }\n\n\n <!-- Selected Value -->\n\n <span class=\"dropdown-value\" [class.dropdown-placeholder]=\"\n !selectedOption\n \">\n\n {{\n selectedOption?.label ||\n placeholder\n }}\n\n </span>\n\n\n <!-- Arrow -->\n\n <span class=\"dropdown-arrow\" [class.arrow-up]=\"isOpen\"></span>\n\n </div>\n\n\n @if (isOpen) {\n\n <div class=\"dropdown-menu\" (click)=\"$event.stopPropagation()\">\n\n <!-- SEARCH -->\n\n @if (searchable) {\n\n <div class=\"dropdown-search\">\n\n <input type=\"text\" class=\"dropdown-search-input\" placeholder=\"Search...\" [value]=\"searchText\"\n (input)=\"onSearch($event)\" />\n\n </div>\n\n }\n\n\n <!-- OPTIONS -->\n\n <div class=\"dropdown-options\">\n\n @for (\n option of filteredOptions;\n track option.value\n ) {\n\n <div class=\"dropdown-option\" [class.option-disabled]=\"\n option.disabled\n \" [class.option-selected]=\"\n option.value === value\n \" (click)=\"\n selectOption(option, $event)\n \">\n\n {{ option.label }}\n\n </div>\n\n }\n\n\n <!-- NO RESULTS -->\n\n @if (\n filteredOptions.length === 0\n ) {\n\n <div class=\"dropdown-no-result\">\n\n No results found\n\n </div>\n\n }\n\n </div>\n\n </div>\n\n }\n\n</div>", styles: [":host{--dropdown-width: 300px;--dropdown-height: 44px;--dropdown-background: #ffffff;--dropdown-border: 1px solid #a9a9a9;--dropdown-border-hover: #777777;--dropdown-border-focus: #68479b;--dropdown-radius: 6px;--dropdown-text-color: #222222;--dropdown-placeholder-color: #777777;--dropdown-menu-background: #ffffff;--dropdown-option-hover: #f3f0f7;--dropdown-option-selected: #eee8f5;--dropdown-disabled: #f5f5f5;--dropdown-font-family: Arial, Helvetica, sans-serif;--dropdown-font-size: 14px;--dropdown-font-weight: 600;--dropdown-shadow: 0 4px 12px rgba(0, 0, 0, .12);--dropdown-label-color: #68479b;--dropdown-arrow-color: #555555;--dropdown-search-border: #cfcfcf;display:block;position:relative;width:var(--dropdown-width);box-sizing:border-box}.dropdown-container{position:relative;width:100%;font-family:var(--dropdown-font-family);box-sizing:border-box}.dropdown-field{position:relative;width:100%;height:var(--dropdown-height);display:flex;align-items:center;box-sizing:border-box;padding:0 48px 0 18px;border:var(--dropdown-border);border-radius:var(--dropdown-radius);background:var(--dropdown-background);color:var(--dropdown-text-color);font-size:var(--dropdown-font-size);font-weight:var(--dropdown-font-weight);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}.dropdown-field:hover{border-color:var(--dropdown-border-hover)}.dropdown-open .dropdown-field{border-color:var(--dropdown-border-focus);box-shadow:0 0 0 1px #68479b1f}.dropdown-label{position:absolute;top:0;left:14px;transform:translateY(-50%);padding:0 6px;background:var(--dropdown-background);color:var(--dropdown-label-color);font-size:13px;font-weight:500;line-height:1;pointer-events:none}.dropdown-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--dropdown-text-color)}.dropdown-placeholder{color:var(--dropdown-placeholder-color)}.dropdown-arrow{position:absolute;right:18px;top:50%;width:9px;height:9px;border-right:2px solid var(--dropdown-arrow-color);border-bottom:2px solid var(--dropdown-arrow-color);transform:translateY(-65%) rotate(45deg);transition:transform .2s ease}.dropdown-arrow.arrow-up{transform:translateY(-25%) rotate(225deg)}.dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;width:100%;z-index:1000;overflow:hidden;background:var(--dropdown-menu-background);border:1px solid #d0d0d0;border-radius:var(--dropdown-radius);box-shadow:var(--dropdown-shadow)}.dropdown-search{padding:8px;border-bottom:1px solid #eeeeee}.dropdown-search-input{width:100%;height:38px;box-sizing:border-box;padding:0 12px;border:1px solid var(--dropdown-search-border);border-radius:5px;outline:none;background:#fff;color:var(--dropdown-text-color);font-family:var(--dropdown-font-family);font-size:14px}.dropdown-search-input:focus{border-color:var(--dropdown-border-focus)}.dropdown-options{max-height:240px;overflow-y:auto}.dropdown-option{min-height:42px;display:flex;align-items:center;padding:0 14px;box-sizing:border-box;color:var(--dropdown-text-color);font-size:var(--dropdown-font-size);cursor:pointer;transition:background-color .15s ease}.dropdown-option:hover{background:var(--dropdown-option-hover)}.dropdown-option.option-selected{background:var(--dropdown-option-selected);color:var(--dropdown-border-focus);font-weight:600}.dropdown-option.option-disabled{color:#aaa;cursor:not-allowed;background:transparent}.dropdown-no-result{min-height:50px;display:flex;align-items:center;justify-content:center;padding:0 15px;color:#888;font-size:13px}.dropdown-disabled .dropdown-field{background:var(--dropdown-disabled);color:#999;border-color:#d0d0d0;cursor:not-allowed}.dropdown-options::-webkit-scrollbar{width:6px}.dropdown-options::-webkit-scrollbar-thumb{background:#c5c5c5;border-radius:10px}@media(max-width:768px){:host{width:100%}.dropdown-field{height:var(--dropdown-height)}}\n"] });
|
|
686
723
|
}
|
|
687
724
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Dropdown, decorators: [{
|
|
688
725
|
type: Component,
|
|
689
|
-
args: [{ selector: '
|
|
726
|
+
args: [{ selector: 'brb-dropdown', standalone: true, imports: [], template: "<div class=\"dropdown-container\" [class.dropdown-disabled]=\"disabled\" [class.dropdown-open]=\"isOpen\">\n\n <div class=\"dropdown-field\" (click)=\"toggleDropdown($event)\">\n\n <!-- Label -->\n\n @if (label) {\n\n <label class=\"dropdown-label\">\n {{ label }}\n </label>\n\n }\n\n\n <!-- Selected Value -->\n\n <span class=\"dropdown-value\" [class.dropdown-placeholder]=\"\n !selectedOption\n \">\n\n {{\n selectedOption?.label ||\n placeholder\n }}\n\n </span>\n\n\n <!-- Arrow -->\n\n <span class=\"dropdown-arrow\" [class.arrow-up]=\"isOpen\"></span>\n\n </div>\n\n\n @if (isOpen) {\n\n <div class=\"dropdown-menu\" (click)=\"$event.stopPropagation()\">\n\n <!-- SEARCH -->\n\n @if (searchable) {\n\n <div class=\"dropdown-search\">\n\n <input type=\"text\" class=\"dropdown-search-input\" placeholder=\"Search...\" [value]=\"searchText\"\n (input)=\"onSearch($event)\" />\n\n </div>\n\n }\n\n\n <!-- OPTIONS -->\n\n <div class=\"dropdown-options\">\n\n @for (\n option of filteredOptions;\n track option.value\n ) {\n\n <div class=\"dropdown-option\" [class.option-disabled]=\"\n option.disabled\n \" [class.option-selected]=\"\n option.value === value\n \" (click)=\"\n selectOption(option, $event)\n \">\n\n {{ option.label }}\n\n </div>\n\n }\n\n\n <!-- NO RESULTS -->\n\n @if (\n filteredOptions.length === 0\n ) {\n\n <div class=\"dropdown-no-result\">\n\n No results found\n\n </div>\n\n }\n\n </div>\n\n </div>\n\n }\n\n</div>", styles: [":host{--dropdown-width: 300px;--dropdown-height: 44px;--dropdown-background: #ffffff;--dropdown-border: 1px solid #a9a9a9;--dropdown-border-hover: #777777;--dropdown-border-focus: #68479b;--dropdown-radius: 6px;--dropdown-text-color: #222222;--dropdown-placeholder-color: #777777;--dropdown-menu-background: #ffffff;--dropdown-option-hover: #f3f0f7;--dropdown-option-selected: #eee8f5;--dropdown-disabled: #f5f5f5;--dropdown-font-family: Arial, Helvetica, sans-serif;--dropdown-font-size: 14px;--dropdown-font-weight: 600;--dropdown-shadow: 0 4px 12px rgba(0, 0, 0, .12);--dropdown-label-color: #68479b;--dropdown-arrow-color: #555555;--dropdown-search-border: #cfcfcf;display:block;position:relative;width:var(--dropdown-width);box-sizing:border-box}.dropdown-container{position:relative;width:100%;font-family:var(--dropdown-font-family);box-sizing:border-box}.dropdown-field{position:relative;width:100%;height:var(--dropdown-height);display:flex;align-items:center;box-sizing:border-box;padding:0 48px 0 18px;border:var(--dropdown-border);border-radius:var(--dropdown-radius);background:var(--dropdown-background);color:var(--dropdown-text-color);font-size:var(--dropdown-font-size);font-weight:var(--dropdown-font-weight);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}.dropdown-field:hover{border-color:var(--dropdown-border-hover)}.dropdown-open .dropdown-field{border-color:var(--dropdown-border-focus);box-shadow:0 0 0 1px #68479b1f}.dropdown-label{position:absolute;top:0;left:14px;transform:translateY(-50%);padding:0 6px;background:var(--dropdown-background);color:var(--dropdown-label-color);font-size:13px;font-weight:500;line-height:1;pointer-events:none}.dropdown-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--dropdown-text-color)}.dropdown-placeholder{color:var(--dropdown-placeholder-color)}.dropdown-arrow{position:absolute;right:18px;top:50%;width:9px;height:9px;border-right:2px solid var(--dropdown-arrow-color);border-bottom:2px solid var(--dropdown-arrow-color);transform:translateY(-65%) rotate(45deg);transition:transform .2s ease}.dropdown-arrow.arrow-up{transform:translateY(-25%) rotate(225deg)}.dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;width:100%;z-index:1000;overflow:hidden;background:var(--dropdown-menu-background);border:1px solid #d0d0d0;border-radius:var(--dropdown-radius);box-shadow:var(--dropdown-shadow)}.dropdown-search{padding:8px;border-bottom:1px solid #eeeeee}.dropdown-search-input{width:100%;height:38px;box-sizing:border-box;padding:0 12px;border:1px solid var(--dropdown-search-border);border-radius:5px;outline:none;background:#fff;color:var(--dropdown-text-color);font-family:var(--dropdown-font-family);font-size:14px}.dropdown-search-input:focus{border-color:var(--dropdown-border-focus)}.dropdown-options{max-height:240px;overflow-y:auto}.dropdown-option{min-height:42px;display:flex;align-items:center;padding:0 14px;box-sizing:border-box;color:var(--dropdown-text-color);font-size:var(--dropdown-font-size);cursor:pointer;transition:background-color .15s ease}.dropdown-option:hover{background:var(--dropdown-option-hover)}.dropdown-option.option-selected{background:var(--dropdown-option-selected);color:var(--dropdown-border-focus);font-weight:600}.dropdown-option.option-disabled{color:#aaa;cursor:not-allowed;background:transparent}.dropdown-no-result{min-height:50px;display:flex;align-items:center;justify-content:center;padding:0 15px;color:#888;font-size:13px}.dropdown-disabled .dropdown-field{background:var(--dropdown-disabled);color:#999;border-color:#d0d0d0;cursor:not-allowed}.dropdown-options::-webkit-scrollbar{width:6px}.dropdown-options::-webkit-scrollbar-thumb{background:#c5c5c5;border-radius:10px}@media(max-width:768px){:host{width:100%}.dropdown-field{height:var(--dropdown-height)}}\n"] }]
|
|
690
727
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
|
|
691
728
|
type: Input
|
|
692
729
|
}], placeholder: [{
|
|
@@ -719,11 +756,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
719
756
|
}] } });
|
|
720
757
|
|
|
721
758
|
class GraphCard {
|
|
722
|
-
|
|
759
|
+
// INPUTS
|
|
760
|
+
title = '';
|
|
723
761
|
customClass = '';
|
|
724
762
|
clickable = false;
|
|
725
763
|
disabled = false;
|
|
764
|
+
// HOST CLASSES
|
|
765
|
+
get hostClasses() {
|
|
766
|
+
return [
|
|
767
|
+
this.customClass,
|
|
768
|
+
this.clickable
|
|
769
|
+
? 'graph-card-clickable'
|
|
770
|
+
: '',
|
|
771
|
+
this.disabled
|
|
772
|
+
? 'graph-card-disabled'
|
|
773
|
+
: ''
|
|
774
|
+
]
|
|
775
|
+
.filter(Boolean)
|
|
776
|
+
.join(' ');
|
|
777
|
+
}
|
|
778
|
+
// OUTPUT
|
|
726
779
|
clicked = new EventEmitter();
|
|
780
|
+
// CLICK
|
|
727
781
|
onClick(event) {
|
|
728
782
|
if (!this.clickable ||
|
|
729
783
|
this.disabled) {
|
|
@@ -732,11 +786,11 @@ class GraphCard {
|
|
|
732
786
|
this.clicked.emit(event);
|
|
733
787
|
}
|
|
734
788
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: GraphCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
735
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: GraphCard, isStandalone: true, selector: "
|
|
789
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: GraphCard, isStandalone: true, selector: "brb-graph-card", inputs: { title: "title", customClass: "customClass", clickable: "clickable", disabled: "disabled" }, outputs: { clicked: "clicked" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<div\n class=\"balina-graph-card\"\n [class.graph-card-clickable]=\"clickable\"\n [class.graph-card-disabled]=\"disabled\"\n (click)=\"onClick($event)\"\n>\n\n <!-- TITLE-->\n\n <h2 class=\"graph-card-title\">\n {{ title }}\n </h2>\n\n\n <!--DEVELOPER CONTENT-->\n\n <div class=\"graph-card-content\">\n\n <ng-content></ng-content>\n\n </div>\n\n</div>", styles: [":host{--graph-card-width: 100%;--graph-card-min-height: 300px;--graph-card-max-width: none;--graph-card-padding: 30px;--graph-card-content-gap: 20px;--graph-card-title-content-gap: 25px;--graph-card-background: #ffffff;--graph-card-border: 2px solid #d9d9d9;--graph-card-title-color: #111111;--graph-card-content-color: #333333;--graph-card-radius: 12px;--graph-card-title-size: 32px;--graph-card-title-weight: 700;--graph-card-title-line-height: 1.2;--graph-card-font-family: Arial, Helvetica, sans-serif;display:block;width:var(--graph-card-width);max-width:var(--graph-card-max-width);box-sizing:border-box}.balina-graph-card{width:100%;min-height:var(--graph-card-min-height);height:auto;box-sizing:border-box;display:flex;flex-direction:column;padding:var(--graph-card-padding);background:var(--graph-card-background);border:var(--graph-card-border);border-radius:var(--graph-card-radius);color:var(--graph-card-content-color);font-family:var(--graph-card-font-family);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}.graph-card-title{flex:0 0 auto;margin:0;padding:0;color:var(--graph-card-title-color);font-size:var(--graph-card-title-size);font-weight:var(--graph-card-title-weight);line-height:var(--graph-card-title-line-height);word-break:break-word}.graph-card-content{width:100%;min-width:0;display:flex;flex-direction:column;gap:var(--graph-card-content-gap);margin-top:var(--graph-card-title-content-gap);box-sizing:border-box}.graph-card-content>*{max-width:100%;box-sizing:border-box}.graph-card-content img{display:block;max-width:100%;width:auto;height:auto;object-fit:contain;border-radius:8px}.graph-card-content canvas{display:block;max-width:100%;height:auto}.graph-card-content svg{display:block;max-width:100%;height:auto}.graph-card-content p{margin:0;color:var(--graph-card-content-color);line-height:1.5;word-break:break-word;overflow-wrap:anywhere}.graph-card-content button{box-sizing:border-box;cursor:pointer}:host(.graph-card-clickable){cursor:pointer}:host(.graph-card-clickable) .balina-graph-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px #0000001f}:host(.graph-card-clickable) .balina-graph-card:active{transform:translateY(0);box-shadow:0 2px 6px #0000001a}:host(.graph-card-disabled){opacity:.55;pointer-events:none;cursor:not-allowed}:host(.graph-card-disabled) .balina-graph-card{transform:none;box-shadow:none}@media(max-width:768px){:host{--graph-card-min-height: 250px;--graph-card-padding: 24px;--graph-card-title-size: 28px;--graph-card-content-gap: 16px;--graph-card-title-content-gap: 20px}}@media(max-width:480px){:host{--graph-card-min-height: 220px;--graph-card-padding: 18px;--graph-card-title-size: 24px;--graph-card-content-gap: 14px;--graph-card-title-content-gap: 18px;--graph-card-radius: 10px}}@media(max-width:360px){:host{--graph-card-padding: 14px;--graph-card-title-size: 21px;--graph-card-content-gap: 12px}}\n"] });
|
|
736
790
|
}
|
|
737
791
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: GraphCard, decorators: [{
|
|
738
792
|
type: Component,
|
|
739
|
-
args: [{ selector: '
|
|
793
|
+
args: [{ selector: 'brb-graph-card', standalone: true, imports: [], template: "<div\n class=\"balina-graph-card\"\n [class.graph-card-clickable]=\"clickable\"\n [class.graph-card-disabled]=\"disabled\"\n (click)=\"onClick($event)\"\n>\n\n <!-- TITLE-->\n\n <h2 class=\"graph-card-title\">\n {{ title }}\n </h2>\n\n\n <!--DEVELOPER CONTENT-->\n\n <div class=\"graph-card-content\">\n\n <ng-content></ng-content>\n\n </div>\n\n</div>", styles: [":host{--graph-card-width: 100%;--graph-card-min-height: 300px;--graph-card-max-width: none;--graph-card-padding: 30px;--graph-card-content-gap: 20px;--graph-card-title-content-gap: 25px;--graph-card-background: #ffffff;--graph-card-border: 2px solid #d9d9d9;--graph-card-title-color: #111111;--graph-card-content-color: #333333;--graph-card-radius: 12px;--graph-card-title-size: 32px;--graph-card-title-weight: 700;--graph-card-title-line-height: 1.2;--graph-card-font-family: Arial, Helvetica, sans-serif;display:block;width:var(--graph-card-width);max-width:var(--graph-card-max-width);box-sizing:border-box}.balina-graph-card{width:100%;min-height:var(--graph-card-min-height);height:auto;box-sizing:border-box;display:flex;flex-direction:column;padding:var(--graph-card-padding);background:var(--graph-card-background);border:var(--graph-card-border);border-radius:var(--graph-card-radius);color:var(--graph-card-content-color);font-family:var(--graph-card-font-family);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}.graph-card-title{flex:0 0 auto;margin:0;padding:0;color:var(--graph-card-title-color);font-size:var(--graph-card-title-size);font-weight:var(--graph-card-title-weight);line-height:var(--graph-card-title-line-height);word-break:break-word}.graph-card-content{width:100%;min-width:0;display:flex;flex-direction:column;gap:var(--graph-card-content-gap);margin-top:var(--graph-card-title-content-gap);box-sizing:border-box}.graph-card-content>*{max-width:100%;box-sizing:border-box}.graph-card-content img{display:block;max-width:100%;width:auto;height:auto;object-fit:contain;border-radius:8px}.graph-card-content canvas{display:block;max-width:100%;height:auto}.graph-card-content svg{display:block;max-width:100%;height:auto}.graph-card-content p{margin:0;color:var(--graph-card-content-color);line-height:1.5;word-break:break-word;overflow-wrap:anywhere}.graph-card-content button{box-sizing:border-box;cursor:pointer}:host(.graph-card-clickable){cursor:pointer}:host(.graph-card-clickable) .balina-graph-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px #0000001f}:host(.graph-card-clickable) .balina-graph-card:active{transform:translateY(0);box-shadow:0 2px 6px #0000001a}:host(.graph-card-disabled){opacity:.55;pointer-events:none;cursor:not-allowed}:host(.graph-card-disabled) .balina-graph-card{transform:none;box-shadow:none}@media(max-width:768px){:host{--graph-card-min-height: 250px;--graph-card-padding: 24px;--graph-card-title-size: 28px;--graph-card-content-gap: 16px;--graph-card-title-content-gap: 20px}}@media(max-width:480px){:host{--graph-card-min-height: 220px;--graph-card-padding: 18px;--graph-card-title-size: 24px;--graph-card-content-gap: 14px;--graph-card-title-content-gap: 18px;--graph-card-radius: 10px}}@media(max-width:360px){:host{--graph-card-padding: 14px;--graph-card-title-size: 21px;--graph-card-content-gap: 12px}}\n"] }]
|
|
740
794
|
}], propDecorators: { title: [{
|
|
741
795
|
type: Input
|
|
742
796
|
}], customClass: [{
|
|
@@ -745,16 +799,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
745
799
|
type: Input
|
|
746
800
|
}], disabled: [{
|
|
747
801
|
type: Input
|
|
802
|
+
}], hostClasses: [{
|
|
803
|
+
type: HostBinding,
|
|
804
|
+
args: ['class']
|
|
748
805
|
}], clicked: [{
|
|
749
806
|
type: Output
|
|
750
807
|
}] } });
|
|
751
808
|
|
|
752
809
|
class FlightCard {
|
|
753
|
-
flightNumber = '
|
|
754
|
-
route = '
|
|
755
|
-
date = '
|
|
756
|
-
airTime = '
|
|
757
|
-
description = '
|
|
810
|
+
flightNumber = '';
|
|
811
|
+
route = '';
|
|
812
|
+
date = '';
|
|
813
|
+
airTime = '';
|
|
814
|
+
description = '';
|
|
758
815
|
clickable = false;
|
|
759
816
|
disabled = false;
|
|
760
817
|
customClass = '';
|
|
@@ -776,11 +833,11 @@ class FlightCard {
|
|
|
776
833
|
this.clicked.emit(event);
|
|
777
834
|
}
|
|
778
835
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FlightCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
779
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: FlightCard, isStandalone: true, selector: "
|
|
836
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: FlightCard, isStandalone: true, selector: "brb-flight-card", inputs: { flightNumber: "flightNumber", route: "route", date: "date", airTime: "airTime", description: "description", clickable: "clickable", disabled: "disabled", customClass: "customClass" }, outputs: { clicked: "clicked" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<div class=\"flight-card\" [class.card-clickable]=\"clickable\" [class.card-disabled]=\"disabled\"\n (click)=\"onClick($event)\">\n\n <div class=\"flight-header\">\n\n <div class=\"flight-icon\">\n \u2708\n </div>\n\n <h2 class=\"flight-title\">\n Flight : {{ flightNumber }}\n </h2>\n\n </div>\n\n <div class=\"flight-info\">\n\n <div class=\"flight-route\">\n {{ route }}\n </div>\n\n <div class=\"flight-date\">\n {{ date }}\n </div>\n\n <div class=\"flight-air-time\">\n Air Time : {{ airTime }}\n </div>\n\n </div>\n\n\n <div class=\"flight-divider\"></div>\n\n <div class=\"flight-description\">\n {{ description }}\n </div>\n\n</div>", styles: [":host{--flight-card-width: 100%;--flight-card-min-height: 420px;--flight-card-max-width: none;--flight-card-padding: 35px 40px;--flight-header-gap: 20px;--flight-info-gap: 20px;--flight-description-gap: 28px;--flight-title-info-gap: 40px;--flight-card-background: #ffffff;--flight-card-border: 2px solid #d9d9d9;--flight-card-text: #111111;--flight-card-icon: #3478f6;--flight-card-divider: #eeeeee;--flight-card-radius: 12px;--flight-title-size: 30px;--flight-title-weight: 700;--flight-title-line-height: 1.2;--flight-route-size: 25px;--flight-route-weight: 500;--flight-date-size: 23px;--flight-date-weight: 500;--flight-air-time-size: 23px;--flight-air-time-weight: 500;--flight-description-size: 18px;--flight-description-weight: 400;--flight-description-line-height: 1.5;--flight-icon-size: 40px;--flight-divider-height: 4px;--flight-font-family: Arial, Helvetica, sans-serif;display:block;width:var(--flight-card-width);max-width:var(--flight-card-max-width);box-sizing:border-box}.flight-card{width:100%;min-height:var(--flight-card-min-height);height:auto;box-sizing:border-box;display:flex;flex-direction:column;padding:var(--flight-card-padding);background:var(--flight-card-background);border:var(--flight-card-border);border-radius:var(--flight-card-radius);color:var(--flight-card-text);font-family:var(--flight-font-family);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}.flight-header{width:100%;display:flex;align-items:center;gap:var(--flight-header-gap);box-sizing:border-box}.flight-icon{flex:0 0 auto;width:var(--flight-icon-size);height:var(--flight-icon-size);display:flex;align-items:center;justify-content:center;color:var(--flight-card-icon);font-size:var(--flight-icon-size);line-height:1;transform:rotate(-8deg)}.flight-title{flex:1;min-width:0;margin:0;padding:0;color:var(--flight-card-text);font-size:var(--flight-title-size);font-weight:var(--flight-title-weight);line-height:var(--flight-title-line-height);word-break:break-word}.flight-info{width:100%;display:flex;flex-direction:column;gap:var(--flight-info-gap);margin-top:var(--flight-title-info-gap);box-sizing:border-box}.flight-route{color:var(--flight-card-text);font-size:var(--flight-route-size);font-weight:var(--flight-route-weight);line-height:1.3;word-break:break-word}.flight-date{color:var(--flight-card-text);font-size:var(--flight-date-size);font-weight:var(--flight-date-weight);line-height:1.3;word-break:break-word}.flight-air-time{color:var(--flight-card-text);font-size:var(--flight-air-time-size);font-weight:var(--flight-air-time-weight);line-height:1.3;word-break:break-word}.flight-divider{width:100%;height:var(--flight-divider-height);flex-shrink:0;margin-top:25px;background:var(--flight-card-divider);border-radius:999px}.flight-description{width:100%;margin-top:var(--flight-description-gap);color:var(--flight-card-text);font-size:var(--flight-description-size);font-weight:var(--flight-description-weight);line-height:var(--flight-description-line-height);word-break:break-word;overflow-wrap:anywhere}:host(.flight-card-clickable){cursor:pointer}:host(.flight-card-clickable) .flight-card{cursor:pointer}:host(.flight-card-clickable) .flight-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px #0000001f}:host(.flight-card-clickable) .flight-card:active{transform:translateY(0);box-shadow:0 2px 6px #0000001a}:host(.flight-card-disabled){opacity:.55;cursor:not-allowed;pointer-events:none}:host(.flight-card-disabled) .flight-card{box-shadow:none;transform:none}.flight-card img{display:block;max-width:100%;height:auto}.flight-card canvas{display:block;max-width:100%;height:auto}.flight-card svg{max-width:100%;height:auto}.flight-card>*{max-width:100%;box-sizing:border-box}@media(max-width:768px){:host{--flight-card-min-height: 350px;--flight-card-padding: 28px;--flight-header-gap: 16px;--flight-info-gap: 18px;--flight-title-info-gap: 32px;--flight-title-size: 26px;--flight-route-size: 21px;--flight-date-size: 20px;--flight-air-time-size: 20px;--flight-description-size: 17px;--flight-icon-size: 34px}}@media(max-width:480px){:host{--flight-card-min-height: 300px;--flight-card-padding: 20px;--flight-header-gap: 12px;--flight-info-gap: 14px;--flight-title-info-gap: 25px;--flight-title-size: 22px;--flight-route-size: 18px;--flight-date-size: 17px;--flight-air-time-size: 17px;--flight-description-size: 15px;--flight-description-line-height: 1.45;--flight-icon-size: 28px;--flight-card-radius: 10px}}@media(max-width:360px){:host{--flight-card-padding: 16px;--flight-header-gap: 10px;--flight-title-size: 20px;--flight-route-size: 17px;--flight-date-size: 16px;--flight-air-time-size: 16px;--flight-description-size: 14px;--flight-icon-size: 25px}}\n"] });
|
|
780
837
|
}
|
|
781
838
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FlightCard, decorators: [{
|
|
782
839
|
type: Component,
|
|
783
|
-
args: [{ selector: '
|
|
840
|
+
args: [{ selector: 'brb-flight-card', standalone: true, imports: [], template: "<div class=\"flight-card\" [class.card-clickable]=\"clickable\" [class.card-disabled]=\"disabled\"\n (click)=\"onClick($event)\">\n\n <div class=\"flight-header\">\n\n <div class=\"flight-icon\">\n \u2708\n </div>\n\n <h2 class=\"flight-title\">\n Flight : {{ flightNumber }}\n </h2>\n\n </div>\n\n <div class=\"flight-info\">\n\n <div class=\"flight-route\">\n {{ route }}\n </div>\n\n <div class=\"flight-date\">\n {{ date }}\n </div>\n\n <div class=\"flight-air-time\">\n Air Time : {{ airTime }}\n </div>\n\n </div>\n\n\n <div class=\"flight-divider\"></div>\n\n <div class=\"flight-description\">\n {{ description }}\n </div>\n\n</div>", styles: [":host{--flight-card-width: 100%;--flight-card-min-height: 420px;--flight-card-max-width: none;--flight-card-padding: 35px 40px;--flight-header-gap: 20px;--flight-info-gap: 20px;--flight-description-gap: 28px;--flight-title-info-gap: 40px;--flight-card-background: #ffffff;--flight-card-border: 2px solid #d9d9d9;--flight-card-text: #111111;--flight-card-icon: #3478f6;--flight-card-divider: #eeeeee;--flight-card-radius: 12px;--flight-title-size: 30px;--flight-title-weight: 700;--flight-title-line-height: 1.2;--flight-route-size: 25px;--flight-route-weight: 500;--flight-date-size: 23px;--flight-date-weight: 500;--flight-air-time-size: 23px;--flight-air-time-weight: 500;--flight-description-size: 18px;--flight-description-weight: 400;--flight-description-line-height: 1.5;--flight-icon-size: 40px;--flight-divider-height: 4px;--flight-font-family: Arial, Helvetica, sans-serif;display:block;width:var(--flight-card-width);max-width:var(--flight-card-max-width);box-sizing:border-box}.flight-card{width:100%;min-height:var(--flight-card-min-height);height:auto;box-sizing:border-box;display:flex;flex-direction:column;padding:var(--flight-card-padding);background:var(--flight-card-background);border:var(--flight-card-border);border-radius:var(--flight-card-radius);color:var(--flight-card-text);font-family:var(--flight-font-family);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}.flight-header{width:100%;display:flex;align-items:center;gap:var(--flight-header-gap);box-sizing:border-box}.flight-icon{flex:0 0 auto;width:var(--flight-icon-size);height:var(--flight-icon-size);display:flex;align-items:center;justify-content:center;color:var(--flight-card-icon);font-size:var(--flight-icon-size);line-height:1;transform:rotate(-8deg)}.flight-title{flex:1;min-width:0;margin:0;padding:0;color:var(--flight-card-text);font-size:var(--flight-title-size);font-weight:var(--flight-title-weight);line-height:var(--flight-title-line-height);word-break:break-word}.flight-info{width:100%;display:flex;flex-direction:column;gap:var(--flight-info-gap);margin-top:var(--flight-title-info-gap);box-sizing:border-box}.flight-route{color:var(--flight-card-text);font-size:var(--flight-route-size);font-weight:var(--flight-route-weight);line-height:1.3;word-break:break-word}.flight-date{color:var(--flight-card-text);font-size:var(--flight-date-size);font-weight:var(--flight-date-weight);line-height:1.3;word-break:break-word}.flight-air-time{color:var(--flight-card-text);font-size:var(--flight-air-time-size);font-weight:var(--flight-air-time-weight);line-height:1.3;word-break:break-word}.flight-divider{width:100%;height:var(--flight-divider-height);flex-shrink:0;margin-top:25px;background:var(--flight-card-divider);border-radius:999px}.flight-description{width:100%;margin-top:var(--flight-description-gap);color:var(--flight-card-text);font-size:var(--flight-description-size);font-weight:var(--flight-description-weight);line-height:var(--flight-description-line-height);word-break:break-word;overflow-wrap:anywhere}:host(.flight-card-clickable){cursor:pointer}:host(.flight-card-clickable) .flight-card{cursor:pointer}:host(.flight-card-clickable) .flight-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px #0000001f}:host(.flight-card-clickable) .flight-card:active{transform:translateY(0);box-shadow:0 2px 6px #0000001a}:host(.flight-card-disabled){opacity:.55;cursor:not-allowed;pointer-events:none}:host(.flight-card-disabled) .flight-card{box-shadow:none;transform:none}.flight-card img{display:block;max-width:100%;height:auto}.flight-card canvas{display:block;max-width:100%;height:auto}.flight-card svg{max-width:100%;height:auto}.flight-card>*{max-width:100%;box-sizing:border-box}@media(max-width:768px){:host{--flight-card-min-height: 350px;--flight-card-padding: 28px;--flight-header-gap: 16px;--flight-info-gap: 18px;--flight-title-info-gap: 32px;--flight-title-size: 26px;--flight-route-size: 21px;--flight-date-size: 20px;--flight-air-time-size: 20px;--flight-description-size: 17px;--flight-icon-size: 34px}}@media(max-width:480px){:host{--flight-card-min-height: 300px;--flight-card-padding: 20px;--flight-header-gap: 12px;--flight-info-gap: 14px;--flight-title-info-gap: 25px;--flight-title-size: 22px;--flight-route-size: 18px;--flight-date-size: 17px;--flight-air-time-size: 17px;--flight-description-size: 15px;--flight-description-line-height: 1.45;--flight-icon-size: 28px;--flight-card-radius: 10px}}@media(max-width:360px){:host{--flight-card-padding: 16px;--flight-header-gap: 10px;--flight-title-size: 20px;--flight-route-size: 17px;--flight-date-size: 16px;--flight-air-time-size: 16px;--flight-description-size: 14px;--flight-icon-size: 25px}}\n"] }]
|
|
784
841
|
}], propDecorators: { flightNumber: [{
|
|
785
842
|
type: Input
|
|
786
843
|
}], route: [{
|
|
@@ -805,16 +862,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
805
862
|
}] } });
|
|
806
863
|
|
|
807
864
|
class Breadcrumb {
|
|
808
|
-
/*
|
|
809
|
-
INPUTS
|
|
810
|
-
===================================== */
|
|
865
|
+
/*INPUTS*/
|
|
811
866
|
items = [];
|
|
812
867
|
customClass = '';
|
|
813
868
|
clickable = true;
|
|
814
869
|
disabled = false;
|
|
815
|
-
/*
|
|
816
|
-
CUSTOM CLASS + STATES
|
|
817
|
-
===================================== */
|
|
870
|
+
/*CUSTOM CLASS + STATES*/
|
|
818
871
|
get hostClasses() {
|
|
819
872
|
return [
|
|
820
873
|
this.customClass,
|
|
@@ -828,13 +881,9 @@ class Breadcrumb {
|
|
|
828
881
|
.filter(Boolean)
|
|
829
882
|
.join(' ');
|
|
830
883
|
}
|
|
831
|
-
/*
|
|
832
|
-
DEVELOPER EVENT
|
|
833
|
-
===================================== */
|
|
884
|
+
/*DEVELOPER EVENT*/
|
|
834
885
|
clicked = new EventEmitter();
|
|
835
|
-
/*
|
|
836
|
-
CLICK
|
|
837
|
-
===================================== */
|
|
886
|
+
/* CLICK*/
|
|
838
887
|
onClick(item, event) {
|
|
839
888
|
if (!this.clickable ||
|
|
840
889
|
this.disabled) {
|
|
@@ -846,11 +895,11 @@ class Breadcrumb {
|
|
|
846
895
|
});
|
|
847
896
|
}
|
|
848
897
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Breadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
849
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: Breadcrumb, isStandalone: true, selector: "
|
|
898
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: Breadcrumb, isStandalone: true, selector: "brb-breadcrumb", inputs: { items: "items", customClass: "customClass", clickable: "clickable", disabled: "disabled" }, outputs: { clicked: "clicked" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<nav\n class=\"balina-breadcrumb\"\n [class.breadcrumb-clickable]=\"clickable\"\n [class.breadcrumb-disabled]=\"disabled\"\n aria-label=\"Breadcrumb\"\n>\n\n @for (item of items; track $index) {\n\n <div class=\"breadcrumb-item\">\n\n <span\n class=\"breadcrumb-label\"\n (click)=\"onClick(item, $event)\"\n >\n {{ item.label }}\n </span>\n\n @if (!$last) {\n\n <span\n class=\"breadcrumb-arrow\"\n aria-hidden=\"true\"\n >\n \u203A\n </span>\n\n }\n\n </div>\n\n }\n\n</nav>", styles: [":host{--breadcrumb-width: 100%;--breadcrumb-min-height: 40px;--breadcrumb-gap: 12px;--breadcrumb-padding: 0;--breadcrumb-color: #111111;--breadcrumb-current-color: #111111;--breadcrumb-hover-color: #3478f6;--breadcrumb-arrow-color: #777777;--breadcrumb-font-size: 26px;--breadcrumb-font-weight: 600;--breadcrumb-current-font-weight: 700;--breadcrumb-line-height: 1.3;--breadcrumb-arrow-size: 30px;--breadcrumb-arrow-weight: 400;--breadcrumb-font-family: Arial, Helvetica, sans-serif;display:block;width:var(--breadcrumb-width);min-height:var(--breadcrumb-min-height);box-sizing:border-box}.balina-breadcrumb{width:100%;min-height:var(--breadcrumb-min-height);box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:var(--breadcrumb-gap);padding:var(--breadcrumb-padding);color:var(--breadcrumb-color);font-family:var(--breadcrumb-font-family);font-size:var(--breadcrumb-font-size);font-weight:var(--breadcrumb-font-weight);line-height:var(--breadcrumb-line-height)}.breadcrumb-item{display:flex;align-items:center;gap:var(--breadcrumb-gap);flex:0 0 auto;white-space:nowrap}.breadcrumb-label{display:inline-flex;align-items:center;color:var(--breadcrumb-color);font-size:var(--breadcrumb-font-size);font-weight:var(--breadcrumb-font-weight);line-height:var(--breadcrumb-line-height);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease,opacity .2s ease}.breadcrumb-current{color:var(--breadcrumb-current-color);font-weight:var(--breadcrumb-current-font-weight);cursor:default}:host(.breadcrumb-clickable) .breadcrumb-label:not(.breadcrumb-current):hover{color:var(--breadcrumb-hover-color);opacity:.8}.breadcrumb-arrow{display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--breadcrumb-arrow-color);font-size:var(--breadcrumb-arrow-size);font-weight:var(--breadcrumb-arrow-weight);line-height:1;-webkit-user-select:none;user-select:none}:host(:not(.breadcrumb-clickable)) .breadcrumb-label{cursor:default}:host(.breadcrumb-disabled){opacity:.55;pointer-events:none;cursor:not-allowed}@media(max-width:768px){:host{--breadcrumb-font-size: 21px;--breadcrumb-arrow-size: 27px;--breadcrumb-gap: 9px;--breadcrumb-min-height: 36px}}@media(max-width:480px){:host{--breadcrumb-font-size: 18px;--breadcrumb-arrow-size: 24px;--breadcrumb-gap: 7px;--breadcrumb-min-height: 32px}.balina-breadcrumb{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}.breadcrumb-item{flex-shrink:0}}@media(max-width:360px){:host{--breadcrumb-font-size: 16px;--breadcrumb-arrow-size: 21px;--breadcrumb-gap: 5px}}\n"] });
|
|
850
899
|
}
|
|
851
900
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Breadcrumb, decorators: [{
|
|
852
901
|
type: Component,
|
|
853
|
-
args: [{ selector: '
|
|
902
|
+
args: [{ selector: 'brb-breadcrumb', standalone: true, imports: [], template: "<nav\n class=\"balina-breadcrumb\"\n [class.breadcrumb-clickable]=\"clickable\"\n [class.breadcrumb-disabled]=\"disabled\"\n aria-label=\"Breadcrumb\"\n>\n\n @for (item of items; track $index) {\n\n <div class=\"breadcrumb-item\">\n\n <span\n class=\"breadcrumb-label\"\n (click)=\"onClick(item, $event)\"\n >\n {{ item.label }}\n </span>\n\n @if (!$last) {\n\n <span\n class=\"breadcrumb-arrow\"\n aria-hidden=\"true\"\n >\n \u203A\n </span>\n\n }\n\n </div>\n\n }\n\n</nav>", styles: [":host{--breadcrumb-width: 100%;--breadcrumb-min-height: 40px;--breadcrumb-gap: 12px;--breadcrumb-padding: 0;--breadcrumb-color: #111111;--breadcrumb-current-color: #111111;--breadcrumb-hover-color: #3478f6;--breadcrumb-arrow-color: #777777;--breadcrumb-font-size: 26px;--breadcrumb-font-weight: 600;--breadcrumb-current-font-weight: 700;--breadcrumb-line-height: 1.3;--breadcrumb-arrow-size: 30px;--breadcrumb-arrow-weight: 400;--breadcrumb-font-family: Arial, Helvetica, sans-serif;display:block;width:var(--breadcrumb-width);min-height:var(--breadcrumb-min-height);box-sizing:border-box}.balina-breadcrumb{width:100%;min-height:var(--breadcrumb-min-height);box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:var(--breadcrumb-gap);padding:var(--breadcrumb-padding);color:var(--breadcrumb-color);font-family:var(--breadcrumb-font-family);font-size:var(--breadcrumb-font-size);font-weight:var(--breadcrumb-font-weight);line-height:var(--breadcrumb-line-height)}.breadcrumb-item{display:flex;align-items:center;gap:var(--breadcrumb-gap);flex:0 0 auto;white-space:nowrap}.breadcrumb-label{display:inline-flex;align-items:center;color:var(--breadcrumb-color);font-size:var(--breadcrumb-font-size);font-weight:var(--breadcrumb-font-weight);line-height:var(--breadcrumb-line-height);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease,opacity .2s ease}.breadcrumb-current{color:var(--breadcrumb-current-color);font-weight:var(--breadcrumb-current-font-weight);cursor:default}:host(.breadcrumb-clickable) .breadcrumb-label:not(.breadcrumb-current):hover{color:var(--breadcrumb-hover-color);opacity:.8}.breadcrumb-arrow{display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--breadcrumb-arrow-color);font-size:var(--breadcrumb-arrow-size);font-weight:var(--breadcrumb-arrow-weight);line-height:1;-webkit-user-select:none;user-select:none}:host(:not(.breadcrumb-clickable)) .breadcrumb-label{cursor:default}:host(.breadcrumb-disabled){opacity:.55;pointer-events:none;cursor:not-allowed}@media(max-width:768px){:host{--breadcrumb-font-size: 21px;--breadcrumb-arrow-size: 27px;--breadcrumb-gap: 9px;--breadcrumb-min-height: 36px}}@media(max-width:480px){:host{--breadcrumb-font-size: 18px;--breadcrumb-arrow-size: 24px;--breadcrumb-gap: 7px;--breadcrumb-min-height: 32px}.balina-breadcrumb{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}.breadcrumb-item{flex-shrink:0}}@media(max-width:360px){:host{--breadcrumb-font-size: 16px;--breadcrumb-arrow-size: 21px;--breadcrumb-gap: 5px}}\n"] }]
|
|
854
903
|
}], propDecorators: { items: [{
|
|
855
904
|
type: Input
|
|
856
905
|
}], customClass: [{
|
|
@@ -866,6 +915,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
866
915
|
type: Output
|
|
867
916
|
}] } });
|
|
868
917
|
|
|
918
|
+
class MultiSelectDropdown {
|
|
919
|
+
elementRef;
|
|
920
|
+
label = 'Add Parameters';
|
|
921
|
+
options = [];
|
|
922
|
+
selectedValues = [];
|
|
923
|
+
placeholder = 'Select options';
|
|
924
|
+
customClass = '';
|
|
925
|
+
disabled = false;
|
|
926
|
+
isOpen = false;
|
|
927
|
+
get hostClasses() {
|
|
928
|
+
return [
|
|
929
|
+
this.customClass,
|
|
930
|
+
this.disabled ? 'dropdown-disabled' : '',
|
|
931
|
+
this.isOpen ? 'dropdown-open' : ''
|
|
932
|
+
]
|
|
933
|
+
.filter(Boolean)
|
|
934
|
+
.join(' ');
|
|
935
|
+
}
|
|
936
|
+
selectionChange = new EventEmitter();
|
|
937
|
+
opened = new EventEmitter();
|
|
938
|
+
closed = new EventEmitter();
|
|
939
|
+
clicked = new EventEmitter();
|
|
940
|
+
constructor(elementRef) {
|
|
941
|
+
this.elementRef = elementRef;
|
|
942
|
+
}
|
|
943
|
+
toggle(event) {
|
|
944
|
+
if (this.disabled) {
|
|
945
|
+
return;
|
|
946
|
+
}
|
|
947
|
+
event.stopPropagation();
|
|
948
|
+
this.clicked.emit(event);
|
|
949
|
+
this.isOpen = !this.isOpen;
|
|
950
|
+
if (this.isOpen) {
|
|
951
|
+
this.opened.emit();
|
|
952
|
+
}
|
|
953
|
+
else {
|
|
954
|
+
this.closed.emit();
|
|
955
|
+
}
|
|
956
|
+
}
|
|
957
|
+
onOptionClick(option, event) {
|
|
958
|
+
if (this.disabled ||
|
|
959
|
+
option.disabled) {
|
|
960
|
+
return;
|
|
961
|
+
}
|
|
962
|
+
event.stopPropagation();
|
|
963
|
+
const values = [...this.selectedValues];
|
|
964
|
+
const index = values.indexOf(option.value);
|
|
965
|
+
if (index === -1) {
|
|
966
|
+
values.push(option.value);
|
|
967
|
+
}
|
|
968
|
+
else {
|
|
969
|
+
values.splice(index, 1);
|
|
970
|
+
}
|
|
971
|
+
this.selectedValues =
|
|
972
|
+
values;
|
|
973
|
+
this.selectionChange.emit([...values]);
|
|
974
|
+
}
|
|
975
|
+
isSelected(option) {
|
|
976
|
+
return this.selectedValues.includes(option.value);
|
|
977
|
+
}
|
|
978
|
+
get displayText() {
|
|
979
|
+
return this.label;
|
|
980
|
+
}
|
|
981
|
+
onDocumentClick(event) {
|
|
982
|
+
if (!this.isOpen) {
|
|
983
|
+
return;
|
|
984
|
+
}
|
|
985
|
+
const target = event.target;
|
|
986
|
+
if (!this.elementRef.nativeElement
|
|
987
|
+
.contains(target)) {
|
|
988
|
+
this.close();
|
|
989
|
+
}
|
|
990
|
+
}
|
|
991
|
+
close() {
|
|
992
|
+
if (!this.isOpen) {
|
|
993
|
+
return;
|
|
994
|
+
}
|
|
995
|
+
this.isOpen = false;
|
|
996
|
+
this.closed.emit();
|
|
997
|
+
}
|
|
998
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: MultiSelectDropdown, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
999
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: MultiSelectDropdown, isStandalone: true, selector: "brb-multi-select-dropdown", inputs: { label: "label", options: "options", selectedValues: "selectedValues", placeholder: "placeholder", customClass: "customClass", disabled: "disabled" }, outputs: { selectionChange: "selectionChange", opened: "opened", closed: "closed", clicked: "clicked" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<div\n class=\"multi-dropdown\"\n>\n <button\n type=\"button\"\n class=\"dropdown-header\"\n [disabled]=\"disabled\"\n (click)=\"toggle($event)\"\n >\n\n <span class=\"dropdown-label\">\n\n {{ displayText }}\n\n </span>\n\n\n <span\n class=\"dropdown-arrow\"\n [class.arrow-open]=\"isOpen\"\n ></span>\n\n </button>\n @if (isOpen) {\n\n <div\n class=\"dropdown-options\"\n >\n\n @for (\n option of options;\n track option.value\n ) {\n\n <button\n type=\"button\"\n class=\"dropdown-option\"\n [class.option-selected]=\"\n isSelected(option)\n \"\n [class.option-disabled]=\"\n option.disabled\n \"\n [disabled]=\"\n disabled ||\n option.disabled\n \"\n (click)=\"\n onOptionClick(\n option,\n $event\n )\n \"\n >\n\n <!-- Checkbox -->\n\n <span\n class=\"checkbox\"\n [class.checkbox-selected]=\"\n isSelected(option)\n \"\n >\n\n @if (\n isSelected(option)\n ) {\n\n <span class=\"checkmark\">\n \u2713\n </span>\n\n }\n\n </span>\n\n\n <!-- Label -->\n\n <span\n class=\"option-label\"\n >\n {{ option.label }}\n </span>\n\n </button>\n\n }\n\n </div>\n\n }\n\n</div>", styles: [":host{--dropdown-width: 300px;--dropdown-max-width: 100%;--dropdown-max-height: 190px;--dropdown-background: #ffffff;--dropdown-text: #344054;--dropdown-option-text: #344054;--dropdown-border: #b8c1d1;--dropdown-focus-border: #2962ff;--dropdown-hover: #f5f7fb;--dropdown-selected: #e9efff;--dropdown-arrow: #344054;--dropdown-scrollbar: #7050c8;--dropdown-header-height: 42px;--dropdown-header-padding: 0 12px;--dropdown-border-width: 1.5px;--dropdown-radius: 10px;--dropdown-label-size: 14px;--dropdown-label-weight: 400;--dropdown-option-size: 14px;--dropdown-option-weight: 400;--dropdown-option-height: 38px;--dropdown-option-padding: 0 13px;--dropdown-arrow-size: 15px;--dropdown-font-family: Arial, Helvetica, sans-serif;display:block;width:var(--dropdown-width);max-width:var(--dropdown-max-width);box-sizing:border-box;position:relative;font-family:var(--dropdown-font-family)}:host .multi-dropdown{width:100%;display:flex;flex-direction:column;position:relative;box-sizing:border-box}:host .dropdown-header{width:100%;height:var(--dropdown-header-height);min-height:var(--dropdown-header-height);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:var(--dropdown-header-padding);box-sizing:border-box;background:var(--dropdown-background);border:var(--dropdown-border-width) solid var(--dropdown-border);border-radius:var(--dropdown-radius);color:var(--dropdown-text);font-family:inherit;font-size:var(--dropdown-label-size);font-weight:var(--dropdown-label-weight);text-align:left;cursor:pointer;outline:none;position:relative;z-index:2;transition:border-color .15s ease,box-shadow .15s ease}:host .dropdown-header:hover{border-color:#8e99aa}:host .dropdown-header:focus,:host .dropdown-header:focus-visible{border-color:var(--dropdown-focus-border);box-shadow:0 0 0 2px #2962ff2e}:host(.dropdown-open) .dropdown-header{border-radius:var(--dropdown-radius);border-color:var(--dropdown-focus-border);box-shadow:0 0 0 1px #2962ff14;border-bottom-color:#fff}:host .dropdown-label{flex:1 1 auto;min-width:0;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--dropdown-text);font-size:var(--dropdown-label-size);font-weight:var(--dropdown-label-weight);line-height:1.2}:host .dropdown-arrow{width:8px;height:8px;min-width:8px;flex:0 0 8px;display:flex;color:var(--dropdown-arrow);border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s ease}:host .dropdown-arrow.arrow-open{transform:translateY(2px) rotate(225deg)}:host .dropdown-options{width:100%;max-height:var(--dropdown-max-height);display:flex;flex-direction:column;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;margin-top:7px;padding:4px 4px 5px;background:var(--dropdown-background);border:var(--dropdown-border-width) solid var(--dropdown-border);border-radius:var(--dropdown-radius);position:relative;z-index:1;box-shadow:0 3px 8px #10182814}:host .dropdown-option{width:100%;height:var(--dropdown-option-height);min-height:var(--dropdown-option-height);flex:0 0 auto;display:flex;align-items:center;padding:var(--dropdown-option-padding);box-sizing:border-box;border:none;border-radius:6px;background:transparent;color:var(--dropdown-option-text);font-family:inherit;font-size:var(--dropdown-option-size);font-weight:var(--dropdown-option-weight);text-align:left;cursor:pointer;outline:none;transition:background .12s ease,color .12s ease}:host .dropdown-option:hover{background:var(--dropdown-hover)}:host .dropdown-option.option-selected{background:var(--dropdown-selected);color:#2457d6}:host .dropdown-option.option-selected:hover{background:#e2e9ff}:host .checkbox{width:16px;height:16px;flex:0 0 16px;display:inline-flex;align-items:center;justify-content:center;margin-right:10px;box-sizing:border-box;border:1.5px solid var(--dropdown-border);border-radius:4px;background:var(--dropdown-background)}:host .checkbox.checkbox-selected{border-color:var(--dropdown-focus-border);background:var(--dropdown-focus-border)}:host .checkmark{color:#fff;font-size:12px;font-weight:700;line-height:1}:host .option-label{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .dropdown-option.option-disabled{opacity:.45;cursor:not-allowed}:host .dropdown-option.option-disabled:hover{background:transparent}:host .dropdown-options::-webkit-scrollbar{width:5px}:host .dropdown-options::-webkit-scrollbar-track{background:transparent;margin:5px 0}:host .dropdown-options::-webkit-scrollbar-thumb{background:var(--dropdown-scrollbar);border-radius:10px;min-height:35px}:host .dropdown-options::-webkit-scrollbar-thumb:hover{background:#5c3bb0}:host .dropdown-options{scrollbar-width:thin;scrollbar-color:var(--dropdown-scrollbar) transparent}:host(.dropdown-disabled){opacity:.55;pointer-events:none}@media(max-width:768px){:host{--dropdown-width: 280px;--dropdown-header-height: 42px;--dropdown-option-height: 38px}}@media(max-width:480px){:host{--dropdown-width: 100%;--dropdown-header-height: 42px;--dropdown-header-padding: 0 11px;--dropdown-label-size: 14px;--dropdown-option-size: 14px;--dropdown-option-height: 38px;--dropdown-option-padding: 0 11px;--dropdown-max-height: 180px;--dropdown-radius: 9px}}\n"] });
|
|
1000
|
+
}
|
|
1001
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: MultiSelectDropdown, decorators: [{
|
|
1002
|
+
type: Component,
|
|
1003
|
+
args: [{ selector: 'brb-multi-select-dropdown', standalone: true, imports: [], template: "<div\n class=\"multi-dropdown\"\n>\n <button\n type=\"button\"\n class=\"dropdown-header\"\n [disabled]=\"disabled\"\n (click)=\"toggle($event)\"\n >\n\n <span class=\"dropdown-label\">\n\n {{ displayText }}\n\n </span>\n\n\n <span\n class=\"dropdown-arrow\"\n [class.arrow-open]=\"isOpen\"\n ></span>\n\n </button>\n @if (isOpen) {\n\n <div\n class=\"dropdown-options\"\n >\n\n @for (\n option of options;\n track option.value\n ) {\n\n <button\n type=\"button\"\n class=\"dropdown-option\"\n [class.option-selected]=\"\n isSelected(option)\n \"\n [class.option-disabled]=\"\n option.disabled\n \"\n [disabled]=\"\n disabled ||\n option.disabled\n \"\n (click)=\"\n onOptionClick(\n option,\n $event\n )\n \"\n >\n\n <!-- Checkbox -->\n\n <span\n class=\"checkbox\"\n [class.checkbox-selected]=\"\n isSelected(option)\n \"\n >\n\n @if (\n isSelected(option)\n ) {\n\n <span class=\"checkmark\">\n \u2713\n </span>\n\n }\n\n </span>\n\n\n <!-- Label -->\n\n <span\n class=\"option-label\"\n >\n {{ option.label }}\n </span>\n\n </button>\n\n }\n\n </div>\n\n }\n\n</div>", styles: [":host{--dropdown-width: 300px;--dropdown-max-width: 100%;--dropdown-max-height: 190px;--dropdown-background: #ffffff;--dropdown-text: #344054;--dropdown-option-text: #344054;--dropdown-border: #b8c1d1;--dropdown-focus-border: #2962ff;--dropdown-hover: #f5f7fb;--dropdown-selected: #e9efff;--dropdown-arrow: #344054;--dropdown-scrollbar: #7050c8;--dropdown-header-height: 42px;--dropdown-header-padding: 0 12px;--dropdown-border-width: 1.5px;--dropdown-radius: 10px;--dropdown-label-size: 14px;--dropdown-label-weight: 400;--dropdown-option-size: 14px;--dropdown-option-weight: 400;--dropdown-option-height: 38px;--dropdown-option-padding: 0 13px;--dropdown-arrow-size: 15px;--dropdown-font-family: Arial, Helvetica, sans-serif;display:block;width:var(--dropdown-width);max-width:var(--dropdown-max-width);box-sizing:border-box;position:relative;font-family:var(--dropdown-font-family)}:host .multi-dropdown{width:100%;display:flex;flex-direction:column;position:relative;box-sizing:border-box}:host .dropdown-header{width:100%;height:var(--dropdown-header-height);min-height:var(--dropdown-header-height);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:var(--dropdown-header-padding);box-sizing:border-box;background:var(--dropdown-background);border:var(--dropdown-border-width) solid var(--dropdown-border);border-radius:var(--dropdown-radius);color:var(--dropdown-text);font-family:inherit;font-size:var(--dropdown-label-size);font-weight:var(--dropdown-label-weight);text-align:left;cursor:pointer;outline:none;position:relative;z-index:2;transition:border-color .15s ease,box-shadow .15s ease}:host .dropdown-header:hover{border-color:#8e99aa}:host .dropdown-header:focus,:host .dropdown-header:focus-visible{border-color:var(--dropdown-focus-border);box-shadow:0 0 0 2px #2962ff2e}:host(.dropdown-open) .dropdown-header{border-radius:var(--dropdown-radius);border-color:var(--dropdown-focus-border);box-shadow:0 0 0 1px #2962ff14;border-bottom-color:#fff}:host .dropdown-label{flex:1 1 auto;min-width:0;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--dropdown-text);font-size:var(--dropdown-label-size);font-weight:var(--dropdown-label-weight);line-height:1.2}:host .dropdown-arrow{width:8px;height:8px;min-width:8px;flex:0 0 8px;display:flex;color:var(--dropdown-arrow);border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s ease}:host .dropdown-arrow.arrow-open{transform:translateY(2px) rotate(225deg)}:host .dropdown-options{width:100%;max-height:var(--dropdown-max-height);display:flex;flex-direction:column;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;margin-top:7px;padding:4px 4px 5px;background:var(--dropdown-background);border:var(--dropdown-border-width) solid var(--dropdown-border);border-radius:var(--dropdown-radius);position:relative;z-index:1;box-shadow:0 3px 8px #10182814}:host .dropdown-option{width:100%;height:var(--dropdown-option-height);min-height:var(--dropdown-option-height);flex:0 0 auto;display:flex;align-items:center;padding:var(--dropdown-option-padding);box-sizing:border-box;border:none;border-radius:6px;background:transparent;color:var(--dropdown-option-text);font-family:inherit;font-size:var(--dropdown-option-size);font-weight:var(--dropdown-option-weight);text-align:left;cursor:pointer;outline:none;transition:background .12s ease,color .12s ease}:host .dropdown-option:hover{background:var(--dropdown-hover)}:host .dropdown-option.option-selected{background:var(--dropdown-selected);color:#2457d6}:host .dropdown-option.option-selected:hover{background:#e2e9ff}:host .checkbox{width:16px;height:16px;flex:0 0 16px;display:inline-flex;align-items:center;justify-content:center;margin-right:10px;box-sizing:border-box;border:1.5px solid var(--dropdown-border);border-radius:4px;background:var(--dropdown-background)}:host .checkbox.checkbox-selected{border-color:var(--dropdown-focus-border);background:var(--dropdown-focus-border)}:host .checkmark{color:#fff;font-size:12px;font-weight:700;line-height:1}:host .option-label{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .dropdown-option.option-disabled{opacity:.45;cursor:not-allowed}:host .dropdown-option.option-disabled:hover{background:transparent}:host .dropdown-options::-webkit-scrollbar{width:5px}:host .dropdown-options::-webkit-scrollbar-track{background:transparent;margin:5px 0}:host .dropdown-options::-webkit-scrollbar-thumb{background:var(--dropdown-scrollbar);border-radius:10px;min-height:35px}:host .dropdown-options::-webkit-scrollbar-thumb:hover{background:#5c3bb0}:host .dropdown-options{scrollbar-width:thin;scrollbar-color:var(--dropdown-scrollbar) transparent}:host(.dropdown-disabled){opacity:.55;pointer-events:none}@media(max-width:768px){:host{--dropdown-width: 280px;--dropdown-header-height: 42px;--dropdown-option-height: 38px}}@media(max-width:480px){:host{--dropdown-width: 100%;--dropdown-header-height: 42px;--dropdown-header-padding: 0 11px;--dropdown-label-size: 14px;--dropdown-option-size: 14px;--dropdown-option-height: 38px;--dropdown-option-padding: 0 11px;--dropdown-max-height: 180px;--dropdown-radius: 9px}}\n"] }]
|
|
1004
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
|
|
1005
|
+
type: Input
|
|
1006
|
+
}], options: [{
|
|
1007
|
+
type: Input
|
|
1008
|
+
}], selectedValues: [{
|
|
1009
|
+
type: Input
|
|
1010
|
+
}], placeholder: [{
|
|
1011
|
+
type: Input
|
|
1012
|
+
}], customClass: [{
|
|
1013
|
+
type: Input
|
|
1014
|
+
}], disabled: [{
|
|
1015
|
+
type: Input
|
|
1016
|
+
}], hostClasses: [{
|
|
1017
|
+
type: HostBinding,
|
|
1018
|
+
args: ['class']
|
|
1019
|
+
}], selectionChange: [{
|
|
1020
|
+
type: Output
|
|
1021
|
+
}], opened: [{
|
|
1022
|
+
type: Output
|
|
1023
|
+
}], closed: [{
|
|
1024
|
+
type: Output
|
|
1025
|
+
}], clicked: [{
|
|
1026
|
+
type: Output
|
|
1027
|
+
}], onDocumentClick: [{
|
|
1028
|
+
type: HostListener,
|
|
1029
|
+
args: ['document:click',
|
|
1030
|
+
['$event']]
|
|
1031
|
+
}] } });
|
|
1032
|
+
|
|
869
1033
|
/*
|
|
870
1034
|
* Public API Surface of balinaui-components
|
|
871
1035
|
*/
|
|
@@ -874,5 +1038,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
874
1038
|
* Generated bundle index. Do not edit.
|
|
875
1039
|
*/
|
|
876
1040
|
|
|
877
|
-
export { BalinauiComponents, Breadcrumb, Button, Card, DateInput, Dropdown, FlightCard, GraphCard, Navbar, TextBox, TimeFilter };
|
|
1041
|
+
export { BalinauiComponents, Breadcrumb, Button, Card, DateInput, Dropdown, FlightCard, GraphCard, MultiSelectDropdown, Navbar, TextBox, TimeFilter };
|
|
878
1042
|
//# sourceMappingURL=balinasoftware-balinaui-components.mjs.map
|