@goat-bravos/intern-hub-layout 3.0.9 → 4.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.
package/README.md
CHANGED
|
@@ -126,7 +126,7 @@ export class AppComponent {
|
|
|
126
126
|
<!-- Main Content Area -->
|
|
127
127
|
<div class="content">
|
|
128
128
|
<!-- Button -->
|
|
129
|
-
<app-button-container content="Click Me" size="md"
|
|
129
|
+
<app-button-container content="Click Me" size="md" bgDefault="var(--brand-500)" (buttonClick)="onButtonClick()"> </app-button-container>
|
|
130
130
|
|
|
131
131
|
<!-- Input -->
|
|
132
132
|
<app-input-text headerInput="Username" placeholder="Enter your username" [required]="true" [(value)]="username"> </app-input-text>
|
|
@@ -422,7 +422,7 @@ interface SidebarData {
|
|
|
422
422
|
|
|
423
423
|
#### ButtonContainerComponent
|
|
424
424
|
|
|
425
|
-
A customizable button with icon
|
|
425
|
+
A highly customizable button component with support for standard icons, custom icon data, multiple size variants, and comprehensive state styling (default, hover, disabled).
|
|
426
426
|
|
|
427
427
|
**Selector:** `app-button-container`
|
|
428
428
|
|
|
@@ -433,13 +433,13 @@ import { ButtonContainerComponent, ButtonSize } from "@goat-bravos/intern-hub-la
|
|
|
433
433
|
imports: [ButtonContainerComponent],
|
|
434
434
|
template: `
|
|
435
435
|
<!-- Basic button -->
|
|
436
|
-
<app-button-container content="Submit" size="md" (buttonClick)="onSubmit()"
|
|
436
|
+
<app-button-container content="Submit" size="md" (buttonClick)="onSubmit()"> </app-button-container>
|
|
437
437
|
|
|
438
|
-
<!--
|
|
439
|
-
<app-button-container content="Download" size="lg" leftIcon="
|
|
438
|
+
<!-- Customized button with icons and states -->
|
|
439
|
+
<app-button-container content="Download" size="lg" leftIcon="dsi-download-line" bgDefault="#10b981" bgHover="#059669" colorDefault="#ffffff" (buttonClick)="onDownload()"> </app-button-container>
|
|
440
440
|
|
|
441
|
-
<!--
|
|
442
|
-
<app-button-container content="
|
|
441
|
+
<!-- Disabled state -->
|
|
442
|
+
<app-button-container content="Save" [disabled]="true" bgDisabled="#e5e7eb" colorDisabled="#9ca3af"> </app-button-container>
|
|
443
443
|
`,
|
|
444
444
|
})
|
|
445
445
|
export class MyComponent {
|
|
@@ -449,33 +449,38 @@ export class MyComponent {
|
|
|
449
449
|
onDownload() {
|
|
450
450
|
console.log("Download initiated");
|
|
451
451
|
}
|
|
452
|
-
onEdit() {
|
|
453
|
-
console.log("Edit clicked");
|
|
454
|
-
}
|
|
455
452
|
}
|
|
456
453
|
```
|
|
457
454
|
|
|
458
455
|
**Inputs:**
|
|
459
456
|
|
|
460
|
-
| Input
|
|
461
|
-
|
|
|
462
|
-
| `size`
|
|
463
|
-
| `content`
|
|
464
|
-
| `
|
|
465
|
-
| `
|
|
466
|
-
| `
|
|
467
|
-
| `
|
|
468
|
-
| `
|
|
469
|
-
| `
|
|
470
|
-
| `
|
|
471
|
-
| `
|
|
472
|
-
| `
|
|
457
|
+
| Input | Type | Default | Description |
|
|
458
|
+
| :-------------- | :----------------------------------- | :--------------------------- | :-------------------------------------------------- |
|
|
459
|
+
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| ''` | `'md'` | Button size variant (affects padding/min-size) |
|
|
460
|
+
| `content` | `string` | - | Button display text |
|
|
461
|
+
| `fontSize` | `string` | - | Custom font size (overrides size variant) |
|
|
462
|
+
| `leftIcon` | `string` | - | Icon name for the left side (e.g., 'dsi-plus-line') |
|
|
463
|
+
| `leftIconData` | `IconData[]` | - | Complex icon data for the left side |
|
|
464
|
+
| `rightIcon` | `string` | - | Icon name for the right side |
|
|
465
|
+
| `rightIconData` | `IconData[]` | - | Complex icon data for the right side |
|
|
466
|
+
| `bgDefault` | `string` | `'var(--neutral-color-100)'` | Default background color |
|
|
467
|
+
| `bgHover` | `string` | `'var(--neutral-color-200)'` | Background color on hover |
|
|
468
|
+
| `bgDisabled` | `string` | `'var(--neutral-color-200)'` | Background color when disabled |
|
|
469
|
+
| `colorDefault` | `string` | `'var(--neutral-color-900)'` | Default text/icon color |
|
|
470
|
+
| `colorHover` | `string` | `'var(--neutral-color-900)'` | Text/icon color on hover |
|
|
471
|
+
| `colorDisabled` | `string` | `'var(--neutral-color-500)'` | Text/icon color when disabled |
|
|
472
|
+
| `border` | `string` | - | CSS border property (e.g., '1px solid #ccc') |
|
|
473
|
+
| `borderRadius` | `string` | `'8px'` | CSS border-radius property |
|
|
474
|
+
| `width` | `string` | - | Custom button width |
|
|
475
|
+
| `height` | `string` | `'36px'` | Custom button height |
|
|
476
|
+
| `padding` | `string` | - | Custom button padding |
|
|
477
|
+
| `disabled` | `boolean` | `false` | Whether the button is interactive |
|
|
473
478
|
|
|
474
479
|
**Outputs:**
|
|
475
480
|
|
|
476
|
-
| Output | Type
|
|
477
|
-
|
|
|
478
|
-
| `buttonClick` | `EventEmitter<
|
|
481
|
+
| Output | Type | Description |
|
|
482
|
+
| :------------ | :------------------- | :---------------------------------------------- |
|
|
483
|
+
| `buttonClick` | `EventEmitter<void>` | Emitted when button is clicked and NOT disabled |
|
|
479
484
|
|
|
480
485
|
---
|
|
481
486
|
|
|
@@ -692,31 +697,31 @@ export class MyComponent {
|
|
|
692
697
|
|
|
693
698
|
**Inputs:**
|
|
694
699
|
|
|
695
|
-
| Input
|
|
696
|
-
|
|
|
697
|
-
| `headerInput`
|
|
698
|
-
| `value`
|
|
699
|
-
| `mode`
|
|
700
|
-
| `isRange`
|
|
701
|
-
| `showTime`
|
|
702
|
-
| `placeholder`
|
|
703
|
-
| `format`
|
|
704
|
-
| `required`
|
|
705
|
-
| `readonly`
|
|
706
|
-
| `disabled`
|
|
707
|
-
| `disabledDate`
|
|
708
|
-
| `dropdownPlacement`
|
|
709
|
-
| `width`
|
|
700
|
+
| Input | Type | Default | Description |
|
|
701
|
+
| ------------------- | ---------------------------------------------------------- | --------------- | ---------------------------------- |
|
|
702
|
+
| `headerInput` | `string` | `''` | Label text above picker |
|
|
703
|
+
| `value` | `Date \| [Date, Date] \| null` | `null` | Selected date(s) value |
|
|
704
|
+
| `mode` | `'date' \| 'week' \| 'month' \| 'quarter' \| 'year'` | `'date'` | Picker mode |
|
|
705
|
+
| `isRange` | `boolean` | `false` | Enable range selection |
|
|
706
|
+
| `showTime` | `boolean` | `false` | Show time selection |
|
|
707
|
+
| `placeholder` | `string` | `'Select date'` | Placeholder text |
|
|
708
|
+
| `format` | `string` | `'dd/MM/yyyy'` | Date format string |
|
|
709
|
+
| `required` | `boolean` | `false` | Show required indicator |
|
|
710
|
+
| `readonly` | `boolean` | `false` | Read-only state |
|
|
711
|
+
| `disabled` | `boolean` | `false` | Disabled state |
|
|
712
|
+
| `disabledDate` | `(date: Date) => boolean` | - | Function to disable specific dates |
|
|
713
|
+
| `dropdownPlacement` | `'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight'` | `'bottomLeft'` | Dropdown position |
|
|
714
|
+
| `width` | `string` | `'100%'` | Component width |
|
|
710
715
|
|
|
711
716
|
**Outputs:**
|
|
712
717
|
|
|
713
|
-
| Output
|
|
714
|
-
|
|
|
715
|
-
| `dateChange`
|
|
716
|
-
| `rangeChange`
|
|
717
|
-
| `openChange`
|
|
718
|
-
| `ok`
|
|
719
|
-
| `panelChange`
|
|
718
|
+
| Output | Type | Description |
|
|
719
|
+
| ------------- | ------------------------------------ | ---------------------------------- |
|
|
720
|
+
| `dateChange` | `EventEmitter<Date \| null>` | Emits when single date is selected |
|
|
721
|
+
| `rangeChange` | `EventEmitter<[Date, Date] \| null>` | Emits when date range is selected |
|
|
722
|
+
| `openChange` | `EventEmitter<boolean>` | Emits when picker opens/closes |
|
|
723
|
+
| `ok` | `EventEmitter<Date \| [Date, Date]>` | Emits when OK button is clicked |
|
|
724
|
+
| `panelChange` | `EventEmitter<any>` | Emits on panel change events |
|
|
720
725
|
|
|
721
726
|
**Features:**
|
|
722
727
|
|
|
@@ -966,7 +971,7 @@ export class MyComponent {
|
|
|
966
971
|
|
|
967
972
|
#### ModalComponent
|
|
968
973
|
|
|
969
|
-
A flexible modal dialog with customizable themes and responsive design.
|
|
974
|
+
A flexible modal dialog with customizable themes and responsive design, supporting named content slots for body and footer.
|
|
970
975
|
|
|
971
976
|
**Selector:** `app-modal`
|
|
972
977
|
|
|
@@ -981,22 +986,27 @@ import { CommonModule } from "@angular/common";
|
|
|
981
986
|
<button (click)="isModalOpen = true">Open Modal</button>
|
|
982
987
|
|
|
983
988
|
<!-- Modal component -->
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
<
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
989
|
+
<app-modal [title]="'User Settings'" [isOpen]="isModalOpen" [width]="'600px'" [minHeight]="'400px'" [theme]="'default'" (closeModal)="isModalOpen = false">
|
|
990
|
+
<!-- Modal Body Content -->
|
|
991
|
+
<div modal-body>
|
|
992
|
+
<h3>Account Information</h3>
|
|
993
|
+
<p>Update your account details and preferences below.</p>
|
|
994
|
+
<!-- Your form or other components -->
|
|
995
|
+
</div>
|
|
996
|
+
|
|
997
|
+
<!-- Modal Footer Content -->
|
|
998
|
+
<div modal-footer>
|
|
999
|
+
<button (click)="isModalOpen = false">Cancel</button>
|
|
1000
|
+
<button class="primary" (click)="saveSettings()">Save Changes</button>
|
|
1001
|
+
</div>
|
|
1002
|
+
</app-modal>
|
|
993
1003
|
`,
|
|
994
1004
|
})
|
|
995
1005
|
export class MyComponent {
|
|
996
1006
|
isModalOpen = false;
|
|
997
1007
|
|
|
998
|
-
|
|
999
|
-
console.log("
|
|
1008
|
+
saveSettings() {
|
|
1009
|
+
console.log("Settings saved");
|
|
1000
1010
|
this.isModalOpen = false;
|
|
1001
1011
|
}
|
|
1002
1012
|
}
|
|
@@ -1007,10 +1017,10 @@ export class MyComponent {
|
|
|
1007
1017
|
| Input | Type | Default | Description |
|
|
1008
1018
|
| ----------- | ---------------------- | ----------- | ------------------------- |
|
|
1009
1019
|
| `title` | `string` | `''` | Modal title text |
|
|
1010
|
-
| `width` | `string` | `'800px'` | Modal width
|
|
1020
|
+
| `width` | `string` | `'800px'` | Modal width (CSS value) |
|
|
1011
1021
|
| `minHeight` | `string` | `'300px'` | Minimum modal height |
|
|
1012
1022
|
| `isOpen` | `boolean` | `false` | Controls modal visibility |
|
|
1013
|
-
| `theme` | `'default' \| 'white'` | `'default'` |
|
|
1023
|
+
| `theme` | `'default' \| 'white'` | `'default'` | Visual color theme |
|
|
1014
1024
|
|
|
1015
1025
|
**Outputs:**
|
|
1016
1026
|
|
|
@@ -1018,23 +1028,28 @@ export class MyComponent {
|
|
|
1018
1028
|
| ------------ | -------------------- | --------------------------------- |
|
|
1019
1029
|
| `closeModal` | `EventEmitter<void>` | Emits when modal should be closed |
|
|
1020
1030
|
|
|
1021
|
-
**Content Projection:**
|
|
1031
|
+
**Content Projection (Slots):**
|
|
1032
|
+
|
|
1033
|
+
The modal uses named content projection to organize your content:
|
|
1022
1034
|
|
|
1023
|
-
|
|
1035
|
+
- `[modal-body]`: The main content area of the modal.
|
|
1036
|
+
- `[modal-footer]`: The bottom action area (typically for buttons).
|
|
1024
1037
|
|
|
1025
1038
|
```html
|
|
1026
|
-
<app-modal [title]="'Custom Modal'" [isOpen]="true"
|
|
1027
|
-
<
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1039
|
+
<app-modal [title]="'Custom Modal'" [isOpen]="true">
|
|
1040
|
+
<div modal-body>
|
|
1041
|
+
<!-- Main content goes here -->
|
|
1042
|
+
</div>
|
|
1043
|
+
<div modal-footer>
|
|
1044
|
+
<!-- Footer actions go here -->
|
|
1045
|
+
</div>
|
|
1031
1046
|
</app-modal>
|
|
1032
1047
|
```
|
|
1033
1048
|
|
|
1034
1049
|
**Themes:**
|
|
1035
1050
|
|
|
1036
|
-
- `default` -
|
|
1037
|
-
- `white` -
|
|
1051
|
+
- `default` - Uses `var(--brand-100)` background with `var(--brand-600)` title.
|
|
1052
|
+
- `white` - Uses `var(--neutral-color-10)` background with `var(--neutral-color-50)` title.
|
|
1038
1053
|
|
|
1039
1054
|
---
|
|
1040
1055
|
|
|
@@ -1353,8 +1368,8 @@ export class MyComponent {
|
|
|
1353
1368
|
// Use them in components
|
|
1354
1369
|
<app-button-container
|
|
1355
1370
|
content="Submit"
|
|
1356
|
-
|
|
1357
|
-
|
|
1371
|
+
bgDefault="var(--brand-500)"
|
|
1372
|
+
colorDefault="var(--neutral-100)"
|
|
1358
1373
|
></app-button-container>
|
|
1359
1374
|
```
|
|
1360
1375
|
|
|
@@ -290,48 +290,54 @@ const BUTTON_SIZE_MAP = {
|
|
|
290
290
|
};
|
|
291
291
|
|
|
292
292
|
class ButtonContainerComponent {
|
|
293
|
-
|
|
293
|
+
/* ===== SIZE ===== */
|
|
294
294
|
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 ===== */
|
|
295
305
|
content;
|
|
296
306
|
fontSize;
|
|
307
|
+
/* ===== ICON ===== */
|
|
297
308
|
leftIcon;
|
|
298
309
|
leftIconData;
|
|
299
310
|
rightIcon;
|
|
300
311
|
rightIconData;
|
|
301
|
-
|
|
302
|
-
|
|
312
|
+
/* ===== COLORS ===== */
|
|
313
|
+
bgDefault = 'var(--neutral-color-100)';
|
|
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 ===== */
|
|
303
320
|
border;
|
|
304
321
|
borderRadius = '8px';
|
|
305
322
|
width;
|
|
306
323
|
height = '36px';
|
|
307
324
|
padding;
|
|
308
|
-
|
|
309
|
-
|
|
325
|
+
/* ===== STATE ===== */
|
|
326
|
+
disabled = false;
|
|
327
|
+
/* ===== EVENT ===== */
|
|
310
328
|
buttonClick = new EventEmitter();
|
|
311
|
-
get sizeStyle() {
|
|
312
|
-
return this.size
|
|
313
|
-
? BUTTON_SIZE_MAP[this.size]
|
|
314
|
-
: {
|
|
315
|
-
minWidth: 'auto',
|
|
316
|
-
minHeight: 'auto',
|
|
317
|
-
fontSize: 'inherit',
|
|
318
|
-
iconSize: '20px',
|
|
319
|
-
contentWidth: 'auto',
|
|
320
|
-
contentHeight: 'auto',
|
|
321
|
-
};
|
|
322
|
-
}
|
|
323
329
|
handleClick() {
|
|
324
|
-
this.
|
|
330
|
+
if (!this.disabled) {
|
|
331
|
+
this.buttonClick.emit();
|
|
332
|
+
}
|
|
325
333
|
}
|
|
326
334
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ButtonContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
327
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ButtonContainerComponent, isStandalone: true, selector: "app-button-container", inputs: {
|
|
335
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ButtonContainerComponent, isStandalone: true, selector: "app-button-container", inputs: { size: "size", content: "content", fontSize: "fontSize", leftIcon: "leftIcon", leftIconData: "leftIconData", rightIcon: "rightIcon", rightIconData: "rightIconData", bgDefault: "bgDefault", bgHover: "bgHover", bgDisabled: "bgDisabled", colorDefault: "colorDefault", colorHover: "colorHover", colorDisabled: "colorDisabled", border: "border", borderRadius: "borderRadius", width: "width", height: "height", padding: "padding", disabled: "disabled" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\r\n class=\"button-container\"\r\n [disabled]=\"disabled\"\r\n (click)=\"handleClick()\"\r\n [style.minWidth]=\"sizeStyle.minWidth\"\r\n [style.minHeight]=\"sizeStyle.minHeight\"\r\n [style.width]=\"width\"\r\n [style.height]=\"height\"\r\n [style.padding]=\"padding\"\r\n [style.border]=\"border\"\r\n [style.borderRadius]=\"borderRadius\"\r\n [style.--btn-bg]=\"bgDefault\"\r\n [style.--btn-bg-hover]=\"bgHover\"\r\n [style.--btn-bg-disabled]=\"bgDisabled\"\r\n [style.--btn-color]=\"colorDefault\"\r\n [style.--btn-color-hover]=\"colorHover\"\r\n [style.--btn-color-disabled]=\"colorDisabled\"\r\n>\r\n <!-- LEFT ICON -->\r\n @if (leftIcon || leftIconData?.length) {\r\n @for (icon of leftIconData; track icon) {\r\n <app-icon [iconData]=\"icon\"></app-icon>\r\n }\r\n @if (leftIcon && !leftIconData?.length) {\r\n <app-icon [icon]=\"leftIcon\"></app-icon>\r\n }\r\n }\r\n\r\n <!-- CONTENT -->\r\n @if (content) {\r\n <span\r\n class=\"button-content\"\r\n [style.fontSize]=\"fontSize || sizeStyle.fontSize\"\r\n >\r\n {{ content }}\r\n </span>\r\n }\r\n\r\n <!-- RIGHT ICON -->\r\n @if (rightIcon || rightIconData?.length) {\r\n @for (icon of rightIconData; track icon) {\r\n <app-icon [iconData]=\"icon\"></app-icon>\r\n }\r\n @if (rightIcon && !rightIconData?.length) {\r\n <app-icon [icon]=\"rightIcon\"></app-icon>\r\n }\r\n }\r\n</button>\r\n", styles: [".button-container{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:500;border:none;cursor:pointer;background-color:var(--btn-bg);color:var(--btn-color);transition:background-color .2s ease,color .2s ease,opacity .2s ease}.button-container:hover:not(:disabled):not(.disabled){background-color:var(--btn-bg-hover);color:var(--btn-color-hover)}.button-container.disabled,.button-container:disabled{cursor:not-allowed;opacity:.6;background-color:var(--btn-bg-disabled);color:var(--btn-color-disabled)}.button-content{white-space:nowrap;color:currentColor}app-icon{color:currentColor}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["iconData", "icon", "colorIcon", "routerLink", "width", "height", "colorIconHover", "backgroundColorHover"], outputs: ["clicked"] }] });
|
|
328
336
|
}
|
|
329
337
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ButtonContainerComponent, decorators: [{
|
|
330
338
|
type: Component,
|
|
331
|
-
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.
|
|
332
|
-
}], propDecorators: {
|
|
333
|
-
type: Input
|
|
334
|
-
}], size: [{
|
|
339
|
+
args: [{ selector: 'app-button-container', standalone: true, imports: [CommonModule, IconComponent], template: "<button\r\n class=\"button-container\"\r\n [disabled]=\"disabled\"\r\n (click)=\"handleClick()\"\r\n [style.minWidth]=\"sizeStyle.minWidth\"\r\n [style.minHeight]=\"sizeStyle.minHeight\"\r\n [style.width]=\"width\"\r\n [style.height]=\"height\"\r\n [style.padding]=\"padding\"\r\n [style.border]=\"border\"\r\n [style.borderRadius]=\"borderRadius\"\r\n [style.--btn-bg]=\"bgDefault\"\r\n [style.--btn-bg-hover]=\"bgHover\"\r\n [style.--btn-bg-disabled]=\"bgDisabled\"\r\n [style.--btn-color]=\"colorDefault\"\r\n [style.--btn-color-hover]=\"colorHover\"\r\n [style.--btn-color-disabled]=\"colorDisabled\"\r\n>\r\n <!-- LEFT ICON -->\r\n @if (leftIcon || leftIconData?.length) {\r\n @for (icon of leftIconData; track icon) {\r\n <app-icon [iconData]=\"icon\"></app-icon>\r\n }\r\n @if (leftIcon && !leftIconData?.length) {\r\n <app-icon [icon]=\"leftIcon\"></app-icon>\r\n }\r\n }\r\n\r\n <!-- CONTENT -->\r\n @if (content) {\r\n <span\r\n class=\"button-content\"\r\n [style.fontSize]=\"fontSize || sizeStyle.fontSize\"\r\n >\r\n {{ content }}\r\n </span>\r\n }\r\n\r\n <!-- RIGHT ICON -->\r\n @if (rightIcon || rightIconData?.length) {\r\n @for (icon of rightIconData; track icon) {\r\n <app-icon [iconData]=\"icon\"></app-icon>\r\n }\r\n @if (rightIcon && !rightIconData?.length) {\r\n <app-icon [icon]=\"rightIcon\"></app-icon>\r\n }\r\n }\r\n</button>\r\n", styles: [".button-container{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:500;border:none;cursor:pointer;background-color:var(--btn-bg);color:var(--btn-color);transition:background-color .2s ease,color .2s ease,opacity .2s ease}.button-container:hover:not(:disabled):not(.disabled){background-color:var(--btn-bg-hover);color:var(--btn-color-hover)}.button-container.disabled,.button-container:disabled{cursor:not-allowed;opacity:.6;background-color:var(--btn-bg-disabled);color:var(--btn-color-disabled)}.button-content{white-space:nowrap;color:currentColor}app-icon{color:currentColor}\n"] }]
|
|
340
|
+
}], propDecorators: { size: [{
|
|
335
341
|
type: Input
|
|
336
342
|
}], content: [{
|
|
337
343
|
type: Input
|
|
@@ -345,9 +351,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
345
351
|
type: Input
|
|
346
352
|
}], rightIconData: [{
|
|
347
353
|
type: Input
|
|
348
|
-
}],
|
|
354
|
+
}], bgDefault: [{
|
|
349
355
|
type: Input
|
|
350
|
-
}],
|
|
356
|
+
}], bgHover: [{
|
|
357
|
+
type: Input
|
|
358
|
+
}], bgDisabled: [{
|
|
359
|
+
type: Input
|
|
360
|
+
}], colorDefault: [{
|
|
361
|
+
type: Input
|
|
362
|
+
}], colorHover: [{
|
|
363
|
+
type: Input
|
|
364
|
+
}], colorDisabled: [{
|
|
351
365
|
type: Input
|
|
352
366
|
}], border: [{
|
|
353
367
|
type: Input
|
|
@@ -359,9 +373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
359
373
|
type: Input
|
|
360
374
|
}], padding: [{
|
|
361
375
|
type: Input
|
|
362
|
-
}],
|
|
363
|
-
type: Input
|
|
364
|
-
}], marginRight: [{
|
|
376
|
+
}], disabled: [{
|
|
365
377
|
type: Input
|
|
366
378
|
}], buttonClick: [{
|
|
367
379
|
type: Output
|
|
@@ -385,11 +397,11 @@ class SidebarComponent {
|
|
|
385
397
|
console.log('Menu item clicked:', item, event);
|
|
386
398
|
}
|
|
387
399
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
388
|
-
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 [
|
|
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"] }] });
|
|
389
401
|
}
|
|
390
402
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
391
403
|
type: Component,
|
|
392
|
-
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 [
|
|
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"] }]
|
|
393
405
|
}], propDecorators: { data: [{
|
|
394
406
|
type: Input
|
|
395
407
|
}], sidebarWidthCollapse: [{
|
|
@@ -881,11 +893,11 @@ class PopUpConfirmComponent {
|
|
|
881
893
|
this.cancelClick.emit();
|
|
882
894
|
}
|
|
883
895
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PopUpConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
884
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", 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
|
|
896
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", 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\r\n class=\"pop-up-confirm-overlay\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n aria-labelledby=\"popup-title\"\r\n>\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\r\n size=\"md\"\r\n content=\"Quay L\u1EA1i\"\r\n [bgDefault]=\"colorButton\"\r\n color=\"#fff\"\r\n (buttonClick)=\"onCancel()\"\r\n ></app-button-container>\r\n <app-button-container\r\n size=\"md\"\r\n content=\"\u0110\u1ED3ng \u00DD\"\r\n [bgDefault]=\"colorButton\"\r\n color=\"#fff\"\r\n (buttonClick)=\"onConfirm()\"\r\n ></app-button-container>\r\n </div>\r\n </div>\r\n</div>\r\n", 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", "leftIconData", "rightIcon", "rightIconData", "bgDefault", "bgHover", "bgDisabled", "colorDefault", "colorHover", "colorDisabled", "border", "borderRadius", "width", "height", "padding", "disabled"], outputs: ["buttonClick"] }] });
|
|
885
897
|
}
|
|
886
898
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PopUpConfirmComponent, decorators: [{
|
|
887
899
|
type: Component,
|
|
888
|
-
args: [{ selector: 'app-pop-up-confirm', standalone: true, imports: [CommonModule, ButtonContainerComponent], template: "<div
|
|
900
|
+
args: [{ selector: 'app-pop-up-confirm', standalone: true, imports: [CommonModule, ButtonContainerComponent], template: "<div\r\n class=\"pop-up-confirm-overlay\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n aria-labelledby=\"popup-title\"\r\n>\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\r\n size=\"md\"\r\n content=\"Quay L\u1EA1i\"\r\n [bgDefault]=\"colorButton\"\r\n color=\"#fff\"\r\n (buttonClick)=\"onCancel()\"\r\n ></app-button-container>\r\n <app-button-container\r\n size=\"md\"\r\n content=\"\u0110\u1ED3ng \u00DD\"\r\n [bgDefault]=\"colorButton\"\r\n color=\"#fff\"\r\n (buttonClick)=\"onConfirm()\"\r\n ></app-button-container>\r\n </div>\r\n </div>\r\n</div>\r\n", 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"] }]
|
|
889
901
|
}], propDecorators: { imgUrl: [{
|
|
890
902
|
type: Input
|
|
891
903
|
}], title: [{
|