@kirbydesign/extensions-angular 3.5.0 → 4.1.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/assets/spot-illustrations/invest-document.graph.bars.square.large.svg +5 -0
- package/fesm2022/kirbydesign-extensions-angular-image-banner.mjs +6 -6
- package/fesm2022/kirbydesign-extensions-angular-image-banner.mjs.map +1 -1
- package/fesm2022/kirbydesign-extensions-angular-localization.mjs +30 -30
- package/fesm2022/kirbydesign-extensions-angular-localization.mjs.map +1 -1
- package/fesm2022/kirbydesign-extensions-angular-sidebar-menu.mjs +235 -286
- package/fesm2022/kirbydesign-extensions-angular-sidebar-menu.mjs.map +1 -1
- package/fesm2022/kirbydesign-extensions-angular-skeleton-loader.mjs +3 -3
- package/fesm2022/kirbydesign-extensions-angular-skeleton-loader.mjs.map +1 -1
- package/fesm2022/kirbydesign-extensions-angular-spot-illustration.mjs +4 -3
- package/fesm2022/kirbydesign-extensions-angular-spot-illustration.mjs.map +1 -1
- package/package.json +17 -18
- package/types/kirbydesign-extensions-angular-sidebar-menu.d.ts +112 -0
- package/{spot-illustration/index.d.ts → types/kirbydesign-extensions-angular-spot-illustration.d.ts} +2 -0
- package/sidebar-menu/index.d.ts +0 -86
- /package/{image-banner/index.d.ts → types/kirbydesign-extensions-angular-image-banner.d.ts} +0 -0
- /package/{localization/index.d.ts → types/kirbydesign-extensions-angular-localization.d.ts} +0 -0
- /package/{skeleton-loader/index.d.ts → types/kirbydesign-extensions-angular-skeleton-loader.d.ts} +0 -0
- /package/{index.d.ts → types/kirbydesign-extensions-angular.d.ts} +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed, Component, signal, Injectable, inject, ElementRef, forwardRef, ChangeDetectionStrategy, afterNextRender, output, Directive,
|
|
2
|
+
import { input, computed, Component, signal, Injectable, inject, ElementRef, forwardRef, ChangeDetectionStrategy, afterNextRender, output, Directive, EventEmitter, effect, Output, Input, NgModule } from '@angular/core';
|
|
3
3
|
import { DividerComponent } from '@kirbydesign/designsystem/divider';
|
|
4
4
|
import { RouterLink } from '@angular/router';
|
|
5
5
|
import { ToggleButtonComponent } from '@kirbydesign/designsystem/toggle-button';
|
|
@@ -7,8 +7,8 @@ import { ButtonComponent } from '@kirbydesign/designsystem/button';
|
|
|
7
7
|
import * as i1 from '@kirbydesign/designsystem/icon';
|
|
8
8
|
import { IconModule, IconComponent } from '@kirbydesign/designsystem/icon';
|
|
9
9
|
import { BadgeComponent } from '@kirbydesign/designsystem/badge';
|
|
10
|
-
import { trigger, transition, style, animate, AUTO_STYLE } from '@angular/animations';
|
|
11
10
|
import { Subject, debounceTime } from 'rxjs';
|
|
11
|
+
import { trigger, transition, style, animate, AUTO_STYLE } from '@angular/animations';
|
|
12
12
|
import { distinctUntilChanged } from 'rxjs/operators';
|
|
13
13
|
|
|
14
14
|
/**
|
|
@@ -34,84 +34,167 @@ class MenuItemComponent {
|
|
|
34
34
|
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
|
|
35
35
|
this.iconSize = computed(() => (this.size() === 'lg' ? 'sm' : 'xs'), ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
|
|
36
36
|
}
|
|
37
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
38
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
37
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
38
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MenuItemComponent, isStandalone: true, selector: "a[kirby-x-menu-item],button[kirby-x-menu-item]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "\"item\" + id()", "class": "size()" } }, ngImport: i0, template: "<div class=\"menu-item-start {{ size() }}\">\n @if (icon(); as icon) {\n <kirby-icon [size]=\"iconSize()\" [name]=\"icon\"></kirby-icon>\n }\n</div>\n\n<div class=\"menu-item-content\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"menu-item-end\">\n <ng-content select=\"[slot='end']\"></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-grow:1;align-items:center;align-self:stretch;box-sizing:border-box;min-height:32px;border-radius:8px;padding:4px 12px;gap:8px;border:none;background:inherit;font:inherit;color:inherit;text-decoration:none;cursor:pointer}:host.lg{min-height:40px}:host:hover{background:var(--menuitem-hover-background-color, var(--kirby-inputs-background-color-hover))}:host:active{background:var(--menuitem-active-background-color, var(--kirby-inputs-background-color-active))}:host:focus-visible{outline:none}@media(hover:hover)and (pointer:fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}.menu-item-start{display:flex;align-items:center;justify-content:center;flex-shrink:0}.menu-item-start.lg,.menu-item-start.md{width:24px;height:24px}.menu-item-start.sm,.menu-item-start.xs{width:16px;height:16px}.menu-item-start.sm{padding-left:32px}.menu-item-start.xs{padding-left:56px}.menu-item-content{display:flex;flex-grow:1;align-items:center;text-align:left;word-break:break-word;font-size:16px;line-height:24px}.menu-item-end{display:inline-flex;min-width:24px;align-items:center;justify-content:center;gap:8px}.menu-item-end:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: IconModule }, { kind: "component", type: i1.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }] }); }
|
|
39
39
|
}
|
|
40
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
40
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MenuItemComponent, decorators: [{
|
|
41
41
|
type: Component,
|
|
42
42
|
args: [{ selector: 'a[kirby-x-menu-item],button[kirby-x-menu-item]', host: {
|
|
43
43
|
'[attr.id]': '"item" + id()',
|
|
44
44
|
'[class]': 'size()',
|
|
45
|
-
}, imports: [IconModule
|
|
45
|
+
}, imports: [IconModule], template: "<div class=\"menu-item-start {{ size() }}\">\n @if (icon(); as icon) {\n <kirby-icon [size]=\"iconSize()\" [name]=\"icon\"></kirby-icon>\n }\n</div>\n\n<div class=\"menu-item-content\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"menu-item-end\">\n <ng-content select=\"[slot='end']\"></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-grow:1;align-items:center;align-self:stretch;box-sizing:border-box;min-height:32px;border-radius:8px;padding:4px 12px;gap:8px;border:none;background:inherit;font:inherit;color:inherit;text-decoration:none;cursor:pointer}:host.lg{min-height:40px}:host:hover{background:var(--menuitem-hover-background-color, var(--kirby-inputs-background-color-hover))}:host:active{background:var(--menuitem-active-background-color, var(--kirby-inputs-background-color-active))}:host:focus-visible{outline:none}@media(hover:hover)and (pointer:fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}.menu-item-start{display:flex;align-items:center;justify-content:center;flex-shrink:0}.menu-item-start.lg,.menu-item-start.md{width:24px;height:24px}.menu-item-start.sm,.menu-item-start.xs{width:16px;height:16px}.menu-item-start.sm{padding-left:32px}.menu-item-start.xs{padding-left:56px}.menu-item-content{display:flex;flex-grow:1;align-items:center;text-align:left;word-break:break-word;font-size:16px;line-height:24px}.menu-item-end{display:inline-flex;min-width:24px;align-items:center;justify-content:center;gap:8px}.menu-item-end:empty{display:none}\n"] }]
|
|
46
46
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
|
|
47
47
|
|
|
48
48
|
class MenuStateService {
|
|
49
|
-
#
|
|
49
|
+
#menuItems = signal([], ...(ngDevMode ? [{ debugName: "#menuItems" }] : []));
|
|
50
50
|
#selectedItem = signal(undefined, ...(ngDevMode ? [{ debugName: "#selectedItem" }] : []));
|
|
51
|
-
#
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
|
|
51
|
+
#expandedItems = signal(new Set(), ...(ngDevMode ? [{ debugName: "#expandedItems" }] : []));
|
|
52
|
+
#checkedItems = signal(new Set(), ...(ngDevMode ? [{ debugName: "#checkedItems" }] : []));
|
|
53
|
+
#autoCollapse = signal(false, ...(ngDevMode ? [{ debugName: "#autoCollapse" }] : []));
|
|
54
|
+
#animationsDisabled = signal(false, ...(ngDevMode ? [{ debugName: "#animationsDisabled" }] : []));
|
|
55
|
+
#expandEvents = new Subject();
|
|
56
|
+
#checkEvents = new Subject();
|
|
57
|
+
get menuItems() {
|
|
58
|
+
return this.#menuItems.asReadonly();
|
|
59
|
+
}
|
|
60
|
+
set menuItems(items) {
|
|
61
|
+
this.#menuItems.set(items);
|
|
57
62
|
}
|
|
58
63
|
get selectedItem() {
|
|
59
|
-
return this.#selectedItem;
|
|
64
|
+
return this.#selectedItem.asReadonly();
|
|
65
|
+
}
|
|
66
|
+
set selectedItem(id) {
|
|
67
|
+
this.#selectedItem.set(id);
|
|
68
|
+
}
|
|
69
|
+
get expandedItems() {
|
|
70
|
+
return this.#expandedItems.asReadonly();
|
|
71
|
+
}
|
|
72
|
+
set expandedItems(ids) {
|
|
73
|
+
this.#expandedItems.set(ids);
|
|
74
|
+
}
|
|
75
|
+
get checkedItems() {
|
|
76
|
+
return this.#checkedItems.asReadonly();
|
|
77
|
+
}
|
|
78
|
+
set checkedItems(ids) {
|
|
79
|
+
this.#checkedItems.set(ids);
|
|
80
|
+
}
|
|
81
|
+
set autoCollapse(enabled) {
|
|
82
|
+
this.#autoCollapse.set(enabled);
|
|
83
|
+
}
|
|
84
|
+
get animationsDisabled() {
|
|
85
|
+
return this.#animationsDisabled.asReadonly();
|
|
86
|
+
}
|
|
87
|
+
set animationsDisabled(disabled) {
|
|
88
|
+
this.#animationsDisabled.set(disabled);
|
|
60
89
|
}
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
90
|
+
get expandEvents() {
|
|
91
|
+
return this.#expandEvents.asObservable();
|
|
92
|
+
}
|
|
93
|
+
get checkEvents() {
|
|
94
|
+
return this.#checkEvents.asObservable();
|
|
95
|
+
}
|
|
96
|
+
expandItem(id) {
|
|
97
|
+
this.#expandEvents.next({ id, isExpanded: true });
|
|
98
|
+
if (this.#autoCollapse()) {
|
|
99
|
+
this.#expandedItems.set(this.#findAncestors(id));
|
|
100
|
+
return;
|
|
64
101
|
}
|
|
102
|
+
this.#expandedItems.update((items) => {
|
|
103
|
+
items.add(id);
|
|
104
|
+
return new Set(items);
|
|
105
|
+
});
|
|
106
|
+
}
|
|
107
|
+
collapseItem(id) {
|
|
108
|
+
this.#expandEvents.next({ id, isExpanded: false });
|
|
109
|
+
this.#expandedItems.update((items) => {
|
|
110
|
+
items.delete(id);
|
|
111
|
+
return new Set(items);
|
|
112
|
+
});
|
|
65
113
|
}
|
|
66
|
-
|
|
67
|
-
|
|
114
|
+
checkItem(id) {
|
|
115
|
+
this.#checkEvents.next({ id, isChecked: true });
|
|
116
|
+
this.#checkedItems.update((items) => {
|
|
117
|
+
items.add(id);
|
|
118
|
+
return new Set(items);
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
uncheckItem(id) {
|
|
122
|
+
this.#checkEvents.next({ id, isChecked: false });
|
|
123
|
+
this.#checkedItems.update((items) => {
|
|
124
|
+
items.delete(id);
|
|
125
|
+
return new Set(items);
|
|
126
|
+
});
|
|
68
127
|
}
|
|
69
|
-
|
|
70
|
-
this.#
|
|
128
|
+
#findAncestors(id) {
|
|
129
|
+
return recursivelyFindAncestors(this.#menuItems(), id) ?? new Set();
|
|
71
130
|
}
|
|
72
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
73
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
131
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MenuStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
132
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MenuStateService, providedIn: 'root' }); }
|
|
74
133
|
}
|
|
75
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
134
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MenuStateService, decorators: [{
|
|
76
135
|
type: Injectable,
|
|
77
136
|
args: [{ providedIn: 'root' }]
|
|
78
137
|
}] });
|
|
138
|
+
function recursivelyFindAncestors(items, id) {
|
|
139
|
+
for (const item of items) {
|
|
140
|
+
if (item.id === id) {
|
|
141
|
+
return new Set([item.id]);
|
|
142
|
+
}
|
|
143
|
+
if (item.type === 'submenu') {
|
|
144
|
+
const foundAncestors = recursivelyFindAncestors(item.children, id);
|
|
145
|
+
if (foundAncestors) {
|
|
146
|
+
foundAncestors.add(item.id);
|
|
147
|
+
return foundAncestors;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
return undefined;
|
|
152
|
+
}
|
|
79
153
|
|
|
80
154
|
class MenuAnchorItemComponent {
|
|
81
155
|
constructor() {
|
|
82
156
|
this.item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
|
|
83
157
|
this.size = input.required(...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
84
|
-
this.#
|
|
158
|
+
this.#stateService = inject(MenuStateService);
|
|
159
|
+
this.#isSelected = computed(() => this.item().id === this.#stateService.selectedItem(), ...(ngDevMode ? [{ debugName: "#isSelected" }] : []));
|
|
160
|
+
this.#isChecked = computed(() => {
|
|
161
|
+
const id = this.item().id;
|
|
162
|
+
const checkedItems = this.#stateService.checkedItems();
|
|
163
|
+
return checkedItems.has(id);
|
|
164
|
+
}, ...(ngDevMode ? [{ debugName: "#isChecked" }] : []));
|
|
85
165
|
this.vm = {
|
|
86
|
-
|
|
87
|
-
id: computed(() => this.item().id),
|
|
166
|
+
item: this.item,
|
|
88
167
|
size: this.size,
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
icon: computed(() => this.item().icon),
|
|
92
|
-
isSelected: computed(() => this.item().selected ?? false),
|
|
93
|
-
title: computed(() => this.item().title ?? ''),
|
|
168
|
+
isSelected: this.#isSelected,
|
|
169
|
+
isChecked: this.#isChecked,
|
|
94
170
|
selectItem: this.#selectItem.bind(this),
|
|
95
171
|
checkItem: this.#checkItem.bind(this),
|
|
96
172
|
};
|
|
97
173
|
}
|
|
98
|
-
#
|
|
174
|
+
#stateService;
|
|
175
|
+
#isSelected;
|
|
176
|
+
#isChecked;
|
|
99
177
|
#selectItem() {
|
|
100
|
-
this.#
|
|
178
|
+
this.#stateService.selectedItem = this.item().id;
|
|
101
179
|
}
|
|
102
180
|
#checkItem(checked) {
|
|
103
|
-
|
|
181
|
+
if (checked) {
|
|
182
|
+
this.#stateService.checkItem(this.item().id);
|
|
183
|
+
}
|
|
184
|
+
else {
|
|
185
|
+
this.#stateService.uncheckItem(this.item().id);
|
|
186
|
+
}
|
|
104
187
|
}
|
|
105
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
106
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
188
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MenuAnchorItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
189
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MenuAnchorItemComponent, isStandalone: true, selector: "li[kirby-x-menu-anchor-item]", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.selected": "vm.isSelected()", "class.checked": "vm.isChecked()", "class.has-toggle": "!!vm.item().toggle", "class.has-badge": "!!vm.item().badge" } }, ngImport: i0, template: "@let item = vm.item();\n@switch (item.type) {\n @case ('action') {\n <a\n kirby-x-menu-item\n [class.selected]=\"vm.isSelected()\"\n [size]=\"vm.size()\"\n [id]=\"item.id\"\n [icon]=\"item.icon\"\n [attr.href]=\"item.href\"\n (click)=\"$event.preventDefault(); vm.selectItem()\"\n (keydown.enter)=\"$event.preventDefault(); vm.selectItem()\"\n >\n {{ item.title }}\n @if (item.badge) {\n <kirby-badge\n slot=\"end\"\n class=\"item-badge\"\n [themeColor]=\"item.badge.themeColor ?? 'primary'\"\n >\n {{ item.badge.value }}\n </kirby-badge>\n }\n @if (item.toggle) {\n <div slot=\"end\" class=\"toggle-spacer\" [class.unchecked]=\"!vm.isChecked()\"></div>\n }\n </a>\n }\n @case ('router-link') {\n <a\n kirby-x-menu-item\n [class.selected]=\"vm.isSelected()\"\n [size]=\"vm.size()\"\n [id]=\"item.id\"\n [icon]=\"item.icon\"\n [routerLink]=\"item.route\"\n [queryParams]=\"item.queryParams\"\n [skipLocationChange]=\"item.skipLocationChange\"\n [replaceUrl]=\"item.replaceUrl\"\n (click)=\"vm.selectItem()\"\n (keydown.enter)=\"vm.selectItem()\"\n >\n {{ item.title }}\n @if (item.badge) {\n <kirby-badge\n slot=\"end\"\n class=\"item-badge\"\n [themeColor]=\"item.badge.themeColor ?? 'primary'\"\n >\n {{ item.badge.value }}\n </kirby-badge>\n }\n @if (item.toggle) {\n <div slot=\"end\" class=\"toggle-spacer\" [class.unchecked]=\"!vm.isChecked()\"></div>\n }\n </a>\n }\n @case ('external-link') {\n <a\n kirby-x-menu-item\n [class.selected]=\"vm.isSelected()\"\n [size]=\"vm.size()\"\n [id]=\"item.id\"\n [icon]=\"item.icon\"\n [attr.href]=\"item.url\"\n [attr.target]=\"item.target\"\n (click)=\"vm.selectItem()\"\n (keydown.enter)=\"vm.selectItem()\"\n >\n {{ item.title }}\n @if (item.badge) {\n <kirby-badge\n slot=\"end\"\n class=\"item-badge\"\n [themeColor]=\"item.badge.themeColor ?? 'primary'\"\n >\n {{ item.badge.value }}\n </kirby-badge>\n }\n @if (item.toggle) {\n <div slot=\"end\" class=\"toggle-spacer\" [class.unchecked]=\"!vm.isChecked()\"></div>\n }\n </a>\n }\n}\n\n@if (item.toggle) {\n <kirby-toggle-button\n class=\"toggle-button-wrapper\"\n [checked]=\"vm.isChecked()\"\n (checkChanged)=\"vm.checkItem($event)\"\n >\n <button\n kirby-button\n unchecked\n size=\"xs\"\n attentionLevel=\"3\"\n tabindex=\"-1\"\n [noDecoration]=\"true\"\n class=\"toggle-button toggle-button-unchecked\"\n >\n <kirby-icon size=\"xs\" [name]=\"item.toggle.uncheckedIcon\"></kirby-icon>\n </button>\n <button\n kirby-button\n checked\n size=\"xs\"\n attentionLevel=\"3\"\n tabindex=\"-1\"\n [noDecoration]=\"true\"\n class=\"toggle-button toggle-button-checked\"\n >\n <kirby-icon size=\"xs\" [name]=\"item.toggle.checkedIcon\"></kirby-icon>\n </button>\n </kirby-toggle-button>\n}\n", styles: [":host{display:flex;flex-direction:row;align-items:center;position:relative}:host.selected{color:var(--menuitem-selected-color, var(--kirby-primary-contrast))}:host:not(.selected):hover a{background:var(--menuitem-hover-background-color, var(--kirby-inputs-background-color-hover))}:host:not(.selected):active a{background:var(--menuitem-active-background-color, var(--kirby-inputs-background-color-active))}.selected,.selected:hover,.selected:active,.selected:focus-visible{background:var(--menuitem-selected-background-color, var(--kirby-primary));font-weight:700}.item-badge{display:inline-flex}.toggle-spacer{width:24px}.toggle-spacer.unchecked{display:none}:host.has-toggle:not(.checked):hover .item-badge,:host.has-toggle:not(.checked):active .item-badge,:host.has-toggle:not(.checked):has(a:focus-visible) .item-badge,:host.has-toggle:not(.checked):has(.toggle-button-unchecked:focus-visible) .item-badge{display:none}:host.has-toggle:not(.checked):hover .toggle-spacer.unchecked,:host.has-toggle:not(.checked):active .toggle-spacer.unchecked,:host.has-toggle:not(.checked):has(a:focus-visible) .toggle-spacer.unchecked,:host.has-toggle:not(.checked):has(.toggle-button-unchecked:focus-visible) .toggle-spacer.unchecked{display:initial}.toggle-button-wrapper{display:inline-flex;position:absolute;right:12px}.toggle-button{margin:0;--kirby-button-color: inherit}.toggle-button-unchecked{transition:opacity 0ms}.toggle-button-unchecked:not(:focus-visible){opacity:0}:host:hover .toggle-button-unchecked,:host:active .toggle-button-unchecked,:host:has(a:focus-visible) .toggle-button-unchecked{opacity:1}\n"], dependencies: [{ kind: "component", type: MenuItemComponent, selector: "a[kirby-x-menu-item],button[kirby-x-menu-item]", inputs: ["id", "size", "icon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ToggleButtonComponent, selector: "kirby-toggle-button", inputs: ["checked"], outputs: ["checkChanged"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "component", type: BadgeComponent, selector: "kirby-badge", inputs: ["text", "size"] }] }); }
|
|
107
190
|
}
|
|
108
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
191
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MenuAnchorItemComponent, decorators: [{
|
|
109
192
|
type: Component,
|
|
110
193
|
args: [{ selector: 'li[kirby-x-menu-anchor-item]', host: {
|
|
111
194
|
'[class.selected]': 'vm.isSelected()',
|
|
112
|
-
'[class.checked]': 'vm.
|
|
113
|
-
'[class.has-toggle]': '!!vm.
|
|
114
|
-
'[class.has-badge]': '!!vm.
|
|
195
|
+
'[class.checked]': 'vm.isChecked()',
|
|
196
|
+
'[class.has-toggle]': '!!vm.item().toggle',
|
|
197
|
+
'[class.has-badge]': '!!vm.item().badge',
|
|
115
198
|
}, imports: [
|
|
116
199
|
MenuItemComponent,
|
|
117
200
|
RouterLink,
|
|
@@ -119,34 +202,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
119
202
|
ButtonComponent,
|
|
120
203
|
IconComponent,
|
|
121
204
|
BadgeComponent,
|
|
122
|
-
], template: "@let
|
|
205
|
+
], template: "@let item = vm.item();\n@switch (item.type) {\n @case ('action') {\n <a\n kirby-x-menu-item\n [class.selected]=\"vm.isSelected()\"\n [size]=\"vm.size()\"\n [id]=\"item.id\"\n [icon]=\"item.icon\"\n [attr.href]=\"item.href\"\n (click)=\"$event.preventDefault(); vm.selectItem()\"\n (keydown.enter)=\"$event.preventDefault(); vm.selectItem()\"\n >\n {{ item.title }}\n @if (item.badge) {\n <kirby-badge\n slot=\"end\"\n class=\"item-badge\"\n [themeColor]=\"item.badge.themeColor ?? 'primary'\"\n >\n {{ item.badge.value }}\n </kirby-badge>\n }\n @if (item.toggle) {\n <div slot=\"end\" class=\"toggle-spacer\" [class.unchecked]=\"!vm.isChecked()\"></div>\n }\n </a>\n }\n @case ('router-link') {\n <a\n kirby-x-menu-item\n [class.selected]=\"vm.isSelected()\"\n [size]=\"vm.size()\"\n [id]=\"item.id\"\n [icon]=\"item.icon\"\n [routerLink]=\"item.route\"\n [queryParams]=\"item.queryParams\"\n [skipLocationChange]=\"item.skipLocationChange\"\n [replaceUrl]=\"item.replaceUrl\"\n (click)=\"vm.selectItem()\"\n (keydown.enter)=\"vm.selectItem()\"\n >\n {{ item.title }}\n @if (item.badge) {\n <kirby-badge\n slot=\"end\"\n class=\"item-badge\"\n [themeColor]=\"item.badge.themeColor ?? 'primary'\"\n >\n {{ item.badge.value }}\n </kirby-badge>\n }\n @if (item.toggle) {\n <div slot=\"end\" class=\"toggle-spacer\" [class.unchecked]=\"!vm.isChecked()\"></div>\n }\n </a>\n }\n @case ('external-link') {\n <a\n kirby-x-menu-item\n [class.selected]=\"vm.isSelected()\"\n [size]=\"vm.size()\"\n [id]=\"item.id\"\n [icon]=\"item.icon\"\n [attr.href]=\"item.url\"\n [attr.target]=\"item.target\"\n (click)=\"vm.selectItem()\"\n (keydown.enter)=\"vm.selectItem()\"\n >\n {{ item.title }}\n @if (item.badge) {\n <kirby-badge\n slot=\"end\"\n class=\"item-badge\"\n [themeColor]=\"item.badge.themeColor ?? 'primary'\"\n >\n {{ item.badge.value }}\n </kirby-badge>\n }\n @if (item.toggle) {\n <div slot=\"end\" class=\"toggle-spacer\" [class.unchecked]=\"!vm.isChecked()\"></div>\n }\n </a>\n }\n}\n\n@if (item.toggle) {\n <kirby-toggle-button\n class=\"toggle-button-wrapper\"\n [checked]=\"vm.isChecked()\"\n (checkChanged)=\"vm.checkItem($event)\"\n >\n <button\n kirby-button\n unchecked\n size=\"xs\"\n attentionLevel=\"3\"\n tabindex=\"-1\"\n [noDecoration]=\"true\"\n class=\"toggle-button toggle-button-unchecked\"\n >\n <kirby-icon size=\"xs\" [name]=\"item.toggle.uncheckedIcon\"></kirby-icon>\n </button>\n <button\n kirby-button\n checked\n size=\"xs\"\n attentionLevel=\"3\"\n tabindex=\"-1\"\n [noDecoration]=\"true\"\n class=\"toggle-button toggle-button-checked\"\n >\n <kirby-icon size=\"xs\" [name]=\"item.toggle.checkedIcon\"></kirby-icon>\n </button>\n </kirby-toggle-button>\n}\n", styles: [":host{display:flex;flex-direction:row;align-items:center;position:relative}:host.selected{color:var(--menuitem-selected-color, var(--kirby-primary-contrast))}:host:not(.selected):hover a{background:var(--menuitem-hover-background-color, var(--kirby-inputs-background-color-hover))}:host:not(.selected):active a{background:var(--menuitem-active-background-color, var(--kirby-inputs-background-color-active))}.selected,.selected:hover,.selected:active,.selected:focus-visible{background:var(--menuitem-selected-background-color, var(--kirby-primary));font-weight:700}.item-badge{display:inline-flex}.toggle-spacer{width:24px}.toggle-spacer.unchecked{display:none}:host.has-toggle:not(.checked):hover .item-badge,:host.has-toggle:not(.checked):active .item-badge,:host.has-toggle:not(.checked):has(a:focus-visible) .item-badge,:host.has-toggle:not(.checked):has(.toggle-button-unchecked:focus-visible) .item-badge{display:none}:host.has-toggle:not(.checked):hover .toggle-spacer.unchecked,:host.has-toggle:not(.checked):active .toggle-spacer.unchecked,:host.has-toggle:not(.checked):has(a:focus-visible) .toggle-spacer.unchecked,:host.has-toggle:not(.checked):has(.toggle-button-unchecked:focus-visible) .toggle-spacer.unchecked{display:initial}.toggle-button-wrapper{display:inline-flex;position:absolute;right:12px}.toggle-button{margin:0;--kirby-button-color: inherit}.toggle-button-unchecked{transition:opacity 0ms}.toggle-button-unchecked:not(:focus-visible){opacity:0}:host:hover .toggle-button-unchecked,:host:active .toggle-button-unchecked,:host:has(a:focus-visible) .toggle-button-unchecked{opacity:1}\n"] }]
|
|
123
206
|
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }] } });
|
|
124
|
-
function determineLinkType(item) {
|
|
125
|
-
if (item.isAction) {
|
|
126
|
-
return {
|
|
127
|
-
type: 'action',
|
|
128
|
-
url: item.link?.url ?? '',
|
|
129
|
-
};
|
|
130
|
-
}
|
|
131
|
-
if (item.link?.relativeLink) {
|
|
132
|
-
return {
|
|
133
|
-
type: 'router-link',
|
|
134
|
-
target: item.link.target ?? '_self',
|
|
135
|
-
route: item.link.relativeLink,
|
|
136
|
-
queryParams: item.link.queryParams,
|
|
137
|
-
skipLocationChange: item.skipLocationChange ?? false,
|
|
138
|
-
replaceUrl: item.replaceUrl ?? false,
|
|
139
|
-
};
|
|
140
|
-
}
|
|
141
|
-
if (item.link?.url) {
|
|
142
|
-
return {
|
|
143
|
-
type: 'external-link',
|
|
144
|
-
url: item.link.url,
|
|
145
|
-
target: item.link.target ?? '_self',
|
|
146
|
-
};
|
|
147
|
-
}
|
|
148
|
-
return undefined;
|
|
149
|
-
}
|
|
150
207
|
|
|
151
208
|
/**
|
|
152
209
|
* Ensures the element top is not smaller than the scroll container top.
|
|
@@ -181,10 +238,13 @@ class MenuSubmenuItemComponent {
|
|
|
181
238
|
constructor() {
|
|
182
239
|
this.item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
|
|
183
240
|
this.size = input.required(...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
184
|
-
this.disableAnimations = input.required(...(ngDevMode ? [{ debugName: "disableAnimations" }] : []));
|
|
185
241
|
this.#element = inject(ElementRef).nativeElement;
|
|
186
|
-
this.#
|
|
187
|
-
this.#isExpanded = computed(() =>
|
|
242
|
+
this.#stateService = inject(MenuStateService);
|
|
243
|
+
this.#isExpanded = computed(() => {
|
|
244
|
+
const id = this.item().id;
|
|
245
|
+
const expandedItems = this.#stateService.expandedItems();
|
|
246
|
+
return expandedItems.has(id);
|
|
247
|
+
}, ...(ngDevMode ? [{ debugName: "#isExpanded" }] : []));
|
|
188
248
|
this.#submenuSize = computed(() => {
|
|
189
249
|
switch (this.size()) {
|
|
190
250
|
case 'lg':
|
|
@@ -196,111 +256,101 @@ class MenuSubmenuItemComponent {
|
|
|
196
256
|
}
|
|
197
257
|
}, ...(ngDevMode ? [{ debugName: "#submenuSize" }] : []));
|
|
198
258
|
this.vm = {
|
|
199
|
-
|
|
200
|
-
submenuId: computed(() => `item-${this.item().id}-content`),
|
|
201
|
-
title: computed(() => this.item().title ?? ''),
|
|
259
|
+
item: this.item,
|
|
202
260
|
size: this.size,
|
|
203
|
-
icon: computed(() => this.item().icon),
|
|
204
261
|
isExpanded: this.#isExpanded,
|
|
205
|
-
|
|
262
|
+
submenuId: computed(() => `item-${this.item().id}-content`),
|
|
206
263
|
submenuSize: this.#submenuSize,
|
|
207
|
-
|
|
264
|
+
animationsDisabled: this.#stateService.animationsDisabled,
|
|
208
265
|
toggleSubmenu: this.#toggleSubmenu.bind(this),
|
|
209
266
|
};
|
|
210
267
|
}
|
|
211
268
|
#element;
|
|
212
|
-
#
|
|
269
|
+
#stateService;
|
|
213
270
|
#isExpanded;
|
|
214
271
|
#submenuSize;
|
|
215
272
|
#toggleSubmenu() {
|
|
216
273
|
const button = this.#element.querySelector('button[kirby-x-menu-item]');
|
|
217
274
|
const scrollContainer = this.#element.closest('.sidebar-content');
|
|
218
275
|
if (button && scrollContainer) {
|
|
219
|
-
console.log('Ensuring submenu item is in view');
|
|
220
276
|
ensureInView(scrollContainer, button, 400);
|
|
221
277
|
}
|
|
222
|
-
this.#
|
|
278
|
+
if (this.#isExpanded()) {
|
|
279
|
+
this.#stateService.collapseItem(this.item().id);
|
|
280
|
+
}
|
|
281
|
+
else {
|
|
282
|
+
this.#stateService.expandItem(this.item().id);
|
|
283
|
+
}
|
|
223
284
|
}
|
|
224
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
225
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
285
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MenuSubmenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
286
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MenuSubmenuItemComponent, isStandalone: true, selector: "li[kirby-x-menu-submenu-item]", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let item = vm.item();\n<button\n kirby-x-menu-item\n type=\"button\"\n class=\"submenu-toggle\"\n [size]=\"vm.size()\"\n [id]=\"item.id\"\n [icon]=\"item.icon\"\n [attr.aria-controls]=\"vm.submenuId()\"\n [attr.aria-expanded]=\"vm.isExpanded()\"\n (click)=\"vm.toggleSubmenu()\"\n>\n {{ item.title }}\n <kirby-icon\n slot=\"end\"\n name=\"arrow-more\"\n class=\"disclosure\"\n [class.rotate]=\"vm.isExpanded()\"\n ></kirby-icon>\n</button>\n@if (vm.isExpanded()) {\n <ul\n kirby-x-menu-item-list\n [items]=\"item.children\"\n [size]=\"vm.submenuSize()\"\n [id]=\"vm.submenuId()\"\n [@dropDownMenu]\n [@.disabled]=\"vm.animationsDisabled()\"\n ></ul>\n}\n", styles: [":host{display:flex;flex-direction:column}.submenu-toggle{width:100%}.submenu-toggle[aria-expanded=true]{font-weight:700}.disclosure{transition:transform .2s}.disclosure.rotate{transform:rotate(90deg)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => MenuItemComponent), selector: "a[kirby-x-menu-item],button[kirby-x-menu-item]", inputs: ["id", "size", "icon"] }, { kind: "component", type: i0.forwardRef(() => IconComponent), selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "component", type: i0.forwardRef(() => MenuItemListComponent), selector: "ul[kirby-x-menu-item-list]", inputs: ["items", "size", "id"] }], animations: [DropDownAnimation] }); }
|
|
226
287
|
}
|
|
227
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
288
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MenuSubmenuItemComponent, decorators: [{
|
|
228
289
|
type: Component,
|
|
229
|
-
args: [{ selector: 'li[kirby-x-menu-submenu-item]', animations: [DropDownAnimation], imports: [MenuItemComponent, IconComponent, forwardRef(() => MenuItemListComponent)], template: "<button\n kirby-x-menu-item\n type=\"button\"\n class=\"submenu-toggle\"\n [
|
|
230
|
-
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }]
|
|
290
|
+
args: [{ selector: 'li[kirby-x-menu-submenu-item]', animations: [DropDownAnimation], imports: [MenuItemComponent, IconComponent, forwardRef(() => MenuItemListComponent)], template: "@let item = vm.item();\n<button\n kirby-x-menu-item\n type=\"button\"\n class=\"submenu-toggle\"\n [size]=\"vm.size()\"\n [id]=\"item.id\"\n [icon]=\"item.icon\"\n [attr.aria-controls]=\"vm.submenuId()\"\n [attr.aria-expanded]=\"vm.isExpanded()\"\n (click)=\"vm.toggleSubmenu()\"\n>\n {{ item.title }}\n <kirby-icon\n slot=\"end\"\n name=\"arrow-more\"\n class=\"disclosure\"\n [class.rotate]=\"vm.isExpanded()\"\n ></kirby-icon>\n</button>\n@if (vm.isExpanded()) {\n <ul\n kirby-x-menu-item-list\n [items]=\"item.children\"\n [size]=\"vm.submenuSize()\"\n [id]=\"vm.submenuId()\"\n [@dropDownMenu]\n [@.disabled]=\"vm.animationsDisabled()\"\n ></ul>\n}\n", styles: [":host{display:flex;flex-direction:column}.submenu-toggle{width:100%}.submenu-toggle[aria-expanded=true]{font-weight:700}.disclosure{transition:transform .2s}.disclosure.rotate{transform:rotate(90deg)}\n"] }]
|
|
291
|
+
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }] } });
|
|
231
292
|
|
|
232
293
|
class MenuItemListComponent {
|
|
233
294
|
constructor() {
|
|
234
295
|
this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
235
296
|
this.size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
236
297
|
this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
|
|
237
|
-
this.disableAnimations = input(false, ...(ngDevMode ? [{ debugName: "disableAnimations" }] : []));
|
|
238
298
|
this.vm = {
|
|
239
299
|
id: this.id,
|
|
240
300
|
size: this.size,
|
|
241
|
-
items:
|
|
242
|
-
disableAnimations: this.disableAnimations,
|
|
301
|
+
items: this.items,
|
|
243
302
|
};
|
|
244
303
|
}
|
|
245
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
246
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
304
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MenuItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
305
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MenuItemListComponent, isStandalone: true, selector: "ul[kirby-x-menu-item-list]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "vm.id()", "class": "vm.size()" } }, ngImport: i0, template: "@for (item of vm.items(); track item.id) {\n @switch (item.type) {\n @case ('divider') {\n <kirby-divider aria-hidden=\"true\"></kirby-divider>\n }\n @case ('submenu') {\n <li kirby-x-menu-submenu-item [item]=\"item\" [size]=\"vm.size()\"></li>\n }\n @default {\n <li kirby-x-menu-anchor-item [item]=\"item\" [size]=\"vm.size()\"></li>\n }\n }\n}\n", styles: [":host{display:flex;flex-direction:column;margin:0;padding-left:0;padding-right:0;list-style-type:none}kirby-divider{display:flex;background:var(--kirby-white-overlay-20);margin:8px 0}li{margin-block-start:0!important}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => DividerComponent), selector: "kirby-divider", inputs: ["hasMargin"] }, { kind: "component", type: i0.forwardRef(() => MenuAnchorItemComponent), selector: "li[kirby-x-menu-anchor-item]", inputs: ["item", "size"] }, { kind: "component", type: i0.forwardRef(() => MenuSubmenuItemComponent), selector: "li[kirby-x-menu-submenu-item]", inputs: ["item", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
247
306
|
}
|
|
248
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
307
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MenuItemListComponent, decorators: [{
|
|
249
308
|
type: Component,
|
|
250
309
|
args: [{ selector: 'ul[kirby-x-menu-item-list]', host: {
|
|
251
310
|
'[attr.id]': 'vm.id()',
|
|
252
311
|
'[class]': 'vm.size()',
|
|
253
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, imports: [DividerComponent, MenuAnchorItemComponent, forwardRef(() => MenuSubmenuItemComponent)], template: "@for (item of vm.items(); track item.id) {\n @
|
|
254
|
-
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }]
|
|
312
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, imports: [DividerComponent, MenuAnchorItemComponent, forwardRef(() => MenuSubmenuItemComponent)], template: "@for (item of vm.items(); track item.id) {\n @switch (item.type) {\n @case ('divider') {\n <kirby-divider aria-hidden=\"true\"></kirby-divider>\n }\n @case ('submenu') {\n <li kirby-x-menu-submenu-item [item]=\"item\" [size]=\"vm.size()\"></li>\n }\n @default {\n <li kirby-x-menu-anchor-item [item]=\"item\" [size]=\"vm.size()\"></li>\n }\n }\n}\n", styles: [":host{display:flex;flex-direction:column;margin:0;padding-left:0;padding-right:0;list-style-type:none}kirby-divider{display:flex;background:var(--kirby-white-overlay-20);margin:8px 0}li{margin-block-start:0!important}\n"] }]
|
|
313
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
|
|
255
314
|
|
|
256
315
|
class MenuContainerComponent {
|
|
257
316
|
#element;
|
|
258
|
-
#
|
|
317
|
+
#stateService;
|
|
259
318
|
constructor() {
|
|
260
|
-
this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
261
319
|
this.#element = inject(ElementRef).nativeElement;
|
|
262
|
-
this.#
|
|
320
|
+
this.#stateService = inject(MenuStateService);
|
|
263
321
|
this.vm = {
|
|
264
|
-
items: this.
|
|
265
|
-
disableAnimations: this.#disableAnimations.asReadonly(),
|
|
322
|
+
items: this.#stateService.menuItems,
|
|
266
323
|
};
|
|
324
|
+
this.#stateService.animationsDisabled = true;
|
|
267
325
|
afterNextRender({
|
|
268
326
|
read: () => {
|
|
269
327
|
this.#scrollSelectedItemIntoView();
|
|
270
|
-
this.#
|
|
328
|
+
this.#stateService.animationsDisabled = false;
|
|
271
329
|
},
|
|
272
330
|
});
|
|
273
331
|
}
|
|
274
332
|
#scrollSelectedItemIntoView() {
|
|
275
|
-
const selectedItem = this.#element.querySelector('.
|
|
333
|
+
const selectedItem = this.#element.querySelector('li.selected');
|
|
276
334
|
const scrollContainer = this.#element.closest('.sidebar-content');
|
|
277
335
|
if (selectedItem && scrollContainer) {
|
|
278
336
|
scrollIntoViewIfNecessary(scrollContainer, selectedItem);
|
|
279
337
|
}
|
|
280
338
|
}
|
|
281
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
282
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
339
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MenuContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
340
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: MenuContainerComponent, isStandalone: true, selector: "kirby-x-menu-container", ngImport: i0, template: `
|
|
283
341
|
<nav aria-label="Sidebar Menu">
|
|
284
|
-
<ul
|
|
285
|
-
kirby-x-menu-item-list
|
|
286
|
-
[items]="vm.items()"
|
|
287
|
-
[disableAnimations]="vm.disableAnimations()"
|
|
288
|
-
></ul>
|
|
342
|
+
<ul kirby-x-menu-item-list [items]="vm.items()"></ul>
|
|
289
343
|
</nav>
|
|
290
|
-
`, isInline: true, styles: ["nav{padding:0 var(--kirby-spacing-xxs)}\n"], dependencies: [{ kind: "component", type: MenuItemListComponent, selector: "ul[kirby-x-menu-item-list]", inputs: ["items", "size", "id"
|
|
344
|
+
`, isInline: true, styles: ["nav{padding:0 var(--kirby-spacing-xxs)}\n"], dependencies: [{ kind: "component", type: MenuItemListComponent, selector: "ul[kirby-x-menu-item-list]", inputs: ["items", "size", "id"] }] }); }
|
|
291
345
|
}
|
|
292
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
346
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MenuContainerComponent, decorators: [{
|
|
293
347
|
type: Component,
|
|
294
348
|
args: [{ selector: 'kirby-x-menu-container', template: `
|
|
295
349
|
<nav aria-label="Sidebar Menu">
|
|
296
|
-
<ul
|
|
297
|
-
kirby-x-menu-item-list
|
|
298
|
-
[items]="vm.items()"
|
|
299
|
-
[disableAnimations]="vm.disableAnimations()"
|
|
300
|
-
></ul>
|
|
350
|
+
<ul kirby-x-menu-item-list [items]="vm.items()"></ul>
|
|
301
351
|
</nav>
|
|
302
352
|
`, imports: [MenuItemListComponent], styles: ["nav{padding:0 var(--kirby-spacing-xxs)}\n"] }]
|
|
303
|
-
}], ctorParameters: () => []
|
|
353
|
+
}], ctorParameters: () => [] });
|
|
304
354
|
|
|
305
355
|
class HeightObserverDirective {
|
|
306
356
|
#element;
|
|
@@ -322,69 +372,16 @@ class HeightObserverDirective {
|
|
|
322
372
|
this.#observer.unobserve(this.#element);
|
|
323
373
|
this.#observer.disconnect();
|
|
324
374
|
}
|
|
325
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
326
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
375
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: HeightObserverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
376
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: HeightObserverDirective, isStandalone: true, selector: "[kirbyXHeightObserver]", outputs: { heightChange: "heightChange" }, ngImport: i0 }); }
|
|
327
377
|
}
|
|
328
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
378
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: HeightObserverDirective, decorators: [{
|
|
329
379
|
type: Directive,
|
|
330
380
|
args: [{
|
|
331
381
|
selector: '[kirbyXHeightObserver]',
|
|
332
382
|
}]
|
|
333
383
|
}], ctorParameters: () => [], propDecorators: { heightChange: [{ type: i0.Output, args: ["heightChange"] }] } });
|
|
334
384
|
|
|
335
|
-
function selectMenuItem(itemId, items) {
|
|
336
|
-
return items.map((item) => {
|
|
337
|
-
if (item.id === itemId) {
|
|
338
|
-
return { ...item, selected: true };
|
|
339
|
-
}
|
|
340
|
-
if (item.children) {
|
|
341
|
-
return { ...item, children: selectMenuItem(itemId, item.children) };
|
|
342
|
-
}
|
|
343
|
-
return { ...item, selected: false };
|
|
344
|
-
});
|
|
345
|
-
}
|
|
346
|
-
|
|
347
|
-
function toggleSubmenu(itemId, items) {
|
|
348
|
-
return items.map((item) => {
|
|
349
|
-
if (item.id === itemId) {
|
|
350
|
-
return { ...item, isExpanded: !item.isExpanded };
|
|
351
|
-
}
|
|
352
|
-
if (item.children && item.isExpanded) {
|
|
353
|
-
return { ...item, children: toggleSubmenu(itemId, item.children) };
|
|
354
|
-
}
|
|
355
|
-
return item;
|
|
356
|
-
});
|
|
357
|
-
}
|
|
358
|
-
|
|
359
|
-
function toggleSubmenuAutoCollapsed(itemId, items) {
|
|
360
|
-
return toggleSubmenuAndCollapseNonAncestors(itemId, items).updatedItems;
|
|
361
|
-
}
|
|
362
|
-
function toggleSubmenuAndCollapseNonAncestors(itemId, items) {
|
|
363
|
-
let found = false;
|
|
364
|
-
const updatedItems = items.map((item) => {
|
|
365
|
-
if (found) {
|
|
366
|
-
return collapse(item);
|
|
367
|
-
}
|
|
368
|
-
if (item.id === itemId) {
|
|
369
|
-
found = true;
|
|
370
|
-
return item.isExpanded ? collapse(item) : { ...item, isExpanded: true };
|
|
371
|
-
}
|
|
372
|
-
if (item.children && item.isExpanded) {
|
|
373
|
-
const { updatedItems, isAncestor } = toggleSubmenuAndCollapseNonAncestors(itemId, item.children);
|
|
374
|
-
found = isAncestor;
|
|
375
|
-
return { ...item, isExpanded: isAncestor, children: updatedItems };
|
|
376
|
-
}
|
|
377
|
-
return item;
|
|
378
|
-
});
|
|
379
|
-
return { updatedItems, isAncestor: found };
|
|
380
|
-
}
|
|
381
|
-
function collapse(item) {
|
|
382
|
-
if (item.children && item.isExpanded) {
|
|
383
|
-
return { ...item, isExpanded: false, children: item.children.map(collapse) };
|
|
384
|
-
}
|
|
385
|
-
return item;
|
|
386
|
-
}
|
|
387
|
-
|
|
388
385
|
class SidebarService {
|
|
389
386
|
#menuHeight = signal(0, ...(ngDevMode ? [{ debugName: "#menuHeight" }] : []));
|
|
390
387
|
#containerHeight = signal(0, ...(ngDevMode ? [{ debugName: "#containerHeight" }] : []));
|
|
@@ -409,69 +406,26 @@ class SidebarService {
|
|
|
409
406
|
set scrollDistance(distance) {
|
|
410
407
|
this.#scrollDistance.set(distance);
|
|
411
408
|
}
|
|
412
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
413
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
409
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
410
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SidebarService, providedIn: 'root' }); }
|
|
414
411
|
}
|
|
415
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
412
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SidebarService, decorators: [{
|
|
416
413
|
type: Injectable,
|
|
417
414
|
args: [{ providedIn: 'root' }]
|
|
418
415
|
}] });
|
|
419
416
|
|
|
420
|
-
function checkMenuItem(itemId, isChecked, items) {
|
|
421
|
-
return items.map((item) => {
|
|
422
|
-
if (item.id === itemId) {
|
|
423
|
-
return { ...item, toggle: { ...item.toggle, isChecked } };
|
|
424
|
-
}
|
|
425
|
-
if (item.children) {
|
|
426
|
-
return { ...item, children: checkMenuItem(itemId, isChecked, item.children) };
|
|
427
|
-
}
|
|
428
|
-
return item;
|
|
429
|
-
});
|
|
430
|
-
}
|
|
431
|
-
|
|
432
417
|
class SidebarMenuComponent {
|
|
433
|
-
#sidebarService;
|
|
434
|
-
#menuStateService;
|
|
435
418
|
constructor() {
|
|
436
|
-
this.menuItems = model.required(...(ngDevMode ? [{ debugName: "menuItems" }] : []));
|
|
437
|
-
this.autoCollapse = input(false, ...(ngDevMode ? [{ debugName: "autoCollapse" }] : []));
|
|
438
|
-
this.submenuToggle = output();
|
|
439
|
-
this.itemClick = output();
|
|
440
|
-
this.itemChecked = output();
|
|
441
419
|
this.#sidebarService = inject(SidebarService);
|
|
442
|
-
this.#menuStateService = inject((MenuStateService));
|
|
443
420
|
this.vm = {
|
|
444
|
-
items: this.menuItems.asReadonly(),
|
|
445
421
|
showHeaderBottomBorder: this.#sidebarService.showHeaderBottomBorder,
|
|
446
422
|
showFooterTopBorder: this.#sidebarService.showFooterTopBorder,
|
|
447
423
|
setContainerHeight: this.#setContainerHeight.bind(this),
|
|
448
424
|
setMenuHeight: this.#setMenuHeight.bind(this),
|
|
449
425
|
setScroll: this.#setScrollDistance.bind(this),
|
|
450
426
|
};
|
|
451
|
-
effect(() => {
|
|
452
|
-
const toggledSubmenu = this.#menuStateService.toggledSubmenu();
|
|
453
|
-
if (toggledSubmenu) {
|
|
454
|
-
this.submenuToggle.emit(toggledSubmenu);
|
|
455
|
-
this.menuItems.update((items) => this.autoCollapse()
|
|
456
|
-
? toggleSubmenuAutoCollapsed(toggledSubmenu.id, items)
|
|
457
|
-
: toggleSubmenu(toggledSubmenu.id, items));
|
|
458
|
-
}
|
|
459
|
-
});
|
|
460
|
-
effect(() => {
|
|
461
|
-
const selectedItem = this.#menuStateService.selectedItem();
|
|
462
|
-
if (selectedItem) {
|
|
463
|
-
this.itemClick.emit(selectedItem);
|
|
464
|
-
this.menuItems.update((items) => selectMenuItem(selectedItem.id, items));
|
|
465
|
-
}
|
|
466
|
-
});
|
|
467
|
-
effect(() => {
|
|
468
|
-
const checkEvent = this.#menuStateService.checkEvent();
|
|
469
|
-
if (checkEvent) {
|
|
470
|
-
this.itemChecked.emit(checkEvent);
|
|
471
|
-
this.menuItems.update((items) => checkMenuItem(checkEvent.item.id, checkEvent.checked, items));
|
|
472
|
-
}
|
|
473
|
-
});
|
|
474
427
|
}
|
|
428
|
+
#sidebarService;
|
|
475
429
|
#setContainerHeight(height) {
|
|
476
430
|
this.#sidebarService.containerHeight = height;
|
|
477
431
|
}
|
|
@@ -484,127 +438,122 @@ class SidebarMenuComponent {
|
|
|
484
438
|
this.#sidebarService.scrollDistance = target.scrollTop;
|
|
485
439
|
}
|
|
486
440
|
}
|
|
487
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
488
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
441
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SidebarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
442
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SidebarMenuComponent, isStandalone: true, selector: "aside[kirby-x-sidebar-menu]", ngImport: i0, template: "<div class=\"sidebar-header\" [class.bottom-border]=\"vm.showHeaderBottomBorder()\">\n <ng-content select=\"[slot='header']\"></ng-content>\n</div>\n<div\n kirbyXHeightObserver\n class=\"sidebar-content\"\n (scroll)=\"vm.setScroll($event)\"\n (heightChange)=\"vm.setContainerHeight($event)\"\n>\n <kirby-x-menu-container\n kirbyXHeightObserver\n (heightChange)=\"vm.setMenuHeight($event)\"\n ></kirby-x-menu-container>\n</div>\n<div class=\"sidebar-footer\" [class.top-border]=\"vm.showFooterTopBorder()\">\n <ng-content select=\"[slot='footer']\"></ng-content>\n</div>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-elevation: none;height:100%;height:100dvh;background-color:var(--sidebar-background-color, var(--kirby-tertiary));color:var(--sidebar-color, var(--kirby-tertiary-contrast));display:flex;flex-direction:column;overflow:auto}:host *{scrollbar-width:thin;scrollbar-color:var(--kirby-semi-dark) var(--kirby-tertiary)}:host *::-webkit-scrollbar{width:16px}:host *::-webkit-scrollbar-track{background:transparent}:host *::-webkit-scrollbar-thumb{background-color:#8e8e8e80;border-radius:20px;border:4px solid transparent;background-clip:content-box}.sidebar-content{flex-grow:1;display:flex;flex-direction:column;overflow-y:auto}@supports (scrollbar-gutter: stable){.sidebar-content{overflow:hidden auto;scrollbar-gutter:auto}}.sidebar-header,.sidebar-footer{z-index:1;display:flex;align-items:center;justify-content:center;position:sticky}.sidebar-header.bottom-border{box-shadow:0 4px 10px 2px #1c1c1c4d;transition:opacity .3s}.sidebar-footer.top-border{box-shadow:0 -4px 10px 2px #1c1c1c4d;transition:opacity .3s}\n"], dependencies: [{ kind: "directive", type: HeightObserverDirective, selector: "[kirbyXHeightObserver]", outputs: ["heightChange"] }, { kind: "component", type: MenuContainerComponent, selector: "kirby-x-menu-container" }] }); }
|
|
489
443
|
}
|
|
490
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
444
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SidebarMenuComponent, decorators: [{
|
|
491
445
|
type: Component,
|
|
492
|
-
args: [{ selector: 'aside[kirby-x-sidebar-menu]', imports: [HeightObserverDirective, MenuContainerComponent], template: "<div class=\"sidebar-header\" [class.bottom-border]=\"vm.showHeaderBottomBorder()\">\n <ng-content select=\"[slot='header']\"></ng-content>\n</div>\n<div\n kirbyXHeightObserver\n class=\"sidebar-content\"\n (scroll)=\"vm.setScroll($event)\"\n (heightChange)=\"vm.setContainerHeight($event)\"\n>\n <kirby-x-menu-container\n kirbyXHeightObserver\n
|
|
493
|
-
}]
|
|
446
|
+
args: [{ selector: 'aside[kirby-x-sidebar-menu]', imports: [HeightObserverDirective, MenuContainerComponent], template: "<div class=\"sidebar-header\" [class.bottom-border]=\"vm.showHeaderBottomBorder()\">\n <ng-content select=\"[slot='header']\"></ng-content>\n</div>\n<div\n kirbyXHeightObserver\n class=\"sidebar-content\"\n (scroll)=\"vm.setScroll($event)\"\n (heightChange)=\"vm.setContainerHeight($event)\"\n>\n <kirby-x-menu-container\n kirbyXHeightObserver\n (heightChange)=\"vm.setMenuHeight($event)\"\n ></kirby-x-menu-container>\n</div>\n<div class=\"sidebar-footer\" [class.top-border]=\"vm.showFooterTopBorder()\">\n <ng-content select=\"[slot='footer']\"></ng-content>\n</div>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-elevation: none;height:100%;height:100dvh;background-color:var(--sidebar-background-color, var(--kirby-tertiary));color:var(--sidebar-color, var(--kirby-tertiary-contrast));display:flex;flex-direction:column;overflow:auto}:host *{scrollbar-width:thin;scrollbar-color:var(--kirby-semi-dark) var(--kirby-tertiary)}:host *::-webkit-scrollbar{width:16px}:host *::-webkit-scrollbar-track{background:transparent}:host *::-webkit-scrollbar-thumb{background-color:#8e8e8e80;border-radius:20px;border:4px solid transparent;background-clip:content-box}.sidebar-content{flex-grow:1;display:flex;flex-direction:column;overflow-y:auto}@supports (scrollbar-gutter: stable){.sidebar-content{overflow:hidden auto;scrollbar-gutter:auto}}.sidebar-header,.sidebar-footer{z-index:1;display:flex;align-items:center;justify-content:center;position:sticky}.sidebar-header.bottom-border{box-shadow:0 4px 10px 2px #1c1c1c4d;transition:opacity .3s}.sidebar-footer.top-border{box-shadow:0 -4px 10px 2px #1c1c1c4d;transition:opacity .3s}\n"] }]
|
|
447
|
+
}] });
|
|
494
448
|
|
|
495
449
|
class SidebarComponent {
|
|
450
|
+
#stateService;
|
|
451
|
+
set menuItems(menuItems) {
|
|
452
|
+
this.#stateService.menuItems = menuItems;
|
|
453
|
+
}
|
|
454
|
+
set selectedItem(value) {
|
|
455
|
+
this.#stateService.selectedItem = value;
|
|
456
|
+
}
|
|
457
|
+
set expandedItems(value) {
|
|
458
|
+
this.#stateService.expandedItems = value;
|
|
459
|
+
}
|
|
460
|
+
set checkedItems(value) {
|
|
461
|
+
this.#stateService.checkedItems = value;
|
|
462
|
+
}
|
|
463
|
+
set autoCollapse(value) {
|
|
464
|
+
this.#stateService.autoCollapse = value;
|
|
465
|
+
}
|
|
496
466
|
constructor() {
|
|
497
|
-
this
|
|
498
|
-
this.
|
|
499
|
-
this.
|
|
500
|
-
this.
|
|
501
|
-
this.
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
this.
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
}
|
|
511
|
-
changeMenuItems(event) {
|
|
512
|
-
this.menuItems = event;
|
|
513
|
-
this.menuItemsChange.emit(this.menuItems);
|
|
514
|
-
this.menuItemsChanged.emit(this.menuItems);
|
|
515
|
-
}
|
|
516
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
517
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SidebarComponent, isStandalone: true, selector: "kirby-x-sidebar", inputs: { menuItems: "menuItems", autoCollapse: "autoCollapse", expandIconOnHover: "expandIconOnHover" }, outputs: { menuItemsChange: "menuItemsChange", afterMenuClicked: "afterMenuClicked", afterMenuToggled: "afterMenuToggled", itemChecked: "itemChecked", menuItemsChanged: "menuItemsChanged" }, ngImport: i0, template: `
|
|
518
|
-
<aside
|
|
519
|
-
kirby-x-sidebar-menu
|
|
520
|
-
[menuItems]="menuItems"
|
|
521
|
-
[autoCollapse]="autoCollapse"
|
|
522
|
-
(menuItemsChange)="changeMenuItems($event)"
|
|
523
|
-
(itemClick)="afterMenuClicked.emit($event)"
|
|
524
|
-
(submenuToggle)="afterMenuToggled.emit($event)"
|
|
525
|
-
(itemChecked)="itemChecked.emit($event)"
|
|
526
|
-
>
|
|
467
|
+
this.#stateService = inject(MenuStateService);
|
|
468
|
+
this.selectedItemChange = new EventEmitter();
|
|
469
|
+
this.expandedItemsChange = new EventEmitter();
|
|
470
|
+
this.checkedItemsChange = new EventEmitter();
|
|
471
|
+
this.expandChange = this.#stateService.expandEvents;
|
|
472
|
+
this.checkChange = this.#stateService.checkEvents;
|
|
473
|
+
effect(() => this.selectedItemChange.emit(this.#stateService.selectedItem()));
|
|
474
|
+
effect(() => this.expandedItemsChange.emit(this.#stateService.expandedItems()));
|
|
475
|
+
effect(() => this.checkedItemsChange.emit(this.#stateService.checkedItems()));
|
|
476
|
+
}
|
|
477
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
478
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SidebarComponent, isStandalone: true, selector: "kirby-x-sidebar", inputs: { menuItems: "menuItems", selectedItem: "selectedItem", expandedItems: "expandedItems", checkedItems: "checkedItems", autoCollapse: "autoCollapse" }, outputs: { selectedItemChange: "selectedItemChange", expandedItemsChange: "expandedItemsChange", checkedItemsChange: "checkedItemsChange", expandChange: "expandChange", checkChange: "checkChange" }, ngImport: i0, template: `
|
|
479
|
+
<aside kirby-x-sidebar-menu>
|
|
527
480
|
<ng-content select="kirby-x-sidebar-header" slot="header"></ng-content>
|
|
528
481
|
<ng-content select="kirby-x-sidebar-footer" slot="footer"></ng-content>
|
|
529
482
|
</aside>
|
|
530
|
-
`, isInline: true, dependencies: [{ kind: "component", type: SidebarMenuComponent, selector: "aside[kirby-x-sidebar-menu]"
|
|
483
|
+
`, isInline: true, dependencies: [{ kind: "component", type: SidebarMenuComponent, selector: "aside[kirby-x-sidebar-menu]" }] }); }
|
|
531
484
|
}
|
|
532
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
485
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
533
486
|
type: Component,
|
|
534
487
|
args: [{
|
|
535
488
|
selector: 'kirby-x-sidebar',
|
|
536
489
|
template: `
|
|
537
|
-
<aside
|
|
538
|
-
kirby-x-sidebar-menu
|
|
539
|
-
[menuItems]="menuItems"
|
|
540
|
-
[autoCollapse]="autoCollapse"
|
|
541
|
-
(menuItemsChange)="changeMenuItems($event)"
|
|
542
|
-
(itemClick)="afterMenuClicked.emit($event)"
|
|
543
|
-
(submenuToggle)="afterMenuToggled.emit($event)"
|
|
544
|
-
(itemChecked)="itemChecked.emit($event)"
|
|
545
|
-
>
|
|
490
|
+
<aside kirby-x-sidebar-menu>
|
|
546
491
|
<ng-content select="kirby-x-sidebar-header" slot="header"></ng-content>
|
|
547
492
|
<ng-content select="kirby-x-sidebar-footer" slot="footer"></ng-content>
|
|
548
493
|
</aside>
|
|
549
494
|
`,
|
|
550
495
|
imports: [SidebarMenuComponent],
|
|
551
496
|
}]
|
|
552
|
-
}], propDecorators: { menuItems: [{
|
|
497
|
+
}], ctorParameters: () => [], propDecorators: { menuItems: [{
|
|
498
|
+
type: Input
|
|
499
|
+
}], selectedItem: [{
|
|
500
|
+
type: Input
|
|
501
|
+
}], expandedItems: [{
|
|
502
|
+
type: Input
|
|
503
|
+
}], checkedItems: [{
|
|
553
504
|
type: Input
|
|
554
505
|
}], autoCollapse: [{
|
|
555
506
|
type: Input
|
|
556
|
-
}],
|
|
507
|
+
}], selectedItemChange: [{
|
|
557
508
|
type: Output
|
|
558
|
-
}],
|
|
509
|
+
}], expandedItemsChange: [{
|
|
559
510
|
type: Output
|
|
560
|
-
}],
|
|
511
|
+
}], checkedItemsChange: [{
|
|
561
512
|
type: Output
|
|
562
|
-
}],
|
|
513
|
+
}], expandChange: [{
|
|
563
514
|
type: Output
|
|
564
|
-
}],
|
|
565
|
-
type: Input
|
|
566
|
-
}], menuItemsChanged: [{
|
|
515
|
+
}], checkChange: [{
|
|
567
516
|
type: Output
|
|
568
517
|
}] } });
|
|
569
518
|
|
|
570
519
|
class SidebarFooterComponent {
|
|
571
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
572
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
520
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SidebarFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
521
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SidebarFooterComponent, isStandalone: true, selector: "kirby-x-sidebar-footer", ngImport: i0, template: '<footer><ng-content></ng-content></footer>', isInline: true, styles: [":host,footer{display:flex;flex-direction:column;align-items:center;justify-content:center}:host{min-height:80px}footer{width:100%}\n"] }); }
|
|
573
522
|
}
|
|
574
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
523
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SidebarFooterComponent, decorators: [{
|
|
575
524
|
type: Component,
|
|
576
525
|
args: [{ selector: 'kirby-x-sidebar-footer', template: '<footer><ng-content></ng-content></footer>', styles: [":host,footer{display:flex;flex-direction:column;align-items:center;justify-content:center}:host{min-height:80px}footer{width:100%}\n"] }]
|
|
577
526
|
}] });
|
|
578
527
|
|
|
579
528
|
class SidebarHeaderComponent {
|
|
580
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
581
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
529
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SidebarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
530
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SidebarHeaderComponent, isStandalone: true, selector: "kirby-x-sidebar-header", ngImport: i0, template: `
|
|
582
531
|
<header>
|
|
583
|
-
<span class="sidebar-logo"><ng-content slot=
|
|
532
|
+
<span class="sidebar-logo"><ng-content select="[slot='logo']"></ng-content></span>
|
|
584
533
|
<div class="action-bar">
|
|
585
534
|
<ng-content select="[slot='action']"></ng-content>
|
|
586
535
|
</div>
|
|
587
536
|
</header>
|
|
588
|
-
`, isInline: true, styles: [":host,header{display:flex;flex-direction:column;align-items:center;justify-content:center}:host{flex-grow:1}header{width:100%}:host::ng-deep [slot=logo]{
|
|
537
|
+
`, isInline: true, styles: [":host,header{display:flex;flex-direction:column;align-items:center;justify-content:center}:host{flex-grow:1}header{width:100%}:host::ng-deep [slot=logo]{display:inline-flex}:host::ng-deep [slot=logo] img,:host::ng-deep img[slot=logo]{object-fit:contain;max-width:100%;max-height:100%}.sidebar-logo{display:flex;align-items:center;height:50px;margin:var(--kirby-spacing-l) var(--kirby-spacing-m)}.action-bar{display:flex;flex-direction:row;align-items:center;justify-content:center;box-sizing:border-box;width:100%}.action-bar:has([slot=action]){padding:0 var(--kirby-spacing-xs) var(--kirby-spacing-xs)}\n"] }); }
|
|
589
538
|
}
|
|
590
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
539
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SidebarHeaderComponent, decorators: [{
|
|
591
540
|
type: Component,
|
|
592
541
|
args: [{ selector: 'kirby-x-sidebar-header', template: `
|
|
593
542
|
<header>
|
|
594
|
-
<span class="sidebar-logo"><ng-content slot=
|
|
543
|
+
<span class="sidebar-logo"><ng-content select="[slot='logo']"></ng-content></span>
|
|
595
544
|
<div class="action-bar">
|
|
596
545
|
<ng-content select="[slot='action']"></ng-content>
|
|
597
546
|
</div>
|
|
598
547
|
</header>
|
|
599
|
-
`, styles: [":host,header{display:flex;flex-direction:column;align-items:center;justify-content:center}:host{flex-grow:1}header{width:100%}:host::ng-deep [slot=logo]{
|
|
548
|
+
`, styles: [":host,header{display:flex;flex-direction:column;align-items:center;justify-content:center}:host{flex-grow:1}header{width:100%}:host::ng-deep [slot=logo]{display:inline-flex}:host::ng-deep [slot=logo] img,:host::ng-deep img[slot=logo]{object-fit:contain;max-width:100%;max-height:100%}.sidebar-logo{display:flex;align-items:center;height:50px;margin:var(--kirby-spacing-l) var(--kirby-spacing-m)}.action-bar{display:flex;flex-direction:row;align-items:center;justify-content:center;box-sizing:border-box;width:100%}.action-bar:has([slot=action]){padding:0 var(--kirby-spacing-xs) var(--kirby-spacing-xs)}\n"] }]
|
|
600
549
|
}] });
|
|
601
550
|
|
|
602
551
|
class SidebarModule {
|
|
603
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
604
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
605
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
552
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
553
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SidebarModule, imports: [SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent], exports: [SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent] }); }
|
|
554
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SidebarModule, imports: [SidebarComponent] }); }
|
|
606
555
|
}
|
|
607
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
556
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SidebarModule, decorators: [{
|
|
608
557
|
type: NgModule,
|
|
609
558
|
args: [{
|
|
610
559
|
imports: [SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent],
|