@kirbydesign/extensions-angular 5.0.0-rc.0 → 5.0.1-dev-3171086
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 +8 -8
- 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 +93 -124
- package/fesm2022/kirbydesign-extensions-angular-sidebar-menu.mjs.map +1 -1
- package/fesm2022/kirbydesign-extensions-angular-skeleton-loader.mjs +6 -6
- package/fesm2022/kirbydesign-extensions-angular-skeleton-loader.mjs.map +1 -1
- package/fesm2022/kirbydesign-extensions-angular-spot-illustration.mjs +10 -14
- 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 +12 -12
- package/sidebar-menu/package.json +4 -0
- package/skeleton-loader/package.json +4 -0
- package/spot-illustration/package.json +4 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { output, inject, ElementRef, Directive, signal, computed, Injectable,
|
|
2
|
+
import { output, inject, ElementRef, Directive, signal, computed, Injectable, Component, input, forwardRef, ChangeDetectionStrategy, afterNextRender, EventEmitter, effect, Output, Input, NgModule } from '@angular/core';
|
|
3
3
|
import { CdkScrollable } from '@angular/cdk/overlay';
|
|
4
4
|
import { Subject, debounceTime } from 'rxjs';
|
|
5
5
|
import { distinctUntilChanged } from 'rxjs/operators';
|
|
@@ -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.2", 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,25 +96,25 @@ 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: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}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-color-hover: 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}: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;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]',
|
|
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: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}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-color-hover: 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}: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;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: "
|
|
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: `
|
|
118
110
|
<aside kirby-x-sidebar-container>
|
|
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
|
-
`, isInline: true, dependencies: [{ kind: "component", type: SidebarContainerComponent, selector: "aside[kirby-x-sidebar-container]" }]
|
|
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',
|
|
@@ -133,32 +125,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
133
125
|
<ng-content select="kirby-x-sidebar-footer" slot="footer"></ng-content>
|
|
134
126
|
</aside>
|
|
135
127
|
`,
|
|
136
|
-
changeDetection: ChangeDetectionStrategy.Eager,
|
|
137
128
|
imports: [SidebarContainerComponent],
|
|
138
129
|
}]
|
|
139
130
|
}] });
|
|
140
131
|
|
|
141
132
|
class SidebarFooterComponent {
|
|
142
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
143
|
-
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"] }); }
|
|
144
135
|
}
|
|
145
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarFooterComponent, decorators: [{
|
|
146
137
|
type: Component,
|
|
147
|
-
args: [{ selector: 'kirby-x-sidebar-footer', template: '<footer><ng-content></ng-content></footer>',
|
|
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"] }]
|
|
148
139
|
}] });
|
|
149
140
|
|
|
150
141
|
class SidebarHeaderComponent {
|
|
151
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
152
|
-
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: `
|
|
153
144
|
<header>
|
|
154
145
|
<span class="sidebar-logo"><ng-content select="[slot='logo']"></ng-content></span>
|
|
155
146
|
<div class="action-bar">
|
|
156
147
|
<ng-content select="[slot='action']"></ng-content>
|
|
157
148
|
</div>
|
|
158
149
|
</header>
|
|
159
|
-
`, 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"]
|
|
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"] }); }
|
|
160
151
|
}
|
|
161
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
152
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarHeaderComponent, decorators: [{
|
|
162
153
|
type: Component,
|
|
163
154
|
args: [{ selector: 'kirby-x-sidebar-header', template: `
|
|
164
155
|
<header>
|
|
@@ -167,7 +158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
167
158
|
<ng-content select="[slot='action']"></ng-content>
|
|
168
159
|
</div>
|
|
169
160
|
</header>
|
|
170
|
-
`,
|
|
161
|
+
`, 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"] }]
|
|
171
162
|
}] });
|
|
172
163
|
|
|
173
164
|
/**
|
|
@@ -188,39 +179,29 @@ function scrollIntoViewIfNecessary(scrollContainer, child, position = 'center')
|
|
|
188
179
|
|
|
189
180
|
class MenuItemComponent {
|
|
190
181
|
constructor() {
|
|
191
|
-
this.id = input.required(/*
|
|
192
|
-
...(ngDevMode ? [{ debugName: "
|
|
193
|
-
this.
|
|
194
|
-
...(ngDevMode ? [{ debugName: "
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
|
|
199
|
-
}
|
|
200
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
201
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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:32px;border-radius:8px;padding:4px 12px;gap:8px;border:none;background:inherit;font:inherit;color:inherit;text-decoration:none;cursor:pointer}:host.lg{min-height:40px}:host:hover{background:var(--menuitem-hover-background-color, var(--kirby-inputs-background-color-hover))}:host:active{background:var(--menuitem-active-background-color, var(--kirby-inputs-background-color-active))}:host:focus-visible{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:24px;height:24px}.menu-item-start.sm,.menu-item-start.xs{width:16px;height:16px}.menu-item-start.sm{padding-left:32px}.menu-item-start.xs{padding-left:56px}.menu-item-content{display:flex;flex-grow:1;align-items:center;text-align:left;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4;font-size:clamp(13px,1rem,32px);line-height:1.3334}.menu-item-end{display:inline-flex;min-width:24px;align-items:center;justify-content:center;gap:8px}.menu-item-end:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: IconModule }, { kind: "component", type: i1.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
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-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;-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"] }] }); }
|
|
202
189
|
}
|
|
203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
190
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuItemComponent, decorators: [{
|
|
204
191
|
type: Component,
|
|
205
192
|
args: [{ selector: 'a[kirby-x-menu-item],button[kirby-x-menu-item]', host: {
|
|
206
193
|
'[attr.id]': '"item" + id()',
|
|
207
194
|
'[class]': 'size()',
|
|
208
|
-
},
|
|
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-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;-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"] }]
|
|
209
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 }] }] } });
|
|
210
197
|
|
|
211
198
|
class MenuStateService {
|
|
212
|
-
#menuItems = signal([], /*
|
|
213
|
-
...(ngDevMode ? [{ debugName: "#
|
|
214
|
-
#
|
|
215
|
-
...(ngDevMode ? [{ debugName: "#
|
|
216
|
-
#
|
|
217
|
-
...(ngDevMode ? [{ debugName: "#
|
|
218
|
-
#checkedItems = signal(new Set(), /* @ts-ignore */
|
|
219
|
-
...(ngDevMode ? [{ debugName: "#checkedItems" }] : /* istanbul ignore next */ []));
|
|
220
|
-
#autoCollapse = signal(false, /* @ts-ignore */
|
|
221
|
-
...(ngDevMode ? [{ debugName: "#autoCollapse" }] : /* istanbul ignore next */ []));
|
|
222
|
-
#animationsDisabled = signal(false, /* @ts-ignore */
|
|
223
|
-
...(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 */ []));
|
|
224
205
|
#expandEvents = new Subject();
|
|
225
206
|
#checkEvents = new Subject();
|
|
226
207
|
#reorderEvents = new Subject();
|
|
@@ -320,10 +301,10 @@ class MenuStateService {
|
|
|
320
301
|
});
|
|
321
302
|
this.#menuItems.update((items) => [...items]);
|
|
322
303
|
}
|
|
323
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
324
|
-
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' }); }
|
|
325
306
|
}
|
|
326
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
307
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuStateService, decorators: [{
|
|
327
308
|
type: Injectable,
|
|
328
309
|
args: [{ providedIn: 'root' }]
|
|
329
310
|
}] });
|
|
@@ -345,19 +326,15 @@ function recursivelyFindAncestors(items, id) {
|
|
|
345
326
|
|
|
346
327
|
class MenuAnchorItemComponent {
|
|
347
328
|
constructor() {
|
|
348
|
-
this.item = input.required(/*
|
|
349
|
-
...(ngDevMode ? [{ debugName: "
|
|
350
|
-
this.size = input.required(/* @ts-ignore */
|
|
351
|
-
...(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 */ []));
|
|
352
331
|
this.#stateService = inject(MenuStateService);
|
|
353
|
-
this.#isSelected = computed(() => this.item().id === this.#stateService.selectedItem(), /*
|
|
354
|
-
...(ngDevMode ? [{ debugName: "#isSelected" }] : /* istanbul ignore next */ []));
|
|
332
|
+
this.#isSelected = computed(() => this.item().id === this.#stateService.selectedItem(), ...(ngDevMode ? [{ debugName: "#isSelected" }] : /* istanbul ignore next */ []));
|
|
355
333
|
this.#isChecked = computed(() => {
|
|
356
334
|
const id = this.item().id;
|
|
357
335
|
const checkedItems = this.#stateService.checkedItems();
|
|
358
336
|
return checkedItems.has(id);
|
|
359
|
-
}, /*
|
|
360
|
-
...(ngDevMode ? [{ debugName: "#isChecked" }] : /* istanbul ignore next */ []));
|
|
337
|
+
}, ...(ngDevMode ? [{ debugName: "#isChecked" }] : /* istanbul ignore next */ []));
|
|
361
338
|
this.vm = {
|
|
362
339
|
item: this.item,
|
|
363
340
|
size: this.size,
|
|
@@ -381,23 +358,23 @@ class MenuAnchorItemComponent {
|
|
|
381
358
|
this.#stateService.uncheckItem(this.item().id);
|
|
382
359
|
}
|
|
383
360
|
}
|
|
384
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
385
|
-
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.selected{color:var(--menuitem-selected-color, var(--kirby-primary-contrast))}:host:not(.selected):hover a{background:var(--menuitem-hover-background-color, var(--kirby-inputs-background-color-hover))}:host:not(.selected):active a{background:var(--menuitem-active-background-color, var(--kirby-inputs-background-color-active))}.selected,.selected:hover,.selected:active,.selected:focus-visible{background:var(--menuitem-selected-background-color, var(--kirby-primary));font-weight: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"] }] }); }
|
|
386
363
|
}
|
|
387
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
364
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuAnchorItemComponent, decorators: [{
|
|
388
365
|
type: Component,
|
|
389
366
|
args: [{ selector: 'li[kirby-x-menu-anchor-item]', host: {
|
|
390
367
|
'[class.selected]': 'vm.isSelected()',
|
|
391
368
|
'[class.has-toggle]': '!!vm.item().toggle',
|
|
392
369
|
'[class.has-badge]': '!!vm.item().badge',
|
|
393
|
-
},
|
|
370
|
+
}, imports: [
|
|
394
371
|
MenuItemComponent,
|
|
395
372
|
RouterLink,
|
|
396
373
|
ToggleButtonComponent,
|
|
397
374
|
ButtonComponent,
|
|
398
375
|
IconComponent,
|
|
399
376
|
BadgeComponent,
|
|
400
|
-
], 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: ["
|
|
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.selected{color:var(--menuitem-selected-color, var(--kirby-primary-contrast))}:host:not(.selected):hover a{background:var(--menuitem-hover-background-color, var(--kirby-inputs-background-color-hover))}:host:not(.selected):active a{background:var(--menuitem-active-background-color, var(--kirby-inputs-background-color-active))}.selected,.selected:hover,.selected:active,.selected:focus-visible{background:var(--menuitem-selected-background-color, var(--kirby-primary));font-weight: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"] }]
|
|
401
378
|
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }] } });
|
|
402
379
|
|
|
403
380
|
/**
|
|
@@ -431,18 +408,15 @@ const DropDownAnimation = trigger('dropDownMenu', [
|
|
|
431
408
|
|
|
432
409
|
class MenuSubmenuItemComponent {
|
|
433
410
|
constructor() {
|
|
434
|
-
this.item = input.required(/*
|
|
435
|
-
...(ngDevMode ? [{ debugName: "
|
|
436
|
-
this.size = input.required(/* @ts-ignore */
|
|
437
|
-
...(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 */ []));
|
|
438
413
|
this.#element = inject(ElementRef).nativeElement;
|
|
439
414
|
this.#stateService = inject(MenuStateService);
|
|
440
415
|
this.#isExpanded = computed(() => {
|
|
441
416
|
const id = this.item().id;
|
|
442
417
|
const expandedItems = this.#stateService.expandedItems();
|
|
443
418
|
return expandedItems.has(id);
|
|
444
|
-
}, /*
|
|
445
|
-
...(ngDevMode ? [{ debugName: "#isExpanded" }] : /* istanbul ignore next */ []));
|
|
419
|
+
}, ...(ngDevMode ? [{ debugName: "#isExpanded" }] : /* istanbul ignore next */ []));
|
|
446
420
|
this.#submenuSize = computed(() => {
|
|
447
421
|
switch (this.size()) {
|
|
448
422
|
case 'lg':
|
|
@@ -452,8 +426,7 @@ class MenuSubmenuItemComponent {
|
|
|
452
426
|
default:
|
|
453
427
|
return 'xs';
|
|
454
428
|
}
|
|
455
|
-
}, /*
|
|
456
|
-
...(ngDevMode ? [{ debugName: "#submenuSize" }] : /* istanbul ignore next */ []));
|
|
429
|
+
}, ...(ngDevMode ? [{ debugName: "#submenuSize" }] : /* istanbul ignore next */ []));
|
|
457
430
|
this.vm = {
|
|
458
431
|
item: this.item,
|
|
459
432
|
size: this.size,
|
|
@@ -485,24 +458,20 @@ class MenuSubmenuItemComponent {
|
|
|
485
458
|
#reorderItem(event) {
|
|
486
459
|
this.#stateService.reorderItems(this.item(), event.item.data, event.previousIndex, event.currentIndex);
|
|
487
460
|
}
|
|
488
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
489
|
-
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] }); }
|
|
490
463
|
}
|
|
491
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
464
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuSubmenuItemComponent, decorators: [{
|
|
492
465
|
type: Component,
|
|
493
|
-
args: [{ selector: 'li[kirby-x-menu-submenu-item]', animations: [DropDownAnimation],
|
|
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"] }]
|
|
494
467
|
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }] } });
|
|
495
468
|
|
|
496
469
|
class MenuItemListComponent {
|
|
497
470
|
constructor() {
|
|
498
|
-
this.items = input.required(/*
|
|
499
|
-
...(ngDevMode ? [{ debugName: "
|
|
500
|
-
this.
|
|
501
|
-
...(ngDevMode ? [{ debugName: "
|
|
502
|
-
this.id = input(/* @ts-ignore */
|
|
503
|
-
...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
504
|
-
this.isReorderable = input(false, /* @ts-ignore */
|
|
505
|
-
...(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 */ []));
|
|
506
475
|
this.vm = {
|
|
507
476
|
id: this.id,
|
|
508
477
|
size: this.size,
|
|
@@ -510,10 +479,10 @@ class MenuItemListComponent {
|
|
|
510
479
|
isReorderable: this.isReorderable,
|
|
511
480
|
};
|
|
512
481
|
}
|
|
513
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
514
|
-
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;background:var(--kirby-white-overlay-20);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 }); }
|
|
515
484
|
}
|
|
516
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
485
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuItemListComponent, decorators: [{
|
|
517
486
|
type: Component,
|
|
518
487
|
args: [{ selector: 'ul[kirby-x-menu-item-list]', host: {
|
|
519
488
|
'[attr.id]': 'vm.id()',
|
|
@@ -523,7 +492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
523
492
|
MenuAnchorItemComponent,
|
|
524
493
|
forwardRef(() => MenuSubmenuItemComponent),
|
|
525
494
|
CdkDrag,
|
|
526
|
-
], 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: ["
|
|
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;background:var(--kirby-white-overlay-20);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"] }]
|
|
527
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 }] }] } });
|
|
528
497
|
|
|
529
498
|
class MenuContainerComponent {
|
|
@@ -550,20 +519,20 @@ class MenuContainerComponent {
|
|
|
550
519
|
scrollIntoViewIfNecessary(scrollContainer, selectedItem);
|
|
551
520
|
}
|
|
552
521
|
}
|
|
553
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
554
|
-
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: `
|
|
555
524
|
<nav aria-label="Sidebar Menu">
|
|
556
525
|
<ul kirby-x-menu-item-list [items]="vm.items()"></ul>
|
|
557
526
|
</nav>
|
|
558
|
-
`, 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"] }]
|
|
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"] }] }); }
|
|
559
528
|
}
|
|
560
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
529
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuContainerComponent, decorators: [{
|
|
561
530
|
type: Component,
|
|
562
531
|
args: [{ selector: 'kirby-x-menu-container', template: `
|
|
563
532
|
<nav aria-label="Sidebar Menu">
|
|
564
533
|
<ul kirby-x-menu-item-list [items]="vm.items()"></ul>
|
|
565
534
|
</nav>
|
|
566
|
-
`,
|
|
535
|
+
`, imports: [MenuItemListComponent], styles: ["nav{padding:0 var(--kirby-spacing-xxs)}\n"] }]
|
|
567
536
|
}], ctorParameters: () => [] });
|
|
568
537
|
|
|
569
538
|
class SidebarMenuComponent {
|
|
@@ -603,22 +572,22 @@ class SidebarMenuComponent {
|
|
|
603
572
|
effect(() => this.expandedItemsChange.emit(this.#stateService.expandedItems()));
|
|
604
573
|
effect(() => this.checkedItemsChange.emit(this.#stateService.checkedItems()));
|
|
605
574
|
}
|
|
606
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
607
|
-
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: `
|
|
608
577
|
<kirby-x-menu-container
|
|
609
578
|
kirbyXHeightObserver
|
|
610
579
|
(heightChange)="setMenuHeight($event)"
|
|
611
580
|
></kirby-x-menu-container>
|
|
612
|
-
`, 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"] }]
|
|
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"] }] }); }
|
|
613
582
|
}
|
|
614
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
583
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarMenuComponent, decorators: [{
|
|
615
584
|
type: Component,
|
|
616
585
|
args: [{ selector: 'kirby-x-sidebar-menu', template: `
|
|
617
586
|
<kirby-x-menu-container
|
|
618
587
|
kirbyXHeightObserver
|
|
619
588
|
(heightChange)="setMenuHeight($event)"
|
|
620
589
|
></kirby-x-menu-container>
|
|
621
|
-
`,
|
|
590
|
+
`, imports: [MenuContainerComponent, HeightObserverDirective], styles: [":host{display:flex;flex-direction:column;width:100%}\n"] }]
|
|
622
591
|
}], ctorParameters: () => [], propDecorators: { menuItems: [{
|
|
623
592
|
type: Input
|
|
624
593
|
}], selectedItem: [{
|
|
@@ -648,20 +617,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
648
617
|
}] } });
|
|
649
618
|
|
|
650
619
|
class SidebarMenuLoaderComponent {
|
|
651
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
652
|
-
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 theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" 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"] }] }); }
|
|
653
622
|
}
|
|
654
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
623
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarMenuLoaderComponent, decorators: [{
|
|
655
624
|
type: Component,
|
|
656
|
-
args: [{ selector: 'kirby-x-sidebar-menu-loader',
|
|
625
|
+
args: [{ selector: 'kirby-x-sidebar-menu-loader', imports: [SkeletonLoaderComponent], template: "<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" 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"] }]
|
|
657
626
|
}] });
|
|
658
627
|
|
|
659
628
|
class SidebarModule {
|
|
660
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
661
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
662
|
-
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 }); }
|
|
663
632
|
}
|
|
664
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
633
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarModule, decorators: [{
|
|
665
634
|
type: NgModule,
|
|
666
635
|
args: [{
|
|
667
636
|
imports: [SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent],
|