@kirbydesign/extensions-angular 5.0.1-dev-d2c1fb9 → 5.0.1-dev-85b2964
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/kirbydesign-extensions-angular-combobox.mjs +3 -3
- package/fesm2022/kirbydesign-extensions-angular-combobox.mjs.map +1 -1
- package/fesm2022/kirbydesign-extensions-angular-image-banner.mjs +6 -6
- package/fesm2022/kirbydesign-extensions-angular-image-banner.mjs.map +1 -1
- package/fesm2022/kirbydesign-extensions-angular-localization.mjs +30 -30
- package/fesm2022/kirbydesign-extensions-angular-localization.mjs.map +1 -1
- package/fesm2022/kirbydesign-extensions-angular-sidebar-menu.mjs +108 -78
- package/fesm2022/kirbydesign-extensions-angular-sidebar-menu.mjs.map +1 -1
- package/fesm2022/kirbydesign-extensions-angular-skeleton-loader.mjs +3 -3
- package/fesm2022/kirbydesign-extensions-angular-skeleton-loader.mjs.map +1 -1
- package/fesm2022/kirbydesign-extensions-angular-spot-illustration.mjs +11 -7
- package/fesm2022/kirbydesign-extensions-angular-spot-illustration.mjs.map +1 -1
- package/package.json +20 -16
- package/combobox/package.json +0 -4
- package/image-banner/package.json +0 -4
- package/localization/package.json +0 -4
- package/sidebar-menu/package.json +0 -4
- package/skeleton-loader/package.json +0 -4
- package/spot-illustration/package.json +0 -4
|
@@ -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: "22.1.5", ngImport: i0, type: HeightObserverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
38
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", 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: "22.1.5", ngImport: i0, type: HeightObserverDirective, decorators: [{
|
|
41
41
|
type: Directive,
|
|
42
42
|
args: [{
|
|
43
43
|
selector: '[kirbyXHeightObserver]',
|
|
@@ -45,14 +45,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
45
45
|
}], ctorParameters: () => [], propDecorators: { heightChange: [{ type: i0.Output, args: ["heightChange"] }] } });
|
|
46
46
|
|
|
47
47
|
class SidebarService {
|
|
48
|
-
#menuHeight = signal(0,
|
|
49
|
-
|
|
50
|
-
#
|
|
51
|
-
|
|
52
|
-
#
|
|
53
|
-
|
|
54
|
-
#
|
|
55
|
-
|
|
48
|
+
#menuHeight = signal(0, /* @ts-ignore */
|
|
49
|
+
...(ngDevMode ? [{ debugName: "#menuHeight" }] : /* istanbul ignore next */ []));
|
|
50
|
+
#containerHeight = signal(0, /* @ts-ignore */
|
|
51
|
+
...(ngDevMode ? [{ debugName: "#containerHeight" }] : /* istanbul ignore next */ []));
|
|
52
|
+
#scrollDistance = signal(0, /* @ts-ignore */
|
|
53
|
+
...(ngDevMode ? [{ debugName: "#scrollDistance" }] : /* istanbul ignore next */ []));
|
|
54
|
+
#scrollableDistance = computed(() => Math.max(0, this.#menuHeight() - this.#containerHeight()), /* @ts-ignore */
|
|
55
|
+
...(ngDevMode ? [{ debugName: "#scrollableDistance" }] : /* istanbul ignore next */ []));
|
|
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 */ []));
|
|
56
64
|
get showHeaderBottomBorder() {
|
|
57
65
|
return this.#showHeaderBottomBorder;
|
|
58
66
|
}
|
|
@@ -68,10 +76,10 @@ class SidebarService {
|
|
|
68
76
|
set scrollDistance(distance) {
|
|
69
77
|
this.#scrollDistance.set(distance);
|
|
70
78
|
}
|
|
71
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
72
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
79
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
80
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SidebarService, providedIn: 'root' }); }
|
|
73
81
|
}
|
|
74
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
82
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SidebarService, decorators: [{
|
|
75
83
|
type: Injectable,
|
|
76
84
|
args: [{ providedIn: 'root' }]
|
|
77
85
|
}] });
|
|
@@ -96,17 +104,17 @@ class SidebarContainerComponent {
|
|
|
96
104
|
this.#sidebarService.scrollDistance = target.scrollTop;
|
|
97
105
|
}
|
|
98
106
|
}
|
|
99
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
100
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
107
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SidebarContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
108
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", 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]" }] }); }
|
|
101
109
|
}
|
|
102
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
110
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SidebarContainerComponent, decorators: [{
|
|
103
111
|
type: Component,
|
|
104
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: [".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"] }]
|
|
105
113
|
}] });
|
|
106
114
|
|
|
107
115
|
class SidebarComponent {
|
|
108
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
109
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
116
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
117
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: SidebarComponent, isStandalone: true, selector: "kirby-x-sidebar", ngImport: i0, template: `
|
|
110
118
|
<aside kirby-x-sidebar-container>
|
|
111
119
|
<ng-content select="kirby-x-sidebar-header" slot="header"></ng-content>
|
|
112
120
|
<ng-content slot="content"></ng-content>
|
|
@@ -114,7 +122,7 @@ class SidebarComponent {
|
|
|
114
122
|
</aside>
|
|
115
123
|
`, isInline: true, dependencies: [{ kind: "component", type: SidebarContainerComponent, selector: "aside[kirby-x-sidebar-container]" }] }); }
|
|
116
124
|
}
|
|
117
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
125
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
118
126
|
type: Component,
|
|
119
127
|
args: [{
|
|
120
128
|
selector: 'kirby-x-sidebar',
|
|
@@ -130,17 +138,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
130
138
|
}] });
|
|
131
139
|
|
|
132
140
|
class SidebarFooterComponent {
|
|
133
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
134
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
141
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SidebarFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
142
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", 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"] }); }
|
|
135
143
|
}
|
|
136
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
144
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SidebarFooterComponent, decorators: [{
|
|
137
145
|
type: Component,
|
|
138
146
|
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"] }]
|
|
139
147
|
}] });
|
|
140
148
|
|
|
141
149
|
class SidebarHeaderComponent {
|
|
142
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
143
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
150
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SidebarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
151
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: SidebarHeaderComponent, isStandalone: true, selector: "kirby-x-sidebar-header", ngImport: i0, template: `
|
|
144
152
|
<header>
|
|
145
153
|
<span class="sidebar-logo"><ng-content select="[slot='logo']"></ng-content></span>
|
|
146
154
|
<div class="action-bar">
|
|
@@ -149,7 +157,7 @@ class SidebarHeaderComponent {
|
|
|
149
157
|
</header>
|
|
150
158
|
`, 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"] }); }
|
|
151
159
|
}
|
|
152
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
160
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SidebarHeaderComponent, decorators: [{
|
|
153
161
|
type: Component,
|
|
154
162
|
args: [{ selector: 'kirby-x-sidebar-header', template: `
|
|
155
163
|
<header>
|
|
@@ -179,29 +187,39 @@ function scrollIntoViewIfNecessary(scrollContainer, child, position = 'center')
|
|
|
179
187
|
|
|
180
188
|
class MenuItemComponent {
|
|
181
189
|
constructor() {
|
|
182
|
-
this.id = input.required(
|
|
183
|
-
|
|
184
|
-
this.
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
190
|
+
this.id = input.required(/* @ts-ignore */
|
|
191
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
192
|
+
this.size = input.required(/* @ts-ignore */
|
|
193
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
194
|
+
this.icon = input(/* @ts-ignore */
|
|
195
|
+
...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
196
|
+
this.iconSize = computed(() => (this.size() === 'lg' ? 'sm' : 'xs'), /* @ts-ignore */
|
|
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"] }] }); }
|
|
189
201
|
}
|
|
190
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
202
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MenuItemComponent, decorators: [{
|
|
191
203
|
type: Component,
|
|
192
204
|
args: [{ selector: 'a[kirby-x-menu-item],button[kirby-x-menu-item]', host: {
|
|
193
205
|
'[attr.id]': '"item" + id()',
|
|
194
206
|
'[class]': 'size()',
|
|
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
|
|
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-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"] }]
|
|
196
208
|
}], 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 }] }] } });
|
|
197
209
|
|
|
198
210
|
class MenuStateService {
|
|
199
|
-
#menuItems = signal([],
|
|
200
|
-
|
|
201
|
-
#
|
|
202
|
-
|
|
203
|
-
#
|
|
204
|
-
|
|
211
|
+
#menuItems = signal([], /* @ts-ignore */
|
|
212
|
+
...(ngDevMode ? [{ debugName: "#menuItems" }] : /* istanbul ignore next */ []));
|
|
213
|
+
#selectedItem = signal(undefined, /* @ts-ignore */
|
|
214
|
+
...(ngDevMode ? [{ debugName: "#selectedItem" }] : /* istanbul ignore next */ []));
|
|
215
|
+
#expandedItems = signal(new Set(), /* @ts-ignore */
|
|
216
|
+
...(ngDevMode ? [{ debugName: "#expandedItems" }] : /* istanbul ignore next */ []));
|
|
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 */ []));
|
|
205
223
|
#expandEvents = new Subject();
|
|
206
224
|
#checkEvents = new Subject();
|
|
207
225
|
#reorderEvents = new Subject();
|
|
@@ -301,10 +319,10 @@ class MenuStateService {
|
|
|
301
319
|
});
|
|
302
320
|
this.#menuItems.update((items) => [...items]);
|
|
303
321
|
}
|
|
304
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
305
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
322
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MenuStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
323
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MenuStateService, providedIn: 'root' }); }
|
|
306
324
|
}
|
|
307
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
325
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MenuStateService, decorators: [{
|
|
308
326
|
type: Injectable,
|
|
309
327
|
args: [{ providedIn: 'root' }]
|
|
310
328
|
}] });
|
|
@@ -326,15 +344,19 @@ function recursivelyFindAncestors(items, id) {
|
|
|
326
344
|
|
|
327
345
|
class MenuAnchorItemComponent {
|
|
328
346
|
constructor() {
|
|
329
|
-
this.item = input.required(
|
|
330
|
-
|
|
347
|
+
this.item = input.required(/* @ts-ignore */
|
|
348
|
+
...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
|
|
349
|
+
this.size = input.required(/* @ts-ignore */
|
|
350
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
331
351
|
this.#stateService = inject(MenuStateService);
|
|
332
|
-
this.#isSelected = computed(() => this.item().id === this.#stateService.selectedItem(),
|
|
352
|
+
this.#isSelected = computed(() => this.item().id === this.#stateService.selectedItem(), /* @ts-ignore */
|
|
353
|
+
...(ngDevMode ? [{ debugName: "#isSelected" }] : /* istanbul ignore next */ []));
|
|
333
354
|
this.#isChecked = computed(() => {
|
|
334
355
|
const id = this.item().id;
|
|
335
356
|
const checkedItems = this.#stateService.checkedItems();
|
|
336
357
|
return checkedItems.has(id);
|
|
337
|
-
},
|
|
358
|
+
}, /* @ts-ignore */
|
|
359
|
+
...(ngDevMode ? [{ debugName: "#isChecked" }] : /* istanbul ignore next */ []));
|
|
338
360
|
this.vm = {
|
|
339
361
|
item: this.item,
|
|
340
362
|
size: this.size,
|
|
@@ -358,10 +380,10 @@ class MenuAnchorItemComponent {
|
|
|
358
380
|
this.#stateService.uncheckItem(this.item().id);
|
|
359
381
|
}
|
|
360
382
|
}
|
|
361
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
362
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
383
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MenuAnchorItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
384
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", 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", "browserUrl", "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"] }] }); }
|
|
363
385
|
}
|
|
364
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
386
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MenuAnchorItemComponent, decorators: [{
|
|
365
387
|
type: Component,
|
|
366
388
|
args: [{ selector: 'li[kirby-x-menu-anchor-item]', host: {
|
|
367
389
|
'[class.selected]': 'vm.isSelected()',
|
|
@@ -408,15 +430,18 @@ const DropDownAnimation = trigger('dropDownMenu', [
|
|
|
408
430
|
|
|
409
431
|
class MenuSubmenuItemComponent {
|
|
410
432
|
constructor() {
|
|
411
|
-
this.item = input.required(
|
|
412
|
-
|
|
433
|
+
this.item = input.required(/* @ts-ignore */
|
|
434
|
+
...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
|
|
435
|
+
this.size = input.required(/* @ts-ignore */
|
|
436
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
413
437
|
this.#element = inject(ElementRef).nativeElement;
|
|
414
438
|
this.#stateService = inject(MenuStateService);
|
|
415
439
|
this.#isExpanded = computed(() => {
|
|
416
440
|
const id = this.item().id;
|
|
417
441
|
const expandedItems = this.#stateService.expandedItems();
|
|
418
442
|
return expandedItems.has(id);
|
|
419
|
-
},
|
|
443
|
+
}, /* @ts-ignore */
|
|
444
|
+
...(ngDevMode ? [{ debugName: "#isExpanded" }] : /* istanbul ignore next */ []));
|
|
420
445
|
this.#submenuSize = computed(() => {
|
|
421
446
|
switch (this.size()) {
|
|
422
447
|
case 'lg':
|
|
@@ -426,7 +451,8 @@ class MenuSubmenuItemComponent {
|
|
|
426
451
|
default:
|
|
427
452
|
return 'xs';
|
|
428
453
|
}
|
|
429
|
-
},
|
|
454
|
+
}, /* @ts-ignore */
|
|
455
|
+
...(ngDevMode ? [{ debugName: "#submenuSize" }] : /* istanbul ignore next */ []));
|
|
430
456
|
this.vm = {
|
|
431
457
|
item: this.item,
|
|
432
458
|
size: this.size,
|
|
@@ -458,20 +484,24 @@ class MenuSubmenuItemComponent {
|
|
|
458
484
|
#reorderItem(event) {
|
|
459
485
|
this.#stateService.reorderItems(this.item(), event.item.data, event.previousIndex, event.currentIndex);
|
|
460
486
|
}
|
|
461
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
462
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
487
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MenuSubmenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
488
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", 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] }); }
|
|
463
489
|
}
|
|
464
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
490
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MenuSubmenuItemComponent, decorators: [{
|
|
465
491
|
type: Component,
|
|
466
492
|
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"] }]
|
|
467
493
|
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }] } });
|
|
468
494
|
|
|
469
495
|
class MenuItemListComponent {
|
|
470
496
|
constructor() {
|
|
471
|
-
this.items = input.required(
|
|
472
|
-
|
|
473
|
-
this.
|
|
474
|
-
|
|
497
|
+
this.items = input.required(/* @ts-ignore */
|
|
498
|
+
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
499
|
+
this.size = input('lg', /* @ts-ignore */
|
|
500
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
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 */ []));
|
|
475
505
|
this.vm = {
|
|
476
506
|
id: this.id,
|
|
477
507
|
size: this.size,
|
|
@@ -479,10 +509,10 @@ class MenuItemListComponent {
|
|
|
479
509
|
isReorderable: this.isReorderable,
|
|
480
510
|
};
|
|
481
511
|
}
|
|
482
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
483
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
512
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MenuItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
513
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", 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 }); }
|
|
484
514
|
}
|
|
485
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
515
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MenuItemListComponent, decorators: [{
|
|
486
516
|
type: Component,
|
|
487
517
|
args: [{ selector: 'ul[kirby-x-menu-item-list]', host: {
|
|
488
518
|
'[attr.id]': 'vm.id()',
|
|
@@ -519,14 +549,14 @@ class MenuContainerComponent {
|
|
|
519
549
|
scrollIntoViewIfNecessary(scrollContainer, selectedItem);
|
|
520
550
|
}
|
|
521
551
|
}
|
|
522
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
523
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
552
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MenuContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
553
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: MenuContainerComponent, isStandalone: true, selector: "kirby-x-menu-container", ngImport: i0, template: `
|
|
524
554
|
<nav aria-label="Sidebar Menu">
|
|
525
555
|
<ul kirby-x-menu-item-list [items]="vm.items()"></ul>
|
|
526
556
|
</nav>
|
|
527
557
|
`, 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"] }] }); }
|
|
528
558
|
}
|
|
529
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
559
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MenuContainerComponent, decorators: [{
|
|
530
560
|
type: Component,
|
|
531
561
|
args: [{ selector: 'kirby-x-menu-container', template: `
|
|
532
562
|
<nav aria-label="Sidebar Menu">
|
|
@@ -572,15 +602,15 @@ class SidebarMenuComponent {
|
|
|
572
602
|
effect(() => this.expandedItemsChange.emit(this.#stateService.expandedItems()));
|
|
573
603
|
effect(() => this.checkedItemsChange.emit(this.#stateService.checkedItems()));
|
|
574
604
|
}
|
|
575
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
576
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
605
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SidebarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
606
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", 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: `
|
|
577
607
|
<kirby-x-menu-container
|
|
578
608
|
kirbyXHeightObserver
|
|
579
609
|
(heightChange)="setMenuHeight($event)"
|
|
580
610
|
></kirby-x-menu-container>
|
|
581
611
|
`, 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"] }] }); }
|
|
582
612
|
}
|
|
583
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
613
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SidebarMenuComponent, decorators: [{
|
|
584
614
|
type: Component,
|
|
585
615
|
args: [{ selector: 'kirby-x-sidebar-menu', template: `
|
|
586
616
|
<kirby-x-menu-container
|
|
@@ -617,20 +647,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
617
647
|
}] } });
|
|
618
648
|
|
|
619
649
|
class SidebarMenuLoaderComponent {
|
|
620
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
621
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
650
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SidebarMenuLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
651
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", 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"] }] }); }
|
|
622
652
|
}
|
|
623
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
653
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SidebarMenuLoaderComponent, decorators: [{
|
|
624
654
|
type: Component,
|
|
625
655
|
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"] }]
|
|
626
656
|
}] });
|
|
627
657
|
|
|
628
658
|
class SidebarModule {
|
|
629
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
630
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
631
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
659
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
660
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.5", ngImport: i0, type: SidebarModule, imports: [SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent], exports: [SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent] }); }
|
|
661
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SidebarModule }); }
|
|
632
662
|
}
|
|
633
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
663
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SidebarModule, decorators: [{
|
|
634
664
|
type: NgModule,
|
|
635
665
|
args: [{
|
|
636
666
|
imports: [SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent],
|