@goat-bravos/intern-hub-layout 4.0.0 → 4.0.2
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.
|
@@ -2,11 +2,11 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { EventEmitter, Output, Input, Component, ViewChild, ChangeDetectionStrategy, forwardRef } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
-
import * as
|
|
5
|
+
import * as i1$1 from '@angular/router';
|
|
6
6
|
import { RouterModule } from '@angular/router';
|
|
7
|
-
import * as i1$
|
|
7
|
+
import * as i1$2 from '@angular/forms';
|
|
8
8
|
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
9
|
-
import * as i2
|
|
9
|
+
import * as i2 from 'ng-zorro-antd/date-picker';
|
|
10
10
|
import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
|
|
11
11
|
import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
|
|
12
12
|
|
|
@@ -45,10 +45,10 @@ class IconComponent {
|
|
|
45
45
|
this.clicked.emit(event);
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
49
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.
|
|
48
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
49
|
+
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 [style.backgroundColor]=\"backgroundColor\"\r\n [routerLink]=\"iconRouterLink\"\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 }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
|
|
50
50
|
}
|
|
51
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
51
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IconComponent, decorators: [{
|
|
52
52
|
type: Component,
|
|
53
53
|
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 [style.backgroundColor]=\"backgroundColor\"\r\n [routerLink]=\"iconRouterLink\"\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"] }]
|
|
54
54
|
}], propDecorators: { iconData: [{
|
|
@@ -99,12 +99,12 @@ class HeaderComponent {
|
|
|
99
99
|
}
|
|
100
100
|
return icon;
|
|
101
101
|
}
|
|
102
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
103
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
102
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
103
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: HeaderComponent, isStandalone: true, selector: "app-header-component", inputs: { data: "data", paddingHeader: "paddingHeader" }, ngImport: i0, template: "<header class=\"app-header\" [style.padding]=\"paddingHeader\">\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:100%;padding:0 24px;display:flex;align-items:center;justify-content:space-between;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:28px;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:12px 20px 12px 16px;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:12px 20px 12px 16px}.user-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px 12px 16px;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"] }] });
|
|
104
104
|
}
|
|
105
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
105
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
106
106
|
type: Component,
|
|
107
|
-
args: [{ selector: 'app-header-component', standalone: true, imports: [CommonModule, IconComponent], template: "<header
|
|
107
|
+
args: [{ selector: 'app-header-component', standalone: true, imports: [CommonModule, IconComponent], template: "<header class=\"app-header\" [style.padding]=\"paddingHeader\">\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:100%;padding:0 24px;display:flex;align-items:center;justify-content:space-between;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:28px;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:12px 20px 12px 16px;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:12px 20px 12px 16px}.user-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px 12px 16px;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"] }]
|
|
108
108
|
}], propDecorators: { data: [{
|
|
109
109
|
type: Input
|
|
110
110
|
}], paddingHeader: [{
|
|
@@ -114,6 +114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
114
114
|
class FunctionalLabelComponent {
|
|
115
115
|
iconLeft;
|
|
116
116
|
iconRight;
|
|
117
|
+
rightIconTitle = 'Action';
|
|
117
118
|
colorIconLeft;
|
|
118
119
|
colorIconRight;
|
|
119
120
|
widthIconLeft = '20px';
|
|
@@ -125,6 +126,12 @@ class FunctionalLabelComponent {
|
|
|
125
126
|
colorContentHover;
|
|
126
127
|
backgroundColorHover;
|
|
127
128
|
borderRadiusHover;
|
|
129
|
+
isActive = false;
|
|
130
|
+
activeBackgroundColor;
|
|
131
|
+
activeColorContent;
|
|
132
|
+
activeColorIconLeft;
|
|
133
|
+
activeColorIconRight;
|
|
134
|
+
expandedHoverBackgroundColor;
|
|
128
135
|
content;
|
|
129
136
|
fontSizeContent = '14px';
|
|
130
137
|
colorContent;
|
|
@@ -134,17 +141,36 @@ class FunctionalLabelComponent {
|
|
|
134
141
|
borderRadius;
|
|
135
142
|
width;
|
|
136
143
|
height;
|
|
144
|
+
disabled = false;
|
|
145
|
+
disabledColorIconLeft;
|
|
146
|
+
disabledColorContent;
|
|
147
|
+
disabledBackgroundColor;
|
|
137
148
|
routerLink;
|
|
138
149
|
isSidebarExpanded = false;
|
|
139
150
|
clicked = new EventEmitter();
|
|
151
|
+
rightIconClicked = new EventEmitter();
|
|
140
152
|
get currentBackgroundColor() {
|
|
153
|
+
if (this.disabled) {
|
|
154
|
+
return this.disabledBackgroundColor || 'transparent';
|
|
155
|
+
}
|
|
156
|
+
if (this.isActive && this.isSidebarExpanded) {
|
|
157
|
+
return this.activeBackgroundColor || 'var(--brand-300)';
|
|
158
|
+
}
|
|
141
159
|
return this.backgroundColor;
|
|
142
160
|
}
|
|
143
161
|
get currentBorderRadius() {
|
|
144
162
|
return this.borderRadius;
|
|
145
163
|
}
|
|
146
164
|
get currentColorContent() {
|
|
147
|
-
|
|
165
|
+
if (this.disabled) {
|
|
166
|
+
return this.disabledColorContent || 'var(--neutral-color-300)';
|
|
167
|
+
}
|
|
168
|
+
if (this.isActive && this.isSidebarExpanded) {
|
|
169
|
+
return this.activeColorContent || 'var(--brand-500)';
|
|
170
|
+
}
|
|
171
|
+
if (this.colorContent)
|
|
172
|
+
return this.colorContent;
|
|
173
|
+
return this.isSidebarExpanded ? 'var(--neutral-color-500)' : '#ffffff';
|
|
148
174
|
}
|
|
149
175
|
get hasIconLeft() {
|
|
150
176
|
return !!this.iconLeft;
|
|
@@ -155,9 +181,22 @@ class FunctionalLabelComponent {
|
|
|
155
181
|
get iconLeftData() {
|
|
156
182
|
if (!this.iconLeft)
|
|
157
183
|
return undefined;
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
184
|
+
let color = this.colorIconLeft;
|
|
185
|
+
if (this.disabled) {
|
|
186
|
+
color = this.disabledColorIconLeft || 'var(--neutral-color-300)';
|
|
187
|
+
}
|
|
188
|
+
else {
|
|
189
|
+
if (!color) {
|
|
190
|
+
color = this.isSidebarExpanded ? 'var(--brand-600)' : '#ffffff';
|
|
191
|
+
}
|
|
192
|
+
if (this.isActive && this.isSidebarExpanded) {
|
|
193
|
+
color = this.activeColorIconLeft || 'var(--brand-500)';
|
|
194
|
+
}
|
|
195
|
+
else if (this.isSidebarExpanded && this.colorIconLeftHover) {
|
|
196
|
+
// NOTE: hover is handled mostly by css but we have this fallback maybe
|
|
197
|
+
color = this.colorIconLeftHover;
|
|
198
|
+
}
|
|
199
|
+
}
|
|
161
200
|
if (typeof this.iconLeft === 'string') {
|
|
162
201
|
return {
|
|
163
202
|
icon: this.iconLeft,
|
|
@@ -174,9 +213,16 @@ class FunctionalLabelComponent {
|
|
|
174
213
|
get iconRightData() {
|
|
175
214
|
if (!this.iconRight)
|
|
176
215
|
return undefined;
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
216
|
+
let color = this.colorIconRight;
|
|
217
|
+
if (!color) {
|
|
218
|
+
color = this.isSidebarExpanded ? 'var(--neutral-color-500)' : '#ffffff';
|
|
219
|
+
}
|
|
220
|
+
if (this.isActive && this.isSidebarExpanded) {
|
|
221
|
+
color = this.activeColorIconRight || 'var(--brand-500)';
|
|
222
|
+
}
|
|
223
|
+
else if (this.isSidebarExpanded && this.colorIconRightHover) {
|
|
224
|
+
color = this.colorIconRightHover;
|
|
225
|
+
}
|
|
180
226
|
if (typeof this.iconRight === 'string') {
|
|
181
227
|
return {
|
|
182
228
|
icon: this.iconRight,
|
|
@@ -191,21 +237,37 @@ class FunctionalLabelComponent {
|
|
|
191
237
|
};
|
|
192
238
|
}
|
|
193
239
|
handleClick(event) {
|
|
240
|
+
if (this.disabled) {
|
|
241
|
+
event.preventDefault();
|
|
242
|
+
event.stopPropagation();
|
|
243
|
+
return;
|
|
244
|
+
}
|
|
194
245
|
if (!this.routerLink) {
|
|
195
246
|
event.preventDefault();
|
|
196
247
|
this.clicked.emit(event);
|
|
197
248
|
}
|
|
198
249
|
}
|
|
199
|
-
|
|
200
|
-
|
|
250
|
+
handleRightIconClick(event) {
|
|
251
|
+
if (this.disabled) {
|
|
252
|
+
event.preventDefault();
|
|
253
|
+
event.stopPropagation();
|
|
254
|
+
return;
|
|
255
|
+
}
|
|
256
|
+
event.stopPropagation();
|
|
257
|
+
this.rightIconClicked.emit(event);
|
|
258
|
+
}
|
|
259
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FunctionalLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
260
|
+
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", rightIconTitle: "rightIconTitle", colorIconLeft: "colorIconLeft", colorIconRight: "colorIconRight", widthIconLeft: "widthIconLeft", heightIconLeft: "heightIconLeft", widthIconRight: "widthIconRight", heightIconRight: "heightIconRight", colorIconLeftHover: "colorIconLeftHover", colorIconRightHover: "colorIconRightHover", colorContentHover: "colorContentHover", backgroundColorHover: "backgroundColorHover", borderRadiusHover: "borderRadiusHover", isActive: "isActive", activeBackgroundColor: "activeBackgroundColor", activeColorContent: "activeColorContent", activeColorIconLeft: "activeColorIconLeft", activeColorIconRight: "activeColorIconRight", expandedHoverBackgroundColor: "expandedHoverBackgroundColor", content: "content", fontSizeContent: "fontSizeContent", colorContent: "colorContent", widthContent: "widthContent", heightContent: "heightContent", backgroundColor: "backgroundColor", borderRadius: "borderRadius", width: "width", height: "height", disabled: "disabled", disabledColorIconLeft: "disabledColorIconLeft", disabledColorContent: "disabledColorContent", disabledBackgroundColor: "disabledBackgroundColor", routerLink: "routerLink", isSidebarExpanded: "isSidebarExpanded" }, outputs: { clicked: "clicked", rightIconClicked: "rightIconClicked" }, ngImport: i0, template: "<div\r\n class=\"functional-label\"\r\n [class.is-expanded]=\"isSidebarExpanded\"\r\n [class.disabled]=\"disabled\"\r\n (click)=\"handleClick($event)\"\r\n (keydown.enter)=\"handleClick($event)\"\r\n (keydown.space)=\"handleClick($event)\"\r\n [attr.tabindex]=\"disabled ? null : (routerLink ? null : 0)\"\r\n [attr.role]=\"routerLink ? null : 'button'\"\r\n [style.--bg-color]=\"currentBackgroundColor\"\r\n [style.--bg-hover-color]=\"backgroundColorHover || backgroundColor\"\r\n [style.border-radius]=\"currentBorderRadius\"\r\n [style.width]=\"width\"\r\n [style.height]=\"height\"\r\n [style.--content-hover-color]=\"colorContentHover\"\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 ></app-icon>\r\n }\r\n\r\n <a\r\n [routerLink]=\"disabled ? null : routerLink\"\r\n [style.width]=\"widthContent\"\r\n [style.height]=\"heightContent\"\r\n [style.font-size]=\"fontSizeContent\"\r\n [style.--content-color]=\"currentColorContent\"\r\n >\r\n {{ content }}\r\n </a>\r\n\r\n @if (hasIconRight && iconRightData) {\r\n <app-icon\r\n [iconData]=\"iconRightData\"\r\n [width]=\"widthIconRight\"\r\n [height]=\"heightIconRight\"\r\n (click)=\"handleRightIconClick($event)\"\r\n (keydown.enter)=\"handleRightIconClick($event)\"\r\n (keydown.space)=\"handleRightIconClick($event)\"\r\n tabindex=\"0\"\r\n role=\"button\"\r\n [title]=\"rightIconTitle\"\r\n [attr.aria-label]=\"rightIconTitle\"\r\n ></app-icon>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";: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;background-color:var(--bg-color, transparent);transition:background-color .3s ease;border-radius:8px}.functional-label app-icon{display:flex;flex-shrink:0;justify-content:center;width:44px;z-index:5}.functional-label a{white-space:nowrap;text-decoration:none;color:var(--content-color, var(--neutral-color-400));display:flex;justify-content:flex-start;align-items:center;transition:none!important;opacity:0;visibility:hidden}.functional-label.is-expanded{justify-content:flex-start;padding-left:8px}.functional-label.is-expanded a{position:static!important;opacity:1!important;visibility:visible!important;max-width:200px!important;flex:1;text-align:left;background:transparent!important;box-shadow:none!important;padding:0!important;min-width:0!important;pointer-events:auto!important;transform:none!important;transition:opacity .2s ease!important}.functional-label.is-expanded:hover a{transition:none!important;transition-delay:0s!important}.functional-label:not(.is-expanded){position:relative;border-radius:8px;width:100%;justify-content:center}.functional-label:not(.is-expanded) a{position:absolute!important;left:44px!important;top:50%!important;transform:translateY(-50%)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;max-width:400px!important;min-width:220px!important;width:auto!important;height:32px!important;background-color:var(--neutral-color-50)!important;padding:0 16px!important;border-radius:8px!important;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d!important;z-index:1000!important;color:var(--neutral-color-900)!important;font-weight:500!important;transition:none!important}.functional-label:not(.is-expanded) a:after{content:\"\";position:absolute;left:-20px;top:0;width:20px;height:100%;background:transparent}.functional-label:not(.is-expanded) a:before{content:\"\";position:absolute;left:-6px;top:50%;transform:translateY(-50%);border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid var(--neutral-color-50)}.functional-label:not(.is-expanded):hover a{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transition:opacity .15s ease .1s,visibility .15s ease .1s!important}.functional-label.disabled{cursor:not-allowed!important;pointer-events:auto!important}.functional-label.disabled a{cursor:not-allowed!important;pointer-events:none!important}\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"] }] });
|
|
201
261
|
}
|
|
202
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
262
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FunctionalLabelComponent, decorators: [{
|
|
203
263
|
type: Component,
|
|
204
|
-
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.--bg-color]=\"
|
|
264
|
+
args: [{ selector: 'app-functional-label', standalone: true, imports: [CommonModule, RouterModule, IconComponent], template: "<div\r\n class=\"functional-label\"\r\n [class.is-expanded]=\"isSidebarExpanded\"\r\n [class.disabled]=\"disabled\"\r\n (click)=\"handleClick($event)\"\r\n (keydown.enter)=\"handleClick($event)\"\r\n (keydown.space)=\"handleClick($event)\"\r\n [attr.tabindex]=\"disabled ? null : (routerLink ? null : 0)\"\r\n [attr.role]=\"routerLink ? null : 'button'\"\r\n [style.--bg-color]=\"currentBackgroundColor\"\r\n [style.--bg-hover-color]=\"backgroundColorHover || backgroundColor\"\r\n [style.border-radius]=\"currentBorderRadius\"\r\n [style.width]=\"width\"\r\n [style.height]=\"height\"\r\n [style.--content-hover-color]=\"colorContentHover\"\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 ></app-icon>\r\n }\r\n\r\n <a\r\n [routerLink]=\"disabled ? null : routerLink\"\r\n [style.width]=\"widthContent\"\r\n [style.height]=\"heightContent\"\r\n [style.font-size]=\"fontSizeContent\"\r\n [style.--content-color]=\"currentColorContent\"\r\n >\r\n {{ content }}\r\n </a>\r\n\r\n @if (hasIconRight && iconRightData) {\r\n <app-icon\r\n [iconData]=\"iconRightData\"\r\n [width]=\"widthIconRight\"\r\n [height]=\"heightIconRight\"\r\n (click)=\"handleRightIconClick($event)\"\r\n (keydown.enter)=\"handleRightIconClick($event)\"\r\n (keydown.space)=\"handleRightIconClick($event)\"\r\n tabindex=\"0\"\r\n role=\"button\"\r\n [title]=\"rightIconTitle\"\r\n [attr.aria-label]=\"rightIconTitle\"\r\n ></app-icon>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";: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;background-color:var(--bg-color, transparent);transition:background-color .3s ease;border-radius:8px}.functional-label app-icon{display:flex;flex-shrink:0;justify-content:center;width:44px;z-index:5}.functional-label a{white-space:nowrap;text-decoration:none;color:var(--content-color, var(--neutral-color-400));display:flex;justify-content:flex-start;align-items:center;transition:none!important;opacity:0;visibility:hidden}.functional-label.is-expanded{justify-content:flex-start;padding-left:8px}.functional-label.is-expanded a{position:static!important;opacity:1!important;visibility:visible!important;max-width:200px!important;flex:1;text-align:left;background:transparent!important;box-shadow:none!important;padding:0!important;min-width:0!important;pointer-events:auto!important;transform:none!important;transition:opacity .2s ease!important}.functional-label.is-expanded:hover a{transition:none!important;transition-delay:0s!important}.functional-label:not(.is-expanded){position:relative;border-radius:8px;width:100%;justify-content:center}.functional-label:not(.is-expanded) a{position:absolute!important;left:44px!important;top:50%!important;transform:translateY(-50%)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;max-width:400px!important;min-width:220px!important;width:auto!important;height:32px!important;background-color:var(--neutral-color-50)!important;padding:0 16px!important;border-radius:8px!important;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d!important;z-index:1000!important;color:var(--neutral-color-900)!important;font-weight:500!important;transition:none!important}.functional-label:not(.is-expanded) a:after{content:\"\";position:absolute;left:-20px;top:0;width:20px;height:100%;background:transparent}.functional-label:not(.is-expanded) a:before{content:\"\";position:absolute;left:-6px;top:50%;transform:translateY(-50%);border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid var(--neutral-color-50)}.functional-label:not(.is-expanded):hover a{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transition:opacity .15s ease .1s,visibility .15s ease .1s!important}.functional-label.disabled{cursor:not-allowed!important;pointer-events:auto!important}.functional-label.disabled a{cursor:not-allowed!important;pointer-events:none!important}\n"] }]
|
|
205
265
|
}], propDecorators: { iconLeft: [{
|
|
206
266
|
type: Input
|
|
207
267
|
}], iconRight: [{
|
|
208
268
|
type: Input
|
|
269
|
+
}], rightIconTitle: [{
|
|
270
|
+
type: Input
|
|
209
271
|
}], colorIconLeft: [{
|
|
210
272
|
type: Input
|
|
211
273
|
}], colorIconRight: [{
|
|
@@ -228,6 +290,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
228
290
|
type: Input
|
|
229
291
|
}], borderRadiusHover: [{
|
|
230
292
|
type: Input
|
|
293
|
+
}], isActive: [{
|
|
294
|
+
type: Input
|
|
295
|
+
}], activeBackgroundColor: [{
|
|
296
|
+
type: Input
|
|
297
|
+
}], activeColorContent: [{
|
|
298
|
+
type: Input
|
|
299
|
+
}], activeColorIconLeft: [{
|
|
300
|
+
type: Input
|
|
301
|
+
}], activeColorIconRight: [{
|
|
302
|
+
type: Input
|
|
303
|
+
}], expandedHoverBackgroundColor: [{
|
|
304
|
+
type: Input
|
|
231
305
|
}], content: [{
|
|
232
306
|
type: Input
|
|
233
307
|
}], fontSizeContent: [{
|
|
@@ -246,12 +320,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
246
320
|
type: Input
|
|
247
321
|
}], height: [{
|
|
248
322
|
type: Input
|
|
323
|
+
}], disabled: [{
|
|
324
|
+
type: Input
|
|
325
|
+
}], disabledColorIconLeft: [{
|
|
326
|
+
type: Input
|
|
327
|
+
}], disabledColorContent: [{
|
|
328
|
+
type: Input
|
|
329
|
+
}], disabledBackgroundColor: [{
|
|
330
|
+
type: Input
|
|
249
331
|
}], routerLink: [{
|
|
250
332
|
type: Input
|
|
251
333
|
}], isSidebarExpanded: [{
|
|
252
334
|
type: Input
|
|
253
335
|
}], clicked: [{
|
|
254
336
|
type: Output
|
|
337
|
+
}], rightIconClicked: [{
|
|
338
|
+
type: Output
|
|
255
339
|
}] } });
|
|
256
340
|
|
|
257
341
|
const BUTTON_SIZE_MAP = {
|
|
@@ -290,54 +374,49 @@ const BUTTON_SIZE_MAP = {
|
|
|
290
374
|
};
|
|
291
375
|
|
|
292
376
|
class ButtonContainerComponent {
|
|
293
|
-
|
|
377
|
+
buttonData;
|
|
294
378
|
size = 'md';
|
|
295
|
-
get sizeStyle() {
|
|
296
|
-
return this.size
|
|
297
|
-
? BUTTON_SIZE_MAP[this.size]
|
|
298
|
-
: {
|
|
299
|
-
minWidth: 'auto',
|
|
300
|
-
minHeight: 'auto',
|
|
301
|
-
fontSize: 'inherit',
|
|
302
|
-
};
|
|
303
|
-
}
|
|
304
|
-
/* ===== CONTENT ===== */
|
|
305
379
|
content;
|
|
306
380
|
fontSize;
|
|
307
|
-
/* ===== ICON ===== */
|
|
308
381
|
leftIcon;
|
|
309
382
|
leftIconData;
|
|
310
383
|
rightIcon;
|
|
311
384
|
rightIconData;
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
bgHover = 'var(--neutral-color-200)';
|
|
315
|
-
bgDisabled = 'var(--neutral-color-200)';
|
|
316
|
-
colorDefault = 'var(--neutral-color-900)';
|
|
317
|
-
colorHover = 'var(--neutral-color-900)';
|
|
318
|
-
colorDisabled = 'var(--neutral-color-500)';
|
|
319
|
-
/* ===== LAYOUT ===== */
|
|
385
|
+
color;
|
|
386
|
+
backgroundColor;
|
|
320
387
|
border;
|
|
321
388
|
borderRadius = '8px';
|
|
322
389
|
width;
|
|
323
390
|
height = '36px';
|
|
324
391
|
padding;
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
392
|
+
marginLeft;
|
|
393
|
+
marginRight;
|
|
394
|
+
borderColor;
|
|
328
395
|
buttonClick = new EventEmitter();
|
|
396
|
+
get sizeStyle() {
|
|
397
|
+
return this.size
|
|
398
|
+
? BUTTON_SIZE_MAP[this.size]
|
|
399
|
+
: {
|
|
400
|
+
minWidth: 'auto',
|
|
401
|
+
minHeight: 'auto',
|
|
402
|
+
fontSize: 'inherit',
|
|
403
|
+
iconSize: '20px',
|
|
404
|
+
contentWidth: 'auto',
|
|
405
|
+
contentHeight: 'auto',
|
|
406
|
+
};
|
|
407
|
+
}
|
|
329
408
|
handleClick() {
|
|
330
|
-
|
|
331
|
-
this.buttonClick.emit();
|
|
332
|
-
}
|
|
409
|
+
this.buttonClick.emit();
|
|
333
410
|
}
|
|
334
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
335
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
411
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ButtonContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
412
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ButtonContainerComponent, isStandalone: true, selector: "app-button-container", inputs: { buttonData: "buttonData", size: "size", content: "content", fontSize: "fontSize", leftIcon: "leftIcon", leftIconData: "leftIconData", rightIcon: "rightIcon", rightIconData: "rightIconData", color: "color", backgroundColor: "backgroundColor", border: "border", borderRadius: "borderRadius", width: "width", height: "height", padding: "padding", marginLeft: "marginLeft", marginRight: "marginRight", borderColor: "borderColor" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\r\n class=\"button-container\"\r\n [style.minWidth]=\"sizeStyle.minWidth\"\r\n [style.minHeight]=\"sizeStyle.minHeight\"\r\n [style.color]=\"color\"\r\n [style.backgroundColor]=\"backgroundColor\"\r\n [style.border]=\"border\"\r\n [style.borderRadius]=\"borderRadius\"\r\n [style.width]=\"width\"\r\n [style.height]=\"height\"\r\n [style.padding]=\"padding\"\r\n [style.marginLeft]=\"marginLeft\"\r\n [style.marginRight]=\"marginRight\"\r\n [style.borderColor]=\"borderColor\"\r\n (click)=\"handleClick()\"\r\n>\r\n @if (leftIcon || (leftIconData && leftIconData.length > 0)) {\r\n @for (iconData of leftIconData; track iconData) {\r\n <app-icon [iconData]=\"iconData\"></app-icon>\r\n }\r\n @if (leftIcon && (!leftIconData || leftIconData.length === 0)) {\r\n <app-icon [icon]=\"leftIcon\"></app-icon>\r\n }\r\n }\r\n\r\n @if (content) {\r\n <span\r\n class=\"button-content\"\r\n [style.minWidth]=\"sizeStyle.contentWidth\"\r\n [style.minHeight]=\"sizeStyle.contentHeight\"\r\n [style.fontSize]=\"fontSize || sizeStyle.fontSize\"\r\n [style.color]=\"color\"\r\n >\r\n {{ content }}\r\n </span>\r\n }\r\n\r\n @if (rightIcon || (rightIconData && rightIconData.length > 0)) {\r\n @for (iconData of rightIconData; track iconData) {\r\n <app-icon [iconData]=\"iconData\"></app-icon>\r\n }\r\n @if (rightIcon && (!rightIconData || rightIconData.length === 0)) {\r\n <app-icon [icon]=\"rightIcon\"></app-icon>\r\n }\r\n }\r\n</button>\r\n", styles: [".button-container{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 8px;border:1px solid transparent;cursor:pointer;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["iconData", "icon", "colorIcon", "routerLink", "width", "height", "colorIconHover", "backgroundColorHover"], outputs: ["clicked"] }] });
|
|
336
413
|
}
|
|
337
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
414
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ButtonContainerComponent, decorators: [{
|
|
338
415
|
type: Component,
|
|
339
|
-
args: [{ selector: 'app-button-container', standalone: true, imports: [CommonModule, IconComponent], template: "<button\r\n class=\"button-container\"\r\n [
|
|
340
|
-
}], propDecorators: {
|
|
416
|
+
args: [{ selector: 'app-button-container', standalone: true, imports: [CommonModule, IconComponent], template: "<button\r\n class=\"button-container\"\r\n [style.minWidth]=\"sizeStyle.minWidth\"\r\n [style.minHeight]=\"sizeStyle.minHeight\"\r\n [style.color]=\"color\"\r\n [style.backgroundColor]=\"backgroundColor\"\r\n [style.border]=\"border\"\r\n [style.borderRadius]=\"borderRadius\"\r\n [style.width]=\"width\"\r\n [style.height]=\"height\"\r\n [style.padding]=\"padding\"\r\n [style.marginLeft]=\"marginLeft\"\r\n [style.marginRight]=\"marginRight\"\r\n [style.borderColor]=\"borderColor\"\r\n (click)=\"handleClick()\"\r\n>\r\n @if (leftIcon || (leftIconData && leftIconData.length > 0)) {\r\n @for (iconData of leftIconData; track iconData) {\r\n <app-icon [iconData]=\"iconData\"></app-icon>\r\n }\r\n @if (leftIcon && (!leftIconData || leftIconData.length === 0)) {\r\n <app-icon [icon]=\"leftIcon\"></app-icon>\r\n }\r\n }\r\n\r\n @if (content) {\r\n <span\r\n class=\"button-content\"\r\n [style.minWidth]=\"sizeStyle.contentWidth\"\r\n [style.minHeight]=\"sizeStyle.contentHeight\"\r\n [style.fontSize]=\"fontSize || sizeStyle.fontSize\"\r\n [style.color]=\"color\"\r\n >\r\n {{ content }}\r\n </span>\r\n }\r\n\r\n @if (rightIcon || (rightIconData && rightIconData.length > 0)) {\r\n @for (iconData of rightIconData; track iconData) {\r\n <app-icon [iconData]=\"iconData\"></app-icon>\r\n }\r\n @if (rightIcon && (!rightIconData || rightIconData.length === 0)) {\r\n <app-icon [icon]=\"rightIcon\"></app-icon>\r\n }\r\n }\r\n</button>\r\n", styles: [".button-container{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 8px;border:1px solid transparent;cursor:pointer;font-weight:500}\n"] }]
|
|
417
|
+
}], propDecorators: { buttonData: [{
|
|
418
|
+
type: Input
|
|
419
|
+
}], size: [{
|
|
341
420
|
type: Input
|
|
342
421
|
}], content: [{
|
|
343
422
|
type: Input
|
|
@@ -351,17 +430,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
351
430
|
type: Input
|
|
352
431
|
}], rightIconData: [{
|
|
353
432
|
type: Input
|
|
354
|
-
}],
|
|
433
|
+
}], color: [{
|
|
355
434
|
type: Input
|
|
356
|
-
}],
|
|
357
|
-
type: Input
|
|
358
|
-
}], bgDisabled: [{
|
|
359
|
-
type: Input
|
|
360
|
-
}], colorDefault: [{
|
|
361
|
-
type: Input
|
|
362
|
-
}], colorHover: [{
|
|
363
|
-
type: Input
|
|
364
|
-
}], colorDisabled: [{
|
|
435
|
+
}], backgroundColor: [{
|
|
365
436
|
type: Input
|
|
366
437
|
}], border: [{
|
|
367
438
|
type: Input
|
|
@@ -373,7 +444,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
373
444
|
type: Input
|
|
374
445
|
}], padding: [{
|
|
375
446
|
type: Input
|
|
376
|
-
}],
|
|
447
|
+
}], marginLeft: [{
|
|
448
|
+
type: Input
|
|
449
|
+
}], marginRight: [{
|
|
450
|
+
type: Input
|
|
451
|
+
}], borderColor: [{
|
|
377
452
|
type: Input
|
|
378
453
|
}], buttonClick: [{
|
|
379
454
|
type: Output
|
|
@@ -389,19 +464,58 @@ class SidebarComponent {
|
|
|
389
464
|
sidebarToggled = new EventEmitter();
|
|
390
465
|
toggleButtonIconData;
|
|
391
466
|
closeButtonIconData;
|
|
467
|
+
expandedItems = new Set();
|
|
468
|
+
activeItem = null;
|
|
392
469
|
toggleSidebar() {
|
|
393
470
|
this.isSidebarExpanded = !this.isSidebarExpanded;
|
|
394
471
|
this.sidebarToggled.emit(this.isSidebarExpanded);
|
|
472
|
+
if (!this.isSidebarExpanded) {
|
|
473
|
+
this.expandedItems.clear(); // Clear expanded menus when collapsing sidebar
|
|
474
|
+
}
|
|
475
|
+
}
|
|
476
|
+
toggleSubMenu(item, event) {
|
|
477
|
+
event.stopPropagation();
|
|
478
|
+
const wasExpanded = this.expandedItems.has(item);
|
|
479
|
+
this.expandedItems.clear();
|
|
480
|
+
if (!wasExpanded) {
|
|
481
|
+
this.expandedItems.add(item);
|
|
482
|
+
}
|
|
483
|
+
}
|
|
484
|
+
isItemExpanded(item) {
|
|
485
|
+
return this.expandedItems.has(item);
|
|
486
|
+
}
|
|
487
|
+
getRightIcon(item) {
|
|
488
|
+
if (!item.iconRight)
|
|
489
|
+
return undefined;
|
|
490
|
+
const isExpanded = this.isItemExpanded(item);
|
|
491
|
+
// If it's a string identifier
|
|
492
|
+
if (typeof item.iconRight === 'string') {
|
|
493
|
+
return isExpanded
|
|
494
|
+
? item.iconRight.replace('down', 'up')
|
|
495
|
+
: item.iconRight.replace('up', 'down');
|
|
496
|
+
}
|
|
497
|
+
// If it's an IconData object
|
|
498
|
+
if (typeof item.iconRight === 'object' && 'icon' in item.iconRight) {
|
|
499
|
+
const iconName = item.iconRight.icon;
|
|
500
|
+
if (!iconName)
|
|
501
|
+
return item.iconRight;
|
|
502
|
+
return {
|
|
503
|
+
...item.iconRight,
|
|
504
|
+
icon: isExpanded ? iconName.replace('down', 'up') : iconName.replace('up', 'down')
|
|
505
|
+
};
|
|
506
|
+
}
|
|
507
|
+
return item.iconRight;
|
|
395
508
|
}
|
|
396
509
|
onMenuItemClick(item, event) {
|
|
510
|
+
this.activeItem = item;
|
|
397
511
|
console.log('Menu item clicked:', item, event);
|
|
398
512
|
}
|
|
399
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
400
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: SidebarComponent, isStandalone: true, selector: "app-sidebar", inputs: { data: "data", sidebarWidthCollapse: "sidebarWidthCollapse", sidebarWidthExpand: "sidebarWidthExpand", isSidebarExpanded: "isSidebarExpanded", leftIcon: "leftIcon", rightIcon: "rightIcon", toggleButtonIconData: "toggleButtonIconData", closeButtonIconData: "closeButtonIconData" }, outputs: { sidebarToggled: "sidebarToggled" }, ngImport: i0, template: "<div class=\"sidebar-wrapper\" [class.expanded]=\"isSidebarExpanded\">\r\n <div>\r\n <aside class=\"sidebar\">\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 [colorContentHover]=\"item.colorContentHover\"\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\r\n <!-- \u2705 Toggle button - ch\u1EC9 hi\u1EC7n khi KH\u00D4NG expanded -->\r\n @if (!isSidebarExpanded) {\r\n <app-button-container\r\n class=\"sidebar-toggle-button\"\r\n [leftIconData]=\"toggleButtonIconData\"\r\n [bgDefault]=\"data.toggleButtonBackgroundColor || 'transparent'\"\r\n [borderRadius]=\"'8px'\"\r\n [size]=\"'sm'\"\r\n [width]=\"'36px'\"\r\n [height]=\"'36px'\"\r\n (buttonClick)=\"toggleSidebar()\"\r\n ></app-button-container>\r\n }\r\n\r\n <!-- \u2705 Close button - ch\u1EC9 hi\u1EC7n khi expanded -->\r\n @if (isSidebarExpanded) {\r\n <app-button-container\r\n class=\"sidebar-close-button\"\r\n [leftIconData]=\"closeButtonIconData\"\r\n [bgDefault]=\"data.closeButtonBackgroundColor || 'var(--brand-400)'\"\r\n [colorDefault]=\"data.toggleButtonIconColor || 'var(--neutral-500)'\"\r\n [borderRadius]=\"'8px'\"\r\n [size]=\"'sm'\"\r\n (buttonClick)=\"toggleSidebar()\"\r\n [width]=\"'36px'\"\r\n [height]=\"'36px'\"\r\n ></app-button-container>\r\n }\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%}.sidebar-wrapper{width:59px;height:100%;transition:width .3s ease;background-color:transparent;position:relative;display:flex;flex-direction:column;border-radius:16px;overflow:hidden}.sidebar-wrapper.expanded{width:227px}.sidebar-wrapper.expanded .sidebar{width:227px;padding:16px 8px;background-color:var(--theme-neutral-light-100)}.sidebar-wrapper>div{height:100%;display:flex;flex-direction:column;position:relative;background-color:var(--brand-500);border-radius:16px}.sidebar{display:flex;flex-direction:column;gap:8px;flex:1;width:59px;padding:8px;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;background-color:transparent;transition:width .3s ease,padding .3s ease,background-color .3s ease}.sidebar-wrapper.expanded>div{background-color:var(--theme-neutral-light-100)}.sidebar a{text-decoration:none}.sidebar-toggle-button{flex-shrink:0;margin-bottom:16px;margin-left:auto;margin-right:auto}.sidebar-toggle-button ::ng-deep .button-container{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important;padding:0!important;border-radius:8px!important;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.sidebar-toggle-button ::ng-deep .button-container:active{transform:scale(.9)}.sidebar-close-button{flex-shrink:0;margin-bottom:16px}.sidebar-close-button ::ng-deep .button-container{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important;padding:0!important;border-radius:8px!important;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.sidebar-close-button ::ng-deep .button-container:active{transform:scale(.9)}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:var(--neutral-300);border-radius:2px}.sidebar::-webkit-scrollbar-thumb:hover{background:var(--neutral-400)}\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", "fontSizeContent", "colorContent", "widthContent", "heightContent", "backgroundColor", "borderRadius", "width", "height", "routerLink", "isSidebarExpanded"], outputs: ["clicked"] }, { kind: "component", type: ButtonContainerComponent, selector: "app-button-container", inputs: ["size", "content", "fontSize", "leftIcon", "leftIconData", "rightIcon", "rightIconData", "bgDefault", "bgHover", "bgDisabled", "colorDefault", "colorHover", "colorDisabled", "border", "borderRadius", "width", "height", "padding", "disabled"], outputs: ["buttonClick"] }] });
|
|
513
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
514
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: SidebarComponent, isStandalone: true, selector: "app-sidebar", inputs: { data: "data", sidebarWidthCollapse: "sidebarWidthCollapse", sidebarWidthExpand: "sidebarWidthExpand", isSidebarExpanded: "isSidebarExpanded", leftIcon: "leftIcon", rightIcon: "rightIcon", toggleButtonIconData: "toggleButtonIconData", closeButtonIconData: "closeButtonIconData" }, outputs: { sidebarToggled: "sidebarToggled" }, ngImport: i0, template: "<div class=\"sidebar-wrapper\" [class.expanded]=\"isSidebarExpanded\"\r\n [style.--expanded-hover-bg]=\"data.defaultBackgroundColorHoverExpanded || 'var(--neutral-400)'\">\r\n <div [style.background-color]=\"isSidebarExpanded ? (data.backgroundColor || 'var(--neutral-color-50)') : 'var(--brand-500)'\">\r\n <aside class=\"sidebar\">\r\n @for (item of data.menuItems; track $index) {\r\n <div class=\"sidebar-item-container\">\r\n <app-functional-label\r\n class=\"sidebar-item\"\r\n [class.active]=\"activeItem === item || rla.isActive\"\r\n routerLinkActive=\"active\"\r\n #rla=\"routerLinkActive\"\r\n [isActive]=\"activeItem === item || rla.isActive\"\r\n [isSidebarExpanded]=\"isSidebarExpanded\"\r\n [iconLeft]=\"item.iconLeft\"\r\n [iconRight]=\"isSidebarExpanded ? getRightIcon(item) : undefined\"\r\n [content]=\"item.content\"\r\n [routerLink]=\"item.url\"\r\n [colorIconLeft]=\"isSidebarExpanded ? (item.colorIconLeftExpanded || data.defaultColorIconLeftExpanded || item.colorIconLeft || data.defaultColorIconLeft) : (item.colorIconLeft || data.defaultColorIconLeft)\"\r\n [colorIconRight]=\"isSidebarExpanded ? (item.colorIconRightExpanded || data.defaultColorIconRightExpanded || item.colorIconRight) : item.colorIconRight\"\r\n [colorContent]=\"isSidebarExpanded ? (item.colorContentExpanded || data.defaultColorContentExpanded || item.colorContent || data.defaultColorContent) : (item.colorContent || data.defaultColorContent)\"\r\n [colorContentHover]=\"item.colorContentHover || data.defaultColorContentHover\"\r\n [backgroundColor]=\"isSidebarExpanded ? (item.backgroundColorExpanded || data.defaultBackgroundColorExpanded || item.backgroundColor || data.defaultBackgroundColor) : (item.backgroundColor || data.defaultBackgroundColor)\"\r\n [borderRadius]=\"item.borderRadius || data.defaultBorderRadius\"\r\n (clicked)=\"onMenuItemClick(item, $event)\"\r\n (rightIconClicked)=\"toggleSubMenu(item, $event)\"\r\n [colorIconLeftHover]=\"item.colorIconLeftHover || data.defaultColorIconLeftHover\"\r\n [colorIconRightHover]=\"item.colorIconRightHover\"\r\n [disabled]=\"!!item.disabled\"\r\n [disabledColorIconLeft]=\"data.disabledColorIconLeft\"\r\n [disabledColorContent]=\"data.disabledColorContent\"\r\n [disabledBackgroundColor]=\"data.disabledBackgroundColor\"\r\n [activeBackgroundColor]=\"data.activeBackgroundColor || 'var(--brand-300)'\"\r\n [activeColorContent]=\"data.activeColorContent || 'var(--brand-500)'\"\r\n [activeColorIconLeft]=\"data.activeColorIconLeft || 'var(--brand-500)'\"\r\n [backgroundColorHover]=\"item.backgroundColorHover || data.defaultBackgroundColorHover\"\r\n [width]=\"item.width || data.defaultWidth\"\r\n [height]=\"item.height || data.defaultHeight\"\r\n ></app-functional-label>\r\n\r\n <!-- \u2705 Sub Menu -->\r\n @if (isItemExpanded(item) && item.children && isSidebarExpanded) {\r\n <div class=\"sub-menu\">\r\n @for (child of item.children; track child.content) {\r\n <app-functional-label\r\n class=\"sidebar-item sub-item\"\r\n routerLinkActive=\"active\"\r\n #subRla=\"routerLinkActive\"\r\n [isActive]=\"activeItem === child || subRla.isActive\"\r\n [isSidebarExpanded]=\"isSidebarExpanded\"\r\n [iconLeft]=\"child.iconLeft\"\r\n [content]=\"child.content\"\r\n [routerLink]=\"child.url\"\r\n [colorIconLeft]=\"isSidebarExpanded ? (child.colorIconLeftExpanded || data.defaultColorIconLeftExpanded || child.colorIconLeft || data.defaultColorIconLeft) : (child.colorIconLeft || data.defaultColorIconLeft)\"\r\n [colorIconRight]=\"isSidebarExpanded ? (child.colorIconRightExpanded || data.defaultColorIconRightExpanded || child.colorIconRight) : child.colorIconRight\"\r\n [colorContent]=\"isSidebarExpanded ? (child.colorContentExpanded || data.defaultColorContentExpanded || child.colorContent || data.defaultColorContent) : (child.colorContent || data.defaultColorContent)\"\r\n [colorContentHover]=\"child.colorContentHover || data.defaultColorContentHover\"\r\n [backgroundColor]=\"isSidebarExpanded ? (child.backgroundColorExpanded || data.defaultBackgroundColorExpanded || child.backgroundColor || data.defaultBackgroundColor) : (child.backgroundColor || data.defaultBackgroundColor)\"\r\n [borderRadius]=\"child.borderRadius || data.defaultBorderRadius\"\r\n [colorIconLeftHover]=\"child.colorIconLeftHover || data.defaultColorIconLeftHover\"\r\n [disabled]=\"!!child.disabled\"\r\n [disabledColorIconLeft]=\"data.disabledColorIconLeft\"\r\n [disabledColorContent]=\"data.disabledColorContent\"\r\n [disabledBackgroundColor]=\"data.disabledBackgroundColor\"\r\n [activeBackgroundColor]=\"data.activeBackgroundColor\"\r\n [activeColorContent]=\"data.activeColorContent\"\r\n [activeColorIconLeft]=\"data.activeColorIconLeft\"\r\n [backgroundColorHover]=\"child.backgroundColorHover || data.defaultBackgroundColorHover\"\r\n (clicked)=\"onMenuItemClick(child, $event)\"\r\n [width]=\"child.width || data.defaultWidth\"\r\n [height]=\"child.height || data.defaultHeight\"\r\n ></app-functional-label>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </aside>\r\n\r\n <!--Toggle button - ch\u1EC9 hi\u1EC7n khi KH\u00D4NG expanded -->\r\n @if (!isSidebarExpanded) {\r\n <app-button-container\r\n class=\"sidebar-toggle-button\"\r\n [leftIconData]=\"toggleButtonIconData\"\r\n [backgroundColor]=\"data.toggleButtonBackgroundColor || 'transparent'\"\r\n [borderRadius]=\"'8px'\"\r\n [size]=\"'sm'\"\r\n [width]=\"'36px'\"\r\n [height]=\"'36px'\"\r\n (buttonClick)=\"toggleSidebar()\"\r\n ></app-button-container>\r\n }\r\n\r\n <!--Close button - ch\u1EC9 hi\u1EC7n khi expanded -->\r\n @if (isSidebarExpanded) {\r\n <app-button-container\r\n class=\"sidebar-close-button\"\r\n [leftIconData]=\"closeButtonIconData\"\r\n [backgroundColor]=\"\r\n data.closeButtonBackgroundColor || 'var(--brand-400)'\r\n \"\r\n [color]=\"data.toggleButtonIconColor || 'var(--neutral-500)'\"\r\n [borderRadius]=\"'8px'\"\r\n [size]=\"'sm'\"\r\n (buttonClick)=\"toggleSidebar()\"\r\n [width]=\"'36px'\"\r\n [height]=\"'36px'\"\r\n [marginRight]=\"data.closeButtonMarginRight || '24px'\"\r\n [marginLeft]=\"data.closeButtonMarginLeft || 'auto'\"\r\n ></app-button-container>\r\n }\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%}.sidebar-wrapper{width:59px;height:100%;transition:width .3s ease;background-color:transparent;position:relative;display:flex;flex-direction:column;border-radius:16px;overflow:visible!important}.sidebar-wrapper.expanded{width:227px;overflow:hidden}.sidebar-wrapper.expanded .sidebar{width:227px;padding:16px 8px;background-color:transparent;overflow-y:auto}.sidebar-wrapper>div{height:100%;display:flex;flex-direction:column;position:relative;background-color:var(--brand-500);border-radius:16px;overflow:visible!important}.sidebar-item-container{overflow:visible!important;position:relative}.sidebar{display:flex;flex-direction:column;gap:8px;flex:1;width:59px;padding:8px;box-sizing:border-box;overflow:visible;background-color:transparent;transition:width .3s ease,padding .3s ease,background-color .3s ease}.sidebar-wrapper.expanded>div{background-color:var(--neutral-color-50)}.sub-menu{display:flex;flex-direction:column;gap:4px;padding-left:12px;margin-top:4px;transition:all .3s ease}.sub-item ::ng-deep .functional-label{height:36px!important;font-size:13px!important;font-weight:400}.sidebar-item{display:block;border-radius:8px;cursor:pointer;transition:background-color .2s ease;overflow:visible;font-weight:600}.sidebar-item:hover{background-color:#e9edf149!important}.sidebar-wrapper.expanded .sidebar-item:hover{background-color:var(--expanded-hover-bg, var(--neutral-400))!important}.sidebar a{text-decoration:none}.sidebar-toggle-button{flex-shrink:0;margin-bottom:16px;margin-left:auto;margin-right:auto}.sidebar-toggle-button ::ng-deep .button-container{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important;padding:0!important;border-radius:8px!important;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.sidebar-toggle-button ::ng-deep .button-container:active{transform:scale(.9)}.sidebar-close-button{flex-shrink:0;margin-bottom:16px}.sidebar-close-button ::ng-deep .button-container{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important;padding:0!important;border-radius:8px!important;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.sidebar-close-button ::ng-deep .button-container:active{transform:scale(.9)}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:var(--neutral-300);border-radius:2px}.sidebar::-webkit-scrollbar-thumb:hover{background:var(--neutral-400)}\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: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: FunctionalLabelComponent, selector: "app-functional-label", inputs: ["iconLeft", "iconRight", "rightIconTitle", "colorIconLeft", "colorIconRight", "widthIconLeft", "heightIconLeft", "widthIconRight", "heightIconRight", "colorIconLeftHover", "colorIconRightHover", "colorContentHover", "backgroundColorHover", "borderRadiusHover", "isActive", "activeBackgroundColor", "activeColorContent", "activeColorIconLeft", "activeColorIconRight", "expandedHoverBackgroundColor", "content", "fontSizeContent", "colorContent", "widthContent", "heightContent", "backgroundColor", "borderRadius", "width", "height", "disabled", "disabledColorIconLeft", "disabledColorContent", "disabledBackgroundColor", "routerLink", "isSidebarExpanded"], outputs: ["clicked", "rightIconClicked"] }, { kind: "component", type: ButtonContainerComponent, selector: "app-button-container", inputs: ["buttonData", "size", "content", "fontSize", "leftIcon", "leftIconData", "rightIcon", "rightIconData", "color", "backgroundColor", "border", "borderRadius", "width", "height", "padding", "marginLeft", "marginRight", "borderColor"], outputs: ["buttonClick"] }] });
|
|
401
515
|
}
|
|
402
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
516
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
403
517
|
type: Component,
|
|
404
|
-
args: [{ selector: 'app-sidebar', standalone: true, imports: [CommonModule, FunctionalLabelComponent, ButtonContainerComponent], template: "<div class=\"sidebar-wrapper\" [class.expanded]=\"isSidebarExpanded\">\r\n <div>\r\n <aside class=\"sidebar\">\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 [colorContentHover]=\"item.colorContentHover\"\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\r\n <!-- \u2705 Toggle button - ch\u1EC9 hi\u1EC7n khi KH\u00D4NG expanded -->\r\n @if (!isSidebarExpanded) {\r\n <app-button-container\r\n class=\"sidebar-toggle-button\"\r\n [leftIconData]=\"toggleButtonIconData\"\r\n [bgDefault]=\"data.toggleButtonBackgroundColor || 'transparent'\"\r\n [borderRadius]=\"'8px'\"\r\n [size]=\"'sm'\"\r\n [width]=\"'36px'\"\r\n [height]=\"'36px'\"\r\n (buttonClick)=\"toggleSidebar()\"\r\n ></app-button-container>\r\n }\r\n\r\n <!-- \u2705 Close button - ch\u1EC9 hi\u1EC7n khi expanded -->\r\n @if (isSidebarExpanded) {\r\n <app-button-container\r\n class=\"sidebar-close-button\"\r\n [leftIconData]=\"closeButtonIconData\"\r\n [bgDefault]=\"data.closeButtonBackgroundColor || 'var(--brand-400)'\"\r\n [colorDefault]=\"data.toggleButtonIconColor || 'var(--neutral-500)'\"\r\n [borderRadius]=\"'8px'\"\r\n [size]=\"'sm'\"\r\n (buttonClick)=\"toggleSidebar()\"\r\n [width]=\"'36px'\"\r\n [height]=\"'36px'\"\r\n ></app-button-container>\r\n }\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%}.sidebar-wrapper{width:59px;height:100%;transition:width .3s ease;background-color:transparent;position:relative;display:flex;flex-direction:column;border-radius:16px;overflow:hidden}.sidebar-wrapper.expanded{width:227px}.sidebar-wrapper.expanded .sidebar{width:227px;padding:16px 8px;background-color:var(--theme-neutral-light-100)}.sidebar-wrapper>div{height:100%;display:flex;flex-direction:column;position:relative;background-color:var(--brand-500);border-radius:16px}.sidebar{display:flex;flex-direction:column;gap:8px;flex:1;width:59px;padding:8px;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;background-color:transparent;transition:width .3s ease,padding .3s ease,background-color .3s ease}.sidebar-wrapper.expanded>div{background-color:var(--theme-neutral-light-100)}.sidebar a{text-decoration:none}.sidebar-toggle-button{flex-shrink:0;margin-bottom:16px;margin-left:auto;margin-right:auto}.sidebar-toggle-button ::ng-deep .button-container{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important;padding:0!important;border-radius:8px!important;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.sidebar-toggle-button ::ng-deep .button-container:active{transform:scale(.9)}.sidebar-close-button{flex-shrink:0;margin-bottom:16px}.sidebar-close-button ::ng-deep .button-container{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important;padding:0!important;border-radius:8px!important;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.sidebar-close-button ::ng-deep .button-container:active{transform:scale(.9)}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:var(--neutral-300);border-radius:2px}.sidebar::-webkit-scrollbar-thumb:hover{background:var(--neutral-400)}\n"] }]
|
|
518
|
+
args: [{ selector: 'app-sidebar', standalone: true, imports: [CommonModule, RouterModule, FunctionalLabelComponent, ButtonContainerComponent], template: "<div class=\"sidebar-wrapper\" [class.expanded]=\"isSidebarExpanded\"\r\n [style.--expanded-hover-bg]=\"data.defaultBackgroundColorHoverExpanded || 'var(--neutral-400)'\">\r\n <div [style.background-color]=\"isSidebarExpanded ? (data.backgroundColor || 'var(--neutral-color-50)') : 'var(--brand-500)'\">\r\n <aside class=\"sidebar\">\r\n @for (item of data.menuItems; track $index) {\r\n <div class=\"sidebar-item-container\">\r\n <app-functional-label\r\n class=\"sidebar-item\"\r\n [class.active]=\"activeItem === item || rla.isActive\"\r\n routerLinkActive=\"active\"\r\n #rla=\"routerLinkActive\"\r\n [isActive]=\"activeItem === item || rla.isActive\"\r\n [isSidebarExpanded]=\"isSidebarExpanded\"\r\n [iconLeft]=\"item.iconLeft\"\r\n [iconRight]=\"isSidebarExpanded ? getRightIcon(item) : undefined\"\r\n [content]=\"item.content\"\r\n [routerLink]=\"item.url\"\r\n [colorIconLeft]=\"isSidebarExpanded ? (item.colorIconLeftExpanded || data.defaultColorIconLeftExpanded || item.colorIconLeft || data.defaultColorIconLeft) : (item.colorIconLeft || data.defaultColorIconLeft)\"\r\n [colorIconRight]=\"isSidebarExpanded ? (item.colorIconRightExpanded || data.defaultColorIconRightExpanded || item.colorIconRight) : item.colorIconRight\"\r\n [colorContent]=\"isSidebarExpanded ? (item.colorContentExpanded || data.defaultColorContentExpanded || item.colorContent || data.defaultColorContent) : (item.colorContent || data.defaultColorContent)\"\r\n [colorContentHover]=\"item.colorContentHover || data.defaultColorContentHover\"\r\n [backgroundColor]=\"isSidebarExpanded ? (item.backgroundColorExpanded || data.defaultBackgroundColorExpanded || item.backgroundColor || data.defaultBackgroundColor) : (item.backgroundColor || data.defaultBackgroundColor)\"\r\n [borderRadius]=\"item.borderRadius || data.defaultBorderRadius\"\r\n (clicked)=\"onMenuItemClick(item, $event)\"\r\n (rightIconClicked)=\"toggleSubMenu(item, $event)\"\r\n [colorIconLeftHover]=\"item.colorIconLeftHover || data.defaultColorIconLeftHover\"\r\n [colorIconRightHover]=\"item.colorIconRightHover\"\r\n [disabled]=\"!!item.disabled\"\r\n [disabledColorIconLeft]=\"data.disabledColorIconLeft\"\r\n [disabledColorContent]=\"data.disabledColorContent\"\r\n [disabledBackgroundColor]=\"data.disabledBackgroundColor\"\r\n [activeBackgroundColor]=\"data.activeBackgroundColor || 'var(--brand-300)'\"\r\n [activeColorContent]=\"data.activeColorContent || 'var(--brand-500)'\"\r\n [activeColorIconLeft]=\"data.activeColorIconLeft || 'var(--brand-500)'\"\r\n [backgroundColorHover]=\"item.backgroundColorHover || data.defaultBackgroundColorHover\"\r\n [width]=\"item.width || data.defaultWidth\"\r\n [height]=\"item.height || data.defaultHeight\"\r\n ></app-functional-label>\r\n\r\n <!-- \u2705 Sub Menu -->\r\n @if (isItemExpanded(item) && item.children && isSidebarExpanded) {\r\n <div class=\"sub-menu\">\r\n @for (child of item.children; track child.content) {\r\n <app-functional-label\r\n class=\"sidebar-item sub-item\"\r\n routerLinkActive=\"active\"\r\n #subRla=\"routerLinkActive\"\r\n [isActive]=\"activeItem === child || subRla.isActive\"\r\n [isSidebarExpanded]=\"isSidebarExpanded\"\r\n [iconLeft]=\"child.iconLeft\"\r\n [content]=\"child.content\"\r\n [routerLink]=\"child.url\"\r\n [colorIconLeft]=\"isSidebarExpanded ? (child.colorIconLeftExpanded || data.defaultColorIconLeftExpanded || child.colorIconLeft || data.defaultColorIconLeft) : (child.colorIconLeft || data.defaultColorIconLeft)\"\r\n [colorIconRight]=\"isSidebarExpanded ? (child.colorIconRightExpanded || data.defaultColorIconRightExpanded || child.colorIconRight) : child.colorIconRight\"\r\n [colorContent]=\"isSidebarExpanded ? (child.colorContentExpanded || data.defaultColorContentExpanded || child.colorContent || data.defaultColorContent) : (child.colorContent || data.defaultColorContent)\"\r\n [colorContentHover]=\"child.colorContentHover || data.defaultColorContentHover\"\r\n [backgroundColor]=\"isSidebarExpanded ? (child.backgroundColorExpanded || data.defaultBackgroundColorExpanded || child.backgroundColor || data.defaultBackgroundColor) : (child.backgroundColor || data.defaultBackgroundColor)\"\r\n [borderRadius]=\"child.borderRadius || data.defaultBorderRadius\"\r\n [colorIconLeftHover]=\"child.colorIconLeftHover || data.defaultColorIconLeftHover\"\r\n [disabled]=\"!!child.disabled\"\r\n [disabledColorIconLeft]=\"data.disabledColorIconLeft\"\r\n [disabledColorContent]=\"data.disabledColorContent\"\r\n [disabledBackgroundColor]=\"data.disabledBackgroundColor\"\r\n [activeBackgroundColor]=\"data.activeBackgroundColor\"\r\n [activeColorContent]=\"data.activeColorContent\"\r\n [activeColorIconLeft]=\"data.activeColorIconLeft\"\r\n [backgroundColorHover]=\"child.backgroundColorHover || data.defaultBackgroundColorHover\"\r\n (clicked)=\"onMenuItemClick(child, $event)\"\r\n [width]=\"child.width || data.defaultWidth\"\r\n [height]=\"child.height || data.defaultHeight\"\r\n ></app-functional-label>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </aside>\r\n\r\n <!--Toggle button - ch\u1EC9 hi\u1EC7n khi KH\u00D4NG expanded -->\r\n @if (!isSidebarExpanded) {\r\n <app-button-container\r\n class=\"sidebar-toggle-button\"\r\n [leftIconData]=\"toggleButtonIconData\"\r\n [backgroundColor]=\"data.toggleButtonBackgroundColor || 'transparent'\"\r\n [borderRadius]=\"'8px'\"\r\n [size]=\"'sm'\"\r\n [width]=\"'36px'\"\r\n [height]=\"'36px'\"\r\n (buttonClick)=\"toggleSidebar()\"\r\n ></app-button-container>\r\n }\r\n\r\n <!--Close button - ch\u1EC9 hi\u1EC7n khi expanded -->\r\n @if (isSidebarExpanded) {\r\n <app-button-container\r\n class=\"sidebar-close-button\"\r\n [leftIconData]=\"closeButtonIconData\"\r\n [backgroundColor]=\"\r\n data.closeButtonBackgroundColor || 'var(--brand-400)'\r\n \"\r\n [color]=\"data.toggleButtonIconColor || 'var(--neutral-500)'\"\r\n [borderRadius]=\"'8px'\"\r\n [size]=\"'sm'\"\r\n (buttonClick)=\"toggleSidebar()\"\r\n [width]=\"'36px'\"\r\n [height]=\"'36px'\"\r\n [marginRight]=\"data.closeButtonMarginRight || '24px'\"\r\n [marginLeft]=\"data.closeButtonMarginLeft || 'auto'\"\r\n ></app-button-container>\r\n }\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%}.sidebar-wrapper{width:59px;height:100%;transition:width .3s ease;background-color:transparent;position:relative;display:flex;flex-direction:column;border-radius:16px;overflow:visible!important}.sidebar-wrapper.expanded{width:227px;overflow:hidden}.sidebar-wrapper.expanded .sidebar{width:227px;padding:16px 8px;background-color:transparent;overflow-y:auto}.sidebar-wrapper>div{height:100%;display:flex;flex-direction:column;position:relative;background-color:var(--brand-500);border-radius:16px;overflow:visible!important}.sidebar-item-container{overflow:visible!important;position:relative}.sidebar{display:flex;flex-direction:column;gap:8px;flex:1;width:59px;padding:8px;box-sizing:border-box;overflow:visible;background-color:transparent;transition:width .3s ease,padding .3s ease,background-color .3s ease}.sidebar-wrapper.expanded>div{background-color:var(--neutral-color-50)}.sub-menu{display:flex;flex-direction:column;gap:4px;padding-left:12px;margin-top:4px;transition:all .3s ease}.sub-item ::ng-deep .functional-label{height:36px!important;font-size:13px!important;font-weight:400}.sidebar-item{display:block;border-radius:8px;cursor:pointer;transition:background-color .2s ease;overflow:visible;font-weight:600}.sidebar-item:hover{background-color:#e9edf149!important}.sidebar-wrapper.expanded .sidebar-item:hover{background-color:var(--expanded-hover-bg, var(--neutral-400))!important}.sidebar a{text-decoration:none}.sidebar-toggle-button{flex-shrink:0;margin-bottom:16px;margin-left:auto;margin-right:auto}.sidebar-toggle-button ::ng-deep .button-container{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important;padding:0!important;border-radius:8px!important;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.sidebar-toggle-button ::ng-deep .button-container:active{transform:scale(.9)}.sidebar-close-button{flex-shrink:0;margin-bottom:16px}.sidebar-close-button ::ng-deep .button-container{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important;padding:0!important;border-radius:8px!important;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.sidebar-close-button ::ng-deep .button-container:active{transform:scale(.9)}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:var(--neutral-300);border-radius:2px}.sidebar::-webkit-scrollbar-thumb:hover{background:var(--neutral-400)}\n"] }]
|
|
405
519
|
}], propDecorators: { data: [{
|
|
406
520
|
type: Input
|
|
407
521
|
}], sidebarWidthCollapse: [{
|
|
@@ -429,10 +543,10 @@ class LabelButtonComponent {
|
|
|
429
543
|
width = '100%';
|
|
430
544
|
height = '28px';
|
|
431
545
|
textColor = 'var(--neutral-100)';
|
|
432
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
433
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.
|
|
546
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LabelButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
547
|
+
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 }] });
|
|
434
548
|
}
|
|
435
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
549
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LabelButtonComponent, decorators: [{
|
|
436
550
|
type: Component,
|
|
437
551
|
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"] }]
|
|
438
552
|
}], propDecorators: { label: [{
|
|
@@ -475,6 +589,8 @@ class InputTextComponent {
|
|
|
475
589
|
fontWeightLabel = '500';
|
|
476
590
|
colorLabel = 'var(--neutral-color-875)';
|
|
477
591
|
backgroundColor = 'var(--neutral-color-10)';
|
|
592
|
+
borderColor;
|
|
593
|
+
borderColorHover;
|
|
478
594
|
valueChange = new EventEmitter();
|
|
479
595
|
iconClick = new EventEmitter();
|
|
480
596
|
_value = '';
|
|
@@ -497,7 +613,7 @@ class InputTextComponent {
|
|
|
497
613
|
}
|
|
498
614
|
onInput(event) {
|
|
499
615
|
const input = event.target;
|
|
500
|
-
let newValue = input.value;
|
|
616
|
+
let newValue = input.value;
|
|
501
617
|
// Enforce maxLength if set
|
|
502
618
|
if (this.maxLength > 0 && newValue.length > this.maxLength) {
|
|
503
619
|
newValue = newValue.substring(0, this.maxLength);
|
|
@@ -506,12 +622,12 @@ class InputTextComponent {
|
|
|
506
622
|
this._value = newValue;
|
|
507
623
|
this.valueChange.emit(this._value);
|
|
508
624
|
}
|
|
509
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
510
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
625
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
626
|
+
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", widthIcon: "widthIcon", heightIcon: "heightIcon", typeInput: "typeInput", showLabel: "showLabel", placeholderColor: "placeholderColor", border: "border", borderRadius: "borderRadius", padding: "padding", height: "height", fontSizeContent: "fontSizeContent", fontWeightContent: "fontWeightContent", colorContent: "colorContent", fontSizeLabel: "fontSizeLabel", fontWeightLabel: "fontWeightLabel", colorLabel: "colorLabel", backgroundColor: "backgroundColor", borderColor: "borderColor", borderColorHover: "borderColorHover", 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 @if (showLabel) {\r\n <span\r\n class=\"label-text\"\r\n [class.hidden]=\"!headerInput\"\r\n [style.font-size]=\"fontSizeLabel || null\"\r\n [style.font-weight]=\"fontWeightLabel || null\"\r\n [style.color]=\"colorLabel || null\"\r\n >\r\n {{ headerInput }}\r\n @if (required) {\r\n <span class=\"required-mark\">*</span>\r\n }\r\n </span>\r\n }\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 [style.height]=\"height\"\r\n [style.padding]=\"padding\"\r\n [style.border]=\"border || null\"\r\n [style.border-radius]=\"borderRadius\"\r\n [style.background-color]=\"backgroundColor\"\r\n [style.--placeholder-color]=\"placeholderColor || null\"\r\n [style.font-size]=\"fontSizeContent || null\"\r\n [style.font-weight]=\"fontWeightContent || null\"\r\n [style.color]=\"colorContent || null\"\r\n [style.--border-color]=\"borderColor || null\"\r\n [style.--border-color-hover]=\"borderColorHover || null\"\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\r\n [class]=\"icon\"\r\n [style.width]=\"widthIcon\"\r\n [style.height]=\"heightIcon\"\r\n class=\"input-icon\"\r\n ></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{display:none}.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(--border-color, 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(--placeholder-color, var(--neutral-color-300));opacity:1}.input-form-field:hover{border-color:var(--border-color-hover, 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 }] });
|
|
511
627
|
}
|
|
512
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
628
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: InputTextComponent, decorators: [{
|
|
513
629
|
type: Component,
|
|
514
|
-
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 @if (showLabel) {\r\n <span\r\n class=\"label-text\"\r\n [class.hidden]=\"!headerInput\"\r\n [style.font-size]=\"fontSizeLabel || null\"\r\n [style.font-weight]=\"fontWeightLabel || null\"\r\n [style.color]=\"colorLabel || null\"\r\n >\r\n {{ headerInput }}\r\n @if (required) {\r\n <span class=\"required-mark\">*</span>\r\n }\r\n </span>\r\n }\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 [style.height]=\"height\"\r\n [style.padding]=\"padding\"\r\n [style.border]=\"border || null\"\r\n [style.border-radius]=\"borderRadius\"\r\n [style.background-color]=\"backgroundColor\"\r\n [style.--placeholder-color]=\"placeholderColor || null\"\r\n [style.font-size]=\"fontSizeContent || null\"\r\n [style.font-weight]=\"fontWeightContent || null\"\r\n [style.color]=\"colorContent || null\"\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\r\n [class]=\"icon\"\r\n [style.width]=\"widthIcon\"\r\n [style.height]=\"heightIcon\"\r\n class=\"input-icon\"\r\n ></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{display:none}.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(--border-color, 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(--placeholder-color, var(--neutral-color-300));opacity:1}.input-form-field:hover{border-color:var(--border-color-hover, 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"] }]
|
|
630
|
+
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 @if (showLabel) {\r\n <span\r\n class=\"label-text\"\r\n [class.hidden]=\"!headerInput\"\r\n [style.font-size]=\"fontSizeLabel || null\"\r\n [style.font-weight]=\"fontWeightLabel || null\"\r\n [style.color]=\"colorLabel || null\"\r\n >\r\n {{ headerInput }}\r\n @if (required) {\r\n <span class=\"required-mark\">*</span>\r\n }\r\n </span>\r\n }\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 [style.height]=\"height\"\r\n [style.padding]=\"padding\"\r\n [style.border]=\"border || null\"\r\n [style.border-radius]=\"borderRadius\"\r\n [style.background-color]=\"backgroundColor\"\r\n [style.--placeholder-color]=\"placeholderColor || null\"\r\n [style.font-size]=\"fontSizeContent || null\"\r\n [style.font-weight]=\"fontWeightContent || null\"\r\n [style.color]=\"colorContent || null\"\r\n [style.--border-color]=\"borderColor || null\"\r\n [style.--border-color-hover]=\"borderColorHover || null\"\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\r\n [class]=\"icon\"\r\n [style.width]=\"widthIcon\"\r\n [style.height]=\"heightIcon\"\r\n class=\"input-icon\"\r\n ></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{display:none}.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(--border-color, 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(--placeholder-color, var(--neutral-color-300));opacity:1}.input-form-field:hover{border-color:var(--border-color-hover, 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"] }]
|
|
515
631
|
}], propDecorators: { headerInput: [{
|
|
516
632
|
type: Input
|
|
517
633
|
}], placeholder: [{
|
|
@@ -560,6 +676,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
560
676
|
type: Input
|
|
561
677
|
}], backgroundColor: [{
|
|
562
678
|
type: Input
|
|
679
|
+
}], borderColor: [{
|
|
680
|
+
type: Input
|
|
681
|
+
}], borderColorHover: [{
|
|
682
|
+
type: Input
|
|
563
683
|
}], valueChange: [{
|
|
564
684
|
type: Output
|
|
565
685
|
}], iconClick: [{
|
|
@@ -622,10 +742,10 @@ class InputStepperComponent {
|
|
|
622
742
|
this._value = newValue;
|
|
623
743
|
this.valueChange.emit(this._value);
|
|
624
744
|
}
|
|
625
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
626
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
745
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: InputStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
746
|
+
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 }] });
|
|
627
747
|
}
|
|
628
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
748
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: InputStepperComponent, decorators: [{
|
|
629
749
|
type: Component,
|
|
630
750
|
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"] }]
|
|
631
751
|
}], propDecorators: { headerInput: [{
|
|
@@ -692,11 +812,11 @@ class InputCalendarComponent {
|
|
|
692
812
|
const parts = displayDate.split('/');
|
|
693
813
|
if (parts.length !== 3)
|
|
694
814
|
return false;
|
|
695
|
-
const day = parseInt(parts[0], 10);
|
|
696
|
-
const month = parseInt(parts[1], 10);
|
|
697
|
-
const year = parseInt(parts[2], 10);
|
|
815
|
+
const day = Number.parseInt(parts[0], 10);
|
|
816
|
+
const month = Number.parseInt(parts[1], 10);
|
|
817
|
+
const year = Number.parseInt(parts[2], 10);
|
|
698
818
|
// Basic range validation
|
|
699
|
-
if (isNaN(day) || isNaN(month) || isNaN(year))
|
|
819
|
+
if (Number.isNaN(day) || Number.isNaN(month) || Number.isNaN(year))
|
|
700
820
|
return false;
|
|
701
821
|
if (month < 1 || month > 12)
|
|
702
822
|
return false;
|
|
@@ -760,10 +880,10 @@ class InputCalendarComponent {
|
|
|
760
880
|
this.displayValue = this.formatToDisplay(input.value);
|
|
761
881
|
this.valueChange.emit(this._value);
|
|
762
882
|
}
|
|
763
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
764
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
883
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: InputCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
884
|
+
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 }] });
|
|
765
885
|
}
|
|
766
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
886
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: InputCalendarComponent, decorators: [{
|
|
767
887
|
type: Component,
|
|
768
888
|
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"] }]
|
|
769
889
|
}], propDecorators: { headerInput: [{
|
|
@@ -792,10 +912,10 @@ class TableHeaderComponent {
|
|
|
792
912
|
headerIconLeft;
|
|
793
913
|
headerIconRight;
|
|
794
914
|
fontSize = 'var(--font-xs)';
|
|
795
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
796
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
915
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: TableHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
916
|
+
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 }] });
|
|
797
917
|
}
|
|
798
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
918
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: TableHeaderComponent, decorators: [{
|
|
799
919
|
type: Component,
|
|
800
920
|
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"] }]
|
|
801
921
|
}], propDecorators: { columns: [{
|
|
@@ -818,10 +938,10 @@ class TableBodyComponent {
|
|
|
818
938
|
columns = [];
|
|
819
939
|
columnTemplates = {};
|
|
820
940
|
fontSize = 'var(--font-sm)';
|
|
821
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
822
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
941
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: TableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
942
|
+
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"] }] });
|
|
823
943
|
}
|
|
824
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
944
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: TableBodyComponent, decorators: [{
|
|
825
945
|
type: Component,
|
|
826
946
|
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"] }]
|
|
827
947
|
}], propDecorators: { rows: [{
|
|
@@ -842,10 +962,10 @@ class ApprovalListItemComponent {
|
|
|
842
962
|
get parsedDate() {
|
|
843
963
|
return new Date(this.date);
|
|
844
964
|
}
|
|
845
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
846
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.
|
|
965
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApprovalListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
966
|
+
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" }] });
|
|
847
967
|
}
|
|
848
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
968
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApprovalListItemComponent, decorators: [{
|
|
849
969
|
type: Component,
|
|
850
970
|
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"] }]
|
|
851
971
|
}], propDecorators: { name: [{
|
|
@@ -863,10 +983,10 @@ class ApprovalListComponent {
|
|
|
863
983
|
headerContentRight;
|
|
864
984
|
headerContentLeft;
|
|
865
985
|
width;
|
|
866
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
867
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.
|
|
986
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApprovalListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
987
|
+
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"] }] });
|
|
868
988
|
}
|
|
869
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
989
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApprovalListComponent, decorators: [{
|
|
870
990
|
type: Component,
|
|
871
991
|
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"] }]
|
|
872
992
|
}], propDecorators: { rows: [{
|
|
@@ -892,12 +1012,12 @@ class PopUpConfirmComponent {
|
|
|
892
1012
|
onCancel() {
|
|
893
1013
|
this.cancelClick.emit();
|
|
894
1014
|
}
|
|
895
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
896
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.
|
|
1015
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PopUpConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1016
|
+
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: ["buttonData", "size", "content", "fontSize", "leftIcon", "leftIconData", "rightIcon", "rightIconData", "color", "backgroundColor", "border", "borderRadius", "width", "height", "padding", "marginLeft", "marginRight", "borderColor"], outputs: ["buttonClick"] }] });
|
|
897
1017
|
}
|
|
898
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
1018
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PopUpConfirmComponent, decorators: [{
|
|
899
1019
|
type: Component,
|
|
900
|
-
args: [{ selector: 'app-pop-up-confirm', standalone: true, imports: [CommonModule, ButtonContainerComponent], template: "<div
|
|
1020
|
+
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"] }]
|
|
901
1021
|
}], propDecorators: { imgUrl: [{
|
|
902
1022
|
type: Input
|
|
903
1023
|
}], title: [{
|
|
@@ -918,16 +1038,21 @@ class ModalComponent {
|
|
|
918
1038
|
minHeight = '300px';
|
|
919
1039
|
isOpen = false;
|
|
920
1040
|
theme = 'default';
|
|
921
|
-
|
|
1041
|
+
close = new EventEmitter();
|
|
1042
|
+
onOverlayClick(event) {
|
|
1043
|
+
if (event.target === event.currentTarget) {
|
|
1044
|
+
this.close.emit();
|
|
1045
|
+
}
|
|
1046
|
+
}
|
|
922
1047
|
onCloseClick() {
|
|
923
|
-
this.
|
|
1048
|
+
this.close.emit();
|
|
924
1049
|
}
|
|
925
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
926
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.
|
|
1050
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1051
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ModalComponent, isStandalone: true, selector: "app-modal", inputs: { title: "title", width: "width", minHeight: "minHeight", isOpen: "isOpen", theme: "theme" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"modal-overlay\" *ngIf=\"isOpen\" (click)=\"onOverlayClick($event)\">\n <div\n class=\"modal-container\"\n [class.theme-white]=\"theme === 'white'\"\n [style.width]=\"width\"\n [style.min-height]=\"minHeight\"\n >\n <div class=\"modal-header\">\n <span class=\"modal-title\">{{ title }}</span>\n <button class=\"modal-close-btn\" (click)=\"onCloseClick()\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18 6L6 18M6 6L18 18\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n <div class=\"modal-body\">\n <ng-content select=\"[modal-body]\"></ng-content>\n </div>\n <div class=\"modal-footer\">\n <ng-content select=\"[modal-footer]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-container{background-color:var(--brand-100);border-radius:20px;display:flex;flex-direction:column;max-height:90vh;overflow:hidden}.modal-container.theme-white{background-color:var(--neutral-color-10)}.modal-header{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 20px;border-bottom:1px solid var(--neutral-color-300);box-sizing:border-box}.modal-title{font-weight:500;font-size:17px;line-height:24px;letter-spacing:-.3px;color:var(--brand-600)}.theme-white .modal-title{color:#fff}.modal-close-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;cursor:pointer;border-radius:8px;color:var(--neutral-color-500);transition:background-color .2s ease,color .2s ease}.modal-close-btn:hover{background-color:var(--neutral-color-100);color:var(--neutral-color-700)}.modal-body{flex:1;padding:20px;display:flex;flex-direction:column;overflow-y:auto}.modal-body ::ng-deep [modal-body]{display:flex;flex-direction:column;gap:16px}.modal-footer{min-height:56px;padding:0 20px 16px;display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:16px;border-top:1px solid var(--neutral-color-300);box-sizing:border-box}.modal-footer ::ng-deep [modal-footer]{display:flex;flex-direction:row;align-items:center;gap:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
927
1052
|
}
|
|
928
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
1053
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalComponent, decorators: [{
|
|
929
1054
|
type: Component,
|
|
930
|
-
args: [{ selector: 'app-modal', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"modal-overlay\" *ngIf=\"isOpen\"
|
|
1055
|
+
args: [{ selector: 'app-modal', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"modal-overlay\" *ngIf=\"isOpen\" (click)=\"onOverlayClick($event)\">\n <div\n class=\"modal-container\"\n [class.theme-white]=\"theme === 'white'\"\n [style.width]=\"width\"\n [style.min-height]=\"minHeight\"\n >\n <div class=\"modal-header\">\n <span class=\"modal-title\">{{ title }}</span>\n <button class=\"modal-close-btn\" (click)=\"onCloseClick()\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18 6L6 18M6 6L18 18\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n <div class=\"modal-body\">\n <ng-content select=\"[modal-body]\"></ng-content>\n </div>\n <div class=\"modal-footer\">\n <ng-content select=\"[modal-footer]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-container{background-color:var(--brand-100);border-radius:20px;display:flex;flex-direction:column;max-height:90vh;overflow:hidden}.modal-container.theme-white{background-color:var(--neutral-color-10)}.modal-header{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 20px;border-bottom:1px solid var(--neutral-color-300);box-sizing:border-box}.modal-title{font-weight:500;font-size:17px;line-height:24px;letter-spacing:-.3px;color:var(--brand-600)}.theme-white .modal-title{color:#fff}.modal-close-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;cursor:pointer;border-radius:8px;color:var(--neutral-color-500);transition:background-color .2s ease,color .2s ease}.modal-close-btn:hover{background-color:var(--neutral-color-100);color:var(--neutral-color-700)}.modal-body{flex:1;padding:20px;display:flex;flex-direction:column;overflow-y:auto}.modal-body ::ng-deep [modal-body]{display:flex;flex-direction:column;gap:16px}.modal-footer{min-height:56px;padding:0 20px 16px;display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:16px;border-top:1px solid var(--neutral-color-300);box-sizing:border-box}.modal-footer ::ng-deep [modal-footer]{display:flex;flex-direction:row;align-items:center;gap:16px}\n"] }]
|
|
931
1056
|
}], propDecorators: { title: [{
|
|
932
1057
|
type: Input
|
|
933
1058
|
}], width: [{
|
|
@@ -938,7 +1063,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
938
1063
|
type: Input
|
|
939
1064
|
}], theme: [{
|
|
940
1065
|
type: Input
|
|
941
|
-
}],
|
|
1066
|
+
}], close: [{
|
|
942
1067
|
type: Output
|
|
943
1068
|
}] } });
|
|
944
1069
|
|
|
@@ -984,10 +1109,10 @@ class AvatarUploadButtonComponent {
|
|
|
984
1109
|
generateId() {
|
|
985
1110
|
return Math.random().toString(36).substring(2, 9);
|
|
986
1111
|
}
|
|
987
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
988
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.
|
|
1112
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AvatarUploadButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1113
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: AvatarUploadButtonComponent, isStandalone: true, selector: "app-avatar-upload-button", inputs: { label: "label", required: "required", showTooltip: "showTooltip", tooltipText: "tooltipText", buttonText: "buttonText", acceptFormats: "acceptFormats", helperText: "helperText" }, outputs: { fileChange: "fileChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"avatar-upload-wrapper\">\n <div class=\"label-row\" *ngIf=\"label\">\n <span class=\"label-text\">{{ label }}</span>\n <span class=\"required-mark\" *ngIf=\"required\">*</span>\n <button type=\"button\" class=\"tooltip-icon\" *ngIf=\"showTooltip\" [title]=\"tooltipText\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n <path d=\"M8 7V11\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n <circle cx=\"8\" cy=\"5\" r=\"0.75\" fill=\"currentColor\" />\n </svg>\n </button>\n </div>\n\n <button type=\"button\" class=\"upload-button\" (click)=\"onButtonClick()\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10 4V13M10 4L6 8M10 4L14 8\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M3 13V15C3 15.5523 3.44772 16 4 16H16C16.5523 16 17 15.5523 17 15V13\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <span>{{ buttonText }}</span>\n </button>\n\n <input\n #fileInput\n type=\"file\"\n class=\"file-input\"\n [accept]=\"acceptFormats\"\n (change)=\"onFileChange($event)\"\n />\n\n <span class=\"helper-text\" *ngIf=\"helperText && !uploadedFile\">{{ helperText }}</span>\n\n <!-- Uploaded File Preview -->\n <div class=\"file-preview\" *ngIf=\"uploadedFile\">\n <img\n *ngIf=\"uploadedFile.previewUrl\"\n [src]=\"uploadedFile.previewUrl\"\n [alt]=\"uploadedFile.fileName\"\n class=\"preview-image\"\n />\n <span class=\"file-name\">{{ uploadedFile.fileName }}</span>\n <button type=\"button\" class=\"remove-btn\" (click)=\"onRemove()\" title=\"X\u00F3a\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 4L12 12M12 4L4 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n</div>\n", styles: [".avatar-upload-wrapper{display:flex;flex-direction:column;gap:6px}.label-row{display:flex;align-items:center;gap:4px}.label-text{font-size:14px;font-weight:500;line-height:20px;color:var(--neutral-color-700)}.required-mark{font-size:14px;font-weight:500;color:red}.tooltip-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--neutral-color-400);cursor:pointer;transition:color .2s ease}.tooltip-icon:hover{color:var(--neutral-color-600)}.upload-button{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;width:fit-content;min-width:120px;height:40px;background-color:var(--neutral-color-10);border:1px dashed var(--brand-600);border-radius:8px;cursor:pointer;transition:background-color .2s ease,border-color .2s ease;font-size:14px;font-weight:500;line-height:20px;color:var(--brand-600)}.upload-button:hover{background-color:var(--brand-100);border-color:var(--brand-700)}.upload-button:active{background-color:var(--brand-200)}.file-input{display:none}.helper-text{font-size:12px;font-weight:400;line-height:16px;color:var(--neutral-color-500)}.file-preview{display:flex;align-items:center;gap:8px}.preview-image{display:block;width:48px;height:48px;border-radius:4px;object-fit:contain}.file-name{font-size:14px;font-weight:400;line-height:20px;color:var(--neutral-color-700)}.remove-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--neutral-color-500);cursor:pointer;transition:color .2s ease}.remove-btn:hover{color:var(--error-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
989
1114
|
}
|
|
990
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
1115
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AvatarUploadButtonComponent, decorators: [{
|
|
991
1116
|
type: Component,
|
|
992
1117
|
args: [{ selector: 'app-avatar-upload-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"avatar-upload-wrapper\">\n <div class=\"label-row\" *ngIf=\"label\">\n <span class=\"label-text\">{{ label }}</span>\n <span class=\"required-mark\" *ngIf=\"required\">*</span>\n <button type=\"button\" class=\"tooltip-icon\" *ngIf=\"showTooltip\" [title]=\"tooltipText\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n <path d=\"M8 7V11\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n <circle cx=\"8\" cy=\"5\" r=\"0.75\" fill=\"currentColor\" />\n </svg>\n </button>\n </div>\n\n <button type=\"button\" class=\"upload-button\" (click)=\"onButtonClick()\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10 4V13M10 4L6 8M10 4L14 8\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M3 13V15C3 15.5523 3.44772 16 4 16H16C16.5523 16 17 15.5523 17 15V13\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <span>{{ buttonText }}</span>\n </button>\n\n <input\n #fileInput\n type=\"file\"\n class=\"file-input\"\n [accept]=\"acceptFormats\"\n (change)=\"onFileChange($event)\"\n />\n\n <span class=\"helper-text\" *ngIf=\"helperText && !uploadedFile\">{{ helperText }}</span>\n\n <!-- Uploaded File Preview -->\n <div class=\"file-preview\" *ngIf=\"uploadedFile\">\n <img\n *ngIf=\"uploadedFile.previewUrl\"\n [src]=\"uploadedFile.previewUrl\"\n [alt]=\"uploadedFile.fileName\"\n class=\"preview-image\"\n />\n <span class=\"file-name\">{{ uploadedFile.fileName }}</span>\n <button type=\"button\" class=\"remove-btn\" (click)=\"onRemove()\" title=\"X\u00F3a\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 4L12 12M12 4L4 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n</div>\n", styles: [".avatar-upload-wrapper{display:flex;flex-direction:column;gap:6px}.label-row{display:flex;align-items:center;gap:4px}.label-text{font-size:14px;font-weight:500;line-height:20px;color:var(--neutral-color-700)}.required-mark{font-size:14px;font-weight:500;color:red}.tooltip-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--neutral-color-400);cursor:pointer;transition:color .2s ease}.tooltip-icon:hover{color:var(--neutral-color-600)}.upload-button{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;width:fit-content;min-width:120px;height:40px;background-color:var(--neutral-color-10);border:1px dashed var(--brand-600);border-radius:8px;cursor:pointer;transition:background-color .2s ease,border-color .2s ease;font-size:14px;font-weight:500;line-height:20px;color:var(--brand-600)}.upload-button:hover{background-color:var(--brand-100);border-color:var(--brand-700)}.upload-button:active{background-color:var(--brand-200)}.file-input{display:none}.helper-text{font-size:12px;font-weight:400;line-height:16px;color:var(--neutral-color-500)}.file-preview{display:flex;align-items:center;gap:8px}.preview-image{display:block;width:48px;height:48px;border-radius:4px;object-fit:contain}.file-name{font-size:14px;font-weight:400;line-height:20px;color:var(--neutral-color-700)}.remove-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--neutral-color-500);cursor:pointer;transition:color .2s ease}.remove-btn:hover{color:var(--error-500)}\n"] }]
|
|
993
1118
|
}], propDecorators: { label: [{
|
|
@@ -1111,10 +1236,10 @@ class FileUploadDropzoneComponent {
|
|
|
1111
1236
|
const minutes = date.getMinutes().toString().padStart(2, '0');
|
|
1112
1237
|
return `${day}/${month}/${year} ${hours}:${minutes}`;
|
|
1113
1238
|
}
|
|
1114
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1115
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: FileUploadDropzoneComponent, isStandalone: true, selector: "app-file-upload-dropzone", inputs: { label: "label", buttonText: "buttonText", maxSize: "maxSize", acceptFormats: "acceptFormats", helperText: "helperText" }, outputs: { filesChange: "filesChange", fileDownload: "fileDownload", fileDelete: "fileDelete" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"file-upload-dropzone\">\n <label class=\"dropzone-label\">{{ label }}</label>\n\n <div\n class=\"dropzone-area\"\n [class.dragging]=\"isDragging\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n (click)=\"onButtonClick()\"\n >\n <div class=\"dropzone-content\">\n <svg\n class=\"upload-icon\"\n width=\"40\"\n height=\"40\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 16V8M12 8L9 11M12 8L15 11\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M9 22H15C18.866 22 22 18.866 22 15C22 12.0667 20.2333 9.56667 17.6667 8.46667C17.8778 7.98889 18 7.46667 18 6.93333C18 4.41111 15.5778 2.44444 12.8333 3.04444C11.0111 1.15556 8.11111 0.911111 6 2.48889C3.51111 4.35556 3.22222 8.02222 5.11111 10.2444C3.24444 11.2222 2 13.1778 2 15.4444C2 18.9778 5.02222 22 9 22Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n\n <button type=\"button\" class=\"upload-btn\" (click)=\"$event.stopPropagation(); onButtonClick()\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 16V8M12 8L9 11M12 8L15 11\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n {{ buttonText }}\n </button>\n\n <span class=\"helper-text\">{{ displayHelperText }}</span>\n </div>\n </div>\n\n <input\n #fileInput\n type=\"file\"\n [accept]=\"acceptFormats\"\n (change)=\"onFileChange($event)\"\n multiple\n hidden\n />\n\n <!-- Attachment List -->\n <div class=\"attachment-list\" *ngIf=\"uploadedFiles.length > 0\">\n <div class=\"attachment-item\" *ngFor=\"let file of uploadedFiles\">\n <div class=\"file-icon\" [ngClass]=\"getIconType(file)\">\n <ng-container [ngSwitch]=\"getIconType(file)\">\n <svg\n *ngSwitchCase=\"'pdf'\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" fill=\"#FEE2E2\" />\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" stroke=\"#EF4444\" stroke-width=\"1\" />\n <text x=\"12\" y=\"14\" text-anchor=\"middle\" fill=\"#EF4444\" font-size=\"6\" font-weight=\"600\">\n PDF\n </text>\n </svg>\n <svg\n *ngSwitchCase=\"'doc'\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" fill=\"#DBEAFE\" />\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" stroke=\"#3B82F6\" stroke-width=\"1\" />\n <text x=\"12\" y=\"14\" text-anchor=\"middle\" fill=\"#3B82F6\" font-size=\"6\" font-weight=\"600\">\n DOC\n </text>\n </svg>\n <svg\n *ngSwitchCase=\"'xls'\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" fill=\"#D1FAE5\" />\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" stroke=\"#10B981\" stroke-width=\"1\" />\n <text x=\"12\" y=\"14\" text-anchor=\"middle\" fill=\"#10B981\" font-size=\"6\" font-weight=\"600\">\n XLS\n </text>\n </svg>\n <svg\n *ngSwitchCase=\"'image'\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" fill=\"#FEF3C7\" />\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" stroke=\"#F59E0B\" stroke-width=\"1\" />\n <text x=\"12\" y=\"14\" text-anchor=\"middle\" fill=\"#F59E0B\" font-size=\"6\" font-weight=\"600\">\n IMG\n </text>\n </svg>\n <svg\n *ngSwitchDefault\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" fill=\"#F3F4F6\" />\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" stroke=\"#9CA3AF\" stroke-width=\"1\" />\n <text x=\"12\" y=\"14\" text-anchor=\"middle\" fill=\"#9CA3AF\" font-size=\"6\" font-weight=\"600\">\n FILE\n </text>\n </svg>\n </ng-container>\n </div>\n\n <div class=\"file-info\">\n <span class=\"file-name\">{{ file.fileName }}</span>\n <div class=\"file-meta\">\n <span class=\"file-size\">{{ file.fileSize }}</span>\n <span class=\"separator\">\u2022</span>\n <span class=\"file-date\">{{ file.dateTime }}</span>\n </div>\n </div>\n\n <div class=\"file-actions\">\n <button class=\"action-btn download-btn\" (click)=\"onDownload(file)\" title=\"T\u1EA3i xu\u1ED1ng\">\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 3V13M10 13L6 9M10 13L14 9\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M3 15V16C3 16.5523 3.44772 17 4 17H16C16.5523 17 17 16.5523 17 16V15\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <button class=\"action-btn delete-btn\" (click)=\"onDelete(file)\" title=\"X\u00F3a\">\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 5H16M7 5V4C7 3.44772 7.44772 3 8 3H12C12.5523 3 13 3.44772 13 4V5M8 9V14M12 9V14M5 5L6 16C6 16.5523 6.44772 17 7 17H13C13.5523 17 14 16.5523 14 16L15 5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".file-upload-dropzone{display:flex;flex-direction:column;gap:8px;width:100%}.dropzone-label{font-weight:500;font-size:14px;line-height:20px;color:var(--neutral-color-900)}.dropzone-area{display:flex;align-items:center;justify-content:center;min-height:180px;padding:32px 20px;border:1px dashed var(--brand-600);border-radius:8px;background-color:var(--neutral-color-10);cursor:pointer}.dropzone-area.dragging{border-width:2px}.dropzone-content{display:flex;flex-direction:column;align-items:center;gap:12px}.upload-icon{color:var(--brand-600)}.upload-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border:1px solid var(--brand-600);border-radius:6px;background-color:var(--neutral-color-10);color:var(--brand-600);font-weight:500;font-size:14px;line-height:20px;cursor:pointer;transition:all .2s ease}.upload-btn:hover{background-color:var(--brand-100);border-color:var(--brand-700)}.upload-btn svg{flex-shrink:0}.helper-text{font-size:13px;line-height:18px;color:var(--neutral-color-500)}.attachment-list{display:flex;flex-direction:column;gap:8px;margin-top:16px}.attachment-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background-color:var(--neutral-color-10);border:1px solid var(--neutral-color-200);border-radius:8px}.file-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0}.file-icon svg{width:32px;height:40px}.file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.file-name{font-size:14px;font-weight:500;line-height:20px;color:var(--neutral-color-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-meta{display:flex;align-items:center;gap:6px;font-size:12px;line-height:16px;color:var(--neutral-color-500)}.separator{color:var(--neutral-color-400)}.file-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.action-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--neutral-color-200);border-radius:6px;background-color:var(--neutral-color-10);cursor:pointer;transition:all .2s ease}.action-btn.download-btn{color:var(--neutral-color-600)}.action-btn.download-btn:hover{background-color:var(--brand-100);border-color:var(--brand-600);color:var(--brand-600)}.action-btn.delete-btn{color:var(--neutral-color-600)}.action-btn.delete-btn:hover{background-color:var(--error-100);border-color:var(--error-500);color:var(--error-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1239
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FileUploadDropzoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1240
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: FileUploadDropzoneComponent, isStandalone: true, selector: "app-file-upload-dropzone", inputs: { label: "label", buttonText: "buttonText", maxSize: "maxSize", acceptFormats: "acceptFormats", helperText: "helperText" }, outputs: { filesChange: "filesChange", fileDownload: "fileDownload", fileDelete: "fileDelete" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"file-upload-dropzone\">\n <label class=\"dropzone-label\">{{ label }}</label>\n\n <div\n class=\"dropzone-area\"\n [class.dragging]=\"isDragging\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n (click)=\"onButtonClick()\"\n >\n <div class=\"dropzone-content\">\n <svg\n class=\"upload-icon\"\n width=\"40\"\n height=\"40\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 16V8M12 8L9 11M12 8L15 11\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M9 22H15C18.866 22 22 18.866 22 15C22 12.0667 20.2333 9.56667 17.6667 8.46667C17.8778 7.98889 18 7.46667 18 6.93333C18 4.41111 15.5778 2.44444 12.8333 3.04444C11.0111 1.15556 8.11111 0.911111 6 2.48889C3.51111 4.35556 3.22222 8.02222 5.11111 10.2444C3.24444 11.2222 2 13.1778 2 15.4444C2 18.9778 5.02222 22 9 22Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n\n <button type=\"button\" class=\"upload-btn\" (click)=\"$event.stopPropagation(); onButtonClick()\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 16V8M12 8L9 11M12 8L15 11\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n {{ buttonText }}\n </button>\n\n <span class=\"helper-text\">{{ displayHelperText }}</span>\n </div>\n </div>\n\n <input\n #fileInput\n type=\"file\"\n [accept]=\"acceptFormats\"\n (change)=\"onFileChange($event)\"\n multiple\n hidden\n />\n\n <!-- Attachment List -->\n <div class=\"attachment-list\" *ngIf=\"uploadedFiles.length > 0\">\n <div class=\"attachment-item\" *ngFor=\"let file of uploadedFiles\">\n <div class=\"file-icon\" [ngClass]=\"getIconType(file)\">\n <ng-container [ngSwitch]=\"getIconType(file)\">\n <svg\n *ngSwitchCase=\"'pdf'\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" fill=\"#FEE2E2\" />\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" stroke=\"#EF4444\" stroke-width=\"1\" />\n <text x=\"12\" y=\"14\" text-anchor=\"middle\" fill=\"#EF4444\" font-size=\"6\" font-weight=\"600\">\n PDF\n </text>\n </svg>\n <svg\n *ngSwitchCase=\"'doc'\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" fill=\"#DBEAFE\" />\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" stroke=\"#3B82F6\" stroke-width=\"1\" />\n <text x=\"12\" y=\"14\" text-anchor=\"middle\" fill=\"#3B82F6\" font-size=\"6\" font-weight=\"600\">\n DOC\n </text>\n </svg>\n <svg\n *ngSwitchCase=\"'xls'\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" fill=\"#D1FAE5\" />\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" stroke=\"#10B981\" stroke-width=\"1\" />\n <text x=\"12\" y=\"14\" text-anchor=\"middle\" fill=\"#10B981\" font-size=\"6\" font-weight=\"600\">\n XLS\n </text>\n </svg>\n <svg\n *ngSwitchCase=\"'image'\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" fill=\"#FEF3C7\" />\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" stroke=\"#F59E0B\" stroke-width=\"1\" />\n <text x=\"12\" y=\"14\" text-anchor=\"middle\" fill=\"#F59E0B\" font-size=\"6\" font-weight=\"600\">\n IMG\n </text>\n </svg>\n <svg\n *ngSwitchDefault\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" fill=\"#F3F4F6\" />\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" stroke=\"#9CA3AF\" stroke-width=\"1\" />\n <text x=\"12\" y=\"14\" text-anchor=\"middle\" fill=\"#9CA3AF\" font-size=\"6\" font-weight=\"600\">\n FILE\n </text>\n </svg>\n </ng-container>\n </div>\n\n <div class=\"file-info\">\n <span class=\"file-name\">{{ file.fileName }}</span>\n <div class=\"file-meta\">\n <span class=\"file-size\">{{ file.fileSize }}</span>\n <span class=\"separator\">\u2022</span>\n <span class=\"file-date\">{{ file.dateTime }}</span>\n </div>\n </div>\n\n <div class=\"file-actions\">\n <button class=\"action-btn download-btn\" (click)=\"onDownload(file)\" title=\"T\u1EA3i xu\u1ED1ng\">\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 3V13M10 13L6 9M10 13L14 9\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M3 15V16C3 16.5523 3.44772 17 4 17H16C16.5523 17 17 16.5523 17 16V15\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <button class=\"action-btn delete-btn\" (click)=\"onDelete(file)\" title=\"X\u00F3a\">\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 5H16M7 5V4C7 3.44772 7.44772 3 8 3H12C12.5523 3 13 3.44772 13 4V5M8 9V14M12 9V14M5 5L6 16C6 16.5523 6.44772 17 7 17H13C13.5523 17 14 16.5523 14 16L15 5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".file-upload-dropzone{display:flex;flex-direction:column;gap:8px;width:100%}.dropzone-label{font-weight:500;font-size:14px;line-height:20px;color:var(--neutral-color-900)}.dropzone-area{display:flex;align-items:center;justify-content:center;min-height:180px;padding:32px 20px;border:1px dashed var(--brand-600);border-radius:8px;background-color:var(--neutral-color-10);cursor:pointer}.dropzone-area.dragging{border-width:2px}.dropzone-content{display:flex;flex-direction:column;align-items:center;gap:12px}.upload-icon{color:var(--brand-600)}.upload-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border:1px solid var(--brand-600);border-radius:6px;background-color:var(--neutral-color-10);color:var(--brand-600);font-weight:500;font-size:14px;line-height:20px;cursor:pointer;transition:all .2s ease}.upload-btn:hover{background-color:var(--brand-100);border-color:var(--brand-700)}.upload-btn svg{flex-shrink:0}.helper-text{font-size:13px;line-height:18px;color:var(--neutral-color-500)}.attachment-list{display:flex;flex-direction:column;gap:8px;margin-top:16px}.attachment-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background-color:var(--neutral-color-10);border:1px solid var(--neutral-color-200);border-radius:8px}.file-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0}.file-icon svg{width:32px;height:40px}.file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.file-name{font-size:14px;font-weight:500;line-height:20px;color:var(--neutral-color-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-meta{display:flex;align-items:center;gap:6px;font-size:12px;line-height:16px;color:var(--neutral-color-500)}.separator{color:var(--neutral-color-400)}.file-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.action-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--neutral-color-200);border-radius:6px;background-color:var(--neutral-color-10);cursor:pointer;transition:all .2s ease}.action-btn.download-btn{color:var(--neutral-color-600)}.action-btn.download-btn:hover{background-color:var(--brand-100);border-color:var(--brand-600);color:var(--brand-600)}.action-btn.delete-btn{color:var(--neutral-color-600)}.action-btn.delete-btn:hover{background-color:var(--error-100);border-color:var(--error-500);color:var(--error-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1116
1241
|
}
|
|
1117
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
1242
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FileUploadDropzoneComponent, decorators: [{
|
|
1118
1243
|
type: Component,
|
|
1119
1244
|
args: [{ selector: 'app-file-upload-dropzone', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"file-upload-dropzone\">\n <label class=\"dropzone-label\">{{ label }}</label>\n\n <div\n class=\"dropzone-area\"\n [class.dragging]=\"isDragging\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n (click)=\"onButtonClick()\"\n >\n <div class=\"dropzone-content\">\n <svg\n class=\"upload-icon\"\n width=\"40\"\n height=\"40\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 16V8M12 8L9 11M12 8L15 11\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M9 22H15C18.866 22 22 18.866 22 15C22 12.0667 20.2333 9.56667 17.6667 8.46667C17.8778 7.98889 18 7.46667 18 6.93333C18 4.41111 15.5778 2.44444 12.8333 3.04444C11.0111 1.15556 8.11111 0.911111 6 2.48889C3.51111 4.35556 3.22222 8.02222 5.11111 10.2444C3.24444 11.2222 2 13.1778 2 15.4444C2 18.9778 5.02222 22 9 22Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n\n <button type=\"button\" class=\"upload-btn\" (click)=\"$event.stopPropagation(); onButtonClick()\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 16V8M12 8L9 11M12 8L15 11\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n {{ buttonText }}\n </button>\n\n <span class=\"helper-text\">{{ displayHelperText }}</span>\n </div>\n </div>\n\n <input\n #fileInput\n type=\"file\"\n [accept]=\"acceptFormats\"\n (change)=\"onFileChange($event)\"\n multiple\n hidden\n />\n\n <!-- Attachment List -->\n <div class=\"attachment-list\" *ngIf=\"uploadedFiles.length > 0\">\n <div class=\"attachment-item\" *ngFor=\"let file of uploadedFiles\">\n <div class=\"file-icon\" [ngClass]=\"getIconType(file)\">\n <ng-container [ngSwitch]=\"getIconType(file)\">\n <svg\n *ngSwitchCase=\"'pdf'\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" fill=\"#FEE2E2\" />\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" stroke=\"#EF4444\" stroke-width=\"1\" />\n <text x=\"12\" y=\"14\" text-anchor=\"middle\" fill=\"#EF4444\" font-size=\"6\" font-weight=\"600\">\n PDF\n </text>\n </svg>\n <svg\n *ngSwitchCase=\"'doc'\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" fill=\"#DBEAFE\" />\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" stroke=\"#3B82F6\" stroke-width=\"1\" />\n <text x=\"12\" y=\"14\" text-anchor=\"middle\" fill=\"#3B82F6\" font-size=\"6\" font-weight=\"600\">\n DOC\n </text>\n </svg>\n <svg\n *ngSwitchCase=\"'xls'\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" fill=\"#D1FAE5\" />\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" stroke=\"#10B981\" stroke-width=\"1\" />\n <text x=\"12\" y=\"14\" text-anchor=\"middle\" fill=\"#10B981\" font-size=\"6\" font-weight=\"600\">\n XLS\n </text>\n </svg>\n <svg\n *ngSwitchCase=\"'image'\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" fill=\"#FEF3C7\" />\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" stroke=\"#F59E0B\" stroke-width=\"1\" />\n <text x=\"12\" y=\"14\" text-anchor=\"middle\" fill=\"#F59E0B\" font-size=\"6\" font-weight=\"600\">\n IMG\n </text>\n </svg>\n <svg\n *ngSwitchDefault\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" fill=\"#F3F4F6\" />\n <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\" stroke=\"#9CA3AF\" stroke-width=\"1\" />\n <text x=\"12\" y=\"14\" text-anchor=\"middle\" fill=\"#9CA3AF\" font-size=\"6\" font-weight=\"600\">\n FILE\n </text>\n </svg>\n </ng-container>\n </div>\n\n <div class=\"file-info\">\n <span class=\"file-name\">{{ file.fileName }}</span>\n <div class=\"file-meta\">\n <span class=\"file-size\">{{ file.fileSize }}</span>\n <span class=\"separator\">\u2022</span>\n <span class=\"file-date\">{{ file.dateTime }}</span>\n </div>\n </div>\n\n <div class=\"file-actions\">\n <button class=\"action-btn download-btn\" (click)=\"onDownload(file)\" title=\"T\u1EA3i xu\u1ED1ng\">\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 3V13M10 13L6 9M10 13L14 9\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M3 15V16C3 16.5523 3.44772 17 4 17H16C16.5523 17 17 16.5523 17 16V15\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <button class=\"action-btn delete-btn\" (click)=\"onDelete(file)\" title=\"X\u00F3a\">\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 5H16M7 5V4C7 3.44772 7.44772 3 8 3H12C12.5523 3 13 3.44772 13 4V5M8 9V14M12 9V14M5 5L6 16C6 16.5523 6.44772 17 7 17H13C13.5523 17 14 16.5523 14 16L15 5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".file-upload-dropzone{display:flex;flex-direction:column;gap:8px;width:100%}.dropzone-label{font-weight:500;font-size:14px;line-height:20px;color:var(--neutral-color-900)}.dropzone-area{display:flex;align-items:center;justify-content:center;min-height:180px;padding:32px 20px;border:1px dashed var(--brand-600);border-radius:8px;background-color:var(--neutral-color-10);cursor:pointer}.dropzone-area.dragging{border-width:2px}.dropzone-content{display:flex;flex-direction:column;align-items:center;gap:12px}.upload-icon{color:var(--brand-600)}.upload-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border:1px solid var(--brand-600);border-radius:6px;background-color:var(--neutral-color-10);color:var(--brand-600);font-weight:500;font-size:14px;line-height:20px;cursor:pointer;transition:all .2s ease}.upload-btn:hover{background-color:var(--brand-100);border-color:var(--brand-700)}.upload-btn svg{flex-shrink:0}.helper-text{font-size:13px;line-height:18px;color:var(--neutral-color-500)}.attachment-list{display:flex;flex-direction:column;gap:8px;margin-top:16px}.attachment-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background-color:var(--neutral-color-10);border:1px solid var(--neutral-color-200);border-radius:8px}.file-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0}.file-icon svg{width:32px;height:40px}.file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.file-name{font-size:14px;font-weight:500;line-height:20px;color:var(--neutral-color-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-meta{display:flex;align-items:center;gap:6px;font-size:12px;line-height:16px;color:var(--neutral-color-500)}.separator{color:var(--neutral-color-400)}.file-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.action-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--neutral-color-200);border-radius:6px;background-color:var(--neutral-color-10);cursor:pointer;transition:all .2s ease}.action-btn.download-btn{color:var(--neutral-color-600)}.action-btn.download-btn:hover{background-color:var(--brand-100);border-color:var(--brand-600);color:var(--brand-600)}.action-btn.delete-btn{color:var(--neutral-color-600)}.action-btn.delete-btn:hover{background-color:var(--error-100);border-color:var(--error-500);color:var(--error-500)}\n"] }]
|
|
1120
1245
|
}], propDecorators: { label: [{
|
|
@@ -1294,16 +1419,16 @@ class DatePickerComponent {
|
|
|
1294
1419
|
this.onChange(today);
|
|
1295
1420
|
}
|
|
1296
1421
|
}
|
|
1297
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1298
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
1422
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1423
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: DatePickerComponent, isStandalone: true, selector: "app-date-picker", inputs: { mode: "mode", showTime: "showTime", isRange: "isRange", rangeMode: "rangeMode", placeholder: "placeholder", rangePlaceholder: "rangePlaceholder", format: "format", disabled: "disabled", allowClear: "allowClear", size: "size", bordered: "bordered", inline: "inline", popupClassName: "popupClassName", dropdownPosition: "dropdownPosition", disabledDate: "disabledDate" }, outputs: { dateChange: "dateChange", rangeChange: "rangeChange", openChange: "openChange", ok: "ok", panelChange: "panelChange" }, providers: [
|
|
1299
1424
|
{
|
|
1300
1425
|
provide: NG_VALUE_ACCESSOR,
|
|
1301
1426
|
useExisting: forwardRef(() => DatePickerComponent),
|
|
1302
1427
|
multi: true,
|
|
1303
1428
|
},
|
|
1304
|
-
], ngImport: i0, template: "<!-- Single Date Picker -->\r\n@if (!isRange && !inline) {\r\n <nz-date-picker\r\n [nzMode]=\"mode\"\r\n [(ngModel)]=\"selectedDate\"\r\n [nzFormat]=\"fullFormat\"\r\n [nzShowTime]=\"showTime\"\r\n [nzPlaceHolder]=\"placeholder\"\r\n [nzDisabled]=\"disabled\"\r\n [nzAllowClear]=\"allowClear\"\r\n [nzSize]=\"size\"\r\n [nzVariant]=\"bordered ? 'outlined' : 'borderless'\"\r\n [nzDropdownClassName]=\"popupClassName\"\r\n [nzPlacement]=\"dropdownPosition\"\r\n [nzDisabledDate]=\"disabledDate\"\r\n inputWidth=\"40px\"\r\n (ngModelChange)=\"onDateChange($event)\"\r\n (nzOnOpenChange)=\"onOpenChange($event)\"\r\n (nzOnOk)=\"onOk($event)\"\r\n (nzOnPanelChange)=\"onPanelChange($event)\"\r\n class=\"date-picker\"\r\n ></nz-date-picker>\r\n}\r\n\r\n<!-- Inline Single Date Picker -->\r\n@if (!isRange && inline) {\r\n <nz-date-picker\r\n [nzMode]=\"mode\"\r\n [(ngModel)]=\"selectedDate\"\r\n [nzFormat]=\"fullFormat\"\r\n [nzShowTime]=\"showTime\"\r\n [nzDisabled]=\"disabled\"\r\n [nzDisabledDate]=\"disabledDate\"\r\n [nzInline]=\"true\"\r\n (ngModelChange)=\"onDateChange($event)\"\r\n (nzOnOk)=\"onOk($event)\"\r\n (nzOnPanelChange)=\"onPanelChange($event)\"\r\n class=\"date-picker date-picker--inline\"\r\n ></nz-date-picker>\r\n}\r\n\r\n<!-- Range Date Picker -->\r\n@if (isRange && !inline) {\r\n <nz-range-picker\r\n [nzMode]=\"rangeMode\"\r\n [(ngModel)]=\"selectedRange\"\r\n [nzFormat]=\"fullFormat\"\r\n [nzShowTime]=\"showTime\"\r\n [nzPlaceHolder]=\"rangePlaceholder\"\r\n [nzDisabled]=\"disabled\"\r\n [nzAllowClear]=\"allowClear\"\r\n [nzSize]=\"size\"\r\n [nzVariant]=\"bordered ? 'outlined' : 'borderless'\"\r\n [nzDropdownClassName]=\"popupClassName\"\r\n [nzPlacement]=\"dropdownPosition\"\r\n [nzDisabledDate]=\"disabledDate\"\r\n (ngModelChange)=\"onRangeChange($event)\"\r\n (nzOnOpenChange)=\"onOpenChange($event)\"\r\n (nzOnOk)=\"onOk($event)\"\r\n (nzOnPanelChange)=\"onPanelChange($event)\"\r\n class=\"date-picker date-picker--range\"\r\n ></nz-range-picker>\r\n}\r\n\r\n<!-- Inline Range Date Picker -->\r\n@if (isRange && inline) {\r\n <nz-range-picker\r\n [nzMode]=\"rangeMode\"\r\n [(ngModel)]=\"selectedRange\"\r\n [nzFormat]=\"fullFormat\"\r\n [nzShowTime]=\"showTime\"\r\n [nzDisabled]=\"disabled\"\r\n [nzDisabledDate]=\"disabledDate\"\r\n [nzInline]=\"true\"\r\n (ngModelChange)=\"onRangeChange($event)\"\r\n (nzOnOk)=\"onOk($event)\"\r\n (nzOnPanelChange)=\"onPanelChange($event)\"\r\n class=\"date-picker date-picker--range date-picker--inline\"\r\n ></nz-range-picker>\r\n}\r\n", styles: [":host{--date-picker-primary-color: var(--brand-500);--date-picker-primary-hover: var(--brand-400);--date-picker-border-color: var(--neutral-color-200);--date-picker-border-radius: 8px;--date-picker-text-color: var(--neutral-color-800);--date-picker-bg-color: var(--neutral-color-50);--date-picker-disabled-color: var(--neutral-color-400);--date-picker-hover-bg: var(--neutral-color-100);--date-picker-selected-bg: var(--brand-100);--date-picker-today-border: var(--brand-500)}:host .ant-picker:hover,:host .ant-picker-focused{border:1px solid var(--brand-600)!important;border-radius:8px;cursor:pointer}.date-picker{width:100%}.date-picker ::ng-deep .ant-picker{width:100%;background-color:var(--date-picker-bg-color)}.date-picker ::ng-deep .ant-picker:hover{border-color:var(--brand-600)}.date-picker ::ng-deep .ant-picker:focus,.date-picker ::ng-deep .ant-picker.ant-picker-focused{border-color:var(--brand-500);box-shadow:0 0 0 2px #5078ff33}.date-picker ::ng-deep .ant-picker input{color:var(--date-picker-text-color)}.date-picker ::ng-deep .ant-picker input::placeholder{color:var(--date-picker-disabled-color)}.date-picker ::ng-deep .ant-picker-large{border-radius:calc(var(--date-picker-border-radius) + 2px)}.date-picker ::ng-deep .ant-picker-large input{font-size:16px}.date-picker ::ng-deep .ant-picker-small{border-radius:calc(var(--date-picker-border-radius) - 2px)}.date-picker ::ng-deep .ant-picker-small input{font-size:12px}.date-picker ::ng-deep .ant-picker-disabled{background-color:var(--date-picker-hover-bg);cursor:not-allowed}.date-picker ::ng-deep .ant-picker-disabled input{color:var(--date-picker-disabled-color)}.date-picker ::ng-deep .ant-picker-borderless{border:none;box-shadow:none}.date-picker ::ng-deep .ant-picker-borderless:focus,.date-picker ::ng-deep .ant-picker-borderless.ant-picker-focused{box-shadow:none}.date-picker--range ::ng-deep .ant-picker-range .ant-picker-separator{color:var(--brand-500)}.date-picker--range ::ng-deep .ant-picker-range .ant-picker-active-bar{background-color:var(--brand-500)}.date-picker--inline ::ng-deep .ant-picker{border:1px solid var(--date-picker-border-color);border-radius:var(--date-picker-border-radius);box-shadow:0 4px 20px #0000001a;padding:16px}.date-picker--inline ::ng-deep .ant-picker-panel-container{box-shadow:none}::ng-deep .ant-picker-dropdown .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-today):not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end) .ant-picker-cell-inner{background-color:var(--neutral-color-100)!important;border-radius:8px}::ng-deep .ant-picker-dropdown .ant-picker-cell-today:not(.ant-picker-cell-selected):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{background-color:#fff!important;border:1px solid var(--brand-500)!important;color:var(--brand-500)!important;border-radius:8px}::ng-deep .ant-picker-dropdown .ant-picker-cell-selected:not(.ant-picker-cell-today) .ant-picker-cell-inner{background-color:var(--brand-500)!important;color:#fff!important;border:none!important;border-radius:8px}::ng-deep .ant-picker-dropdown .ant-picker-cell-today.ant-picker-cell-selected .ant-picker-cell-inner{background-color:var(--brand-500)!important;color:#fff!important;border:none!important;border-radius:8px}::ng-deep .ant-picker-dropdown .ant-picker-cell-in-range:not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover):not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{background-color:var(--brand-500)!important;color:#fff!important;border-radius:0!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-start:not(.ant-picker-cell-range-end):not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{border-radius:8px 0 0 8px!important;background-color:var(--brand-500)!important;color:#fff!important;border:none!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-end:not(.ant-picker-cell-range-start):not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{border-radius:0 8px 8px 0!important;background-color:var(--brand-500)!important;color:#fff!important;border:none!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-start.ant-picker-cell-range-end:not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{border-radius:8px!important;background-color:var(--brand-500)!important;color:#fff!important;border:none!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell .ant-picker-cell-inner{background-color:var(--neutral-color-400)!important;color:var(--neutral-color-800)!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell:first-child .ant-picker-cell-inner{border-radius:8px 0 0 8px!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell:last-child .ant-picker-cell-inner{border-radius:0 8px 8px 0!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell:hover .ant-picker-cell-inner{background-color:var(--neutral-color-400)!important;color:var(--neutral-color-800)!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-in-range.ant-picker-cell-week .ant-picker-cell-inner{background-color:var(--neutral-color-400)!important;color:var(--neutral-color-800)!important;border-radius:0!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-hover:not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{background-color:var(--neutral-color-200)!important;border-radius:0!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-hover-start:not(.ant-picker-cell-range-hover-end):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{border-radius:8px 0 0 8px!important;background-color:var(--neutral-color-200)!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-hover-end:not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{border-radius:0 8px 8px 0!important;background-color:var(--neutral-color-200)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i2$1.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzInline", "nzAllowClear", "nzAutoFocus", "nzDisabled", "nzInputReadOnly", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzVariant", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "directive", type: i2$1.NzRangePickerComponent, selector: "nz-range-picker", exportAs: ["nzRangePicker"] }, { kind: "ngmodule", type: NzTimePickerModule }] });
|
|
1429
|
+
], ngImport: i0, template: "<!-- Single Date Picker -->\r\n@if (!isRange && !inline) {\r\n <nz-date-picker\r\n [nzMode]=\"mode\"\r\n [(ngModel)]=\"selectedDate\"\r\n [nzFormat]=\"fullFormat\"\r\n [nzShowTime]=\"showTime\"\r\n [nzPlaceHolder]=\"placeholder\"\r\n [nzDisabled]=\"disabled\"\r\n [nzAllowClear]=\"allowClear\"\r\n [nzSize]=\"size\"\r\n [nzVariant]=\"bordered ? 'outlined' : 'borderless'\"\r\n [nzDropdownClassName]=\"popupClassName\"\r\n [nzPlacement]=\"dropdownPosition\"\r\n [nzDisabledDate]=\"disabledDate\"\r\n inputWidth=\"40px\"\r\n (ngModelChange)=\"onDateChange($event)\"\r\n (nzOnOpenChange)=\"onOpenChange($event)\"\r\n (nzOnOk)=\"onOk($event)\"\r\n (nzOnPanelChange)=\"onPanelChange($event)\"\r\n class=\"date-picker\"\r\n ></nz-date-picker>\r\n}\r\n\r\n<!-- Inline Single Date Picker -->\r\n@if (!isRange && inline) {\r\n <nz-date-picker\r\n [nzMode]=\"mode\"\r\n [(ngModel)]=\"selectedDate\"\r\n [nzFormat]=\"fullFormat\"\r\n [nzShowTime]=\"showTime\"\r\n [nzDisabled]=\"disabled\"\r\n [nzDisabledDate]=\"disabledDate\"\r\n [nzInline]=\"true\"\r\n (ngModelChange)=\"onDateChange($event)\"\r\n (nzOnOk)=\"onOk($event)\"\r\n (nzOnPanelChange)=\"onPanelChange($event)\"\r\n class=\"date-picker date-picker--inline\"\r\n ></nz-date-picker>\r\n}\r\n\r\n<!-- Range Date Picker -->\r\n@if (isRange && !inline) {\r\n <nz-range-picker\r\n [nzMode]=\"rangeMode\"\r\n [(ngModel)]=\"selectedRange\"\r\n [nzFormat]=\"fullFormat\"\r\n [nzShowTime]=\"showTime\"\r\n [nzPlaceHolder]=\"rangePlaceholder\"\r\n [nzDisabled]=\"disabled\"\r\n [nzAllowClear]=\"allowClear\"\r\n [nzSize]=\"size\"\r\n [nzVariant]=\"bordered ? 'outlined' : 'borderless'\"\r\n [nzDropdownClassName]=\"popupClassName\"\r\n [nzPlacement]=\"dropdownPosition\"\r\n [nzDisabledDate]=\"disabledDate\"\r\n (ngModelChange)=\"onRangeChange($event)\"\r\n (nzOnOpenChange)=\"onOpenChange($event)\"\r\n (nzOnOk)=\"onOk($event)\"\r\n (nzOnPanelChange)=\"onPanelChange($event)\"\r\n class=\"date-picker date-picker--range\"\r\n ></nz-range-picker>\r\n}\r\n\r\n<!-- Inline Range Date Picker -->\r\n@if (isRange && inline) {\r\n <nz-range-picker\r\n [nzMode]=\"rangeMode\"\r\n [(ngModel)]=\"selectedRange\"\r\n [nzFormat]=\"fullFormat\"\r\n [nzShowTime]=\"showTime\"\r\n [nzDisabled]=\"disabled\"\r\n [nzDisabledDate]=\"disabledDate\"\r\n [nzInline]=\"true\"\r\n (ngModelChange)=\"onRangeChange($event)\"\r\n (nzOnOk)=\"onOk($event)\"\r\n (nzOnPanelChange)=\"onPanelChange($event)\"\r\n class=\"date-picker date-picker--range date-picker--inline\"\r\n ></nz-range-picker>\r\n}\r\n", styles: [":host{display:block;--date-picker-primary-color: var(--brand-500);--date-picker-primary-hover: var(--brand-600);--date-picker-border-color: var(--neutral-color-200);--date-picker-border-radius: 8px;--date-picker-text-color: var(--neutral-color-800);--date-picker-bg-color: var(--neutral-color-50);--date-picker-disabled-color: var(--neutral-color-400);--date-picker-hover-bg: var(--neutral-color-200);--date-picker-today-color: var(--brand-500)}:host .ant-picker{border:1px solid var(--neutral-color-200)!important;border-radius:8px;cursor:pointer}:host .ant-picker:hover,:host .ant-picker-focused{border:1px solid var(--date-picker-primary-color)!important;cursor:pointer}.date-picker{width:100%}.date-picker ::ng-deep .ant-picker{width:100%;background-color:var(--date-picker-bg-color)}.date-picker ::ng-deep .ant-picker:hover{border-color:var(--date-picker-primary-color)}.date-picker ::ng-deep .ant-picker:focus,.date-picker ::ng-deep .ant-picker.ant-picker-focused{border-color:var(--date-picker-primary-color)}.date-picker ::ng-deep .ant-picker input{color:var(--date-picker-text-color)}.date-picker ::ng-deep .ant-picker input::placeholder{color:var(--date-picker-disabled-color)}.date-picker ::ng-deep .ant-picker .ant-picker-suffix{color:var(--date-picker-primary-color)}.date-picker ::ng-deep .ant-picker .ant-picker-clear{background-color:var(--date-picker-bg-color)}.date-picker ::ng-deep .ant-picker .ant-picker-clear:hover{color:var(--date-picker-primary-hover)}.date-picker ::ng-deep .ant-picker-large{border-radius:calc(var(--date-picker-border-radius) + 2px)}.date-picker ::ng-deep .ant-picker-large input{font-size:16px}.date-picker ::ng-deep .ant-picker-small{border-radius:calc(var(--date-picker-border-radius) - 2px)}.date-picker ::ng-deep .ant-picker-small input{font-size:12px}.date-picker ::ng-deep .ant-picker-disabled{background-color:var(--date-picker-hover-bg);cursor:not-allowed}.date-picker ::ng-deep .ant-picker-disabled input{color:var(--date-picker-disabled-color)}.date-picker ::ng-deep .ant-picker-borderless{border:none;box-shadow:none}.date-picker ::ng-deep .ant-picker-borderless:focus,.date-picker ::ng-deep .ant-picker-borderless.ant-picker-focused{box-shadow:none}.date-picker--range ::ng-deep .ant-picker-range .ant-picker-separator{color:var(--date-picker-primary-color)}.date-picker--range ::ng-deep .ant-picker-range .ant-picker-active-bar{background-color:var(--date-picker-primary-color)}.date-picker--inline ::ng-deep .ant-picker{border:1px solid var(--date-picker-border-color);border-radius:var(--date-picker-border-radius);padding:16px}.date-picker--inline ::ng-deep .ant-picker-panel-container{box-shadow:none}::ng-deep .ant-picker-dropdown{--date-picker-primary-color: var(--brand-500);--date-picker-primary-hover: var(--brand-600);--date-picker-border-color: var(--neutral-color-200);--date-picker-border-radius: 8px;--date-picker-text-color: var(--neutral-color-800);--date-picker-bg-color: var(--neutral-color-50);--date-picker-disabled-color: var(--neutral-color-400);--date-picker-hover-bg: var(--neutral-color-400);--date-picker-today-color: var(--brand-500)}::ng-deep .ant-picker-dropdown .ant-picker-panel-container{border-radius:12px}::ng-deep .ant-picker-dropdown .ant-picker-header-super-prev-btn,::ng-deep .ant-picker-dropdown .ant-picker-header-super-next-btn{display:none!important}::ng-deep .ant-picker-dropdown .ant-picker-header button{color:var(--neutral-color-600)}::ng-deep .ant-picker-dropdown .ant-picker-header button:hover{color:var(--date-picker-primary-color)}::ng-deep .ant-picker-dropdown .ant-picker-cell:before,::ng-deep .ant-picker-dropdown .ant-picker-cell-inner:before{display:none!important}::ng-deep .ant-picker-dropdown .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-today):not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end) .ant-picker-cell-inner{background-color:var(--neutral-color-200)!important;color:var(--neutral-color-50)!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-today:not(.ant-picker-cell-selected):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{background-color:transparent!important;border:transparent!important;color:var(--theme-blue-600)!important;font-weight:600}::ng-deep .ant-picker-dropdown .ant-picker-cell-selected .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-50)!important;border:none!important;border-radius:8px!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-today.ant-picker-cell-selected .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-50)!important;border:none!important;border-radius:8px!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-in-range:not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover):not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border-radius:0!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-start:not(.ant-picker-cell-range-end):not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{border-radius:8px 0 0 8px!important;background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border:none!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-end:not(.ant-picker-cell-range-start):not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{border-radius:0 8px 8px 0!important;background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border:none!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-start.ant-picker-cell-range-end:not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{border-radius:8px!important;background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border:none!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell:first-child .ant-picker-cell-inner{border-radius:8px 0 0 8px!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell:last-child .ant-picker-cell-inner{border-radius:0 8px 8px 0!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell:hover .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-in-range.ant-picker-cell-week .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border-radius:0!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-hover:not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{background-color:var(--neutral-color-400)!important;color:var(--neutral-color-10)!important;border-radius:0!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-hover-start:not(.ant-picker-cell-range-hover-end):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{border-radius:8px 0 0 8px!important;background-color:var(--neutral-color-400)!important;color:var(--neutral-color-10)!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-hover-end:not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{border-radius:0 8px 8px 0!important;background-color:var(--neutral-color-400)!important;color:var(--neutral-color-10)!important}::ng-deep .ant-picker-dropdown .ant-picker-year-panel .ant-picker-cell-inner,::ng-deep .ant-picker-dropdown .ant-picker-month-panel .ant-picker-cell-inner{padding:0 8px;min-width:60px;border-radius:8px!important}::ng-deep .ant-picker-dropdown .ant-picker-time-panel-column>li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner{background:var(--neutral-color-400);color:var(--neutral-color-10);font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i2.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzInline", "nzAllowClear", "nzAutoFocus", "nzDisabled", "nzInputReadOnly", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzVariant", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "directive", type: i2.NzRangePickerComponent, selector: "nz-range-picker", exportAs: ["nzRangePicker"] }, { kind: "ngmodule", type: NzTimePickerModule }] });
|
|
1305
1430
|
}
|
|
1306
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
1431
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
1307
1432
|
type: Component,
|
|
1308
1433
|
args: [{ selector: 'app-date-picker', standalone: true, imports: [CommonModule, FormsModule, NzDatePickerModule, NzTimePickerModule], providers: [
|
|
1309
1434
|
{
|
|
@@ -1311,7 +1436,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
1311
1436
|
useExisting: forwardRef(() => DatePickerComponent),
|
|
1312
1437
|
multi: true,
|
|
1313
1438
|
},
|
|
1314
|
-
], template: "<!-- Single Date Picker -->\r\n@if (!isRange && !inline) {\r\n <nz-date-picker\r\n [nzMode]=\"mode\"\r\n [(ngModel)]=\"selectedDate\"\r\n [nzFormat]=\"fullFormat\"\r\n [nzShowTime]=\"showTime\"\r\n [nzPlaceHolder]=\"placeholder\"\r\n [nzDisabled]=\"disabled\"\r\n [nzAllowClear]=\"allowClear\"\r\n [nzSize]=\"size\"\r\n [nzVariant]=\"bordered ? 'outlined' : 'borderless'\"\r\n [nzDropdownClassName]=\"popupClassName\"\r\n [nzPlacement]=\"dropdownPosition\"\r\n [nzDisabledDate]=\"disabledDate\"\r\n inputWidth=\"40px\"\r\n (ngModelChange)=\"onDateChange($event)\"\r\n (nzOnOpenChange)=\"onOpenChange($event)\"\r\n (nzOnOk)=\"onOk($event)\"\r\n (nzOnPanelChange)=\"onPanelChange($event)\"\r\n class=\"date-picker\"\r\n ></nz-date-picker>\r\n}\r\n\r\n<!-- Inline Single Date Picker -->\r\n@if (!isRange && inline) {\r\n <nz-date-picker\r\n [nzMode]=\"mode\"\r\n [(ngModel)]=\"selectedDate\"\r\n [nzFormat]=\"fullFormat\"\r\n [nzShowTime]=\"showTime\"\r\n [nzDisabled]=\"disabled\"\r\n [nzDisabledDate]=\"disabledDate\"\r\n [nzInline]=\"true\"\r\n (ngModelChange)=\"onDateChange($event)\"\r\n (nzOnOk)=\"onOk($event)\"\r\n (nzOnPanelChange)=\"onPanelChange($event)\"\r\n class=\"date-picker date-picker--inline\"\r\n ></nz-date-picker>\r\n}\r\n\r\n<!-- Range Date Picker -->\r\n@if (isRange && !inline) {\r\n <nz-range-picker\r\n [nzMode]=\"rangeMode\"\r\n [(ngModel)]=\"selectedRange\"\r\n [nzFormat]=\"fullFormat\"\r\n [nzShowTime]=\"showTime\"\r\n [nzPlaceHolder]=\"rangePlaceholder\"\r\n [nzDisabled]=\"disabled\"\r\n [nzAllowClear]=\"allowClear\"\r\n [nzSize]=\"size\"\r\n [nzVariant]=\"bordered ? 'outlined' : 'borderless'\"\r\n [nzDropdownClassName]=\"popupClassName\"\r\n [nzPlacement]=\"dropdownPosition\"\r\n [nzDisabledDate]=\"disabledDate\"\r\n (ngModelChange)=\"onRangeChange($event)\"\r\n (nzOnOpenChange)=\"onOpenChange($event)\"\r\n (nzOnOk)=\"onOk($event)\"\r\n (nzOnPanelChange)=\"onPanelChange($event)\"\r\n class=\"date-picker date-picker--range\"\r\n ></nz-range-picker>\r\n}\r\n\r\n<!-- Inline Range Date Picker -->\r\n@if (isRange && inline) {\r\n <nz-range-picker\r\n [nzMode]=\"rangeMode\"\r\n [(ngModel)]=\"selectedRange\"\r\n [nzFormat]=\"fullFormat\"\r\n [nzShowTime]=\"showTime\"\r\n [nzDisabled]=\"disabled\"\r\n [nzDisabledDate]=\"disabledDate\"\r\n [nzInline]=\"true\"\r\n (ngModelChange)=\"onRangeChange($event)\"\r\n (nzOnOk)=\"onOk($event)\"\r\n (nzOnPanelChange)=\"onPanelChange($event)\"\r\n class=\"date-picker date-picker--range date-picker--inline\"\r\n ></nz-range-picker>\r\n}\r\n", styles: [":host{--date-picker-primary-color: var(--brand-500);--date-picker-primary-hover: var(--brand-400);--date-picker-border-color: var(--neutral-color-200);--date-picker-border-radius: 8px;--date-picker-text-color: var(--neutral-color-800);--date-picker-bg-color: var(--neutral-color-50);--date-picker-disabled-color: var(--neutral-color-400);--date-picker-hover-bg: var(--neutral-color-100);--date-picker-selected-bg: var(--brand-100);--date-picker-today-border: var(--brand-500)}:host .ant-picker:hover,:host .ant-picker-focused{border:1px solid var(--brand-600)!important;border-radius:8px;cursor:pointer}.date-picker{width:100%}.date-picker ::ng-deep .ant-picker{width:100%;background-color:var(--date-picker-bg-color)}.date-picker ::ng-deep .ant-picker:hover{border-color:var(--brand-600)}.date-picker ::ng-deep .ant-picker:focus,.date-picker ::ng-deep .ant-picker.ant-picker-focused{border-color:var(--brand-500);box-shadow:0 0 0 2px #5078ff33}.date-picker ::ng-deep .ant-picker input{color:var(--date-picker-text-color)}.date-picker ::ng-deep .ant-picker input::placeholder{color:var(--date-picker-disabled-color)}.date-picker ::ng-deep .ant-picker-large{border-radius:calc(var(--date-picker-border-radius) + 2px)}.date-picker ::ng-deep .ant-picker-large input{font-size:16px}.date-picker ::ng-deep .ant-picker-small{border-radius:calc(var(--date-picker-border-radius) - 2px)}.date-picker ::ng-deep .ant-picker-small input{font-size:12px}.date-picker ::ng-deep .ant-picker-disabled{background-color:var(--date-picker-hover-bg);cursor:not-allowed}.date-picker ::ng-deep .ant-picker-disabled input{color:var(--date-picker-disabled-color)}.date-picker ::ng-deep .ant-picker-borderless{border:none;box-shadow:none}.date-picker ::ng-deep .ant-picker-borderless:focus,.date-picker ::ng-deep .ant-picker-borderless.ant-picker-focused{box-shadow:none}.date-picker--range ::ng-deep .ant-picker-range .ant-picker-separator{color:var(--brand-500)}.date-picker--range ::ng-deep .ant-picker-range .ant-picker-active-bar{background-color:var(--brand-500)}.date-picker--inline ::ng-deep .ant-picker{border:1px solid var(--date-picker-border-color);border-radius:var(--date-picker-border-radius);box-shadow:0 4px 20px #0000001a;padding:16px}.date-picker--inline ::ng-deep .ant-picker-panel-container{box-shadow:none}::ng-deep .ant-picker-dropdown .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-today):not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end) .ant-picker-cell-inner{background-color:var(--neutral-color-100)!important;border-radius:8px}::ng-deep .ant-picker-dropdown .ant-picker-cell-today:not(.ant-picker-cell-selected):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{background-color:#fff!important;border:1px solid var(--brand-500)!important;color:var(--brand-500)!important;border-radius:8px}::ng-deep .ant-picker-dropdown .ant-picker-cell-selected:not(.ant-picker-cell-today) .ant-picker-cell-inner{background-color:var(--brand-500)!important;color:#fff!important;border:none!important;border-radius:8px}::ng-deep .ant-picker-dropdown .ant-picker-cell-today.ant-picker-cell-selected .ant-picker-cell-inner{background-color:var(--brand-500)!important;color:#fff!important;border:none!important;border-radius:8px}::ng-deep .ant-picker-dropdown .ant-picker-cell-in-range:not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover):not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{background-color:var(--brand-500)!important;color:#fff!important;border-radius:0!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-start:not(.ant-picker-cell-range-end):not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{border-radius:8px 0 0 8px!important;background-color:var(--brand-500)!important;color:#fff!important;border:none!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-end:not(.ant-picker-cell-range-start):not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{border-radius:0 8px 8px 0!important;background-color:var(--brand-500)!important;color:#fff!important;border:none!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-start.ant-picker-cell-range-end:not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{border-radius:8px!important;background-color:var(--brand-500)!important;color:#fff!important;border:none!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell .ant-picker-cell-inner{background-color:var(--neutral-color-400)!important;color:var(--neutral-color-800)!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell:first-child .ant-picker-cell-inner{border-radius:8px 0 0 8px!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell:last-child .ant-picker-cell-inner{border-radius:0 8px 8px 0!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell:hover .ant-picker-cell-inner{background-color:var(--neutral-color-400)!important;color:var(--neutral-color-800)!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-in-range.ant-picker-cell-week .ant-picker-cell-inner{background-color:var(--neutral-color-400)!important;color:var(--neutral-color-800)!important;border-radius:0!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-hover:not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{background-color:var(--neutral-color-200)!important;border-radius:0!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-hover-start:not(.ant-picker-cell-range-hover-end):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{border-radius:8px 0 0 8px!important;background-color:var(--neutral-color-200)!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-hover-end:not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{border-radius:0 8px 8px 0!important;background-color:var(--neutral-color-200)!important}\n"] }]
|
|
1439
|
+
], template: "<!-- Single Date Picker -->\r\n@if (!isRange && !inline) {\r\n <nz-date-picker\r\n [nzMode]=\"mode\"\r\n [(ngModel)]=\"selectedDate\"\r\n [nzFormat]=\"fullFormat\"\r\n [nzShowTime]=\"showTime\"\r\n [nzPlaceHolder]=\"placeholder\"\r\n [nzDisabled]=\"disabled\"\r\n [nzAllowClear]=\"allowClear\"\r\n [nzSize]=\"size\"\r\n [nzVariant]=\"bordered ? 'outlined' : 'borderless'\"\r\n [nzDropdownClassName]=\"popupClassName\"\r\n [nzPlacement]=\"dropdownPosition\"\r\n [nzDisabledDate]=\"disabledDate\"\r\n inputWidth=\"40px\"\r\n (ngModelChange)=\"onDateChange($event)\"\r\n (nzOnOpenChange)=\"onOpenChange($event)\"\r\n (nzOnOk)=\"onOk($event)\"\r\n (nzOnPanelChange)=\"onPanelChange($event)\"\r\n class=\"date-picker\"\r\n ></nz-date-picker>\r\n}\r\n\r\n<!-- Inline Single Date Picker -->\r\n@if (!isRange && inline) {\r\n <nz-date-picker\r\n [nzMode]=\"mode\"\r\n [(ngModel)]=\"selectedDate\"\r\n [nzFormat]=\"fullFormat\"\r\n [nzShowTime]=\"showTime\"\r\n [nzDisabled]=\"disabled\"\r\n [nzDisabledDate]=\"disabledDate\"\r\n [nzInline]=\"true\"\r\n (ngModelChange)=\"onDateChange($event)\"\r\n (nzOnOk)=\"onOk($event)\"\r\n (nzOnPanelChange)=\"onPanelChange($event)\"\r\n class=\"date-picker date-picker--inline\"\r\n ></nz-date-picker>\r\n}\r\n\r\n<!-- Range Date Picker -->\r\n@if (isRange && !inline) {\r\n <nz-range-picker\r\n [nzMode]=\"rangeMode\"\r\n [(ngModel)]=\"selectedRange\"\r\n [nzFormat]=\"fullFormat\"\r\n [nzShowTime]=\"showTime\"\r\n [nzPlaceHolder]=\"rangePlaceholder\"\r\n [nzDisabled]=\"disabled\"\r\n [nzAllowClear]=\"allowClear\"\r\n [nzSize]=\"size\"\r\n [nzVariant]=\"bordered ? 'outlined' : 'borderless'\"\r\n [nzDropdownClassName]=\"popupClassName\"\r\n [nzPlacement]=\"dropdownPosition\"\r\n [nzDisabledDate]=\"disabledDate\"\r\n (ngModelChange)=\"onRangeChange($event)\"\r\n (nzOnOpenChange)=\"onOpenChange($event)\"\r\n (nzOnOk)=\"onOk($event)\"\r\n (nzOnPanelChange)=\"onPanelChange($event)\"\r\n class=\"date-picker date-picker--range\"\r\n ></nz-range-picker>\r\n}\r\n\r\n<!-- Inline Range Date Picker -->\r\n@if (isRange && inline) {\r\n <nz-range-picker\r\n [nzMode]=\"rangeMode\"\r\n [(ngModel)]=\"selectedRange\"\r\n [nzFormat]=\"fullFormat\"\r\n [nzShowTime]=\"showTime\"\r\n [nzDisabled]=\"disabled\"\r\n [nzDisabledDate]=\"disabledDate\"\r\n [nzInline]=\"true\"\r\n (ngModelChange)=\"onRangeChange($event)\"\r\n (nzOnOk)=\"onOk($event)\"\r\n (nzOnPanelChange)=\"onPanelChange($event)\"\r\n class=\"date-picker date-picker--range date-picker--inline\"\r\n ></nz-range-picker>\r\n}\r\n", styles: [":host{display:block;--date-picker-primary-color: var(--brand-500);--date-picker-primary-hover: var(--brand-600);--date-picker-border-color: var(--neutral-color-200);--date-picker-border-radius: 8px;--date-picker-text-color: var(--neutral-color-800);--date-picker-bg-color: var(--neutral-color-50);--date-picker-disabled-color: var(--neutral-color-400);--date-picker-hover-bg: var(--neutral-color-200);--date-picker-today-color: var(--brand-500)}:host .ant-picker{border:1px solid var(--neutral-color-200)!important;border-radius:8px;cursor:pointer}:host .ant-picker:hover,:host .ant-picker-focused{border:1px solid var(--date-picker-primary-color)!important;cursor:pointer}.date-picker{width:100%}.date-picker ::ng-deep .ant-picker{width:100%;background-color:var(--date-picker-bg-color)}.date-picker ::ng-deep .ant-picker:hover{border-color:var(--date-picker-primary-color)}.date-picker ::ng-deep .ant-picker:focus,.date-picker ::ng-deep .ant-picker.ant-picker-focused{border-color:var(--date-picker-primary-color)}.date-picker ::ng-deep .ant-picker input{color:var(--date-picker-text-color)}.date-picker ::ng-deep .ant-picker input::placeholder{color:var(--date-picker-disabled-color)}.date-picker ::ng-deep .ant-picker .ant-picker-suffix{color:var(--date-picker-primary-color)}.date-picker ::ng-deep .ant-picker .ant-picker-clear{background-color:var(--date-picker-bg-color)}.date-picker ::ng-deep .ant-picker .ant-picker-clear:hover{color:var(--date-picker-primary-hover)}.date-picker ::ng-deep .ant-picker-large{border-radius:calc(var(--date-picker-border-radius) + 2px)}.date-picker ::ng-deep .ant-picker-large input{font-size:16px}.date-picker ::ng-deep .ant-picker-small{border-radius:calc(var(--date-picker-border-radius) - 2px)}.date-picker ::ng-deep .ant-picker-small input{font-size:12px}.date-picker ::ng-deep .ant-picker-disabled{background-color:var(--date-picker-hover-bg);cursor:not-allowed}.date-picker ::ng-deep .ant-picker-disabled input{color:var(--date-picker-disabled-color)}.date-picker ::ng-deep .ant-picker-borderless{border:none;box-shadow:none}.date-picker ::ng-deep .ant-picker-borderless:focus,.date-picker ::ng-deep .ant-picker-borderless.ant-picker-focused{box-shadow:none}.date-picker--range ::ng-deep .ant-picker-range .ant-picker-separator{color:var(--date-picker-primary-color)}.date-picker--range ::ng-deep .ant-picker-range .ant-picker-active-bar{background-color:var(--date-picker-primary-color)}.date-picker--inline ::ng-deep .ant-picker{border:1px solid var(--date-picker-border-color);border-radius:var(--date-picker-border-radius);padding:16px}.date-picker--inline ::ng-deep .ant-picker-panel-container{box-shadow:none}::ng-deep .ant-picker-dropdown{--date-picker-primary-color: var(--brand-500);--date-picker-primary-hover: var(--brand-600);--date-picker-border-color: var(--neutral-color-200);--date-picker-border-radius: 8px;--date-picker-text-color: var(--neutral-color-800);--date-picker-bg-color: var(--neutral-color-50);--date-picker-disabled-color: var(--neutral-color-400);--date-picker-hover-bg: var(--neutral-color-400);--date-picker-today-color: var(--brand-500)}::ng-deep .ant-picker-dropdown .ant-picker-panel-container{border-radius:12px}::ng-deep .ant-picker-dropdown .ant-picker-header-super-prev-btn,::ng-deep .ant-picker-dropdown .ant-picker-header-super-next-btn{display:none!important}::ng-deep .ant-picker-dropdown .ant-picker-header button{color:var(--neutral-color-600)}::ng-deep .ant-picker-dropdown .ant-picker-header button:hover{color:var(--date-picker-primary-color)}::ng-deep .ant-picker-dropdown .ant-picker-cell:before,::ng-deep .ant-picker-dropdown .ant-picker-cell-inner:before{display:none!important}::ng-deep .ant-picker-dropdown .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-today):not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end) .ant-picker-cell-inner{background-color:var(--neutral-color-200)!important;color:var(--neutral-color-50)!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-today:not(.ant-picker-cell-selected):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{background-color:transparent!important;border:transparent!important;color:var(--theme-blue-600)!important;font-weight:600}::ng-deep .ant-picker-dropdown .ant-picker-cell-selected .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-50)!important;border:none!important;border-radius:8px!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-today.ant-picker-cell-selected .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-50)!important;border:none!important;border-radius:8px!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-in-range:not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover):not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border-radius:0!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-start:not(.ant-picker-cell-range-end):not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{border-radius:8px 0 0 8px!important;background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border:none!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-end:not(.ant-picker-cell-range-start):not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{border-radius:0 8px 8px 0!important;background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border:none!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-start.ant-picker-cell-range-end:not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{border-radius:8px!important;background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border:none!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell:first-child .ant-picker-cell-inner{border-radius:8px 0 0 8px!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell:last-child .ant-picker-cell-inner{border-radius:0 8px 8px 0!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell:hover .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-in-range.ant-picker-cell-week .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border-radius:0!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-hover:not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{background-color:var(--neutral-color-400)!important;color:var(--neutral-color-10)!important;border-radius:0!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-hover-start:not(.ant-picker-cell-range-hover-end):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{border-radius:8px 0 0 8px!important;background-color:var(--neutral-color-400)!important;color:var(--neutral-color-10)!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-hover-end:not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{border-radius:0 8px 8px 0!important;background-color:var(--neutral-color-400)!important;color:var(--neutral-color-10)!important}::ng-deep .ant-picker-dropdown .ant-picker-year-panel .ant-picker-cell-inner,::ng-deep .ant-picker-dropdown .ant-picker-month-panel .ant-picker-cell-inner{padding:0 8px;min-width:60px;border-radius:8px!important}::ng-deep .ant-picker-dropdown .ant-picker-time-panel-column>li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner{background:var(--neutral-color-400);color:var(--neutral-color-10);font-weight:600}\n"] }]
|
|
1315
1440
|
}], propDecorators: { mode: [{
|
|
1316
1441
|
type: Input
|
|
1317
1442
|
}], showTime: [{
|