@kirbydesign/designsystem 9.7.0 → 9.7.2-sb
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/checkbox/checkbox.component.d.ts +5 -2
- package/esm2022/accordion/accordion-item.component.mjs +3 -3
- package/esm2022/accordion/accordion.directive.mjs +3 -3
- package/esm2022/accordion/accordion.module.mjs +4 -4
- package/esm2022/action-group/action-group.component.mjs +3 -3
- package/esm2022/avatar/avatar.component.mjs +3 -3
- package/esm2022/badge/badge.component.mjs +3 -3
- package/esm2022/button/button.component.mjs +3 -3
- package/esm2022/calendar/calendar.component.mjs +3 -3
- package/esm2022/calendar/helpers/calendar.helper.mjs +3 -3
- package/esm2022/card/card-as-button/card-as-button.directive.mjs +3 -3
- package/esm2022/card/card-footer/card-footer.component.mjs +3 -3
- package/esm2022/card/card-header/card-header.component.mjs +3 -3
- package/esm2022/card/card.component.mjs +3 -3
- package/esm2022/card/card.module.mjs +4 -4
- package/esm2022/chart/chart/chart.component.mjs +3 -3
- package/esm2022/chart/charts.module.mjs +4 -4
- package/esm2022/chart/shared/base-chart/base-chart.component.mjs +3 -3
- package/esm2022/chart/shared/chart-config-service/chart-config.service.mjs +3 -3
- package/esm2022/chart/shared/chart-js-service/chart-js.service.mjs +3 -3
- package/esm2022/chart/stock-chart/stock-chart-js.service.mjs +3 -3
- package/esm2022/chart/stock-chart/stock-chart.component.mjs +3 -3
- package/esm2022/checkbox/checkbox.component.mjs +26 -7
- package/esm2022/data-table/data-table.module.mjs +4 -4
- package/esm2022/data-table/sortable/sortable.component.mjs +3 -3
- package/esm2022/data-table/table/table.component.mjs +3 -3
- package/esm2022/data-table/table-row/table-row.component.mjs +3 -3
- package/esm2022/divider/divider.component.mjs +3 -3
- package/esm2022/dropdown/dropdown.component.mjs +3 -3
- package/esm2022/dropdown/dropdown.module.mjs +4 -4
- package/esm2022/dropdown/keyboard-handler.service.mjs +3 -3
- package/esm2022/empty-state/empty-state.component.mjs +3 -3
- package/esm2022/empty-state/empty-state.module.mjs +4 -4
- package/esm2022/fab-sheet/fab-sheet.component.mjs +3 -3
- package/esm2022/flag/flag.component.mjs +3 -3
- package/esm2022/form-field/directives/affix/affix.directive.mjs +3 -3
- package/esm2022/form-field/directives/date/date-input.directive.mjs +3 -3
- package/esm2022/form-field/directives/decimal-mask/decimal-mask.directive.mjs +3 -3
- package/esm2022/form-field/form-field-message/form-field-message.component.mjs +3 -3
- package/esm2022/form-field/form-field.component.mjs +3 -3
- package/esm2022/form-field/form-field.module.mjs +4 -4
- package/esm2022/form-field/input/input.component.mjs +3 -3
- package/esm2022/form-field/input-counter/input-counter.component.mjs +3 -3
- package/esm2022/form-field/textarea/textarea.component.mjs +3 -3
- package/esm2022/header/header.component.mjs +15 -15
- package/esm2022/header/header.module.mjs +4 -4
- package/esm2022/helpers/ionic-element-part-helper.mjs +3 -3
- package/esm2022/helpers/line-clamp-helper.mjs +3 -3
- package/esm2022/helpers/platform.service.mjs +3 -3
- package/esm2022/icon/icon-registry.service.mjs +3 -3
- package/esm2022/icon/icon.component.mjs +3 -3
- package/esm2022/icon/icon.module.mjs +4 -4
- package/esm2022/icon/kirby-icon-settings.mjs +8 -1
- package/esm2022/item/item.component.mjs +8 -28
- package/esm2022/item/item.module.mjs +4 -4
- package/esm2022/item/label/label.component.mjs +3 -3
- package/esm2022/item-group/item-group.component.mjs +3 -3
- package/esm2022/item-sliding/item-sliding.component.mjs +3 -3
- package/esm2022/kirby-app/kirby-app.component.mjs +3 -3
- package/esm2022/kirby-app/kirby-app.module.mjs +4 -4
- package/esm2022/kirby-ionic-module/kirby-ionic.module.mjs +4 -4
- package/esm2022/lib/components/page-local-navigation/page-local-navigation.component.mjs +3 -3
- package/esm2022/lib/components/segmented-control/segmented-control.component.mjs +3 -3
- package/esm2022/lib/directives/key-handler/key-handler.directive.mjs +3 -3
- package/esm2022/lib/directives/modal-router-link/modal-router-link.directive.mjs +3 -3
- package/esm2022/lib/kirby-experimental.module.mjs +4 -4
- package/esm2022/lib/kirby.module.mjs +4 -4
- package/esm2022/list/directives/infinite-scroll.directive.mjs +3 -3
- package/esm2022/list/directives/list-item-color.directive.mjs +3 -3
- package/esm2022/list/helpers/list-helper.mjs +3 -3
- package/esm2022/list/list-experimental/list-experimental.component.mjs +3 -3
- package/esm2022/list/list-header/list-header.component.mjs +3 -3
- package/esm2022/list/list-item/list-item.component.mjs +3 -3
- package/esm2022/list/list-section-header/list-section-header.component.mjs +3 -3
- package/esm2022/list/list.component.mjs +3 -3
- package/esm2022/list/list.directive.mjs +12 -12
- package/esm2022/list/list.module.mjs +4 -4
- package/esm2022/loading-overlay/loading-overlay.component.mjs +3 -3
- package/esm2022/loading-overlay/loading-overlay.service.mjs +3 -3
- package/esm2022/menu/menu.component.mjs +3 -3
- package/esm2022/modal/modal/action-sheet/action-sheet.component.mjs +3 -3
- package/esm2022/modal/modal/alert/alert.component.mjs +3 -3
- package/esm2022/modal/modal/footer/modal-footer.component.mjs +3 -3
- package/esm2022/modal/modal/modal-component/modal.component.mjs +3 -3
- package/esm2022/modal/modal/services/action-sheet.helper.mjs +3 -3
- package/esm2022/modal/modal/services/alert.helper.mjs +3 -3
- package/esm2022/modal/modal/services/can-dismiss.helper.mjs +3 -3
- package/esm2022/modal/modal/services/modal-animation-builder.service.mjs +3 -3
- package/esm2022/modal/modal/services/modal.controller.mjs +3 -3
- package/esm2022/modal/modal/services/modal.helper.mjs +3 -3
- package/esm2022/modal/modal-navigation.service.mjs +3 -3
- package/esm2022/modal/modal-wrapper/compact/modal-compact-wrapper.component.mjs +3 -3
- package/esm2022/modal/modal-wrapper/modal-wrapper.component.mjs +3 -3
- package/esm2022/modal/modal.interfaces.mjs +3 -3
- package/esm2022/modal/v2/footer/footer.component.mjs +3 -3
- package/esm2022/modal/v2/kirby-modal.module.mjs +4 -4
- package/esm2022/modal/v2/modal/modal.component.mjs +3 -3
- package/esm2022/modal/v2/modal-routing/modal-routing.component.mjs +3 -3
- package/esm2022/modal/v2/services/modal.controller.mjs +3 -3
- package/esm2022/modal/v2/wrapper/wrapper.component.mjs +3 -3
- package/esm2022/page/page-footer/page-footer.component.mjs +3 -3
- package/esm2022/page/page.component.mjs +34 -34
- package/esm2022/page/page.module.mjs +4 -4
- package/esm2022/popover/popover.component.mjs +3 -3
- package/esm2022/progress-circle/progress-circle-ring.component.mjs +3 -3
- package/esm2022/progress-circle/progress-circle.component.mjs +3 -3
- package/esm2022/radio/radio-group/radio-group.component.mjs +3 -3
- package/esm2022/radio/radio-module.mjs +4 -4
- package/esm2022/radio/radio.component.mjs +25 -6
- package/esm2022/range/range.component.mjs +6 -6
- package/esm2022/reorder-list/reorder-list.component.mjs +3 -3
- package/esm2022/router-outlet/router-outlet.component.mjs +3 -3
- package/esm2022/router-outlet/router-outlet.module.mjs +4 -4
- package/esm2022/section-header/section-header.component.mjs +3 -3
- package/esm2022/shared/component-loader.directive.mjs +3 -3
- package/esm2022/shared/controls/label-helpers.mjs +23 -0
- package/esm2022/shared/fit-heading/fit-heading.directive.mjs +3 -3
- package/esm2022/shared/floating/floating.directive.mjs +3 -3
- package/esm2022/shared/portal/portal.directive.mjs +3 -3
- package/esm2022/shared/public_api.mjs +2 -1
- package/esm2022/shared/resize-observer/resize-observer.factory.mjs +3 -3
- package/esm2022/shared/resize-observer/resize-observer.service.mjs +3 -3
- package/esm2022/shared/theme-color/theme-color.directive.mjs +3 -3
- package/esm2022/slide/slide-stretch-height.directive.mjs +3 -3
- package/esm2022/slide/slide.directive.mjs +3 -3
- package/esm2022/slide/slide.module.mjs +4 -4
- package/esm2022/slide/slides.component.mjs +3 -3
- package/esm2022/slide-button/slide-button.component.mjs +3 -3
- package/esm2022/spinner/spinner.component.mjs +3 -3
- package/esm2022/spinner/spinner.module.mjs +4 -4
- package/esm2022/tab-navigation/tab-navigation/tab-navigation.component.mjs +3 -3
- package/esm2022/tab-navigation/tab-navigation-item/tab-navigation-item.component.mjs +3 -3
- package/esm2022/tab-navigation/tab-navigation.module.mjs +4 -4
- package/esm2022/tabs/tab-button/tab-button.component.mjs +4 -4
- package/esm2022/tabs/tabs.component.mjs +3 -3
- package/esm2022/tabs/tabs.module.mjs +4 -4
- package/esm2022/tabs/tabs.service.mjs +3 -3
- package/esm2022/testing/test-helper.mjs +4 -4
- package/esm2022/testing-base/lib/components/mock.accordion-item.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.action-group.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.action-sheet.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.alert.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.avatar.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.badge.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.base-chart.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.button.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.calendar.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.card-footer.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.card-header.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.card.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.chart.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.checkbox.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.divider.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.dropdown.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.empty-state.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.fab-sheet.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.flag.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.footer.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.form-field-message.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.form-field.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.header.component.mjs +9 -9
- package/esm2022/testing-base/lib/components/mock.icon.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.input-counter.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.input.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.item-group.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.item-sliding.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.item.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.kirby-app.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.label.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.list-experimental.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.list-header.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.list-item.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.list-section-header.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.list.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.loading-overlay.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.menu.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.modal-compact-wrapper.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.modal-footer.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.modal-routing.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.modal-wrapper.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.modal.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.page-footer.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.page-local-navigation.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.page.component.mjs +33 -33
- package/esm2022/testing-base/lib/components/mock.popover.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.progress-circle-ring.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.progress-circle.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.radio-group.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.radio.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.range.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.reorder-list.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.router-outlet.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.section-header.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.segmented-control.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.slide-button.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.slides.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.spinner.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.stock-chart.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.tab-button.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.tab-navigation-item.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.tab-navigation.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.table-row.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.table.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.tabs.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.textarea.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.toggle-button.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.toggle.component.mjs +3 -3
- package/esm2022/testing-base/lib/components/mock.wrapper.component.mjs +3 -3
- package/esm2022/testing-base/lib/directives/mock.accordion.directive.mjs +3 -3
- package/esm2022/testing-base/lib/directives/mock.affix.directive.mjs +3 -3
- package/esm2022/testing-base/lib/directives/mock.card-as-button.directive.mjs +3 -3
- package/esm2022/testing-base/lib/directives/mock.component-loader.directive.mjs +3 -3
- package/esm2022/testing-base/lib/directives/mock.date-input.directive.mjs +3 -3
- package/esm2022/testing-base/lib/directives/mock.decimal-mask.directive.mjs +3 -3
- package/esm2022/testing-base/lib/directives/mock.fit-heading.directive.mjs +3 -3
- package/esm2022/testing-base/lib/directives/mock.floating.directive.mjs +3 -3
- package/esm2022/testing-base/lib/directives/mock.infinite-scroll.directive.mjs +3 -3
- package/esm2022/testing-base/lib/directives/mock.key-handler.directive.mjs +3 -3
- package/esm2022/testing-base/lib/directives/mock.list-item-color.directive.mjs +3 -3
- package/esm2022/testing-base/lib/directives/mock.list.directive.mjs +12 -12
- package/esm2022/testing-base/lib/directives/mock.modal-router-link.directive.mjs +3 -3
- package/esm2022/testing-base/lib/directives/mock.portal.directive.mjs +3 -3
- package/esm2022/testing-base/lib/directives/mock.slide.directive.mjs +3 -3
- package/esm2022/testing-base/lib/directives/mock.theme-color.directive.mjs +3 -3
- package/esm2022/testing-base/lib/kirby-testing-base.module.mjs +4 -4
- package/esm2022/testing-jasmine/lib/kirby-testing.module.mjs +4 -4
- package/esm2022/testing-jest/lib/kirby-testing.module.mjs +4 -4
- package/esm2022/toast/services/toast.controller.mjs +3 -3
- package/esm2022/toast/services/toast.helper.mjs +3 -3
- package/esm2022/toggle/toggle.component.mjs +6 -6
- package/esm2022/toggle-button/toggle-button.component.mjs +3 -3
- package/esm2022/toggle-button/toggle-button.module.mjs +4 -4
- package/esm2022/types/window-ref.mjs +3 -3
- 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 +6 -6
- package/fesm2022/kirbydesign-designsystem-card.mjs +16 -16
- package/fesm2022/kirbydesign-designsystem-chart.mjs +22 -22
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs +25 -6
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-data-table.mjs +13 -13
- package/fesm2022/kirbydesign-designsystem-divider.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-dropdown.mjs +10 -10
- 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 +17 -10
- package/fesm2022/kirbydesign-designsystem-icon.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-item-group.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-item-sliding.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-item.mjs +33 -52
- package/fesm2022/kirbydesign-designsystem-item.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-kirby-app.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-kirby-ionic-module.mjs +4 -4
- 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-v2.mjs +19 -19
- package/fesm2022/kirbydesign-designsystem-modal.mjs +42 -42
- package/fesm2022/kirbydesign-designsystem-page.mjs +41 -41
- package/fesm2022/kirbydesign-designsystem-page.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-popover.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-progress-circle.mjs +6 -6
- package/fesm2022/kirbydesign-designsystem-radio.mjs +31 -12
- package/fesm2022/kirbydesign-designsystem-radio.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-range.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-range.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-reorder-list.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-router-outlet.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-section-header.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-shared-floating.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-shared-portal.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-shared.mjs +39 -16
- package/fesm2022/kirbydesign-designsystem-shared.mjs.map +1 -1
- 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 +14 -14
- package/fesm2022/kirbydesign-designsystem-tabs.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-testing-base.mjs +307 -307
- 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 +5 -5
- package/fesm2022/kirbydesign-designsystem-toggle.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-types.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem.mjs +20 -20
- package/icons/svg/basket.svg +1 -0
- package/icons/svg/contract.svg +1 -0
- package/icons/svg/drag-drop.svg +1 -0
- package/icons/svg/expand.svg +1 -0
- package/icons/svg/flower.svg +1 -0
- package/icons/svg/house.svg +1 -0
- package/icons/svg/tractor.svg +1 -0
- package/item/item.component.d.ts +2 -8
- package/package.json +66 -66
- package/radio/radio.component.d.ts +5 -2
- package/shared/controls/label-helpers.d.ts +3 -0
- package/shared/public_api.d.ts +1 -0
|
@@ -6,6 +6,7 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
|
6
6
|
import * as i1 from '@kirbydesign/designsystem/helpers';
|
|
7
7
|
import { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';
|
|
8
8
|
import { IonCheckbox } from '@ionic/angular/standalone';
|
|
9
|
+
import { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';
|
|
9
10
|
|
|
10
11
|
class CheckboxComponent {
|
|
11
12
|
get _isDisabled() {
|
|
@@ -35,8 +36,16 @@ class CheckboxComponent {
|
|
|
35
36
|
this._onTouched = () => { };
|
|
36
37
|
}
|
|
37
38
|
ngOnInit() {
|
|
39
|
+
/**
|
|
40
|
+
* We cannot query ion-checkbox for slotted content at this point as the slot has not been rendered.
|
|
41
|
+
* But we need to know if content is slotted to set justify and labelPlacement BEFORE ion-checkbox is rendered.
|
|
42
|
+
* So it has to be done by querying an additional wrapper around the default content slot like this.
|
|
43
|
+
*/
|
|
44
|
+
this._hasSlottedContent = this.element.nativeElement
|
|
45
|
+
.querySelector('.default-content')
|
|
46
|
+
.hasChildNodes();
|
|
38
47
|
const slot = this.element.nativeElement.getAttribute('slot');
|
|
39
|
-
if (slot === 'end') {
|
|
48
|
+
if (slot === 'end' && this._hasSlottedContent) {
|
|
40
49
|
this._justify = 'space-between';
|
|
41
50
|
this._labelPlacement = 'start';
|
|
42
51
|
}
|
|
@@ -46,6 +55,13 @@ class CheckboxComponent {
|
|
|
46
55
|
this.ionicElementPartHelper.setPart('label-text-wrapper', this.ionCheckboxElement, '.label-text-wrapper');
|
|
47
56
|
this.ionicElementPartHelper.setPart('native-wrapper', this.ionCheckboxElement, '.native-wrapper');
|
|
48
57
|
}
|
|
58
|
+
ngAfterContentInit() {
|
|
59
|
+
this._labelText = inheritAriaLabelText(this.element.nativeElement);
|
|
60
|
+
if (!this.text && !this._labelText && !this._hasSlottedContent) {
|
|
61
|
+
// if no label has been set try to find a label in an item and use its text content
|
|
62
|
+
this._labelText = setAccessibleLabel(this.element.nativeElement);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
49
65
|
onChecked(checked) {
|
|
50
66
|
this.checked = checked;
|
|
51
67
|
this._onChange(this.checked);
|
|
@@ -92,17 +108,17 @@ class CheckboxComponent {
|
|
|
92
108
|
setDisabledState(isDisabled) {
|
|
93
109
|
this.disabled = isDisabled;
|
|
94
110
|
}
|
|
95
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
96
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.
|
|
111
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ElementRef }, { token: i1.IonicElementPartHelper }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
112
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CheckboxComponent, isStandalone: true, selector: "kirby-checkbox", inputs: { checked: "checked", 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: [
|
|
97
113
|
IonicElementPartHelper,
|
|
98
114
|
{
|
|
99
115
|
provide: NG_VALUE_ACCESSOR,
|
|
100
116
|
useExisting: forwardRef((() => CheckboxComponent)),
|
|
101
117
|
multi: true,
|
|
102
118
|
},
|
|
103
|
-
], 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 (ionChange)=\"onChecked($event.detail.checked)\"\n (ionBlur)=\"onBlur()\"\n [labelPlacement]=\"_labelPlacement\"\n [justify]=\"_justify\"\n>\n <span *ngIf=\"text\">{{ text }}</span>\n <ng-content></ng-content>\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:
|
|
119
|
+
], 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 (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\">{{ text }}</span>\n <span class=\"default-content\">\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: #2dc172;--border-color-checked: #2dc172}}: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: #29ae67;--border-color-checked: #29ae67}: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: #5c5c5c;--border-color-checked: #5c5c5c}}: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: #ebebeb;--checkbox-background-checked: #6e6e6e;--border-color-checked: #6e6e6e}: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-semi-light)}: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}: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}@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: #ebebeb}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background: #e0e0e0}: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{position:initial}:host.has-hidden-label[slot=end] ion-checkbox{margin-inline-start:12px}:host.has-hidden-label ion-checkbox{position:initial}:host.has-hidden-label ion-checkbox.in-item.checkbox-label-placement-start::part(label-text-wrapper),:host.has-hidden-label ion-checkbox.in-item.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:0}: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 }); }
|
|
104
120
|
}
|
|
105
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
121
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
106
122
|
type: Component,
|
|
107
123
|
args: [{ standalone: true, imports: [CommonModule, IonCheckbox], selector: 'kirby-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
108
124
|
IonicElementPartHelper,
|
|
@@ -111,7 +127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
111
127
|
useExisting: forwardRef((() => CheckboxComponent)),
|
|
112
128
|
multi: true,
|
|
113
129
|
},
|
|
114
|
-
], template: "<ion-checkbox\n mode=\"md\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (ionChange)=\"onChecked($event.detail.checked)\"\n (ionBlur)=\"onBlur()\"\n [labelPlacement]=\"_labelPlacement\"\n [justify]=\"_justify\"\n>\n <span *ngIf=\"text\">{{ text }}</span>\n <ng-content></ng-content>\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:
|
|
130
|
+
], template: "<ion-checkbox\n mode=\"md\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\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\">{{ text }}</span>\n <span class=\"default-content\">\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: #2dc172;--border-color-checked: #2dc172}}: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: #29ae67;--border-color-checked: #29ae67}: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: #5c5c5c;--border-color-checked: #5c5c5c}}: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: #ebebeb;--checkbox-background-checked: #6e6e6e;--border-color-checked: #6e6e6e}: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-semi-light)}: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}: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}@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: #ebebeb}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background: #e0e0e0}: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{position:initial}:host.has-hidden-label[slot=end] ion-checkbox{margin-inline-start:12px}:host.has-hidden-label ion-checkbox{position:initial}:host.has-hidden-label ion-checkbox.in-item.checkbox-label-placement-start::part(label-text-wrapper),:host.has-hidden-label ion-checkbox.in-item.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:0}: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"] }]
|
|
115
131
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.IonicElementPartHelper }], propDecorators: { ionCheckboxElement: [{
|
|
116
132
|
type: ViewChild,
|
|
117
133
|
args: [IonCheckbox, { read: ElementRef, static: true }]
|
|
@@ -142,6 +158,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
142
158
|
}], isAttentionLevel2: [{
|
|
143
159
|
type: HostBinding,
|
|
144
160
|
args: ['class.attention-level2']
|
|
161
|
+
}], _labelText: [{
|
|
162
|
+
type: HostBinding,
|
|
163
|
+
args: ['class.has-hidden-label']
|
|
145
164
|
}], checkedChange: [{
|
|
146
165
|
type: Output
|
|
147
166
|
}] } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-designsystem-checkbox.mjs","sources":["../../checkbox/src/checkbox.component.ts","../../checkbox/src/checkbox.component.html","../../checkbox/src/kirbydesign-designsystem-checkbox.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n HostBinding,\n Input,\n OnInit,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';\nimport { IonCheckbox } from '@ionic/angular/standalone';\n\n@Component({\n standalone: true,\n imports: [CommonModule, IonCheckbox],\n selector: 'kirby-checkbox',\n templateUrl: './checkbox.component.html',\n styleUrls: ['./checkbox.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n IonicElementPartHelper,\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => CheckboxComponent),\n multi: true,\n },\n ],\n})\nexport class CheckboxComponent implements AfterViewInit, ControlValueAccessor, OnInit {\n @ViewChild(IonCheckbox, { read: ElementRef, static: true })\n private ionCheckboxElement?: ElementRef<HTMLIonCheckboxElement>;\n\n @Input() checked: boolean = false;\n @Input() attentionLevel: '1' | '2' = '2';\n\n @Input()\n text: string;\n\n @HostBinding('class')\n @Input()\n size: 'xs' | 'sm' | 'md' = 'md';\n\n @HostBinding('class.error')\n @Input()\n hasError: boolean = false;\n\n @Input() disabled = false;\n @HostBinding('attr.disabled')\n get _isDisabled() {\n return this.disabled ? 'disabled' : null;\n }\n\n @HostBinding('class.attention-level1') get isAttentionLevel1() {\n return this.attentionLevel === '1';\n }\n @HostBinding('class.attention-level2') get isAttentionLevel2() {\n return this.attentionLevel === '2';\n }\n\n @Output() checkedChange = new EventEmitter<boolean>();\n\n _justify: 'start' | 'end' | 'space-between' = 'start';\n _labelPlacement: 'end' | 'fixed' | 'stacked' | 'start' = 'end';\n\n constructor(\n private element: ElementRef<HTMLElement>,\n private ionicElementPartHelper: IonicElementPartHelper\n ) {}\n\n ngOnInit(): void {\n const slot = this.element.nativeElement.getAttribute('slot');\n if (slot === 'end') {\n this._justify = 'space-between';\n this._labelPlacement = 'start';\n }\n }\n\n ngAfterViewInit(): void {\n this.ionicElementPartHelper.setPart('label', this.ionCheckboxElement, '.checkbox-wrapper');\n this.ionicElementPartHelper.setPart(\n 'label-text-wrapper',\n this.ionCheckboxElement,\n '.label-text-wrapper'\n );\n this.ionicElementPartHelper.setPart(\n 'native-wrapper',\n this.ionCheckboxElement,\n '.native-wrapper'\n );\n }\n\n onChecked(checked: boolean): void {\n this.checked = checked;\n this._onChange(this.checked);\n this.checkedChange.emit(this.checked);\n }\n\n onBlur() {\n this._onTouched();\n }\n\n // Initialize default ControlValueAccessor callback functions (noop)\n // eslint-disable-next-line no-empty-function\n private _onChange: (value: boolean) => void = () => {};\n // eslint-disable-next-line no-empty-function\n private _onTouched = () => {};\n\n /**\n * Sets the checkbox's value. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n *\n * @param value New value to be written to the model.\n */\n writeValue(value: boolean): void {\n this.checked = value;\n }\n\n /**\n * Saves a callback function to be invoked when the checkbox's value\n * changes from user input. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n *\n * @param fn Callback to be triggered when the value changes.\n */\n registerOnChange(fn: any): void {\n this._onChange = fn;\n }\n\n /**\n * Saves a callback function to be invoked when the checkbox is blurred\n * by the user. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n *\n * @param fn Callback to be triggered when the component has been touched.\n */\n registerOnTouched(fn: any): void {\n this._onTouched = fn;\n }\n\n /**\n * Disables the checkbox. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n *\n * @param isDisabled Sets whether the component is disabled.\n */\n setDisabledState?(isDisabled: boolean): void {\n this.disabled = isDisabled;\n }\n}\n","<ion-checkbox\n mode=\"md\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (ionChange)=\"onChecked($event.detail.checked)\"\n (ionBlur)=\"onBlur()\"\n [labelPlacement]=\"_labelPlacement\"\n [justify]=\"_justify\"\n>\n <span *ngIf=\"text\">{{ text }}</span>\n <ng-content></ng-content>\n</ion-checkbox>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"kirbydesign-designsystem-checkbox.mjs","sources":["../../checkbox/src/checkbox.component.ts","../../checkbox/src/checkbox.component.html","../../checkbox/src/kirbydesign-designsystem-checkbox.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n AfterContentInit,\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n HostBinding,\n Input,\n OnInit,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';\nimport { IonCheckbox } from '@ionic/angular/standalone';\nimport { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';\n\n@Component({\n standalone: true,\n imports: [CommonModule, IonCheckbox],\n selector: 'kirby-checkbox',\n templateUrl: './checkbox.component.html',\n styleUrls: ['./checkbox.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n IonicElementPartHelper,\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => CheckboxComponent),\n multi: true,\n },\n ],\n})\nexport class CheckboxComponent\n implements AfterViewInit, ControlValueAccessor, OnInit, AfterContentInit\n{\n @ViewChild(IonCheckbox, { read: ElementRef, static: true })\n private ionCheckboxElement?: ElementRef<HTMLIonCheckboxElement>;\n\n @Input() checked: boolean = false;\n @Input() attentionLevel: '1' | '2' = '2';\n\n @Input()\n text: string;\n\n @HostBinding('class')\n @Input()\n size: 'xs' | 'sm' | 'md' = 'md';\n\n @HostBinding('class.error')\n @Input()\n hasError: boolean = false;\n\n @Input() disabled = false;\n @HostBinding('attr.disabled')\n get _isDisabled() {\n return this.disabled ? 'disabled' : null;\n }\n\n @HostBinding('class.attention-level1') get isAttentionLevel1() {\n return this.attentionLevel === '1';\n }\n @HostBinding('class.attention-level2') get isAttentionLevel2() {\n return this.attentionLevel === '2';\n }\n\n @HostBinding('class.has-hidden-label') _labelText: string;\n\n @Output() checkedChange = new EventEmitter<boolean>();\n\n _justify: 'start' | 'end' | 'space-between' = 'start';\n _labelPlacement: 'end' | 'fixed' | 'stacked' | 'start' = 'end';\n _hasSlottedContent: boolean;\n\n constructor(\n private element: ElementRef<HTMLElement>,\n private ionicElementPartHelper: IonicElementPartHelper\n ) {}\n\n ngOnInit(): void {\n /**\n * We cannot query ion-checkbox for slotted content at this point as the slot has not been rendered.\n * But we need to know if content is slotted to set justify and labelPlacement BEFORE ion-checkbox is rendered.\n * So it has to be done by querying an additional wrapper around the default content slot like this.\n */\n this._hasSlottedContent = this.element.nativeElement\n .querySelector('.default-content')\n .hasChildNodes();\n\n const slot = this.element.nativeElement.getAttribute('slot');\n if (slot === 'end' && this._hasSlottedContent) {\n this._justify = 'space-between';\n this._labelPlacement = 'start';\n }\n }\n\n ngAfterViewInit(): void {\n this.ionicElementPartHelper.setPart('label', this.ionCheckboxElement, '.checkbox-wrapper');\n this.ionicElementPartHelper.setPart(\n 'label-text-wrapper',\n this.ionCheckboxElement,\n '.label-text-wrapper'\n );\n this.ionicElementPartHelper.setPart(\n 'native-wrapper',\n this.ionCheckboxElement,\n '.native-wrapper'\n );\n }\n\n ngAfterContentInit(): void {\n this._labelText = inheritAriaLabelText(this.element.nativeElement);\n\n if (!this.text && !this._labelText && !this._hasSlottedContent) {\n // if no label has been set try to find a label in an item and use its text content\n this._labelText = setAccessibleLabel(this.element.nativeElement);\n }\n }\n\n onChecked(checked: boolean): void {\n this.checked = checked;\n this._onChange(this.checked);\n this.checkedChange.emit(this.checked);\n }\n\n onBlur() {\n this._onTouched();\n }\n\n // Initialize default ControlValueAccessor callback functions (noop)\n // eslint-disable-next-line no-empty-function\n private _onChange: (value: boolean) => void = () => {};\n // eslint-disable-next-line no-empty-function\n private _onTouched = () => {};\n\n /**\n * Sets the checkbox's value. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n *\n * @param value New value to be written to the model.\n */\n writeValue(value: boolean): void {\n this.checked = value;\n }\n\n /**\n * Saves a callback function to be invoked when the checkbox's value\n * changes from user input. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n *\n * @param fn Callback to be triggered when the value changes.\n */\n registerOnChange(fn: any): void {\n this._onChange = fn;\n }\n\n /**\n * Saves a callback function to be invoked when the checkbox is blurred\n * by the user. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n *\n * @param fn Callback to be triggered when the component has been touched.\n */\n registerOnTouched(fn: any): void {\n this._onTouched = fn;\n }\n\n /**\n * Disables the checkbox. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n *\n * @param isDisabled Sets whether the component is disabled.\n */\n setDisabledState?(isDisabled: boolean): void {\n this.disabled = isDisabled;\n }\n}\n","<ion-checkbox\n mode=\"md\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\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\">{{ text }}</span>\n <span class=\"default-content\">\n <ng-content></ng-content>\n </span>\n</ion-checkbox>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -26,12 +26,12 @@ class TableRowComponent {
|
|
|
26
26
|
TableRowComponent.hasWarnedAboutSelectableDeprecation = true;
|
|
27
27
|
console.warn(KIRBY_TABLE_ROW_SELECTABLE_DEPRECATION_WARNING);
|
|
28
28
|
}
|
|
29
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
30
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.
|
|
29
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
30
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: TableRowComponent, selector: "tr[kirby-tr]", inputs: { selectable: "selectable" }, host: { properties: { "class.kirby-selectable-row": "this.isSelectable" } }, ngImport: i0, template: `
|
|
31
31
|
<ng-content></ng-content>
|
|
32
32
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
33
33
|
}
|
|
34
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
34
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TableRowComponent, decorators: [{
|
|
35
35
|
type: Component,
|
|
36
36
|
args: [{
|
|
37
37
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
@@ -62,12 +62,12 @@ class TableComponent {
|
|
|
62
62
|
this._fixedLayout = fixed;
|
|
63
63
|
console.warn(KIRBY_TABLE_LAYOUT_FIXED_DEPRECATION_WARNING);
|
|
64
64
|
}
|
|
65
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
66
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.
|
|
65
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
66
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: TableComponent, selector: "table[kirby-table]", inputs: { fixedLayout: "fixedLayout" }, host: { properties: { "class.kirby-table-layout-fixed": "this.hasFixedLayout" } }, ngImport: i0, template: `
|
|
67
67
|
<ng-content></ng-content>
|
|
68
68
|
`, isInline: true, styles: ["table[kirby-table]{width:100%;border-collapse:collapse}table[kirby-table].kirby-table-layout-fixed{table-layout:fixed}table[kirby-table] tr:not(:last-child){border-bottom:1px solid var(--kirby-medium)}table[kirby-table] thead tr{border-bottom:1px solid var(--kirby-medium)}table[kirby-table] th{text-align:left;font-weight:400;font-size:12px;color:var(--kirby-text-color-semi-dark);padding:8px 16px}table[kirby-table] td{height:44px;padding:4px 16px;font-weight:400;font-size:14px;color:var(--kirby-text-color-black);vertical-align:middle}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
69
69
|
}
|
|
70
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
70
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TableComponent, decorators: [{
|
|
71
71
|
type: Component,
|
|
72
72
|
args: [{ selector: 'table[kirby-table]', template: `
|
|
73
73
|
<ng-content></ng-content>
|
|
@@ -104,10 +104,10 @@ class TableSortableComponent {
|
|
|
104
104
|
this.renderer.setAttribute(this.spanElement.nativeElement, 'data-text', this.spanElement.nativeElement.textContent);
|
|
105
105
|
}
|
|
106
106
|
}
|
|
107
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
108
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.
|
|
107
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TableSortableComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
108
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: TableSortableComponent, 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: "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: "component", type: i2.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
109
109
|
}
|
|
110
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
110
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TableSortableComponent, decorators: [{
|
|
111
111
|
type: Component,
|
|
112
112
|
args: [{ selector: 'th[sortable]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
|
|
113
113
|
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { sortable: [{
|
|
@@ -132,11 +132,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
132
132
|
}] } });
|
|
133
133
|
|
|
134
134
|
class DataTableModule {
|
|
135
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
136
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.
|
|
137
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.
|
|
135
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
136
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: DataTableModule, declarations: [TableComponent, TableRowComponent, TableSortableComponent], imports: [CommonModule, IconModule], exports: [TableComponent, TableRowComponent, TableSortableComponent] }); }
|
|
137
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DataTableModule, imports: [CommonModule, IconModule] }); }
|
|
138
138
|
}
|
|
139
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
139
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DataTableModule, decorators: [{
|
|
140
140
|
type: NgModule,
|
|
141
141
|
args: [{
|
|
142
142
|
declarations: [TableComponent, TableRowComponent, TableSortableComponent],
|
|
@@ -3,10 +3,10 @@ import * as i0 from '@angular/core';
|
|
|
3
3
|
import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
|
|
4
4
|
|
|
5
5
|
class DividerComponent {
|
|
6
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
7
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.
|
|
6
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", 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: "17.3.
|
|
9
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DividerComponent, decorators: [{
|
|
10
10
|
type: Component,
|
|
11
11
|
args: [{ standalone: true, 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: [{
|
|
@@ -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: "17.3.
|
|
72
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.
|
|
71
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: KeyboardHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
72
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: KeyboardHandlerService, providedIn: 'root' }); }
|
|
73
73
|
}
|
|
74
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
74
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", 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: "17.3.
|
|
523
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.
|
|
522
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", 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: "17.3.10", type: DropdownComponent, 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 <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}@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.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;min-width:288px;max-width:calc(100vw - 32px)}@media (min-width: 321px){kirby-card{min-width:343px}}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}@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).is-open>button{box-shadow:none}\n"], dependencies: [{ kind: "component", type: i3.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "flat", "variant"] }, { kind: "component", type: i4.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { 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: "17.3.
|
|
531
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
532
532
|
type: Component,
|
|
533
533
|
args: [{ selector: 'kirby-dropdown', providers: [
|
|
534
534
|
{
|
|
@@ -671,15 +671,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
671
671
|
|
|
672
672
|
const declarations = [DropdownComponent];
|
|
673
673
|
class DropdownModule {
|
|
674
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
675
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.
|
|
674
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
675
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: DropdownModule, declarations: [DropdownComponent], imports: [CardModule,
|
|
676
676
|
IconModule,
|
|
677
677
|
ItemModule,
|
|
678
678
|
FormFieldModule,
|
|
679
679
|
PopoverComponent,
|
|
680
680
|
ButtonComponent,
|
|
681
681
|
CommonModule], exports: [DropdownComponent] }); }
|
|
682
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.
|
|
682
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DropdownModule, providers: [KeyboardHandlerService], imports: [CardModule,
|
|
683
683
|
IconModule,
|
|
684
684
|
ItemModule,
|
|
685
685
|
FormFieldModule,
|
|
@@ -687,7 +687,7 @@ class DropdownModule {
|
|
|
687
687
|
ButtonComponent,
|
|
688
688
|
CommonModule] }); }
|
|
689
689
|
}
|
|
690
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
690
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DropdownModule, decorators: [{
|
|
691
691
|
type: NgModule,
|
|
692
692
|
args: [{
|
|
693
693
|
imports: [
|
|
@@ -35,10 +35,10 @@ class EmptyStateComponent {
|
|
|
35
35
|
}
|
|
36
36
|
});
|
|
37
37
|
}
|
|
38
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
39
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.
|
|
38
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
39
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: EmptyStateComponent, selector: "kirby-empty-state", inputs: { iconName: "iconName", customIconName: "customIconName", title: "title", subtitle: "subtitle" }, queries: [{ propertyName: "slottedButtons", predicate: ButtonComponent }], ngImport: i0, template: "<article>\n <div *ngIf=\"iconName || customIconName\" class=\"icon-outline\">\n <kirby-icon [name]=\"iconName\" size=\"lg\"></kirby-icon>\n </div>\n <h3 *ngIf=\"title\" class=\"title\">{{ title }}</h3>\n <p *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</p>\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n</article>\n", styles: ["article{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)}h3.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", "customName"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
40
40
|
}
|
|
41
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
41
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EmptyStateComponent, decorators: [{
|
|
42
42
|
type: Component,
|
|
43
43
|
args: [{ selector: 'kirby-empty-state', changeDetection: ChangeDetectionStrategy.OnPush, template: "<article>\n <div *ngIf=\"iconName || customIconName\" class=\"icon-outline\">\n <kirby-icon [name]=\"iconName\" size=\"lg\"></kirby-icon>\n </div>\n <h3 *ngIf=\"title\" class=\"title\">{{ title }}</h3>\n <p *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</p>\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n</article>\n", styles: ["article{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)}h3.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"] }]
|
|
44
44
|
}], propDecorators: { iconName: [{
|
|
@@ -56,11 +56,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
56
56
|
|
|
57
57
|
const declarations = [EmptyStateComponent];
|
|
58
58
|
class EmptyStateModule {
|
|
59
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
60
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.
|
|
61
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.
|
|
59
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EmptyStateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
60
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: EmptyStateModule, declarations: [EmptyStateComponent], imports: [IconModule, CommonModule, ThemeColorDirective], exports: [EmptyStateComponent, ThemeColorDirective] }); }
|
|
61
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EmptyStateModule, imports: [IconModule, CommonModule] }); }
|
|
62
62
|
}
|
|
63
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
63
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EmptyStateModule, decorators: [{
|
|
64
64
|
type: NgModule,
|
|
65
65
|
args: [{
|
|
66
66
|
imports: [IconModule, CommonModule, ThemeColorDirective],
|
|
@@ -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: "17.3.
|
|
54
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.
|
|
53
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", 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: "17.3.10", 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}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}@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[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: "17.3.
|
|
56
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: FabSheetComponent, decorators: [{
|
|
57
57
|
type: Component,
|
|
58
58
|
args: [{ standalone: true, 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}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}@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[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: [{
|
|
@@ -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: "17.3.
|
|
14
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.
|
|
13
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: FlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", 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: "17.3.
|
|
18
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: FlagComponent, decorators: [{
|
|
19
19
|
type: Component,
|
|
20
20
|
args: [{ standalone: true, imports: [CommonModule], selector: 'kirby-flag', template: `
|
|
21
21
|
<ng-content></ng-content>
|