@mesgflow/ui-kit 0.10.0 → 0.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/mesgflow-ui-kit-brand.mjs +6 -0
- package/fesm2022/mesgflow-ui-kit-brand.mjs.map +1 -1
- package/fesm2022/mesgflow-ui-kit-core.mjs +59 -9
- package/fesm2022/mesgflow-ui-kit-core.mjs.map +1 -1
- package/fesm2022/mesgflow-ui-kit-dialog.mjs +26 -5
- package/fesm2022/mesgflow-ui-kit-dialog.mjs.map +1 -1
- package/fesm2022/mesgflow-ui-kit-drawer.mjs +20 -5
- package/fesm2022/mesgflow-ui-kit-drawer.mjs.map +1 -1
- package/fesm2022/mesgflow-ui-kit-i18n-tr.mjs +1 -1
- package/fesm2022/mesgflow-ui-kit-i18n-tr.mjs.map +1 -1
- package/fesm2022/mesgflow-ui-kit-menu.mjs +21 -5
- package/fesm2022/mesgflow-ui-kit-menu.mjs.map +1 -1
- package/fesm2022/mesgflow-ui-kit-sidebar.mjs +66 -12
- package/fesm2022/mesgflow-ui-kit-sidebar.mjs.map +1 -1
- package/fesm2022/mesgflow-ui-kit-split-button.mjs +1 -1
- package/fesm2022/mesgflow-ui-kit-split-button.mjs.map +1 -1
- package/fesm2022/mesgflow-ui-kit-table.mjs +48 -42
- package/fesm2022/mesgflow-ui-kit-table.mjs.map +1 -1
- package/package.json +1 -1
- package/tokens.json +1 -1
- package/types/mesgflow-ui-kit-dialog.d.ts +17 -1
- package/types/mesgflow-ui-kit-drawer.d.ts +3 -1
- package/types/mesgflow-ui-kit-menu.d.ts +17 -10
- package/types/mesgflow-ui-kit-sidebar.d.ts +43 -2
- package/types/mesgflow-ui-kit-table.d.ts +6 -6
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, output, computed, signal, Component, inject, model, effect, untracked } from '@angular/core';
|
|
3
|
-
import { focusRecipe, cn, MF_SIDEBAR_LABELS } from '@mesgflow/ui-kit/core';
|
|
2
|
+
import { input, output, computed, signal, Component, inject, model, booleanAttribute, effect, untracked } from '@angular/core';
|
|
3
|
+
import { focusRecipe, cn, MF_SIDEBAR_LABELS, nextId } from '@mesgflow/ui-kit/core';
|
|
4
4
|
import { Icon } from '@mesgflow/ui-kit/icon';
|
|
5
5
|
import { Tooltip } from '@mesgflow/ui-kit/tooltip';
|
|
6
6
|
import { cva } from 'class-variance-authority';
|
|
@@ -8,6 +8,7 @@ import * as i1 from '@angular/cdk/overlay';
|
|
|
8
8
|
import { OverlayModule } from '@angular/cdk/overlay';
|
|
9
9
|
import { Popover } from '@mesgflow/ui-kit/popover';
|
|
10
10
|
import { Avatar } from '@mesgflow/ui-kit/avatar';
|
|
11
|
+
import { Badge } from '@mesgflow/ui-kit/badge';
|
|
11
12
|
|
|
12
13
|
/**
|
|
13
14
|
* Kök panel: kart değil, yapısal/kenar-kenara chrome — `shadow-*`/`rounded-*`
|
|
@@ -57,8 +58,17 @@ const sidebarVariants = cva(
|
|
|
57
58
|
/** Marka kenar çubuğu, AÇIK — kök zemini iki modda da primary-100, kenarlık KORUNUR (bkz. yukarıdaki doc). */
|
|
58
59
|
'brand-light': 'border-e-primary-200 bg-primary-100',
|
|
59
60
|
},
|
|
61
|
+
/** Çekmece içinde: dış kenarlık yok, genişlik kabı doldurur (bkz. `Sidebar.embedded`). */
|
|
62
|
+
embedded: {
|
|
63
|
+
true: 'w-full border-e-0',
|
|
64
|
+
false: '',
|
|
65
|
+
},
|
|
60
66
|
},
|
|
61
|
-
|
|
67
|
+
compoundVariants: [
|
|
68
|
+
// Nötr görünüm çekmecenin kendi yüzeyini kullanır; marka zeminleri kontrast için kalır.
|
|
69
|
+
{ embedded: true, appearance: 'chrome', class: 'bg-transparent' },
|
|
70
|
+
],
|
|
71
|
+
defaultVariants: { collapsed: false, appearance: 'chrome', embedded: false },
|
|
62
72
|
});
|
|
63
73
|
/**
|
|
64
74
|
* Nav satırı (leaf veya parent-toggle) — `rounded-sm`(6px, menü öğesi kademesi,
|
|
@@ -185,11 +195,11 @@ class SidebarNavItemRow {
|
|
|
185
195
|
this.flyoutOpen.set(false);
|
|
186
196
|
}
|
|
187
197
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SidebarNavItemRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
188
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SidebarNavItemRow, isStandalone: true, selector: "mf-sidebar-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, activeItemId: { classPropertyName: "activeItemId", publicName: "activeItemId", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activate: "activate", toggleExpand: "toggleExpand" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<button\r\n type=\"button\"\r\n cdkOverlayOrigin\r\n #origin=\"cdkOverlayOrigin\"\r\n [class]=\"rowClasses()\"\r\n [attr.aria-expanded]=\"hasChildren()
|
|
198
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SidebarNavItemRow, isStandalone: true, selector: "mf-sidebar-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, activeItemId: { classPropertyName: "activeItemId", publicName: "activeItemId", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activate: "activate", toggleExpand: "toggleExpand" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<button\r\n type=\"button\"\r\n cdkOverlayOrigin\r\n #origin=\"cdkOverlayOrigin\"\r\n [class]=\"rowClasses()\"\r\n [attr.aria-expanded]=\"hasChildren() ? (collapsed() ? flyoutOpen() : expanded()) : null\"\r\n [attr.aria-haspopup]=\"hasChildren() && collapsed() ? 'menu' : null\"\r\n [attr.aria-current]=\"isActive() && !hasChildren() ? 'page' : null\"\r\n [attr.aria-label]=\"collapsed() ? item().label : null\"\r\n [mfTooltip]=\"collapsed() ? item().label : ''\"\r\n tooltipPosition=\"right\"\r\n (click)=\"onRowClick()\"\r\n>\r\n <span mfIcon [size]=\"20\" [filled]=\"isActive()\">{{ item().icon }}</span>\r\n\r\n @if (!collapsed()) {\r\n <span class=\"min-w-0 flex-1 truncate\">{{ item().label }}</span>\r\n @if (item().badge !== undefined) {\r\n <span\r\n class=\"rounded-full bg-primary-tint px-1.5 py-0.5 font-mono text-eyebrow text-primary-tint-fg group-data-[appearance=brand]/sidebar:bg-primary-800 group-data-[appearance=brand]/sidebar:text-primary-100 group-data-[appearance=brand-light]/sidebar:bg-primary-200 group-data-[appearance=brand-light]/sidebar:text-primary-800\"\r\n >\r\n {{ item().badge }}\r\n </span>\r\n }\r\n @if (hasChildren()) {\r\n <span\r\n mfIcon\r\n [size]=\"16\"\r\n class=\"shrink-0 text-fg-subtle transition-transform duration-base group-data-[appearance=brand]/sidebar:text-primary-300 group-data-[appearance=brand-light]/sidebar:text-primary-700 rtl:-scale-x-100\"\r\n [class.rotate-90]=\"expanded()\"\r\n [class.rtl:-rotate-90]=\"expanded()\"\r\n >\r\n chevron_right\r\n </span>\r\n }\r\n }\r\n</button>\r\n\r\n@if (hasChildren() && !collapsed()) {\r\n <div\r\n class=\"grid overflow-hidden transition-[grid-template-rows] duration-base ease-out\"\r\n [style.grid-template-rows]=\"expanded() ? '1fr' : '0fr'\"\r\n [attr.inert]=\"expanded() ? null : true\"\r\n >\r\n <ul class=\"m-0 min-h-0 list-none overflow-hidden p-0\">\r\n @for (child of item().children; track child.id) {\r\n <li>\r\n <button\r\n type=\"button\"\r\n [class]=\"childRowClasses(child)\"\r\n [attr.aria-current]=\"child.id === activeItemId() ? 'page' : null\"\r\n (click)=\"onChildClick(child)\"\r\n >\r\n <span mfIcon [size]=\"16\">{{ child.icon }}</span>\r\n <span class=\"truncate\">{{ child.label }}</span>\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n}\r\n\r\n@if (hasChildren() && collapsed()) {\r\n <mf-popover\r\n [origin]=\"origin\"\r\n [open]=\"flyoutOpen()\"\r\n placement=\"right-start\"\r\n padding=\"sm\"\r\n panelClass=\"min-w-48\"\r\n (closed)=\"closeFlyout()\"\r\n >\r\n <div role=\"menu\" [attr.aria-label]=\"item().label\">\r\n <p class=\"truncate px-2.5 py-1.5 text-eyebrow text-fg-subtle\">{{ item().label }}</p>\r\n @for (child of item().children; track child.id) {\r\n <button\r\n type=\"button\"\r\n role=\"menuitem\"\r\n [attr.aria-current]=\"child.id === activeItemId() ? 'page' : null\"\r\n class=\"flex w-full appearance-none items-center gap-2.5 rounded-sm border-0 bg-transparent px-2.5 py-1.5 text-start text-sm font-medium text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n (click)=\"onChildClick(child)\"\r\n >\r\n <span mfIcon [size]=\"16\">{{ child.icon }}</span>\r\n <span class=\"truncate\">{{ child.label }}</span>\r\n </button>\r\n }\r\n </div>\r\n </mf-popover>\r\n}\r\n", dependencies: [{ kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }, { kind: "directive", type: Tooltip, selector: "[mfTooltip], [mfTooltipContent]", inputs: ["mfTooltip", "mfTooltipContent", "tooltipPosition"], exportAs: ["mfTooltip"] }] });
|
|
189
199
|
}
|
|
190
200
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SidebarNavItemRow, decorators: [{
|
|
191
201
|
type: Component,
|
|
192
|
-
args: [{ selector: 'mf-sidebar-nav-item', imports: [Icon, OverlayModule, Popover, Tooltip], host: { class: 'contents' }, template: "<button\r\n type=\"button\"\r\n cdkOverlayOrigin\r\n #origin=\"cdkOverlayOrigin\"\r\n [class]=\"rowClasses()\"\r\n [attr.aria-expanded]=\"hasChildren()
|
|
202
|
+
args: [{ selector: 'mf-sidebar-nav-item', imports: [Icon, OverlayModule, Popover, Tooltip], host: { class: 'contents' }, template: "<button\r\n type=\"button\"\r\n cdkOverlayOrigin\r\n #origin=\"cdkOverlayOrigin\"\r\n [class]=\"rowClasses()\"\r\n [attr.aria-expanded]=\"hasChildren() ? (collapsed() ? flyoutOpen() : expanded()) : null\"\r\n [attr.aria-haspopup]=\"hasChildren() && collapsed() ? 'menu' : null\"\r\n [attr.aria-current]=\"isActive() && !hasChildren() ? 'page' : null\"\r\n [attr.aria-label]=\"collapsed() ? item().label : null\"\r\n [mfTooltip]=\"collapsed() ? item().label : ''\"\r\n tooltipPosition=\"right\"\r\n (click)=\"onRowClick()\"\r\n>\r\n <span mfIcon [size]=\"20\" [filled]=\"isActive()\">{{ item().icon }}</span>\r\n\r\n @if (!collapsed()) {\r\n <span class=\"min-w-0 flex-1 truncate\">{{ item().label }}</span>\r\n @if (item().badge !== undefined) {\r\n <span\r\n class=\"rounded-full bg-primary-tint px-1.5 py-0.5 font-mono text-eyebrow text-primary-tint-fg group-data-[appearance=brand]/sidebar:bg-primary-800 group-data-[appearance=brand]/sidebar:text-primary-100 group-data-[appearance=brand-light]/sidebar:bg-primary-200 group-data-[appearance=brand-light]/sidebar:text-primary-800\"\r\n >\r\n {{ item().badge }}\r\n </span>\r\n }\r\n @if (hasChildren()) {\r\n <span\r\n mfIcon\r\n [size]=\"16\"\r\n class=\"shrink-0 text-fg-subtle transition-transform duration-base group-data-[appearance=brand]/sidebar:text-primary-300 group-data-[appearance=brand-light]/sidebar:text-primary-700 rtl:-scale-x-100\"\r\n [class.rotate-90]=\"expanded()\"\r\n [class.rtl:-rotate-90]=\"expanded()\"\r\n >\r\n chevron_right\r\n </span>\r\n }\r\n }\r\n</button>\r\n\r\n@if (hasChildren() && !collapsed()) {\r\n <div\r\n class=\"grid overflow-hidden transition-[grid-template-rows] duration-base ease-out\"\r\n [style.grid-template-rows]=\"expanded() ? '1fr' : '0fr'\"\r\n [attr.inert]=\"expanded() ? null : true\"\r\n >\r\n <ul class=\"m-0 min-h-0 list-none overflow-hidden p-0\">\r\n @for (child of item().children; track child.id) {\r\n <li>\r\n <button\r\n type=\"button\"\r\n [class]=\"childRowClasses(child)\"\r\n [attr.aria-current]=\"child.id === activeItemId() ? 'page' : null\"\r\n (click)=\"onChildClick(child)\"\r\n >\r\n <span mfIcon [size]=\"16\">{{ child.icon }}</span>\r\n <span class=\"truncate\">{{ child.label }}</span>\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n}\r\n\r\n@if (hasChildren() && collapsed()) {\r\n <mf-popover\r\n [origin]=\"origin\"\r\n [open]=\"flyoutOpen()\"\r\n placement=\"right-start\"\r\n padding=\"sm\"\r\n panelClass=\"min-w-48\"\r\n (closed)=\"closeFlyout()\"\r\n >\r\n <div role=\"menu\" [attr.aria-label]=\"item().label\">\r\n <p class=\"truncate px-2.5 py-1.5 text-eyebrow text-fg-subtle\">{{ item().label }}</p>\r\n @for (child of item().children; track child.id) {\r\n <button\r\n type=\"button\"\r\n role=\"menuitem\"\r\n [attr.aria-current]=\"child.id === activeItemId() ? 'page' : null\"\r\n class=\"flex w-full appearance-none items-center gap-2.5 rounded-sm border-0 bg-transparent px-2.5 py-1.5 text-start text-sm font-medium text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover\"\r\n (click)=\"onChildClick(child)\"\r\n >\r\n <span mfIcon [size]=\"16\">{{ child.icon }}</span>\r\n <span class=\"truncate\">{{ child.label }}</span>\r\n </button>\r\n }\r\n </div>\r\n </mf-popover>\r\n}\r\n" }]
|
|
193
203
|
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], activeItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeItemId", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], activate: [{ type: i0.Output, args: ["activate"] }], toggleExpand: [{ type: i0.Output, args: ["toggleExpand"] }] } });
|
|
194
204
|
|
|
195
205
|
/**
|
|
@@ -215,6 +225,20 @@ class SidebarTenantSwitcher {
|
|
|
215
225
|
...(ngDevMode ? [{ debugName: "effectiveLabel" }] : /* istanbul ignore next */ []));
|
|
216
226
|
effectiveNoTenantsLabel = computed(() => this.noTenantsLabel() ?? this.sidebarLabels().noTenants, /* @ts-ignore */
|
|
217
227
|
...(ngDevMode ? [{ debugName: "effectiveNoTenantsLabel" }] : /* istanbul ignore next */ []));
|
|
228
|
+
/**
|
|
229
|
+
* Tetiğin erişilebilir adı. `description` varken görsel ikinci satır eylem
|
|
230
|
+
* etiketinin ("Switch tenant") yerini alır — ad eylemi söylemezdi; bu yüzden
|
|
231
|
+
* "{eylem}: {ad}" verilir, açıklama `aria-describedby` ile okunur. Açıklama
|
|
232
|
+
* yoksa eski davranış: genişken içerikten türer ("{ad} {eylem}"), daraltılmışken ad.
|
|
233
|
+
*/
|
|
234
|
+
triggerAriaLabel = computed(() => {
|
|
235
|
+
const tenant = this.activeTenant();
|
|
236
|
+
if (tenant?.description)
|
|
237
|
+
return `${this.effectiveLabel()}: ${tenant.name}`;
|
|
238
|
+
return this.collapsed() ? (tenant?.name ?? this.effectiveLabel()) : null;
|
|
239
|
+
}, /* @ts-ignore */
|
|
240
|
+
...(ngDevMode ? [{ debugName: "triggerAriaLabel" }] : /* istanbul ignore next */ []));
|
|
241
|
+
descriptionId = nextId('mf-tenant-description');
|
|
218
242
|
cn = cn;
|
|
219
243
|
open = signal(false, /* @ts-ignore */
|
|
220
244
|
...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
@@ -238,12 +262,20 @@ class SidebarTenantSwitcher {
|
|
|
238
262
|
this.open.set(false);
|
|
239
263
|
}
|
|
240
264
|
select(tenant) {
|
|
265
|
+
if (tenant.disabled)
|
|
266
|
+
return;
|
|
241
267
|
this.tenantChange.emit(tenant);
|
|
242
268
|
this.close();
|
|
243
269
|
}
|
|
270
|
+
/** "Ad, açıklama[, rozet]" — yalnızca ek alan varsa; yoksa `null` (içerikten türetilir, eski davranış). */
|
|
271
|
+
optionAriaLabel(tenant) {
|
|
272
|
+
if (!tenant.description && !tenant.badge)
|
|
273
|
+
return null;
|
|
274
|
+
return [tenant.name, tenant.description, tenant.badge].filter(Boolean).join(', ');
|
|
275
|
+
}
|
|
244
276
|
optionClasses(tenant, index) {
|
|
245
277
|
const isSelected = tenant.id === this.activeTenantId();
|
|
246
|
-
return cn('flex cursor-pointer items-center gap-2.5 rounded-sm px-2 py-1.5 transition-colors duration-fast ease-emphasis', index === this.highlighted() && !isSelected && 'bg-surface-alt', isSelected && 'bg-primary-tint text-primary-tint-fg');
|
|
278
|
+
return cn('flex cursor-pointer items-center gap-2.5 rounded-sm px-2 py-1.5 transition-colors duration-fast ease-emphasis', index === this.highlighted() && !isSelected && 'bg-surface-alt', isSelected && 'bg-primary-tint text-primary-tint-fg', tenant.disabled && 'cursor-not-allowed opacity-50');
|
|
247
279
|
}
|
|
248
280
|
onTriggerKeydown(event) {
|
|
249
281
|
if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
|
|
@@ -277,11 +309,11 @@ class SidebarTenantSwitcher {
|
|
|
277
309
|
}
|
|
278
310
|
}
|
|
279
311
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SidebarTenantSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
280
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SidebarTenantSwitcher, isStandalone: true, selector: "mf-sidebar-tenant-switcher", inputs: { tenants: { classPropertyName: "tenants", publicName: "tenants", isSignal: true, isRequired: false, transformFunction: null }, activeTenantId: { classPropertyName: "activeTenantId", publicName: "activeTenantId", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, noTenantsLabel: { classPropertyName: "noTenantsLabel", publicName: "noTenantsLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tenantChange: "tenantChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<button\r\n type=\"button\"\r\n cdkOverlayOrigin\r\n #origin=\"cdkOverlayOrigin\"\r\n class=\"flex h-16 w-full shrink-0 appearance-none items-center gap-2.5 border-x-0 border-t-0 border-b border-border bg-transparent px-3 text-start transition-colors duration-fast ease-emphasis hover:bg-state-hover focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring group-data-[appearance=brand]/sidebar:border-primary-800 group-data-[appearance=brand]/sidebar:hover:bg-primary-800 group-data-[appearance=brand]/sidebar:focus-visible:outline-primary-300 group-data-[appearance=brand-light]/sidebar:border-primary-200 group-data-[appearance=brand-light]/sidebar:hover:bg-primary-200 group-data-[appearance=brand-light]/sidebar:focus-visible:outline-primary-700\"\r\n [class.justify-center]=\"collapsed()\"\r\n [attr.aria-label]=\"collapsed()
|
|
312
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SidebarTenantSwitcher, isStandalone: true, selector: "mf-sidebar-tenant-switcher", inputs: { tenants: { classPropertyName: "tenants", publicName: "tenants", isSignal: true, isRequired: false, transformFunction: null }, activeTenantId: { classPropertyName: "activeTenantId", publicName: "activeTenantId", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, noTenantsLabel: { classPropertyName: "noTenantsLabel", publicName: "noTenantsLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tenantChange: "tenantChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<button\r\n type=\"button\"\r\n cdkOverlayOrigin\r\n #origin=\"cdkOverlayOrigin\"\r\n class=\"flex h-16 w-full shrink-0 appearance-none items-center gap-2.5 border-x-0 border-t-0 border-b border-border bg-transparent px-3 text-start transition-colors duration-fast ease-emphasis hover:bg-state-hover focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring group-data-[appearance=brand]/sidebar:border-primary-800 group-data-[appearance=brand]/sidebar:hover:bg-primary-800 group-data-[appearance=brand]/sidebar:focus-visible:outline-primary-300 group-data-[appearance=brand-light]/sidebar:border-primary-200 group-data-[appearance=brand-light]/sidebar:hover:bg-primary-200 group-data-[appearance=brand-light]/sidebar:focus-visible:outline-primary-700\"\r\n [class.justify-center]=\"collapsed()\"\r\n [attr.aria-label]=\"triggerAriaLabel()\"\r\n [attr.aria-describedby]=\"!collapsed() && activeTenant()?.description ? descriptionId : null\"\r\n [mfTooltip]=\"collapsed() ? (activeTenant()?.name ?? effectiveLabel()) : ''\"\r\n tooltipPosition=\"right\"\r\n [attr.aria-expanded]=\"open()\"\r\n aria-haspopup=\"listbox\"\r\n (click)=\"toggle()\"\r\n (keydown)=\"onTriggerKeydown($event)\"\r\n>\r\n <mf-avatar [name]=\"activeTenant()?.name ?? '?'\" shape=\"square\" size=\"md\" [colorful]=\"true\" />\r\n @if (!collapsed()) {\r\n <span class=\"flex min-w-0 flex-1 flex-col\">\r\n <span\r\n class=\"truncate font-display text-sm font-semibold text-fg group-data-[appearance=brand]/sidebar:text-primary-50 group-data-[appearance=brand-light]/sidebar:text-primary-900\"\r\n >\r\n {{ activeTenant()?.name ?? effectiveNoTenantsLabel() }}\r\n </span>\r\n <span\r\n [id]=\"descriptionId\"\r\n class=\"truncate text-xs text-fg-subtle group-data-[appearance=brand]/sidebar:text-primary-300 group-data-[appearance=brand-light]/sidebar:text-primary-700\"\r\n >{{ activeTenant()?.description || effectiveLabel() }}</span\r\n >\r\n </span>\r\n <span\r\n mfIcon\r\n [size]=\"18\"\r\n class=\"shrink-0 text-fg-subtle group-data-[appearance=brand]/sidebar:text-primary-300 group-data-[appearance=brand-light]/sidebar:text-primary-700\"\r\n >unfold_more</span\r\n >\r\n }\r\n</button>\r\n\r\n<mf-popover\r\n [origin]=\"origin\"\r\n [open]=\"open()\"\r\n placement=\"bottom-start\"\r\n padding=\"sm\"\r\n [matchTriggerWidth]=\"!collapsed()\"\r\n [panelClass]=\"cn('max-h-72', collapsed() ? 'min-w-60' : '')\"\r\n (closed)=\"close()\"\r\n>\r\n <ul\r\n role=\"listbox\"\r\n tabindex=\"0\"\r\n [attr.aria-label]=\"effectiveLabel()\"\r\n class=\"w-full text-sm\"\r\n (keydown)=\"onPanelKeydown($event)\"\r\n >\r\n @for (tenant of tenants(); track tenant.id; let i = $index) {\r\n <!-- role=\"option\" B\u0130LEREK odaklanabilir de\u011Fil \u2014 klavye gezinmesi yukar\u0131daki listbox (keydown)'da merkezi. -->\r\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n <li\r\n role=\"option\"\r\n [attr.aria-selected]=\"tenant.id === activeTenantId()\"\r\n [attr.aria-disabled]=\"tenant.disabled ? true : null\"\r\n [attr.aria-label]=\"optionAriaLabel(tenant)\"\r\n [class]=\"optionClasses(tenant, i)\"\r\n (mouseenter)=\"highlighted.set(i)\"\r\n (click)=\"select(tenant)\"\r\n >\r\n <mf-avatar [name]=\"tenant.name\" shape=\"square\" size=\"sm\" [colorful]=\"true\" />\r\n @if (tenant.description) {\r\n <span class=\"flex min-w-0 flex-1 flex-col\">\r\n <span class=\"truncate text-fg-muted\">{{ tenant.name }}</span>\r\n <span class=\"truncate text-xs text-fg-subtle\">{{ tenant.description }}</span>\r\n </span>\r\n } @else {\r\n <span class=\"min-w-0 flex-1 truncate text-fg-muted\">{{ tenant.name }}</span>\r\n }\r\n @if (tenant.badge) {\r\n <span mfBadge [tone]=\"tenant.badgeTone ?? 'neutral'\" size=\"sm\" casing=\"sentence\">{{\r\n tenant.badge\r\n }}</span>\r\n }\r\n @if (tenant.id === activeTenantId()) {\r\n <span mfIcon [size]=\"16\">check</span>\r\n }\r\n </li>\r\n } @empty {\r\n <li class=\"px-2.5 py-1.5 text-fg-subtle\">{{ effectiveNoTenantsLabel() }}</li>\r\n }\r\n </ul>\r\n</mf-popover>\r\n", dependencies: [{ kind: "component", type: Avatar, selector: "mf-avatar", inputs: ["name", "src", "size", "shape", "colorful", "tone"] }, { kind: "directive", type: Badge, selector: "span[mfBadge]", inputs: ["tone", "size", "casing"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }, { kind: "directive", type: Tooltip, selector: "[mfTooltip], [mfTooltipContent]", inputs: ["mfTooltip", "mfTooltipContent", "tooltipPosition"], exportAs: ["mfTooltip"] }] });
|
|
281
313
|
}
|
|
282
314
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SidebarTenantSwitcher, decorators: [{
|
|
283
315
|
type: Component,
|
|
284
|
-
args: [{ selector: 'mf-sidebar-tenant-switcher', imports: [Avatar, Icon, OverlayModule, Popover, Tooltip], host: { class: 'contents' }, template: "<button\r\n type=\"button\"\r\n cdkOverlayOrigin\r\n #origin=\"cdkOverlayOrigin\"\r\n class=\"flex h-16 w-full shrink-0 appearance-none items-center gap-2.5 border-x-0 border-t-0 border-b border-border bg-transparent px-3 text-start transition-colors duration-fast ease-emphasis hover:bg-state-hover focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring group-data-[appearance=brand]/sidebar:border-primary-800 group-data-[appearance=brand]/sidebar:hover:bg-primary-800 group-data-[appearance=brand]/sidebar:focus-visible:outline-primary-300 group-data-[appearance=brand-light]/sidebar:border-primary-200 group-data-[appearance=brand-light]/sidebar:hover:bg-primary-200 group-data-[appearance=brand-light]/sidebar:focus-visible:outline-primary-700\"\r\n [class.justify-center]=\"collapsed()\"\r\n [attr.aria-label]=\"collapsed()
|
|
316
|
+
args: [{ selector: 'mf-sidebar-tenant-switcher', imports: [Avatar, Badge, Icon, OverlayModule, Popover, Tooltip], host: { class: 'contents' }, template: "<button\r\n type=\"button\"\r\n cdkOverlayOrigin\r\n #origin=\"cdkOverlayOrigin\"\r\n class=\"flex h-16 w-full shrink-0 appearance-none items-center gap-2.5 border-x-0 border-t-0 border-b border-border bg-transparent px-3 text-start transition-colors duration-fast ease-emphasis hover:bg-state-hover focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring group-data-[appearance=brand]/sidebar:border-primary-800 group-data-[appearance=brand]/sidebar:hover:bg-primary-800 group-data-[appearance=brand]/sidebar:focus-visible:outline-primary-300 group-data-[appearance=brand-light]/sidebar:border-primary-200 group-data-[appearance=brand-light]/sidebar:hover:bg-primary-200 group-data-[appearance=brand-light]/sidebar:focus-visible:outline-primary-700\"\r\n [class.justify-center]=\"collapsed()\"\r\n [attr.aria-label]=\"triggerAriaLabel()\"\r\n [attr.aria-describedby]=\"!collapsed() && activeTenant()?.description ? descriptionId : null\"\r\n [mfTooltip]=\"collapsed() ? (activeTenant()?.name ?? effectiveLabel()) : ''\"\r\n tooltipPosition=\"right\"\r\n [attr.aria-expanded]=\"open()\"\r\n aria-haspopup=\"listbox\"\r\n (click)=\"toggle()\"\r\n (keydown)=\"onTriggerKeydown($event)\"\r\n>\r\n <mf-avatar [name]=\"activeTenant()?.name ?? '?'\" shape=\"square\" size=\"md\" [colorful]=\"true\" />\r\n @if (!collapsed()) {\r\n <span class=\"flex min-w-0 flex-1 flex-col\">\r\n <span\r\n class=\"truncate font-display text-sm font-semibold text-fg group-data-[appearance=brand]/sidebar:text-primary-50 group-data-[appearance=brand-light]/sidebar:text-primary-900\"\r\n >\r\n {{ activeTenant()?.name ?? effectiveNoTenantsLabel() }}\r\n </span>\r\n <span\r\n [id]=\"descriptionId\"\r\n class=\"truncate text-xs text-fg-subtle group-data-[appearance=brand]/sidebar:text-primary-300 group-data-[appearance=brand-light]/sidebar:text-primary-700\"\r\n >{{ activeTenant()?.description || effectiveLabel() }}</span\r\n >\r\n </span>\r\n <span\r\n mfIcon\r\n [size]=\"18\"\r\n class=\"shrink-0 text-fg-subtle group-data-[appearance=brand]/sidebar:text-primary-300 group-data-[appearance=brand-light]/sidebar:text-primary-700\"\r\n >unfold_more</span\r\n >\r\n }\r\n</button>\r\n\r\n<mf-popover\r\n [origin]=\"origin\"\r\n [open]=\"open()\"\r\n placement=\"bottom-start\"\r\n padding=\"sm\"\r\n [matchTriggerWidth]=\"!collapsed()\"\r\n [panelClass]=\"cn('max-h-72', collapsed() ? 'min-w-60' : '')\"\r\n (closed)=\"close()\"\r\n>\r\n <ul\r\n role=\"listbox\"\r\n tabindex=\"0\"\r\n [attr.aria-label]=\"effectiveLabel()\"\r\n class=\"w-full text-sm\"\r\n (keydown)=\"onPanelKeydown($event)\"\r\n >\r\n @for (tenant of tenants(); track tenant.id; let i = $index) {\r\n <!-- role=\"option\" B\u0130LEREK odaklanabilir de\u011Fil \u2014 klavye gezinmesi yukar\u0131daki listbox (keydown)'da merkezi. -->\r\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n <li\r\n role=\"option\"\r\n [attr.aria-selected]=\"tenant.id === activeTenantId()\"\r\n [attr.aria-disabled]=\"tenant.disabled ? true : null\"\r\n [attr.aria-label]=\"optionAriaLabel(tenant)\"\r\n [class]=\"optionClasses(tenant, i)\"\r\n (mouseenter)=\"highlighted.set(i)\"\r\n (click)=\"select(tenant)\"\r\n >\r\n <mf-avatar [name]=\"tenant.name\" shape=\"square\" size=\"sm\" [colorful]=\"true\" />\r\n @if (tenant.description) {\r\n <span class=\"flex min-w-0 flex-1 flex-col\">\r\n <span class=\"truncate text-fg-muted\">{{ tenant.name }}</span>\r\n <span class=\"truncate text-xs text-fg-subtle\">{{ tenant.description }}</span>\r\n </span>\r\n } @else {\r\n <span class=\"min-w-0 flex-1 truncate text-fg-muted\">{{ tenant.name }}</span>\r\n }\r\n @if (tenant.badge) {\r\n <span mfBadge [tone]=\"tenant.badgeTone ?? 'neutral'\" size=\"sm\" casing=\"sentence\">{{\r\n tenant.badge\r\n }}</span>\r\n }\r\n @if (tenant.id === activeTenantId()) {\r\n <span mfIcon [size]=\"16\">check</span>\r\n }\r\n </li>\r\n } @empty {\r\n <li class=\"px-2.5 py-1.5 text-fg-subtle\">{{ effectiveNoTenantsLabel() }}</li>\r\n }\r\n </ul>\r\n</mf-popover>\r\n" }]
|
|
285
317
|
}], propDecorators: { tenants: [{ type: i0.Input, args: [{ isSignal: true, alias: "tenants", required: false }] }], activeTenantId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTenantId", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], noTenantsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noTenantsLabel", required: false }] }], tenantChange: [{ type: i0.Output, args: ["tenantChange"] }] } });
|
|
286
318
|
|
|
287
319
|
/**
|
|
@@ -357,6 +389,22 @@ class Sidebar {
|
|
|
357
389
|
*/
|
|
358
390
|
appearance = input('chrome', /* @ts-ignore */
|
|
359
391
|
...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
392
|
+
/**
|
|
393
|
+
* `[brand]` yuvasının tenant switcher'la ilişkisi. `'replace'` (varsayılan,
|
|
394
|
+
* eski davranış): marka YALNIZ `tenants` boşken çizilir, switcher onun
|
|
395
|
+
* yerine geçer. `'above'`: marka her zaman üstte, switcher (liste doluysa)
|
|
396
|
+
* altında. Daraltılmışken yalnız logo için `<mf-brand [showLabel]="!collapsed()">`
|
|
397
|
+
* — ad görsel olarak gizlenir, erişilebilir ad korunur.
|
|
398
|
+
*/
|
|
399
|
+
brandPlacement = input('replace', /* @ts-ignore */
|
|
400
|
+
...(ngDevMode ? [{ debugName: "brandPlacement" }] : /* istanbul ignore next */ []));
|
|
401
|
+
/**
|
|
402
|
+
* `true`: bir çekmece (`mf-drawer`) gibi kendi yüzeyi olan bir kabın İÇİNDE —
|
|
403
|
+
* dış kenarlık ve `chrome` zemini çizilmez (çift çerçeve olmasın), genişlik
|
|
404
|
+
* kabı doldurur. Marka görünümleri (`brand`/`brand-light`) kontrast için
|
|
405
|
+
* kendi zeminini korur.
|
|
406
|
+
*/
|
|
407
|
+
embedded = input(false, { ...(ngDevMode ? { debugName: "embedded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
360
408
|
/** Verilmezse `MF_SIDEBAR_LABELS`'a düşer — `SidebarTenantSwitcher`/`SidebarUserMenu`'nün KENDİ etiketleri artık AYRICA buradan prop-drilling YAPILMIYOR, ikisi de `MF_SIDEBAR_LABELS`'ı doğrudan inject ediyor. */
|
|
361
409
|
collapseLabel = input(/* @ts-ignore */
|
|
362
410
|
...(ngDevMode ? [undefined, { debugName: "collapseLabel" }] : /* istanbul ignore next */ []));
|
|
@@ -375,8 +423,14 @@ class Sidebar {
|
|
|
375
423
|
...(ngDevMode ? [{ debugName: "effectiveExpandLabel" }] : /* istanbul ignore next */ []));
|
|
376
424
|
effectiveNavAriaLabel = computed(() => this.navAriaLabel() ?? this.sidebarLabels().nav, /* @ts-ignore */
|
|
377
425
|
...(ngDevMode ? [{ debugName: "effectiveNavAriaLabel" }] : /* istanbul ignore next */ []));
|
|
378
|
-
rootClasses = computed(() => cn(sidebarVariants({
|
|
426
|
+
rootClasses = computed(() => cn(sidebarVariants({
|
|
427
|
+
collapsed: this.collapsed(),
|
|
428
|
+
appearance: this.appearance(),
|
|
429
|
+
embedded: this.embedded(),
|
|
430
|
+
})), /* @ts-ignore */
|
|
379
431
|
...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
|
|
432
|
+
showBrandRow = computed(() => this.brandPlacement() === 'above' || this.tenants().length === 0, /* @ts-ignore */
|
|
433
|
+
...(ngDevMode ? [{ debugName: "showBrandRow" }] : /* istanbul ignore next */ []));
|
|
380
434
|
/** Genişkenken hangi gruplar açık — her grup BAĞIMSIZ açılır/kapanır (akordeon değil, kullanıcı kararı). `model()` — tüketici okuyabilir/yazabilir (ör. "hepsini aç" bir buton). */
|
|
381
435
|
expandedIds = model(new Set(), /* @ts-ignore */
|
|
382
436
|
...(ngDevMode ? [{ debugName: "expandedIds" }] : /* istanbul ignore next */ []));
|
|
@@ -437,12 +491,12 @@ class Sidebar {
|
|
|
437
491
|
this.collapsed.update((v) => !v);
|
|
438
492
|
}
|
|
439
493
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Sidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
440
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: Sidebar, isStandalone: true, selector: "mf-sidebar", inputs: { tenants: { classPropertyName: "tenants", publicName: "tenants", isSignal: true, isRequired: false, transformFunction: null }, activeTenantId: { classPropertyName: "activeTenantId", publicName: "activeTenantId", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: true, transformFunction: null }, activeItemId: { classPropertyName: "activeItemId", publicName: "activeItemId", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, showUserMenu: { classPropertyName: "showUserMenu", publicName: "showUserMenu", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, showCollapseToggle: { classPropertyName: "showCollapseToggle", publicName: "showCollapseToggle", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, collapseLabel: { classPropertyName: "collapseLabel", publicName: "collapseLabel", isSignal: true, isRequired: false, transformFunction: null }, expandLabel: { classPropertyName: "expandLabel", publicName: "expandLabel", isSignal: true, isRequired: false, transformFunction: null }, navAriaLabel: { classPropertyName: "navAriaLabel", publicName: "navAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null }, autoExpandActive: { classPropertyName: "autoExpandActive", publicName: "autoExpandActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTenantId: "activeTenantIdChange", activeItemId: "activeItemIdChange", collapsed: "collapsedChange", tenantChange: "tenantChange", itemClick: "itemClick", profileClick: "profileClick", expandedIds: "expandedIdsChange" }, host: { classAttribute: "flex h-full" }, exportAs: ["mfSidebar"], ngImport: i0, template: "<aside [class]=\"rootClasses()\" [attr.data-appearance]=\"appearance()\">\r\n <div class=\"flex h-full min-h-0 w-full flex-col overflow-hidden\">\r\n @if (
|
|
494
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: Sidebar, isStandalone: true, selector: "mf-sidebar", inputs: { tenants: { classPropertyName: "tenants", publicName: "tenants", isSignal: true, isRequired: false, transformFunction: null }, activeTenantId: { classPropertyName: "activeTenantId", publicName: "activeTenantId", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: true, transformFunction: null }, activeItemId: { classPropertyName: "activeItemId", publicName: "activeItemId", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, showUserMenu: { classPropertyName: "showUserMenu", publicName: "showUserMenu", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, showCollapseToggle: { classPropertyName: "showCollapseToggle", publicName: "showCollapseToggle", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, brandPlacement: { classPropertyName: "brandPlacement", publicName: "brandPlacement", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, collapseLabel: { classPropertyName: "collapseLabel", publicName: "collapseLabel", isSignal: true, isRequired: false, transformFunction: null }, expandLabel: { classPropertyName: "expandLabel", publicName: "expandLabel", isSignal: true, isRequired: false, transformFunction: null }, navAriaLabel: { classPropertyName: "navAriaLabel", publicName: "navAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null }, autoExpandActive: { classPropertyName: "autoExpandActive", publicName: "autoExpandActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTenantId: "activeTenantIdChange", activeItemId: "activeItemIdChange", collapsed: "collapsedChange", tenantChange: "tenantChange", itemClick: "itemClick", profileClick: "profileClick", expandedIds: "expandedIdsChange" }, host: { classAttribute: "flex h-full" }, exportAs: ["mfSidebar"], ngImport: i0, template: "<aside [class]=\"rootClasses()\" [attr.data-appearance]=\"appearance()\">\r\n <div class=\"flex h-full min-h-0 w-full flex-col overflow-hidden\">\r\n @if (showBrandRow()) {\r\n <!--\r\n Marka sat\u0131r\u0131. `brandPlacement=\"replace\"` (varsay\u0131lan): yaln\u0131z `tenants`\r\n bo\u015Fken \u2014 tenant kavram\u0131 olmayan t\u00FCketiciler switcher'\u0131n \"Kirac\u0131\r\n bulunamad\u0131\" bo\u015F-durumu yerine (kafa kar\u0131\u015Ft\u0131r\u0131c\u0131, ger\u00E7ek bir hata gibi\r\n okunur) kendi marka ba\u015Fl\u0131\u011F\u0131n\u0131 buraya projekte eder (\u00F6r. `<mf-brand />`).\r\n `\"above\"`: marka HER ZAMAN \u00FCstte, switcher (liste doluysa) alt\u0131nda \u2014\r\n landmark s\u0131ras\u0131 marka \u2192 \u015Firket de\u011Fi\u015Ftirici \u2192 `nav`.\r\n -->\r\n <div\r\n class=\"flex h-16 shrink-0 items-center gap-2 border-b border-border px-4 group-data-[appearance=brand]/sidebar:border-primary-800 group-data-[appearance=brand-light]/sidebar:border-primary-200\"\r\n [class.justify-center]=\"collapsed()\"\r\n >\r\n <ng-content select=\"[brand]\" />\r\n </div>\r\n }\r\n @if (tenants().length > 0) {\r\n <mf-sidebar-tenant-switcher\r\n [tenants]=\"tenants()\"\r\n [activeTenantId]=\"activeTenantId()\"\r\n [collapsed]=\"collapsed()\"\r\n (tenantChange)=\"onTenantSelect($event)\"\r\n />\r\n }\r\n\r\n <nav\r\n class=\"flex-1 overflow-x-hidden overflow-y-auto px-2 py-3\"\r\n [attr.aria-label]=\"effectiveNavAriaLabel()\"\r\n >\r\n <ul class=\"m-0 flex list-none flex-col gap-1 p-0\">\r\n @for (item of navItems(); track item.id) {\r\n <li>\r\n <mf-sidebar-nav-item\r\n [item]=\"item\"\r\n [collapsed]=\"collapsed()\"\r\n [activeItemId]=\"activeItemId()\"\r\n [expanded]=\"isExpanded(item.id)\"\r\n (activate)=\"onItemActivate($event)\"\r\n (toggleExpand)=\"onToggleExpand($event)\"\r\n />\r\n </li>\r\n }\r\n </ul>\r\n </nav>\r\n\r\n @if (showUserMenu()) {\r\n <div\r\n class=\"border-t border-border group-data-[appearance=brand]/sidebar:border-primary-800 group-data-[appearance=brand-light]/sidebar:border-primary-200\"\r\n ></div>\r\n\r\n <mf-sidebar-user-menu\r\n [user]=\"user()\"\r\n [collapsed]=\"collapsed()\"\r\n (profileClick)=\"profileClick.emit()\"\r\n />\r\n }\r\n </div>\r\n\r\n @if (showCollapseToggle()) {\r\n <button\r\n type=\"button\"\r\n class=\"absolute top-14 -end-3 z-10 flex h-6 w-6 appearance-none items-center justify-center rounded-full border border-hairline bg-chrome p-0 text-fg-subtle shadow-1 transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg active:scale-[0.99] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring group-data-[appearance=brand]/sidebar:bg-primary-900 group-data-[appearance=brand]/sidebar:text-primary-200 group-data-[appearance=brand]/sidebar:hover:bg-primary-800 group-data-[appearance=brand]/sidebar:hover:text-primary-50 group-data-[appearance=brand]/sidebar:focus-visible:outline-primary-300 group-data-[appearance=brand-light]/sidebar:bg-primary-100 group-data-[appearance=brand-light]/sidebar:text-primary-800 group-data-[appearance=brand-light]/sidebar:hover:bg-primary-200 group-data-[appearance=brand-light]/sidebar:hover:text-primary-900 group-data-[appearance=brand-light]/sidebar:focus-visible:outline-primary-700\"\r\n [mfTooltip]=\"collapsed() ? effectiveExpandLabel() : effectiveCollapseLabel()\"\r\n tooltipPosition=\"right\"\r\n [attr.aria-label]=\"collapsed() ? effectiveExpandLabel() : effectiveCollapseLabel()\"\r\n (click)=\"toggleCollapse()\"\r\n >\r\n <span mfIcon [size]=\"14\" class=\"rtl:-scale-x-100\">{{\r\n collapsed() ? 'chevron_right' : 'chevron_left'\r\n }}</span>\r\n </button>\r\n }\r\n</aside>\r\n", dependencies: [{ kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: Tooltip, selector: "[mfTooltip], [mfTooltipContent]", inputs: ["mfTooltip", "mfTooltipContent", "tooltipPosition"], exportAs: ["mfTooltip"] }, { kind: "component", type: SidebarTenantSwitcher, selector: "mf-sidebar-tenant-switcher", inputs: ["tenants", "activeTenantId", "collapsed", "label", "noTenantsLabel"], outputs: ["tenantChange"] }, { kind: "component", type: SidebarNavItemRow, selector: "mf-sidebar-nav-item", inputs: ["item", "collapsed", "activeItemId", "expanded"], outputs: ["activate", "toggleExpand"] }, { kind: "component", type: SidebarUserMenu, selector: "mf-sidebar-user-menu", inputs: ["user", "collapsed", "noUserLabel"], outputs: ["profileClick"] }] });
|
|
441
495
|
}
|
|
442
496
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Sidebar, decorators: [{
|
|
443
497
|
type: Component,
|
|
444
|
-
args: [{ selector: 'mf-sidebar', exportAs: 'mfSidebar', host: { class: 'flex h-full' }, imports: [Icon, Tooltip, SidebarTenantSwitcher, SidebarNavItemRow, SidebarUserMenu], template: "<aside [class]=\"rootClasses()\" [attr.data-appearance]=\"appearance()\">\r\n <div class=\"flex h-full min-h-0 w-full flex-col overflow-hidden\">\r\n @if (
|
|
445
|
-
}], ctorParameters: () => [], propDecorators: { tenants: [{ type: i0.Input, args: [{ isSignal: true, alias: "tenants", required: false }] }], activeTenantId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTenantId", required: false }] }, { type: i0.Output, args: ["activeTenantIdChange"] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: true }] }], activeItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeItemId", required: false }] }, { type: i0.Output, args: ["activeItemIdChange"] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: false }] }], showUserMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUserMenu", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], showCollapseToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCollapseToggle", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], collapseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseLabel", required: false }] }], expandLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandLabel", required: false }] }], navAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "navAriaLabel", required: false }] }], tenantChange: [{ type: i0.Output, args: ["tenantChange"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], profileClick: [{ type: i0.Output, args: ["profileClick"] }], expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIds", required: false }] }, { type: i0.Output, args: ["expandedIdsChange"] }], autoExpandActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoExpandActive", required: false }] }] } });
|
|
498
|
+
args: [{ selector: 'mf-sidebar', exportAs: 'mfSidebar', host: { class: 'flex h-full' }, imports: [Icon, Tooltip, SidebarTenantSwitcher, SidebarNavItemRow, SidebarUserMenu], template: "<aside [class]=\"rootClasses()\" [attr.data-appearance]=\"appearance()\">\r\n <div class=\"flex h-full min-h-0 w-full flex-col overflow-hidden\">\r\n @if (showBrandRow()) {\r\n <!--\r\n Marka sat\u0131r\u0131. `brandPlacement=\"replace\"` (varsay\u0131lan): yaln\u0131z `tenants`\r\n bo\u015Fken \u2014 tenant kavram\u0131 olmayan t\u00FCketiciler switcher'\u0131n \"Kirac\u0131\r\n bulunamad\u0131\" bo\u015F-durumu yerine (kafa kar\u0131\u015Ft\u0131r\u0131c\u0131, ger\u00E7ek bir hata gibi\r\n okunur) kendi marka ba\u015Fl\u0131\u011F\u0131n\u0131 buraya projekte eder (\u00F6r. `<mf-brand />`).\r\n `\"above\"`: marka HER ZAMAN \u00FCstte, switcher (liste doluysa) alt\u0131nda \u2014\r\n landmark s\u0131ras\u0131 marka \u2192 \u015Firket de\u011Fi\u015Ftirici \u2192 `nav`.\r\n -->\r\n <div\r\n class=\"flex h-16 shrink-0 items-center gap-2 border-b border-border px-4 group-data-[appearance=brand]/sidebar:border-primary-800 group-data-[appearance=brand-light]/sidebar:border-primary-200\"\r\n [class.justify-center]=\"collapsed()\"\r\n >\r\n <ng-content select=\"[brand]\" />\r\n </div>\r\n }\r\n @if (tenants().length > 0) {\r\n <mf-sidebar-tenant-switcher\r\n [tenants]=\"tenants()\"\r\n [activeTenantId]=\"activeTenantId()\"\r\n [collapsed]=\"collapsed()\"\r\n (tenantChange)=\"onTenantSelect($event)\"\r\n />\r\n }\r\n\r\n <nav\r\n class=\"flex-1 overflow-x-hidden overflow-y-auto px-2 py-3\"\r\n [attr.aria-label]=\"effectiveNavAriaLabel()\"\r\n >\r\n <ul class=\"m-0 flex list-none flex-col gap-1 p-0\">\r\n @for (item of navItems(); track item.id) {\r\n <li>\r\n <mf-sidebar-nav-item\r\n [item]=\"item\"\r\n [collapsed]=\"collapsed()\"\r\n [activeItemId]=\"activeItemId()\"\r\n [expanded]=\"isExpanded(item.id)\"\r\n (activate)=\"onItemActivate($event)\"\r\n (toggleExpand)=\"onToggleExpand($event)\"\r\n />\r\n </li>\r\n }\r\n </ul>\r\n </nav>\r\n\r\n @if (showUserMenu()) {\r\n <div\r\n class=\"border-t border-border group-data-[appearance=brand]/sidebar:border-primary-800 group-data-[appearance=brand-light]/sidebar:border-primary-200\"\r\n ></div>\r\n\r\n <mf-sidebar-user-menu\r\n [user]=\"user()\"\r\n [collapsed]=\"collapsed()\"\r\n (profileClick)=\"profileClick.emit()\"\r\n />\r\n }\r\n </div>\r\n\r\n @if (showCollapseToggle()) {\r\n <button\r\n type=\"button\"\r\n class=\"absolute top-14 -end-3 z-10 flex h-6 w-6 appearance-none items-center justify-center rounded-full border border-hairline bg-chrome p-0 text-fg-subtle shadow-1 transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg active:scale-[0.99] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring group-data-[appearance=brand]/sidebar:bg-primary-900 group-data-[appearance=brand]/sidebar:text-primary-200 group-data-[appearance=brand]/sidebar:hover:bg-primary-800 group-data-[appearance=brand]/sidebar:hover:text-primary-50 group-data-[appearance=brand]/sidebar:focus-visible:outline-primary-300 group-data-[appearance=brand-light]/sidebar:bg-primary-100 group-data-[appearance=brand-light]/sidebar:text-primary-800 group-data-[appearance=brand-light]/sidebar:hover:bg-primary-200 group-data-[appearance=brand-light]/sidebar:hover:text-primary-900 group-data-[appearance=brand-light]/sidebar:focus-visible:outline-primary-700\"\r\n [mfTooltip]=\"collapsed() ? effectiveExpandLabel() : effectiveCollapseLabel()\"\r\n tooltipPosition=\"right\"\r\n [attr.aria-label]=\"collapsed() ? effectiveExpandLabel() : effectiveCollapseLabel()\"\r\n (click)=\"toggleCollapse()\"\r\n >\r\n <span mfIcon [size]=\"14\" class=\"rtl:-scale-x-100\">{{\r\n collapsed() ? 'chevron_right' : 'chevron_left'\r\n }}</span>\r\n </button>\r\n }\r\n</aside>\r\n" }]
|
|
499
|
+
}], ctorParameters: () => [], propDecorators: { tenants: [{ type: i0.Input, args: [{ isSignal: true, alias: "tenants", required: false }] }], activeTenantId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTenantId", required: false }] }, { type: i0.Output, args: ["activeTenantIdChange"] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: true }] }], activeItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeItemId", required: false }] }, { type: i0.Output, args: ["activeItemIdChange"] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: false }] }], showUserMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUserMenu", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], showCollapseToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCollapseToggle", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], brandPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandPlacement", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], collapseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseLabel", required: false }] }], expandLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandLabel", required: false }] }], navAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "navAriaLabel", required: false }] }], tenantChange: [{ type: i0.Output, args: ["tenantChange"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], profileClick: [{ type: i0.Output, args: ["profileClick"] }], expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIds", required: false }] }, { type: i0.Output, args: ["expandedIdsChange"] }], autoExpandActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoExpandActive", required: false }] }] } });
|
|
446
500
|
|
|
447
501
|
/**
|
|
448
502
|
* Generated bundle index. Do not edit.
|