@goat-bravos/intern-hub-layout 1.0.5 → 1.2.1
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.
|
@@ -1,56 +1,295 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { EventEmitter, Output, Input, Component, HostListener, ViewChild } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
-
import
|
|
5
|
+
import * as i1$1 from '@angular/router';
|
|
6
|
+
import { RouterModule } from '@angular/router';
|
|
6
7
|
import { FormsModule } from '@angular/forms';
|
|
7
8
|
|
|
9
|
+
class IconComponent {
|
|
10
|
+
iconData;
|
|
11
|
+
icon;
|
|
12
|
+
colorIcon;
|
|
13
|
+
routerLink;
|
|
14
|
+
width = '20px';
|
|
15
|
+
height = '20px';
|
|
16
|
+
colorIconHover;
|
|
17
|
+
backgroundColorHover;
|
|
18
|
+
clicked = new EventEmitter();
|
|
19
|
+
get iconClass() {
|
|
20
|
+
if (this.iconData?.icon) {
|
|
21
|
+
return this.iconData.icon;
|
|
22
|
+
}
|
|
23
|
+
return this.icon || '';
|
|
24
|
+
}
|
|
25
|
+
get iconColor() {
|
|
26
|
+
return this.iconData?.colorIcon || this.colorIcon;
|
|
27
|
+
}
|
|
28
|
+
get iconWidth() {
|
|
29
|
+
return this.iconData?.width || this.width || '20px';
|
|
30
|
+
}
|
|
31
|
+
get iconHeight() {
|
|
32
|
+
return this.iconData?.height || this.height || '20px';
|
|
33
|
+
}
|
|
34
|
+
get iconRouterLink() {
|
|
35
|
+
return this.iconData?.routerLink || this.routerLink;
|
|
36
|
+
}
|
|
37
|
+
handleClick(event) {
|
|
38
|
+
if (!this.iconRouterLink) {
|
|
39
|
+
event.preventDefault();
|
|
40
|
+
this.clicked.emit(event);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
44
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: IconComponent, isStandalone: true, selector: "app-icon", inputs: { iconData: "iconData", icon: "icon", colorIcon: "colorIcon", routerLink: "routerLink", width: "width", height: "height", colorIconHover: "colorIconHover", backgroundColorHover: "backgroundColorHover" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<i\r\n class=\"icon\"\r\n [ngClass]=\"iconClass\"\r\n [style.color]=\"iconColor\"\r\n [style.width]=\"iconWidth\"\r\n [style.height]=\"iconHeight\"\r\n [attr.tabindex]=\"iconRouterLink ? null : 0\"\r\n [attr.role]=\"iconRouterLink ? null : 'button'\"\r\n (click)=\"handleClick($event)\"\r\n (keydown.enter)=\"handleClick($event)\"\r\n (keydown.space)=\"handleClick($event)\"\r\n></i>\r\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:1}:host .icon{transition:color .25s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }] });
|
|
45
|
+
}
|
|
46
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IconComponent, decorators: [{
|
|
47
|
+
type: Component,
|
|
48
|
+
args: [{ selector: 'app-icon', standalone: true, imports: [CommonModule, RouterModule], template: "<i\r\n class=\"icon\"\r\n [ngClass]=\"iconClass\"\r\n [style.color]=\"iconColor\"\r\n [style.width]=\"iconWidth\"\r\n [style.height]=\"iconHeight\"\r\n [attr.tabindex]=\"iconRouterLink ? null : 0\"\r\n [attr.role]=\"iconRouterLink ? null : 'button'\"\r\n (click)=\"handleClick($event)\"\r\n (keydown.enter)=\"handleClick($event)\"\r\n (keydown.space)=\"handleClick($event)\"\r\n></i>\r\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:1}:host .icon{transition:color .25s ease}\n"] }]
|
|
49
|
+
}], propDecorators: { iconData: [{
|
|
50
|
+
type: Input
|
|
51
|
+
}], icon: [{
|
|
52
|
+
type: Input
|
|
53
|
+
}], colorIcon: [{
|
|
54
|
+
type: Input
|
|
55
|
+
}], routerLink: [{
|
|
56
|
+
type: Input
|
|
57
|
+
}], width: [{
|
|
58
|
+
type: Input
|
|
59
|
+
}], height: [{
|
|
60
|
+
type: Input
|
|
61
|
+
}], colorIconHover: [{
|
|
62
|
+
type: Input
|
|
63
|
+
}], backgroundColorHover: [{
|
|
64
|
+
type: Input
|
|
65
|
+
}], clicked: [{
|
|
66
|
+
type: Output
|
|
67
|
+
}] } });
|
|
68
|
+
|
|
8
69
|
class HeaderComponent {
|
|
9
|
-
|
|
10
|
-
|
|
70
|
+
data = {
|
|
71
|
+
headerItems: [],
|
|
72
|
+
userName: 'Guest',
|
|
73
|
+
userIcon: 'dsi-user-01-line',
|
|
74
|
+
dropdownIcon: 'dsi-arrow-down-solid',
|
|
75
|
+
logo: 'assets/FPT-IS-Logo.png',
|
|
76
|
+
};
|
|
77
|
+
handleActionClick(item, event) {
|
|
78
|
+
if (item.method) {
|
|
79
|
+
event.preventDefault();
|
|
80
|
+
item.method();
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
getIconData(icon, colorIcon, width, height) {
|
|
84
|
+
if (!icon)
|
|
85
|
+
return undefined;
|
|
86
|
+
if (typeof icon === 'string') {
|
|
87
|
+
return {
|
|
88
|
+
icon,
|
|
89
|
+
colorIcon,
|
|
90
|
+
width,
|
|
91
|
+
height,
|
|
92
|
+
};
|
|
93
|
+
}
|
|
94
|
+
return icon;
|
|
95
|
+
}
|
|
96
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
97
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: HeaderComponent, isStandalone: true, selector: "app-header-component", inputs: { data: "data" }, ngImport: i0, template: "<header class=\"app-header\">\r\n <div class=\"header-left\">\r\n <img\r\n class=\"logo\"\r\n [src]=\"data.logo || 'assets/FPT-IS-Logo.png'\"\r\n alt=\"Logo\"\r\n />\r\n </div>\r\n\r\n <div class=\"header-right\">\r\n @for (item of data.headerItems; track $index) {\r\n <button\r\n class=\"header-btn\"\r\n [attr.aria-label]=\"item.content\"\r\n (click)=\"handleActionClick(item, $event)\"\r\n >\r\n <app-icon\r\n [iconData]=\"\r\n getIconData(\r\n item.icon,\r\n item.colorIcon,\r\n item.width || '16px',\r\n item.height || '16px'\r\n )\r\n \"\r\n ></app-icon>\r\n @if (item.badge) {\r\n <span class=\"badge\">{{ item.badge }}</span>\r\n }\r\n </button>\r\n }\r\n\r\n <div class=\"header-user\">\r\n <button class=\"user-btn\">\r\n @if (data.userIcon) {\r\n <app-icon\r\n [iconData]=\"\r\n getIconData(data.userIcon, data.userIconColor, '16px', '16px')\r\n \"\r\n ></app-icon>\r\n }\r\n <span class=\"user-name\">{{ data.userName }}</span>\r\n @if (data.dropdownIcon) {\r\n <app-icon\r\n [iconData]=\"\r\n getIconData(\r\n data.dropdownIcon,\r\n data.dropdownIconColor,\r\n '16px',\r\n '16px'\r\n )\r\n \"\r\n ></app-icon>\r\n }\r\n </button>\r\n </div>\r\n </div>\r\n</header>\r\n", styles: [":host{width:100%;display:flex;justify-content:center}.app-header{height:70px;width:1370px;display:flex;align-items:center;justify-content:space-between;padding:16px 8px;background-color:transparent;box-sizing:border-box}.header-left{display:flex;align-items:center}.header-left .logo{height:40px;width:auto;object-fit:contain;cursor:pointer}.header-right{display:flex;align-items:center;gap:12px}.header-btn{position:relative;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:var(--radius-full);border:none;cursor:pointer;color:var(--brand-600);transition:all .2s ease-in-out}.header-btn:hover{background-color:var(--neutral-color-100);color:var(--primary-color)}.header-btn .badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:16px 8px;display:flex;align-items:center;justify-content:center;background-color:var(-utility-500);color:var(--neutral-color-100);border-radius:8px;font-size:10px;font-weight:600;line-height:1}.header-user{margin-left:4px;padding-left:16px 8px}.user-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 8px;background:transparent;border:none;border-radius:8px;cursor:pointer;transition:background-color .2s ease}.user-btn:hover{background-color:var(--neutral-color-100)}.user-btn .user-name{font-size:14px;font-weight:700;color:var(--brand-600);white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["iconData", "icon", "colorIcon", "routerLink", "width", "height", "colorIconHover", "backgroundColorHover"], outputs: ["clicked"] }] });
|
|
11
98
|
}
|
|
12
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
99
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
13
100
|
type: Component,
|
|
14
|
-
args: [{ selector: 'app-header-component', standalone: true, template: "<header class=\"app-header\">\r\n <div class=\"header-left\">\r\n <img
|
|
15
|
-
}]
|
|
101
|
+
args: [{ selector: 'app-header-component', standalone: true, imports: [CommonModule, IconComponent], template: "<header class=\"app-header\">\r\n <div class=\"header-left\">\r\n <img\r\n class=\"logo\"\r\n [src]=\"data.logo || 'assets/FPT-IS-Logo.png'\"\r\n alt=\"Logo\"\r\n />\r\n </div>\r\n\r\n <div class=\"header-right\">\r\n @for (item of data.headerItems; track $index) {\r\n <button\r\n class=\"header-btn\"\r\n [attr.aria-label]=\"item.content\"\r\n (click)=\"handleActionClick(item, $event)\"\r\n >\r\n <app-icon\r\n [iconData]=\"\r\n getIconData(\r\n item.icon,\r\n item.colorIcon,\r\n item.width || '16px',\r\n item.height || '16px'\r\n )\r\n \"\r\n ></app-icon>\r\n @if (item.badge) {\r\n <span class=\"badge\">{{ item.badge }}</span>\r\n }\r\n </button>\r\n }\r\n\r\n <div class=\"header-user\">\r\n <button class=\"user-btn\">\r\n @if (data.userIcon) {\r\n <app-icon\r\n [iconData]=\"\r\n getIconData(data.userIcon, data.userIconColor, '16px', '16px')\r\n \"\r\n ></app-icon>\r\n }\r\n <span class=\"user-name\">{{ data.userName }}</span>\r\n @if (data.dropdownIcon) {\r\n <app-icon\r\n [iconData]=\"\r\n getIconData(\r\n data.dropdownIcon,\r\n data.dropdownIconColor,\r\n '16px',\r\n '16px'\r\n )\r\n \"\r\n ></app-icon>\r\n }\r\n </button>\r\n </div>\r\n </div>\r\n</header>\r\n", styles: [":host{width:100%;display:flex;justify-content:center}.app-header{height:70px;width:1370px;display:flex;align-items:center;justify-content:space-between;padding:16px 8px;background-color:transparent;box-sizing:border-box}.header-left{display:flex;align-items:center}.header-left .logo{height:40px;width:auto;object-fit:contain;cursor:pointer}.header-right{display:flex;align-items:center;gap:12px}.header-btn{position:relative;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:var(--radius-full);border:none;cursor:pointer;color:var(--brand-600);transition:all .2s ease-in-out}.header-btn:hover{background-color:var(--neutral-color-100);color:var(--primary-color)}.header-btn .badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:16px 8px;display:flex;align-items:center;justify-content:center;background-color:var(-utility-500);color:var(--neutral-color-100);border-radius:8px;font-size:10px;font-weight:600;line-height:1}.header-user{margin-left:4px;padding-left:16px 8px}.user-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 8px;background:transparent;border:none;border-radius:8px;cursor:pointer;transition:background-color .2s ease}.user-btn:hover{background-color:var(--neutral-color-100)}.user-btn .user-name{font-size:14px;font-weight:700;color:var(--brand-600);white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
102
|
+
}], propDecorators: { data: [{
|
|
103
|
+
type: Input
|
|
104
|
+
}] } });
|
|
16
105
|
|
|
17
106
|
class FunctionalLabelComponent {
|
|
18
|
-
|
|
107
|
+
iconLeft;
|
|
108
|
+
iconRight;
|
|
109
|
+
colorIconLeft;
|
|
110
|
+
colorIconRight;
|
|
111
|
+
widthIconLeft = '20px';
|
|
112
|
+
heightIconLeft = '20px';
|
|
113
|
+
widthIconRight = '20px';
|
|
114
|
+
heightIconRight = '20px';
|
|
115
|
+
colorIconLeftHover;
|
|
116
|
+
colorIconRightHover;
|
|
117
|
+
colorContentHover;
|
|
118
|
+
backgroundColorHover;
|
|
119
|
+
borderRadiusHover;
|
|
19
120
|
content = '';
|
|
20
|
-
|
|
21
|
-
|
|
121
|
+
colorContent;
|
|
122
|
+
widthContent = '100%';
|
|
123
|
+
heightContent = '100%';
|
|
124
|
+
backgroundColor;
|
|
125
|
+
borderRadius;
|
|
126
|
+
width;
|
|
127
|
+
height;
|
|
128
|
+
routerLink;
|
|
129
|
+
isSidebarExpanded = false;
|
|
130
|
+
clicked = new EventEmitter();
|
|
131
|
+
isHovered = false;
|
|
132
|
+
onMouseEnter() {
|
|
133
|
+
this.isHovered = true;
|
|
134
|
+
}
|
|
135
|
+
onMouseLeave() {
|
|
136
|
+
this.isHovered = false;
|
|
137
|
+
}
|
|
138
|
+
get currentBackgroundColor() {
|
|
139
|
+
return this.isHovered
|
|
140
|
+
? this.backgroundColorHover || this.backgroundColor
|
|
141
|
+
: this.backgroundColor;
|
|
142
|
+
}
|
|
143
|
+
get currentBorderRadius() {
|
|
144
|
+
return this.isHovered
|
|
145
|
+
? this.borderRadiusHover || this.borderRadius
|
|
146
|
+
: this.borderRadius;
|
|
147
|
+
}
|
|
148
|
+
get currentColorContent() {
|
|
149
|
+
return this.isHovered
|
|
150
|
+
? this.colorContentHover || this.colorContent
|
|
151
|
+
: this.colorContent;
|
|
152
|
+
}
|
|
153
|
+
get hasIconLeft() {
|
|
154
|
+
return !!this.iconLeft;
|
|
155
|
+
}
|
|
156
|
+
get hasIconRight() {
|
|
157
|
+
return !!this.iconRight;
|
|
158
|
+
}
|
|
159
|
+
// ✅ Chỉ giữ 1 iconLeftData
|
|
160
|
+
get iconLeftData() {
|
|
161
|
+
if (!this.iconLeft)
|
|
162
|
+
return undefined;
|
|
163
|
+
const color = this.isHovered || this.isSidebarExpanded
|
|
164
|
+
? this.colorIconLeftHover || this.colorIconLeft
|
|
165
|
+
: this.colorIconLeft;
|
|
166
|
+
if (typeof this.iconLeft === 'string') {
|
|
167
|
+
return {
|
|
168
|
+
icon: this.iconLeft,
|
|
169
|
+
colorIcon: color,
|
|
170
|
+
width: this.widthIconLeft,
|
|
171
|
+
height: this.heightIconLeft,
|
|
172
|
+
};
|
|
173
|
+
}
|
|
174
|
+
return {
|
|
175
|
+
...this.iconLeft,
|
|
176
|
+
colorIcon: color || this.iconLeft.colorIcon,
|
|
177
|
+
};
|
|
178
|
+
}
|
|
179
|
+
// ✅ Chỉ giữ 1 iconRightData
|
|
180
|
+
get iconRightData() {
|
|
181
|
+
if (!this.iconRight)
|
|
182
|
+
return undefined;
|
|
183
|
+
const color = this.isHovered || this.isSidebarExpanded
|
|
184
|
+
? this.colorIconRightHover || this.colorIconRight
|
|
185
|
+
: this.colorIconRight;
|
|
186
|
+
if (typeof this.iconRight === 'string') {
|
|
187
|
+
return {
|
|
188
|
+
icon: this.iconRight,
|
|
189
|
+
colorIcon: color,
|
|
190
|
+
width: this.widthIconRight,
|
|
191
|
+
height: this.heightIconRight,
|
|
192
|
+
};
|
|
193
|
+
}
|
|
194
|
+
return {
|
|
195
|
+
...this.iconRight,
|
|
196
|
+
colorIcon: color || this.iconRight.colorIcon,
|
|
197
|
+
};
|
|
198
|
+
}
|
|
199
|
+
handleClick(event) {
|
|
200
|
+
if (!this.routerLink) {
|
|
201
|
+
event.preventDefault();
|
|
202
|
+
this.clicked.emit(event);
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FunctionalLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
206
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: FunctionalLabelComponent, isStandalone: true, selector: "app-functional-label", inputs: { iconLeft: "iconLeft", iconRight: "iconRight", colorIconLeft: "colorIconLeft", colorIconRight: "colorIconRight", widthIconLeft: "widthIconLeft", heightIconLeft: "heightIconLeft", widthIconRight: "widthIconRight", heightIconRight: "heightIconRight", colorIconLeftHover: "colorIconLeftHover", colorIconRightHover: "colorIconRightHover", colorContentHover: "colorContentHover", backgroundColorHover: "backgroundColorHover", borderRadiusHover: "borderRadiusHover", content: "content", colorContent: "colorContent", widthContent: "widthContent", heightContent: "heightContent", backgroundColor: "backgroundColor", borderRadius: "borderRadius", width: "width", height: "height", routerLink: "routerLink", isSidebarExpanded: "isSidebarExpanded" }, outputs: { clicked: "clicked" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0, template: "<div\r\n class=\"functional-label\"\r\n (click)=\"handleClick($event)\"\r\n (keydown.enter)=\"handleClick($event)\"\r\n (keydown.space)=\"handleClick($event)\"\r\n [attr.tabindex]=\"routerLink ? null : 0\"\r\n [attr.role]=\"routerLink ? null : 'button'\"\r\n [style.background-color]=\"currentBackgroundColor\"\r\n [style.border-radius]=\"currentBorderRadius\"\r\n [style.width]=\"width\"\r\n [style.height]=\"height\"\r\n>\r\n @if (hasIconLeft && iconLeftData) {\r\n <app-icon\r\n [iconData]=\"iconLeftData\"\r\n [width]=\"widthIconLeft\"\r\n [height]=\"heightIconLeft\"\r\n [colorIconHover]=\"colorIconLeftHover\"\r\n [backgroundColorHover]=\"backgroundColorHover\"\r\n ></app-icon>\r\n }\r\n <a\r\n [routerLink]=\"routerLink\"\r\n [style.color]=\"currentColorContent\"\r\n [style.width]=\"widthContent\"\r\n [style.height]=\"heightContent\"\r\n >{{ content }}</a\r\n >\r\n @if (hasIconRight && iconRightData) {\r\n <app-icon\r\n [iconData]=\"iconRightData\"\r\n [colorIconHover]=\"colorIconRightHover\"\r\n [backgroundColorHover]=\"backgroundColorHover\"\r\n ></app-icon>\r\n }\r\n</div>\r\n", styles: [":host{display:block;width:100%}.functional-label{display:flex;align-items:center;justify-content:center;height:40px;padding:0;cursor:pointer;box-sizing:border-box;transition:all .25s ease}.functional-label app-icon{display:flex;flex-shrink:0;justify-content:center;width:44px}.functional-label a{max-width:0;opacity:0;visibility:hidden;white-space:nowrap;overflow:hidden;text-decoration:none;color:var(--neutral-color-400);transform:translate(-10px);transition:all .25s ease;display:flex;justify-content:flex-start;align-items:center}:host-context(.sidebar-wrapper:hover) .functional-label{justify-content:flex-start;padding-left:8px}:host-context(.sidebar-wrapper:hover) .functional-label a{opacity:1;visibility:visible;max-width:200px;transform:translate(0);color:var(--brand-600);flex:1;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["iconData", "icon", "colorIcon", "routerLink", "width", "height", "colorIconHover", "backgroundColorHover"], outputs: ["clicked"] }] });
|
|
22
207
|
}
|
|
23
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
208
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FunctionalLabelComponent, decorators: [{
|
|
24
209
|
type: Component,
|
|
25
|
-
args: [{ selector: 'app-functional-label', standalone: true, imports: [CommonModule], template: "<div
|
|
26
|
-
}], propDecorators: {
|
|
210
|
+
args: [{ selector: 'app-functional-label', standalone: true, imports: [CommonModule, RouterModule, IconComponent], template: "<div\r\n class=\"functional-label\"\r\n (click)=\"handleClick($event)\"\r\n (keydown.enter)=\"handleClick($event)\"\r\n (keydown.space)=\"handleClick($event)\"\r\n [attr.tabindex]=\"routerLink ? null : 0\"\r\n [attr.role]=\"routerLink ? null : 'button'\"\r\n [style.background-color]=\"currentBackgroundColor\"\r\n [style.border-radius]=\"currentBorderRadius\"\r\n [style.width]=\"width\"\r\n [style.height]=\"height\"\r\n>\r\n @if (hasIconLeft && iconLeftData) {\r\n <app-icon\r\n [iconData]=\"iconLeftData\"\r\n [width]=\"widthIconLeft\"\r\n [height]=\"heightIconLeft\"\r\n [colorIconHover]=\"colorIconLeftHover\"\r\n [backgroundColorHover]=\"backgroundColorHover\"\r\n ></app-icon>\r\n }\r\n <a\r\n [routerLink]=\"routerLink\"\r\n [style.color]=\"currentColorContent\"\r\n [style.width]=\"widthContent\"\r\n [style.height]=\"heightContent\"\r\n >{{ content }}</a\r\n >\r\n @if (hasIconRight && iconRightData) {\r\n <app-icon\r\n [iconData]=\"iconRightData\"\r\n [colorIconHover]=\"colorIconRightHover\"\r\n [backgroundColorHover]=\"backgroundColorHover\"\r\n ></app-icon>\r\n }\r\n</div>\r\n", styles: [":host{display:block;width:100%}.functional-label{display:flex;align-items:center;justify-content:center;height:40px;padding:0;cursor:pointer;box-sizing:border-box;transition:all .25s ease}.functional-label app-icon{display:flex;flex-shrink:0;justify-content:center;width:44px}.functional-label a{max-width:0;opacity:0;visibility:hidden;white-space:nowrap;overflow:hidden;text-decoration:none;color:var(--neutral-color-400);transform:translate(-10px);transition:all .25s ease;display:flex;justify-content:flex-start;align-items:center}:host-context(.sidebar-wrapper:hover) .functional-label{justify-content:flex-start;padding-left:8px}:host-context(.sidebar-wrapper:hover) .functional-label a{opacity:1;visibility:visible;max-width:200px;transform:translate(0);color:var(--brand-600);flex:1;text-align:center}\n"] }]
|
|
211
|
+
}], propDecorators: { iconLeft: [{
|
|
212
|
+
type: Input
|
|
213
|
+
}], iconRight: [{
|
|
214
|
+
type: Input
|
|
215
|
+
}], colorIconLeft: [{
|
|
216
|
+
type: Input
|
|
217
|
+
}], colorIconRight: [{
|
|
218
|
+
type: Input
|
|
219
|
+
}], widthIconLeft: [{
|
|
220
|
+
type: Input
|
|
221
|
+
}], heightIconLeft: [{
|
|
222
|
+
type: Input
|
|
223
|
+
}], widthIconRight: [{
|
|
224
|
+
type: Input
|
|
225
|
+
}], heightIconRight: [{
|
|
226
|
+
type: Input
|
|
227
|
+
}], colorIconLeftHover: [{
|
|
228
|
+
type: Input
|
|
229
|
+
}], colorIconRightHover: [{
|
|
230
|
+
type: Input
|
|
231
|
+
}], colorContentHover: [{
|
|
232
|
+
type: Input
|
|
233
|
+
}], backgroundColorHover: [{
|
|
234
|
+
type: Input
|
|
235
|
+
}], borderRadiusHover: [{
|
|
27
236
|
type: Input
|
|
28
237
|
}], content: [{
|
|
29
238
|
type: Input
|
|
30
|
-
}]
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
239
|
+
}], colorContent: [{
|
|
240
|
+
type: Input
|
|
241
|
+
}], widthContent: [{
|
|
242
|
+
type: Input
|
|
243
|
+
}], heightContent: [{
|
|
244
|
+
type: Input
|
|
245
|
+
}], backgroundColor: [{
|
|
246
|
+
type: Input
|
|
247
|
+
}], borderRadius: [{
|
|
248
|
+
type: Input
|
|
249
|
+
}], width: [{
|
|
250
|
+
type: Input
|
|
251
|
+
}], height: [{
|
|
41
252
|
type: Input
|
|
253
|
+
}], routerLink: [{
|
|
254
|
+
type: Input
|
|
255
|
+
}], isSidebarExpanded: [{
|
|
256
|
+
type: Input
|
|
257
|
+
}], clicked: [{
|
|
258
|
+
type: Output
|
|
259
|
+
}], onMouseEnter: [{
|
|
260
|
+
type: HostListener,
|
|
261
|
+
args: ['mouseenter']
|
|
262
|
+
}], onMouseLeave: [{
|
|
263
|
+
type: HostListener,
|
|
264
|
+
args: ['mouseleave']
|
|
42
265
|
}] } });
|
|
43
266
|
|
|
44
|
-
class
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
267
|
+
class SidebarComponent {
|
|
268
|
+
data = { menuItems: [] };
|
|
269
|
+
isSidebarExpanded = false;
|
|
270
|
+
onMouseEnter() {
|
|
271
|
+
this.isSidebarExpanded = true;
|
|
272
|
+
}
|
|
273
|
+
onMouseLeave() {
|
|
274
|
+
this.isSidebarExpanded = false;
|
|
275
|
+
}
|
|
276
|
+
onMenuItemClick(item, event) {
|
|
277
|
+
console.log('Menu item clicked:', item, event);
|
|
278
|
+
}
|
|
279
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
280
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: SidebarComponent, isStandalone: true, selector: "app-sidebar", inputs: { data: "data" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0, template: "<div class=\"sidebar-wrapper\">\r\n <aside\r\n class=\"sidebar\"\r\n [style.background-color]=\"!isSidebarExpanded ? data.backgroundColor : null\"\r\n >\r\n @for (item of data.menuItems; track $index) {\r\n <app-functional-label\r\n class=\"sidebar-item\"\r\n [isSidebarExpanded]=\"isSidebarExpanded\"\r\n [iconLeft]=\"item.iconLeft\"\r\n [iconRight]=\"item.iconRight\"\r\n [content]=\"item.content\"\r\n [routerLink]=\"item.url\"\r\n [colorIconLeft]=\"item.colorIconLeft\"\r\n [colorIconRight]=\"item.colorIconRight\"\r\n [colorContent]=\"item.colorContent\"\r\n [backgroundColor]=\"item.backgroundColor\"\r\n [borderRadius]=\"item.borderRadius\"\r\n (clicked)=\"onMenuItemClick(item, $event)\"\r\n [colorIconLeftHover]=\"item.colorIconLeftHover\"\r\n [colorIconRightHover]=\"item.colorIconRightHover\"\r\n [backgroundColorHover]=\"item.backgroundColorHover\"\r\n [width]=\"item.width\"\r\n [height]=\"item.height\"\r\n ></app-functional-label>\r\n }\r\n </aside>\r\n</div>\r\n", styles: [":host{display:block;height:100vh}.sidebar-wrapper{width:44px;height:100vh;transition:width .3s ease;background-color:transparent}.sidebar{display:flex;flex-direction:column;gap:8px;width:44px;height:100%;padding:8px;box-sizing:border-box;border-radius:16px;overflow:hidden;transition:width .3s ease,padding .3s ease,background-color .3s ease}.sidebar a{text-decoration:none}.sidebar-wrapper:hover{width:344px}.sidebar-wrapper:hover .sidebar{width:344px;padding:16px 8px;border-radius:16px;background-color:var(--theme-neutral-light-100)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FunctionalLabelComponent, selector: "app-functional-label", inputs: ["iconLeft", "iconRight", "colorIconLeft", "colorIconRight", "widthIconLeft", "heightIconLeft", "widthIconRight", "heightIconRight", "colorIconLeftHover", "colorIconRightHover", "colorContentHover", "backgroundColorHover", "borderRadiusHover", "content", "colorContent", "widthContent", "heightContent", "backgroundColor", "borderRadius", "width", "height", "routerLink", "isSidebarExpanded"], outputs: ["clicked"] }] });
|
|
48
281
|
}
|
|
49
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
282
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
50
283
|
type: Component,
|
|
51
|
-
args: [{ selector: 'app-
|
|
52
|
-
}], propDecorators: {
|
|
53
|
-
type: Input
|
|
284
|
+
args: [{ selector: 'app-sidebar', standalone: true, imports: [CommonModule, FunctionalLabelComponent], template: "<div class=\"sidebar-wrapper\">\r\n <aside\r\n class=\"sidebar\"\r\n [style.background-color]=\"!isSidebarExpanded ? data.backgroundColor : null\"\r\n >\r\n @for (item of data.menuItems; track $index) {\r\n <app-functional-label\r\n class=\"sidebar-item\"\r\n [isSidebarExpanded]=\"isSidebarExpanded\"\r\n [iconLeft]=\"item.iconLeft\"\r\n [iconRight]=\"item.iconRight\"\r\n [content]=\"item.content\"\r\n [routerLink]=\"item.url\"\r\n [colorIconLeft]=\"item.colorIconLeft\"\r\n [colorIconRight]=\"item.colorIconRight\"\r\n [colorContent]=\"item.colorContent\"\r\n [backgroundColor]=\"item.backgroundColor\"\r\n [borderRadius]=\"item.borderRadius\"\r\n (clicked)=\"onMenuItemClick(item, $event)\"\r\n [colorIconLeftHover]=\"item.colorIconLeftHover\"\r\n [colorIconRightHover]=\"item.colorIconRightHover\"\r\n [backgroundColorHover]=\"item.backgroundColorHover\"\r\n [width]=\"item.width\"\r\n [height]=\"item.height\"\r\n ></app-functional-label>\r\n }\r\n </aside>\r\n</div>\r\n", styles: [":host{display:block;height:100vh}.sidebar-wrapper{width:44px;height:100vh;transition:width .3s ease;background-color:transparent}.sidebar{display:flex;flex-direction:column;gap:8px;width:44px;height:100%;padding:8px;box-sizing:border-box;border-radius:16px;overflow:hidden;transition:width .3s ease,padding .3s ease,background-color .3s ease}.sidebar a{text-decoration:none}.sidebar-wrapper:hover{width:344px}.sidebar-wrapper:hover .sidebar{width:344px;padding:16px 8px;border-radius:16px;background-color:var(--theme-neutral-light-100)}\n"] }]
|
|
285
|
+
}], propDecorators: { data: [{
|
|
286
|
+
type: Input
|
|
287
|
+
}], onMouseEnter: [{
|
|
288
|
+
type: HostListener,
|
|
289
|
+
args: ['mouseenter']
|
|
290
|
+
}], onMouseLeave: [{
|
|
291
|
+
type: HostListener,
|
|
292
|
+
args: ['mouseleave']
|
|
54
293
|
}] } });
|
|
55
294
|
|
|
56
295
|
const BUTTON_SIZE_MAP = {
|
|
@@ -104,10 +343,10 @@ class ButtonContainerComponent {
|
|
|
104
343
|
handleClick() {
|
|
105
344
|
this.buttonClick.emit();
|
|
106
345
|
}
|
|
107
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
108
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
346
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ButtonContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
347
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ButtonContainerComponent, isStandalone: true, selector: "app-button-container", inputs: { size: "size", content: "content", fontSize: "fontSize", leftIcon: "leftIcon", rightIcon: "rightIcon", color: "color", backgroundColor: "backgroundColor", borderColor: "borderColor" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button class=\"button-container\" [style.minWidth]=\"sizeStyle.minWidth\" [style.minHeight]=\"sizeStyle.minHeight\" [style.color]=\"color\"\r\n [style.backgroundColor]=\"backgroundColor\" [style.borderColor]=\"borderColor\" (click)=\"handleClick()\">\r\n \r\n @if(leftIcon){\r\n <i class=\"button-icon\" [style.width]=\"sizeStyle.iconSize\" [style.height]=\"sizeStyle.iconSize\" [style.fontSize]=\"sizeStyle.iconSize\">\r\n {{leftIcon}}\r\n </i>\r\n }\r\n\r\n <span class=\"button-content\" [style.minWidth]=\"sizeStyle.contentWidth\" [style.minHeight]=\"sizeStyle.contentHeight\" \r\n [style.fontSize]=\"fontSize || sizeStyle.fontSize\" [style.color]=\"color\">\r\n {{ content }}\r\n </span>\r\n\r\n @if(rightIcon){\r\n <i class=\"button-icon\" [style.width]=\"sizeStyle.iconSize\" [style.height]=\"sizeStyle.iconSize\" [style.fontSize]=\"sizeStyle.iconSize\" [style.color]=\"color\">\r\n {{rightIcon}}\r\n </i>\r\n }\r\n</button>", styles: [".button-container{display:flex;justify-content:center;align-items:center;gap:8px;border-radius:var(--radius-md);cursor:pointer;padding:8px 16px;border:none;font-weight:500;transition:filter .15s ease,transform .1s ease}.button-container:hover{filter:brightness(1.1)}.button-container:active{filter:brightness(.9);transform:scale(.98)}.button-container:focus{outline:2px solid var(--brand-600);outline-offset:2px}.button-content{display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.button-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
109
348
|
}
|
|
110
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
349
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ButtonContainerComponent, decorators: [{
|
|
111
350
|
type: Component,
|
|
112
351
|
args: [{ selector: 'app-button-container', standalone: true, imports: [CommonModule], template: "<button class=\"button-container\" [style.minWidth]=\"sizeStyle.minWidth\" [style.minHeight]=\"sizeStyle.minHeight\" [style.color]=\"color\"\r\n [style.backgroundColor]=\"backgroundColor\" [style.borderColor]=\"borderColor\" (click)=\"handleClick()\">\r\n \r\n @if(leftIcon){\r\n <i class=\"button-icon\" [style.width]=\"sizeStyle.iconSize\" [style.height]=\"sizeStyle.iconSize\" [style.fontSize]=\"sizeStyle.iconSize\">\r\n {{leftIcon}}\r\n </i>\r\n }\r\n\r\n <span class=\"button-content\" [style.minWidth]=\"sizeStyle.contentWidth\" [style.minHeight]=\"sizeStyle.contentHeight\" \r\n [style.fontSize]=\"fontSize || sizeStyle.fontSize\" [style.color]=\"color\">\r\n {{ content }}\r\n </span>\r\n\r\n @if(rightIcon){\r\n <i class=\"button-icon\" [style.width]=\"sizeStyle.iconSize\" [style.height]=\"sizeStyle.iconSize\" [style.fontSize]=\"sizeStyle.iconSize\" [style.color]=\"color\">\r\n {{rightIcon}}\r\n </i>\r\n }\r\n</button>", styles: [".button-container{display:flex;justify-content:center;align-items:center;gap:8px;border-radius:var(--radius-md);cursor:pointer;padding:8px 16px;border:none;font-weight:500;transition:filter .15s ease,transform .1s ease}.button-container:hover{filter:brightness(1.1)}.button-container:active{filter:brightness(.9);transform:scale(.98)}.button-container:focus{outline:2px solid var(--brand-600);outline-offset:2px}.button-content{display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.button-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}\n"] }]
|
|
113
352
|
}], propDecorators: { size: [{
|
|
@@ -137,10 +376,10 @@ class LabelButtonComponent {
|
|
|
137
376
|
width = '100%';
|
|
138
377
|
height = '28px';
|
|
139
378
|
textColor = 'var(--neutral-100)';
|
|
140
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
141
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.
|
|
379
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LabelButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
380
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: LabelButtonComponent, isStandalone: true, selector: "app-label-button", inputs: { label: "label", bgColor: "bgColor", borderColor: "borderColor", width: "width", height: "height", textColor: "textColor" }, ngImport: i0, template: "<button\n [style.background-color]=\"bgColor\"\n [style.border-color]=\"borderColor\"\n [style.color]=\"textColor\"\n [style.width]=\"width\"\n [style.height]=\"height\"\n class=\"label-button\"\n type=\"button\"\n>\n {{ label }}\n</button>\n", styles: [".label-button{padding:16px 8px;border-radius:16px;border:1px solid var(--border-color);background-color:var(--bg-color);font-size:var(--font-xs);font-weight:var(--font-weight-medium);line-height:var(--line-height-xs);display:flex;justify-content:center;align-items:center;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
142
381
|
}
|
|
143
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
382
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LabelButtonComponent, decorators: [{
|
|
144
383
|
type: Component,
|
|
145
384
|
args: [{ selector: 'app-label-button', standalone: true, imports: [CommonModule], template: "<button\n [style.background-color]=\"bgColor\"\n [style.border-color]=\"borderColor\"\n [style.color]=\"textColor\"\n [style.width]=\"width\"\n [style.height]=\"height\"\n class=\"label-button\"\n type=\"button\"\n>\n {{ label }}\n</button>\n", styles: [".label-button{padding:16px 8px;border-radius:16px;border:1px solid var(--border-color);background-color:var(--bg-color);font-size:var(--font-xs);font-weight:var(--font-weight-medium);line-height:var(--line-height-xs);display:flex;justify-content:center;align-items:center;text-align:center}\n"] }]
|
|
146
385
|
}], propDecorators: { label: [{
|
|
@@ -198,10 +437,10 @@ class InputTextComponent {
|
|
|
198
437
|
this._value = newValue;
|
|
199
438
|
this.valueChange.emit(this._value);
|
|
200
439
|
}
|
|
201
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
202
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
440
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
441
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: InputTextComponent, isStandalone: true, selector: "app-input-text", inputs: { headerInput: "headerInput", placeholder: "placeholder", readonly: "readonly", required: "required", width: "width", maxLength: "maxLength", showLimit: "showLimit", icon: "icon", typeInput: "typeInput", value: "value" }, outputs: { valueChange: "valueChange", iconClick: "iconClick" }, ngImport: i0, template: "<div class=\"input-form\">\r\n <div class=\"input-form-content\">\r\n <label class=\"input-form-label\">\r\n <span class=\"label-text\" [class.hidden]=\"!headerInput\">\r\n {{ headerInput }}\r\n @if (required) {\r\n <span class=\"required-mark\">*</span>\r\n }\r\n </span>\r\n <div class=\"input-field-wrapper\">\r\n <input\r\n [type]=\"typeInput\"\r\n class=\"input-form-field\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [required]=\"required\"\r\n [style.width]=\"width\"\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n [attr.maxlength]=\"maxLength > 0 ? maxLength : null\"\r\n />\r\n @if (icon) {\r\n <button\r\n type=\"button\"\r\n class=\"input-icon-button\"\r\n [class.clickable]=\"iconClick.observed\"\r\n (click)=\"onIconClick()\"\r\n [attr.aria-label]=\"icon\"\r\n [disabled]=\"!iconClick.observed\"\r\n >\r\n <i [class]=\"icon\" class=\"input-icon\"></i>\r\n </button>\r\n }\r\n </div>\r\n </label>\r\n </div>\r\n <div class=\"limit\" [class.hidden]=\"!(maxLength > 0 && showLimit)\">\r\n <span>{{ limit }}</span>\r\n </div>\r\n</div>\r\n", styles: [".input-form{display:flex;flex-direction:column;justify-content:space-between;gap:4px}.hidden{visibility:hidden}.input-form-label{display:block;font-size:var(--font-sm);font-weight:700;color:var(--neutral-color-700)}.label-text{display:block;margin-bottom:4px;height:20px}.required-mark{color:var(--utility-600);margin-left:2px}.input-form-field{padding:8px 12px;border:1px solid var(--neutral-color-200);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--neutral-color-875);height:36px;width:100%;box-sizing:border-box;background-color:var(--neutral-color-10);transition:border-color .2s ease,box-shadow .2s ease}.input-form-field::placeholder{color:var(--neutral-color-400)}.input-form-field:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 2px rgba(var(--brand-500-rgb, 39, 64, 180),.15)}.input-form-field:read-only{background-color:var(--neutral-color-25);cursor:not-allowed}.input-form-field[type=password]{font-family:Verdana,sans-serif;font-size:16px;letter-spacing:3px}.input-form-field[type=password]::placeholder{font-family:inherit;font-size:var(--font-sm);letter-spacing:normal}.input-field-wrapper:has(.input-icon-button) .input-form-field{padding-right:36px}.input-field-wrapper{position:relative;display:flex;align-items:center}.input-icon-button{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;color:var(--neutral-color-500);transition:color .2s ease;outline:none}.input-icon-button.clickable{cursor:pointer}.input-icon-button.clickable:hover .input-icon{color:var(--brand-500)}.input-icon-button:disabled{cursor:default;pointer-events:none}.input-icon{font-size:14px!important;width:14px;height:14px;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.input-icon:before{font-size:14px!important}.limit{display:flex;justify-content:flex-end}.limit span{font-size:var(--font-xs, 12px);color:var(--neutral-color-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
|
|
203
442
|
}
|
|
204
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
443
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: InputTextComponent, decorators: [{
|
|
205
444
|
type: Component,
|
|
206
445
|
args: [{ selector: 'app-input-text', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"input-form\">\r\n <div class=\"input-form-content\">\r\n <label class=\"input-form-label\">\r\n <span class=\"label-text\" [class.hidden]=\"!headerInput\">\r\n {{ headerInput }}\r\n @if (required) {\r\n <span class=\"required-mark\">*</span>\r\n }\r\n </span>\r\n <div class=\"input-field-wrapper\">\r\n <input\r\n [type]=\"typeInput\"\r\n class=\"input-form-field\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [required]=\"required\"\r\n [style.width]=\"width\"\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n [attr.maxlength]=\"maxLength > 0 ? maxLength : null\"\r\n />\r\n @if (icon) {\r\n <button\r\n type=\"button\"\r\n class=\"input-icon-button\"\r\n [class.clickable]=\"iconClick.observed\"\r\n (click)=\"onIconClick()\"\r\n [attr.aria-label]=\"icon\"\r\n [disabled]=\"!iconClick.observed\"\r\n >\r\n <i [class]=\"icon\" class=\"input-icon\"></i>\r\n </button>\r\n }\r\n </div>\r\n </label>\r\n </div>\r\n <div class=\"limit\" [class.hidden]=\"!(maxLength > 0 && showLimit)\">\r\n <span>{{ limit }}</span>\r\n </div>\r\n</div>\r\n", styles: [".input-form{display:flex;flex-direction:column;justify-content:space-between;gap:4px}.hidden{visibility:hidden}.input-form-label{display:block;font-size:var(--font-sm);font-weight:700;color:var(--neutral-color-700)}.label-text{display:block;margin-bottom:4px;height:20px}.required-mark{color:var(--utility-600);margin-left:2px}.input-form-field{padding:8px 12px;border:1px solid var(--neutral-color-200);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--neutral-color-875);height:36px;width:100%;box-sizing:border-box;background-color:var(--neutral-color-10);transition:border-color .2s ease,box-shadow .2s ease}.input-form-field::placeholder{color:var(--neutral-color-400)}.input-form-field:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 2px rgba(var(--brand-500-rgb, 39, 64, 180),.15)}.input-form-field:read-only{background-color:var(--neutral-color-25);cursor:not-allowed}.input-form-field[type=password]{font-family:Verdana,sans-serif;font-size:16px;letter-spacing:3px}.input-form-field[type=password]::placeholder{font-family:inherit;font-size:var(--font-sm);letter-spacing:normal}.input-field-wrapper:has(.input-icon-button) .input-form-field{padding-right:36px}.input-field-wrapper{position:relative;display:flex;align-items:center}.input-icon-button{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;color:var(--neutral-color-500);transition:color .2s ease;outline:none}.input-icon-button.clickable{cursor:pointer}.input-icon-button.clickable:hover .input-icon{color:var(--brand-500)}.input-icon-button:disabled{cursor:default;pointer-events:none}.input-icon{font-size:14px!important;width:14px;height:14px;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.input-icon:before{font-size:14px!important}.limit{display:flex;justify-content:flex-end}.limit span{font-size:var(--font-xs, 12px);color:var(--neutral-color-500)}\n"] }]
|
|
207
446
|
}], propDecorators: { headerInput: [{
|
|
@@ -253,7 +492,7 @@ class InputStepperComponent {
|
|
|
253
492
|
return this._value;
|
|
254
493
|
}
|
|
255
494
|
increment() {
|
|
256
|
-
if (this.readonly)
|
|
495
|
+
if (this.readonly || this.disabled)
|
|
257
496
|
return;
|
|
258
497
|
const newValue = this._value + this.step;
|
|
259
498
|
if (newValue <= this.max) {
|
|
@@ -262,7 +501,7 @@ class InputStepperComponent {
|
|
|
262
501
|
}
|
|
263
502
|
}
|
|
264
503
|
decrement() {
|
|
265
|
-
if (this.readonly)
|
|
504
|
+
if (this.readonly || this.disabled)
|
|
266
505
|
return;
|
|
267
506
|
const newValue = this._value - this.step;
|
|
268
507
|
if (newValue >= this.min) {
|
|
@@ -284,10 +523,10 @@ class InputStepperComponent {
|
|
|
284
523
|
this._value = newValue;
|
|
285
524
|
this.valueChange.emit(this._value);
|
|
286
525
|
}
|
|
287
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
288
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
526
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: InputStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
527
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: InputStepperComponent, isStandalone: true, selector: "app-input-stepper", inputs: { headerInput: "headerInput", placeholder: "placeholder", readonly: "readonly", required: "required", disabled: "disabled", width: "width", min: "min", max: "max", error: "error", helperText: "helperText", step: "step", state: "state", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div\r\n class=\"input-form\"\r\n [style.width]=\"width\"\r\n [class.disabled]=\"disabled\"\r\n [class.state-negative]=\"state === 'negative'\"\r\n [class.state-positive]=\"state === 'positive'\"\r\n>\r\n <div class=\"input-form-content\">\r\n <label class=\"input-form-label\" [for]=\"componentId\">\r\n <span class=\"label-text\">\r\n {{ headerInput }}\r\n @if (required) {\r\n <span class=\"required-mark\">*</span>\r\n }\r\n </span>\r\n </label>\r\n </div>\r\n\r\n <div class=\"input-stepper-content\">\r\n <button\r\n type=\"button\"\r\n class=\"input-stepper-button\"\r\n (click)=\"decrement()\"\r\n [disabled]=\"disabled\"\r\n aria-label=\"Gi\u1EA3m gi\u00E1 tr\u1ECB\"\r\n >\r\n <span class=\"stepper-icon\">\u2212</span>\r\n </button>\r\n <input\r\n [id]=\"componentId\"\r\n type=\"text\"\r\n class=\"input-stepper-input\"\r\n placeholder=\"0\"\r\n [placeholder]=\"placeholder || '0'\"\r\n title=\"Gi\u00E1 tr\u1ECB\"\r\n [title]=\"headerInput || 'Gi\u00E1 tr\u1ECB'\"\r\n [readonly]=\"readonly\"\r\n [disabled]=\"disabled\"\r\n [required]=\"required\"\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n [attr.aria-label]=\"headerInput || 'Gi\u00E1 tr\u1ECB'\"\r\n />\r\n <button\r\n type=\"button\"\r\n class=\"input-stepper-button\"\r\n (click)=\"increment()\"\r\n [disabled]=\"disabled\"\r\n aria-label=\"T\u0103ng gi\u00E1 tr\u1ECB\"\r\n >\r\n <span class=\"stepper-icon\">+</span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"input-stepper-footer\">\r\n @if (error) {\r\n <span class=\"input-stepper-error\">{{ error }}</span>\r\n } @else if (helperText) {\r\n <span class=\"input-stepper-helper\">{{ helperText }}</span>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".input-form{display:flex;flex-direction:column;gap:6px;min-width:200px}.input-form-content{display:flex}.input-form-content .input-form-label{display:block;font-size:var(--font-sm);font-weight:700;color:var(--neutral-color-700)}.input-form-content .input-form-label .label-text{display:block;margin-bottom:4px}.input-form-content .input-form-label .label-text .required-mark{color:var(--utility-600);margin-left:2px}.input-stepper-content{display:flex;align-items:center;border:1px solid var(--neutral-color-200);border-radius:var(--radius-md);overflow:hidden;background:var(--neutral-color-10);height:36px;transition:border-color .2s ease,box-shadow .2s ease}.input-stepper-content:hover{border-color:var(--neutral-color-300)}.input-stepper-content:focus-within{border-color:var(--brand-500);box-shadow:0 0 0 2px rgba(var(--brand-500-rgb, 39, 64, 180),.15)}.input-stepper-content .input-stepper-button{display:flex;align-items:center;justify-content:center;width:36px;min-width:36px;flex-shrink:0;height:100%;border:none;background:transparent;cursor:pointer;color:var(--neutral-color-500);font-size:var(--font-sm);background-color:var(--neutral-color-10);padding:8px;transition:background-color .2s ease,color .2s ease}.input-stepper-content .input-stepper-button:hover:not(:disabled){background-color:var(--neutral-color-50)}.input-stepper-content .input-stepper-button:active:not(:disabled){background-color:var(--neutral-color-100)}.input-stepper-content .input-stepper-button:disabled{color:var(--neutral-color-300);cursor:not-allowed;background-color:var(--neutral-color-50)}.input-stepper-content .input-stepper-button .stepper-icon{font-size:16px;font-weight:600;pointer-events:none;line-height:1}.input-stepper-content .input-stepper-input{flex:1;min-width:0;height:100%;border:none;text-align:center;font-size:var(--font-sm);font-weight:500;color:var(--neutral-color-875);outline:none;background:transparent;padding:0 8px}.input-stepper-content .input-stepper-input::placeholder{color:var(--neutral-color-400);font-weight:400}.input-stepper-content .input-stepper-input:read-only{cursor:default}.input-stepper-content .input-stepper-input:disabled{cursor:not-allowed;background-color:var(--neutral-color-50);color:var(--neutral-color-400)}.input-stepper-content .input-stepper-input::-webkit-outer-spin-button,.input-stepper-content .input-stepper-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.input-stepper-content .input-stepper-input[type=number]{-moz-appearance:textfield;appearance:textfield}.input-stepper-footer{min-height:18px}.input-stepper-footer .input-stepper-error{font-size:var(--font-xs, 12px);color:var(--utility-600);line-height:1.5}.input-stepper-footer .input-stepper-helper{font-size:var(--font-xs, 12px);color:var(--neutral-color-500);line-height:1.5}.input-form.disabled .input-stepper-content{background-color:var(--neutral-color-50);border-color:var(--neutral-color-200);cursor:not-allowed}.input-form.disabled .input-stepper-content:hover{border-color:var(--neutral-color-200)}.input-form.disabled .input-stepper-content .input-stepper-button{cursor:not-allowed;color:var(--neutral-color-300);background-color:var(--neutral-color-50)}.input-form.disabled .input-stepper-content .input-stepper-input{cursor:not-allowed;color:var(--neutral-color-400);background-color:var(--neutral-color-50)}.input-form.state-negative .input-stepper-content{border-color:var(--utility-600)}.input-form.state-negative .input-stepper-content:focus-within{border-color:var(--utility-600);box-shadow:0 0 0 2px #ef444426}.input-form.state-negative .input-stepper-footer .input-stepper-helper{color:var(--utility-600)}.input-form.state-positive .input-stepper-content{border-color:var(--success-500, #22c55e)}.input-form.state-positive .input-stepper-content:focus-within{border-color:var(--success-500, #22c55e);box-shadow:0 0 0 2px #22c55e26}.input-form.state-positive .input-stepper-footer .input-stepper-helper{color:var(--success-500, #22c55e)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
|
|
289
528
|
}
|
|
290
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
529
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: InputStepperComponent, decorators: [{
|
|
291
530
|
type: Component,
|
|
292
531
|
args: [{ selector: 'app-input-stepper', standalone: true, imports: [CommonModule, FormsModule], template: "<div\r\n class=\"input-form\"\r\n [style.width]=\"width\"\r\n [class.disabled]=\"disabled\"\r\n [class.state-negative]=\"state === 'negative'\"\r\n [class.state-positive]=\"state === 'positive'\"\r\n>\r\n <div class=\"input-form-content\">\r\n <label class=\"input-form-label\" [for]=\"componentId\">\r\n <span class=\"label-text\">\r\n {{ headerInput }}\r\n @if (required) {\r\n <span class=\"required-mark\">*</span>\r\n }\r\n </span>\r\n </label>\r\n </div>\r\n\r\n <div class=\"input-stepper-content\">\r\n <button\r\n type=\"button\"\r\n class=\"input-stepper-button\"\r\n (click)=\"decrement()\"\r\n [disabled]=\"disabled\"\r\n aria-label=\"Gi\u1EA3m gi\u00E1 tr\u1ECB\"\r\n >\r\n <span class=\"stepper-icon\">\u2212</span>\r\n </button>\r\n <input\r\n [id]=\"componentId\"\r\n type=\"text\"\r\n class=\"input-stepper-input\"\r\n placeholder=\"0\"\r\n [placeholder]=\"placeholder || '0'\"\r\n title=\"Gi\u00E1 tr\u1ECB\"\r\n [title]=\"headerInput || 'Gi\u00E1 tr\u1ECB'\"\r\n [readonly]=\"readonly\"\r\n [disabled]=\"disabled\"\r\n [required]=\"required\"\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n [attr.aria-label]=\"headerInput || 'Gi\u00E1 tr\u1ECB'\"\r\n />\r\n <button\r\n type=\"button\"\r\n class=\"input-stepper-button\"\r\n (click)=\"increment()\"\r\n [disabled]=\"disabled\"\r\n aria-label=\"T\u0103ng gi\u00E1 tr\u1ECB\"\r\n >\r\n <span class=\"stepper-icon\">+</span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"input-stepper-footer\">\r\n @if (error) {\r\n <span class=\"input-stepper-error\">{{ error }}</span>\r\n } @else if (helperText) {\r\n <span class=\"input-stepper-helper\">{{ helperText }}</span>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".input-form{display:flex;flex-direction:column;gap:6px;min-width:200px}.input-form-content{display:flex}.input-form-content .input-form-label{display:block;font-size:var(--font-sm);font-weight:700;color:var(--neutral-color-700)}.input-form-content .input-form-label .label-text{display:block;margin-bottom:4px}.input-form-content .input-form-label .label-text .required-mark{color:var(--utility-600);margin-left:2px}.input-stepper-content{display:flex;align-items:center;border:1px solid var(--neutral-color-200);border-radius:var(--radius-md);overflow:hidden;background:var(--neutral-color-10);height:36px;transition:border-color .2s ease,box-shadow .2s ease}.input-stepper-content:hover{border-color:var(--neutral-color-300)}.input-stepper-content:focus-within{border-color:var(--brand-500);box-shadow:0 0 0 2px rgba(var(--brand-500-rgb, 39, 64, 180),.15)}.input-stepper-content .input-stepper-button{display:flex;align-items:center;justify-content:center;width:36px;min-width:36px;flex-shrink:0;height:100%;border:none;background:transparent;cursor:pointer;color:var(--neutral-color-500);font-size:var(--font-sm);background-color:var(--neutral-color-10);padding:8px;transition:background-color .2s ease,color .2s ease}.input-stepper-content .input-stepper-button:hover:not(:disabled){background-color:var(--neutral-color-50)}.input-stepper-content .input-stepper-button:active:not(:disabled){background-color:var(--neutral-color-100)}.input-stepper-content .input-stepper-button:disabled{color:var(--neutral-color-300);cursor:not-allowed;background-color:var(--neutral-color-50)}.input-stepper-content .input-stepper-button .stepper-icon{font-size:16px;font-weight:600;pointer-events:none;line-height:1}.input-stepper-content .input-stepper-input{flex:1;min-width:0;height:100%;border:none;text-align:center;font-size:var(--font-sm);font-weight:500;color:var(--neutral-color-875);outline:none;background:transparent;padding:0 8px}.input-stepper-content .input-stepper-input::placeholder{color:var(--neutral-color-400);font-weight:400}.input-stepper-content .input-stepper-input:read-only{cursor:default}.input-stepper-content .input-stepper-input:disabled{cursor:not-allowed;background-color:var(--neutral-color-50);color:var(--neutral-color-400)}.input-stepper-content .input-stepper-input::-webkit-outer-spin-button,.input-stepper-content .input-stepper-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.input-stepper-content .input-stepper-input[type=number]{-moz-appearance:textfield;appearance:textfield}.input-stepper-footer{min-height:18px}.input-stepper-footer .input-stepper-error{font-size:var(--font-xs, 12px);color:var(--utility-600);line-height:1.5}.input-stepper-footer .input-stepper-helper{font-size:var(--font-xs, 12px);color:var(--neutral-color-500);line-height:1.5}.input-form.disabled .input-stepper-content{background-color:var(--neutral-color-50);border-color:var(--neutral-color-200);cursor:not-allowed}.input-form.disabled .input-stepper-content:hover{border-color:var(--neutral-color-200)}.input-form.disabled .input-stepper-content .input-stepper-button{cursor:not-allowed;color:var(--neutral-color-300);background-color:var(--neutral-color-50)}.input-form.disabled .input-stepper-content .input-stepper-input{cursor:not-allowed;color:var(--neutral-color-400);background-color:var(--neutral-color-50)}.input-form.state-negative .input-stepper-content{border-color:var(--utility-600)}.input-form.state-negative .input-stepper-content:focus-within{border-color:var(--utility-600);box-shadow:0 0 0 2px #ef444426}.input-form.state-negative .input-stepper-footer .input-stepper-helper{color:var(--utility-600)}.input-form.state-positive .input-stepper-content{border-color:var(--success-500, #22c55e)}.input-form.state-positive .input-stepper-content:focus-within{border-color:var(--success-500, #22c55e);box-shadow:0 0 0 2px #22c55e26}.input-form.state-positive .input-stepper-footer .input-stepper-helper{color:var(--success-500, #22c55e)}\n"] }]
|
|
293
532
|
}], propDecorators: { headerInput: [{
|
|
@@ -347,6 +586,31 @@ class InputCalendarComponent {
|
|
|
347
586
|
}
|
|
348
587
|
return isoDate;
|
|
349
588
|
}
|
|
589
|
+
// Validate if a date string (dd/mm/yyyy) represents a valid date
|
|
590
|
+
isValidDate(displayDate) {
|
|
591
|
+
if (!displayDate || displayDate.length !== 10)
|
|
592
|
+
return false;
|
|
593
|
+
const parts = displayDate.split('/');
|
|
594
|
+
if (parts.length !== 3)
|
|
595
|
+
return false;
|
|
596
|
+
const day = parseInt(parts[0], 10);
|
|
597
|
+
const month = parseInt(parts[1], 10);
|
|
598
|
+
const year = parseInt(parts[2], 10);
|
|
599
|
+
// Basic range validation
|
|
600
|
+
if (isNaN(day) || isNaN(month) || isNaN(year))
|
|
601
|
+
return false;
|
|
602
|
+
if (month < 1 || month > 12)
|
|
603
|
+
return false;
|
|
604
|
+
if (day < 1 || day > 31)
|
|
605
|
+
return false;
|
|
606
|
+
if (year < 1900 || year > 2100)
|
|
607
|
+
return false;
|
|
608
|
+
// Create date and verify it matches input (handles invalid dates like 31/02)
|
|
609
|
+
const date = new Date(year, month - 1, day);
|
|
610
|
+
return date.getFullYear() === year &&
|
|
611
|
+
date.getMonth() === month - 1 &&
|
|
612
|
+
date.getDate() === day;
|
|
613
|
+
}
|
|
350
614
|
// Convert display format (dd/mm/yyyy) to ISO format (yyyy-mm-dd)
|
|
351
615
|
formatToISO(displayDate) {
|
|
352
616
|
if (!displayDate)
|
|
@@ -377,8 +641,8 @@ class InputCalendarComponent {
|
|
|
377
641
|
value = value.substring(0, 10);
|
|
378
642
|
}
|
|
379
643
|
this.displayValue = value;
|
|
380
|
-
// Only emit if complete date
|
|
381
|
-
if (value.length === 10) {
|
|
644
|
+
// Only emit if complete and valid date
|
|
645
|
+
if (value.length === 10 && this.isValidDate(value)) {
|
|
382
646
|
const isoValue = this.formatToISO(value);
|
|
383
647
|
this._value = isoValue;
|
|
384
648
|
this.valueChange.emit(isoValue);
|
|
@@ -397,10 +661,10 @@ class InputCalendarComponent {
|
|
|
397
661
|
this.displayValue = this.formatToDisplay(input.value);
|
|
398
662
|
this.valueChange.emit(this._value);
|
|
399
663
|
}
|
|
400
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
401
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
664
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: InputCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
665
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: InputCalendarComponent, isStandalone: true, selector: "app-input-calendar", inputs: { headerInput: "headerInput", placeholder: "placeholder", readonly: "readonly", required: "required", width: "width", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "hiddenDateInput", first: true, predicate: ["hiddenDateInput"], descendants: true }], ngImport: i0, template: "<div class=\"input-form\" [style.width]=\"width\">\r\n <label class=\"input-form-label\">\r\n <div class=\"input-form-label-header\">\r\n <span>{{ headerInput }}</span>\r\n @if (required) {\r\n <span class=\"required-mark\">*</span>\r\n }\r\n </div>\r\n <div class=\"calendar-input-wrapper\">\r\n <input\r\n type=\"text\"\r\n class=\"input-form-field\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [required]=\"required\"\r\n [value]=\"displayValue\"\r\n (input)=\"onDisplayInput($event)\"\r\n maxlength=\"10\"\r\n />\r\n <button\r\n type=\"button\"\r\n class=\"calendar-icon-btn\"\r\n (click)=\"openDatePicker()\"\r\n [disabled]=\"readonly\"\r\n >\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\r\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\r\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\r\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\r\n </svg>\r\n </button>\r\n <input\r\n #hiddenDateInput\r\n type=\"date\"\r\n class=\"hidden-date-input\"\r\n [value]=\"value\"\r\n (change)=\"onDatePickerChange($event)\"\r\n />\r\n </div>\r\n </label>\r\n</div>\r\n", styles: [".input-form{display:flex;flex-direction:column;gap:6px}.input-form-label{display:block;font-size:var(--font-sm);font-weight:700;color:var(--neutral-color-700);margin-bottom:4px}.input-form-label-header{display:flex;align-items:center;margin-bottom:4px}.required-mark{color:var(--utility-600);margin-left:2px}.calendar-input-wrapper{position:relative;display:flex;align-items:center}.input-form-field{padding:8px 40px 8px 12px;border:1px solid var(--neutral-color-200);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--neutral-color-700);height:36px;width:100%;box-sizing:border-box;background-color:var(--neutral-color-10);transition:border-color .2s ease,box-shadow .2s ease}.input-form-field::placeholder{color:var(--neutral-color-400)}.input-form-field:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 2px #2740b426}.input-form-field:read-only{background-color:var(--neutral-color-25);cursor:not-allowed}.calendar-icon-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;padding:4px;cursor:pointer;color:var(--neutral-color-500);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:color .2s ease,background-color .2s ease}.calendar-icon-btn:hover:not(:disabled){background-color:var(--neutral-color-50)}.calendar-icon-btn:disabled{cursor:not-allowed;opacity:.5}.hidden-date-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
|
|
402
666
|
}
|
|
403
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
667
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: InputCalendarComponent, decorators: [{
|
|
404
668
|
type: Component,
|
|
405
669
|
args: [{ selector: 'app-input-calendar', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"input-form\" [style.width]=\"width\">\r\n <label class=\"input-form-label\">\r\n <div class=\"input-form-label-header\">\r\n <span>{{ headerInput }}</span>\r\n @if (required) {\r\n <span class=\"required-mark\">*</span>\r\n }\r\n </div>\r\n <div class=\"calendar-input-wrapper\">\r\n <input\r\n type=\"text\"\r\n class=\"input-form-field\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [required]=\"required\"\r\n [value]=\"displayValue\"\r\n (input)=\"onDisplayInput($event)\"\r\n maxlength=\"10\"\r\n />\r\n <button\r\n type=\"button\"\r\n class=\"calendar-icon-btn\"\r\n (click)=\"openDatePicker()\"\r\n [disabled]=\"readonly\"\r\n >\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\r\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\r\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\r\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\r\n </svg>\r\n </button>\r\n <input\r\n #hiddenDateInput\r\n type=\"date\"\r\n class=\"hidden-date-input\"\r\n [value]=\"value\"\r\n (change)=\"onDatePickerChange($event)\"\r\n />\r\n </div>\r\n </label>\r\n</div>\r\n", styles: [".input-form{display:flex;flex-direction:column;gap:6px}.input-form-label{display:block;font-size:var(--font-sm);font-weight:700;color:var(--neutral-color-700);margin-bottom:4px}.input-form-label-header{display:flex;align-items:center;margin-bottom:4px}.required-mark{color:var(--utility-600);margin-left:2px}.calendar-input-wrapper{position:relative;display:flex;align-items:center}.input-form-field{padding:8px 40px 8px 12px;border:1px solid var(--neutral-color-200);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--neutral-color-700);height:36px;width:100%;box-sizing:border-box;background-color:var(--neutral-color-10);transition:border-color .2s ease,box-shadow .2s ease}.input-form-field::placeholder{color:var(--neutral-color-400)}.input-form-field:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 2px #2740b426}.input-form-field:read-only{background-color:var(--neutral-color-25);cursor:not-allowed}.calendar-icon-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;padding:4px;cursor:pointer;color:var(--neutral-color-500);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:color .2s ease,background-color .2s ease}.calendar-icon-btn:hover:not(:disabled){background-color:var(--neutral-color-50)}.calendar-icon-btn:disabled{cursor:not-allowed;opacity:.5}.hidden-date-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}\n"] }]
|
|
406
670
|
}], propDecorators: { headerInput: [{
|
|
@@ -429,10 +693,10 @@ class TableHeaderComponent {
|
|
|
429
693
|
headerIconLeft;
|
|
430
694
|
headerIconRight;
|
|
431
695
|
fontSize = 'var(--font-xs)';
|
|
432
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
433
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
696
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: TableHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
697
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: TableHeaderComponent, isStandalone: true, selector: "tr[app-table-header]", inputs: { columns: "columns", backgroundColor: "backgroundColor", textColor: ["textColor", "textColor", (value) => value || '#ffffff'], headerIconLeft: "headerIconLeft", headerIconRight: "headerIconRight", fontSize: "fontSize" }, ngImport: i0, template: "@for (col of columns; track col.key) {\r\n <th\r\n scope=\"col\"\r\n [style.width]=\"col.width\"\r\n [style.backgroundColor]=\"backgroundColor\"\r\n [style.color]=\"textColor\"\r\n >\r\n <div class=\"header-container\">\r\n <div class=\"header-content\">\r\n @if (headerIconLeft) {\r\n <div class=\"icon-left\">\r\n <i [class]=\"headerIconLeft\"></i>\r\n </div>\r\n }\r\n <div class=\"header-text\" [style.font-size]=\"fontSize\">\r\n {{ col.header }}\r\n </div>\r\n @if (headerIconRight) {\r\n <div class=\"icon-right\">\r\n <i [class]=\"headerIconRight\"></i>\r\n </div>\r\n }\r\n </div>\r\n <p class=\"divider\">|</p>\r\n </div>\r\n </th>\r\n}\r\n", styles: ["th{padding:0;vertical-align:middle;height:44px;box-sizing:border-box}th .header-content{display:flex;align-items:center;width:100%;gap:8px;border-collapse:collapse}th .header-content .header-text{font-weight:600}th .header-content .icon-left,th .header-content .icon-right{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px}th .header-content:has(.header-text:only-child){justify-content:flex-start}th .header-content:has(.icon-left),th .header-content:has(.icon-right){justify-content:space-between;background-color:var(--brand-900)}th .header-content:has(.icon-left) .header-text,th .header-content:has(.icon-right) .header-text{flex:1;text-align:center}th .header-content:has(.icon-left):not(:has(.icon-right)){justify-content:flex-start}th .header-content:has(.icon-left):not(:has(.icon-right)) .header-text{flex:1}th .header-content:has(.icon-right):not(:has(.icon-left)){justify-content:space-between}th .header-content:has(.icon-right):not(:has(.icon-left)) .header-text{flex:1}th:not(:last-child){border-right:1px solid rgba(0,0,0,.1)}.table-header{width:100%}.header-container{display:flex;align-items:center;width:100%;padding:0 8px;box-sizing:border-box;height:100%}.divider{display:flex;align-items:center;justify-content:center;height:20px;width:1px;background-color:#0000001a;margin:0 8px;color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
434
698
|
}
|
|
435
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
699
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: TableHeaderComponent, decorators: [{
|
|
436
700
|
type: Component,
|
|
437
701
|
args: [{ selector: 'tr[app-table-header]', standalone: true, imports: [CommonModule], template: "@for (col of columns; track col.key) {\r\n <th\r\n scope=\"col\"\r\n [style.width]=\"col.width\"\r\n [style.backgroundColor]=\"backgroundColor\"\r\n [style.color]=\"textColor\"\r\n >\r\n <div class=\"header-container\">\r\n <div class=\"header-content\">\r\n @if (headerIconLeft) {\r\n <div class=\"icon-left\">\r\n <i [class]=\"headerIconLeft\"></i>\r\n </div>\r\n }\r\n <div class=\"header-text\" [style.font-size]=\"fontSize\">\r\n {{ col.header }}\r\n </div>\r\n @if (headerIconRight) {\r\n <div class=\"icon-right\">\r\n <i [class]=\"headerIconRight\"></i>\r\n </div>\r\n }\r\n </div>\r\n <p class=\"divider\">|</p>\r\n </div>\r\n </th>\r\n}\r\n", styles: ["th{padding:0;vertical-align:middle;height:44px;box-sizing:border-box}th .header-content{display:flex;align-items:center;width:100%;gap:8px;border-collapse:collapse}th .header-content .header-text{font-weight:600}th .header-content .icon-left,th .header-content .icon-right{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px}th .header-content:has(.header-text:only-child){justify-content:flex-start}th .header-content:has(.icon-left),th .header-content:has(.icon-right){justify-content:space-between;background-color:var(--brand-900)}th .header-content:has(.icon-left) .header-text,th .header-content:has(.icon-right) .header-text{flex:1;text-align:center}th .header-content:has(.icon-left):not(:has(.icon-right)){justify-content:flex-start}th .header-content:has(.icon-left):not(:has(.icon-right)) .header-text{flex:1}th .header-content:has(.icon-right):not(:has(.icon-left)){justify-content:space-between}th .header-content:has(.icon-right):not(:has(.icon-left)) .header-text{flex:1}th:not(:last-child){border-right:1px solid rgba(0,0,0,.1)}.table-header{width:100%}.header-container{display:flex;align-items:center;width:100%;padding:0 8px;box-sizing:border-box;height:100%}.divider{display:flex;align-items:center;justify-content:center;height:20px;width:1px;background-color:#0000001a;margin:0 8px;color:transparent}\n"] }]
|
|
438
702
|
}], propDecorators: { columns: [{
|
|
@@ -455,10 +719,10 @@ class TableBodyComponent {
|
|
|
455
719
|
columns = [];
|
|
456
720
|
columnTemplates = {};
|
|
457
721
|
fontSize = 'var(--font-sm)';
|
|
458
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
459
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
722
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: TableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
723
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: TableBodyComponent, isStandalone: true, selector: "[app-table-body]", inputs: { rows: "rows", columns: "columns", columnTemplates: "columnTemplates", fontSize: "fontSize" }, ngImport: i0, template: "@for (row of rows; track $index) {\r\n <tr>\r\n @for (col of columns; track col.key) {\r\n <td [style.width]=\"col.width\" [style.font-size]=\"fontSize\">\r\n @if (columnTemplates[col.key]) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n columnTemplates[col.key];\r\n context: { $implicit: row[col.key], row: row }\r\n \"\r\n ></ng-container>\r\n } @else {\r\n {{ row[col.key] }}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n}\r\n", styles: ["td{padding:16px 8px;vertical-align:middle;color:var(--neutral-color-700);height:70px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
460
724
|
}
|
|
461
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
725
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: TableBodyComponent, decorators: [{
|
|
462
726
|
type: Component,
|
|
463
727
|
args: [{ selector: '[app-table-body]', standalone: true, imports: [CommonModule], template: "@for (row of rows; track $index) {\r\n <tr>\r\n @for (col of columns; track col.key) {\r\n <td [style.width]=\"col.width\" [style.font-size]=\"fontSize\">\r\n @if (columnTemplates[col.key]) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n columnTemplates[col.key];\r\n context: { $implicit: row[col.key], row: row }\r\n \"\r\n ></ng-container>\r\n } @else {\r\n {{ row[col.key] }}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n}\r\n", styles: ["td{padding:16px 8px;vertical-align:middle;color:var(--neutral-color-700);height:70px}\n"] }]
|
|
464
728
|
}], propDecorators: { rows: [{
|
|
@@ -479,10 +743,10 @@ class ApprovalListItemComponent {
|
|
|
479
743
|
get parsedDate() {
|
|
480
744
|
return new Date(this.date);
|
|
481
745
|
}
|
|
482
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
483
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.
|
|
746
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApprovalListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
747
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ApprovalListItemComponent, isStandalone: true, selector: "app-approval-list-item", inputs: { name: "name", date: "date", rightTemplate: "rightTemplate", rightContext: "rightContext" }, ngImport: i0, template: "<div class=\"approval-item\">\r\n <!-- LEFT -->\r\n <div class=\"approval-item-left\">\r\n <span class=\"approval-item-left-name\">{{ name }}</span>\r\n <span class=\"approval-item-left-date\">\r\n <span class=\"approval-item-left-date-title\">Ng\u00E0y t\u1EA1o \u0111\u01A1n:</span>\r\n {{ date | date: 'dd/MM/yyyy' }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"approval-item-right\">\r\n <ng-container *ngIf=\"rightTemplate; else defaultRight\">\r\n <ng-container *ngTemplateOutlet=\"rightTemplate; context: rightContext\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #defaultRight>\r\n <span class=\"text-gray-400\">\u2014</span>\r\n </ng-template>\r\n </div>\r\n</div>", styles: [".approval-item{display:flex;justify-content:space-between;min-width:400px;height:fit-content;align-items:center;padding:16px 8px}.approval-item-left-date-title{color:var(--theme-neutral-500)}.approval-item-right p{color:var(--secondary-800);font-weight:500}.approval-item-left{display:flex;flex-direction:column;gap:8px}span,p{font-size:var(--font-sm)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
484
748
|
}
|
|
485
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
749
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApprovalListItemComponent, decorators: [{
|
|
486
750
|
type: Component,
|
|
487
751
|
args: [{ selector: 'app-approval-list-item', imports: [CommonModule], standalone: true, template: "<div class=\"approval-item\">\r\n <!-- LEFT -->\r\n <div class=\"approval-item-left\">\r\n <span class=\"approval-item-left-name\">{{ name }}</span>\r\n <span class=\"approval-item-left-date\">\r\n <span class=\"approval-item-left-date-title\">Ng\u00E0y t\u1EA1o \u0111\u01A1n:</span>\r\n {{ date | date: 'dd/MM/yyyy' }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"approval-item-right\">\r\n <ng-container *ngIf=\"rightTemplate; else defaultRight\">\r\n <ng-container *ngTemplateOutlet=\"rightTemplate; context: rightContext\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #defaultRight>\r\n <span class=\"text-gray-400\">\u2014</span>\r\n </ng-template>\r\n </div>\r\n</div>", styles: [".approval-item{display:flex;justify-content:space-between;min-width:400px;height:fit-content;align-items:center;padding:16px 8px}.approval-item-left-date-title{color:var(--theme-neutral-500)}.approval-item-right p{color:var(--secondary-800);font-weight:500}.approval-item-left{display:flex;flex-direction:column;gap:8px}span,p{font-size:var(--font-sm)}\n"] }]
|
|
488
752
|
}], propDecorators: { name: [{
|
|
@@ -500,12 +764,12 @@ class ApprovalListComponent {
|
|
|
500
764
|
headerContentRight;
|
|
501
765
|
headerContentLeft;
|
|
502
766
|
width;
|
|
503
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
504
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.
|
|
767
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApprovalListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
768
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ApprovalListComponent, isStandalone: true, selector: "app-approval-list", inputs: { rows: "rows", headerContentRight: "headerContentRight", headerContentLeft: "headerContentLeft", width: "width" }, ngImport: i0, template: "<div class=\"approval-list\" [style.width]=\"width\">\r\n <div class=\"approval-list-header\">\r\n <span class=\"approval-list-header-left\">{{ headerContentLeft }}</span>\r\n <div>\r\n <p>{{ headerContentRight }}</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"approval-list-content\" [style.width]=\"width\">\r\n <app-approval-list-item\r\n *ngFor=\"let row of rows\"\r\n [name]=\"row.name\"\r\n [date]=\"row.date\"\r\n [rightTemplate]=\"row.rightTemplate\"\r\n [rightContext]=\"row.rightContext\"\r\n >\r\n </app-approval-list-item>\r\n </div>\r\n</div>\r\n", styles: [".approval-list{display:flex;flex-direction:column;background-color:var(--theme-neutral-light-100);border-radius:16px}.approval-list-header{display:flex;justify-content:space-between;align-items:center;padding:16px 8px;height:fit-content}.approval-list-header span{font-size:20px;color:var(--brand-600);font-weight:700}.approval-list-header p{font-size:var(--font-sm)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ApprovalListItemComponent, selector: "app-approval-list-item", inputs: ["name", "date", "rightTemplate", "rightContext"] }] });
|
|
505
769
|
}
|
|
506
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
770
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApprovalListComponent, decorators: [{
|
|
507
771
|
type: Component,
|
|
508
|
-
args: [{ selector: 'app-approval-list', standalone: true, imports: [CommonModule, ApprovalListItemComponent], template: "<div class=\"approval-list\" [style.width]=\"width\">\r\n <div class=\"approval-list-header\">\r\n <span class=\"approval-list-header-left\">{{
|
|
772
|
+
args: [{ selector: 'app-approval-list', standalone: true, imports: [CommonModule, ApprovalListItemComponent], template: "<div class=\"approval-list\" [style.width]=\"width\">\r\n <div class=\"approval-list-header\">\r\n <span class=\"approval-list-header-left\">{{ headerContentLeft }}</span>\r\n <div>\r\n <p>{{ headerContentRight }}</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"approval-list-content\" [style.width]=\"width\">\r\n <app-approval-list-item\r\n *ngFor=\"let row of rows\"\r\n [name]=\"row.name\"\r\n [date]=\"row.date\"\r\n [rightTemplate]=\"row.rightTemplate\"\r\n [rightContext]=\"row.rightContext\"\r\n >\r\n </app-approval-list-item>\r\n </div>\r\n</div>\r\n", styles: [".approval-list{display:flex;flex-direction:column;background-color:var(--theme-neutral-light-100);border-radius:16px}.approval-list-header{display:flex;justify-content:space-between;align-items:center;padding:16px 8px;height:fit-content}.approval-list-header span{font-size:20px;color:var(--brand-600);font-weight:700}.approval-list-header p{font-size:var(--font-sm)}\n"] }]
|
|
509
773
|
}], propDecorators: { rows: [{
|
|
510
774
|
type: Input
|
|
511
775
|
}], headerContentRight: [{
|
|
@@ -529,12 +793,12 @@ class PopUpConfirmComponent {
|
|
|
529
793
|
onCancel() {
|
|
530
794
|
this.cancelClick.emit();
|
|
531
795
|
}
|
|
532
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
533
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.
|
|
796
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PopUpConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
797
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: PopUpConfirmComponent, isStandalone: true, selector: "app-pop-up-confirm", inputs: { imgUrl: "imgUrl", title: "title", content: "content", colorButton: "colorButton" }, outputs: { confirmClick: "confirmClick", cancelClick: "cancelClick" }, ngImport: i0, template: "<div class=\"pop-up-confirm-overlay\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"popup-title\">\r\n <div class=\"pop-up-confirm\">\r\n <div class=\"pop-up-confirm-content\">\r\n <img *ngIf=\"imgUrl\" [src]=\"imgUrl\" alt=\"\">\r\n <div class=\"pop-up-confirm-text\">\r\n <p class=\"pop-up-title\" id=\"popup-title\">{{title}}</p>\r\n <p class=\"pop-up-content\">{{content}}</p>\r\n </div>\r\n </div>\r\n <div class=\"pop-up-confirm-actions\">\r\n <app-button-container size=\"md\" content=\"Quay L\u1EA1i\" backgroundColor=\"var(--neutral-100)\" color=\"var(--neutral-800)\" (buttonClick)=\"onCancel()\"></app-button-container>\r\n <app-button-container size=\"md\" content=\"\u0110\u1ED3ng \u00DD\" [backgroundColor]=\"colorButton\" color=\"#fff\" (buttonClick)=\"onConfirm()\"></app-button-container>\r\n </div>\r\n </div>\r\n</div>", styles: [".pop-up-confirm-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--neutral-color-875-rgb, 30, 34, 37),.5);display:flex;justify-content:center;align-items:center;z-index:1000}.pop-up-confirm{background-color:var(--neutral-color-10);border-radius:var(--radius-lg);padding:24px;min-width:320px;max-width:400px;box-shadow:0 4px 20px rgba(var(--neutral-color-875-rgb, 30, 34, 37),.15)}.pop-up-confirm-content{display:flex;gap:16px;align-items:center;justify-content:center;flex-direction:column;margin-bottom:24px;width:352px;height:172px}.pop-up-confirm-content img{width:96px;height:96px;object-fit:contain;flex-shrink:0}.pop-up-confirm-text{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px}.pop-up-title{font-size:var(--font-xl);font-weight:600;color:var(--neutral-color-875);margin:0}.pop-up-content{font-size:var(--font-sm);color:var(--neutral-color-500);margin:0}.pop-up-confirm-actions{display:flex;gap:12px;justify-content:center;align-items:center;padding:16px 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonContainerComponent, selector: "app-button-container", inputs: ["size", "content", "fontSize", "leftIcon", "rightIcon", "color", "backgroundColor", "borderColor"], outputs: ["buttonClick"] }] });
|
|
534
798
|
}
|
|
535
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
799
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PopUpConfirmComponent, decorators: [{
|
|
536
800
|
type: Component,
|
|
537
|
-
args: [{ selector: 'app-pop-up-confirm', standalone: true, imports: [CommonModule, ButtonContainerComponent], template: "<div class=\"pop-up-confirm-overlay\">\r\n <div class=\"pop-up-confirm\">\r\n <div class=\"pop-up-confirm-content\">\r\n <img *ngIf=\"imgUrl\" [src]=\"imgUrl\" alt=\"\">\r\n <div class=\"pop-up-confirm-text\">\r\n <p class=\"pop-up-title\">{{title}}</p>\r\n <p class=\"pop-up-content\">{{content}}</p>\r\n </div>\r\n </div>\r\n <div class=\"pop-up-confirm-actions\">\r\n <app-button-container size=\"md\" content=\"Quay L\u1EA1i\" backgroundColor=\"var(--neutral-100)\" color=\"var(--neutral-800)\" (buttonClick)=\"onCancel()\"></app-button-container>\r\n <app-button-container size=\"md\" content=\"\u0110\u1ED3ng \u00DD\" [backgroundColor]=\"colorButton\" color=\"#fff\" (buttonClick)=\"onConfirm()\"></app-button-container>\r\n </div>\r\n </div>\r\n</div>", styles: [".pop-up-confirm-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--neutral-color-875-rgb, 30, 34, 37),.5);display:flex;justify-content:center;align-items:center;z-index:1000}.pop-up-confirm{background-color:var(--neutral-color-10);border-radius:var(--radius-lg);padding:24px;min-width:320px;max-width:400px;box-shadow:0 4px 20px rgba(var(--neutral-color-875-rgb, 30, 34, 37),.15)}.pop-up-confirm-content{display:flex;gap:16px;align-items:center;justify-content:center;flex-direction:column;margin-bottom:24px;width:352px;height:172px}.pop-up-confirm-content img{width:96px;height:96px;object-fit:contain;flex-shrink:0}.pop-up-confirm-text{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px}.pop-up-title{font-size:var(--font-xl);font-weight:600;color:var(--neutral-color-875);margin:0}.pop-up-content{font-size:var(--font-sm);color:var(--neutral-color-500);margin:0}.pop-up-confirm-actions{display:flex;gap:12px;justify-content:center;align-items:center;padding:16px 8px}\n"] }]
|
|
801
|
+
args: [{ selector: 'app-pop-up-confirm', standalone: true, imports: [CommonModule, ButtonContainerComponent], template: "<div class=\"pop-up-confirm-overlay\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"popup-title\">\r\n <div class=\"pop-up-confirm\">\r\n <div class=\"pop-up-confirm-content\">\r\n <img *ngIf=\"imgUrl\" [src]=\"imgUrl\" alt=\"\">\r\n <div class=\"pop-up-confirm-text\">\r\n <p class=\"pop-up-title\" id=\"popup-title\">{{title}}</p>\r\n <p class=\"pop-up-content\">{{content}}</p>\r\n </div>\r\n </div>\r\n <div class=\"pop-up-confirm-actions\">\r\n <app-button-container size=\"md\" content=\"Quay L\u1EA1i\" backgroundColor=\"var(--neutral-100)\" color=\"var(--neutral-800)\" (buttonClick)=\"onCancel()\"></app-button-container>\r\n <app-button-container size=\"md\" content=\"\u0110\u1ED3ng \u00DD\" [backgroundColor]=\"colorButton\" color=\"#fff\" (buttonClick)=\"onConfirm()\"></app-button-container>\r\n </div>\r\n </div>\r\n</div>", styles: [".pop-up-confirm-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--neutral-color-875-rgb, 30, 34, 37),.5);display:flex;justify-content:center;align-items:center;z-index:1000}.pop-up-confirm{background-color:var(--neutral-color-10);border-radius:var(--radius-lg);padding:24px;min-width:320px;max-width:400px;box-shadow:0 4px 20px rgba(var(--neutral-color-875-rgb, 30, 34, 37),.15)}.pop-up-confirm-content{display:flex;gap:16px;align-items:center;justify-content:center;flex-direction:column;margin-bottom:24px;width:352px;height:172px}.pop-up-confirm-content img{width:96px;height:96px;object-fit:contain;flex-shrink:0}.pop-up-confirm-text{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px}.pop-up-title{font-size:var(--font-xl);font-weight:600;color:var(--neutral-color-875);margin:0}.pop-up-content{font-size:var(--font-sm);color:var(--neutral-color-500);margin:0}.pop-up-confirm-actions{display:flex;gap:12px;justify-content:center;align-items:center;padding:16px 8px}\n"] }]
|
|
538
802
|
}], propDecorators: { imgUrl: [{
|
|
539
803
|
type: Input
|
|
540
804
|
}], title: [{
|
|
@@ -552,10 +816,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
552
816
|
/*
|
|
553
817
|
* Public API Surface of intern-hub-layout
|
|
554
818
|
*/
|
|
819
|
+
// Layout components
|
|
555
820
|
|
|
556
821
|
/**
|
|
557
822
|
* Generated bundle index. Do not edit.
|
|
558
823
|
*/
|
|
559
824
|
|
|
560
|
-
export { ApprovalListComponent, ButtonContainerComponent, HeaderComponent, InputCalendarComponent, InputStepperComponent, InputTextComponent, LabelButtonComponent,
|
|
825
|
+
export { ApprovalListComponent, ApprovalListItemComponent, BUTTON_SIZE_MAP, ButtonContainerComponent, FunctionalLabelComponent, HeaderComponent, IconComponent, InputCalendarComponent, InputStepperComponent, InputTextComponent, LabelButtonComponent, PopUpConfirmComponent, SidebarComponent, TableBodyComponent, TableHeaderComponent };
|
|
561
826
|
//# sourceMappingURL=goat-bravos-intern-hub-layout.mjs.map
|