@akcelik/strct 4.14.0 → 4.15.0

package/fesm2022/akcelik-strct.mjs

@@ -17439,6 +17439,14 @@ class StrctDonut {
     ...(ngDevMode ? [{ debugName: "centerLabel" }] : /* istanbul ignore next */ []));
     /** Show a legend (color · label · value · %) beside the ring. */
     legend = input(false, { ...(ngDevMode ? { debugName: "legend" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Where the legend sits: beside the ring, or under it. */
+    legendPosition = input('side', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "legendPosition" }] : /* istanbul ignore next */ []));
+    /**
+     * A zero-value category keeps its legend row, muted — "0 failed" is
+     * information. Set it false to drop those rows instead.
+     */
+    keepEmpty = input(true, { ...(ngDevMode ? { debugName: "keepEmpty" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Gap between slices, in degrees. */
     gap = input(3, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
@@ -17477,6 +17485,12 @@ class StrctDonut {
         });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "arcs" }] : /* istanbul ignore next */ []));
+    /** The rows the legend shows — every arc, or only the non-empty ones. */
+    legendArcs = computed(() => {
+        const rows = this.arcs().map((arc, index) => ({ ...arc, index }));
+        return this.keepEmpty() ? rows : rows.filter((r) => r.value !== 0);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "legendArcs" }] : /* istanbul ignore next */ []));
     centerMain = computed(() => {
         const h = this.hovered();
         if (h !== null)
@@ -17512,7 +17526,7 @@ class StrctDonut {
         this.hovered.set(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDonut, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctDonut, isStandalone: true, selector: "strct-donut", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, centerValue: { classPropertyName: "centerValue", publicName: "centerValue", isSignal: true, isRequired: false, transformFunction: null }, centerLabel: { classPropertyName: "centerLabel", publicName: "centerLabel", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-donut" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctDonut, isStandalone: true, selector: "strct-donut", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, centerValue: { classPropertyName: "centerValue", publicName: "centerValue", isSignal: true, isRequired: false, transformFunction: null }, centerLabel: { classPropertyName: "centerLabel", publicName: "centerLabel", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, legendPosition: { classPropertyName: "legendPosition", publicName: "legendPosition", isSignal: true, isRequired: false, transformFunction: null }, keepEmpty: { classPropertyName: "keepEmpty", publicName: "keepEmpty", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-donut--legend-below": "legendPosition() === 'below'" }, classAttribute: "strct-donut" }, ngImport: i0, template: `
     <div class="strct-donut__layout">
       <div class="strct-donut__wrap" [style.width.px]="size()" [style.height.px]="size()">
         <svg
@@ -17561,12 +17575,13 @@ class StrctDonut {
 
       @if (legend()) {
         <ul class="strct-donut__legend">
-          @for (arc of arcs(); track $index) {
+          @for (arc of legendArcs(); track arc.index) {
             <li
               class="strct-donut__leg"
-              [class.is-active]="hovered() === $index"
-              [class.is-dim]="hovered() !== null && hovered() !== $index"
-              (pointerenter)="enter($index)"
+              [class.is-active]="hovered() === arc.index"
+              [class.is-dim]="hovered() !== null && hovered() !== arc.index"
+              [class.is-empty]="arc.value === 0"
+              (pointerenter)="enter(arc.index)"
               (pointerleave)="leave()"
             >
               <span class="strct-donut__swatch" [style.background]="arc.color"></span>
@@ -17578,7 +17593,7 @@ class StrctDonut {
         </ul>
       }
     </div>
-  `, isInline: true, styles: [".strct-donut{display:inline-block}.strct-donut__layout{display:inline-flex;align-items:center;gap:20px}.strct-donut__wrap{position:relative;flex-shrink:0}.strct-donut__track{stroke:var(--bg-3)}.strct-donut__arc{cursor:pointer;transition:stroke-width .16s ease,opacity .16s ease}.strct-donut__arc.is-dim{opacity:.32}.strct-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.strct-donut__value{font-size:var(--text-2xl);font-weight:650;color:var(--t1);line-height:1;font-variant-numeric:tabular-nums;transition:color .16s ease}.strct-donut__label{font-size:12px;color:var(--t2);margin-top:3px}.strct-donut__legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;min-width:0}.strct-donut__leg{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:var(--radius-sm);font-size:12px;color:var(--t2);transition:background .14s ease,opacity .14s ease}.strct-donut__leg.is-active{background:var(--bg-2);color:var(--t1)}.strct-donut__leg.is-dim{opacity:.45}.strct-donut__swatch{width:9px;height:9px;border-radius:2px;flex-shrink:0}.strct-donut__leg-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-donut__leg-val{font-variant-numeric:tabular-nums;font-weight:600;color:var(--t1)}.strct-donut__leg-pct{font-variant-numeric:tabular-nums;color:var(--t3);min-width:34px;text-align:end}@media(prefers-reduced-motion:no-preference){.strct-donut__svg{transform-origin:center;animation:strct-donut-in .6s cubic-bezier(.22,1,.36,1) both}}@keyframes strct-donut-in{0%{opacity:0;transform:rotate(-16deg) scale(.94)}to{opacity:1;transform:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-donut{display:inline-block}.strct-donut__layout{display:inline-flex;align-items:center;gap:20px}.strct-donut--legend-below .strct-donut__layout{flex-direction:column;align-items:center;gap:12px}.strct-donut__leg.is-empty{opacity:.55}.strct-donut__wrap{position:relative;flex-shrink:0}.strct-donut__track{stroke:var(--bg-3)}.strct-donut__arc{cursor:pointer;transition:stroke-width .16s ease,opacity .16s ease}.strct-donut__arc.is-dim{opacity:.32}.strct-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.strct-donut__value{font-size:var(--text-2xl);font-weight:650;color:var(--t1);line-height:1;font-variant-numeric:tabular-nums;transition:color .16s ease}.strct-donut__label{font-size:12px;color:var(--t2);margin-top:3px}.strct-donut__legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;min-width:0}.strct-donut__leg{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:var(--radius-sm);font-size:12px;color:var(--t2);transition:background .14s ease,opacity .14s ease}.strct-donut__leg.is-active{background:var(--bg-2);color:var(--t1)}.strct-donut__leg.is-dim{opacity:.45}.strct-donut__swatch{width:9px;height:9px;border-radius:2px;flex-shrink:0}.strct-donut__leg-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-donut__leg-val{font-variant-numeric:tabular-nums;font-weight:600;color:var(--t1)}.strct-donut__leg-pct{font-variant-numeric:tabular-nums;color:var(--t3);min-width:34px;text-align:end}@media(prefers-reduced-motion:no-preference){.strct-donut__svg{transform-origin:center;animation:strct-donut-in .6s cubic-bezier(.22,1,.36,1) both}}@keyframes strct-donut-in{0%{opacity:0;transform:rotate(-16deg) scale(.94)}to{opacity:1;transform:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDonut, decorators: [{
             type: Component,
@@ -17631,12 +17646,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
 
       @if (legend()) {
         <ul class="strct-donut__legend">
-          @for (arc of arcs(); track $index) {
+          @for (arc of legendArcs(); track arc.index) {
             <li
               class="strct-donut__leg"
-              [class.is-active]="hovered() === $index"
-              [class.is-dim]="hovered() !== null && hovered() !== $index"
-              (pointerenter)="enter($index)"
+              [class.is-active]="hovered() === arc.index"
+              [class.is-dim]="hovered() !== null && hovered() !== arc.index"
+              [class.is-empty]="arc.value === 0"
+              (pointerenter)="enter(arc.index)"
               (pointerleave)="leave()"
             >
               <span class="strct-donut__swatch" [style.background]="arc.color"></span>
@@ -17648,8 +17664,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         </ul>
       }
     </div>
-  `, host: { class: 'strct-donut' }, styles: [".strct-donut{display:inline-block}.strct-donut__layout{display:inline-flex;align-items:center;gap:20px}.strct-donut__wrap{position:relative;flex-shrink:0}.strct-donut__track{stroke:var(--bg-3)}.strct-donut__arc{cursor:pointer;transition:stroke-width .16s ease,opacity .16s ease}.strct-donut__arc.is-dim{opacity:.32}.strct-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.strct-donut__value{font-size:var(--text-2xl);font-weight:650;color:var(--t1);line-height:1;font-variant-numeric:tabular-nums;transition:color .16s ease}.strct-donut__label{font-size:12px;color:var(--t2);margin-top:3px}.strct-donut__legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;min-width:0}.strct-donut__leg{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:var(--radius-sm);font-size:12px;color:var(--t2);transition:background .14s ease,opacity .14s ease}.strct-donut__leg.is-active{background:var(--bg-2);color:var(--t1)}.strct-donut__leg.is-dim{opacity:.45}.strct-donut__swatch{width:9px;height:9px;border-radius:2px;flex-shrink:0}.strct-donut__leg-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-donut__leg-val{font-variant-numeric:tabular-nums;font-weight:600;color:var(--t1)}.strct-donut__leg-pct{font-variant-numeric:tabular-nums;color:var(--t3);min-width:34px;text-align:end}@media(prefers-reduced-motion:no-preference){.strct-donut__svg{transform-origin:center;animation:strct-donut-in .6s cubic-bezier(.22,1,.36,1) both}}@keyframes strct-donut-in{0%{opacity:0;transform:rotate(-16deg) scale(.94)}to{opacity:1;transform:none}}\n"] }]
-        }], propDecorators: { segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], centerValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerValue", required: false }] }], centerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerLabel", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }] } });
+  `, host: {
+                        class: 'strct-donut',
+                        '[class.strct-donut--legend-below]': "legendPosition() === 'below'",
+                    }, styles: [".strct-donut{display:inline-block}.strct-donut__layout{display:inline-flex;align-items:center;gap:20px}.strct-donut--legend-below .strct-donut__layout{flex-direction:column;align-items:center;gap:12px}.strct-donut__leg.is-empty{opacity:.55}.strct-donut__wrap{position:relative;flex-shrink:0}.strct-donut__track{stroke:var(--bg-3)}.strct-donut__arc{cursor:pointer;transition:stroke-width .16s ease,opacity .16s ease}.strct-donut__arc.is-dim{opacity:.32}.strct-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.strct-donut__value{font-size:var(--text-2xl);font-weight:650;color:var(--t1);line-height:1;font-variant-numeric:tabular-nums;transition:color .16s ease}.strct-donut__label{font-size:12px;color:var(--t2);margin-top:3px}.strct-donut__legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;min-width:0}.strct-donut__leg{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:var(--radius-sm);font-size:12px;color:var(--t2);transition:background .14s ease,opacity .14s ease}.strct-donut__leg.is-active{background:var(--bg-2);color:var(--t1)}.strct-donut__leg.is-dim{opacity:.45}.strct-donut__swatch{width:9px;height:9px;border-radius:2px;flex-shrink:0}.strct-donut__leg-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-donut__leg-val{font-variant-numeric:tabular-nums;font-weight:600;color:var(--t1)}.strct-donut__leg-pct{font-variant-numeric:tabular-nums;color:var(--t3);min-width:34px;text-align:end}@media(prefers-reduced-motion:no-preference){.strct-donut__svg{transform-origin:center;animation:strct-donut-in .6s cubic-bezier(.22,1,.36,1) both}}@keyframes strct-donut-in{0%{opacity:0;transform:rotate(-16deg) scale(.94)}to{opacity:1;transform:none}}\n"] }]
+        }], propDecorators: { segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], centerValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerValue", required: false }] }], centerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerLabel", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], legendPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendPosition", required: false }] }], keepEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepEmpty", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }] } });
 
 const COLOR$1 = {
     accent: 'var(--acc)',
@@ -22064,6 +22083,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     }, styles: [".strct-live{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--t3)}.strct-live[data-state=reconnecting] .strct-live__text,.strct-live[data-state=stale] .strct-live__text{color:var(--warning)}.strct-live .strct-dot__sr{display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], updatedAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "updatedAt", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }] } });
 
+/**
+ * A chart's key is a component. The same swatch · label · value rows serve a
+ * line chart's series picker, a diagram's edge styles and a donut's categories
+ * — instead of 9px squares with inline backgrounds written per screen.
+ *
+ *   <strct-legend [items]="series" orientation="vertical" />
+ *   <strct-legend [items]="edges" interactive (itemToggle)="toggle($event)" />
+ *
+ * A category with zero items still belongs in the key: pass it `muted`, because
+ * "0 failed" is information.
+ */
+class StrctLegend {
+    /** The rows of the key. */
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** `vertical` stacks the rows and aligns their values. */
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Rows become toggle buttons carrying `aria-pressed`. */
+    interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The label of the row that was toggled. */
+    itemToggle = output();
+    /** The status vocabulary's own tokens — 'accent' is `--acc`, not `--accent`. */
+    static TONE = {
+        neutral: 'var(--t3)',
+        accent: 'var(--acc)',
+        success: 'var(--success)',
+        warning: 'var(--warning)',
+        critical: 'var(--critical)',
+    };
+    swatchColor(item) {
+        return item.color ?? StrctLegend.TONE[item.status ?? 'accent'];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctLegend, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctLegend, isStandalone: true, selector: "strct-legend", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemToggle: "itemToggle" }, host: { properties: { "class.strct-legend--vertical": "orientation() === 'vertical'" }, classAttribute: "strct-legend" }, ngImport: i0, template: `
+    <ul class="strct-legend__list" role="list">
+      @for (item of items(); track item.label) {
+        <li class="strct-legend__row" [class.strct-legend__row--muted]="item.muted">
+          @if (interactive()) {
+            <button
+              type="button"
+              class="strct-legend__hit"
+              [attr.aria-pressed]="!item.off"
+              (click)="itemToggle.emit(item.label)"
+            >
+              <span
+                class="strct-legend__swatch strct-legend__swatch--{{ item.shape ?? 'square' }}"
+                [style.--strct-legend-color]="swatchColor(item)"
+                aria-hidden="true"
+              ></span>
+              <span class="strct-legend__label">{{ item.label }}</span>
+              @if (item.value !== undefined) {
+                <span class="strct-legend__value">{{ item.value }}</span>
+              }
+            </button>
+          } @else {
+            <span
+              class="strct-legend__swatch strct-legend__swatch--{{ item.shape ?? 'square' }}"
+              [style.--strct-legend-color]="swatchColor(item)"
+              aria-hidden="true"
+            ></span>
+            <span class="strct-legend__label">{{ item.label }}</span>
+            @if (item.value !== undefined) {
+              <span class="strct-legend__value">{{ item.value }}</span>
+            }
+          }
+        </li>
+      }
+    </ul>
+  `, isInline: true, styles: [".strct-legend{display:block;font-size:var(--text-sm);color:var(--t2)}.strct-legend__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}.strct-legend--vertical .strct-legend__list{flex-direction:column;flex-wrap:nowrap;gap:2px}.strct-legend__row{display:flex;align-items:center;gap:7px;min-width:0}.strct-legend__row--muted{opacity:.55}.strct-legend__hit{display:flex;align-items:center;gap:7px;min-width:0;padding:2px 4px;margin:-2px -4px;border:0;border-radius:var(--radius-sm);background:none;font:inherit;color:inherit;cursor:pointer}.strct-legend__hit:hover{background:var(--bg-3)}.strct-legend__hit:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-legend__hit[aria-pressed=false]{opacity:.45}.strct-legend__hit[aria-pressed=false] .strct-legend__label{text-decoration:line-through}.strct-legend__swatch{flex:none;background:var(--strct-legend-color, var(--t3))}.strct-legend__swatch--square{width:9px;height:9px;border-radius:2px}.strct-legend__swatch--dot{width:9px;height:9px;border-radius:50%}.strct-legend__swatch--line{width:14px;height:2px;border-radius:1px}.strct-legend__swatch--dash{width:14px;height:2px;background:repeating-linear-gradient(to right,var(--strct-legend-color, var(--t3)) 0 4px,transparent 4px 7px)}.strct-legend__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-legend__value{margin-inline-start:auto;padding-inline-start:8px;color:var(--t3);font-variant-numeric:tabular-nums}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctLegend, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-legend', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    <ul class="strct-legend__list" role="list">
+      @for (item of items(); track item.label) {
+        <li class="strct-legend__row" [class.strct-legend__row--muted]="item.muted">
+          @if (interactive()) {
+            <button
+              type="button"
+              class="strct-legend__hit"
+              [attr.aria-pressed]="!item.off"
+              (click)="itemToggle.emit(item.label)"
+            >
+              <span
+                class="strct-legend__swatch strct-legend__swatch--{{ item.shape ?? 'square' }}"
+                [style.--strct-legend-color]="swatchColor(item)"
+                aria-hidden="true"
+              ></span>
+              <span class="strct-legend__label">{{ item.label }}</span>
+              @if (item.value !== undefined) {
+                <span class="strct-legend__value">{{ item.value }}</span>
+              }
+            </button>
+          } @else {
+            <span
+              class="strct-legend__swatch strct-legend__swatch--{{ item.shape ?? 'square' }}"
+              [style.--strct-legend-color]="swatchColor(item)"
+              aria-hidden="true"
+            ></span>
+            <span class="strct-legend__label">{{ item.label }}</span>
+            @if (item.value !== undefined) {
+              <span class="strct-legend__value">{{ item.value }}</span>
+            }
+          }
+        </li>
+      }
+    </ul>
+  `, host: {
+                        class: 'strct-legend',
+                        '[class.strct-legend--vertical]': "orientation() === 'vertical'",
+                    }, styles: [".strct-legend{display:block;font-size:var(--text-sm);color:var(--t2)}.strct-legend__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}.strct-legend--vertical .strct-legend__list{flex-direction:column;flex-wrap:nowrap;gap:2px}.strct-legend__row{display:flex;align-items:center;gap:7px;min-width:0}.strct-legend__row--muted{opacity:.55}.strct-legend__hit{display:flex;align-items:center;gap:7px;min-width:0;padding:2px 4px;margin:-2px -4px;border:0;border-radius:var(--radius-sm);background:none;font:inherit;color:inherit;cursor:pointer}.strct-legend__hit:hover{background:var(--bg-3)}.strct-legend__hit:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-legend__hit[aria-pressed=false]{opacity:.45}.strct-legend__hit[aria-pressed=false] .strct-legend__label{text-decoration:line-through}.strct-legend__swatch{flex:none;background:var(--strct-legend-color, var(--t3))}.strct-legend__swatch--square{width:9px;height:9px;border-radius:2px}.strct-legend__swatch--dot{width:9px;height:9px;border-radius:50%}.strct-legend__swatch--line{width:14px;height:2px;border-radius:1px}.strct-legend__swatch--dash{width:14px;height:2px;background:repeating-linear-gradient(to right,var(--strct-legend-color, var(--t3)) 0 4px,transparent 4px 7px)}.strct-legend__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-legend__value{margin-inline-start:auto;padding-inline-start:8px;color:var(--t3);font-variant-numeric:tabular-nums}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], itemToggle: [{ type: i0.Output, args: ["itemToggle"] }] } });
+
 /**
  * A generic anchored overlay panel for arbitrary projected content — the
  * public primitive behind menus, signposts and rich pickers:
@@ -23930,5 +24063,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderItem, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWizard, StrctWizardAside, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone, unlockBodyScroll };
+export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderItem, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWizard, StrctWizardAside, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone, unlockBodyScroll };
 //# sourceMappingURL=akcelik-strct.mjs.map