@lifecorner/angular-ui-kit 3.20.0 → 3.21.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/lifecorner-angular-ui-kit-bar-chart.mjs +67 -8
- package/fesm2022/lifecorner-angular-ui-kit-bar-chart.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-card.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-card.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-dependency-viewer.mjs +11 -11
- package/fesm2022/lifecorner-angular-ui-kit-dependency-viewer.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-diff-viewer.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-diff-viewer.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-file-upload.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-file-upload.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-kanban-board.mjs +6 -6
- package/fesm2022/lifecorner-angular-ui-kit-kanban-board.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-log-viewer.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-log-viewer.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-markdown.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-markdown.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-notification-center.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-notification-center.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-pipeline.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-pipeline.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-progress-bar.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-progress-bar.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-rating.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-rating.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-status-dot.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-status-dot.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/theme-contrast.spec.ts +239 -0
- package/types/lifecorner-angular-ui-kit-bar-chart.d.ts +105 -10
|
@@ -265,7 +265,7 @@ var DiffViewerComponent = class DiffViewerComponent {
|
|
|
265
265
|
},
|
|
266
266
|
ngImport: i0,
|
|
267
267
|
template: "<div class=\"lc-diff\">\n <!-- Stats bar -->\n <div class=\"lc-diff__stats\">\n <span class=\"lc-diff__stat lc-diff__stat--add\">+{{ stats().additions }}</span>\n <span class=\"lc-diff__stat lc-diff__stat--del\">−{{ stats().deletions }}</span>\n </div>\n\n @if (tooLarge()) {\n <!-- Size cap hit: no diff is computed -->\n <p class=\"lc-diff__too-large\" role=\"status\">\n Diff too large to display ({{ oldLabel() }}: {{ oldLineCount() }} lines,\n {{ newLabel() }}: {{ newLineCount() }} lines; limit {{ maxLines() }} lines per side).\n </p>\n } @else if (mode() === 'inline') {\n <!-- Inline mode -->\n <div class=\"lc-diff__inline\">\n <div class=\"lc-diff__headers\">\n <span class=\"lc-diff__file-label\">{{ oldLabel() }} → {{ newLabel() }}</span>\n </div>\n <div class=\"lc-diff__body\">\n @for (line of filteredLines(); track $index) {\n <div\n class=\"lc-diff__line\"\n [class.lc-diff__line--added]=\"line.type === 'added'\"\n [class.lc-diff__line--removed]=\"line.type === 'removed'\"\n >\n @if (showLineNumbers()) {\n <span class=\"lc-diff__num lc-diff__num--left\">{{ line.leftNum ?? '' }}</span>\n <span class=\"lc-diff__num lc-diff__num--right\">{{ line.rightNum ?? '' }}</span>\n }\n <span class=\"lc-diff__prefix\">{{ line.type === 'added' ? '+' : line.type === 'removed' ? '−' : ' ' }}</span>\n <span class=\"lc-diff__content\">{{ line.content }}</span>\n </div>\n }\n </div>\n </div>\n } @else {\n <!-- Side-by-side mode -->\n <div class=\"lc-diff__side-by-side\">\n <div class=\"lc-diff__pane lc-diff__pane--left\">\n <div class=\"lc-diff__pane-header\">{{ oldLabel() }}</div>\n @for (line of sideBySide().left; track $index) {\n <div\n class=\"lc-diff__line\"\n [class.lc-diff__line--removed]=\"line.type === 'removed'\"\n [class.lc-diff__line--empty]=\"line.type === 'empty'\"\n >\n @if (showLineNumbers()) {\n <span class=\"lc-diff__num\">{{ line.num ?? '' }}</span>\n }\n <span class=\"lc-diff__content\">{{ line.content }}</span>\n </div>\n }\n </div>\n <div class=\"lc-diff__pane lc-diff__pane--right\">\n <div class=\"lc-diff__pane-header\">{{ newLabel() }}</div>\n @for (line of sideBySide().right; track $index) {\n <div\n class=\"lc-diff__line\"\n [class.lc-diff__line--added]=\"line.type === 'added'\"\n [class.lc-diff__line--empty]=\"line.type === 'empty'\"\n >\n @if (showLineNumbers()) {\n <span class=\"lc-diff__num\">{{ line.num ?? '' }}</span>\n }\n <span class=\"lc-diff__content\">{{ line.content }}</span>\n </div>\n }\n </div>\n </div>\n }\n</div>\n",
|
|
268
|
-
styles: [".lc-diff{border:1px solid var(--color-border);border-radius:8px;overflow:hidden;font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:.75rem;line-height:1.5}.lc-diff__stats{display:flex;gap:8px;padding:6px 12px;background:var(--color-surface-2);border-bottom:1px solid var(--color-border)}.lc-diff__stat{font-size:.6875rem;font-weight:600}.lc-diff__stat--add{color:var(--color-success-
|
|
268
|
+
styles: [".lc-diff{border:1px solid var(--color-border);border-radius:8px;overflow:hidden;font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:.75rem;line-height:1.5}.lc-diff__stats{display:flex;gap:8px;padding:6px 12px;background:var(--color-surface-2);border-bottom:1px solid var(--color-border)}.lc-diff__stat{font-size:.6875rem;font-weight:600}.lc-diff__stat--add{color:var(--color-on-success-subtle)}.lc-diff__stat--del{color:var(--color-on-error-subtle)}.lc-diff__headers,.lc-diff__pane-header{padding:4px 12px;background:var(--color-surface-2);font-size:.6875rem;font-weight:600;color:var(--color-text-secondary);border-bottom:1px solid var(--color-border)}.lc-diff__body{overflow-x:auto}.lc-diff__side-by-side{display:grid;grid-template-columns:1fr 1fr}.lc-diff__pane{overflow-x:auto;min-width:0}.lc-diff__pane--left{border-right:1px solid var(--color-border)}.lc-diff__line{display:flex;min-height:1.5em;padding:0 8px}.lc-diff__line--added{background:var(--color-success-50, #f0fdf4)}.lc-diff__line--removed{background:var(--color-error-50, #fef2f2)}.lc-diff__line--empty{background:var(--color-surface-2)}.lc-diff__num{flex-shrink:0;width:36px;text-align:right;padding-right:8px;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.lc-diff__num--left,.lc-diff__num--right{width:36px}.lc-diff__prefix{flex-shrink:0;width:16px;text-align:center;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none;font-weight:600}.lc-diff__line--added .lc-diff__prefix{color:var(--color-on-success-subtle)}.lc-diff__line--removed .lc-diff__prefix{color:var(--color-on-error-subtle)}.lc-diff__content{flex:1;white-space:pre;color:var(--color-text-primary)}.lc-diff__file-label{color:var(--color-text-secondary)}.lc-diff__too-large{margin:0;padding:12px;font-family:var(--font-family-sans, sans-serif);font-size:.8125rem;color:var(--color-text-secondary);background:var(--color-surface-2)}\n"],
|
|
269
269
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
270
270
|
});
|
|
271
271
|
};
|
|
@@ -281,7 +281,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
281
281
|
standalone: true,
|
|
282
282
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
283
283
|
template: "<div class=\"lc-diff\">\n <!-- Stats bar -->\n <div class=\"lc-diff__stats\">\n <span class=\"lc-diff__stat lc-diff__stat--add\">+{{ stats().additions }}</span>\n <span class=\"lc-diff__stat lc-diff__stat--del\">−{{ stats().deletions }}</span>\n </div>\n\n @if (tooLarge()) {\n <!-- Size cap hit: no diff is computed -->\n <p class=\"lc-diff__too-large\" role=\"status\">\n Diff too large to display ({{ oldLabel() }}: {{ oldLineCount() }} lines,\n {{ newLabel() }}: {{ newLineCount() }} lines; limit {{ maxLines() }} lines per side).\n </p>\n } @else if (mode() === 'inline') {\n <!-- Inline mode -->\n <div class=\"lc-diff__inline\">\n <div class=\"lc-diff__headers\">\n <span class=\"lc-diff__file-label\">{{ oldLabel() }} → {{ newLabel() }}</span>\n </div>\n <div class=\"lc-diff__body\">\n @for (line of filteredLines(); track $index) {\n <div\n class=\"lc-diff__line\"\n [class.lc-diff__line--added]=\"line.type === 'added'\"\n [class.lc-diff__line--removed]=\"line.type === 'removed'\"\n >\n @if (showLineNumbers()) {\n <span class=\"lc-diff__num lc-diff__num--left\">{{ line.leftNum ?? '' }}</span>\n <span class=\"lc-diff__num lc-diff__num--right\">{{ line.rightNum ?? '' }}</span>\n }\n <span class=\"lc-diff__prefix\">{{ line.type === 'added' ? '+' : line.type === 'removed' ? '−' : ' ' }}</span>\n <span class=\"lc-diff__content\">{{ line.content }}</span>\n </div>\n }\n </div>\n </div>\n } @else {\n <!-- Side-by-side mode -->\n <div class=\"lc-diff__side-by-side\">\n <div class=\"lc-diff__pane lc-diff__pane--left\">\n <div class=\"lc-diff__pane-header\">{{ oldLabel() }}</div>\n @for (line of sideBySide().left; track $index) {\n <div\n class=\"lc-diff__line\"\n [class.lc-diff__line--removed]=\"line.type === 'removed'\"\n [class.lc-diff__line--empty]=\"line.type === 'empty'\"\n >\n @if (showLineNumbers()) {\n <span class=\"lc-diff__num\">{{ line.num ?? '' }}</span>\n }\n <span class=\"lc-diff__content\">{{ line.content }}</span>\n </div>\n }\n </div>\n <div class=\"lc-diff__pane lc-diff__pane--right\">\n <div class=\"lc-diff__pane-header\">{{ newLabel() }}</div>\n @for (line of sideBySide().right; track $index) {\n <div\n class=\"lc-diff__line\"\n [class.lc-diff__line--added]=\"line.type === 'added'\"\n [class.lc-diff__line--empty]=\"line.type === 'empty'\"\n >\n @if (showLineNumbers()) {\n <span class=\"lc-diff__num\">{{ line.num ?? '' }}</span>\n }\n <span class=\"lc-diff__content\">{{ line.content }}</span>\n </div>\n }\n </div>\n </div>\n }\n</div>\n",
|
|
284
|
-
styles: [".lc-diff{border:1px solid var(--color-border);border-radius:8px;overflow:hidden;font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:.75rem;line-height:1.5}.lc-diff__stats{display:flex;gap:8px;padding:6px 12px;background:var(--color-surface-2);border-bottom:1px solid var(--color-border)}.lc-diff__stat{font-size:.6875rem;font-weight:600}.lc-diff__stat--add{color:var(--color-success-
|
|
284
|
+
styles: [".lc-diff{border:1px solid var(--color-border);border-radius:8px;overflow:hidden;font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:.75rem;line-height:1.5}.lc-diff__stats{display:flex;gap:8px;padding:6px 12px;background:var(--color-surface-2);border-bottom:1px solid var(--color-border)}.lc-diff__stat{font-size:.6875rem;font-weight:600}.lc-diff__stat--add{color:var(--color-on-success-subtle)}.lc-diff__stat--del{color:var(--color-on-error-subtle)}.lc-diff__headers,.lc-diff__pane-header{padding:4px 12px;background:var(--color-surface-2);font-size:.6875rem;font-weight:600;color:var(--color-text-secondary);border-bottom:1px solid var(--color-border)}.lc-diff__body{overflow-x:auto}.lc-diff__side-by-side{display:grid;grid-template-columns:1fr 1fr}.lc-diff__pane{overflow-x:auto;min-width:0}.lc-diff__pane--left{border-right:1px solid var(--color-border)}.lc-diff__line{display:flex;min-height:1.5em;padding:0 8px}.lc-diff__line--added{background:var(--color-success-50, #f0fdf4)}.lc-diff__line--removed{background:var(--color-error-50, #fef2f2)}.lc-diff__line--empty{background:var(--color-surface-2)}.lc-diff__num{flex-shrink:0;width:36px;text-align:right;padding-right:8px;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.lc-diff__num--left,.lc-diff__num--right{width:36px}.lc-diff__prefix{flex-shrink:0;width:16px;text-align:center;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none;font-weight:600}.lc-diff__line--added .lc-diff__prefix{color:var(--color-on-success-subtle)}.lc-diff__line--removed .lc-diff__prefix{color:var(--color-on-error-subtle)}.lc-diff__content{flex:1;white-space:pre;color:var(--color-text-primary)}.lc-diff__file-label{color:var(--color-text-secondary)}.lc-diff__too-large{margin:0;padding:12px;font-family:var(--font-family-sans, sans-serif);font-size:.8125rem;color:var(--color-text-secondary);background:var(--color-surface-2)}\n"]
|
|
285
285
|
}]
|
|
286
286
|
}],
|
|
287
287
|
propDecorators: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-diff-viewer.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/diff-viewer/diff-viewer.component.ts","../../../../libs/angular-ui-kit/src/lib/diff-viewer/diff-viewer.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input,\n computed,\n} from '@angular/core';\n\nexport type DiffViewMode = 'side-by-side' | 'inline';\n\ninterface DiffLine {\n type: 'unchanged' | 'added' | 'removed';\n leftNum: number | null;\n rightNum: number | null;\n content: string;\n}\n\n/** Edit-script op produced by the line diff (before numbering). */\ntype DiffOp = readonly [type: DiffLine['type'], lines: readonly string[]];\n\n/**\n * Line diff: common prefix/suffix are peeled off cheaply, the remainder goes\n * through Myers' O((N+M)·D) \"bisect\" (find where the forward and reverse\n * D-paths meet, split there, recurse) — linear space, no N×M matrix. Two\n * 5 000-line inputs used to allocate ~25M numbers and freeze the tab.\n */\nfunction diffLines(a: readonly string[], b: readonly string[]): DiffOp[] {\n if (a.length === 0 && b.length === 0) return [];\n if (a.length === 0) return [['added', b]];\n if (b.length === 0) return [['removed', a]];\n\n // Common prefix / suffix.\n let start = 0;\n const maxPrefix = Math.min(a.length, b.length);\n while (start < maxPrefix && a[start] === b[start]) start++;\n let end = 0;\n const maxSuffix = maxPrefix - start;\n while (end < maxSuffix && a[a.length - 1 - end] === b[b.length - 1 - end]) end++;\n\n const ops: DiffOp[] = [];\n if (start > 0) ops.push(['unchanged', a.slice(0, start)]);\n const midA = a.slice(start, a.length - end);\n const midB = b.slice(start, b.length - end);\n if (midA.length && midB.length) {\n // Disjoint inputs are Myers' worst case (D = N + M); answer them in linear time.\n if (sharesLine(midA, midB)) ops.push(...bisect(midA, midB));\n else ops.push(['removed', midA], ['added', midB]);\n } else if (midA.length) ops.push(['removed', midA]);\n else if (midB.length) ops.push(['added', midB]);\n if (end > 0) ops.push(['unchanged', a.slice(a.length - end)]);\n return ops;\n}\n\nfunction sharesLine(a: readonly string[], b: readonly string[]): boolean {\n const seen = new Set(a);\n return b.some(line => seen.has(line));\n}\n\n/** Myers middle-snake bisection (as in diff-match-patch), on line arrays. */\nfunction bisect(a: readonly string[], b: readonly string[]): DiffOp[] {\n const n = a.length;\n const m = b.length;\n const maxD = Math.ceil((n + m) / 2);\n const offset = maxD;\n const size = 2 * maxD;\n const v1 = new Int32Array(size).fill(-1);\n const v2 = new Int32Array(size).fill(-1);\n v1[offset + 1] = 0;\n v2[offset + 1] = 0;\n const delta = n - m;\n // With an odd delta the paths can only overlap on the forward pass.\n const front = delta % 2 !== 0;\n let k1start = 0, k1end = 0, k2start = 0, k2end = 0;\n\n for (let d = 0; d < maxD; d++) {\n // Forward path.\n for (let k1 = -d + k1start; k1 <= d - k1end; k1 += 2) {\n const k1o = offset + k1;\n let x1 = k1 === -d || (k1 !== d && v1[k1o - 1] < v1[k1o + 1]) ? v1[k1o + 1] : v1[k1o - 1] + 1;\n let y1 = x1 - k1;\n while (x1 < n && y1 < m && a[x1] === b[y1]) { x1++; y1++; }\n v1[k1o] = x1;\n if (x1 > n) k1end += 2;\n else if (y1 > m) k1start += 2;\n else if (front) {\n const k2o = offset + delta - k1;\n if (k2o >= 0 && k2o < size && v2[k2o] !== -1 && x1 >= n - v2[k2o]) {\n return splitAt(a, b, x1, y1);\n }\n }\n }\n // Reverse path.\n for (let k2 = -d + k2start; k2 <= d - k2end; k2 += 2) {\n const k2o = offset + k2;\n let x2 = k2 === -d || (k2 !== d && v2[k2o - 1] < v2[k2o + 1]) ? v2[k2o + 1] : v2[k2o - 1] + 1;\n let y2 = x2 - k2;\n while (x2 < n && y2 < m && a[n - x2 - 1] === b[m - y2 - 1]) { x2++; y2++; }\n v2[k2o] = x2;\n if (x2 > n) k2end += 2;\n else if (y2 > m) k2start += 2;\n else if (!front) {\n const k1o = offset + delta - k2;\n if (k1o >= 0 && k1o < size && v1[k1o] !== -1) {\n const x1 = v1[k1o];\n if (x1 >= n - x2) return splitAt(a, b, x1, offset + x1 - k1o);\n }\n }\n }\n }\n // Nothing in common at all.\n return [['removed', a], ['added', b]];\n}\n\nfunction splitAt(a: readonly string[], b: readonly string[], x: number, y: number): DiffOp[] {\n return [...diffLines(a.slice(0, x), b.slice(0, y)), ...diffLines(a.slice(x), b.slice(y))];\n}\n\n@Component({\n selector: 'lc-diff-viewer',\n standalone: true,\n templateUrl: './diff-viewer.component.html',\n styleUrls: ['./diff-viewer.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DiffViewerComponent {\n readonly oldText = input.required<string>();\n readonly newText = input.required<string>();\n readonly oldLabel = input('Original');\n readonly newLabel = input('Modified');\n readonly mode = input<DiffViewMode>('side-by-side');\n readonly showLineNumbers = input(true);\n readonly contextLines = input(Infinity);\n\n /**\n * Upper bound (per side, in lines) above which no diff is computed and a\n * \"too large\" notice is rendered instead — a UI diff of that size is neither\n * readable nor cheap. Raise it deliberately when you know the inputs.\n */\n readonly maxLines = input(20_000);\n\n private readonly oldLines = computed(() => this.oldText().split('\\n'));\n private readonly newLines = computed(() => this.newText().split('\\n'));\n protected readonly oldLineCount = computed(() => this.oldLines().length);\n protected readonly newLineCount = computed(() => this.newLines().length);\n\n /** True when either side exceeds `maxLines`; the diff is then skipped. */\n protected readonly tooLarge = computed(\n () => Math.max(this.oldLines().length, this.newLines().length) > this.maxLines(),\n );\n\n protected readonly diffLines = computed<DiffLine[]>(() => {\n if (this.tooLarge()) return [];\n return this.numberOps(diffLines(this.oldLines(), this.newLines()));\n });\n\n protected readonly filteredLines = computed(() => {\n const ctx = this.contextLines();\n const lines = this.diffLines();\n if (ctx === Infinity) return lines;\n\n const changed = new Set<number>();\n lines.forEach((l, i) => { if (l.type !== 'unchanged') changed.add(i); });\n\n const visible = new Set<number>();\n for (const idx of changed) {\n for (let j = Math.max(0, idx - ctx); j <= Math.min(lines.length - 1, idx + ctx); j++) {\n visible.add(j);\n }\n }\n\n return lines.filter((_, i) => visible.has(i));\n });\n\n protected readonly sideBySide = computed(() => {\n if (this.mode() !== 'side-by-side') return { left: [], right: [] };\n\n const lines = this.filteredLines();\n const left: { num: number | null; content: string; type: string }[] = [];\n const right: { num: number | null; content: string; type: string }[] = [];\n\n for (const line of lines) {\n if (line.type === 'unchanged') {\n left.push({ num: line.leftNum, content: line.content, type: 'unchanged' });\n right.push({ num: line.rightNum, content: line.content, type: 'unchanged' });\n } else if (line.type === 'removed') {\n left.push({ num: line.leftNum, content: line.content, type: 'removed' });\n right.push({ num: null, content: '', type: 'empty' });\n } else {\n left.push({ num: null, content: '', type: 'empty' });\n right.push({ num: line.rightNum, content: line.content, type: 'added' });\n }\n }\n\n return { left, right };\n });\n\n protected readonly stats = computed(() => {\n let additions = 0;\n let deletions = 0;\n for (const l of this.diffLines()) {\n if (l.type === 'added') additions++;\n else if (l.type === 'removed') deletions++;\n }\n return { additions, deletions };\n });\n\n /** Expand the edit script into numbered lines (removed before added). */\n private numberOps(ops: readonly DiffOp[]): DiffLine[] {\n const result: DiffLine[] = [];\n let i = 0, j = 0;\n for (const [type, lines] of ops) {\n for (const content of lines) {\n if (type === 'unchanged') result.push({ type, leftNum: ++i, rightNum: ++j, content });\n else if (type === 'removed') result.push({ type, leftNum: ++i, rightNum: null, content });\n else result.push({ type, leftNum: null, rightNum: ++j, content });\n }\n }\n return result;\n }\n}\n","<div class=\"lc-diff\">\n <!-- Stats bar -->\n <div class=\"lc-diff__stats\">\n <span class=\"lc-diff__stat lc-diff__stat--add\">+{{ stats().additions }}</span>\n <span class=\"lc-diff__stat lc-diff__stat--del\">−{{ stats().deletions }}</span>\n </div>\n\n @if (tooLarge()) {\n <!-- Size cap hit: no diff is computed -->\n <p class=\"lc-diff__too-large\" role=\"status\">\n Diff too large to display ({{ oldLabel() }}: {{ oldLineCount() }} lines,\n {{ newLabel() }}: {{ newLineCount() }} lines; limit {{ maxLines() }} lines per side).\n </p>\n } @else if (mode() === 'inline') {\n <!-- Inline mode -->\n <div class=\"lc-diff__inline\">\n <div class=\"lc-diff__headers\">\n <span class=\"lc-diff__file-label\">{{ oldLabel() }} → {{ newLabel() }}</span>\n </div>\n <div class=\"lc-diff__body\">\n @for (line of filteredLines(); track $index) {\n <div\n class=\"lc-diff__line\"\n [class.lc-diff__line--added]=\"line.type === 'added'\"\n [class.lc-diff__line--removed]=\"line.type === 'removed'\"\n >\n @if (showLineNumbers()) {\n <span class=\"lc-diff__num lc-diff__num--left\">{{ line.leftNum ?? '' }}</span>\n <span class=\"lc-diff__num lc-diff__num--right\">{{ line.rightNum ?? '' }}</span>\n }\n <span class=\"lc-diff__prefix\">{{ line.type === 'added' ? '+' : line.type === 'removed' ? '−' : ' ' }}</span>\n <span class=\"lc-diff__content\">{{ line.content }}</span>\n </div>\n }\n </div>\n </div>\n } @else {\n <!-- Side-by-side mode -->\n <div class=\"lc-diff__side-by-side\">\n <div class=\"lc-diff__pane lc-diff__pane--left\">\n <div class=\"lc-diff__pane-header\">{{ oldLabel() }}</div>\n @for (line of sideBySide().left; track $index) {\n <div\n class=\"lc-diff__line\"\n [class.lc-diff__line--removed]=\"line.type === 'removed'\"\n [class.lc-diff__line--empty]=\"line.type === 'empty'\"\n >\n @if (showLineNumbers()) {\n <span class=\"lc-diff__num\">{{ line.num ?? '' }}</span>\n }\n <span class=\"lc-diff__content\">{{ line.content }}</span>\n </div>\n }\n </div>\n <div class=\"lc-diff__pane lc-diff__pane--right\">\n <div class=\"lc-diff__pane-header\">{{ newLabel() }}</div>\n @for (line of sideBySide().right; track $index) {\n <div\n class=\"lc-diff__line\"\n [class.lc-diff__line--added]=\"line.type === 'added'\"\n [class.lc-diff__line--empty]=\"line.type === 'empty'\"\n >\n @if (showLineNumbers()) {\n <span class=\"lc-diff__num\">{{ line.num ?? '' }}</span>\n }\n <span class=\"lc-diff__content\">{{ line.content }}</span>\n </div>\n }\n </div>\n </div>\n }\n</div>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-diff-viewer.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/diff-viewer/diff-viewer.component.ts","../../../../libs/angular-ui-kit/src/lib/diff-viewer/diff-viewer.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input,\n computed,\n} from '@angular/core';\n\nexport type DiffViewMode = 'side-by-side' | 'inline';\n\ninterface DiffLine {\n type: 'unchanged' | 'added' | 'removed';\n leftNum: number | null;\n rightNum: number | null;\n content: string;\n}\n\n/** Edit-script op produced by the line diff (before numbering). */\ntype DiffOp = readonly [type: DiffLine['type'], lines: readonly string[]];\n\n/**\n * Line diff: common prefix/suffix are peeled off cheaply, the remainder goes\n * through Myers' O((N+M)·D) \"bisect\" (find where the forward and reverse\n * D-paths meet, split there, recurse) — linear space, no N×M matrix. Two\n * 5 000-line inputs used to allocate ~25M numbers and freeze the tab.\n */\nfunction diffLines(a: readonly string[], b: readonly string[]): DiffOp[] {\n if (a.length === 0 && b.length === 0) return [];\n if (a.length === 0) return [['added', b]];\n if (b.length === 0) return [['removed', a]];\n\n // Common prefix / suffix.\n let start = 0;\n const maxPrefix = Math.min(a.length, b.length);\n while (start < maxPrefix && a[start] === b[start]) start++;\n let end = 0;\n const maxSuffix = maxPrefix - start;\n while (end < maxSuffix && a[a.length - 1 - end] === b[b.length - 1 - end]) end++;\n\n const ops: DiffOp[] = [];\n if (start > 0) ops.push(['unchanged', a.slice(0, start)]);\n const midA = a.slice(start, a.length - end);\n const midB = b.slice(start, b.length - end);\n if (midA.length && midB.length) {\n // Disjoint inputs are Myers' worst case (D = N + M); answer them in linear time.\n if (sharesLine(midA, midB)) ops.push(...bisect(midA, midB));\n else ops.push(['removed', midA], ['added', midB]);\n } else if (midA.length) ops.push(['removed', midA]);\n else if (midB.length) ops.push(['added', midB]);\n if (end > 0) ops.push(['unchanged', a.slice(a.length - end)]);\n return ops;\n}\n\nfunction sharesLine(a: readonly string[], b: readonly string[]): boolean {\n const seen = new Set(a);\n return b.some(line => seen.has(line));\n}\n\n/** Myers middle-snake bisection (as in diff-match-patch), on line arrays. */\nfunction bisect(a: readonly string[], b: readonly string[]): DiffOp[] {\n const n = a.length;\n const m = b.length;\n const maxD = Math.ceil((n + m) / 2);\n const offset = maxD;\n const size = 2 * maxD;\n const v1 = new Int32Array(size).fill(-1);\n const v2 = new Int32Array(size).fill(-1);\n v1[offset + 1] = 0;\n v2[offset + 1] = 0;\n const delta = n - m;\n // With an odd delta the paths can only overlap on the forward pass.\n const front = delta % 2 !== 0;\n let k1start = 0, k1end = 0, k2start = 0, k2end = 0;\n\n for (let d = 0; d < maxD; d++) {\n // Forward path.\n for (let k1 = -d + k1start; k1 <= d - k1end; k1 += 2) {\n const k1o = offset + k1;\n let x1 = k1 === -d || (k1 !== d && v1[k1o - 1] < v1[k1o + 1]) ? v1[k1o + 1] : v1[k1o - 1] + 1;\n let y1 = x1 - k1;\n while (x1 < n && y1 < m && a[x1] === b[y1]) { x1++; y1++; }\n v1[k1o] = x1;\n if (x1 > n) k1end += 2;\n else if (y1 > m) k1start += 2;\n else if (front) {\n const k2o = offset + delta - k1;\n if (k2o >= 0 && k2o < size && v2[k2o] !== -1 && x1 >= n - v2[k2o]) {\n return splitAt(a, b, x1, y1);\n }\n }\n }\n // Reverse path.\n for (let k2 = -d + k2start; k2 <= d - k2end; k2 += 2) {\n const k2o = offset + k2;\n let x2 = k2 === -d || (k2 !== d && v2[k2o - 1] < v2[k2o + 1]) ? v2[k2o + 1] : v2[k2o - 1] + 1;\n let y2 = x2 - k2;\n while (x2 < n && y2 < m && a[n - x2 - 1] === b[m - y2 - 1]) { x2++; y2++; }\n v2[k2o] = x2;\n if (x2 > n) k2end += 2;\n else if (y2 > m) k2start += 2;\n else if (!front) {\n const k1o = offset + delta - k2;\n if (k1o >= 0 && k1o < size && v1[k1o] !== -1) {\n const x1 = v1[k1o];\n if (x1 >= n - x2) return splitAt(a, b, x1, offset + x1 - k1o);\n }\n }\n }\n }\n // Nothing in common at all.\n return [['removed', a], ['added', b]];\n}\n\nfunction splitAt(a: readonly string[], b: readonly string[], x: number, y: number): DiffOp[] {\n return [...diffLines(a.slice(0, x), b.slice(0, y)), ...diffLines(a.slice(x), b.slice(y))];\n}\n\n@Component({\n selector: 'lc-diff-viewer',\n standalone: true,\n templateUrl: './diff-viewer.component.html',\n styleUrls: ['./diff-viewer.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DiffViewerComponent {\n readonly oldText = input.required<string>();\n readonly newText = input.required<string>();\n readonly oldLabel = input('Original');\n readonly newLabel = input('Modified');\n readonly mode = input<DiffViewMode>('side-by-side');\n readonly showLineNumbers = input(true);\n readonly contextLines = input(Infinity);\n\n /**\n * Upper bound (per side, in lines) above which no diff is computed and a\n * \"too large\" notice is rendered instead — a UI diff of that size is neither\n * readable nor cheap. Raise it deliberately when you know the inputs.\n */\n readonly maxLines = input(20_000);\n\n private readonly oldLines = computed(() => this.oldText().split('\\n'));\n private readonly newLines = computed(() => this.newText().split('\\n'));\n protected readonly oldLineCount = computed(() => this.oldLines().length);\n protected readonly newLineCount = computed(() => this.newLines().length);\n\n /** True when either side exceeds `maxLines`; the diff is then skipped. */\n protected readonly tooLarge = computed(\n () => Math.max(this.oldLines().length, this.newLines().length) > this.maxLines(),\n );\n\n protected readonly diffLines = computed<DiffLine[]>(() => {\n if (this.tooLarge()) return [];\n return this.numberOps(diffLines(this.oldLines(), this.newLines()));\n });\n\n protected readonly filteredLines = computed(() => {\n const ctx = this.contextLines();\n const lines = this.diffLines();\n if (ctx === Infinity) return lines;\n\n const changed = new Set<number>();\n lines.forEach((l, i) => { if (l.type !== 'unchanged') changed.add(i); });\n\n const visible = new Set<number>();\n for (const idx of changed) {\n for (let j = Math.max(0, idx - ctx); j <= Math.min(lines.length - 1, idx + ctx); j++) {\n visible.add(j);\n }\n }\n\n return lines.filter((_, i) => visible.has(i));\n });\n\n protected readonly sideBySide = computed(() => {\n if (this.mode() !== 'side-by-side') return { left: [], right: [] };\n\n const lines = this.filteredLines();\n const left: { num: number | null; content: string; type: string }[] = [];\n const right: { num: number | null; content: string; type: string }[] = [];\n\n for (const line of lines) {\n if (line.type === 'unchanged') {\n left.push({ num: line.leftNum, content: line.content, type: 'unchanged' });\n right.push({ num: line.rightNum, content: line.content, type: 'unchanged' });\n } else if (line.type === 'removed') {\n left.push({ num: line.leftNum, content: line.content, type: 'removed' });\n right.push({ num: null, content: '', type: 'empty' });\n } else {\n left.push({ num: null, content: '', type: 'empty' });\n right.push({ num: line.rightNum, content: line.content, type: 'added' });\n }\n }\n\n return { left, right };\n });\n\n protected readonly stats = computed(() => {\n let additions = 0;\n let deletions = 0;\n for (const l of this.diffLines()) {\n if (l.type === 'added') additions++;\n else if (l.type === 'removed') deletions++;\n }\n return { additions, deletions };\n });\n\n /** Expand the edit script into numbered lines (removed before added). */\n private numberOps(ops: readonly DiffOp[]): DiffLine[] {\n const result: DiffLine[] = [];\n let i = 0, j = 0;\n for (const [type, lines] of ops) {\n for (const content of lines) {\n if (type === 'unchanged') result.push({ type, leftNum: ++i, rightNum: ++j, content });\n else if (type === 'removed') result.push({ type, leftNum: ++i, rightNum: null, content });\n else result.push({ type, leftNum: null, rightNum: ++j, content });\n }\n }\n return result;\n }\n}\n","<div class=\"lc-diff\">\n <!-- Stats bar -->\n <div class=\"lc-diff__stats\">\n <span class=\"lc-diff__stat lc-diff__stat--add\">+{{ stats().additions }}</span>\n <span class=\"lc-diff__stat lc-diff__stat--del\">−{{ stats().deletions }}</span>\n </div>\n\n @if (tooLarge()) {\n <!-- Size cap hit: no diff is computed -->\n <p class=\"lc-diff__too-large\" role=\"status\">\n Diff too large to display ({{ oldLabel() }}: {{ oldLineCount() }} lines,\n {{ newLabel() }}: {{ newLineCount() }} lines; limit {{ maxLines() }} lines per side).\n </p>\n } @else if (mode() === 'inline') {\n <!-- Inline mode -->\n <div class=\"lc-diff__inline\">\n <div class=\"lc-diff__headers\">\n <span class=\"lc-diff__file-label\">{{ oldLabel() }} → {{ newLabel() }}</span>\n </div>\n <div class=\"lc-diff__body\">\n @for (line of filteredLines(); track $index) {\n <div\n class=\"lc-diff__line\"\n [class.lc-diff__line--added]=\"line.type === 'added'\"\n [class.lc-diff__line--removed]=\"line.type === 'removed'\"\n >\n @if (showLineNumbers()) {\n <span class=\"lc-diff__num lc-diff__num--left\">{{ line.leftNum ?? '' }}</span>\n <span class=\"lc-diff__num lc-diff__num--right\">{{ line.rightNum ?? '' }}</span>\n }\n <span class=\"lc-diff__prefix\">{{ line.type === 'added' ? '+' : line.type === 'removed' ? '−' : ' ' }}</span>\n <span class=\"lc-diff__content\">{{ line.content }}</span>\n </div>\n }\n </div>\n </div>\n } @else {\n <!-- Side-by-side mode -->\n <div class=\"lc-diff__side-by-side\">\n <div class=\"lc-diff__pane lc-diff__pane--left\">\n <div class=\"lc-diff__pane-header\">{{ oldLabel() }}</div>\n @for (line of sideBySide().left; track $index) {\n <div\n class=\"lc-diff__line\"\n [class.lc-diff__line--removed]=\"line.type === 'removed'\"\n [class.lc-diff__line--empty]=\"line.type === 'empty'\"\n >\n @if (showLineNumbers()) {\n <span class=\"lc-diff__num\">{{ line.num ?? '' }}</span>\n }\n <span class=\"lc-diff__content\">{{ line.content }}</span>\n </div>\n }\n </div>\n <div class=\"lc-diff__pane lc-diff__pane--right\">\n <div class=\"lc-diff__pane-header\">{{ newLabel() }}</div>\n @for (line of sideBySide().right; track $index) {\n <div\n class=\"lc-diff__line\"\n [class.lc-diff__line--added]=\"line.type === 'added'\"\n [class.lc-diff__line--empty]=\"line.type === 'empty'\"\n >\n @if (showLineNumbers()) {\n <span class=\"lc-diff__num\">{{ line.num ?? '' }}</span>\n }\n <span class=\"lc-diff__content\">{{ line.content }}</span>\n </div>\n }\n </div>\n </div>\n }\n</div>\n"],"mappings":"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"}
|
|
@@ -169,7 +169,7 @@ var FileUploadComponent = class FileUploadComponent {
|
|
|
169
169
|
}],
|
|
170
170
|
ngImport: i0,
|
|
171
171
|
template: "<div\n [class]=\"dropzoneClasses()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n (click)=\"openFilePicker()\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"openFilePicker()\"\n (keydown.space)=\"openFilePicker()\"\n [attr.aria-label]=\"dropzoneAriaLabel()\"\n [attr.aria-disabled]=\"disabled()\"\n>\n <input\n #fileInput\n type=\"file\"\n class=\"file-upload__input\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"onFileChange($event)\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n />\n <div class=\"file-upload__content\">\n <lc-icon name=\"cloud-arrow-up\" class=\"file-upload__icon\" [decorative]=\"true\"></lc-icon>\n <!-- Real spaces between the lines, so the visible text reads as words\n that the drop zone's name contains (WCAG 2.5.3). -->\n <p class=\"file-upload__hint\">{{ hint() }}</p>\n @if (accept()) {\n &ngsp;<p class=\"file-upload__accept\">{{ acceptedLabel() }} {{ accept() }}</p>\n }\n @if (maxSizeBytes() > 0) {\n &ngsp;<p class=\"file-upload__accept\">{{ maxSizeLabel() }} {{ formatSize(maxSizeBytes()) }}</p>\n }\n </div>\n</div>\n\n@if (selectedFiles().length > 0) {\n <ul class=\"file-upload__list\">\n @for (f of selectedFiles(); track f.name; let i = $index) {\n <li class=\"file-upload__file\">\n <lc-icon name=\"document\" class=\"file-upload__file-icon\" [decorative]=\"true\"></lc-icon>\n <span class=\"file-upload__file-name\">{{ f.name }}</span>\n <span class=\"file-upload__file-size\">{{ formatSize(f.size) }}</span>\n <button\n type=\"button\"\n class=\"file-upload__file-remove\"\n (click)=\"removeFile(i); $event.stopPropagation()\"\n [attr.aria-label]=\"removeFileAriaLabel()\"\n >\n <lc-icon name=\"x-mark\" [decorative]=\"true\"></lc-icon>\n </button>\n </li>\n }\n </ul>\n}\n",
|
|
172
|
-
styles: [":host{display:block;width:100%}.file-upload{display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem;border:2px dashed var(--color-border-strong);border-radius:var(--border-radius-lg);background-color:var(--color-surface-2);cursor:pointer;transition:border-color .15s ease,background-color .15s ease;text-align:center}.file-upload:hover{border-color:var(--color-primary-500);background-color:var(--color-surface-hover)}.file-upload:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.file-upload--drag-over{border-color:var(--color-primary-500);background-color:var(--color-surface-selected)}.file-upload--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.file-upload__input{position:absolute;width:0;height:0;overflow:hidden;opacity:0}.file-upload__content{display:flex;flex-direction:column;align-items:center;gap:.5rem}.file-upload__icon{--icon-size: 2rem;color:var(--color-primary-500)}.file-upload__hint{margin:0;font-size:.875rem;color:var(--color-text-secondary)}.file-upload__accept{margin:0;font-size:.75rem;color:var(--color-text-tertiary)}.file-upload__list{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}.file-upload__file{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--border-radius-md);font-size:.8125rem}.file-upload__file-icon{--icon-size: 1rem;color:var(--color-text-tertiary);flex-shrink:0}.file-upload__file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text-primary)}.file-upload__file-size{flex-shrink:0;color:var(--color-text-tertiary);font-size:.75rem}.file-upload__file-remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:var(--color-surface-hover);cursor:pointer;padding:0;--icon-size: .75rem;color:var(--color-text-secondary)}.file-upload__file-remove:hover{background:#9d0e0e2e;color:var(--color-error)}\n"],
|
|
172
|
+
styles: [":host{display:block;width:100%}.file-upload{display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem;border:2px dashed var(--color-border-strong);border-radius:var(--border-radius-lg);background-color:var(--color-surface-2);cursor:pointer;transition:border-color .15s ease,background-color .15s ease;text-align:center}.file-upload:hover{border-color:var(--color-primary-500);background-color:var(--color-surface-hover)}.file-upload:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.file-upload--drag-over{border-color:var(--color-primary-500);background-color:var(--color-surface-selected)}.file-upload--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.file-upload__input{position:absolute;width:0;height:0;overflow:hidden;opacity:0}.file-upload__content{display:flex;flex-direction:column;align-items:center;gap:.5rem}.file-upload__icon{--icon-size: 2rem;color:var(--color-primary-500)}.file-upload__hint{margin:0;font-size:.875rem;color:var(--color-text-secondary)}.file-upload__accept{margin:0;font-size:.75rem;color:var(--color-text-tertiary)}.file-upload__list{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}.file-upload__file{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--border-radius-md);font-size:.8125rem}.file-upload__file-icon{--icon-size: 1rem;color:var(--color-text-tertiary);flex-shrink:0}.file-upload__file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text-primary)}.file-upload__file-size{flex-shrink:0;color:var(--color-text-tertiary);font-size:.75rem}.file-upload__file-remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:var(--color-surface-hover);cursor:pointer;padding:0;--icon-size: .75rem;color:var(--color-text-secondary)}.file-upload__file-remove:hover{background:#9d0e0e2e;color:var(--color-on-error-subtle)}\n"],
|
|
173
173
|
dependencies: [{
|
|
174
174
|
kind: "component",
|
|
175
175
|
type: IconComponent,
|
|
@@ -202,7 +202,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
202
202
|
viewProviders: [ɵprovideKitIcons([ICON_FILE, ICON_X_MARK])],
|
|
203
203
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
204
204
|
template: "<div\n [class]=\"dropzoneClasses()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n (click)=\"openFilePicker()\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"openFilePicker()\"\n (keydown.space)=\"openFilePicker()\"\n [attr.aria-label]=\"dropzoneAriaLabel()\"\n [attr.aria-disabled]=\"disabled()\"\n>\n <input\n #fileInput\n type=\"file\"\n class=\"file-upload__input\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"onFileChange($event)\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n />\n <div class=\"file-upload__content\">\n <lc-icon name=\"cloud-arrow-up\" class=\"file-upload__icon\" [decorative]=\"true\"></lc-icon>\n <!-- Real spaces between the lines, so the visible text reads as words\n that the drop zone's name contains (WCAG 2.5.3). -->\n <p class=\"file-upload__hint\">{{ hint() }}</p>\n @if (accept()) {\n &ngsp;<p class=\"file-upload__accept\">{{ acceptedLabel() }} {{ accept() }}</p>\n }\n @if (maxSizeBytes() > 0) {\n &ngsp;<p class=\"file-upload__accept\">{{ maxSizeLabel() }} {{ formatSize(maxSizeBytes()) }}</p>\n }\n </div>\n</div>\n\n@if (selectedFiles().length > 0) {\n <ul class=\"file-upload__list\">\n @for (f of selectedFiles(); track f.name; let i = $index) {\n <li class=\"file-upload__file\">\n <lc-icon name=\"document\" class=\"file-upload__file-icon\" [decorative]=\"true\"></lc-icon>\n <span class=\"file-upload__file-name\">{{ f.name }}</span>\n <span class=\"file-upload__file-size\">{{ formatSize(f.size) }}</span>\n <button\n type=\"button\"\n class=\"file-upload__file-remove\"\n (click)=\"removeFile(i); $event.stopPropagation()\"\n [attr.aria-label]=\"removeFileAriaLabel()\"\n >\n <lc-icon name=\"x-mark\" [decorative]=\"true\"></lc-icon>\n </button>\n </li>\n }\n </ul>\n}\n",
|
|
205
|
-
styles: [":host{display:block;width:100%}.file-upload{display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem;border:2px dashed var(--color-border-strong);border-radius:var(--border-radius-lg);background-color:var(--color-surface-2);cursor:pointer;transition:border-color .15s ease,background-color .15s ease;text-align:center}.file-upload:hover{border-color:var(--color-primary-500);background-color:var(--color-surface-hover)}.file-upload:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.file-upload--drag-over{border-color:var(--color-primary-500);background-color:var(--color-surface-selected)}.file-upload--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.file-upload__input{position:absolute;width:0;height:0;overflow:hidden;opacity:0}.file-upload__content{display:flex;flex-direction:column;align-items:center;gap:.5rem}.file-upload__icon{--icon-size: 2rem;color:var(--color-primary-500)}.file-upload__hint{margin:0;font-size:.875rem;color:var(--color-text-secondary)}.file-upload__accept{margin:0;font-size:.75rem;color:var(--color-text-tertiary)}.file-upload__list{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}.file-upload__file{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--border-radius-md);font-size:.8125rem}.file-upload__file-icon{--icon-size: 1rem;color:var(--color-text-tertiary);flex-shrink:0}.file-upload__file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text-primary)}.file-upload__file-size{flex-shrink:0;color:var(--color-text-tertiary);font-size:.75rem}.file-upload__file-remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:var(--color-surface-hover);cursor:pointer;padding:0;--icon-size: .75rem;color:var(--color-text-secondary)}.file-upload__file-remove:hover{background:#9d0e0e2e;color:var(--color-error)}\n"]
|
|
205
|
+
styles: [":host{display:block;width:100%}.file-upload{display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem;border:2px dashed var(--color-border-strong);border-radius:var(--border-radius-lg);background-color:var(--color-surface-2);cursor:pointer;transition:border-color .15s ease,background-color .15s ease;text-align:center}.file-upload:hover{border-color:var(--color-primary-500);background-color:var(--color-surface-hover)}.file-upload:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.file-upload--drag-over{border-color:var(--color-primary-500);background-color:var(--color-surface-selected)}.file-upload--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.file-upload__input{position:absolute;width:0;height:0;overflow:hidden;opacity:0}.file-upload__content{display:flex;flex-direction:column;align-items:center;gap:.5rem}.file-upload__icon{--icon-size: 2rem;color:var(--color-primary-500)}.file-upload__hint{margin:0;font-size:.875rem;color:var(--color-text-secondary)}.file-upload__accept{margin:0;font-size:.75rem;color:var(--color-text-tertiary)}.file-upload__list{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}.file-upload__file{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--border-radius-md);font-size:.8125rem}.file-upload__file-icon{--icon-size: 1rem;color:var(--color-text-tertiary);flex-shrink:0}.file-upload__file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text-primary)}.file-upload__file-size{flex-shrink:0;color:var(--color-text-tertiary);font-size:.75rem}.file-upload__file-remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:var(--color-surface-hover);cursor:pointer;padding:0;--icon-size: .75rem;color:var(--color-text-secondary)}.file-upload__file-remove:hover{background:#9d0e0e2e;color:var(--color-on-error-subtle)}\n"]
|
|
206
206
|
}]
|
|
207
207
|
}],
|
|
208
208
|
propDecorators: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-file-upload.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/file-upload/file-upload.component.ts","../../../../libs/angular-ui-kit/src/lib/file-upload/file-upload.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input,\n output,\n signal,\n computed,\n ElementRef,\n viewChild,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_FILE, ICON_X_MARK } from '@lifecorner/angular-ui-kit/icons';\n\nexport interface FileUploadFile {\n file: File;\n name: string;\n size: number;\n type: string;\n}\n\n/**\n * File upload / dropzone component with drag & drop support.\n *\n * @example\n * ```html\n * <lc-file-upload\n * accept=\".pdf,.png,.jpg\"\n * [multiple]=\"true\"\n * [maxSizeBytes]=\"5242880\"\n * (filesSelected)=\"onFiles($event)\"\n * ></lc-file-upload>\n * ```\n */\n@Component({\n selector: 'lc-file-upload',\n standalone: true,\n imports: [IconComponent],\n viewProviders: [ɵprovideKitIcons([ICON_FILE, ICON_X_MARK])],\n templateUrl: './file-upload.component.html',\n styleUrls: ['./file-upload.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * File upload component with drag-and-drop support.\n *\n * Features:\n * - Drag-and-drop file dropzone with visual feedback\n * - Click-to-browse file selection\n * - File type and size validation\n * - Multi-file upload support\n * - File list display with removal\n * - Disabled state support\n *\n * @example\n * ```html\n * <lc-file-upload accept=\".pdf,.jpg\" [multiple]=\"true\" [maxSizeBytes]=\"5242880\" />\n * ```\n */\nexport class FileUploadComponent {\n /**\n * Accepted file types (e.g. \".pdf,.jpg,image/*\").\n */\n accept = input<string>('');\n\n /**\n * Allow multiple files.\n * @default false\n */\n multiple = input<boolean>(false);\n\n /**\n * Maximum file size in bytes. 0 for unlimited.\n * @default 0\n */\n maxSizeBytes = input<number>(0);\n\n /**\n * Whether the dropzone is disabled.\n * @default false\n */\n disabled = input<boolean>(false);\n\n /**\n * Hint text shown in the dropzone. The drop zone's accessible name is\n * `hint`, then the shown accepted and max lines, comma-separated (WCAG 2.5.3\n * Label in Name).\n * @default 'Drag & drop files here, or click to browse'\n */\n hint = input<string>('Drag & drop files here, or click to browse');\n\n /**\n * Prefix of the accepted file types line (`accept`). The shown line is part\n * of the drop zone's accessible name, after `hint`.\n * @default 'Accepted:'\n */\n acceptedLabel = input('Accepted:');\n\n /**\n * Prefix of the maximum file size line (`maxSizeBytes`). The shown line is\n * part of the drop zone's accessible name, after `hint`.\n * @default 'Max:'\n */\n maxSizeLabel = input('Max:');\n\n /** Accessible name of a selected file's remove button. */\n removeFileAriaLabel = input('Remove file');\n\n /**\n * Emitted with selected files after validation.\n */\n readonly filesSelected = output<FileUploadFile[]>();\n\n /**\n * Emitted when a file is rejected (too large or wrong type).\n */\n readonly fileRejected = output<{ file: File; reason: string }>();\n\n protected isDragOver = signal(false);\n protected selectedFiles = signal<FileUploadFile[]>([]);\n protected readonly fileInputRef = viewChild<ElementRef<HTMLInputElement>>('fileInput');\n\n protected dropzoneClasses = computed(() => {\n return [\n 'file-upload',\n this.isDragOver() ? 'file-upload--drag-over' : '',\n this.disabled() ? 'file-upload--disabled' : '',\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n /**\n * Name of the drop zone (AS-33, WCAG 2.5.3 Label in Name): `hint`, then the\n * accepted and max lines it shows, comma-separated.\n */\n protected readonly dropzoneAriaLabel = computed(() =>\n [\n this.hint(),\n this.accept() ? `${this.acceptedLabel()} ${this.accept()}` : '',\n this.maxSizeBytes() > 0 ? `${this.maxSizeLabel()} ${this.formatSize(this.maxSizeBytes())}` : '',\n ]\n .filter(Boolean)\n .join(', '),\n );\n\n protected onDragOver(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n if (!this.disabled()) {\n this.isDragOver.set(true);\n }\n }\n\n protected onDragLeave(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this.isDragOver.set(false);\n }\n\n protected onDrop(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this.isDragOver.set(false);\n if (this.disabled() || !event.dataTransfer?.files.length) return;\n this.processFiles(event.dataTransfer.files);\n }\n\n protected onFileChange(event: Event): void {\n const input = event.target as HTMLInputElement;\n if (input.files?.length) {\n this.processFiles(input.files);\n }\n // Reset so the same file can be re-selected\n input.value = '';\n }\n\n protected openFilePicker(): void {\n if (!this.disabled()) {\n this.fileInputRef()?.nativeElement.click();\n }\n }\n\n protected removeFile(index: number): void {\n this.selectedFiles.update((files) => files.filter((_, i) => i !== index));\n this.filesSelected.emit(this.selectedFiles());\n }\n\n protected formatSize(bytes: number): string {\n if (bytes < 1024) return `${bytes} B`;\n if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n }\n\n private processFiles(fileList: FileList): void {\n const files = Array.from(fileList);\n const accepted: FileUploadFile[] = [];\n\n for (const file of files) {\n if (this.maxSizeBytes() > 0 && file.size > this.maxSizeBytes()) {\n this.fileRejected.emit({ file, reason: 'File too large' });\n continue;\n }\n accepted.push({\n file,\n name: file.name,\n size: file.size,\n type: file.type,\n });\n }\n\n if (this.multiple()) {\n this.selectedFiles.update((prev) => [...prev, ...accepted]);\n } else {\n this.selectedFiles.set(accepted.slice(0, 1));\n }\n\n this.filesSelected.emit(this.selectedFiles());\n }\n}\n","<div\n [class]=\"dropzoneClasses()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n (click)=\"openFilePicker()\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"openFilePicker()\"\n (keydown.space)=\"openFilePicker()\"\n [attr.aria-label]=\"dropzoneAriaLabel()\"\n [attr.aria-disabled]=\"disabled()\"\n>\n <input\n #fileInput\n type=\"file\"\n class=\"file-upload__input\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"onFileChange($event)\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n />\n <div class=\"file-upload__content\">\n <lc-icon name=\"cloud-arrow-up\" class=\"file-upload__icon\" [decorative]=\"true\"></lc-icon>\n <!-- Real spaces between the lines, so the visible text reads as words\n that the drop zone's name contains (WCAG 2.5.3). -->\n <p class=\"file-upload__hint\">{{ hint() }}</p>\n @if (accept()) {\n &ngsp;<p class=\"file-upload__accept\">{{ acceptedLabel() }} {{ accept() }}</p>\n }\n @if (maxSizeBytes() > 0) {\n &ngsp;<p class=\"file-upload__accept\">{{ maxSizeLabel() }} {{ formatSize(maxSizeBytes()) }}</p>\n }\n </div>\n</div>\n\n@if (selectedFiles().length > 0) {\n <ul class=\"file-upload__list\">\n @for (f of selectedFiles(); track f.name; let i = $index) {\n <li class=\"file-upload__file\">\n <lc-icon name=\"document\" class=\"file-upload__file-icon\" [decorative]=\"true\"></lc-icon>\n <span class=\"file-upload__file-name\">{{ f.name }}</span>\n <span class=\"file-upload__file-size\">{{ formatSize(f.size) }}</span>\n <button\n type=\"button\"\n class=\"file-upload__file-remove\"\n (click)=\"removeFile(i); $event.stopPropagation()\"\n [attr.aria-label]=\"removeFileAriaLabel()\"\n >\n <lc-icon name=\"x-mark\" [decorative]=\"true\"></lc-icon>\n </button>\n </li>\n }\n </ul>\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-file-upload.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/file-upload/file-upload.component.ts","../../../../libs/angular-ui-kit/src/lib/file-upload/file-upload.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input,\n output,\n signal,\n computed,\n ElementRef,\n viewChild,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_FILE, ICON_X_MARK } from '@lifecorner/angular-ui-kit/icons';\n\nexport interface FileUploadFile {\n file: File;\n name: string;\n size: number;\n type: string;\n}\n\n/**\n * File upload / dropzone component with drag & drop support.\n *\n * @example\n * ```html\n * <lc-file-upload\n * accept=\".pdf,.png,.jpg\"\n * [multiple]=\"true\"\n * [maxSizeBytes]=\"5242880\"\n * (filesSelected)=\"onFiles($event)\"\n * ></lc-file-upload>\n * ```\n */\n@Component({\n selector: 'lc-file-upload',\n standalone: true,\n imports: [IconComponent],\n viewProviders: [ɵprovideKitIcons([ICON_FILE, ICON_X_MARK])],\n templateUrl: './file-upload.component.html',\n styleUrls: ['./file-upload.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * File upload component with drag-and-drop support.\n *\n * Features:\n * - Drag-and-drop file dropzone with visual feedback\n * - Click-to-browse file selection\n * - File type and size validation\n * - Multi-file upload support\n * - File list display with removal\n * - Disabled state support\n *\n * @example\n * ```html\n * <lc-file-upload accept=\".pdf,.jpg\" [multiple]=\"true\" [maxSizeBytes]=\"5242880\" />\n * ```\n */\nexport class FileUploadComponent {\n /**\n * Accepted file types (e.g. \".pdf,.jpg,image/*\").\n */\n accept = input<string>('');\n\n /**\n * Allow multiple files.\n * @default false\n */\n multiple = input<boolean>(false);\n\n /**\n * Maximum file size in bytes. 0 for unlimited.\n * @default 0\n */\n maxSizeBytes = input<number>(0);\n\n /**\n * Whether the dropzone is disabled.\n * @default false\n */\n disabled = input<boolean>(false);\n\n /**\n * Hint text shown in the dropzone. The drop zone's accessible name is\n * `hint`, then the shown accepted and max lines, comma-separated (WCAG 2.5.3\n * Label in Name).\n * @default 'Drag & drop files here, or click to browse'\n */\n hint = input<string>('Drag & drop files here, or click to browse');\n\n /**\n * Prefix of the accepted file types line (`accept`). The shown line is part\n * of the drop zone's accessible name, after `hint`.\n * @default 'Accepted:'\n */\n acceptedLabel = input('Accepted:');\n\n /**\n * Prefix of the maximum file size line (`maxSizeBytes`). The shown line is\n * part of the drop zone's accessible name, after `hint`.\n * @default 'Max:'\n */\n maxSizeLabel = input('Max:');\n\n /** Accessible name of a selected file's remove button. */\n removeFileAriaLabel = input('Remove file');\n\n /**\n * Emitted with selected files after validation.\n */\n readonly filesSelected = output<FileUploadFile[]>();\n\n /**\n * Emitted when a file is rejected (too large or wrong type).\n */\n readonly fileRejected = output<{ file: File; reason: string }>();\n\n protected isDragOver = signal(false);\n protected selectedFiles = signal<FileUploadFile[]>([]);\n protected readonly fileInputRef = viewChild<ElementRef<HTMLInputElement>>('fileInput');\n\n protected dropzoneClasses = computed(() => {\n return [\n 'file-upload',\n this.isDragOver() ? 'file-upload--drag-over' : '',\n this.disabled() ? 'file-upload--disabled' : '',\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n /**\n * Name of the drop zone (AS-33, WCAG 2.5.3 Label in Name): `hint`, then the\n * accepted and max lines it shows, comma-separated.\n */\n protected readonly dropzoneAriaLabel = computed(() =>\n [\n this.hint(),\n this.accept() ? `${this.acceptedLabel()} ${this.accept()}` : '',\n this.maxSizeBytes() > 0 ? `${this.maxSizeLabel()} ${this.formatSize(this.maxSizeBytes())}` : '',\n ]\n .filter(Boolean)\n .join(', '),\n );\n\n protected onDragOver(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n if (!this.disabled()) {\n this.isDragOver.set(true);\n }\n }\n\n protected onDragLeave(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this.isDragOver.set(false);\n }\n\n protected onDrop(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this.isDragOver.set(false);\n if (this.disabled() || !event.dataTransfer?.files.length) return;\n this.processFiles(event.dataTransfer.files);\n }\n\n protected onFileChange(event: Event): void {\n const input = event.target as HTMLInputElement;\n if (input.files?.length) {\n this.processFiles(input.files);\n }\n // Reset so the same file can be re-selected\n input.value = '';\n }\n\n protected openFilePicker(): void {\n if (!this.disabled()) {\n this.fileInputRef()?.nativeElement.click();\n }\n }\n\n protected removeFile(index: number): void {\n this.selectedFiles.update((files) => files.filter((_, i) => i !== index));\n this.filesSelected.emit(this.selectedFiles());\n }\n\n protected formatSize(bytes: number): string {\n if (bytes < 1024) return `${bytes} B`;\n if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n }\n\n private processFiles(fileList: FileList): void {\n const files = Array.from(fileList);\n const accepted: FileUploadFile[] = [];\n\n for (const file of files) {\n if (this.maxSizeBytes() > 0 && file.size > this.maxSizeBytes()) {\n this.fileRejected.emit({ file, reason: 'File too large' });\n continue;\n }\n accepted.push({\n file,\n name: file.name,\n size: file.size,\n type: file.type,\n });\n }\n\n if (this.multiple()) {\n this.selectedFiles.update((prev) => [...prev, ...accepted]);\n } else {\n this.selectedFiles.set(accepted.slice(0, 1));\n }\n\n this.filesSelected.emit(this.selectedFiles());\n }\n}\n","<div\n [class]=\"dropzoneClasses()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n (click)=\"openFilePicker()\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"openFilePicker()\"\n (keydown.space)=\"openFilePicker()\"\n [attr.aria-label]=\"dropzoneAriaLabel()\"\n [attr.aria-disabled]=\"disabled()\"\n>\n <input\n #fileInput\n type=\"file\"\n class=\"file-upload__input\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"onFileChange($event)\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n />\n <div class=\"file-upload__content\">\n <lc-icon name=\"cloud-arrow-up\" class=\"file-upload__icon\" [decorative]=\"true\"></lc-icon>\n <!-- Real spaces between the lines, so the visible text reads as words\n that the drop zone's name contains (WCAG 2.5.3). -->\n <p class=\"file-upload__hint\">{{ hint() }}</p>\n @if (accept()) {\n &ngsp;<p class=\"file-upload__accept\">{{ acceptedLabel() }} {{ accept() }}</p>\n }\n @if (maxSizeBytes() > 0) {\n &ngsp;<p class=\"file-upload__accept\">{{ maxSizeLabel() }} {{ formatSize(maxSizeBytes()) }}</p>\n }\n </div>\n</div>\n\n@if (selectedFiles().length > 0) {\n <ul class=\"file-upload__list\">\n @for (f of selectedFiles(); track f.name; let i = $index) {\n <li class=\"file-upload__file\">\n <lc-icon name=\"document\" class=\"file-upload__file-icon\" [decorative]=\"true\"></lc-icon>\n <span class=\"file-upload__file-name\">{{ f.name }}</span>\n <span class=\"file-upload__file-size\">{{ formatSize(f.size) }}</span>\n <button\n type=\"button\"\n class=\"file-upload__file-remove\"\n (click)=\"removeFile(i); $event.stopPropagation()\"\n [attr.aria-label]=\"removeFileAriaLabel()\"\n >\n <lc-icon name=\"x-mark\" [decorative]=\"true\"></lc-icon>\n </button>\n </li>\n }\n </ul>\n}\n"],"mappings":"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"}
|
|
@@ -32,10 +32,10 @@ var KanbanBoardComponent = class KanbanBoardComponent {
|
|
|
32
32
|
}
|
|
33
33
|
getPriorityColor(priority) {
|
|
34
34
|
switch (priority) {
|
|
35
|
-
case "critical": return "var(--color-error-
|
|
36
|
-
case "high": return "var(--color-warning-
|
|
37
|
-
case "medium": return "var(--color-info-
|
|
38
|
-
case "low": return "var(--color-success-
|
|
35
|
+
case "critical": return "var(--color-on-error-subtle)";
|
|
36
|
+
case "high": return "var(--color-on-warning-subtle)";
|
|
37
|
+
case "medium": return "var(--color-on-info-subtle)";
|
|
38
|
+
case "low": return "var(--color-on-success-subtle)";
|
|
39
39
|
default: return "";
|
|
40
40
|
}
|
|
41
41
|
}
|
|
@@ -222,7 +222,7 @@ var KanbanBoardComponent = class KanbanBoardComponent {
|
|
|
222
222
|
},
|
|
223
223
|
ngImport: i0,
|
|
224
224
|
template: "<div class=\"lc-kanban\">\n @for (col of displayColumns(); track col.id) {\n <div\n class=\"lc-kanban__column\"\n [class.lc-kanban__column--drop-target]=\"dropTargetColumn() === col.id\"\n [class.lc-kanban__column--over-limit]=\"showWipLimit() && isOverLimit(col)\"\n (dragover)=\"onDragOverColumn($event, col.id)\"\n (dragleave)=\"onDragLeave()\"\n (drop)=\"onDrop($event, col.id)\"\n >\n <div class=\"lc-kanban__column-header\">\n @if (col.color) {\n <span class=\"lc-kanban__column-dot\" [style.background]=\"col.color\"></span>\n }\n <span class=\"lc-kanban__column-title\">{{ col.title }}</span>\n @if (showCardCount()) {\n <span class=\"lc-kanban__column-count\">{{ col.cards.length }}</span>\n }\n @if (showWipLimit() && col.limit) {\n <span class=\"lc-kanban__column-limit\" [class.lc-kanban__column-limit--over]=\"isOverLimit(col)\">\n / {{ col.limit }}\n </span>\n }\n </div>\n\n <div class=\"lc-kanban__cards\">\n @for (card of col.cards; track card.id) {\n <div\n class=\"lc-kanban__card\"\n role=\"button\"\n tabindex=\"0\"\n [attr.data-card-id]=\"card.id\"\n [attr.aria-keyshortcuts]=\"readonly() ? null : 'Alt+ArrowLeft Alt+ArrowRight Alt+ArrowUp Alt+ArrowDown'\"\n [class.lc-kanban__card--dragging]=\"draggedCard()?.card?.id === card.id\"\n [class.lc-kanban__card--readonly]=\"readonly()\"\n [attr.draggable]=\"!readonly()\"\n (dragstart)=\"onDragStart($event, card, col.id)\"\n (dragover)=\"onDragOver($event, col.id, $index)\"\n (drop)=\"onDrop($event, col.id, $index)\"\n (dragend)=\"onDragEnd()\"\n (click)=\"onCardClick(card, col.id)\"\n (keydown)=\"onCardKeydown($event, card, col.id)\"\n >\n @if (card.priority) {\n <lc-icon [name]=\"getPriorityIcon(card.priority)\" size=\"xs\" [color]=\"getPriorityColor(card.priority)\" class=\"lc-kanban__card-priority\" [ariaLabel]=\"priorityAriaLabel() + ' ' + card.priority\"></lc-icon>\n }\n <span class=\"lc-kanban__card-title\">{{ card.title }}</span>\n\n @if (card.description) {\n <p class=\"lc-kanban__card-desc\">{{ card.description }}</p>\n }\n\n @if (card.labels?.length || card.assignee) {\n <div class=\"lc-kanban__card-footer\">\n @if (card.labels?.length) {\n <div class=\"lc-kanban__card-labels\">\n @for (label of card.labels; track label.text) {\n <span class=\"lc-kanban__card-label\" [style.--label-color]=\"label.color || 'var(--color-primary-500)'\">{{ label.text }}</span>\n }\n </div>\n }\n @if (card.assignee) {\n <span class=\"lc-kanban__card-assignee\">{{ card.assignee }}</span>\n }\n </div>\n }\n </div>\n }\n\n <!-- Empty state drop zone -->\n @if (col.cards.length === 0) {\n <div\n class=\"lc-kanban__empty\"\n (dragover)=\"onDragOver($event, col.id, 0)\"\n (drop)=\"onDrop($event, col.id, 0)\"\n >\n {{ emptyColumnLabel() }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n",
|
|
225
|
-
styles: [":host{display:block;overflow-x:auto}.lc-kanban{display:flex;gap:16px;padding:8px;min-height:200px}.lc-kanban__column{flex:0 0 280px;display:flex;flex-direction:column;background:var(--color-surface-2);border-radius:8px;padding:8px;transition:background .15s,box-shadow .15s}.lc-kanban__column--drop-target{background:var(--color-primary-50);box-shadow:inset 0 0 0 2px var(--color-primary-300)}.lc-kanban__column--over-limit{background:var(--color-error-50, #fef2f2)}.lc-kanban__column-header{display:flex;align-items:center;gap:6px;padding:4px 4px 8px;font-size:var(--typography-font-size-sm, .875rem);font-weight:600;color:var(--color-text-secondary)}.lc-kanban__column-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.lc-kanban__column-title{flex:1}.lc-kanban__column-count{font-size:.6875rem;background:var(--color-surface-hover);color:var(--color-text-secondary);padding:1px 6px;border-radius:10px;font-weight:500}.lc-kanban__column-limit{font-size:.6875rem;color:var(--color-text-tertiary)}.lc-kanban__column-limit--over{color:var(--color-error-
|
|
225
|
+
styles: [":host{display:block;overflow-x:auto}.lc-kanban{display:flex;gap:16px;padding:8px;min-height:200px}.lc-kanban__column{flex:0 0 280px;display:flex;flex-direction:column;background:var(--color-surface-2);border-radius:8px;padding:8px;transition:background .15s,box-shadow .15s}.lc-kanban__column--drop-target{background:var(--color-primary-50);box-shadow:inset 0 0 0 2px var(--color-primary-300)}.lc-kanban__column--over-limit{background:var(--color-error-50, #fef2f2)}.lc-kanban__column-header{display:flex;align-items:center;gap:6px;padding:4px 4px 8px;font-size:var(--typography-font-size-sm, .875rem);font-weight:600;color:var(--color-text-secondary)}.lc-kanban__column-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.lc-kanban__column-title{flex:1}.lc-kanban__column-count{font-size:.6875rem;background:var(--color-surface-hover);color:var(--color-text-secondary);padding:1px 6px;border-radius:10px;font-weight:500}.lc-kanban__column-limit{font-size:.6875rem;color:var(--color-text-tertiary)}.lc-kanban__column-limit--over{color:var(--color-on-error-subtle);font-weight:700}.lc-kanban__cards{flex:1;display:flex;flex-direction:column;gap:8px;min-height:40px}.lc-kanban__card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;padding:10px;cursor:grab;transition:box-shadow .15s,opacity .15s}.lc-kanban__card:hover{box-shadow:var(--elevation-1)}.lc-kanban__card:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-500) 20%,transparent);border-color:var(--color-primary-500)}.lc-kanban__card--dragging{opacity:.4}.lc-kanban__card:active{cursor:grabbing}.lc-kanban__card--readonly,.lc-kanban__card--readonly:active{cursor:pointer}.lc-kanban__card-priority{flex-shrink:0;margin-right:4px}.lc-kanban__card-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-text-primary)}.lc-kanban__card-desc{margin:4px 0 0;font-size:.75rem;color:var(--color-text-tertiary);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lc-kanban__card-footer{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:8px}.lc-kanban__card-labels{display:flex;flex-wrap:wrap;gap:4px}.lc-kanban__card-label{display:inline-block;padding:1px 8px;border-radius:var(--border-radius-full);font-size:.625rem;font-weight:600;--label-color: var(--color-primary-500);background:color-mix(in srgb,var(--label-color) 20%,transparent);border:1px solid color-mix(in srgb,var(--label-color) 45%,transparent);color:var(--color-text-primary)}.lc-kanban__card-assignee{font-size:.6875rem;color:var(--color-text-tertiary);font-weight:500}.lc-kanban__empty{display:flex;align-items:center;justify-content:center;min-height:60px;border:2px dashed var(--color-border);border-radius:6px;font-size:.75rem;color:var(--color-text-tertiary)}\n"],
|
|
226
226
|
dependencies: [{
|
|
227
227
|
kind: "component",
|
|
228
228
|
type: IconComponent,
|
|
@@ -255,7 +255,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
255
255
|
viewProviders: [ɵprovideKitIcons([ICON_EXCLAMATION_CIRCLE])],
|
|
256
256
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
257
257
|
template: "<div class=\"lc-kanban\">\n @for (col of displayColumns(); track col.id) {\n <div\n class=\"lc-kanban__column\"\n [class.lc-kanban__column--drop-target]=\"dropTargetColumn() === col.id\"\n [class.lc-kanban__column--over-limit]=\"showWipLimit() && isOverLimit(col)\"\n (dragover)=\"onDragOverColumn($event, col.id)\"\n (dragleave)=\"onDragLeave()\"\n (drop)=\"onDrop($event, col.id)\"\n >\n <div class=\"lc-kanban__column-header\">\n @if (col.color) {\n <span class=\"lc-kanban__column-dot\" [style.background]=\"col.color\"></span>\n }\n <span class=\"lc-kanban__column-title\">{{ col.title }}</span>\n @if (showCardCount()) {\n <span class=\"lc-kanban__column-count\">{{ col.cards.length }}</span>\n }\n @if (showWipLimit() && col.limit) {\n <span class=\"lc-kanban__column-limit\" [class.lc-kanban__column-limit--over]=\"isOverLimit(col)\">\n / {{ col.limit }}\n </span>\n }\n </div>\n\n <div class=\"lc-kanban__cards\">\n @for (card of col.cards; track card.id) {\n <div\n class=\"lc-kanban__card\"\n role=\"button\"\n tabindex=\"0\"\n [attr.data-card-id]=\"card.id\"\n [attr.aria-keyshortcuts]=\"readonly() ? null : 'Alt+ArrowLeft Alt+ArrowRight Alt+ArrowUp Alt+ArrowDown'\"\n [class.lc-kanban__card--dragging]=\"draggedCard()?.card?.id === card.id\"\n [class.lc-kanban__card--readonly]=\"readonly()\"\n [attr.draggable]=\"!readonly()\"\n (dragstart)=\"onDragStart($event, card, col.id)\"\n (dragover)=\"onDragOver($event, col.id, $index)\"\n (drop)=\"onDrop($event, col.id, $index)\"\n (dragend)=\"onDragEnd()\"\n (click)=\"onCardClick(card, col.id)\"\n (keydown)=\"onCardKeydown($event, card, col.id)\"\n >\n @if (card.priority) {\n <lc-icon [name]=\"getPriorityIcon(card.priority)\" size=\"xs\" [color]=\"getPriorityColor(card.priority)\" class=\"lc-kanban__card-priority\" [ariaLabel]=\"priorityAriaLabel() + ' ' + card.priority\"></lc-icon>\n }\n <span class=\"lc-kanban__card-title\">{{ card.title }}</span>\n\n @if (card.description) {\n <p class=\"lc-kanban__card-desc\">{{ card.description }}</p>\n }\n\n @if (card.labels?.length || card.assignee) {\n <div class=\"lc-kanban__card-footer\">\n @if (card.labels?.length) {\n <div class=\"lc-kanban__card-labels\">\n @for (label of card.labels; track label.text) {\n <span class=\"lc-kanban__card-label\" [style.--label-color]=\"label.color || 'var(--color-primary-500)'\">{{ label.text }}</span>\n }\n </div>\n }\n @if (card.assignee) {\n <span class=\"lc-kanban__card-assignee\">{{ card.assignee }}</span>\n }\n </div>\n }\n </div>\n }\n\n <!-- Empty state drop zone -->\n @if (col.cards.length === 0) {\n <div\n class=\"lc-kanban__empty\"\n (dragover)=\"onDragOver($event, col.id, 0)\"\n (drop)=\"onDrop($event, col.id, 0)\"\n >\n {{ emptyColumnLabel() }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n",
|
|
258
|
-
styles: [":host{display:block;overflow-x:auto}.lc-kanban{display:flex;gap:16px;padding:8px;min-height:200px}.lc-kanban__column{flex:0 0 280px;display:flex;flex-direction:column;background:var(--color-surface-2);border-radius:8px;padding:8px;transition:background .15s,box-shadow .15s}.lc-kanban__column--drop-target{background:var(--color-primary-50);box-shadow:inset 0 0 0 2px var(--color-primary-300)}.lc-kanban__column--over-limit{background:var(--color-error-50, #fef2f2)}.lc-kanban__column-header{display:flex;align-items:center;gap:6px;padding:4px 4px 8px;font-size:var(--typography-font-size-sm, .875rem);font-weight:600;color:var(--color-text-secondary)}.lc-kanban__column-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.lc-kanban__column-title{flex:1}.lc-kanban__column-count{font-size:.6875rem;background:var(--color-surface-hover);color:var(--color-text-secondary);padding:1px 6px;border-radius:10px;font-weight:500}.lc-kanban__column-limit{font-size:.6875rem;color:var(--color-text-tertiary)}.lc-kanban__column-limit--over{color:var(--color-error-
|
|
258
|
+
styles: [":host{display:block;overflow-x:auto}.lc-kanban{display:flex;gap:16px;padding:8px;min-height:200px}.lc-kanban__column{flex:0 0 280px;display:flex;flex-direction:column;background:var(--color-surface-2);border-radius:8px;padding:8px;transition:background .15s,box-shadow .15s}.lc-kanban__column--drop-target{background:var(--color-primary-50);box-shadow:inset 0 0 0 2px var(--color-primary-300)}.lc-kanban__column--over-limit{background:var(--color-error-50, #fef2f2)}.lc-kanban__column-header{display:flex;align-items:center;gap:6px;padding:4px 4px 8px;font-size:var(--typography-font-size-sm, .875rem);font-weight:600;color:var(--color-text-secondary)}.lc-kanban__column-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.lc-kanban__column-title{flex:1}.lc-kanban__column-count{font-size:.6875rem;background:var(--color-surface-hover);color:var(--color-text-secondary);padding:1px 6px;border-radius:10px;font-weight:500}.lc-kanban__column-limit{font-size:.6875rem;color:var(--color-text-tertiary)}.lc-kanban__column-limit--over{color:var(--color-on-error-subtle);font-weight:700}.lc-kanban__cards{flex:1;display:flex;flex-direction:column;gap:8px;min-height:40px}.lc-kanban__card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;padding:10px;cursor:grab;transition:box-shadow .15s,opacity .15s}.lc-kanban__card:hover{box-shadow:var(--elevation-1)}.lc-kanban__card:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-500) 20%,transparent);border-color:var(--color-primary-500)}.lc-kanban__card--dragging{opacity:.4}.lc-kanban__card:active{cursor:grabbing}.lc-kanban__card--readonly,.lc-kanban__card--readonly:active{cursor:pointer}.lc-kanban__card-priority{flex-shrink:0;margin-right:4px}.lc-kanban__card-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-text-primary)}.lc-kanban__card-desc{margin:4px 0 0;font-size:.75rem;color:var(--color-text-tertiary);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lc-kanban__card-footer{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:8px}.lc-kanban__card-labels{display:flex;flex-wrap:wrap;gap:4px}.lc-kanban__card-label{display:inline-block;padding:1px 8px;border-radius:var(--border-radius-full);font-size:.625rem;font-weight:600;--label-color: var(--color-primary-500);background:color-mix(in srgb,var(--label-color) 20%,transparent);border:1px solid color-mix(in srgb,var(--label-color) 45%,transparent);color:var(--color-text-primary)}.lc-kanban__card-assignee{font-size:.6875rem;color:var(--color-text-tertiary);font-weight:500}.lc-kanban__empty{display:flex;align-items:center;justify-content:center;min-height:60px;border:2px dashed var(--color-border);border-radius:6px;font-size:.75rem;color:var(--color-text-tertiary)}\n"]
|
|
259
259
|
}]
|
|
260
260
|
}],
|
|
261
261
|
propDecorators: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-kanban-board.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/kanban-board/kanban-board.component.ts","../../../../libs/angular-ui-kit/src/lib/kanban-board/kanban-board.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n Injector,\n afterNextRender,\n inject,\n input,\n linkedSignal,\n signal,\n output,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_EXCLAMATION_CIRCLE } from '@lifecorner/angular-ui-kit/icons';\n\nexport interface KanbanCard {\n id: string;\n title: string;\n description?: string;\n labels?: KanbanLabel[];\n assignee?: string;\n priority?: 'low' | 'medium' | 'high' | 'critical';\n}\n\nexport interface KanbanLabel {\n text: string;\n color?: string;\n}\n\nexport interface KanbanColumn {\n id: string;\n title: string;\n cards: KanbanCard[];\n color?: string;\n limit?: number;\n}\n\nexport interface KanbanMoveEvent {\n cardId: string;\n fromColumnId: string;\n toColumnId: string;\n toIndex: number;\n}\n\n@Component({\n selector: 'lc-kanban-board',\n standalone: true,\n imports: [IconComponent],\n viewProviders: [ɵprovideKitIcons([ICON_EXCLAMATION_CIRCLE])],\n templateUrl: './kanban-board.component.html',\n styleUrls: ['./kanban-board.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class KanbanBoardComponent {\n readonly columns = input.required<KanbanColumn[]>();\n readonly showCardCount = input(true);\n readonly showWipLimit = input(true);\n readonly readonly = input(false);\n\n /** Placeholder text of an empty column. */\n readonly emptyColumnLabel = input('Drop here');\n\n /** Accessible name prefix of a card's priority marker, followed by the priority. */\n readonly priorityAriaLabel = input('Priority:');\n\n readonly cardMoved = output<KanbanMoveEvent>();\n readonly cardClick = output<{ card: KanbanCard; columnId: string }>();\n\n private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly injector = inject(Injector);\n\n /**\n * Local working copy of the columns. Re-seeded from the `columns` input\n * whenever the parent provides a new value, while drops / keyboard moves\n * update it locally without waiting for the parent to echo the change back.\n */\n protected internalColumns = linkedSignal<KanbanColumn[]>(() => this.columns());\n protected draggedCard = signal<{ card: KanbanCard; columnId: string } | null>(null);\n protected dropTargetColumn = signal<string | null>(null);\n protected dropTargetIndex = signal<number>(-1);\n\n protected readonly displayColumns = this.internalColumns.asReadonly();\n\n protected isOverLimit(col: KanbanColumn): boolean {\n return !!col.limit && col.cards.length > col.limit;\n }\n\n protected getPriorityIcon(priority?: string): string {\n switch (priority) {\n case 'critical': return 'exclamation-circle';\n case 'high': return 'arrow-up';\n case 'medium': return 'minus';\n case 'low': return 'arrow-down';\n default: return '';\n }\n }\n\n protected getPriorityColor(priority?: string): string {\n switch (priority) {\n case 'critical': return 'var(--color-error-default)';\n case 'high': return 'var(--color-warning-default)';\n case 'medium': return 'var(--color-info-default)';\n case 'low': return 'var(--color-success-default)';\n default: return '';\n }\n }\n\n protected onDragStart(event: DragEvent, card: KanbanCard, columnId: string): void {\n if (this.readonly()) { event.preventDefault(); return; }\n this.draggedCard.set({ card, columnId });\n if (event.dataTransfer) {\n event.dataTransfer.effectAllowed = 'move';\n event.dataTransfer.setData('text/plain', card.id);\n }\n }\n\n protected onDragOver(event: DragEvent, columnId: string, index: number): void {\n event.preventDefault();\n if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';\n this.dropTargetColumn.set(columnId);\n this.dropTargetIndex.set(index);\n }\n\n protected onDragOverColumn(event: DragEvent, columnId: string): void {\n event.preventDefault();\n if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';\n this.dropTargetColumn.set(columnId);\n }\n\n protected onDragLeave(): void {\n this.dropTargetColumn.set(null);\n this.dropTargetIndex.set(-1);\n }\n\n protected onDrop(event: DragEvent, toColumnId: string, toIndex?: number): void {\n event.preventDefault();\n const dragged = this.draggedCard();\n if (!dragged) return;\n\n this.moveCard(dragged.card.id, dragged.columnId, toColumnId, toIndex);\n this.draggedCard.set(null);\n this.dropTargetColumn.set(null);\n this.dropTargetIndex.set(-1);\n }\n\n /**\n * Keyboard alternative to drag & drop: Enter / Space activate the card,\n * Alt+ArrowLeft / Alt+ArrowRight move it to the neighbouring column,\n * Alt+ArrowUp / Alt+ArrowDown reorder it within its column. Moves are\n * suppressed in readonly mode, exactly like drag & drop.\n */\n protected onCardKeydown(event: KeyboardEvent, card: KanbanCard, columnId: string): void {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.onCardClick(card, columnId);\n return;\n }\n if (!event.altKey || this.readonly()) return;\n\n const cols = this.displayColumns();\n const colIdx = cols.findIndex(c => c.id === columnId);\n if (colIdx < 0) return;\n const cardIdx = cols[colIdx].cards.findIndex(c => c.id === card.id);\n if (cardIdx < 0) return;\n\n let toColumnId: string | undefined;\n let toIndex: number | undefined;\n switch (event.key) {\n case 'ArrowLeft':\n if (colIdx > 0) { toColumnId = cols[colIdx - 1].id; toIndex = cols[colIdx - 1].cards.length; }\n break;\n case 'ArrowRight':\n if (colIdx < cols.length - 1) { toColumnId = cols[colIdx + 1].id; toIndex = cols[colIdx + 1].cards.length; }\n break;\n case 'ArrowUp':\n if (cardIdx > 0) { toColumnId = columnId; toIndex = cardIdx - 1; }\n break;\n case 'ArrowDown':\n if (cardIdx < cols[colIdx].cards.length - 1) { toColumnId = columnId; toIndex = cardIdx + 1; }\n break;\n default:\n return;\n }\n event.preventDefault();\n if (toColumnId === undefined) return;\n\n this.moveCard(card.id, columnId, toColumnId, toIndex);\n // The card element is re-created inside the target column's @for block,\n // so keyboard focus has to be restored explicitly after the next render.\n afterNextRender(\n () => {\n const cards = this.host.nativeElement.querySelectorAll<HTMLElement>('.lc-kanban__card');\n Array.from(cards).find(el => el.dataset['cardId'] === card.id)?.focus();\n },\n { injector: this.injector },\n );\n }\n\n /** Moves a card between / within columns and emits `cardMoved`. */\n private moveCard(cardId: string, fromColumnId: string, toColumnId: string, toIndex?: number): void {\n const cols = this.displayColumns().map(c => ({ ...c, cards: [...c.cards] }));\n const fromCol = cols.find(c => c.id === fromColumnId);\n const toCol = cols.find(c => c.id === toColumnId);\n if (!fromCol || !toCol) return;\n\n const cardIdx = fromCol.cards.findIndex(c => c.id === cardId);\n if (cardIdx < 0) return;\n\n const [card] = fromCol.cards.splice(cardIdx, 1);\n const insertIdx = toIndex ?? toCol.cards.length;\n toCol.cards.splice(insertIdx, 0, card);\n\n this.internalColumns.set(cols);\n\n this.cardMoved.emit({\n cardId: card.id,\n fromColumnId,\n toColumnId,\n toIndex: insertIdx,\n });\n }\n\n protected onDragEnd(): void {\n this.draggedCard.set(null);\n this.dropTargetColumn.set(null);\n this.dropTargetIndex.set(-1);\n }\n\n protected onCardClick(card: KanbanCard, columnId: string): void {\n this.cardClick.emit({ card, columnId });\n }\n\n}\n","<div class=\"lc-kanban\">\n @for (col of displayColumns(); track col.id) {\n <div\n class=\"lc-kanban__column\"\n [class.lc-kanban__column--drop-target]=\"dropTargetColumn() === col.id\"\n [class.lc-kanban__column--over-limit]=\"showWipLimit() && isOverLimit(col)\"\n (dragover)=\"onDragOverColumn($event, col.id)\"\n (dragleave)=\"onDragLeave()\"\n (drop)=\"onDrop($event, col.id)\"\n >\n <div class=\"lc-kanban__column-header\">\n @if (col.color) {\n <span class=\"lc-kanban__column-dot\" [style.background]=\"col.color\"></span>\n }\n <span class=\"lc-kanban__column-title\">{{ col.title }}</span>\n @if (showCardCount()) {\n <span class=\"lc-kanban__column-count\">{{ col.cards.length }}</span>\n }\n @if (showWipLimit() && col.limit) {\n <span class=\"lc-kanban__column-limit\" [class.lc-kanban__column-limit--over]=\"isOverLimit(col)\">\n / {{ col.limit }}\n </span>\n }\n </div>\n\n <div class=\"lc-kanban__cards\">\n @for (card of col.cards; track card.id) {\n <div\n class=\"lc-kanban__card\"\n role=\"button\"\n tabindex=\"0\"\n [attr.data-card-id]=\"card.id\"\n [attr.aria-keyshortcuts]=\"readonly() ? null : 'Alt+ArrowLeft Alt+ArrowRight Alt+ArrowUp Alt+ArrowDown'\"\n [class.lc-kanban__card--dragging]=\"draggedCard()?.card?.id === card.id\"\n [class.lc-kanban__card--readonly]=\"readonly()\"\n [attr.draggable]=\"!readonly()\"\n (dragstart)=\"onDragStart($event, card, col.id)\"\n (dragover)=\"onDragOver($event, col.id, $index)\"\n (drop)=\"onDrop($event, col.id, $index)\"\n (dragend)=\"onDragEnd()\"\n (click)=\"onCardClick(card, col.id)\"\n (keydown)=\"onCardKeydown($event, card, col.id)\"\n >\n @if (card.priority) {\n <lc-icon [name]=\"getPriorityIcon(card.priority)\" size=\"xs\" [color]=\"getPriorityColor(card.priority)\" class=\"lc-kanban__card-priority\" [ariaLabel]=\"priorityAriaLabel() + ' ' + card.priority\"></lc-icon>\n }\n <span class=\"lc-kanban__card-title\">{{ card.title }}</span>\n\n @if (card.description) {\n <p class=\"lc-kanban__card-desc\">{{ card.description }}</p>\n }\n\n @if (card.labels?.length || card.assignee) {\n <div class=\"lc-kanban__card-footer\">\n @if (card.labels?.length) {\n <div class=\"lc-kanban__card-labels\">\n @for (label of card.labels; track label.text) {\n <span class=\"lc-kanban__card-label\" [style.--label-color]=\"label.color || 'var(--color-primary-500)'\">{{ label.text }}</span>\n }\n </div>\n }\n @if (card.assignee) {\n <span class=\"lc-kanban__card-assignee\">{{ card.assignee }}</span>\n }\n </div>\n }\n </div>\n }\n\n <!-- Empty state drop zone -->\n @if (col.cards.length === 0) {\n <div\n class=\"lc-kanban__empty\"\n (dragover)=\"onDragOver($event, col.id, 0)\"\n (drop)=\"onDrop($event, col.id, 0)\"\n >\n {{ emptyColumnLabel() }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-kanban-board.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/kanban-board/kanban-board.component.ts","../../../../libs/angular-ui-kit/src/lib/kanban-board/kanban-board.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n Injector,\n afterNextRender,\n inject,\n input,\n linkedSignal,\n signal,\n output,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_EXCLAMATION_CIRCLE } from '@lifecorner/angular-ui-kit/icons';\n\nexport interface KanbanCard {\n id: string;\n title: string;\n description?: string;\n labels?: KanbanLabel[];\n assignee?: string;\n priority?: 'low' | 'medium' | 'high' | 'critical';\n}\n\nexport interface KanbanLabel {\n text: string;\n color?: string;\n}\n\nexport interface KanbanColumn {\n id: string;\n title: string;\n cards: KanbanCard[];\n color?: string;\n limit?: number;\n}\n\nexport interface KanbanMoveEvent {\n cardId: string;\n fromColumnId: string;\n toColumnId: string;\n toIndex: number;\n}\n\n@Component({\n selector: 'lc-kanban-board',\n standalone: true,\n imports: [IconComponent],\n viewProviders: [ɵprovideKitIcons([ICON_EXCLAMATION_CIRCLE])],\n templateUrl: './kanban-board.component.html',\n styleUrls: ['./kanban-board.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class KanbanBoardComponent {\n readonly columns = input.required<KanbanColumn[]>();\n readonly showCardCount = input(true);\n readonly showWipLimit = input(true);\n readonly readonly = input(false);\n\n /** Placeholder text of an empty column. */\n readonly emptyColumnLabel = input('Drop here');\n\n /** Accessible name prefix of a card's priority marker, followed by the priority. */\n readonly priorityAriaLabel = input('Priority:');\n\n readonly cardMoved = output<KanbanMoveEvent>();\n readonly cardClick = output<{ card: KanbanCard; columnId: string }>();\n\n private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly injector = inject(Injector);\n\n /**\n * Local working copy of the columns. Re-seeded from the `columns` input\n * whenever the parent provides a new value, while drops / keyboard moves\n * update it locally without waiting for the parent to echo the change back.\n */\n protected internalColumns = linkedSignal<KanbanColumn[]>(() => this.columns());\n protected draggedCard = signal<{ card: KanbanCard; columnId: string } | null>(null);\n protected dropTargetColumn = signal<string | null>(null);\n protected dropTargetIndex = signal<number>(-1);\n\n protected readonly displayColumns = this.internalColumns.asReadonly();\n\n protected isOverLimit(col: KanbanColumn): boolean {\n return !!col.limit && col.cards.length > col.limit;\n }\n\n protected getPriorityIcon(priority?: string): string {\n switch (priority) {\n case 'critical': return 'exclamation-circle';\n case 'high': return 'arrow-up';\n case 'medium': return 'minus';\n case 'low': return 'arrow-down';\n default: return '';\n }\n }\n\n protected getPriorityColor(priority?: string): string {\n switch (priority) {\n // Status inks: 3:1 on the card surface in both themes.\n case 'critical': return 'var(--color-on-error-subtle)';\n case 'high': return 'var(--color-on-warning-subtle)';\n case 'medium': return 'var(--color-on-info-subtle)';\n case 'low': return 'var(--color-on-success-subtle)';\n default: return '';\n }\n }\n\n protected onDragStart(event: DragEvent, card: KanbanCard, columnId: string): void {\n if (this.readonly()) { event.preventDefault(); return; }\n this.draggedCard.set({ card, columnId });\n if (event.dataTransfer) {\n event.dataTransfer.effectAllowed = 'move';\n event.dataTransfer.setData('text/plain', card.id);\n }\n }\n\n protected onDragOver(event: DragEvent, columnId: string, index: number): void {\n event.preventDefault();\n if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';\n this.dropTargetColumn.set(columnId);\n this.dropTargetIndex.set(index);\n }\n\n protected onDragOverColumn(event: DragEvent, columnId: string): void {\n event.preventDefault();\n if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';\n this.dropTargetColumn.set(columnId);\n }\n\n protected onDragLeave(): void {\n this.dropTargetColumn.set(null);\n this.dropTargetIndex.set(-1);\n }\n\n protected onDrop(event: DragEvent, toColumnId: string, toIndex?: number): void {\n event.preventDefault();\n const dragged = this.draggedCard();\n if (!dragged) return;\n\n this.moveCard(dragged.card.id, dragged.columnId, toColumnId, toIndex);\n this.draggedCard.set(null);\n this.dropTargetColumn.set(null);\n this.dropTargetIndex.set(-1);\n }\n\n /**\n * Keyboard alternative to drag & drop: Enter / Space activate the card,\n * Alt+ArrowLeft / Alt+ArrowRight move it to the neighbouring column,\n * Alt+ArrowUp / Alt+ArrowDown reorder it within its column. Moves are\n * suppressed in readonly mode, exactly like drag & drop.\n */\n protected onCardKeydown(event: KeyboardEvent, card: KanbanCard, columnId: string): void {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.onCardClick(card, columnId);\n return;\n }\n if (!event.altKey || this.readonly()) return;\n\n const cols = this.displayColumns();\n const colIdx = cols.findIndex(c => c.id === columnId);\n if (colIdx < 0) return;\n const cardIdx = cols[colIdx].cards.findIndex(c => c.id === card.id);\n if (cardIdx < 0) return;\n\n let toColumnId: string | undefined;\n let toIndex: number | undefined;\n switch (event.key) {\n case 'ArrowLeft':\n if (colIdx > 0) { toColumnId = cols[colIdx - 1].id; toIndex = cols[colIdx - 1].cards.length; }\n break;\n case 'ArrowRight':\n if (colIdx < cols.length - 1) { toColumnId = cols[colIdx + 1].id; toIndex = cols[colIdx + 1].cards.length; }\n break;\n case 'ArrowUp':\n if (cardIdx > 0) { toColumnId = columnId; toIndex = cardIdx - 1; }\n break;\n case 'ArrowDown':\n if (cardIdx < cols[colIdx].cards.length - 1) { toColumnId = columnId; toIndex = cardIdx + 1; }\n break;\n default:\n return;\n }\n event.preventDefault();\n if (toColumnId === undefined) return;\n\n this.moveCard(card.id, columnId, toColumnId, toIndex);\n // The card element is re-created inside the target column's @for block,\n // so keyboard focus has to be restored explicitly after the next render.\n afterNextRender(\n () => {\n const cards = this.host.nativeElement.querySelectorAll<HTMLElement>('.lc-kanban__card');\n Array.from(cards).find(el => el.dataset['cardId'] === card.id)?.focus();\n },\n { injector: this.injector },\n );\n }\n\n /** Moves a card between / within columns and emits `cardMoved`. */\n private moveCard(cardId: string, fromColumnId: string, toColumnId: string, toIndex?: number): void {\n const cols = this.displayColumns().map(c => ({ ...c, cards: [...c.cards] }));\n const fromCol = cols.find(c => c.id === fromColumnId);\n const toCol = cols.find(c => c.id === toColumnId);\n if (!fromCol || !toCol) return;\n\n const cardIdx = fromCol.cards.findIndex(c => c.id === cardId);\n if (cardIdx < 0) return;\n\n const [card] = fromCol.cards.splice(cardIdx, 1);\n const insertIdx = toIndex ?? toCol.cards.length;\n toCol.cards.splice(insertIdx, 0, card);\n\n this.internalColumns.set(cols);\n\n this.cardMoved.emit({\n cardId: card.id,\n fromColumnId,\n toColumnId,\n toIndex: insertIdx,\n });\n }\n\n protected onDragEnd(): void {\n this.draggedCard.set(null);\n this.dropTargetColumn.set(null);\n this.dropTargetIndex.set(-1);\n }\n\n protected onCardClick(card: KanbanCard, columnId: string): void {\n this.cardClick.emit({ card, columnId });\n }\n\n}\n","<div class=\"lc-kanban\">\n @for (col of displayColumns(); track col.id) {\n <div\n class=\"lc-kanban__column\"\n [class.lc-kanban__column--drop-target]=\"dropTargetColumn() === col.id\"\n [class.lc-kanban__column--over-limit]=\"showWipLimit() && isOverLimit(col)\"\n (dragover)=\"onDragOverColumn($event, col.id)\"\n (dragleave)=\"onDragLeave()\"\n (drop)=\"onDrop($event, col.id)\"\n >\n <div class=\"lc-kanban__column-header\">\n @if (col.color) {\n <span class=\"lc-kanban__column-dot\" [style.background]=\"col.color\"></span>\n }\n <span class=\"lc-kanban__column-title\">{{ col.title }}</span>\n @if (showCardCount()) {\n <span class=\"lc-kanban__column-count\">{{ col.cards.length }}</span>\n }\n @if (showWipLimit() && col.limit) {\n <span class=\"lc-kanban__column-limit\" [class.lc-kanban__column-limit--over]=\"isOverLimit(col)\">\n / {{ col.limit }}\n </span>\n }\n </div>\n\n <div class=\"lc-kanban__cards\">\n @for (card of col.cards; track card.id) {\n <div\n class=\"lc-kanban__card\"\n role=\"button\"\n tabindex=\"0\"\n [attr.data-card-id]=\"card.id\"\n [attr.aria-keyshortcuts]=\"readonly() ? null : 'Alt+ArrowLeft Alt+ArrowRight Alt+ArrowUp Alt+ArrowDown'\"\n [class.lc-kanban__card--dragging]=\"draggedCard()?.card?.id === card.id\"\n [class.lc-kanban__card--readonly]=\"readonly()\"\n [attr.draggable]=\"!readonly()\"\n (dragstart)=\"onDragStart($event, card, col.id)\"\n (dragover)=\"onDragOver($event, col.id, $index)\"\n (drop)=\"onDrop($event, col.id, $index)\"\n (dragend)=\"onDragEnd()\"\n (click)=\"onCardClick(card, col.id)\"\n (keydown)=\"onCardKeydown($event, card, col.id)\"\n >\n @if (card.priority) {\n <lc-icon [name]=\"getPriorityIcon(card.priority)\" size=\"xs\" [color]=\"getPriorityColor(card.priority)\" class=\"lc-kanban__card-priority\" [ariaLabel]=\"priorityAriaLabel() + ' ' + card.priority\"></lc-icon>\n }\n <span class=\"lc-kanban__card-title\">{{ card.title }}</span>\n\n @if (card.description) {\n <p class=\"lc-kanban__card-desc\">{{ card.description }}</p>\n }\n\n @if (card.labels?.length || card.assignee) {\n <div class=\"lc-kanban__card-footer\">\n @if (card.labels?.length) {\n <div class=\"lc-kanban__card-labels\">\n @for (label of card.labels; track label.text) {\n <span class=\"lc-kanban__card-label\" [style.--label-color]=\"label.color || 'var(--color-primary-500)'\">{{ label.text }}</span>\n }\n </div>\n }\n @if (card.assignee) {\n <span class=\"lc-kanban__card-assignee\">{{ card.assignee }}</span>\n }\n </div>\n }\n </div>\n }\n\n <!-- Empty state drop zone -->\n @if (col.cards.length === 0) {\n <div\n class=\"lc-kanban__empty\"\n (dragover)=\"onDragOver($event, col.id, 0)\"\n (drop)=\"onDrop($event, col.id, 0)\"\n >\n {{ emptyColumnLabel() }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n"],"mappings":"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"}
|
|
@@ -509,7 +509,7 @@ var LogViewerComponent = class LogViewerComponent {
|
|
|
509
509
|
}],
|
|
510
510
|
ngImport: i0,
|
|
511
511
|
template: "<div\n [class]=\"containerClasses()\"\n [style.height]=\"height()\"\n tabindex=\"0\"\n (keydown)=\"onKeydown($event)\"\n>\n <!-- Toolbar -->\n <div class=\"lc-log-viewer__toolbar\">\n <div class=\"lc-log-viewer__toolbar-left\">\n @if (stream$()) {\n <button\n type=\"button\"\n class=\"lc-log-viewer__tool-btn\"\n [class.lc-log-viewer__tool-btn--active]=\"paused()\"\n (click)=\"togglePause()\"\n [title]=\"paused() ? resumeLabel() : pauseLabel()\"\n [attr.aria-label]=\"paused() ? resumeAriaLabel() : pauseAriaLabel()\"\n [attr.aria-pressed]=\"paused()\"\n >\n <lc-icon [name]=\"paused() ? 'player-play' : 'player-pause'\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n <button\n type=\"button\"\n class=\"lc-log-viewer__tool-btn\"\n (click)=\"clearBuffer()\"\n [attr.title]=\"clearLabel()\"\n [attr.aria-label]=\"clearAriaLabel()\"\n >\n <lc-icon name=\"trash\" size=\"xs\" [decorative]=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"lc-log-viewer__tool-btn\"\n (click)=\"onCopyAll()\"\n [attr.title]=\"copyLabel()\"\n [attr.aria-label]=\"copyAriaLabel()\"\n >\n <lc-icon name=\"clipboard-document\" size=\"xs\" [decorative]=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"lc-log-viewer__tool-btn\"\n [class.lc-log-viewer__tool-btn--active]=\"showSearch()\"\n (click)=\"toggleSearch()\"\n [attr.title]=\"searchLabel()\"\n [attr.aria-label]=\"searchAriaLabel()\"\n [attr.aria-expanded]=\"showSearch()\"\n >\n <lc-icon name=\"magnifying-glass\" size=\"xs\" [decorative]=\"true\" />\n </button>\n </div>\n\n <div class=\"lc-log-viewer__toolbar-right\">\n <!-- Level filter pills -->\n @if (levelCounts().error > 0) {\n <button\n type=\"button\"\n class=\"lc-log-viewer__level-pill lc-log-viewer__level-pill--error\"\n [class.lc-log-viewer__level-pill--active]=\"internalLevelFilter().has('error')\"\n [attr.aria-pressed]=\"internalLevelFilter().has('error')\"\n (click)=\"toggleLevelFilter('error')\"\n >\n {{ levelCounts().error }} {{ errorsLabel() }}\n </button>\n }\n @if (levelCounts().warn > 0) {\n <button\n type=\"button\"\n class=\"lc-log-viewer__level-pill lc-log-viewer__level-pill--warn\"\n [class.lc-log-viewer__level-pill--active]=\"internalLevelFilter().has('warn')\"\n [attr.aria-pressed]=\"internalLevelFilter().has('warn')\"\n (click)=\"toggleLevelFilter('warn')\"\n >\n {{ levelCounts().warn }} {{ warningsLabel() }}\n </button>\n }\n <span class=\"lc-log-viewer__line-count\">{{ filteredLines().length }} {{ linesLabel() }}</span>\n </div>\n </div>\n\n <!-- Search bar -->\n @if (showSearch()) {\n <div class=\"lc-log-viewer__search\">\n <lc-icon name=\"magnifying-glass\" size=\"xs\" [decorative]=\"true\" />\n <label class=\"lc-log-viewer__sr-only\" [for]=\"searchInputId\">{{ searchInputLabel() }}</label>\n <input\n #searchInput\n type=\"text\"\n [id]=\"searchInputId\"\n class=\"lc-log-viewer__search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"internalSearch()\"\n (input)=\"internalSearch.set(getInputValue($event))\"\n />\n </div>\n }\n\n <!--\n Log content (virtualized). `role=\"log\"` names the region; live\n announcements are switched off because rows enter/leave the DOM on every\n scroll of the virtual window — announcing them would be pure noise.\n -->\n <div\n #scrollContainer\n class=\"lc-log-viewer__content\"\n role=\"log\"\n aria-live=\"off\"\n [attr.aria-label]=\"outputAriaLabel()\"\n >\n <div\n class=\"lc-log-viewer__spacer\"\n [style.height.px]=\"visibleRange().totalHeight\"\n >\n <div\n class=\"lc-log-viewer__window\"\n [style.transform]=\"'translateY(' + (visibleRange().start * lineHeight()) + 'px)'\"\n >\n @for (line of visibleLines(); track line._index) {\n <div\n class=\"lc-log-viewer__line\"\n [class.lc-log-viewer__line--clickable]=\"clickableLines()\"\n [class.lc-log-viewer__line--debug]=\"line.level === 'debug'\"\n [class.lc-log-viewer__line--info]=\"line.level === 'info'\"\n [class.lc-log-viewer__line--warn]=\"line.level === 'warn'\"\n [class.lc-log-viewer__line--error]=\"line.level === 'error'\"\n [attr.role]=\"clickableLines() ? 'button' : null\"\n [attr.tabindex]=\"clickableLines() ? 0 : null\"\n (click)=\"onLineClick(line)\"\n (keydown)=\"onLineKeydown($event, line)\"\n (keyup)=\"onLineKeyup($event, line)\"\n >\n @if (showLineNumbers()) {\n <span class=\"lc-log-viewer__line-num\">{{ line._index + 1 }}</span>\n }\n @if (showTimestamps() && line.timestamp) {\n <span class=\"lc-log-viewer__timestamp\">{{ formatTimestamp(line.timestamp) }}</span>\n }\n @if (line.level) {\n <span class=\"lc-log-viewer__level\">{{ line.level.toUpperCase().padEnd(5) }}</span>\n }\n @if (line.source) {\n <span class=\"lc-log-viewer__source\">[{{ line.source }}]</span>\n }\n <span\n class=\"lc-log-viewer__text\"\n [innerHTML]=\"renderLine(line.text)\"\n ></span>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Jump to bottom button -->\n @if (!atBottom()) {\n <button\n type=\"button\"\n class=\"lc-log-viewer__jump-bottom\"\n (click)=\"scrollToBottom()\"\n >\n <lc-icon name=\"arrow-down\" size=\"xs\" [decorative]=\"true\" />\n {{ jumpToBottomLabel() }}\n </button>\n }\n</div>\n",
|
|
512
|
-
styles: [".lc-log-viewer{--lc-log-viewer-line-height: 22px;position:relative;display:flex;flex-direction:column;border:1px solid var(--color-divider, #e5e7eb);border-radius:var(--border-radius-md, .375rem);overflow:hidden;font-family:var(--font-family-mono, \"Menlo\", \"Monaco\", \"Courier New\", monospace);font-size:.8125rem;line-height:1}.lc-log-viewer:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-log-viewer--log{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-log-viewer--terminal{background-color:#1e1e2e;color:#cdd6f4;border-color:#313244}.lc-log-viewer__toolbar{display:flex;align-items:center;justify-content:space-between;padding:.375rem .5rem;border-bottom:1px solid var(--color-divider, #e5e7eb);gap:.5rem;flex-shrink:0}.lc-log-viewer--terminal .lc-log-viewer__toolbar{border-bottom-color:#313244;background-color:#181825}.lc-log-viewer__toolbar-left,.lc-log-viewer__toolbar-right{display:flex;align-items:center;gap:.25rem}.lc-log-viewer__tool-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:var(--border-radius-sm, .25rem);cursor:pointer;color:inherit;opacity:.7;transition:opacity .15s,background-color .15s}.lc-log-viewer__tool-btn:hover{opacity:1;background-color:#80808026}.lc-log-viewer__tool-btn--active{opacity:1;background-color:#80808033}.lc-log-viewer__level-pill{font-size:.6875rem;padding:.125rem .5rem;border-radius:9999px;border:none;cursor:pointer;font-family:var(--font-family-sans);transition:
|
|
512
|
+
styles: [".lc-log-viewer{--lc-log-viewer-line-height: 22px;position:relative;display:flex;flex-direction:column;border:1px solid var(--color-divider, #e5e7eb);border-radius:var(--border-radius-md, .375rem);overflow:hidden;font-family:var(--font-family-mono, \"Menlo\", \"Monaco\", \"Courier New\", monospace);font-size:.8125rem;line-height:1}.lc-log-viewer:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-log-viewer--log{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-log-viewer--terminal{background-color:#1e1e2e;color:#cdd6f4;border-color:#313244}.lc-log-viewer__toolbar{display:flex;align-items:center;justify-content:space-between;padding:.375rem .5rem;border-bottom:1px solid var(--color-divider, #e5e7eb);gap:.5rem;flex-shrink:0}.lc-log-viewer--terminal .lc-log-viewer__toolbar{border-bottom-color:#313244;background-color:#181825}.lc-log-viewer__toolbar-left,.lc-log-viewer__toolbar-right{display:flex;align-items:center;gap:.25rem}.lc-log-viewer__tool-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:var(--border-radius-sm, .25rem);cursor:pointer;color:inherit;opacity:.7;transition:opacity .15s,background-color .15s}.lc-log-viewer__tool-btn:hover{opacity:1;background-color:#80808026}.lc-log-viewer__tool-btn--active{opacity:1;background-color:#80808033}.lc-log-viewer__level-pill{font-size:.6875rem;padding:.125rem .5rem;border-radius:9999px;border:none;cursor:pointer;font-family:var(--font-family-sans);transition:box-shadow .15s}.lc-log-viewer__level-pill--active{box-shadow:inset 0 0 0 1px currentColor}.lc-log-viewer__level-pill--error{background-color:#9d0e0e2e;color:var(--color-on-error-subtle)}.lc-log-viewer--terminal .lc-log-viewer__level-pill--error{background-color:#45202a;color:#f38ba8}.lc-log-viewer__level-pill--warn{background-color:#e1a0402e;color:var(--color-on-warning-subtle)}.lc-log-viewer--terminal .lc-log-viewer__level-pill--warn{background-color:#3d3520;color:#f9e2af}@media(forced-colors:active){.lc-log-viewer__level-pill--active:not(:focus-visible){outline:2px solid Highlight;outline-offset:1px}}.lc-log-viewer__line-count{font-size:.6875rem;opacity:.5;font-family:var(--font-family-sans);padding:0 .25rem}.lc-log-viewer__search{display:flex;align-items:center;gap:.375rem;padding:.25rem .5rem;border-bottom:1px solid var(--color-divider, #e5e7eb);flex-shrink:0}.lc-log-viewer--terminal .lc-log-viewer__search{border-bottom-color:#313244;background-color:#181825}.lc-log-viewer__search-input{flex:1;background:transparent;border:none;outline:none;color:inherit;font-family:inherit;font-size:inherit}.lc-log-viewer__search-input::placeholder{opacity:.4}.lc-log-viewer__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.lc-log-viewer__content{flex:1;overflow-y:auto;overflow-x:auto;position:relative;min-height:0}.lc-log-viewer__spacer{position:relative;width:100%}.lc-log-viewer__window{position:absolute;top:0;left:0;right:0}.lc-log-viewer__line{display:flex;align-items:baseline;gap:.625rem;padding:1px .75rem;height:var(--lc-log-viewer-line-height);white-space:nowrap;transition:background-color .1s}.lc-log-viewer__line:hover{background-color:#80808014}.lc-log-viewer__line--clickable{cursor:pointer}.lc-log-viewer__line--clickable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--color-primary-500) 60%,transparent)}.lc-log-viewer__line--debug{opacity:.6}.lc-log-viewer--log .lc-log-viewer__line--warn{background-color:#e1a0401f}.lc-log-viewer--terminal .lc-log-viewer__line--warn{background-color:#f9e2af0d}.lc-log-viewer--log .lc-log-viewer__line--error{background-color:#9d0e0e1f}.lc-log-viewer--terminal .lc-log-viewer__line--error{background-color:#f38ba814}.lc-log-viewer__line-num{color:inherit;opacity:.3;min-width:3ch;text-align:right;-webkit-user-select:none;user-select:none}.lc-log-viewer__timestamp{color:inherit;opacity:.5;min-width:12ch}.lc-log-viewer__level{min-width:5ch;font-weight:600}.lc-log-viewer__line--debug .lc-log-viewer__level{color:var(--color-text-tertiary)}.lc-log-viewer__line--info .lc-log-viewer__level{color:var(--color-on-info-subtle)}.lc-log-viewer__line--warn .lc-log-viewer__level{color:var(--color-on-warning-subtle)}.lc-log-viewer__line--error .lc-log-viewer__level{color:var(--color-on-error-subtle)}.lc-log-viewer--terminal .lc-log-viewer__line--debug .lc-log-viewer__level{color:#9399b2}.lc-log-viewer--terminal .lc-log-viewer__line--info .lc-log-viewer__level{color:#89b4fa}.lc-log-viewer--terminal .lc-log-viewer__line--warn .lc-log-viewer__level{color:#f9e2af}.lc-log-viewer--terminal .lc-log-viewer__line--error .lc-log-viewer__level{color:#f38ba8}.lc-log-viewer__source{color:inherit;opacity:.5}.lc-log-viewer__text{flex:1;min-width:0}.lc-log-viewer__match{background-color:color-mix(in srgb,var(--color-warning-default) 45%,transparent);color:inherit;border-radius:2px;padding:0 1px}.lc-log-viewer--terminal .lc-log-viewer__match{background-color:#f9e2af40}.lc-log-viewer__jump-bottom{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border:1px solid var(--color-divider, #e5e7eb);border-radius:9999px;background-color:var(--color-surface);color:var(--color-text-primary);font-size:.75rem;font-family:var(--font-family-sans);cursor:pointer;box-shadow:var(--elevation-1);z-index:10;transition:background-color .15s}.lc-log-viewer__jump-bottom:hover{background-color:var(--color-surface-hover)}.lc-log-viewer__jump-bottom:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-500) 20%,transparent)}.lc-log-viewer--terminal .lc-log-viewer__jump-bottom{background-color:#313244;border-color:#45475a;color:#cdd6f4}.lc-log-viewer--terminal .lc-log-viewer__jump-bottom:hover{background-color:#45475a}.ansi-bold{font-weight:700}.ansi-italic{font-style:italic}.ansi-black{color:#45475a}.ansi-red{color:#f38ba8}.ansi-green{color:#a6e3a1}.ansi-yellow{color:#f9e2af}.ansi-blue{color:#89b4fa}.ansi-magenta{color:#cba6f7}.ansi-cyan{color:#94e2d5}.ansi-white{color:#cdd6f4}.ansi-gray{color:#6c7086}.ansi-bright-red{color:#eba0ac}.ansi-bright-green{color:#a6e3a1}.ansi-bright-yellow{color:#f9e2af}.ansi-bright-blue{color:#89dceb}.ansi-bright-magenta{color:#f5c2e7}.ansi-bright-cyan{color:#94e2d5}.ansi-bright-white{color:#bac2de}:root.light .lc-log-viewer--log .ansi-black{color:#4c4f69}:root.light .lc-log-viewer--log .ansi-red{color:#d20f39}:root.light .lc-log-viewer--log .ansi-green{color:#40a02b}:root.light .lc-log-viewer--log .ansi-yellow{color:#df8e1d}:root.light .lc-log-viewer--log .ansi-blue{color:#1e66f5}:root.light .lc-log-viewer--log .ansi-magenta{color:#8839ef}:root.light .lc-log-viewer--log .ansi-cyan{color:#179299}:root.light .lc-log-viewer--log .ansi-white{color:#6c6f85}:root.light .lc-log-viewer--log .ansi-gray{color:#9ca0b0}:root.light .lc-log-viewer--log .ansi-bright-red{color:#e64553}:root.light .lc-log-viewer--log .ansi-bright-green{color:#40a02b}:root.light .lc-log-viewer--log .ansi-bright-yellow{color:#df8e1d}:root.light .lc-log-viewer--log .ansi-bright-blue{color:#04a5e5}:root.light .lc-log-viewer--log .ansi-bright-magenta{color:#ea76cb}:root.light .lc-log-viewer--log .ansi-bright-cyan{color:#179299}:root.light .lc-log-viewer--log .ansi-bright-white{color:#5c5f77}@media(prefers-color-scheme:light){:root.system:not(.dark) .lc-log-viewer--log .ansi-black{color:#4c4f69}:root.system:not(.dark) .lc-log-viewer--log .ansi-red{color:#d20f39}:root.system:not(.dark) .lc-log-viewer--log .ansi-green{color:#40a02b}:root.system:not(.dark) .lc-log-viewer--log .ansi-yellow{color:#df8e1d}:root.system:not(.dark) .lc-log-viewer--log .ansi-blue{color:#1e66f5}:root.system:not(.dark) .lc-log-viewer--log .ansi-magenta{color:#8839ef}:root.system:not(.dark) .lc-log-viewer--log .ansi-cyan{color:#179299}:root.system:not(.dark) .lc-log-viewer--log .ansi-white{color:#6c6f85}:root.system:not(.dark) .lc-log-viewer--log .ansi-gray{color:#9ca0b0}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-red{color:#e64553}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-green{color:#40a02b}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-yellow{color:#df8e1d}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-blue{color:#04a5e5}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-magenta{color:#ea76cb}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-cyan{color:#179299}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-white{color:#5c5f77}}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar{width:8px;height:8px}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-track{background:#181825}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-thumb{background:#45475a;border-radius:4px}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-thumb:hover{background:#585b70}\n"],
|
|
513
513
|
dependencies: [{
|
|
514
514
|
kind: "component",
|
|
515
515
|
type: IconComponent,
|
|
@@ -544,7 +544,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
544
544
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
545
545
|
encapsulation: ViewEncapsulation.None,
|
|
546
546
|
template: "<div\n [class]=\"containerClasses()\"\n [style.height]=\"height()\"\n tabindex=\"0\"\n (keydown)=\"onKeydown($event)\"\n>\n <!-- Toolbar -->\n <div class=\"lc-log-viewer__toolbar\">\n <div class=\"lc-log-viewer__toolbar-left\">\n @if (stream$()) {\n <button\n type=\"button\"\n class=\"lc-log-viewer__tool-btn\"\n [class.lc-log-viewer__tool-btn--active]=\"paused()\"\n (click)=\"togglePause()\"\n [title]=\"paused() ? resumeLabel() : pauseLabel()\"\n [attr.aria-label]=\"paused() ? resumeAriaLabel() : pauseAriaLabel()\"\n [attr.aria-pressed]=\"paused()\"\n >\n <lc-icon [name]=\"paused() ? 'player-play' : 'player-pause'\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n <button\n type=\"button\"\n class=\"lc-log-viewer__tool-btn\"\n (click)=\"clearBuffer()\"\n [attr.title]=\"clearLabel()\"\n [attr.aria-label]=\"clearAriaLabel()\"\n >\n <lc-icon name=\"trash\" size=\"xs\" [decorative]=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"lc-log-viewer__tool-btn\"\n (click)=\"onCopyAll()\"\n [attr.title]=\"copyLabel()\"\n [attr.aria-label]=\"copyAriaLabel()\"\n >\n <lc-icon name=\"clipboard-document\" size=\"xs\" [decorative]=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"lc-log-viewer__tool-btn\"\n [class.lc-log-viewer__tool-btn--active]=\"showSearch()\"\n (click)=\"toggleSearch()\"\n [attr.title]=\"searchLabel()\"\n [attr.aria-label]=\"searchAriaLabel()\"\n [attr.aria-expanded]=\"showSearch()\"\n >\n <lc-icon name=\"magnifying-glass\" size=\"xs\" [decorative]=\"true\" />\n </button>\n </div>\n\n <div class=\"lc-log-viewer__toolbar-right\">\n <!-- Level filter pills -->\n @if (levelCounts().error > 0) {\n <button\n type=\"button\"\n class=\"lc-log-viewer__level-pill lc-log-viewer__level-pill--error\"\n [class.lc-log-viewer__level-pill--active]=\"internalLevelFilter().has('error')\"\n [attr.aria-pressed]=\"internalLevelFilter().has('error')\"\n (click)=\"toggleLevelFilter('error')\"\n >\n {{ levelCounts().error }} {{ errorsLabel() }}\n </button>\n }\n @if (levelCounts().warn > 0) {\n <button\n type=\"button\"\n class=\"lc-log-viewer__level-pill lc-log-viewer__level-pill--warn\"\n [class.lc-log-viewer__level-pill--active]=\"internalLevelFilter().has('warn')\"\n [attr.aria-pressed]=\"internalLevelFilter().has('warn')\"\n (click)=\"toggleLevelFilter('warn')\"\n >\n {{ levelCounts().warn }} {{ warningsLabel() }}\n </button>\n }\n <span class=\"lc-log-viewer__line-count\">{{ filteredLines().length }} {{ linesLabel() }}</span>\n </div>\n </div>\n\n <!-- Search bar -->\n @if (showSearch()) {\n <div class=\"lc-log-viewer__search\">\n <lc-icon name=\"magnifying-glass\" size=\"xs\" [decorative]=\"true\" />\n <label class=\"lc-log-viewer__sr-only\" [for]=\"searchInputId\">{{ searchInputLabel() }}</label>\n <input\n #searchInput\n type=\"text\"\n [id]=\"searchInputId\"\n class=\"lc-log-viewer__search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"internalSearch()\"\n (input)=\"internalSearch.set(getInputValue($event))\"\n />\n </div>\n }\n\n <!--\n Log content (virtualized). `role=\"log\"` names the region; live\n announcements are switched off because rows enter/leave the DOM on every\n scroll of the virtual window — announcing them would be pure noise.\n -->\n <div\n #scrollContainer\n class=\"lc-log-viewer__content\"\n role=\"log\"\n aria-live=\"off\"\n [attr.aria-label]=\"outputAriaLabel()\"\n >\n <div\n class=\"lc-log-viewer__spacer\"\n [style.height.px]=\"visibleRange().totalHeight\"\n >\n <div\n class=\"lc-log-viewer__window\"\n [style.transform]=\"'translateY(' + (visibleRange().start * lineHeight()) + 'px)'\"\n >\n @for (line of visibleLines(); track line._index) {\n <div\n class=\"lc-log-viewer__line\"\n [class.lc-log-viewer__line--clickable]=\"clickableLines()\"\n [class.lc-log-viewer__line--debug]=\"line.level === 'debug'\"\n [class.lc-log-viewer__line--info]=\"line.level === 'info'\"\n [class.lc-log-viewer__line--warn]=\"line.level === 'warn'\"\n [class.lc-log-viewer__line--error]=\"line.level === 'error'\"\n [attr.role]=\"clickableLines() ? 'button' : null\"\n [attr.tabindex]=\"clickableLines() ? 0 : null\"\n (click)=\"onLineClick(line)\"\n (keydown)=\"onLineKeydown($event, line)\"\n (keyup)=\"onLineKeyup($event, line)\"\n >\n @if (showLineNumbers()) {\n <span class=\"lc-log-viewer__line-num\">{{ line._index + 1 }}</span>\n }\n @if (showTimestamps() && line.timestamp) {\n <span class=\"lc-log-viewer__timestamp\">{{ formatTimestamp(line.timestamp) }}</span>\n }\n @if (line.level) {\n <span class=\"lc-log-viewer__level\">{{ line.level.toUpperCase().padEnd(5) }}</span>\n }\n @if (line.source) {\n <span class=\"lc-log-viewer__source\">[{{ line.source }}]</span>\n }\n <span\n class=\"lc-log-viewer__text\"\n [innerHTML]=\"renderLine(line.text)\"\n ></span>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Jump to bottom button -->\n @if (!atBottom()) {\n <button\n type=\"button\"\n class=\"lc-log-viewer__jump-bottom\"\n (click)=\"scrollToBottom()\"\n >\n <lc-icon name=\"arrow-down\" size=\"xs\" [decorative]=\"true\" />\n {{ jumpToBottomLabel() }}\n </button>\n }\n</div>\n",
|
|
547
|
-
styles: [".lc-log-viewer{--lc-log-viewer-line-height: 22px;position:relative;display:flex;flex-direction:column;border:1px solid var(--color-divider, #e5e7eb);border-radius:var(--border-radius-md, .375rem);overflow:hidden;font-family:var(--font-family-mono, \"Menlo\", \"Monaco\", \"Courier New\", monospace);font-size:.8125rem;line-height:1}.lc-log-viewer:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-log-viewer--log{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-log-viewer--terminal{background-color:#1e1e2e;color:#cdd6f4;border-color:#313244}.lc-log-viewer__toolbar{display:flex;align-items:center;justify-content:space-between;padding:.375rem .5rem;border-bottom:1px solid var(--color-divider, #e5e7eb);gap:.5rem;flex-shrink:0}.lc-log-viewer--terminal .lc-log-viewer__toolbar{border-bottom-color:#313244;background-color:#181825}.lc-log-viewer__toolbar-left,.lc-log-viewer__toolbar-right{display:flex;align-items:center;gap:.25rem}.lc-log-viewer__tool-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:var(--border-radius-sm, .25rem);cursor:pointer;color:inherit;opacity:.7;transition:opacity .15s,background-color .15s}.lc-log-viewer__tool-btn:hover{opacity:1;background-color:#80808026}.lc-log-viewer__tool-btn--active{opacity:1;background-color:#80808033}.lc-log-viewer__level-pill{font-size:.6875rem;padding:.125rem .5rem;border-radius:9999px;border:none;cursor:pointer;font-family:var(--font-family-sans);transition:
|
|
547
|
+
styles: [".lc-log-viewer{--lc-log-viewer-line-height: 22px;position:relative;display:flex;flex-direction:column;border:1px solid var(--color-divider, #e5e7eb);border-radius:var(--border-radius-md, .375rem);overflow:hidden;font-family:var(--font-family-mono, \"Menlo\", \"Monaco\", \"Courier New\", monospace);font-size:.8125rem;line-height:1}.lc-log-viewer:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-log-viewer--log{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-log-viewer--terminal{background-color:#1e1e2e;color:#cdd6f4;border-color:#313244}.lc-log-viewer__toolbar{display:flex;align-items:center;justify-content:space-between;padding:.375rem .5rem;border-bottom:1px solid var(--color-divider, #e5e7eb);gap:.5rem;flex-shrink:0}.lc-log-viewer--terminal .lc-log-viewer__toolbar{border-bottom-color:#313244;background-color:#181825}.lc-log-viewer__toolbar-left,.lc-log-viewer__toolbar-right{display:flex;align-items:center;gap:.25rem}.lc-log-viewer__tool-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:var(--border-radius-sm, .25rem);cursor:pointer;color:inherit;opacity:.7;transition:opacity .15s,background-color .15s}.lc-log-viewer__tool-btn:hover{opacity:1;background-color:#80808026}.lc-log-viewer__tool-btn--active{opacity:1;background-color:#80808033}.lc-log-viewer__level-pill{font-size:.6875rem;padding:.125rem .5rem;border-radius:9999px;border:none;cursor:pointer;font-family:var(--font-family-sans);transition:box-shadow .15s}.lc-log-viewer__level-pill--active{box-shadow:inset 0 0 0 1px currentColor}.lc-log-viewer__level-pill--error{background-color:#9d0e0e2e;color:var(--color-on-error-subtle)}.lc-log-viewer--terminal .lc-log-viewer__level-pill--error{background-color:#45202a;color:#f38ba8}.lc-log-viewer__level-pill--warn{background-color:#e1a0402e;color:var(--color-on-warning-subtle)}.lc-log-viewer--terminal .lc-log-viewer__level-pill--warn{background-color:#3d3520;color:#f9e2af}@media(forced-colors:active){.lc-log-viewer__level-pill--active:not(:focus-visible){outline:2px solid Highlight;outline-offset:1px}}.lc-log-viewer__line-count{font-size:.6875rem;opacity:.5;font-family:var(--font-family-sans);padding:0 .25rem}.lc-log-viewer__search{display:flex;align-items:center;gap:.375rem;padding:.25rem .5rem;border-bottom:1px solid var(--color-divider, #e5e7eb);flex-shrink:0}.lc-log-viewer--terminal .lc-log-viewer__search{border-bottom-color:#313244;background-color:#181825}.lc-log-viewer__search-input{flex:1;background:transparent;border:none;outline:none;color:inherit;font-family:inherit;font-size:inherit}.lc-log-viewer__search-input::placeholder{opacity:.4}.lc-log-viewer__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.lc-log-viewer__content{flex:1;overflow-y:auto;overflow-x:auto;position:relative;min-height:0}.lc-log-viewer__spacer{position:relative;width:100%}.lc-log-viewer__window{position:absolute;top:0;left:0;right:0}.lc-log-viewer__line{display:flex;align-items:baseline;gap:.625rem;padding:1px .75rem;height:var(--lc-log-viewer-line-height);white-space:nowrap;transition:background-color .1s}.lc-log-viewer__line:hover{background-color:#80808014}.lc-log-viewer__line--clickable{cursor:pointer}.lc-log-viewer__line--clickable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--color-primary-500) 60%,transparent)}.lc-log-viewer__line--debug{opacity:.6}.lc-log-viewer--log .lc-log-viewer__line--warn{background-color:#e1a0401f}.lc-log-viewer--terminal .lc-log-viewer__line--warn{background-color:#f9e2af0d}.lc-log-viewer--log .lc-log-viewer__line--error{background-color:#9d0e0e1f}.lc-log-viewer--terminal .lc-log-viewer__line--error{background-color:#f38ba814}.lc-log-viewer__line-num{color:inherit;opacity:.3;min-width:3ch;text-align:right;-webkit-user-select:none;user-select:none}.lc-log-viewer__timestamp{color:inherit;opacity:.5;min-width:12ch}.lc-log-viewer__level{min-width:5ch;font-weight:600}.lc-log-viewer__line--debug .lc-log-viewer__level{color:var(--color-text-tertiary)}.lc-log-viewer__line--info .lc-log-viewer__level{color:var(--color-on-info-subtle)}.lc-log-viewer__line--warn .lc-log-viewer__level{color:var(--color-on-warning-subtle)}.lc-log-viewer__line--error .lc-log-viewer__level{color:var(--color-on-error-subtle)}.lc-log-viewer--terminal .lc-log-viewer__line--debug .lc-log-viewer__level{color:#9399b2}.lc-log-viewer--terminal .lc-log-viewer__line--info .lc-log-viewer__level{color:#89b4fa}.lc-log-viewer--terminal .lc-log-viewer__line--warn .lc-log-viewer__level{color:#f9e2af}.lc-log-viewer--terminal .lc-log-viewer__line--error .lc-log-viewer__level{color:#f38ba8}.lc-log-viewer__source{color:inherit;opacity:.5}.lc-log-viewer__text{flex:1;min-width:0}.lc-log-viewer__match{background-color:color-mix(in srgb,var(--color-warning-default) 45%,transparent);color:inherit;border-radius:2px;padding:0 1px}.lc-log-viewer--terminal .lc-log-viewer__match{background-color:#f9e2af40}.lc-log-viewer__jump-bottom{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border:1px solid var(--color-divider, #e5e7eb);border-radius:9999px;background-color:var(--color-surface);color:var(--color-text-primary);font-size:.75rem;font-family:var(--font-family-sans);cursor:pointer;box-shadow:var(--elevation-1);z-index:10;transition:background-color .15s}.lc-log-viewer__jump-bottom:hover{background-color:var(--color-surface-hover)}.lc-log-viewer__jump-bottom:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-500) 20%,transparent)}.lc-log-viewer--terminal .lc-log-viewer__jump-bottom{background-color:#313244;border-color:#45475a;color:#cdd6f4}.lc-log-viewer--terminal .lc-log-viewer__jump-bottom:hover{background-color:#45475a}.ansi-bold{font-weight:700}.ansi-italic{font-style:italic}.ansi-black{color:#45475a}.ansi-red{color:#f38ba8}.ansi-green{color:#a6e3a1}.ansi-yellow{color:#f9e2af}.ansi-blue{color:#89b4fa}.ansi-magenta{color:#cba6f7}.ansi-cyan{color:#94e2d5}.ansi-white{color:#cdd6f4}.ansi-gray{color:#6c7086}.ansi-bright-red{color:#eba0ac}.ansi-bright-green{color:#a6e3a1}.ansi-bright-yellow{color:#f9e2af}.ansi-bright-blue{color:#89dceb}.ansi-bright-magenta{color:#f5c2e7}.ansi-bright-cyan{color:#94e2d5}.ansi-bright-white{color:#bac2de}:root.light .lc-log-viewer--log .ansi-black{color:#4c4f69}:root.light .lc-log-viewer--log .ansi-red{color:#d20f39}:root.light .lc-log-viewer--log .ansi-green{color:#40a02b}:root.light .lc-log-viewer--log .ansi-yellow{color:#df8e1d}:root.light .lc-log-viewer--log .ansi-blue{color:#1e66f5}:root.light .lc-log-viewer--log .ansi-magenta{color:#8839ef}:root.light .lc-log-viewer--log .ansi-cyan{color:#179299}:root.light .lc-log-viewer--log .ansi-white{color:#6c6f85}:root.light .lc-log-viewer--log .ansi-gray{color:#9ca0b0}:root.light .lc-log-viewer--log .ansi-bright-red{color:#e64553}:root.light .lc-log-viewer--log .ansi-bright-green{color:#40a02b}:root.light .lc-log-viewer--log .ansi-bright-yellow{color:#df8e1d}:root.light .lc-log-viewer--log .ansi-bright-blue{color:#04a5e5}:root.light .lc-log-viewer--log .ansi-bright-magenta{color:#ea76cb}:root.light .lc-log-viewer--log .ansi-bright-cyan{color:#179299}:root.light .lc-log-viewer--log .ansi-bright-white{color:#5c5f77}@media(prefers-color-scheme:light){:root.system:not(.dark) .lc-log-viewer--log .ansi-black{color:#4c4f69}:root.system:not(.dark) .lc-log-viewer--log .ansi-red{color:#d20f39}:root.system:not(.dark) .lc-log-viewer--log .ansi-green{color:#40a02b}:root.system:not(.dark) .lc-log-viewer--log .ansi-yellow{color:#df8e1d}:root.system:not(.dark) .lc-log-viewer--log .ansi-blue{color:#1e66f5}:root.system:not(.dark) .lc-log-viewer--log .ansi-magenta{color:#8839ef}:root.system:not(.dark) .lc-log-viewer--log .ansi-cyan{color:#179299}:root.system:not(.dark) .lc-log-viewer--log .ansi-white{color:#6c6f85}:root.system:not(.dark) .lc-log-viewer--log .ansi-gray{color:#9ca0b0}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-red{color:#e64553}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-green{color:#40a02b}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-yellow{color:#df8e1d}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-blue{color:#04a5e5}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-magenta{color:#ea76cb}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-cyan{color:#179299}:root.system:not(.dark) .lc-log-viewer--log .ansi-bright-white{color:#5c5f77}}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar{width:8px;height:8px}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-track{background:#181825}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-thumb{background:#45475a;border-radius:4px}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-thumb:hover{background:#585b70}\n"]
|
|
548
548
|
}]
|
|
549
549
|
}],
|
|
550
550
|
ctorParameters: () => [],
|