@kirbydesign/extensions-angular 5.0.1-dev-85b2964 → 5.0.1-dev-9d936c8
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/combobox/package.json +4 -0
- package/fesm2022/kirbydesign-extensions-angular-combobox.mjs +5 -5
- package/fesm2022/kirbydesign-extensions-angular-combobox.mjs.map +1 -1
- package/fesm2022/kirbydesign-extensions-angular-image-banner.mjs +7 -7
- 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 +84 -114
- package/fesm2022/kirbydesign-extensions-angular-sidebar-menu.mjs.map +1 -1
- package/fesm2022/kirbydesign-extensions-angular-skeleton-loader.mjs +14 -10
- package/fesm2022/kirbydesign-extensions-angular-skeleton-loader.mjs.map +1 -1
- package/fesm2022/kirbydesign-extensions-angular-spot-illustration.mjs +9 -13
- package/fesm2022/kirbydesign-extensions-angular-spot-illustration.mjs.map +1 -1
- package/image-banner/package.json +4 -0
- package/localization/package.json +4 -0
- package/package.json +16 -20
- package/sidebar-menu/package.json +4 -0
- package/skeleton-loader/package.json +4 -0
- package/spot-illustration/package.json +4 -0
- package/types/kirbydesign-extensions-angular-skeleton-loader.d.ts +4 -3
|
@@ -34,10 +34,10 @@ class HeightObserverDirective {
|
|
|
34
34
|
this.#observer.unobserve(this.#element);
|
|
35
35
|
this.#observer.disconnect();
|
|
36
36
|
}
|
|
37
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
38
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
37
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: HeightObserverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
38
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: HeightObserverDirective, isStandalone: true, selector: "[kirbyXHeightObserver]", outputs: { heightChange: "heightChange" }, ngImport: i0 }); }
|
|
39
39
|
}
|
|
40
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
40
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: HeightObserverDirective, decorators: [{
|
|
41
41
|
type: Directive,
|
|
42
42
|
args: [{
|
|
43
43
|
selector: '[kirbyXHeightObserver]',
|
|
@@ -45,22 +45,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
45
45
|
}], ctorParameters: () => [], propDecorators: { heightChange: [{ type: i0.Output, args: ["heightChange"] }] } });
|
|
46
46
|
|
|
47
47
|
class SidebarService {
|
|
48
|
-
#menuHeight = signal(0, /*
|
|
49
|
-
...(ngDevMode ? [{ debugName: "#
|
|
50
|
-
#
|
|
51
|
-
...(ngDevMode ? [{ debugName: "#
|
|
52
|
-
#
|
|
53
|
-
...(ngDevMode ? [{ debugName: "#
|
|
54
|
-
#
|
|
55
|
-
...(ngDevMode ? [{ debugName: "#
|
|
56
|
-
#hasScrollbar = computed(() => this.#scrollableDistance() > 0, /* @ts-ignore */
|
|
57
|
-
...(ngDevMode ? [{ debugName: "#hasScrollbar" }] : /* istanbul ignore next */ []));
|
|
58
|
-
#notAtBottom = computed(() => this.#scrollDistance() < this.#scrollableDistance(), /* @ts-ignore */
|
|
59
|
-
...(ngDevMode ? [{ debugName: "#notAtBottom" }] : /* istanbul ignore next */ []));
|
|
60
|
-
#showHeaderBottomBorder = computed(() => this.#scrollDistance() > 0, /* @ts-ignore */
|
|
61
|
-
...(ngDevMode ? [{ debugName: "#showHeaderBottomBorder" }] : /* istanbul ignore next */ []));
|
|
62
|
-
#showFooterTopBorder = computed(() => this.#hasScrollbar() && this.#notAtBottom(), /* @ts-ignore */
|
|
63
|
-
...(ngDevMode ? [{ debugName: "#showFooterTopBorder" }] : /* istanbul ignore next */ []));
|
|
48
|
+
#menuHeight = signal(0, ...(ngDevMode ? [{ debugName: "#menuHeight" }] : /* istanbul ignore next */ []));
|
|
49
|
+
#containerHeight = signal(0, ...(ngDevMode ? [{ debugName: "#containerHeight" }] : /* istanbul ignore next */ []));
|
|
50
|
+
#scrollDistance = signal(0, ...(ngDevMode ? [{ debugName: "#scrollDistance" }] : /* istanbul ignore next */ []));
|
|
51
|
+
#scrollableDistance = computed(() => Math.max(0, this.#menuHeight() - this.#containerHeight()), ...(ngDevMode ? [{ debugName: "#scrollableDistance" }] : /* istanbul ignore next */ []));
|
|
52
|
+
#hasScrollbar = computed(() => this.#scrollableDistance() > 0, ...(ngDevMode ? [{ debugName: "#hasScrollbar" }] : /* istanbul ignore next */ []));
|
|
53
|
+
#notAtBottom = computed(() => this.#scrollDistance() < this.#scrollableDistance(), ...(ngDevMode ? [{ debugName: "#notAtBottom" }] : /* istanbul ignore next */ []));
|
|
54
|
+
#showHeaderBottomBorder = computed(() => this.#scrollDistance() > 0, ...(ngDevMode ? [{ debugName: "#showHeaderBottomBorder" }] : /* istanbul ignore next */ []));
|
|
55
|
+
#showFooterTopBorder = computed(() => this.#hasScrollbar() && this.#notAtBottom(), ...(ngDevMode ? [{ debugName: "#showFooterTopBorder" }] : /* istanbul ignore next */ []));
|
|
64
56
|
get showHeaderBottomBorder() {
|
|
65
57
|
return this.#showHeaderBottomBorder;
|
|
66
58
|
}
|
|
@@ -76,10 +68,10 @@ class SidebarService {
|
|
|
76
68
|
set scrollDistance(distance) {
|
|
77
69
|
this.#scrollDistance.set(distance);
|
|
78
70
|
}
|
|
79
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
80
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
71
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
72
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarService, providedIn: 'root' }); }
|
|
81
73
|
}
|
|
82
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
74
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarService, decorators: [{
|
|
83
75
|
type: Injectable,
|
|
84
76
|
args: [{ providedIn: 'root' }]
|
|
85
77
|
}] });
|
|
@@ -104,30 +96,30 @@ class SidebarContainerComponent {
|
|
|
104
96
|
this.#sidebarService.scrollDistance = target.scrollTop;
|
|
105
97
|
}
|
|
106
98
|
}
|
|
107
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
108
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
99
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
100
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: SidebarContainerComponent, isStandalone: true, selector: "aside[kirby-x-sidebar-container]", 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 cdkScrollable\n (scroll)=\"vm.setScroll($event)\"\n (heightChange)=\"vm.setContainerHeight($event)\"\n>\n <ng-content select=\"[slot='content']\"></ng-content>\n</div>\n<div class=\"sidebar-footer\" [class.top-border]=\"vm.showFooterTopBorder()\">\n <ng-content select=\"[slot='footer']\"></ng-content>\n</div>\n", styles: [":host{height:100%;height:100dvh;background-color:var(--sidebar-background-color, var(--kirby-color-fill-base));color:var(--sidebar-color, var(--kirby-color-content-base));display:flex;flex-direction:column}:host *{scrollbar-width:thin;scrollbar-color:var(--kirby-color-content-base-quiet) var(--kirby-color-fill-base)}:host *::-webkit-scrollbar{width:16px}:host *::-webkit-scrollbar-track{background:transparent}:host *::-webkit-scrollbar-thumb{background-color:color-mix(in srgb,var(--kirby-color-content-base-quiet) 50%,transparent);border-radius:20px;border:4px solid transparent;background-clip:content-box}.sidebar-content{flex-grow:1;min-height:0;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;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative}.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: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] }); }
|
|
109
101
|
}
|
|
110
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
102
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarContainerComponent, decorators: [{
|
|
111
103
|
type: Component,
|
|
112
|
-
args: [{ selector: 'aside[kirby-x-sidebar-container]', imports: [HeightObserverDirective, CdkScrollable], 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 cdkScrollable\n (scroll)=\"vm.setScroll($event)\"\n (heightChange)=\"vm.setContainerHeight($event)\"\n>\n <ng-content select=\"[slot='content']\"></ng-content>\n</div>\n<div class=\"sidebar-footer\" [class.top-border]=\"vm.showFooterTopBorder()\">\n <ng-content select=\"[slot='footer']\"></ng-content>\n</div>\n", styles: ["
|
|
104
|
+
args: [{ selector: 'aside[kirby-x-sidebar-container]', imports: [HeightObserverDirective, CdkScrollable], 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 cdkScrollable\n (scroll)=\"vm.setScroll($event)\"\n (heightChange)=\"vm.setContainerHeight($event)\"\n>\n <ng-content select=\"[slot='content']\"></ng-content>\n</div>\n<div class=\"sidebar-footer\" [class.top-border]=\"vm.showFooterTopBorder()\">\n <ng-content select=\"[slot='footer']\"></ng-content>\n</div>\n", styles: [":host{height:100%;height:100dvh;background-color:var(--sidebar-background-color, var(--kirby-color-fill-base));color:var(--sidebar-color, var(--kirby-color-content-base));display:flex;flex-direction:column}:host *{scrollbar-width:thin;scrollbar-color:var(--kirby-color-content-base-quiet) var(--kirby-color-fill-base)}:host *::-webkit-scrollbar{width:16px}:host *::-webkit-scrollbar-track{background:transparent}:host *::-webkit-scrollbar-thumb{background-color:color-mix(in srgb,var(--kirby-color-content-base-quiet) 50%,transparent);border-radius:20px;border:4px solid transparent;background-clip:content-box}.sidebar-content{flex-grow:1;min-height:0;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;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative}.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"] }]
|
|
113
105
|
}] });
|
|
114
106
|
|
|
115
107
|
class SidebarComponent {
|
|
116
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
117
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
118
|
-
<aside kirby-x-sidebar-container>
|
|
108
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
109
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: SidebarComponent, isStandalone: true, selector: "kirby-x-sidebar", ngImport: i0, template: `
|
|
110
|
+
<aside kirby-x-sidebar-container class="kirby-surface-brand">
|
|
119
111
|
<ng-content select="kirby-x-sidebar-header" slot="header"></ng-content>
|
|
120
112
|
<ng-content slot="content"></ng-content>
|
|
121
113
|
<ng-content select="kirby-x-sidebar-footer" slot="footer"></ng-content>
|
|
122
114
|
</aside>
|
|
123
115
|
`, isInline: true, dependencies: [{ kind: "component", type: SidebarContainerComponent, selector: "aside[kirby-x-sidebar-container]" }] }); }
|
|
124
116
|
}
|
|
125
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
117
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
126
118
|
type: Component,
|
|
127
119
|
args: [{
|
|
128
120
|
selector: 'kirby-x-sidebar',
|
|
129
121
|
template: `
|
|
130
|
-
<aside kirby-x-sidebar-container>
|
|
122
|
+
<aside kirby-x-sidebar-container class="kirby-surface-brand">
|
|
131
123
|
<ng-content select="kirby-x-sidebar-header" slot="header"></ng-content>
|
|
132
124
|
<ng-content slot="content"></ng-content>
|
|
133
125
|
<ng-content select="kirby-x-sidebar-footer" slot="footer"></ng-content>
|
|
@@ -138,17 +130,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
138
130
|
}] });
|
|
139
131
|
|
|
140
132
|
class SidebarFooterComponent {
|
|
141
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
142
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
133
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
134
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", 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;width:100%}:host{min-height:80px}\n"] }); }
|
|
143
135
|
}
|
|
144
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarFooterComponent, decorators: [{
|
|
145
137
|
type: Component,
|
|
146
138
|
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;width:100%}:host{min-height:80px}\n"] }]
|
|
147
139
|
}] });
|
|
148
140
|
|
|
149
141
|
class SidebarHeaderComponent {
|
|
150
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
151
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
142
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
143
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: SidebarHeaderComponent, isStandalone: true, selector: "kirby-x-sidebar-header", ngImport: i0, template: `
|
|
152
144
|
<header>
|
|
153
145
|
<span class="sidebar-logo"><ng-content select="[slot='logo']"></ng-content></span>
|
|
154
146
|
<div class="action-bar">
|
|
@@ -157,7 +149,7 @@ class SidebarHeaderComponent {
|
|
|
157
149
|
</header>
|
|
158
150
|
`, isInline: true, styles: [":host,header{display:flex;flex-direction:column;align-items:center;justify-content:center;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"] }); }
|
|
159
151
|
}
|
|
160
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
152
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarHeaderComponent, decorators: [{
|
|
161
153
|
type: Component,
|
|
162
154
|
args: [{ selector: 'kirby-x-sidebar-header', template: `
|
|
163
155
|
<header>
|
|
@@ -187,39 +179,29 @@ function scrollIntoViewIfNecessary(scrollContainer, child, position = 'center')
|
|
|
187
179
|
|
|
188
180
|
class MenuItemComponent {
|
|
189
181
|
constructor() {
|
|
190
|
-
this.id = input.required(/*
|
|
191
|
-
...(ngDevMode ? [{ debugName: "
|
|
192
|
-
this.
|
|
193
|
-
...(ngDevMode ? [{ debugName: "
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
|
|
198
|
-
}
|
|
199
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
200
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", 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: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;flex-direction:row;flex-grow:1;align-items:center;align-self:stretch;box-sizing:border-box;min-height:var(--kirby-spacing-l);border-radius:var(--kirby-border-radius-s);padding:var(--kirby-spacing-xxxs) var(--kirby-spacing-xs);gap:var(--kirby-spacing-xxs);border:none;background:inherit;font:inherit;color:inherit;text-decoration:none;cursor:pointer}:host.lg{min-height:var(--kirby-spacing-xl)}: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{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none}:host-context(.cdk-drag-preview){transform:scale(1.05);transition:transform .2s ease;border-radius:var(--kirby-border-radius-s)}:host-context(.cdk-drag-preview):before{content:\"\";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--menuitem-active-background-color, var(--kirby-inputs-background-color-active))}:host-context(.cdk-drag-preview).selected:before{display:none}:host-context(.cdk-drag-preview):not(.selected){background:var(--sidebar-background-color, var(--kirby-tertiary))}.menu-item-start{display:flex;align-items:center;justify-content:center;flex-shrink:0}.menu-item-start.lg,.menu-item-start.md{width:var(--kirby-icon-font-size-sm);height:var(--kirby-icon-font-size-sm)}.menu-item-start.sm,.menu-item-start.xs{width:var(--kirby-icon-font-size-xs);height:var(--kirby-icon-font-size-xs)}.menu-item-start.sm{padding-left:var(--kirby-spacing-l)}.menu-item-start.xs{padding-left:var(--kirby-spacing-xxxl)}.menu-item-content{display:flex;flex-grow:1;align-items:center;text-align:left;word-break:break-word;hyphens:auto;hyphenate-limit-chars:10 4 4;font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-m)}.menu-item-end{display:inline-flex;min-width:var(--kirby-icon-font-size-sm);align-items:center;justify-content:center;gap:var(--kirby-spacing-xxs)}.menu-item-end:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: IconModule }, { kind: "component", type: i1.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }] }); }
|
|
182
|
+
this.id = input.required(...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
183
|
+
this.size = input.required(...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
184
|
+
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
185
|
+
this.iconSize = computed(() => (this.size() === 'lg' ? 'sm' : 'xs'), ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
|
|
186
|
+
}
|
|
187
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
188
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", 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: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;flex-direction:row;flex-grow:1;align-items:center;align-self:stretch;box-sizing:border-box;min-height:var(--kirby-spacing-l);border-radius:var(--kirby-border-radius-s);padding:var(--kirby-spacing-xxxs) var(--kirby-spacing-xs);gap:var(--kirby-spacing-xxs);border:none;background:inherit;font:inherit;color:inherit;text-decoration:none;cursor:pointer}:host.lg{min-height:var(--kirby-spacing-xl)}:host:hover{background:var(--menuitem-hover-background-color, var(--kirby-color-fill-base-hover))}:host:active{background:var(--menuitem-active-background-color, var(--kirby-color-fill-base-active))}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none}:host-context(.cdk-drag-preview){transform:scale(1.05);transition:transform .2s ease;border-radius:var(--kirby-border-radius-s)}:host-context(.cdk-drag-preview):before{content:\"\";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--menuitem-active-background-color, var(--kirby-color-fill-base-active))}:host-context(.cdk-drag-preview).selected:before{display:none}:host-context(.cdk-drag-preview):not(.selected){background:var(--sidebar-background-color, var(--kirby-color-fill-base))}.menu-item-start{display:flex;align-items:center;justify-content:center;flex-shrink:0}.menu-item-start.lg,.menu-item-start.md{width:var(--kirby-icon-font-size-sm);height:var(--kirby-icon-font-size-sm)}.menu-item-start.sm,.menu-item-start.xs{width:var(--kirby-icon-font-size-xs);height:var(--kirby-icon-font-size-xs)}.menu-item-start.sm{padding-left:var(--kirby-spacing-l)}.menu-item-start.xs{padding-left:var(--kirby-spacing-xxxl)}.menu-item-content{display:flex;flex-grow:1;align-items:center;text-align:left;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4;font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-m)}.menu-item-end{display:inline-flex;min-width:var(--kirby-icon-font-size-sm);align-items:center;justify-content:center;gap:var(--kirby-spacing-xxs)}.menu-item-end:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: IconModule }, { kind: "component", type: i1.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }] }); }
|
|
201
189
|
}
|
|
202
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
190
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuItemComponent, decorators: [{
|
|
203
191
|
type: Component,
|
|
204
192
|
args: [{ selector: 'a[kirby-x-menu-item],button[kirby-x-menu-item]', host: {
|
|
205
193
|
'[attr.id]': '"item" + id()',
|
|
206
194
|
'[class]': 'size()',
|
|
207
|
-
}, 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: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;flex-direction:row;flex-grow:1;align-items:center;align-self:stretch;box-sizing:border-box;min-height:var(--kirby-spacing-l);border-radius:var(--kirby-border-radius-s);padding:var(--kirby-spacing-xxxs) var(--kirby-spacing-xs);gap:var(--kirby-spacing-xxs);border:none;background:inherit;font:inherit;color:inherit;text-decoration:none;cursor:pointer}:host.lg{min-height:var(--kirby-spacing-xl)}:host:hover{background:var(--menuitem-hover-background-color, var(--kirby-
|
|
195
|
+
}, 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: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;flex-direction:row;flex-grow:1;align-items:center;align-self:stretch;box-sizing:border-box;min-height:var(--kirby-spacing-l);border-radius:var(--kirby-border-radius-s);padding:var(--kirby-spacing-xxxs) var(--kirby-spacing-xs);gap:var(--kirby-spacing-xxs);border:none;background:inherit;font:inherit;color:inherit;text-decoration:none;cursor:pointer}:host.lg{min-height:var(--kirby-spacing-xl)}:host:hover{background:var(--menuitem-hover-background-color, var(--kirby-color-fill-base-hover))}:host:active{background:var(--menuitem-active-background-color, var(--kirby-color-fill-base-active))}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none}:host-context(.cdk-drag-preview){transform:scale(1.05);transition:transform .2s ease;border-radius:var(--kirby-border-radius-s)}:host-context(.cdk-drag-preview):before{content:\"\";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--menuitem-active-background-color, var(--kirby-color-fill-base-active))}:host-context(.cdk-drag-preview).selected:before{display:none}:host-context(.cdk-drag-preview):not(.selected){background:var(--sidebar-background-color, var(--kirby-color-fill-base))}.menu-item-start{display:flex;align-items:center;justify-content:center;flex-shrink:0}.menu-item-start.lg,.menu-item-start.md{width:var(--kirby-icon-font-size-sm);height:var(--kirby-icon-font-size-sm)}.menu-item-start.sm,.menu-item-start.xs{width:var(--kirby-icon-font-size-xs);height:var(--kirby-icon-font-size-xs)}.menu-item-start.sm{padding-left:var(--kirby-spacing-l)}.menu-item-start.xs{padding-left:var(--kirby-spacing-xxxl)}.menu-item-content{display:flex;flex-grow:1;align-items:center;text-align:left;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4;font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-m)}.menu-item-end{display:inline-flex;min-width:var(--kirby-icon-font-size-sm);align-items:center;justify-content:center;gap:var(--kirby-spacing-xxs)}.menu-item-end:empty{display:none}\n"] }]
|
|
208
196
|
}], 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 }] }] } });
|
|
209
197
|
|
|
210
198
|
class MenuStateService {
|
|
211
|
-
#menuItems = signal([], /*
|
|
212
|
-
...(ngDevMode ? [{ debugName: "#
|
|
213
|
-
#
|
|
214
|
-
...(ngDevMode ? [{ debugName: "#
|
|
215
|
-
#
|
|
216
|
-
...(ngDevMode ? [{ debugName: "#
|
|
217
|
-
#checkedItems = signal(new Set(), /* @ts-ignore */
|
|
218
|
-
...(ngDevMode ? [{ debugName: "#checkedItems" }] : /* istanbul ignore next */ []));
|
|
219
|
-
#autoCollapse = signal(false, /* @ts-ignore */
|
|
220
|
-
...(ngDevMode ? [{ debugName: "#autoCollapse" }] : /* istanbul ignore next */ []));
|
|
221
|
-
#animationsDisabled = signal(false, /* @ts-ignore */
|
|
222
|
-
...(ngDevMode ? [{ debugName: "#animationsDisabled" }] : /* istanbul ignore next */ []));
|
|
199
|
+
#menuItems = signal([], ...(ngDevMode ? [{ debugName: "#menuItems" }] : /* istanbul ignore next */ []));
|
|
200
|
+
#selectedItem = signal(undefined, ...(ngDevMode ? [{ debugName: "#selectedItem" }] : /* istanbul ignore next */ []));
|
|
201
|
+
#expandedItems = signal(new Set(), ...(ngDevMode ? [{ debugName: "#expandedItems" }] : /* istanbul ignore next */ []));
|
|
202
|
+
#checkedItems = signal(new Set(), ...(ngDevMode ? [{ debugName: "#checkedItems" }] : /* istanbul ignore next */ []));
|
|
203
|
+
#autoCollapse = signal(false, ...(ngDevMode ? [{ debugName: "#autoCollapse" }] : /* istanbul ignore next */ []));
|
|
204
|
+
#animationsDisabled = signal(false, ...(ngDevMode ? [{ debugName: "#animationsDisabled" }] : /* istanbul ignore next */ []));
|
|
223
205
|
#expandEvents = new Subject();
|
|
224
206
|
#checkEvents = new Subject();
|
|
225
207
|
#reorderEvents = new Subject();
|
|
@@ -319,10 +301,10 @@ class MenuStateService {
|
|
|
319
301
|
});
|
|
320
302
|
this.#menuItems.update((items) => [...items]);
|
|
321
303
|
}
|
|
322
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
323
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
304
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
305
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuStateService, providedIn: 'root' }); }
|
|
324
306
|
}
|
|
325
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
307
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuStateService, decorators: [{
|
|
326
308
|
type: Injectable,
|
|
327
309
|
args: [{ providedIn: 'root' }]
|
|
328
310
|
}] });
|
|
@@ -344,19 +326,15 @@ function recursivelyFindAncestors(items, id) {
|
|
|
344
326
|
|
|
345
327
|
class MenuAnchorItemComponent {
|
|
346
328
|
constructor() {
|
|
347
|
-
this.item = input.required(/*
|
|
348
|
-
...(ngDevMode ? [{ debugName: "
|
|
349
|
-
this.size = input.required(/* @ts-ignore */
|
|
350
|
-
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
329
|
+
this.item = input.required(...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
|
|
330
|
+
this.size = input.required(...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
351
331
|
this.#stateService = inject(MenuStateService);
|
|
352
|
-
this.#isSelected = computed(() => this.item().id === this.#stateService.selectedItem(), /*
|
|
353
|
-
...(ngDevMode ? [{ debugName: "#isSelected" }] : /* istanbul ignore next */ []));
|
|
332
|
+
this.#isSelected = computed(() => this.item().id === this.#stateService.selectedItem(), ...(ngDevMode ? [{ debugName: "#isSelected" }] : /* istanbul ignore next */ []));
|
|
354
333
|
this.#isChecked = computed(() => {
|
|
355
334
|
const id = this.item().id;
|
|
356
335
|
const checkedItems = this.#stateService.checkedItems();
|
|
357
336
|
return checkedItems.has(id);
|
|
358
|
-
}, /*
|
|
359
|
-
...(ngDevMode ? [{ debugName: "#isChecked" }] : /* istanbul ignore next */ []));
|
|
337
|
+
}, ...(ngDevMode ? [{ debugName: "#isChecked" }] : /* istanbul ignore next */ []));
|
|
360
338
|
this.vm = {
|
|
361
339
|
item: this.item,
|
|
362
340
|
size: this.size,
|
|
@@ -380,10 +358,10 @@ class MenuAnchorItemComponent {
|
|
|
380
358
|
this.#stateService.uncheckItem(this.item().id);
|
|
381
359
|
}
|
|
382
360
|
}
|
|
383
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
384
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
361
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuAnchorItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
362
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", 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.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.isLink) {\n <kirby-icon name=\"link\" slot=\"end\" class=\"external-link\"></kirby-icon>\n }\n @if (item.toggle) {\n <div slot=\"end\" class=\"toggle-spacer\"></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\"></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 <kirby-icon name=\"link\" slot=\"end\" class=\"external-link\"></kirby-icon>\n @if (item.toggle) {\n <div slot=\"end\" class=\"toggle-spacer\"></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\"\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\"\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;overflow:visible}:host:not(.selected):hover a{background:var(--menuitem-hover-background-color, var(--kirby-color-fill-base-hover))}:host:not(.selected):active a{background:var(--menuitem-active-background-color, var(--kirby-color-fill-base-active))}.selected,.selected:hover,.selected:active,.selected:focus-visible{background:var(--menuitem-selected-background-color, var(--kirby-color-fill-brand-loud));color:var(--menuitem-selected-color, var(--kirby-color-content-brand-loud));font-weight:var(--kirby-font-weight-bold)}.item-badge{display:inline-flex}.toggle-spacer{width:var(--kirby-icon-font-size-sm);display:none}:host.has-toggle:hover .item-badge,:host.has-toggle:active .item-badge,:host.has-toggle:has(a:focus-visible) .item-badge,:host.has-toggle:has(.toggle-button:focus-visible) .item-badge{display:none}:host.has-toggle:hover .toggle-spacer,:host.has-toggle:active .toggle-spacer,:host.has-toggle:has(a:focus-visible) .toggle-spacer,:host.has-toggle:has(.toggle-button:focus-visible) .toggle-spacer{display:initial}:host.has-toggle:hover .external-link,:host.has-toggle:active .external-link,:host.has-toggle:has(a:focus-visible) .external-link,:host.has-toggle:has(.toggle-button:focus-visible) .external-link{display:none}.toggle-button-wrapper{display:inline-flex;position:absolute;right:var(--kirby-spacing-xs)}.toggle-button{margin:0;transition:opacity 0ms;--kirby-button-color: inherit}.toggle-button:not(:focus-visible){opacity:0}:host:hover .toggle-button,:host:active .toggle-button,:host:has(a:focus-visible) .toggle-button{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"] }] }); }
|
|
385
363
|
}
|
|
386
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
364
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuAnchorItemComponent, decorators: [{
|
|
387
365
|
type: Component,
|
|
388
366
|
args: [{ selector: 'li[kirby-x-menu-anchor-item]', host: {
|
|
389
367
|
'[class.selected]': 'vm.isSelected()',
|
|
@@ -396,7 +374,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
396
374
|
ButtonComponent,
|
|
397
375
|
IconComponent,
|
|
398
376
|
BadgeComponent,
|
|
399
|
-
], 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.isLink) {\n <kirby-icon name=\"link\" slot=\"end\" class=\"external-link\"></kirby-icon>\n }\n @if (item.toggle) {\n <div slot=\"end\" class=\"toggle-spacer\"></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\"></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 <kirby-icon name=\"link\" slot=\"end\" class=\"external-link\"></kirby-icon>\n @if (item.toggle) {\n <div slot=\"end\" class=\"toggle-spacer\"></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\"\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\"\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;overflow:visible}:host
|
|
377
|
+
], 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.isLink) {\n <kirby-icon name=\"link\" slot=\"end\" class=\"external-link\"></kirby-icon>\n }\n @if (item.toggle) {\n <div slot=\"end\" class=\"toggle-spacer\"></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\"></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 <kirby-icon name=\"link\" slot=\"end\" class=\"external-link\"></kirby-icon>\n @if (item.toggle) {\n <div slot=\"end\" class=\"toggle-spacer\"></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\"\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\"\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;overflow:visible}:host:not(.selected):hover a{background:var(--menuitem-hover-background-color, var(--kirby-color-fill-base-hover))}:host:not(.selected):active a{background:var(--menuitem-active-background-color, var(--kirby-color-fill-base-active))}.selected,.selected:hover,.selected:active,.selected:focus-visible{background:var(--menuitem-selected-background-color, var(--kirby-color-fill-brand-loud));color:var(--menuitem-selected-color, var(--kirby-color-content-brand-loud));font-weight:var(--kirby-font-weight-bold)}.item-badge{display:inline-flex}.toggle-spacer{width:var(--kirby-icon-font-size-sm);display:none}:host.has-toggle:hover .item-badge,:host.has-toggle:active .item-badge,:host.has-toggle:has(a:focus-visible) .item-badge,:host.has-toggle:has(.toggle-button:focus-visible) .item-badge{display:none}:host.has-toggle:hover .toggle-spacer,:host.has-toggle:active .toggle-spacer,:host.has-toggle:has(a:focus-visible) .toggle-spacer,:host.has-toggle:has(.toggle-button:focus-visible) .toggle-spacer{display:initial}:host.has-toggle:hover .external-link,:host.has-toggle:active .external-link,:host.has-toggle:has(a:focus-visible) .external-link,:host.has-toggle:has(.toggle-button:focus-visible) .external-link{display:none}.toggle-button-wrapper{display:inline-flex;position:absolute;right:var(--kirby-spacing-xs)}.toggle-button{margin:0;transition:opacity 0ms;--kirby-button-color: inherit}.toggle-button:not(:focus-visible){opacity:0}:host:hover .toggle-button,:host:active .toggle-button,:host:has(a:focus-visible) .toggle-button{opacity:1}\n"] }]
|
|
400
378
|
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }] } });
|
|
401
379
|
|
|
402
380
|
/**
|
|
@@ -430,18 +408,15 @@ const DropDownAnimation = trigger('dropDownMenu', [
|
|
|
430
408
|
|
|
431
409
|
class MenuSubmenuItemComponent {
|
|
432
410
|
constructor() {
|
|
433
|
-
this.item = input.required(/*
|
|
434
|
-
...(ngDevMode ? [{ debugName: "
|
|
435
|
-
this.size = input.required(/* @ts-ignore */
|
|
436
|
-
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
411
|
+
this.item = input.required(...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
|
|
412
|
+
this.size = input.required(...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
437
413
|
this.#element = inject(ElementRef).nativeElement;
|
|
438
414
|
this.#stateService = inject(MenuStateService);
|
|
439
415
|
this.#isExpanded = computed(() => {
|
|
440
416
|
const id = this.item().id;
|
|
441
417
|
const expandedItems = this.#stateService.expandedItems();
|
|
442
418
|
return expandedItems.has(id);
|
|
443
|
-
}, /*
|
|
444
|
-
...(ngDevMode ? [{ debugName: "#isExpanded" }] : /* istanbul ignore next */ []));
|
|
419
|
+
}, ...(ngDevMode ? [{ debugName: "#isExpanded" }] : /* istanbul ignore next */ []));
|
|
445
420
|
this.#submenuSize = computed(() => {
|
|
446
421
|
switch (this.size()) {
|
|
447
422
|
case 'lg':
|
|
@@ -451,8 +426,7 @@ class MenuSubmenuItemComponent {
|
|
|
451
426
|
default:
|
|
452
427
|
return 'xs';
|
|
453
428
|
}
|
|
454
|
-
}, /*
|
|
455
|
-
...(ngDevMode ? [{ debugName: "#submenuSize" }] : /* istanbul ignore next */ []));
|
|
429
|
+
}, ...(ngDevMode ? [{ debugName: "#submenuSize" }] : /* istanbul ignore next */ []));
|
|
456
430
|
this.vm = {
|
|
457
431
|
item: this.item,
|
|
458
432
|
size: this.size,
|
|
@@ -484,24 +458,20 @@ class MenuSubmenuItemComponent {
|
|
|
484
458
|
#reorderItem(event) {
|
|
485
459
|
this.#stateService.reorderItems(this.item(), event.item.data, event.previousIndex, event.currentIndex);
|
|
486
460
|
}
|
|
487
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
488
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
461
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuSubmenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
462
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", 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 cdkDropList\n (cdkDropListDropped)=\"vm.reorderItem($event)\"\n [isReorderable]=\"item.isReorderable ?? false\"\n ></ul>\n}\n", styles: [":host{display:flex;overflow:visible;flex-direction:column}.submenu-toggle{width:100%}.submenu-toggle[aria-expanded=true]{font-weight:var(--kirby-font-weight-bold)}.disclosure{transition:transform var(--kirby-transition-duration-quick)}.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", "isReorderable"] }, { kind: "directive", type: i0.forwardRef(() => CdkDropList), selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }], animations: [DropDownAnimation] }); }
|
|
489
463
|
}
|
|
490
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
464
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuSubmenuItemComponent, decorators: [{
|
|
491
465
|
type: Component,
|
|
492
466
|
args: [{ selector: 'li[kirby-x-menu-submenu-item]', animations: [DropDownAnimation], imports: [MenuItemComponent, IconComponent, forwardRef(() => MenuItemListComponent), CdkDropList], 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 cdkDropList\n (cdkDropListDropped)=\"vm.reorderItem($event)\"\n [isReorderable]=\"item.isReorderable ?? false\"\n ></ul>\n}\n", styles: [":host{display:flex;overflow:visible;flex-direction:column}.submenu-toggle{width:100%}.submenu-toggle[aria-expanded=true]{font-weight:var(--kirby-font-weight-bold)}.disclosure{transition:transform var(--kirby-transition-duration-quick)}.disclosure.rotate{transform:rotate(90deg)}\n"] }]
|
|
493
467
|
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }] } });
|
|
494
468
|
|
|
495
469
|
class MenuItemListComponent {
|
|
496
470
|
constructor() {
|
|
497
|
-
this.items = input.required(/*
|
|
498
|
-
...(ngDevMode ? [{ debugName: "
|
|
499
|
-
this.
|
|
500
|
-
...(ngDevMode ? [{ debugName: "
|
|
501
|
-
this.id = input(/* @ts-ignore */
|
|
502
|
-
...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
503
|
-
this.isReorderable = input(false, /* @ts-ignore */
|
|
504
|
-
...(ngDevMode ? [{ debugName: "isReorderable" }] : /* istanbul ignore next */ []));
|
|
471
|
+
this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
472
|
+
this.size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
473
|
+
this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
474
|
+
this.isReorderable = input(false, ...(ngDevMode ? [{ debugName: "isReorderable" }] : /* istanbul ignore next */ []));
|
|
505
475
|
this.vm = {
|
|
506
476
|
id: this.id,
|
|
507
477
|
size: this.size,
|
|
@@ -509,10 +479,10 @@ class MenuItemListComponent {
|
|
|
509
479
|
isReorderable: this.isReorderable,
|
|
510
480
|
};
|
|
511
481
|
}
|
|
512
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
513
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
482
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
483
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", 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 }, isReorderable: { classPropertyName: "isReorderable", publicName: "isReorderable", 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\n kirby-x-menu-submenu-item\n [item]=\"item\"\n [size]=\"vm.size()\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n [cdkDragBoundary]=\"'[cdkDropList]'\"\n [cdkDragDisabled]=\"!vm.isReorderable()\"\n [cdkDragData]=\"item.id\"\n ></li>\n }\n @default {\n <li\n kirby-x-menu-anchor-item\n [item]=\"item\"\n [size]=\"vm.size()\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n [cdkDragBoundary]=\"'[cdkDropList]'\"\n [cdkDragDisabled]=\"!vm.isReorderable()\"\n [cdkDragData]=\"item.id\"\n ></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;margin:var(--kirby-spacing-xxs) 0}li{margin-block-start:0!important}.cdk-drag-placeholder{opacity:0}:host.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-preview,.cdk-drag-placeholder){transition-property:transform;transition-duration:var(--kirby-transition-duration-short);transition-timing-function:var(--kirby-transition-easing-static);pointer-events:none}:host .cdk-drag:not(.cdk-drag-preview,.cdk-drag-placeholder){transition:none}\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"] }, { kind: "directive", type: i0.forwardRef(() => CdkDrag), selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
514
484
|
}
|
|
515
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
485
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuItemListComponent, decorators: [{
|
|
516
486
|
type: Component,
|
|
517
487
|
args: [{ selector: 'ul[kirby-x-menu-item-list]', host: {
|
|
518
488
|
'[attr.id]': 'vm.id()',
|
|
@@ -522,7 +492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
522
492
|
MenuAnchorItemComponent,
|
|
523
493
|
forwardRef(() => MenuSubmenuItemComponent),
|
|
524
494
|
CdkDrag,
|
|
525
|
-
], 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\n kirby-x-menu-submenu-item\n [item]=\"item\"\n [size]=\"vm.size()\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n [cdkDragBoundary]=\"'[cdkDropList]'\"\n [cdkDragDisabled]=\"!vm.isReorderable()\"\n [cdkDragData]=\"item.id\"\n ></li>\n }\n @default {\n <li\n kirby-x-menu-anchor-item\n [item]=\"item\"\n [size]=\"vm.size()\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n [cdkDragBoundary]=\"'[cdkDropList]'\"\n [cdkDragDisabled]=\"!vm.isReorderable()\"\n [cdkDragData]=\"item.id\"\n ></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;
|
|
495
|
+
], 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\n kirby-x-menu-submenu-item\n [item]=\"item\"\n [size]=\"vm.size()\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n [cdkDragBoundary]=\"'[cdkDropList]'\"\n [cdkDragDisabled]=\"!vm.isReorderable()\"\n [cdkDragData]=\"item.id\"\n ></li>\n }\n @default {\n <li\n kirby-x-menu-anchor-item\n [item]=\"item\"\n [size]=\"vm.size()\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n [cdkDragBoundary]=\"'[cdkDropList]'\"\n [cdkDragDisabled]=\"!vm.isReorderable()\"\n [cdkDragData]=\"item.id\"\n ></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;margin:var(--kirby-spacing-xxs) 0}li{margin-block-start:0!important}.cdk-drag-placeholder{opacity:0}:host.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-preview,.cdk-drag-placeholder){transition-property:transform;transition-duration:var(--kirby-transition-duration-short);transition-timing-function:var(--kirby-transition-easing-static);pointer-events:none}:host .cdk-drag:not(.cdk-drag-preview,.cdk-drag-placeholder){transition:none}\n"] }]
|
|
526
496
|
}], 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 }] }], isReorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isReorderable", required: false }] }] } });
|
|
527
497
|
|
|
528
498
|
class MenuContainerComponent {
|
|
@@ -549,14 +519,14 @@ class MenuContainerComponent {
|
|
|
549
519
|
scrollIntoViewIfNecessary(scrollContainer, selectedItem);
|
|
550
520
|
}
|
|
551
521
|
}
|
|
552
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
553
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
522
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
523
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: MenuContainerComponent, isStandalone: true, selector: "kirby-x-menu-container", ngImport: i0, template: `
|
|
554
524
|
<nav aria-label="Sidebar Menu">
|
|
555
525
|
<ul kirby-x-menu-item-list [items]="vm.items()"></ul>
|
|
556
526
|
</nav>
|
|
557
527
|
`, 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", "isReorderable"] }] }); }
|
|
558
528
|
}
|
|
559
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
529
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuContainerComponent, decorators: [{
|
|
560
530
|
type: Component,
|
|
561
531
|
args: [{ selector: 'kirby-x-menu-container', template: `
|
|
562
532
|
<nav aria-label="Sidebar Menu">
|
|
@@ -602,15 +572,15 @@ class SidebarMenuComponent {
|
|
|
602
572
|
effect(() => this.expandedItemsChange.emit(this.#stateService.expandedItems()));
|
|
603
573
|
effect(() => this.checkedItemsChange.emit(this.#stateService.checkedItems()));
|
|
604
574
|
}
|
|
605
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
606
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
575
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
576
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: SidebarMenuComponent, isStandalone: true, selector: "kirby-x-sidebar-menu", inputs: { menuItems: "menuItems", selectedItem: "selectedItem", expandedItems: "expandedItems", checkedItems: "checkedItems", autoCollapse: "autoCollapse" }, outputs: { menuItemsChange: "menuItemsChange", selectedItemChange: "selectedItemChange", expandedItemsChange: "expandedItemsChange", checkedItemsChange: "checkedItemsChange", expandChange: "expandChange", checkChange: "checkChange", itemReorder: "itemReorder", itemSelect: "itemSelect" }, ngImport: i0, template: `
|
|
607
577
|
<kirby-x-menu-container
|
|
608
578
|
kirbyXHeightObserver
|
|
609
579
|
(heightChange)="setMenuHeight($event)"
|
|
610
580
|
></kirby-x-menu-container>
|
|
611
581
|
`, isInline: true, styles: [":host{display:flex;flex-direction:column;width:100%}\n"], dependencies: [{ kind: "component", type: MenuContainerComponent, selector: "kirby-x-menu-container" }, { kind: "directive", type: HeightObserverDirective, selector: "[kirbyXHeightObserver]", outputs: ["heightChange"] }] }); }
|
|
612
582
|
}
|
|
613
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
583
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarMenuComponent, decorators: [{
|
|
614
584
|
type: Component,
|
|
615
585
|
args: [{ selector: 'kirby-x-sidebar-menu', template: `
|
|
616
586
|
<kirby-x-menu-container
|
|
@@ -647,20 +617,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
647
617
|
}] } });
|
|
648
618
|
|
|
649
619
|
class SidebarMenuLoaderComponent {
|
|
650
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
651
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
620
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarMenuLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
621
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: SidebarMenuLoaderComponent, isStandalone: true, selector: "kirby-x-sidebar-menu-loader", ngImport: i0, template: "<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n", styles: [":host{display:flex;padding:0 var(--kirby-spacing-xxs, 8px);flex-direction:column;align-items:center;gap:var(--kirby-spacing-xxxs, 4px);flex:1 0 0;align-self:stretch}.skeleton-loader{height:var(--kirby-spacing-xl);align-self:stretch}\n"], dependencies: [{ kind: "component", type: SkeletonLoaderComponent, selector: "kirby-x-skeleton-loader", inputs: ["theme", "shape"] }] }); }
|
|
652
622
|
}
|
|
653
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
623
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarMenuLoaderComponent, decorators: [{
|
|
654
624
|
type: Component,
|
|
655
|
-
args: [{ selector: 'kirby-x-sidebar-menu-loader', imports: [SkeletonLoaderComponent], template: "<kirby-x-skeleton-loader
|
|
625
|
+
args: [{ selector: 'kirby-x-sidebar-menu-loader', imports: [SkeletonLoaderComponent], template: "<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n", styles: [":host{display:flex;padding:0 var(--kirby-spacing-xxs, 8px);flex-direction:column;align-items:center;gap:var(--kirby-spacing-xxxs, 4px);flex:1 0 0;align-self:stretch}.skeleton-loader{height:var(--kirby-spacing-xl);align-self:stretch}\n"] }]
|
|
656
626
|
}] });
|
|
657
627
|
|
|
658
628
|
class SidebarModule {
|
|
659
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
660
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
661
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
629
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
630
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: SidebarModule, imports: [SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent], exports: [SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent] }); }
|
|
631
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarModule }); }
|
|
662
632
|
}
|
|
663
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
633
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarModule, decorators: [{
|
|
664
634
|
type: NgModule,
|
|
665
635
|
args: [{
|
|
666
636
|
imports: [SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent],
|