@kirbydesign/designsystem 11.5.0 → 11.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/kirbydesign-designsystem-accordion.mjs +11 -11
- package/fesm2022/kirbydesign-designsystem-action-group.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-avatar.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-badge.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-button.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-calendar.mjs +12 -9
- package/fesm2022/kirbydesign-designsystem-calendar.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-card.mjs +16 -16
- package/fesm2022/kirbydesign-designsystem-chart.mjs +22 -22
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-config.mjs +1 -1
- package/fesm2022/kirbydesign-designsystem-data-table.mjs +8 -8
- package/fesm2022/kirbydesign-designsystem-data-table.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-divider.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-dropdown.mjs +43 -122
- package/fesm2022/kirbydesign-designsystem-dropdown.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-empty-state.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-fab-sheet.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-flag.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-form-field.mjs +28 -28
- package/fesm2022/kirbydesign-designsystem-header.mjs +19 -19
- package/fesm2022/kirbydesign-designsystem-helpers.mjs +9 -9
- package/fesm2022/kirbydesign-designsystem-icon.mjs +14 -10
- package/fesm2022/kirbydesign-designsystem-icon.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-item-group.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-item-sliding.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-item.mjs +10 -10
- package/fesm2022/kirbydesign-designsystem-kirby-app.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-list.mjs +40 -40
- package/fesm2022/kirbydesign-designsystem-loading-overlay.mjs +6 -6
- package/fesm2022/kirbydesign-designsystem-menu.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-modal.mjs +44 -44
- package/fesm2022/kirbydesign-designsystem-modal.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-page.mjs +40 -40
- package/fesm2022/kirbydesign-designsystem-popover.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-progress-circle.mjs +6 -6
- package/fesm2022/kirbydesign-designsystem-radio.mjs +11 -11
- package/fesm2022/kirbydesign-designsystem-radio.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-range.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-range.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-reorder-list.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-router-outlet.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-section-header.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-shared-floating.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-shared-portal.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-shared.mjs +18 -18
- package/fesm2022/kirbydesign-designsystem-slide-button.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-slide-button.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-slide.mjs +13 -13
- package/fesm2022/kirbydesign-designsystem-spinner.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs +10 -10
- package/fesm2022/kirbydesign-designsystem-tabs.mjs +13 -13
- package/fesm2022/kirbydesign-designsystem-testing-base.mjs +286 -286
- package/fesm2022/kirbydesign-designsystem-testing-jasmine.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-testing-jest.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-testing.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-toast.mjs +13 -13
- package/fesm2022/kirbydesign-designsystem-toast.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-toggle-button.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-toggle.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-toggle.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-types.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem.mjs +15 -15
- package/fesm2022/kirbydesign-designsystem.mjs.map +1 -1
- package/icons/svg/id-card.svg +3 -0
- package/icons/svg/maintenance.svg +3 -0
- package/icons/svg/message-read.svg +3 -0
- package/icons/svg/ownership.svg +3 -0
- package/icons/svg/top-up.svg +3 -1
- package/package.json +3 -4
- package/types/kirbydesign-designsystem-action-group.d.ts +1 -1
- package/types/kirbydesign-designsystem-calendar.d.ts +5 -1
- package/types/kirbydesign-designsystem-calendar.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-config.d.ts +1 -1
- package/types/kirbydesign-designsystem-dropdown.d.ts +9 -17
- package/types/kirbydesign-designsystem-dropdown.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-icon.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-page.d.ts +1 -1
- package/types/kirbydesign-designsystem-slide.d.ts +1 -1
- package/types/kirbydesign-designsystem-toast.d.ts +2 -2
- package/types/kirbydesign-designsystem-toast.d.ts.map +1 -1
|
@@ -9,10 +9,10 @@ import { IconComponent, IconModule } from '@kirbydesign/designsystem/icon';
|
|
|
9
9
|
import * as i2 from '@kirbydesign/designsystem/shared';
|
|
10
10
|
|
|
11
11
|
class SlideDirective {
|
|
12
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
13
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
12
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SlideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
13
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.4", type: SlideDirective, isStandalone: true, selector: "[kirbySlide]", ngImport: i0 }); }
|
|
14
14
|
}
|
|
15
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
15
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SlideDirective, decorators: [{
|
|
16
16
|
type: Directive,
|
|
17
17
|
args: [{ selector: '[kirbySlide]' }]
|
|
18
18
|
}] });
|
|
@@ -95,10 +95,10 @@ class SlidesComponent {
|
|
|
95
95
|
getNoControlsConfig() {
|
|
96
96
|
return { ...this.getDefaultConfig(), pagination: false, navigation: false };
|
|
97
97
|
}
|
|
98
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
99
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
98
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SlidesComponent, deps: [{ token: i1.PlatformService }, { token: i0.ChangeDetectorRef }, { token: i2.TranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
99
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: SlidesComponent, isStandalone: true, selector: "kirby-slides", inputs: { slidesOptions: "slidesOptions", title: "title", slides: "slides", showNavigation: "showNavigation" }, outputs: { slideChange: "slideChange" }, queries: [{ propertyName: "slideTemplate", first: true, predicate: SlideDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "swiperContainer", first: true, predicate: ["swiperContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (showNavigation || title !== undefined) {\n <div class=\"navigation\">\n <span class=\"title kirby-text-medium\">\n <ng-content select=\"h1,h2,h3,h4,h5,h6\">{{ title }}</ng-content>\n </span>\n @if (\n showNavigation &&\n (!slidesOptions ||\n slidesOptions?.navigation === undefined ||\n slidesOptions?.pagination === undefined)\n ) {\n <div class=\"navigation-inner\">\n @if (!slidesOptions || slidesOptions?.pagination === undefined) {\n <div class=\"pagination\" [ngClass]=\"_paginationId\"></div>\n }\n @if (!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)) {\n <div class=\"buttons\">\n <button\n kirby-button\n attentionLevel=\"3\"\n class=\"nav-prev swiper-button-prev\"\n [ngClass]=\"_prevButtonId\"\n size=\"xs\"\n >\n <kirby-icon name=\"arrow-back\"></kirby-icon>\n </button>\n <button\n kirby-button\n attentionLevel=\"3\"\n class=\"nav-next swiper-button-next\"\n [ngClass]=\"_nextButtonId\"\n size=\"xs\"\n >\n <kirby-icon name=\"arrow-more\"></kirby-icon>\n </button>\n <ng-content select=\"button[kirby-button]\"></ng-content>\n </div>\n }\n </div>\n }\n </div>\n}\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\nhttps://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n @for (slide of slides; track slide; let i = $index) {\n <swiper-slide>\n <ng-container\n *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n ></ng-container>\n </swiper-slide>\n }\n</swiper-container>\n", styles: [":host{--swiper-navigation-sides-offset: 0;--swiper-pagination-bullet-width: 10px;--swiper-pagination-bullet-height: 6px;--swiper-pagination-bullet-border-radius: 3px;--swiper-pagination-bullet-horizontal-gap: 4px;--swiper-pagination-color: var(--kirby-black);--swiper-pagination-bullet-inactive-color: var(--kirby-black);--swiper-pagination-bullet-inactive-opacity: .2}:host .navigation{display:flex;justify-content:space-between;align-items:center;margin-block:0 16px;margin-inline:16px}:host .navigation-inner{display:flex;align-items:center}:host .pagination{display:flex;align-items:center;width:auto;margin-inline-end:16px}:host .pagination ::ng-deep .swiper-pagination-bullet:last-of-type{margin-inline-end:0}:host .buttons{display:none;z-index:2}@media(min-width:768px){:host .buttons{display:block}}:host .buttons .swiper-button-prev{margin-block:0;margin-inline-start:0}:host .buttons .swiper-button-next{margin-block:0;margin-inline-end:0}:host .buttons ::ng-deep>button[kirby-button]{margin-inline:8px 0}:host .swiper-button-lock{display:none}:host swiper-container{padding-block:24px;margin-block:-24px}@media(max-width:767px){:host swiper-container{padding-inline:16px;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}:host .navigation,:host .pagination{margin-inline-end:0}}:host .swiper-button-next.swiper-button-disabled,:host .swiper-button-prev.swiper-button-disabled{opacity:1}:host swiper-slide:has([slideStretchHeight]){height:auto}:host .title ::ng-deep>h1,:host .title ::ng-deep>h2,:host .title ::ng-deep>h3,:host .title ::ng-deep>h4,:host .title ::ng-deep>h5,:host .title ::ng-deep>h6{margin:0;font-size:18px;font-weight:700;line-height:24px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
100
100
|
}
|
|
101
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
101
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SlidesComponent, decorators: [{
|
|
102
102
|
type: Component,
|
|
103
103
|
args: [{ selector: 'kirby-slides', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, ButtonComponent, IconComponent, NgTemplateOutlet], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (showNavigation || title !== undefined) {\n <div class=\"navigation\">\n <span class=\"title kirby-text-medium\">\n <ng-content select=\"h1,h2,h3,h4,h5,h6\">{{ title }}</ng-content>\n </span>\n @if (\n showNavigation &&\n (!slidesOptions ||\n slidesOptions?.navigation === undefined ||\n slidesOptions?.pagination === undefined)\n ) {\n <div class=\"navigation-inner\">\n @if (!slidesOptions || slidesOptions?.pagination === undefined) {\n <div class=\"pagination\" [ngClass]=\"_paginationId\"></div>\n }\n @if (!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)) {\n <div class=\"buttons\">\n <button\n kirby-button\n attentionLevel=\"3\"\n class=\"nav-prev swiper-button-prev\"\n [ngClass]=\"_prevButtonId\"\n size=\"xs\"\n >\n <kirby-icon name=\"arrow-back\"></kirby-icon>\n </button>\n <button\n kirby-button\n attentionLevel=\"3\"\n class=\"nav-next swiper-button-next\"\n [ngClass]=\"_nextButtonId\"\n size=\"xs\"\n >\n <kirby-icon name=\"arrow-more\"></kirby-icon>\n </button>\n <ng-content select=\"button[kirby-button]\"></ng-content>\n </div>\n }\n </div>\n }\n </div>\n}\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\nhttps://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n @for (slide of slides; track slide; let i = $index) {\n <swiper-slide>\n <ng-container\n *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n ></ng-container>\n </swiper-slide>\n }\n</swiper-container>\n", styles: [":host{--swiper-navigation-sides-offset: 0;--swiper-pagination-bullet-width: 10px;--swiper-pagination-bullet-height: 6px;--swiper-pagination-bullet-border-radius: 3px;--swiper-pagination-bullet-horizontal-gap: 4px;--swiper-pagination-color: var(--kirby-black);--swiper-pagination-bullet-inactive-color: var(--kirby-black);--swiper-pagination-bullet-inactive-opacity: .2}:host .navigation{display:flex;justify-content:space-between;align-items:center;margin-block:0 16px;margin-inline:16px}:host .navigation-inner{display:flex;align-items:center}:host .pagination{display:flex;align-items:center;width:auto;margin-inline-end:16px}:host .pagination ::ng-deep .swiper-pagination-bullet:last-of-type{margin-inline-end:0}:host .buttons{display:none;z-index:2}@media(min-width:768px){:host .buttons{display:block}}:host .buttons .swiper-button-prev{margin-block:0;margin-inline-start:0}:host .buttons .swiper-button-next{margin-block:0;margin-inline-end:0}:host .buttons ::ng-deep>button[kirby-button]{margin-inline:8px 0}:host .swiper-button-lock{display:none}:host swiper-container{padding-block:24px;margin-block:-24px}@media(max-width:767px){:host swiper-container{padding-inline:16px;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}:host .navigation,:host .pagination{margin-inline-end:0}}:host .swiper-button-next.swiper-button-disabled,:host .swiper-button-prev.swiper-button-disabled{opacity:1}:host swiper-slide:has([slideStretchHeight]){height:auto}:host .title ::ng-deep>h1,:host .title ::ng-deep>h2,:host .title ::ng-deep>h3,:host .title ::ng-deep>h4,:host .title ::ng-deep>h5,:host .title ::ng-deep>h6{margin:0;font-size:18px;font-weight:700;line-height:24px}\n"] }]
|
|
104
104
|
}], ctorParameters: () => [{ type: i1.PlatformService }, { type: i0.ChangeDetectorRef }, { type: i2.TranslationService }], propDecorators: { swiperContainer: [{
|
|
@@ -125,10 +125,10 @@ class SlideStretchHeightDirective {
|
|
|
125
125
|
this.renderer = renderer;
|
|
126
126
|
this.renderer.setStyle(this.elementRef.nativeElement, 'height', '100%');
|
|
127
127
|
}
|
|
128
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
129
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
128
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SlideStretchHeightDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
129
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.4", type: SlideStretchHeightDirective, isStandalone: true, selector: "[slideStretchHeight]", ngImport: i0 }); }
|
|
130
130
|
}
|
|
131
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
131
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SlideStretchHeightDirective, decorators: [{
|
|
132
132
|
type: Directive,
|
|
133
133
|
args: [{
|
|
134
134
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -138,11 +138,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
138
138
|
|
|
139
139
|
const imports = [SlidesComponent, SlideDirective, SlideStretchHeightDirective];
|
|
140
140
|
class SlideModule {
|
|
141
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
142
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.
|
|
143
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.
|
|
141
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SlideModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
142
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: SlideModule, imports: [CommonModule, ButtonComponent, IconModule, SlidesComponent, SlideDirective, SlideStretchHeightDirective], exports: [SlidesComponent, SlideDirective, SlideStretchHeightDirective] }); }
|
|
143
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SlideModule, imports: [CommonModule, ButtonComponent, IconModule, SlidesComponent] }); }
|
|
144
144
|
}
|
|
145
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
145
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SlideModule, decorators: [{
|
|
146
146
|
type: NgModule,
|
|
147
147
|
args: [{
|
|
148
148
|
imports: [CommonModule, ButtonComponent, IconModule, ...imports],
|
|
@@ -3,20 +3,20 @@ import { ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
|
|
|
3
3
|
import { CommonModule } from '@angular/common';
|
|
4
4
|
|
|
5
5
|
class SpinnerComponent {
|
|
6
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
7
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
6
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: SpinnerComponent, isStandalone: true, selector: "kirby-spinner", ngImport: i0, template: "<div class=\"spinner\">\n <div class=\"inner-circle\"></div>\n <div class=\"outer-circle\"></div>\n</div>\n", styles: [".spinner{overflow:hidden;width:32px;height:32px;position:relative;margin:0 auto}.inner-circle,.outer-circle{width:100%;height:100%;border-radius:50%;background-color:var(--kirby-primary);opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out}.outer-circle{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8
8
|
}
|
|
9
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
9
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
10
10
|
type: Component,
|
|
11
11
|
args: [{ selector: 'kirby-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"spinner\">\n <div class=\"inner-circle\"></div>\n <div class=\"outer-circle\"></div>\n</div>\n", styles: [".spinner{overflow:hidden;width:32px;height:32px;position:relative;margin:0 auto}.inner-circle,.outer-circle{width:100%;height:100%;border-radius:50%;background-color:var(--kirby-primary);opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out}.outer-circle{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}\n"] }]
|
|
12
12
|
}] });
|
|
13
13
|
|
|
14
14
|
class SpinnerModule {
|
|
15
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
16
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.
|
|
17
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.
|
|
15
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
16
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: SpinnerModule, imports: [CommonModule, SpinnerComponent], exports: [SpinnerComponent] }); }
|
|
17
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SpinnerModule, imports: [CommonModule] }); }
|
|
18
18
|
}
|
|
19
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
19
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SpinnerModule, decorators: [{
|
|
20
20
|
type: NgModule,
|
|
21
21
|
args: [{
|
|
22
22
|
imports: [CommonModule, SpinnerComponent],
|
|
@@ -17,10 +17,10 @@ class TabNavigationItemComponent {
|
|
|
17
17
|
const tabElement = this.elementRef.nativeElement.querySelector('[role="tab"]');
|
|
18
18
|
forwardAttributes(this.elementRef.nativeElement, this._attributesToForward, this.renderer, tabElement);
|
|
19
19
|
}
|
|
20
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
21
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
20
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TabNavigationItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: TabNavigationItemComponent, isStandalone: true, selector: "kirby-tab-navigation-item", inputs: { label: "label", truncate: "truncate" }, host: { attributes: { "role": "presentation" } }, ngImport: i0, template: "<button role=\"tab\" type=\"button\" #tabButton>\n <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n <ng-content></ng-content>\n</button>\n", styles: [":host{position:relative;padding-bottom:2px}:host button[role=tab]{background:transparent;color:inherit;font:inherit;cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;margin:0;width:auto;border:none;outline:none;color:var(--kirby-black);box-sizing:border-box;padding:16px;font-size:16px;line-height:24px;gap:4px}:host button[role=tab]:focus,:host button[role=tab]:hover{font-weight:700}:host button[role=tab][aria-selected=true]{font-weight:700}:host button[role=tab][aria-selected=true]:before{content:\"\";width:100%;background-color:var(--kirby-dark);position:absolute;border-radius:1px;height:2px;bottom:0;z-index:2}span[data-text].truncate{max-width:100px;overflow:hidden;text-overflow:ellipsis}span[data-text]:before{display:block;content:attr(data-text);font-weight:700;height:0;overflow:hidden;visibility:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
22
22
|
}
|
|
23
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
23
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TabNavigationItemComponent, decorators: [{
|
|
24
24
|
type: Component,
|
|
25
25
|
args: [{ selector: 'kirby-tab-navigation-item', changeDetection: ChangeDetectionStrategy.OnPush, host: { role: 'presentation' }, template: "<button role=\"tab\" type=\"button\" #tabButton>\n <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n <ng-content></ng-content>\n</button>\n", styles: [":host{position:relative;padding-bottom:2px}:host button[role=tab]{background:transparent;color:inherit;font:inherit;cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;margin:0;width:auto;border:none;outline:none;color:var(--kirby-black);box-sizing:border-box;padding:16px;font-size:16px;line-height:24px;gap:4px}:host button[role=tab]:focus,:host button[role=tab]:hover{font-weight:700}:host button[role=tab][aria-selected=true]{font-weight:700}:host button[role=tab][aria-selected=true]:before{content:\"\";width:100%;background-color:var(--kirby-dark);position:absolute;border-radius:1px;height:2px;bottom:0;z-index:2}span[data-text].truncate{max-width:100px;overflow:hidden;text-overflow:ellipsis}span[data-text]:before{display:block;content:attr(data-text);font-weight:700;height:0;overflow:hidden;visibility:hidden}\n"] }]
|
|
26
26
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { label: [{
|
|
@@ -125,10 +125,10 @@ class TabNavigationComponent {
|
|
|
125
125
|
this.setTabElements();
|
|
126
126
|
});
|
|
127
127
|
}
|
|
128
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
129
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
128
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TabNavigationComponent, deps: [{ token: i1.WindowRef }, { token: i2.KeyboardHandlerService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
129
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: TabNavigationComponent, isStandalone: true, selector: "kirby-tab-navigation", inputs: { selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { listeners: { "click": "onItemSelect($event)", "keydown.enter": "onItemSelect($event)", "keydown.home": "onKeydown($event)", "keydown.end": "onKeydown($event)", "keydown.arrowright": "onKeydown($event)", "keydown.arrowleft": "onKeydown($event)" } }, queries: [{ propertyName: "tabs", predicate: TabNavigationItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "tabBar", first: true, predicate: ["tabBar"], descendants: true }], ngImport: i0, template: "<div role=\"tablist\" #tabBar>\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;position:relative}@media(max-width:767px){:host{inline-size:100dvi;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}}:host:before{content:\"\";background-color:var(--kirby-medium);position:absolute;height:1px;bottom:0;z-index:1;left:0;width:100%}div[role=tablist]{position:relative;margin:0 auto;display:flex;align-items:center;justify-content:left;flex-wrap:nowrap;overflow-x:scroll;column-gap:12px;-webkit-overflow-scrolling:auto;scrollbar-width:none}div[role=tablist]::-webkit-scrollbar{display:none}@media(max-width:767px){div[role=tablist]{padding-inline:var(--padding-start) var(--padding-end)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
130
130
|
}
|
|
131
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
131
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TabNavigationComponent, decorators: [{
|
|
132
132
|
type: Component,
|
|
133
133
|
args: [{ selector: 'kirby-tab-navigation', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div role=\"tablist\" #tabBar>\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;position:relative}@media(max-width:767px){:host{inline-size:100dvi;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}}:host:before{content:\"\";background-color:var(--kirby-medium);position:absolute;height:1px;bottom:0;z-index:1;left:0;width:100%}div[role=tablist]{position:relative;margin:0 auto;display:flex;align-items:center;justify-content:left;flex-wrap:nowrap;overflow-x:scroll;column-gap:12px;-webkit-overflow-scrolling:auto;scrollbar-width:none}div[role=tablist]::-webkit-scrollbar{display:none}@media(max-width:767px){div[role=tablist]{padding-inline:var(--padding-start) var(--padding-end)}}\n"] }]
|
|
134
134
|
}], ctorParameters: () => [{ type: i1.WindowRef }, { type: i2.KeyboardHandlerService }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { tabBar: [{
|
|
@@ -162,11 +162,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
162
162
|
}] } });
|
|
163
163
|
|
|
164
164
|
class TabNavigationModule {
|
|
165
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
166
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.
|
|
167
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.
|
|
165
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TabNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
166
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: TabNavigationModule, imports: [CommonModule, TabNavigationComponent, TabNavigationItemComponent], exports: [TabNavigationComponent, TabNavigationItemComponent] }); }
|
|
167
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TabNavigationModule, imports: [CommonModule] }); }
|
|
168
168
|
}
|
|
169
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
169
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TabNavigationModule, decorators: [{
|
|
170
170
|
type: NgModule,
|
|
171
171
|
args: [{
|
|
172
172
|
imports: [CommonModule, TabNavigationComponent, TabNavigationItemComponent],
|
|
@@ -17,10 +17,10 @@ class TabsService {
|
|
|
17
17
|
resetOutlet() {
|
|
18
18
|
this.outletSubject$.next(null);
|
|
19
19
|
}
|
|
20
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
21
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
20
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TabsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
21
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TabsService, providedIn: 'root' }); }
|
|
22
22
|
}
|
|
23
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
23
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TabsService, decorators: [{
|
|
24
24
|
type: Injectable,
|
|
25
25
|
args: [{
|
|
26
26
|
providedIn: 'root',
|
|
@@ -38,10 +38,10 @@ class TabsComponent {
|
|
|
38
38
|
ngOnDestroy() {
|
|
39
39
|
this.tabsService.resetOutlet();
|
|
40
40
|
}
|
|
41
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
42
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
41
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TabsComponent, deps: [{ token: TabsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
42
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: TabsComponent, isStandalone: true, selector: "kirby-tab-bar", host: { properties: { "class.tab-bar-bottom-hidden": "this.tabBarBottomHidden" } }, viewQueries: [{ propertyName: "tabs", first: true, predicate: IonTabs, descendants: true, static: true }], ngImport: i0, template: "<ion-tabs>\n <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n <ng-content></ng-content>\n </ion-tab-bar>\n</ion-tabs>\n", styles: [":host(:not(.tab-bar-bottom-hidden)){--kirby-page-footer-safe-area-bottom: 0px}ion-tabs ion-tab-bar{--background: rgba(var(--kirby-white-rgb), .94);--border: 1px solid var(--kirby-light);--color: var(--kirby-black);display:flex;max-width:var(--kirby-tab-bar-max-width, none);justify-content:center;height:var(--kirby-tab-bar-height);padding-left:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);padding-right:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);width:100%}ion-tabs ion-tab-bar.bottom-hidden{display:none}@media(min-width:768px){ion-tabs{--kirby-tab-bar-height: 70px}ion-tabs ion-tab-bar{column-gap:24px}}@media(min-width:992px)and (hover:hover)and (pointer:fine){ion-tabs{flex-direction:column-reverse;--kirby-page-footer-safe-area-bottom: initial}ion-tabs ion-tab-bar{margin:0 auto;justify-content:flex-end;column-gap:initial}ion-tabs ion-tab-bar.bottom-hidden{display:flex}}\n"], dependencies: [{ kind: "component", type: IonTabs, selector: "ion-tabs" }, { kind: "component", type: IonTabBar, selector: "ion-tab-bar", inputs: ["color", "mode", "selectedTab", "translucent"] }] }); }
|
|
43
43
|
}
|
|
44
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
44
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TabsComponent, decorators: [{
|
|
45
45
|
type: Component,
|
|
46
46
|
args: [{ selector: 'kirby-tab-bar', imports: [IonTabs, IonTabBar], template: "<ion-tabs>\n <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n <ng-content></ng-content>\n </ion-tab-bar>\n</ion-tabs>\n", styles: [":host(:not(.tab-bar-bottom-hidden)){--kirby-page-footer-safe-area-bottom: 0px}ion-tabs ion-tab-bar{--background: rgba(var(--kirby-white-rgb), .94);--border: 1px solid var(--kirby-light);--color: var(--kirby-black);display:flex;max-width:var(--kirby-tab-bar-max-width, none);justify-content:center;height:var(--kirby-tab-bar-height);padding-left:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);padding-right:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);width:100%}ion-tabs ion-tab-bar.bottom-hidden{display:none}@media(min-width:768px){ion-tabs{--kirby-tab-bar-height: 70px}ion-tabs ion-tab-bar{column-gap:24px}}@media(min-width:992px)and (hover:hover)and (pointer:fine){ion-tabs{flex-direction:column-reverse;--kirby-page-footer-safe-area-bottom: initial}ion-tabs ion-tab-bar{margin:0 auto;justify-content:flex-end;column-gap:initial}ion-tabs ion-tab-bar.bottom-hidden{display:flex}}\n"] }]
|
|
47
47
|
}], ctorParameters: () => [{ type: TabsService }], propDecorators: { tabBarBottomHidden: [{
|
|
@@ -65,10 +65,10 @@ class TabButtonComponent {
|
|
|
65
65
|
dispatchEvent(clickEvent);
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
69
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
68
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
69
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: TabButtonComponent, isStandalone: true, selector: "kirby-tab-button", inputs: { tab: "tab" }, outputs: { click: "click" }, queries: [{ propertyName: "icons", predicate: IconComponent }], ngImport: i0, template: "<ion-tab-button\n #ionTabButton\n [tab]=\"tab\"\n (click)=\"onClick($event, ionTabButton.selected)\"\n tabindex=\"0\"\n>\n @if (icons.length === 1 || !ionTabButton.selected) {\n <ng-content select=\"kirby-icon:not([selected-tab])\"></ng-content>\n }\n @if (ionTabButton.selected) {\n <ng-content select=\"kirby-icon[selected-tab]\"></ng-content>\n }\n <ng-content></ng-content>\n <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n", styles: [":host{display:contents}@media(hover:hover)and (pointer:fine){ion-tab-button.ion-focused{--background: rgb(244.8, 244.8, 244.8);--background-focused-opacity: 0}ion-tab-button.ion-focused:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}@media(hover:hover){ion-tab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: rgb(244.8, 244.8, 244.8)}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: rgb(234.6, 234.6, 234.6)}ion-tab-button{transition:background-color 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-weight:500;font-size:12px;line-height:16px;--color: var(--kirby-text-color-semi-dark);--color-selected: var(--kirby-black);--padding-start: 0;--padding-end: 0;--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left: calc(50% + .4em) }ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-top: .3em;--kirby-badge-left: calc(50% + .2em) }@media(min-width:768px){ion-tab-button{flex:none;flex-direction:row;font-size:14px;line-height:20px;--padding-start: 24px;--padding-end: 24px;--kirby-badge-position: absolute;--kirby-badge-top: calc(50% - 1.35em) ;--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:2px;margin-bottom:1px}ion-tab-button ::ng-deep>kirby-icon{--kirby-icon-margin-right: 8px}}@media(min-width:992px)and (hover:hover)and (pointer:fine){ion-tab-button{--padding-start: 12px;--padding-end: 12px}}\n"], dependencies: [{ kind: "component", type: IonTabButton, selector: "ion-tab-button", inputs: ["disabled", "download", "href", "layout", "mode", "rel", "selected", "tab", "target"] }] }); }
|
|
70
70
|
}
|
|
71
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
71
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TabButtonComponent, decorators: [{
|
|
72
72
|
type: Component,
|
|
73
73
|
args: [{ selector: 'kirby-tab-button', imports: [IonTabButton], template: "<ion-tab-button\n #ionTabButton\n [tab]=\"tab\"\n (click)=\"onClick($event, ionTabButton.selected)\"\n tabindex=\"0\"\n>\n @if (icons.length === 1 || !ionTabButton.selected) {\n <ng-content select=\"kirby-icon:not([selected-tab])\"></ng-content>\n }\n @if (ionTabButton.selected) {\n <ng-content select=\"kirby-icon[selected-tab]\"></ng-content>\n }\n <ng-content></ng-content>\n <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n", styles: [":host{display:contents}@media(hover:hover)and (pointer:fine){ion-tab-button.ion-focused{--background: rgb(244.8, 244.8, 244.8);--background-focused-opacity: 0}ion-tab-button.ion-focused:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}@media(hover:hover){ion-tab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: rgb(244.8, 244.8, 244.8)}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: rgb(234.6, 234.6, 234.6)}ion-tab-button{transition:background-color 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-weight:500;font-size:12px;line-height:16px;--color: var(--kirby-text-color-semi-dark);--color-selected: var(--kirby-black);--padding-start: 0;--padding-end: 0;--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left: calc(50% + .4em) }ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-top: .3em;--kirby-badge-left: calc(50% + .2em) }@media(min-width:768px){ion-tab-button{flex:none;flex-direction:row;font-size:14px;line-height:20px;--padding-start: 24px;--padding-end: 24px;--kirby-badge-position: absolute;--kirby-badge-top: calc(50% - 1.35em) ;--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:2px;margin-bottom:1px}ion-tab-button ::ng-deep>kirby-icon{--kirby-icon-margin-right: 8px}}@media(min-width:992px)and (hover:hover)and (pointer:fine){ion-tab-button{--padding-start: 12px;--padding-end: 12px}}\n"] }]
|
|
74
74
|
}], propDecorators: { tab: [{
|
|
@@ -81,15 +81,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
81
81
|
}] } });
|
|
82
82
|
|
|
83
83
|
class TabsModule {
|
|
84
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
85
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.
|
|
84
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
85
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: TabsModule, imports: [IconModule,
|
|
86
86
|
CommonModule,
|
|
87
87
|
IonTabs,
|
|
88
88
|
IonTabBar,
|
|
89
89
|
IonTabButton,
|
|
90
90
|
TabsComponent,
|
|
91
91
|
TabButtonComponent], exports: [TabsComponent, TabButtonComponent] }); }
|
|
92
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.
|
|
92
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TabsModule, providers: [TabsService], imports: [IconModule,
|
|
93
93
|
CommonModule,
|
|
94
94
|
IonTabs,
|
|
95
95
|
IonTabBar,
|
|
@@ -97,7 +97,7 @@ class TabsModule {
|
|
|
97
97
|
TabsComponent,
|
|
98
98
|
TabButtonComponent] }); }
|
|
99
99
|
}
|
|
100
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
100
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TabsModule, decorators: [{
|
|
101
101
|
type: NgModule,
|
|
102
102
|
args: [{
|
|
103
103
|
imports: [
|