@goat-bravos/intern-hub-layout 1.0.2 → 1.0.3

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

@@ -0,0 +1,561 @@
+import * as i0 from '@angular/core';
+import { Component, Input, EventEmitter, Output, ViewChild } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { RouterOutlet } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+
+class HeaderComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: HeaderComponent, isStandalone: true, selector: "app-header-component", ngImport: i0, template: "<header class=\"app-header\">\r\n  <div class=\"header-left\">\r\n    <img class=\"logo\" src=\"FPT-IS-Logo.png\" alt=\"FPT IS Logo\" />\r\n  </div>\r\n\r\n  <div class=\"header-right\">\r\n    <button class=\"header-btn\" aria-label=\"Help\">\r\n      <span class=\"icon\">?</span>\r\n    </button>\r\n\r\n    <button class=\"header-btn notify-btn\" aria-label=\"Notifications\">\r\n      <span class=\"icon\">\uD83D\uDD14</span>\r\n    </button>\r\n\r\n    <button class=\"header-btn\" aria-label=\"Settings\">\r\n      <span class=\"icon\">\u2699\uFE0F</span>\r\n    </button>\r\n\r\n    <div class=\"header-user\">\r\n      <button class=\"user-btn\">\r\n        <img class=\"avatar\" src=\"FPT-IS-Logo.png\" alt=\"User avatar\" />\r\n        <span class=\"user-name\">User Name</span>\r\n        <span class=\"caret\">\u25BE</span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</header>\r\n", styles: [".app-header{height:70px;display:flex;align-items:center;justify-content:space-between;padding:16px 8px;width:100%}.header-left{display:flex;align-items:center}.logo{height:46px;width:93px;object-fit:contain}.header-right{display:flex;align-items:center;gap:8px}.header-btn{position:relative;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:var(--radius-full);border:none;cursor:pointer;transition:background-color .2s ease}.header-btn:hover{background-color:var(--neutral-color-100)}.icon{font-size:var(--font-lg)}.header-user{margin-left:8px}.user-btn{display:flex;align-items:center;gap:8px;padding:4px 8px;background:transparent;border:none;border-radius:var(--radius-full);cursor:pointer;transition:background-color .2s ease}.user-btn:hover{background-color:var(--neutral-color-100)}.avatar{width:28px;height:28px;border-radius:var(--radius-full);object-fit:cover}.user-name{font-size:var(--font-sm);font-weight:500;color:var(--neutral-color-875);white-space:nowrap}.caret{font-size:var(--font-xs);color:var(--neutral-color-600)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: HeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-header-component', standalone: true, template: "<header class=\"app-header\">\r\n  <div class=\"header-left\">\r\n    <img class=\"logo\" src=\"FPT-IS-Logo.png\" alt=\"FPT IS Logo\" />\r\n  </div>\r\n\r\n  <div class=\"header-right\">\r\n    <button class=\"header-btn\" aria-label=\"Help\">\r\n      <span class=\"icon\">?</span>\r\n    </button>\r\n\r\n    <button class=\"header-btn notify-btn\" aria-label=\"Notifications\">\r\n      <span class=\"icon\">\uD83D\uDD14</span>\r\n    </button>\r\n\r\n    <button class=\"header-btn\" aria-label=\"Settings\">\r\n      <span class=\"icon\">\u2699\uFE0F</span>\r\n    </button>\r\n\r\n    <div class=\"header-user\">\r\n      <button class=\"user-btn\">\r\n        <img class=\"avatar\" src=\"FPT-IS-Logo.png\" alt=\"User avatar\" />\r\n        <span class=\"user-name\">User Name</span>\r\n        <span class=\"caret\">\u25BE</span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</header>\r\n", styles: [".app-header{height:70px;display:flex;align-items:center;justify-content:space-between;padding:16px 8px;width:100%}.header-left{display:flex;align-items:center}.logo{height:46px;width:93px;object-fit:contain}.header-right{display:flex;align-items:center;gap:8px}.header-btn{position:relative;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:var(--radius-full);border:none;cursor:pointer;transition:background-color .2s ease}.header-btn:hover{background-color:var(--neutral-color-100)}.icon{font-size:var(--font-lg)}.header-user{margin-left:8px}.user-btn{display:flex;align-items:center;gap:8px;padding:4px 8px;background:transparent;border:none;border-radius:var(--radius-full);cursor:pointer;transition:background-color .2s ease}.user-btn:hover{background-color:var(--neutral-color-100)}.avatar{width:28px;height:28px;border-radius:var(--radius-full);object-fit:cover}.user-name{font-size:var(--font-sm);font-weight:500;color:var(--neutral-color-875);white-space:nowrap}.caret{font-size:var(--font-xs);color:var(--neutral-color-600)}\n"] }]
+        }] });
+
+class FunctionalLabelComponent {
+    icon;
+    content = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FunctionalLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: FunctionalLabelComponent, isStandalone: true, selector: "app-functional-label", inputs: { icon: "icon", content: "content" }, ngImport: i0, template: "<div class=\"functional-label\">\r\n  <i class=\"{{ icon }}\"></i>\r\n  <a href=\"/*\" class=\"color-text-neutral-700\">{{ content }}</a>\r\n</div>\r\n", styles: [".functional-label{display:flex;align-items:center;justify-content:center;height:36px;gap:0;padding:4px 8px;cursor:pointer;transition:gap .25s ease,justify-content .25s ease}.functional-label-icon{min-width:20px;height:20px;display:flex;justify-content:center;align-items:center;flex-shrink:0;color:var(--neutral-color-200)}.functional-label a{min-width:100px;white-space:nowrap;display:none;padding:8px;color:var(--neutral-color-200);font-size:var(--font-sm);text-decoration:none;opacity:0;transform:translate(-8px);transition:opacity .15s ease,transform .15s ease}:host-context(.sidebar-wrapper:hover) .functional-label{justify-content:flex-start;gap:12px}:host-context(.sidebar-wrapper:hover) .functional-label a{opacity:1;transform:translate(0);display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FunctionalLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-functional-label', standalone: true, imports: [CommonModule], template: "<div class=\"functional-label\">\r\n  <i class=\"{{ icon }}\"></i>\r\n  <a href=\"/*\" class=\"color-text-neutral-700\">{{ content }}</a>\r\n</div>\r\n", styles: [".functional-label{display:flex;align-items:center;justify-content:center;height:36px;gap:0;padding:4px 8px;cursor:pointer;transition:gap .25s ease,justify-content .25s ease}.functional-label-icon{min-width:20px;height:20px;display:flex;justify-content:center;align-items:center;flex-shrink:0;color:var(--neutral-color-200)}.functional-label a{min-width:100px;white-space:nowrap;display:none;padding:8px;color:var(--neutral-color-200);font-size:var(--font-sm);text-decoration:none;opacity:0;transform:translate(-8px);transition:opacity .15s ease,transform .15s ease}:host-context(.sidebar-wrapper:hover) .functional-label{justify-content:flex-start;gap:12px}:host-context(.sidebar-wrapper:hover) .functional-label a{opacity:1;transform:translate(0);display:block}\n"] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }] } });
+
+class SidebarComponent {
+    menuItems = [];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SidebarComponent, isStandalone: true, selector: "app-sidebar", inputs: { menuItems: "menuItems" }, ngImport: i0, template: "<div class=\"sidebar-wrapper\">\r\n  <aside class=\"sidebar\">\r\n    @for (item of menuItems; track $index) {\r\n      <app-functional-label [icon]=\"item.icon\" [content]=\"item.content\"></app-functional-label>\r\n    }\r\n  </aside>\r\n</div>\r\n", styles: [":host{display:block;height:100%}.sidebar-wrapper{width:56px;height:100%;transition:width .3s ease}.sidebar{width:56px;height:100%;padding:8px;box-sizing:border-box;background-color:var(--brand-600);border-radius:16px;overflow:hidden;transition:width .3s ease,padding .3s ease,background-color .3s ease}.sidebar-wrapper:hover{width:344px}.sidebar-wrapper:hover .sidebar{width:344px;padding:16px;background-color:var(--theme-neutral-light-100)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FunctionalLabelComponent, selector: "app-functional-label", inputs: ["icon", "content"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sidebar', standalone: true, imports: [CommonModule, FunctionalLabelComponent], template: "<div class=\"sidebar-wrapper\">\r\n  <aside class=\"sidebar\">\r\n    @for (item of menuItems; track $index) {\r\n      <app-functional-label [icon]=\"item.icon\" [content]=\"item.content\"></app-functional-label>\r\n    }\r\n  </aside>\r\n</div>\r\n", styles: [":host{display:block;height:100%}.sidebar-wrapper{width:56px;height:100%;transition:width .3s ease}.sidebar{width:56px;height:100%;padding:8px;box-sizing:border-box;background-color:var(--brand-600);border-radius:16px;overflow:hidden;transition:width .3s ease,padding .3s ease,background-color .3s ease}.sidebar-wrapper:hover{width:344px}.sidebar-wrapper:hover .sidebar{width:344px;padding:16px;background-color:var(--theme-neutral-light-100)}\n"] }]
+        }], propDecorators: { menuItems: [{
+                type: Input
+            }] } });
+
+class MainLayoutComponent {
+    sidebarItems = [];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MainLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: MainLayoutComponent, isStandalone: true, selector: "app-main-layout", inputs: { sidebarItems: "sidebarItems" }, ngImport: i0, template: "<div class=\"web-container\">\r\n  <div class=\"main-layout\">\r\n    <app-header-component></app-header-component>\r\n\r\n    <div class=\"layout-body\">\r\n      <div class=\"layout-body-sidebar\">\r\n        <app-sidebar [menuItems]=\"sidebarItems\"></app-sidebar>\r\n      </div>\r\n\r\n      <div class=\"layout-body-content\">\r\n        <router-outlet />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".web-container{display:flex;justify-content:center;align-items:center;background-color:var(--brand-100)}.main-layout{background-color:var(--brand-100);min-height:100vh;display:flex;flex-direction:column;padding:4px;max-width:1370px;min-width:1370px;width:1370px}.layout-body{padding:16px 8px;margin:0;display:flex;height:100%;justify-content:space-between}.layout-body-content{flex:1}.layout-body-sidebar{margin-right:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: HeaderComponent, selector: "app-header-component" }, { kind: "component", type: SidebarComponent, selector: "app-sidebar", inputs: ["menuItems"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MainLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-main-layout', standalone: true, imports: [CommonModule, RouterOutlet, HeaderComponent, SidebarComponent], template: "<div class=\"web-container\">\r\n  <div class=\"main-layout\">\r\n    <app-header-component></app-header-component>\r\n\r\n    <div class=\"layout-body\">\r\n      <div class=\"layout-body-sidebar\">\r\n        <app-sidebar [menuItems]=\"sidebarItems\"></app-sidebar>\r\n      </div>\r\n\r\n      <div class=\"layout-body-content\">\r\n        <router-outlet />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".web-container{display:flex;justify-content:center;align-items:center;background-color:var(--brand-100)}.main-layout{background-color:var(--brand-100);min-height:100vh;display:flex;flex-direction:column;padding:4px;max-width:1370px;min-width:1370px;width:1370px}.layout-body{padding:16px 8px;margin:0;display:flex;height:100%;justify-content:space-between}.layout-body-content{flex:1}.layout-body-sidebar{margin-right:20px}\n"] }]
+        }], propDecorators: { sidebarItems: [{
+                type: Input
+            }] } });
+
+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.1", ngImport: i0, type: ButtonContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", 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.1", 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.1", ngImport: i0, type: LabelButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", 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.1", 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.1", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", 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.1", 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)
+            return;
+        const newValue = this._value + this.step;
+        if (newValue <= this.max) {
+            this._value = newValue;
+            this.valueChange.emit(this._value);
+        }
+    }
+    decrement() {
+        if (this.readonly)
+            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.1", ngImport: i0, type: InputStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", 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.1", 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;
+    }
+    // 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 date
+        if (value.length === 10) {
+            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.1", ngImport: i0, type: InputCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", 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.1", 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.1", ngImport: i0, type: TableHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", 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.1", 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.1", ngImport: i0, type: TableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", 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.1", 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.1", ngImport: i0, type: ApprovalListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", 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.1", 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.1", ngImport: i0, type: ApprovalListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", 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\">{{ headerContentRight }}</span>\r\n    <div>\r\n      <p>{{ headerContentLeft }}</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.1", 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\">{{ headerContentRight }}</span>\r\n    <div>\r\n      <p>{{ headerContentLeft }}</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.1", ngImport: i0, type: PopUpConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", 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\">\r\n    <div class=\"pop-up-confirm\">\r\n        <div class=\"pop-up-confirm-content\">\r\n            <img *ngIf=\"imgUrl\" [src]=\"imgUrl\" alt=\"\">\r\n            <div class=\"pop-up-confirm-text\">\r\n                <p class=\"pop-up-title\">{{title}}</p>\r\n                <p class=\"pop-up-content\">{{content}}</p>\r\n            </div>\r\n        </div>\r\n        <div class=\"pop-up-confirm-actions\">\r\n            <app-button-container size=\"md\" content=\"Quay L\u1EA1i\" backgroundColor=\"var(--neutral-100)\" color=\"var(--neutral-800)\" (buttonClick)=\"onCancel()\"></app-button-container>\r\n            <app-button-container size=\"md\" content=\"\u0110\u1ED3ng \u00DD\" [backgroundColor]=\"colorButton\" color=\"#fff\" (buttonClick)=\"onConfirm()\"></app-button-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".pop-up-confirm-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--neutral-color-875-rgb, 30, 34, 37),.5);display:flex;justify-content:center;align-items:center;z-index:1000}.pop-up-confirm{background-color:var(--neutral-color-10);border-radius:var(--radius-lg);padding:24px;min-width:320px;max-width:400px;box-shadow:0 4px 20px rgba(var(--neutral-color-875-rgb, 30, 34, 37),.15)}.pop-up-confirm-content{display:flex;gap:16px;align-items:center;justify-content:center;flex-direction:column;margin-bottom:24px;width:352px;height:172px}.pop-up-confirm-content img{width:96px;height:96px;object-fit:contain;flex-shrink:0}.pop-up-confirm-text{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px}.pop-up-title{font-size:var(--font-xl);font-weight:600;color:var(--neutral-color-875);margin:0}.pop-up-content{font-size:var(--font-sm);color:var(--neutral-color-500);margin:0}.pop-up-confirm-actions{display:flex;gap:12px;justify-content:center;align-items:center;padding:16px 8px}\n"], 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.1", 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\">\r\n    <div class=\"pop-up-confirm\">\r\n        <div class=\"pop-up-confirm-content\">\r\n            <img *ngIf=\"imgUrl\" [src]=\"imgUrl\" alt=\"\">\r\n            <div class=\"pop-up-confirm-text\">\r\n                <p class=\"pop-up-title\">{{title}}</p>\r\n                <p class=\"pop-up-content\">{{content}}</p>\r\n            </div>\r\n        </div>\r\n        <div class=\"pop-up-confirm-actions\">\r\n            <app-button-container size=\"md\" content=\"Quay L\u1EA1i\" backgroundColor=\"var(--neutral-100)\" color=\"var(--neutral-800)\" (buttonClick)=\"onCancel()\"></app-button-container>\r\n            <app-button-container size=\"md\" content=\"\u0110\u1ED3ng \u00DD\" [backgroundColor]=\"colorButton\" color=\"#fff\" (buttonClick)=\"onConfirm()\"></app-button-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".pop-up-confirm-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--neutral-color-875-rgb, 30, 34, 37),.5);display:flex;justify-content:center;align-items:center;z-index:1000}.pop-up-confirm{background-color:var(--neutral-color-10);border-radius:var(--radius-lg);padding:24px;min-width:320px;max-width:400px;box-shadow:0 4px 20px rgba(var(--neutral-color-875-rgb, 30, 34, 37),.15)}.pop-up-confirm-content{display:flex;gap:16px;align-items:center;justify-content:center;flex-direction:column;margin-bottom:24px;width:352px;height:172px}.pop-up-confirm-content img{width:96px;height:96px;object-fit:contain;flex-shrink:0}.pop-up-confirm-text{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px}.pop-up-title{font-size:var(--font-xl);font-weight:600;color:var(--neutral-color-875);margin:0}.pop-up-content{font-size:var(--font-sm);color:var(--neutral-color-500);margin:0}.pop-up-confirm-actions{display:flex;gap:12px;justify-content:center;align-items:center;padding:16px 8px}\n"] }]
+        }], 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
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ApprovalListComponent, ButtonContainerComponent, HeaderComponent, InputCalendarComponent, InputStepperComponent, InputTextComponent, LabelButtonComponent, MainLayoutComponent, PopUpConfirmComponent, SidebarComponent, TableBodyComponent, TableHeaderComponent };
+//# sourceMappingURL=goat-bravos-intern-hub-layout.mjs.map