@kirbydesign/designsystem 5.2.3-beta.0 → 5.3.1
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/README.md +7 -0
- package/bundles/kirbydesign-designsystem-testing-base.umd.js.map +1 -1
- package/bundles/kirbydesign-designsystem-testing-base.umd.min.js.map +1 -1
- package/bundles/kirbydesign-designsystem.umd.js +44 -30
- package/bundles/kirbydesign-designsystem.umd.js.map +1 -1
- package/bundles/kirbydesign-designsystem.umd.min.js +1 -1
- package/bundles/kirbydesign-designsystem.umd.min.js.map +1 -1
- package/esm2015/lib/components/card/card-header/card-header.component.js +1 -1
- package/esm2015/lib/components/card/card-header/card-header.component.metadata.json +1 -1
- package/esm2015/lib/components/chart/chart-js/chart-js.service.js +38 -26
- package/esm2015/lib/components/chart/chart-js/chart-js.service.metadata.json +1 -1
- package/esm2015/lib/components/chart/chart.component.js +1 -1
- package/esm2015/lib/components/chart/chart.component.metadata.json +1 -1
- package/esm2015/lib/components/chart/chart.types.js +1 -1
- package/esm2015/lib/components/chart/chart.types.metadata.json +1 -1
- package/esm2015/lib/components/modal/modal-wrapper/modal-wrapper.component.js +1 -1
- package/esm2015/lib/components/modal/modal-wrapper/modal-wrapper.component.metadata.json +1 -1
- package/esm2015/lib/components/radio/radio.component.js +1 -1
- package/esm2015/lib/components/radio/radio.component.metadata.json +1 -1
- package/esm2015/lib/components/tabs/tabs.component.js +1 -1
- package/esm2015/lib/components/tabs/tabs.component.metadata.json +1 -1
- package/esm2015/testing-base/lib/components/mock.chart.component.js +1 -1
- package/esm2015/testing-base/lib/components/mock.chart.component.metadata.json +1 -1
- package/fesm2015/kirbydesign-designsystem-testing-base.js.map +1 -1
- package/fesm2015/kirbydesign-designsystem.js +41 -29
- package/fesm2015/kirbydesign-designsystem.js.map +1 -1
- package/icons/svg/more.svg +5 -7
- package/kirbydesign-designsystem.metadata.json +1 -1
- package/lib/components/chart/chart-js/chart-js.service.d.ts +4 -3
- package/lib/components/chart/chart.component.d.ts +3 -3
- package/lib/components/chart/chart.types.d.ts +1 -0
- package/package.json +2 -2
- package/testing-base/kirbydesign-designsystem-testing-base.metadata.json +1 -1
- package/testing-base/lib/components/mock.chart.component.d.ts +2 -2
- package/scss/_trigger-publish.scss +0 -1
- package/scss/_trigger.scss +0 -1
- package/scss/awesome-stylesheet.scss +0 -1
- package/scss/base/_awesome-partial.scss +0 -1
- package/scss/base/_index.scss +0 -1
- package/scss/base/_interaction-states.scss +0 -1
- package/scss/base/_link.scss +0 -1
- package/scss/base/index.scss +0 -1
- package/scss/interaction-state/_focus.scss +0 -1
- package/scss/interaction-state/_hover.scss +0 -1
- package/scss/interaction-state/_index.scss +0 -1
- package/scss/interaction-state/_layer.scss +0 -1
- package/scss/interaction-state/_state-layer.scss +0 -1
- package/scss/interaction-state/_utilities.scss +0 -1
- package/scss/interaction-state/ionic/_active.scss +0 -1
- package/scss/interaction-state/ionic/_hover.scss +0 -1
- package/scss/interaction-state/ionic/_index.scss +0 -1
- package/scss/interaction-states/_hover.scss +0 -1
- package/scss/interaction-states/_index.scss +0 -1
- package/scss/opt-out/_index.scss +0 -1
- package/scss/opt-out/_link.scss +0 -1
|
@@ -1419,7 +1419,7 @@ ModalWrapperComponent.decorators = [
|
|
|
1419
1419
|
selector: 'kirby-modal-wrapper',
|
|
1420
1420
|
template: "<ion-header (touchstart)=\"onHeaderTouchStart($event)\">\n <ion-toolbar>\n <ion-title>{{ config.title }}</ion-title>\n <ion-buttons slot=\"start\" *ngIf=\"config.flavor === 'drawer'\">\n <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"></ng-container>\n </ion-buttons>\n <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'modal'\">\n <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n </ion-buttons>\n <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'drawer' && config.drawerSupplementaryAction\">\n <ng-container\n *ngTemplateOutlet=\"supplementaryButton; context: { btn: config.drawerSupplementaryAction }\"\n ></ng-container>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"true\">\n <ng-container\n *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n ></ng-container>\n <router-outlet\n name=\"kirbyModalWrapperOutlet\"\n [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n ></router-outlet>\n</ion-content>\n\n<ng-template #closeButton let-icon=\"icon\">\n <button kirby-button attentionLevel=\"4\" size=\"sm\" (click)=\"close()\">\n <kirby-icon [name]=\"icon\"></kirby-icon>\n </button>\n</ng-template>\n\n<ng-template #supplementaryButton let-btn=\"btn\">\n <button kirby-button attentionLevel=\"2\" size=\"sm\" (click)=\"btn.action($event)\">\n <kirby-icon [name]=\"btn.iconName\"></kirby-icon>\n </button>\n</ng-template>\n",
|
|
1421
1421
|
providers: [{ provide: Modal, useExisting: ModalWrapperComponent }],
|
|
1422
|
-
styles: ["ion-header ion-toolbar{--padding-start:16px;--padding-end:16px;--padding-bottom:16px;--padding-top:16px;--border-width:0;--background:transparent;--color:var(--kirby-modal-color,var(--kirby-black))}ion-header ion-toolbar button{color:var(--color)}@media (min-width:721px){ion-header ion-toolbar{padding-top:8px}}:host{--vh100:var(--vh,1vh) * 100;--header-height:
|
|
1422
|
+
styles: ["ion-header ion-toolbar{--padding-start:16px;--padding-end:16px;--padding-bottom:16px;--padding-top:16px;--border-width:0;--background:transparent;--color:var(--kirby-modal-color,var(--kirby-black))}ion-header ion-toolbar button{color:var(--color)}@media (min-width:721px){ion-header ion-toolbar{padding-top:8px}}:host{--vh100:var(--vh,1vh) * 100;--header-height:0px;--footer-height:0px}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}@media (min-width:721px){:host-context(ion-modal:not(.kirby-modal-full-height)){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top,0))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer{padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top,0))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:var(--kirby-safe-area-top,0)}@media (min-width:721px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:8px}}ion-title{box-sizing:border-box;padding-inline-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end));font-size:22px;font-weight:700}:host(.drawer) ion-title{font-size:18px}ion-content{--background:transparent;--color:var(--kirby-modal-color,var(--kirby-black));display:flex;flex-direction:column;--padding-top:24px;--padding-bottom:24px;--padding-start:16px;--padding-end:16px}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width:721px){ion-content{--padding-start:56px;--padding-end:56px}}"]
|
|
1423
1423
|
},] }
|
|
1424
1424
|
];
|
|
1425
1425
|
/** @nocollapse */
|
|
@@ -2169,7 +2169,7 @@ CardHeaderComponent.decorators = [
|
|
|
2169
2169
|
{ type: Component, args: [{
|
|
2170
2170
|
selector: 'kirby-card-header',
|
|
2171
2171
|
template: "<header>\n <h2 *ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n <h4 *ngIf=\"subtitle\">{{ subtitle }}</h4>\n <ng-content></ng-content>\n</header>\n",
|
|
2172
|
-
styles: [":host{display:block;border-top-left-radius:16px;border-top-right-radius:16px;text-align:center;padding:var(--kirby-internal-card-header-padding,16px);color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color)}h2{font-size:16px;font-weight:400;margin:0 0 var(--kirby-internal-card-header-margin-bottom,8px);line-height:var(--kirby-internal-card-header-line-height,28px)}h2.bold{font-weight:700}h4{font-size:14px;margin:0;font-weight:400}:host(.danger){--kirby-card-header-background-color:var(--kirby-danger);--kirby-card-header-color:var(--kirby-danger-contrast)}:host(.warning){--kirby-card-header-background-color:var(--kirby-warning);--kirby-card-header-color:var(--kirby-warning-contrast)}:host(.success){--kirby-card-header-background-color:var(--kirby-success);--kirby-card-header-color:var(--kirby-success-contrast)}:host(.info){--kirby-card-header-background-color:var(--kirby-semi-light);--kirby-card-header-color:var(--kirby-semi-light-contrast)}:host(.danger,.warning,.success,.info){--kirby-internal-card-header-padding:2px 8px}:host(.danger,.warning,.success,.info) h2{--kirby-internal-card-header-line-height:24px;--kirby-internal-card-header-margin-bottom:
|
|
2172
|
+
styles: [":host{display:block;border-top-left-radius:16px;border-top-right-radius:16px;text-align:center;padding:var(--kirby-internal-card-header-padding,16px);color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color)}h2{font-size:16px;font-weight:400;margin:0 0 var(--kirby-internal-card-header-margin-bottom,8px);line-height:var(--kirby-internal-card-header-line-height,28px)}h2.bold{font-weight:700}h4{font-size:14px;margin:0;font-weight:400}:host(.danger){--kirby-card-header-background-color:var(--kirby-danger);--kirby-card-header-color:var(--kirby-danger-contrast)}:host(.warning){--kirby-card-header-background-color:var(--kirby-warning);--kirby-card-header-color:var(--kirby-warning-contrast)}:host(.success){--kirby-card-header-background-color:var(--kirby-success);--kirby-card-header-color:var(--kirby-success-contrast)}:host(.info){--kirby-card-header-background-color:var(--kirby-semi-light);--kirby-card-header-color:var(--kirby-semi-light-contrast)}:host(.danger,.warning,.success,.info){--kirby-internal-card-header-padding:2px 8px}:host(.danger,.warning,.success,.info) h2{--kirby-internal-card-header-line-height:24px;--kirby-internal-card-header-margin-bottom:0px}"]
|
|
2173
2173
|
},] }
|
|
2174
2174
|
];
|
|
2175
2175
|
CardHeaderComponent.propDecorators = {
|
|
@@ -3697,6 +3697,8 @@ class ChartJSService {
|
|
|
3697
3697
|
this.chart.data.datasets = datasets;
|
|
3698
3698
|
}
|
|
3699
3699
|
updateLabels(labels) {
|
|
3700
|
+
/* As labels provided via the 'labels' input property always has
|
|
3701
|
+
highest priority - we can just set the property directly */
|
|
3700
3702
|
this.chart.data.labels = labels;
|
|
3701
3703
|
}
|
|
3702
3704
|
updateType(type, customOptions) {
|
|
@@ -3748,7 +3750,7 @@ class ChartJSService {
|
|
|
3748
3750
|
}
|
|
3749
3751
|
destructivelyUpdateType(type, customOptions) {
|
|
3750
3752
|
const datasets = this.chart.data.datasets;
|
|
3751
|
-
const labels = this.chart.data.labels;
|
|
3753
|
+
const labels = this.chart.data.labels; // chart.js stores labels as unknown[]; cast it to ChartLabel[]
|
|
3752
3754
|
const annotations = this.getExistingChartAnnotations();
|
|
3753
3755
|
this.chartType = type;
|
|
3754
3756
|
const options = this.createOptionsObject({ customOptions, annotations });
|
|
@@ -3855,32 +3857,42 @@ class ChartJSService {
|
|
|
3855
3857
|
day: 'numeric',
|
|
3856
3858
|
}));
|
|
3857
3859
|
}
|
|
3860
|
+
getLabelsToApply(args) {
|
|
3861
|
+
const { datasets, labels, type, indexAxis } = args;
|
|
3862
|
+
const datasetHasLabels = ({ data }) => !!(data === null || data === void 0 ? void 0 : data.some((datapoint) => typeof datapoint === 'object' && typeof datapoint[indexAxis] === 'string'));
|
|
3863
|
+
/*
|
|
3864
|
+
Labels can be provided by the user two ways:
|
|
3865
|
+
1. As a seperate ChartLabel[] via the 'labels' input prop - this has highest priority
|
|
3866
|
+
2. Together with the dataset via the 'data' input prop - here each datapoint contains
|
|
3867
|
+
a label for the indexAxis.
|
|
3868
|
+
For example: { x: 'label1', y: 1} in the case where the index axis is 'x'.
|
|
3869
|
+
|
|
3870
|
+
If no labels are provided then default labels are used.
|
|
3871
|
+
*/
|
|
3872
|
+
const labelsAreGivenAsSeperateArray = labels !== undefined;
|
|
3873
|
+
const labelsAreGivenTogetherWithDataset = datasets.some(datasetHasLabels);
|
|
3874
|
+
if (labelsAreGivenAsSeperateArray) {
|
|
3875
|
+
return labels;
|
|
3876
|
+
}
|
|
3877
|
+
else if (labelsAreGivenTogetherWithDataset) {
|
|
3878
|
+
return null;
|
|
3879
|
+
}
|
|
3880
|
+
else {
|
|
3881
|
+
/*
|
|
3882
|
+
Chart.js requires labels along the index axis to render anything therefore
|
|
3883
|
+
all other types than stock uses empty labels as default. The stock type
|
|
3884
|
+
displays day & month as default.
|
|
3885
|
+
*/
|
|
3886
|
+
return type === 'stock'
|
|
3887
|
+
? this.getDefaultStockLabels(datasets, this.locale)
|
|
3888
|
+
: this.createBlankLabels(datasets);
|
|
3889
|
+
}
|
|
3890
|
+
}
|
|
3858
3891
|
createConfigurationObject(type, datasets, options, labels) {
|
|
3892
|
+
var _a, _b;
|
|
3859
3893
|
const typeConfig = this.chartConfigService.getTypeConfig(type);
|
|
3860
|
-
const
|
|
3861
|
-
|
|
3862
|
-
if (type === 'stock') {
|
|
3863
|
-
/*
|
|
3864
|
-
The time scale will auto generate labels based on data.
|
|
3865
|
-
It should be possible to pass an empty array to get the default
|
|
3866
|
-
behaviour of chart.js when using stock chart.
|
|
3867
|
-
|
|
3868
|
-
TODO: Simplify to always pass labels, if given, to chart.js.
|
|
3869
|
-
Would be a breaking change. See issue:
|
|
3870
|
-
https://github.com/kirbydesign/designsystem/issues/2085
|
|
3871
|
-
*/
|
|
3872
|
-
const shouldUseTimescaleLabels = (labels === null || labels === void 0 ? void 0 : labels.length) === 0 && ((_b = (_a = options === null || options === void 0 ? void 0 : options.scales) === null || _a === void 0 ? void 0 : _a.x) === null || _b === void 0 ? void 0 : _b.type) === 'time';
|
|
3873
|
-
if (shouldUseTimescaleLabels)
|
|
3874
|
-
return labels;
|
|
3875
|
-
return this.getDefaultStockLabels(datasets, this.locale);
|
|
3876
|
-
}
|
|
3877
|
-
else if ((labels === null || labels === void 0 ? void 0 : labels.length) > 0) {
|
|
3878
|
-
return labels;
|
|
3879
|
-
}
|
|
3880
|
-
else {
|
|
3881
|
-
return this.createBlankLabels(datasets);
|
|
3882
|
-
}
|
|
3883
|
-
})();
|
|
3894
|
+
const indexAxis = (_b = (_a = typeConfig === null || typeConfig === void 0 ? void 0 : typeConfig.options) === null || _a === void 0 ? void 0 : _a.indexAxis) !== null && _b !== void 0 ? _b : 'x';
|
|
3895
|
+
const labelsToApply = this.getLabelsToApply({ labels, datasets, type, indexAxis });
|
|
3884
3896
|
return mergeDeepAll(typeConfig, {
|
|
3885
3897
|
data: {
|
|
3886
3898
|
labels: labelsToApply,
|
|
@@ -5729,7 +5741,7 @@ RadioComponent.decorators = [
|
|
|
5729
5741
|
{ type: Component, args: [{
|
|
5730
5742
|
selector: 'kirby-radio',
|
|
5731
5743
|
template: "<div class=\"wrapper\">\n <ion-radio\n [value]=\"value\"\n [disabled]=\"disabled\"\n mode=\"md\"\n [attr.aria-labelledby]=\"text ? _labelId : null\"\n ></ion-radio>\n <span [id]=\"_labelId\" *ngIf=\"text\">{{ text }}</span>\n</div>\n",
|
|
5732
|
-
styles: [":host{display:inline-block}:host.has-label{display:block;line-height:24px;white-space:pre-line}:host.has-label div.wrapper{position:relative;display:inline-flex;align-items:flex-start;vertical-align:top;padding:16px 12px 16px 0}:host.has-label.xs .wrapper,:host.has-label :host-context(.radio-xs) .wrapper{padding-top:4px;padding-bottom:4px}:host.has-label.sm .wrapper,:host.has-label :host-context(.radio-sm) .wrapper{padding-top:10px;padding-bottom:10px}:host.has-label.md .wrapper,:host.has-label :host-context(.radio-md) .wrapper{padding-top:16px;padding-bottom:16px}:host.has-label ion-radio{position:static;margin-left:16px;margin-right:12px}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-radio{opacity:1;--color:var(--kirby-medium);--color-checked:var(--kirby-medium)}:host[disabled] ion-radio::part(container){background-color:var(--kirby-semi-light)}ion-radio{min-height:24px;min-width:24px;padding:2px;box-sizing:border-box;--border-width:1px;--color:var(--kirby-semi-dark);--color-checked:var(--kirby-success)}ion-radio::part(container){background-color:var(--kirby-white)}ion-radio::part(mark){width:60%;height:60%}ion-radio:active{--color:transparent}ion-radio:active::part(container){background-color:var(--kirby-white-shade)}ion-radio :host-context(kirby-radio-group.error) ion-radio,ion-radio :host-context(kirby-radio-group.error) ion-radio:active,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio:active{--color:var(--kirby-danger)}@media (hover:hover){ion-radio:focus::part(container){box-shadow:0 0 0 1px var(--kirby-background-color),0 0 0 3px #4d90fe}}ion-radio.radio-checked{--border-width:
|
|
5744
|
+
styles: [":host{display:inline-block}:host.has-label{display:block;line-height:24px;white-space:pre-line}:host.has-label div.wrapper{position:relative;display:inline-flex;align-items:flex-start;vertical-align:top;padding:16px 12px 16px 0}:host.has-label.xs .wrapper,:host.has-label :host-context(.radio-xs) .wrapper{padding-top:4px;padding-bottom:4px}:host.has-label.sm .wrapper,:host.has-label :host-context(.radio-sm) .wrapper{padding-top:10px;padding-bottom:10px}:host.has-label.md .wrapper,:host.has-label :host-context(.radio-md) .wrapper{padding-top:16px;padding-bottom:16px}:host.has-label ion-radio{position:static;margin-left:16px;margin-right:12px}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-radio{opacity:1;--color:var(--kirby-medium);--color-checked:var(--kirby-medium)}:host[disabled] ion-radio::part(container){background-color:var(--kirby-semi-light)}ion-radio{min-height:24px;min-width:24px;padding:2px;box-sizing:border-box;--border-width:1px;--color:var(--kirby-semi-dark);--color-checked:var(--kirby-success)}ion-radio::part(container){background-color:var(--kirby-white)}ion-radio::part(mark){width:60%;height:60%}ion-radio:active{--color:transparent}ion-radio:active::part(container){background-color:var(--kirby-white-shade)}ion-radio :host-context(kirby-radio-group.error) ion-radio,ion-radio :host-context(kirby-radio-group.error) ion-radio:active,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio:active{--color:var(--kirby-danger)}@media (hover:hover){ion-radio:focus::part(container){box-shadow:0 0 0 1px var(--kirby-background-color),0 0 0 3px #4d90fe}}ion-radio.radio-checked{--border-width:0px}ion-radio.radio-checked:not(:focus):not(.radio-disabled)::part(container){box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08)}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-radio{margin:0}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}"]
|
|
5733
5745
|
},] }
|
|
5734
5746
|
];
|
|
5735
5747
|
RadioComponent.propDecorators = {
|
|
@@ -7373,7 +7385,7 @@ TabsComponent.decorators = [
|
|
|
7373
7385
|
{ type: Component, args: [{
|
|
7374
7386
|
selector: 'kirby-tab-bar',
|
|
7375
7387
|
template: "<ion-tabs>\n <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n <ng-content></ng-content>\n </ion-tab-bar>\n</ion-tabs>\n",
|
|
7376
|
-
styles: [":host(:not(.tab-bar-bottom-hidden)){--kirby-page-footer-safe-area-bottom:
|
|
7388
|
+
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),0.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:721px){ion-tabs{--kirby-tab-bar-height:70px}}@media (min-width:1025px) 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}ion-tabs ion-tab-bar.bottom-hidden{display:flex}}"]
|
|
7377
7389
|
},] }
|
|
7378
7390
|
];
|
|
7379
7391
|
/** @nocollapse */
|