@litigiovirtual/ius-design-components 1.0.13 → 1.0.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.
- package/esm2022/lib/menu-item/menu-item.component.mjs +7 -3
- package/esm2022/lib/nav-rail/nav-rail.component.mjs +3 -3
- package/fesm2022/litigiovirtual-ius-design-components.mjs +29 -26
- package/fesm2022/litigiovirtual-ius-design-components.mjs.map +1 -1
- package/lib/menu-item/menu-item.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
|
2
2
|
import { IconMdComponent } from "../icon-md/icon-md.component";
|
|
3
3
|
import { CommonModule } from '@angular/common';
|
|
4
|
+
import { BadgeComponent } from "../badge/badge.component";
|
|
4
5
|
import * as i0 from "@angular/core";
|
|
5
6
|
import * as i1 from "@angular/common";
|
|
6
7
|
export class MenuItemComponent {
|
|
7
8
|
constructor() {
|
|
8
9
|
this.isActive = false;
|
|
9
10
|
this.iconName = '';
|
|
11
|
+
this.numberAlerts = 0;
|
|
10
12
|
this.buttonClicked = new EventEmitter();
|
|
11
13
|
}
|
|
12
14
|
onClick() {
|
|
@@ -15,16 +17,18 @@ export class MenuItemComponent {
|
|
|
15
17
|
}
|
|
16
18
|
}
|
|
17
19
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MenuItemComponent, isStandalone: true, selector: "ius-menu-item", inputs: { isActive: "isActive", iconName: "iconName" }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<button (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{'isActive': isActive}\">\r\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\r\n <ng-content></ng-content>\r\n</button>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.icon-color{color:#9c3}.ius-btn{display:inline-flex;min-width:230px;padding:4px 16px;align-items:center;gap:12px;border-radius:8px;background-color:#fafafa;color:#333;border:none;cursor:pointer;font-family:Roboto,sans-serif;font-size:1rem;line-height:22px}.ius-btn:hover:not(:disabled){background-color:#eaeaea}.ius-btn:active:not(:disabled){background-color:#9c3;color:#fff}.ius-btn:active:not(:disabled) .icon-color{color:#fff}.ius-btn.isActive{background-color:#eaeaea}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
20
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MenuItemComponent, isStandalone: true, selector: "ius-menu-item", inputs: { isActive: "isActive", iconName: "iconName", numberAlerts: "numberAlerts" }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<button (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{'isActive': isActive}\">\r\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\r\n <ng-content></ng-content>\r\n <ius-badge [number]=\"numberAlerts\" class=\"badge\"></ius-badge>\r\n</button>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.icon-color{color:#9c3}.badge{margin-left:auto}.ius-btn{display:inline-flex;min-width:230px;padding:4px 16px;align-items:center;justify-content:space-between;gap:12px;border-radius:8px;background-color:#fafafa;color:#333;border:none;cursor:pointer;font-family:Roboto,sans-serif;font-size:1rem;line-height:22px}.ius-btn:hover:not(:disabled){background-color:#eaeaea}.ius-btn:active:not(:disabled){background-color:#9c3;color:#fff}.ius-btn:active:not(:disabled) .icon-color{color:#fff}.ius-btn.isActive{background-color:#eaeaea}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BadgeComponent, selector: "ius-badge", inputs: ["number"] }] }); }
|
|
19
21
|
}
|
|
20
22
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuItemComponent, decorators: [{
|
|
21
23
|
type: Component,
|
|
22
|
-
args: [{ selector: 'ius-menu-item', standalone: true, imports: [IconMdComponent, CommonModule], template: "<button (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{'isActive': isActive}\">\r\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\r\n <ng-content></ng-content>\r\n</button>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.icon-color{color:#9c3}.ius-btn{display:inline-flex;min-width:230px;padding:4px 16px;align-items:center;gap:12px;border-radius:8px;background-color:#fafafa;color:#333;border:none;cursor:pointer;font-family:Roboto,sans-serif;font-size:1rem;line-height:22px}.ius-btn:hover:not(:disabled){background-color:#eaeaea}.ius-btn:active:not(:disabled){background-color:#9c3;color:#fff}.ius-btn:active:not(:disabled) .icon-color{color:#fff}.ius-btn.isActive{background-color:#eaeaea}\n"] }]
|
|
24
|
+
args: [{ selector: 'ius-menu-item', standalone: true, imports: [IconMdComponent, CommonModule, BadgeComponent], template: "<button (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{'isActive': isActive}\">\r\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\r\n <ng-content></ng-content>\r\n <ius-badge [number]=\"numberAlerts\" class=\"badge\"></ius-badge>\r\n</button>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.icon-color{color:#9c3}.badge{margin-left:auto}.ius-btn{display:inline-flex;min-width:230px;padding:4px 16px;align-items:center;justify-content:space-between;gap:12px;border-radius:8px;background-color:#fafafa;color:#333;border:none;cursor:pointer;font-family:Roboto,sans-serif;font-size:1rem;line-height:22px}.ius-btn:hover:not(:disabled){background-color:#eaeaea}.ius-btn:active:not(:disabled){background-color:#9c3;color:#fff}.ius-btn:active:not(:disabled) .icon-color{color:#fff}.ius-btn.isActive{background-color:#eaeaea}\n"] }]
|
|
23
25
|
}], propDecorators: { isActive: [{
|
|
24
26
|
type: Input
|
|
25
27
|
}], iconName: [{
|
|
26
28
|
type: Input
|
|
29
|
+
}], numberAlerts: [{
|
|
30
|
+
type: Input
|
|
27
31
|
}], buttonClicked: [{
|
|
28
32
|
type: Output
|
|
29
33
|
}] } });
|
|
30
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
34
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2l1cy1kZXNpZ24tY29tcG9uZW50cy9zcmMvbGliL21lbnUtaXRlbS9tZW51LWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaXVzLWRlc2lnbi1jb21wb25lbnRzL3NyYy9saWIvbWVudS1pdGVtL21lbnUtaXRlbS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUMvRCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLDBCQUEwQixDQUFDOzs7QUFTMUQsTUFBTSxPQUFPLGlCQUFpQjtJQVA5QjtRQVNXLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDakIsYUFBUSxHQUFHLEVBQUUsQ0FBQztRQUNkLGlCQUFZLEdBQUcsQ0FBQyxDQUFDO1FBQ2hCLGtCQUFhLEdBQXVCLElBQUksWUFBWSxFQUFFLENBQUM7S0FRbEU7SUFOQyxPQUFPO1FBQ0wsSUFBSSxJQUFJLENBQUMsUUFBUSxJQUFJLEtBQUssRUFBRSxDQUFDO1lBQzNCLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDNUIsQ0FBQztJQUNILENBQUM7K0dBWFUsaUJBQWlCO21HQUFqQixpQkFBaUIsNE1DWjlCLGtTQUtBLDY1RERHWSxlQUFlLHNGQUFFLFlBQVksNkhBQUUsY0FBYzs7NEZBSTVDLGlCQUFpQjtrQkFQN0IsU0FBUzsrQkFDRSxlQUFlLGNBQ2IsSUFBSSxXQUNQLENBQUMsZUFBZSxFQUFFLFlBQVksRUFBRSxjQUFjLENBQUM7OEJBTS9DLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNJLGFBQWE7c0JBQXRCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBJY29uTWRDb21wb25lbnQgfSBmcm9tIFwiLi4vaWNvbi1tZC9pY29uLW1kLmNvbXBvbmVudFwiO1xyXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBCYWRnZUNvbXBvbmVudCB9IGZyb20gXCIuLi9iYWRnZS9iYWRnZS5jb21wb25lbnRcIjtcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnaXVzLW1lbnUtaXRlbScsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBpbXBvcnRzOiBbSWNvbk1kQ29tcG9uZW50LCBDb21tb25Nb2R1bGUsIEJhZGdlQ29tcG9uZW50XSxcclxuICB0ZW1wbGF0ZVVybDogJy4vbWVudS1pdGVtLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vbWVudS1pdGVtLmNvbXBvbmVudC5zY3NzJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgTWVudUl0ZW1Db21wb25lbnQge1xyXG5cclxuICBASW5wdXQoKSBpc0FjdGl2ZSA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIGljb25OYW1lID0gJyc7XHJcbiAgQElucHV0KCkgbnVtYmVyQWxlcnRzID0gMDtcclxuICBAT3V0cHV0KCkgYnV0dG9uQ2xpY2tlZDogRXZlbnRFbWl0dGVyPHZvaWQ+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG5cclxuICBvbkNsaWNrKCkge1xyXG4gICAgaWYgKHRoaXMuaXNBY3RpdmUgPT0gZmFsc2UpIHtcclxuICAgICAgdGhpcy5idXR0b25DbGlja2VkLmVtaXQoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG59XHJcbiIsIjxidXR0b24gKGNsaWNrKT1cIm9uQ2xpY2soKVwiIGNsYXNzPVwiaXVzLWJ0blwiIFtuZ0NsYXNzXT1cInsnaXNBY3RpdmUnOiBpc0FjdGl2ZX1cIj5cclxuICAgIDxpdXMtaWNvbi1tZCBbaWNvbk5hbWVdPVwiaWNvbk5hbWVcIiBjbGFzcz1cImljb24tY29sb3JcIj48L2l1cy1pY29uLW1kPlxyXG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG4gICAgPGl1cy1iYWRnZSBbbnVtYmVyXT1cIm51bWJlckFsZXJ0c1wiIGNsYXNzPVwiYmFkZ2VcIj48L2l1cy1iYWRnZT5cclxuPC9idXR0b24+XHJcbiJdfQ==
|
|
@@ -10,7 +10,7 @@ export class NavRailComponent {
|
|
|
10
10
|
this.isOpen = !this.isOpen;
|
|
11
11
|
}
|
|
12
12
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavRailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NavRailComponent, isStandalone: true, selector: "ius-nav-rail", inputs: { isOpen: "isOpen" }, ngImport: i0, template: "@if (isOpen) {\r\n<div class=\"rail-container\" @slideInOut>\r\n <div class=\"rail-icon-container\">\r\n <ius-icon-md\r\n class=\"panel\"\r\n color=\"#99CC33\"\r\n [iconName]=\"'icon-left-panel-close'\"\r\n (click)=\"toggle()\"\r\n ></ius-icon-md>\r\n </div>\r\n <div class=\"rail-items-container\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n\r\n} @else {\r\n<ius-icon-md\r\n class=\"panel\"\r\n [iconName]=\"'icon-left-panel-open'\"\r\n (click)=\"toggle()\"\r\n></ius-icon-md>\r\n}\r\n", styles: [".panel{color:#9c3;cursor:pointer}.rail-container{display:inline-flex;height:
|
|
13
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NavRailComponent, isStandalone: true, selector: "ius-nav-rail", inputs: { isOpen: "isOpen" }, ngImport: i0, template: "@if (isOpen) {\r\n<div class=\"rail-container\" @slideInOut>\r\n <div class=\"rail-icon-container\">\r\n <ius-icon-md\r\n class=\"panel\"\r\n color=\"#99CC33\"\r\n [iconName]=\"'icon-left-panel-close'\"\r\n (click)=\"toggle()\"\r\n ></ius-icon-md>\r\n </div>\r\n <div class=\"rail-items-container\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n\r\n} @else {\r\n<ius-icon-md\r\n class=\"panel\"\r\n [iconName]=\"'icon-left-panel-open'\"\r\n (click)=\"toggle()\"\r\n></ius-icon-md>\r\n}\r\n", styles: [".panel{color:#9c3;cursor:pointer}.rail-container{display:inline-flex;height:100%;padding:16px 8px;flex-direction:column;align-items:flex-start;gap:24px;flex-shrink:0;border-right:1px solid #eaeaea;background-color:#fafafa}.rail-icon-container{display:flex;align-items:center;gap:10px;align-self:stretch}.rail-items-container{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.toggle-btn{border:none;background:none;cursor:pointer;padding:8px;align-self:flex-end}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }], animations: [
|
|
14
14
|
trigger('slideInOut', [
|
|
15
15
|
state('void', style({
|
|
16
16
|
width: '0px',
|
|
@@ -50,8 +50,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
50
50
|
animate('370ms ease-out')
|
|
51
51
|
])
|
|
52
52
|
])
|
|
53
|
-
], template: "@if (isOpen) {\r\n<div class=\"rail-container\" @slideInOut>\r\n <div class=\"rail-icon-container\">\r\n <ius-icon-md\r\n class=\"panel\"\r\n color=\"#99CC33\"\r\n [iconName]=\"'icon-left-panel-close'\"\r\n (click)=\"toggle()\"\r\n ></ius-icon-md>\r\n </div>\r\n <div class=\"rail-items-container\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n\r\n} @else {\r\n<ius-icon-md\r\n class=\"panel\"\r\n [iconName]=\"'icon-left-panel-open'\"\r\n (click)=\"toggle()\"\r\n></ius-icon-md>\r\n}\r\n", styles: [".panel{color:#9c3;cursor:pointer}.rail-container{display:inline-flex;height:
|
|
53
|
+
], template: "@if (isOpen) {\r\n<div class=\"rail-container\" @slideInOut>\r\n <div class=\"rail-icon-container\">\r\n <ius-icon-md\r\n class=\"panel\"\r\n color=\"#99CC33\"\r\n [iconName]=\"'icon-left-panel-close'\"\r\n (click)=\"toggle()\"\r\n ></ius-icon-md>\r\n </div>\r\n <div class=\"rail-items-container\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n\r\n} @else {\r\n<ius-icon-md\r\n class=\"panel\"\r\n [iconName]=\"'icon-left-panel-open'\"\r\n (click)=\"toggle()\"\r\n></ius-icon-md>\r\n}\r\n", styles: [".panel{color:#9c3;cursor:pointer}.rail-container{display:inline-flex;height:100%;padding:16px 8px;flex-direction:column;align-items:flex-start;gap:24px;flex-shrink:0;border-right:1px solid #eaeaea;background-color:#fafafa}.rail-icon-container{display:flex;align-items:center;gap:10px;align-self:stretch}.rail-items-container{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.toggle-btn{border:none;background:none;cursor:pointer;padding:8px;align-self:flex-end}\n"] }]
|
|
54
54
|
}], propDecorators: { isOpen: [{
|
|
55
55
|
type: Input
|
|
56
56
|
}] } });
|
|
57
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
57
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2LXJhaWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaXVzLWRlc2lnbi1jb21wb25lbnRzL3NyYy9saWIvbmF2LXJhaWwvbmF2LXJhaWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaXVzLWRlc2lnbi1jb21wb25lbnRzL3NyYy9saWIvbmF2LXJhaWwvbmF2LXJhaWwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQy9ELE9BQU8sRUFBRSxPQUFPLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUUsS0FBSyxHQUFHLE1BQU0scUJBQXFCLENBQUM7O0FBNEJsRixNQUFNLE9BQU8sZ0JBQWdCO0lBMUI3QjtRQTRCVyxXQUFNLEdBQVksS0FBSyxDQUFDO0tBS2xDO0lBSEMsTUFBTTtRQUNKLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDO0lBQzdCLENBQUM7K0dBTlUsZ0JBQWdCO21HQUFoQixnQkFBZ0Isc0dDOUI3Qiw0akJBc0JBLDBoQkRmWSxlQUFlLHlFQUNiO1lBQ1YsT0FBTyxDQUFDLFlBQVksRUFBRTtnQkFDcEIsS0FBSyxDQUFDLE1BQU0sRUFBRSxLQUFLLENBQUM7b0JBQ2xCLEtBQUssRUFBRSxLQUFLO29CQUNaLE9BQU8sRUFBRSxDQUFDO29CQUNWLFFBQVEsRUFBRSxRQUFRO2lCQUNuQixDQUFDLENBQUM7Z0JBQ0gsS0FBSyxDQUFDLEdBQUcsRUFBRSxLQUFLLENBQUM7b0JBQ2YsS0FBSyxFQUFFLEdBQUc7b0JBQ1YsT0FBTyxFQUFFLENBQUM7aUJBQ1gsQ0FBQyxDQUFDO2dCQUNILFVBQVUsQ0FBQyxXQUFXLEVBQUU7b0JBQ3RCLE9BQU8sQ0FBQyxlQUFlLENBQUM7aUJBQ3pCLENBQUM7Z0JBQ0YsVUFBVSxDQUFDLFdBQVcsRUFBRTtvQkFDdEIsT0FBTyxDQUFDLGdCQUFnQixDQUFDO2lCQUMxQixDQUFDO2FBQ0gsQ0FBQztTQUNIOzs0RkFJVSxnQkFBZ0I7a0JBMUI1QixTQUFTOytCQUNFLGNBQWMsY0FDWixJQUFJLFdBQ1AsQ0FBQyxlQUFlLENBQUMsY0FDZDt3QkFDVixPQUFPLENBQUMsWUFBWSxFQUFFOzRCQUNwQixLQUFLLENBQUMsTUFBTSxFQUFFLEtBQUssQ0FBQztnQ0FDbEIsS0FBSyxFQUFFLEtBQUs7Z0NBQ1osT0FBTyxFQUFFLENBQUM7Z0NBQ1YsUUFBUSxFQUFFLFFBQVE7NkJBQ25CLENBQUMsQ0FBQzs0QkFDSCxLQUFLLENBQUMsR0FBRyxFQUFFLEtBQUssQ0FBQztnQ0FDZixLQUFLLEVBQUUsR0FBRztnQ0FDVixPQUFPLEVBQUUsQ0FBQzs2QkFDWCxDQUFDLENBQUM7NEJBQ0gsVUFBVSxDQUFDLFdBQVcsRUFBRTtnQ0FDdEIsT0FBTyxDQUFDLGVBQWUsQ0FBQzs2QkFDekIsQ0FBQzs0QkFDRixVQUFVLENBQUMsV0FBVyxFQUFFO2dDQUN0QixPQUFPLENBQUMsZ0JBQWdCLENBQUM7NkJBQzFCLENBQUM7eUJBQ0gsQ0FBQztxQkFDSDs4QkFNUSxNQUFNO3NCQUFkLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEljb25NZENvbXBvbmVudCB9IGZyb20gXCIuLi9pY29uLW1kL2ljb24tbWQuY29tcG9uZW50XCI7XHJcbmltcG9ydCB7IHRyaWdnZXIsIHRyYW5zaXRpb24sIHN0eWxlLCBhbmltYXRlLCBzdGF0ZSwgfSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnaXVzLW5hdi1yYWlsJyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtJY29uTWRDb21wb25lbnRdLFxyXG4gIGFuaW1hdGlvbnM6IFtcclxuICAgIHRyaWdnZXIoJ3NsaWRlSW5PdXQnLCBbXHJcbiAgICAgIHN0YXRlKCd2b2lkJywgc3R5bGUoe1xyXG4gICAgICAgIHdpZHRoOiAnMHB4JyxcclxuICAgICAgICBvcGFjaXR5OiAwLFxyXG4gICAgICAgIG92ZXJmbG93OiAnaGlkZGVuJ1xyXG4gICAgICB9KSksXHJcbiAgICAgIHN0YXRlKCcqJywgc3R5bGUoe1xyXG4gICAgICAgIHdpZHRoOiAnKicsXHJcbiAgICAgICAgb3BhY2l0eTogMVxyXG4gICAgICB9KSksXHJcbiAgICAgIHRyYW5zaXRpb24oJ3ZvaWQgPT4gKicsIFtcclxuICAgICAgICBhbmltYXRlKCczNzBtcyBlYXNlLWluJylcclxuICAgICAgXSksXHJcbiAgICAgIHRyYW5zaXRpb24oJyogPT4gdm9pZCcsIFtcclxuICAgICAgICBhbmltYXRlKCczNzBtcyBlYXNlLW91dCcpXHJcbiAgICAgIF0pXHJcbiAgICBdKVxyXG4gIF0sXHJcbiAgdGVtcGxhdGVVcmw6ICcuL25hdi1yYWlsLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vbmF2LXJhaWwuY29tcG9uZW50LnNjc3MnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBOYXZSYWlsQ29tcG9uZW50IHtcclxuXHJcbiAgQElucHV0KCkgaXNPcGVuOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIHRvZ2dsZSgpIHtcclxuICAgIHRoaXMuaXNPcGVuID0gIXRoaXMuaXNPcGVuO1xyXG4gIH1cclxufVxyXG4iLCJAaWYgKGlzT3Blbikge1xyXG48ZGl2IGNsYXNzPVwicmFpbC1jb250YWluZXJcIiBAc2xpZGVJbk91dD5cclxuICAgIDxkaXYgY2xhc3M9XCJyYWlsLWljb24tY29udGFpbmVyXCI+XHJcbiAgICAgICAgPGl1cy1pY29uLW1kXHJcbiAgICAgICAgICBjbGFzcz1cInBhbmVsXCJcclxuICAgICAgICAgIGNvbG9yPVwiIzk5Q0MzM1wiXHJcbiAgICAgICAgICBbaWNvbk5hbWVdPVwiJ2ljb24tbGVmdC1wYW5lbC1jbG9zZSdcIlxyXG4gICAgICAgICAgKGNsaWNrKT1cInRvZ2dsZSgpXCJcclxuICAgICAgICA+PC9pdXMtaWNvbi1tZD5cclxuICAgIDwvZGl2PlxyXG4gICAgPGRpdiBjbGFzcz1cInJhaWwtaXRlbXMtY29udGFpbmVyXCI+XHJcbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PlxyXG5cclxufSBAZWxzZSB7XHJcbjxpdXMtaWNvbi1tZFxyXG4gIGNsYXNzPVwicGFuZWxcIlxyXG4gIFtpY29uTmFtZV09XCInaWNvbi1sZWZ0LXBhbmVsLW9wZW4nXCJcclxuICAoY2xpY2spPVwidG9nZ2xlKClcIlxyXG4+PC9pdXMtaWNvbi1tZD5cclxufVxyXG4iXX0=
|
|
@@ -1332,10 +1332,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1332
1332
|
type: Output
|
|
1333
1333
|
}] } });
|
|
1334
1334
|
|
|
1335
|
+
class BadgeComponent {
|
|
1336
|
+
get formattedNumber() {
|
|
1337
|
+
if (this.number === undefined) {
|
|
1338
|
+
return undefined;
|
|
1339
|
+
}
|
|
1340
|
+
if (this.number > 999) {
|
|
1341
|
+
return '999+';
|
|
1342
|
+
}
|
|
1343
|
+
else {
|
|
1344
|
+
return this.number.toString();
|
|
1345
|
+
}
|
|
1346
|
+
}
|
|
1347
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1348
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BadgeComponent, isStandalone: true, selector: "ius-badge", inputs: { number: "number" }, ngImport: i0, template: "<div class=\"container-badge\">\r\n <span>{{formattedNumber}}</span>\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-badge{display:flex;width:min-content;min-height:8px;padding:0 5px;justify-content:center;align-items:center;border-radius:100px;background:#2167ff;color:#fff;font-family:Roboto,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.24px}\n"] }); }
|
|
1349
|
+
}
|
|
1350
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
1351
|
+
type: Component,
|
|
1352
|
+
args: [{ selector: 'ius-badge', standalone: true, imports: [], template: "<div class=\"container-badge\">\r\n <span>{{formattedNumber}}</span>\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-badge{display:flex;width:min-content;min-height:8px;padding:0 5px;justify-content:center;align-items:center;border-radius:100px;background:#2167ff;color:#fff;font-family:Roboto,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.24px}\n"] }]
|
|
1353
|
+
}], propDecorators: { number: [{
|
|
1354
|
+
type: Input
|
|
1355
|
+
}] } });
|
|
1356
|
+
|
|
1335
1357
|
class MenuItemComponent {
|
|
1336
1358
|
constructor() {
|
|
1337
1359
|
this.isActive = false;
|
|
1338
1360
|
this.iconName = '';
|
|
1361
|
+
this.numberAlerts = 0;
|
|
1339
1362
|
this.buttonClicked = new EventEmitter();
|
|
1340
1363
|
}
|
|
1341
1364
|
onClick() {
|
|
@@ -1344,15 +1367,17 @@ class MenuItemComponent {
|
|
|
1344
1367
|
}
|
|
1345
1368
|
}
|
|
1346
1369
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1347
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MenuItemComponent, isStandalone: true, selector: "ius-menu-item", inputs: { isActive: "isActive", iconName: "iconName" }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<button (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{'isActive': isActive}\">\r\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\r\n <ng-content></ng-content>\r\n</button>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.icon-color{color:#9c3}.ius-btn{display:inline-flex;min-width:230px;padding:4px 16px;align-items:center;gap:12px;border-radius:8px;background-color:#fafafa;color:#333;border:none;cursor:pointer;font-family:Roboto,sans-serif;font-size:1rem;line-height:22px}.ius-btn:hover:not(:disabled){background-color:#eaeaea}.ius-btn:active:not(:disabled){background-color:#9c3;color:#fff}.ius-btn:active:not(:disabled) .icon-color{color:#fff}.ius-btn.isActive{background-color:#eaeaea}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
1370
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MenuItemComponent, isStandalone: true, selector: "ius-menu-item", inputs: { isActive: "isActive", iconName: "iconName", numberAlerts: "numberAlerts" }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<button (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{'isActive': isActive}\">\r\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\r\n <ng-content></ng-content>\r\n <ius-badge [number]=\"numberAlerts\" class=\"badge\"></ius-badge>\r\n</button>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.icon-color{color:#9c3}.badge{margin-left:auto}.ius-btn{display:inline-flex;min-width:230px;padding:4px 16px;align-items:center;justify-content:space-between;gap:12px;border-radius:8px;background-color:#fafafa;color:#333;border:none;cursor:pointer;font-family:Roboto,sans-serif;font-size:1rem;line-height:22px}.ius-btn:hover:not(:disabled){background-color:#eaeaea}.ius-btn:active:not(:disabled){background-color:#9c3;color:#fff}.ius-btn:active:not(:disabled) .icon-color{color:#fff}.ius-btn.isActive{background-color:#eaeaea}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BadgeComponent, selector: "ius-badge", inputs: ["number"] }] }); }
|
|
1348
1371
|
}
|
|
1349
1372
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuItemComponent, decorators: [{
|
|
1350
1373
|
type: Component,
|
|
1351
|
-
args: [{ selector: 'ius-menu-item', standalone: true, imports: [IconMdComponent, CommonModule], template: "<button (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{'isActive': isActive}\">\r\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\r\n <ng-content></ng-content>\r\n</button>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.icon-color{color:#9c3}.ius-btn{display:inline-flex;min-width:230px;padding:4px 16px;align-items:center;gap:12px;border-radius:8px;background-color:#fafafa;color:#333;border:none;cursor:pointer;font-family:Roboto,sans-serif;font-size:1rem;line-height:22px}.ius-btn:hover:not(:disabled){background-color:#eaeaea}.ius-btn:active:not(:disabled){background-color:#9c3;color:#fff}.ius-btn:active:not(:disabled) .icon-color{color:#fff}.ius-btn.isActive{background-color:#eaeaea}\n"] }]
|
|
1374
|
+
args: [{ selector: 'ius-menu-item', standalone: true, imports: [IconMdComponent, CommonModule, BadgeComponent], template: "<button (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{'isActive': isActive}\">\r\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\r\n <ng-content></ng-content>\r\n <ius-badge [number]=\"numberAlerts\" class=\"badge\"></ius-badge>\r\n</button>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.icon-color{color:#9c3}.badge{margin-left:auto}.ius-btn{display:inline-flex;min-width:230px;padding:4px 16px;align-items:center;justify-content:space-between;gap:12px;border-radius:8px;background-color:#fafafa;color:#333;border:none;cursor:pointer;font-family:Roboto,sans-serif;font-size:1rem;line-height:22px}.ius-btn:hover:not(:disabled){background-color:#eaeaea}.ius-btn:active:not(:disabled){background-color:#9c3;color:#fff}.ius-btn:active:not(:disabled) .icon-color{color:#fff}.ius-btn.isActive{background-color:#eaeaea}\n"] }]
|
|
1352
1375
|
}], propDecorators: { isActive: [{
|
|
1353
1376
|
type: Input
|
|
1354
1377
|
}], iconName: [{
|
|
1355
1378
|
type: Input
|
|
1379
|
+
}], numberAlerts: [{
|
|
1380
|
+
type: Input
|
|
1356
1381
|
}], buttonClicked: [{
|
|
1357
1382
|
type: Output
|
|
1358
1383
|
}] } });
|
|
@@ -1365,7 +1390,7 @@ class NavRailComponent {
|
|
|
1365
1390
|
this.isOpen = !this.isOpen;
|
|
1366
1391
|
}
|
|
1367
1392
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavRailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1368
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NavRailComponent, isStandalone: true, selector: "ius-nav-rail", inputs: { isOpen: "isOpen" }, ngImport: i0, template: "@if (isOpen) {\r\n<div class=\"rail-container\" @slideInOut>\r\n <div class=\"rail-icon-container\">\r\n <ius-icon-md\r\n class=\"panel\"\r\n color=\"#99CC33\"\r\n [iconName]=\"'icon-left-panel-close'\"\r\n (click)=\"toggle()\"\r\n ></ius-icon-md>\r\n </div>\r\n <div class=\"rail-items-container\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n\r\n} @else {\r\n<ius-icon-md\r\n class=\"panel\"\r\n [iconName]=\"'icon-left-panel-open'\"\r\n (click)=\"toggle()\"\r\n></ius-icon-md>\r\n}\r\n", styles: [".panel{color:#9c3;cursor:pointer}.rail-container{display:inline-flex;height:
|
|
1393
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NavRailComponent, isStandalone: true, selector: "ius-nav-rail", inputs: { isOpen: "isOpen" }, ngImport: i0, template: "@if (isOpen) {\r\n<div class=\"rail-container\" @slideInOut>\r\n <div class=\"rail-icon-container\">\r\n <ius-icon-md\r\n class=\"panel\"\r\n color=\"#99CC33\"\r\n [iconName]=\"'icon-left-panel-close'\"\r\n (click)=\"toggle()\"\r\n ></ius-icon-md>\r\n </div>\r\n <div class=\"rail-items-container\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n\r\n} @else {\r\n<ius-icon-md\r\n class=\"panel\"\r\n [iconName]=\"'icon-left-panel-open'\"\r\n (click)=\"toggle()\"\r\n></ius-icon-md>\r\n}\r\n", styles: [".panel{color:#9c3;cursor:pointer}.rail-container{display:inline-flex;height:100%;padding:16px 8px;flex-direction:column;align-items:flex-start;gap:24px;flex-shrink:0;border-right:1px solid #eaeaea;background-color:#fafafa}.rail-icon-container{display:flex;align-items:center;gap:10px;align-self:stretch}.rail-items-container{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.toggle-btn{border:none;background:none;cursor:pointer;padding:8px;align-self:flex-end}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }], animations: [
|
|
1369
1394
|
trigger('slideInOut', [
|
|
1370
1395
|
state('void', style({
|
|
1371
1396
|
width: '0px',
|
|
@@ -1405,7 +1430,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1405
1430
|
animate('370ms ease-out')
|
|
1406
1431
|
])
|
|
1407
1432
|
])
|
|
1408
|
-
], template: "@if (isOpen) {\r\n<div class=\"rail-container\" @slideInOut>\r\n <div class=\"rail-icon-container\">\r\n <ius-icon-md\r\n class=\"panel\"\r\n color=\"#99CC33\"\r\n [iconName]=\"'icon-left-panel-close'\"\r\n (click)=\"toggle()\"\r\n ></ius-icon-md>\r\n </div>\r\n <div class=\"rail-items-container\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n\r\n} @else {\r\n<ius-icon-md\r\n class=\"panel\"\r\n [iconName]=\"'icon-left-panel-open'\"\r\n (click)=\"toggle()\"\r\n></ius-icon-md>\r\n}\r\n", styles: [".panel{color:#9c3;cursor:pointer}.rail-container{display:inline-flex;height:
|
|
1433
|
+
], template: "@if (isOpen) {\r\n<div class=\"rail-container\" @slideInOut>\r\n <div class=\"rail-icon-container\">\r\n <ius-icon-md\r\n class=\"panel\"\r\n color=\"#99CC33\"\r\n [iconName]=\"'icon-left-panel-close'\"\r\n (click)=\"toggle()\"\r\n ></ius-icon-md>\r\n </div>\r\n <div class=\"rail-items-container\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n\r\n} @else {\r\n<ius-icon-md\r\n class=\"panel\"\r\n [iconName]=\"'icon-left-panel-open'\"\r\n (click)=\"toggle()\"\r\n></ius-icon-md>\r\n}\r\n", styles: [".panel{color:#9c3;cursor:pointer}.rail-container{display:inline-flex;height:100%;padding:16px 8px;flex-direction:column;align-items:flex-start;gap:24px;flex-shrink:0;border-right:1px solid #eaeaea;background-color:#fafafa}.rail-icon-container{display:flex;align-items:center;gap:10px;align-self:stretch}.rail-items-container{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.toggle-btn{border:none;background:none;cursor:pointer;padding:8px;align-self:flex-end}\n"] }]
|
|
1409
1434
|
}], propDecorators: { isOpen: [{
|
|
1410
1435
|
type: Input
|
|
1411
1436
|
}] } });
|
|
@@ -1542,28 +1567,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1542
1567
|
type: Output
|
|
1543
1568
|
}] } });
|
|
1544
1569
|
|
|
1545
|
-
class BadgeComponent {
|
|
1546
|
-
get formattedNumber() {
|
|
1547
|
-
if (this.number === undefined) {
|
|
1548
|
-
return undefined;
|
|
1549
|
-
}
|
|
1550
|
-
if (this.number > 999) {
|
|
1551
|
-
return '999+';
|
|
1552
|
-
}
|
|
1553
|
-
else {
|
|
1554
|
-
return this.number.toString();
|
|
1555
|
-
}
|
|
1556
|
-
}
|
|
1557
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1558
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BadgeComponent, isStandalone: true, selector: "ius-badge", inputs: { number: "number" }, ngImport: i0, template: "<div class=\"container-badge\">\r\n <span>{{formattedNumber}}</span>\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-badge{display:flex;width:min-content;min-height:8px;padding:0 5px;justify-content:center;align-items:center;border-radius:100px;background:#2167ff;color:#fff;font-family:Roboto,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.24px}\n"] }); }
|
|
1559
|
-
}
|
|
1560
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
1561
|
-
type: Component,
|
|
1562
|
-
args: [{ selector: 'ius-badge', standalone: true, imports: [], template: "<div class=\"container-badge\">\r\n <span>{{formattedNumber}}</span>\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-badge{display:flex;width:min-content;min-height:8px;padding:0 5px;justify-content:center;align-items:center;border-radius:100px;background:#2167ff;color:#fff;font-family:Roboto,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.24px}\n"] }]
|
|
1563
|
-
}], propDecorators: { number: [{
|
|
1564
|
-
type: Input
|
|
1565
|
-
}] } });
|
|
1566
|
-
|
|
1567
1570
|
class InputSelectComponent {
|
|
1568
1571
|
constructor() {
|
|
1569
1572
|
this.textInput = '';
|