@forgeroute/ui 0.4.66 → 0.4.67

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/forgeroute-ui.mjs +305 -170
  2. package/fesm2022/forgeroute-ui.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/forgeroute-ui.d.ts +38 -11
package/fesm2022/forgeroute-ui.mjs CHANGED
@@ -13544,7 +13544,7 @@ var DataTableComponent = class DataTableComponent {
13544
13544
  @if (tc.starFn?.(item); as starTip) {
13545
13545
  <ui-star class="dt-cell-star" [tooltip]="starTip" />
13546
13546
  }
13547
- {{ tc.render ? tc.render(item) : (item[tc.key] ?? '—') }}
13547
+ {{ tc.render ? tc.render(item) : cardCellText(tc, item) }}
13548
13548
  </span>
13549
13549
  }
13550
13550
  }
@@ -13688,7 +13688,7 @@ var DataTableComponent = class DataTableComponent {
13688
13688
  </div>
13689
13689
  `,
13690
13690
  isInline: true,
13691
- styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0}.dt-host{display:flex;flex-direction:column;height:100%;min-height:0}.dt-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;justify-content:space-between;position:relative;z-index:10}.dt-header-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;min-width:0}.dt-header-right{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}.dt-title{margin:0;font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#64748b;overflow-wrap:anywhere}.dt-sk-shimmer{position:relative;overflow:hidden;background:#f1f5f9}.dt-sk-shimmer:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.65) 50%,transparent 75%);transform:translate(-100%);animation:dt-shimmer 1.4s ease-in-out infinite}@keyframes dt-shimmer{to{transform:translate(200%)}}.dt-sk-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.dt-sk-toolbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.dt-sk-toolbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.dt-sk-search{display:flex;align-items:center;gap:10px;width:380px;height:36px;padding:0 12px;border:1px solid #e2e8f0;border-radius:6px;background:#f8fafc;box-sizing:border-box}.dt-sk-search-icon{width:16px;height:16px;border-radius:50%;flex-shrink:0}.dt-sk-search-text{flex:1;height:11px;border-radius:4px}.dt-sk-tab-strip{display:flex;gap:2px;padding:3px;background:#f1f5f9;border-radius:8px}.dt-sk-tab{height:28px;width:70px;border-radius:6px}.dt-sk-icon-btn{width:32px;height:32px;border-radius:6px}.dt-skeleton{border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dt-sk-header{display:flex;gap:24px;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.dt-sk-row{display:flex;gap:24px;padding:13px 16px;border-bottom:1px solid #f1f5f9}.dt-sk-row:last-child{border-bottom:none}.dt-sk-cell{flex:1;height:13px;border-radius:4px;position:relative;overflow:hidden;background:#f1f5f9}.dt-sk-cell:first-child{max-width:100px}.dt-sk-cell:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.65) 50%,transparent 75%);transform:translate(-100%);animation:dt-shimmer 1.4s ease-in-out infinite}.dt-sk-head{height:10px}.dt-table-wrap{flex:1;min-height:0;overflow:auto;border:1px solid #e2e8f0;border-radius:10px 10px 0 0}.dt-sk-reload-row td{padding:10px 14px;border-bottom:1px solid #f1f5f9}table{width:100%;border-collapse:collapse;font-size:.875rem}thead tr{background:#f8fafc;border-bottom:1px solid #e2e8f0}thead{position:sticky;top:0;z-index:2}th{padding:10px 14px;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;border-right:1px solid #e2e8f0;text-align:center;background:#f8fafc}th:last-child{border-right:none}th.dt-th-sorted{background:#f1f5f9}th.dt-th-actions{width:48px}.dt-th-inner{display:flex;align-items:center;justify-content:center;gap:4px}.dt-sort-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;font-size:inherit;font-weight:inherit;color:inherit;font-family:inherit;padding:0;text-transform:inherit;letter-spacing:inherit}.dt-sort-btn:hover{color:#1e293b}.dt-sort-btn:focus-visible{outline:2px solid #60a5fa;outline-offset:2px;border-radius:2px}@media(pointer:coarse){.dt-sort-btn{position:relative}.dt-sort-btn:after{content:\"\";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}}.dt-sort-icon{transition:transform .15s}.dt-sort-desc{transform:rotate(180deg)}.dt-sort-inactive{opacity:.4}tbody tr{border-bottom:1px solid #f1f5f9;background:#fff;transition:background .1s}tbody tr:last-child{border-bottom:none}tbody tr:hover{background:#f8fafc}.dt-row-clickable{cursor:pointer}.dt-row-clickable:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}td{padding:10px 14px;color:#334155;vertical-align:middle;white-space:nowrap;border-right:1px solid #f1f5f9}td:last-child{border-right:none}.dt-td-actions{text-align:center;padding:6px 8px}.dt-sticky-actions th.dt-th-actions,.dt-sticky-actions td.dt-td-actions{position:sticky;right:0;box-shadow:-1px 0 #e2e8f0}.dt-sticky-actions th.dt-th-actions{z-index:3;background:#f8fafc}.dt-sticky-actions td.dt-td-actions{z-index:1;background:#fff}.dt-sticky-actions td.dt-td-actions:focus-within,.dt-sticky-actions td.dt-td-actions:has(.mm-dropdown){z-index:2}.dt-sticky-actions tbody tr:hover td.dt-td-actions{background:#f8fafc}.dt-sticky-actions tbody tr.dt-row-selected td.dt-td-actions{background:#eff6ff}.dt-sticky-actions tbody tr.dt-row-selected:hover td.dt-td-actions{background:#dbeafe}.dt-td-width{overflow:hidden;text-overflow:ellipsis}.dt-img{display:inline-block;vertical-align:middle;object-fit:cover;border:1px solid #e2e8f0;background:#f1f5f9;flex-shrink:0}.dt-img-ph{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;color:#94a3b8;background:#f1f5f9;border:1px solid #e2e8f0;flex-shrink:0}.dt-img-ph svg{width:55%;height:55%}.dt-img-circle-md{width:40px;height:40px;border-radius:50%}.dt-img-circle-sm{width:28px;height:28px;border-radius:50%}.dt-img-rounded-md{width:48px;height:32px;border-radius:6px}.dt-img-rounded-sm{width:36px;height:24px;border-radius:5px}.dt-avatar-name{display:flex;align-items:center;gap:8px}.dt-name-text{color:#1e293b}.dt-overdue{color:#dc2626;font-weight:500}.dt-none{color:#94a3b8}.dt-link{position:relative;display:inline-block;max-width:100%;padding:1px 2px;vertical-align:bottom;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2563eb;text-decoration:none;border-radius:3px;cursor:pointer}.dt-link:hover{text-decoration:underline;color:#1d4ed8}.dt-link:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px;text-decoration:underline}.dt-card-detail-value .dt-link,.dt-card-name .dt-link{white-space:normal;overflow-wrap:anywhere}.dt-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt-tags{display:flex;align-items:center;gap:4px}.dt-tags-more{font-size:.75rem;font-weight:600;color:#475569;background:#f1f5f9;border-radius:999px;padding:2px 7px;cursor:default;-webkit-user-select:none;user-select:none;border:1px solid #e2e8f0}.dt-tags-more:focus-visible{outline:2px solid #60a5fa;outline-offset:2px;border-radius:999px}.dt-tag-tooltip{position:fixed;z-index:9999;pointer-events:none;background:#1e293b;border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:5px;box-shadow:0 4px 6px #0000000f,0 10px 24px #00000024;transform:translate(-50%) translateY(-100%);animation:dt-tip-in .12s ease;max-width:220px}@keyframes dt-tip-in{0%{opacity:0;transform:translate(-50%) translateY(calc(-100% + 4px))}to{opacity:1;transform:translate(-50%) translateY(-100%)}}.dt-cell-star{margin-right:6px}.dt-actions-cell{display:flex;align-items:center;justify-content:center}.dt-bulk-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;align-self:flex-start;padding:10px 14px;margin-bottom:8px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px}.dt-bulk-count{font-size:.875rem;font-weight:600;color:#1e40af;white-space:nowrap;flex-shrink:0}.dt-bulk-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:0}.dt-bulk-actions ui-select{max-width:180px;min-width:120px}.dt-bulk-hint{font-size:.8125rem;line-height:1.35;color:#475569}.dt-card-cb{display:flex;align-items:center;padding:0 0 6px}.dt-card-selected{background:#eff6ff!important;border-color:#bfdbfe!important}.dt-th-cb{width:44px;padding:0 10px!important;text-align:center!important;border-right:1px solid #e2e8f0;background:#f8fafc}.dt-td-cb{width:44px;padding:0 10px!important;text-align:center!important;border-right:1px solid #f1f5f9}.dt-th-grip{width:36px;padding:0!important;border-right:1px solid #e2e8f0;background:#f8fafc}.dt-td-grip{width:36px;padding:0!important;text-align:center!important;border-right:1px solid #f1f5f9}.dt-grip{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;color:#64748b;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.dt-grip:hover{background:#f1f5f9;color:#334155}.dt-grip:active{cursor:grabbing}.dt-grip:focus-visible{outline:2px solid #3b82f6;outline-offset:1px}.dt-grip-off{color:#cbd5e1;cursor:not-allowed}.dt-grip-off:hover{background:none;color:#cbd5e1}.dt-row-move{display:none}@media(pointer:coarse){.dt-grip{display:none}.dt-row-move{display:inline-flex;flex-direction:column;align-items:center}.dt-th-grip,.dt-td-grip{width:56px}}.dt-row-dragging{opacity:.45}.dt-row-over-before>td{box-shadow:inset 0 2px #3b82f6}.dt-row-over-after>td{box-shadow:inset 0 -2px #3b82f6}.dt-card-move{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}@media(forced-colors:active){.dt-row-over-before>td{box-shadow:inset 0 2px 0 Highlight}.dt-row-over-after>td{box-shadow:inset 0 -2px 0 Highlight}.dt-grip:focus-visible{outline-color:Highlight}}.dt-row-selected{background:#eff6ff!important}.dt-row-selected:hover{background:#dbeafe!important}.dt-state-cell{padding:0!important;border:none!important;background:#fff!important}@media(max-width:1024px){th{padding:10px 12px}td{padding:11px 12px}.dt-sort-btn{padding:4px 0}.dt-td-actions{padding:6px}.dt-bulk-bar{align-self:stretch}}@media(max-width:820px){.dt-header-left{flex-basis:100%}.dt-header-right{flex-basis:100%;justify-content:flex-start}}@media(max-width:768px){th{padding:9px 10px;font-size:.8125rem}td{padding:10px;font-size:.8125rem}.dt-sk-search{width:100%}}@media(max-width:640px){.dt-header{flex-direction:column;flex-wrap:nowrap;flex-shrink:0;align-items:stretch}.dt-header-left,.dt-header-right{width:100%}.dt-table-wrap{display:none}.dt-sk-search{width:100%}.dt-sk-toolbar{flex-direction:column;align-items:stretch;gap:8px}.dt-sk-toolbar-right{align-self:flex-end}.dt-bulk-bar{align-self:stretch;padding:10px 12px;row-gap:8px}.dt-bulk-count{flex:1 1 100%}.dt-bulk-actions{flex:1 1 auto;width:auto}.dt-bulk-hint{flex-basis:100%}.dt-bulk-actions ui-select{max-width:100%;flex:1}}.dt-confirm-msg{margin:0;font-size:.9375rem;color:#334155;line-height:1.5;overflow-wrap:anywhere;word-break:break-word;white-space:pre-line}.dt-confirm-details{margin:10px 0 0;padding-left:20px;font-size:.875rem;color:#64748b;line-height:1.5;overflow-wrap:anywhere;word-break:break-word}.dt-confirm-details li+li{margin-top:4px}ui-pagination{flex-shrink:0;--ui-pagination-bg: #f8fafc}.dt-phone-controls{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;flex-shrink:0}.dt-phone-sort{display:flex;align-items:center;gap:8px}.dt-phone-sort-label{font-size:.8125rem;font-weight:600;color:#64748b;flex-shrink:0}.dt-phone-sort-select{flex:1;min-width:0;min-height:44px;box-sizing:border-box;padding:0 36px 0 12px;font-family:inherit;font-size:1rem;color:#1e293b;border:1px solid #7c8ba1;border-radius:8px;-webkit-appearance:none;appearance:none;background:#fff url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E\") no-repeat right 12px center}.dt-phone-filters{display:flex;flex-wrap:wrap;gap:8px}.dt-card-list{display:none;flex-direction:column;gap:8px;flex:1;min-height:0;overflow-y:auto}@media(max-width:640px){.dt-card-list{display:flex;padding-bottom:8px}}.dt-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;contain:layout style;padding:14px 16px;display:flex;flex-direction:column;gap:10px;transition:background .1s}.dt-card:has(.mm-dropdown){position:relative;z-index:1}.dt-card-clickable{cursor:pointer}.dt-card-clickable:active{background:#f8fafc}.dt-card-clickable:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.dt-card-header{display:flex;align-items:center;gap:10px}.dt-card-title{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.dt-card-name{min-width:0;font-weight:600;color:#1e293b;font-size:.9375rem;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}.dt-card-name-plain{flex:1}.dt-card-actions{margin-left:auto;flex-shrink:0}.dt-card-badges{display:flex;flex-wrap:wrap;gap:6px}.dt-card-tags{display:flex;flex-wrap:wrap;gap:4px}.dt-card-details{display:flex;flex-direction:column;gap:5px}.dt-card-detail-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.8125rem}.dt-card-detail-label{color:#64748b;flex-shrink:0}.dt-card-detail-value{color:#334155;font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere;word-break:break-word}.dt-card-sk{gap:12px}.dt-card-sk-header{display:flex;align-items:center;gap:10px}.dt-card-sk-badges{display:flex;gap:6px}.dt-card-sk-rows{display:flex;flex-direction:column;gap:8px}@media(prefers-reduced-motion:reduce){.dt-sk-shimmer:after,.dt-sk-cell:after{animation:none;transform:none;opacity:0}.dt-tag-tooltip{animation:none}.dt-sort-icon{transition:none}}\n"],
13691
+ styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0}.dt-host{display:flex;flex-direction:column;height:100%;min-height:0}.dt-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;justify-content:space-between;position:relative;z-index:10}.dt-header-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;min-width:0}.dt-header-right{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}.dt-title{margin:0;font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#64748b;overflow-wrap:anywhere}.dt-sk-shimmer{position:relative;overflow:hidden;background:#f1f5f9}.dt-sk-shimmer:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.65) 50%,transparent 75%);transform:translate(-100%);animation:dt-shimmer 1.4s ease-in-out infinite}@keyframes dt-shimmer{to{transform:translate(200%)}}.dt-sk-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.dt-sk-toolbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.dt-sk-toolbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.dt-sk-search{display:flex;align-items:center;gap:10px;width:380px;height:36px;padding:0 12px;border:1px solid #e2e8f0;border-radius:6px;background:#f8fafc;box-sizing:border-box}.dt-sk-search-icon{width:16px;height:16px;border-radius:50%;flex-shrink:0}.dt-sk-search-text{flex:1;height:11px;border-radius:4px}.dt-sk-tab-strip{display:flex;gap:2px;padding:3px;background:#f1f5f9;border-radius:8px}.dt-sk-tab{height:28px;width:70px;border-radius:6px}.dt-sk-icon-btn{width:32px;height:32px;border-radius:6px}.dt-skeleton{border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dt-sk-header{display:flex;gap:24px;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.dt-sk-row{display:flex;gap:24px;padding:13px 16px;border-bottom:1px solid #f1f5f9}.dt-sk-row:last-child{border-bottom:none}.dt-sk-cell{flex:1;height:13px;border-radius:4px;position:relative;overflow:hidden;background:#f1f5f9}.dt-sk-cell:first-child{max-width:100px}.dt-sk-cell:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.65) 50%,transparent 75%);transform:translate(-100%);animation:dt-shimmer 1.4s ease-in-out infinite}.dt-sk-head{height:10px}.dt-table-wrap{flex:1;min-height:0;overflow:auto;border:1px solid #e2e8f0;border-radius:10px 10px 0 0}.dt-sk-reload-row td{padding:10px 14px;border-bottom:1px solid #f1f5f9}table{width:100%;border-collapse:collapse;font-size:.875rem}thead tr{background:#f8fafc;border-bottom:1px solid #e2e8f0}thead{position:sticky;top:0;z-index:2}th{padding:10px 14px;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;border-right:1px solid #e2e8f0;text-align:center;background:#f8fafc}th:last-child{border-right:none}th.dt-th-sorted{background:#f1f5f9}th.dt-th-actions{width:48px}.dt-th-inner{display:flex;align-items:center;justify-content:center;gap:4px}.dt-sort-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;font-size:inherit;font-weight:inherit;color:inherit;font-family:inherit;padding:0;text-transform:inherit;letter-spacing:inherit}.dt-sort-btn:hover{color:#1e293b}.dt-sort-btn:focus-visible{outline:2px solid #60a5fa;outline-offset:2px;border-radius:2px}@media(pointer:coarse){.dt-sort-btn{position:relative}.dt-sort-btn:after{content:\"\";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}}.dt-sort-icon{transition:transform .15s}.dt-sort-desc{transform:rotate(180deg)}.dt-sort-inactive{opacity:.4}tbody tr{border-bottom:1px solid #f1f5f9;background:#fff;transition:background .1s}tbody tr:last-child{border-bottom:none}tbody tr:hover{background:#f8fafc}.dt-row-clickable{cursor:pointer}.dt-row-clickable:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}td{padding:10px 14px;color:#334155;vertical-align:middle;white-space:nowrap;border-right:1px solid #f1f5f9}td:last-child{border-right:none}.dt-td-actions{text-align:center;padding:6px 8px}.dt-sticky-actions th.dt-th-actions,.dt-sticky-actions td.dt-td-actions{position:sticky;right:0;box-shadow:-1px 0 #e2e8f0}.dt-sticky-actions th.dt-th-actions{z-index:3;background:#f8fafc}.dt-sticky-actions td.dt-td-actions{z-index:1;background:#fff}.dt-sticky-actions td.dt-td-actions:focus-within,.dt-sticky-actions td.dt-td-actions:has(.mm-dropdown){z-index:2}.dt-sticky-actions tbody tr:hover td.dt-td-actions{background:#f8fafc}.dt-sticky-actions tbody tr.dt-row-selected td.dt-td-actions{background:#eff6ff}.dt-sticky-actions tbody tr.dt-row-selected:hover td.dt-td-actions{background:#dbeafe}.dt-td-width{overflow:hidden;text-overflow:ellipsis}.dt-img{display:inline-block;vertical-align:middle;object-fit:cover;border:1px solid #e2e8f0;background:#f1f5f9;flex-shrink:0}.dt-img-ph{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;color:#94a3b8;background:#f1f5f9;border:1px solid #e2e8f0;flex-shrink:0}.dt-img-ph svg{width:55%;height:55%}.dt-img-circle-md{width:40px;height:40px;border-radius:50%}.dt-img-circle-sm{width:28px;height:28px;border-radius:50%}.dt-img-rounded-md{width:48px;height:32px;border-radius:6px}.dt-img-rounded-sm{width:36px;height:24px;border-radius:5px}.dt-avatar-name{display:flex;align-items:center;gap:8px}.dt-name-text{color:#1e293b}.dt-overdue{color:#dc2626;font-weight:500}.dt-none{color:#94a3b8}.dt-link{position:relative;display:inline-block;max-width:100%;padding:1px 2px;vertical-align:bottom;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2563eb;text-decoration:none;border-radius:3px;cursor:pointer}.dt-link:hover{text-decoration:underline;color:#1d4ed8}.dt-link:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px;text-decoration:underline}.dt-card-detail-value .dt-link,.dt-card-name .dt-link{white-space:normal;overflow-wrap:anywhere}.dt-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt-tags{display:flex;align-items:center;gap:4px}.dt-tags-more{font-size:.75rem;font-weight:600;color:#475569;background:#f1f5f9;border-radius:999px;padding:2px 7px;cursor:default;-webkit-user-select:none;user-select:none;border:1px solid #e2e8f0}.dt-tags-more:focus-visible{outline:2px solid #60a5fa;outline-offset:2px;border-radius:999px}.dt-tag-tooltip{position:fixed;z-index:9999;pointer-events:none;background:#1e293b;border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:5px;box-shadow:0 4px 6px #0000000f,0 10px 24px #00000024;transform:translate(-50%) translateY(-100%);animation:dt-tip-in .12s ease;max-width:220px}@keyframes dt-tip-in{0%{opacity:0;transform:translate(-50%) translateY(calc(-100% + 4px))}to{opacity:1;transform:translate(-50%) translateY(-100%)}}.dt-cell-star{margin-right:6px}.dt-actions-cell{display:flex;align-items:center;justify-content:center}.dt-bulk-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;align-self:flex-start;padding:10px 14px;margin-bottom:8px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px}.dt-bulk-count{font-size:.875rem;font-weight:600;color:#1e40af;white-space:nowrap;flex-shrink:0}.dt-bulk-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:0}.dt-bulk-actions ui-select{max-width:180px;min-width:120px}.dt-bulk-hint{font-size:.8125rem;line-height:1.35;color:#475569}.dt-card-cb{display:flex;align-items:center;padding:0 0 6px}.dt-card-selected{background:#eff6ff!important;border-color:#bfdbfe!important}.dt-th-cb{width:44px;padding:0 10px!important;text-align:center!important;border-right:1px solid #e2e8f0;background:#f8fafc}.dt-td-cb{width:44px;padding:0 10px!important;text-align:center!important;border-right:1px solid #f1f5f9}.dt-th-grip{width:36px;padding:0!important;border-right:1px solid #e2e8f0;background:#f8fafc}.dt-td-grip{width:36px;padding:0!important;text-align:center!important;border-right:1px solid #f1f5f9}.dt-grip{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;color:#64748b;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.dt-grip:hover{background:#f1f5f9;color:#334155}.dt-grip:active{cursor:grabbing}.dt-grip:focus-visible{outline:2px solid #3b82f6;outline-offset:1px}.dt-grip-off{color:#cbd5e1;cursor:not-allowed}.dt-grip-off:hover{background:none;color:#cbd5e1}.dt-row-move{display:none}@media(pointer:coarse){.dt-grip{display:none}.dt-row-move{display:inline-flex;flex-direction:column;align-items:center}.dt-th-grip,.dt-td-grip{width:56px}}.dt-row-dragging{opacity:.45}.dt-row-over-before>td{box-shadow:inset 0 2px #3b82f6}.dt-row-over-after>td{box-shadow:inset 0 -2px #3b82f6}.dt-card-move{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}@media(forced-colors:active){.dt-row-over-before>td{box-shadow:inset 0 2px 0 Highlight}.dt-row-over-after>td{box-shadow:inset 0 -2px 0 Highlight}.dt-grip:focus-visible{outline-color:Highlight}}.dt-row-selected{background:#eff6ff!important}.dt-row-selected:hover{background:#dbeafe!important}.dt-state-cell{padding:0!important;border:none!important;background:#fff!important}@media(max-width:1024px){th{padding:10px 12px}td{padding:11px 12px}.dt-sort-btn{padding:4px 0}.dt-td-actions{padding:6px}.dt-bulk-bar{align-self:stretch}}@media(max-width:820px){.dt-header-left{flex-basis:100%}.dt-header-right{flex-basis:100%;justify-content:flex-start}}@media(max-width:768px){th{padding:9px 10px;font-size:.8125rem}td{padding:10px;font-size:.8125rem}.dt-sk-search{width:100%}}@media(max-width:640px){.dt-header{flex-direction:column;flex-wrap:nowrap;flex-shrink:0;align-items:stretch}.dt-header-left,.dt-header-right{width:100%;flex-basis:auto}.dt-table-wrap{display:none}.dt-sk-search{width:100%}.dt-sk-toolbar{flex-direction:column;align-items:stretch;gap:8px}.dt-sk-toolbar-right{align-self:flex-end}.dt-bulk-bar{align-self:stretch;padding:10px 12px;row-gap:8px}.dt-bulk-count{flex:1 1 100%}.dt-bulk-actions{flex:1 1 auto;width:auto}.dt-bulk-hint{flex-basis:100%}.dt-bulk-actions ui-select{max-width:100%;flex:1}}.dt-confirm-msg{margin:0;font-size:.9375rem;color:#334155;line-height:1.5;overflow-wrap:anywhere;word-break:break-word;white-space:pre-line}.dt-confirm-details{margin:10px 0 0;padding-left:20px;font-size:.875rem;color:#64748b;line-height:1.5;overflow-wrap:anywhere;word-break:break-word}.dt-confirm-details li+li{margin-top:4px}ui-pagination{flex-shrink:0;--ui-pagination-bg: #f8fafc}.dt-phone-controls{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;flex-shrink:0}.dt-phone-sort{display:flex;align-items:center;gap:8px}.dt-phone-sort-label{font-size:.8125rem;font-weight:600;color:#64748b;flex-shrink:0}.dt-phone-sort-select{flex:1;min-width:0;min-height:44px;box-sizing:border-box;padding:0 36px 0 12px;font-family:inherit;font-size:1rem;color:#1e293b;border:1px solid #7c8ba1;border-radius:8px;-webkit-appearance:none;appearance:none;background:#fff url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E\") no-repeat right 12px center}.dt-phone-filters{display:flex;flex-wrap:wrap;gap:8px}.dt-card-list{display:none;flex-direction:column;gap:8px;flex:1;min-height:0;overflow-y:auto}@media(max-width:640px){.dt-card-list{display:flex;padding-bottom:8px}}.dt-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;contain:layout style;padding:14px 16px;display:flex;flex-direction:column;gap:10px;transition:background .1s}.dt-card:has(.mm-dropdown){position:relative;z-index:1}.dt-card-clickable{cursor:pointer}.dt-card-clickable:active{background:#f8fafc}.dt-card-clickable:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.dt-card-header{display:flex;align-items:center;gap:10px}.dt-card-title{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.dt-card-name{min-width:0;font-weight:600;color:#1e293b;font-size:.9375rem;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}.dt-card-name-plain{flex:1}.dt-card-actions{margin-left:auto;flex-shrink:0}.dt-card-badges{display:flex;flex-wrap:wrap;gap:6px}.dt-card-tags{display:flex;flex-wrap:wrap;gap:4px}.dt-card-details{display:flex;flex-direction:column;gap:5px}.dt-card-detail-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.8125rem}.dt-card-detail-label{color:#64748b;flex-shrink:0}.dt-card-detail-value{color:#334155;font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere;word-break:break-word}.dt-card-sk{gap:12px}.dt-card-sk-header{display:flex;align-items:center;gap:10px}.dt-card-sk-badges{display:flex;gap:6px}.dt-card-sk-rows{display:flex;flex-direction:column;gap:8px}@media(prefers-reduced-motion:reduce){.dt-sk-shimmer:after,.dt-sk-cell:after{animation:none;transform:none;opacity:0}.dt-tag-tooltip{animation:none}.dt-sort-icon{transition:none}}\n"],
13692
13692
  dependencies: [
13693
13693
  {
13694
13694
  kind: "directive",
@@ -14617,7 +14617,7 @@ i0.ɵɵngDeclareClassMetadata({
14617
14617
  @if (tc.starFn?.(item); as starTip) {
14618
14618
  <ui-star class="dt-cell-star" [tooltip]="starTip" />
14619
14619
  }
14620
- {{ tc.render ? tc.render(item) : (item[tc.key] ?? '—') }}
14620
+ {{ tc.render ? tc.render(item) : cardCellText(tc, item) }}
14621
14621
  </span>
14622
14622
  }
14623
14623
  }
@@ -14760,7 +14760,7 @@ i0.ɵɵngDeclareClassMetadata({
14760
14760
  }
14761
14761
  </div>
14762
14762
  `,
14763
- styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0}.dt-host{display:flex;flex-direction:column;height:100%;min-height:0}.dt-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;justify-content:space-between;position:relative;z-index:10}.dt-header-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;min-width:0}.dt-header-right{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}.dt-title{margin:0;font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#64748b;overflow-wrap:anywhere}.dt-sk-shimmer{position:relative;overflow:hidden;background:#f1f5f9}.dt-sk-shimmer:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.65) 50%,transparent 75%);transform:translate(-100%);animation:dt-shimmer 1.4s ease-in-out infinite}@keyframes dt-shimmer{to{transform:translate(200%)}}.dt-sk-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.dt-sk-toolbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.dt-sk-toolbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.dt-sk-search{display:flex;align-items:center;gap:10px;width:380px;height:36px;padding:0 12px;border:1px solid #e2e8f0;border-radius:6px;background:#f8fafc;box-sizing:border-box}.dt-sk-search-icon{width:16px;height:16px;border-radius:50%;flex-shrink:0}.dt-sk-search-text{flex:1;height:11px;border-radius:4px}.dt-sk-tab-strip{display:flex;gap:2px;padding:3px;background:#f1f5f9;border-radius:8px}.dt-sk-tab{height:28px;width:70px;border-radius:6px}.dt-sk-icon-btn{width:32px;height:32px;border-radius:6px}.dt-skeleton{border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dt-sk-header{display:flex;gap:24px;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.dt-sk-row{display:flex;gap:24px;padding:13px 16px;border-bottom:1px solid #f1f5f9}.dt-sk-row:last-child{border-bottom:none}.dt-sk-cell{flex:1;height:13px;border-radius:4px;position:relative;overflow:hidden;background:#f1f5f9}.dt-sk-cell:first-child{max-width:100px}.dt-sk-cell:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.65) 50%,transparent 75%);transform:translate(-100%);animation:dt-shimmer 1.4s ease-in-out infinite}.dt-sk-head{height:10px}.dt-table-wrap{flex:1;min-height:0;overflow:auto;border:1px solid #e2e8f0;border-radius:10px 10px 0 0}.dt-sk-reload-row td{padding:10px 14px;border-bottom:1px solid #f1f5f9}table{width:100%;border-collapse:collapse;font-size:.875rem}thead tr{background:#f8fafc;border-bottom:1px solid #e2e8f0}thead{position:sticky;top:0;z-index:2}th{padding:10px 14px;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;border-right:1px solid #e2e8f0;text-align:center;background:#f8fafc}th:last-child{border-right:none}th.dt-th-sorted{background:#f1f5f9}th.dt-th-actions{width:48px}.dt-th-inner{display:flex;align-items:center;justify-content:center;gap:4px}.dt-sort-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;font-size:inherit;font-weight:inherit;color:inherit;font-family:inherit;padding:0;text-transform:inherit;letter-spacing:inherit}.dt-sort-btn:hover{color:#1e293b}.dt-sort-btn:focus-visible{outline:2px solid #60a5fa;outline-offset:2px;border-radius:2px}@media(pointer:coarse){.dt-sort-btn{position:relative}.dt-sort-btn:after{content:\"\";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}}.dt-sort-icon{transition:transform .15s}.dt-sort-desc{transform:rotate(180deg)}.dt-sort-inactive{opacity:.4}tbody tr{border-bottom:1px solid #f1f5f9;background:#fff;transition:background .1s}tbody tr:last-child{border-bottom:none}tbody tr:hover{background:#f8fafc}.dt-row-clickable{cursor:pointer}.dt-row-clickable:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}td{padding:10px 14px;color:#334155;vertical-align:middle;white-space:nowrap;border-right:1px solid #f1f5f9}td:last-child{border-right:none}.dt-td-actions{text-align:center;padding:6px 8px}.dt-sticky-actions th.dt-th-actions,.dt-sticky-actions td.dt-td-actions{position:sticky;right:0;box-shadow:-1px 0 #e2e8f0}.dt-sticky-actions th.dt-th-actions{z-index:3;background:#f8fafc}.dt-sticky-actions td.dt-td-actions{z-index:1;background:#fff}.dt-sticky-actions td.dt-td-actions:focus-within,.dt-sticky-actions td.dt-td-actions:has(.mm-dropdown){z-index:2}.dt-sticky-actions tbody tr:hover td.dt-td-actions{background:#f8fafc}.dt-sticky-actions tbody tr.dt-row-selected td.dt-td-actions{background:#eff6ff}.dt-sticky-actions tbody tr.dt-row-selected:hover td.dt-td-actions{background:#dbeafe}.dt-td-width{overflow:hidden;text-overflow:ellipsis}.dt-img{display:inline-block;vertical-align:middle;object-fit:cover;border:1px solid #e2e8f0;background:#f1f5f9;flex-shrink:0}.dt-img-ph{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;color:#94a3b8;background:#f1f5f9;border:1px solid #e2e8f0;flex-shrink:0}.dt-img-ph svg{width:55%;height:55%}.dt-img-circle-md{width:40px;height:40px;border-radius:50%}.dt-img-circle-sm{width:28px;height:28px;border-radius:50%}.dt-img-rounded-md{width:48px;height:32px;border-radius:6px}.dt-img-rounded-sm{width:36px;height:24px;border-radius:5px}.dt-avatar-name{display:flex;align-items:center;gap:8px}.dt-name-text{color:#1e293b}.dt-overdue{color:#dc2626;font-weight:500}.dt-none{color:#94a3b8}.dt-link{position:relative;display:inline-block;max-width:100%;padding:1px 2px;vertical-align:bottom;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2563eb;text-decoration:none;border-radius:3px;cursor:pointer}.dt-link:hover{text-decoration:underline;color:#1d4ed8}.dt-link:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px;text-decoration:underline}.dt-card-detail-value .dt-link,.dt-card-name .dt-link{white-space:normal;overflow-wrap:anywhere}.dt-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt-tags{display:flex;align-items:center;gap:4px}.dt-tags-more{font-size:.75rem;font-weight:600;color:#475569;background:#f1f5f9;border-radius:999px;padding:2px 7px;cursor:default;-webkit-user-select:none;user-select:none;border:1px solid #e2e8f0}.dt-tags-more:focus-visible{outline:2px solid #60a5fa;outline-offset:2px;border-radius:999px}.dt-tag-tooltip{position:fixed;z-index:9999;pointer-events:none;background:#1e293b;border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:5px;box-shadow:0 4px 6px #0000000f,0 10px 24px #00000024;transform:translate(-50%) translateY(-100%);animation:dt-tip-in .12s ease;max-width:220px}@keyframes dt-tip-in{0%{opacity:0;transform:translate(-50%) translateY(calc(-100% + 4px))}to{opacity:1;transform:translate(-50%) translateY(-100%)}}.dt-cell-star{margin-right:6px}.dt-actions-cell{display:flex;align-items:center;justify-content:center}.dt-bulk-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;align-self:flex-start;padding:10px 14px;margin-bottom:8px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px}.dt-bulk-count{font-size:.875rem;font-weight:600;color:#1e40af;white-space:nowrap;flex-shrink:0}.dt-bulk-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:0}.dt-bulk-actions ui-select{max-width:180px;min-width:120px}.dt-bulk-hint{font-size:.8125rem;line-height:1.35;color:#475569}.dt-card-cb{display:flex;align-items:center;padding:0 0 6px}.dt-card-selected{background:#eff6ff!important;border-color:#bfdbfe!important}.dt-th-cb{width:44px;padding:0 10px!important;text-align:center!important;border-right:1px solid #e2e8f0;background:#f8fafc}.dt-td-cb{width:44px;padding:0 10px!important;text-align:center!important;border-right:1px solid #f1f5f9}.dt-th-grip{width:36px;padding:0!important;border-right:1px solid #e2e8f0;background:#f8fafc}.dt-td-grip{width:36px;padding:0!important;text-align:center!important;border-right:1px solid #f1f5f9}.dt-grip{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;color:#64748b;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.dt-grip:hover{background:#f1f5f9;color:#334155}.dt-grip:active{cursor:grabbing}.dt-grip:focus-visible{outline:2px solid #3b82f6;outline-offset:1px}.dt-grip-off{color:#cbd5e1;cursor:not-allowed}.dt-grip-off:hover{background:none;color:#cbd5e1}.dt-row-move{display:none}@media(pointer:coarse){.dt-grip{display:none}.dt-row-move{display:inline-flex;flex-direction:column;align-items:center}.dt-th-grip,.dt-td-grip{width:56px}}.dt-row-dragging{opacity:.45}.dt-row-over-before>td{box-shadow:inset 0 2px #3b82f6}.dt-row-over-after>td{box-shadow:inset 0 -2px #3b82f6}.dt-card-move{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}@media(forced-colors:active){.dt-row-over-before>td{box-shadow:inset 0 2px 0 Highlight}.dt-row-over-after>td{box-shadow:inset 0 -2px 0 Highlight}.dt-grip:focus-visible{outline-color:Highlight}}.dt-row-selected{background:#eff6ff!important}.dt-row-selected:hover{background:#dbeafe!important}.dt-state-cell{padding:0!important;border:none!important;background:#fff!important}@media(max-width:1024px){th{padding:10px 12px}td{padding:11px 12px}.dt-sort-btn{padding:4px 0}.dt-td-actions{padding:6px}.dt-bulk-bar{align-self:stretch}}@media(max-width:820px){.dt-header-left{flex-basis:100%}.dt-header-right{flex-basis:100%;justify-content:flex-start}}@media(max-width:768px){th{padding:9px 10px;font-size:.8125rem}td{padding:10px;font-size:.8125rem}.dt-sk-search{width:100%}}@media(max-width:640px){.dt-header{flex-direction:column;flex-wrap:nowrap;flex-shrink:0;align-items:stretch}.dt-header-left,.dt-header-right{width:100%}.dt-table-wrap{display:none}.dt-sk-search{width:100%}.dt-sk-toolbar{flex-direction:column;align-items:stretch;gap:8px}.dt-sk-toolbar-right{align-self:flex-end}.dt-bulk-bar{align-self:stretch;padding:10px 12px;row-gap:8px}.dt-bulk-count{flex:1 1 100%}.dt-bulk-actions{flex:1 1 auto;width:auto}.dt-bulk-hint{flex-basis:100%}.dt-bulk-actions ui-select{max-width:100%;flex:1}}.dt-confirm-msg{margin:0;font-size:.9375rem;color:#334155;line-height:1.5;overflow-wrap:anywhere;word-break:break-word;white-space:pre-line}.dt-confirm-details{margin:10px 0 0;padding-left:20px;font-size:.875rem;color:#64748b;line-height:1.5;overflow-wrap:anywhere;word-break:break-word}.dt-confirm-details li+li{margin-top:4px}ui-pagination{flex-shrink:0;--ui-pagination-bg: #f8fafc}.dt-phone-controls{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;flex-shrink:0}.dt-phone-sort{display:flex;align-items:center;gap:8px}.dt-phone-sort-label{font-size:.8125rem;font-weight:600;color:#64748b;flex-shrink:0}.dt-phone-sort-select{flex:1;min-width:0;min-height:44px;box-sizing:border-box;padding:0 36px 0 12px;font-family:inherit;font-size:1rem;color:#1e293b;border:1px solid #7c8ba1;border-radius:8px;-webkit-appearance:none;appearance:none;background:#fff url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E\") no-repeat right 12px center}.dt-phone-filters{display:flex;flex-wrap:wrap;gap:8px}.dt-card-list{display:none;flex-direction:column;gap:8px;flex:1;min-height:0;overflow-y:auto}@media(max-width:640px){.dt-card-list{display:flex;padding-bottom:8px}}.dt-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;contain:layout style;padding:14px 16px;display:flex;flex-direction:column;gap:10px;transition:background .1s}.dt-card:has(.mm-dropdown){position:relative;z-index:1}.dt-card-clickable{cursor:pointer}.dt-card-clickable:active{background:#f8fafc}.dt-card-clickable:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.dt-card-header{display:flex;align-items:center;gap:10px}.dt-card-title{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.dt-card-name{min-width:0;font-weight:600;color:#1e293b;font-size:.9375rem;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}.dt-card-name-plain{flex:1}.dt-card-actions{margin-left:auto;flex-shrink:0}.dt-card-badges{display:flex;flex-wrap:wrap;gap:6px}.dt-card-tags{display:flex;flex-wrap:wrap;gap:4px}.dt-card-details{display:flex;flex-direction:column;gap:5px}.dt-card-detail-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.8125rem}.dt-card-detail-label{color:#64748b;flex-shrink:0}.dt-card-detail-value{color:#334155;font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere;word-break:break-word}.dt-card-sk{gap:12px}.dt-card-sk-header{display:flex;align-items:center;gap:10px}.dt-card-sk-badges{display:flex;gap:6px}.dt-card-sk-rows{display:flex;flex-direction:column;gap:8px}@media(prefers-reduced-motion:reduce){.dt-sk-shimmer:after,.dt-sk-cell:after{animation:none;transform:none;opacity:0}.dt-tag-tooltip{animation:none}.dt-sort-icon{transition:none}}\n"]
14763
+ styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0}.dt-host{display:flex;flex-direction:column;height:100%;min-height:0}.dt-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;justify-content:space-between;position:relative;z-index:10}.dt-header-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;min-width:0}.dt-header-right{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}.dt-title{margin:0;font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#64748b;overflow-wrap:anywhere}.dt-sk-shimmer{position:relative;overflow:hidden;background:#f1f5f9}.dt-sk-shimmer:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.65) 50%,transparent 75%);transform:translate(-100%);animation:dt-shimmer 1.4s ease-in-out infinite}@keyframes dt-shimmer{to{transform:translate(200%)}}.dt-sk-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.dt-sk-toolbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.dt-sk-toolbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.dt-sk-search{display:flex;align-items:center;gap:10px;width:380px;height:36px;padding:0 12px;border:1px solid #e2e8f0;border-radius:6px;background:#f8fafc;box-sizing:border-box}.dt-sk-search-icon{width:16px;height:16px;border-radius:50%;flex-shrink:0}.dt-sk-search-text{flex:1;height:11px;border-radius:4px}.dt-sk-tab-strip{display:flex;gap:2px;padding:3px;background:#f1f5f9;border-radius:8px}.dt-sk-tab{height:28px;width:70px;border-radius:6px}.dt-sk-icon-btn{width:32px;height:32px;border-radius:6px}.dt-skeleton{border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dt-sk-header{display:flex;gap:24px;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.dt-sk-row{display:flex;gap:24px;padding:13px 16px;border-bottom:1px solid #f1f5f9}.dt-sk-row:last-child{border-bottom:none}.dt-sk-cell{flex:1;height:13px;border-radius:4px;position:relative;overflow:hidden;background:#f1f5f9}.dt-sk-cell:first-child{max-width:100px}.dt-sk-cell:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.65) 50%,transparent 75%);transform:translate(-100%);animation:dt-shimmer 1.4s ease-in-out infinite}.dt-sk-head{height:10px}.dt-table-wrap{flex:1;min-height:0;overflow:auto;border:1px solid #e2e8f0;border-radius:10px 10px 0 0}.dt-sk-reload-row td{padding:10px 14px;border-bottom:1px solid #f1f5f9}table{width:100%;border-collapse:collapse;font-size:.875rem}thead tr{background:#f8fafc;border-bottom:1px solid #e2e8f0}thead{position:sticky;top:0;z-index:2}th{padding:10px 14px;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;border-right:1px solid #e2e8f0;text-align:center;background:#f8fafc}th:last-child{border-right:none}th.dt-th-sorted{background:#f1f5f9}th.dt-th-actions{width:48px}.dt-th-inner{display:flex;align-items:center;justify-content:center;gap:4px}.dt-sort-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;font-size:inherit;font-weight:inherit;color:inherit;font-family:inherit;padding:0;text-transform:inherit;letter-spacing:inherit}.dt-sort-btn:hover{color:#1e293b}.dt-sort-btn:focus-visible{outline:2px solid #60a5fa;outline-offset:2px;border-radius:2px}@media(pointer:coarse){.dt-sort-btn{position:relative}.dt-sort-btn:after{content:\"\";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}}.dt-sort-icon{transition:transform .15s}.dt-sort-desc{transform:rotate(180deg)}.dt-sort-inactive{opacity:.4}tbody tr{border-bottom:1px solid #f1f5f9;background:#fff;transition:background .1s}tbody tr:last-child{border-bottom:none}tbody tr:hover{background:#f8fafc}.dt-row-clickable{cursor:pointer}.dt-row-clickable:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}td{padding:10px 14px;color:#334155;vertical-align:middle;white-space:nowrap;border-right:1px solid #f1f5f9}td:last-child{border-right:none}.dt-td-actions{text-align:center;padding:6px 8px}.dt-sticky-actions th.dt-th-actions,.dt-sticky-actions td.dt-td-actions{position:sticky;right:0;box-shadow:-1px 0 #e2e8f0}.dt-sticky-actions th.dt-th-actions{z-index:3;background:#f8fafc}.dt-sticky-actions td.dt-td-actions{z-index:1;background:#fff}.dt-sticky-actions td.dt-td-actions:focus-within,.dt-sticky-actions td.dt-td-actions:has(.mm-dropdown){z-index:2}.dt-sticky-actions tbody tr:hover td.dt-td-actions{background:#f8fafc}.dt-sticky-actions tbody tr.dt-row-selected td.dt-td-actions{background:#eff6ff}.dt-sticky-actions tbody tr.dt-row-selected:hover td.dt-td-actions{background:#dbeafe}.dt-td-width{overflow:hidden;text-overflow:ellipsis}.dt-img{display:inline-block;vertical-align:middle;object-fit:cover;border:1px solid #e2e8f0;background:#f1f5f9;flex-shrink:0}.dt-img-ph{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;color:#94a3b8;background:#f1f5f9;border:1px solid #e2e8f0;flex-shrink:0}.dt-img-ph svg{width:55%;height:55%}.dt-img-circle-md{width:40px;height:40px;border-radius:50%}.dt-img-circle-sm{width:28px;height:28px;border-radius:50%}.dt-img-rounded-md{width:48px;height:32px;border-radius:6px}.dt-img-rounded-sm{width:36px;height:24px;border-radius:5px}.dt-avatar-name{display:flex;align-items:center;gap:8px}.dt-name-text{color:#1e293b}.dt-overdue{color:#dc2626;font-weight:500}.dt-none{color:#94a3b8}.dt-link{position:relative;display:inline-block;max-width:100%;padding:1px 2px;vertical-align:bottom;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2563eb;text-decoration:none;border-radius:3px;cursor:pointer}.dt-link:hover{text-decoration:underline;color:#1d4ed8}.dt-link:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px;text-decoration:underline}.dt-card-detail-value .dt-link,.dt-card-name .dt-link{white-space:normal;overflow-wrap:anywhere}.dt-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt-tags{display:flex;align-items:center;gap:4px}.dt-tags-more{font-size:.75rem;font-weight:600;color:#475569;background:#f1f5f9;border-radius:999px;padding:2px 7px;cursor:default;-webkit-user-select:none;user-select:none;border:1px solid #e2e8f0}.dt-tags-more:focus-visible{outline:2px solid #60a5fa;outline-offset:2px;border-radius:999px}.dt-tag-tooltip{position:fixed;z-index:9999;pointer-events:none;background:#1e293b;border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:5px;box-shadow:0 4px 6px #0000000f,0 10px 24px #00000024;transform:translate(-50%) translateY(-100%);animation:dt-tip-in .12s ease;max-width:220px}@keyframes dt-tip-in{0%{opacity:0;transform:translate(-50%) translateY(calc(-100% + 4px))}to{opacity:1;transform:translate(-50%) translateY(-100%)}}.dt-cell-star{margin-right:6px}.dt-actions-cell{display:flex;align-items:center;justify-content:center}.dt-bulk-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;align-self:flex-start;padding:10px 14px;margin-bottom:8px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px}.dt-bulk-count{font-size:.875rem;font-weight:600;color:#1e40af;white-space:nowrap;flex-shrink:0}.dt-bulk-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:0}.dt-bulk-actions ui-select{max-width:180px;min-width:120px}.dt-bulk-hint{font-size:.8125rem;line-height:1.35;color:#475569}.dt-card-cb{display:flex;align-items:center;padding:0 0 6px}.dt-card-selected{background:#eff6ff!important;border-color:#bfdbfe!important}.dt-th-cb{width:44px;padding:0 10px!important;text-align:center!important;border-right:1px solid #e2e8f0;background:#f8fafc}.dt-td-cb{width:44px;padding:0 10px!important;text-align:center!important;border-right:1px solid #f1f5f9}.dt-th-grip{width:36px;padding:0!important;border-right:1px solid #e2e8f0;background:#f8fafc}.dt-td-grip{width:36px;padding:0!important;text-align:center!important;border-right:1px solid #f1f5f9}.dt-grip{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;color:#64748b;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.dt-grip:hover{background:#f1f5f9;color:#334155}.dt-grip:active{cursor:grabbing}.dt-grip:focus-visible{outline:2px solid #3b82f6;outline-offset:1px}.dt-grip-off{color:#cbd5e1;cursor:not-allowed}.dt-grip-off:hover{background:none;color:#cbd5e1}.dt-row-move{display:none}@media(pointer:coarse){.dt-grip{display:none}.dt-row-move{display:inline-flex;flex-direction:column;align-items:center}.dt-th-grip,.dt-td-grip{width:56px}}.dt-row-dragging{opacity:.45}.dt-row-over-before>td{box-shadow:inset 0 2px #3b82f6}.dt-row-over-after>td{box-shadow:inset 0 -2px #3b82f6}.dt-card-move{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}@media(forced-colors:active){.dt-row-over-before>td{box-shadow:inset 0 2px 0 Highlight}.dt-row-over-after>td{box-shadow:inset 0 -2px 0 Highlight}.dt-grip:focus-visible{outline-color:Highlight}}.dt-row-selected{background:#eff6ff!important}.dt-row-selected:hover{background:#dbeafe!important}.dt-state-cell{padding:0!important;border:none!important;background:#fff!important}@media(max-width:1024px){th{padding:10px 12px}td{padding:11px 12px}.dt-sort-btn{padding:4px 0}.dt-td-actions{padding:6px}.dt-bulk-bar{align-self:stretch}}@media(max-width:820px){.dt-header-left{flex-basis:100%}.dt-header-right{flex-basis:100%;justify-content:flex-start}}@media(max-width:768px){th{padding:9px 10px;font-size:.8125rem}td{padding:10px;font-size:.8125rem}.dt-sk-search{width:100%}}@media(max-width:640px){.dt-header{flex-direction:column;flex-wrap:nowrap;flex-shrink:0;align-items:stretch}.dt-header-left,.dt-header-right{width:100%;flex-basis:auto}.dt-table-wrap{display:none}.dt-sk-search{width:100%}.dt-sk-toolbar{flex-direction:column;align-items:stretch;gap:8px}.dt-sk-toolbar-right{align-self:flex-end}.dt-bulk-bar{align-self:stretch;padding:10px 12px;row-gap:8px}.dt-bulk-count{flex:1 1 100%}.dt-bulk-actions{flex:1 1 auto;width:auto}.dt-bulk-hint{flex-basis:100%}.dt-bulk-actions ui-select{max-width:100%;flex:1}}.dt-confirm-msg{margin:0;font-size:.9375rem;color:#334155;line-height:1.5;overflow-wrap:anywhere;word-break:break-word;white-space:pre-line}.dt-confirm-details{margin:10px 0 0;padding-left:20px;font-size:.875rem;color:#64748b;line-height:1.5;overflow-wrap:anywhere;word-break:break-word}.dt-confirm-details li+li{margin-top:4px}ui-pagination{flex-shrink:0;--ui-pagination-bg: #f8fafc}.dt-phone-controls{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;flex-shrink:0}.dt-phone-sort{display:flex;align-items:center;gap:8px}.dt-phone-sort-label{font-size:.8125rem;font-weight:600;color:#64748b;flex-shrink:0}.dt-phone-sort-select{flex:1;min-width:0;min-height:44px;box-sizing:border-box;padding:0 36px 0 12px;font-family:inherit;font-size:1rem;color:#1e293b;border:1px solid #7c8ba1;border-radius:8px;-webkit-appearance:none;appearance:none;background:#fff url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E\") no-repeat right 12px center}.dt-phone-filters{display:flex;flex-wrap:wrap;gap:8px}.dt-card-list{display:none;flex-direction:column;gap:8px;flex:1;min-height:0;overflow-y:auto}@media(max-width:640px){.dt-card-list{display:flex;padding-bottom:8px}}.dt-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;contain:layout style;padding:14px 16px;display:flex;flex-direction:column;gap:10px;transition:background .1s}.dt-card:has(.mm-dropdown){position:relative;z-index:1}.dt-card-clickable{cursor:pointer}.dt-card-clickable:active{background:#f8fafc}.dt-card-clickable:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.dt-card-header{display:flex;align-items:center;gap:10px}.dt-card-title{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.dt-card-name{min-width:0;font-weight:600;color:#1e293b;font-size:.9375rem;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}.dt-card-name-plain{flex:1}.dt-card-actions{margin-left:auto;flex-shrink:0}.dt-card-badges{display:flex;flex-wrap:wrap;gap:6px}.dt-card-tags{display:flex;flex-wrap:wrap;gap:4px}.dt-card-details{display:flex;flex-direction:column;gap:5px}.dt-card-detail-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.8125rem}.dt-card-detail-label{color:#64748b;flex-shrink:0}.dt-card-detail-value{color:#334155;font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere;word-break:break-word}.dt-card-sk{gap:12px}.dt-card-sk-header{display:flex;align-items:center;gap:10px}.dt-card-sk-badges{display:flex;gap:6px}.dt-card-sk-rows{display:flex;flex-direction:column;gap:8px}@media(prefers-reduced-motion:reduce){.dt-sk-shimmer:after,.dt-sk-cell:after{animation:none;transform:none;opacity:0}.dt-tag-tooltip{animation:none}.dt-sort-icon{transition:none}}\n"]
14764
14764
  }]
14765
14765
  }],
14766
14766
  ctorParameters: () => [],
@@ -26808,6 +26808,7 @@ var DropdownComponent = class DropdownComponent {
26808
26808
  this._typeahead = "";
26809
26809
  this._typeaheadTimer = null;
26810
26810
  this._destroyed = false;
26811
+ this._loadToken = 0;
26811
26812
  this.triggerId = `ui-dd-trigger-${this._id}`;
26812
26813
  this.menuId = `ui-dd-menu-${this._id}`;
26813
26814
  this._ariaLabel = computed(() => this.ariaLabel().trim() || null, ...ngDevMode ? [{ debugName: "_ariaLabel" }] : /* istanbul ignore next */ []);
@@ -26815,29 +26816,39 @@ var DropdownComponent = class DropdownComponent {
26815
26816
  inject(DestroyRef).onDestroy(() => {
26816
26817
  this._destroyed = true;
26817
26818
  if (this._typeaheadTimer) clearTimeout(this._typeaheadTimer);
26819
+ if (_activeDropdownId() === this._id) _activeDropdownId.set("");
26818
26820
  });
26819
26821
  effect(() => {
26820
- if (_activeDropdownId() !== this._id) untracked(() => {
26821
- if (this.open()) this.open.set(false);
26822
- });
26822
+ if (_activeDropdownId() !== this._id) untracked(() => this.close());
26823
26823
  });
26824
26824
  effect(() => {
26825
26825
  const isOpen = this.open();
26826
26826
  const loader = this.loader();
26827
26827
  if (!loader) return;
26828
26828
  if (isOpen && untracked(() => this._loaded()) === null) {
26829
+ const token = ++this._loadToken;
26829
26830
  this.loading.set(true);
26830
- loader().then((items) => {
26831
+ const done = (items) => {
26832
+ if (this._destroyed || token !== this._loadToken) return;
26831
26833
  this._loaded.set(items);
26832
26834
  this.loading.set(false);
26833
- if (!this._destroyed && this._pendingFocus && this.open()) this._focusPending();
26834
- });
26835
- } else if (!isOpen) this._loaded.set(null);
26835
+ if (this.open()) {
26836
+ afterNextRender(() => this._place(), { injector: this._injector });
26837
+ if (this._pendingFocus) this._focusPending();
26838
+ }
26839
+ };
26840
+ new Promise((resolve) => resolve(loader())).then(done, () => done([]));
26841
+ } else if (!isOpen) {
26842
+ this._loadToken++;
26843
+ this.loading.set(false);
26844
+ this._loaded.set(null);
26845
+ }
26836
26846
  });
26837
26847
  }
26838
26848
  toggle(event) {
26839
26849
  event.stopPropagation();
26840
26850
  this._setOpen(!this.open());
26851
+ this._focusTrigger();
26841
26852
  }
26842
26853
  select(item) {
26843
26854
  if (item.disabled) return;
@@ -27104,18 +27115,18 @@ var DropdownComponent = class DropdownComponent {
27104
27115
  template: `
27105
27116
  <div class="dd-wrapper">
27106
27117
  @if (variant() === 'badge') {
27107
- <button class="dd-trigger dd-trigger-badge" [class.dd-active]="active()" [class.dd-open]="open()" [attr.id]="triggerId" [attr.aria-label]="_ariaLabel()" [attr.aria-expanded]="open()" aria-haspopup="menu" [attr.aria-controls]="open() ? menuId : null" (click)="toggle($event)" (keydown)="onTriggerKeydown($event)" (keyup)="onTriggerKeyup($event)">
27118
+ <button type="button" class="dd-trigger dd-trigger-badge" [class.dd-active]="active()" [class.dd-open]="open()" [attr.id]="triggerId" [attr.aria-label]="_ariaLabel()" [attr.aria-expanded]="open()" aria-haspopup="menu" [attr.aria-controls]="open() ? menuId : null" (click)="toggle($event)" (keydown)="onTriggerKeydown($event)" (keyup)="onTriggerKeyup($event)">
27108
27119
  <span class="dd-text">{{ label() }}</span>
27109
27120
  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
27110
27121
  </button>
27111
27122
  } @else {
27112
- <button class="dd-trigger dd-trigger-btn" [class.dd-trigger-md]="size() === 'md'" [class.dd-active]="active()" [class.dd-open]="open()" [attr.id]="triggerId" [attr.aria-label]="_ariaLabel()" [attr.aria-expanded]="open()" aria-haspopup="menu" [attr.aria-controls]="open() ? menuId : null" (click)="toggle($event)" (keydown)="onTriggerKeydown($event)" (keyup)="onTriggerKeyup($event)">
27123
+ <button type="button" class="dd-trigger dd-trigger-btn" [class.dd-trigger-md]="size() === 'md'" [class.dd-active]="active()" [class.dd-open]="open()" [attr.id]="triggerId" [attr.aria-label]="_ariaLabel()" [attr.aria-expanded]="open()" aria-haspopup="menu" [attr.aria-controls]="open() ? menuId : null" (click)="toggle($event)" (keydown)="onTriggerKeydown($event)" (keyup)="onTriggerKeyup($event)">
27113
27124
  <span class="dd-text">{{ label() }}</span>
27114
27125
  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
27115
27126
  </button>
27116
27127
  }
27117
27128
  @if (open()) {
27118
- <div class="dd-menu" role="menu" [attr.id]="menuId" [attr.aria-label]="_ariaLabel()" [attr.aria-labelledby]="_ariaLabel() ? null : triggerId" [style.min-width]="menuWidth()" [class.dd-menu-end]="alignEnd()" [class.dd-menu-up]="openUp()" [style.max-height.px]="menuMaxHeight()" (click)="$event.stopPropagation()" (keydown)="onMenuKeydown($event)">
27129
+ <div class="dd-menu" role="menu" [attr.id]="menuId" [attr.aria-label]="_ariaLabel()" [attr.aria-labelledby]="_ariaLabel() ? null : triggerId" [style.min-width]="menuWidth()" [class.dd-menu-end]="alignEnd()" [class.dd-menu-up]="openUp()" [style.max-height.px]="menuMaxHeight()" [attr.aria-busy]="loading() ? 'true' : null" (click)="$event.stopPropagation()" (keydown)="onMenuKeydown($event)">
27119
27130
  @if (loading()) {
27120
27131
  <div class="dd-loading">
27121
27132
  <span class="dd-spinner"></span>
@@ -27123,7 +27134,7 @@ var DropdownComponent = class DropdownComponent {
27123
27134
  </div>
27124
27135
  } @else {
27125
27136
  @for (item of displayItems(); track item.value) {
27126
- <button type="button" class="dd-item" role="menuitem" tabindex="-1" [disabled]="item.disabled === true" [class.dd-item-active]="activeValue() === item.value" (click)="select(item)">
27137
+ <button type="button" class="dd-item" role="menuitem" tabindex="-1" [disabled]="item.disabled === true" [class.dd-item-active]="activeValue() === item.value" [attr.aria-current]="activeValue() === item.value ? 'true' : null" (click)="select(item)">
27127
27138
  @if (item.icon) {
27128
27139
  <svg class="dd-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path [attr.d]="item.icon" /></svg>
27129
27140
  }
@@ -27164,18 +27175,18 @@ i0.ɵɵngDeclareClassMetadata({
27164
27175
  template: `
27165
27176
  <div class="dd-wrapper">
27166
27177
  @if (variant() === 'badge') {
27167
- <button class="dd-trigger dd-trigger-badge" [class.dd-active]="active()" [class.dd-open]="open()" [attr.id]="triggerId" [attr.aria-label]="_ariaLabel()" [attr.aria-expanded]="open()" aria-haspopup="menu" [attr.aria-controls]="open() ? menuId : null" (click)="toggle($event)" (keydown)="onTriggerKeydown($event)" (keyup)="onTriggerKeyup($event)">
27178
+ <button type="button" class="dd-trigger dd-trigger-badge" [class.dd-active]="active()" [class.dd-open]="open()" [attr.id]="triggerId" [attr.aria-label]="_ariaLabel()" [attr.aria-expanded]="open()" aria-haspopup="menu" [attr.aria-controls]="open() ? menuId : null" (click)="toggle($event)" (keydown)="onTriggerKeydown($event)" (keyup)="onTriggerKeyup($event)">
27168
27179
  <span class="dd-text">{{ label() }}</span>
27169
27180
  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
27170
27181
  </button>
27171
27182
  } @else {
27172
- <button class="dd-trigger dd-trigger-btn" [class.dd-trigger-md]="size() === 'md'" [class.dd-active]="active()" [class.dd-open]="open()" [attr.id]="triggerId" [attr.aria-label]="_ariaLabel()" [attr.aria-expanded]="open()" aria-haspopup="menu" [attr.aria-controls]="open() ? menuId : null" (click)="toggle($event)" (keydown)="onTriggerKeydown($event)" (keyup)="onTriggerKeyup($event)">
27183
+ <button type="button" class="dd-trigger dd-trigger-btn" [class.dd-trigger-md]="size() === 'md'" [class.dd-active]="active()" [class.dd-open]="open()" [attr.id]="triggerId" [attr.aria-label]="_ariaLabel()" [attr.aria-expanded]="open()" aria-haspopup="menu" [attr.aria-controls]="open() ? menuId : null" (click)="toggle($event)" (keydown)="onTriggerKeydown($event)" (keyup)="onTriggerKeyup($event)">
27173
27184
  <span class="dd-text">{{ label() }}</span>
27174
27185
  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
27175
27186
  </button>
27176
27187
  }
27177
27188
  @if (open()) {
27178
- <div class="dd-menu" role="menu" [attr.id]="menuId" [attr.aria-label]="_ariaLabel()" [attr.aria-labelledby]="_ariaLabel() ? null : triggerId" [style.min-width]="menuWidth()" [class.dd-menu-end]="alignEnd()" [class.dd-menu-up]="openUp()" [style.max-height.px]="menuMaxHeight()" (click)="$event.stopPropagation()" (keydown)="onMenuKeydown($event)">
27189
+ <div class="dd-menu" role="menu" [attr.id]="menuId" [attr.aria-label]="_ariaLabel()" [attr.aria-labelledby]="_ariaLabel() ? null : triggerId" [style.min-width]="menuWidth()" [class.dd-menu-end]="alignEnd()" [class.dd-menu-up]="openUp()" [style.max-height.px]="menuMaxHeight()" [attr.aria-busy]="loading() ? 'true' : null" (click)="$event.stopPropagation()" (keydown)="onMenuKeydown($event)">
27179
27190
  @if (loading()) {
27180
27191
  <div class="dd-loading">
27181
27192
  <span class="dd-spinner"></span>
@@ -27183,7 +27194,7 @@ i0.ɵɵngDeclareClassMetadata({
27183
27194
  </div>
27184
27195
  } @else {
27185
27196
  @for (item of displayItems(); track item.value) {
27186
- <button type="button" class="dd-item" role="menuitem" tabindex="-1" [disabled]="item.disabled === true" [class.dd-item-active]="activeValue() === item.value" (click)="select(item)">
27197
+ <button type="button" class="dd-item" role="menuitem" tabindex="-1" [disabled]="item.disabled === true" [class.dd-item-active]="activeValue() === item.value" [attr.aria-current]="activeValue() === item.value ? 'true' : null" (click)="select(item)">
27187
27198
  @if (item.icon) {
27188
27199
  <svg class="dd-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path [attr.d]="item.icon" /></svg>
27189
27200
  }
@@ -31527,11 +31538,13 @@ var PanelInfoListComponent = class PanelInfoListComponent {
31527
31538
  this.displaySections = computed(() => this.showEmptyState() ? this.sections() : this.sections().filter((s) => s.items.some((i) => !i.hidden)), ...ngDevMode ? [{ debugName: "displaySections" }] : /* istanbul ignore next */ []);
31528
31539
  }
31529
31540
  hrefOf(item) {
31530
- let raw = item.href?.trim() ?? "";
31531
- if (!raw && item.email?.trim()) raw = "mailto:" + item.email.trim();
31541
+ let raw = item.href?.replace(/[\u0000-\u001F]/g, "").trim() ?? "";
31542
+ if (!raw && item.email?.trim()) raw = "mailto:" + item.email.trim().replace(/[?#&%\s<>"]/g, (c) => encodeURIComponent(c));
31532
31543
  if (!raw && item.phone?.trim()) {
31533
- const p = item.phone.trim();
31534
- raw = "tel:" + (p.startsWith("+") ? "+" : "") + p.replace(/\D/g, "");
31544
+ const m = /^(.*?)(?:\s*(?:ext\.?|x|#)\s*(\d+))?\s*$/i.exec(item.phone.trim());
31545
+ const num = m[1];
31546
+ const digits = num.replace(/\D/g, "");
31547
+ if (digits) raw = "tel:" + (num.trim().startsWith("+") ? "+" : "") + digits + (m[2] ? ";ext=" + m[2] : "");
31535
31548
  }
31536
31549
  if (!raw) return null;
31537
31550
  const scheme = /^([a-z][a-z0-9+.\-]*):/i.exec(raw.replace(/[\u0000-\u0020]/g, ""));
@@ -31548,6 +31561,12 @@ var PanelInfoListComponent = class PanelInfoListComponent {
31548
31561
  textOf(item) {
31549
31562
  return item.value || item.email || item.phone || item.href || "";
31550
31563
  }
31564
+ valueOf(item) {
31565
+ return item.value?.trim() ? item.value : "—";
31566
+ }
31567
+ runHeaderAction(ha) {
31568
+ if (!ha.disabled) ha.action();
31569
+ }
31551
31570
  visibleItems(section) {
31552
31571
  return section.items.filter((i) => !i.hidden);
31553
31572
  }
@@ -31601,16 +31620,16 @@ var PanelInfoListComponent = class PanelInfoListComponent {
31601
31620
  host: { properties: { "class.pil-fill": "fill()" } },
31602
31621
  ngImport: i0,
31603
31622
  template: `
31604
- @for (section of displaySections(); track section.title ?? $index) {
31623
+ @for (section of displaySections(); track $index) {
31605
31624
  <div class="pil-section">
31606
- @if (section.title || section.headerAction) {
31625
+ @if (section.title || section.headerAction || section.headerLink) {
31607
31626
  <div class="pil-section-label">
31608
31627
  <span>{{ section.title }}</span>
31609
31628
  @if (section.headerLink) {
31610
31629
  <a class="pil-header-link" [routerLink]="section.headerLink.url">{{ section.headerLink.label }}</a>
31611
31630
  }
31612
31631
  @if (section.headerAction; as ha) {
31613
- <ui-button class="pil-header-action" variant="secondary" size="xs" [disabled]="!!ha.disabled" [ariaLabel]="ha.ariaLabel ?? ha.label" (click)="ha.action()">
31632
+ <ui-button class="pil-header-action" variant="secondary" size="xs" [disabled]="!!ha.disabled" [ariaLabel]="ha.ariaLabel ?? ha.label" (click)="runHeaderAction(ha)">
31614
31633
  @if (ha.icon) {
31615
31634
  <svg class="pil-header-action-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path [attr.d]="ha.icon"/></svg>
31616
31635
  }{{ ha.label }}</ui-button>
@@ -31621,62 +31640,69 @@ var PanelInfoListComponent = class PanelInfoListComponent {
31621
31640
  <ui-empty-state message="No information available." />
31622
31641
  } @else if (section.columns === 2) {
31623
31642
  <div class="pil-grid-2">
31624
- @for (item of visibleItems(section); track item.label) {
31643
+ @for (item of visibleItems(section); track $index) {
31625
31644
  <div class="pil-grid-cell" [class.pil-strong]="item.emphasis">
31626
31645
  <span class="pil-label">{{ item.label }}{{ labelColon() ? ':' : '' }}</span>{{ labelColon() ? ' ' : '' }}
31627
31646
  <span class="pil-value pil-value--block">
31628
- @if (item.badge) {
31629
- <ui-badge [label]="item.badge.label" [variant]="item.badge.variant" />
31630
- } @else if (hrefOf(item); as h) {
31631
- <a class="pil-link pil-link--href" [attr.href]="h" [attr.target]="isWeb(h) ? '_blank' : null" [attr.rel]="isWeb(h) ? 'noopener noreferrer' : null">{{ textOf(item) }}</a>
31632
- } @else {
31633
- <span [class.pil-muted]="item.muted" [class.pil-danger]="item.danger" [class.pil-multiline]="item.multiline">{{ item.value || '—' }}</span>
31634
- }
31647
+ <ng-container *ngTemplateOutlet="valueTpl; context: { $implicit: item }" />
31635
31648
  </span>
31636
31649
  </div>
31637
31650
  }
31638
31651
  </div>
31639
31652
  } @else {
31640
- @for (item of visibleItems(section); track item.label) {
31653
+ @for (item of visibleItems(section); track $index) {
31641
31654
  <div class="pil-row" [class.pil-row--inline]="labelColon()" [class.pil-strong]="item.emphasis">
31642
31655
  <span class="pil-label">{{ item.label }}{{ labelColon() ? ':' : '' }}</span>{{ labelColon() ? ' ' : '' }}
31643
31656
  <span class="pil-value">
31644
- @if (item.badges) {
31645
- <span class="pil-badges">
31646
- @for (b of item.badges; track b.label) {
31647
- <ui-badge [label]="b.label" [variant]="b.variant" />
31648
- }
31649
- </span>
31650
- } @else if (item.badge) {
31651
- <ui-badge [label]="item.badge.label" [variant]="item.badge.variant" />
31652
- } @else if (hrefOf(item); as h) {
31653
- <a class="pil-link pil-link--href" [attr.href]="h" [attr.target]="isWeb(h) ? '_blank' : null" [attr.rel]="isWeb(h) ? 'noopener noreferrer' : null">{{ textOf(item) }}</a>
31654
- } @else if (item.link && item.value && item.linkIcon) {
31655
- <a class="pil-link-icon" [routerLink]="item.link">
31656
- {{ item.value }}
31657
- <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
31658
- </a>
31659
- } @else if (item.link && item.value) {
31660
- <a class="pil-link" [routerLink]="item.link">{{ item.value }}</a>
31661
- } @else {
31662
- <span [class.pil-muted]="item.muted" [class.pil-danger]="item.danger" [class.pil-multiline]="item.multiline">{{ item.value || '—' }}</span>
31663
- }
31664
- @if (item.editAction) {
31665
- <ui-icon class="pil-edit-btn" name="edit" [size]="14" [tooltip]="item.editTooltip ?? 'Edit'" (iconClick)="item.editAction!()" />
31666
- }
31667
- @if (item.deleteAction) {
31668
- <ui-icon class="pil-edit-btn" name="delete" variant="danger" [size]="14" [tooltip]="item.deleteTooltip ?? 'Delete'" (iconClick)="item.deleteAction!()" />
31669
- }
31657
+ <ng-container *ngTemplateOutlet="valueTpl; context: { $implicit: item }" />
31670
31658
  </span>
31671
31659
  </div>
31672
31660
  }
31673
31661
  }
31674
31662
  </div>
31675
31663
  }
31664
+ <ng-template #valueTpl let-item>
31665
+ @if (item.badges) {
31666
+ <span class="pil-badges">
31667
+ @for (b of item.badges; track $index) {
31668
+ <ui-badge [label]="b.label" [variant]="b.variant" />
31669
+ }
31670
+ </span>
31671
+ } @else if (item.badge) {
31672
+ <ui-badge [label]="item.badge.label" [variant]="item.badge.variant" />
31673
+ } @else if (hrefOf(item); as h) {
31674
+ <a class="pil-link pil-link--href" [attr.href]="h" [attr.target]="isWeb(h) ? '_blank' : null" [attr.rel]="isWeb(h) ? 'noopener noreferrer' : null">{{ textOf(item) }}</a>
31675
+ } @else if (item.link && item.value && item.linkIcon) {
31676
+ <a class="pil-link-icon" [routerLink]="item.link">
31677
+ {{ item.value }}
31678
+ <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true" focusable="false"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
31679
+ </a>
31680
+ } @else if (item.link && item.value) {
31681
+ <a class="pil-link" [routerLink]="item.link">{{ item.value }}</a>
31682
+ } @else {
31683
+ <span [class.pil-muted]="item.muted" [class.pil-danger]="item.danger" [class.pil-multiline]="item.multiline">{{ valueOf(item) }}</span>
31684
+ }
31685
+ @if (item.editAction) {
31686
+ <ui-icon class="pil-edit-btn" name="edit" [size]="14" [tooltip]="item.editTooltip ?? 'Edit'" (iconClick)="item.editAction()" />
31687
+ }
31688
+ @if (item.deleteAction) {
31689
+ <ui-icon class="pil-edit-btn" name="delete" variant="danger" [size]="14" [tooltip]="item.deleteTooltip ?? 'Delete'" (iconClick)="item.deleteAction()" />
31690
+ }
31691
+ </ng-template>
31676
31692
  `,
31677
31693
  isInline: true,
31678
- styles: [":host{display:flex;flex-direction:column;gap:12px}:host(.pil-fill){flex:1;min-height:0}:host(.pil-fill) .pil-section{flex:1}.pil-section{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.pil-section-label{display:flex;justify-content:space-between;align-items:center;font-size:.6875rem;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase;padding:8px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.pil-header-action{text-transform:none;letter-spacing:0;margin:-4px 0;flex-shrink:0}.pil-header-action-icon{margin-right:6px;vertical-align:-2px;flex-shrink:0}.pil-header-link{font-size:.75rem;font-weight:500;color:#2563eb;text-decoration:none;text-transform:none;letter-spacing:0}.pil-header-link:hover{text-decoration:underline}.pil-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #f1f5f9}.pil-row:last-child{border-bottom:none}.pil-row--inline{justify-content:flex-start}.pil-row--inline .pil-value{text-align:left;justify-content:flex-start;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere;word-break:break-word}.pil-label{font-size:.8125rem;color:#64748b;flex-shrink:0}.pil-value{font-size:.875rem;font-weight:500;color:#1e293b;text-align:right;display:flex;align-items:center;justify-content:flex-end}.pil-multiline{white-space:pre-line;overflow-wrap:anywhere;word-break:break-word}.pil-strong .pil-label,.pil-strong .pil-value,.pil-strong .pil-muted{font-weight:700;color:#0f172a}.pil-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}.pil-edit-btn{margin-left:4px;flex-shrink:0}ui-empty-state{padding:12px 0}.pil-muted{color:#1e293b;font-weight:400}.pil-danger{color:#ef4444;font-weight:600}.pil-link{font-size:.875rem;font-weight:500;color:#2563eb;text-decoration:none}.pil-link:hover{text-decoration:underline}.pil-link,.pil-link-icon,.pil-header-link{position:relative}@media(pointer:coarse),(max-width:480px){.pil-link:after,.pil-link-icon:after,.pil-header-link:after{content:\"\";position:absolute;inset:-14px -4px}}.pil-link--href{overflow-wrap:anywhere;word-break:break-word}.pil-link:focus-visible,.pil-header-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:2px}.pil-link-icon{display:inline-flex;align-items:center;gap:5px;font-size:.875rem;font-weight:500;color:#1e293b;text-decoration:none}.pil-link-icon svg{color:#94a3b8;flex-shrink:0}.pil-grid-2{display:grid;grid-template-columns:1fr 1fr}.pil-grid-cell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-right:1px solid #f1f5f9}.pil-grid-cell:last-child{border-right:none}.pil-value--block{text-align:left;justify-content:flex-start}\n"],
31694
+ styles: [":host{display:flex;flex-direction:column;gap:12px}:host(.pil-fill){flex:1;min-height:0}:host(.pil-fill) .pil-section{flex:1}.pil-section{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.pil-section-label{display:flex;justify-content:space-between;align-items:center;font-size:.6875rem;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase;padding:8px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.pil-header-action{text-transform:none;letter-spacing:0;margin:-4px 0;flex-shrink:0}.pil-header-action-icon{margin-right:6px;vertical-align:-2px;flex-shrink:0}.pil-header-link{font-size:.75rem;font-weight:500;color:#2563eb;text-decoration:none;text-transform:none;letter-spacing:0}.pil-header-link:hover{text-decoration:underline}.pil-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #f1f5f9}.pil-row:last-child{border-bottom:none}.pil-row--inline{justify-content:flex-start}.pil-row--inline .pil-value{text-align:left;justify-content:flex-start;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere;word-break:break-word}.pil-label{font-size:.8125rem;color:#64748b;flex-shrink:0}.pil-value{font-size:.875rem;font-weight:500;color:#1e293b;text-align:right;display:flex;align-items:center;justify-content:flex-end;min-width:0;overflow-wrap:anywhere;word-break:break-word}.pil-multiline{white-space:pre-line;overflow-wrap:anywhere;word-break:break-word}.pil-strong .pil-label,.pil-strong .pil-value,.pil-strong .pil-muted{font-weight:700;color:#0f172a}.pil-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}.pil-edit-btn{margin-left:4px;flex-shrink:0}ui-empty-state{padding:12px 0}.pil-muted{color:#1e293b;font-weight:400}.pil-danger{color:#ef4444;font-weight:600}.pil-link{font-size:.875rem;font-weight:500;color:#2563eb;text-decoration:none}.pil-link:hover{text-decoration:underline}.pil-link,.pil-link-icon,.pil-header-link{position:relative}@media(pointer:coarse),(max-width:480px){.pil-link:after,.pil-link-icon:after,.pil-header-link:after{content:\"\";position:absolute;inset:-14px -4px}}.pil-link--href{overflow-wrap:anywhere;word-break:break-word}.pil-link:focus-visible,.pil-link-icon:focus-visible,.pil-header-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:2px}.pil-link-icon{display:inline-flex;align-items:center;gap:5px;font-size:.875rem;font-weight:500;color:#1e293b;text-decoration:none}.pil-link-icon svg{color:#94a3b8;flex-shrink:0}.pil-grid-2{display:grid;grid-template-columns:1fr 1fr}.pil-grid-cell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;min-width:0;border-right:1px solid #f1f5f9}.pil-grid-cell:last-child{border-right:none}.pil-grid-cell:nth-child(2n){border-right:none}@media(max-width:480px){.pil-grid-2{grid-template-columns:1fr}.pil-grid-cell{border-right:none;border-bottom:1px solid #f1f5f9}.pil-grid-cell:last-child{border-bottom:none}}.pil-value--block{text-align:left;justify-content:flex-start}\n"],
31679
31695
  dependencies: [
31696
+ {
31697
+ kind: "directive",
31698
+ type: NgTemplateOutlet,
31699
+ selector: "[ngTemplateOutlet]",
31700
+ inputs: [
31701
+ "ngTemplateOutletContext",
31702
+ "ngTemplateOutlet",
31703
+ "ngTemplateOutletInjector"
31704
+ ]
31705
+ },
31680
31706
  {
31681
31707
  kind: "component",
31682
31708
  type: BadgeComponent,
@@ -31775,6 +31801,7 @@ i0.ɵɵngDeclareClassMetadata({
31775
31801
  standalone: true,
31776
31802
  changeDetection: ChangeDetectionStrategy.OnPush,
31777
31803
  imports: [
31804
+ NgTemplateOutlet,
31778
31805
  BadgeComponent,
31779
31806
  ButtonComponent,
31780
31807
  RouterLink,
@@ -31783,16 +31810,16 @@ i0.ɵɵngDeclareClassMetadata({
31783
31810
  ],
31784
31811
  host: { "[class.pil-fill]": "fill()" },
31785
31812
  template: `
31786
- @for (section of displaySections(); track section.title ?? $index) {
31813
+ @for (section of displaySections(); track $index) {
31787
31814
  <div class="pil-section">
31788
- @if (section.title || section.headerAction) {
31815
+ @if (section.title || section.headerAction || section.headerLink) {
31789
31816
  <div class="pil-section-label">
31790
31817
  <span>{{ section.title }}</span>
31791
31818
  @if (section.headerLink) {
31792
31819
  <a class="pil-header-link" [routerLink]="section.headerLink.url">{{ section.headerLink.label }}</a>
31793
31820
  }
31794
31821
  @if (section.headerAction; as ha) {
31795
- <ui-button class="pil-header-action" variant="secondary" size="xs" [disabled]="!!ha.disabled" [ariaLabel]="ha.ariaLabel ?? ha.label" (click)="ha.action()">
31822
+ <ui-button class="pil-header-action" variant="secondary" size="xs" [disabled]="!!ha.disabled" [ariaLabel]="ha.ariaLabel ?? ha.label" (click)="runHeaderAction(ha)">
31796
31823
  @if (ha.icon) {
31797
31824
  <svg class="pil-header-action-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path [attr.d]="ha.icon"/></svg>
31798
31825
  }{{ ha.label }}</ui-button>
@@ -31803,60 +31830,57 @@ i0.ɵɵngDeclareClassMetadata({
31803
31830
  <ui-empty-state message="No information available." />
31804
31831
  } @else if (section.columns === 2) {
31805
31832
  <div class="pil-grid-2">
31806
- @for (item of visibleItems(section); track item.label) {
31833
+ @for (item of visibleItems(section); track $index) {
31807
31834
  <div class="pil-grid-cell" [class.pil-strong]="item.emphasis">
31808
31835
  <span class="pil-label">{{ item.label }}{{ labelColon() ? ':' : '' }}</span>{{ labelColon() ? ' ' : '' }}
31809
31836
  <span class="pil-value pil-value--block">
31810
- @if (item.badge) {
31811
- <ui-badge [label]="item.badge.label" [variant]="item.badge.variant" />
31812
- } @else if (hrefOf(item); as h) {
31813
- <a class="pil-link pil-link--href" [attr.href]="h" [attr.target]="isWeb(h) ? '_blank' : null" [attr.rel]="isWeb(h) ? 'noopener noreferrer' : null">{{ textOf(item) }}</a>
31814
- } @else {
31815
- <span [class.pil-muted]="item.muted" [class.pil-danger]="item.danger" [class.pil-multiline]="item.multiline">{{ item.value || '—' }}</span>
31816
- }
31837
+ <ng-container *ngTemplateOutlet="valueTpl; context: { $implicit: item }" />
31817
31838
  </span>
31818
31839
  </div>
31819
31840
  }
31820
31841
  </div>
31821
31842
  } @else {
31822
- @for (item of visibleItems(section); track item.label) {
31843
+ @for (item of visibleItems(section); track $index) {
31823
31844
  <div class="pil-row" [class.pil-row--inline]="labelColon()" [class.pil-strong]="item.emphasis">
31824
31845
  <span class="pil-label">{{ item.label }}{{ labelColon() ? ':' : '' }}</span>{{ labelColon() ? ' ' : '' }}
31825
31846
  <span class="pil-value">
31826
- @if (item.badges) {
31827
- <span class="pil-badges">
31828
- @for (b of item.badges; track b.label) {
31829
- <ui-badge [label]="b.label" [variant]="b.variant" />
31830
- }
31831
- </span>
31832
- } @else if (item.badge) {
31833
- <ui-badge [label]="item.badge.label" [variant]="item.badge.variant" />
31834
- } @else if (hrefOf(item); as h) {
31835
- <a class="pil-link pil-link--href" [attr.href]="h" [attr.target]="isWeb(h) ? '_blank' : null" [attr.rel]="isWeb(h) ? 'noopener noreferrer' : null">{{ textOf(item) }}</a>
31836
- } @else if (item.link && item.value && item.linkIcon) {
31837
- <a class="pil-link-icon" [routerLink]="item.link">
31838
- {{ item.value }}
31839
- <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
31840
- </a>
31841
- } @else if (item.link && item.value) {
31842
- <a class="pil-link" [routerLink]="item.link">{{ item.value }}</a>
31843
- } @else {
31844
- <span [class.pil-muted]="item.muted" [class.pil-danger]="item.danger" [class.pil-multiline]="item.multiline">{{ item.value || '—' }}</span>
31845
- }
31846
- @if (item.editAction) {
31847
- <ui-icon class="pil-edit-btn" name="edit" [size]="14" [tooltip]="item.editTooltip ?? 'Edit'" (iconClick)="item.editAction!()" />
31848
- }
31849
- @if (item.deleteAction) {
31850
- <ui-icon class="pil-edit-btn" name="delete" variant="danger" [size]="14" [tooltip]="item.deleteTooltip ?? 'Delete'" (iconClick)="item.deleteAction!()" />
31851
- }
31847
+ <ng-container *ngTemplateOutlet="valueTpl; context: { $implicit: item }" />
31852
31848
  </span>
31853
31849
  </div>
31854
31850
  }
31855
31851
  }
31856
31852
  </div>
31857
31853
  }
31854
+ <ng-template #valueTpl let-item>
31855
+ @if (item.badges) {
31856
+ <span class="pil-badges">
31857
+ @for (b of item.badges; track $index) {
31858
+ <ui-badge [label]="b.label" [variant]="b.variant" />
31859
+ }
31860
+ </span>
31861
+ } @else if (item.badge) {
31862
+ <ui-badge [label]="item.badge.label" [variant]="item.badge.variant" />
31863
+ } @else if (hrefOf(item); as h) {
31864
+ <a class="pil-link pil-link--href" [attr.href]="h" [attr.target]="isWeb(h) ? '_blank' : null" [attr.rel]="isWeb(h) ? 'noopener noreferrer' : null">{{ textOf(item) }}</a>
31865
+ } @else if (item.link && item.value && item.linkIcon) {
31866
+ <a class="pil-link-icon" [routerLink]="item.link">
31867
+ {{ item.value }}
31868
+ <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true" focusable="false"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
31869
+ </a>
31870
+ } @else if (item.link && item.value) {
31871
+ <a class="pil-link" [routerLink]="item.link">{{ item.value }}</a>
31872
+ } @else {
31873
+ <span [class.pil-muted]="item.muted" [class.pil-danger]="item.danger" [class.pil-multiline]="item.multiline">{{ valueOf(item) }}</span>
31874
+ }
31875
+ @if (item.editAction) {
31876
+ <ui-icon class="pil-edit-btn" name="edit" [size]="14" [tooltip]="item.editTooltip ?? 'Edit'" (iconClick)="item.editAction()" />
31877
+ }
31878
+ @if (item.deleteAction) {
31879
+ <ui-icon class="pil-edit-btn" name="delete" variant="danger" [size]="14" [tooltip]="item.deleteTooltip ?? 'Delete'" (iconClick)="item.deleteAction()" />
31880
+ }
31881
+ </ng-template>
31858
31882
  `,
31859
- styles: [":host{display:flex;flex-direction:column;gap:12px}:host(.pil-fill){flex:1;min-height:0}:host(.pil-fill) .pil-section{flex:1}.pil-section{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.pil-section-label{display:flex;justify-content:space-between;align-items:center;font-size:.6875rem;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase;padding:8px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.pil-header-action{text-transform:none;letter-spacing:0;margin:-4px 0;flex-shrink:0}.pil-header-action-icon{margin-right:6px;vertical-align:-2px;flex-shrink:0}.pil-header-link{font-size:.75rem;font-weight:500;color:#2563eb;text-decoration:none;text-transform:none;letter-spacing:0}.pil-header-link:hover{text-decoration:underline}.pil-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #f1f5f9}.pil-row:last-child{border-bottom:none}.pil-row--inline{justify-content:flex-start}.pil-row--inline .pil-value{text-align:left;justify-content:flex-start;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere;word-break:break-word}.pil-label{font-size:.8125rem;color:#64748b;flex-shrink:0}.pil-value{font-size:.875rem;font-weight:500;color:#1e293b;text-align:right;display:flex;align-items:center;justify-content:flex-end}.pil-multiline{white-space:pre-line;overflow-wrap:anywhere;word-break:break-word}.pil-strong .pil-label,.pil-strong .pil-value,.pil-strong .pil-muted{font-weight:700;color:#0f172a}.pil-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}.pil-edit-btn{margin-left:4px;flex-shrink:0}ui-empty-state{padding:12px 0}.pil-muted{color:#1e293b;font-weight:400}.pil-danger{color:#ef4444;font-weight:600}.pil-link{font-size:.875rem;font-weight:500;color:#2563eb;text-decoration:none}.pil-link:hover{text-decoration:underline}.pil-link,.pil-link-icon,.pil-header-link{position:relative}@media(pointer:coarse),(max-width:480px){.pil-link:after,.pil-link-icon:after,.pil-header-link:after{content:\"\";position:absolute;inset:-14px -4px}}.pil-link--href{overflow-wrap:anywhere;word-break:break-word}.pil-link:focus-visible,.pil-header-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:2px}.pil-link-icon{display:inline-flex;align-items:center;gap:5px;font-size:.875rem;font-weight:500;color:#1e293b;text-decoration:none}.pil-link-icon svg{color:#94a3b8;flex-shrink:0}.pil-grid-2{display:grid;grid-template-columns:1fr 1fr}.pil-grid-cell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-right:1px solid #f1f5f9}.pil-grid-cell:last-child{border-right:none}.pil-value--block{text-align:left;justify-content:flex-start}\n"]
31883
+ styles: [":host{display:flex;flex-direction:column;gap:12px}:host(.pil-fill){flex:1;min-height:0}:host(.pil-fill) .pil-section{flex:1}.pil-section{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.pil-section-label{display:flex;justify-content:space-between;align-items:center;font-size:.6875rem;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase;padding:8px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.pil-header-action{text-transform:none;letter-spacing:0;margin:-4px 0;flex-shrink:0}.pil-header-action-icon{margin-right:6px;vertical-align:-2px;flex-shrink:0}.pil-header-link{font-size:.75rem;font-weight:500;color:#2563eb;text-decoration:none;text-transform:none;letter-spacing:0}.pil-header-link:hover{text-decoration:underline}.pil-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #f1f5f9}.pil-row:last-child{border-bottom:none}.pil-row--inline{justify-content:flex-start}.pil-row--inline .pil-value{text-align:left;justify-content:flex-start;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere;word-break:break-word}.pil-label{font-size:.8125rem;color:#64748b;flex-shrink:0}.pil-value{font-size:.875rem;font-weight:500;color:#1e293b;text-align:right;display:flex;align-items:center;justify-content:flex-end;min-width:0;overflow-wrap:anywhere;word-break:break-word}.pil-multiline{white-space:pre-line;overflow-wrap:anywhere;word-break:break-word}.pil-strong .pil-label,.pil-strong .pil-value,.pil-strong .pil-muted{font-weight:700;color:#0f172a}.pil-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}.pil-edit-btn{margin-left:4px;flex-shrink:0}ui-empty-state{padding:12px 0}.pil-muted{color:#1e293b;font-weight:400}.pil-danger{color:#ef4444;font-weight:600}.pil-link{font-size:.875rem;font-weight:500;color:#2563eb;text-decoration:none}.pil-link:hover{text-decoration:underline}.pil-link,.pil-link-icon,.pil-header-link{position:relative}@media(pointer:coarse),(max-width:480px){.pil-link:after,.pil-link-icon:after,.pil-header-link:after{content:\"\";position:absolute;inset:-14px -4px}}.pil-link--href{overflow-wrap:anywhere;word-break:break-word}.pil-link:focus-visible,.pil-link-icon:focus-visible,.pil-header-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:2px}.pil-link-icon{display:inline-flex;align-items:center;gap:5px;font-size:.875rem;font-weight:500;color:#1e293b;text-decoration:none}.pil-link-icon svg{color:#94a3b8;flex-shrink:0}.pil-grid-2{display:grid;grid-template-columns:1fr 1fr}.pil-grid-cell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;min-width:0;border-right:1px solid #f1f5f9}.pil-grid-cell:last-child{border-right:none}.pil-grid-cell:nth-child(2n){border-right:none}@media(max-width:480px){.pil-grid-2{grid-template-columns:1fr}.pil-grid-cell{border-right:none;border-bottom:1px solid #f1f5f9}.pil-grid-cell:last-child{border-bottom:none}}.pil-value--block{text-align:left;justify-content:flex-start}\n"]
31860
31884
  }]
31861
31885
  }],
31862
31886
  propDecorators: {
@@ -32290,7 +32314,8 @@ var AppShellComponent = class AppShellComponent {
32290
32314
  this.logoutClick = output();
32291
32315
  this._sidebarOpen = signal(false, ...ngDevMode ? [{ debugName: "_sidebarOpen" }] : /* istanbul ignore next */ []);
32292
32316
  this._collapsed = signal(AppShellComponent._loadCollapsed(), ...ngDevMode ? [{ debugName: "_collapsed" }] : /* istanbul ignore next */ []);
32293
- this._isRail = computed(() => this.collapsible() && this._collapsed(), ...ngDevMode ? [{ debugName: "_isRail" }] : /* istanbul ignore next */ []);
32317
+ this._drawerLayout = signal(false, ...ngDevMode ? [{ debugName: "_drawerLayout" }] : /* istanbul ignore next */ []);
32318
+ this._isRail = computed(() => this.collapsible() && this._collapsed() && !this._drawerLayout(), ...ngDevMode ? [{ debugName: "_isRail" }] : /* istanbul ignore next */ []);
32294
32319
  this._collapsedGroups = signal({}, ...ngDevMode ? [{ debugName: "_collapsedGroups" }] : /* istanbul ignore next */ []);
32295
32320
  this._visibleGroups = computed(() => this.navGroups().filter((g) => g.visible !== false), ...ngDevMode ? [{ debugName: "_visibleGroups" }] : /* istanbul ignore next */ []);
32296
32321
  this._userInitials = computed(() => {
@@ -32302,6 +32327,13 @@ var AppShellComponent = class AppShellComponent {
32302
32327
  return [u?.firstName, u?.lastName].filter(Boolean).join(" ");
32303
32328
  }, ...ngDevMode ? [{ debugName: "_userName" }] : /* istanbul ignore next */ []);
32304
32329
  this._iconCache = /* @__PURE__ */ new Map();
32330
+ this._host = inject(ElementRef);
32331
+ this._injector = inject(Injector);
32332
+ this._document = inject(DOCUMENT, { optional: true });
32333
+ this._onDrawerMqChange = (e) => {
32334
+ this._drawerLayout.set(e.matches);
32335
+ if (!e.matches) this._sidebarOpen.set(false);
32336
+ };
32305
32337
  }
32306
32338
  _safeIcon(svg) {
32307
32339
  let safe = this._iconCache.get(svg);
@@ -32314,8 +32346,11 @@ var AppShellComponent = class AppShellComponent {
32314
32346
  _visibleLinks(group) {
32315
32347
  return group.links.filter((l) => l.visible !== false);
32316
32348
  }
32349
+ _canCollapseGroups() {
32350
+ return this._visibleGroups().length > 1;
32351
+ }
32317
32352
  _isCollapsed(key) {
32318
- return !!this._collapsedGroups()[key];
32353
+ return this._canCollapseGroups() && !!this._collapsedGroups()[key];
32319
32354
  }
32320
32355
  toggleGroup(key) {
32321
32356
  const collapsed = !this._collapsedGroups()[key];
@@ -32364,11 +32399,83 @@ var AppShellComponent = class AppShellComponent {
32364
32399
  return false;
32365
32400
  }
32366
32401
  }
32402
+ static {
32403
+ this._DRAWER_MQ = "not all and (min-width: 1025px)";
32404
+ }
32405
+ static {
32406
+ this._FOCUSABLE = "a[href]:not([tabindex=\"-1\"]), button:not([disabled]):not([tabindex=\"-1\"]), input:not([disabled]):not([type=\"hidden\"]):not([tabindex=\"-1\"]), select:not([disabled]):not([tabindex=\"-1\"]), textarea:not([disabled]):not([tabindex=\"-1\"]), [tabindex]:not([tabindex=\"-1\"]), summary:not([tabindex=\"-1\"]), [contenteditable]:not([contenteditable=\"false\"]):not([tabindex=\"-1\"]), iframe:not([tabindex=\"-1\"]), audio[controls]:not([tabindex=\"-1\"]), video[controls]:not([tabindex=\"-1\"])";
32407
+ }
32408
+ _sidebarFocusables() {
32409
+ const aside = this._host.nativeElement.querySelector(".sidebar");
32410
+ return aside ? Array.from(aside.querySelectorAll(AppShellComponent._FOCUSABLE)).filter((el) => !el.hidden && el.getClientRects().length > 0) : [];
32411
+ }
32412
+ _hamburger() {
32413
+ return this._host.nativeElement.querySelector(".hamburger");
32414
+ }
32367
32415
  toggleSidebar() {
32368
- this._sidebarOpen.update((v) => !v);
32416
+ if (this._sidebarOpen()) this.closeSidebar(true);
32417
+ else this.openSidebar();
32418
+ }
32419
+ openSidebar() {
32420
+ if (!this._drawerLayout()) return;
32421
+ this._sidebarOpen.set(true);
32422
+ afterNextRender(() => this._sidebarFocusables()[0]?.focus(), { injector: this._injector });
32369
32423
  }
32370
- closeSidebar() {
32424
+ closeSidebar(returnFocus = false) {
32425
+ const wasOpen = this._sidebarOpen();
32371
32426
  this._sidebarOpen.set(false);
32427
+ if (!wasOpen) return;
32428
+ const active = this._document?.activeElement ?? null;
32429
+ const focusInSidebar = !!active && !!this._host.nativeElement.querySelector(".sidebar")?.contains(active);
32430
+ if (returnFocus) this._hamburger()?.focus();
32431
+ else if (focusInSidebar) this._host.nativeElement.querySelector("#main-content")?.focus();
32432
+ }
32433
+ onShellKeydown(e) {
32434
+ if (e.defaultPrevented || !this._sidebarOpen() || !this._drawerLayout()) return;
32435
+ if (e.key === "Escape") {
32436
+ e.preventDefault();
32437
+ this.closeSidebar(true);
32438
+ return;
32439
+ }
32440
+ if (e.key !== "Tab" || e.ctrlKey || e.altKey || e.metaKey) return;
32441
+ const items = this._sidebarFocusables();
32442
+ if (!items.length) return;
32443
+ const first = items[0];
32444
+ const last = items[items.length - 1];
32445
+ const active = this._document?.activeElement ?? null;
32446
+ const owner = active ? items.find((el) => el === active || el.contains(active)) : void 0;
32447
+ if (owner) {
32448
+ if (e.shiftKey && owner === first) {
32449
+ e.preventDefault();
32450
+ last.focus();
32451
+ } else if (!e.shiftKey && owner === last) {
32452
+ e.preventDefault();
32453
+ first.focus();
32454
+ }
32455
+ return;
32456
+ }
32457
+ const host = active && active.shadowRoot && this._host.nativeElement.querySelector(".sidebar")?.contains(active) ? active : null;
32458
+ if (host) {
32459
+ const inner = Array.from(host.shadowRoot.querySelectorAll(AppShellComponent._FOCUSABLE)).filter((el) => !el.hidden && el.getClientRects().length > 0);
32460
+ const innerActive = host.shadowRoot.activeElement;
32461
+ const atInnerEdge = !innerActive || !inner.length || innerActive === (e.shiftKey ? inner[0] : inner[inner.length - 1]);
32462
+ const afterAll = items.every((el) => !!(el.compareDocumentPosition(host) & Node.DOCUMENT_POSITION_FOLLOWING));
32463
+ const beforeAll = items.every((el) => !!(el.compareDocumentPosition(host) & Node.DOCUMENT_POSITION_PRECEDING));
32464
+ if (atInnerEdge && !e.shiftKey && afterAll) {
32465
+ e.preventDefault();
32466
+ first.focus();
32467
+ } else if (atInnerEdge && e.shiftKey && beforeAll) {
32468
+ e.preventDefault();
32469
+ last.focus();
32470
+ }
32471
+ return;
32472
+ }
32473
+ e.preventDefault();
32474
+ (e.shiftKey ? last : first).focus();
32475
+ }
32476
+ skipToContent(e) {
32477
+ e.preventDefault();
32478
+ this._host.nativeElement.querySelector("#main-content")?.focus();
32372
32479
  }
32373
32480
  ngOnInit() {
32374
32481
  const initial = {};
@@ -32380,13 +32487,19 @@ var AppShellComponent = class AppShellComponent {
32380
32487
  ...this._readSavedGroups()
32381
32488
  });
32382
32489
  this._routerSub = this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe((e) => {
32383
- this._sidebarOpen.set(false);
32490
+ this.closeSidebar();
32384
32491
  this._expandActiveGroup(e.urlAfterRedirects);
32385
32492
  });
32493
+ if (typeof matchMedia === "function") {
32494
+ this._drawerMq = matchMedia(AppShellComponent._DRAWER_MQ);
32495
+ this._drawerLayout.set(!!this._drawerMq?.matches);
32496
+ this._drawerMq?.addEventListener?.("change", this._onDrawerMqChange);
32497
+ }
32386
32498
  this._expandActiveGroup(this.router.url);
32387
32499
  }
32388
32500
  ngOnDestroy() {
32389
32501
  this._routerSub?.unsubscribe();
32502
+ this._drawerMq?.removeEventListener?.("change", this._onDrawerMqChange);
32390
32503
  this._iconCache.clear();
32391
32504
  }
32392
32505
  _expandActiveGroup(url) {
@@ -32492,11 +32605,15 @@ var AppShellComponent = class AppShellComponent {
32492
32605
  class="shell"
32493
32606
  [class.sidebar-open]="_sidebarOpen()"
32494
32607
  [class.collapsed]="_isRail()"
32608
+ (keydown)="onShellKeydown($event)"
32495
32609
  [style.--shell-bg]="backgroundColor() || null"
32496
32610
  [style.--shell-text]="textColor() || null"
32497
32611
  >
32498
32612
  <ui-shell-projected-styles />
32499
32613
 
32614
+ <!-- Keyboard users jump past the navigation straight to the page content -->
32615
+ <a class="skip-link" href="#main-content" (click)="skipToContent($event)">Skip to main content</a>
32616
+
32500
32617
  <!-- Mobile backdrop -->
32501
32618
  <div
32502
32619
  class="sidebar-backdrop"
@@ -32543,6 +32660,7 @@ var AppShellComponent = class AppShellComponent {
32543
32660
  @for (group of _visibleGroups(); track group.key) {
32544
32661
  <div class="nav-group">
32545
32662
  @if (_isRail()) { <div class="rail-divider" aria-hidden="true"></div> }
32663
+ @if (_canCollapseGroups()) {
32546
32664
  <button
32547
32665
  class="nav-group-label"
32548
32666
  type="button"
@@ -32561,38 +32679,44 @@ var AppShellComponent = class AppShellComponent {
32561
32679
  </svg>
32562
32680
  {{ group.label }}
32563
32681
  </button>
32564
-
32565
- @if (_isRail() || !_isCollapsed(group.key)) {
32566
- <div [id]="'navg-' + group.key" role="list">
32567
- @for (link of _visibleLinks(group); track link.route) {
32568
- <a
32569
- role="listitem"
32570
- [routerLink]="link.route"
32571
- routerLinkActive="active"
32572
- [routerLinkActiveOptions]="{ exact: !!link.exact }"
32573
- #rla="routerLinkActive"
32574
- [attr.aria-current]="rla.isActive ? 'page' : null"
32575
- [attr.title]="_isRail() ? link.label : null"
32576
- [attr.aria-label]="_isRail() ? link.label : null"
32577
- >
32578
- @if (link.icon) {
32579
- <span
32580
- class="nav-icon"
32581
- [innerHTML]="_safeIcon(link.icon)"
32582
- aria-hidden="true"
32583
- ></span>
32584
- }
32585
- <span class="nav-label">{{ link.label }}</span>
32586
- @if (link.badge && link.badge > 0) {
32587
- <span
32588
- class="nav-badge"
32589
- [attr.aria-label]="link.badge + ' unread'"
32590
- >{{ link.badge }}</span>
32591
- }
32592
- </a>
32593
- }
32594
- </div>
32682
+ } @else {
32683
+ <!-- A single group can't be collapsed: hiding it would remove the whole navigation -->
32684
+ <div class="nav-group-label nav-group-label--static" [id]="'navg-label-' + group.key">{{ group.label }}</div>
32595
32685
  }
32686
+
32687
+ <!-- Always rendered so the toggle's aria-controls resolves; [hidden] (plus display:none in the CSS) removes the links of a collapsed group from view and from the tab order -->
32688
+ <div
32689
+ class="nav-group-links"
32690
+ [id]="'navg-' + group.key"
32691
+ [hidden]="!_isRail() && _isCollapsed(group.key)"
32692
+ >
32693
+ @for (link of _visibleLinks(group); track link.route) {
32694
+ <a
32695
+ [routerLink]="link.route"
32696
+ routerLinkActive="active"
32697
+ [routerLinkActiveOptions]="{ exact: !!link.exact }"
32698
+ #rla="routerLinkActive"
32699
+ [attr.aria-current]="rla.isActive ? 'page' : null"
32700
+ [attr.title]="_isRail() ? link.label : null"
32701
+ [attr.aria-label]="_isRail() ? link.label : null"
32702
+ >
32703
+ @if (link.icon) {
32704
+ <span
32705
+ class="nav-icon"
32706
+ [innerHTML]="_safeIcon(link.icon)"
32707
+ aria-hidden="true"
32708
+ ></span>
32709
+ }
32710
+ <span class="nav-label">{{ link.label }}</span>
32711
+ @if (link.badge && link.badge > 0) {
32712
+ <span
32713
+ class="nav-badge"
32714
+ [attr.aria-label]="link.badge + ' unread'"
32715
+ >{{ link.badge }}</span>
32716
+ }
32717
+ </a>
32718
+ }
32719
+ </div>
32596
32720
  </div>
32597
32721
  }
32598
32722
  </nav>
@@ -32684,7 +32808,7 @@ var AppShellComponent = class AppShellComponent {
32684
32808
  <ui-confirm-outlet />
32685
32809
  `,
32686
32810
  isInline: true,
32687
- styles: [":host{display:contents}.shell{display:flex;height:100vh;height:100dvh;overflow:hidden;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.sidebar-backdrop{display:none;position:fixed;inset:0;background:#00000080;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:199}.sidebar{width:256px;background:var(--shell-bg, linear-gradient(175deg, #0f172a 0%, #111827 100%));display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}.sidebar-header{display:flex;align-items:center;padding:0 20px;min-height:64px;border-bottom:1px solid color-mix(in srgb,var(--shell-text, #fff) 6%,transparent);box-sizing:border-box}.brand-default{display:flex;align-items:center;gap:10px}.brand-text{font-size:1.125rem;font-weight:700;color:var(--shell-text, #fff);letter-spacing:-.01em}.sidebar-nav{padding:6px 0 8px;flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--shell-text, #fff) 8%,transparent) transparent}.sidebar-nav::-webkit-scrollbar{width:3px}.sidebar-nav::-webkit-scrollbar-track{background:transparent}.sidebar-nav::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--shell-text, #fff) 8%,transparent);border-radius:2px}.nav-group{margin-bottom:6px}.nav-group-label{display:flex;align-items:center;gap:6px;width:100%;padding:8px 16px;font-size:.6875rem;font-weight:700;color:color-mix(in srgb,var(--shell-text, #fff) 80%,transparent);text-transform:uppercase;letter-spacing:.12em;background:none;border:none;cursor:pointer;transition:color .15s;text-align:left;border-radius:6px;background:color-mix(in srgb,var(--shell-text, #fff) 10%,transparent);margin:6px 4px 4px;width:calc(100% - 8px);box-sizing:border-box}.nav-group-label:hover{color:color-mix(in srgb,var(--shell-text, #fff) 100%,transparent)}.nav-group-label:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:-1px}.chevron{flex-shrink:0;transition:transform .2s cubic-bezier(.4,0,.2,1);opacity:.85}.chevron.collapsed{transform:rotate(-90deg)}.sidebar-nav a{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 32px;color:color-mix(in srgb,var(--shell-text, #fff) 95%,transparent);font-size:.9375rem;font-weight:500;text-decoration:none;border-left:2px solid transparent;border-radius:0 8px 8px 0;margin-right:10px;transition:color .15s,background .15s,border-color .15s}.sidebar-nav a:hover{color:color-mix(in srgb,var(--shell-text, #fff) 100%,transparent);background:color-mix(in srgb,var(--shell-text, #fff) 6%,transparent)}.sidebar-nav a.active{color:var(--shell-text, #fff);background:#60a5fa21;border-left-color:#60a5fa;font-weight:600}.sidebar-nav a:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:-2px}.nav-icon{display:flex;align-items:center;flex-shrink:0}.nav-label{flex:1}.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ef4444;color:#fff;font-size:.625rem;font-weight:700;margin-left:auto}.sidebar-footer{padding:10px 14px;border-top:1px solid color-mix(in srgb,var(--shell-text, #fff) 6%,transparent)}.user-info{display:flex;align-items:center;gap:10px}.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#60a5fa38,#60a5fa14);border:1px solid rgba(96,165,250,.18);color:color-mix(in srgb,var(--shell-text, #fff) 88%,transparent);font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}.user-details{display:flex;flex-direction:column;min-width:0;flex:1}.user-name{font-size:.8125rem;font-weight:600;color:var(--shell-text, #fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-role{font-size:.6875rem;color:color-mix(in srgb,var(--shell-text, #fff) 80%,transparent);text-transform:uppercase;letter-spacing:.05em;font-weight:500}.btn-logout{background:none;border:none;cursor:pointer;color:color-mix(in srgb,var(--shell-text, #fff) 85%,transparent);padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s,background .15s}.btn-logout:hover{color:#f87171;background:#f871711a}.btn-logout:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:2px}.brand-full{display:flex;align-items:center;min-width:0;flex:1}.brand-mark{display:none}.shell.collapsed .brand-mark{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.125rem;color:var(--shell-text, #fff);background:color-mix(in srgb,var(--shell-text, #fff) 15%,transparent)}.rail-toggle{display:none;align-items:center;justify-content:center;width:32px;height:32px;margin-left:auto;flex-shrink:0;border:none;background:none;cursor:pointer;border-radius:8px;color:color-mix(in srgb,var(--shell-text, #fff) 85%,transparent);transition:background .15s,color .15s}.rail-toggle:hover{background:color-mix(in srgb,var(--shell-text, #fff) 12%,transparent);color:var(--shell-text, #fff)}.rail-toggle:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:2px}.rail-divider{display:none}@media(min-width:1025px){.rail-toggle{display:flex}.sidebar{transition:width .2s cubic-bezier(.4,0,.2,1)}.shell.collapsed .sidebar{width:68px}.shell.collapsed .sidebar-header{flex-direction:column;justify-content:center;gap:4px;padding:8px 0}.shell.collapsed .brand-full{flex:none;width:44px;height:44px;overflow:hidden;border-radius:10px;justify-content:center}.shell.collapsed .brand-text{display:none}.shell.collapsed .rail-toggle{margin-left:0}.shell.collapsed .nav-group-label{display:none}.shell.collapsed .rail-divider{display:block;height:1px;margin:8px 14px;background:color-mix(in srgb,var(--shell-text, #fff) 20%,transparent)}.shell.collapsed .nav-group:first-child .rail-divider{display:none}.shell.collapsed .sidebar-nav a{position:relative;justify-content:center;padding:10px 0;margin:0 8px 2px;border-left:none;border-radius:8px}.shell.collapsed .sidebar-nav a.active{box-shadow:inset 3px 0 #60a5fa}.shell.collapsed .nav-label{display:none}.shell.collapsed .nav-badge{position:absolute;top:2px;right:4px;min-width:16px;height:16px;padding:0 4px;font-size:.5625rem;margin:0}.shell.collapsed .sidebar-footer{padding:10px 8px}.shell.collapsed .user-info{flex-direction:column;gap:8px}.shell.collapsed .user-details{display:none}}.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.top-header{display:flex;align-items:center;gap:8px;padding:0 24px;background:#fff;box-shadow:0 1px 3px #00000012,0 1px #0000000a;min-height:64px;box-sizing:border-box;position:relative;z-index:50}.hamburger{display:none;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;cursor:pointer;color:#374151;border-radius:8px;flex-shrink:0;transition:background .15s,color .15s}.hamburger:hover{background:#f3f4f6}.hamburger:focus-visible{outline:2px solid rgba(59,130,246,.5);outline-offset:2px}.page-title{font-size:1.25rem;font-weight:700;color:#111827;margin:0;letter-spacing:-.02em}.page-title:focus{outline:none}.read-only-badge{display:inline-flex;align-items:center;flex-shrink:0;padding:2px 8px;border-radius:9999px;font-size:.6875rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;background:#fef9c3;color:#854d0e;border:1px solid #fde68a;white-space:nowrap}.header-start{display:flex;align-items:center;min-width:0;margin-left:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.header-start:empty{display:none}.header-start::-webkit-scrollbar{display:none}.header-end{display:flex;align-items:center;margin-left:auto}.content{--shell-content-padding: 24px;flex:1;overflow-y:auto;padding:var(--shell-content-padding);background:#f7f8f6;display:flex;flex-direction:column;box-sizing:border-box;min-height:0}.content>*{flex:1;min-height:0;display:flex;flex-direction:column}@media(max-width:1024px){.hamburger{display:flex}.sidebar{position:fixed;top:0;left:0;bottom:0;z-index:200;transform:translate(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s cubic-bezier(.4,0,.2,1);box-shadow:none}.shell.sidebar-open .sidebar{transform:translate(0);box-shadow:4px 0 32px #0000004d}.shell.sidebar-open .sidebar-backdrop{display:block}.main-area{width:100%}.top-header{padding:0 16px;gap:4px}.content{--shell-content-padding: 16px}}@media(max-width:480px){.page-title{font-size:1.0625rem}.content{--shell-content-padding: 12px}}@media(pointer:coarse),(max-width:480px){.sidebar-nav a,.nav-group-label{min-height:44px}.btn-logout,.hamburger,.rail-toggle{min-width:44px;min-height:44px}}@media(prefers-reduced-motion:reduce){.chevron,.sidebar-nav a,.sidebar{transition:none!important}}\n"],
32811
+ styles: [":host{display:contents}.shell{display:flex;height:100vh;height:100dvh;overflow:hidden;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.sidebar-backdrop{display:none;position:fixed;inset:0;background:#00000080;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:199}.sidebar{width:256px;background:var(--shell-bg, linear-gradient(175deg, #0f172a 0%, #111827 100%));display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}.sidebar-header{display:flex;align-items:center;padding:0 20px;min-height:64px;border-bottom:1px solid color-mix(in srgb,var(--shell-text, #fff) 6%,transparent);box-sizing:border-box}.brand-default{display:flex;align-items:center;gap:10px}.brand-text{font-size:1.125rem;font-weight:700;color:var(--shell-text, #fff);letter-spacing:-.01em}.sidebar-nav{padding:6px 0 8px;flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--shell-text, #fff) 8%,transparent) transparent}.sidebar-nav::-webkit-scrollbar{width:3px}.sidebar-nav::-webkit-scrollbar-track{background:transparent}.sidebar-nav::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--shell-text, #fff) 8%,transparent);border-radius:2px}.nav-group{margin-bottom:6px}.nav-group-links[hidden]{display:none}.nav-group-label{display:flex;align-items:center;gap:6px;width:100%;padding:8px 16px;font-size:.6875rem;font-weight:700;color:color-mix(in srgb,var(--shell-text, #fff) 80%,transparent);text-transform:uppercase;letter-spacing:.12em;background:none;border:none;cursor:pointer;transition:color .15s;text-align:left;border-radius:6px;background:color-mix(in srgb,var(--shell-text, #fff) 10%,transparent);margin:6px 4px 4px;width:calc(100% - 8px);box-sizing:border-box}.nav-group-label:hover{color:color-mix(in srgb,var(--shell-text, #fff) 100%,transparent)}.nav-group-label:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:-1px}.chevron{flex-shrink:0;transition:transform .2s cubic-bezier(.4,0,.2,1);opacity:.85}.chevron.collapsed{transform:rotate(-90deg)}.sidebar-nav a{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 32px;color:color-mix(in srgb,var(--shell-text, #fff) 95%,transparent);font-size:.9375rem;font-weight:500;text-decoration:none;border-left:2px solid transparent;border-radius:0 8px 8px 0;margin-right:10px;transition:color .15s,background .15s,border-color .15s}.sidebar-nav a:hover{color:color-mix(in srgb,var(--shell-text, #fff) 100%,transparent);background:color-mix(in srgb,var(--shell-text, #fff) 6%,transparent)}.sidebar-nav a.active{color:var(--shell-text, #fff);background:#60a5fa21;border-left-color:#60a5fa;font-weight:600}.sidebar-nav a:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:-2px}.nav-icon{display:flex;align-items:center;flex-shrink:0}.nav-label{flex:1}.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ef4444;color:#fff;font-size:.625rem;font-weight:700;margin-left:auto}.sidebar-footer{padding:10px 14px;border-top:1px solid color-mix(in srgb,var(--shell-text, #fff) 6%,transparent)}.user-info{display:flex;align-items:center;gap:10px}.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#60a5fa38,#60a5fa14);border:1px solid rgba(96,165,250,.18);color:color-mix(in srgb,var(--shell-text, #fff) 88%,transparent);font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}.user-details{display:flex;flex-direction:column;min-width:0;flex:1}.user-name{font-size:.8125rem;font-weight:600;color:var(--shell-text, #fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-role{font-size:.6875rem;color:color-mix(in srgb,var(--shell-text, #fff) 80%,transparent);text-transform:uppercase;letter-spacing:.05em;font-weight:500}.btn-logout{background:none;border:none;cursor:pointer;color:color-mix(in srgb,var(--shell-text, #fff) 85%,transparent);padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s,background .15s}.btn-logout:hover{color:#f87171;background:#f871711a}.btn-logout:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:2px}.brand-full{display:flex;align-items:center;min-width:0;flex:1}.brand-mark{display:none}.shell.collapsed .brand-mark{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.125rem;color:var(--shell-text, #fff);background:color-mix(in srgb,var(--shell-text, #fff) 15%,transparent)}.rail-toggle{display:none;align-items:center;justify-content:center;width:32px;height:32px;margin-left:auto;flex-shrink:0;border:none;background:none;cursor:pointer;border-radius:8px;color:color-mix(in srgb,var(--shell-text, #fff) 85%,transparent);transition:background .15s,color .15s}.rail-toggle:hover{background:color-mix(in srgb,var(--shell-text, #fff) 12%,transparent);color:var(--shell-text, #fff)}.rail-toggle:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:2px}.rail-divider{display:none}@media(min-width:1025px){.rail-toggle{display:flex}.sidebar{transition:width .2s cubic-bezier(.4,0,.2,1)}.shell.collapsed .sidebar{width:68px}.shell.collapsed .sidebar-header{flex-direction:column;justify-content:center;gap:4px;padding:8px 0}.shell.collapsed .brand-full{flex:none;width:44px;height:44px;overflow:hidden;border-radius:10px;justify-content:center}.shell.collapsed .brand-text{display:none}.shell.collapsed .rail-toggle{margin-left:0}.shell.collapsed .nav-group-label{display:none}.shell.collapsed .rail-divider{display:block;height:1px;margin:8px 14px;background:color-mix(in srgb,var(--shell-text, #fff) 20%,transparent)}.shell.collapsed .nav-group:first-child .rail-divider{display:none}.shell.collapsed .sidebar-nav a{position:relative;justify-content:center;padding:10px 0;margin:0 8px 2px;border-left:none;border-radius:8px}.shell.collapsed .sidebar-nav a.active{box-shadow:inset 3px 0 #60a5fa}.shell.collapsed .nav-label{display:none}.shell.collapsed .nav-badge{position:absolute;top:2px;right:4px;min-width:16px;height:16px;padding:0 4px;font-size:.5625rem;margin:0}.shell.collapsed .sidebar-footer{padding:10px 8px}.shell.collapsed .user-info{flex-direction:column;gap:8px}.shell.collapsed .user-details{display:none}}.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.top-header{display:flex;align-items:center;gap:8px;padding:0 24px;background:#fff;box-shadow:0 1px 3px #00000012,0 1px #0000000a;min-height:64px;box-sizing:border-box;position:relative;z-index:50}.hamburger{display:none;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;cursor:pointer;color:#374151;border-radius:8px;flex-shrink:0;transition:background .15s,color .15s}.hamburger:hover{background:#f3f4f6}.hamburger:focus-visible{outline:2px solid rgba(59,130,246,.5);outline-offset:2px}.page-title{font-size:1.25rem;font-weight:700;color:#111827;margin:0;letter-spacing:-.02em}.page-title:focus{outline:none}.read-only-badge{display:inline-flex;align-items:center;flex-shrink:0;padding:2px 8px;border-radius:9999px;font-size:.6875rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;background:#fef9c3;color:#854d0e;border:1px solid #fde68a;white-space:nowrap}.header-start{display:flex;align-items:center;min-width:0;margin-left:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.header-start:empty{display:none}.header-start::-webkit-scrollbar{display:none}.header-end{display:flex;align-items:center;margin-left:auto}.content:focus{outline:none}.content{--shell-content-padding: 24px;flex:1;overflow-y:auto;padding:var(--shell-content-padding);background:#f7f8f6;display:flex;flex-direction:column;box-sizing:border-box;min-height:0}.content>*{flex:1;min-height:0;display:flex;flex-direction:column}.skip-link{position:absolute;top:-48px;left:8px;z-index:300;padding:8px 14px;border-radius:6px;background:#fff;color:#1d4ed8;font-size:.875rem;font-weight:600;text-decoration:none;box-shadow:0 2px 10px #00000040}.skip-link:focus{top:8px;outline:2px solid #1d4ed8;outline-offset:2px}.nav-group-label--static{cursor:default}@media(max-width:1024px){.hamburger{display:flex}.sidebar{position:fixed;top:0;left:0;bottom:0;z-index:200;transform:translate(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s cubic-bezier(.4,0,.2,1),visibility 0s linear .26s;visibility:hidden;box-shadow:none}.shell.sidebar-open .sidebar{transform:translate(0);box-shadow:4px 0 32px #0000004d;visibility:visible;transition-delay:0s}.shell.sidebar-open .sidebar-backdrop{display:block}.main-area{width:100%}.top-header{padding:0 16px;gap:4px}.content{--shell-content-padding: 16px}}@media(max-width:480px){.page-title{font-size:1.0625rem}.content{--shell-content-padding: 12px}}@media(pointer:coarse),(max-width:480px){.sidebar-nav a,.nav-group-label{min-height:44px}.btn-logout,.hamburger,.rail-toggle{min-width:44px;min-height:44px}}@media(prefers-reduced-motion:reduce){.chevron,.sidebar-nav a,.sidebar{transition:none!important}}\n"],
32688
32812
  dependencies: [
32689
32813
  {
32690
32814
  kind: "directive",
@@ -32754,11 +32878,15 @@ i0.ɵɵngDeclareClassMetadata({
32754
32878
  class="shell"
32755
32879
  [class.sidebar-open]="_sidebarOpen()"
32756
32880
  [class.collapsed]="_isRail()"
32881
+ (keydown)="onShellKeydown($event)"
32757
32882
  [style.--shell-bg]="backgroundColor() || null"
32758
32883
  [style.--shell-text]="textColor() || null"
32759
32884
  >
32760
32885
  <ui-shell-projected-styles />
32761
32886
 
32887
+ <!-- Keyboard users jump past the navigation straight to the page content -->
32888
+ <a class="skip-link" href="#main-content" (click)="skipToContent($event)">Skip to main content</a>
32889
+
32762
32890
  <!-- Mobile backdrop -->
32763
32891
  <div
32764
32892
  class="sidebar-backdrop"
@@ -32805,6 +32933,7 @@ i0.ɵɵngDeclareClassMetadata({
32805
32933
  @for (group of _visibleGroups(); track group.key) {
32806
32934
  <div class="nav-group">
32807
32935
  @if (_isRail()) { <div class="rail-divider" aria-hidden="true"></div> }
32936
+ @if (_canCollapseGroups()) {
32808
32937
  <button
32809
32938
  class="nav-group-label"
32810
32939
  type="button"
@@ -32823,38 +32952,44 @@ i0.ɵɵngDeclareClassMetadata({
32823
32952
  </svg>
32824
32953
  {{ group.label }}
32825
32954
  </button>
32826
-
32827
- @if (_isRail() || !_isCollapsed(group.key)) {
32828
- <div [id]="'navg-' + group.key" role="list">
32829
- @for (link of _visibleLinks(group); track link.route) {
32830
- <a
32831
- role="listitem"
32832
- [routerLink]="link.route"
32833
- routerLinkActive="active"
32834
- [routerLinkActiveOptions]="{ exact: !!link.exact }"
32835
- #rla="routerLinkActive"
32836
- [attr.aria-current]="rla.isActive ? 'page' : null"
32837
- [attr.title]="_isRail() ? link.label : null"
32838
- [attr.aria-label]="_isRail() ? link.label : null"
32839
- >
32840
- @if (link.icon) {
32841
- <span
32842
- class="nav-icon"
32843
- [innerHTML]="_safeIcon(link.icon)"
32844
- aria-hidden="true"
32845
- ></span>
32846
- }
32847
- <span class="nav-label">{{ link.label }}</span>
32848
- @if (link.badge && link.badge > 0) {
32849
- <span
32850
- class="nav-badge"
32851
- [attr.aria-label]="link.badge + ' unread'"
32852
- >{{ link.badge }}</span>
32853
- }
32854
- </a>
32855
- }
32856
- </div>
32955
+ } @else {
32956
+ <!-- A single group can't be collapsed: hiding it would remove the whole navigation -->
32957
+ <div class="nav-group-label nav-group-label--static" [id]="'navg-label-' + group.key">{{ group.label }}</div>
32857
32958
  }
32959
+
32960
+ <!-- Always rendered so the toggle's aria-controls resolves; [hidden] (plus display:none in the CSS) removes the links of a collapsed group from view and from the tab order -->
32961
+ <div
32962
+ class="nav-group-links"
32963
+ [id]="'navg-' + group.key"
32964
+ [hidden]="!_isRail() && _isCollapsed(group.key)"
32965
+ >
32966
+ @for (link of _visibleLinks(group); track link.route) {
32967
+ <a
32968
+ [routerLink]="link.route"
32969
+ routerLinkActive="active"
32970
+ [routerLinkActiveOptions]="{ exact: !!link.exact }"
32971
+ #rla="routerLinkActive"
32972
+ [attr.aria-current]="rla.isActive ? 'page' : null"
32973
+ [attr.title]="_isRail() ? link.label : null"
32974
+ [attr.aria-label]="_isRail() ? link.label : null"
32975
+ >
32976
+ @if (link.icon) {
32977
+ <span
32978
+ class="nav-icon"
32979
+ [innerHTML]="_safeIcon(link.icon)"
32980
+ aria-hidden="true"
32981
+ ></span>
32982
+ }
32983
+ <span class="nav-label">{{ link.label }}</span>
32984
+ @if (link.badge && link.badge > 0) {
32985
+ <span
32986
+ class="nav-badge"
32987
+ [attr.aria-label]="link.badge + ' unread'"
32988
+ >{{ link.badge }}</span>
32989
+ }
32990
+ </a>
32991
+ }
32992
+ </div>
32858
32993
  </div>
32859
32994
  }
32860
32995
  </nav>
@@ -32945,7 +33080,7 @@ i0.ɵɵngDeclareClassMetadata({
32945
33080
  <!-- Global confirm overlay — position:fixed so it overlays without affecting layout -->
32946
33081
  <ui-confirm-outlet />
32947
33082
  `,
32948
- styles: [":host{display:contents}.shell{display:flex;height:100vh;height:100dvh;overflow:hidden;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.sidebar-backdrop{display:none;position:fixed;inset:0;background:#00000080;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:199}.sidebar{width:256px;background:var(--shell-bg, linear-gradient(175deg, #0f172a 0%, #111827 100%));display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}.sidebar-header{display:flex;align-items:center;padding:0 20px;min-height:64px;border-bottom:1px solid color-mix(in srgb,var(--shell-text, #fff) 6%,transparent);box-sizing:border-box}.brand-default{display:flex;align-items:center;gap:10px}.brand-text{font-size:1.125rem;font-weight:700;color:var(--shell-text, #fff);letter-spacing:-.01em}.sidebar-nav{padding:6px 0 8px;flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--shell-text, #fff) 8%,transparent) transparent}.sidebar-nav::-webkit-scrollbar{width:3px}.sidebar-nav::-webkit-scrollbar-track{background:transparent}.sidebar-nav::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--shell-text, #fff) 8%,transparent);border-radius:2px}.nav-group{margin-bottom:6px}.nav-group-label{display:flex;align-items:center;gap:6px;width:100%;padding:8px 16px;font-size:.6875rem;font-weight:700;color:color-mix(in srgb,var(--shell-text, #fff) 80%,transparent);text-transform:uppercase;letter-spacing:.12em;background:none;border:none;cursor:pointer;transition:color .15s;text-align:left;border-radius:6px;background:color-mix(in srgb,var(--shell-text, #fff) 10%,transparent);margin:6px 4px 4px;width:calc(100% - 8px);box-sizing:border-box}.nav-group-label:hover{color:color-mix(in srgb,var(--shell-text, #fff) 100%,transparent)}.nav-group-label:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:-1px}.chevron{flex-shrink:0;transition:transform .2s cubic-bezier(.4,0,.2,1);opacity:.85}.chevron.collapsed{transform:rotate(-90deg)}.sidebar-nav a{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 32px;color:color-mix(in srgb,var(--shell-text, #fff) 95%,transparent);font-size:.9375rem;font-weight:500;text-decoration:none;border-left:2px solid transparent;border-radius:0 8px 8px 0;margin-right:10px;transition:color .15s,background .15s,border-color .15s}.sidebar-nav a:hover{color:color-mix(in srgb,var(--shell-text, #fff) 100%,transparent);background:color-mix(in srgb,var(--shell-text, #fff) 6%,transparent)}.sidebar-nav a.active{color:var(--shell-text, #fff);background:#60a5fa21;border-left-color:#60a5fa;font-weight:600}.sidebar-nav a:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:-2px}.nav-icon{display:flex;align-items:center;flex-shrink:0}.nav-label{flex:1}.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ef4444;color:#fff;font-size:.625rem;font-weight:700;margin-left:auto}.sidebar-footer{padding:10px 14px;border-top:1px solid color-mix(in srgb,var(--shell-text, #fff) 6%,transparent)}.user-info{display:flex;align-items:center;gap:10px}.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#60a5fa38,#60a5fa14);border:1px solid rgba(96,165,250,.18);color:color-mix(in srgb,var(--shell-text, #fff) 88%,transparent);font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}.user-details{display:flex;flex-direction:column;min-width:0;flex:1}.user-name{font-size:.8125rem;font-weight:600;color:var(--shell-text, #fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-role{font-size:.6875rem;color:color-mix(in srgb,var(--shell-text, #fff) 80%,transparent);text-transform:uppercase;letter-spacing:.05em;font-weight:500}.btn-logout{background:none;border:none;cursor:pointer;color:color-mix(in srgb,var(--shell-text, #fff) 85%,transparent);padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s,background .15s}.btn-logout:hover{color:#f87171;background:#f871711a}.btn-logout:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:2px}.brand-full{display:flex;align-items:center;min-width:0;flex:1}.brand-mark{display:none}.shell.collapsed .brand-mark{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.125rem;color:var(--shell-text, #fff);background:color-mix(in srgb,var(--shell-text, #fff) 15%,transparent)}.rail-toggle{display:none;align-items:center;justify-content:center;width:32px;height:32px;margin-left:auto;flex-shrink:0;border:none;background:none;cursor:pointer;border-radius:8px;color:color-mix(in srgb,var(--shell-text, #fff) 85%,transparent);transition:background .15s,color .15s}.rail-toggle:hover{background:color-mix(in srgb,var(--shell-text, #fff) 12%,transparent);color:var(--shell-text, #fff)}.rail-toggle:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:2px}.rail-divider{display:none}@media(min-width:1025px){.rail-toggle{display:flex}.sidebar{transition:width .2s cubic-bezier(.4,0,.2,1)}.shell.collapsed .sidebar{width:68px}.shell.collapsed .sidebar-header{flex-direction:column;justify-content:center;gap:4px;padding:8px 0}.shell.collapsed .brand-full{flex:none;width:44px;height:44px;overflow:hidden;border-radius:10px;justify-content:center}.shell.collapsed .brand-text{display:none}.shell.collapsed .rail-toggle{margin-left:0}.shell.collapsed .nav-group-label{display:none}.shell.collapsed .rail-divider{display:block;height:1px;margin:8px 14px;background:color-mix(in srgb,var(--shell-text, #fff) 20%,transparent)}.shell.collapsed .nav-group:first-child .rail-divider{display:none}.shell.collapsed .sidebar-nav a{position:relative;justify-content:center;padding:10px 0;margin:0 8px 2px;border-left:none;border-radius:8px}.shell.collapsed .sidebar-nav a.active{box-shadow:inset 3px 0 #60a5fa}.shell.collapsed .nav-label{display:none}.shell.collapsed .nav-badge{position:absolute;top:2px;right:4px;min-width:16px;height:16px;padding:0 4px;font-size:.5625rem;margin:0}.shell.collapsed .sidebar-footer{padding:10px 8px}.shell.collapsed .user-info{flex-direction:column;gap:8px}.shell.collapsed .user-details{display:none}}.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.top-header{display:flex;align-items:center;gap:8px;padding:0 24px;background:#fff;box-shadow:0 1px 3px #00000012,0 1px #0000000a;min-height:64px;box-sizing:border-box;position:relative;z-index:50}.hamburger{display:none;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;cursor:pointer;color:#374151;border-radius:8px;flex-shrink:0;transition:background .15s,color .15s}.hamburger:hover{background:#f3f4f6}.hamburger:focus-visible{outline:2px solid rgba(59,130,246,.5);outline-offset:2px}.page-title{font-size:1.25rem;font-weight:700;color:#111827;margin:0;letter-spacing:-.02em}.page-title:focus{outline:none}.read-only-badge{display:inline-flex;align-items:center;flex-shrink:0;padding:2px 8px;border-radius:9999px;font-size:.6875rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;background:#fef9c3;color:#854d0e;border:1px solid #fde68a;white-space:nowrap}.header-start{display:flex;align-items:center;min-width:0;margin-left:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.header-start:empty{display:none}.header-start::-webkit-scrollbar{display:none}.header-end{display:flex;align-items:center;margin-left:auto}.content{--shell-content-padding: 24px;flex:1;overflow-y:auto;padding:var(--shell-content-padding);background:#f7f8f6;display:flex;flex-direction:column;box-sizing:border-box;min-height:0}.content>*{flex:1;min-height:0;display:flex;flex-direction:column}@media(max-width:1024px){.hamburger{display:flex}.sidebar{position:fixed;top:0;left:0;bottom:0;z-index:200;transform:translate(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s cubic-bezier(.4,0,.2,1);box-shadow:none}.shell.sidebar-open .sidebar{transform:translate(0);box-shadow:4px 0 32px #0000004d}.shell.sidebar-open .sidebar-backdrop{display:block}.main-area{width:100%}.top-header{padding:0 16px;gap:4px}.content{--shell-content-padding: 16px}}@media(max-width:480px){.page-title{font-size:1.0625rem}.content{--shell-content-padding: 12px}}@media(pointer:coarse),(max-width:480px){.sidebar-nav a,.nav-group-label{min-height:44px}.btn-logout,.hamburger,.rail-toggle{min-width:44px;min-height:44px}}@media(prefers-reduced-motion:reduce){.chevron,.sidebar-nav a,.sidebar{transition:none!important}}\n"]
33083
+ styles: [":host{display:contents}.shell{display:flex;height:100vh;height:100dvh;overflow:hidden;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.sidebar-backdrop{display:none;position:fixed;inset:0;background:#00000080;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:199}.sidebar{width:256px;background:var(--shell-bg, linear-gradient(175deg, #0f172a 0%, #111827 100%));display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}.sidebar-header{display:flex;align-items:center;padding:0 20px;min-height:64px;border-bottom:1px solid color-mix(in srgb,var(--shell-text, #fff) 6%,transparent);box-sizing:border-box}.brand-default{display:flex;align-items:center;gap:10px}.brand-text{font-size:1.125rem;font-weight:700;color:var(--shell-text, #fff);letter-spacing:-.01em}.sidebar-nav{padding:6px 0 8px;flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--shell-text, #fff) 8%,transparent) transparent}.sidebar-nav::-webkit-scrollbar{width:3px}.sidebar-nav::-webkit-scrollbar-track{background:transparent}.sidebar-nav::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--shell-text, #fff) 8%,transparent);border-radius:2px}.nav-group{margin-bottom:6px}.nav-group-links[hidden]{display:none}.nav-group-label{display:flex;align-items:center;gap:6px;width:100%;padding:8px 16px;font-size:.6875rem;font-weight:700;color:color-mix(in srgb,var(--shell-text, #fff) 80%,transparent);text-transform:uppercase;letter-spacing:.12em;background:none;border:none;cursor:pointer;transition:color .15s;text-align:left;border-radius:6px;background:color-mix(in srgb,var(--shell-text, #fff) 10%,transparent);margin:6px 4px 4px;width:calc(100% - 8px);box-sizing:border-box}.nav-group-label:hover{color:color-mix(in srgb,var(--shell-text, #fff) 100%,transparent)}.nav-group-label:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:-1px}.chevron{flex-shrink:0;transition:transform .2s cubic-bezier(.4,0,.2,1);opacity:.85}.chevron.collapsed{transform:rotate(-90deg)}.sidebar-nav a{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 32px;color:color-mix(in srgb,var(--shell-text, #fff) 95%,transparent);font-size:.9375rem;font-weight:500;text-decoration:none;border-left:2px solid transparent;border-radius:0 8px 8px 0;margin-right:10px;transition:color .15s,background .15s,border-color .15s}.sidebar-nav a:hover{color:color-mix(in srgb,var(--shell-text, #fff) 100%,transparent);background:color-mix(in srgb,var(--shell-text, #fff) 6%,transparent)}.sidebar-nav a.active{color:var(--shell-text, #fff);background:#60a5fa21;border-left-color:#60a5fa;font-weight:600}.sidebar-nav a:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:-2px}.nav-icon{display:flex;align-items:center;flex-shrink:0}.nav-label{flex:1}.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ef4444;color:#fff;font-size:.625rem;font-weight:700;margin-left:auto}.sidebar-footer{padding:10px 14px;border-top:1px solid color-mix(in srgb,var(--shell-text, #fff) 6%,transparent)}.user-info{display:flex;align-items:center;gap:10px}.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#60a5fa38,#60a5fa14);border:1px solid rgba(96,165,250,.18);color:color-mix(in srgb,var(--shell-text, #fff) 88%,transparent);font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}.user-details{display:flex;flex-direction:column;min-width:0;flex:1}.user-name{font-size:.8125rem;font-weight:600;color:var(--shell-text, #fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-role{font-size:.6875rem;color:color-mix(in srgb,var(--shell-text, #fff) 80%,transparent);text-transform:uppercase;letter-spacing:.05em;font-weight:500}.btn-logout{background:none;border:none;cursor:pointer;color:color-mix(in srgb,var(--shell-text, #fff) 85%,transparent);padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s,background .15s}.btn-logout:hover{color:#f87171;background:#f871711a}.btn-logout:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:2px}.brand-full{display:flex;align-items:center;min-width:0;flex:1}.brand-mark{display:none}.shell.collapsed .brand-mark{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.125rem;color:var(--shell-text, #fff);background:color-mix(in srgb,var(--shell-text, #fff) 15%,transparent)}.rail-toggle{display:none;align-items:center;justify-content:center;width:32px;height:32px;margin-left:auto;flex-shrink:0;border:none;background:none;cursor:pointer;border-radius:8px;color:color-mix(in srgb,var(--shell-text, #fff) 85%,transparent);transition:background .15s,color .15s}.rail-toggle:hover{background:color-mix(in srgb,var(--shell-text, #fff) 12%,transparent);color:var(--shell-text, #fff)}.rail-toggle:focus-visible{outline:2px solid rgba(96,165,250,.5);outline-offset:2px}.rail-divider{display:none}@media(min-width:1025px){.rail-toggle{display:flex}.sidebar{transition:width .2s cubic-bezier(.4,0,.2,1)}.shell.collapsed .sidebar{width:68px}.shell.collapsed .sidebar-header{flex-direction:column;justify-content:center;gap:4px;padding:8px 0}.shell.collapsed .brand-full{flex:none;width:44px;height:44px;overflow:hidden;border-radius:10px;justify-content:center}.shell.collapsed .brand-text{display:none}.shell.collapsed .rail-toggle{margin-left:0}.shell.collapsed .nav-group-label{display:none}.shell.collapsed .rail-divider{display:block;height:1px;margin:8px 14px;background:color-mix(in srgb,var(--shell-text, #fff) 20%,transparent)}.shell.collapsed .nav-group:first-child .rail-divider{display:none}.shell.collapsed .sidebar-nav a{position:relative;justify-content:center;padding:10px 0;margin:0 8px 2px;border-left:none;border-radius:8px}.shell.collapsed .sidebar-nav a.active{box-shadow:inset 3px 0 #60a5fa}.shell.collapsed .nav-label{display:none}.shell.collapsed .nav-badge{position:absolute;top:2px;right:4px;min-width:16px;height:16px;padding:0 4px;font-size:.5625rem;margin:0}.shell.collapsed .sidebar-footer{padding:10px 8px}.shell.collapsed .user-info{flex-direction:column;gap:8px}.shell.collapsed .user-details{display:none}}.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.top-header{display:flex;align-items:center;gap:8px;padding:0 24px;background:#fff;box-shadow:0 1px 3px #00000012,0 1px #0000000a;min-height:64px;box-sizing:border-box;position:relative;z-index:50}.hamburger{display:none;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;cursor:pointer;color:#374151;border-radius:8px;flex-shrink:0;transition:background .15s,color .15s}.hamburger:hover{background:#f3f4f6}.hamburger:focus-visible{outline:2px solid rgba(59,130,246,.5);outline-offset:2px}.page-title{font-size:1.25rem;font-weight:700;color:#111827;margin:0;letter-spacing:-.02em}.page-title:focus{outline:none}.read-only-badge{display:inline-flex;align-items:center;flex-shrink:0;padding:2px 8px;border-radius:9999px;font-size:.6875rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;background:#fef9c3;color:#854d0e;border:1px solid #fde68a;white-space:nowrap}.header-start{display:flex;align-items:center;min-width:0;margin-left:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.header-start:empty{display:none}.header-start::-webkit-scrollbar{display:none}.header-end{display:flex;align-items:center;margin-left:auto}.content:focus{outline:none}.content{--shell-content-padding: 24px;flex:1;overflow-y:auto;padding:var(--shell-content-padding);background:#f7f8f6;display:flex;flex-direction:column;box-sizing:border-box;min-height:0}.content>*{flex:1;min-height:0;display:flex;flex-direction:column}.skip-link{position:absolute;top:-48px;left:8px;z-index:300;padding:8px 14px;border-radius:6px;background:#fff;color:#1d4ed8;font-size:.875rem;font-weight:600;text-decoration:none;box-shadow:0 2px 10px #00000040}.skip-link:focus{top:8px;outline:2px solid #1d4ed8;outline-offset:2px}.nav-group-label--static{cursor:default}@media(max-width:1024px){.hamburger{display:flex}.sidebar{position:fixed;top:0;left:0;bottom:0;z-index:200;transform:translate(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s cubic-bezier(.4,0,.2,1),visibility 0s linear .26s;visibility:hidden;box-shadow:none}.shell.sidebar-open .sidebar{transform:translate(0);box-shadow:4px 0 32px #0000004d;visibility:visible;transition-delay:0s}.shell.sidebar-open .sidebar-backdrop{display:block}.main-area{width:100%}.top-header{padding:0 16px;gap:4px}.content{--shell-content-padding: 16px}}@media(max-width:480px){.page-title{font-size:1.0625rem}.content{--shell-content-padding: 12px}}@media(pointer:coarse),(max-width:480px){.sidebar-nav a,.nav-group-label{min-height:44px}.btn-logout,.hamburger,.rail-toggle{min-width:44px;min-height:44px}}@media(prefers-reduced-motion:reduce){.chevron,.sidebar-nav a,.sidebar{transition:none!important}}\n"]
32949
33084
  }]
32950
33085
  }],
32951
33086
  propDecorators: {