mesauth-angular 1.16.5 → 1.17.0

package/fesm2022/mesauth-angular.mjs

@@ -10,7 +10,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { DatePipe } from '@angular/common';
 
 /** Current installed package version — keep in sync with package.json. */
-const PACKAGE_VERSION = '1.16.5';
+const PACKAGE_VERSION = '1.17.0';
 /**
  * Provides server-driven UI configuration loaded from the hosted manifest.
  * Components read `labels()` and `features()` signals instead of hardcoded strings.
@@ -586,6 +586,7 @@ class UserProfileComponent {
     inputAvatarShape = input('circle', ...(ngDevMode ? [{ debugName: "inputAvatarShape" }] : /* istanbul ignore next */ []));
     showBell = input(true, ...(ngDevMode ? [{ debugName: "showBell" }] : /* istanbul ignore next */ []));
     showApproval = input(true, ...(ngDevMode ? [{ debugName: "showApproval" }] : /* istanbul ignore next */ []));
+    showName = input(false, ...(ngDevMode ? [{ debugName: "showName" }] : /* istanbul ignore next */ []));
     notificationClick = output();
     approvalClick = output();
     get themeClass() {
@@ -741,12 +742,12 @@ class UserProfileComponent {
         this.notificationClick.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: UserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: UserProfileComponent, isStandalone: true, selector: "ma-user-profile", inputs: { inputAvatarShape: { classPropertyName: "inputAvatarShape", publicName: "inputAvatarShape", isSignal: true, isRequired: false, transformFunction: null }, showBell: { classPropertyName: "showBell", publicName: "showBell", isSignal: true, isRequired: false, transformFunction: null }, showApproval: { classPropertyName: "showApproval", publicName: "showApproval", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { notificationClick: "notificationClick", approvalClick: "approvalClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "this.themeClass" } }, ngImport: i0, template: "<div class=\"user-profile-container\">\n  @if (!currentUser()) {\n    <!-- Not logged in -->\n    <button class=\"login-btn\" (click)=\"onLogin()\">Login</button>\n  } @else {\n    <!-- Logged in -->\n    <div class=\"user-header\">\n      <!-- Notification Bell -->\n       @if (showBell()) {\n        <button class=\"notification-btn\" [class.has-unread]=\"unreadCount() > 0\" (click)=\"onNotificationClick()\" title=\"Notifications\" aria-label=\"Notifications\">\n          <svg class=\"bell-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n            <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n          </svg>\n          @if (unreadCount() > 0) {\n            <span class=\"badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</span>\n          }\n        </button>\n       }\n      \n\n      <!-- Approval Button -->\n       @if (showApproval()) {\n         <button class=\"notification-btn\" [class.has-unread]=\"pendingApprovalCount() > 0\" (click)=\"onApprovalClick()\" title=\"Approvals\" aria-label=\"Approvals\">\n           <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n             <path d=\"M9 11l3 3L22 4\"/>\n             <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/>\n           </svg>\n           @if (pendingApprovalCount() > 0) {\n             <span class=\"badge\">{{ pendingApprovalCount() > 99 ? '99+' : pendingApprovalCount() }}</span>\n           }\n         </button>\n       }      \n\n      <!-- User Avatar + Dropdown -->\n      <div class=\"user-menu-wrapper\">\n        <button class=\"user-menu-btn\" (click)=\"toggleDropdown()\" [attr.aria-label]=\"'User menu for ' + (currentUser().fullName || currentUser().userName)\" aria-haspopup=\"true\" [attr.aria-expanded]=\"dropdownOpen()\">\n          <ma-avatar\n            [src]=\"getAvatarUrl(currentUser())\"\n            [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n            [initials]=\"getLastNameInitial(currentUser())\"\n            [size]=\"navAvatarSize()\"\n            [shape]=\"avatarShape()\"\n            [ratio]=\"avatarRatio()\"\n            [frame]=\"avatarFrame()\"            \n            [ring]=\"true\"\n            [ringActive]=\"dropdownOpen()\" />          \n        </button>\n\n        @if (dropdownOpen()) {\n          <div class=\"mes-dropdown-menu\">\n            <!-- User info header -->\n            <div class=\"mes-dropdown-header\">\n              <div class=\"dropdown-avatar-wrap\">\n                <ma-avatar\n                  [src]=\"getAvatarUrl(currentUser())\"\n                  [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n                  [initials]=\"getLastNameInitial(currentUser())\"\n                  [size]=\"dropAvatarSize()\"\n                  [shape]=\"avatarShape()\"\n                  [ratio]=\"avatarRatio()\"\n                  [frame]=\"avatarFrame()\"\n                  [scale]=\"1.5\" />                \n              </div>\n              <div class=\"dropdown-info-col\">\n                <div class=\"dropdown-user-info\">\n                  <span class=\"dropdown-user-name\">{{ currentUser().fullName || currentUser().userName }}</span>                  \n                    <span class=\"dropdown-user-sub\">\n                      @if (currentUser().position || currentUser().department) {\n                        {{ currentUser().position || currentUser().department }}                      \n                      }\n                      @if (currentUser().givenTitle) {\n                        <span class=\"given-title-badge given-title\"\n                          [class]=\"'given-color-' + givenStyle()\">{{ currentUser().givenTitle }}</span>\n                      }\n                    </span>\n                </div>\n                <div class=\"dropdown-user-actions\">\n                  <button class=\"icon-action profile-link\" (click)=\"onViewProfile()\" title=\"View Profile\" aria-label=\"View Profile\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>\n                    </svg>\n                  </button>\n                  <button class=\"icon-action logout-item\" (click)=\"onLogout()\" title=\"Logout\" aria-label=\"Logout\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/><polyline points=\"16 17 21 12 16 7\"/><line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"mes-dropdown-items\">\n              <ng-content></ng-content>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".user-profile-container{display:flex;align-items:center;gap:4px}.login-btn{padding:7px 18px;background-color:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;font-size:13px;letter-spacing:.2px;transition:background-color .2s,transform .15s}.login-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.user-header{display:flex;align-items:center;gap:4px}.notification-btn{position:relative;background:none;border:none;cursor:pointer;padding:8px;border-radius:10px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.notification-btn:hover{background-color:var(--primary-light);color:var(--primary-color)}.notification-btn.has-unread{color:var(--primary-color)}.bell-icon{display:block;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}.notification-btn:hover .bell-icon{transform:rotate(-20deg) scale(1.15)}.badge{position:absolute;top:2px;right:2px;background-color:var(--error-color);color:#fff;border-radius:10px;min-width:17px;height:17px;padding:0 4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--bg-primary);animation:badge-pop .25s cubic-bezier(.34,1.56,.64,1)}@keyframes badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.user-menu-wrapper{position:relative}.user-menu-btn{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:transform .2s}.user-menu-btn:hover{transform:scale(1.06)}.mes-dropdown-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:14px;box-shadow:0 8px 32px var(--shadow-lg),0 2px 8px var(--shadow);min-width:220px;z-index:1000;overflow:hidden;animation:dropdown-in .16s cubic-bezier(.16,1,.3,1)}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.mes-dropdown-header{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg-secondary)}.dropdown-avatar-wrap{flex-shrink:0}.mes-dropdown-header .dropdown-avatar-wrap{margin-right:5px}.dropdown-user-info{display:flex;flex-direction:column;gap:3px;min-width:0}.dropdown-user-name{font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px;min-width:120px}.dropdown-user-sub{font-size:11px;color:var(--primary-color);font-weight:500;white-space:nowrap;text-overflow:ellipsis;margin-bottom:12px}.given-title{float:inline-end}.mes-dropdown-divider{height:1px;background:var(--border-color)}.dropdown-info-col{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}.dropdown-user-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px}.icon-action{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:8px;cursor:pointer;color:var(--text-secondary);transition:background-color .15s,color .15s,transform .15s}.icon-action:hover{transform:translateY(-1px)}.icon-action.profile-link{color:var(--primary-color)}.icon-action.profile-link:hover{background-color:var(--primary-light)}.icon-action.logout-item{color:var(--error-color)}.icon-action.logout-item:hover{background-color:var(--error-light)}.mes-dropdown-items:not(:empty){border-top:1px solid var(--border-color)}\n"], dependencies: [{ kind: "component", type: MaAvatarComponent, selector: "ma-avatar", inputs: ["src", "alt", "initials", "size", "shape", "frame", "ratio", "scale", "ring", "ringActive"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: UserProfileComponent, isStandalone: true, selector: "ma-user-profile", inputs: { inputAvatarShape: { classPropertyName: "inputAvatarShape", publicName: "inputAvatarShape", isSignal: true, isRequired: false, transformFunction: null }, showBell: { classPropertyName: "showBell", publicName: "showBell", isSignal: true, isRequired: false, transformFunction: null }, showApproval: { classPropertyName: "showApproval", publicName: "showApproval", isSignal: true, isRequired: false, transformFunction: null }, showName: { classPropertyName: "showName", publicName: "showName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { notificationClick: "notificationClick", approvalClick: "approvalClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "this.themeClass" } }, ngImport: i0, template: "<div class=\"user-profile-container\">\n  @if (!currentUser()) {\n    <!-- Not logged in -->\n    <button class=\"login-btn\" (click)=\"onLogin()\">Login</button>\n  } @else {\n    <!-- Logged in -->\n    <div class=\"user-header\">\n      <!-- Notification Bell -->\n       @if (showBell()) {\n        <button class=\"notification-btn\" [class.has-unread]=\"unreadCount() > 0\" (click)=\"onNotificationClick()\" title=\"Notifications\" aria-label=\"Notifications\">\n          <svg class=\"bell-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n            <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n          </svg>\n          @if (unreadCount() > 0) {\n            <span class=\"badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</span>\n          }\n        </button>\n       }\n      \n\n      <!-- Approval Button -->\n       @if (showApproval()) {\n         <button class=\"notification-btn\" [class.has-unread]=\"pendingApprovalCount() > 0\" (click)=\"onApprovalClick()\" title=\"Approvals\" aria-label=\"Approvals\">\n           <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n             <path d=\"M9 11l3 3L22 4\"/>\n             <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/>\n           </svg>\n           @if (pendingApprovalCount() > 0) {\n             <span class=\"badge\">{{ pendingApprovalCount() > 99 ? '99+' : pendingApprovalCount() }}</span>\n           }\n         </button>\n       }      \n\n      <!-- User Avatar + Dropdown -->\n      <div class=\"user-menu-wrapper\">\n        <button class=\"user-menu-btn\" (click)=\"toggleDropdown()\" [attr.aria-label]=\"'User menu for ' + (currentUser().fullName || currentUser().userName)\" aria-haspopup=\"true\" [attr.aria-expanded]=\"dropdownOpen()\">\n          <ma-avatar\n            [src]=\"getAvatarUrl(currentUser())\"\n            [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n            [initials]=\"getLastNameInitial(currentUser())\"\n            [size]=\"navAvatarSize()\"\n            [shape]=\"avatarShape()\"\n            [ratio]=\"avatarRatio()\"\n            [frame]=\"avatarFrame()\"            \n            [ring]=\"true\"\n            [ringActive]=\"dropdownOpen()\" />          \n        </button>\n\n        @if (dropdownOpen()) {\n          <div class=\"mes-dropdown-menu\">\n            <!-- User info header -->\n            <div class=\"mes-dropdown-header\">\n              <div class=\"dropdown-avatar-wrap\">\n                <ma-avatar\n                  [src]=\"getAvatarUrl(currentUser())\"\n                  [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n                  [initials]=\"getLastNameInitial(currentUser())\"\n                  [size]=\"dropAvatarSize()\"\n                  [shape]=\"avatarShape()\"\n                  [ratio]=\"avatarRatio()\"\n                  [frame]=\"avatarFrame()\"\n                  [scale]=\"1.5\" />                \n              </div>             \n              <div class=\"dropdown-info-col\">\n                <div class=\"dropdown-user-info\">\n                  <span class=\"dropdown-user-name\">{{ currentUser().fullName || currentUser().userName }}</span>                  \n                    <span class=\"dropdown-user-sub\">\n                      @if (currentUser().position || currentUser().department) {\n                        {{ currentUser().position || currentUser().department }}                      \n                      }\n                      @if (currentUser().givenTitle) {\n                        <span class=\"given-title-badge given-title\"\n                          [class]=\"'given-color-' + givenStyle()\">{{ currentUser().givenTitle }}</span>\n                      }\n                    </span>\n                </div>\n                <div class=\"dropdown-user-actions\">\n                  <button class=\"icon-action profile-link\" (click)=\"onViewProfile()\" title=\"View Profile\" aria-label=\"View Profile\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>\n                    </svg>\n                  </button>\n                  <button class=\"icon-action logout-item\" (click)=\"onLogout()\" title=\"Logout\" aria-label=\"Logout\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/><polyline points=\"16 17 21 12 16 7\"/><line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"mes-dropdown-items\">\n              <ng-content></ng-content>\n            </div>\n          </div>\n        }\n      </div>\n\n       @if (showName()){\n          <div class=\"mes-user-header\">\n            {{currentUser().fullName || currentUser().userName}}\n          </div>\n        }\n    </div>\n  }\n</div>\n", styles: [".user-profile-container{display:flex;align-items:center;gap:4px}.login-btn{padding:7px 18px;background-color:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;font-size:13px;letter-spacing:.2px;transition:background-color .2s,transform .15s}.login-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.user-header{display:flex;align-items:center;gap:4px}.mes-user-header{margin-left:10px;font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-btn{position:relative;background:none;border:none;cursor:pointer;padding:8px;border-radius:10px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.notification-btn:hover{background-color:var(--primary-light);color:var(--primary-color)}.notification-btn.has-unread{color:var(--primary-color)}.bell-icon{display:block;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}.notification-btn:hover .bell-icon{transform:rotate(-20deg) scale(1.15)}.badge{position:absolute;top:2px;right:2px;background-color:var(--error-color);color:#fff;border-radius:10px;min-width:17px;height:17px;padding:0 4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--bg-primary);animation:badge-pop .25s cubic-bezier(.34,1.56,.64,1)}@keyframes badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.user-menu-wrapper{position:relative}.user-menu-btn{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:transform .2s}.user-menu-btn:hover{transform:scale(1.06)}.mes-dropdown-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:14px;box-shadow:0 8px 32px var(--shadow-lg),0 2px 8px var(--shadow);min-width:220px;z-index:1000;overflow:hidden;animation:dropdown-in .16s cubic-bezier(.16,1,.3,1)}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.mes-dropdown-header{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg-secondary)}.dropdown-avatar-wrap{flex-shrink:0}.mes-dropdown-header .dropdown-avatar-wrap{margin-right:5px}.dropdown-user-info{display:flex;flex-direction:column;gap:3px;min-width:0}.dropdown-user-name{font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px;min-width:180px}.dropdown-user-sub{font-size:11px;color:var(--primary-color);font-weight:500;white-space:nowrap;text-overflow:ellipsis;margin-bottom:12px}.given-title{float:inline-end}.mes-dropdown-divider{height:1px;background:var(--border-color)}.dropdown-info-col{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}.dropdown-user-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px}.icon-action{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:8px;cursor:pointer;color:var(--text-secondary);transition:background-color .15s,color .15s,transform .15s}.icon-action:hover{transform:translateY(-1px)}.icon-action.profile-link{color:var(--primary-color)}.icon-action.profile-link:hover{background-color:var(--primary-light)}.icon-action.logout-item{color:var(--error-color)}.icon-action.logout-item:hover{background-color:var(--error-light)}.mes-dropdown-items:not(:empty){border-top:1px solid var(--border-color)}\n"], dependencies: [{ kind: "component", type: MaAvatarComponent, selector: "ma-avatar", inputs: ["src", "alt", "initials", "size", "shape", "frame", "ratio", "scale", "ring", "ringActive"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: UserProfileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ma-user-profile', imports: [MaAvatarComponent], template: "<div class=\"user-profile-container\">\n  @if (!currentUser()) {\n    <!-- Not logged in -->\n    <button class=\"login-btn\" (click)=\"onLogin()\">Login</button>\n  } @else {\n    <!-- Logged in -->\n    <div class=\"user-header\">\n      <!-- Notification Bell -->\n       @if (showBell()) {\n        <button class=\"notification-btn\" [class.has-unread]=\"unreadCount() > 0\" (click)=\"onNotificationClick()\" title=\"Notifications\" aria-label=\"Notifications\">\n          <svg class=\"bell-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n            <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n          </svg>\n          @if (unreadCount() > 0) {\n            <span class=\"badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</span>\n          }\n        </button>\n       }\n      \n\n      <!-- Approval Button -->\n       @if (showApproval()) {\n         <button class=\"notification-btn\" [class.has-unread]=\"pendingApprovalCount() > 0\" (click)=\"onApprovalClick()\" title=\"Approvals\" aria-label=\"Approvals\">\n           <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n             <path d=\"M9 11l3 3L22 4\"/>\n             <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/>\n           </svg>\n           @if (pendingApprovalCount() > 0) {\n             <span class=\"badge\">{{ pendingApprovalCount() > 99 ? '99+' : pendingApprovalCount() }}</span>\n           }\n         </button>\n       }      \n\n      <!-- User Avatar + Dropdown -->\n      <div class=\"user-menu-wrapper\">\n        <button class=\"user-menu-btn\" (click)=\"toggleDropdown()\" [attr.aria-label]=\"'User menu for ' + (currentUser().fullName || currentUser().userName)\" aria-haspopup=\"true\" [attr.aria-expanded]=\"dropdownOpen()\">\n          <ma-avatar\n            [src]=\"getAvatarUrl(currentUser())\"\n            [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n            [initials]=\"getLastNameInitial(currentUser())\"\n            [size]=\"navAvatarSize()\"\n            [shape]=\"avatarShape()\"\n            [ratio]=\"avatarRatio()\"\n            [frame]=\"avatarFrame()\"            \n            [ring]=\"true\"\n            [ringActive]=\"dropdownOpen()\" />          \n        </button>\n\n        @if (dropdownOpen()) {\n          <div class=\"mes-dropdown-menu\">\n            <!-- User info header -->\n            <div class=\"mes-dropdown-header\">\n              <div class=\"dropdown-avatar-wrap\">\n                <ma-avatar\n                  [src]=\"getAvatarUrl(currentUser())\"\n                  [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n                  [initials]=\"getLastNameInitial(currentUser())\"\n                  [size]=\"dropAvatarSize()\"\n                  [shape]=\"avatarShape()\"\n                  [ratio]=\"avatarRatio()\"\n                  [frame]=\"avatarFrame()\"\n                  [scale]=\"1.5\" />                \n              </div>\n              <div class=\"dropdown-info-col\">\n                <div class=\"dropdown-user-info\">\n                  <span class=\"dropdown-user-name\">{{ currentUser().fullName || currentUser().userName }}</span>                  \n                    <span class=\"dropdown-user-sub\">\n                      @if (currentUser().position || currentUser().department) {\n                        {{ currentUser().position || currentUser().department }}                      \n                      }\n                      @if (currentUser().givenTitle) {\n                        <span class=\"given-title-badge given-title\"\n                          [class]=\"'given-color-' + givenStyle()\">{{ currentUser().givenTitle }}</span>\n                      }\n                    </span>\n                </div>\n                <div class=\"dropdown-user-actions\">\n                  <button class=\"icon-action profile-link\" (click)=\"onViewProfile()\" title=\"View Profile\" aria-label=\"View Profile\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>\n                    </svg>\n                  </button>\n                  <button class=\"icon-action logout-item\" (click)=\"onLogout()\" title=\"Logout\" aria-label=\"Logout\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/><polyline points=\"16 17 21 12 16 7\"/><line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"mes-dropdown-items\">\n              <ng-content></ng-content>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".user-profile-container{display:flex;align-items:center;gap:4px}.login-btn{padding:7px 18px;background-color:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;font-size:13px;letter-spacing:.2px;transition:background-color .2s,transform .15s}.login-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.user-header{display:flex;align-items:center;gap:4px}.notification-btn{position:relative;background:none;border:none;cursor:pointer;padding:8px;border-radius:10px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.notification-btn:hover{background-color:var(--primary-light);color:var(--primary-color)}.notification-btn.has-unread{color:var(--primary-color)}.bell-icon{display:block;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}.notification-btn:hover .bell-icon{transform:rotate(-20deg) scale(1.15)}.badge{position:absolute;top:2px;right:2px;background-color:var(--error-color);color:#fff;border-radius:10px;min-width:17px;height:17px;padding:0 4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--bg-primary);animation:badge-pop .25s cubic-bezier(.34,1.56,.64,1)}@keyframes badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.user-menu-wrapper{position:relative}.user-menu-btn{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:transform .2s}.user-menu-btn:hover{transform:scale(1.06)}.mes-dropdown-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:14px;box-shadow:0 8px 32px var(--shadow-lg),0 2px 8px var(--shadow);min-width:220px;z-index:1000;overflow:hidden;animation:dropdown-in .16s cubic-bezier(.16,1,.3,1)}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.mes-dropdown-header{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg-secondary)}.dropdown-avatar-wrap{flex-shrink:0}.mes-dropdown-header .dropdown-avatar-wrap{margin-right:5px}.dropdown-user-info{display:flex;flex-direction:column;gap:3px;min-width:0}.dropdown-user-name{font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px;min-width:120px}.dropdown-user-sub{font-size:11px;color:var(--primary-color);font-weight:500;white-space:nowrap;text-overflow:ellipsis;margin-bottom:12px}.given-title{float:inline-end}.mes-dropdown-divider{height:1px;background:var(--border-color)}.dropdown-info-col{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}.dropdown-user-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px}.icon-action{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:8px;cursor:pointer;color:var(--text-secondary);transition:background-color .15s,color .15s,transform .15s}.icon-action:hover{transform:translateY(-1px)}.icon-action.profile-link{color:var(--primary-color)}.icon-action.profile-link:hover{background-color:var(--primary-light)}.icon-action.logout-item{color:var(--error-color)}.icon-action.logout-item:hover{background-color:var(--error-light)}.mes-dropdown-items:not(:empty){border-top:1px solid var(--border-color)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputAvatarShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAvatarShape", required: false }] }], showBell: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBell", required: false }] }], showApproval: [{ type: i0.Input, args: [{ isSignal: true, alias: "showApproval", required: false }] }], notificationClick: [{ type: i0.Output, args: ["notificationClick"] }], approvalClick: [{ type: i0.Output, args: ["approvalClick"] }], themeClass: [{
+            args: [{ selector: 'ma-user-profile', imports: [MaAvatarComponent], template: "<div class=\"user-profile-container\">\n  @if (!currentUser()) {\n    <!-- Not logged in -->\n    <button class=\"login-btn\" (click)=\"onLogin()\">Login</button>\n  } @else {\n    <!-- Logged in -->\n    <div class=\"user-header\">\n      <!-- Notification Bell -->\n       @if (showBell()) {\n        <button class=\"notification-btn\" [class.has-unread]=\"unreadCount() > 0\" (click)=\"onNotificationClick()\" title=\"Notifications\" aria-label=\"Notifications\">\n          <svg class=\"bell-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n            <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n          </svg>\n          @if (unreadCount() > 0) {\n            <span class=\"badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</span>\n          }\n        </button>\n       }\n      \n\n      <!-- Approval Button -->\n       @if (showApproval()) {\n         <button class=\"notification-btn\" [class.has-unread]=\"pendingApprovalCount() > 0\" (click)=\"onApprovalClick()\" title=\"Approvals\" aria-label=\"Approvals\">\n           <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n             <path d=\"M9 11l3 3L22 4\"/>\n             <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/>\n           </svg>\n           @if (pendingApprovalCount() > 0) {\n             <span class=\"badge\">{{ pendingApprovalCount() > 99 ? '99+' : pendingApprovalCount() }}</span>\n           }\n         </button>\n       }      \n\n      <!-- User Avatar + Dropdown -->\n      <div class=\"user-menu-wrapper\">\n        <button class=\"user-menu-btn\" (click)=\"toggleDropdown()\" [attr.aria-label]=\"'User menu for ' + (currentUser().fullName || currentUser().userName)\" aria-haspopup=\"true\" [attr.aria-expanded]=\"dropdownOpen()\">\n          <ma-avatar\n            [src]=\"getAvatarUrl(currentUser())\"\n            [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n            [initials]=\"getLastNameInitial(currentUser())\"\n            [size]=\"navAvatarSize()\"\n            [shape]=\"avatarShape()\"\n            [ratio]=\"avatarRatio()\"\n            [frame]=\"avatarFrame()\"            \n            [ring]=\"true\"\n            [ringActive]=\"dropdownOpen()\" />          \n        </button>\n\n        @if (dropdownOpen()) {\n          <div class=\"mes-dropdown-menu\">\n            <!-- User info header -->\n            <div class=\"mes-dropdown-header\">\n              <div class=\"dropdown-avatar-wrap\">\n                <ma-avatar\n                  [src]=\"getAvatarUrl(currentUser())\"\n                  [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n                  [initials]=\"getLastNameInitial(currentUser())\"\n                  [size]=\"dropAvatarSize()\"\n                  [shape]=\"avatarShape()\"\n                  [ratio]=\"avatarRatio()\"\n                  [frame]=\"avatarFrame()\"\n                  [scale]=\"1.5\" />                \n              </div>             \n              <div class=\"dropdown-info-col\">\n                <div class=\"dropdown-user-info\">\n                  <span class=\"dropdown-user-name\">{{ currentUser().fullName || currentUser().userName }}</span>                  \n                    <span class=\"dropdown-user-sub\">\n                      @if (currentUser().position || currentUser().department) {\n                        {{ currentUser().position || currentUser().department }}                      \n                      }\n                      @if (currentUser().givenTitle) {\n                        <span class=\"given-title-badge given-title\"\n                          [class]=\"'given-color-' + givenStyle()\">{{ currentUser().givenTitle }}</span>\n                      }\n                    </span>\n                </div>\n                <div class=\"dropdown-user-actions\">\n                  <button class=\"icon-action profile-link\" (click)=\"onViewProfile()\" title=\"View Profile\" aria-label=\"View Profile\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>\n                    </svg>\n                  </button>\n                  <button class=\"icon-action logout-item\" (click)=\"onLogout()\" title=\"Logout\" aria-label=\"Logout\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/><polyline points=\"16 17 21 12 16 7\"/><line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"mes-dropdown-items\">\n              <ng-content></ng-content>\n            </div>\n          </div>\n        }\n      </div>\n\n       @if (showName()){\n          <div class=\"mes-user-header\">\n            {{currentUser().fullName || currentUser().userName}}\n          </div>\n        }\n    </div>\n  }\n</div>\n", styles: [".user-profile-container{display:flex;align-items:center;gap:4px}.login-btn{padding:7px 18px;background-color:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;font-size:13px;letter-spacing:.2px;transition:background-color .2s,transform .15s}.login-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.user-header{display:flex;align-items:center;gap:4px}.mes-user-header{margin-left:10px;font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-btn{position:relative;background:none;border:none;cursor:pointer;padding:8px;border-radius:10px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.notification-btn:hover{background-color:var(--primary-light);color:var(--primary-color)}.notification-btn.has-unread{color:var(--primary-color)}.bell-icon{display:block;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}.notification-btn:hover .bell-icon{transform:rotate(-20deg) scale(1.15)}.badge{position:absolute;top:2px;right:2px;background-color:var(--error-color);color:#fff;border-radius:10px;min-width:17px;height:17px;padding:0 4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--bg-primary);animation:badge-pop .25s cubic-bezier(.34,1.56,.64,1)}@keyframes badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.user-menu-wrapper{position:relative}.user-menu-btn{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:transform .2s}.user-menu-btn:hover{transform:scale(1.06)}.mes-dropdown-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:14px;box-shadow:0 8px 32px var(--shadow-lg),0 2px 8px var(--shadow);min-width:220px;z-index:1000;overflow:hidden;animation:dropdown-in .16s cubic-bezier(.16,1,.3,1)}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.mes-dropdown-header{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg-secondary)}.dropdown-avatar-wrap{flex-shrink:0}.mes-dropdown-header .dropdown-avatar-wrap{margin-right:5px}.dropdown-user-info{display:flex;flex-direction:column;gap:3px;min-width:0}.dropdown-user-name{font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px;min-width:180px}.dropdown-user-sub{font-size:11px;color:var(--primary-color);font-weight:500;white-space:nowrap;text-overflow:ellipsis;margin-bottom:12px}.given-title{float:inline-end}.mes-dropdown-divider{height:1px;background:var(--border-color)}.dropdown-info-col{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}.dropdown-user-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px}.icon-action{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:8px;cursor:pointer;color:var(--text-secondary);transition:background-color .15s,color .15s,transform .15s}.icon-action:hover{transform:translateY(-1px)}.icon-action.profile-link{color:var(--primary-color)}.icon-action.profile-link:hover{background-color:var(--primary-light)}.icon-action.logout-item{color:var(--error-color)}.icon-action.logout-item:hover{background-color:var(--error-light)}.mes-dropdown-items:not(:empty){border-top:1px solid var(--border-color)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputAvatarShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAvatarShape", required: false }] }], showBell: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBell", required: false }] }], showApproval: [{ type: i0.Input, args: [{ isSignal: true, alias: "showApproval", required: false }] }], showName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showName", required: false }] }], notificationClick: [{ type: i0.Output, args: ["notificationClick"] }], approvalClick: [{ type: i0.Output, args: ["approvalClick"] }], themeClass: [{
                 type: HostBinding,
                 args: ['class']
             }], onDocumentClick: [{
@@ -1245,6 +1246,7 @@ class MaUserComponent {
     avatarShape = input('rounded', ...(ngDevMode ? [{ debugName: "avatarShape" }] : /* istanbul ignore next */ []));
     showBell = input(true, ...(ngDevMode ? [{ debugName: "showBell" }] : /* istanbul ignore next */ []));
     showApproval = input(true, ...(ngDevMode ? [{ debugName: "showApproval" }] : /* istanbul ignore next */ []));
+    showName = input(false, ...(ngDevMode ? [{ debugName: "showName" }] : /* istanbul ignore next */ []));
     theme = input(null, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
     themeService = inject(ThemeService);
     constructor() {
@@ -1272,18 +1274,18 @@ class MaUserComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MaUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: MaUserComponent, isStandalone: true, selector: "ma-user", inputs: { avatarShape: { classPropertyName: "avatarShape", publicName: "avatarShape", isSignal: true, isRequired: false, transformFunction: null }, showBell: { classPropertyName: "showBell", publicName: "showBell", isSignal: true, isRequired: false, transformFunction: null }, showApproval: { classPropertyName: "showApproval", publicName: "showApproval", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "userProfile", first: true, predicate: UserProfileComponent, descendants: true }, { propertyName: "approvalPanel", first: true, predicate: MaApprovalPanelComponent, descendants: true }], ngImport: i0, template: "<ma-toast-container></ma-toast-container>\n<div class=\"user-header\">\n  <ma-user-profile\n    (notificationClick)=\"notificationPanel.open()\"\n    (approvalClick)=\"approvalPanel.open()\"\n    [inputAvatarShape]=\"avatarShape()\"\n    [showBell]=\"showBell()\"\n    [showApproval]=\"showApproval()\">\n    <ng-content></ng-content>\n  </ma-user-profile>\n</div>\n<ma-notification-panel #notificationPanel (notificationRead)=\"onNotificationRead()\"></ma-notification-panel>\n<ma-approval-panel #approvalPanel (approvalActioned)=\"onApprovalActioned()\"></ma-approval-panel>\n", styles: [".user-header{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: ToastContainerComponent, selector: "ma-toast-container" }, { kind: "component", type: UserProfileComponent, selector: "ma-user-profile", inputs: ["inputAvatarShape", "showBell", "showApproval"], outputs: ["notificationClick", "approvalClick"] }, { kind: "component", type: NotificationPanelComponent, selector: "ma-notification-panel", outputs: ["notificationRead"] }, { kind: "component", type: MaApprovalPanelComponent, selector: "ma-approval-panel", outputs: ["approvalActioned"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: MaUserComponent, isStandalone: true, selector: "ma-user", inputs: { avatarShape: { classPropertyName: "avatarShape", publicName: "avatarShape", isSignal: true, isRequired: false, transformFunction: null }, showBell: { classPropertyName: "showBell", publicName: "showBell", isSignal: true, isRequired: false, transformFunction: null }, showApproval: { classPropertyName: "showApproval", publicName: "showApproval", isSignal: true, isRequired: false, transformFunction: null }, showName: { classPropertyName: "showName", publicName: "showName", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "userProfile", first: true, predicate: UserProfileComponent, descendants: true }, { propertyName: "approvalPanel", first: true, predicate: MaApprovalPanelComponent, descendants: true }], ngImport: i0, template: "<ma-toast-container></ma-toast-container>\n<div class=\"user-header\">\n  <ma-user-profile\n    (notificationClick)=\"notificationPanel.open()\"\n    (approvalClick)=\"approvalPanel.open()\"\n    [inputAvatarShape]=\"avatarShape()\"\n    [showBell]=\"showBell()\"\n    [showApproval]=\"showApproval()\"\n    [showName]=\"showName()\">\n    <ng-content></ng-content>\n  </ma-user-profile>   \n</div>\n<ma-notification-panel #notificationPanel (notificationRead)=\"onNotificationRead()\"></ma-notification-panel>\n<ma-approval-panel #approvalPanel (approvalActioned)=\"onApprovalActioned()\"></ma-approval-panel>\n", styles: [".user-header{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: ToastContainerComponent, selector: "ma-toast-container" }, { kind: "component", type: UserProfileComponent, selector: "ma-user-profile", inputs: ["inputAvatarShape", "showBell", "showApproval", "showName"], outputs: ["notificationClick", "approvalClick"] }, { kind: "component", type: NotificationPanelComponent, selector: "ma-notification-panel", outputs: ["notificationRead"] }, { kind: "component", type: MaApprovalPanelComponent, selector: "ma-approval-panel", outputs: ["approvalActioned"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MaUserComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ma-user', imports: [ToastContainerComponent, UserProfileComponent, NotificationPanelComponent, MaApprovalPanelComponent], template: "<ma-toast-container></ma-toast-container>\n<div class=\"user-header\">\n  <ma-user-profile\n    (notificationClick)=\"notificationPanel.open()\"\n    (approvalClick)=\"approvalPanel.open()\"\n    [inputAvatarShape]=\"avatarShape()\"\n    [showBell]=\"showBell()\"\n    [showApproval]=\"showApproval()\">\n    <ng-content></ng-content>\n  </ma-user-profile>\n</div>\n<ma-notification-panel #notificationPanel (notificationRead)=\"onNotificationRead()\"></ma-notification-panel>\n<ma-approval-panel #approvalPanel (approvalActioned)=\"onApprovalActioned()\"></ma-approval-panel>\n", styles: [".user-header{display:flex;justify-content:flex-end}\n"] }]
+            args: [{ selector: 'ma-user', imports: [ToastContainerComponent, UserProfileComponent, NotificationPanelComponent, MaApprovalPanelComponent], template: "<ma-toast-container></ma-toast-container>\n<div class=\"user-header\">\n  <ma-user-profile\n    (notificationClick)=\"notificationPanel.open()\"\n    (approvalClick)=\"approvalPanel.open()\"\n    [inputAvatarShape]=\"avatarShape()\"\n    [showBell]=\"showBell()\"\n    [showApproval]=\"showApproval()\"\n    [showName]=\"showName()\">\n    <ng-content></ng-content>\n  </ma-user-profile>   \n</div>\n<ma-notification-panel #notificationPanel (notificationRead)=\"onNotificationRead()\"></ma-notification-panel>\n<ma-approval-panel #approvalPanel (approvalActioned)=\"onApprovalActioned()\"></ma-approval-panel>\n", styles: [".user-header{display:flex;justify-content:flex-end}\n"] }]
         }], ctorParameters: () => [], propDecorators: { userProfile: [{
                 type: ViewChild,
                 args: [UserProfileComponent]
             }], approvalPanel: [{
                 type: ViewChild,
                 args: [MaApprovalPanelComponent]
-            }], avatarShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarShape", required: false }] }], showBell: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBell", required: false }] }], showApproval: [{ type: i0.Input, args: [{ isSignal: true, alias: "showApproval", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }] } });
+            }], avatarShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarShape", required: false }] }], showBell: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBell", required: false }] }], showApproval: [{ type: i0.Input, args: [{ isSignal: true, alias: "showApproval", required: false }] }], showName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showName", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }] } });
 
 class MaUserXComponent {
     userId = input(null, ...(ngDevMode ? [{ debugName: "userId" }] : /* istanbul ignore next */ []));
@@ -1295,6 +1297,13 @@ class MaUserXComponent {
     user = input(null, ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
     useDefault = input(false, ...(ngDevMode ? [{ debugName: "useDefault" }] : /* istanbul ignore next */ []));
     showTooltip = input(true, ...(ngDevMode ? [{ debugName: "showTooltip" }] : /* istanbul ignore next */ []));
+    // === Signature ===
+    showSignature = input(false, ...(ngDevMode ? [{ debugName: "showSignature" }] : /* istanbul ignore next */ []));
+    // Optional explicit signature URL (e.g. an approval-history snapshot path).
+    // When omitted and showSignature=true, falls back to the live user signature: /auth/{userId}/signature
+    signatureUrl = input(null, ...(ngDevMode ? [{ debugName: "signatureUrl" }] : /* istanbul ignore next */ []));
+    signatureHeight = input(40, ...(ngDevMode ? [{ debugName: "signatureHeight" }] : /* istanbul ignore next */ []));
+    signatureOnly = input(false, ...(ngDevMode ? [{ debugName: "signatureOnly" }] : /* istanbul ignore next */ []));
     theme = input(null, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
     themeService = inject(ThemeService);
     authService = inject(MesAuthService);
@@ -1308,6 +1317,24 @@ class MaUserXComponent {
     avatarFrame = computed(() => this.xUser()?.avatarFrame ?? null, ...(ngDevMode ? [{ debugName: "avatarFrame" }] : /* istanbul ignore next */ []));
     avatarRatio = computed(() => this.ratio() ?? this.xUser()?.avatarRatio, ...(ngDevMode ? [{ debugName: "avatarRatio" }] : /* istanbul ignore next */ []));
     avatarSize = computed(() => this.xUser()?.avatarSize ?? 'md', ...(ngDevMode ? [{ debugName: "avatarSize" }] : /* istanbul ignore next */ []));
+    signatureBroken = signal(false, ...(ngDevMode ? [{ debugName: "signatureBroken" }] : /* istanbul ignore next */ []));
+    resolvedSignatureUrl = computed(() => {
+        if (!this.showSignature() || this.signatureBroken())
+            return null;
+        const baseRaw = this.authService.getConfig()?.apiBaseUrl ?? '';
+        const base = baseRaw.replace(/\/$/, '');
+        const explicit = this.signatureUrl();
+        if (explicit) {
+            if (/^https?:\/\//i.test(explicit))
+                return explicit;
+            return `${base}${explicit.startsWith('/') ? '' : '/'}${explicit}`;
+        }
+        const u = this.xUser();
+        const id = u?.userId ?? u?.id;
+        if (!id || !base)
+            return null;
+        return `${base}/auth/${id}/signature`;
+    }, ...(ngDevMode ? [{ debugName: "resolvedSignatureUrl" }] : /* istanbul ignore next */ []));
     get themeClass() { return `theme-${this.themeService.currentTheme()}`; }
     constructor() {
         effect(() => {
@@ -1321,6 +1348,13 @@ class MaUserXComponent {
             if (user)
                 this.xUser.set(user);
         });
+        effect(() => {
+            // Reset broken flag whenever the signature source changes
+            this.signatureUrl();
+            this.userId();
+            this.xUser();
+            this.signatureBroken.set(false);
+        });
         toObservable(this.userId).pipe(distinctUntilChanged(), switchMap$1(id => {
             if (this.user())
                 return of(null);
@@ -1385,13 +1419,16 @@ class MaUserXComponent {
         if (this.tooltipOpen())
             this.tooltipOpen.set(false);
     }
+    onSigErr(_ev) {
+        this.signatureBroken.set(true);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MaUserXComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: MaUserXComponent, isStandalone: true, selector: "ma-ux", inputs: { userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: false, transformFunction: null }, showName: { classPropertyName: "showName", publicName: "showName", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, useDefault: { classPropertyName: "useDefault", publicName: "useDefault", isSignal: true, isRequired: false, transformFunction: null }, showTooltip: { classPropertyName: "showTooltip", publicName: "showTooltip", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onHostMouseEnter()", "mouseleave": "onHostMouseLeave()", "window:scroll": "onViewportChange()", "window:resize": "onViewportChange()" }, properties: { "class": "this.themeClass" } }, ngImport: i0, template: "<ng-container>\n    @if (xUser()){\n        <ma-avatar\n        [src]=\"getAvatarUrl(xUser())\"\n        [alt]=\"xUser()?.fullName || xUser()?.userName || ''\"\n        [initials]=\"getLastNameInitial(xUser())\"\n        [size]=\"avatarSize()\"\n        [shape]=\"avatarShape()\"\n        [ratio]=\"avatarRatio()\"\n        [frame]=\"avatarFrame()\"\n        [scale]=\"scale()\" />\n        <span class=\"user-name\">{{ name() }}</span>\n        @if (showTitle() && xUser()?.givenTitle){\n            <span class=\"given-title-cell given-title-badge\" [class]=\"'given-color-' + xUser()?.givenColor\">{{xUser()?.givenTitle }}</span>\n        }\n        @if (showTooltip() && xUser(); as u) {\n            <div class=\"ma-ux-tooltip\"\n                [class.open]=\"tooltipOpen()\"\n                [style.top.px]=\"tooltipTop()\"\n                [style.left.px]=\"tooltipLeft()\"\n                role=\"tooltip\">\n                <ma-avatar\n                    [src]=\"getAvatarUrl(u)\"\n                    [alt]=\"u.fullName || u.userName || ''\"\n                    [initials]=\"getLastNameInitial(u)\"\n                    [size]=\"avatarSize()\"\n                    [frame]=\"avatarFrame()\"\n                    [shape]=\"avatarShape()\"\n                    [scale]=\"1\" />\n                <div class=\"ma-ux-tooltip-info\">\n                    <div class=\"ma-ux-tooltip-name\">{{ u.fullName || u.userName }}</div>\n                    <div class=\"ma-ux-tooltip-meta\">                    \n                        <span>{{ u.department || '-' }}</span>\n                        <span class=\"sep\">\u00B7</span>\n                        <span>{{ u.position || '-' }}</span>\n                        @if (showTitle() && xUser()?.givenTitle){                    \n                            <span class=\"given-title-cell given-title-badge\" [class]=\"'given-color-' + xUser()?.givenColor\">{{xUser()?.givenTitle }}</span>                    \n                        }\n                    </div>\n                </div>\n            </div>\n        }\n    }\n    @else {\n        <span>User | UserId is not config!</span>\n    }\n    \n</ng-container>\n", styles: [":host{display:flex;justify-content:flex-start;align-items:center;gap:8px;position:relative}.given-title-cell{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:600;height:19px}.ma-ux-tooltip{position:fixed;top:0;left:0;z-index:2147483000;display:none;align-items:center;gap:10px;padding:8px 12px;min-width:220px;max-width:320px;background:var(--ma-tooltip-bg, #ffffff);color:var(--ma-tooltip-fg, #212529);border:1px solid var(--ma-tooltip-border, rgba(0, 0, 0, .12));border-radius:8px;box-shadow:0 6px 18px #0000002e;pointer-events:none;opacity:0;transform:translateY(calc(-100% + 4px));transition:opacity .12s ease,transform .12s ease;white-space:nowrap}:host(.theme-dark) .ma-ux-tooltip,:host-context(.theme-dark) .ma-ux-tooltip{--ma-tooltip-bg: #2a2d31;--ma-tooltip-fg: #f1f3f5;--ma-tooltip-border: rgba(255, 255, 255, .12)}.ma-ux-tooltip.open{display:flex;opacity:1;transform:translateY(-100%)}.ma-ux-tooltip-info{display:flex;flex-direction:column;gap:2px;min-width:180px}.ma-ux-tooltip-name{font-size:13px;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}.ma-ux-tooltip-meta{font-size:12px;opacity:.85;line-height:1.4;display:flex;align-items:center;gap:6px;text-overflow:ellipsis}.ma-ux-tooltip-meta .sep{opacity:.5}\n"], dependencies: [{ kind: "component", type: MaAvatarComponent, selector: "ma-avatar", inputs: ["src", "alt", "initials", "size", "shape", "frame", "ratio", "scale", "ring", "ringActive"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: MaUserXComponent, isStandalone: true, selector: "ma-ux", inputs: { userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: false, transformFunction: null }, showName: { classPropertyName: "showName", publicName: "showName", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, useDefault: { classPropertyName: "useDefault", publicName: "useDefault", isSignal: true, isRequired: false, transformFunction: null }, showTooltip: { classPropertyName: "showTooltip", publicName: "showTooltip", isSignal: true, isRequired: false, transformFunction: null }, showSignature: { classPropertyName: "showSignature", publicName: "showSignature", isSignal: true, isRequired: false, transformFunction: null }, signatureUrl: { classPropertyName: "signatureUrl", publicName: "signatureUrl", isSignal: true, isRequired: false, transformFunction: null }, signatureHeight: { classPropertyName: "signatureHeight", publicName: "signatureHeight", isSignal: true, isRequired: false, transformFunction: null }, signatureOnly: { classPropertyName: "signatureOnly", publicName: "signatureOnly", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onHostMouseEnter()", "mouseleave": "onHostMouseLeave()", "window:scroll": "onViewportChange()", "window:resize": "onViewportChange()" }, properties: { "class": "this.themeClass" } }, ngImport: i0, template: "<ng-container>\n    @if (xUser()){\n        @if (!signatureOnly()) {\n            <ma-avatar\n            [src]=\"getAvatarUrl(xUser())\"\n            [alt]=\"xUser()?.fullName || xUser()?.userName || ''\"\n            [initials]=\"getLastNameInitial(xUser())\"\n            [size]=\"avatarSize()\"\n            [shape]=\"avatarShape()\"\n            [ratio]=\"avatarRatio()\"\n            [frame]=\"avatarFrame()\"\n            [scale]=\"scale()\" />\n            <span class=\"user-name\">{{ name() }}</span>\n            @if (showTitle() && xUser()?.givenTitle){\n                <span class=\"given-title-cell given-title-badge\" [class]=\"'given-color-' + xUser()?.givenColor\">{{xUser()?.givenTitle }}</span>\n            }\n        }\n        @if (showSignature() && resolvedSignatureUrl(); as sigUrl) {\n            <img class=\"ma-ux-signature\"\n                 [src]=\"sigUrl\"\n                 [style.height.px]=\"signatureHeight()\"\n                 (error)=\"onSigErr($event)\"\n                 alt=\"signature\" />\n        }\n        @if (showTooltip() && xUser(); as u) {\n            <div class=\"ma-ux-tooltip\"\n                [class.open]=\"tooltipOpen()\"\n                [style.top.px]=\"tooltipTop()\"\n                [style.left.px]=\"tooltipLeft()\"\n                role=\"tooltip\">\n                <ma-avatar\n                    [src]=\"getAvatarUrl(u)\"\n                    [alt]=\"u.fullName || u.userName || ''\"\n                    [initials]=\"getLastNameInitial(u)\"\n                    [size]=\"avatarSize()\"\n                    [frame]=\"avatarFrame()\"\n                    [shape]=\"avatarShape()\"\n                    [scale]=\"1\" />\n                <div class=\"ma-ux-tooltip-info\">\n                    <div class=\"ma-ux-tooltip-name\">{{ u.fullName || u.userName }}</div>\n                    <div class=\"ma-ux-tooltip-meta\">                    \n                        <span>{{ u.department || '-' }}</span>\n                        <span class=\"sep\">\u00B7</span>\n                        <span>{{ u.position || '-' }}</span>\n                        @if (showTitle() && xUser()?.givenTitle){                    \n                            <span class=\"given-title-cell given-title-badge\" [class]=\"'given-color-' + xUser()?.givenColor\">{{xUser()?.givenTitle }}</span>                    \n                        }\n                    </div>\n                </div>\n            </div>\n        }\n    }\n    @else {\n        <span>User | UserId is not config!</span>\n    }\n    \n</ng-container>\n", styles: [":host{display:flex;justify-content:flex-start;align-items:center;gap:8px;position:relative}.given-title-cell{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:600;height:19px}.ma-ux-tooltip{position:fixed;top:0;left:0;z-index:2147483000;display:none;align-items:center;gap:10px;padding:8px 12px;min-width:220px;max-width:320px;background:var(--ma-tooltip-bg, #ffffff);color:var(--ma-tooltip-fg, #212529);border:1px solid var(--ma-tooltip-border, rgba(0, 0, 0, .12));border-radius:8px;box-shadow:0 6px 18px #0000002e;pointer-events:none;opacity:0;transform:translateY(calc(-100% + 4px));transition:opacity .12s ease,transform .12s ease;white-space:nowrap}:host(.theme-dark) .ma-ux-tooltip,:host-context(.theme-dark) .ma-ux-tooltip{--ma-tooltip-bg: #2a2d31;--ma-tooltip-fg: #f1f3f5;--ma-tooltip-border: rgba(255, 255, 255, .12)}.ma-ux-tooltip.open{display:flex;opacity:1;transform:translateY(-100%)}.ma-ux-tooltip-info{display:flex;flex-direction:column;gap:2px;min-width:180px}.ma-ux-tooltip-name{font-size:13px;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}.ma-ux-tooltip-meta{font-size:12px;opacity:.85;line-height:1.4;display:flex;align-items:center;gap:6px;text-overflow:ellipsis}.ma-ux-tooltip-meta .sep{opacity:.5}.ma-ux-signature{object-fit:contain;max-width:160px;vertical-align:middle;background:transparent}\n"], dependencies: [{ kind: "component", type: MaAvatarComponent, selector: "ma-avatar", inputs: ["src", "alt", "initials", "size", "shape", "frame", "ratio", "scale", "ring", "ringActive"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MaUserXComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ma-ux', imports: [MaAvatarComponent], template: "<ng-container>\n    @if (xUser()){\n        <ma-avatar\n        [src]=\"getAvatarUrl(xUser())\"\n        [alt]=\"xUser()?.fullName || xUser()?.userName || ''\"\n        [initials]=\"getLastNameInitial(xUser())\"\n        [size]=\"avatarSize()\"\n        [shape]=\"avatarShape()\"\n        [ratio]=\"avatarRatio()\"\n        [frame]=\"avatarFrame()\"\n        [scale]=\"scale()\" />\n        <span class=\"user-name\">{{ name() }}</span>\n        @if (showTitle() && xUser()?.givenTitle){\n            <span class=\"given-title-cell given-title-badge\" [class]=\"'given-color-' + xUser()?.givenColor\">{{xUser()?.givenTitle }}</span>\n        }\n        @if (showTooltip() && xUser(); as u) {\n            <div class=\"ma-ux-tooltip\"\n                [class.open]=\"tooltipOpen()\"\n                [style.top.px]=\"tooltipTop()\"\n                [style.left.px]=\"tooltipLeft()\"\n                role=\"tooltip\">\n                <ma-avatar\n                    [src]=\"getAvatarUrl(u)\"\n                    [alt]=\"u.fullName || u.userName || ''\"\n                    [initials]=\"getLastNameInitial(u)\"\n                    [size]=\"avatarSize()\"\n                    [frame]=\"avatarFrame()\"\n                    [shape]=\"avatarShape()\"\n                    [scale]=\"1\" />\n                <div class=\"ma-ux-tooltip-info\">\n                    <div class=\"ma-ux-tooltip-name\">{{ u.fullName || u.userName }}</div>\n                    <div class=\"ma-ux-tooltip-meta\">                    \n                        <span>{{ u.department || '-' }}</span>\n                        <span class=\"sep\">\u00B7</span>\n                        <span>{{ u.position || '-' }}</span>\n                        @if (showTitle() && xUser()?.givenTitle){                    \n                            <span class=\"given-title-cell given-title-badge\" [class]=\"'given-color-' + xUser()?.givenColor\">{{xUser()?.givenTitle }}</span>                    \n                        }\n                    </div>\n                </div>\n            </div>\n        }\n    }\n    @else {\n        <span>User | UserId is not config!</span>\n    }\n    \n</ng-container>\n", styles: [":host{display:flex;justify-content:flex-start;align-items:center;gap:8px;position:relative}.given-title-cell{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:600;height:19px}.ma-ux-tooltip{position:fixed;top:0;left:0;z-index:2147483000;display:none;align-items:center;gap:10px;padding:8px 12px;min-width:220px;max-width:320px;background:var(--ma-tooltip-bg, #ffffff);color:var(--ma-tooltip-fg, #212529);border:1px solid var(--ma-tooltip-border, rgba(0, 0, 0, .12));border-radius:8px;box-shadow:0 6px 18px #0000002e;pointer-events:none;opacity:0;transform:translateY(calc(-100% + 4px));transition:opacity .12s ease,transform .12s ease;white-space:nowrap}:host(.theme-dark) .ma-ux-tooltip,:host-context(.theme-dark) .ma-ux-tooltip{--ma-tooltip-bg: #2a2d31;--ma-tooltip-fg: #f1f3f5;--ma-tooltip-border: rgba(255, 255, 255, .12)}.ma-ux-tooltip.open{display:flex;opacity:1;transform:translateY(-100%)}.ma-ux-tooltip-info{display:flex;flex-direction:column;gap:2px;min-width:180px}.ma-ux-tooltip-name{font-size:13px;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}.ma-ux-tooltip-meta{font-size:12px;opacity:.85;line-height:1.4;display:flex;align-items:center;gap:6px;text-overflow:ellipsis}.ma-ux-tooltip-meta .sep{opacity:.5}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { userId: [{ type: i0.Input, args: [{ isSignal: true, alias: "userId", required: false }] }], showName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showName", required: false }] }], showTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTitle", required: false }] }], scale: [{ type: i0.Input, args: [{ isSignal: true, alias: "scale", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: false }] }], useDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "useDefault", required: false }] }], showTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltip", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], themeClass: [{
+            args: [{ selector: 'ma-ux', imports: [MaAvatarComponent], template: "<ng-container>\n    @if (xUser()){\n        @if (!signatureOnly()) {\n            <ma-avatar\n            [src]=\"getAvatarUrl(xUser())\"\n            [alt]=\"xUser()?.fullName || xUser()?.userName || ''\"\n            [initials]=\"getLastNameInitial(xUser())\"\n            [size]=\"avatarSize()\"\n            [shape]=\"avatarShape()\"\n            [ratio]=\"avatarRatio()\"\n            [frame]=\"avatarFrame()\"\n            [scale]=\"scale()\" />\n            <span class=\"user-name\">{{ name() }}</span>\n            @if (showTitle() && xUser()?.givenTitle){\n                <span class=\"given-title-cell given-title-badge\" [class]=\"'given-color-' + xUser()?.givenColor\">{{xUser()?.givenTitle }}</span>\n            }\n        }\n        @if (showSignature() && resolvedSignatureUrl(); as sigUrl) {\n            <img class=\"ma-ux-signature\"\n                 [src]=\"sigUrl\"\n                 [style.height.px]=\"signatureHeight()\"\n                 (error)=\"onSigErr($event)\"\n                 alt=\"signature\" />\n        }\n        @if (showTooltip() && xUser(); as u) {\n            <div class=\"ma-ux-tooltip\"\n                [class.open]=\"tooltipOpen()\"\n                [style.top.px]=\"tooltipTop()\"\n                [style.left.px]=\"tooltipLeft()\"\n                role=\"tooltip\">\n                <ma-avatar\n                    [src]=\"getAvatarUrl(u)\"\n                    [alt]=\"u.fullName || u.userName || ''\"\n                    [initials]=\"getLastNameInitial(u)\"\n                    [size]=\"avatarSize()\"\n                    [frame]=\"avatarFrame()\"\n                    [shape]=\"avatarShape()\"\n                    [scale]=\"1\" />\n                <div class=\"ma-ux-tooltip-info\">\n                    <div class=\"ma-ux-tooltip-name\">{{ u.fullName || u.userName }}</div>\n                    <div class=\"ma-ux-tooltip-meta\">                    \n                        <span>{{ u.department || '-' }}</span>\n                        <span class=\"sep\">\u00B7</span>\n                        <span>{{ u.position || '-' }}</span>\n                        @if (showTitle() && xUser()?.givenTitle){                    \n                            <span class=\"given-title-cell given-title-badge\" [class]=\"'given-color-' + xUser()?.givenColor\">{{xUser()?.givenTitle }}</span>                    \n                        }\n                    </div>\n                </div>\n            </div>\n        }\n    }\n    @else {\n        <span>User | UserId is not config!</span>\n    }\n    \n</ng-container>\n", styles: [":host{display:flex;justify-content:flex-start;align-items:center;gap:8px;position:relative}.given-title-cell{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:600;height:19px}.ma-ux-tooltip{position:fixed;top:0;left:0;z-index:2147483000;display:none;align-items:center;gap:10px;padding:8px 12px;min-width:220px;max-width:320px;background:var(--ma-tooltip-bg, #ffffff);color:var(--ma-tooltip-fg, #212529);border:1px solid var(--ma-tooltip-border, rgba(0, 0, 0, .12));border-radius:8px;box-shadow:0 6px 18px #0000002e;pointer-events:none;opacity:0;transform:translateY(calc(-100% + 4px));transition:opacity .12s ease,transform .12s ease;white-space:nowrap}:host(.theme-dark) .ma-ux-tooltip,:host-context(.theme-dark) .ma-ux-tooltip{--ma-tooltip-bg: #2a2d31;--ma-tooltip-fg: #f1f3f5;--ma-tooltip-border: rgba(255, 255, 255, .12)}.ma-ux-tooltip.open{display:flex;opacity:1;transform:translateY(-100%)}.ma-ux-tooltip-info{display:flex;flex-direction:column;gap:2px;min-width:180px}.ma-ux-tooltip-name{font-size:13px;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}.ma-ux-tooltip-meta{font-size:12px;opacity:.85;line-height:1.4;display:flex;align-items:center;gap:6px;text-overflow:ellipsis}.ma-ux-tooltip-meta .sep{opacity:.5}.ma-ux-signature{object-fit:contain;max-width:160px;vertical-align:middle;background:transparent}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { userId: [{ type: i0.Input, args: [{ isSignal: true, alias: "userId", required: false }] }], showName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showName", required: false }] }], showTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTitle", required: false }] }], scale: [{ type: i0.Input, args: [{ isSignal: true, alias: "scale", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: false }] }], useDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "useDefault", required: false }] }], showTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltip", required: false }] }], showSignature: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSignature", required: false }] }], signatureUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "signatureUrl", required: false }] }], signatureHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "signatureHeight", required: false }] }], signatureOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "signatureOnly", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], themeClass: [{
                 type: HostBinding,
                 args: ['class']
             }], onHostMouseEnter: [{
@@ -2037,7 +2074,7 @@ ${clone.outerHTML}
         ];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MaArvContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: MaArvContainerComponent, isStandalone: true, selector: "ma-arv-container", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, referenceId: { classPropertyName: "referenceId", publicName: "referenceId", isSignal: true, isRequired: false, transformFunction: null }, templateIds: { classPropertyName: "templateIds", publicName: "templateIds", isSignal: true, isRequired: false, transformFunction: null }, callbackUrl: { classPropertyName: "callbackUrl", publicName: "callbackUrl", isSignal: true, isRequired: false, transformFunction: null }, deadlineHours: { classPropertyName: "deadlineHours", publicName: "deadlineHours", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { approvalSubmitted: "approvalSubmitted", approvalSubmitting: "approvalSubmitting", cancelled: "cancelled" }, host: { properties: { "class": "this.themeClass" } }, viewQueries: [{ propertyName: "contentBody", first: true, predicate: ["contentBody"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"arv-container\">\n  <!-- Content Area -->\n  <div class=\"arv-content-body\" #contentBody>\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Approval Footer -->\n  <div class=\"arv-footer\">\n    @if (!isSubmitted()) {\n      <div class=\"arv-footer-inner\">\n\n        <!-- Routing mode -->\n        <div class=\"arv-routing\">\n          <div class=\"arv-routing-header\">\n            <h4 class=\"arv-section-title\">Approval Routing</h4>\n            <!-- Show routing toggle only when templateId is NOT locked to a single template -->\n            @if (!templateIds() || templateIds()!.length <= 0) {\n              <div class=\"arv-routing-mode\">\n                <label class=\"arv-radio\">\n                  <input type=\"radio\" name=\"routingMode\" value=\"template\" [checked]=\"routingMode() === 'template'\" (change)=\"routingMode.set('template')\"> Use Template\n                </label>\n                <label class=\"arv-radio\">\n                  <input type=\"radio\" name=\"routingMode\" value=\"adhoc\" [checked]=\"routingMode() === 'adhoc'\" (change)=\"routingMode.set('adhoc')\"> Custom Steps\n                </label>\n              </div>\n            }\n          </div>\n\n          <!-- Locked template: only when templateId set and no multi-choice -->\n          @if (templateIds() && templateIds()!.length === 1 && routingMode() === 'template') {\n            <div class=\"arv-template-select\">\n              @if (loadingTemplate()) {\n                <div class=\"arv-template-loading\">Loading template...</div>\n              }\n              @if (selectedTemplate() && !loadingTemplate()) {\n                <div class=\"arv-locked-template\">\n                  <span class=\"arv-locked-label\">Template</span>\n                  <span class=\"arv-locked-name\">{{ selectedTemplate()!.name }}</span>\n                </div>\n              }\n            </div>\n          }\n          <!-- Template selector: shown when no templateId, OR when templateIds has multiple choices -->\n          @else if (routingMode() === 'template') {\n            <div class=\"arv-template-select\">\n              <label class=\"arv-label\">Select Template</label>\n              <select class=\"arv-select\" (change)=\"onTemplateChange($event)\">\n                <option value=\"\">-- Select a template --</option>\n                @for (t of templates(); track t.id) {\n                  <option [value]=\"t.id\" [selected]=\"t.id === selectedTemplateId()\">{{ t.name }}</option>\n                }\n              </select>\n            </div>\n          }\n\n          <!-- Step pickers (shared for both locked and free template) -->\n          @if (routingMode() === 'template') {\n            <div class=\"arv-template-select\">\n              @if (!loadingTemplate() && selectedTemplate()) {\n                <!-- arv-template-steps  -->\n                <div class=\"arv-steps\">\n                  @for (s of selectedTemplate()!.steps; track s.stepOrder; let i = $index) {\n                    <div class=\"arv-step\">\n                      <div class=\"arv-step-card-header\">\n                        <span class=\"arv-step-preview-num\">Step {{ s.stepOrder }}</span>\n                        <span class=\"arv-step-preview-name\">{{ s.stepName }}</span>\n                        @if(isStepsError()[i]) {\n                          <span class=\"arv-step-error\">Required (*)</span>\n                        }\n                        @if (s.roles && s.roles.length > 0) {\n                          <span class=\"arv-step-role-badge\">\n                            @for (r of s.roles; track r.id) {\n                              {{ r.positionLevel }}{{ r.orgName ? ' \u00B7 ' + r.orgName : '' }}{{ r !== s.roles[s.roles.length - 1] ? ', ' : '' }}\n                            }                            \n                          </span>\n                        }\n                      </div>\n                      <!-- Selectable step: show approver picker -->\n                      @if (stepCandidates()[i]?.length > 1 || stepLoadingCandidates()[i]) {\n                        @if (stepLoadingCandidates()[i]) {\n                          <div class=\"arv-template-loading\">Loading candidates...</div>\n                        }\n                        @if (!stepLoadingCandidates()[i]) {\n                          <div class=\"arv-approvers\">\n                            <div class=\"arv-approver-tags\">\n                              @if (stepSelectedUsers()[i]) {\n                                <span class=\"arv-tag\">\n                                  <ma-ux [userId]=\"stepSelectedUsers()[i]\" [useDefault]=\"true\" [showTitle]=\"false\"/>\n                                  <button class=\"arv-tag-remove\" (click)=\"onStepUserChangeInput(i, '')\">x</button>\n                                </span>\n                              }\n                            </div>\n                            @if (!stepSelectedUsers()[i]) {\n                              <div class=\"arv-user-search arv-step-picker\">\n                                <input class=\"arv-input arv-input-sm\" [value]=\"candidateSearchQuery()[i] || ''\"\n                                  (input)=\"onCandidateSearchInput(i, $any($event.target).value)\"\n                                  (focus)=\"onCandidateSearchInput(i, candidateSearchQuery()[i] || '')\"\n                                  (blur)=\"clearCandidateResults(i)\"\n                                  placeholder=\"Search approver...\" />\n                                @if (candidateSearchResults()[i]?.length) {\n                                  <div class=\"arv-search-results\">\n                                    @for (u of candidateSearchResults()[i]; track u.userId) {\n                                      <div class=\"arv-search-item\" (mousedown)=\"onStepUserChangeInput(i, u.userId)\">\n                                        <ma-ux [userId]=\"u.userId\" [useDefault]=\"true\" [showTitle]=\"false\"/>\n                                      </div>\n                                    }\n                                  </div>\n                                }\n                              </div>\n                            }\n                          </div>\n                        }\n\n                      }\n                      <!-- Single fixed-user step: show who is assigned -->\n                      @if (!stepLoadingCandidates()[i] && stepCandidates()[i]?.length === 1) {\n                        <div class=\"arv-step-fixed\">\n                          <ma-ux [userId]=\"stepCandidates()[i][0].userId\" [useDefault]=\"true\" [showTitle]=\"false\"/>\n                        </div>\n                      }\n                    </div>\n                  }\n                  @if (selectedTemplate() && selectedTemplate()!.referenceUserIds.length > 0) {\n                    <div class=\"arv-step-preview arv-step-preview-cc\">\n                      <span class=\"arv-step-preview-num\">CC</span>\n                      <span class=\"arv-step-preview-name\">{{ selectedTemplate()!.referenceUserIds.length }} reference user(s) from template</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n\n          <!-- Ad-hoc steps -->\n          @if (routingMode() === 'adhoc') {\n            <div class=\"arv-steps\">\n              @for (step of adHocSteps(); track step.stepOrder; let i = $index) {\n                <div class=\"arv-step\">\n                  <div class=\"arv-step-header\">\n                    <span class=\"arv-step-num\">Step {{ i + 1 }}</span>\n                    @if (isStepsError()[i]) {\n                      <span class=\"arv-step-error\">Required (*)</span>\n                    }\n                    <input class=\"arv-input\" [value]=\"step.stepName\" (input)=\"updateStepName(i, $any($event.target).value)\" placeholder=\"Step name\" />\n                    <button class=\"arv-btn-icon arv-btn-danger\" (click)=\"removeStep(i)\" title=\"Remove step\">\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/></svg>\n                    </button>\n                  </div>\n                  <div class=\"arv-approvers\">\n                    <div class=\"arv-approver-tags\">\n                      @for (uid of step.approverUserIds; track uid; let j = $index) {\n                        <span class=\"arv-tag\">\n                          <ma-ux [userId]=\"uid\" [useDefault]=\"true\" [showTitle]=\"false\"/>\n                          <button class=\"arv-tag-remove\" (click)=\"removeApprover(i, j)\">x</button>\n                        </span>\n                      }\n                    </div>\n                    @if (step.approverUserIds.length === 0) {\n                      <div class=\"arv-user-search\">\n                        <input class=\"arv-input arv-input-sm\" [value]=\"userSearchQuery()[i] || ''\"\n                          (input)=\"onUserSearchInput(i, $any($event.target).value)\"\n                          placeholder=\"Search approver...\" />\n                        @if (userSearchResults()[i]?.length) {\n                          <div class=\"arv-search-results\">\n                            @for (u of userSearchResults()[i]; track u.id) {\n                              <div class=\"arv-search-item\" (mousedown)=\"addApprover(i, u.id)\">\n                                <ma-ux [userId]=\"u.id\" [useDefault]=\"true\" [showTitle]=\"false\"/>\n                              </div>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n              }\n              <button class=\"arv-btn arv-btn-outline\" (click)=\"addStep()\">+ Add Step</button>\n            </div>\n          }\n        </div>\n\n        <!-- Reference / CC users -->\n        <div class=\"arv-references\">\n          <h4 class=\"arv-section-title\">CC / Reference</h4>\n          <p class=\"arv-hint\">These users will be notified when the approval completes, but won't be asked to approve.</p>\n          <div class=\"arv-approver-tags\">\n            @for (uid of referenceUserIds(); track uid; let j = $index) {\n              <span class=\"arv-tag\">\n                <ma-ux [userId]=\"uid\" [useDefault]=\"true\" [showTitle]=\"false\"/>\n                <button class=\"arv-tag-remove\" (click)=\"removeReference(j)\">x</button>\n              </span>\n            }\n          </div>\n          <div class=\"arv-user-search\">\n            <input class=\"arv-input arv-input-sm\" [value]=\"refSearchQuery()\"\n              (input)=\"onRefSearchInput($any($event.target).value)\"\n              placeholder=\"Search CC user...\" />\n            @if (refSearchResults().length) {\n              <div class=\"arv-search-results\">\n                @for (u of refSearchResults(); track u.id) {\n                  <div class=\"arv-search-item\" (mousedown)=\"addReference(u.id)\">\n                    <ma-ux [userId]=\"u.id\" [useDefault]=\"true\" [showTitle]=\"false\"/>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"arv-actions\">\n          <button class=\"arv-btn arv-btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n          <button class=\"arv-btn arv-btn-primary\" [disabled]=\"submitting() || isError()\" (click)=\"submit()\">\n            @if (submitting()) {\n              <span class=\"arv-spinner\"></span>\n            }\n            {{isError() ? 'Complete Form to Submit' : submitting() ? 'Submitting...' : 'Submit for Approval' }}\n          </button>\n        </div>\n\n        @if (errorMessage() || submitResultError()) {\n          <div class=\"arv-error\">{{ errorMessage() || submitResultError() }}</div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Success state -->\n  @if (isSubmitted()) {\n    <div class=\"arv-success\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#66bb6a\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/>\n        <polyline points=\"22 4 12 14.01 9 11.01\"/>\n      </svg>\n      <p>Submitted for approval successfully.</p>\n    </div>\n  }\n</div>\n", styles: [".arv-container{display:flex;flex-direction:column;height:100%}.arv-content-body{flex:1;overflow:auto}.arv-footer{border-top:1px solid var(--arv-border);background:var(--arv-bg2)}.arv-footer-inner{padding:16px;display:flex;flex-direction:column;gap:14px}.arv-section-title{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--arv-primary);text-transform:uppercase;letter-spacing:.5px}.arv-routing-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}.arv-routing-mode{display:flex;gap:12px}.arv-radio{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--arv-text);cursor:pointer}.arv-label{font-size:12px;color:var(--arv-text-muted);display:block;margin-bottom:4px}.arv-template-select{margin-bottom:10px}.arv-select{width:100%;padding:8px 32px 8px 10px;border:1px solid var(--arv-border);border-radius:var(--arv-radius);background:var(--arv-bg) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\") no-repeat right 10px center;color:var(--arv-text);font-size:13px;appearance:none;-webkit-appearance:none;cursor:pointer}.arv-input{padding:7px 10px;border:1px solid var(--arv-border);border-radius:var(--arv-radius);background:var(--arv-bg);color:var(--arv-text);font-size:13px}.arv-input-sm{width:100%;margin-top:0;padding:3px 10px}.arv-steps{display:flex;flex-direction:column;gap:10px}.arv-step{background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:var(--arv-radius);padding:10px}.arv-step-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.arv-step-num{font-size:12px;font-weight:700;color:var(--arv-primary);min-width:44px}.arv-approver-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}.arv-template-select .arv-approver-tags{margin-top:6px}.arv-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:#90caf91f;border:1px solid rgba(144,202,249,.3);border-radius:12px;font-size:12px;color:var(--arv-primary)}.arv-tag-remove{background:none;border:none;cursor:pointer;color:var(--arv-text-muted);font-size:11px;padding:0 2px;line-height:1}.arv-tag-remove:hover{color:var(--arv-danger)}.arv-user-search{position:relative}.arv-search-results{position:absolute;left:0;right:0;z-index:100;background:var(--arv-bg2);border:1px solid var(--arv-border);border-radius:var(--arv-radius);max-height:150px;overflow-y:auto}.arv-search-item{padding:8px 12px;cursor:pointer;font-size:13px;color:var(--arv-text)}.arv-search-item:hover{background:var(--arv-bg)}.arv-hint{font-size:12px;color:var(--arv-text-muted);margin:0 0 8px}.arv-btn-icon{background:none;border:none;cursor:pointer;padding:2px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center}.arv-btn-danger{color:var(--arv-danger)}.arv-btn-danger:hover{background:#ef53501a}.arv-actions{display:flex;justify-content:flex-end;gap:10px}.arv-btn{padding:9px 18px;border-radius:var(--arv-radius);font-size:13px;font-weight:600;cursor:pointer;border:none;transition:background .15s}.arv-btn-primary{background:var(--arv-primary);color:#fff}.arv-btn-primary:hover:not(:disabled){background:var(--arv-primary-hover)}.arv-btn-primary:disabled{opacity:.6;cursor:not-allowed}.arv-btn-secondary{background:transparent;border:1px solid var(--arv-border);color:var(--arv-text-muted)}.arv-btn-secondary:hover{color:var(--arv-text);border-color:var(--arv-text-muted)}.arv-btn-outline{background:transparent;border:1px dashed var(--arv-border);color:var(--arv-text-muted);font-size:12px;padding:6px 12px}.arv-btn-outline:hover{border-color:var(--arv-primary);color:var(--arv-primary)}.arv-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:arv-spin .6s linear infinite;margin-right:6px}@keyframes arv-spin{to{transform:rotate(360deg)}}.arv-error{padding:8px 12px;background:#ef53501a;border:1px solid rgba(239,83,80,.3);border-radius:var(--arv-radius);font-size:13px;color:var(--arv-danger)}.arv-success{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;gap:12px;text-align:center}.arv-success p{color:var(--arv-success);font-size:15px;font-weight:600;margin:0}.arv-references{border-top:1px solid var(--arv-border);padding-top:12px}.arv-template-loading{font-size:12px;color:var(--arv-text-muted);margin-top:8px;padding:4px 0}.arv-template-steps{margin-top:8px;display:flex;flex-direction:column;gap:6px}.arv-step-card{background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:var(--arv-radius);overflow:hidden}.arv-step-card-header{display:flex;align-items:center;gap:8px;padding:7px 10px;background:#00000008;border-bottom:1px solid var(--arv-border);flex-wrap:wrap}.arv-step-preview{display:flex;align-items:center;gap:8px;padding:5px 8px;background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:4px;font-size:12px}.arv-step-preview-num{font-weight:700;color:var(--arv-primary);min-width:44px;flex-shrink:0;font-size:12px}.arv-step-preview-name{flex:1;color:var(--arv-text);font-size:12px;font-weight:600}.arv-step-error{font-size:11px;color:var(--arv-danger);font-weight:600}.arv-step-role-badge{font-size:11px;color:var(--arv-text-muted);background:#90caf91a;border:1px solid rgba(144,202,249,.25);border-radius:10px;padding:1px 7px}.arv-step-preview-cc .arv-step-preview-num{color:var(--arv-text-muted)}.arv-locked-template{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:var(--arv-radius);margin-top:6px}.arv-locked-label{font-size:11px;color:var(--arv-text-muted);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}.arv-locked-name{font-size:13px;font-weight:600;color:var(--arv-text)}.arv-step-picker{padding:0}.arv-select-sm{font-size:12px;padding:6px 8px}.arv-step-fixed{padding:6px 10px;font-size:12px;color:var(--arv-text-muted)}\n"], dependencies: [{ kind: "component", type: MaUserXComponent, selector: "ma-ux", inputs: ["userId", "showName", "showTitle", "scale", "shape", "ratio", "user", "useDefault", "showTooltip", "theme"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: MaArvContainerComponent, isStandalone: true, selector: "ma-arv-container", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, referenceId: { classPropertyName: "referenceId", publicName: "referenceId", isSignal: true, isRequired: false, transformFunction: null }, templateIds: { classPropertyName: "templateIds", publicName: "templateIds", isSignal: true, isRequired: false, transformFunction: null }, callbackUrl: { classPropertyName: "callbackUrl", publicName: "callbackUrl", isSignal: true, isRequired: false, transformFunction: null }, deadlineHours: { classPropertyName: "deadlineHours", publicName: "deadlineHours", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { approvalSubmitted: "approvalSubmitted", approvalSubmitting: "approvalSubmitting", cancelled: "cancelled" }, host: { properties: { "class": "this.themeClass" } }, viewQueries: [{ propertyName: "contentBody", first: true, predicate: ["contentBody"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"arv-container\">\n  <!-- Content Area -->\n  <div class=\"arv-content-body\" #contentBody>\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Approval Footer -->\n  <div class=\"arv-footer\">\n    @if (!isSubmitted()) {\n      <div class=\"arv-footer-inner\">\n\n        <!-- Routing mode -->\n        <div class=\"arv-routing\">\n          <div class=\"arv-routing-header\">\n            <h4 class=\"arv-section-title\">Approval Routing</h4>\n            <!-- Show routing toggle only when templateId is NOT locked to a single template -->\n            @if (!templateIds() || templateIds()!.length <= 0) {\n              <div class=\"arv-routing-mode\">\n                <label class=\"arv-radio\">\n                  <input type=\"radio\" name=\"routingMode\" value=\"template\" [checked]=\"routingMode() === 'template'\" (change)=\"routingMode.set('template')\"> Use Template\n                </label>\n                <label class=\"arv-radio\">\n                  <input type=\"radio\" name=\"routingMode\" value=\"adhoc\" [checked]=\"routingMode() === 'adhoc'\" (change)=\"routingMode.set('adhoc')\"> Custom Steps\n                </label>\n              </div>\n            }\n          </div>\n\n          <!-- Locked template: only when templateId set and no multi-choice -->\n          @if (templateIds() && templateIds()!.length === 1 && routingMode() === 'template') {\n            <div class=\"arv-template-select\">\n              @if (loadingTemplate()) {\n                <div class=\"arv-template-loading\">Loading template...</div>\n              }\n              @if (selectedTemplate() && !loadingTemplate()) {\n                <div class=\"arv-locked-template\">\n                  <span class=\"arv-locked-label\">Template</span>\n                  <span class=\"arv-locked-name\">{{ selectedTemplate()!.name }}</span>\n                </div>\n              }\n            </div>\n          }\n          <!-- Template selector: shown when no templateId, OR when templateIds has multiple choices -->\n          @else if (routingMode() === 'template') {\n            <div class=\"arv-template-select\">\n              <label class=\"arv-label\">Select Template</label>\n              <select class=\"arv-select\" (change)=\"onTemplateChange($event)\">\n                <option value=\"\">-- Select a template --</option>\n                @for (t of templates(); track t.id) {\n                  <option [value]=\"t.id\" [selected]=\"t.id === selectedTemplateId()\">{{ t.name }}</option>\n                }\n              </select>\n            </div>\n          }\n\n          <!-- Step pickers (shared for both locked and free template) -->\n          @if (routingMode() === 'template') {\n            <div class=\"arv-template-select\">\n              @if (!loadingTemplate() && selectedTemplate()) {\n                <!-- arv-template-steps  -->\n                <div class=\"arv-steps\">\n                  @for (s of selectedTemplate()!.steps; track s.stepOrder; let i = $index) {\n                    <div class=\"arv-step\">\n                      <div class=\"arv-step-card-header\">\n                        <span class=\"arv-step-preview-num\">Step {{ s.stepOrder }}</span>\n                        <span class=\"arv-step-preview-name\">{{ s.stepName }}</span>\n                        @if(isStepsError()[i]) {\n                          <span class=\"arv-step-error\">Required (*)</span>\n                        }\n                        @if (s.roles && s.roles.length > 0) {\n                          <span class=\"arv-step-role-badge\">\n                            @for (r of s.roles; track r.id) {\n                              {{ r.positionLevel }}{{ r.orgName ? ' \u00B7 ' + r.orgName : '' }}{{ r !== s.roles[s.roles.length - 1] ? ', ' : '' }}\n                            }                            \n                          </span>\n                        }\n                      </div>\n                      <!-- Selectable step: show approver picker -->\n                      @if (stepCandidates()[i]?.length > 1 || stepLoadingCandidates()[i]) {\n                        @if (stepLoadingCandidates()[i]) {\n                          <div class=\"arv-template-loading\">Loading candidates...</div>\n                        }\n                        @if (!stepLoadingCandidates()[i]) {\n                          <div class=\"arv-approvers\">\n                            <div class=\"arv-approver-tags\">\n                              @if (stepSelectedUsers()[i]) {\n                                <span class=\"arv-tag\">\n                                  <ma-ux [userId]=\"stepSelectedUsers()[i]\" [useDefault]=\"true\" [showTitle]=\"false\"/>\n                                  <button class=\"arv-tag-remove\" (click)=\"onStepUserChangeInput(i, '')\">x</button>\n                                </span>\n                              }\n                            </div>\n                            @if (!stepSelectedUsers()[i]) {\n                              <div class=\"arv-user-search arv-step-picker\">\n                                <input class=\"arv-input arv-input-sm\" [value]=\"candidateSearchQuery()[i] || ''\"\n                                  (input)=\"onCandidateSearchInput(i, $any($event.target).value)\"\n                                  (focus)=\"onCandidateSearchInput(i, candidateSearchQuery()[i] || '')\"\n                                  (blur)=\"clearCandidateResults(i)\"\n                                  placeholder=\"Search approver...\" />\n                                @if (candidateSearchResults()[i]?.length) {\n                                  <div class=\"arv-search-results\">\n                                    @for (u of candidateSearchResults()[i]; track u.userId) {\n                                      <div class=\"arv-search-item\" (mousedown)=\"onStepUserChangeInput(i, u.userId)\">\n                                        <ma-ux [userId]=\"u.userId\" [useDefault]=\"true\" [showTitle]=\"false\"/>\n                                      </div>\n                                    }\n                                  </div>\n                                }\n                              </div>\n                            }\n                          </div>\n                        }\n\n                      }\n                      <!-- Single fixed-user step: show who is assigned -->\n                      @if (!stepLoadingCandidates()[i] && stepCandidates()[i]?.length === 1) {\n                        <div class=\"arv-step-fixed\">\n                          <ma-ux [userId]=\"stepCandidates()[i][0].userId\" [useDefault]=\"true\" [showTitle]=\"false\"/>\n                        </div>\n                      }\n                    </div>\n                  }\n                  @if (selectedTemplate() && selectedTemplate()!.referenceUserIds.length > 0) {\n                    <div class=\"arv-step-preview arv-step-preview-cc\">\n                      <span class=\"arv-step-preview-num\">CC</span>\n                      <span class=\"arv-step-preview-name\">{{ selectedTemplate()!.referenceUserIds.length }} reference user(s) from template</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n\n          <!-- Ad-hoc steps -->\n          @if (routingMode() === 'adhoc') {\n            <div class=\"arv-steps\">\n              @for (step of adHocSteps(); track step.stepOrder; let i = $index) {\n                <div class=\"arv-step\">\n                  <div class=\"arv-step-header\">\n                    <span class=\"arv-step-num\">Step {{ i + 1 }}</span>\n                    @if (isStepsError()[i]) {\n                      <span class=\"arv-step-error\">Required (*)</span>\n                    }\n                    <input class=\"arv-input\" [value]=\"step.stepName\" (input)=\"updateStepName(i, $any($event.target).value)\" placeholder=\"Step name\" />\n                    <button class=\"arv-btn-icon arv-btn-danger\" (click)=\"removeStep(i)\" title=\"Remove step\">\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/></svg>\n                    </button>\n                  </div>\n                  <div class=\"arv-approvers\">\n                    <div class=\"arv-approver-tags\">\n                      @for (uid of step.approverUserIds; track uid; let j = $index) {\n                        <span class=\"arv-tag\">\n                          <ma-ux [userId]=\"uid\" [useDefault]=\"true\" [showTitle]=\"false\"/>\n                          <button class=\"arv-tag-remove\" (click)=\"removeApprover(i, j)\">x</button>\n                        </span>\n                      }\n                    </div>\n                    @if (step.approverUserIds.length === 0) {\n                      <div class=\"arv-user-search\">\n                        <input class=\"arv-input arv-input-sm\" [value]=\"userSearchQuery()[i] || ''\"\n                          (input)=\"onUserSearchInput(i, $any($event.target).value)\"\n                          placeholder=\"Search approver...\" />\n                        @if (userSearchResults()[i]?.length) {\n                          <div class=\"arv-search-results\">\n                            @for (u of userSearchResults()[i]; track u.id) {\n                              <div class=\"arv-search-item\" (mousedown)=\"addApprover(i, u.id)\">\n                                <ma-ux [userId]=\"u.id\" [useDefault]=\"true\" [showTitle]=\"false\"/>\n                              </div>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n              }\n              <button class=\"arv-btn arv-btn-outline\" (click)=\"addStep()\">+ Add Step</button>\n            </div>\n          }\n        </div>\n\n        <!-- Reference / CC users -->\n        <div class=\"arv-references\">\n          <h4 class=\"arv-section-title\">CC / Reference</h4>\n          <p class=\"arv-hint\">These users will be notified when the approval completes, but won't be asked to approve.</p>\n          <div class=\"arv-approver-tags\">\n            @for (uid of referenceUserIds(); track uid; let j = $index) {\n              <span class=\"arv-tag\">\n                <ma-ux [userId]=\"uid\" [useDefault]=\"true\" [showTitle]=\"false\"/>\n                <button class=\"arv-tag-remove\" (click)=\"removeReference(j)\">x</button>\n              </span>\n            }\n          </div>\n          <div class=\"arv-user-search\">\n            <input class=\"arv-input arv-input-sm\" [value]=\"refSearchQuery()\"\n              (input)=\"onRefSearchInput($any($event.target).value)\"\n              placeholder=\"Search CC user...\" />\n            @if (refSearchResults().length) {\n              <div class=\"arv-search-results\">\n                @for (u of refSearchResults(); track u.id) {\n                  <div class=\"arv-search-item\" (mousedown)=\"addReference(u.id)\">\n                    <ma-ux [userId]=\"u.id\" [useDefault]=\"true\" [showTitle]=\"false\"/>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"arv-actions\">\n          <button class=\"arv-btn arv-btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n          <button class=\"arv-btn arv-btn-primary\" [disabled]=\"submitting() || isError()\" (click)=\"submit()\">\n            @if (submitting()) {\n              <span class=\"arv-spinner\"></span>\n            }\n            {{isError() ? 'Complete Form to Submit' : submitting() ? 'Submitting...' : 'Submit for Approval' }}\n          </button>\n        </div>\n\n        @if (errorMessage() || submitResultError()) {\n          <div class=\"arv-error\">{{ errorMessage() || submitResultError() }}</div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Success state -->\n  @if (isSubmitted()) {\n    <div class=\"arv-success\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#66bb6a\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/>\n        <polyline points=\"22 4 12 14.01 9 11.01\"/>\n      </svg>\n      <p>Submitted for approval successfully.</p>\n    </div>\n  }\n</div>\n", styles: [".arv-container{display:flex;flex-direction:column;height:100%}.arv-content-body{flex:1;overflow:auto}.arv-footer{border-top:1px solid var(--arv-border);background:var(--arv-bg2)}.arv-footer-inner{padding:16px;display:flex;flex-direction:column;gap:14px}.arv-section-title{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--arv-primary);text-transform:uppercase;letter-spacing:.5px}.arv-routing-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}.arv-routing-mode{display:flex;gap:12px}.arv-radio{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--arv-text);cursor:pointer}.arv-label{font-size:12px;color:var(--arv-text-muted);display:block;margin-bottom:4px}.arv-template-select{margin-bottom:10px}.arv-select{width:100%;padding:8px 32px 8px 10px;border:1px solid var(--arv-border);border-radius:var(--arv-radius);background:var(--arv-bg) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\") no-repeat right 10px center;color:var(--arv-text);font-size:13px;appearance:none;-webkit-appearance:none;cursor:pointer}.arv-input{padding:7px 10px;border:1px solid var(--arv-border);border-radius:var(--arv-radius);background:var(--arv-bg);color:var(--arv-text);font-size:13px}.arv-input-sm{width:100%;margin-top:0;padding:3px 10px}.arv-steps{display:flex;flex-direction:column;gap:10px}.arv-step{background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:var(--arv-radius);padding:10px}.arv-step-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.arv-step-num{font-size:12px;font-weight:700;color:var(--arv-primary);min-width:44px}.arv-approver-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}.arv-template-select .arv-approver-tags{margin-top:6px}.arv-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:#90caf91f;border:1px solid rgba(144,202,249,.3);border-radius:12px;font-size:12px;color:var(--arv-primary)}.arv-tag-remove{background:none;border:none;cursor:pointer;color:var(--arv-text-muted);font-size:11px;padding:0 2px;line-height:1}.arv-tag-remove:hover{color:var(--arv-danger)}.arv-user-search{position:relative}.arv-search-results{position:absolute;left:0;right:0;z-index:100;background:var(--arv-bg2);border:1px solid var(--arv-border);border-radius:var(--arv-radius);max-height:150px;overflow-y:auto}.arv-search-item{padding:8px 12px;cursor:pointer;font-size:13px;color:var(--arv-text)}.arv-search-item:hover{background:var(--arv-bg)}.arv-hint{font-size:12px;color:var(--arv-text-muted);margin:0 0 8px}.arv-btn-icon{background:none;border:none;cursor:pointer;padding:2px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center}.arv-btn-danger{color:var(--arv-danger)}.arv-btn-danger:hover{background:#ef53501a}.arv-actions{display:flex;justify-content:flex-end;gap:10px}.arv-btn{padding:9px 18px;border-radius:var(--arv-radius);font-size:13px;font-weight:600;cursor:pointer;border:none;transition:background .15s}.arv-btn-primary{background:var(--arv-primary);color:#fff}.arv-btn-primary:hover:not(:disabled){background:var(--arv-primary-hover)}.arv-btn-primary:disabled{opacity:.6;cursor:not-allowed}.arv-btn-secondary{background:transparent;border:1px solid var(--arv-border);color:var(--arv-text-muted)}.arv-btn-secondary:hover{color:var(--arv-text);border-color:var(--arv-text-muted)}.arv-btn-outline{background:transparent;border:1px dashed var(--arv-border);color:var(--arv-text-muted);font-size:12px;padding:6px 12px}.arv-btn-outline:hover{border-color:var(--arv-primary);color:var(--arv-primary)}.arv-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:arv-spin .6s linear infinite;margin-right:6px}@keyframes arv-spin{to{transform:rotate(360deg)}}.arv-error{padding:8px 12px;background:#ef53501a;border:1px solid rgba(239,83,80,.3);border-radius:var(--arv-radius);font-size:13px;color:var(--arv-danger)}.arv-success{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;gap:12px;text-align:center}.arv-success p{color:var(--arv-success);font-size:15px;font-weight:600;margin:0}.arv-references{border-top:1px solid var(--arv-border);padding-top:12px}.arv-template-loading{font-size:12px;color:var(--arv-text-muted);margin-top:8px;padding:4px 0}.arv-template-steps{margin-top:8px;display:flex;flex-direction:column;gap:6px}.arv-step-card{background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:var(--arv-radius);overflow:hidden}.arv-step-card-header{display:flex;align-items:center;gap:8px;padding:7px 10px;background:#00000008;border-bottom:1px solid var(--arv-border);flex-wrap:wrap}.arv-step-preview{display:flex;align-items:center;gap:8px;padding:5px 8px;background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:4px;font-size:12px}.arv-step-preview-num{font-weight:700;color:var(--arv-primary);min-width:44px;flex-shrink:0;font-size:12px}.arv-step-preview-name{flex:1;color:var(--arv-text);font-size:12px;font-weight:600}.arv-step-error{font-size:11px;color:var(--arv-danger);font-weight:600}.arv-step-role-badge{font-size:11px;color:var(--arv-text-muted);background:#90caf91a;border:1px solid rgba(144,202,249,.25);border-radius:10px;padding:1px 7px}.arv-step-preview-cc .arv-step-preview-num{color:var(--arv-text-muted)}.arv-locked-template{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--arv-bg);border:1px solid var(--arv-border);border-radius:var(--arv-radius);margin-top:6px}.arv-locked-label{font-size:11px;color:var(--arv-text-muted);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}.arv-locked-name{font-size:13px;font-weight:600;color:var(--arv-text)}.arv-step-picker{padding:0}.arv-select-sm{font-size:12px;padding:6px 8px}.arv-step-fixed{padding:6px 10px;font-size:12px;color:var(--arv-text-muted)}\n"], dependencies: [{ kind: "component", type: MaUserXComponent, selector: "ma-ux", inputs: ["userId", "showName", "showTitle", "scale", "shape", "ratio", "user", "useDefault", "showTooltip", "showSignature", "signatureUrl", "signatureHeight", "signatureOnly", "theme"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MaArvContainerComponent, decorators: [{
             type: Component,