@goat-bravos/intern-hub-layout 1.2.0 → 1.2.1

package/fesm2022/goat-bravos-intern-hub-layout.mjs

@@ -0,0 +1,826 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, Component, HostListener, ViewChild } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+
+class IconComponent {
+    iconData;
+    icon;
+    colorIcon;
+    routerLink;
+    width = '20px';
+    height = '20px';
+    colorIconHover;
+    backgroundColorHover;
+    clicked = new EventEmitter();
+    get iconClass() {
+        if (this.iconData?.icon) {
+            return this.iconData.icon;
+        }
+        return this.icon || '';
+    }
+    get iconColor() {
+        return this.iconData?.colorIcon || this.colorIcon;
+    }
+    get iconWidth() {
+        return this.iconData?.width || this.width || '20px';
+    }
+    get iconHeight() {
+        return this.iconData?.height || this.height || '20px';
+    }
+    get iconRouterLink() {
+        return this.iconData?.routerLink || this.routerLink;
+    }
+    handleClick(event) {
+        if (!this.iconRouterLink) {
+            event.preventDefault();
+            this.clicked.emit(event);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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 }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            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"] }]
+        }], propDecorators: { iconData: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], colorIcon: [{
+                type: Input
+            }], routerLink: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], colorIconHover: [{
+                type: Input
+            }], backgroundColorHover: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class HeaderComponent {
+    data = {
+        headerItems: [],
+        userName: 'Guest',
+        userIcon: 'dsi-user-01-line',
+        dropdownIcon: 'dsi-arrow-down-solid',
+        logo: 'assets/FPT-IS-Logo.png',
+    };
+    handleActionClick(item, event) {
+        if (item.method) {
+            event.preventDefault();
+            item.method();
+        }
+    }
+    getIconData(icon, colorIcon, width, height) {
+        if (!icon)
+            return undefined;
+        if (typeof icon === 'string') {
+            return {
+                icon,
+                colorIcon,
+                width,
+                height,
+            };
+        }
+        return icon;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: HeaderComponent, isStandalone: true, selector: "app-header-component", inputs: { data: "data" }, ngImport: i0, template: "<header class=\"app-header\">\r\n  <div class=\"header-left\">\r\n    <img\r\n      class=\"logo\"\r\n      [src]=\"data.logo || 'assets/FPT-IS-Logo.png'\"\r\n      alt=\"Logo\"\r\n    />\r\n  </div>\r\n\r\n  <div class=\"header-right\">\r\n    @for (item of data.headerItems; track $index) {\r\n      <button\r\n        class=\"header-btn\"\r\n        [attr.aria-label]=\"item.content\"\r\n        (click)=\"handleActionClick(item, $event)\"\r\n      >\r\n        <app-icon\r\n          [iconData]=\"\r\n            getIconData(\r\n              item.icon,\r\n              item.colorIcon,\r\n              item.width || '16px',\r\n              item.height || '16px'\r\n            )\r\n          \"\r\n        ></app-icon>\r\n        @if (item.badge) {\r\n          <span class=\"badge\">{{ item.badge }}</span>\r\n        }\r\n      </button>\r\n    }\r\n\r\n    <div class=\"header-user\">\r\n      <button class=\"user-btn\">\r\n        @if (data.userIcon) {\r\n          <app-icon\r\n            [iconData]=\"\r\n              getIconData(data.userIcon, data.userIconColor, '16px', '16px')\r\n            \"\r\n          ></app-icon>\r\n        }\r\n        <span class=\"user-name\">{{ data.userName }}</span>\r\n        @if (data.dropdownIcon) {\r\n          <app-icon\r\n            [iconData]=\"\r\n              getIconData(\r\n                data.dropdownIcon,\r\n                data.dropdownIconColor,\r\n                '16px',\r\n                '16px'\r\n              )\r\n            \"\r\n          ></app-icon>\r\n        }\r\n      </button>\r\n    </div>\r\n  </div>\r\n</header>\r\n", styles: [":host{width:100%;display:flex;justify-content:center}.app-header{height:70px;width:1370px;display:flex;align-items:center;justify-content:space-between;padding:16px 8px;background-color:transparent;box-sizing:border-box}.header-left{display:flex;align-items:center}.header-left .logo{height:40px;width:auto;object-fit:contain;cursor:pointer}.header-right{display:flex;align-items:center;gap:12px}.header-btn{position:relative;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:var(--radius-full);border:none;cursor:pointer;color:var(--brand-600);transition:all .2s ease-in-out}.header-btn:hover{background-color:var(--neutral-color-100);color:var(--primary-color)}.header-btn .badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:16px 8px;display:flex;align-items:center;justify-content:center;background-color:var(-utility-500);color:var(--neutral-color-100);border-radius:8px;font-size:10px;font-weight:600;line-height:1}.header-user{margin-left:4px;padding-left:16px 8px}.user-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 8px;background:transparent;border:none;border-radius:8px;cursor:pointer;transition:background-color .2s ease}.user-btn:hover{background-color:var(--neutral-color-100)}.user-btn .user-name{font-size:14px;font-weight:700;color:var(--brand-600);white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["iconData", "icon", "colorIcon", "routerLink", "width", "height", "colorIconHover", "backgroundColorHover"], outputs: ["clicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-header-component', standalone: true, imports: [CommonModule, IconComponent], template: "<header class=\"app-header\">\r\n  <div class=\"header-left\">\r\n    <img\r\n      class=\"logo\"\r\n      [src]=\"data.logo || 'assets/FPT-IS-Logo.png'\"\r\n      alt=\"Logo\"\r\n    />\r\n  </div>\r\n\r\n  <div class=\"header-right\">\r\n    @for (item of data.headerItems; track $index) {\r\n      <button\r\n        class=\"header-btn\"\r\n        [attr.aria-label]=\"item.content\"\r\n        (click)=\"handleActionClick(item, $event)\"\r\n      >\r\n        <app-icon\r\n          [iconData]=\"\r\n            getIconData(\r\n              item.icon,\r\n              item.colorIcon,\r\n              item.width || '16px',\r\n              item.height || '16px'\r\n            )\r\n          \"\r\n        ></app-icon>\r\n        @if (item.badge) {\r\n          <span class=\"badge\">{{ item.badge }}</span>\r\n        }\r\n      </button>\r\n    }\r\n\r\n    <div class=\"header-user\">\r\n      <button class=\"user-btn\">\r\n        @if (data.userIcon) {\r\n          <app-icon\r\n            [iconData]=\"\r\n              getIconData(data.userIcon, data.userIconColor, '16px', '16px')\r\n            \"\r\n          ></app-icon>\r\n        }\r\n        <span class=\"user-name\">{{ data.userName }}</span>\r\n        @if (data.dropdownIcon) {\r\n          <app-icon\r\n            [iconData]=\"\r\n              getIconData(\r\n                data.dropdownIcon,\r\n                data.dropdownIconColor,\r\n                '16px',\r\n                '16px'\r\n              )\r\n            \"\r\n          ></app-icon>\r\n        }\r\n      </button>\r\n    </div>\r\n  </div>\r\n</header>\r\n", styles: [":host{width:100%;display:flex;justify-content:center}.app-header{height:70px;width:1370px;display:flex;align-items:center;justify-content:space-between;padding:16px 8px;background-color:transparent;box-sizing:border-box}.header-left{display:flex;align-items:center}.header-left .logo{height:40px;width:auto;object-fit:contain;cursor:pointer}.header-right{display:flex;align-items:center;gap:12px}.header-btn{position:relative;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:var(--radius-full);border:none;cursor:pointer;color:var(--brand-600);transition:all .2s ease-in-out}.header-btn:hover{background-color:var(--neutral-color-100);color:var(--primary-color)}.header-btn .badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:16px 8px;display:flex;align-items:center;justify-content:center;background-color:var(-utility-500);color:var(--neutral-color-100);border-radius:8px;font-size:10px;font-weight:600;line-height:1}.header-user{margin-left:4px;padding-left:16px 8px}.user-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 8px;background:transparent;border:none;border-radius:8px;cursor:pointer;transition:background-color .2s ease}.user-btn:hover{background-color:var(--neutral-color-100)}.user-btn .user-name{font-size:14px;font-weight:700;color:var(--brand-600);white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class FunctionalLabelComponent {
+    iconLeft;
+    iconRight;
+    colorIconLeft;
+    colorIconRight;
+    widthIconLeft = '20px';
+    heightIconLeft = '20px';
+    widthIconRight = '20px';
+    heightIconRight = '20px';
+    colorIconLeftHover;
+    colorIconRightHover;
+    colorContentHover;
+    backgroundColorHover;
+    borderRadiusHover;
+    content = '';
+    colorContent;
+    widthContent = '100%';
+    heightContent = '100%';
+    backgroundColor;
+    borderRadius;
+    width;
+    height;
+    routerLink;
+    isSidebarExpanded = false;
+    clicked = new EventEmitter();
+    isHovered = false;
+    onMouseEnter() {
+        this.isHovered = true;
+    }
+    onMouseLeave() {
+        this.isHovered = false;
+    }
+    get currentBackgroundColor() {
+        return this.isHovered
+            ? this.backgroundColorHover || this.backgroundColor
+            : this.backgroundColor;
+    }
+    get currentBorderRadius() {
+        return this.isHovered
+            ? this.borderRadiusHover || this.borderRadius
+            : this.borderRadius;
+    }
+    get currentColorContent() {
+        return this.isHovered
+            ? this.colorContentHover || this.colorContent
+            : this.colorContent;
+    }
+    get hasIconLeft() {
+        return !!this.iconLeft;
+    }
+    get hasIconRight() {
+        return !!this.iconRight;
+    }
+    // ✅ Chỉ giữ 1 iconLeftData
+    get iconLeftData() {
+        if (!this.iconLeft)
+            return undefined;
+        const color = this.isHovered || this.isSidebarExpanded
+            ? this.colorIconLeftHover || this.colorIconLeft
+            : this.colorIconLeft;
+        if (typeof this.iconLeft === 'string') {
+            return {
+                icon: this.iconLeft,
+                colorIcon: color,
+                width: this.widthIconLeft,
+                height: this.heightIconLeft,
+            };
+        }
+        return {
+            ...this.iconLeft,
+            colorIcon: color || this.iconLeft.colorIcon,
+        };
+    }
+    // ✅ Chỉ giữ 1 iconRightData
+    get iconRightData() {
+        if (!this.iconRight)
+            return undefined;
+        const color = this.isHovered || this.isSidebarExpanded
+            ? this.colorIconRightHover || this.colorIconRight
+            : this.colorIconRight;
+        if (typeof this.iconRight === 'string') {
+            return {
+                icon: this.iconRight,
+                colorIcon: color,
+                width: this.widthIconRight,
+                height: this.heightIconRight,
+            };
+        }
+        return {
+            ...this.iconRight,
+            colorIcon: color || this.iconRight.colorIcon,
+        };
+    }
+    handleClick(event) {
+        if (!this.routerLink) {
+            event.preventDefault();
+            this.clicked.emit(event);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FunctionalLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: FunctionalLabelComponent, isStandalone: true, selector: "app-functional-label", inputs: { iconLeft: "iconLeft", iconRight: "iconRight", colorIconLeft: "colorIconLeft", colorIconRight: "colorIconRight", widthIconLeft: "widthIconLeft", heightIconLeft: "heightIconLeft", widthIconRight: "widthIconRight", heightIconRight: "heightIconRight", colorIconLeftHover: "colorIconLeftHover", colorIconRightHover: "colorIconRightHover", colorContentHover: "colorContentHover", backgroundColorHover: "backgroundColorHover", borderRadiusHover: "borderRadiusHover", content: "content", colorContent: "colorContent", widthContent: "widthContent", heightContent: "heightContent", backgroundColor: "backgroundColor", borderRadius: "borderRadius", width: "width", height: "height", routerLink: "routerLink", isSidebarExpanded: "isSidebarExpanded" }, outputs: { clicked: "clicked" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0, template: "<div\r\n  class=\"functional-label\"\r\n  (click)=\"handleClick($event)\"\r\n  (keydown.enter)=\"handleClick($event)\"\r\n  (keydown.space)=\"handleClick($event)\"\r\n  [attr.tabindex]=\"routerLink ? null : 0\"\r\n  [attr.role]=\"routerLink ? null : 'button'\"\r\n  [style.background-color]=\"currentBackgroundColor\"\r\n  [style.border-radius]=\"currentBorderRadius\"\r\n  [style.width]=\"width\"\r\n  [style.height]=\"height\"\r\n>\r\n  @if (hasIconLeft && iconLeftData) {\r\n    <app-icon\r\n      [iconData]=\"iconLeftData\"\r\n      [width]=\"widthIconLeft\"\r\n      [height]=\"heightIconLeft\"\r\n      [colorIconHover]=\"colorIconLeftHover\"\r\n      [backgroundColorHover]=\"backgroundColorHover\"\r\n    ></app-icon>\r\n  }\r\n  <a\r\n    [routerLink]=\"routerLink\"\r\n    [style.color]=\"currentColorContent\"\r\n    [style.width]=\"widthContent\"\r\n    [style.height]=\"heightContent\"\r\n    >{{ content }}</a\r\n  >\r\n  @if (hasIconRight && iconRightData) {\r\n    <app-icon\r\n      [iconData]=\"iconRightData\"\r\n      [colorIconHover]=\"colorIconRightHover\"\r\n      [backgroundColorHover]=\"backgroundColorHover\"\r\n    ></app-icon>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%}.functional-label{display:flex;align-items:center;justify-content:center;height:40px;padding:0;cursor:pointer;box-sizing:border-box;transition:all .25s ease}.functional-label app-icon{display:flex;flex-shrink:0;justify-content:center;width:44px}.functional-label a{max-width:0;opacity:0;visibility:hidden;white-space:nowrap;overflow:hidden;text-decoration:none;color:var(--neutral-color-400);transform:translate(-10px);transition:all .25s ease;display:flex;justify-content:flex-start;align-items:center}:host-context(.sidebar-wrapper:hover) .functional-label{justify-content:flex-start;padding-left:8px}:host-context(.sidebar-wrapper:hover) .functional-label a{opacity:1;visibility:visible;max-width:200px;transform:translate(0);color:var(--brand-600);flex:1;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["iconData", "icon", "colorIcon", "routerLink", "width", "height", "colorIconHover", "backgroundColorHover"], outputs: ["clicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FunctionalLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-functional-label', standalone: true, imports: [CommonModule, RouterModule, IconComponent], template: "<div\r\n  class=\"functional-label\"\r\n  (click)=\"handleClick($event)\"\r\n  (keydown.enter)=\"handleClick($event)\"\r\n  (keydown.space)=\"handleClick($event)\"\r\n  [attr.tabindex]=\"routerLink ? null : 0\"\r\n  [attr.role]=\"routerLink ? null : 'button'\"\r\n  [style.background-color]=\"currentBackgroundColor\"\r\n  [style.border-radius]=\"currentBorderRadius\"\r\n  [style.width]=\"width\"\r\n  [style.height]=\"height\"\r\n>\r\n  @if (hasIconLeft && iconLeftData) {\r\n    <app-icon\r\n      [iconData]=\"iconLeftData\"\r\n      [width]=\"widthIconLeft\"\r\n      [height]=\"heightIconLeft\"\r\n      [colorIconHover]=\"colorIconLeftHover\"\r\n      [backgroundColorHover]=\"backgroundColorHover\"\r\n    ></app-icon>\r\n  }\r\n  <a\r\n    [routerLink]=\"routerLink\"\r\n    [style.color]=\"currentColorContent\"\r\n    [style.width]=\"widthContent\"\r\n    [style.height]=\"heightContent\"\r\n    >{{ content }}</a\r\n  >\r\n  @if (hasIconRight && iconRightData) {\r\n    <app-icon\r\n      [iconData]=\"iconRightData\"\r\n      [colorIconHover]=\"colorIconRightHover\"\r\n      [backgroundColorHover]=\"backgroundColorHover\"\r\n    ></app-icon>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%}.functional-label{display:flex;align-items:center;justify-content:center;height:40px;padding:0;cursor:pointer;box-sizing:border-box;transition:all .25s ease}.functional-label app-icon{display:flex;flex-shrink:0;justify-content:center;width:44px}.functional-label a{max-width:0;opacity:0;visibility:hidden;white-space:nowrap;overflow:hidden;text-decoration:none;color:var(--neutral-color-400);transform:translate(-10px);transition:all .25s ease;display:flex;justify-content:flex-start;align-items:center}:host-context(.sidebar-wrapper:hover) .functional-label{justify-content:flex-start;padding-left:8px}:host-context(.sidebar-wrapper:hover) .functional-label a{opacity:1;visibility:visible;max-width:200px;transform:translate(0);color:var(--brand-600);flex:1;text-align:center}\n"] }]
+        }], propDecorators: { iconLeft: [{
+                type: Input
+            }], iconRight: [{
+                type: Input
+            }], colorIconLeft: [{
+                type: Input
+            }], colorIconRight: [{
+                type: Input
+            }], widthIconLeft: [{
+                type: Input
+            }], heightIconLeft: [{
+                type: Input
+            }], widthIconRight: [{
+                type: Input
+            }], heightIconRight: [{
+                type: Input
+            }], colorIconLeftHover: [{
+                type: Input
+            }], colorIconRightHover: [{
+                type: Input
+            }], colorContentHover: [{
+                type: Input
+            }], backgroundColorHover: [{
+                type: Input
+            }], borderRadiusHover: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], colorContent: [{
+                type: Input
+            }], widthContent: [{
+                type: Input
+            }], heightContent: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], borderRadius: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], routerLink: [{
+                type: Input
+            }], isSidebarExpanded: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+class SidebarComponent {
+    data = { menuItems: [] };
+    isSidebarExpanded = false;
+    onMouseEnter() {
+        this.isSidebarExpanded = true;
+    }
+    onMouseLeave() {
+        this.isSidebarExpanded = false;
+    }
+    onMenuItemClick(item, event) {
+        console.log('Menu item clicked:', item, event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: SidebarComponent, isStandalone: true, selector: "app-sidebar", inputs: { data: "data" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0, template: "<div class=\"sidebar-wrapper\">\r\n  <aside\r\n    class=\"sidebar\"\r\n    [style.background-color]=\"!isSidebarExpanded ? data.backgroundColor : null\"\r\n  >\r\n    @for (item of data.menuItems; track $index) {\r\n      <app-functional-label\r\n        class=\"sidebar-item\"\r\n        [isSidebarExpanded]=\"isSidebarExpanded\"\r\n        [iconLeft]=\"item.iconLeft\"\r\n        [iconRight]=\"item.iconRight\"\r\n        [content]=\"item.content\"\r\n        [routerLink]=\"item.url\"\r\n        [colorIconLeft]=\"item.colorIconLeft\"\r\n        [colorIconRight]=\"item.colorIconRight\"\r\n        [colorContent]=\"item.colorContent\"\r\n        [backgroundColor]=\"item.backgroundColor\"\r\n        [borderRadius]=\"item.borderRadius\"\r\n        (clicked)=\"onMenuItemClick(item, $event)\"\r\n        [colorIconLeftHover]=\"item.colorIconLeftHover\"\r\n        [colorIconRightHover]=\"item.colorIconRightHover\"\r\n        [backgroundColorHover]=\"item.backgroundColorHover\"\r\n        [width]=\"item.width\"\r\n        [height]=\"item.height\"\r\n      ></app-functional-label>\r\n    }\r\n  </aside>\r\n</div>\r\n", styles: [":host{display:block;height:100vh}.sidebar-wrapper{width:44px;height:100vh;transition:width .3s ease;background-color:transparent}.sidebar{display:flex;flex-direction:column;gap:8px;width:44px;height:100%;padding:8px;box-sizing:border-box;border-radius:16px;overflow:hidden;transition:width .3s ease,padding .3s ease,background-color .3s ease}.sidebar a{text-decoration:none}.sidebar-wrapper:hover{width:344px}.sidebar-wrapper:hover .sidebar{width:344px;padding:16px 8px;border-radius:16px;background-color:var(--theme-neutral-light-100)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FunctionalLabelComponent, selector: "app-functional-label", inputs: ["iconLeft", "iconRight", "colorIconLeft", "colorIconRight", "widthIconLeft", "heightIconLeft", "widthIconRight", "heightIconRight", "colorIconLeftHover", "colorIconRightHover", "colorContentHover", "backgroundColorHover", "borderRadiusHover", "content", "colorContent", "widthContent", "heightContent", "backgroundColor", "borderRadius", "width", "height", "routerLink", "isSidebarExpanded"], outputs: ["clicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sidebar', standalone: true, imports: [CommonModule, FunctionalLabelComponent], template: "<div class=\"sidebar-wrapper\">\r\n  <aside\r\n    class=\"sidebar\"\r\n    [style.background-color]=\"!isSidebarExpanded ? data.backgroundColor : null\"\r\n  >\r\n    @for (item of data.menuItems; track $index) {\r\n      <app-functional-label\r\n        class=\"sidebar-item\"\r\n        [isSidebarExpanded]=\"isSidebarExpanded\"\r\n        [iconLeft]=\"item.iconLeft\"\r\n        [iconRight]=\"item.iconRight\"\r\n        [content]=\"item.content\"\r\n        [routerLink]=\"item.url\"\r\n        [colorIconLeft]=\"item.colorIconLeft\"\r\n        [colorIconRight]=\"item.colorIconRight\"\r\n        [colorContent]=\"item.colorContent\"\r\n        [backgroundColor]=\"item.backgroundColor\"\r\n        [borderRadius]=\"item.borderRadius\"\r\n        (clicked)=\"onMenuItemClick(item, $event)\"\r\n        [colorIconLeftHover]=\"item.colorIconLeftHover\"\r\n        [colorIconRightHover]=\"item.colorIconRightHover\"\r\n        [backgroundColorHover]=\"item.backgroundColorHover\"\r\n        [width]=\"item.width\"\r\n        [height]=\"item.height\"\r\n      ></app-functional-label>\r\n    }\r\n  </aside>\r\n</div>\r\n", styles: [":host{display:block;height:100vh}.sidebar-wrapper{width:44px;height:100vh;transition:width .3s ease;background-color:transparent}.sidebar{display:flex;flex-direction:column;gap:8px;width:44px;height:100%;padding:8px;box-sizing:border-box;border-radius:16px;overflow:hidden;transition:width .3s ease,padding .3s ease,background-color .3s ease}.sidebar a{text-decoration:none}.sidebar-wrapper:hover{width:344px}.sidebar-wrapper:hover .sidebar{width:344px;padding:16px 8px;border-radius:16px;background-color:var(--theme-neutral-light-100)}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+const BUTTON_SIZE_MAP = {
+    xs: {
+        minWidth: '47px',
+        minHeight: '24px',
+        fontSize: 'var(--font-xs)',
+        iconSize: '14px',
+        contentWidth: '32px',
+        contentHeight: '16px',
+    },
+    sm: {
+        minWidth: '96px',
+        minHeight: '28px',
+        fontSize: 'var(--font-sm)',
+        iconSize: '16px',
+        contentWidth: '44px',
+        contentHeight: '20px',
+    },
+    md: {
+        minWidth: '116px',
+        minHeight: '36px',
+        fontSize: 'var(--font-sm)',
+        iconSize: '20px',
+        contentWidth: '52px',
+        contentHeight: '20px',
+    },
+    lg: {
+        minWidth: '120px',
+        minHeight: '44px',
+        fontSize: 'var(--font-sm)',
+        iconSize: '20px',
+        contentWidth: '52px',
+        contentHeight: '20px',
+    },
+};
+
+class ButtonContainerComponent {
+    size = 'md';
+    content = '';
+    fontSize;
+    leftIcon;
+    rightIcon;
+    color = 'var(--brand-100)';
+    backgroundColor = 'var(--utility-900)';
+    borderColor = 'var(--brand-100)';
+    buttonClick = new EventEmitter();
+    get sizeStyle() {
+        return BUTTON_SIZE_MAP[this.size];
+    }
+    handleClick() {
+        this.buttonClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ButtonContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ButtonContainerComponent, isStandalone: true, selector: "app-button-container", inputs: { size: "size", content: "content", fontSize: "fontSize", leftIcon: "leftIcon", rightIcon: "rightIcon", color: "color", backgroundColor: "backgroundColor", borderColor: "borderColor" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button class=\"button-container\" [style.minWidth]=\"sizeStyle.minWidth\" [style.minHeight]=\"sizeStyle.minHeight\" [style.color]=\"color\"\r\n    [style.backgroundColor]=\"backgroundColor\" [style.borderColor]=\"borderColor\" (click)=\"handleClick()\">\r\n    \r\n    @if(leftIcon){\r\n    <i class=\"button-icon\" [style.width]=\"sizeStyle.iconSize\" [style.height]=\"sizeStyle.iconSize\" [style.fontSize]=\"sizeStyle.iconSize\">\r\n        {{leftIcon}}\r\n    </i>\r\n    }\r\n\r\n    <span class=\"button-content\" [style.minWidth]=\"sizeStyle.contentWidth\" [style.minHeight]=\"sizeStyle.contentHeight\" \r\n        [style.fontSize]=\"fontSize || sizeStyle.fontSize\" [style.color]=\"color\">\r\n        {{ content }}\r\n    </span>\r\n\r\n    @if(rightIcon){\r\n    <i class=\"button-icon\" [style.width]=\"sizeStyle.iconSize\" [style.height]=\"sizeStyle.iconSize\" [style.fontSize]=\"sizeStyle.iconSize\" [style.color]=\"color\">\r\n        {{rightIcon}}\r\n    </i>\r\n    }\r\n</button>", styles: [".button-container{display:flex;justify-content:center;align-items:center;gap:8px;border-radius:var(--radius-md);cursor:pointer;padding:8px 16px;border:none;font-weight:500;transition:filter .15s ease,transform .1s ease}.button-container:hover{filter:brightness(1.1)}.button-container:active{filter:brightness(.9);transform:scale(.98)}.button-container:focus{outline:2px solid var(--brand-600);outline-offset:2px}.button-content{display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.button-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ButtonContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-button-container', standalone: true, imports: [CommonModule], template: "<button class=\"button-container\" [style.minWidth]=\"sizeStyle.minWidth\" [style.minHeight]=\"sizeStyle.minHeight\" [style.color]=\"color\"\r\n    [style.backgroundColor]=\"backgroundColor\" [style.borderColor]=\"borderColor\" (click)=\"handleClick()\">\r\n    \r\n    @if(leftIcon){\r\n    <i class=\"button-icon\" [style.width]=\"sizeStyle.iconSize\" [style.height]=\"sizeStyle.iconSize\" [style.fontSize]=\"sizeStyle.iconSize\">\r\n        {{leftIcon}}\r\n    </i>\r\n    }\r\n\r\n    <span class=\"button-content\" [style.minWidth]=\"sizeStyle.contentWidth\" [style.minHeight]=\"sizeStyle.contentHeight\" \r\n        [style.fontSize]=\"fontSize || sizeStyle.fontSize\" [style.color]=\"color\">\r\n        {{ content }}\r\n    </span>\r\n\r\n    @if(rightIcon){\r\n    <i class=\"button-icon\" [style.width]=\"sizeStyle.iconSize\" [style.height]=\"sizeStyle.iconSize\" [style.fontSize]=\"sizeStyle.iconSize\" [style.color]=\"color\">\r\n        {{rightIcon}}\r\n    </i>\r\n    }\r\n</button>", styles: [".button-container{display:flex;justify-content:center;align-items:center;gap:8px;border-radius:var(--radius-md);cursor:pointer;padding:8px 16px;border:none;font-weight:500;transition:filter .15s ease,transform .1s ease}.button-container:hover{filter:brightness(1.1)}.button-container:active{filter:brightness(.9);transform:scale(.98)}.button-container:focus{outline:2px solid var(--brand-600);outline-offset:2px}.button-content{display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.button-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], fontSize: [{
+                type: Input
+            }], leftIcon: [{
+                type: Input
+            }], rightIcon: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], borderColor: [{
+                type: Input
+            }], buttonClick: [{
+                type: Output
+            }] } });
+
+class LabelButtonComponent {
+    label = '';
+    bgColor = '';
+    borderColor = '';
+    width = '100%';
+    height = '28px';
+    textColor = 'var(--neutral-100)';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LabelButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: LabelButtonComponent, isStandalone: true, selector: "app-label-button", inputs: { label: "label", bgColor: "bgColor", borderColor: "borderColor", width: "width", height: "height", textColor: "textColor" }, ngImport: i0, template: "<button\n  [style.background-color]=\"bgColor\"\n  [style.border-color]=\"borderColor\"\n  [style.color]=\"textColor\"\n  [style.width]=\"width\"\n  [style.height]=\"height\"\n  class=\"label-button\"\n  type=\"button\"\n>\n  {{ label }}\n</button>\n", styles: [".label-button{padding:16px 8px;border-radius:16px;border:1px solid var(--border-color);background-color:var(--bg-color);font-size:var(--font-xs);font-weight:var(--font-weight-medium);line-height:var(--line-height-xs);display:flex;justify-content:center;align-items:center;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LabelButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-label-button', standalone: true, imports: [CommonModule], template: "<button\n  [style.background-color]=\"bgColor\"\n  [style.border-color]=\"borderColor\"\n  [style.color]=\"textColor\"\n  [style.width]=\"width\"\n  [style.height]=\"height\"\n  class=\"label-button\"\n  type=\"button\"\n>\n  {{ label }}\n</button>\n", styles: [".label-button{padding:16px 8px;border-radius:16px;border:1px solid var(--border-color);background-color:var(--bg-color);font-size:var(--font-xs);font-weight:var(--font-weight-medium);line-height:var(--line-height-xs);display:flex;justify-content:center;align-items:center;text-align:center}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], bgColor: [{
+                type: Input
+            }], borderColor: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], textColor: [{
+                type: Input
+            }] } });
+
+class InputTextComponent {
+    headerInput = '';
+    placeholder = '';
+    readonly = false;
+    required = false;
+    width = '100%';
+    maxLength = 0; // 0 = no limit
+    showLimit = false;
+    icon = '';
+    typeInput = 'text';
+    valueChange = new EventEmitter();
+    iconClick = new EventEmitter();
+    _value = '';
+    onIconClick() {
+        this.iconClick.emit();
+    }
+    set value(val) {
+        this._value = val || '';
+    }
+    get value() {
+        return this._value;
+    }
+    get currentLength() {
+        return this._value?.length || 0;
+    }
+    get limit() {
+        if (!this.showLimit || this.maxLength <= 0)
+            return '';
+        return `${this.currentLength}/${this.maxLength}`;
+    }
+    onInput(event) {
+        const input = event.target;
+        let newValue = input.value;
+        // Enforce maxLength if set
+        if (this.maxLength > 0 && newValue.length > this.maxLength) {
+            newValue = newValue.substring(0, this.maxLength);
+            input.value = newValue;
+        }
+        this._value = newValue;
+        this.valueChange.emit(this._value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: InputTextComponent, isStandalone: true, selector: "app-input-text", inputs: { headerInput: "headerInput", placeholder: "placeholder", readonly: "readonly", required: "required", width: "width", maxLength: "maxLength", showLimit: "showLimit", icon: "icon", typeInput: "typeInput", value: "value" }, outputs: { valueChange: "valueChange", iconClick: "iconClick" }, ngImport: i0, template: "<div class=\"input-form\">\r\n  <div class=\"input-form-content\">\r\n    <label class=\"input-form-label\">\r\n      <span class=\"label-text\" [class.hidden]=\"!headerInput\">\r\n        {{ headerInput }}\r\n        @if (required) {\r\n          <span class=\"required-mark\">*</span>\r\n        }\r\n      </span>\r\n      <div class=\"input-field-wrapper\">\r\n        <input\r\n          [type]=\"typeInput\"\r\n          class=\"input-form-field\"\r\n          [placeholder]=\"placeholder\"\r\n          [readonly]=\"readonly\"\r\n          [required]=\"required\"\r\n          [style.width]=\"width\"\r\n          [value]=\"value\"\r\n          (input)=\"onInput($event)\"\r\n          [attr.maxlength]=\"maxLength > 0 ? maxLength : null\"\r\n        />\r\n        @if (icon) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"input-icon-button\"\r\n            [class.clickable]=\"iconClick.observed\"\r\n            (click)=\"onIconClick()\"\r\n            [attr.aria-label]=\"icon\"\r\n            [disabled]=\"!iconClick.observed\"\r\n          >\r\n            <i [class]=\"icon\" class=\"input-icon\"></i>\r\n          </button>\r\n        }\r\n      </div>\r\n    </label>\r\n  </div>\r\n  <div class=\"limit\" [class.hidden]=\"!(maxLength > 0 && showLimit)\">\r\n    <span>{{ limit }}</span>\r\n  </div>\r\n</div>\r\n", styles: [".input-form{display:flex;flex-direction:column;justify-content:space-between;gap:4px}.hidden{visibility:hidden}.input-form-label{display:block;font-size:var(--font-sm);font-weight:700;color:var(--neutral-color-700)}.label-text{display:block;margin-bottom:4px;height:20px}.required-mark{color:var(--utility-600);margin-left:2px}.input-form-field{padding:8px 12px;border:1px solid var(--neutral-color-200);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--neutral-color-875);height:36px;width:100%;box-sizing:border-box;background-color:var(--neutral-color-10);transition:border-color .2s ease,box-shadow .2s ease}.input-form-field::placeholder{color:var(--neutral-color-400)}.input-form-field:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 2px rgba(var(--brand-500-rgb, 39, 64, 180),.15)}.input-form-field:read-only{background-color:var(--neutral-color-25);cursor:not-allowed}.input-form-field[type=password]{font-family:Verdana,sans-serif;font-size:16px;letter-spacing:3px}.input-form-field[type=password]::placeholder{font-family:inherit;font-size:var(--font-sm);letter-spacing:normal}.input-field-wrapper:has(.input-icon-button) .input-form-field{padding-right:36px}.input-field-wrapper{position:relative;display:flex;align-items:center}.input-icon-button{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;color:var(--neutral-color-500);transition:color .2s ease;outline:none}.input-icon-button.clickable{cursor:pointer}.input-icon-button.clickable:hover .input-icon{color:var(--brand-500)}.input-icon-button:disabled{cursor:default;pointer-events:none}.input-icon{font-size:14px!important;width:14px;height:14px;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.input-icon:before{font-size:14px!important}.limit{display:flex;justify-content:flex-end}.limit span{font-size:var(--font-xs, 12px);color:var(--neutral-color-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: InputTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-input-text', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"input-form\">\r\n  <div class=\"input-form-content\">\r\n    <label class=\"input-form-label\">\r\n      <span class=\"label-text\" [class.hidden]=\"!headerInput\">\r\n        {{ headerInput }}\r\n        @if (required) {\r\n          <span class=\"required-mark\">*</span>\r\n        }\r\n      </span>\r\n      <div class=\"input-field-wrapper\">\r\n        <input\r\n          [type]=\"typeInput\"\r\n          class=\"input-form-field\"\r\n          [placeholder]=\"placeholder\"\r\n          [readonly]=\"readonly\"\r\n          [required]=\"required\"\r\n          [style.width]=\"width\"\r\n          [value]=\"value\"\r\n          (input)=\"onInput($event)\"\r\n          [attr.maxlength]=\"maxLength > 0 ? maxLength : null\"\r\n        />\r\n        @if (icon) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"input-icon-button\"\r\n            [class.clickable]=\"iconClick.observed\"\r\n            (click)=\"onIconClick()\"\r\n            [attr.aria-label]=\"icon\"\r\n            [disabled]=\"!iconClick.observed\"\r\n          >\r\n            <i [class]=\"icon\" class=\"input-icon\"></i>\r\n          </button>\r\n        }\r\n      </div>\r\n    </label>\r\n  </div>\r\n  <div class=\"limit\" [class.hidden]=\"!(maxLength > 0 && showLimit)\">\r\n    <span>{{ limit }}</span>\r\n  </div>\r\n</div>\r\n", styles: [".input-form{display:flex;flex-direction:column;justify-content:space-between;gap:4px}.hidden{visibility:hidden}.input-form-label{display:block;font-size:var(--font-sm);font-weight:700;color:var(--neutral-color-700)}.label-text{display:block;margin-bottom:4px;height:20px}.required-mark{color:var(--utility-600);margin-left:2px}.input-form-field{padding:8px 12px;border:1px solid var(--neutral-color-200);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--neutral-color-875);height:36px;width:100%;box-sizing:border-box;background-color:var(--neutral-color-10);transition:border-color .2s ease,box-shadow .2s ease}.input-form-field::placeholder{color:var(--neutral-color-400)}.input-form-field:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 2px rgba(var(--brand-500-rgb, 39, 64, 180),.15)}.input-form-field:read-only{background-color:var(--neutral-color-25);cursor:not-allowed}.input-form-field[type=password]{font-family:Verdana,sans-serif;font-size:16px;letter-spacing:3px}.input-form-field[type=password]::placeholder{font-family:inherit;font-size:var(--font-sm);letter-spacing:normal}.input-field-wrapper:has(.input-icon-button) .input-form-field{padding-right:36px}.input-field-wrapper{position:relative;display:flex;align-items:center}.input-icon-button{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;color:var(--neutral-color-500);transition:color .2s ease;outline:none}.input-icon-button.clickable{cursor:pointer}.input-icon-button.clickable:hover .input-icon{color:var(--brand-500)}.input-icon-button:disabled{cursor:default;pointer-events:none}.input-icon{font-size:14px!important;width:14px;height:14px;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.input-icon:before{font-size:14px!important}.limit{display:flex;justify-content:flex-end}.limit span{font-size:var(--font-xs, 12px);color:var(--neutral-color-500)}\n"] }]
+        }], propDecorators: { headerInput: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], showLimit: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], typeInput: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], iconClick: [{
+                type: Output
+            }], value: [{
+                type: Input
+            }] } });
+
+class InputStepperComponent {
+    componentId = `input-stepper-${Math.random().toString(36).substring(2, 9)}`;
+    headerInput = '';
+    placeholder = '';
+    readonly = false;
+    required = false;
+    disabled = false;
+    width = '100%';
+    min = 0;
+    max = 100;
+    error = '';
+    helperText = '';
+    step = 1;
+    state = 'default';
+    valueChange = new EventEmitter();
+    _value = 0;
+    set value(val) {
+        this._value = val || 0;
+    }
+    get value() {
+        return this._value;
+    }
+    increment() {
+        if (this.readonly || this.disabled)
+            return;
+        const newValue = this._value + this.step;
+        if (newValue <= this.max) {
+            this._value = newValue;
+            this.valueChange.emit(this._value);
+        }
+    }
+    decrement() {
+        if (this.readonly || this.disabled)
+            return;
+        const newValue = this._value - this.step;
+        if (newValue >= this.min) {
+            this._value = newValue;
+            this.valueChange.emit(this._value);
+        }
+    }
+    onInput(event) {
+        const input = event.target;
+        let newValue = Number.parseInt(input.value, 10);
+        if (Number.isNaN(newValue)) {
+            newValue = this.min;
+        }
+        if (newValue < this.min)
+            newValue = this.min;
+        if (newValue > this.max)
+            newValue = this.max;
+        input.value = newValue.toString();
+        this._value = newValue;
+        this.valueChange.emit(this._value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: InputStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: InputStepperComponent, isStandalone: true, selector: "app-input-stepper", inputs: { headerInput: "headerInput", placeholder: "placeholder", readonly: "readonly", required: "required", disabled: "disabled", width: "width", min: "min", max: "max", error: "error", helperText: "helperText", step: "step", state: "state", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div\r\n  class=\"input-form\"\r\n  [style.width]=\"width\"\r\n  [class.disabled]=\"disabled\"\r\n  [class.state-negative]=\"state === 'negative'\"\r\n  [class.state-positive]=\"state === 'positive'\"\r\n>\r\n  <div class=\"input-form-content\">\r\n    <label class=\"input-form-label\" [for]=\"componentId\">\r\n      <span class=\"label-text\">\r\n        {{ headerInput }}\r\n        @if (required) {\r\n          <span class=\"required-mark\">*</span>\r\n        }\r\n      </span>\r\n    </label>\r\n  </div>\r\n\r\n  <div class=\"input-stepper-content\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"input-stepper-button\"\r\n      (click)=\"decrement()\"\r\n      [disabled]=\"disabled\"\r\n      aria-label=\"Gi\u1EA3m gi\u00E1 tr\u1ECB\"\r\n    >\r\n      <span class=\"stepper-icon\">\u2212</span>\r\n    </button>\r\n    <input\r\n      [id]=\"componentId\"\r\n      type=\"text\"\r\n      class=\"input-stepper-input\"\r\n      placeholder=\"0\"\r\n      [placeholder]=\"placeholder || '0'\"\r\n      title=\"Gi\u00E1 tr\u1ECB\"\r\n      [title]=\"headerInput || 'Gi\u00E1 tr\u1ECB'\"\r\n      [readonly]=\"readonly\"\r\n      [disabled]=\"disabled\"\r\n      [required]=\"required\"\r\n      [value]=\"value\"\r\n      (input)=\"onInput($event)\"\r\n      [attr.aria-label]=\"headerInput || 'Gi\u00E1 tr\u1ECB'\"\r\n    />\r\n    <button\r\n      type=\"button\"\r\n      class=\"input-stepper-button\"\r\n      (click)=\"increment()\"\r\n      [disabled]=\"disabled\"\r\n      aria-label=\"T\u0103ng gi\u00E1 tr\u1ECB\"\r\n    >\r\n      <span class=\"stepper-icon\">+</span>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"input-stepper-footer\">\r\n    @if (error) {\r\n      <span class=\"input-stepper-error\">{{ error }}</span>\r\n    } @else if (helperText) {\r\n      <span class=\"input-stepper-helper\">{{ helperText }}</span>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".input-form{display:flex;flex-direction:column;gap:6px;min-width:200px}.input-form-content{display:flex}.input-form-content .input-form-label{display:block;font-size:var(--font-sm);font-weight:700;color:var(--neutral-color-700)}.input-form-content .input-form-label .label-text{display:block;margin-bottom:4px}.input-form-content .input-form-label .label-text .required-mark{color:var(--utility-600);margin-left:2px}.input-stepper-content{display:flex;align-items:center;border:1px solid var(--neutral-color-200);border-radius:var(--radius-md);overflow:hidden;background:var(--neutral-color-10);height:36px;transition:border-color .2s ease,box-shadow .2s ease}.input-stepper-content:hover{border-color:var(--neutral-color-300)}.input-stepper-content:focus-within{border-color:var(--brand-500);box-shadow:0 0 0 2px rgba(var(--brand-500-rgb, 39, 64, 180),.15)}.input-stepper-content .input-stepper-button{display:flex;align-items:center;justify-content:center;width:36px;min-width:36px;flex-shrink:0;height:100%;border:none;background:transparent;cursor:pointer;color:var(--neutral-color-500);font-size:var(--font-sm);background-color:var(--neutral-color-10);padding:8px;transition:background-color .2s ease,color .2s ease}.input-stepper-content .input-stepper-button:hover:not(:disabled){background-color:var(--neutral-color-50)}.input-stepper-content .input-stepper-button:active:not(:disabled){background-color:var(--neutral-color-100)}.input-stepper-content .input-stepper-button:disabled{color:var(--neutral-color-300);cursor:not-allowed;background-color:var(--neutral-color-50)}.input-stepper-content .input-stepper-button .stepper-icon{font-size:16px;font-weight:600;pointer-events:none;line-height:1}.input-stepper-content .input-stepper-input{flex:1;min-width:0;height:100%;border:none;text-align:center;font-size:var(--font-sm);font-weight:500;color:var(--neutral-color-875);outline:none;background:transparent;padding:0 8px}.input-stepper-content .input-stepper-input::placeholder{color:var(--neutral-color-400);font-weight:400}.input-stepper-content .input-stepper-input:read-only{cursor:default}.input-stepper-content .input-stepper-input:disabled{cursor:not-allowed;background-color:var(--neutral-color-50);color:var(--neutral-color-400)}.input-stepper-content .input-stepper-input::-webkit-outer-spin-button,.input-stepper-content .input-stepper-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.input-stepper-content .input-stepper-input[type=number]{-moz-appearance:textfield;appearance:textfield}.input-stepper-footer{min-height:18px}.input-stepper-footer .input-stepper-error{font-size:var(--font-xs, 12px);color:var(--utility-600);line-height:1.5}.input-stepper-footer .input-stepper-helper{font-size:var(--font-xs, 12px);color:var(--neutral-color-500);line-height:1.5}.input-form.disabled .input-stepper-content{background-color:var(--neutral-color-50);border-color:var(--neutral-color-200);cursor:not-allowed}.input-form.disabled .input-stepper-content:hover{border-color:var(--neutral-color-200)}.input-form.disabled .input-stepper-content .input-stepper-button{cursor:not-allowed;color:var(--neutral-color-300);background-color:var(--neutral-color-50)}.input-form.disabled .input-stepper-content .input-stepper-input{cursor:not-allowed;color:var(--neutral-color-400);background-color:var(--neutral-color-50)}.input-form.state-negative .input-stepper-content{border-color:var(--utility-600)}.input-form.state-negative .input-stepper-content:focus-within{border-color:var(--utility-600);box-shadow:0 0 0 2px #ef444426}.input-form.state-negative .input-stepper-footer .input-stepper-helper{color:var(--utility-600)}.input-form.state-positive .input-stepper-content{border-color:var(--success-500, #22c55e)}.input-form.state-positive .input-stepper-content:focus-within{border-color:var(--success-500, #22c55e);box-shadow:0 0 0 2px #22c55e26}.input-form.state-positive .input-stepper-footer .input-stepper-helper{color:var(--success-500, #22c55e)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: InputStepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-input-stepper', standalone: true, imports: [CommonModule, FormsModule], template: "<div\r\n  class=\"input-form\"\r\n  [style.width]=\"width\"\r\n  [class.disabled]=\"disabled\"\r\n  [class.state-negative]=\"state === 'negative'\"\r\n  [class.state-positive]=\"state === 'positive'\"\r\n>\r\n  <div class=\"input-form-content\">\r\n    <label class=\"input-form-label\" [for]=\"componentId\">\r\n      <span class=\"label-text\">\r\n        {{ headerInput }}\r\n        @if (required) {\r\n          <span class=\"required-mark\">*</span>\r\n        }\r\n      </span>\r\n    </label>\r\n  </div>\r\n\r\n  <div class=\"input-stepper-content\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"input-stepper-button\"\r\n      (click)=\"decrement()\"\r\n      [disabled]=\"disabled\"\r\n      aria-label=\"Gi\u1EA3m gi\u00E1 tr\u1ECB\"\r\n    >\r\n      <span class=\"stepper-icon\">\u2212</span>\r\n    </button>\r\n    <input\r\n      [id]=\"componentId\"\r\n      type=\"text\"\r\n      class=\"input-stepper-input\"\r\n      placeholder=\"0\"\r\n      [placeholder]=\"placeholder || '0'\"\r\n      title=\"Gi\u00E1 tr\u1ECB\"\r\n      [title]=\"headerInput || 'Gi\u00E1 tr\u1ECB'\"\r\n      [readonly]=\"readonly\"\r\n      [disabled]=\"disabled\"\r\n      [required]=\"required\"\r\n      [value]=\"value\"\r\n      (input)=\"onInput($event)\"\r\n      [attr.aria-label]=\"headerInput || 'Gi\u00E1 tr\u1ECB'\"\r\n    />\r\n    <button\r\n      type=\"button\"\r\n      class=\"input-stepper-button\"\r\n      (click)=\"increment()\"\r\n      [disabled]=\"disabled\"\r\n      aria-label=\"T\u0103ng gi\u00E1 tr\u1ECB\"\r\n    >\r\n      <span class=\"stepper-icon\">+</span>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"input-stepper-footer\">\r\n    @if (error) {\r\n      <span class=\"input-stepper-error\">{{ error }}</span>\r\n    } @else if (helperText) {\r\n      <span class=\"input-stepper-helper\">{{ helperText }}</span>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".input-form{display:flex;flex-direction:column;gap:6px;min-width:200px}.input-form-content{display:flex}.input-form-content .input-form-label{display:block;font-size:var(--font-sm);font-weight:700;color:var(--neutral-color-700)}.input-form-content .input-form-label .label-text{display:block;margin-bottom:4px}.input-form-content .input-form-label .label-text .required-mark{color:var(--utility-600);margin-left:2px}.input-stepper-content{display:flex;align-items:center;border:1px solid var(--neutral-color-200);border-radius:var(--radius-md);overflow:hidden;background:var(--neutral-color-10);height:36px;transition:border-color .2s ease,box-shadow .2s ease}.input-stepper-content:hover{border-color:var(--neutral-color-300)}.input-stepper-content:focus-within{border-color:var(--brand-500);box-shadow:0 0 0 2px rgba(var(--brand-500-rgb, 39, 64, 180),.15)}.input-stepper-content .input-stepper-button{display:flex;align-items:center;justify-content:center;width:36px;min-width:36px;flex-shrink:0;height:100%;border:none;background:transparent;cursor:pointer;color:var(--neutral-color-500);font-size:var(--font-sm);background-color:var(--neutral-color-10);padding:8px;transition:background-color .2s ease,color .2s ease}.input-stepper-content .input-stepper-button:hover:not(:disabled){background-color:var(--neutral-color-50)}.input-stepper-content .input-stepper-button:active:not(:disabled){background-color:var(--neutral-color-100)}.input-stepper-content .input-stepper-button:disabled{color:var(--neutral-color-300);cursor:not-allowed;background-color:var(--neutral-color-50)}.input-stepper-content .input-stepper-button .stepper-icon{font-size:16px;font-weight:600;pointer-events:none;line-height:1}.input-stepper-content .input-stepper-input{flex:1;min-width:0;height:100%;border:none;text-align:center;font-size:var(--font-sm);font-weight:500;color:var(--neutral-color-875);outline:none;background:transparent;padding:0 8px}.input-stepper-content .input-stepper-input::placeholder{color:var(--neutral-color-400);font-weight:400}.input-stepper-content .input-stepper-input:read-only{cursor:default}.input-stepper-content .input-stepper-input:disabled{cursor:not-allowed;background-color:var(--neutral-color-50);color:var(--neutral-color-400)}.input-stepper-content .input-stepper-input::-webkit-outer-spin-button,.input-stepper-content .input-stepper-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.input-stepper-content .input-stepper-input[type=number]{-moz-appearance:textfield;appearance:textfield}.input-stepper-footer{min-height:18px}.input-stepper-footer .input-stepper-error{font-size:var(--font-xs, 12px);color:var(--utility-600);line-height:1.5}.input-stepper-footer .input-stepper-helper{font-size:var(--font-xs, 12px);color:var(--neutral-color-500);line-height:1.5}.input-form.disabled .input-stepper-content{background-color:var(--neutral-color-50);border-color:var(--neutral-color-200);cursor:not-allowed}.input-form.disabled .input-stepper-content:hover{border-color:var(--neutral-color-200)}.input-form.disabled .input-stepper-content .input-stepper-button{cursor:not-allowed;color:var(--neutral-color-300);background-color:var(--neutral-color-50)}.input-form.disabled .input-stepper-content .input-stepper-input{cursor:not-allowed;color:var(--neutral-color-400);background-color:var(--neutral-color-50)}.input-form.state-negative .input-stepper-content{border-color:var(--utility-600)}.input-form.state-negative .input-stepper-content:focus-within{border-color:var(--utility-600);box-shadow:0 0 0 2px #ef444426}.input-form.state-negative .input-stepper-footer .input-stepper-helper{color:var(--utility-600)}.input-form.state-positive .input-stepper-content{border-color:var(--success-500, #22c55e)}.input-form.state-positive .input-stepper-content:focus-within{border-color:var(--success-500, #22c55e);box-shadow:0 0 0 2px #22c55e26}.input-form.state-positive .input-stepper-footer .input-stepper-helper{color:var(--success-500, #22c55e)}\n"] }]
+        }], propDecorators: { headerInput: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], helperText: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], state: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], value: [{
+                type: Input
+            }] } });
+
+class InputCalendarComponent {
+    headerInput = '';
+    placeholder = 'dd/mm/yyyy';
+    readonly = false;
+    required = false;
+    width = '100%';
+    valueChange = new EventEmitter();
+    hiddenDateInput;
+    displayValue = '';
+    _value = '';
+    set value(val) {
+        this._value = val;
+        this.displayValue = this.formatToDisplay(val);
+    }
+    get value() {
+        return this._value;
+    }
+    // Convert ISO format (yyyy-mm-dd) to display format (dd/mm/yyyy)
+    formatToDisplay(isoDate) {
+        if (!isoDate)
+            return '';
+        const parts = isoDate.split('-');
+        if (parts.length === 3) {
+            return `${parts[2]}/${parts[1]}/${parts[0]}`;
+        }
+        return isoDate;
+    }
+    // Validate if a date string (dd/mm/yyyy) represents a valid date
+    isValidDate(displayDate) {
+        if (!displayDate || displayDate.length !== 10)
+            return false;
+        const parts = displayDate.split('/');
+        if (parts.length !== 3)
+            return false;
+        const day = parseInt(parts[0], 10);
+        const month = parseInt(parts[1], 10);
+        const year = parseInt(parts[2], 10);
+        // Basic range validation
+        if (isNaN(day) || isNaN(month) || isNaN(year))
+            return false;
+        if (month < 1 || month > 12)
+            return false;
+        if (day < 1 || day > 31)
+            return false;
+        if (year < 1900 || year > 2100)
+            return false;
+        // Create date and verify it matches input (handles invalid dates like 31/02)
+        const date = new Date(year, month - 1, day);
+        return date.getFullYear() === year &&
+            date.getMonth() === month - 1 &&
+            date.getDate() === day;
+    }
+    // Convert display format (dd/mm/yyyy) to ISO format (yyyy-mm-dd)
+    formatToISO(displayDate) {
+        if (!displayDate)
+            return '';
+        const parts = displayDate.split('/');
+        if (parts.length === 3) {
+            return `${parts[2]}-${parts[1]}-${parts[0]}`;
+        }
+        return displayDate;
+    }
+    // Handle text input with auto-formatting
+    onDisplayInput(event) {
+        const input = event.target;
+        let value = input.value.replaceAll(/[^\d/]/g, '');
+        // Auto-insert slashes at positions 2 and 5
+        const parts = value.split('/');
+        if (parts[0] && parts[0].length >= 2 && parts.length === 1) {
+            value = parts[0].substring(0, 2) + '/' + parts[0].substring(2);
+        }
+        if (value.length >= 5 && value.split('/').length === 2 && !value.endsWith('/')) {
+            const newParts = value.split('/');
+            if (newParts[1] && newParts[1].length >= 2) {
+                value = newParts[0] + '/' + newParts[1].substring(0, 2) + '/' + newParts[1].substring(2);
+            }
+        }
+        // Limit to dd/mm/yyyy format
+        if (value.length > 10) {
+            value = value.substring(0, 10);
+        }
+        this.displayValue = value;
+        // Only emit if complete and valid date
+        if (value.length === 10 && this.isValidDate(value)) {
+            const isoValue = this.formatToISO(value);
+            this._value = isoValue;
+            this.valueChange.emit(isoValue);
+        }
+    }
+    // Open native date picker
+    openDatePicker() {
+        if (!this.readonly && this.hiddenDateInput) {
+            this.hiddenDateInput.nativeElement.showPicker();
+        }
+    }
+    // Handle date picker selection
+    onDatePickerChange(event) {
+        const input = event.target;
+        this._value = input.value;
+        this.displayValue = this.formatToDisplay(input.value);
+        this.valueChange.emit(this._value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: InputCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: InputCalendarComponent, isStandalone: true, selector: "app-input-calendar", inputs: { headerInput: "headerInput", placeholder: "placeholder", readonly: "readonly", required: "required", width: "width", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "hiddenDateInput", first: true, predicate: ["hiddenDateInput"], descendants: true }], ngImport: i0, template: "<div class=\"input-form\" [style.width]=\"width\">\r\n  <label class=\"input-form-label\">\r\n    <div class=\"input-form-label-header\">\r\n      <span>{{ headerInput }}</span>\r\n      @if (required) {\r\n        <span class=\"required-mark\">*</span>\r\n      }\r\n    </div>\r\n    <div class=\"calendar-input-wrapper\">\r\n      <input\r\n        type=\"text\"\r\n        class=\"input-form-field\"\r\n        [placeholder]=\"placeholder\"\r\n        [readonly]=\"readonly\"\r\n        [required]=\"required\"\r\n        [value]=\"displayValue\"\r\n        (input)=\"onDisplayInput($event)\"\r\n        maxlength=\"10\"\r\n      />\r\n      <button\r\n        type=\"button\"\r\n        class=\"calendar-icon-btn\"\r\n        (click)=\"openDatePicker()\"\r\n        [disabled]=\"readonly\"\r\n      >\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"16\"\r\n          height=\"16\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        >\r\n          <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\r\n          <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\r\n          <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\r\n          <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\r\n        </svg>\r\n      </button>\r\n      <input\r\n        #hiddenDateInput\r\n        type=\"date\"\r\n        class=\"hidden-date-input\"\r\n        [value]=\"value\"\r\n        (change)=\"onDatePickerChange($event)\"\r\n      />\r\n    </div>\r\n  </label>\r\n</div>\r\n", styles: [".input-form{display:flex;flex-direction:column;gap:6px}.input-form-label{display:block;font-size:var(--font-sm);font-weight:700;color:var(--neutral-color-700);margin-bottom:4px}.input-form-label-header{display:flex;align-items:center;margin-bottom:4px}.required-mark{color:var(--utility-600);margin-left:2px}.calendar-input-wrapper{position:relative;display:flex;align-items:center}.input-form-field{padding:8px 40px 8px 12px;border:1px solid var(--neutral-color-200);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--neutral-color-700);height:36px;width:100%;box-sizing:border-box;background-color:var(--neutral-color-10);transition:border-color .2s ease,box-shadow .2s ease}.input-form-field::placeholder{color:var(--neutral-color-400)}.input-form-field:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 2px #2740b426}.input-form-field:read-only{background-color:var(--neutral-color-25);cursor:not-allowed}.calendar-icon-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;padding:4px;cursor:pointer;color:var(--neutral-color-500);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:color .2s ease,background-color .2s ease}.calendar-icon-btn:hover:not(:disabled){background-color:var(--neutral-color-50)}.calendar-icon-btn:disabled{cursor:not-allowed;opacity:.5}.hidden-date-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: InputCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-input-calendar', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"input-form\" [style.width]=\"width\">\r\n  <label class=\"input-form-label\">\r\n    <div class=\"input-form-label-header\">\r\n      <span>{{ headerInput }}</span>\r\n      @if (required) {\r\n        <span class=\"required-mark\">*</span>\r\n      }\r\n    </div>\r\n    <div class=\"calendar-input-wrapper\">\r\n      <input\r\n        type=\"text\"\r\n        class=\"input-form-field\"\r\n        [placeholder]=\"placeholder\"\r\n        [readonly]=\"readonly\"\r\n        [required]=\"required\"\r\n        [value]=\"displayValue\"\r\n        (input)=\"onDisplayInput($event)\"\r\n        maxlength=\"10\"\r\n      />\r\n      <button\r\n        type=\"button\"\r\n        class=\"calendar-icon-btn\"\r\n        (click)=\"openDatePicker()\"\r\n        [disabled]=\"readonly\"\r\n      >\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"16\"\r\n          height=\"16\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        >\r\n          <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\r\n          <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\r\n          <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\r\n          <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\r\n        </svg>\r\n      </button>\r\n      <input\r\n        #hiddenDateInput\r\n        type=\"date\"\r\n        class=\"hidden-date-input\"\r\n        [value]=\"value\"\r\n        (change)=\"onDatePickerChange($event)\"\r\n      />\r\n    </div>\r\n  </label>\r\n</div>\r\n", styles: [".input-form{display:flex;flex-direction:column;gap:6px}.input-form-label{display:block;font-size:var(--font-sm);font-weight:700;color:var(--neutral-color-700);margin-bottom:4px}.input-form-label-header{display:flex;align-items:center;margin-bottom:4px}.required-mark{color:var(--utility-600);margin-left:2px}.calendar-input-wrapper{position:relative;display:flex;align-items:center}.input-form-field{padding:8px 40px 8px 12px;border:1px solid var(--neutral-color-200);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--neutral-color-700);height:36px;width:100%;box-sizing:border-box;background-color:var(--neutral-color-10);transition:border-color .2s ease,box-shadow .2s ease}.input-form-field::placeholder{color:var(--neutral-color-400)}.input-form-field:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 2px #2740b426}.input-form-field:read-only{background-color:var(--neutral-color-25);cursor:not-allowed}.calendar-icon-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;padding:4px;cursor:pointer;color:var(--neutral-color-500);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:color .2s ease,background-color .2s ease}.calendar-icon-btn:hover:not(:disabled){background-color:var(--neutral-color-50)}.calendar-icon-btn:disabled{cursor:not-allowed;opacity:.5}.hidden-date-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}\n"] }]
+        }], propDecorators: { headerInput: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], hiddenDateInput: [{
+                type: ViewChild,
+                args: ['hiddenDateInput']
+            }], value: [{
+                type: Input
+            }] } });
+
+class TableHeaderComponent {
+    columns = [];
+    backgroundColor;
+    textColor = '#ffffff';
+    headerIconLeft;
+    headerIconRight;
+    fontSize = 'var(--font-xs)';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: TableHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: TableHeaderComponent, isStandalone: true, selector: "tr[app-table-header]", inputs: { columns: "columns", backgroundColor: "backgroundColor", textColor: ["textColor", "textColor", (value) => value || '#ffffff'], headerIconLeft: "headerIconLeft", headerIconRight: "headerIconRight", fontSize: "fontSize" }, ngImport: i0, template: "@for (col of columns; track col.key) {\r\n  <th\r\n    scope=\"col\"\r\n    [style.width]=\"col.width\"\r\n    [style.backgroundColor]=\"backgroundColor\"\r\n    [style.color]=\"textColor\"\r\n  >\r\n    <div class=\"header-container\">\r\n      <div class=\"header-content\">\r\n        @if (headerIconLeft) {\r\n          <div class=\"icon-left\">\r\n            <i [class]=\"headerIconLeft\"></i>\r\n          </div>\r\n        }\r\n        <div class=\"header-text\" [style.font-size]=\"fontSize\">\r\n          {{ col.header }}\r\n        </div>\r\n        @if (headerIconRight) {\r\n          <div class=\"icon-right\">\r\n            <i [class]=\"headerIconRight\"></i>\r\n          </div>\r\n        }\r\n      </div>\r\n      <p class=\"divider\">|</p>\r\n    </div>\r\n  </th>\r\n}\r\n", styles: ["th{padding:0;vertical-align:middle;height:44px;box-sizing:border-box}th .header-content{display:flex;align-items:center;width:100%;gap:8px;border-collapse:collapse}th .header-content .header-text{font-weight:600}th .header-content .icon-left,th .header-content .icon-right{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px}th .header-content:has(.header-text:only-child){justify-content:flex-start}th .header-content:has(.icon-left),th .header-content:has(.icon-right){justify-content:space-between;background-color:var(--brand-900)}th .header-content:has(.icon-left) .header-text,th .header-content:has(.icon-right) .header-text{flex:1;text-align:center}th .header-content:has(.icon-left):not(:has(.icon-right)){justify-content:flex-start}th .header-content:has(.icon-left):not(:has(.icon-right)) .header-text{flex:1}th .header-content:has(.icon-right):not(:has(.icon-left)){justify-content:space-between}th .header-content:has(.icon-right):not(:has(.icon-left)) .header-text{flex:1}th:not(:last-child){border-right:1px solid rgba(0,0,0,.1)}.table-header{width:100%}.header-container{display:flex;align-items:center;width:100%;padding:0 8px;box-sizing:border-box;height:100%}.divider{display:flex;align-items:center;justify-content:center;height:20px;width:1px;background-color:#0000001a;margin:0 8px;color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: TableHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tr[app-table-header]', standalone: true, imports: [CommonModule], template: "@for (col of columns; track col.key) {\r\n  <th\r\n    scope=\"col\"\r\n    [style.width]=\"col.width\"\r\n    [style.backgroundColor]=\"backgroundColor\"\r\n    [style.color]=\"textColor\"\r\n  >\r\n    <div class=\"header-container\">\r\n      <div class=\"header-content\">\r\n        @if (headerIconLeft) {\r\n          <div class=\"icon-left\">\r\n            <i [class]=\"headerIconLeft\"></i>\r\n          </div>\r\n        }\r\n        <div class=\"header-text\" [style.font-size]=\"fontSize\">\r\n          {{ col.header }}\r\n        </div>\r\n        @if (headerIconRight) {\r\n          <div class=\"icon-right\">\r\n            <i [class]=\"headerIconRight\"></i>\r\n          </div>\r\n        }\r\n      </div>\r\n      <p class=\"divider\">|</p>\r\n    </div>\r\n  </th>\r\n}\r\n", styles: ["th{padding:0;vertical-align:middle;height:44px;box-sizing:border-box}th .header-content{display:flex;align-items:center;width:100%;gap:8px;border-collapse:collapse}th .header-content .header-text{font-weight:600}th .header-content .icon-left,th .header-content .icon-right{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px}th .header-content:has(.header-text:only-child){justify-content:flex-start}th .header-content:has(.icon-left),th .header-content:has(.icon-right){justify-content:space-between;background-color:var(--brand-900)}th .header-content:has(.icon-left) .header-text,th .header-content:has(.icon-right) .header-text{flex:1;text-align:center}th .header-content:has(.icon-left):not(:has(.icon-right)){justify-content:flex-start}th .header-content:has(.icon-left):not(:has(.icon-right)) .header-text{flex:1}th .header-content:has(.icon-right):not(:has(.icon-left)){justify-content:space-between}th .header-content:has(.icon-right):not(:has(.icon-left)) .header-text{flex:1}th:not(:last-child){border-right:1px solid rgba(0,0,0,.1)}.table-header{width:100%}.header-container{display:flex;align-items:center;width:100%;padding:0 8px;box-sizing:border-box;height:100%}.divider{display:flex;align-items:center;justify-content:center;height:20px;width:1px;background-color:#0000001a;margin:0 8px;color:transparent}\n"] }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], textColor: [{
+                type: Input,
+                args: [{ transform: (value) => value || '#ffffff' }]
+            }], headerIconLeft: [{
+                type: Input
+            }], headerIconRight: [{
+                type: Input
+            }], fontSize: [{
+                type: Input
+            }] } });
+
+class TableBodyComponent {
+    rows = [];
+    columns = [];
+    columnTemplates = {};
+    fontSize = 'var(--font-sm)';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: TableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: TableBodyComponent, isStandalone: true, selector: "[app-table-body]", inputs: { rows: "rows", columns: "columns", columnTemplates: "columnTemplates", fontSize: "fontSize" }, ngImport: i0, template: "@for (row of rows; track $index) {\r\n  <tr>\r\n    @for (col of columns; track col.key) {\r\n      <td [style.width]=\"col.width\" [style.font-size]=\"fontSize\">\r\n        @if (columnTemplates[col.key]) {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              columnTemplates[col.key];\r\n              context: { $implicit: row[col.key], row: row }\r\n            \"\r\n          ></ng-container>\r\n        } @else {\r\n          {{ row[col.key] }}\r\n        }\r\n      </td>\r\n    }\r\n  </tr>\r\n}\r\n", styles: ["td{padding:16px 8px;vertical-align:middle;color:var(--neutral-color-700);height:70px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: TableBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[app-table-body]', standalone: true, imports: [CommonModule], template: "@for (row of rows; track $index) {\r\n  <tr>\r\n    @for (col of columns; track col.key) {\r\n      <td [style.width]=\"col.width\" [style.font-size]=\"fontSize\">\r\n        @if (columnTemplates[col.key]) {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              columnTemplates[col.key];\r\n              context: { $implicit: row[col.key], row: row }\r\n            \"\r\n          ></ng-container>\r\n        } @else {\r\n          {{ row[col.key] }}\r\n        }\r\n      </td>\r\n    }\r\n  </tr>\r\n}\r\n", styles: ["td{padding:16px 8px;vertical-align:middle;color:var(--neutral-color-700);height:70px}\n"] }]
+        }], propDecorators: { rows: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], columnTemplates: [{
+                type: Input
+            }], fontSize: [{
+                type: Input
+            }] } });
+
+class ApprovalListItemComponent {
+    name;
+    date;
+    rightTemplate;
+    rightContext = {};
+    get parsedDate() {
+        return new Date(this.date);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApprovalListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ApprovalListItemComponent, isStandalone: true, selector: "app-approval-list-item", inputs: { name: "name", date: "date", rightTemplate: "rightTemplate", rightContext: "rightContext" }, ngImport: i0, template: "<div class=\"approval-item\">\r\n  <!-- LEFT -->\r\n  <div class=\"approval-item-left\">\r\n    <span class=\"approval-item-left-name\">{{ name }}</span>\r\n    <span class=\"approval-item-left-date\">\r\n      <span class=\"approval-item-left-date-title\">Ng\u00E0y t\u1EA1o \u0111\u01A1n:</span>\r\n      {{ date | date: 'dd/MM/yyyy' }}\r\n    </span>\r\n  </div>\r\n\r\n  <div class=\"approval-item-right\">\r\n    <ng-container *ngIf=\"rightTemplate; else defaultRight\">\r\n      <ng-container *ngTemplateOutlet=\"rightTemplate; context: rightContext\">\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #defaultRight>\r\n      <span class=\"text-gray-400\">\u2014</span>\r\n    </ng-template>\r\n  </div>\r\n</div>", styles: [".approval-item{display:flex;justify-content:space-between;min-width:400px;height:fit-content;align-items:center;padding:16px 8px}.approval-item-left-date-title{color:var(--theme-neutral-500)}.approval-item-right p{color:var(--secondary-800);font-weight:500}.approval-item-left{display:flex;flex-direction:column;gap:8px}span,p{font-size:var(--font-sm)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApprovalListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-approval-list-item', imports: [CommonModule], standalone: true, template: "<div class=\"approval-item\">\r\n  <!-- LEFT -->\r\n  <div class=\"approval-item-left\">\r\n    <span class=\"approval-item-left-name\">{{ name }}</span>\r\n    <span class=\"approval-item-left-date\">\r\n      <span class=\"approval-item-left-date-title\">Ng\u00E0y t\u1EA1o \u0111\u01A1n:</span>\r\n      {{ date | date: 'dd/MM/yyyy' }}\r\n    </span>\r\n  </div>\r\n\r\n  <div class=\"approval-item-right\">\r\n    <ng-container *ngIf=\"rightTemplate; else defaultRight\">\r\n      <ng-container *ngTemplateOutlet=\"rightTemplate; context: rightContext\">\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-template #defaultRight>\r\n      <span class=\"text-gray-400\">\u2014</span>\r\n    </ng-template>\r\n  </div>\r\n</div>", styles: [".approval-item{display:flex;justify-content:space-between;min-width:400px;height:fit-content;align-items:center;padding:16px 8px}.approval-item-left-date-title{color:var(--theme-neutral-500)}.approval-item-right p{color:var(--secondary-800);font-weight:500}.approval-item-left{display:flex;flex-direction:column;gap:8px}span,p{font-size:var(--font-sm)}\n"] }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], date: [{
+                type: Input
+            }], rightTemplate: [{
+                type: Input
+            }], rightContext: [{
+                type: Input
+            }] } });
+
+class ApprovalListComponent {
+    rows = [];
+    headerContentRight;
+    headerContentLeft;
+    width;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApprovalListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ApprovalListComponent, isStandalone: true, selector: "app-approval-list", inputs: { rows: "rows", headerContentRight: "headerContentRight", headerContentLeft: "headerContentLeft", width: "width" }, ngImport: i0, template: "<div class=\"approval-list\" [style.width]=\"width\">\r\n  <div class=\"approval-list-header\">\r\n    <span class=\"approval-list-header-left\">{{ headerContentLeft }}</span>\r\n    <div>\r\n      <p>{{ headerContentRight }}</p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"approval-list-content\" [style.width]=\"width\">\r\n    <app-approval-list-item\r\n      *ngFor=\"let row of rows\"\r\n      [name]=\"row.name\"\r\n      [date]=\"row.date\"\r\n      [rightTemplate]=\"row.rightTemplate\"\r\n      [rightContext]=\"row.rightContext\"\r\n    >\r\n    </app-approval-list-item>\r\n  </div>\r\n</div>\r\n", styles: [".approval-list{display:flex;flex-direction:column;background-color:var(--theme-neutral-light-100);border-radius:16px}.approval-list-header{display:flex;justify-content:space-between;align-items:center;padding:16px 8px;height:fit-content}.approval-list-header span{font-size:20px;color:var(--brand-600);font-weight:700}.approval-list-header p{font-size:var(--font-sm)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ApprovalListItemComponent, selector: "app-approval-list-item", inputs: ["name", "date", "rightTemplate", "rightContext"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApprovalListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-approval-list', standalone: true, imports: [CommonModule, ApprovalListItemComponent], template: "<div class=\"approval-list\" [style.width]=\"width\">\r\n  <div class=\"approval-list-header\">\r\n    <span class=\"approval-list-header-left\">{{ headerContentLeft }}</span>\r\n    <div>\r\n      <p>{{ headerContentRight }}</p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"approval-list-content\" [style.width]=\"width\">\r\n    <app-approval-list-item\r\n      *ngFor=\"let row of rows\"\r\n      [name]=\"row.name\"\r\n      [date]=\"row.date\"\r\n      [rightTemplate]=\"row.rightTemplate\"\r\n      [rightContext]=\"row.rightContext\"\r\n    >\r\n    </app-approval-list-item>\r\n  </div>\r\n</div>\r\n", styles: [".approval-list{display:flex;flex-direction:column;background-color:var(--theme-neutral-light-100);border-radius:16px}.approval-list-header{display:flex;justify-content:space-between;align-items:center;padding:16px 8px;height:fit-content}.approval-list-header span{font-size:20px;color:var(--brand-600);font-weight:700}.approval-list-header p{font-size:var(--font-sm)}\n"] }]
+        }], propDecorators: { rows: [{
+                type: Input
+            }], headerContentRight: [{
+                type: Input
+            }], headerContentLeft: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }] } });
+
+class PopUpConfirmComponent {
+    imgUrl = '';
+    title = '';
+    content = '';
+    colorButton = 'var(--brand-600)';
+    confirmClick = new EventEmitter();
+    cancelClick = new EventEmitter();
+    onConfirm() {
+        this.confirmClick.emit();
+    }
+    onCancel() {
+        this.cancelClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PopUpConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: PopUpConfirmComponent, isStandalone: true, selector: "app-pop-up-confirm", inputs: { imgUrl: "imgUrl", title: "title", content: "content", colorButton: "colorButton" }, outputs: { confirmClick: "confirmClick", cancelClick: "cancelClick" }, ngImport: i0, template: "<div class=\"pop-up-confirm-overlay\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"popup-title\">\r\n    <div class=\"pop-up-confirm\">\r\n        <div class=\"pop-up-confirm-content\">\r\n            <img *ngIf=\"imgUrl\" [src]=\"imgUrl\" alt=\"\">\r\n            <div class=\"pop-up-confirm-text\">\r\n                <p class=\"pop-up-title\" id=\"popup-title\">{{title}}</p>\r\n                <p class=\"pop-up-content\">{{content}}</p>\r\n            </div>\r\n        </div>\r\n        <div class=\"pop-up-confirm-actions\">\r\n            <app-button-container size=\"md\" content=\"Quay L\u1EA1i\" backgroundColor=\"var(--neutral-100)\" color=\"var(--neutral-800)\" (buttonClick)=\"onCancel()\"></app-button-container>\r\n            <app-button-container size=\"md\" content=\"\u0110\u1ED3ng \u00DD\" [backgroundColor]=\"colorButton\" color=\"#fff\" (buttonClick)=\"onConfirm()\"></app-button-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".pop-up-confirm-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--neutral-color-875-rgb, 30, 34, 37),.5);display:flex;justify-content:center;align-items:center;z-index:1000}.pop-up-confirm{background-color:var(--neutral-color-10);border-radius:var(--radius-lg);padding:24px;min-width:320px;max-width:400px;box-shadow:0 4px 20px rgba(var(--neutral-color-875-rgb, 30, 34, 37),.15)}.pop-up-confirm-content{display:flex;gap:16px;align-items:center;justify-content:center;flex-direction:column;margin-bottom:24px;width:352px;height:172px}.pop-up-confirm-content img{width:96px;height:96px;object-fit:contain;flex-shrink:0}.pop-up-confirm-text{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px}.pop-up-title{font-size:var(--font-xl);font-weight:600;color:var(--neutral-color-875);margin:0}.pop-up-content{font-size:var(--font-sm);color:var(--neutral-color-500);margin:0}.pop-up-confirm-actions{display:flex;gap:12px;justify-content:center;align-items:center;padding:16px 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonContainerComponent, selector: "app-button-container", inputs: ["size", "content", "fontSize", "leftIcon", "rightIcon", "color", "backgroundColor", "borderColor"], outputs: ["buttonClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PopUpConfirmComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-pop-up-confirm', standalone: true, imports: [CommonModule, ButtonContainerComponent], template: "<div class=\"pop-up-confirm-overlay\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"popup-title\">\r\n    <div class=\"pop-up-confirm\">\r\n        <div class=\"pop-up-confirm-content\">\r\n            <img *ngIf=\"imgUrl\" [src]=\"imgUrl\" alt=\"\">\r\n            <div class=\"pop-up-confirm-text\">\r\n                <p class=\"pop-up-title\" id=\"popup-title\">{{title}}</p>\r\n                <p class=\"pop-up-content\">{{content}}</p>\r\n            </div>\r\n        </div>\r\n        <div class=\"pop-up-confirm-actions\">\r\n            <app-button-container size=\"md\" content=\"Quay L\u1EA1i\" backgroundColor=\"var(--neutral-100)\" color=\"var(--neutral-800)\" (buttonClick)=\"onCancel()\"></app-button-container>\r\n            <app-button-container size=\"md\" content=\"\u0110\u1ED3ng \u00DD\" [backgroundColor]=\"colorButton\" color=\"#fff\" (buttonClick)=\"onConfirm()\"></app-button-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".pop-up-confirm-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--neutral-color-875-rgb, 30, 34, 37),.5);display:flex;justify-content:center;align-items:center;z-index:1000}.pop-up-confirm{background-color:var(--neutral-color-10);border-radius:var(--radius-lg);padding:24px;min-width:320px;max-width:400px;box-shadow:0 4px 20px rgba(var(--neutral-color-875-rgb, 30, 34, 37),.15)}.pop-up-confirm-content{display:flex;gap:16px;align-items:center;justify-content:center;flex-direction:column;margin-bottom:24px;width:352px;height:172px}.pop-up-confirm-content img{width:96px;height:96px;object-fit:contain;flex-shrink:0}.pop-up-confirm-text{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px}.pop-up-title{font-size:var(--font-xl);font-weight:600;color:var(--neutral-color-875);margin:0}.pop-up-content{font-size:var(--font-sm);color:var(--neutral-color-500);margin:0}.pop-up-confirm-actions{display:flex;gap:12px;justify-content:center;align-items:center;padding:16px 8px}\n"] }]
+        }], propDecorators: { imgUrl: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], colorButton: [{
+                type: Input
+            }], confirmClick: [{
+                type: Output
+            }], cancelClick: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of intern-hub-layout
+ */
+// Layout components
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ApprovalListComponent, ApprovalListItemComponent, BUTTON_SIZE_MAP, ButtonContainerComponent, FunctionalLabelComponent, HeaderComponent, IconComponent, InputCalendarComponent, InputStepperComponent, InputTextComponent, LabelButtonComponent, PopUpConfirmComponent, SidebarComponent, TableBodyComponent, TableHeaderComponent };
+//# sourceMappingURL=goat-bravos-intern-hub-layout.mjs.map