@life-cockpit/angular-ui-kit 2.12.1 → 2.13.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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, PLATFORM_ID, signal, computed, Injectable, input, effect, isDevMode, ChangeDetectionStrategy, Component, TemplateRef, Directive, model, contentChild, contentChildren, untracked, output, ViewChild, ViewEncapsulation, HostListener, forwardRef, InjectionToken, ElementRef, viewChild, ChangeDetectorRef, EventEmitter, Output, Input, ViewChildren, HostBinding, ViewContainerRef, Renderer2, ContentChildren, ContentChild, linkedSignal,
|
|
2
|
+
import { inject, PLATFORM_ID, signal, computed, Injectable, input, effect, isDevMode, ChangeDetectionStrategy, Component, TemplateRef, Directive, model, contentChild, contentChildren, untracked, output, ViewChild, ViewEncapsulation, HostListener, forwardRef, InjectionToken, ElementRef, viewChild, ChangeDetectorRef, EventEmitter, Output, Input, ViewChildren, HostBinding, DestroyRef, ViewContainerRef, Renderer2, ContentChildren, ContentChild, linkedSignal, afterNextRender, SecurityContext, NgZone, ApplicationRef, EnvironmentInjector, createComponent } from '@angular/core';
|
|
3
3
|
import { isPlatformBrowser, NgTemplateOutlet, NgClass, CommonModule, NgStyle, SlicePipe } from '@angular/common';
|
|
4
4
|
import * as i1$4 from '@angular/platform-browser';
|
|
5
5
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
@@ -533,6 +533,27 @@ const ICON_FALLBACK_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
|
|
|
533
533
|
'<rect x="3.5" y="3.5" width="17" height="17" rx="3" stroke-dasharray="2.5 2.5" />' +
|
|
534
534
|
'<text x="12" y="16.5" text-anchor="middle" font-size="12" font-weight="700" font-family="system-ui, -apple-system, sans-serif" fill="currentColor" stroke="none">?</text>' +
|
|
535
535
|
'</svg>';
|
|
536
|
+
/**
|
|
537
|
+
* Icon names already reported to the console. A page with dozens of instances
|
|
538
|
+
* of the same typo must produce exactly one warning, not one per instance —
|
|
539
|
+
* and the warning fires in production too (unlike the old dev-only warning,
|
|
540
|
+
* which left prod incidents invisible in the console).
|
|
541
|
+
*/
|
|
542
|
+
const warnedIconNames = new Set();
|
|
543
|
+
function warnOnce(name, message) {
|
|
544
|
+
if (warnedIconNames.has(name))
|
|
545
|
+
return;
|
|
546
|
+
warnedIconNames.add(name);
|
|
547
|
+
console.warn(message);
|
|
548
|
+
}
|
|
549
|
+
/**
|
|
550
|
+
* Clears the warn-once-per-name registry. Only needed by unit tests that
|
|
551
|
+
* assert on console warnings across multiple cases.
|
|
552
|
+
* @internal
|
|
553
|
+
*/
|
|
554
|
+
function resetIconWarnings() {
|
|
555
|
+
warnedIconNames.clear();
|
|
556
|
+
}
|
|
536
557
|
/**
|
|
537
558
|
* Icon component - Tabler Icons wrapper for displaying SVG icons
|
|
538
559
|
*
|
|
@@ -543,10 +564,15 @@ const ICON_FALLBACK_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
|
|
|
543
564
|
* - Custom color support (CSS colors, variables)
|
|
544
565
|
* - Accessibility attributes (ARIA labels, decorative icons)
|
|
545
566
|
* - Dynamic SVG loading from Tabler Icons
|
|
546
|
-
* - Fail-loud on unknown names: a
|
|
547
|
-
* (never a silent empty space)
|
|
548
|
-
*
|
|
549
|
-
*
|
|
567
|
+
* - Fail-loud on unknown names: a console warning (once per name, in dev AND
|
|
568
|
+
* prod) + a visible placeholder (never a silent empty space) — and **no
|
|
569
|
+
* network request**, because in SPA deployments the server answers missing
|
|
570
|
+
* asset paths with the index.html fallback. See {@link ICON_NAMES} /
|
|
571
|
+
* {@link isValidIconName} for the canonical set of valid names, and
|
|
572
|
+
* {@link ICON_ALIASES} for the supported Heroicon/Material aliases.
|
|
573
|
+
* - Fetched responses are validated (content-type + parsed `<svg>` root)
|
|
574
|
+
* before anything is trusted — a non-SVG response (e.g. the SPA index.html
|
|
575
|
+
* fallback) is dropped and replaced by the placeholder.
|
|
550
576
|
*
|
|
551
577
|
* @example
|
|
552
578
|
* ```html
|
|
@@ -679,14 +705,18 @@ class IconComponent {
|
|
|
679
705
|
return;
|
|
680
706
|
}
|
|
681
707
|
// Fail loud on names outside the canonical set (typos, un-aliased
|
|
682
|
-
// Heroicon names, …)
|
|
683
|
-
//
|
|
684
|
-
//
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
708
|
+
// Heroicon names, …) — in dev AND prod, once per name. Crucially, an
|
|
709
|
+
// unknown name is never fetched: in SPA deployments the server answers
|
|
710
|
+
// missing asset paths with the index.html fallback (status 200), so a
|
|
711
|
+
// fetch for a typo'd name would come back as a full HTML document. The
|
|
712
|
+
// placeholder is rendered instead.
|
|
713
|
+
if (!isValidIconName(rawName)) {
|
|
714
|
+
warnOnce(rawName, `[lc-icon] Unknown icon "${rawName}". Use a Tabler name or a documented alias (see ICON_NAMES / ICON_ALIASES). Rendering a placeholder instead.`);
|
|
715
|
+
if (isDevMode() && this.strict()) {
|
|
688
716
|
throw new Error(`[lc-icon] Unknown icon "${rawName}" (strict mode). Use a Tabler name or a documented alias.`);
|
|
689
717
|
}
|
|
718
|
+
this.renderFallback();
|
|
719
|
+
return;
|
|
690
720
|
}
|
|
691
721
|
// Resolve aliases (Heroicon/Material -> Tabler)
|
|
692
722
|
const iconName = ICON_ALIASES[rawName] ?? rawName;
|
|
@@ -694,7 +724,12 @@ class IconComponent {
|
|
|
694
724
|
const inlineSvg = INLINE_ICON_SVGS[iconName]?.[iconVariant];
|
|
695
725
|
if (inlineSvg) {
|
|
696
726
|
const processed = this.processSvgString(inlineSvg);
|
|
697
|
-
|
|
727
|
+
if (processed !== null) {
|
|
728
|
+
this.setTrustedSvg(processed);
|
|
729
|
+
}
|
|
730
|
+
else {
|
|
731
|
+
this.renderFallback();
|
|
732
|
+
}
|
|
698
733
|
return;
|
|
699
734
|
}
|
|
700
735
|
// Fallback to HTTP loading (may not work in all environments)
|
|
@@ -709,7 +744,7 @@ class IconComponent {
|
|
|
709
744
|
// otherwise-valid icon stuck on the placeholder. A genuine 404 (missing
|
|
710
745
|
// asset) is not retried.
|
|
711
746
|
this.http
|
|
712
|
-
.get(path, { responseType: 'text' })
|
|
747
|
+
.get(path, { observe: 'response', responseType: 'text' })
|
|
713
748
|
.pipe(retry({
|
|
714
749
|
count: 2,
|
|
715
750
|
delay: (error, retryCount) => error instanceof HttpErrorResponse && error.status === 404
|
|
@@ -717,10 +752,24 @@ class IconComponent {
|
|
|
717
752
|
: timer(200 * retryCount),
|
|
718
753
|
}))
|
|
719
754
|
.subscribe({
|
|
720
|
-
next: (
|
|
721
|
-
//
|
|
722
|
-
|
|
723
|
-
|
|
755
|
+
next: (response) => {
|
|
756
|
+
// Validate before anything touches the DOM: SPA deployments answer
|
|
757
|
+
// missing asset paths with `index.html` and status 200 — that
|
|
758
|
+
// document must be dropped, never injected. A text/html content-type
|
|
759
|
+
// is rejected outright; everything else must parse as a standalone
|
|
760
|
+
// <svg> document (see processSvgString).
|
|
761
|
+
const contentType = response.headers.get('content-type') ?? '';
|
|
762
|
+
const processed = contentType.includes('text/html')
|
|
763
|
+
? null
|
|
764
|
+
: this.processSvgString(response.body ?? '');
|
|
765
|
+
if (processed === null) {
|
|
766
|
+
warnOnce(rawName, `[lc-icon] "${rawName}": ${path} returned non-SVG content` +
|
|
767
|
+
(contentType ? ` (${contentType})` : '') +
|
|
768
|
+
' — dropped. In SPA deployments this is typically the index.html fallback for a missing asset.');
|
|
769
|
+
this.renderFallback();
|
|
770
|
+
return;
|
|
771
|
+
}
|
|
772
|
+
this.setTrustedSvg(processed);
|
|
724
773
|
},
|
|
725
774
|
error: () => {
|
|
726
775
|
// Asset missing or unreachable: render a visible placeholder so the
|
|
@@ -728,23 +777,53 @@ class IconComponent {
|
|
|
728
777
|
// already reported above; a known-but-unloadable name (e.g. offline,
|
|
729
778
|
// SSR, or unit tests where assets are not served) stays quiet here to
|
|
730
779
|
// avoid console noise.
|
|
731
|
-
|
|
732
|
-
this.svgContent.set(this.sanitizer.bypassSecurityTrustHtml(processed));
|
|
780
|
+
this.renderFallback();
|
|
733
781
|
},
|
|
734
782
|
});
|
|
735
783
|
});
|
|
736
784
|
}
|
|
737
785
|
/**
|
|
738
|
-
*
|
|
786
|
+
* The single funnel to `bypassSecurityTrustHtml`. The bypass is only safe
|
|
787
|
+
* because every caller passes the output of {@link processSvgString}, which
|
|
788
|
+
* guarantees the markup is a parsed and re-serialized standalone `<svg>`
|
|
789
|
+
* document — never raw fetched text. Do NOT add callers that skip that
|
|
790
|
+
* validation, and do NOT "simplify" the gates away: without them, a SPA
|
|
791
|
+
* server's index.html fallback (status 200, text/html) gets injected into
|
|
792
|
+
* the page once per icon instance.
|
|
793
|
+
* @private
|
|
794
|
+
*/
|
|
795
|
+
setTrustedSvg(processedSvg) {
|
|
796
|
+
this.svgContent.set(this.sanitizer.bypassSecurityTrustHtml(processedSvg));
|
|
797
|
+
}
|
|
798
|
+
/**
|
|
799
|
+
* Renders the visible "?" placeholder for anything that cannot be resolved
|
|
800
|
+
* to a real icon (unknown name, failed load, non-SVG response).
|
|
801
|
+
* @private
|
|
802
|
+
*/
|
|
803
|
+
renderFallback() {
|
|
804
|
+
this.setTrustedSvg(this.processSvgString(ICON_FALLBACK_SVG) ?? ICON_FALLBACK_SVG);
|
|
805
|
+
}
|
|
806
|
+
/**
|
|
807
|
+
* Parse an SVG string and add size, color, and accessibility attributes.
|
|
808
|
+
*
|
|
809
|
+
* Returns `null` when the input is not a standalone SVG document — a parse
|
|
810
|
+
* error, or a non-`<svg>` root such as an HTML page. Callers must treat
|
|
811
|
+
* `null` as "do not render"; the raw input is never passed through.
|
|
739
812
|
* @private
|
|
740
813
|
*/
|
|
741
814
|
processSvgString(svgText) {
|
|
742
815
|
// Parse as DOM to manipulate
|
|
743
816
|
const parser = new DOMParser();
|
|
744
817
|
const doc = parser.parseFromString(svgText, 'image/svg+xml');
|
|
745
|
-
const svg = doc.
|
|
746
|
-
|
|
747
|
-
|
|
818
|
+
const svg = doc.documentElement;
|
|
819
|
+
// Reject anything that is not a clean, standalone <svg> document. On
|
|
820
|
+
// parse errors DOMParser yields a <parsererror> root (Firefox) or embeds
|
|
821
|
+
// a <parsererror> element in partially-parsed output (Chromium) — both
|
|
822
|
+
// must never reach the DOM.
|
|
823
|
+
if (svg.nodeName.toLowerCase() !== 'svg' ||
|
|
824
|
+
doc.getElementsByTagName('parsererror').length > 0) {
|
|
825
|
+
return null;
|
|
826
|
+
}
|
|
748
827
|
// Set size
|
|
749
828
|
const size = this.sizeInPixels();
|
|
750
829
|
svg.setAttribute('width', size);
|
|
@@ -5155,6 +5234,244 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
5155
5234
|
args: ['attr.tabindex']
|
|
5156
5235
|
}] } });
|
|
5157
5236
|
|
|
5237
|
+
/**
|
|
5238
|
+
* Resizable two-pane layout container.
|
|
5239
|
+
*
|
|
5240
|
+
* Projects two panes (`slot="start"`, `slot="end"`) side by side with a
|
|
5241
|
+
* draggable separator in between. The start pane has a fixed, user-adjustable
|
|
5242
|
+
* width; the end pane fills the remaining space.
|
|
5243
|
+
*
|
|
5244
|
+
* Features:
|
|
5245
|
+
* - Drag the separator with mouse / touch (pointer capture), bounded by
|
|
5246
|
+
* `minSize` / `maxSize` (px or percentage of the container)
|
|
5247
|
+
* - Double-click the separator to restore `initialSize`
|
|
5248
|
+
* - Keyboard resizing: focusable separator, ←/→ adjust by `step`,
|
|
5249
|
+
* Home/End jump to min/max (`role="separator"`, `aria-valuenow`)
|
|
5250
|
+
* - Optional persistence: with `storageKey`, the width survives a reload
|
|
5251
|
+
* - Below the `stackBelow` viewport breakpoint the panes stack vertically
|
|
5252
|
+
* and the resizer is disabled
|
|
5253
|
+
*
|
|
5254
|
+
* @example
|
|
5255
|
+
* ```html
|
|
5256
|
+
* <lc-split-pane
|
|
5257
|
+
* [initialSize]="360"
|
|
5258
|
+
* [minSize]="280"
|
|
5259
|
+
* [maxSize]="'55%'"
|
|
5260
|
+
* storageKey="sidebar-width"
|
|
5261
|
+
* (sizeChange)="onWidthChange($event)"
|
|
5262
|
+
* >
|
|
5263
|
+
* <div slot="start">…</div>
|
|
5264
|
+
* <div slot="end">…</div>
|
|
5265
|
+
* </lc-split-pane>
|
|
5266
|
+
* ```
|
|
5267
|
+
*/
|
|
5268
|
+
class SplitPaneComponent {
|
|
5269
|
+
/** Initial width of the start pane in px. Restored on separator double-click. */
|
|
5270
|
+
initialSize = input(320, ...(ngDevMode ? [{ debugName: "initialSize" }] : /* istanbul ignore next */ []));
|
|
5271
|
+
/** Minimum width of the start pane in px. */
|
|
5272
|
+
minSize = input(0, ...(ngDevMode ? [{ debugName: "minSize" }] : /* istanbul ignore next */ []));
|
|
5273
|
+
/**
|
|
5274
|
+
* Maximum width of the start pane: a number (px) or a percentage string
|
|
5275
|
+
* such as `'55%'` (relative to the container width). `null` = no limit
|
|
5276
|
+
* beyond the container itself.
|
|
5277
|
+
*/
|
|
5278
|
+
maxSize = input(null, ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
|
|
5279
|
+
/**
|
|
5280
|
+
* When set, the current width is persisted to localStorage under this key
|
|
5281
|
+
* and restored on the next init.
|
|
5282
|
+
*/
|
|
5283
|
+
storageKey = input(...(ngDevMode ? [undefined, { debugName: "storageKey" }] : /* istanbul ignore next */ []));
|
|
5284
|
+
/** Step in px for keyboard resizing (←/→ on the focused separator). */
|
|
5285
|
+
step = input(16, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
|
|
5286
|
+
/**
|
|
5287
|
+
* Viewport width in px below which the panes stack vertically and the
|
|
5288
|
+
* resizer is disabled. `0` disables stacking.
|
|
5289
|
+
*/
|
|
5290
|
+
stackBelow = input(0, ...(ngDevMode ? [{ debugName: "stackBelow" }] : /* istanbul ignore next */ []));
|
|
5291
|
+
/** Accessible label for the separator. */
|
|
5292
|
+
separatorLabel = input('Resize panel', ...(ngDevMode ? [{ debugName: "separatorLabel" }] : /* istanbul ignore next */ []));
|
|
5293
|
+
/** Emitted whenever the start-pane width changes (drag, keyboard, reset). */
|
|
5294
|
+
sizeChange = output();
|
|
5295
|
+
host = inject(ElementRef);
|
|
5296
|
+
destroyRef = inject(DestroyRef);
|
|
5297
|
+
/** Requested start-pane width; clamped to min/max for rendering. */
|
|
5298
|
+
size = signal(0, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
5299
|
+
/** Container width, tracked so percentage `maxSize` stays responsive. */
|
|
5300
|
+
containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "containerWidth" }] : /* istanbul ignore next */ []));
|
|
5301
|
+
/** Whether the panes are stacked (viewport below `stackBelow`). */
|
|
5302
|
+
stacked = signal(false, ...(ngDevMode ? [{ debugName: "stacked" }] : /* istanbul ignore next */ []));
|
|
5303
|
+
dragPointerId = null;
|
|
5304
|
+
dragStartX = 0;
|
|
5305
|
+
dragStartSize = 0;
|
|
5306
|
+
/** Clamped width actually applied to the start pane. */
|
|
5307
|
+
effectiveSize = computed(() => this.clamp(this.size()), ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
|
|
5308
|
+
/** Resolved max in px for aria-valuemax; null when unbounded. */
|
|
5309
|
+
ariaMax = computed(() => {
|
|
5310
|
+
const max = this.resolveMaxPx();
|
|
5311
|
+
return Number.isFinite(max) && max < Number.MAX_SAFE_INTEGER
|
|
5312
|
+
? Math.round(max)
|
|
5313
|
+
: null;
|
|
5314
|
+
}, ...(ngDevMode ? [{ debugName: "ariaMax" }] : /* istanbul ignore next */ []));
|
|
5315
|
+
constructor() {
|
|
5316
|
+
// Track the stacking breakpoint reactively; re-subscribes when the
|
|
5317
|
+
// `stackBelow` input changes.
|
|
5318
|
+
effect((onCleanup) => {
|
|
5319
|
+
const breakpoint = this.stackBelow();
|
|
5320
|
+
if (!breakpoint ||
|
|
5321
|
+
typeof window === 'undefined' ||
|
|
5322
|
+
typeof window.matchMedia !== 'function') {
|
|
5323
|
+
this.stacked.set(false);
|
|
5324
|
+
return;
|
|
5325
|
+
}
|
|
5326
|
+
const query = window.matchMedia(`(max-width: ${breakpoint - 0.02}px)`);
|
|
5327
|
+
this.stacked.set(query.matches);
|
|
5328
|
+
const onChange = (event) => this.stacked.set(event.matches);
|
|
5329
|
+
query.addEventListener('change', onChange);
|
|
5330
|
+
onCleanup(() => query.removeEventListener('change', onChange));
|
|
5331
|
+
});
|
|
5332
|
+
}
|
|
5333
|
+
ngOnInit() {
|
|
5334
|
+
this.size.set(this.restoreSize() ?? this.initialSize());
|
|
5335
|
+
this.observeContainer();
|
|
5336
|
+
}
|
|
5337
|
+
/** Restore the initial width (also wired to separator double-click). */
|
|
5338
|
+
reset() {
|
|
5339
|
+
this.applySize(this.initialSize());
|
|
5340
|
+
this.persist();
|
|
5341
|
+
}
|
|
5342
|
+
onPointerDown(event) {
|
|
5343
|
+
const separator = event.currentTarget;
|
|
5344
|
+
try {
|
|
5345
|
+
separator.setPointerCapture?.(event.pointerId);
|
|
5346
|
+
}
|
|
5347
|
+
catch {
|
|
5348
|
+
// Synthetic events carry no active pointer — dragging still works as
|
|
5349
|
+
// long as the pointer stays over the separator.
|
|
5350
|
+
}
|
|
5351
|
+
this.dragPointerId = event.pointerId;
|
|
5352
|
+
this.dragStartX = event.clientX;
|
|
5353
|
+
this.dragStartSize = this.effectiveSize();
|
|
5354
|
+
event.preventDefault();
|
|
5355
|
+
}
|
|
5356
|
+
onPointerMove(event) {
|
|
5357
|
+
if (this.dragPointerId !== event.pointerId)
|
|
5358
|
+
return;
|
|
5359
|
+
this.applySize(this.dragStartSize + (event.clientX - this.dragStartX));
|
|
5360
|
+
}
|
|
5361
|
+
onPointerUp(event) {
|
|
5362
|
+
if (this.dragPointerId !== event.pointerId)
|
|
5363
|
+
return;
|
|
5364
|
+
this.dragPointerId = null;
|
|
5365
|
+
try {
|
|
5366
|
+
event.currentTarget.releasePointerCapture?.(event.pointerId);
|
|
5367
|
+
}
|
|
5368
|
+
catch {
|
|
5369
|
+
// No capture to release — nothing to do.
|
|
5370
|
+
}
|
|
5371
|
+
this.persist();
|
|
5372
|
+
}
|
|
5373
|
+
onKeydown(event) {
|
|
5374
|
+
let next;
|
|
5375
|
+
switch (event.key) {
|
|
5376
|
+
case 'ArrowLeft':
|
|
5377
|
+
next = this.effectiveSize() - this.step();
|
|
5378
|
+
break;
|
|
5379
|
+
case 'ArrowRight':
|
|
5380
|
+
next = this.effectiveSize() + this.step();
|
|
5381
|
+
break;
|
|
5382
|
+
case 'Home':
|
|
5383
|
+
next = this.minSize();
|
|
5384
|
+
break;
|
|
5385
|
+
case 'End':
|
|
5386
|
+
next = this.resolveMaxPx();
|
|
5387
|
+
break;
|
|
5388
|
+
default:
|
|
5389
|
+
return;
|
|
5390
|
+
}
|
|
5391
|
+
event.preventDefault();
|
|
5392
|
+
this.applySize(next);
|
|
5393
|
+
this.persist();
|
|
5394
|
+
}
|
|
5395
|
+
// ── internals ──────────────────────────────────────────────────────────────
|
|
5396
|
+
applySize(px) {
|
|
5397
|
+
const clamped = this.clamp(px);
|
|
5398
|
+
const previous = this.effectiveSize();
|
|
5399
|
+
// Always store the clamped value so deltas can't accumulate off-limits.
|
|
5400
|
+
this.size.set(clamped);
|
|
5401
|
+
if (clamped !== previous) {
|
|
5402
|
+
this.sizeChange.emit(clamped);
|
|
5403
|
+
}
|
|
5404
|
+
}
|
|
5405
|
+
clamp(px) {
|
|
5406
|
+
const min = this.minSize();
|
|
5407
|
+
const max = Math.max(min, this.resolveMaxPx());
|
|
5408
|
+
return Math.min(Math.max(px, min), max);
|
|
5409
|
+
}
|
|
5410
|
+
resolveMaxPx() {
|
|
5411
|
+
const raw = this.maxSize();
|
|
5412
|
+
const width = this.containerWidth();
|
|
5413
|
+
if (raw == null) {
|
|
5414
|
+
return width > 0 ? width : Number.MAX_SAFE_INTEGER;
|
|
5415
|
+
}
|
|
5416
|
+
if (typeof raw === 'number')
|
|
5417
|
+
return raw;
|
|
5418
|
+
const trimmed = raw.trim();
|
|
5419
|
+
const value = parseFloat(trimmed);
|
|
5420
|
+
if (Number.isNaN(value))
|
|
5421
|
+
return Number.MAX_SAFE_INTEGER;
|
|
5422
|
+
if (trimmed.endsWith('%')) {
|
|
5423
|
+
return width > 0 ? (width * value) / 100 : Number.MAX_SAFE_INTEGER;
|
|
5424
|
+
}
|
|
5425
|
+
return value;
|
|
5426
|
+
}
|
|
5427
|
+
observeContainer() {
|
|
5428
|
+
const element = this.host.nativeElement;
|
|
5429
|
+
this.containerWidth.set(element.clientWidth || 0);
|
|
5430
|
+
if (typeof ResizeObserver === 'undefined')
|
|
5431
|
+
return;
|
|
5432
|
+
const observer = new ResizeObserver((entries) => {
|
|
5433
|
+
const width = entries[0]?.contentRect.width ?? 0;
|
|
5434
|
+
this.containerWidth.set(width);
|
|
5435
|
+
});
|
|
5436
|
+
observer.observe(element);
|
|
5437
|
+
this.destroyRef.onDestroy(() => observer.disconnect());
|
|
5438
|
+
}
|
|
5439
|
+
storageId() {
|
|
5440
|
+
const key = this.storageKey();
|
|
5441
|
+
return key ? `lc-split-pane:${key}` : null;
|
|
5442
|
+
}
|
|
5443
|
+
restoreSize() {
|
|
5444
|
+
const id = this.storageId();
|
|
5445
|
+
if (!id)
|
|
5446
|
+
return null;
|
|
5447
|
+
try {
|
|
5448
|
+
const raw = globalThis.localStorage?.getItem(id);
|
|
5449
|
+
const parsed = raw == null ? NaN : parseFloat(raw);
|
|
5450
|
+
return Number.isFinite(parsed) ? parsed : null;
|
|
5451
|
+
}
|
|
5452
|
+
catch {
|
|
5453
|
+
return null;
|
|
5454
|
+
}
|
|
5455
|
+
}
|
|
5456
|
+
persist() {
|
|
5457
|
+
const id = this.storageId();
|
|
5458
|
+
if (!id)
|
|
5459
|
+
return;
|
|
5460
|
+
try {
|
|
5461
|
+
globalThis.localStorage?.setItem(id, String(this.effectiveSize()));
|
|
5462
|
+
}
|
|
5463
|
+
catch {
|
|
5464
|
+
// Storage unavailable (SSR, private mode) — width simply won't persist.
|
|
5465
|
+
}
|
|
5466
|
+
}
|
|
5467
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SplitPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5468
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: SplitPaneComponent, isStandalone: true, selector: "lc-split-pane", inputs: { initialSize: { classPropertyName: "initialSize", publicName: "initialSize", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, stackBelow: { classPropertyName: "stackBelow", publicName: "stackBelow", isSignal: true, isRequired: false, transformFunction: null }, separatorLabel: { classPropertyName: "separatorLabel", publicName: "separatorLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sizeChange: "sizeChange" }, ngImport: i0, template: "<div class=\"lc-split-pane\" [class.lc-split-pane--stacked]=\"stacked()\">\n <div\n class=\"lc-split-pane__pane lc-split-pane__pane--start\"\n [style.flex-basis.px]=\"stacked() ? null : effectiveSize()\"\n >\n <ng-content select=\"[slot=start]\" />\n </div>\n\n @if (!stacked()) {\n <div\n class=\"lc-split-pane__separator\"\n role=\"separator\"\n tabindex=\"0\"\n aria-orientation=\"vertical\"\n [attr.aria-label]=\"separatorLabel()\"\n [attr.aria-valuenow]=\"effectiveSize()\"\n [attr.aria-valuemin]=\"minSize()\"\n [attr.aria-valuemax]=\"ariaMax()\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp($event)\"\n (pointercancel)=\"onPointerUp($event)\"\n (dblclick)=\"reset()\"\n (keydown)=\"onKeydown($event)\"\n ></div>\n }\n\n <div class=\"lc-split-pane__pane lc-split-pane__pane--end\">\n <ng-content select=\"[slot=end]\" />\n </div>\n</div>\n", styles: [":host{display:block;height:100%;min-height:0}.lc-split-pane{display:flex;align-items:stretch;width:100%;height:100%;min-height:0}.lc-split-pane__pane{min-width:0;min-height:0;overflow:hidden}.lc-split-pane__pane--start{flex:0 0 auto}.lc-split-pane__pane--end{flex:1 1 auto}.lc-split-pane__separator{flex:0 0 auto;width:8px;cursor:col-resize;touch-action:none;position:relative;background:transparent;outline:none}.lc-split-pane__separator:before{content:\"\";position:absolute;inset-block:0;left:50%;width:1px;transform:translate(-50%);background:var(--color-border);transition:background-color .15s ease,width .15s ease}.lc-split-pane__separator:hover:before,.lc-split-pane__separator:active:before{width:3px;background:var(--color-primary-500)}.lc-split-pane__separator:focus-visible:before{width:3px;background:var(--color-primary-500)}.lc-split-pane--stacked{flex-direction:column}.lc-split-pane--stacked .lc-split-pane__pane--start{flex:0 0 auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5469
|
+
}
|
|
5470
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SplitPaneComponent, decorators: [{
|
|
5471
|
+
type: Component,
|
|
5472
|
+
args: [{ selector: 'lc-split-pane', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-split-pane\" [class.lc-split-pane--stacked]=\"stacked()\">\n <div\n class=\"lc-split-pane__pane lc-split-pane__pane--start\"\n [style.flex-basis.px]=\"stacked() ? null : effectiveSize()\"\n >\n <ng-content select=\"[slot=start]\" />\n </div>\n\n @if (!stacked()) {\n <div\n class=\"lc-split-pane__separator\"\n role=\"separator\"\n tabindex=\"0\"\n aria-orientation=\"vertical\"\n [attr.aria-label]=\"separatorLabel()\"\n [attr.aria-valuenow]=\"effectiveSize()\"\n [attr.aria-valuemin]=\"minSize()\"\n [attr.aria-valuemax]=\"ariaMax()\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp($event)\"\n (pointercancel)=\"onPointerUp($event)\"\n (dblclick)=\"reset()\"\n (keydown)=\"onKeydown($event)\"\n ></div>\n }\n\n <div class=\"lc-split-pane__pane lc-split-pane__pane--end\">\n <ng-content select=\"[slot=end]\" />\n </div>\n</div>\n", styles: [":host{display:block;height:100%;min-height:0}.lc-split-pane{display:flex;align-items:stretch;width:100%;height:100%;min-height:0}.lc-split-pane__pane{min-width:0;min-height:0;overflow:hidden}.lc-split-pane__pane--start{flex:0 0 auto}.lc-split-pane__pane--end{flex:1 1 auto}.lc-split-pane__separator{flex:0 0 auto;width:8px;cursor:col-resize;touch-action:none;position:relative;background:transparent;outline:none}.lc-split-pane__separator:before{content:\"\";position:absolute;inset-block:0;left:50%;width:1px;transform:translate(-50%);background:var(--color-border);transition:background-color .15s ease,width .15s ease}.lc-split-pane__separator:hover:before,.lc-split-pane__separator:active:before{width:3px;background:var(--color-primary-500)}.lc-split-pane__separator:focus-visible:before{width:3px;background:var(--color-primary-500)}.lc-split-pane--stacked{flex-direction:column}.lc-split-pane--stacked .lc-split-pane__pane--start{flex:0 0 auto}\n"] }]
|
|
5473
|
+
}], ctorParameters: () => [], propDecorators: { initialSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSize", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], storageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "storageKey", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], stackBelow: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackBelow", required: false }] }], separatorLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorLabel", required: false }] }], sizeChange: [{ type: i0.Output, args: ["sizeChange"] }] } });
|
|
5474
|
+
|
|
5158
5475
|
/**
|
|
5159
5476
|
* Stack component for flexbox-based layout composition.
|
|
5160
5477
|
*
|
|
@@ -6143,11 +6460,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
6143
6460
|
* - Ellipsis collapse for long paths with maxItems
|
|
6144
6461
|
* - Multiple size variants (sm, md, lg)
|
|
6145
6462
|
* - Router link support for navigation items
|
|
6463
|
+
* - Items without `url` render as buttons and emit `itemClick` (for in-memory
|
|
6464
|
+
* state navigation instead of routing)
|
|
6146
6465
|
* - Accessible with ARIA breadcrumb landmark
|
|
6147
6466
|
*
|
|
6148
6467
|
* @example
|
|
6149
6468
|
* ```html
|
|
6150
6469
|
* <lc-breadcrumbs [items]="[{label: 'Home', url: '/'}, {label: 'Settings'}]" />
|
|
6470
|
+
*
|
|
6471
|
+
* <!-- state-based navigation without routes -->
|
|
6472
|
+
* <lc-breadcrumbs
|
|
6473
|
+
* [items]="[{label: 'Root', id: 'root'}, {label: 'Child', id: 'c1'}]"
|
|
6474
|
+
* (itemClick)="activate($event)"
|
|
6475
|
+
* />
|
|
6151
6476
|
* ```
|
|
6152
6477
|
*/
|
|
6153
6478
|
class BreadcrumbsComponent {
|
|
@@ -6156,6 +6481,11 @@ class BreadcrumbsComponent {
|
|
|
6156
6481
|
maxItems = input(0, ...(ngDevMode ? [{ debugName: "maxItems" }] : /* istanbul ignore next */ []));
|
|
6157
6482
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
6158
6483
|
ariaLabel = input('Breadcrumbs', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
6484
|
+
/**
|
|
6485
|
+
* Emitted when an item without `url` is activated. Items with `url` keep
|
|
6486
|
+
* their link navigation and do not emit.
|
|
6487
|
+
*/
|
|
6488
|
+
itemClick = output();
|
|
6159
6489
|
// Computed CSS classes
|
|
6160
6490
|
breadcrumbClasses = computed(() => {
|
|
6161
6491
|
const classes = ['lc-breadcrumbs'];
|
|
@@ -6189,13 +6519,17 @@ class BreadcrumbsComponent {
|
|
|
6189
6519
|
isEllipsis(item) {
|
|
6190
6520
|
return item.label === '...';
|
|
6191
6521
|
}
|
|
6522
|
+
// Handle activation of an item without url
|
|
6523
|
+
onItemClick(item) {
|
|
6524
|
+
this.itemClick.emit(item);
|
|
6525
|
+
}
|
|
6192
6526
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6193
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: BreadcrumbsComponent, isStandalone: true, selector: "lc-breadcrumbs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (items().length > 0) {\n <nav [attr.aria-label]=\"ariaLabel()\">\n <ol [ngClass]=\"breadcrumbClasses()\">\n @for (item of visibleItems(); track item; let i = $index) {\n <li class=\"lc-breadcrumbs__item\">\n @if (isLastItem(i)) {\n <span class=\"lc-breadcrumbs__current\" aria-current=\"page\">\n {{ item.label }}\n </span>\n } @else if (isEllipsis(item)) {\n <span class=\"lc-breadcrumbs__ellipsis\" aria-hidden=\"true\">\n {{ item.label }}\n </span>\n } @else {\n <a\n [routerLink]=\"item.url\"\n class=\"lc-breadcrumbs__link\"\n >\n {{ item.label }}\n </a>\n }\n \n @if (!isLastItem(i)) {\n <span class=\"lc-breadcrumbs__separator\" aria-hidden=\"true\">\n {{ separator() }}\n </span>\n }\n </li>\n }\n </ol>\n \n <!-- Support for additional content projection -->\n <ng-content></ng-content>\n </nav>\n}\n", styles: [".lc-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0}.lc-breadcrumbs--sm{font-size:var(--font-size-xs);gap:var(--lc-density-gap-xs, var(--spacing-1))}.lc-breadcrumbs--sm .lc-breadcrumbs__separator{margin:0 var(--spacing-1)}.lc-breadcrumbs--md{font-size:var(--font-size-sm);gap:var(--lc-density-gap-sm, var(--spacing-2))}.lc-breadcrumbs--md .lc-breadcrumbs__separator{margin:0 var(--spacing-2)}.lc-breadcrumbs--lg{font-size:var(--font-size-base);gap:var(--spacing-3)}.lc-breadcrumbs--lg .lc-breadcrumbs__separator{margin:0 var(--spacing-3)}.lc-breadcrumbs__item{display:flex;align-items:center;list-style:none}.lc-breadcrumbs__link{color:var(--color-primary-600);text-decoration:none;transition:all var(--transition-normal);border-radius:var(--border-radius-sm);padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}.lc-breadcrumbs__link:hover{color:var(--color-primary-700);background-color:var(--color-primary-50);text-decoration:underline}.lc-breadcrumbs__link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-breadcrumbs__link:active{color:var(--color-primary-800)}.lc-breadcrumbs__current{color:var(--color-text-primary);font-weight:var(--font-weight-medium);padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}.lc-breadcrumbs__separator{color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none;pointer-events:none}.lc-breadcrumbs__ellipsis{color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none;pointer-events:none;padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}@media(max-width:768px){.lc-breadcrumbs--md{font-size:var(--font-size-xs);gap:var(--spacing-1)}.lc-breadcrumbs--md .lc-breadcrumbs__separator{margin:0 var(--spacing-1)}.lc-breadcrumbs--lg{font-size:var(--font-size-sm);gap:var(--spacing-2)}.lc-breadcrumbs--lg .lc-breadcrumbs__separator{margin:0 var(--spacing-2)}.lc-breadcrumbs__link,.lc-breadcrumbs__current,.lc-breadcrumbs__ellipsis{padding:var(--spacing-0\\.5) var(--spacing-1);margin:calc(var(--spacing-0\\.5) * -1) calc(var(--spacing-1) * -1)}}.lc-breadcrumbs__link,.lc-breadcrumbs__current{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.lc-breadcrumbs__link,.lc-breadcrumbs__current{max-width:150px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6527
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: BreadcrumbsComponent, isStandalone: true, selector: "lc-breadcrumbs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "@if (items().length > 0) {\n <nav [attr.aria-label]=\"ariaLabel()\">\n <ol [ngClass]=\"breadcrumbClasses()\">\n @for (item of visibleItems(); track item; let i = $index) {\n <li class=\"lc-breadcrumbs__item\">\n @if (isLastItem(i)) {\n <span class=\"lc-breadcrumbs__current\" aria-current=\"page\">\n {{ item.label }}\n </span>\n } @else if (isEllipsis(item)) {\n <span class=\"lc-breadcrumbs__ellipsis\" aria-hidden=\"true\">\n {{ item.label }}\n </span>\n } @else if (item.url) {\n <a\n [routerLink]=\"item.url\"\n class=\"lc-breadcrumbs__link\"\n >\n {{ item.label }}\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"lc-breadcrumbs__link lc-breadcrumbs__link--button\"\n (click)=\"onItemClick(item)\"\n >\n {{ item.label }}\n </button>\n }\n \n @if (!isLastItem(i)) {\n <span class=\"lc-breadcrumbs__separator\" aria-hidden=\"true\">\n {{ separator() }}\n </span>\n }\n </li>\n }\n </ol>\n \n <!-- Support for additional content projection -->\n <ng-content></ng-content>\n </nav>\n}\n", styles: [".lc-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0}.lc-breadcrumbs--sm{font-size:var(--font-size-xs);gap:var(--lc-density-gap-xs, var(--spacing-1))}.lc-breadcrumbs--sm .lc-breadcrumbs__separator{margin:0 var(--spacing-1)}.lc-breadcrumbs--md{font-size:var(--font-size-sm);gap:var(--lc-density-gap-sm, var(--spacing-2))}.lc-breadcrumbs--md .lc-breadcrumbs__separator{margin:0 var(--spacing-2)}.lc-breadcrumbs--lg{font-size:var(--font-size-base);gap:var(--spacing-3)}.lc-breadcrumbs--lg .lc-breadcrumbs__separator{margin:0 var(--spacing-3)}.lc-breadcrumbs__item{display:flex;align-items:center;list-style:none}.lc-breadcrumbs__link{color:var(--color-primary-600);text-decoration:none;transition:all var(--transition-normal);border-radius:var(--border-radius-sm);padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}.lc-breadcrumbs__link:hover{color:var(--color-primary-700);background-color:var(--color-primary-50);text-decoration:underline}.lc-breadcrumbs__link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-breadcrumbs__link:active{color:var(--color-primary-800)}.lc-breadcrumbs__link--button{appearance:none;background:none;border:none;font:inherit;cursor:pointer}.lc-breadcrumbs__current{color:var(--color-text-primary);font-weight:var(--font-weight-medium);padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}.lc-breadcrumbs__separator{color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none;pointer-events:none}.lc-breadcrumbs__ellipsis{color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none;pointer-events:none;padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}@media(max-width:768px){.lc-breadcrumbs--md{font-size:var(--font-size-xs);gap:var(--spacing-1)}.lc-breadcrumbs--md .lc-breadcrumbs__separator{margin:0 var(--spacing-1)}.lc-breadcrumbs--lg{font-size:var(--font-size-sm);gap:var(--spacing-2)}.lc-breadcrumbs--lg .lc-breadcrumbs__separator{margin:0 var(--spacing-2)}.lc-breadcrumbs__link,.lc-breadcrumbs__current,.lc-breadcrumbs__ellipsis{padding:var(--spacing-0\\.5) var(--spacing-1);margin:calc(var(--spacing-0\\.5) * -1) calc(var(--spacing-1) * -1)}}.lc-breadcrumbs__link,.lc-breadcrumbs__current{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.lc-breadcrumbs__link,.lc-breadcrumbs__current{max-width:150px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6194
6528
|
}
|
|
6195
6529
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
|
|
6196
6530
|
type: Component,
|
|
6197
|
-
args: [{ selector: 'lc-breadcrumbs', imports: [NgClass, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (items().length > 0) {\n <nav [attr.aria-label]=\"ariaLabel()\">\n <ol [ngClass]=\"breadcrumbClasses()\">\n @for (item of visibleItems(); track item; let i = $index) {\n <li class=\"lc-breadcrumbs__item\">\n @if (isLastItem(i)) {\n <span class=\"lc-breadcrumbs__current\" aria-current=\"page\">\n {{ item.label }}\n </span>\n } @else if (isEllipsis(item)) {\n <span class=\"lc-breadcrumbs__ellipsis\" aria-hidden=\"true\">\n {{ item.label }}\n </span>\n } @else {\n <a\n [routerLink]=\"item.url\"\n class=\"lc-breadcrumbs__link\"\n >\n {{ item.label }}\n </a>\n }\n \n @if (!isLastItem(i)) {\n <span class=\"lc-breadcrumbs__separator\" aria-hidden=\"true\">\n {{ separator() }}\n </span>\n }\n </li>\n }\n </ol>\n \n <!-- Support for additional content projection -->\n <ng-content></ng-content>\n </nav>\n}\n", styles: [".lc-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0}.lc-breadcrumbs--sm{font-size:var(--font-size-xs);gap:var(--lc-density-gap-xs, var(--spacing-1))}.lc-breadcrumbs--sm .lc-breadcrumbs__separator{margin:0 var(--spacing-1)}.lc-breadcrumbs--md{font-size:var(--font-size-sm);gap:var(--lc-density-gap-sm, var(--spacing-2))}.lc-breadcrumbs--md .lc-breadcrumbs__separator{margin:0 var(--spacing-2)}.lc-breadcrumbs--lg{font-size:var(--font-size-base);gap:var(--spacing-3)}.lc-breadcrumbs--lg .lc-breadcrumbs__separator{margin:0 var(--spacing-3)}.lc-breadcrumbs__item{display:flex;align-items:center;list-style:none}.lc-breadcrumbs__link{color:var(--color-primary-600);text-decoration:none;transition:all var(--transition-normal);border-radius:var(--border-radius-sm);padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}.lc-breadcrumbs__link:hover{color:var(--color-primary-700);background-color:var(--color-primary-50);text-decoration:underline}.lc-breadcrumbs__link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-breadcrumbs__link:active{color:var(--color-primary-800)}.lc-breadcrumbs__current{color:var(--color-text-primary);font-weight:var(--font-weight-medium);padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}.lc-breadcrumbs__separator{color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none;pointer-events:none}.lc-breadcrumbs__ellipsis{color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none;pointer-events:none;padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}@media(max-width:768px){.lc-breadcrumbs--md{font-size:var(--font-size-xs);gap:var(--spacing-1)}.lc-breadcrumbs--md .lc-breadcrumbs__separator{margin:0 var(--spacing-1)}.lc-breadcrumbs--lg{font-size:var(--font-size-sm);gap:var(--spacing-2)}.lc-breadcrumbs--lg .lc-breadcrumbs__separator{margin:0 var(--spacing-2)}.lc-breadcrumbs__link,.lc-breadcrumbs__current,.lc-breadcrumbs__ellipsis{padding:var(--spacing-0\\.5) var(--spacing-1);margin:calc(var(--spacing-0\\.5) * -1) calc(var(--spacing-1) * -1)}}.lc-breadcrumbs__link,.lc-breadcrumbs__current{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.lc-breadcrumbs__link,.lc-breadcrumbs__current{max-width:150px}}\n"] }]
|
|
6198
|
-
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], maxItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItems", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
6531
|
+
args: [{ selector: 'lc-breadcrumbs', imports: [NgClass, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (items().length > 0) {\n <nav [attr.aria-label]=\"ariaLabel()\">\n <ol [ngClass]=\"breadcrumbClasses()\">\n @for (item of visibleItems(); track item; let i = $index) {\n <li class=\"lc-breadcrumbs__item\">\n @if (isLastItem(i)) {\n <span class=\"lc-breadcrumbs__current\" aria-current=\"page\">\n {{ item.label }}\n </span>\n } @else if (isEllipsis(item)) {\n <span class=\"lc-breadcrumbs__ellipsis\" aria-hidden=\"true\">\n {{ item.label }}\n </span>\n } @else if (item.url) {\n <a\n [routerLink]=\"item.url\"\n class=\"lc-breadcrumbs__link\"\n >\n {{ item.label }}\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"lc-breadcrumbs__link lc-breadcrumbs__link--button\"\n (click)=\"onItemClick(item)\"\n >\n {{ item.label }}\n </button>\n }\n \n @if (!isLastItem(i)) {\n <span class=\"lc-breadcrumbs__separator\" aria-hidden=\"true\">\n {{ separator() }}\n </span>\n }\n </li>\n }\n </ol>\n \n <!-- Support for additional content projection -->\n <ng-content></ng-content>\n </nav>\n}\n", styles: [".lc-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0}.lc-breadcrumbs--sm{font-size:var(--font-size-xs);gap:var(--lc-density-gap-xs, var(--spacing-1))}.lc-breadcrumbs--sm .lc-breadcrumbs__separator{margin:0 var(--spacing-1)}.lc-breadcrumbs--md{font-size:var(--font-size-sm);gap:var(--lc-density-gap-sm, var(--spacing-2))}.lc-breadcrumbs--md .lc-breadcrumbs__separator{margin:0 var(--spacing-2)}.lc-breadcrumbs--lg{font-size:var(--font-size-base);gap:var(--spacing-3)}.lc-breadcrumbs--lg .lc-breadcrumbs__separator{margin:0 var(--spacing-3)}.lc-breadcrumbs__item{display:flex;align-items:center;list-style:none}.lc-breadcrumbs__link{color:var(--color-primary-600);text-decoration:none;transition:all var(--transition-normal);border-radius:var(--border-radius-sm);padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}.lc-breadcrumbs__link:hover{color:var(--color-primary-700);background-color:var(--color-primary-50);text-decoration:underline}.lc-breadcrumbs__link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-breadcrumbs__link:active{color:var(--color-primary-800)}.lc-breadcrumbs__link--button{appearance:none;background:none;border:none;font:inherit;cursor:pointer}.lc-breadcrumbs__current{color:var(--color-text-primary);font-weight:var(--font-weight-medium);padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}.lc-breadcrumbs__separator{color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none;pointer-events:none}.lc-breadcrumbs__ellipsis{color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none;pointer-events:none;padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}@media(max-width:768px){.lc-breadcrumbs--md{font-size:var(--font-size-xs);gap:var(--spacing-1)}.lc-breadcrumbs--md .lc-breadcrumbs__separator{margin:0 var(--spacing-1)}.lc-breadcrumbs--lg{font-size:var(--font-size-sm);gap:var(--spacing-2)}.lc-breadcrumbs--lg .lc-breadcrumbs__separator{margin:0 var(--spacing-2)}.lc-breadcrumbs__link,.lc-breadcrumbs__current,.lc-breadcrumbs__ellipsis{padding:var(--spacing-0\\.5) var(--spacing-1);margin:calc(var(--spacing-0\\.5) * -1) calc(var(--spacing-1) * -1)}}.lc-breadcrumbs__link,.lc-breadcrumbs__current{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.lc-breadcrumbs__link,.lc-breadcrumbs__current{max-width:150px}}\n"] }]
|
|
6532
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], maxItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItems", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
|
|
6199
6533
|
|
|
6200
6534
|
/**
|
|
6201
6535
|
* Avatar component for circular user representation.
|
|
@@ -7212,12 +7546,18 @@ class ToggleGroupComponent {
|
|
|
7212
7546
|
}
|
|
7213
7547
|
return classes.join(' ');
|
|
7214
7548
|
}
|
|
7549
|
+
/** Resolve the dot tone for an option (null when no dot is shown) */
|
|
7550
|
+
dotTone(option) {
|
|
7551
|
+
if (!option.dot)
|
|
7552
|
+
return null;
|
|
7553
|
+
return option.dot === true ? 'warning' : option.dot;
|
|
7554
|
+
}
|
|
7215
7555
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ToggleGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7216
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ToggleGroupComponent, isStandalone: true, selector: "lc-toggle-group", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", selectionChange: "selectionChange" }, ngImport: i0, template: "<div class=\"lc-toggle-group\" [ngClass]=\"sizeClass()\">\n @for (option of options(); track option.value) {\n <button\n type=\"button\"\n [class]=\"getButtonClasses(option)\"\n [disabled]=\"option.disabled ?? false\"\n [attr.aria-pressed]=\"isActive(option)\"\n (click)=\"select(option)\"\n >\n {{ option.label }}\n </button>\n }\n</div>\n", styles: [".lc-toggle-group{display:inline-flex;border-radius:var(--border-radius-md);overflow:hidden;border:1px solid var(--color-border);background-color:var(--color-surface-2)}.lc-toggle-group__btn{border:none;background:transparent;cursor:pointer;font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary);transition:background-color .15s ease,color .15s ease;white-space:nowrap}.lc-toggle-group__btn:hover:not(:disabled):not(.lc-toggle-group__btn--active){background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-toggle-group__btn--active{background-color:var(--color-primary-fill);color:var(--color-on-primary)}.lc-toggle-group__btn--disabled{opacity:.5;cursor:not-allowed}.lc-toggle-group__btn+.lc-toggle-group__btn{border-left:1px solid var(--color-border)}.lc-toggle-group--sm .lc-toggle-group__btn{padding:.25rem .5rem;font-size:var(--typography-font-size-xs, .75rem)}.lc-toggle-group--md .lc-toggle-group__btn{padding:.375rem .75rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-toggle-group--lg .lc-toggle-group__btn{padding:.5rem 1rem;font-size:var(--typography-font-size-base, 1rem)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7556
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ToggleGroupComponent, isStandalone: true, selector: "lc-toggle-group", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", selectionChange: "selectionChange" }, ngImport: i0, template: "<div class=\"lc-toggle-group\" [ngClass]=\"sizeClass()\">\n @for (option of options(); track option.value) {\n <button\n type=\"button\"\n [class]=\"getButtonClasses(option)\"\n [disabled]=\"option.disabled ?? false\"\n [attr.aria-pressed]=\"isActive(option)\"\n (click)=\"select(option)\"\n >\n {{ option.label }}\n @if (dotTone(option); as tone) {\n <span\n class=\"lc-toggle-group__dot lc-toggle-group__dot--{{ tone }}\"\n aria-hidden=\"true\"\n ></span>\n }\n </button>\n }\n</div>\n", styles: [".lc-toggle-group{display:inline-flex;border-radius:var(--border-radius-md);overflow:hidden;border:1px solid var(--color-border);background-color:var(--color-surface-2)}.lc-toggle-group__btn{display:inline-flex;align-items:center;gap:.375rem;border:none;background:transparent;cursor:pointer;font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary);transition:background-color .15s ease,color .15s ease;white-space:nowrap}.lc-toggle-group__btn:hover:not(:disabled):not(.lc-toggle-group__btn--active){background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-toggle-group__btn--active{background-color:var(--color-primary-fill);color:var(--color-on-primary)}.lc-toggle-group__btn--disabled{opacity:.5;cursor:not-allowed}.lc-toggle-group__btn+.lc-toggle-group__btn{border-left:1px solid var(--color-border)}.lc-toggle-group__dot{flex:0 0 auto;width:.5em;height:.5em;border-radius:50%}.lc-toggle-group__dot--warning{background-color:var(--color-warning)}.lc-toggle-group__dot--error{background-color:var(--color-error)}.lc-toggle-group__dot--success{background-color:var(--color-success)}.lc-toggle-group--sm .lc-toggle-group__btn{padding:.25rem .5rem;font-size:var(--typography-font-size-xs, .75rem)}.lc-toggle-group--md .lc-toggle-group__btn{padding:.375rem .75rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-toggle-group--lg .lc-toggle-group__btn{padding:.5rem 1rem;font-size:var(--typography-font-size-base, 1rem)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7217
7557
|
}
|
|
7218
7558
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ToggleGroupComponent, decorators: [{
|
|
7219
7559
|
type: Component,
|
|
7220
|
-
args: [{ selector: 'lc-toggle-group', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-toggle-group\" [ngClass]=\"sizeClass()\">\n @for (option of options(); track option.value) {\n <button\n type=\"button\"\n [class]=\"getButtonClasses(option)\"\n [disabled]=\"option.disabled ?? false\"\n [attr.aria-pressed]=\"isActive(option)\"\n (click)=\"select(option)\"\n >\n {{ option.label }}\n </button>\n }\n</div>\n", styles: [".lc-toggle-group{display:inline-flex;border-radius:var(--border-radius-md);overflow:hidden;border:1px solid var(--color-border);background-color:var(--color-surface-2)}.lc-toggle-group__btn{border:none;background:transparent;cursor:pointer;font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary);transition:background-color .15s ease,color .15s ease;white-space:nowrap}.lc-toggle-group__btn:hover:not(:disabled):not(.lc-toggle-group__btn--active){background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-toggle-group__btn--active{background-color:var(--color-primary-fill);color:var(--color-on-primary)}.lc-toggle-group__btn--disabled{opacity:.5;cursor:not-allowed}.lc-toggle-group__btn+.lc-toggle-group__btn{border-left:1px solid var(--color-border)}.lc-toggle-group--sm .lc-toggle-group__btn{padding:.25rem .5rem;font-size:var(--typography-font-size-xs, .75rem)}.lc-toggle-group--md .lc-toggle-group__btn{padding:.375rem .75rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-toggle-group--lg .lc-toggle-group__btn{padding:.5rem 1rem;font-size:var(--typography-font-size-base, 1rem)}\n"] }]
|
|
7560
|
+
args: [{ selector: 'lc-toggle-group', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-toggle-group\" [ngClass]=\"sizeClass()\">\n @for (option of options(); track option.value) {\n <button\n type=\"button\"\n [class]=\"getButtonClasses(option)\"\n [disabled]=\"option.disabled ?? false\"\n [attr.aria-pressed]=\"isActive(option)\"\n (click)=\"select(option)\"\n >\n {{ option.label }}\n @if (dotTone(option); as tone) {\n <span\n class=\"lc-toggle-group__dot lc-toggle-group__dot--{{ tone }}\"\n aria-hidden=\"true\"\n ></span>\n }\n </button>\n }\n</div>\n", styles: [".lc-toggle-group{display:inline-flex;border-radius:var(--border-radius-md);overflow:hidden;border:1px solid var(--color-border);background-color:var(--color-surface-2)}.lc-toggle-group__btn{display:inline-flex;align-items:center;gap:.375rem;border:none;background:transparent;cursor:pointer;font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary);transition:background-color .15s ease,color .15s ease;white-space:nowrap}.lc-toggle-group__btn:hover:not(:disabled):not(.lc-toggle-group__btn--active){background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-toggle-group__btn--active{background-color:var(--color-primary-fill);color:var(--color-on-primary)}.lc-toggle-group__btn--disabled{opacity:.5;cursor:not-allowed}.lc-toggle-group__btn+.lc-toggle-group__btn{border-left:1px solid var(--color-border)}.lc-toggle-group__dot{flex:0 0 auto;width:.5em;height:.5em;border-radius:50%}.lc-toggle-group__dot--warning{background-color:var(--color-warning)}.lc-toggle-group__dot--error{background-color:var(--color-error)}.lc-toggle-group__dot--success{background-color:var(--color-success)}.lc-toggle-group--sm .lc-toggle-group__btn{padding:.25rem .5rem;font-size:var(--typography-font-size-xs, .75rem)}.lc-toggle-group--md .lc-toggle-group__btn{padding:.375rem .75rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-toggle-group--lg .lc-toggle-group__btn{padding:.5rem 1rem;font-size:var(--typography-font-size-base, 1rem)}\n"] }]
|
|
7221
7561
|
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
|
|
7222
7562
|
|
|
7223
7563
|
/**
|
|
@@ -7344,6 +7684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
7344
7684
|
* - Multiple size options (sm, md, lg)
|
|
7345
7685
|
* - Optional leading icon
|
|
7346
7686
|
* - Removable with close button and remove event
|
|
7687
|
+
* - Clickable variant that renders as a button and emits `chipClick`
|
|
7347
7688
|
* - Disabled state support
|
|
7348
7689
|
*
|
|
7349
7690
|
* @example
|
|
@@ -7351,6 +7692,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
7351
7692
|
* <lc-chip variant="primary" [removable]="true" (remove)="onRemove()">
|
|
7352
7693
|
* Tag Name
|
|
7353
7694
|
* </lc-chip>
|
|
7695
|
+
*
|
|
7696
|
+
* <lc-chip [clickable]="true" (chipClick)="onNavigate()">
|
|
7697
|
+
* Linked item
|
|
7698
|
+
* </lc-chip>
|
|
7354
7699
|
* ```
|
|
7355
7700
|
*/
|
|
7356
7701
|
class ChipComponent {
|
|
@@ -7362,10 +7707,17 @@ class ChipComponent {
|
|
|
7362
7707
|
icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
7363
7708
|
/** Whether the chip can be removed */
|
|
7364
7709
|
removable = input(false, ...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
|
|
7710
|
+
/**
|
|
7711
|
+
* Whether the chip acts as a button (e.g. for navigation). Renders the chip
|
|
7712
|
+
* as a `<button type="button">` with hover / active / focus-visible states.
|
|
7713
|
+
*/
|
|
7714
|
+
clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []));
|
|
7365
7715
|
/** Whether the chip is disabled */
|
|
7366
7716
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
7367
7717
|
/** Emitted when the chip is removed */
|
|
7368
7718
|
remove = output();
|
|
7719
|
+
/** Emitted when a clickable chip is activated (click, Enter or Space). */
|
|
7720
|
+
chipClick = output();
|
|
7369
7721
|
/**
|
|
7370
7722
|
* Computed CSS classes for the chip
|
|
7371
7723
|
*/
|
|
@@ -7376,11 +7728,22 @@ class ChipComponent {
|
|
|
7376
7728
|
if (this.removable()) {
|
|
7377
7729
|
classes.push('lc-chip--removable');
|
|
7378
7730
|
}
|
|
7731
|
+
if (this.clickable()) {
|
|
7732
|
+
classes.push('lc-chip--clickable');
|
|
7733
|
+
}
|
|
7379
7734
|
if (this.disabled()) {
|
|
7380
7735
|
classes.push('lc-chip--disabled');
|
|
7381
7736
|
}
|
|
7382
7737
|
return classes.join(' ');
|
|
7383
7738
|
}, ...(ngDevMode ? [{ debugName: "chipClasses" }] : /* istanbul ignore next */ []));
|
|
7739
|
+
/**
|
|
7740
|
+
* Handle activation of a clickable chip
|
|
7741
|
+
*/
|
|
7742
|
+
onChipClick() {
|
|
7743
|
+
if (!this.disabled()) {
|
|
7744
|
+
this.chipClick.emit();
|
|
7745
|
+
}
|
|
7746
|
+
}
|
|
7384
7747
|
/**
|
|
7385
7748
|
* Handle remove button click
|
|
7386
7749
|
*/
|
|
@@ -7390,6 +7753,17 @@ class ChipComponent {
|
|
|
7390
7753
|
this.remove.emit();
|
|
7391
7754
|
}
|
|
7392
7755
|
}
|
|
7756
|
+
/**
|
|
7757
|
+
* Keyboard activation of the delete affordance inside a clickable chip
|
|
7758
|
+
* (a span with role="button", since nesting native buttons is invalid).
|
|
7759
|
+
*/
|
|
7760
|
+
onDeleteKeydown(event) {
|
|
7761
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
7762
|
+
event.preventDefault();
|
|
7763
|
+
event.stopPropagation();
|
|
7764
|
+
this.onRemove(event);
|
|
7765
|
+
}
|
|
7766
|
+
}
|
|
7393
7767
|
/**
|
|
7394
7768
|
* Handle keyboard navigation
|
|
7395
7769
|
*/
|
|
@@ -7403,12 +7777,12 @@ class ChipComponent {
|
|
|
7403
7777
|
}
|
|
7404
7778
|
}
|
|
7405
7779
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7406
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ChipComponent, isStandalone: true, selector: "lc-chip", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, ngImport: i0, template: "<span
|
|
7780
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ChipComponent, isStandalone: true, selector: "lc-chip", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove", chipClick: "chipClick" }, ngImport: i0, template: "<!--\n The chip renders as a real <button> when clickable, otherwise as a <span>\n (optionally with role=\"button\" for the legacy removable keyboard behavior).\n The inner content is shared via template so both shells stay identical.\n-->\n<ng-template #chipContent>\n <span class=\"lc-chip__content\">\n @if (icon()) {\n <lc-icon [name]=\"icon()!\" class=\"lc-chip__icon\" size=\"sm\" />\n }\n <span class=\"lc-chip__label\">\n <ng-content></ng-content>\n </span>\n @if (removable() && !disabled()) {\n @if (clickable()) {\n <!--\n Inside a clickable chip the shell is already a <button>; a nested\n native button would be invalid HTML, so the delete affordance is a\n focusable span with button semantics.\n -->\n <span\n class=\"lc-chip__delete\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"Remove chip\"\n (click)=\"onRemove($event)\"\n (keydown)=\"onDeleteKeydown($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"deleteIcon\" />\n </span>\n } @else {\n <button\n type=\"button\"\n class=\"lc-chip__delete\"\n aria-label=\"Remove chip\"\n (click)=\"onRemove($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"deleteIcon\" />\n </button>\n }\n }\n </span>\n</ng-template>\n\n<ng-template #deleteIcon>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n</ng-template>\n\n@if (clickable()) {\n <button\n type=\"button\"\n [class]=\"chipClasses()\"\n [disabled]=\"disabled()\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n (click)=\"onChipClick()\"\n >\n <ng-container [ngTemplateOutlet]=\"chipContent\" />\n </button>\n} @else {\n <span\n [class]=\"chipClasses()\"\n [attr.role]=\"removable() ? 'button' : null\"\n [attr.tabindex]=\"removable() ? (disabled() ? '-1' : '0') : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n (keydown)=\"onKeydown($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"chipContent\" />\n </span>\n}\n", styles: [".lc-chip{display:inline-flex;align-items:center;border-radius:var(--border-radius-full, 9999px);font-weight:var(--typography-font-weight-medium, 500);line-height:1;white-space:nowrap;transition:background-color .15s ease,color .15s ease,opacity .15s ease;cursor:default;-webkit-user-select:none;user-select:none}.lc-chip__content{display:inline-flex;align-items:center;gap:.375rem}.lc-chip__label{display:inline-flex;align-items:center}.lc-chip__delete{display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;background:none;border:none;cursor:pointer;color:currentColor;opacity:.6;transition:opacity .15s ease;flex-shrink:0}.lc-chip__delete:hover{opacity:1}.lc-chip__delete:focus{outline:2px solid currentColor;outline-offset:2px;border-radius:50%}.lc-chip__delete svg{width:1em;height:1em}.lc-chip--sm{padding:.25rem .625rem;font-size:var(--typography-font-size-sm, .875rem);height:1.5rem}.lc-chip--sm .lc-chip__content{gap:.25rem}.lc-chip--md{padding:.375rem .75rem;font-size:var(--typography-font-size-sm, .875rem);height:2rem}.lc-chip--lg{padding:.5rem 1rem;font-size:var(--typography-font-size-base, 1rem);height:2.5rem}.lc-chip--lg .lc-chip__content{gap:.5rem}.lc-chip{border:1px solid transparent}.lc-chip--default{background-color:var(--color-surface-hover);color:var(--color-text-secondary);border-color:var(--color-border)}.lc-chip--primary{background-color:#20849729;color:var(--color-primary-500);border-color:var(--color-border-strong)}.lc-chip--success{background-color:#8ea4752e;color:var(--color-success);border-color:#8ea47566}.lc-chip--warning{background-color:#e1a0402e;color:var(--color-warning);border-color:#e1a04066}.lc-chip--error{background-color:#9d0e0e2e;color:var(--color-error);border-color:#9d0e0e66}.lc-chip--info{background-color:#3b658833;color:var(--color-info);border-color:#3b65886b}.lc-chip--removable{cursor:pointer}.lc-chip--removable:hover:not(.lc-chip--removable--disabled){opacity:.9}.lc-chip--removable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-chip--clickable{font:inherit;font-weight:var(--typography-font-weight-medium, 500);text-align:inherit;appearance:none;cursor:pointer}.lc-chip--clickable:hover:not(:disabled){filter:brightness(1.06);border-color:var(--color-border-strong, var(--color-border))}.lc-chip--clickable:active:not(:disabled){filter:brightness(.96)}.lc-chip--clickable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-chip--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-chip__icon{display:inline-flex;align-items:center;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative", "strict"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7407
7781
|
}
|
|
7408
7782
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ChipComponent, decorators: [{
|
|
7409
7783
|
type: Component,
|
|
7410
|
-
args: [{ selector: 'lc-chip', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span
|
|
7411
|
-
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }] } });
|
|
7784
|
+
args: [{ selector: 'lc-chip', standalone: true, imports: [IconComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n The chip renders as a real <button> when clickable, otherwise as a <span>\n (optionally with role=\"button\" for the legacy removable keyboard behavior).\n The inner content is shared via template so both shells stay identical.\n-->\n<ng-template #chipContent>\n <span class=\"lc-chip__content\">\n @if (icon()) {\n <lc-icon [name]=\"icon()!\" class=\"lc-chip__icon\" size=\"sm\" />\n }\n <span class=\"lc-chip__label\">\n <ng-content></ng-content>\n </span>\n @if (removable() && !disabled()) {\n @if (clickable()) {\n <!--\n Inside a clickable chip the shell is already a <button>; a nested\n native button would be invalid HTML, so the delete affordance is a\n focusable span with button semantics.\n -->\n <span\n class=\"lc-chip__delete\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"Remove chip\"\n (click)=\"onRemove($event)\"\n (keydown)=\"onDeleteKeydown($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"deleteIcon\" />\n </span>\n } @else {\n <button\n type=\"button\"\n class=\"lc-chip__delete\"\n aria-label=\"Remove chip\"\n (click)=\"onRemove($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"deleteIcon\" />\n </button>\n }\n }\n </span>\n</ng-template>\n\n<ng-template #deleteIcon>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n</ng-template>\n\n@if (clickable()) {\n <button\n type=\"button\"\n [class]=\"chipClasses()\"\n [disabled]=\"disabled()\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n (click)=\"onChipClick()\"\n >\n <ng-container [ngTemplateOutlet]=\"chipContent\" />\n </button>\n} @else {\n <span\n [class]=\"chipClasses()\"\n [attr.role]=\"removable() ? 'button' : null\"\n [attr.tabindex]=\"removable() ? (disabled() ? '-1' : '0') : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n (keydown)=\"onKeydown($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"chipContent\" />\n </span>\n}\n", styles: [".lc-chip{display:inline-flex;align-items:center;border-radius:var(--border-radius-full, 9999px);font-weight:var(--typography-font-weight-medium, 500);line-height:1;white-space:nowrap;transition:background-color .15s ease,color .15s ease,opacity .15s ease;cursor:default;-webkit-user-select:none;user-select:none}.lc-chip__content{display:inline-flex;align-items:center;gap:.375rem}.lc-chip__label{display:inline-flex;align-items:center}.lc-chip__delete{display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;background:none;border:none;cursor:pointer;color:currentColor;opacity:.6;transition:opacity .15s ease;flex-shrink:0}.lc-chip__delete:hover{opacity:1}.lc-chip__delete:focus{outline:2px solid currentColor;outline-offset:2px;border-radius:50%}.lc-chip__delete svg{width:1em;height:1em}.lc-chip--sm{padding:.25rem .625rem;font-size:var(--typography-font-size-sm, .875rem);height:1.5rem}.lc-chip--sm .lc-chip__content{gap:.25rem}.lc-chip--md{padding:.375rem .75rem;font-size:var(--typography-font-size-sm, .875rem);height:2rem}.lc-chip--lg{padding:.5rem 1rem;font-size:var(--typography-font-size-base, 1rem);height:2.5rem}.lc-chip--lg .lc-chip__content{gap:.5rem}.lc-chip{border:1px solid transparent}.lc-chip--default{background-color:var(--color-surface-hover);color:var(--color-text-secondary);border-color:var(--color-border)}.lc-chip--primary{background-color:#20849729;color:var(--color-primary-500);border-color:var(--color-border-strong)}.lc-chip--success{background-color:#8ea4752e;color:var(--color-success);border-color:#8ea47566}.lc-chip--warning{background-color:#e1a0402e;color:var(--color-warning);border-color:#e1a04066}.lc-chip--error{background-color:#9d0e0e2e;color:var(--color-error);border-color:#9d0e0e66}.lc-chip--info{background-color:#3b658833;color:var(--color-info);border-color:#3b65886b}.lc-chip--removable{cursor:pointer}.lc-chip--removable:hover:not(.lc-chip--removable--disabled){opacity:.9}.lc-chip--removable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-chip--clickable{font:inherit;font-weight:var(--typography-font-weight-medium, 500);text-align:inherit;appearance:none;cursor:pointer}.lc-chip--clickable:hover:not(:disabled){filter:brightness(1.06);border-color:var(--color-border-strong, var(--color-border))}.lc-chip--clickable:active:not(:disabled){filter:brightness(.96)}.lc-chip--clickable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-chip--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-chip__icon{display:inline-flex;align-items:center;flex-shrink:0}\n"] }]
|
|
7785
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }], chipClick: [{ type: i0.Output, args: ["chipClick"] }] } });
|
|
7412
7786
|
|
|
7413
7787
|
/**
|
|
7414
7788
|
* Directive for defining custom cell templates in the Table component.
|
|
@@ -12053,11 +12427,11 @@ class MarkdownComponent {
|
|
|
12053
12427
|
return this.mermaidApiPromise;
|
|
12054
12428
|
}
|
|
12055
12429
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MarkdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12056
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: MarkdownComponent, isStandalone: true, selector: "lc-markdown", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, linkTarget: { classPropertyName: "linkTarget", publicName: "linkTarget", isSignal: true, isRequired: false, transformFunction: null }, sanitize: { classPropertyName: "sanitize", publicName: "sanitize", isSignal: true, isRequired: false, transformFunction: null }, syntaxHighlight: { classPropertyName: "syntaxHighlight", publicName: "syntaxHighlight", isSignal: true, isRequired: false, transformFunction: null }, showHeadingAnchors: { classPropertyName: "showHeadingAnchors", publicName: "showHeadingAnchors", isSignal: true, isRequired: false, transformFunction: null }, baseUrl: { classPropertyName: "baseUrl", publicName: "baseUrl", isSignal: true, isRequired: false, transformFunction: null }, highlightChanges: { classPropertyName: "highlightChanges", publicName: "highlightChanges", isSignal: true, isRequired: false, transformFunction: null }, previousContent: { classPropertyName: "previousContent", publicName: "previousContent", isSignal: true, isRequired: false, transformFunction: null }, changeHighlightFadeMs: { classPropertyName: "changeHighlightFadeMs", publicName: "changeHighlightFadeMs", isSignal: true, isRequired: false, transformFunction: null }, scrollToFirstChange: { classPropertyName: "scrollToFirstChange", publicName: "scrollToFirstChange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { linkClick: "linkClick", rendered: "rendered", changesHighlighted: "changesHighlighted" }, ngImport: i0, template: "<div [class]=\"containerClasses()\" (click)=\"onLinkClick($event)\">\n @if (highlightChanges()) {\n <div class=\"lc-markdown__sr-only\" role=\"status\" aria-live=\"polite\">{{ changeSummary() }}</div>\n }\n @for (part of renderParts(); track part.index) {\n @if (part.type === 'html') {\n <div [innerHTML]=\"part.safeHtml\"></div>\n } @else if (part.type === 'code') {\n <lc-code-block\n [code]=\"part.code!\"\n [language]=\"part.lang ?? 'text'\"\n [showLineNumbers]=\"true\"\n [showCopy]=\"true\"\n />\n } @else {\n @if (mermaidSvgFor(part.index); as svg) {\n <div class=\"lc-markdown__mermaid\" [innerHTML]=\"svg\"></div>\n } @else if (mermaidErrorFor(part.index); as errorMessage) {\n <div class=\"lc-markdown__mermaid-fallback\">\n <p class=\"lc-markdown__mermaid-error\">{{ errorMessage }}</p>\n <lc-code-block\n [code]=\"part.code!\"\n [language]=\"'text'\"\n [showLineNumbers]=\"true\"\n [showCopy]=\"true\"\n />\n </div>\n } @else {\n <div class=\"lc-markdown__mermaid-loading\">Rendering Mermaid diagram...</div>\n }\n }\n }\n</div>\n", styles: [".lc-markdown{color:var(--color-text-primary);font-family:var(--font-family-sans);font-size:var(--font-size-base, 1rem);line-height:var(--line-height-relaxed, 1.75)}.lc-markdown h1,.lc-markdown h2,.lc-markdown h3,.lc-markdown h4,.lc-markdown h5,.lc-markdown h6{color:var(--color-text-primary);font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-tight, 1.25);margin:1.5em 0 .5em}.lc-markdown h1:first-child,.lc-markdown h2:first-child,.lc-markdown h3:first-child,.lc-markdown h4:first-child,.lc-markdown h5:first-child,.lc-markdown h6:first-child{margin-top:0}.lc-markdown h1{font-size:2rem}.lc-markdown h2{font-size:1.5rem}.lc-markdown h3{font-size:1.25rem}.lc-markdown h4{font-size:1.125rem}.lc-markdown h5{font-size:1rem}.lc-markdown h6{font-size:.875rem}.lc-markdown p{margin:0 0 1em}.lc-markdown a{color:var(--color-primary-600, #2563eb);text-decoration:none}.lc-markdown a:hover{text-decoration:underline}.lc-markdown strong{font-weight:var(--font-weight-semibold, 600)}.lc-markdown code{background-color:var(--color-surface-hover);color:var(--color-text-primary);padding:.125em .375em;border-radius:var(--border-radius-sm, .25rem);font-family:var(--font-family-mono, monospace);font-size:.875em}.lc-markdown pre{margin:1em 0;overflow-x:auto}.lc-markdown pre code{background:none;padding:0;border-radius:0}.lc-markdown blockquote{margin:1em 0;padding:.5em 1em;border-left:4px solid var(--color-primary-300, #93c5fd);background-color:var(--color-surface-2);color:var(--color-text-secondary, #4b5563)}.lc-markdown blockquote p{margin:0}.lc-markdown ul,.lc-markdown ol{margin:0 0 1em;padding-left:1.5em}.lc-markdown ul{list-style:disc}.lc-markdown ol{list-style:decimal}.lc-markdown li{margin:.25em 0}.lc-markdown hr{border:none;border-top:1px solid var(--color-divider, #e5e7eb);margin:1.5em 0}.lc-markdown img{max-width:100%;height:auto;border-radius:var(--border-radius-md, .375rem)}.lc-markdown del{text-decoration:line-through;color:var(--color-text-secondary, #6b7280)}.lc-markdown em{font-style:italic}.lc-markdown__table-wrap{margin:1em 0;overflow-x:auto;-webkit-overflow-scrolling:touch}.lc-markdown__table{width:100%;border-collapse:collapse;font-size:var(--font-size-sm, .875rem)}.lc-markdown__table th,.lc-markdown__table td{padding:.5rem .75rem;border:1px solid var(--color-divider, #e5e7eb);text-align:left}.lc-markdown__table th{background-color:var(--color-surface-2);font-weight:var(--font-weight-semibold, 600)}.lc-markdown__table tr:hover td{background-color:var(--color-surface-2)}.lc-markdown__cell--left{text-align:left}.lc-markdown__cell--center{text-align:center}.lc-markdown__cell--right{text-align:right}.lc-markdown__task-item{list-style:none;display:flex;align-items:flex-start;gap:.5em}.lc-markdown__checkbox{flex:0 0 auto;box-sizing:border-box;width:1.05em;height:1.05em;margin-top:.18em;border:1.5px solid var(--color-border-strong, var(--color-border));border-radius:3px;background-color:var(--color-surface);position:relative}.lc-markdown__checkbox--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.lc-markdown__checkbox--checked:after{content:\"\";position:absolute;left:.32em;top:.12em;width:.28em;height:.55em;border:solid var(--color-on-primary, #fff);border-width:0 2px 2px 0;transform:rotate(45deg)}.lc-markdown__task-label{flex:1 1 auto;min-width:0}.lc-markdown__anchor{color:var(--color-text-tertiary);text-decoration:none;margin-right:.25em;opacity:0;transition:opacity .15s ease}h1:hover .lc-markdown__anchor,h2:hover .lc-markdown__anchor,h3:hover .lc-markdown__anchor,h4:hover .lc-markdown__anchor,h5:hover .lc-markdown__anchor,h6:hover .lc-markdown__anchor{opacity:1}.lc-markdown lc-code-block{display:block;margin:1em 0}.lc-markdown lc-code-block code{background:none;color:inherit;padding:0;border-radius:0;font-size:inherit}.lc-markdown__mermaid{margin:1em 0;padding:.75rem;border:1px solid var(--color-divider, #e5e7eb);border-radius:var(--border-radius-md, .375rem);background:var(--color-surface, #ffffff);overflow-x:auto}.lc-markdown__mermaid svg{display:block;margin:0 auto;max-width:100%;height:auto}.lc-markdown__mermaid-loading{margin:1em 0;padding:.75rem;border:1px dashed var(--color-divider, #e5e7eb);border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary, #6b7280);font-size:var(--font-size-sm, .875rem)}.lc-markdown__mermaid-fallback{margin:1em 0}.lc-markdown__mermaid-error{margin:0 0 .5rem;color:var(--color-error);font-size:var(--font-size-sm, .875rem)}.lc-markdown--compact{font-size:var(--font-size-sm, .875rem);line-height:var(--line-height-normal, 1.5)}.lc-markdown--compact h1{font-size:1.5rem}.lc-markdown--compact h2{font-size:1.25rem}.lc-markdown--compact h3{font-size:1.125rem}.lc-markdown--compact h4{font-size:1rem}.lc-markdown--compact h5,.lc-markdown--compact h6{font-size:.875rem}.lc-markdown--compact h1,.lc-markdown--compact h2,.lc-markdown--compact h3,.lc-markdown--compact h4,.lc-markdown--compact h5,.lc-markdown--compact h6{margin:1em 0 .25em}.lc-markdown--compact p{margin:0 0 .5em}.lc-markdown--compact blockquote{margin:.5em 0;padding:.25em .75em}.lc-markdown--compact ul,.lc-markdown--compact ol{margin:0 0 .5em}.lc-markdown--chat{font-size:inherit;line-height:1.4}.lc-markdown--chat p,.lc-markdown--chat ul,.lc-markdown--chat ol,.lc-markdown--chat pre,.lc-markdown--chat blockquote,.lc-markdown--chat table{margin:0 0 6px}.lc-markdown--chat h1,.lc-markdown--chat h2,.lc-markdown--chat h3,.lc-markdown--chat h4,.lc-markdown--chat h5,.lc-markdown--chat h6{margin:8px 0 4px;line-height:1.25}.lc-markdown--chat h1{font-size:1.25rem}.lc-markdown--chat h2{font-size:1.125rem}.lc-markdown--chat h3{font-size:1rem}.lc-markdown--chat h4,.lc-markdown--chat h5,.lc-markdown--chat h6{font-size:.9375rem}.lc-markdown--chat li{margin:0;line-height:1.4}.lc-markdown--chat ul,.lc-markdown--chat ol{padding-left:1.25em}.lc-markdown--chat blockquote{padding:.25em .75em}.lc-markdown--chat lc-code-block{margin:6px 0}.lc-markdown--chat .lc-markdown__mermaid,.lc-markdown--chat .lc-markdown__mermaid-loading,.lc-markdown--chat .lc-markdown__mermaid-fallback{margin:6px 0}.lc-markdown--chat>*:first-child{margin-top:0}.lc-markdown--chat>*:last-child{margin-bottom:0}.lc-markdown__block--changed{position:relative;padding:.4rem .875rem;border-radius:0 6px 6px 0;background-color:color-mix(in srgb,var(--color-primary) 13%,var(--color-surface));transition:background-color .42s ease,padding .42s ease}.lc-markdown__block--changed:before{content:\"\";position:absolute;inset-block:0;left:0;width:3px;border-radius:0 3px 3px 0;background-color:var(--color-primary);transition:opacity .42s ease}.lc-markdown--faded .lc-markdown__block--changed{padding:0;background-color:transparent}.lc-markdown--faded .lc-markdown__block--changed:before{opacity:0}.lc-markdown__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}\n"], dependencies: [{ kind: "component", type: CodeBlockComponent, selector: "lc-code-block", inputs: ["code", "language", "filename", "showLineNumbers", "showCopy", "showHeader"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
12430
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: MarkdownComponent, isStandalone: true, selector: "lc-markdown", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, linkTarget: { classPropertyName: "linkTarget", publicName: "linkTarget", isSignal: true, isRequired: false, transformFunction: null }, sanitize: { classPropertyName: "sanitize", publicName: "sanitize", isSignal: true, isRequired: false, transformFunction: null }, syntaxHighlight: { classPropertyName: "syntaxHighlight", publicName: "syntaxHighlight", isSignal: true, isRequired: false, transformFunction: null }, showHeadingAnchors: { classPropertyName: "showHeadingAnchors", publicName: "showHeadingAnchors", isSignal: true, isRequired: false, transformFunction: null }, baseUrl: { classPropertyName: "baseUrl", publicName: "baseUrl", isSignal: true, isRequired: false, transformFunction: null }, highlightChanges: { classPropertyName: "highlightChanges", publicName: "highlightChanges", isSignal: true, isRequired: false, transformFunction: null }, previousContent: { classPropertyName: "previousContent", publicName: "previousContent", isSignal: true, isRequired: false, transformFunction: null }, changeHighlightFadeMs: { classPropertyName: "changeHighlightFadeMs", publicName: "changeHighlightFadeMs", isSignal: true, isRequired: false, transformFunction: null }, scrollToFirstChange: { classPropertyName: "scrollToFirstChange", publicName: "scrollToFirstChange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { linkClick: "linkClick", rendered: "rendered", changesHighlighted: "changesHighlighted" }, ngImport: i0, template: "<div [class]=\"containerClasses()\" (click)=\"onLinkClick($event)\">\n @if (highlightChanges()) {\n <div class=\"lc-markdown__sr-only\" role=\"status\" aria-live=\"polite\">{{ changeSummary() }}</div>\n }\n @for (part of renderParts(); track part.index) {\n @if (part.type === 'html') {\n <div [innerHTML]=\"part.safeHtml\"></div>\n } @else if (part.type === 'code') {\n <lc-code-block\n [code]=\"part.code!\"\n [language]=\"part.lang ?? 'text'\"\n [showLineNumbers]=\"true\"\n [showCopy]=\"true\"\n />\n } @else {\n @if (mermaidSvgFor(part.index); as svg) {\n <div class=\"lc-markdown__mermaid\" [innerHTML]=\"svg\"></div>\n } @else if (mermaidErrorFor(part.index); as errorMessage) {\n <div class=\"lc-markdown__mermaid-fallback\">\n <p class=\"lc-markdown__mermaid-error\">{{ errorMessage }}</p>\n <lc-code-block\n [code]=\"part.code!\"\n [language]=\"'text'\"\n [showLineNumbers]=\"true\"\n [showCopy]=\"true\"\n />\n </div>\n } @else {\n <div class=\"lc-markdown__mermaid-loading\">Rendering Mermaid diagram...</div>\n }\n }\n }\n</div>\n", styles: [".lc-markdown{color:var(--color-text-primary);font-family:var(--font-family-sans);font-size:var(--font-size-base, 1rem);line-height:var(--line-height-relaxed, 1.75)}.lc-markdown h1,.lc-markdown h2,.lc-markdown h3,.lc-markdown h4,.lc-markdown h5,.lc-markdown h6{color:var(--color-text-primary);font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-tight, 1.25);margin:1.5em 0 .5em}.lc-markdown h1:first-child,.lc-markdown h2:first-child,.lc-markdown h3:first-child,.lc-markdown h4:first-child,.lc-markdown h5:first-child,.lc-markdown h6:first-child{margin-top:0}.lc-markdown h1{font-size:2rem}.lc-markdown h2{font-size:1.5rem}.lc-markdown h3{font-size:1.25rem}.lc-markdown h4{font-size:1.125rem}.lc-markdown h5{font-size:1rem}.lc-markdown h6{font-size:.875rem}.lc-markdown p{margin:0 0 1em}.lc-markdown a{color:var(--color-primary-600, #2563eb);text-decoration:none}.lc-markdown a:hover{text-decoration:underline}.lc-markdown strong{font-weight:var(--font-weight-semibold, 600)}.lc-markdown code{background-color:var(--color-surface-hover);color:var(--color-text-primary);padding:.125em .375em;border-radius:var(--border-radius-sm, .25rem);font-family:var(--font-family-mono, monospace);font-size:.875em}.lc-markdown pre{margin:1em 0;overflow-x:auto}.lc-markdown pre code{background:none;padding:0;border-radius:0}.lc-markdown blockquote{margin:1em 0;padding:.5em 1em;border-left:4px solid var(--color-primary-300, #93c5fd);background-color:var(--color-surface-2);color:var(--color-text-secondary, #4b5563)}.lc-markdown blockquote p{margin:0}.lc-markdown ul,.lc-markdown ol{margin:0 0 1em;padding-left:1.5em}.lc-markdown ul{list-style:disc}.lc-markdown ol{list-style:decimal}.lc-markdown li{margin:.25em 0}.lc-markdown hr{border:none;border-top:1px solid var(--color-divider, #e5e7eb);margin:1.5em 0}.lc-markdown img{max-width:100%;height:auto;border-radius:var(--border-radius-md, .375rem)}.lc-markdown del{text-decoration:line-through;color:var(--color-text-secondary, #6b7280)}.lc-markdown em{font-style:italic}.lc-markdown__table-wrap{margin:1em 0;overflow-x:auto;-webkit-overflow-scrolling:touch}.lc-markdown__table{width:100%;border-collapse:collapse;font-size:var(--font-size-sm, .875rem)}.lc-markdown__table th,.lc-markdown__table td{padding:.5rem .75rem;border:1px solid var(--color-divider, #e5e7eb);text-align:left}.lc-markdown__table th{background-color:var(--color-surface-2);font-weight:var(--font-weight-semibold, 600)}.lc-markdown__table tr:hover td{background-color:var(--color-surface-2)}.lc-markdown__cell--left{text-align:left}.lc-markdown__cell--center{text-align:center}.lc-markdown__cell--right{text-align:right}.lc-markdown__task-item{list-style:none;display:flex;align-items:flex-start;gap:.5em}.lc-markdown__checkbox{flex:0 0 auto;box-sizing:border-box;width:1.05em;height:1.05em;margin-top:.18em;border:1.5px solid var(--color-border-strong, var(--color-border));border-radius:3px;background-color:var(--color-surface);position:relative}.lc-markdown__checkbox--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.lc-markdown__checkbox--checked:after{content:\"\";position:absolute;left:.32em;top:.12em;width:.28em;height:.55em;border:solid var(--color-on-primary, #fff);border-width:0 2px 2px 0;transform:rotate(45deg)}.lc-markdown__task-label{flex:1 1 auto;min-width:0}.lc-markdown__anchor{color:var(--color-text-tertiary);text-decoration:none;margin-right:.25em;opacity:0;transition:opacity .15s ease}h1:hover .lc-markdown__anchor,h2:hover .lc-markdown__anchor,h3:hover .lc-markdown__anchor,h4:hover .lc-markdown__anchor,h5:hover .lc-markdown__anchor,h6:hover .lc-markdown__anchor{opacity:1}.lc-markdown lc-code-block{display:block;margin:1em 0}.lc-markdown lc-code-block code{background:none;color:inherit;padding:0;border-radius:0;font-size:inherit}.lc-markdown__mermaid{margin:1em 0;padding:.75rem;border:1px solid var(--color-divider, #e5e7eb);border-radius:var(--border-radius-md, .375rem);background:var(--color-surface, #ffffff);overflow-x:auto}.lc-markdown__mermaid svg{display:block;margin:0 auto;max-width:100%;height:auto}.lc-markdown__mermaid-loading{margin:1em 0;padding:.75rem;border:1px dashed var(--color-divider, #e5e7eb);border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary, #6b7280);font-size:var(--font-size-sm, .875rem)}.lc-markdown__mermaid-fallback{margin:1em 0}.lc-markdown__mermaid-error{margin:0 0 .5rem;color:var(--color-error);font-size:var(--font-size-sm, .875rem)}.lc-markdown--compact{font-size:var(--font-size-sm, .875rem);line-height:var(--line-height-normal, 1.5)}.lc-markdown--compact h1{font-size:1.5rem}.lc-markdown--compact h2{font-size:1.25rem}.lc-markdown--compact h3{font-size:1.125rem}.lc-markdown--compact h4{font-size:1rem}.lc-markdown--compact h5,.lc-markdown--compact h6{font-size:.875rem}.lc-markdown--compact h1,.lc-markdown--compact h2,.lc-markdown--compact h3,.lc-markdown--compact h4,.lc-markdown--compact h5,.lc-markdown--compact h6{margin:1em 0 .25em}.lc-markdown--compact p{margin:0 0 .5em}.lc-markdown--compact blockquote{margin:.5em 0;padding:.25em .75em}.lc-markdown--compact ul,.lc-markdown--compact ol{margin:0 0 .5em}.lc-markdown--chat{font-size:inherit;line-height:1.4}.lc-markdown--chat p,.lc-markdown--chat ul,.lc-markdown--chat ol,.lc-markdown--chat pre,.lc-markdown--chat blockquote,.lc-markdown--chat table{margin:0 0 6px}.lc-markdown--chat h1,.lc-markdown--chat h2,.lc-markdown--chat h3,.lc-markdown--chat h4,.lc-markdown--chat h5,.lc-markdown--chat h6{margin:8px 0 4px;line-height:1.25}.lc-markdown--chat h1{font-size:1.25rem}.lc-markdown--chat h2{font-size:1.125rem}.lc-markdown--chat h3{font-size:1rem}.lc-markdown--chat h4,.lc-markdown--chat h5,.lc-markdown--chat h6{font-size:.9375rem}.lc-markdown--chat li{margin:0;line-height:1.4}.lc-markdown--chat ul,.lc-markdown--chat ol{padding-left:1.25em}.lc-markdown--chat blockquote{padding:.25em .75em}.lc-markdown--chat lc-code-block{margin:6px 0}.lc-markdown--chat hr{margin:8px 0}.lc-markdown--chat .lc-markdown__mermaid,.lc-markdown--chat .lc-markdown__mermaid-loading,.lc-markdown--chat .lc-markdown__mermaid-fallback{margin:6px 0}.lc-markdown--chat>*:first-child{margin-top:0}.lc-markdown--chat>*:last-child{margin-bottom:0}.lc-markdown__block--changed{position:relative;padding:.4rem .875rem;border-radius:0 6px 6px 0;background-color:color-mix(in srgb,var(--color-primary) 13%,var(--color-surface));transition:background-color .42s ease,padding .42s ease}.lc-markdown__block--changed:before{content:\"\";position:absolute;inset-block:0;left:0;width:3px;border-radius:0 3px 3px 0;background-color:var(--color-primary);transition:opacity .42s ease}.lc-markdown--faded .lc-markdown__block--changed{padding:0;background-color:transparent}.lc-markdown--faded .lc-markdown__block--changed:before{opacity:0}.lc-markdown__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}\n"], dependencies: [{ kind: "component", type: CodeBlockComponent, selector: "lc-code-block", inputs: ["code", "language", "filename", "showLineNumbers", "showCopy", "showHeader"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
12057
12431
|
}
|
|
12058
12432
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MarkdownComponent, decorators: [{
|
|
12059
12433
|
type: Component,
|
|
12060
|
-
args: [{ selector: 'lc-markdown', standalone: true, imports: [CodeBlockComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [class]=\"containerClasses()\" (click)=\"onLinkClick($event)\">\n @if (highlightChanges()) {\n <div class=\"lc-markdown__sr-only\" role=\"status\" aria-live=\"polite\">{{ changeSummary() }}</div>\n }\n @for (part of renderParts(); track part.index) {\n @if (part.type === 'html') {\n <div [innerHTML]=\"part.safeHtml\"></div>\n } @else if (part.type === 'code') {\n <lc-code-block\n [code]=\"part.code!\"\n [language]=\"part.lang ?? 'text'\"\n [showLineNumbers]=\"true\"\n [showCopy]=\"true\"\n />\n } @else {\n @if (mermaidSvgFor(part.index); as svg) {\n <div class=\"lc-markdown__mermaid\" [innerHTML]=\"svg\"></div>\n } @else if (mermaidErrorFor(part.index); as errorMessage) {\n <div class=\"lc-markdown__mermaid-fallback\">\n <p class=\"lc-markdown__mermaid-error\">{{ errorMessage }}</p>\n <lc-code-block\n [code]=\"part.code!\"\n [language]=\"'text'\"\n [showLineNumbers]=\"true\"\n [showCopy]=\"true\"\n />\n </div>\n } @else {\n <div class=\"lc-markdown__mermaid-loading\">Rendering Mermaid diagram...</div>\n }\n }\n }\n</div>\n", styles: [".lc-markdown{color:var(--color-text-primary);font-family:var(--font-family-sans);font-size:var(--font-size-base, 1rem);line-height:var(--line-height-relaxed, 1.75)}.lc-markdown h1,.lc-markdown h2,.lc-markdown h3,.lc-markdown h4,.lc-markdown h5,.lc-markdown h6{color:var(--color-text-primary);font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-tight, 1.25);margin:1.5em 0 .5em}.lc-markdown h1:first-child,.lc-markdown h2:first-child,.lc-markdown h3:first-child,.lc-markdown h4:first-child,.lc-markdown h5:first-child,.lc-markdown h6:first-child{margin-top:0}.lc-markdown h1{font-size:2rem}.lc-markdown h2{font-size:1.5rem}.lc-markdown h3{font-size:1.25rem}.lc-markdown h4{font-size:1.125rem}.lc-markdown h5{font-size:1rem}.lc-markdown h6{font-size:.875rem}.lc-markdown p{margin:0 0 1em}.lc-markdown a{color:var(--color-primary-600, #2563eb);text-decoration:none}.lc-markdown a:hover{text-decoration:underline}.lc-markdown strong{font-weight:var(--font-weight-semibold, 600)}.lc-markdown code{background-color:var(--color-surface-hover);color:var(--color-text-primary);padding:.125em .375em;border-radius:var(--border-radius-sm, .25rem);font-family:var(--font-family-mono, monospace);font-size:.875em}.lc-markdown pre{margin:1em 0;overflow-x:auto}.lc-markdown pre code{background:none;padding:0;border-radius:0}.lc-markdown blockquote{margin:1em 0;padding:.5em 1em;border-left:4px solid var(--color-primary-300, #93c5fd);background-color:var(--color-surface-2);color:var(--color-text-secondary, #4b5563)}.lc-markdown blockquote p{margin:0}.lc-markdown ul,.lc-markdown ol{margin:0 0 1em;padding-left:1.5em}.lc-markdown ul{list-style:disc}.lc-markdown ol{list-style:decimal}.lc-markdown li{margin:.25em 0}.lc-markdown hr{border:none;border-top:1px solid var(--color-divider, #e5e7eb);margin:1.5em 0}.lc-markdown img{max-width:100%;height:auto;border-radius:var(--border-radius-md, .375rem)}.lc-markdown del{text-decoration:line-through;color:var(--color-text-secondary, #6b7280)}.lc-markdown em{font-style:italic}.lc-markdown__table-wrap{margin:1em 0;overflow-x:auto;-webkit-overflow-scrolling:touch}.lc-markdown__table{width:100%;border-collapse:collapse;font-size:var(--font-size-sm, .875rem)}.lc-markdown__table th,.lc-markdown__table td{padding:.5rem .75rem;border:1px solid var(--color-divider, #e5e7eb);text-align:left}.lc-markdown__table th{background-color:var(--color-surface-2);font-weight:var(--font-weight-semibold, 600)}.lc-markdown__table tr:hover td{background-color:var(--color-surface-2)}.lc-markdown__cell--left{text-align:left}.lc-markdown__cell--center{text-align:center}.lc-markdown__cell--right{text-align:right}.lc-markdown__task-item{list-style:none;display:flex;align-items:flex-start;gap:.5em}.lc-markdown__checkbox{flex:0 0 auto;box-sizing:border-box;width:1.05em;height:1.05em;margin-top:.18em;border:1.5px solid var(--color-border-strong, var(--color-border));border-radius:3px;background-color:var(--color-surface);position:relative}.lc-markdown__checkbox--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.lc-markdown__checkbox--checked:after{content:\"\";position:absolute;left:.32em;top:.12em;width:.28em;height:.55em;border:solid var(--color-on-primary, #fff);border-width:0 2px 2px 0;transform:rotate(45deg)}.lc-markdown__task-label{flex:1 1 auto;min-width:0}.lc-markdown__anchor{color:var(--color-text-tertiary);text-decoration:none;margin-right:.25em;opacity:0;transition:opacity .15s ease}h1:hover .lc-markdown__anchor,h2:hover .lc-markdown__anchor,h3:hover .lc-markdown__anchor,h4:hover .lc-markdown__anchor,h5:hover .lc-markdown__anchor,h6:hover .lc-markdown__anchor{opacity:1}.lc-markdown lc-code-block{display:block;margin:1em 0}.lc-markdown lc-code-block code{background:none;color:inherit;padding:0;border-radius:0;font-size:inherit}.lc-markdown__mermaid{margin:1em 0;padding:.75rem;border:1px solid var(--color-divider, #e5e7eb);border-radius:var(--border-radius-md, .375rem);background:var(--color-surface, #ffffff);overflow-x:auto}.lc-markdown__mermaid svg{display:block;margin:0 auto;max-width:100%;height:auto}.lc-markdown__mermaid-loading{margin:1em 0;padding:.75rem;border:1px dashed var(--color-divider, #e5e7eb);border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary, #6b7280);font-size:var(--font-size-sm, .875rem)}.lc-markdown__mermaid-fallback{margin:1em 0}.lc-markdown__mermaid-error{margin:0 0 .5rem;color:var(--color-error);font-size:var(--font-size-sm, .875rem)}.lc-markdown--compact{font-size:var(--font-size-sm, .875rem);line-height:var(--line-height-normal, 1.5)}.lc-markdown--compact h1{font-size:1.5rem}.lc-markdown--compact h2{font-size:1.25rem}.lc-markdown--compact h3{font-size:1.125rem}.lc-markdown--compact h4{font-size:1rem}.lc-markdown--compact h5,.lc-markdown--compact h6{font-size:.875rem}.lc-markdown--compact h1,.lc-markdown--compact h2,.lc-markdown--compact h3,.lc-markdown--compact h4,.lc-markdown--compact h5,.lc-markdown--compact h6{margin:1em 0 .25em}.lc-markdown--compact p{margin:0 0 .5em}.lc-markdown--compact blockquote{margin:.5em 0;padding:.25em .75em}.lc-markdown--compact ul,.lc-markdown--compact ol{margin:0 0 .5em}.lc-markdown--chat{font-size:inherit;line-height:1.4}.lc-markdown--chat p,.lc-markdown--chat ul,.lc-markdown--chat ol,.lc-markdown--chat pre,.lc-markdown--chat blockquote,.lc-markdown--chat table{margin:0 0 6px}.lc-markdown--chat h1,.lc-markdown--chat h2,.lc-markdown--chat h3,.lc-markdown--chat h4,.lc-markdown--chat h5,.lc-markdown--chat h6{margin:8px 0 4px;line-height:1.25}.lc-markdown--chat h1{font-size:1.25rem}.lc-markdown--chat h2{font-size:1.125rem}.lc-markdown--chat h3{font-size:1rem}.lc-markdown--chat h4,.lc-markdown--chat h5,.lc-markdown--chat h6{font-size:.9375rem}.lc-markdown--chat li{margin:0;line-height:1.4}.lc-markdown--chat ul,.lc-markdown--chat ol{padding-left:1.25em}.lc-markdown--chat blockquote{padding:.25em .75em}.lc-markdown--chat lc-code-block{margin:6px 0}.lc-markdown--chat .lc-markdown__mermaid,.lc-markdown--chat .lc-markdown__mermaid-loading,.lc-markdown--chat .lc-markdown__mermaid-fallback{margin:6px 0}.lc-markdown--chat>*:first-child{margin-top:0}.lc-markdown--chat>*:last-child{margin-bottom:0}.lc-markdown__block--changed{position:relative;padding:.4rem .875rem;border-radius:0 6px 6px 0;background-color:color-mix(in srgb,var(--color-primary) 13%,var(--color-surface));transition:background-color .42s ease,padding .42s ease}.lc-markdown__block--changed:before{content:\"\";position:absolute;inset-block:0;left:0;width:3px;border-radius:0 3px 3px 0;background-color:var(--color-primary);transition:opacity .42s ease}.lc-markdown--faded .lc-markdown__block--changed{padding:0;background-color:transparent}.lc-markdown--faded .lc-markdown__block--changed:before{opacity:0}.lc-markdown__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}\n"] }]
|
|
12434
|
+
args: [{ selector: 'lc-markdown', standalone: true, imports: [CodeBlockComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [class]=\"containerClasses()\" (click)=\"onLinkClick($event)\">\n @if (highlightChanges()) {\n <div class=\"lc-markdown__sr-only\" role=\"status\" aria-live=\"polite\">{{ changeSummary() }}</div>\n }\n @for (part of renderParts(); track part.index) {\n @if (part.type === 'html') {\n <div [innerHTML]=\"part.safeHtml\"></div>\n } @else if (part.type === 'code') {\n <lc-code-block\n [code]=\"part.code!\"\n [language]=\"part.lang ?? 'text'\"\n [showLineNumbers]=\"true\"\n [showCopy]=\"true\"\n />\n } @else {\n @if (mermaidSvgFor(part.index); as svg) {\n <div class=\"lc-markdown__mermaid\" [innerHTML]=\"svg\"></div>\n } @else if (mermaidErrorFor(part.index); as errorMessage) {\n <div class=\"lc-markdown__mermaid-fallback\">\n <p class=\"lc-markdown__mermaid-error\">{{ errorMessage }}</p>\n <lc-code-block\n [code]=\"part.code!\"\n [language]=\"'text'\"\n [showLineNumbers]=\"true\"\n [showCopy]=\"true\"\n />\n </div>\n } @else {\n <div class=\"lc-markdown__mermaid-loading\">Rendering Mermaid diagram...</div>\n }\n }\n }\n</div>\n", styles: [".lc-markdown{color:var(--color-text-primary);font-family:var(--font-family-sans);font-size:var(--font-size-base, 1rem);line-height:var(--line-height-relaxed, 1.75)}.lc-markdown h1,.lc-markdown h2,.lc-markdown h3,.lc-markdown h4,.lc-markdown h5,.lc-markdown h6{color:var(--color-text-primary);font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-tight, 1.25);margin:1.5em 0 .5em}.lc-markdown h1:first-child,.lc-markdown h2:first-child,.lc-markdown h3:first-child,.lc-markdown h4:first-child,.lc-markdown h5:first-child,.lc-markdown h6:first-child{margin-top:0}.lc-markdown h1{font-size:2rem}.lc-markdown h2{font-size:1.5rem}.lc-markdown h3{font-size:1.25rem}.lc-markdown h4{font-size:1.125rem}.lc-markdown h5{font-size:1rem}.lc-markdown h6{font-size:.875rem}.lc-markdown p{margin:0 0 1em}.lc-markdown a{color:var(--color-primary-600, #2563eb);text-decoration:none}.lc-markdown a:hover{text-decoration:underline}.lc-markdown strong{font-weight:var(--font-weight-semibold, 600)}.lc-markdown code{background-color:var(--color-surface-hover);color:var(--color-text-primary);padding:.125em .375em;border-radius:var(--border-radius-sm, .25rem);font-family:var(--font-family-mono, monospace);font-size:.875em}.lc-markdown pre{margin:1em 0;overflow-x:auto}.lc-markdown pre code{background:none;padding:0;border-radius:0}.lc-markdown blockquote{margin:1em 0;padding:.5em 1em;border-left:4px solid var(--color-primary-300, #93c5fd);background-color:var(--color-surface-2);color:var(--color-text-secondary, #4b5563)}.lc-markdown blockquote p{margin:0}.lc-markdown ul,.lc-markdown ol{margin:0 0 1em;padding-left:1.5em}.lc-markdown ul{list-style:disc}.lc-markdown ol{list-style:decimal}.lc-markdown li{margin:.25em 0}.lc-markdown hr{border:none;border-top:1px solid var(--color-divider, #e5e7eb);margin:1.5em 0}.lc-markdown img{max-width:100%;height:auto;border-radius:var(--border-radius-md, .375rem)}.lc-markdown del{text-decoration:line-through;color:var(--color-text-secondary, #6b7280)}.lc-markdown em{font-style:italic}.lc-markdown__table-wrap{margin:1em 0;overflow-x:auto;-webkit-overflow-scrolling:touch}.lc-markdown__table{width:100%;border-collapse:collapse;font-size:var(--font-size-sm, .875rem)}.lc-markdown__table th,.lc-markdown__table td{padding:.5rem .75rem;border:1px solid var(--color-divider, #e5e7eb);text-align:left}.lc-markdown__table th{background-color:var(--color-surface-2);font-weight:var(--font-weight-semibold, 600)}.lc-markdown__table tr:hover td{background-color:var(--color-surface-2)}.lc-markdown__cell--left{text-align:left}.lc-markdown__cell--center{text-align:center}.lc-markdown__cell--right{text-align:right}.lc-markdown__task-item{list-style:none;display:flex;align-items:flex-start;gap:.5em}.lc-markdown__checkbox{flex:0 0 auto;box-sizing:border-box;width:1.05em;height:1.05em;margin-top:.18em;border:1.5px solid var(--color-border-strong, var(--color-border));border-radius:3px;background-color:var(--color-surface);position:relative}.lc-markdown__checkbox--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.lc-markdown__checkbox--checked:after{content:\"\";position:absolute;left:.32em;top:.12em;width:.28em;height:.55em;border:solid var(--color-on-primary, #fff);border-width:0 2px 2px 0;transform:rotate(45deg)}.lc-markdown__task-label{flex:1 1 auto;min-width:0}.lc-markdown__anchor{color:var(--color-text-tertiary);text-decoration:none;margin-right:.25em;opacity:0;transition:opacity .15s ease}h1:hover .lc-markdown__anchor,h2:hover .lc-markdown__anchor,h3:hover .lc-markdown__anchor,h4:hover .lc-markdown__anchor,h5:hover .lc-markdown__anchor,h6:hover .lc-markdown__anchor{opacity:1}.lc-markdown lc-code-block{display:block;margin:1em 0}.lc-markdown lc-code-block code{background:none;color:inherit;padding:0;border-radius:0;font-size:inherit}.lc-markdown__mermaid{margin:1em 0;padding:.75rem;border:1px solid var(--color-divider, #e5e7eb);border-radius:var(--border-radius-md, .375rem);background:var(--color-surface, #ffffff);overflow-x:auto}.lc-markdown__mermaid svg{display:block;margin:0 auto;max-width:100%;height:auto}.lc-markdown__mermaid-loading{margin:1em 0;padding:.75rem;border:1px dashed var(--color-divider, #e5e7eb);border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary, #6b7280);font-size:var(--font-size-sm, .875rem)}.lc-markdown__mermaid-fallback{margin:1em 0}.lc-markdown__mermaid-error{margin:0 0 .5rem;color:var(--color-error);font-size:var(--font-size-sm, .875rem)}.lc-markdown--compact{font-size:var(--font-size-sm, .875rem);line-height:var(--line-height-normal, 1.5)}.lc-markdown--compact h1{font-size:1.5rem}.lc-markdown--compact h2{font-size:1.25rem}.lc-markdown--compact h3{font-size:1.125rem}.lc-markdown--compact h4{font-size:1rem}.lc-markdown--compact h5,.lc-markdown--compact h6{font-size:.875rem}.lc-markdown--compact h1,.lc-markdown--compact h2,.lc-markdown--compact h3,.lc-markdown--compact h4,.lc-markdown--compact h5,.lc-markdown--compact h6{margin:1em 0 .25em}.lc-markdown--compact p{margin:0 0 .5em}.lc-markdown--compact blockquote{margin:.5em 0;padding:.25em .75em}.lc-markdown--compact ul,.lc-markdown--compact ol{margin:0 0 .5em}.lc-markdown--chat{font-size:inherit;line-height:1.4}.lc-markdown--chat p,.lc-markdown--chat ul,.lc-markdown--chat ol,.lc-markdown--chat pre,.lc-markdown--chat blockquote,.lc-markdown--chat table{margin:0 0 6px}.lc-markdown--chat h1,.lc-markdown--chat h2,.lc-markdown--chat h3,.lc-markdown--chat h4,.lc-markdown--chat h5,.lc-markdown--chat h6{margin:8px 0 4px;line-height:1.25}.lc-markdown--chat h1{font-size:1.25rem}.lc-markdown--chat h2{font-size:1.125rem}.lc-markdown--chat h3{font-size:1rem}.lc-markdown--chat h4,.lc-markdown--chat h5,.lc-markdown--chat h6{font-size:.9375rem}.lc-markdown--chat li{margin:0;line-height:1.4}.lc-markdown--chat ul,.lc-markdown--chat ol{padding-left:1.25em}.lc-markdown--chat blockquote{padding:.25em .75em}.lc-markdown--chat lc-code-block{margin:6px 0}.lc-markdown--chat hr{margin:8px 0}.lc-markdown--chat .lc-markdown__mermaid,.lc-markdown--chat .lc-markdown__mermaid-loading,.lc-markdown--chat .lc-markdown__mermaid-fallback{margin:6px 0}.lc-markdown--chat>*:first-child{margin-top:0}.lc-markdown--chat>*:last-child{margin-bottom:0}.lc-markdown__block--changed{position:relative;padding:.4rem .875rem;border-radius:0 6px 6px 0;background-color:color-mix(in srgb,var(--color-primary) 13%,var(--color-surface));transition:background-color .42s ease,padding .42s ease}.lc-markdown__block--changed:before{content:\"\";position:absolute;inset-block:0;left:0;width:3px;border-radius:0 3px 3px 0;background-color:var(--color-primary);transition:opacity .42s ease}.lc-markdown--faded .lc-markdown__block--changed{padding:0;background-color:transparent}.lc-markdown--faded .lc-markdown__block--changed:before{opacity:0}.lc-markdown__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}\n"] }]
|
|
12061
12435
|
}], ctorParameters: () => [], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], linkTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkTarget", required: false }] }], sanitize: [{ type: i0.Input, args: [{ isSignal: true, alias: "sanitize", required: false }] }], syntaxHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "syntaxHighlight", required: false }] }], showHeadingAnchors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeadingAnchors", required: false }] }], baseUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseUrl", required: false }] }], highlightChanges: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightChanges", required: false }] }], previousContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousContent", required: false }] }], changeHighlightFadeMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "changeHighlightFadeMs", required: false }] }], scrollToFirstChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollToFirstChange", required: false }] }], linkClick: [{ type: i0.Output, args: ["linkClick"] }], rendered: [{ type: i0.Output, args: ["rendered"] }], changesHighlighted: [{ type: i0.Output, args: ["changesHighlighted"] }] } });
|
|
12062
12436
|
|
|
12063
12437
|
/**
|
|
@@ -13967,22 +14341,31 @@ const BADGE_STATUS_COLOR = {
|
|
|
13967
14341
|
modified: 'var(--color-warning-default, #d97706)',
|
|
13968
14342
|
removed: 'var(--color-error-default, #dc2626)',
|
|
13969
14343
|
muted: 'var(--color-neutral-300)',
|
|
14344
|
+
success: 'var(--color-success-default, #16a34a)',
|
|
14345
|
+
busy: 'var(--color-primary-500, #6366f1)',
|
|
13970
14346
|
};
|
|
13971
14347
|
function nodeType(node) {
|
|
13972
14348
|
return node.type ?? (node.children ? 'folder' : 'file');
|
|
13973
14349
|
}
|
|
14350
|
+
function isExpandable(node) {
|
|
14351
|
+
return !!node.children?.length;
|
|
14352
|
+
}
|
|
13974
14353
|
/**
|
|
13975
|
-
* Tree view component for visualizing file / folder
|
|
13976
|
-
*
|
|
14354
|
+
* Tree view component for visualizing hierarchies — file / folder trees as
|
|
14355
|
+
* well as arbitrary domain object trees with custom node types.
|
|
13977
14356
|
*
|
|
13978
14357
|
* Features:
|
|
13979
|
-
* - Recursive
|
|
14358
|
+
* - Recursive rendering from a single `nodes` input; any node with children
|
|
14359
|
+
* can expand / collapse
|
|
13980
14360
|
* - Automatic file-type icons by extension and well-known file name,
|
|
13981
|
-
* with open / closed folder icons
|
|
13982
|
-
* -
|
|
14361
|
+
* with open / closed folder icons (for `file` / `folder` nodes)
|
|
14362
|
+
* - Custom node types: colored type dots or explicit icons via `type`,
|
|
14363
|
+
* `color`, `icon`
|
|
14364
|
+
* - Expand / collapse, with expand-all / collapse-all helpers
|
|
13983
14365
|
* - Two-way bound selection and a `nodeClick` event
|
|
13984
14366
|
* - Indentation guide lines for readability
|
|
13985
|
-
* - Optional per-node status badges (added / modified / removed)
|
|
14367
|
+
* - Optional per-node status badges (added / modified / removed) and status
|
|
14368
|
+
* indicators (`success` ✓, `busy` pulse)
|
|
13986
14369
|
* - Keyboard accessible (Enter / Space to toggle or select)
|
|
13987
14370
|
* - Dark / light theme support via design tokens
|
|
13988
14371
|
*
|
|
@@ -14073,10 +14456,9 @@ class TreeViewComponent {
|
|
|
14073
14456
|
const walk = (nodes, parentPath) => {
|
|
14074
14457
|
for (const node of nodes) {
|
|
14075
14458
|
const id = node.id ?? `${parentPath}/${node.name}`;
|
|
14076
|
-
if (
|
|
14459
|
+
if (node.children?.length) {
|
|
14077
14460
|
next.set(id, value);
|
|
14078
|
-
|
|
14079
|
-
walk(node.children, id);
|
|
14461
|
+
walk(node.children, id);
|
|
14080
14462
|
}
|
|
14081
14463
|
}
|
|
14082
14464
|
};
|
|
@@ -14093,7 +14475,7 @@ class TreeViewComponent {
|
|
|
14093
14475
|
nodes.forEach((node, index) => {
|
|
14094
14476
|
const id = node.id ?? `${parentPath}/${node.name}`;
|
|
14095
14477
|
const type = nodeType(node);
|
|
14096
|
-
const hasChildren =
|
|
14478
|
+
const hasChildren = isExpandable(node);
|
|
14097
14479
|
const expanded = hasChildren && this.isExpanded(id, node, overrides);
|
|
14098
14480
|
const isLast = index === nodes.length - 1;
|
|
14099
14481
|
out.push({
|
|
@@ -14104,6 +14486,7 @@ class TreeViewComponent {
|
|
|
14104
14486
|
hasChildren,
|
|
14105
14487
|
expanded,
|
|
14106
14488
|
icon: this.resolveIcon(node, type, expanded),
|
|
14489
|
+
color: node.color,
|
|
14107
14490
|
badge: node.badge,
|
|
14108
14491
|
status: node.status ?? 'default',
|
|
14109
14492
|
disabled: node.disabled ?? false,
|
|
@@ -14120,7 +14503,11 @@ class TreeViewComponent {
|
|
|
14120
14503
|
return node.icon;
|
|
14121
14504
|
if (type === 'folder')
|
|
14122
14505
|
return expanded ? FOLDER_OPEN_ICON : FOLDER_ICON;
|
|
14123
|
-
|
|
14506
|
+
if (type === 'file') {
|
|
14507
|
+
return node.name ? resolveFileIcon(node.name) : FILE_FALLBACK_ICON;
|
|
14508
|
+
}
|
|
14509
|
+
// Custom domain type without explicit icon: render a colored type dot.
|
|
14510
|
+
return null;
|
|
14124
14511
|
}
|
|
14125
14512
|
findNode(nodes, parentPath, targetId) {
|
|
14126
14513
|
for (const node of nodes) {
|
|
@@ -14136,11 +14523,11 @@ class TreeViewComponent {
|
|
|
14136
14523
|
return null;
|
|
14137
14524
|
}
|
|
14138
14525
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TreeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14139
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: TreeViewComponent, isStandalone: true, selector: "lc-tree-view", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, showGuides: { classPropertyName: "showGuides", publicName: "showGuides", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedId: "selectedIdChange", nodeClick: "nodeClick" }, host: { classAttribute: "lc-tree-view" }, ngImport: i0, template: "@if (showToolbar()) {\n <div class=\"lc-tree-view__toolbar\">\n <button type=\"button\" class=\"lc-tree-view__tool-btn\" (click)=\"expandAll()\" title=\"Expand all\">\n <lc-icon name=\"fold-down\" size=\"xs\" [decorative]=\"true\" />\n <span>Expand all</span>\n </button>\n <button type=\"button\" class=\"lc-tree-view__tool-btn\" (click)=\"collapseAll()\" title=\"Collapse all\">\n <lc-icon name=\"fold-up\" size=\"xs\" [decorative]=\"true\" />\n <span>Collapse all</span>\n </button>\n </div>\n}\n\n<ul class=\"lc-tree-view__list\" role=\"tree\">\n @for (node of visibleNodes(); track trackById($index, node)) {\n <li\n class=\"lc-tree-view__item\"\n [class.lc-tree-view__item--selected]=\"node.id === selectedId()\"\n [class.lc-tree-view__item--disabled]=\"node.disabled\"\n [class.lc-tree-view__item--folder]=\"node.type === 'folder'\"\n role=\"treeitem\"\n [attr.aria-level]=\"node.depth + 1\"\n [attr.aria-expanded]=\"node.hasChildren ? node.expanded : null\"\n [attr.aria-selected]=\"node.id === selectedId()\"\n [attr.aria-disabled]=\"node.disabled ? true : null\"\n [tabindex]=\"node.disabled ? -1 : 0\"\n (click)=\"onNodeClick(node)\"\n (keydown)=\"onKeydown(node, $event)\"\n >\n <!-- indentation + guide lines -->\n @for (hasSibling of node.ancestorHasSibling; track $index) {\n <span\n class=\"lc-tree-view__indent\"\n [class.lc-tree-view__indent--guide]=\"showGuides() && hasSibling\"\n ></span>\n }\n\n <!-- expand / collapse chevron -->\n <span class=\"lc-tree-view__chevron\">\n @if (node.hasChildren) {\n <button\n type=\"button\"\n class=\"lc-tree-view__chevron-btn\"\n [class.lc-tree-view__chevron-btn--expanded]=\"node.expanded\"\n (click)=\"onToggleClick(node, $event)\"\n [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n tabindex=\"-1\"\n >\n <lc-icon name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </span>\n\n <!-- type / file icon -->\n <span\n class=\"lc-tree-view__icon\"\n [style.color]=\"\n node.status === 'default' ? null : badgeColor(node.status)\n \"\n >\n <lc-icon [name]=\"
|
|
14526
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: TreeViewComponent, isStandalone: true, selector: "lc-tree-view", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, showGuides: { classPropertyName: "showGuides", publicName: "showGuides", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedId: "selectedIdChange", nodeClick: "nodeClick" }, host: { classAttribute: "lc-tree-view" }, ngImport: i0, template: "@if (showToolbar()) {\n <div class=\"lc-tree-view__toolbar\">\n <button type=\"button\" class=\"lc-tree-view__tool-btn\" (click)=\"expandAll()\" title=\"Expand all\">\n <lc-icon name=\"fold-down\" size=\"xs\" [decorative]=\"true\" />\n <span>Expand all</span>\n </button>\n <button type=\"button\" class=\"lc-tree-view__tool-btn\" (click)=\"collapseAll()\" title=\"Collapse all\">\n <lc-icon name=\"fold-up\" size=\"xs\" [decorative]=\"true\" />\n <span>Collapse all</span>\n </button>\n </div>\n}\n\n<ul class=\"lc-tree-view__list\" role=\"tree\">\n @for (node of visibleNodes(); track trackById($index, node)) {\n <li\n class=\"lc-tree-view__item\"\n [class.lc-tree-view__item--selected]=\"node.id === selectedId()\"\n [class.lc-tree-view__item--disabled]=\"node.disabled\"\n [class.lc-tree-view__item--folder]=\"node.type === 'folder'\"\n role=\"treeitem\"\n [attr.aria-level]=\"node.depth + 1\"\n [attr.aria-expanded]=\"node.hasChildren ? node.expanded : null\"\n [attr.aria-selected]=\"node.id === selectedId()\"\n [attr.aria-disabled]=\"node.disabled ? true : null\"\n [attr.aria-busy]=\"node.status === 'busy' ? true : null\"\n [tabindex]=\"node.disabled ? -1 : 0\"\n (click)=\"onNodeClick(node)\"\n (keydown)=\"onKeydown(node, $event)\"\n >\n <!-- indentation + guide lines -->\n @for (hasSibling of node.ancestorHasSibling; track $index) {\n <span\n class=\"lc-tree-view__indent\"\n [class.lc-tree-view__indent--guide]=\"showGuides() && hasSibling\"\n ></span>\n }\n\n <!-- expand / collapse chevron -->\n <span class=\"lc-tree-view__chevron\">\n @if (node.hasChildren) {\n <button\n type=\"button\"\n class=\"lc-tree-view__chevron-btn\"\n [class.lc-tree-view__chevron-btn--expanded]=\"node.expanded\"\n (click)=\"onToggleClick(node, $event)\"\n [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n tabindex=\"-1\"\n >\n <lc-icon name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </span>\n\n <!-- type / file icon, or type dot for custom node types -->\n <span\n class=\"lc-tree-view__icon\"\n [style.color]=\"\n node.color ?? (node.status === 'default' ? null : badgeColor(node.status))\n \"\n >\n @if (node.icon; as icon) {\n <lc-icon [name]=\"icon\" [size]=\"iconSize()\" [decorative]=\"true\" />\n } @else {\n <span\n class=\"lc-tree-view__type-dot\"\n [style.background-color]=\"node.color ?? null\"\n ></span>\n }\n </span>\n\n <!-- label -->\n <span class=\"lc-tree-view__label\">{{ node.name }}</span>\n\n <!-- badge -->\n @if (node.badge) {\n <span\n class=\"lc-tree-view__badge\"\n [style.color]=\"badgeColor(node.status)\"\n [style.border-color]=\"badgeColor(node.status)\"\n >{{ node.badge }}</span\n >\n }\n\n <!-- status indicator -->\n @if (node.status === 'success') {\n <span class=\"lc-tree-view__status lc-tree-view__status--success\">\n <lc-icon name=\"check\" size=\"xs\" [decorative]=\"true\" />\n </span>\n } @else if (node.status === 'busy') {\n <span class=\"lc-tree-view__status lc-tree-view__status--busy\"></span>\n }\n </li>\n }\n</ul>\n", styles: [":host{display:block;border:1px solid var(--color-neutral-200);border-radius:8px;background:var(--color-surface);overflow:hidden;font-size:13px;color:var(--color-text-primary)}.lc-tree-view__toolbar{display:flex;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-50);-webkit-user-select:none;user-select:none}.lc-tree-view__tool-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--color-text-secondary);font-size:12px;cursor:pointer;line-height:1}.lc-tree-view__tool-btn:hover{background:var(--color-neutral-100);color:var(--color-text-primary)}.lc-tree-view__list{list-style:none;margin:0;padding:4px 0}.lc-tree-view__item{display:flex;align-items:center;height:26px;padding-right:8px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;outline:none}.lc-tree-view__item:hover{background:var(--color-neutral-100)}.lc-tree-view__item:focus-visible{box-shadow:inset 0 0 0 2px var(--color-primary-400)}.lc-tree-view__item--selected{background:var(--color-primary-50)}.lc-tree-view__item--selected:hover{background:var(--color-primary-100, var(--color-primary-50))}.lc-tree-view__item--selected .lc-tree-view__label{color:var(--color-primary-700);font-weight:500}.lc-tree-view__item--disabled{opacity:.5;cursor:not-allowed}.lc-tree-view__item--disabled:hover{background:transparent}.lc-tree-view__indent{flex:0 0 18px;width:18px;height:100%;position:relative}.lc-tree-view__indent--guide:before{content:\"\";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--color-neutral-200)}.lc-tree-view__chevron{flex:0 0 18px;width:18px;display:flex;align-items:center;justify-content:center;color:var(--color-text-tertiary)}.lc-tree-view__chevron-btn{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:inherit;cursor:pointer;border-radius:3px;transition:transform .12s ease}.lc-tree-view__chevron-btn:hover{background:var(--color-neutral-200)}.lc-tree-view__chevron-btn--expanded{transform:rotate(90deg)}.lc-tree-view__icon{display:flex;align-items:center;margin-right:6px;color:var(--color-text-tertiary)}.lc-tree-view__item--folder .lc-tree-view__icon{color:var(--color-primary-500, #6366f1)}.lc-tree-view__label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text-primary)}.lc-tree-view__badge{flex:0 0 auto;margin-left:8px;padding:1px 6px;border:1px solid;border-radius:10px;font-size:10px;line-height:1.4;font-weight:600;text-transform:uppercase;letter-spacing:.02em}.lc-tree-view__type-dot{display:block;width:8px;height:8px;border-radius:50%;background:var(--color-neutral-400)}.lc-tree-view__status{flex:0 0 auto;display:inline-flex;align-items:center;margin-left:8px}.lc-tree-view__status--success{color:var(--color-success-default, #16a34a)}.lc-tree-view__status--busy{width:8px;height:8px;border-radius:50%;background:var(--color-primary-500, #6366f1);animation:lc-tree-view-pulse 1.2s ease-in-out infinite}@keyframes lc-tree-view-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}@media(prefers-reduced-motion:reduce){.lc-tree-view__status--busy{animation:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative", "strict"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14140
14527
|
}
|
|
14141
14528
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TreeViewComponent, decorators: [{
|
|
14142
14529
|
type: Component,
|
|
14143
|
-
args: [{ selector: 'lc-tree-view', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'lc-tree-view' }, template: "@if (showToolbar()) {\n <div class=\"lc-tree-view__toolbar\">\n <button type=\"button\" class=\"lc-tree-view__tool-btn\" (click)=\"expandAll()\" title=\"Expand all\">\n <lc-icon name=\"fold-down\" size=\"xs\" [decorative]=\"true\" />\n <span>Expand all</span>\n </button>\n <button type=\"button\" class=\"lc-tree-view__tool-btn\" (click)=\"collapseAll()\" title=\"Collapse all\">\n <lc-icon name=\"fold-up\" size=\"xs\" [decorative]=\"true\" />\n <span>Collapse all</span>\n </button>\n </div>\n}\n\n<ul class=\"lc-tree-view__list\" role=\"tree\">\n @for (node of visibleNodes(); track trackById($index, node)) {\n <li\n class=\"lc-tree-view__item\"\n [class.lc-tree-view__item--selected]=\"node.id === selectedId()\"\n [class.lc-tree-view__item--disabled]=\"node.disabled\"\n [class.lc-tree-view__item--folder]=\"node.type === 'folder'\"\n role=\"treeitem\"\n [attr.aria-level]=\"node.depth + 1\"\n [attr.aria-expanded]=\"node.hasChildren ? node.expanded : null\"\n [attr.aria-selected]=\"node.id === selectedId()\"\n [attr.aria-disabled]=\"node.disabled ? true : null\"\n [tabindex]=\"node.disabled ? -1 : 0\"\n (click)=\"onNodeClick(node)\"\n (keydown)=\"onKeydown(node, $event)\"\n >\n <!-- indentation + guide lines -->\n @for (hasSibling of node.ancestorHasSibling; track $index) {\n <span\n class=\"lc-tree-view__indent\"\n [class.lc-tree-view__indent--guide]=\"showGuides() && hasSibling\"\n ></span>\n }\n\n <!-- expand / collapse chevron -->\n <span class=\"lc-tree-view__chevron\">\n @if (node.hasChildren) {\n <button\n type=\"button\"\n class=\"lc-tree-view__chevron-btn\"\n [class.lc-tree-view__chevron-btn--expanded]=\"node.expanded\"\n (click)=\"onToggleClick(node, $event)\"\n [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n tabindex=\"-1\"\n >\n <lc-icon name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </span>\n\n <!-- type / file icon -->\n <span\n class=\"lc-tree-view__icon\"\n [style.color]=\"\n node.status === 'default' ? null : badgeColor(node.status)\n \"\n >\n <lc-icon [name]=\"
|
|
14530
|
+
args: [{ selector: 'lc-tree-view', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'lc-tree-view' }, template: "@if (showToolbar()) {\n <div class=\"lc-tree-view__toolbar\">\n <button type=\"button\" class=\"lc-tree-view__tool-btn\" (click)=\"expandAll()\" title=\"Expand all\">\n <lc-icon name=\"fold-down\" size=\"xs\" [decorative]=\"true\" />\n <span>Expand all</span>\n </button>\n <button type=\"button\" class=\"lc-tree-view__tool-btn\" (click)=\"collapseAll()\" title=\"Collapse all\">\n <lc-icon name=\"fold-up\" size=\"xs\" [decorative]=\"true\" />\n <span>Collapse all</span>\n </button>\n </div>\n}\n\n<ul class=\"lc-tree-view__list\" role=\"tree\">\n @for (node of visibleNodes(); track trackById($index, node)) {\n <li\n class=\"lc-tree-view__item\"\n [class.lc-tree-view__item--selected]=\"node.id === selectedId()\"\n [class.lc-tree-view__item--disabled]=\"node.disabled\"\n [class.lc-tree-view__item--folder]=\"node.type === 'folder'\"\n role=\"treeitem\"\n [attr.aria-level]=\"node.depth + 1\"\n [attr.aria-expanded]=\"node.hasChildren ? node.expanded : null\"\n [attr.aria-selected]=\"node.id === selectedId()\"\n [attr.aria-disabled]=\"node.disabled ? true : null\"\n [attr.aria-busy]=\"node.status === 'busy' ? true : null\"\n [tabindex]=\"node.disabled ? -1 : 0\"\n (click)=\"onNodeClick(node)\"\n (keydown)=\"onKeydown(node, $event)\"\n >\n <!-- indentation + guide lines -->\n @for (hasSibling of node.ancestorHasSibling; track $index) {\n <span\n class=\"lc-tree-view__indent\"\n [class.lc-tree-view__indent--guide]=\"showGuides() && hasSibling\"\n ></span>\n }\n\n <!-- expand / collapse chevron -->\n <span class=\"lc-tree-view__chevron\">\n @if (node.hasChildren) {\n <button\n type=\"button\"\n class=\"lc-tree-view__chevron-btn\"\n [class.lc-tree-view__chevron-btn--expanded]=\"node.expanded\"\n (click)=\"onToggleClick(node, $event)\"\n [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n tabindex=\"-1\"\n >\n <lc-icon name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </span>\n\n <!-- type / file icon, or type dot for custom node types -->\n <span\n class=\"lc-tree-view__icon\"\n [style.color]=\"\n node.color ?? (node.status === 'default' ? null : badgeColor(node.status))\n \"\n >\n @if (node.icon; as icon) {\n <lc-icon [name]=\"icon\" [size]=\"iconSize()\" [decorative]=\"true\" />\n } @else {\n <span\n class=\"lc-tree-view__type-dot\"\n [style.background-color]=\"node.color ?? null\"\n ></span>\n }\n </span>\n\n <!-- label -->\n <span class=\"lc-tree-view__label\">{{ node.name }}</span>\n\n <!-- badge -->\n @if (node.badge) {\n <span\n class=\"lc-tree-view__badge\"\n [style.color]=\"badgeColor(node.status)\"\n [style.border-color]=\"badgeColor(node.status)\"\n >{{ node.badge }}</span\n >\n }\n\n <!-- status indicator -->\n @if (node.status === 'success') {\n <span class=\"lc-tree-view__status lc-tree-view__status--success\">\n <lc-icon name=\"check\" size=\"xs\" [decorative]=\"true\" />\n </span>\n } @else if (node.status === 'busy') {\n <span class=\"lc-tree-view__status lc-tree-view__status--busy\"></span>\n }\n </li>\n }\n</ul>\n", styles: [":host{display:block;border:1px solid var(--color-neutral-200);border-radius:8px;background:var(--color-surface);overflow:hidden;font-size:13px;color:var(--color-text-primary)}.lc-tree-view__toolbar{display:flex;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-50);-webkit-user-select:none;user-select:none}.lc-tree-view__tool-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--color-text-secondary);font-size:12px;cursor:pointer;line-height:1}.lc-tree-view__tool-btn:hover{background:var(--color-neutral-100);color:var(--color-text-primary)}.lc-tree-view__list{list-style:none;margin:0;padding:4px 0}.lc-tree-view__item{display:flex;align-items:center;height:26px;padding-right:8px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;outline:none}.lc-tree-view__item:hover{background:var(--color-neutral-100)}.lc-tree-view__item:focus-visible{box-shadow:inset 0 0 0 2px var(--color-primary-400)}.lc-tree-view__item--selected{background:var(--color-primary-50)}.lc-tree-view__item--selected:hover{background:var(--color-primary-100, var(--color-primary-50))}.lc-tree-view__item--selected .lc-tree-view__label{color:var(--color-primary-700);font-weight:500}.lc-tree-view__item--disabled{opacity:.5;cursor:not-allowed}.lc-tree-view__item--disabled:hover{background:transparent}.lc-tree-view__indent{flex:0 0 18px;width:18px;height:100%;position:relative}.lc-tree-view__indent--guide:before{content:\"\";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--color-neutral-200)}.lc-tree-view__chevron{flex:0 0 18px;width:18px;display:flex;align-items:center;justify-content:center;color:var(--color-text-tertiary)}.lc-tree-view__chevron-btn{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:inherit;cursor:pointer;border-radius:3px;transition:transform .12s ease}.lc-tree-view__chevron-btn:hover{background:var(--color-neutral-200)}.lc-tree-view__chevron-btn--expanded{transform:rotate(90deg)}.lc-tree-view__icon{display:flex;align-items:center;margin-right:6px;color:var(--color-text-tertiary)}.lc-tree-view__item--folder .lc-tree-view__icon{color:var(--color-primary-500, #6366f1)}.lc-tree-view__label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text-primary)}.lc-tree-view__badge{flex:0 0 auto;margin-left:8px;padding:1px 6px;border:1px solid;border-radius:10px;font-size:10px;line-height:1.4;font-weight:600;text-transform:uppercase;letter-spacing:.02em}.lc-tree-view__type-dot{display:block;width:8px;height:8px;border-radius:50%;background:var(--color-neutral-400)}.lc-tree-view__status{flex:0 0 auto;display:inline-flex;align-items:center;margin-left:8px}.lc-tree-view__status--success{color:var(--color-success-default, #16a34a)}.lc-tree-view__status--busy{width:8px;height:8px;border-radius:50%;background:var(--color-primary-500, #6366f1);animation:lc-tree-view-pulse 1.2s ease-in-out infinite}@keyframes lc-tree-view-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}@media(prefers-reduced-motion:reduce){.lc-tree-view__status--busy{animation:none}}\n"] }]
|
|
14144
14531
|
}], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: true }] }], selectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedId", required: false }] }, { type: i0.Output, args: ["selectedIdChange"] }], showGuides: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGuides", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }] } });
|
|
14145
14532
|
|
|
14146
14533
|
const DEFAULT_COLORS$1 = [
|
|
@@ -16202,7 +16589,7 @@ class ComboboxComponent {
|
|
|
16202
16589
|
useExisting: forwardRef(() => ComboboxComponent),
|
|
16203
16590
|
multi: true,
|
|
16204
16591
|
},
|
|
16205
|
-
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<div [class]=\"containerClasses()\">\n @if (label()) {\n <label class=\"lc-combobox__label\">{{ label() }}</label>\n }\n\n <div class=\"lc-combobox__input-wrapper\">\n <!-- Selected chips (multiple mode) -->\n @if (multiple()) {\n @for (sel of selectedMultiple(); track sel.value) {\n <lc-chip\n [removable]=\"!disabled()\"\n size=\"sm\"\n (remove)=\"removeSelected(sel)\"\n >{{ sel.label }}</lc-chip>\n }\n }\n\n <input\n #inputEl\n type=\"text\"\n class=\"lc-combobox__input\"\n [placeholder]=\"multiple() && selectedMultiple().length > 0 ? '' : placeholder()\"\n [value]=\"query()\"\n [disabled]=\"disabled()\"\n role=\"combobox\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n autocomplete=\"off\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeydown($event)\"\n />\n\n @if (isLoading() || loading()) {\n <lc-spinner size=\"sm\" class=\"lc-combobox__spinner\" />\n } @else if (!multiple() && selectedSingle()) {\n <button\n type=\"button\"\n class=\"lc-combobox__clear\"\n (click)=\"selectOption({value: '', label: ''}); query.set('')\"\n tabindex=\"-1\"\n aria-label=\"Clear\"\n >\n <lc-icon name=\"x-mark\" size=\"xs\" />\n </button>\n }\n </div>\n\n <!-- Dropdown -->\n @if (isOpen()) {\n <div class=\"lc-combobox__dropdown\" role=\"listbox\">\n @for (group of groupedOptions(); track group.label) {\n @if (group.label) {\n <div class=\"lc-combobox__group-header\">{{ group.label }}</div>\n }\n @for (option of group.items; track option.value; let i = $index) {\n <div\n class=\"lc-combobox__option\"\n [class.lc-combobox__option--highlighted]=\"flatOptions().indexOf(option) === highlightedIndex()\"\n [class.lc-combobox__option--disabled]=\"option.disabled\"\n role=\"option\"\n [attr.aria-selected]=\"flatOptions().indexOf(option) === highlightedIndex()\"\n [attr.aria-disabled]=\"option.disabled\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"!option.disabled && selectOption(option)\"\n (mouseenter)=\"highlightedIndex.set(flatOptions().indexOf(option))\"\n >\n @if (option.icon) {\n <lc-icon [name]=\"option.icon\" size=\"sm\" class=\"lc-combobox__option-icon\" />\n }\n <div class=\"lc-combobox__option-content\">\n <span class=\"lc-combobox__option-label\">{{ option.label }}</span>\n @if (option.description) {\n <span class=\"lc-combobox__option-desc\">{{ option.description }}</span>\n }\n </div>\n </div>\n }\n }\n\n @if (showCreateOption()) {\n <div\n class=\"lc-combobox__option lc-combobox__option--create\"\n [class.lc-combobox__option--highlighted]=\"highlightedIndex() === flatOptions().length\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onCreateNew()\"\n (mouseenter)=\"highlightedIndex.set(flatOptions().length)\"\n >\n <lc-icon name=\"plus\" size=\"sm\" />\n <span>Create \"{{ query() }}\"</span>\n </div>\n }\n\n @if (visibleOptions().length === 0 && !showCreateOption() && !isLoading() && !loading()) {\n <div class=\"lc-combobox__empty\">{{ emptyMessage() }}</div>\n }\n </div>\n }\n\n @if (helperText() && !error()) {\n <span class=\"lc-combobox__helper\">{{ helperText() }}</span>\n }\n @if (error()) {\n <span class=\"lc-combobox__error\">{{ error() }}</span>\n }\n</div>\n", styles: [".lc-combobox{display:flex;flex-direction:column;gap:.25rem;position:relative;font-family:var(--font-family-sans)}.lc-combobox__label{font-size:var(--font-size-sm, .875rem);font-weight:500;color:var(--color-text-primary);margin-bottom:.125rem}.lc-combobox__input-wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;border:1px solid var(--color-neutral-300, #d1d5db);border-radius:var(--border-radius-md, .375rem);background-color:var(--color-background, #ffffff);padding:.25rem .5rem;transition:border-color .15s,box-shadow .15s;cursor:text}.lc-combobox__input-wrapper:focus-within{border-color:var(--color-primary-500, #3b82f6);box-shadow:0 0 0 3px #3b82f626}.lc-combobox--error .lc-combobox__input-wrapper{border-color:var(--color-error-default, #ef4444)}.lc-combobox--error .lc-combobox__input-wrapper:focus-within{box-shadow:0 0 0 3px #ef444426}.lc-combobox--disabled .lc-combobox__input-wrapper{opacity:.5;cursor:not-allowed;background-color:var(--color-neutral-50, #f9fafb)}.lc-combobox__input{flex:1;min-width:80px;border:none;outline:none;background:transparent;color:var(--color-text-primary);font-family:inherit}.lc-combobox__input::placeholder{color:var(--color-neutral-400, #9ca3af)}.lc-combobox__input:disabled{cursor:not-allowed}.lc-combobox--xs .lc-combobox__input{font-size:var(--font-size-xs, .75rem);height:1.5rem}.lc-combobox--sm .lc-combobox__input{font-size:var(--font-size-sm, .875rem);height:1.75rem}.lc-combobox--md .lc-combobox__input{font-size:var(--font-size-base, 1rem);height:2rem}.lc-combobox--lg .lc-combobox__input{font-size:var(--font-size-lg, 1.125rem);height:2.25rem}.lc-combobox__spinner{flex-shrink:0}.lc-combobox__clear{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;cursor:pointer;color:var(--color-neutral-400, #9ca3af);border-radius:var(--border-radius-sm, .25rem);flex-shrink:0}.lc-combobox__clear:hover{color:var(--color-text-primary);background-color:var(--color-neutral-100, #f3f4f6)}.lc-combobox__dropdown{position:absolute;top:100%;left:0;right:0;margin-top:.25rem;max-height:240px;overflow-y:auto;background-color:var(--color-background, #ffffff);border:1px solid var(--color-neutral-200, #e5e7eb);border-radius:var(--border-radius-md, .375rem);box-shadow:var(--elevation-3, 0 10px 15px -3px rgba(0, 0, 0, .1));z-index:50}.lc-combobox__group-header{padding:.375rem .75rem;font-size:var(--font-size-xs, .75rem);font-weight:600;color:var(--color-neutral-500, #6b7280);text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem}.lc-combobox__group-header:first-child{margin-top:0}.lc-combobox__option{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;cursor:pointer;transition:background-color .1s}.lc-combobox__option--highlighted{background-color:var(--color-neutral-100, #f3f4f6)}.lc-combobox__option--disabled{opacity:.5;cursor:not-allowed}.lc-combobox__option--create{color:var(--color-primary-600, #2563eb);font-weight:500;border-top:1px solid var(--color-neutral-100, #f3f4f6)}.lc-combobox__option-icon{flex-shrink:0;color:var(--color-neutral-500, #6b7280)}.lc-combobox__option-content{display:flex;flex-direction:column;min-width:0}.lc-combobox__option-label{font-size:var(--font-size-sm, .875rem);color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-combobox__option-desc{font-size:var(--font-size-xs, .75rem);color:var(--color-text-secondary, #6b7280);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-combobox__empty{padding:.75rem;text-align:center;color:var(--color-neutral-400, #9ca3af);font-size:var(--font-size-sm, .875rem)}.lc-combobox__helper{font-size:var(--font-size-xs, .75rem);color:var(--color-text-secondary, #6b7280)}.lc-combobox__error{font-size:var(--font-size-xs, .75rem);color:var(--color-error-default, #ef4444)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative", "strict"] }, { kind: "component", type: SpinnerComponent, selector: "lc-spinner", inputs: ["size", "message"] }, { kind: "component", type: ChipComponent, selector: "lc-chip", inputs: ["variant", "size", "icon", "removable", "disabled"], outputs: ["remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
16592
|
+
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<div [class]=\"containerClasses()\">\n @if (label()) {\n <label class=\"lc-combobox__label\">{{ label() }}</label>\n }\n\n <div class=\"lc-combobox__input-wrapper\">\n <!-- Selected chips (multiple mode) -->\n @if (multiple()) {\n @for (sel of selectedMultiple(); track sel.value) {\n <lc-chip\n [removable]=\"!disabled()\"\n size=\"sm\"\n (remove)=\"removeSelected(sel)\"\n >{{ sel.label }}</lc-chip>\n }\n }\n\n <input\n #inputEl\n type=\"text\"\n class=\"lc-combobox__input\"\n [placeholder]=\"multiple() && selectedMultiple().length > 0 ? '' : placeholder()\"\n [value]=\"query()\"\n [disabled]=\"disabled()\"\n role=\"combobox\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n autocomplete=\"off\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeydown($event)\"\n />\n\n @if (isLoading() || loading()) {\n <lc-spinner size=\"sm\" class=\"lc-combobox__spinner\" />\n } @else if (!multiple() && selectedSingle()) {\n <button\n type=\"button\"\n class=\"lc-combobox__clear\"\n (click)=\"selectOption({value: '', label: ''}); query.set('')\"\n tabindex=\"-1\"\n aria-label=\"Clear\"\n >\n <lc-icon name=\"x-mark\" size=\"xs\" />\n </button>\n }\n </div>\n\n <!-- Dropdown -->\n @if (isOpen()) {\n <div class=\"lc-combobox__dropdown\" role=\"listbox\">\n @for (group of groupedOptions(); track group.label) {\n @if (group.label) {\n <div class=\"lc-combobox__group-header\">{{ group.label }}</div>\n }\n @for (option of group.items; track option.value; let i = $index) {\n <div\n class=\"lc-combobox__option\"\n [class.lc-combobox__option--highlighted]=\"flatOptions().indexOf(option) === highlightedIndex()\"\n [class.lc-combobox__option--disabled]=\"option.disabled\"\n role=\"option\"\n [attr.aria-selected]=\"flatOptions().indexOf(option) === highlightedIndex()\"\n [attr.aria-disabled]=\"option.disabled\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"!option.disabled && selectOption(option)\"\n (mouseenter)=\"highlightedIndex.set(flatOptions().indexOf(option))\"\n >\n @if (option.icon) {\n <lc-icon [name]=\"option.icon\" size=\"sm\" class=\"lc-combobox__option-icon\" />\n }\n <div class=\"lc-combobox__option-content\">\n <span class=\"lc-combobox__option-label\">{{ option.label }}</span>\n @if (option.description) {\n <span class=\"lc-combobox__option-desc\">{{ option.description }}</span>\n }\n </div>\n </div>\n }\n }\n\n @if (showCreateOption()) {\n <div\n class=\"lc-combobox__option lc-combobox__option--create\"\n [class.lc-combobox__option--highlighted]=\"highlightedIndex() === flatOptions().length\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onCreateNew()\"\n (mouseenter)=\"highlightedIndex.set(flatOptions().length)\"\n >\n <lc-icon name=\"plus\" size=\"sm\" />\n <span>Create \"{{ query() }}\"</span>\n </div>\n }\n\n @if (visibleOptions().length === 0 && !showCreateOption() && !isLoading() && !loading()) {\n <div class=\"lc-combobox__empty\">{{ emptyMessage() }}</div>\n }\n </div>\n }\n\n @if (helperText() && !error()) {\n <span class=\"lc-combobox__helper\">{{ helperText() }}</span>\n }\n @if (error()) {\n <span class=\"lc-combobox__error\">{{ error() }}</span>\n }\n</div>\n", styles: [".lc-combobox{display:flex;flex-direction:column;gap:.25rem;position:relative;font-family:var(--font-family-sans)}.lc-combobox__label{font-size:var(--font-size-sm, .875rem);font-weight:500;color:var(--color-text-primary);margin-bottom:.125rem}.lc-combobox__input-wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;border:1px solid var(--color-neutral-300, #d1d5db);border-radius:var(--border-radius-md, .375rem);background-color:var(--color-background, #ffffff);padding:.25rem .5rem;transition:border-color .15s,box-shadow .15s;cursor:text}.lc-combobox__input-wrapper:focus-within{border-color:var(--color-primary-500, #3b82f6);box-shadow:0 0 0 3px #3b82f626}.lc-combobox--error .lc-combobox__input-wrapper{border-color:var(--color-error-default, #ef4444)}.lc-combobox--error .lc-combobox__input-wrapper:focus-within{box-shadow:0 0 0 3px #ef444426}.lc-combobox--disabled .lc-combobox__input-wrapper{opacity:.5;cursor:not-allowed;background-color:var(--color-neutral-50, #f9fafb)}.lc-combobox__input{flex:1;min-width:80px;border:none;outline:none;background:transparent;color:var(--color-text-primary);font-family:inherit}.lc-combobox__input::placeholder{color:var(--color-neutral-400, #9ca3af)}.lc-combobox__input:disabled{cursor:not-allowed}.lc-combobox--xs .lc-combobox__input{font-size:var(--font-size-xs, .75rem);height:1.5rem}.lc-combobox--sm .lc-combobox__input{font-size:var(--font-size-sm, .875rem);height:1.75rem}.lc-combobox--md .lc-combobox__input{font-size:var(--font-size-base, 1rem);height:2rem}.lc-combobox--lg .lc-combobox__input{font-size:var(--font-size-lg, 1.125rem);height:2.25rem}.lc-combobox__spinner{flex-shrink:0}.lc-combobox__clear{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;cursor:pointer;color:var(--color-neutral-400, #9ca3af);border-radius:var(--border-radius-sm, .25rem);flex-shrink:0}.lc-combobox__clear:hover{color:var(--color-text-primary);background-color:var(--color-neutral-100, #f3f4f6)}.lc-combobox__dropdown{position:absolute;top:100%;left:0;right:0;margin-top:.25rem;max-height:240px;overflow-y:auto;background-color:var(--color-background, #ffffff);border:1px solid var(--color-neutral-200, #e5e7eb);border-radius:var(--border-radius-md, .375rem);box-shadow:var(--elevation-3, 0 10px 15px -3px rgba(0, 0, 0, .1));z-index:50}.lc-combobox__group-header{padding:.375rem .75rem;font-size:var(--font-size-xs, .75rem);font-weight:600;color:var(--color-neutral-500, #6b7280);text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem}.lc-combobox__group-header:first-child{margin-top:0}.lc-combobox__option{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;cursor:pointer;transition:background-color .1s}.lc-combobox__option--highlighted{background-color:var(--color-neutral-100, #f3f4f6)}.lc-combobox__option--disabled{opacity:.5;cursor:not-allowed}.lc-combobox__option--create{color:var(--color-primary-600, #2563eb);font-weight:500;border-top:1px solid var(--color-neutral-100, #f3f4f6)}.lc-combobox__option-icon{flex-shrink:0;color:var(--color-neutral-500, #6b7280)}.lc-combobox__option-content{display:flex;flex-direction:column;min-width:0}.lc-combobox__option-label{font-size:var(--font-size-sm, .875rem);color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-combobox__option-desc{font-size:var(--font-size-xs, .75rem);color:var(--color-text-secondary, #6b7280);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-combobox__empty{padding:.75rem;text-align:center;color:var(--color-neutral-400, #9ca3af);font-size:var(--font-size-sm, .875rem)}.lc-combobox__helper{font-size:var(--font-size-xs, .75rem);color:var(--color-text-secondary, #6b7280)}.lc-combobox__error{font-size:var(--font-size-xs, .75rem);color:var(--color-error-default, #ef4444)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative", "strict"] }, { kind: "component", type: SpinnerComponent, selector: "lc-spinner", inputs: ["size", "message"] }, { kind: "component", type: ChipComponent, selector: "lc-chip", inputs: ["variant", "size", "icon", "removable", "clickable", "disabled"], outputs: ["remove", "chipClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
16206
16593
|
}
|
|
16207
16594
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ComboboxComponent, decorators: [{
|
|
16208
16595
|
type: Component,
|
|
@@ -16422,5 +16809,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
16422
16809
|
* Generated bundle index. Do not edit.
|
|
16423
16810
|
*/
|
|
16424
16811
|
|
|
16425
|
-
export { AccordionComponent, AccordionContentDirective, AccordionGroupComponent, AccordionHeaderDirective, AlertComponent, AnimationDurationFast, AnimationEasingEaseIn, AnimationEasingEaseInOut, AnimationEasingEaseOut, AreaChartComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BarChartComponent, BorderRadius2xl, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CalloutComponent, CardComponent, ChatComponent, CheckboxComponent, ChipComponent, CodeBlockComponent, ColorAccentOrange, ColorAccentPurple, ColorAccentRed, ColorAccentRust, ColorAccentViolet, ColorBackgroundDark, ColorErrorDark, ColorErrorDefault, ColorErrorLight, ColorInfoDark, ColorInfoDefault, ColorInfoLight, ColorNeutral100, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorPickerComponent, ColorPrimary100, ColorPrimary200, ColorPrimary300, ColorPrimary400, ColorPrimary50, ColorPrimary500, ColorPrimary600, ColorPrimary700, ColorPrimary800, ColorPrimary900, ColorSecondary100, ColorSecondary200, ColorSecondary300, ColorSecondary400, ColorSecondary50, ColorSecondary500, ColorSecondary600, ColorSecondary700, ColorSecondary800, ColorSecondary900, ColorSidebarDark, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorSurfaceDarkBase, ColorSurfaceDarkRaised, ColorSurfaceDarkSunken, ColorTextDarkPrimary, ColorTextDarkSecondary, ColorTextDarkTertiary, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ComboboxComponent, ConfirmDialogComponent, ConfirmService, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DescriptionListComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FILE_FALLBACK_ICON, FOLDER_ICON, FOLDER_OPEN_ICON, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, ICON_ALIASES, ICON_NAMES, IconComponent, InputComponent, KanbanBoardComponent, LC_LOGO_BASE_PATH, LineChartComponent, ListComponent, ListItemTemplateDirective, LogViewerComponent, LogoComponent, MarkdownComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PageHeaderComponent, PageLayoutComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PipelineComponent, PopoverComponent, ProgressBarComponent, ProgressRingComponent, RadarChartComponent, RadioComponent, RatingComponent, RichTextEditorComponent, ScatterPlotComponent, SearchInputComponent, SectionComponent, SelectComponent, SidenavComponent, SizeContentMaxWidth, SizeInteractiveLgFontSize, SizeInteractiveLgHeight, SizeInteractiveLgPadding, SizeInteractiveMdFontSize, SizeInteractiveMdHeight, SizeInteractiveMdPadding, SizeInteractiveSmFontSize, SizeInteractiveSmHeight, SizeInteractiveSmPadding, SizeInteractiveXsFontSize, SizeInteractiveXsHeight, SizeInteractiveXsPadding, SizeMinTouchHeight, SizeMinTouchWidth, SkeletonComponent, SliderComponent, SpacerComponent, Spacing0, Spacing05, Spacing1, Spacing10, Spacing11, Spacing12, Spacing14, Spacing15, Spacing16, Spacing2, Spacing25, Spacing3, Spacing35, Spacing4, Spacing5, Spacing6, Spacing7, Spacing8, Spacing9, SparklineComponent, SpinnerComponent, StackComponent, StackedBarChartComponent, StageListComponent, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, ToolbarComponent, TooltipContentComponent, TooltipDirective, TreeViewComponent, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent, isValidIconName, resolveFileIcon };
|
|
16812
|
+
export { AccordionComponent, AccordionContentDirective, AccordionGroupComponent, AccordionHeaderDirective, AlertComponent, AnimationDurationFast, AnimationEasingEaseIn, AnimationEasingEaseInOut, AnimationEasingEaseOut, AreaChartComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BarChartComponent, BorderRadius2xl, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CalloutComponent, CardComponent, ChatComponent, CheckboxComponent, ChipComponent, CodeBlockComponent, ColorAccentOrange, ColorAccentPurple, ColorAccentRed, ColorAccentRust, ColorAccentViolet, ColorBackgroundDark, ColorErrorDark, ColorErrorDefault, ColorErrorLight, ColorInfoDark, ColorInfoDefault, ColorInfoLight, ColorNeutral100, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorPickerComponent, ColorPrimary100, ColorPrimary200, ColorPrimary300, ColorPrimary400, ColorPrimary50, ColorPrimary500, ColorPrimary600, ColorPrimary700, ColorPrimary800, ColorPrimary900, ColorSecondary100, ColorSecondary200, ColorSecondary300, ColorSecondary400, ColorSecondary50, ColorSecondary500, ColorSecondary600, ColorSecondary700, ColorSecondary800, ColorSecondary900, ColorSidebarDark, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorSurfaceDarkBase, ColorSurfaceDarkRaised, ColorSurfaceDarkSunken, ColorTextDarkPrimary, ColorTextDarkSecondary, ColorTextDarkTertiary, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ComboboxComponent, ConfirmDialogComponent, ConfirmService, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DescriptionListComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FILE_FALLBACK_ICON, FOLDER_ICON, FOLDER_OPEN_ICON, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, ICON_ALIASES, ICON_NAMES, IconComponent, InputComponent, KanbanBoardComponent, LC_LOGO_BASE_PATH, LineChartComponent, ListComponent, ListItemTemplateDirective, LogViewerComponent, LogoComponent, MarkdownComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PageHeaderComponent, PageLayoutComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PipelineComponent, PopoverComponent, ProgressBarComponent, ProgressRingComponent, RadarChartComponent, RadioComponent, RatingComponent, RichTextEditorComponent, ScatterPlotComponent, SearchInputComponent, SectionComponent, SelectComponent, SidenavComponent, SizeContentMaxWidth, SizeInteractiveLgFontSize, SizeInteractiveLgHeight, SizeInteractiveLgPadding, SizeInteractiveMdFontSize, SizeInteractiveMdHeight, SizeInteractiveMdPadding, SizeInteractiveSmFontSize, SizeInteractiveSmHeight, SizeInteractiveSmPadding, SizeInteractiveXsFontSize, SizeInteractiveXsHeight, SizeInteractiveXsPadding, SizeMinTouchHeight, SizeMinTouchWidth, SkeletonComponent, SliderComponent, SpacerComponent, Spacing0, Spacing05, Spacing1, Spacing10, Spacing11, Spacing12, Spacing14, Spacing15, Spacing16, Spacing2, Spacing25, Spacing3, Spacing35, Spacing4, Spacing5, Spacing6, Spacing7, Spacing8, Spacing9, SparklineComponent, SpinnerComponent, SplitPaneComponent, StackComponent, StackedBarChartComponent, StageListComponent, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, ToolbarComponent, TooltipContentComponent, TooltipDirective, TreeViewComponent, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent, isValidIconName, resetIconWarnings, resolveFileIcon };
|
|
16426
16813
|
//# sourceMappingURL=life-cockpit-angular-ui-kit.mjs.map
|