@kirbydesign/designsystem 10.5.1-rc.1 → 10.5.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/fesm2022/kirbydesign-designsystem-accordion.mjs +12 -12
- package/fesm2022/kirbydesign-designsystem-action-group.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-avatar.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-badge.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-button.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-calendar.mjs +6 -6
- package/fesm2022/kirbydesign-designsystem-card.mjs +17 -17
- package/fesm2022/kirbydesign-designsystem-chart.mjs +23 -23
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-data-table.mjs +8 -8
- package/fesm2022/kirbydesign-designsystem-divider.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-dropdown.mjs +11 -11
- package/fesm2022/kirbydesign-designsystem-empty-state.mjs +8 -8
- package/fesm2022/kirbydesign-designsystem-fab-sheet.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-flag.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-form-field.mjs +29 -29
- package/fesm2022/kirbydesign-designsystem-header.mjs +20 -20
- package/fesm2022/kirbydesign-designsystem-helpers.mjs +9 -9
- package/fesm2022/kirbydesign-designsystem-icon.mjs +11 -11
- package/fesm2022/kirbydesign-designsystem-item-group.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-item-sliding.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-item.mjs +11 -11
- package/fesm2022/kirbydesign-designsystem-kirby-app.mjs +8 -8
- package/fesm2022/kirbydesign-designsystem-list.mjs +41 -41
- package/fesm2022/kirbydesign-designsystem-loading-overlay.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-menu.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-modal.mjs +45 -45
- package/fesm2022/kirbydesign-designsystem-page.mjs +41 -41
- package/fesm2022/kirbydesign-designsystem-popover.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-progress-circle.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-radio.mjs +11 -11
- package/fesm2022/kirbydesign-designsystem-range.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-reorder-list.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-router-outlet.mjs +8 -8
- package/fesm2022/kirbydesign-designsystem-section-header.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-shared-floating.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-shared-portal.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-shared.mjs +19 -19
- package/fesm2022/kirbydesign-designsystem-slide-button.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-slide.mjs +14 -14
- package/fesm2022/kirbydesign-designsystem-spinner.mjs +8 -8
- package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs +11 -11
- package/fesm2022/kirbydesign-designsystem-tabs.mjs +14 -14
- package/fesm2022/kirbydesign-designsystem-testing-base.mjs +287 -287
- 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 +8 -8
- package/fesm2022/kirbydesign-designsystem-toggle.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-types.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem.mjs +14 -14
- package/package.json +35 -35
- package/readme.md +1 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable,
|
|
2
|
+
import { Injectable, ViewChild, Input, HostBinding, Component, NgModule } from '@angular/core';
|
|
3
3
|
import { ResizeObserverFactory } from '@kirbydesign/designsystem/shared';
|
|
4
4
|
import { ColorHelper, DesignTokenHelper, deepCopy, mergeDeepAll, chartConfigHasType } from '@kirbydesign/designsystem/helpers';
|
|
5
5
|
import { toDate } from 'date-fns';
|
|
@@ -324,10 +324,10 @@ class ChartConfigService {
|
|
|
324
324
|
},
|
|
325
325
|
};
|
|
326
326
|
}
|
|
327
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
328
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.
|
|
327
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ChartConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
328
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ChartConfigService }); }
|
|
329
329
|
}
|
|
330
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
330
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ChartConfigService, decorators: [{
|
|
331
331
|
type: Injectable
|
|
332
332
|
}] });
|
|
333
333
|
|
|
@@ -800,10 +800,10 @@ class ChartJSService {
|
|
|
800
800
|
return this.getDefaultLabels(datasets);
|
|
801
801
|
}
|
|
802
802
|
}
|
|
803
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
804
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.
|
|
803
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ChartJSService, deps: [{ token: ChartConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
804
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ChartJSService }); }
|
|
805
805
|
}
|
|
806
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
806
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ChartJSService, decorators: [{
|
|
807
807
|
type: Injectable
|
|
808
808
|
}], ctorParameters: () => [{ type: ChartConfigService }] });
|
|
809
809
|
|
|
@@ -1065,10 +1065,10 @@ class BaseChartComponent {
|
|
|
1065
1065
|
ngOnDestroy() {
|
|
1066
1066
|
this.chartJSService.destroyChart();
|
|
1067
1067
|
}
|
|
1068
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1069
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
1068
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: BaseChartComponent, deps: [{ token: ChartJSService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1069
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: BaseChartComponent, isStandalone: false, selector: "kirby-base-chart", inputs: { type: "type", data: "data", labels: "labels", customOptions: "customOptions", annotations: "annotations", highlightedElements: "highlightedElements", height: "height" }, host: { properties: { "style.--kirby-chart-height": "this._height" } }, viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["chartCanvas"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n <canvas #chartCanvas>\n <!-- Slotted content makes it possible to insert fallback content for screen readers \n https://www.chartjs.org/docs/latest/general/accessibility.html-->\n <ng-content></ng-content>\n </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }); }
|
|
1070
1070
|
}
|
|
1071
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1071
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: BaseChartComponent, decorators: [{
|
|
1072
1072
|
type: Component,
|
|
1073
1073
|
args: [{ selector: 'kirby-base-chart', standalone: false, template: "<div class=\"chart-container\">\n <canvas #chartCanvas>\n <!-- Slotted content makes it possible to insert fallback content for screen readers \n https://www.chartjs.org/docs/latest/general/accessibility.html-->\n <ng-content></ng-content>\n </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }]
|
|
1074
1074
|
}], ctorParameters: () => [{ type: ChartJSService }], propDecorators: { type: [{
|
|
@@ -1098,10 +1098,10 @@ class ChartComponent extends BaseChartComponent {
|
|
|
1098
1098
|
super(...arguments);
|
|
1099
1099
|
this.type = 'column';
|
|
1100
1100
|
}
|
|
1101
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1102
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
1101
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1102
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: ChartComponent, isStandalone: false, selector: "kirby-chart", inputs: { type: "type" }, providers: [ChartJSService], usesInheritance: true, ngImport: i0, template: "<div class=\"chart-container\">\n <canvas #chartCanvas>\n <!-- Slotted content makes it possible to insert fallback content for screen readers \n https://www.chartjs.org/docs/latest/general/accessibility.html-->\n <ng-content></ng-content>\n </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }); }
|
|
1103
1103
|
}
|
|
1104
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1104
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ChartComponent, decorators: [{
|
|
1105
1105
|
type: Component,
|
|
1106
1106
|
args: [{ selector: 'kirby-chart', providers: [ChartJSService], standalone: false, template: "<div class=\"chart-container\">\n <canvas #chartCanvas>\n <!-- Slotted content makes it possible to insert fallback content for screen readers \n https://www.chartjs.org/docs/latest/general/accessibility.html-->\n <ng-content></ng-content>\n </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }]
|
|
1107
1107
|
}], propDecorators: { type: [{
|
|
@@ -1196,10 +1196,10 @@ class StockChartJSService extends ChartJSService {
|
|
|
1196
1196
|
});
|
|
1197
1197
|
return { value, pointer };
|
|
1198
1198
|
}
|
|
1199
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1200
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.
|
|
1199
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: StockChartJSService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1200
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: StockChartJSService }); }
|
|
1201
1201
|
}
|
|
1202
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1202
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: StockChartJSService, decorators: [{
|
|
1203
1203
|
type: Injectable
|
|
1204
1204
|
}] });
|
|
1205
1205
|
|
|
@@ -1211,10 +1211,10 @@ class StockChartComponent extends BaseChartComponent {
|
|
|
1211
1211
|
renderChart() {
|
|
1212
1212
|
super.renderChart({ dataLabelOptions: this.dataLabelOptions });
|
|
1213
1213
|
}
|
|
1214
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1215
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
1214
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: StockChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1215
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: StockChartComponent, isStandalone: false, selector: "kirby-stock-chart", inputs: { dataLabelOptions: "dataLabelOptions" }, providers: [{ provide: ChartJSService, useClass: StockChartJSService }], usesInheritance: true, ngImport: i0, template: "<div class=\"chart-container\">\n <canvas #chartCanvas>\n <!-- Slotted content makes it possible to insert fallback content for screen readers \n https://www.chartjs.org/docs/latest/general/accessibility.html-->\n <ng-content></ng-content>\n </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }); }
|
|
1216
1216
|
}
|
|
1217
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1217
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: StockChartComponent, decorators: [{
|
|
1218
1218
|
type: Component,
|
|
1219
1219
|
args: [{ selector: 'kirby-stock-chart', providers: [{ provide: ChartJSService, useClass: StockChartJSService }], standalone: false, template: "<div class=\"chart-container\">\n <canvas #chartCanvas>\n <!-- Slotted content makes it possible to insert fallback content for screen readers \n https://www.chartjs.org/docs/latest/general/accessibility.html-->\n <ng-content></ng-content>\n </canvas>\n</div>\n", styles: [":host div{height:var(--kirby-chart-height, 300px);position:relative}\n"] }]
|
|
1220
1220
|
}], propDecorators: { dataLabelOptions: [{
|
|
@@ -1222,11 +1222,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
1222
1222
|
}] } });
|
|
1223
1223
|
|
|
1224
1224
|
class ChartsModule {
|
|
1225
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1226
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
1227
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
1225
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1226
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: ChartsModule, declarations: [ChartComponent, StockChartComponent], exports: [ChartComponent, StockChartComponent] }); }
|
|
1227
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ChartsModule, providers: [ChartConfigService] }); }
|
|
1228
1228
|
}
|
|
1229
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1229
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ChartsModule, decorators: [{
|
|
1230
1230
|
type: NgModule,
|
|
1231
1231
|
args: [{
|
|
1232
1232
|
declarations: [ChartComponent, StockChartComponent],
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i2 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { EventEmitter, forwardRef,
|
|
4
|
+
import { EventEmitter, ElementRef, forwardRef, Output, HostBinding, Input, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
5
5
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
6
6
|
import * as i1 from '@kirbydesign/designsystem/helpers';
|
|
7
7
|
import { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';
|
|
@@ -111,8 +111,8 @@ class CheckboxComponent {
|
|
|
111
111
|
setDisabledState(isDisabled) {
|
|
112
112
|
this.disabled = isDisabled;
|
|
113
113
|
}
|
|
114
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
115
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
114
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ElementRef }, { token: i1.IonicElementPartHelper }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
115
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: CheckboxComponent, isStandalone: true, selector: "kirby-checkbox", inputs: { checked: "checked", indeterminate: "indeterminate", attentionLevel: "attentionLevel", text: "text", size: "size", hasError: "hasError", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class": "this.size", "class.error": "this.hasError", "attr.disabled": "this._isDisabled", "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2", "class.has-hidden-label": "this._labelText" } }, providers: [
|
|
116
116
|
IonicElementPartHelper,
|
|
117
117
|
{
|
|
118
118
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -121,7 +121,7 @@ class CheckboxComponent {
|
|
|
121
121
|
},
|
|
122
122
|
], viewQueries: [{ propertyName: "ionCheckboxElement", first: true, predicate: IonCheckbox, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-checkbox\n mode=\"md\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [indeterminate]=\"indeterminate\"\n (ionChange)=\"onChecked($event.detail.checked)\"\n (ionBlur)=\"onBlur()\"\n [labelPlacement]=\"_labelPlacement\"\n [justify]=\"_justify\"\n>\n <span class=\"hidden-label\" *ngIf=\"_labelText\">{{ _labelText }}</span>\n <span *ngIf=\"text\" [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n <ng-content></ng-content>\n </span>\n</ion-checkbox>\n", styles: [":host{display:flex}:host.attention-level1 ion-checkbox{--checkmark-color: var(--kirby-black);--checkbox-background-checked: var(--kirby-success);--border-color-checked: var(--kirby-success)}@media (hover: hover){:host.attention-level1 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: rgb(45.030660793, 192.689339207, 114.1474889868);--border-color-checked: rgb(45.030660793, 192.689339207, 114.1474889868)}}:host.attention-level1 ion-checkbox:active,:host.attention-level1 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background-checked: rgb(40.7420264317, 174.3379735683, 103.2762995595);--border-color-checked: rgb(40.7420264317, 174.3379735683, 103.2762995595)}:host.attention-level2 ion-checkbox{--checkmark-color: var(--kirby-white);--checkbox-background-checked: var(--kirby-black);--border-color-checked: var(--kirby-black)}@media (hover: hover){:host.attention-level2 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: rgb(91.56, 91.56, 91.56);--border-color-checked: rgb(91.56, 91.56, 91.56)}}:host.attention-level2 ion-checkbox:active,:host.attention-level2 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkmark-color: rgb(234.6, 234.6, 234.6);--checkbox-background-checked: rgb(109.72, 109.72, 109.72);--border-color-checked: rgb(109.72, 109.72, 109.72)}:host.error ion-checkbox{--border-color: var(--kirby-danger)}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-checkbox{--checkmark-color: var(--kirby-semi-dark);--checkbox-background: var(--kirby-semi-light);--checkbox-background-checked: var(--kirby-semi-light);--border-color: var(--kirby-medium);--border-color-checked: var(--kirby-medium)}:host[disabled] ion-checkbox::part(label-text-wrapper){opacity:1}:host[disabled] ion-checkbox::part(native-wrapper){opacity:1}:host:has(ion-checkbox.in-item.checkbox-justify-space-between){width:100%}:host.xs ion-checkbox:not(.in-item)::part(label){padding-block:4px}:host.sm ion-checkbox:not(.in-item)::part(label){padding-block:10px}:host.md ion-checkbox:not(.in-item)::part(label){padding-block:16px}:host.xs ion-checkbox::part(label){line-height:16px;font-size:14px}:host.xs ion-checkbox{--size: 16px;--border-radius: 4px}:host.xs ion-checkbox::part(container){padding:2px}@media (hover: hover) and (pointer: fine){:host ion-checkbox:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background: rgb(234.6, 234.6, 234.6)}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background: rgb(224.4, 224.4, 224.4)}:host ion-checkbox{--transition: 80ms;--size: 24px;--checkmark-width: 4px;--checkbox-background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px}:host ion-checkbox::part(container){padding:4px}:host ion-checkbox::part(label){align-items:start;padding-inline:16px 12px;line-height:24px}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0;white-space:pre-line}:host ion-checkbox.in-item::part(label){align-items:center;padding-inline:0}:host ion-checkbox.in-item::part(label-text-wrapper){margin-block:0}:host ion-checkbox.in-item.checkbox-label-placement-start::part(label-text-wrapper){margin-inline:0 12px}:host ion-checkbox.in-item.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:12px 0}:host.has-hidden-label:has(ion-checkbox.in-item){position:initial}:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox{position:initial}:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox.checkbox-label-placement-start::part(label-text-wrapper),:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label[slot=end] ion-checkbox{margin-inline-start:12px}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host :host-context(kirby-item){z-index:1}:host :host-context(kirby-item) ion-checkbox{margin:0}:host :host-context(kirby-item)[slot=start]{margin-block:0;margin-inline-end:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
123
123
|
}
|
|
124
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
124
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
125
125
|
type: Component,
|
|
126
126
|
args: [{ imports: [CommonModule, IonCheckbox], selector: 'kirby-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
127
127
|
IonicElementPartHelper,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { ViewChild, HostBinding, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i2 from '@kirbydesign/designsystem/icon';
|
|
@@ -30,10 +30,10 @@ class TableSortableComponent {
|
|
|
30
30
|
this.renderer.setAttribute(this.spanElement.nativeElement, 'data-text', this.spanElement.nativeElement.textContent);
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
34
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
33
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TableSortableComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
34
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: TableSortableComponent, isStandalone: true, selector: "th[sortable]", inputs: { sortable: "sortable", active: "active", sortDirection: "sortDirection", iconAlignment: "iconAlignment", alignment: "alignment" }, host: { properties: { "class.sortable": "this.sortable", "class.active": "this.isActive" } }, viewQueries: [{ propertyName: "spanElement", first: true, predicate: ["span"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!sortable; else sortableTemplate\">\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n</ng-container>\n\n<ng-template #sortableTemplate>\n <button [ngClass]=\"_getAlignmentClasses()\">\n <span #span><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n <kirby-icon [name]=\"sortDirection === 'asc' ? 'arrow-up-fill' : 'arrow-down-fill'\"></kirby-icon>\n </button>\n</ng-template>\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i2.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
35
35
|
}
|
|
36
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
36
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TableSortableComponent, decorators: [{
|
|
37
37
|
type: Component,
|
|
38
38
|
args: [{ selector: 'th[sortable]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, IconModule], template: "<ng-container *ngIf=\"!sortable; else sortableTemplate\">\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n</ng-container>\n\n<ng-template #sortableTemplate>\n <button [ngClass]=\"_getAlignmentClasses()\">\n <span #span><ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container></span>\n <kirby-icon [name]=\"sortDirection === 'asc' ? 'arrow-up-fill' : 'arrow-down-fill'\"></kirby-icon>\n </button>\n</ng-template>\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n" }]
|
|
39
39
|
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { sortable: [{
|
|
@@ -66,11 +66,11 @@ class DataTableModule {
|
|
|
66
66
|
console.warn(`'DataTableModule' has been deprecated in favor of the standalone 'TableSortableComponent'.
|
|
67
67
|
Please import 'TableSortableComponent' instead. 'DataTableModule' will be removed in Kirby v11.`);
|
|
68
68
|
}
|
|
69
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
70
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
71
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
69
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
70
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: DataTableModule, imports: [TableSortableComponent], exports: [TableSortableComponent] }); }
|
|
71
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableModule, imports: [TableSortableComponent] }); }
|
|
72
72
|
}
|
|
73
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
73
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableModule, decorators: [{
|
|
74
74
|
type: NgModule,
|
|
75
75
|
args: [{
|
|
76
76
|
imports: [TableSortableComponent],
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { CommonModule } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import {
|
|
3
|
+
import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
4
4
|
|
|
5
5
|
class DividerComponent {
|
|
6
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
7
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
6
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: DividerComponent, isStandalone: true, selector: "kirby-divider", inputs: { hasMargin: "hasMargin" }, ngImport: i0, template: "<hr [class.no-margin]=\"!hasMargin\" />\n", styles: ["hr{margin-top:8px;margin-bottom:8px;border:0;border-top:1px solid var(--kirby-divider-color, var(--kirby-medium))}hr.no-margin{margin-top:0;margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8
8
|
}
|
|
9
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
9
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DividerComponent, decorators: [{
|
|
10
10
|
type: Component,
|
|
11
11
|
args: [{ imports: [CommonModule], selector: 'kirby-divider', changeDetection: ChangeDetectionStrategy.OnPush, template: "<hr [class.no-margin]=\"!hasMargin\" />\n", styles: ["hr{margin-top:8px;margin-bottom:8px;border:0;border-top:1px solid var(--kirby-divider-color, var(--kirby-medium))}hr.no-margin{margin-top:0;margin-bottom:0}\n"] }]
|
|
12
12
|
}], propDecorators: { hasMargin: [{
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, EventEmitter, RendererStyleFlags2,
|
|
2
|
+
import { Injectable, EventEmitter, RendererStyleFlags2, ElementRef, TemplateRef, forwardRef, HostListener, ContentChildren, ViewChildren, ViewChild, ContentChild, HostBinding, Output, Input, Component, NgModule } from '@angular/core';
|
|
3
3
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
4
4
|
import * as i3 from '@kirbydesign/designsystem/card';
|
|
5
5
|
import { CardComponent, CardModule } from '@kirbydesign/designsystem/card';
|
|
@@ -68,10 +68,10 @@ class KeyboardHandlerService {
|
|
|
68
68
|
}
|
|
69
69
|
return newIndex;
|
|
70
70
|
}
|
|
71
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
72
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.
|
|
71
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: KeyboardHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
72
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: KeyboardHandlerService, providedIn: 'root' }); }
|
|
73
73
|
}
|
|
74
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
74
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: KeyboardHandlerService, decorators: [{
|
|
75
75
|
type: Injectable,
|
|
76
76
|
args: [{
|
|
77
77
|
providedIn: 'root',
|
|
@@ -519,8 +519,8 @@ class DropdownComponent {
|
|
|
519
519
|
this.intersectionObserverRef.disconnect();
|
|
520
520
|
}
|
|
521
521
|
}
|
|
522
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
523
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
522
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DropdownComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: KeyboardHandlerService }, { token: i2.ResizeObserverService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
523
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: DropdownComponent, isStandalone: false, selector: "kirby-dropdown", inputs: { items: "items", selectedIndex: "selectedIndex", focusedIndex: "focusedIndex", itemTextProperty: "itemTextProperty", placeholder: "placeholder", popout: "popout", attentionLevel: "attentionLevel", expand: "expand", disabled: "disabled", hasError: "hasError", size: "size", tabindex: "tabindex", usePopover: "usePopover" }, outputs: { change: "change" }, host: { listeners: { "keydown.tab": "_onTab($event)", "mousedown": "_onMouseDown($event)", "touchstart": "_onTouchStart($event)", "focus": "_onFocus()", "keydown.enter": "_onEnterOrSpace($event)", "keydown.escape": "_onEnterOrEscape()", "blur": "_onBlur($event)", "keydown.space": "_onEnterOrSpace($event)", "keydown.arrowup": "_onArrowKeys($event)", "keydown.arrowdown": "_onArrowKeys($event)", "keydown.arrowleft": "_onArrowKeys($event)", "keydown.arrowright": "_onArrowKeys($event)", "keydown.home": "_onHomeEndKeys($event)", "keydown.end": "_onHomeEndKeys($event)" }, properties: { "attr.disabled": "this._isDisabled", "class.error": "this.hasError", "class.with-popover": "this.usePopover", "attr.tabindex": "this._tabindex", "attr.no-blur": "this._noBlurOnScroll", "class.expand": "this._isBlockLevel", "attr.role": "this._role", "class.is-opening": "this._isOpening", "class.is-open": "this.isOpen", "class.popout-left": "this._popoutLeft", "class.popout-up": "this._popoutUp", "class.clicked": "this.clicked" } }, providers: [
|
|
524
524
|
{
|
|
525
525
|
provide: NG_VALUE_ACCESSOR,
|
|
526
526
|
useExisting: forwardRef((() => DropdownComponent)),
|
|
@@ -528,7 +528,7 @@ class DropdownComponent {
|
|
|
528
528
|
},
|
|
529
529
|
], queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "slottedItems", predicate: ListItemTemplateDirective, read: ElementRef }, { propertyName: "kirbyItemsSlotted", predicate: ItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "cardElement", first: true, predicate: CardComponent, descendants: true, read: ElementRef }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "buttonElement", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "kirbyItemsDefault", predicate: ItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<button\n kirby-button\n [size]=\"size\"\n [attentionLevel]=\"attentionLevel\"\n tabindex=\"-1\"\n (click)=\"onToggle($event)\"\n (mousedown)=\"onButtonMouseEvent($event)\"\n [disabled]=\"disabled\"\n type=\"button\"\n>\n <span class=\"text\">{{ selectedText || placeholder }}</span>\n <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n <kirby-popover\n [target]=\"buttonElement\"\n [popout]=\"popout\"\n (click)=\"_onPopoverClick()\"\n (willHide)=\"_onPopoverWillHide()\"\n >\n <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n <kirby-card>\n <ng-container *ngFor=\"let item of items; let i = index\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: {\n $implicit: item,\n selected: i === selectedIndex,\n focused: i === focusedIndex,\n index: i,\n }\n \"\n ></ng-container>\n </ng-container>\n </kirby-card>\n</ng-template>\n\n<ng-template\n #defaultItemTemplate\n let-item\n let-selected=\"selected\"\n let-index=\"index\"\n let-focused=\"focused\"\n>\n <kirby-item\n [selectable]=\"true\"\n [selected]=\"selected\"\n (click)=\"onItemSelect(index)\"\n [class.focused]=\"focused\"\n role=\"option\"\n >\n <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n <p class=\"kirby-item-title\" tabindex=\"0\">{{ getTextFromItem(item) }}</p>\n <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n </kirby-item>\n</ng-template>\n", styles: ["@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}: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{display:inline-block;position:relative;max-width:calc(100vw - 32px)}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;min-width:0}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}:host kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host.is-opening kirby-card{display:block}:host.is-open kirby-card{display:block;opacity:1}:host.is-open>button{box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26}:host.popout-left kirby-card{right:0}:host.popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host.popout-up.is-open>button{z-index:801}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-block:4px;overflow-y:auto;box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26;max-width:calc(100vw - 32px);min-width:288px}@media (min-width: 321px){kirby-card{min-width:343px}}@media (hover: hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"], dependencies: [{ kind: "component", type: i3.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: i4.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "component", type: i5.ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "rotateIcon"] }, { kind: "component", type: i6.PopoverComponent, selector: "kirby-popover", inputs: ["popout", "target"], outputs: ["willHide"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "directive", type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
530
530
|
}
|
|
531
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
531
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
532
532
|
type: Component,
|
|
533
533
|
args: [{ selector: 'kirby-dropdown', providers: [
|
|
534
534
|
{
|
|
@@ -671,8 +671,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
671
671
|
|
|
672
672
|
const declarations = [DropdownComponent];
|
|
673
673
|
class DropdownModule {
|
|
674
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
675
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
674
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
675
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: DropdownModule, declarations: [DropdownComponent], imports: [CardModule,
|
|
676
676
|
IconModule,
|
|
677
677
|
ItemModule,
|
|
678
678
|
FormFieldModule,
|
|
@@ -680,7 +680,7 @@ class DropdownModule {
|
|
|
680
680
|
ButtonComponent,
|
|
681
681
|
CommonModule,
|
|
682
682
|
ListModule], exports: [DropdownComponent, ListItemTemplateDirective] }); }
|
|
683
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
683
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DropdownModule, providers: [KeyboardHandlerService], imports: [CardModule,
|
|
684
684
|
IconModule,
|
|
685
685
|
ItemModule,
|
|
686
686
|
FormFieldModule,
|
|
@@ -689,7 +689,7 @@ class DropdownModule {
|
|
|
689
689
|
CommonModule,
|
|
690
690
|
ListModule] }); }
|
|
691
691
|
}
|
|
692
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
692
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DropdownModule, decorators: [{
|
|
693
693
|
type: NgModule,
|
|
694
694
|
args: [{
|
|
695
695
|
imports: [
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { ContentChildren, Input, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
|
|
3
3
|
import { ButtonComponent } from '@kirbydesign/designsystem/button';
|
|
4
4
|
import { getIonModalDialogAncestor } from '@kirbydesign/designsystem/helpers';
|
|
5
5
|
import * as i1 from '@kirbydesign/designsystem/icon';
|
|
@@ -54,10 +54,10 @@ class EmptyStateComponent {
|
|
|
54
54
|
}
|
|
55
55
|
});
|
|
56
56
|
}
|
|
57
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
58
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
57
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EmptyStateComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
58
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: EmptyStateComponent, isStandalone: false, selector: "kirby-empty-state", inputs: { iconName: "iconName", title: "title", subtitle: "subtitle" }, queries: [{ propertyName: "slottedButtons", predicate: ButtonComponent }], ngImport: i0, template: "<div class=\"message-container\">\n <div *ngIf=\"iconName\" class=\"icon-outline\">\n <kirby-icon [name]=\"iconName\" size=\"lg\"></kirby-icon>\n </div>\n <span *ngIf=\"title\" class=\"title kirby-text-medium\">{{ title }}</span>\n <p *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</p>\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".message-container{max-width:330px;margin:auto;display:flex;flex-direction:column;justify-content:center;text-align:center}.icon-outline{width:96px;height:96px;margin-left:auto;margin-right:auto;margin-bottom:24px;display:flex;flex-direction:column;justify-content:center;border:4px solid var(--kirby-medium);border-radius:50%}kirby-icon{color:var(--kirby-medium)}.title{margin-bottom:8px}p.subtitle{margin-bottom:24px;white-space:pre-wrap}:host(.primary) .icon-outline{border-color:var(--kirby-primary)}:host(.primary) kirby-icon{color:var(--kirby-primary)}:host(.secondary) .icon-outline{border-color:var(--kirby-secondary)}:host(.secondary) kirby-icon{color:var(--kirby-secondary)}:host(.tertiary) .icon-outline{border-color:var(--kirby-tertiary)}:host(.tertiary) kirby-icon{color:var(--kirby-tertiary)}:host(.success) .icon-outline{border-color:var(--kirby-success)}:host(.success) kirby-icon{color:var(--kirby-success)}:host(.warning) .icon-outline{border-color:var(--kirby-warning)}:host(.warning) kirby-icon{color:var(--kirby-warning)}:host(.danger) .icon-outline{border-color:var(--kirby-danger)}:host(.danger) kirby-icon{color:var(--kirby-danger)}:host(.white-overlay) .icon-outline{border-color:var(--kirby-white-overlay)}:host(.white-overlay) kirby-icon{color:var(--kirby-white-overlay)}:host(.light) .icon-outline{border-color:var(--kirby-light)}:host(.light) kirby-icon{color:var(--kirby-light)}:host(.medium) .icon-outline{border-color:var(--kirby-medium)}:host(.medium) kirby-icon{color:var(--kirby-medium)}:host(.dark) .icon-outline{border-color:var(--kirby-dark)}:host(.dark) kirby-icon{color:var(--kirby-dark)}:host(.dark-overlay) .icon-outline{border-color:var(--kirby-dark-overlay)}:host(.dark-overlay) kirby-icon{color:var(--kirby-dark-overlay)}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
59
59
|
}
|
|
60
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
60
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EmptyStateComponent, decorators: [{
|
|
61
61
|
type: Component,
|
|
62
62
|
args: [{ selector: 'kirby-empty-state', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"message-container\">\n <div *ngIf=\"iconName\" class=\"icon-outline\">\n <kirby-icon [name]=\"iconName\" size=\"lg\"></kirby-icon>\n </div>\n <span *ngIf=\"title\" class=\"title kirby-text-medium\">{{ title }}</span>\n <p *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</p>\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".message-container{max-width:330px;margin:auto;display:flex;flex-direction:column;justify-content:center;text-align:center}.icon-outline{width:96px;height:96px;margin-left:auto;margin-right:auto;margin-bottom:24px;display:flex;flex-direction:column;justify-content:center;border:4px solid var(--kirby-medium);border-radius:50%}kirby-icon{color:var(--kirby-medium)}.title{margin-bottom:8px}p.subtitle{margin-bottom:24px;white-space:pre-wrap}:host(.primary) .icon-outline{border-color:var(--kirby-primary)}:host(.primary) kirby-icon{color:var(--kirby-primary)}:host(.secondary) .icon-outline{border-color:var(--kirby-secondary)}:host(.secondary) kirby-icon{color:var(--kirby-secondary)}:host(.tertiary) .icon-outline{border-color:var(--kirby-tertiary)}:host(.tertiary) kirby-icon{color:var(--kirby-tertiary)}:host(.success) .icon-outline{border-color:var(--kirby-success)}:host(.success) kirby-icon{color:var(--kirby-success)}:host(.warning) .icon-outline{border-color:var(--kirby-warning)}:host(.warning) kirby-icon{color:var(--kirby-warning)}:host(.danger) .icon-outline{border-color:var(--kirby-danger)}:host(.danger) kirby-icon{color:var(--kirby-danger)}:host(.white-overlay) .icon-outline{border-color:var(--kirby-white-overlay)}:host(.white-overlay) kirby-icon{color:var(--kirby-white-overlay)}:host(.light) .icon-outline{border-color:var(--kirby-light)}:host(.light) kirby-icon{color:var(--kirby-light)}:host(.medium) .icon-outline{border-color:var(--kirby-medium)}:host(.medium) kirby-icon{color:var(--kirby-medium)}:host(.dark) .icon-outline{border-color:var(--kirby-dark)}:host(.dark) kirby-icon{color:var(--kirby-dark)}:host(.dark-overlay) .icon-outline{border-color:var(--kirby-dark-overlay)}:host(.dark-overlay) kirby-icon{color:var(--kirby-dark-overlay)}\n"] }]
|
|
63
63
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { iconName: [{
|
|
@@ -73,11 +73,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
73
73
|
|
|
74
74
|
const declarations = [EmptyStateComponent];
|
|
75
75
|
class EmptyStateModule {
|
|
76
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
77
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
78
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
76
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EmptyStateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
77
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: EmptyStateModule, declarations: [EmptyStateComponent], imports: [IconModule, CommonModule, ThemeColorDirective], exports: [EmptyStateComponent, ThemeColorDirective] }); }
|
|
78
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EmptyStateModule, imports: [IconModule, CommonModule] }); }
|
|
79
79
|
}
|
|
80
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
80
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EmptyStateModule, decorators: [{
|
|
81
81
|
type: NgModule,
|
|
82
82
|
args: [{
|
|
83
83
|
imports: [IconModule, CommonModule, ThemeColorDirective],
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
2
|
import { DOCUMENT, CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { ElementRef,
|
|
4
|
+
import { ElementRef, ViewChild, ContentChild, HostBinding, Input, Inject, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
5
5
|
import { ActionSheetComponent } from '@kirbydesign/designsystem/modal';
|
|
6
|
-
import {
|
|
6
|
+
import { IonBackdrop, IonFab, IonFabButton, IonFabList } from '@ionic/angular/standalone';
|
|
7
7
|
|
|
8
8
|
class FabSheetComponent {
|
|
9
9
|
get isFabSheetOpen() {
|
|
@@ -50,10 +50,10 @@ class FabSheetComponent {
|
|
|
50
50
|
}
|
|
51
51
|
this.changeDetectorRef.detectChanges();
|
|
52
52
|
}
|
|
53
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
54
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
53
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: FabSheetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
54
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: FabSheetComponent, isStandalone: true, selector: "kirby-fab-sheet", inputs: { disabled: "disabled", horizontalAlignment: "horizontalAlignment" }, host: { properties: { "class.is-open": "this.isFabSheetOpen" } }, queries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }], viewQueries: [{ propertyName: "ionFabButton", first: true, predicate: IonFabButton, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFab", first: true, predicate: IonFab, descendants: true, static: true }], ngImport: i0, template: "<ion-backdrop\n [class.backdrop-visible]=\"isFabSheetOpen\"\n [stopPropagation]=\"false\"\n (ionBackdropTap)=\"hideActions()\"\n (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n <ion-fab-button\n (click)=\"onFabButtonClick()\"\n [disabled]=\"disabled\"\n [attr.disabled]=\"disabled ? true : null\"\n tabindex=\"-1\"\n >\n <ng-content select=\"kirby-icon\"></ng-content>\n </ion-fab-button>\n <ion-fab-list\n *ngIf=\"actionSheet\"\n side=\"top\"\n class=\"{{ horizontalAlignment }}\"\n (click)=\"onFabListClick()\"\n >\n <ng-content select=\"kirby-action-sheet\"></ng-content>\n </ion-fab-list>\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}@media (hover: hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media (hover: hover) and (pointer: fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-fab-button{--box-shadow: 0 0 5px 0 rgba(28, 28, 28, .04), 0 10px 15px -10px rgba(28, 28, 28, .15);width:64px;height:64px;-webkit-user-select:none;user-select:none}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media (min-width: 768px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"] }, { kind: "component", type: IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: IonFabList, selector: "ion-fab-list", inputs: ["activated", "side"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
55
55
|
}
|
|
56
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
56
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: FabSheetComponent, decorators: [{
|
|
57
57
|
type: Component,
|
|
58
58
|
args: [{ imports: [CommonModule, IonBackdrop, IonFab, IonFabButton, IonFabList], selector: 'kirby-fab-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-backdrop\n [class.backdrop-visible]=\"isFabSheetOpen\"\n [stopPropagation]=\"false\"\n (ionBackdropTap)=\"hideActions()\"\n (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n <ion-fab-button\n (click)=\"onFabButtonClick()\"\n [disabled]=\"disabled\"\n [attr.disabled]=\"disabled ? true : null\"\n tabindex=\"-1\"\n >\n <ng-content select=\"kirby-icon\"></ng-content>\n </ion-fab-button>\n <ion-fab-list\n *ngIf=\"actionSheet\"\n side=\"top\"\n class=\"{{ horizontalAlignment }}\"\n (click)=\"onFabListClick()\"\n >\n <ng-content select=\"kirby-action-sheet\"></ng-content>\n </ion-fab-list>\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}@media (hover: hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media (hover: hover) and (pointer: fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-fab-button{--box-shadow: 0 0 5px 0 rgba(28, 28, 28, .04), 0 10px 15px -10px rgba(28, 28, 28, .15);width:64px;height:64px;-webkit-user-select:none;user-select:none}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media (min-width: 768px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"] }]
|
|
59
59
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: Document, decorators: [{
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CommonModule } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import {
|
|
3
|
+
import { HostBinding, Input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
4
4
|
|
|
5
5
|
class FlagComponent {
|
|
6
6
|
constructor() {
|
|
@@ -10,12 +10,12 @@ class FlagComponent {
|
|
|
10
10
|
get _cssClass() {
|
|
11
11
|
return [this.themeColor, this.size];
|
|
12
12
|
}
|
|
13
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
14
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
13
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: FlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: FlagComponent, isStandalone: true, selector: "kirby-flag", inputs: { size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: `
|
|
15
15
|
<ng-content></ng-content>
|
|
16
16
|
`, isInline: true, styles: [":host{display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color, var(--kirby-white-contrast));border:1px solid var(--kirby-flag-border-color, var(--kirby-medium));border-radius:4px;font-size:16px;padding:2px 8px;font-weight:500;line-height:1.375}:host.sm{font-size:14px;line-height:1.2857142857}:host.xs{font-size:12px;line-height:1.1666666667;padding-left:4px;padding-right:4px}:host(.success){--kirby-flag-background-color: var(--kirby-decoration-color-green-30);--kirby-flag-color: var(--kirby-black);--kirby-flag-border-color: var(--kirby-flag-background-color)}:host(.warning){--kirby-flag-background-color: var(--kirby-decoration-color-yellow-30);--kirby-flag-color: var(--kirby-black);--kirby-flag-border-color: var(--kirby-flag-background-color)}:host(.danger){--kirby-flag-background-color: var(--kirby-decoration-color-red-30);--kirby-flag-color: var(--kirby-black);--kirby-flag-border-color: var(--kirby-flag-background-color)}:host(.semi-light){--kirby-flag-background-color: var(--kirby-semi-light);--kirby-flag-color: var(--kirby-black);--kirby-flag-border-color: var(--kirby-flag-background-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
17
17
|
}
|
|
18
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
18
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: FlagComponent, decorators: [{
|
|
19
19
|
type: Component,
|
|
20
20
|
args: [{ imports: [CommonModule], selector: 'kirby-flag', template: `
|
|
21
21
|
<ng-content></ng-content>
|