@kirbydesign/extensions-angular 3.4.0 → 3.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/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 +97 -48
- 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 +3 -3
- package/fesm2022/kirbydesign-extensions-angular-spot-illustration.mjs.map +1 -1
- package/fesm2022/kirbydesign-extensions-angular.mjs.map +1 -1
- package/package.json +2 -2
- package/sidebar-menu/index.d.ts +15 -2
|
@@ -2,6 +2,8 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { input, computed, Component, signal, Injectable, inject, ElementRef, forwardRef, ChangeDetectionStrategy, afterNextRender, output, Directive, model, effect, EventEmitter, Output, Input, NgModule } from '@angular/core';
|
|
3
3
|
import { DividerComponent } from '@kirbydesign/designsystem/divider';
|
|
4
4
|
import { RouterLink } from '@angular/router';
|
|
5
|
+
import { ToggleButtonComponent } from '@kirbydesign/designsystem/toggle-button';
|
|
6
|
+
import { ButtonComponent } from '@kirbydesign/designsystem/button';
|
|
5
7
|
import * as i1 from '@kirbydesign/designsystem/icon';
|
|
6
8
|
import { IconModule, IconComponent } from '@kirbydesign/designsystem/icon';
|
|
7
9
|
import { BadgeComponent } from '@kirbydesign/designsystem/badge';
|
|
@@ -30,23 +32,23 @@ class MenuItemComponent {
|
|
|
30
32
|
this.id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
31
33
|
this.size = input.required(...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
32
34
|
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
|
|
33
|
-
this.badge = input(...(ngDevMode ? [undefined, { debugName: "badge" }] : []));
|
|
34
35
|
this.iconSize = computed(() => (this.size() === 'lg' ? 'sm' : 'xs'), ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
|
|
35
36
|
}
|
|
36
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
37
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
37
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
38
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 {{ size() }}\">\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}@media (pointer: coarse){:host.md{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}.menu-item-content.lg,.menu-item-content.md{font-size:16px;line-height:24px}.menu-item-content.sm{font-size:14px;line-height:20px}.menu-item-content.xs{font-size:12px;line-height:16px}.menu-item-end{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: IconModule }, { kind: "component", type: i1.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }] }); }
|
|
38
39
|
}
|
|
39
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
40
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuItemComponent, decorators: [{
|
|
40
41
|
type: Component,
|
|
41
42
|
args: [{ selector: 'a[kirby-x-menu-item],button[kirby-x-menu-item]', host: {
|
|
42
43
|
'[attr.id]': '"item" + id()',
|
|
43
44
|
'[class]': 'size()',
|
|
44
|
-
}, imports: [IconModule, BadgeComponent], 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 {{ size() }}\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"menu-item-end\">\n
|
|
45
|
-
}], 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 }] }]
|
|
45
|
+
}, imports: [IconModule, BadgeComponent], 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 {{ size() }}\">\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}@media (pointer: coarse){:host.md{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}.menu-item-content.lg,.menu-item-content.md{font-size:16px;line-height:24px}.menu-item-content.sm{font-size:14px;line-height:20px}.menu-item-content.xs{font-size:12px;line-height:16px}.menu-item-end{display:inline-flex;align-items:center}\n"] }]
|
|
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 }] }] } });
|
|
46
47
|
|
|
47
48
|
class MenuStateService {
|
|
48
49
|
#toggledSubmenu = signal(undefined, ...(ngDevMode ? [{ debugName: "#toggledSubmenu" }] : []));
|
|
49
50
|
#selectedItem = signal(undefined, ...(ngDevMode ? [{ debugName: "#selectedItem" }] : []));
|
|
51
|
+
#checkEvent = signal(undefined, ...(ngDevMode ? [{ debugName: "#checkEvent" }] : []));
|
|
50
52
|
get toggledSubmenu() {
|
|
51
53
|
return this.#toggledSubmenu;
|
|
52
54
|
}
|
|
@@ -61,10 +63,16 @@ class MenuStateService {
|
|
|
61
63
|
this.#selectedItem.set(item);
|
|
62
64
|
}
|
|
63
65
|
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
+
get checkEvent() {
|
|
67
|
+
return this.#checkEvent.asReadonly();
|
|
68
|
+
}
|
|
69
|
+
set checkEvent(event) {
|
|
70
|
+
this.#checkEvent.set(event);
|
|
71
|
+
}
|
|
72
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
73
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuStateService, providedIn: 'root' }); }
|
|
66
74
|
}
|
|
67
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
75
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuStateService, decorators: [{
|
|
68
76
|
type: Injectable,
|
|
69
77
|
args: [{ providedIn: 'root' }]
|
|
70
78
|
}] });
|
|
@@ -79,22 +87,39 @@ class MenuAnchorItemComponent {
|
|
|
79
87
|
id: computed(() => this.item().id),
|
|
80
88
|
size: this.size,
|
|
81
89
|
badge: computed(() => this.item().badge),
|
|
90
|
+
toggle: computed(() => this.item().toggle),
|
|
82
91
|
icon: computed(() => this.item().icon),
|
|
83
92
|
isSelected: computed(() => this.item().selected ?? false),
|
|
84
93
|
title: computed(() => this.item().title ?? ''),
|
|
85
94
|
selectItem: this.#selectItem.bind(this),
|
|
95
|
+
checkItem: this.#checkItem.bind(this),
|
|
86
96
|
};
|
|
87
97
|
}
|
|
88
98
|
#menuStateService;
|
|
89
99
|
#selectItem() {
|
|
90
100
|
this.#menuStateService.selectedItem = this.item();
|
|
91
101
|
}
|
|
92
|
-
|
|
93
|
-
|
|
102
|
+
#checkItem(checked) {
|
|
103
|
+
this.#menuStateService.checkEvent = { item: this.item(), checked };
|
|
104
|
+
}
|
|
105
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuAnchorItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
106
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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.toggle()?.isChecked", "class.has-toggle": "!!vm.toggle()", "class.has-badge": "!!vm.badge()" } }, ngImport: i0, template: "@let link = vm.link();\n@if (link) {\n @switch (link.type) {\n @case ('action') {\n <a\n kirby-x-menu-item\n [class.selected]=\"vm.isSelected()\"\n [id]=\"vm.id()\"\n [size]=\"vm.size()\"\n [icon]=\"vm.icon()\"\n [attr.href]=\"link.url\"\n (click)=\"$event.preventDefault(); vm.selectItem()\"\n (keydown.enter)=\"$event.preventDefault(); vm.selectItem()\"\n >\n {{ vm.title() }}\n <div class=\"end-wrapper\" slot=\"end\">\n @if (vm.badge(); as badge) {\n <kirby-badge class=\"item-badge\" [themeColor]=\"badge.themeColor ?? 'primary'\">\n {{ badge.value }}\n </kirby-badge>\n }\n </div>\n </a>\n }\n @case ('router-link') {\n <a\n kirby-x-menu-item\n [class.selected]=\"vm.isSelected()\"\n [id]=\"vm.id()\"\n [size]=\"vm.size()\"\n [icon]=\"vm.icon()\"\n [routerLink]=\"link.route\"\n [queryParams]=\"link.queryParams\"\n [skipLocationChange]=\"link.skipLocationChange\"\n [replaceUrl]=\"link.replaceUrl\"\n (click)=\"vm.selectItem()\"\n (keydown.enter)=\"vm.selectItem()\"\n >\n {{ vm.title() }}\n <div class=\"end-wrapper\" slot=\"end\">\n @if (vm.badge(); as badge) {\n <kirby-badge class=\"item-badge\" [themeColor]=\"badge.themeColor ?? 'primary'\">\n {{ badge.value }}\n </kirby-badge>\n }\n </div>\n </a>\n }\n @case ('external-link') {\n <a\n kirby-x-menu-item\n [class.selected]=\"vm.isSelected()\"\n [id]=\"vm.id()\"\n [size]=\"vm.size()\"\n [icon]=\"vm.icon()\"\n [attr.href]=\"link.url\"\n [attr.target]=\"link.target\"\n (click)=\"vm.selectItem()\"\n (keydown.enter)=\"vm.selectItem()\"\n >\n {{ vm.title() }}\n <div class=\"end-wrapper\" slot=\"end\">\n @if (vm.badge(); as badge) {\n <kirby-badge class=\"item-badge\" [themeColor]=\"badge.themeColor ?? 'primary'\">\n {{ badge.value }}\n </kirby-badge>\n }\n </div>\n </a>\n }\n }\n\n @if (vm.toggle(); as toggle) {\n <kirby-toggle-button\n class=\"toggle-button-wrapper\"\n [checked]=\"toggle.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]=\"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]=\"toggle.checkedIcon\"></kirby-icon>\n </button>\n </kirby-toggle-button>\n }\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))}.selected,.selected:hover,.selected:active,.selected:focus-visible{background:var(--menuitem-selected-background-color, var(--kirby-primary));font-weight:700}:host:where(.has-toggle,.has-badge) .end-wrapper{display:inline-flex;justify-content:center;box-sizing:border-box;min-width:24px}:host.checked .end-wrapper{padding-right:32px}.item-badge{display:inline-flex}: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}.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"] }] }); }
|
|
94
107
|
}
|
|
95
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
108
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuAnchorItemComponent, decorators: [{
|
|
96
109
|
type: Component,
|
|
97
|
-
args: [{ selector: 'li[kirby-x-menu-anchor-item]',
|
|
110
|
+
args: [{ selector: 'li[kirby-x-menu-anchor-item]', host: {
|
|
111
|
+
'[class.selected]': 'vm.isSelected()',
|
|
112
|
+
'[class.checked]': 'vm.toggle()?.isChecked',
|
|
113
|
+
'[class.has-toggle]': '!!vm.toggle()',
|
|
114
|
+
'[class.has-badge]': '!!vm.badge()',
|
|
115
|
+
}, imports: [
|
|
116
|
+
MenuItemComponent,
|
|
117
|
+
RouterLink,
|
|
118
|
+
ToggleButtonComponent,
|
|
119
|
+
ButtonComponent,
|
|
120
|
+
IconComponent,
|
|
121
|
+
BadgeComponent,
|
|
122
|
+
], template: "@let link = vm.link();\n@if (link) {\n @switch (link.type) {\n @case ('action') {\n <a\n kirby-x-menu-item\n [class.selected]=\"vm.isSelected()\"\n [id]=\"vm.id()\"\n [size]=\"vm.size()\"\n [icon]=\"vm.icon()\"\n [attr.href]=\"link.url\"\n (click)=\"$event.preventDefault(); vm.selectItem()\"\n (keydown.enter)=\"$event.preventDefault(); vm.selectItem()\"\n >\n {{ vm.title() }}\n <div class=\"end-wrapper\" slot=\"end\">\n @if (vm.badge(); as badge) {\n <kirby-badge class=\"item-badge\" [themeColor]=\"badge.themeColor ?? 'primary'\">\n {{ badge.value }}\n </kirby-badge>\n }\n </div>\n </a>\n }\n @case ('router-link') {\n <a\n kirby-x-menu-item\n [class.selected]=\"vm.isSelected()\"\n [id]=\"vm.id()\"\n [size]=\"vm.size()\"\n [icon]=\"vm.icon()\"\n [routerLink]=\"link.route\"\n [queryParams]=\"link.queryParams\"\n [skipLocationChange]=\"link.skipLocationChange\"\n [replaceUrl]=\"link.replaceUrl\"\n (click)=\"vm.selectItem()\"\n (keydown.enter)=\"vm.selectItem()\"\n >\n {{ vm.title() }}\n <div class=\"end-wrapper\" slot=\"end\">\n @if (vm.badge(); as badge) {\n <kirby-badge class=\"item-badge\" [themeColor]=\"badge.themeColor ?? 'primary'\">\n {{ badge.value }}\n </kirby-badge>\n }\n </div>\n </a>\n }\n @case ('external-link') {\n <a\n kirby-x-menu-item\n [class.selected]=\"vm.isSelected()\"\n [id]=\"vm.id()\"\n [size]=\"vm.size()\"\n [icon]=\"vm.icon()\"\n [attr.href]=\"link.url\"\n [attr.target]=\"link.target\"\n (click)=\"vm.selectItem()\"\n (keydown.enter)=\"vm.selectItem()\"\n >\n {{ vm.title() }}\n <div class=\"end-wrapper\" slot=\"end\">\n @if (vm.badge(); as badge) {\n <kirby-badge class=\"item-badge\" [themeColor]=\"badge.themeColor ?? 'primary'\">\n {{ badge.value }}\n </kirby-badge>\n }\n </div>\n </a>\n }\n }\n\n @if (vm.toggle(); as toggle) {\n <kirby-toggle-button\n class=\"toggle-button-wrapper\"\n [checked]=\"toggle.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]=\"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]=\"toggle.checkedIcon\"></kirby-icon>\n </button>\n </kirby-toggle-button>\n }\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))}.selected,.selected:hover,.selected:active,.selected:focus-visible{background:var(--menuitem-selected-background-color, var(--kirby-primary));font-weight:700}:host:where(.has-toggle,.has-badge) .end-wrapper{display:inline-flex;justify-content:center;box-sizing:border-box;min-width:24px}:host.checked .end-wrapper{padding-right:32px}.item-badge{display:inline-flex}: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}.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"] }]
|
|
98
123
|
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }] } });
|
|
99
124
|
function determineLinkType(item) {
|
|
100
125
|
if (item.isAction) {
|
|
@@ -176,7 +201,6 @@ class MenuSubmenuItemComponent {
|
|
|
176
201
|
title: computed(() => this.item().title ?? ''),
|
|
177
202
|
size: this.size,
|
|
178
203
|
icon: computed(() => this.item().icon),
|
|
179
|
-
badge: computed(() => this.item().badge),
|
|
180
204
|
isExpanded: this.#isExpanded,
|
|
181
205
|
children: computed(() => this.item().children ?? []),
|
|
182
206
|
submenuSize: this.#submenuSize,
|
|
@@ -197,12 +221,12 @@ class MenuSubmenuItemComponent {
|
|
|
197
221
|
}
|
|
198
222
|
this.#menuStateService.toggledSubmenu = this.item();
|
|
199
223
|
}
|
|
200
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
201
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
224
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuSubmenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
225
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 }, disableAnimations: { classPropertyName: "disableAnimations", publicName: "disableAnimations", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<button\n kirby-x-menu-item\n type=\"button\"\n class=\"submenu-toggle\"\n [id]=\"vm.id()\"\n [size]=\"vm.size()\"\n [icon]=\"vm.icon()\"\n [attr.aria-controls]=\"vm.submenuId()\"\n [attr.aria-expanded]=\"vm.isExpanded()\"\n (click)=\"vm.toggleSubmenu()\"\n>\n {{ vm.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]=\"vm.children()\"\n [size]=\"vm.submenuSize()\"\n [id]=\"vm.submenuId()\"\n [disableAnimations]=\"vm.disableAnimations()\"\n [@dropDownMenu]\n [@.disabled]=\"vm.disableAnimations()\"\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", "disableAnimations"] }], animations: [DropDownAnimation] }); }
|
|
202
226
|
}
|
|
203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
227
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuSubmenuItemComponent, decorators: [{
|
|
204
228
|
type: Component,
|
|
205
|
-
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 [id]=\"vm.id()\"\n [size]=\"vm.size()\"\n [icon]=\"vm.icon()\"\n [
|
|
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 [id]=\"vm.id()\"\n [size]=\"vm.size()\"\n [icon]=\"vm.icon()\"\n [attr.aria-controls]=\"vm.submenuId()\"\n [attr.aria-expanded]=\"vm.isExpanded()\"\n (click)=\"vm.toggleSubmenu()\"\n>\n {{ vm.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]=\"vm.children()\"\n [size]=\"vm.submenuSize()\"\n [id]=\"vm.submenuId()\"\n [disableAnimations]=\"vm.disableAnimations()\"\n [@dropDownMenu]\n [@.disabled]=\"vm.disableAnimations()\"\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"] }]
|
|
206
230
|
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], disableAnimations: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAnimations", required: true }] }] } });
|
|
207
231
|
|
|
208
232
|
class MenuItemListComponent {
|
|
@@ -218,10 +242,10 @@ class MenuItemListComponent {
|
|
|
218
242
|
disableAnimations: this.disableAnimations,
|
|
219
243
|
};
|
|
220
244
|
}
|
|
221
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
222
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
245
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
246
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 }, disableAnimations: { classPropertyName: "disableAnimations", publicName: "disableAnimations", 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 @if (item.isDivider) {\n <kirby-divider aria-hidden=\"true\"></kirby-divider>\n } @else if (item.children) {\n <li\n kirby-x-menu-submenu-item\n [item]=\"item\"\n [size]=\"vm.size()\"\n [disableAnimations]=\"vm.disableAnimations()\"\n ></li>\n } @else {\n <li kirby-x-menu-anchor-item [item]=\"item\" [size]=\"vm.size()\"></li>\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", "disableAnimations"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
223
247
|
}
|
|
224
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
248
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuItemListComponent, decorators: [{
|
|
225
249
|
type: Component,
|
|
226
250
|
args: [{ selector: 'ul[kirby-x-menu-item-list]', host: {
|
|
227
251
|
'[attr.id]': 'vm.id()',
|
|
@@ -254,8 +278,8 @@ class MenuContainerComponent {
|
|
|
254
278
|
scrollIntoViewIfNecessary(scrollContainer, selectedItem);
|
|
255
279
|
}
|
|
256
280
|
}
|
|
257
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
258
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
281
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
282
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: MenuContainerComponent, isStandalone: true, selector: "kirby-x-menu-container", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
259
283
|
<nav aria-label="Sidebar Menu">
|
|
260
284
|
<ul
|
|
261
285
|
kirby-x-menu-item-list
|
|
@@ -265,7 +289,7 @@ class MenuContainerComponent {
|
|
|
265
289
|
</nav>
|
|
266
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", "disableAnimations"] }] }); }
|
|
267
291
|
}
|
|
268
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
292
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuContainerComponent, decorators: [{
|
|
269
293
|
type: Component,
|
|
270
294
|
args: [{ selector: 'kirby-x-menu-container', template: `
|
|
271
295
|
<nav aria-label="Sidebar Menu">
|
|
@@ -298,10 +322,10 @@ class HeightObserverDirective {
|
|
|
298
322
|
this.#observer.unobserve(this.#element);
|
|
299
323
|
this.#observer.disconnect();
|
|
300
324
|
}
|
|
301
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
302
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
325
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HeightObserverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
326
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: HeightObserverDirective, isStandalone: true, selector: "[kirbyXHeightObserver]", outputs: { heightChange: "heightChange" }, ngImport: i0 }); }
|
|
303
327
|
}
|
|
304
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
328
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HeightObserverDirective, decorators: [{
|
|
305
329
|
type: Directive,
|
|
306
330
|
args: [{
|
|
307
331
|
selector: '[kirbyXHeightObserver]',
|
|
@@ -385,14 +409,26 @@ class SidebarService {
|
|
|
385
409
|
set scrollDistance(distance) {
|
|
386
410
|
this.#scrollDistance.set(distance);
|
|
387
411
|
}
|
|
388
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
389
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
412
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
413
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarService, providedIn: 'root' }); }
|
|
390
414
|
}
|
|
391
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
415
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarService, decorators: [{
|
|
392
416
|
type: Injectable,
|
|
393
417
|
args: [{ providedIn: 'root' }]
|
|
394
418
|
}] });
|
|
395
419
|
|
|
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
|
+
|
|
396
432
|
class SidebarMenuComponent {
|
|
397
433
|
#sidebarService;
|
|
398
434
|
#menuStateService;
|
|
@@ -401,6 +437,7 @@ class SidebarMenuComponent {
|
|
|
401
437
|
this.autoCollapse = input(false, ...(ngDevMode ? [{ debugName: "autoCollapse" }] : []));
|
|
402
438
|
this.submenuToggle = output();
|
|
403
439
|
this.itemClick = output();
|
|
440
|
+
this.itemChecked = output();
|
|
404
441
|
this.#sidebarService = inject(SidebarService);
|
|
405
442
|
this.#menuStateService = inject((MenuStateService));
|
|
406
443
|
this.vm = {
|
|
@@ -427,6 +464,13 @@ class SidebarMenuComponent {
|
|
|
427
464
|
this.menuItems.update((items) => selectMenuItem(selectedItem.id, items));
|
|
428
465
|
}
|
|
429
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
|
+
});
|
|
430
474
|
}
|
|
431
475
|
#setContainerHeight(height) {
|
|
432
476
|
this.#sidebarService.containerHeight = height;
|
|
@@ -440,13 +484,13 @@ class SidebarMenuComponent {
|
|
|
440
484
|
this.#sidebarService.scrollDistance = target.scrollTop;
|
|
441
485
|
}
|
|
442
486
|
}
|
|
443
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
444
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
487
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
488
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: SidebarMenuComponent, isStandalone: true, selector: "aside[kirby-x-sidebar-menu]", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, autoCollapse: { classPropertyName: "autoCollapse", publicName: "autoCollapse", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItems: "menuItemsChange", submenuToggle: "submenuToggle", itemClick: "itemClick", itemChecked: "itemChecked" }, 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 [items]=\"vm.items()\"\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", inputs: ["items"] }] }); }
|
|
445
489
|
}
|
|
446
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
490
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarMenuComponent, decorators: [{
|
|
447
491
|
type: Component,
|
|
448
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 [items]=\"vm.items()\"\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"] }]
|
|
449
|
-
}], ctorParameters: () => [], propDecorators: { menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: true }] }, { type: i0.Output, args: ["menuItemsChange"] }], autoCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCollapse", required: false }] }], submenuToggle: [{ type: i0.Output, args: ["submenuToggle"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
|
|
493
|
+
}], ctorParameters: () => [], propDecorators: { menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: true }] }, { type: i0.Output, args: ["menuItemsChange"] }], autoCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCollapse", required: false }] }], submenuToggle: [{ type: i0.Output, args: ["submenuToggle"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], itemChecked: [{ type: i0.Output, args: ["itemChecked"] }] } });
|
|
450
494
|
|
|
451
495
|
class SidebarComponent {
|
|
452
496
|
constructor() {
|
|
@@ -454,6 +498,7 @@ class SidebarComponent {
|
|
|
454
498
|
this.menuItemsChange = new EventEmitter();
|
|
455
499
|
this.afterMenuClicked = new EventEmitter();
|
|
456
500
|
this.afterMenuToggled = new EventEmitter();
|
|
501
|
+
this.itemChecked = new EventEmitter();
|
|
457
502
|
/**
|
|
458
503
|
* @deprecated has not had an effect for a long time
|
|
459
504
|
*/
|
|
@@ -468,8 +513,8 @@ class SidebarComponent {
|
|
|
468
513
|
this.menuItemsChange.emit(this.menuItems);
|
|
469
514
|
this.menuItemsChanged.emit(this.menuItems);
|
|
470
515
|
}
|
|
471
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
472
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
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: `
|
|
473
518
|
<aside
|
|
474
519
|
kirby-x-sidebar-menu
|
|
475
520
|
[menuItems]="menuItems"
|
|
@@ -477,13 +522,14 @@ class SidebarComponent {
|
|
|
477
522
|
(menuItemsChange)="changeMenuItems($event)"
|
|
478
523
|
(itemClick)="afterMenuClicked.emit($event)"
|
|
479
524
|
(submenuToggle)="afterMenuToggled.emit($event)"
|
|
525
|
+
(itemChecked)="itemChecked.emit($event)"
|
|
480
526
|
>
|
|
481
527
|
<ng-content select="kirby-x-sidebar-header" slot="header"></ng-content>
|
|
482
528
|
<ng-content select="kirby-x-sidebar-footer" slot="footer"></ng-content>
|
|
483
529
|
</aside>
|
|
484
|
-
`, isInline: true, dependencies: [{ kind: "component", type: SidebarMenuComponent, selector: "aside[kirby-x-sidebar-menu]", inputs: ["menuItems", "autoCollapse"], outputs: ["menuItemsChange", "submenuToggle", "itemClick"] }] }); }
|
|
530
|
+
`, isInline: true, dependencies: [{ kind: "component", type: SidebarMenuComponent, selector: "aside[kirby-x-sidebar-menu]", inputs: ["menuItems", "autoCollapse"], outputs: ["menuItemsChange", "submenuToggle", "itemClick", "itemChecked"] }] }); }
|
|
485
531
|
}
|
|
486
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
532
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
487
533
|
type: Component,
|
|
488
534
|
args: [{
|
|
489
535
|
selector: 'kirby-x-sidebar',
|
|
@@ -495,6 +541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
|
|
|
495
541
|
(menuItemsChange)="changeMenuItems($event)"
|
|
496
542
|
(itemClick)="afterMenuClicked.emit($event)"
|
|
497
543
|
(submenuToggle)="afterMenuToggled.emit($event)"
|
|
544
|
+
(itemChecked)="itemChecked.emit($event)"
|
|
498
545
|
>
|
|
499
546
|
<ng-content select="kirby-x-sidebar-header" slot="header"></ng-content>
|
|
500
547
|
<ng-content select="kirby-x-sidebar-footer" slot="footer"></ng-content>
|
|
@@ -512,6 +559,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
|
|
|
512
559
|
type: Output
|
|
513
560
|
}], afterMenuToggled: [{
|
|
514
561
|
type: Output
|
|
562
|
+
}], itemChecked: [{
|
|
563
|
+
type: Output
|
|
515
564
|
}], expandIconOnHover: [{
|
|
516
565
|
type: Input
|
|
517
566
|
}], menuItemsChanged: [{
|
|
@@ -519,17 +568,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
|
|
|
519
568
|
}] } });
|
|
520
569
|
|
|
521
570
|
class SidebarFooterComponent {
|
|
522
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
523
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
571
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
572
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", 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"] }); }
|
|
524
573
|
}
|
|
525
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
574
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarFooterComponent, decorators: [{
|
|
526
575
|
type: Component,
|
|
527
576
|
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"] }]
|
|
528
577
|
}] });
|
|
529
578
|
|
|
530
579
|
class SidebarHeaderComponent {
|
|
531
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
532
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
580
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
581
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SidebarHeaderComponent, isStandalone: true, selector: "kirby-x-sidebar-header", ngImport: i0, template: `
|
|
533
582
|
<header>
|
|
534
583
|
<span class="sidebar-logo"><ng-content slot="logo"></ng-content></span>
|
|
535
584
|
<div class="action-bar">
|
|
@@ -538,7 +587,7 @@ class SidebarHeaderComponent {
|
|
|
538
587
|
</header>
|
|
539
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]{height:inherit}:host::ng-deep [slot=logo] img{object-fit:contain;width:100%;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"] }); }
|
|
540
589
|
}
|
|
541
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
590
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarHeaderComponent, decorators: [{
|
|
542
591
|
type: Component,
|
|
543
592
|
args: [{ selector: 'kirby-x-sidebar-header', template: `
|
|
544
593
|
<header>
|
|
@@ -551,11 +600,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
|
|
|
551
600
|
}] });
|
|
552
601
|
|
|
553
602
|
class SidebarModule {
|
|
554
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
555
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.
|
|
556
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.
|
|
603
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
604
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SidebarModule, imports: [SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent], exports: [SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent] }); }
|
|
605
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarModule, imports: [SidebarComponent] }); }
|
|
557
606
|
}
|
|
558
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
607
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarModule, decorators: [{
|
|
559
608
|
type: NgModule,
|
|
560
609
|
args: [{
|
|
561
610
|
imports: [SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent],
|