@akcelik/strct 0.29.0 → 0.30.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/akcelik-strct.mjs +211 -41
- package/fesm2022/akcelik-strct.mjs.map +1 -1
- package/package.json +3 -2
- package/types/akcelik-strct.d.ts +36 -1
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { inject, DOCUMENT, signal, computed, Injectable, input, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, afterNextRender, Directive, model, output, booleanAttribute, HostListener, contentChildren, effect, ApplicationRef, EnvironmentInjector, createComponent, forwardRef, DestroyRef, contentChild, viewChild, viewChildren, TemplateRef, untracked, Renderer2 } from '@angular/core';
|
|
3
3
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
4
|
-
import { DOCUMENT as DOCUMENT$1
|
|
4
|
+
import { NgTemplateOutlet, DOCUMENT as DOCUMENT$1 } from '@angular/common';
|
|
5
|
+
import { RouterLink, RouterLinkActive } from '@angular/router';
|
|
5
6
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
6
7
|
|
|
7
8
|
/** All palettes the token system ships with, in display order. */
|
|
@@ -1039,16 +1040,90 @@ class StrctRail {
|
|
|
1039
1040
|
ariaLabel = input('Primary', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1040
1041
|
/** Emitted when an item is chosen. */
|
|
1041
1042
|
select = output();
|
|
1042
|
-
|
|
1043
|
+
topItems = computed(() => this.items().filter((i) => i.placement !== 'bottom'), ...(ngDevMode ? [{ debugName: "topItems" }] : /* istanbul ignore next */ []));
|
|
1044
|
+
bottomItems = computed(() => this.items().filter((i) => i.placement === 'bottom'), ...(ngDevMode ? [{ debugName: "bottomItems" }] : /* istanbul ignore next */ []));
|
|
1045
|
+
/** Enabled item with a router destination → renders as `<a routerLink>`. */
|
|
1046
|
+
isRouted(item) {
|
|
1047
|
+
return item.routerLink != null && !item.disabled;
|
|
1048
|
+
}
|
|
1049
|
+
/**
|
|
1050
|
+
* Active state of a router-link item: an explicit `activeId` is authoritative;
|
|
1051
|
+
* without one, the router's own active state drives it.
|
|
1052
|
+
*/
|
|
1053
|
+
isActive(item, routerActive) {
|
|
1054
|
+
const id = this.activeId();
|
|
1055
|
+
return id !== null ? item.id === id : routerActive;
|
|
1056
|
+
}
|
|
1057
|
+
pick(item, event) {
|
|
1043
1058
|
if (item.disabled)
|
|
1044
1059
|
return;
|
|
1060
|
+
// A modified / non-primary click on a link is the browser's (new tab etc.) —
|
|
1061
|
+
// never ours: no activeId change, no (select).
|
|
1062
|
+
if (event &&
|
|
1063
|
+
(item.routerLink != null || item.href) &&
|
|
1064
|
+
(event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)) {
|
|
1065
|
+
return;
|
|
1066
|
+
}
|
|
1045
1067
|
this.activeId.set(item.id);
|
|
1046
1068
|
this.select.emit(item);
|
|
1047
1069
|
}
|
|
1048
1070
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctRail, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1049
1071
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctRail, isStandalone: true, selector: "strct-rail", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeId: "activeIdChange", collapsed: "collapsedChange", select: "select" }, host: { properties: { "class.strct-rail--collapsed": "collapsed()" }, classAttribute: "strct-rail" }, ngImport: i0, template: `
|
|
1050
|
-
|
|
1051
|
-
|
|
1072
|
+
<!-- Shared row content: icon, label, trailing indicator, badge / dot. -->
|
|
1073
|
+
<ng-template #rowContent let-item>
|
|
1074
|
+
<strct-icon class="strct-rail__icon" [name]="item.icon" [size]="18" [strokeWidth]="1.6" />
|
|
1075
|
+
@if (!collapsed()) {
|
|
1076
|
+
<span class="strct-rail__label">{{ item.label }}</span>
|
|
1077
|
+
@if (item.trailingIcon) {
|
|
1078
|
+
<strct-icon
|
|
1079
|
+
class="strct-rail__trailing"
|
|
1080
|
+
[name]="item.trailingIcon"
|
|
1081
|
+
[size]="14"
|
|
1082
|
+
[strokeWidth]="1.5"
|
|
1083
|
+
/>
|
|
1084
|
+
}
|
|
1085
|
+
}
|
|
1086
|
+
@if (item.badge !== undefined && item.badge !== null && item.badge !== '') {
|
|
1087
|
+
<span
|
|
1088
|
+
class="strct-rail__badge strct-rail__badge--{{ item.badgeStatus ?? 'accent' }}"
|
|
1089
|
+
[class.strct-rail__badge--dot]="collapsed()"
|
|
1090
|
+
>
|
|
1091
|
+
@if (!collapsed()) {
|
|
1092
|
+
{{ item.badge }}
|
|
1093
|
+
}
|
|
1094
|
+
</span>
|
|
1095
|
+
} @else if (item.dot) {
|
|
1096
|
+
<span class="strct-rail__dot strct-rail__dot--{{ item.dotStatus ?? 'accent' }}"></span>
|
|
1097
|
+
}
|
|
1098
|
+
</ng-template>
|
|
1099
|
+
|
|
1100
|
+
<!-- One rail row: a router link, a plain link, or a button (today's default). -->
|
|
1101
|
+
<ng-template #row let-item>
|
|
1102
|
+
@if (isRouted(item)) {
|
|
1103
|
+
<a
|
|
1104
|
+
class="strct-rail__item"
|
|
1105
|
+
[routerLink]="item.routerLink"
|
|
1106
|
+
routerLinkActive
|
|
1107
|
+
#rla="routerLinkActive"
|
|
1108
|
+
[class.strct-rail__item--active]="isActive(item, rla.isActive)"
|
|
1109
|
+
[attr.aria-current]="isActive(item, rla.isActive) ? 'page' : null"
|
|
1110
|
+
[attr.title]="collapsed() ? item.label : null"
|
|
1111
|
+
(click)="pick(item, $event)"
|
|
1112
|
+
>
|
|
1113
|
+
<ng-container *ngTemplateOutlet="rowContent; context: { $implicit: item }" />
|
|
1114
|
+
</a>
|
|
1115
|
+
} @else if (item.href && !item.disabled) {
|
|
1116
|
+
<a
|
|
1117
|
+
class="strct-rail__item"
|
|
1118
|
+
[href]="item.href"
|
|
1119
|
+
[class.strct-rail__item--active]="item.id === activeId()"
|
|
1120
|
+
[attr.aria-current]="item.id === activeId() ? 'page' : null"
|
|
1121
|
+
[attr.title]="collapsed() ? item.label : null"
|
|
1122
|
+
(click)="pick(item, $event)"
|
|
1123
|
+
>
|
|
1124
|
+
<ng-container *ngTemplateOutlet="rowContent; context: { $implicit: item }" />
|
|
1125
|
+
</a>
|
|
1126
|
+
} @else {
|
|
1052
1127
|
<button
|
|
1053
1128
|
type="button"
|
|
1054
1129
|
class="strct-rail__item"
|
|
@@ -1056,24 +1131,26 @@ class StrctRail {
|
|
|
1056
1131
|
[disabled]="item.disabled"
|
|
1057
1132
|
[attr.aria-current]="item.id === activeId() ? 'page' : null"
|
|
1058
1133
|
[attr.title]="collapsed() ? item.label : null"
|
|
1059
|
-
(click)="pick(item)"
|
|
1134
|
+
(click)="pick(item, $event)"
|
|
1060
1135
|
>
|
|
1061
|
-
<
|
|
1062
|
-
@if (!collapsed()) {
|
|
1063
|
-
<span class="strct-rail__label">{{ item.label }}</span>
|
|
1064
|
-
}
|
|
1065
|
-
@if (item.badge !== undefined && item.badge !== null && item.badge !== '') {
|
|
1066
|
-
<span
|
|
1067
|
-
class="strct-rail__badge strct-rail__badge--{{ item.badgeStatus ?? 'accent' }}"
|
|
1068
|
-
[class.strct-rail__badge--dot]="collapsed()"
|
|
1069
|
-
>
|
|
1070
|
-
@if (!collapsed()) {
|
|
1071
|
-
{{ item.badge }}
|
|
1072
|
-
}
|
|
1073
|
-
</span>
|
|
1074
|
-
}
|
|
1136
|
+
<ng-container *ngTemplateOutlet="rowContent; context: { $implicit: item }" />
|
|
1075
1137
|
</button>
|
|
1076
1138
|
}
|
|
1139
|
+
</ng-template>
|
|
1140
|
+
|
|
1141
|
+
<nav class="strct-rail__nav" [attr.aria-label]="ariaLabel()">
|
|
1142
|
+
<div class="strct-rail__group strct-rail__group--top">
|
|
1143
|
+
@for (item of topItems(); track item.id) {
|
|
1144
|
+
<ng-container *ngTemplateOutlet="row; context: { $implicit: item }" />
|
|
1145
|
+
}
|
|
1146
|
+
</div>
|
|
1147
|
+
@if (bottomItems().length) {
|
|
1148
|
+
<div class="strct-rail__group strct-rail__group--bottom">
|
|
1149
|
+
@for (item of bottomItems(); track item.id) {
|
|
1150
|
+
<ng-container *ngTemplateOutlet="row; context: { $implicit: item }" />
|
|
1151
|
+
}
|
|
1152
|
+
</div>
|
|
1153
|
+
}
|
|
1077
1154
|
</nav>
|
|
1078
1155
|
|
|
1079
1156
|
@if (collapsible()) {
|
|
@@ -1090,13 +1167,66 @@ class StrctRail {
|
|
|
1090
1167
|
}
|
|
1091
1168
|
</button>
|
|
1092
1169
|
}
|
|
1093
|
-
`, isInline: true, styles: [".strct-rail{display:flex;flex-direction:column;width:232px;flex-shrink:0;background:var(--bg-1);border-inline-end:1px solid var(--b2);overflow:hidden;transition:width .16s ease}.strct-rail--collapsed{width:60px}.strct-rail__nav{flex:1;display:flex;flex-direction:column;gap:2px;
|
|
1170
|
+
`, isInline: true, styles: [".strct-rail{display:flex;flex-direction:column;width:232px;flex-shrink:0;background:var(--bg-1);border-inline-end:1px solid var(--b2);overflow:hidden;transition:width .16s ease}.strct-rail--collapsed{width:60px}.strct-rail__nav{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px}.strct-rail__group{display:flex;flex-direction:column;gap:2px}.strct-rail__group--top{flex:1;min-height:0;overflow-y:auto}.strct-rail__group--bottom{margin-top:8px;padding-top:8px;border-top:1px solid var(--b1)}.strct-rail__item{position:relative;display:flex;align-items:center;gap:11px;width:100%;box-sizing:border-box;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--t2);cursor:pointer;font-size:13.5px;font-family:var(--font);text-align:start;text-decoration:none;white-space:nowrap;transition:background .14s ease,color .14s ease}.strct-rail--collapsed .strct-rail__item{justify-content:center;padding:8px}.strct-rail__item:hover:not(:disabled){background:var(--bg-3);color:var(--t1)}.strct-rail__item--active{background:var(--acc-m);color:var(--acc)}.strct-rail__item--active .strct-rail__icon{color:var(--acc)}.strct-rail__item:disabled{opacity:.5;cursor:not-allowed}.strct-rail__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-rail__icon{flex-shrink:0}.strct-rail__label{flex:1;overflow:hidden;text-overflow:ellipsis}.strct-rail__badge{flex-shrink:0;min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;line-height:1;border-radius:9px;font-variant-numeric:tabular-nums}.strct-rail__badge--dot{position:absolute;top:5px;right:7px;min-width:8px;width:8px;height:8px;padding:0;border-radius:50%}.strct-rail__badge--accent{background:var(--acc-m);color:var(--acc)}.strct-rail__badge--success{background:var(--success-bg);color:var(--success)}.strct-rail__badge--warning{background:var(--warning-bg);color:var(--warning)}.strct-rail__badge--critical{background:var(--critical-bg);color:var(--critical)}.strct-rail__badge--dot.strct-rail__badge--accent{background:var(--acc)}.strct-rail__badge--dot.strct-rail__badge--success{background:var(--success)}.strct-rail__badge--dot.strct-rail__badge--warning{background:var(--warning)}.strct-rail__badge--dot.strct-rail__badge--critical{background:var(--critical)}.strct-rail__trailing{flex-shrink:0;color:var(--t3)}.strct-rail__dot{flex-shrink:0;width:7px;height:7px;border-radius:50%}.strct-rail--collapsed .strct-rail__dot{position:absolute;top:5px;right:7px}.strct-rail__dot--accent{background:var(--acc)}.strct-rail__dot--success{background:var(--success)}.strct-rail__dot--warning{background:var(--warning)}.strct-rail__dot--critical{background:var(--critical)}.strct-rail__toggle{display:flex;align-items:center;gap:10px;padding:9px 14px;border:0;border-top:1px solid var(--b1);background:transparent;color:var(--t3);cursor:pointer;font-size:12.5px;font-family:var(--font)}.strct-rail--collapsed .strct-rail__toggle{justify-content:center;padding:9px}.strct-rail__toggle:hover{color:var(--t1);background:var(--bg-3)}.strct-rail__toggle-icon{transition:transform .16s ease}.strct-rail:not(.strct-rail--collapsed) .strct-rail__toggle-icon{transform:rotate(180deg)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1094
1171
|
}
|
|
1095
1172
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctRail, decorators: [{
|
|
1096
1173
|
type: Component,
|
|
1097
|
-
args: [{ selector: 'strct-rail', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
|
|
1098
|
-
|
|
1099
|
-
|
|
1174
|
+
args: [{ selector: 'strct-rail', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, RouterLink, RouterLinkActive, StrctIcon], template: `
|
|
1175
|
+
<!-- Shared row content: icon, label, trailing indicator, badge / dot. -->
|
|
1176
|
+
<ng-template #rowContent let-item>
|
|
1177
|
+
<strct-icon class="strct-rail__icon" [name]="item.icon" [size]="18" [strokeWidth]="1.6" />
|
|
1178
|
+
@if (!collapsed()) {
|
|
1179
|
+
<span class="strct-rail__label">{{ item.label }}</span>
|
|
1180
|
+
@if (item.trailingIcon) {
|
|
1181
|
+
<strct-icon
|
|
1182
|
+
class="strct-rail__trailing"
|
|
1183
|
+
[name]="item.trailingIcon"
|
|
1184
|
+
[size]="14"
|
|
1185
|
+
[strokeWidth]="1.5"
|
|
1186
|
+
/>
|
|
1187
|
+
}
|
|
1188
|
+
}
|
|
1189
|
+
@if (item.badge !== undefined && item.badge !== null && item.badge !== '') {
|
|
1190
|
+
<span
|
|
1191
|
+
class="strct-rail__badge strct-rail__badge--{{ item.badgeStatus ?? 'accent' }}"
|
|
1192
|
+
[class.strct-rail__badge--dot]="collapsed()"
|
|
1193
|
+
>
|
|
1194
|
+
@if (!collapsed()) {
|
|
1195
|
+
{{ item.badge }}
|
|
1196
|
+
}
|
|
1197
|
+
</span>
|
|
1198
|
+
} @else if (item.dot) {
|
|
1199
|
+
<span class="strct-rail__dot strct-rail__dot--{{ item.dotStatus ?? 'accent' }}"></span>
|
|
1200
|
+
}
|
|
1201
|
+
</ng-template>
|
|
1202
|
+
|
|
1203
|
+
<!-- One rail row: a router link, a plain link, or a button (today's default). -->
|
|
1204
|
+
<ng-template #row let-item>
|
|
1205
|
+
@if (isRouted(item)) {
|
|
1206
|
+
<a
|
|
1207
|
+
class="strct-rail__item"
|
|
1208
|
+
[routerLink]="item.routerLink"
|
|
1209
|
+
routerLinkActive
|
|
1210
|
+
#rla="routerLinkActive"
|
|
1211
|
+
[class.strct-rail__item--active]="isActive(item, rla.isActive)"
|
|
1212
|
+
[attr.aria-current]="isActive(item, rla.isActive) ? 'page' : null"
|
|
1213
|
+
[attr.title]="collapsed() ? item.label : null"
|
|
1214
|
+
(click)="pick(item, $event)"
|
|
1215
|
+
>
|
|
1216
|
+
<ng-container *ngTemplateOutlet="rowContent; context: { $implicit: item }" />
|
|
1217
|
+
</a>
|
|
1218
|
+
} @else if (item.href && !item.disabled) {
|
|
1219
|
+
<a
|
|
1220
|
+
class="strct-rail__item"
|
|
1221
|
+
[href]="item.href"
|
|
1222
|
+
[class.strct-rail__item--active]="item.id === activeId()"
|
|
1223
|
+
[attr.aria-current]="item.id === activeId() ? 'page' : null"
|
|
1224
|
+
[attr.title]="collapsed() ? item.label : null"
|
|
1225
|
+
(click)="pick(item, $event)"
|
|
1226
|
+
>
|
|
1227
|
+
<ng-container *ngTemplateOutlet="rowContent; context: { $implicit: item }" />
|
|
1228
|
+
</a>
|
|
1229
|
+
} @else {
|
|
1100
1230
|
<button
|
|
1101
1231
|
type="button"
|
|
1102
1232
|
class="strct-rail__item"
|
|
@@ -1104,24 +1234,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
1104
1234
|
[disabled]="item.disabled"
|
|
1105
1235
|
[attr.aria-current]="item.id === activeId() ? 'page' : null"
|
|
1106
1236
|
[attr.title]="collapsed() ? item.label : null"
|
|
1107
|
-
(click)="pick(item)"
|
|
1237
|
+
(click)="pick(item, $event)"
|
|
1108
1238
|
>
|
|
1109
|
-
<
|
|
1110
|
-
@if (!collapsed()) {
|
|
1111
|
-
<span class="strct-rail__label">{{ item.label }}</span>
|
|
1112
|
-
}
|
|
1113
|
-
@if (item.badge !== undefined && item.badge !== null && item.badge !== '') {
|
|
1114
|
-
<span
|
|
1115
|
-
class="strct-rail__badge strct-rail__badge--{{ item.badgeStatus ?? 'accent' }}"
|
|
1116
|
-
[class.strct-rail__badge--dot]="collapsed()"
|
|
1117
|
-
>
|
|
1118
|
-
@if (!collapsed()) {
|
|
1119
|
-
{{ item.badge }}
|
|
1120
|
-
}
|
|
1121
|
-
</span>
|
|
1122
|
-
}
|
|
1239
|
+
<ng-container *ngTemplateOutlet="rowContent; context: { $implicit: item }" />
|
|
1123
1240
|
</button>
|
|
1124
1241
|
}
|
|
1242
|
+
</ng-template>
|
|
1243
|
+
|
|
1244
|
+
<nav class="strct-rail__nav" [attr.aria-label]="ariaLabel()">
|
|
1245
|
+
<div class="strct-rail__group strct-rail__group--top">
|
|
1246
|
+
@for (item of topItems(); track item.id) {
|
|
1247
|
+
<ng-container *ngTemplateOutlet="row; context: { $implicit: item }" />
|
|
1248
|
+
}
|
|
1249
|
+
</div>
|
|
1250
|
+
@if (bottomItems().length) {
|
|
1251
|
+
<div class="strct-rail__group strct-rail__group--bottom">
|
|
1252
|
+
@for (item of bottomItems(); track item.id) {
|
|
1253
|
+
<ng-container *ngTemplateOutlet="row; context: { $implicit: item }" />
|
|
1254
|
+
}
|
|
1255
|
+
</div>
|
|
1256
|
+
}
|
|
1125
1257
|
</nav>
|
|
1126
1258
|
|
|
1127
1259
|
@if (collapsible()) {
|
|
@@ -1141,7 +1273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
1141
1273
|
`, host: {
|
|
1142
1274
|
class: 'strct-rail',
|
|
1143
1275
|
'[class.strct-rail--collapsed]': 'collapsed()',
|
|
1144
|
-
}, styles: [".strct-rail{display:flex;flex-direction:column;width:232px;flex-shrink:0;background:var(--bg-1);border-inline-end:1px solid var(--b2);overflow:hidden;transition:width .16s ease}.strct-rail--collapsed{width:60px}.strct-rail__nav{flex:1;display:flex;flex-direction:column;gap:2px;
|
|
1276
|
+
}, styles: [".strct-rail{display:flex;flex-direction:column;width:232px;flex-shrink:0;background:var(--bg-1);border-inline-end:1px solid var(--b2);overflow:hidden;transition:width .16s ease}.strct-rail--collapsed{width:60px}.strct-rail__nav{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px}.strct-rail__group{display:flex;flex-direction:column;gap:2px}.strct-rail__group--top{flex:1;min-height:0;overflow-y:auto}.strct-rail__group--bottom{margin-top:8px;padding-top:8px;border-top:1px solid var(--b1)}.strct-rail__item{position:relative;display:flex;align-items:center;gap:11px;width:100%;box-sizing:border-box;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--t2);cursor:pointer;font-size:13.5px;font-family:var(--font);text-align:start;text-decoration:none;white-space:nowrap;transition:background .14s ease,color .14s ease}.strct-rail--collapsed .strct-rail__item{justify-content:center;padding:8px}.strct-rail__item:hover:not(:disabled){background:var(--bg-3);color:var(--t1)}.strct-rail__item--active{background:var(--acc-m);color:var(--acc)}.strct-rail__item--active .strct-rail__icon{color:var(--acc)}.strct-rail__item:disabled{opacity:.5;cursor:not-allowed}.strct-rail__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-rail__icon{flex-shrink:0}.strct-rail__label{flex:1;overflow:hidden;text-overflow:ellipsis}.strct-rail__badge{flex-shrink:0;min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;line-height:1;border-radius:9px;font-variant-numeric:tabular-nums}.strct-rail__badge--dot{position:absolute;top:5px;right:7px;min-width:8px;width:8px;height:8px;padding:0;border-radius:50%}.strct-rail__badge--accent{background:var(--acc-m);color:var(--acc)}.strct-rail__badge--success{background:var(--success-bg);color:var(--success)}.strct-rail__badge--warning{background:var(--warning-bg);color:var(--warning)}.strct-rail__badge--critical{background:var(--critical-bg);color:var(--critical)}.strct-rail__badge--dot.strct-rail__badge--accent{background:var(--acc)}.strct-rail__badge--dot.strct-rail__badge--success{background:var(--success)}.strct-rail__badge--dot.strct-rail__badge--warning{background:var(--warning)}.strct-rail__badge--dot.strct-rail__badge--critical{background:var(--critical)}.strct-rail__trailing{flex-shrink:0;color:var(--t3)}.strct-rail__dot{flex-shrink:0;width:7px;height:7px;border-radius:50%}.strct-rail--collapsed .strct-rail__dot{position:absolute;top:5px;right:7px}.strct-rail__dot--accent{background:var(--acc)}.strct-rail__dot--success{background:var(--success)}.strct-rail__dot--warning{background:var(--warning)}.strct-rail__dot--critical{background:var(--critical)}.strct-rail__toggle{display:flex;align-items:center;gap:10px;padding:9px 14px;border:0;border-top:1px solid var(--b1);background:transparent;color:var(--t3);cursor:pointer;font-size:12.5px;font-family:var(--font)}.strct-rail--collapsed .strct-rail__toggle{justify-content:center;padding:9px}.strct-rail__toggle:hover{color:var(--t1);background:var(--bg-3)}.strct-rail__toggle-icon{transition:transform .16s ease}.strct-rail:not(.strct-rail--collapsed) .strct-rail__toggle-icon{transform:rotate(180deg)}\n"] }]
|
|
1145
1277
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }, { type: i0.Output, args: ["activeIdChange"] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] } });
|
|
1146
1278
|
|
|
1147
1279
|
/**
|
|
@@ -3859,6 +3991,25 @@ class StrctSectionMenu {
|
|
|
3859
3991
|
/>
|
|
3860
3992
|
}
|
|
3861
3993
|
<span class="strct-sm__item-label">{{ item.label }}</span>
|
|
3994
|
+
@if (item.trailingIcon) {
|
|
3995
|
+
<strct-icon
|
|
3996
|
+
class="strct-sm__trailing"
|
|
3997
|
+
[name]="item.trailingIcon"
|
|
3998
|
+
[size]="14"
|
|
3999
|
+
[strokeWidth]="1.5"
|
|
4000
|
+
/>
|
|
4001
|
+
}
|
|
4002
|
+
@if (item.badge !== undefined && item.badge !== null && item.badge !== '') {
|
|
4003
|
+
<span
|
|
4004
|
+
class="strct-sm__badge strct-sm__badge--{{ item.badgeStatus ?? 'accent' }}"
|
|
4005
|
+
>
|
|
4006
|
+
{{ item.badge }}
|
|
4007
|
+
</span>
|
|
4008
|
+
} @else if (item.dot) {
|
|
4009
|
+
<span
|
|
4010
|
+
class="strct-sm__dot strct-sm__dot--{{ item.dotStatus ?? 'accent' }}"
|
|
4011
|
+
></span>
|
|
4012
|
+
}
|
|
3862
4013
|
</button>
|
|
3863
4014
|
}
|
|
3864
4015
|
</div>
|
|
@@ -3866,7 +4017,7 @@ class StrctSectionMenu {
|
|
|
3866
4017
|
</div>
|
|
3867
4018
|
}
|
|
3868
4019
|
</nav>
|
|
3869
|
-
`, isInline: true, styles: [".strct-sm{display:flex;flex-direction:column;gap:1px}.strct-sm__section--collapsible+.strct-sm__section--collapsible{margin-top:1px}.strct-sm__cat{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border:0;border-radius:6px;background:transparent;color:var(--t2);font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;text-align:start;transition:background .13s ease,color .13s ease}.strct-sm__cat:hover{background:var(--bg-3);color:var(--t1)}.strct-sm__cat:focus-visible,.strct-sm__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-sm__chevron{display:inline-flex;color:var(--t3);flex-shrink:0;transition:transform .15s ease}.strct-sm__chevron--open{transform:rotate(90deg)}.strct-sm__cat-icon{color:var(--t3);flex-shrink:0}.strct-sm__cat-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-sm__cat-static{padding:11px 10px 5px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--t3)}.strct-sm__items{display:flex;flex-direction:column}.strct-sm__item{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border:0;border-radius:6px;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);cursor:pointer;text-align:start;transition:background .13s ease}.strct-sm__section--collapsible .strct-sm__item{padding-inline-start:31px}.strct-sm__item:hover:not(:disabled){background:var(--bg-3)}.strct-sm__item--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-sm__item--active .strct-sm__item-icon{color:var(--acc)}.strct-sm__item:disabled{opacity:.5;cursor:not-allowed}.strct-sm__item-icon{color:var(--t2);flex-shrink:0}.strct-sm__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4020
|
+
`, isInline: true, styles: [".strct-sm{display:flex;flex-direction:column;gap:1px}.strct-sm__section--collapsible+.strct-sm__section--collapsible{margin-top:1px}.strct-sm__cat{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border:0;border-radius:6px;background:transparent;color:var(--t2);font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;text-align:start;transition:background .13s ease,color .13s ease}.strct-sm__cat:hover{background:var(--bg-3);color:var(--t1)}.strct-sm__cat:focus-visible,.strct-sm__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-sm__chevron{display:inline-flex;color:var(--t3);flex-shrink:0;transition:transform .15s ease}.strct-sm__chevron--open{transform:rotate(90deg)}.strct-sm__cat-icon{color:var(--t3);flex-shrink:0}.strct-sm__cat-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-sm__cat-static{padding:11px 10px 5px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--t3)}.strct-sm__items{display:flex;flex-direction:column}.strct-sm__item{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border:0;border-radius:6px;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);cursor:pointer;text-align:start;transition:background .13s ease}.strct-sm__section--collapsible .strct-sm__item{padding-inline-start:31px}.strct-sm__item:hover:not(:disabled){background:var(--bg-3)}.strct-sm__item--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-sm__item--active .strct-sm__item-icon{color:var(--acc)}.strct-sm__item:disabled{opacity:.5;cursor:not-allowed}.strct-sm__item-icon{color:var(--t2);flex-shrink:0}.strct-sm__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-sm__trailing{flex-shrink:0;color:var(--t3)}.strct-sm__badge{flex-shrink:0;min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;line-height:1;border-radius:9px;font-variant-numeric:tabular-nums}.strct-sm__badge--accent{background:var(--acc-m);color:var(--acc)}.strct-sm__badge--success{background:var(--success-bg);color:var(--success)}.strct-sm__badge--warning{background:var(--warning-bg);color:var(--warning)}.strct-sm__badge--critical{background:var(--critical-bg);color:var(--critical)}.strct-sm__dot{flex-shrink:0;width:7px;height:7px;border-radius:50%}.strct-sm__dot--accent{background:var(--acc)}.strct-sm__dot--success{background:var(--success)}.strct-sm__dot--warning{background:var(--warning)}.strct-sm__dot--critical{background:var(--critical)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3870
4021
|
}
|
|
3871
4022
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSectionMenu, decorators: [{
|
|
3872
4023
|
type: Component,
|
|
@@ -3918,6 +4069,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
3918
4069
|
/>
|
|
3919
4070
|
}
|
|
3920
4071
|
<span class="strct-sm__item-label">{{ item.label }}</span>
|
|
4072
|
+
@if (item.trailingIcon) {
|
|
4073
|
+
<strct-icon
|
|
4074
|
+
class="strct-sm__trailing"
|
|
4075
|
+
[name]="item.trailingIcon"
|
|
4076
|
+
[size]="14"
|
|
4077
|
+
[strokeWidth]="1.5"
|
|
4078
|
+
/>
|
|
4079
|
+
}
|
|
4080
|
+
@if (item.badge !== undefined && item.badge !== null && item.badge !== '') {
|
|
4081
|
+
<span
|
|
4082
|
+
class="strct-sm__badge strct-sm__badge--{{ item.badgeStatus ?? 'accent' }}"
|
|
4083
|
+
>
|
|
4084
|
+
{{ item.badge }}
|
|
4085
|
+
</span>
|
|
4086
|
+
} @else if (item.dot) {
|
|
4087
|
+
<span
|
|
4088
|
+
class="strct-sm__dot strct-sm__dot--{{ item.dotStatus ?? 'accent' }}"
|
|
4089
|
+
></span>
|
|
4090
|
+
}
|
|
3921
4091
|
</button>
|
|
3922
4092
|
}
|
|
3923
4093
|
</div>
|
|
@@ -3925,7 +4095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
3925
4095
|
</div>
|
|
3926
4096
|
}
|
|
3927
4097
|
</nav>
|
|
3928
|
-
`, host: { class: 'strct-sm-host' }, styles: [".strct-sm{display:flex;flex-direction:column;gap:1px}.strct-sm__section--collapsible+.strct-sm__section--collapsible{margin-top:1px}.strct-sm__cat{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border:0;border-radius:6px;background:transparent;color:var(--t2);font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;text-align:start;transition:background .13s ease,color .13s ease}.strct-sm__cat:hover{background:var(--bg-3);color:var(--t1)}.strct-sm__cat:focus-visible,.strct-sm__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-sm__chevron{display:inline-flex;color:var(--t3);flex-shrink:0;transition:transform .15s ease}.strct-sm__chevron--open{transform:rotate(90deg)}.strct-sm__cat-icon{color:var(--t3);flex-shrink:0}.strct-sm__cat-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-sm__cat-static{padding:11px 10px 5px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--t3)}.strct-sm__items{display:flex;flex-direction:column}.strct-sm__item{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border:0;border-radius:6px;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);cursor:pointer;text-align:start;transition:background .13s ease}.strct-sm__section--collapsible .strct-sm__item{padding-inline-start:31px}.strct-sm__item:hover:not(:disabled){background:var(--bg-3)}.strct-sm__item--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-sm__item--active .strct-sm__item-icon{color:var(--acc)}.strct-sm__item:disabled{opacity:.5;cursor:not-allowed}.strct-sm__item-icon{color:var(--t2);flex-shrink:0}.strct-sm__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
4098
|
+
`, host: { class: 'strct-sm-host' }, styles: [".strct-sm{display:flex;flex-direction:column;gap:1px}.strct-sm__section--collapsible+.strct-sm__section--collapsible{margin-top:1px}.strct-sm__cat{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border:0;border-radius:6px;background:transparent;color:var(--t2);font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;text-align:start;transition:background .13s ease,color .13s ease}.strct-sm__cat:hover{background:var(--bg-3);color:var(--t1)}.strct-sm__cat:focus-visible,.strct-sm__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-sm__chevron{display:inline-flex;color:var(--t3);flex-shrink:0;transition:transform .15s ease}.strct-sm__chevron--open{transform:rotate(90deg)}.strct-sm__cat-icon{color:var(--t3);flex-shrink:0}.strct-sm__cat-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-sm__cat-static{padding:11px 10px 5px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--t3)}.strct-sm__items{display:flex;flex-direction:column}.strct-sm__item{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border:0;border-radius:6px;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);cursor:pointer;text-align:start;transition:background .13s ease}.strct-sm__section--collapsible .strct-sm__item{padding-inline-start:31px}.strct-sm__item:hover:not(:disabled){background:var(--bg-3)}.strct-sm__item--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-sm__item--active .strct-sm__item-icon{color:var(--acc)}.strct-sm__item:disabled{opacity:.5;cursor:not-allowed}.strct-sm__item-icon{color:var(--t2);flex-shrink:0}.strct-sm__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-sm__trailing{flex-shrink:0;color:var(--t3)}.strct-sm__badge{flex-shrink:0;min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;line-height:1;border-radius:9px;font-variant-numeric:tabular-nums}.strct-sm__badge--accent{background:var(--acc-m);color:var(--acc)}.strct-sm__badge--success{background:var(--success-bg);color:var(--success)}.strct-sm__badge--warning{background:var(--warning-bg);color:var(--warning)}.strct-sm__badge--critical{background:var(--critical-bg);color:var(--critical)}.strct-sm__dot{flex-shrink:0;width:7px;height:7px;border-radius:50%}.strct-sm__dot--accent{background:var(--acc)}.strct-sm__dot--success{background:var(--success)}.strct-sm__dot--warning{background:var(--warning)}.strct-sm__dot--critical{background:var(--critical)}\n"] }]
|
|
3929
4099
|
}], propDecorators: { sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: true }] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }, { type: i0.Output, args: ["activeIdChange"] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] } });
|
|
3930
4100
|
|
|
3931
4101
|
/**
|