@kirbydesign/designsystem 11.6.1 → 11.6.2
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 +10 -10
- 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 +3 -3
- 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-data-table.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-divider.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-dropdown.mjs +16 -19
- 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 +10 -10
- 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 +42 -42
- 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 +3 -3
- 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 +3 -3
- 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 +6 -6
- package/fesm2022/kirbydesign-designsystem-toggle-button.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-toggle.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-types.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem.mjs +13 -13
- package/package.json +2 -2
- package/types/kirbydesign-designsystem-dropdown.d.ts +1 -1
- package/types/kirbydesign-designsystem-dropdown.d.ts.map +1 -1
|
@@ -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.2.0", 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.2.0", 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.2.0", 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.2.0", 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.2.0", 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.2.0", 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.1.4", 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.2.0", ngImport: i0, type: TabNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
166
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: TabNavigationModule, imports: [CommonModule, TabNavigationComponent, TabNavigationItemComponent], exports: [TabNavigationComponent, TabNavigationItemComponent] }); }
|
|
167
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", 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.2.0", 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.2.0", ngImport: i0, type: TabsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
21
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", 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.2.0", 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.2.0", ngImport: i0, type: TabsComponent, deps: [{ token: TabsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
42
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", 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.2.0", 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.2.0", ngImport: i0, type: TabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
69
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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.2.0", 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.1.4", 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.2.0", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
85
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", 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.2.0", 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.2.0", ngImport: i0, type: TabsModule, decorators: [{
|
|
101
101
|
type: NgModule,
|
|
102
102
|
args: [{
|
|
103
103
|
imports: [
|