@kirbydesign/extensions-angular 4.4.0-rc.0 → 4.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/spot-illustrations/document.card.dot.circle.large.svg +5 -0
- package/fesm2022/kirbydesign-extensions-angular-combobox.mjs +39 -7
- package/fesm2022/kirbydesign-extensions-angular-combobox.mjs.map +1 -1
- package/fesm2022/kirbydesign-extensions-angular-image-banner.mjs +2 -2
- package/fesm2022/kirbydesign-extensions-angular-image-banner.mjs.map +1 -1
- package/fesm2022/kirbydesign-extensions-angular-sidebar-menu.mjs +10 -10
- package/fesm2022/kirbydesign-extensions-angular-sidebar-menu.mjs.map +1 -1
- package/fesm2022/kirbydesign-extensions-angular-skeleton-loader.mjs +2 -2
- package/fesm2022/kirbydesign-extensions-angular-skeleton-loader.mjs.map +1 -1
- package/fesm2022/kirbydesign-extensions-angular-spot-illustration.mjs +5 -2
- package/fesm2022/kirbydesign-extensions-angular-spot-illustration.mjs.map +1 -1
- package/package.json +2 -2
- package/types/kirbydesign-extensions-angular-combobox.d.ts +11 -2
- package/types/kirbydesign-extensions-angular-spot-illustration.d.ts +5 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-extensions-angular-image-banner.mjs","sources":["../../image-banner/src/image-banner-height.directive.ts","../../image-banner/src/image-banner.component.ts","../../image-banner/src/image-banner.component.html","../../image-banner/src/kirbydesign-extensions-angular-image-banner.ts"],"sourcesContent":["import { Directive, ElementRef, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';\nimport { ResizeObserverService } from '@kirbydesign/designsystem/shared';\n\n/**\n * @Description Temporary directive to ensure correct scroll position behavior on Safari.\n *\n * When navigating between stacked pages, scroll position is not correctly restored on Safari,\n * when the nested kirby-card element uses containment and the host element does not have an explicit height.\n */\n@Directive({\n selector: `[kirbyImageBannerResize]`,\n})\nexport class ImageBannerHeightDirective implements OnInit, OnDestroy {\n private currentHeight: number = 0;\n private host = inject(ElementRef);\n private resizeObserverService = inject(ResizeObserverService);\n private renderer = inject(Renderer2);\n\n ngOnInit() {\n this.resizeObserverService.observe(this.host, (entry) => this.setCardHeightOnHost(entry));\n }\n\n ngOnDestroy() {\n this.resizeObserverService.unobserve(this.host);\n }\n\n private setCardHeightOnHost(entry: ResizeObserverEntry) {\n const hostElement = entry.target as HTMLElement;\n const card = hostElement.querySelector('kirby-card');\n const cardHeight = card?.getBoundingClientRect().height;\n\n if (!hostElement || !cardHeight) return;\n if (cardHeight === this.currentHeight) return;\n\n this.currentHeight = cardHeight;\n this.renderer.setStyle(hostElement, 'min-height', `${cardHeight}px`);\n }\n}\n","import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { ThemeColorDirective, TranslationService } from '@kirbydesign/designsystem/shared';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { ImageBannerHeightDirective } from './image-banner-height.directive';\n\n@Component({\n selector: 'kirby-x-image-banner',\n imports: [CardComponent, ButtonComponent, IconComponent, ThemeColorDirective],\n hostDirectives: [ImageBannerHeightDirective],\n templateUrl: './image-banner.component.html',\n styleUrl: './image-banner.component.scss',\n})\nexport class ImageBannerComponent {\n /**\n * The title placed inside the image banners header.\n */\n @Input() title: string | undefined;\n\n /**\n * The image shown on the banner, and used for the background blur effect.\n */\n @Input() imagePath: string | undefined;\n\n /**\n * The body text placed below the title.\n */\n @Input() bodyText: string | undefined;\n\n /**\n * Whether the button should be shown in narrow view or not.\n */\n @HostBinding('class.show-button-in-narrow-view')\n @Input()\n showButtonInNarrowView: boolean = false;\n\n /**\n * The text of the button in the content area of the image banner. If left empty, will default to 'Read more' (or equivalent translation for [supported locales](https://cookbook.kirby.design/#/home/localization)).\n */\n @Input() actionButtonText: string | undefined = this.translations.get('readMore');\n\n /**\n * When an external link is supplied the entire banner will be an anchor-tag and navigate when activated.\n */\n @Input() externalLink: string | undefined;\n\n /**\n * The blur-effect used for the background.\n */\n @HostBinding('class')\n @Input()\n backgroundBlur: 'dark' | 'light' | 'none' = 'dark';\n\n /**\n * Emitted every time the banner is activated. The entire banner is interactive, and will be activated by click and keyboard interaction.\n */\n @Output() bannerClick = new EventEmitter<Event>();\n\n /**\n * If subscribed to, a dismiss button will be shown. Emitted every time the dismiss button is activated by click and keyboard interaction.\n */\n @Output() dismissClick = new EventEmitter<Event>();\n\n /**\n * If the input imagePath results in an error, it will be reflected in this output.\n */\n @Output()\n imageError = new EventEmitter<ErrorEvent>();\n\n constructor(public translations: TranslationService) {}\n\n public bannerClicked(event: Event) {\n const eventTarget = event.target as HTMLElement;\n const dismissButtonClicked = eventTarget.closest('.dismiss');\n if (dismissButtonClicked) return;\n this.bannerClick.emit(event);\n }\n\n public dismissClicked(event: Event) {\n this.dismissClick.emit(event);\n }\n\n public onImageError($event: ErrorEvent) {\n this.imageError.emit($event);\n }\n}\n","<kirby-card [themeColor]=\"backgroundBlur === 'none' ? 'white' : backgroundBlur\">\n <div class=\"blur-image-wrapper\">\n <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n </div>\n\n <div class=\"main-content-wrapper\">\n <div class=\"main-content-image-wrapper\">\n <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" (error)=\"onImageError($event)\" />\n </div>\n\n <div class=\"main-content\">\n <div class=\"text-content-layout\">\n <div class=\"main-content-header\">\n @if (title) {\n <p class=\"kirby-text-normal-bold\">\n {{ title }}\n </p>\n } @else {\n <div class=\"title kirby-text-normal-bold\">\n <ng-content select=\"[title]\"></ng-content>\n </div>\n }\n </div>\n\n <div class=\"main-content-body\">\n <p class=\"main-content-body-text kirby-text-small\">\n @if (bodyText) {\n {{ bodyText }}\n } @else {\n <ng-content select=\"[bodyText]\"></ng-content>\n }\n </p>\n </div>\n </div>\n @if (externalLink) {\n <!-- Only one of below anchors is displayed at a time -\n we want different behavior on varying screen widths -->\n <a\n kirby-button\n class=\"breakout wide-view-action\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [href]=\"externalLink\"\n target=\"_blank\"\n size=\"sm\"\n >\n {{ actionButtonText }}\n <kirby-icon name=\"link\"></kirby-icon>\n </a>\n\n <a\n kirby-button\n class=\"breakout narrow-view-action\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [href]=\"externalLink\"\n [noDecoration]=\"true\"\n [showIconOnly]=\"true\"\n target=\"_blank\"\n size=\"sm\"\n >\n {{ actionButtonText }}\n <kirby-icon name=\"link\"></kirby-icon>\n </a>\n }\n\n @if (!externalLink) {\n <!-- Only one of below buttons is displayed at a time -\n we want different behavior on varying screen widths -->\n <button\n kirby-button\n class=\"breakout wide-view-action\"\n size=\"sm\"\n (click)=\"bannerClicked($event)\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n >\n {{ actionButtonText }}\n </button>\n\n <button\n kirby-button\n class=\"breakout narrow-view-action\"\n size=\"sm\"\n (click)=\"bannerClicked($event)\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [noDecoration]=\"true\"\n [showIconOnly]=\"true\"\n >\n <span class=\"kirby-visually-hidden\">\n {{ actionButtonText }}\n </span>\n </button>\n }\n </div>\n </div>\n\n @if (dismissClick.observed) {\n <button\n kirby-button\n size=\"xs\"\n (click)=\"dismissClicked($event)\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [showIconOnly]=\"true\"\n [attr.aria-label]=\"translations.get('close') + ' ' + title\"\n class=\"dismiss\"\n >\n <kirby-icon name=\"close\"></kirby-icon>\n </button>\n }\n</kirby-card>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i2.ImageBannerHeightDirective"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"kirbydesign-extensions-angular-image-banner.mjs","sources":["../../image-banner/src/image-banner-height.directive.ts","../../image-banner/src/image-banner.component.ts","../../image-banner/src/image-banner.component.html","../../image-banner/src/kirbydesign-extensions-angular-image-banner.ts"],"sourcesContent":["import { Directive, ElementRef, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';\nimport { ResizeObserverService } from '@kirbydesign/designsystem/shared';\n\n/**\n * @Description Temporary directive to ensure correct scroll position behavior on Safari.\n *\n * When navigating between stacked pages, scroll position is not correctly restored on Safari,\n * when the nested kirby-card element uses containment and the host element does not have an explicit height.\n */\n@Directive({\n selector: `[kirbyImageBannerResize]`,\n})\nexport class ImageBannerHeightDirective implements OnInit, OnDestroy {\n private currentHeight: number = 0;\n private host = inject(ElementRef);\n private resizeObserverService = inject(ResizeObserverService);\n private renderer = inject(Renderer2);\n\n ngOnInit() {\n this.resizeObserverService.observe(this.host, (entry) => this.setCardHeightOnHost(entry));\n }\n\n ngOnDestroy() {\n this.resizeObserverService.unobserve(this.host);\n }\n\n private setCardHeightOnHost(entry: ResizeObserverEntry) {\n const hostElement = entry.target as HTMLElement;\n const card = hostElement.querySelector('kirby-card');\n const cardHeight = card?.getBoundingClientRect().height;\n\n if (!hostElement || !cardHeight) return;\n if (cardHeight === this.currentHeight) return;\n\n this.currentHeight = cardHeight;\n this.renderer.setStyle(hostElement, 'min-height', `${cardHeight}px`);\n }\n}\n","import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { ThemeColorDirective, TranslationService } from '@kirbydesign/designsystem/shared';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { ImageBannerHeightDirective } from './image-banner-height.directive';\n\n@Component({\n selector: 'kirby-x-image-banner',\n imports: [CardComponent, ButtonComponent, IconComponent, ThemeColorDirective],\n hostDirectives: [ImageBannerHeightDirective],\n templateUrl: './image-banner.component.html',\n styleUrl: './image-banner.component.scss',\n})\nexport class ImageBannerComponent {\n /**\n * The title placed inside the image banners header.\n */\n @Input() title: string | undefined;\n\n /**\n * The image shown on the banner, and used for the background blur effect.\n */\n @Input() imagePath: string | undefined;\n\n /**\n * The body text placed below the title.\n */\n @Input() bodyText: string | undefined;\n\n /**\n * Whether the button should be shown in narrow view or not.\n */\n @HostBinding('class.show-button-in-narrow-view')\n @Input()\n showButtonInNarrowView: boolean = false;\n\n /**\n * The text of the button in the content area of the image banner. If left empty, will default to 'Read more' (or equivalent translation for [supported locales](https://cookbook.kirby.design/#/home/localization)).\n */\n @Input() actionButtonText: string | undefined = this.translations.get('readMore');\n\n /**\n * When an external link is supplied the entire banner will be an anchor-tag and navigate when activated.\n */\n @Input() externalLink: string | undefined;\n\n /**\n * The blur-effect used for the background.\n */\n @HostBinding('class')\n @Input()\n backgroundBlur: 'dark' | 'light' | 'none' = 'dark';\n\n /**\n * Emitted every time the banner is activated. The entire banner is interactive, and will be activated by click and keyboard interaction.\n */\n @Output() bannerClick = new EventEmitter<Event>();\n\n /**\n * If subscribed to, a dismiss button will be shown. Emitted every time the dismiss button is activated by click and keyboard interaction.\n */\n @Output() dismissClick = new EventEmitter<Event>();\n\n /**\n * If the input imagePath results in an error, it will be reflected in this output.\n */\n @Output()\n imageError = new EventEmitter<ErrorEvent>();\n\n constructor(public translations: TranslationService) {}\n\n public bannerClicked(event: Event) {\n const eventTarget = event.target as HTMLElement;\n const dismissButtonClicked = eventTarget.closest('.dismiss');\n if (dismissButtonClicked) return;\n this.bannerClick.emit(event);\n }\n\n public dismissClicked(event: Event) {\n this.dismissClick.emit(event);\n }\n\n public onImageError($event: ErrorEvent) {\n this.imageError.emit($event);\n }\n}\n","<kirby-card [themeColor]=\"backgroundBlur === 'none' ? 'white' : backgroundBlur\">\n <div class=\"blur-image-wrapper\">\n <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n </div>\n\n <div class=\"main-content-wrapper\">\n <div class=\"main-content-image-wrapper\">\n <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" (error)=\"onImageError($event)\" />\n </div>\n\n <div class=\"main-content\">\n <div class=\"text-content-layout\">\n <div class=\"main-content-header\">\n @if (title) {\n <p class=\"kirby-text-normal-bold\">\n {{ title }}\n </p>\n } @else {\n <div class=\"title kirby-text-normal-bold\">\n <ng-content select=\"[title]\"></ng-content>\n </div>\n }\n </div>\n\n <div class=\"main-content-body\">\n <p class=\"main-content-body-text kirby-text-small\">\n @if (bodyText) {\n {{ bodyText }}\n } @else {\n <ng-content select=\"[bodyText]\"></ng-content>\n }\n </p>\n </div>\n </div>\n @if (externalLink) {\n <!-- Only one of below anchors is displayed at a time -\n we want different behavior on varying screen widths -->\n <a\n kirby-button\n class=\"breakout wide-view-action\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [href]=\"externalLink\"\n target=\"_blank\"\n size=\"sm\"\n >\n {{ actionButtonText }}\n <kirby-icon name=\"link\"></kirby-icon>\n </a>\n\n <a\n kirby-button\n class=\"breakout narrow-view-action\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [href]=\"externalLink\"\n [noDecoration]=\"true\"\n [showIconOnly]=\"true\"\n target=\"_blank\"\n size=\"sm\"\n >\n {{ actionButtonText }}\n <kirby-icon name=\"link\"></kirby-icon>\n </a>\n }\n\n @if (!externalLink) {\n <!-- Only one of below buttons is displayed at a time -\n we want different behavior on varying screen widths -->\n <button\n kirby-button\n class=\"breakout wide-view-action\"\n size=\"sm\"\n (click)=\"bannerClicked($event)\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n >\n {{ actionButtonText }}\n </button>\n\n <button\n kirby-button\n class=\"breakout narrow-view-action\"\n size=\"sm\"\n (click)=\"bannerClicked($event)\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [noDecoration]=\"true\"\n [showIconOnly]=\"true\"\n >\n <span class=\"kirby-visually-hidden\">\n {{ actionButtonText }}\n </span>\n </button>\n }\n </div>\n </div>\n\n @if (dismissClick.observed) {\n <div class=\"dismiss\">\n <button\n kirby-button\n size=\"xs\"\n (click)=\"dismissClicked($event)\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [showIconOnly]=\"true\"\n [attr.aria-label]=\"translations.get('close') + ' ' + title\"\n >\n <kirby-icon name=\"close\"></kirby-icon>\n </button>\n </div>\n }\n</kirby-card>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i2.ImageBannerHeightDirective"],"mappings":"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"}
|
|
@@ -37,14 +37,14 @@ class MenuItemComponent {
|
|
|
37
37
|
this.iconSize = computed(() => (this.size() === 'lg' ? 'sm' : 'xs'), ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
|
|
38
38
|
}
|
|
39
39
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
40
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", 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: ["
|
|
40
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: MenuItemComponent, isStandalone: true, selector: "a[kirby-x-menu-item],button[kirby-x-menu-item]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "\"item\" + id()", "class": "size()" } }, ngImport: i0, template: "<div class=\"menu-item-start {{ size() }}\">\n @if (icon(); as icon) {\n <kirby-icon [size]=\"iconSize()\" [name]=\"icon\"></kirby-icon>\n }\n</div>\n\n<div class=\"menu-item-content\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"menu-item-end\">\n <ng-content select=\"[slot='end']\"></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-grow:1;align-items:center;align-self:stretch;box-sizing:border-box;min-height:32px;border-radius:8px;padding:4px 12px;gap:8px;border:none;background:inherit;font:inherit;color:inherit;text-decoration:none;cursor:pointer}:host.lg{min-height:40px}:host:hover{background:var(--menuitem-hover-background-color, var(--kirby-inputs-background-color-hover))}:host:active{background:var(--menuitem-active-background-color, var(--kirby-inputs-background-color-active))}:host:focus-visible{outline:none}@media(hover:hover)and (pointer:fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}: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:16px;line-height:24px}.menu-item-end{display:inline-flex;min-width:24px;align-items:center;justify-content:center;gap:8px}.menu-item-end:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: IconModule }, { kind: "component", type: i1.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }] }); }
|
|
41
41
|
}
|
|
42
42
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: MenuItemComponent, decorators: [{
|
|
43
43
|
type: Component,
|
|
44
44
|
args: [{ selector: 'a[kirby-x-menu-item],button[kirby-x-menu-item]', host: {
|
|
45
45
|
'[attr.id]': '"item" + id()',
|
|
46
46
|
'[class]': 'size()',
|
|
47
|
-
}, 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: ["
|
|
47
|
+
}, imports: [IconModule], template: "<div class=\"menu-item-start {{ size() }}\">\n @if (icon(); as icon) {\n <kirby-icon [size]=\"iconSize()\" [name]=\"icon\"></kirby-icon>\n }\n</div>\n\n<div class=\"menu-item-content\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"menu-item-end\">\n <ng-content select=\"[slot='end']\"></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-grow:1;align-items:center;align-self:stretch;box-sizing:border-box;min-height:32px;border-radius:8px;padding:4px 12px;gap:8px;border:none;background:inherit;font:inherit;color:inherit;text-decoration:none;cursor:pointer}:host.lg{min-height:40px}:host:hover{background:var(--menuitem-hover-background-color, var(--kirby-inputs-background-color-hover))}:host:active{background:var(--menuitem-active-background-color, var(--kirby-inputs-background-color-active))}:host:focus-visible{outline:none}@media(hover:hover)and (pointer:fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}: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:16px;line-height:24px}.menu-item-end{display:inline-flex;min-width:24px;align-items:center;justify-content:center;gap:8px}.menu-item-end:empty{display:none}\n"] }]
|
|
48
48
|
}], 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 }] }] } });
|
|
49
49
|
|
|
50
50
|
class MenuStateService {
|
|
@@ -211,7 +211,7 @@ class MenuAnchorItemComponent {
|
|
|
211
211
|
}
|
|
212
212
|
}
|
|
213
213
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: MenuAnchorItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
214
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", 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: ["
|
|
214
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", 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:700}.item-badge{display:inline-flex}.toggle-spacer{width:24px;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:12px}.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"] }] }); }
|
|
215
215
|
}
|
|
216
216
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: MenuAnchorItemComponent, decorators: [{
|
|
217
217
|
type: Component,
|
|
@@ -226,7 +226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
226
226
|
ButtonComponent,
|
|
227
227
|
IconComponent,
|
|
228
228
|
BadgeComponent,
|
|
229
|
-
], 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: ["
|
|
229
|
+
], 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:700}.item-badge{display:inline-flex}.toggle-spacer{width:24px;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:12px}.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"] }]
|
|
230
230
|
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }] } });
|
|
231
231
|
|
|
232
232
|
/**
|
|
@@ -311,11 +311,11 @@ class MenuSubmenuItemComponent {
|
|
|
311
311
|
this.#stateService.reorderItems(this.item(), event.item.data, event.previousIndex, event.currentIndex);
|
|
312
312
|
}
|
|
313
313
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: MenuSubmenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
314
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", 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: ["
|
|
314
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", 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:700}.disclosure{transition:transform .2s}.disclosure.rotate{transform:rotate(90deg)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => MenuItemComponent), selector: "a[kirby-x-menu-item],button[kirby-x-menu-item]", inputs: ["id", "size", "icon"] }, { kind: "component", type: i0.forwardRef(() => IconComponent), selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "component", type: i0.forwardRef(() => MenuItemListComponent), selector: "ul[kirby-x-menu-item-list]", inputs: ["items", "size", "id", "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] }); }
|
|
315
315
|
}
|
|
316
316
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: MenuSubmenuItemComponent, decorators: [{
|
|
317
317
|
type: Component,
|
|
318
|
-
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: ["
|
|
318
|
+
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:700}.disclosure{transition:transform .2s}.disclosure.rotate{transform:rotate(90deg)}\n"] }]
|
|
319
319
|
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }] } });
|
|
320
320
|
|
|
321
321
|
class MenuItemListComponent {
|
|
@@ -332,7 +332,7 @@ class MenuItemListComponent {
|
|
|
332
332
|
};
|
|
333
333
|
}
|
|
334
334
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: MenuItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
335
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", 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: ["
|
|
335
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", 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:8px 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:.3s;transition-timing-function:linear;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 }); }
|
|
336
336
|
}
|
|
337
337
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: MenuItemListComponent, decorators: [{
|
|
338
338
|
type: Component,
|
|
@@ -344,7 +344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
344
344
|
MenuAnchorItemComponent,
|
|
345
345
|
forwardRef(() => MenuSubmenuItemComponent),
|
|
346
346
|
CdkDrag,
|
|
347
|
-
], 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: ["
|
|
347
|
+
], 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:8px 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:.3s;transition-timing-function:linear;pointer-events:none}:host .cdk-drag:not(.cdk-drag-preview,.cdk-drag-placeholder){transition:none}\n"] }]
|
|
348
348
|
}], 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 }] }] } });
|
|
349
349
|
|
|
350
350
|
class MenuContainerComponent {
|
|
@@ -474,11 +474,11 @@ class SidebarMenuComponent {
|
|
|
474
474
|
}
|
|
475
475
|
}
|
|
476
476
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SidebarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
477
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: SidebarMenuComponent, isStandalone: true, selector: "aside[kirby-x-sidebar-menu]", ngImport: i0, template: "<div class=\"sidebar-header\" [class.bottom-border]=\"vm.showHeaderBottomBorder()\">\n <ng-content select=\"[slot='header']\"></ng-content>\n</div>\n<div\n kirbyXHeightObserver\n class=\"sidebar-content\"\n cdkScrollable\n (scroll)=\"vm.setScroll($event)\"\n (heightChange)=\"vm.setContainerHeight($event)\"\n>\n <kirby-x-menu-container\n kirbyXHeightObserver\n (heightChange)=\"vm.setMenuHeight($event)\"\n ></kirby-x-menu-container>\n</div>\n<div class=\"sidebar-footer\" [class.top-border]=\"vm.showFooterTopBorder()\">\n <ng-content select=\"[slot='footer']\"></ng-content>\n</div>\n", styles: ["
|
|
477
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: SidebarMenuComponent, isStandalone: true, selector: "aside[kirby-x-sidebar-menu]", ngImport: i0, template: "<div class=\"sidebar-header\" [class.bottom-border]=\"vm.showHeaderBottomBorder()\">\n <ng-content select=\"[slot='header']\"></ng-content>\n</div>\n<div\n kirbyXHeightObserver\n class=\"sidebar-content\"\n cdkScrollable\n (scroll)=\"vm.setScroll($event)\"\n (heightChange)=\"vm.setContainerHeight($event)\"\n>\n <kirby-x-menu-container\n kirbyXHeightObserver\n (heightChange)=\"vm.setMenuHeight($event)\"\n ></kirby-x-menu-container>\n</div>\n<div class=\"sidebar-footer\" [class.top-border]=\"vm.showFooterTopBorder()\">\n <ng-content select=\"[slot='footer']\"></ng-content>\n</div>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-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;overflow:auto}:host *{scrollbar-width:thin;scrollbar-color:var(--kirby-semi-dark) var(--kirby-tertiary)}:host *::-webkit-scrollbar{width:16px}:host *::-webkit-scrollbar-track{background:transparent}:host *::-webkit-scrollbar-thumb{background-color:#8e8e8e80;border-radius:20px;border:4px solid transparent;background-clip:content-box}.sidebar-content{flex-grow:1;display:flex;flex-direction:column;overflow-y:auto}@supports (scrollbar-gutter: stable){.sidebar-content{overflow:hidden auto;scrollbar-gutter:auto}}.sidebar-header,.sidebar-footer{z-index:1;display:flex;align-items:center;justify-content:center;position:sticky}.sidebar-header.bottom-border{box-shadow:0 4px 10px 2px #1c1c1c4d;transition:opacity .3s}.sidebar-footer.top-border{box-shadow:0 -4px 10px 2px #1c1c1c4d;transition:opacity .3s}\n"], dependencies: [{ kind: "directive", type: HeightObserverDirective, selector: "[kirbyXHeightObserver]", outputs: ["heightChange"] }, { kind: "component", type: MenuContainerComponent, selector: "kirby-x-menu-container" }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] }); }
|
|
478
478
|
}
|
|
479
479
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SidebarMenuComponent, decorators: [{
|
|
480
480
|
type: Component,
|
|
481
|
-
args: [{ selector: 'aside[kirby-x-sidebar-menu]', imports: [HeightObserverDirective, MenuContainerComponent, 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 <kirby-x-menu-container\n kirbyXHeightObserver\n (heightChange)=\"vm.setMenuHeight($event)\"\n ></kirby-x-menu-container>\n</div>\n<div class=\"sidebar-footer\" [class.top-border]=\"vm.showFooterTopBorder()\">\n <ng-content select=\"[slot='footer']\"></ng-content>\n</div>\n", styles: ["
|
|
481
|
+
args: [{ selector: 'aside[kirby-x-sidebar-menu]', imports: [HeightObserverDirective, MenuContainerComponent, 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 <kirby-x-menu-container\n kirbyXHeightObserver\n (heightChange)=\"vm.setMenuHeight($event)\"\n ></kirby-x-menu-container>\n</div>\n<div class=\"sidebar-footer\" [class.top-border]=\"vm.showFooterTopBorder()\">\n <ng-content select=\"[slot='footer']\"></ng-content>\n</div>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-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;overflow:auto}:host *{scrollbar-width:thin;scrollbar-color:var(--kirby-semi-dark) var(--kirby-tertiary)}:host *::-webkit-scrollbar{width:16px}:host *::-webkit-scrollbar-track{background:transparent}:host *::-webkit-scrollbar-thumb{background-color:#8e8e8e80;border-radius:20px;border:4px solid transparent;background-clip:content-box}.sidebar-content{flex-grow:1;display:flex;flex-direction:column;overflow-y:auto}@supports (scrollbar-gutter: stable){.sidebar-content{overflow:hidden auto;scrollbar-gutter:auto}}.sidebar-header,.sidebar-footer{z-index:1;display:flex;align-items:center;justify-content:center;position:sticky}.sidebar-header.bottom-border{box-shadow:0 4px 10px 2px #1c1c1c4d;transition:opacity .3s}.sidebar-footer.top-border{box-shadow:0 -4px 10px 2px #1c1c1c4d;transition:opacity .3s}\n"] }]
|
|
482
482
|
}] });
|
|
483
483
|
|
|
484
484
|
class SidebarComponent {
|