@goat-bravos/intern-hub-layout 2.0.4 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, Output, Input, Component,
|
|
2
|
+
import { EventEmitter, Output, Input, Component, ViewChild } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
-
import * as
|
|
5
|
+
import * as i2 from '@angular/router';
|
|
6
6
|
import { RouterModule } from '@angular/router';
|
|
7
7
|
import { FormsModule } from '@angular/forms';
|
|
8
8
|
|
|
@@ -17,10 +17,8 @@ class IconComponent {
|
|
|
17
17
|
backgroundColorHover;
|
|
18
18
|
clicked = new EventEmitter();
|
|
19
19
|
get iconClass() {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
return this.icon || '';
|
|
20
|
+
const iconName = this.iconData?.icon || this.icon || '';
|
|
21
|
+
return iconName.includes('dsi') ? iconName : `dsi ${iconName}`;
|
|
24
22
|
}
|
|
25
23
|
get iconColor() {
|
|
26
24
|
return this.iconData?.colorIcon || this.colorIcon;
|
|
@@ -34,6 +32,9 @@ class IconComponent {
|
|
|
34
32
|
get iconRouterLink() {
|
|
35
33
|
return this.iconData?.routerLink || this.routerLink;
|
|
36
34
|
}
|
|
35
|
+
get backgroundColor() {
|
|
36
|
+
return this.iconData?.backgroundColor;
|
|
37
|
+
}
|
|
37
38
|
handleClick(event) {
|
|
38
39
|
if (!this.iconRouterLink) {
|
|
39
40
|
event.preventDefault();
|
|
@@ -41,11 +42,11 @@ class IconComponent {
|
|
|
41
42
|
}
|
|
42
43
|
}
|
|
43
44
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
44
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: IconComponent, isStandalone: true, selector: "app-icon", inputs: { iconData: "iconData", icon: "icon", colorIcon: "colorIcon", routerLink: "routerLink", width: "width", height: "height", colorIconHover: "colorIconHover", backgroundColorHover: "backgroundColorHover" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<i\r\n class=\"icon\"\r\n [ngClass]=\"iconClass\"\r\n [style.color]=\"iconColor\"\r\n [style.width]=\"iconWidth\"\r\n [style.height]=\"iconHeight\"\r\n [attr.tabindex]=\"iconRouterLink ? null : 0\"\r\n [attr.role]=\"iconRouterLink ? null : 'button'\"\r\n (click)=\"handleClick($event)\"\r\n (keydown.enter)=\"handleClick($event)\"\r\n (keydown.space)=\"handleClick($event)\"\r\n></i>\r\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:1}:host .icon{transition:color .25s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }] });
|
|
45
|
+
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: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
|
|
45
46
|
}
|
|
46
47
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IconComponent, decorators: [{
|
|
47
48
|
type: Component,
|
|
48
|
-
args: [{ selector: 'app-icon', standalone: true, imports: [CommonModule, RouterModule], template: "<i\r\n class=\"icon\"\r\n [ngClass]=\"iconClass\"\r\n [style.color]=\"iconColor\"\r\n [style.width]=\"iconWidth\"\r\n [style.height]=\"iconHeight\"\r\n [attr.tabindex]=\"iconRouterLink ? null : 0\"\r\n [attr.role]=\"iconRouterLink ? null : 'button'\"\r\n (click)=\"handleClick($event)\"\r\n (keydown.enter)=\"handleClick($event)\"\r\n (keydown.space)=\"handleClick($event)\"\r\n></i>\r\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:1}:host .icon{transition:color .25s ease}\n"] }]
|
|
49
|
+
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"] }]
|
|
49
50
|
}], propDecorators: { iconData: [{
|
|
50
51
|
type: Input
|
|
51
52
|
}], icon: [{
|
|
@@ -117,7 +118,7 @@ class FunctionalLabelComponent {
|
|
|
117
118
|
colorContentHover;
|
|
118
119
|
backgroundColorHover;
|
|
119
120
|
borderRadiusHover;
|
|
120
|
-
content
|
|
121
|
+
content;
|
|
121
122
|
fontSizeContent = '14px';
|
|
122
123
|
colorContent;
|
|
123
124
|
widthContent = '100%';
|
|
@@ -129,25 +130,14 @@ class FunctionalLabelComponent {
|
|
|
129
130
|
routerLink;
|
|
130
131
|
isSidebarExpanded = false;
|
|
131
132
|
clicked = new EventEmitter();
|
|
132
|
-
isHovered = false;
|
|
133
|
-
onMouseEnter() {
|
|
134
|
-
this.isHovered = true;
|
|
135
|
-
}
|
|
136
|
-
onMouseLeave() {
|
|
137
|
-
this.isHovered = false;
|
|
138
|
-
}
|
|
139
133
|
get currentBackgroundColor() {
|
|
140
|
-
return this.
|
|
141
|
-
? this.backgroundColorHover || this.backgroundColor
|
|
142
|
-
: this.backgroundColor;
|
|
134
|
+
return this.backgroundColor;
|
|
143
135
|
}
|
|
144
136
|
get currentBorderRadius() {
|
|
145
|
-
return this.
|
|
146
|
-
? this.borderRadiusHover || this.borderRadius
|
|
147
|
-
: this.borderRadius;
|
|
137
|
+
return this.borderRadius;
|
|
148
138
|
}
|
|
149
139
|
get currentColorContent() {
|
|
150
|
-
return this.
|
|
140
|
+
return this.isSidebarExpanded
|
|
151
141
|
? this.colorContentHover || this.colorContent
|
|
152
142
|
: this.colorContent;
|
|
153
143
|
}
|
|
@@ -157,11 +147,10 @@ class FunctionalLabelComponent {
|
|
|
157
147
|
get hasIconRight() {
|
|
158
148
|
return !!this.iconRight;
|
|
159
149
|
}
|
|
160
|
-
// ✅ Chỉ giữ 1 iconLeftData
|
|
161
150
|
get iconLeftData() {
|
|
162
151
|
if (!this.iconLeft)
|
|
163
152
|
return undefined;
|
|
164
|
-
const color = this.
|
|
153
|
+
const color = this.isSidebarExpanded
|
|
165
154
|
? this.colorIconLeftHover || this.colorIconLeft
|
|
166
155
|
: this.colorIconLeft;
|
|
167
156
|
if (typeof this.iconLeft === 'string') {
|
|
@@ -177,11 +166,10 @@ class FunctionalLabelComponent {
|
|
|
177
166
|
colorIcon: color || this.iconLeft.colorIcon,
|
|
178
167
|
};
|
|
179
168
|
}
|
|
180
|
-
// ✅ Chỉ giữ 1 iconRightData
|
|
181
169
|
get iconRightData() {
|
|
182
170
|
if (!this.iconRight)
|
|
183
171
|
return undefined;
|
|
184
|
-
const color = this.
|
|
172
|
+
const color = this.isSidebarExpanded
|
|
185
173
|
? this.colorIconRightHover || this.colorIconRight
|
|
186
174
|
: this.colorIconRight;
|
|
187
175
|
if (typeof this.iconRight === 'string') {
|
|
@@ -204,11 +192,11 @@ class FunctionalLabelComponent {
|
|
|
204
192
|
}
|
|
205
193
|
}
|
|
206
194
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FunctionalLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
207
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: FunctionalLabelComponent, isStandalone: true, selector: "app-functional-label", inputs: { iconLeft: "iconLeft", iconRight: "iconRight", colorIconLeft: "colorIconLeft", colorIconRight: "colorIconRight", widthIconLeft: "widthIconLeft", heightIconLeft: "heightIconLeft", widthIconRight: "widthIconRight", heightIconRight: "heightIconRight", colorIconLeftHover: "colorIconLeftHover", colorIconRightHover: "colorIconRightHover", colorContentHover: "colorContentHover", backgroundColorHover: "backgroundColorHover", borderRadiusHover: "borderRadiusHover", content: "content", fontSizeContent: "fontSizeContent", colorContent: "colorContent", widthContent: "widthContent", heightContent: "heightContent", backgroundColor: "backgroundColor", borderRadius: "borderRadius", width: "width", height: "height", routerLink: "routerLink", isSidebarExpanded: "isSidebarExpanded" }, outputs: { clicked: "clicked" },
|
|
195
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: FunctionalLabelComponent, isStandalone: true, selector: "app-functional-label", inputs: { iconLeft: "iconLeft", iconRight: "iconRight", colorIconLeft: "colorIconLeft", colorIconRight: "colorIconRight", widthIconLeft: "widthIconLeft", heightIconLeft: "heightIconLeft", widthIconRight: "widthIconRight", heightIconRight: "heightIconRight", colorIconLeftHover: "colorIconLeftHover", colorIconRightHover: "colorIconRightHover", colorContentHover: "colorContentHover", backgroundColorHover: "backgroundColorHover", borderRadiusHover: "borderRadiusHover", content: "content", fontSizeContent: "fontSizeContent", colorContent: "colorContent", widthContent: "widthContent", heightContent: "heightContent", backgroundColor: "backgroundColor", borderRadius: "borderRadius", width: "width", height: "height", routerLink: "routerLink", isSidebarExpanded: "isSidebarExpanded" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div\r\n class=\"functional-label\"\r\n (click)=\"handleClick($event)\"\r\n (keydown.enter)=\"handleClick($event)\"\r\n (keydown.space)=\"handleClick($event)\"\r\n [attr.tabindex]=\"routerLink ? null : 0\"\r\n [attr.role]=\"routerLink ? null : 'button'\"\r\n [style.background-color]=\"currentBackgroundColor\"\r\n [style.border-radius]=\"currentBorderRadius\"\r\n [style.width]=\"width\"\r\n [style.height]=\"height\"\r\n>\r\n @if (hasIconLeft && iconLeftData) {\r\n <app-icon\r\n [iconData]=\"iconLeftData\"\r\n [width]=\"widthIconLeft\"\r\n [height]=\"heightIconLeft\"\r\n ></app-icon>\r\n }\r\n\r\n <a\r\n [routerLink]=\"routerLink\"\r\n [style.color]=\"currentColorContent\"\r\n [style.width]=\"widthContent\"\r\n [style.height]=\"heightContent\"\r\n [style.font-size]=\"fontSizeContent\"\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 ></app-icon>\r\n }\r\n</div>\r\n", styles: [":host{display:block;width:100%}.functional-label{display:flex;align-items:center;justify-content:center;height:40px;padding:0;cursor:pointer;box-sizing:border-box;transition:all .3s ease}.functional-label app-icon{display:flex;flex-shrink:0;justify-content:center;width:44px}.functional-label a{max-width:0;opacity:0;visibility:hidden;white-space:nowrap;overflow:hidden;text-decoration:none;color:var(--neutral-color-400);transform:translate(-10px);transition:all .3s ease;display:flex;justify-content:flex-start;align-items:center}:host-context(.sidebar-wrapper.expanded) .functional-label{justify-content:flex-start;padding-left:8px}:host-context(.sidebar-wrapper.expanded) .functional-label a{opacity:1;visibility:visible;max-width:200px;transform:translate(0);color:var(--brand-600);flex:1;text-align:left}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.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"] }] });
|
|
208
196
|
}
|
|
209
197
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FunctionalLabelComponent, decorators: [{
|
|
210
198
|
type: Component,
|
|
211
|
-
args: [{ selector: 'app-functional-label', standalone: true, imports: [CommonModule, RouterModule, IconComponent], template: "<div\r\n class=\"functional-label\"\r\n (click)=\"handleClick($event)\"\r\n (keydown.enter)=\"handleClick($event)\"\r\n (keydown.space)=\"handleClick($event)\"\r\n [attr.tabindex]=\"routerLink ? null : 0\"\r\n [attr.role]=\"routerLink ? null : 'button'\"\r\n [style.background-color]=\"currentBackgroundColor\"\r\n [style.border-radius]=\"currentBorderRadius\"\r\n [style.width]=\"width\"\r\n [style.height]=\"height\"\r\n>\r\n @if (hasIconLeft && iconLeftData) {\r\n <app-icon\r\n [iconData]=\"iconLeftData\"\r\n [width]=\"widthIconLeft\"\r\n [height]=\"heightIconLeft\"\r\n
|
|
199
|
+
args: [{ selector: 'app-functional-label', standalone: true, imports: [CommonModule, RouterModule, IconComponent], template: "<div\r\n class=\"functional-label\"\r\n (click)=\"handleClick($event)\"\r\n (keydown.enter)=\"handleClick($event)\"\r\n (keydown.space)=\"handleClick($event)\"\r\n [attr.tabindex]=\"routerLink ? null : 0\"\r\n [attr.role]=\"routerLink ? null : 'button'\"\r\n [style.background-color]=\"currentBackgroundColor\"\r\n [style.border-radius]=\"currentBorderRadius\"\r\n [style.width]=\"width\"\r\n [style.height]=\"height\"\r\n>\r\n @if (hasIconLeft && iconLeftData) {\r\n <app-icon\r\n [iconData]=\"iconLeftData\"\r\n [width]=\"widthIconLeft\"\r\n [height]=\"heightIconLeft\"\r\n ></app-icon>\r\n }\r\n\r\n <a\r\n [routerLink]=\"routerLink\"\r\n [style.color]=\"currentColorContent\"\r\n [style.width]=\"widthContent\"\r\n [style.height]=\"heightContent\"\r\n [style.font-size]=\"fontSizeContent\"\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 ></app-icon>\r\n }\r\n</div>\r\n", styles: [":host{display:block;width:100%}.functional-label{display:flex;align-items:center;justify-content:center;height:40px;padding:0;cursor:pointer;box-sizing:border-box;transition:all .3s ease}.functional-label app-icon{display:flex;flex-shrink:0;justify-content:center;width:44px}.functional-label a{max-width:0;opacity:0;visibility:hidden;white-space:nowrap;overflow:hidden;text-decoration:none;color:var(--neutral-color-400);transform:translate(-10px);transition:all .3s ease;display:flex;justify-content:flex-start;align-items:center}:host-context(.sidebar-wrapper.expanded) .functional-label{justify-content:flex-start;padding-left:8px}:host-context(.sidebar-wrapper.expanded) .functional-label a{opacity:1;visibility:visible;max-width:200px;transform:translate(0);color:var(--brand-600);flex:1;text-align:left}\n"] }]
|
|
212
200
|
}], propDecorators: { iconLeft: [{
|
|
213
201
|
type: Input
|
|
214
202
|
}], iconRight: [{
|
|
@@ -259,40 +247,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
259
247
|
type: Input
|
|
260
248
|
}], clicked: [{
|
|
261
249
|
type: Output
|
|
262
|
-
}], onMouseEnter: [{
|
|
263
|
-
type: HostListener,
|
|
264
|
-
args: ['mouseenter']
|
|
265
|
-
}], onMouseLeave: [{
|
|
266
|
-
type: HostListener,
|
|
267
|
-
args: ['mouseleave']
|
|
268
|
-
}] } });
|
|
269
|
-
|
|
270
|
-
class SidebarComponent {
|
|
271
|
-
data = { menuItems: [] };
|
|
272
|
-
isSidebarExpanded = false;
|
|
273
|
-
onMouseEnter() {
|
|
274
|
-
this.isSidebarExpanded = true;
|
|
275
|
-
}
|
|
276
|
-
onMouseLeave() {
|
|
277
|
-
this.isSidebarExpanded = false;
|
|
278
|
-
}
|
|
279
|
-
onMenuItemClick(item, event) {
|
|
280
|
-
console.log('Menu item clicked:', item, event);
|
|
281
|
-
}
|
|
282
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
283
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: SidebarComponent, isStandalone: true, selector: "app-sidebar", inputs: { data: "data" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0, template: "<div class=\"sidebar-wrapper\">\r\n <aside\r\n class=\"sidebar\"\r\n [style.background-color]=\"!isSidebarExpanded ? data.backgroundColor : null\"\r\n >\r\n @for (item of data.menuItems; track $index) {\r\n <app-functional-label\r\n class=\"sidebar-item\"\r\n [isSidebarExpanded]=\"isSidebarExpanded\"\r\n [iconLeft]=\"item.iconLeft\"\r\n [iconRight]=\"item.iconRight\"\r\n [content]=\"item.content\"\r\n [routerLink]=\"item.url\"\r\n [colorIconLeft]=\"item.colorIconLeft\"\r\n [colorIconRight]=\"item.colorIconRight\"\r\n [colorContent]=\"item.colorContent\"\r\n [backgroundColor]=\"item.backgroundColor\"\r\n [borderRadius]=\"item.borderRadius\"\r\n (clicked)=\"onMenuItemClick(item, $event)\"\r\n [colorIconLeftHover]=\"item.colorIconLeftHover\"\r\n [colorIconRightHover]=\"item.colorIconRightHover\"\r\n [backgroundColorHover]=\"item.backgroundColorHover\"\r\n [width]=\"item.width\"\r\n [height]=\"item.height\"\r\n ></app-functional-label>\r\n }\r\n </aside>\r\n</div>\r\n", styles: [":host{display:block;height:100vh}.sidebar-wrapper{width:44px;height:100vh;transition:width .3s ease;background-color:transparent}.sidebar{display:flex;flex-direction:column;gap:8px;width:44px;height:100%;padding:8px;box-sizing:border-box;border-radius:16px;overflow:hidden;transition:width .3s ease,padding .3s ease,background-color .3s ease}.sidebar a{text-decoration:none}.sidebar-wrapper:hover{width:227px}.sidebar-wrapper:hover .sidebar{width:227px;padding:16px 8px;border-radius:16px;background-color:var(--theme-neutral-light-100)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FunctionalLabelComponent, selector: "app-functional-label", inputs: ["iconLeft", "iconRight", "colorIconLeft", "colorIconRight", "widthIconLeft", "heightIconLeft", "widthIconRight", "heightIconRight", "colorIconLeftHover", "colorIconRightHover", "colorContentHover", "backgroundColorHover", "borderRadiusHover", "content", "fontSizeContent", "colorContent", "widthContent", "heightContent", "backgroundColor", "borderRadius", "width", "height", "routerLink", "isSidebarExpanded"], outputs: ["clicked"] }] });
|
|
284
|
-
}
|
|
285
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
286
|
-
type: Component,
|
|
287
|
-
args: [{ selector: 'app-sidebar', standalone: true, imports: [CommonModule, FunctionalLabelComponent], template: "<div class=\"sidebar-wrapper\">\r\n <aside\r\n class=\"sidebar\"\r\n [style.background-color]=\"!isSidebarExpanded ? data.backgroundColor : null\"\r\n >\r\n @for (item of data.menuItems; track $index) {\r\n <app-functional-label\r\n class=\"sidebar-item\"\r\n [isSidebarExpanded]=\"isSidebarExpanded\"\r\n [iconLeft]=\"item.iconLeft\"\r\n [iconRight]=\"item.iconRight\"\r\n [content]=\"item.content\"\r\n [routerLink]=\"item.url\"\r\n [colorIconLeft]=\"item.colorIconLeft\"\r\n [colorIconRight]=\"item.colorIconRight\"\r\n [colorContent]=\"item.colorContent\"\r\n [backgroundColor]=\"item.backgroundColor\"\r\n [borderRadius]=\"item.borderRadius\"\r\n (clicked)=\"onMenuItemClick(item, $event)\"\r\n [colorIconLeftHover]=\"item.colorIconLeftHover\"\r\n [colorIconRightHover]=\"item.colorIconRightHover\"\r\n [backgroundColorHover]=\"item.backgroundColorHover\"\r\n [width]=\"item.width\"\r\n [height]=\"item.height\"\r\n ></app-functional-label>\r\n }\r\n </aside>\r\n</div>\r\n", styles: [":host{display:block;height:100vh}.sidebar-wrapper{width:44px;height:100vh;transition:width .3s ease;background-color:transparent}.sidebar{display:flex;flex-direction:column;gap:8px;width:44px;height:100%;padding:8px;box-sizing:border-box;border-radius:16px;overflow:hidden;transition:width .3s ease,padding .3s ease,background-color .3s ease}.sidebar a{text-decoration:none}.sidebar-wrapper:hover{width:227px}.sidebar-wrapper:hover .sidebar{width:227px;padding:16px 8px;border-radius:16px;background-color:var(--theme-neutral-light-100)}\n"] }]
|
|
288
|
-
}], propDecorators: { data: [{
|
|
289
|
-
type: Input
|
|
290
|
-
}], onMouseEnter: [{
|
|
291
|
-
type: HostListener,
|
|
292
|
-
args: ['mouseenter']
|
|
293
|
-
}], onMouseLeave: [{
|
|
294
|
-
type: HostListener,
|
|
295
|
-
args: ['mouseleave']
|
|
296
250
|
}] } });
|
|
297
251
|
|
|
298
252
|
const BUTTON_SIZE_MAP = {
|
|
@@ -331,16 +285,23 @@ const BUTTON_SIZE_MAP = {
|
|
|
331
285
|
};
|
|
332
286
|
|
|
333
287
|
class ButtonContainerComponent {
|
|
288
|
+
buttonData;
|
|
334
289
|
size = 'md';
|
|
335
|
-
content
|
|
290
|
+
content;
|
|
336
291
|
fontSize;
|
|
337
292
|
leftIcon;
|
|
293
|
+
leftIconData;
|
|
338
294
|
rightIcon;
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
295
|
+
rightIconData;
|
|
296
|
+
color;
|
|
297
|
+
backgroundColor;
|
|
298
|
+
border;
|
|
342
299
|
borderRadius;
|
|
343
300
|
width;
|
|
301
|
+
height;
|
|
302
|
+
padding;
|
|
303
|
+
marginLeft;
|
|
304
|
+
marginRight;
|
|
344
305
|
buttonClick = new EventEmitter();
|
|
345
306
|
get sizeStyle() {
|
|
346
307
|
return this.size
|
|
@@ -358,12 +319,14 @@ class ButtonContainerComponent {
|
|
|
358
319
|
this.buttonClick.emit();
|
|
359
320
|
}
|
|
360
321
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ButtonContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
361
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ButtonContainerComponent, isStandalone: true, selector: "app-button-container", inputs: { size: "size", content: "content", fontSize: "fontSize", leftIcon: "leftIcon", rightIcon: "rightIcon", color: "color", backgroundColor: "backgroundColor",
|
|
322
|
+
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" }, 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 (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:none;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"] }] });
|
|
362
323
|
}
|
|
363
324
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ButtonContainerComponent, decorators: [{
|
|
364
325
|
type: Component,
|
|
365
|
-
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.
|
|
366
|
-
}], propDecorators: {
|
|
326
|
+
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 (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:none;cursor:pointer;font-weight:500}\n"] }]
|
|
327
|
+
}], propDecorators: { buttonData: [{
|
|
328
|
+
type: Input
|
|
329
|
+
}], size: [{
|
|
367
330
|
type: Input
|
|
368
331
|
}], content: [{
|
|
369
332
|
type: Input
|
|
@@ -371,22 +334,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
371
334
|
type: Input
|
|
372
335
|
}], leftIcon: [{
|
|
373
336
|
type: Input
|
|
337
|
+
}], leftIconData: [{
|
|
338
|
+
type: Input
|
|
374
339
|
}], rightIcon: [{
|
|
375
340
|
type: Input
|
|
341
|
+
}], rightIconData: [{
|
|
342
|
+
type: Input
|
|
376
343
|
}], color: [{
|
|
377
344
|
type: Input
|
|
378
345
|
}], backgroundColor: [{
|
|
379
346
|
type: Input
|
|
380
|
-
}],
|
|
347
|
+
}], border: [{
|
|
381
348
|
type: Input
|
|
382
349
|
}], borderRadius: [{
|
|
383
350
|
type: Input
|
|
384
351
|
}], width: [{
|
|
385
352
|
type: Input
|
|
353
|
+
}], height: [{
|
|
354
|
+
type: Input
|
|
355
|
+
}], padding: [{
|
|
356
|
+
type: Input
|
|
357
|
+
}], marginLeft: [{
|
|
358
|
+
type: Input
|
|
359
|
+
}], marginRight: [{
|
|
360
|
+
type: Input
|
|
386
361
|
}], buttonClick: [{
|
|
387
362
|
type: Output
|
|
388
363
|
}] } });
|
|
389
364
|
|
|
365
|
+
class SidebarComponent {
|
|
366
|
+
data = { menuItems: [] };
|
|
367
|
+
sidebarWidthCollapse = '59px';
|
|
368
|
+
sidebarWidthExpand = '227px';
|
|
369
|
+
isSidebarExpanded = false;
|
|
370
|
+
leftIcon;
|
|
371
|
+
rightIcon;
|
|
372
|
+
sidebarToggled = new EventEmitter();
|
|
373
|
+
toggleButtonIconData;
|
|
374
|
+
closeButtonIconData;
|
|
375
|
+
toggleSidebar() {
|
|
376
|
+
this.isSidebarExpanded = !this.isSidebarExpanded;
|
|
377
|
+
this.sidebarToggled.emit(this.isSidebarExpanded);
|
|
378
|
+
}
|
|
379
|
+
onMenuItemClick(item, event) {
|
|
380
|
+
console.log('Menu item clicked:', item, event);
|
|
381
|
+
}
|
|
382
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
383
|
+
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 <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 [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 [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 <!-- \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 [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: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: ["buttonData", "size", "content", "fontSize", "leftIcon", "leftIconData", "rightIcon", "rightIconData", "color", "backgroundColor", "border", "borderRadius", "width", "height", "padding", "marginLeft", "marginRight"], outputs: ["buttonClick"] }] });
|
|
384
|
+
}
|
|
385
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
386
|
+
type: Component,
|
|
387
|
+
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 [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 [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 <!-- \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 [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: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"] }]
|
|
388
|
+
}], propDecorators: { data: [{
|
|
389
|
+
type: Input
|
|
390
|
+
}], sidebarWidthCollapse: [{
|
|
391
|
+
type: Input
|
|
392
|
+
}], sidebarWidthExpand: [{
|
|
393
|
+
type: Input
|
|
394
|
+
}], isSidebarExpanded: [{
|
|
395
|
+
type: Input
|
|
396
|
+
}], leftIcon: [{
|
|
397
|
+
type: Input
|
|
398
|
+
}], rightIcon: [{
|
|
399
|
+
type: Input
|
|
400
|
+
}], sidebarToggled: [{
|
|
401
|
+
type: Output
|
|
402
|
+
}], toggleButtonIconData: [{
|
|
403
|
+
type: Input
|
|
404
|
+
}], closeButtonIconData: [{
|
|
405
|
+
type: Input
|
|
406
|
+
}] } });
|
|
407
|
+
|
|
390
408
|
class LabelButtonComponent {
|
|
391
409
|
label = '';
|
|
392
410
|
bgColor = '';
|
|
@@ -428,7 +446,7 @@ class InputTextComponent {
|
|
|
428
446
|
typeInput = 'text';
|
|
429
447
|
// Customization
|
|
430
448
|
placeholderColor = '';
|
|
431
|
-
|
|
449
|
+
border = '';
|
|
432
450
|
borderColorHover = '';
|
|
433
451
|
borderRadius = '';
|
|
434
452
|
padding = '';
|
|
@@ -468,11 +486,11 @@ class InputTextComponent {
|
|
|
468
486
|
this.valueChange.emit(this._value);
|
|
469
487
|
}
|
|
470
488
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
471
|
-
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", placeholderColor: "placeholderColor",
|
|
489
|
+
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", placeholderColor: "placeholderColor", border: "border", borderColorHover: "borderColorHover", borderRadius: "borderRadius", padding: "padding", height: "height", fontSize: "fontSize", fontWeight: "fontWeight", backgroundColor: "backgroundColor", value: "value" }, outputs: { valueChange: "valueChange", iconClick: "iconClick" }, ngImport: i0, template: "<div class=\"input-form\">\r\n <div class=\"input-form-content\">\r\n <label class=\"input-form-label\">\r\n <span class=\"label-text\" [class.hidden]=\"!headerInput\">\r\n {{ headerInput }}\r\n @if (required) {\r\n <span class=\"required-mark\">*</span>\r\n }\r\n </span>\r\n <div class=\"input-field-wrapper\">\r\n <input\r\n [type]=\"typeInput\"\r\n class=\"input-form-field\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [required]=\"required\"\r\n [style.width]=\"width\"\r\n [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.--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{visibility:hidden}.input-form-label{display:block;font-size:var(--font-sm);font-weight:700;color:var(--neutral-color-700)}.label-text{display:block;margin-bottom:4px;height:20px}.required-mark{color:var(--utility-600);margin-left:2px}.input-form-field{padding:8px 12px;border:1px solid var(--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 }] });
|
|
472
490
|
}
|
|
473
491
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: InputTextComponent, decorators: [{
|
|
474
492
|
type: Component,
|
|
475
|
-
args: [{ selector: 'app-input-text', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"input-form\">\r\n <div class=\"input-form-content\">\r\n <label class=\"input-form-label\">\r\n <span class=\"label-text\" [class.hidden]=\"!headerInput\">\r\n {{ headerInput }}\r\n @if (required) {\r\n <span class=\"required-mark\">*</span>\r\n }\r\n </span>\r\n <div class=\"input-field-wrapper\">\r\n <input\r\n [type]=\"typeInput\"\r\n class=\"input-form-field\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [required]=\"required\"\r\n [style.width]=\"width\"\r\n [style.height]=\"height\"\r\n [style.padding]=\"padding\"\r\n [style
|
|
493
|
+
args: [{ selector: 'app-input-text', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"input-form\">\r\n <div class=\"input-form-content\">\r\n <label class=\"input-form-label\">\r\n <span class=\"label-text\" [class.hidden]=\"!headerInput\">\r\n {{ headerInput }}\r\n @if (required) {\r\n <span class=\"required-mark\">*</span>\r\n }\r\n </span>\r\n <div class=\"input-field-wrapper\">\r\n <input\r\n [type]=\"typeInput\"\r\n class=\"input-form-field\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [required]=\"required\"\r\n [style.width]=\"width\"\r\n [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.--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{visibility:hidden}.input-form-label{display:block;font-size:var(--font-sm);font-weight:700;color:var(--neutral-color-700)}.label-text{display:block;margin-bottom:4px;height:20px}.required-mark{color:var(--utility-600);margin-left:2px}.input-form-field{padding:8px 12px;border:1px solid var(--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"] }]
|
|
476
494
|
}], propDecorators: { headerInput: [{
|
|
477
495
|
type: Input
|
|
478
496
|
}], placeholder: [{
|
|
@@ -497,7 +515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
497
515
|
type: Input
|
|
498
516
|
}], placeholderColor: [{
|
|
499
517
|
type: Input
|
|
500
|
-
}],
|
|
518
|
+
}], border: [{
|
|
501
519
|
type: Input
|
|
502
520
|
}], borderColorHover: [{
|
|
503
521
|
type: Input
|
|
@@ -846,7 +864,7 @@ class PopUpConfirmComponent {
|
|
|
846
864
|
this.cancelClick.emit();
|
|
847
865
|
}
|
|
848
866
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PopUpConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
849
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: PopUpConfirmComponent, isStandalone: true, selector: "app-pop-up-confirm", inputs: { imgUrl: "imgUrl", title: "title", content: "content", colorButton: "colorButton" }, outputs: { confirmClick: "confirmClick", cancelClick: "cancelClick" }, ngImport: i0, template: "<div class=\"pop-up-confirm-overlay\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"popup-title\">\r\n <div class=\"pop-up-confirm\">\r\n <div class=\"pop-up-confirm-content\">\r\n <img *ngIf=\"imgUrl\" [src]=\"imgUrl\" alt=\"\">\r\n <div class=\"pop-up-confirm-text\">\r\n <p class=\"pop-up-title\" id=\"popup-title\">{{title}}</p>\r\n <p class=\"pop-up-content\">{{content}}</p>\r\n </div>\r\n </div>\r\n <div class=\"pop-up-confirm-actions\">\r\n <app-button-container size=\"md\" content=\"Quay L\u1EA1i\" backgroundColor=\"var(--neutral-100)\" color=\"var(--neutral-800)\" (buttonClick)=\"onCancel()\"></app-button-container>\r\n <app-button-container size=\"md\" content=\"\u0110\u1ED3ng \u00DD\" [backgroundColor]=\"colorButton\" color=\"#fff\" (buttonClick)=\"onConfirm()\"></app-button-container>\r\n </div>\r\n </div>\r\n</div>", styles: [".pop-up-confirm-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--neutral-color-875-rgb, 30, 34, 37),.5);display:flex;justify-content:center;align-items:center;z-index:1000}.pop-up-confirm{background-color:var(--neutral-color-10);border-radius:var(--radius-lg);padding:24px;min-width:320px;max-width:400px;box-shadow:0 4px 20px rgba(var(--neutral-color-875-rgb, 30, 34, 37),.15)}.pop-up-confirm-content{display:flex;gap:16px;align-items:center;justify-content:center;flex-direction:column;margin-bottom:24px;width:352px;height:172px}.pop-up-confirm-content img{width:96px;height:96px;object-fit:contain;flex-shrink:0}.pop-up-confirm-text{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px}.pop-up-title{font-size:var(--font-xl);font-weight:600;color:var(--neutral-color-875);margin:0}.pop-up-content{font-size:var(--font-sm);color:var(--neutral-color-500);margin:0}.pop-up-confirm-actions{display:flex;gap:12px;justify-content:center;align-items:center;padding:16px 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonContainerComponent, selector: "app-button-container", inputs: ["size", "content", "fontSize", "leftIcon", "rightIcon", "color", "backgroundColor", "
|
|
867
|
+
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"], outputs: ["buttonClick"] }] });
|
|
850
868
|
}
|
|
851
869
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PopUpConfirmComponent, decorators: [{
|
|
852
870
|
type: Component,
|