├── .browserslistrc ├── .github ├── CODEOWNERS ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── component-request.md │ ├── enhancement-request.md │ ├── housekeeping-request.md │ └── inquiry-request.md ├── PULL_REQUEST_TEMPLATE.md ├── SUPPORT.md ├── actions │ └── kirby-setup │ │ └── action.yml ├── release.yml ├── stale.yml └── workflows │ ├── build.yml │ ├── chromatic.yml │ ├── cleanup-branch-deployment.yml │ └── publish.yml ├── .gitignore ├── .lintstagedrc ├── .npmrc ├── .nvmrc ├── .prettierignore ├── .prettierrc.json ├── .stylelintignore ├── .stylelintrc ├── .vscode ├── extensions.json └── settings.json ├── CHANGELOG.md ├── Dockerfile ├── LICENSE ├── MIGRATION.md ├── apps ├── .gitkeep ├── cookbook │ ├── .lintstagedrc │ ├── eslint.config.mjs │ ├── karma.conf.js │ ├── package.json │ ├── project.json │ ├── resource-imports.d.ts │ ├── src │ │ ├── app │ │ │ ├── accessibility │ │ │ │ ├── accessibility-guidelines.component.ts │ │ │ │ └── accessibility-guidelines.html │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.routes.ts │ │ │ ├── component-overview │ │ │ │ ├── component-configuration.json │ │ │ │ ├── component-display │ │ │ │ │ ├── component-display.component.html │ │ │ │ │ ├── component-display.component.scss │ │ │ │ │ └── component-display.component.ts │ │ │ │ ├── component-overview.component.html │ │ │ │ ├── component-overview.component.scss │ │ │ │ ├── component-overview.component.ts │ │ │ │ └── display.ts │ │ │ ├── examples │ │ │ │ ├── _examples.shared.scss │ │ │ │ ├── _modal-playground.shared.scss │ │ │ │ ├── accordion-example │ │ │ │ │ ├── accordion-example.component.html │ │ │ │ │ ├── accordion-example.component.scss │ │ │ │ │ ├── accordion-example.component.ts │ │ │ │ │ └── examples │ │ │ │ │ │ ├── card-list.ts │ │ │ │ │ │ ├── card.ts │ │ │ │ │ │ ├── default.ts │ │ │ │ │ │ ├── events.ts │ │ │ │ │ │ ├── expanded.ts │ │ │ │ │ │ └── list.ts │ │ │ │ ├── action-sheet-example │ │ │ │ │ ├── action-sheet-example.component.html │ │ │ │ │ └── action-sheet-example.component.ts │ │ │ │ ├── alert-example │ │ │ │ │ ├── alert-example.component.html │ │ │ │ │ └── alert-example.component.ts │ │ │ │ ├── avatar-example │ │ │ │ │ ├── avatar-example.component.html │ │ │ │ │ ├── avatar-example.component.scss │ │ │ │ │ ├── avatar-example.component.ts │ │ │ │ │ └── examples │ │ │ │ │ │ ├── avatar-examples.shared.scss │ │ │ │ │ │ ├── badge.scss │ │ │ │ │ │ ├── badge.ts │ │ │ │ │ │ ├── colors.ts │ │ │ │ │ │ ├── default.ts │ │ │ │ │ │ ├── icon.ts │ │ │ │ │ │ ├── image-error.ts │ │ │ │ │ │ ├── image-lazy-loading.ts │ │ │ │ │ │ ├── image-sizes.ts │ │ │ │ │ │ ├── image.ts │ │ │ │ │ │ └── text.ts │ │ │ │ ├── badge-example │ │ │ │ │ ├── badge-example.component.html │ │ │ │ │ ├── badge-example.component.scss │ │ │ │ │ ├── badge-example.component.ts │ │ │ │ │ └── examples │ │ │ │ │ │ ├── badge-example-icon.component.ts │ │ │ │ │ │ ├── badge-example-number.component.ts │ │ │ │ │ │ ├── badge-example-shared.scss │ │ │ │ │ │ ├── badge-example-small.component.ts │ │ │ │ │ │ └── badge-example-text.component.ts │ │ │ │ ├── button-example │ │ │ │ │ ├── button-example.component.html │ │ │ │ │ ├── button-example.component.ts │ │ │ │ │ └── examples │ │ │ │ │ │ ├── _grid-layout.scss │ │ │ │ │ │ ├── _responsive-grid-layout.scss │ │ │ │ │ │ ├── _shared.scss │ │ │ │ │ │ ├── aria-disabled.ts │ │ │ │ │ │ ├── attention-level.scss │ │ │ │ │ │ ├── attention-level.ts │ │ │ │ │ │ ├── block.ts │ │ │ │ │ │ ├── default.ts │ │ │ │ │ │ ├── disabled.ts │ │ │ │ │ │ ├── icon-only.ts │ │ │ │ │ │ ├── icons.ts │ │ │ │ │ │ ├── link.ts │ │ │ │ │ │ ├── sizes.scss │ │ │ │ │ │ ├── sizes.ts │ │ │ │ │ │ └── undecorated.ts │ │ │ │ ├── calendar-example │ │ │ │ │ ├── calendar-example.component.html │ │ │ │ │ ├── calendar-example.component.scss │ │ │ │ │ ├── calendar-example.component.ts │ │ │ │ │ └── examples │ │ │ │ │ │ ├── _shared.scss │ │ │ │ │ │ ├── in-card.scss │ │ │ │ │ │ ├── in-card.ts │ │ │ │ │ │ ├── locales.ts │ │ │ │ │ │ ├── no-background.ts │ │ │ │ │ │ └── year-navigator.ts │ │ │ │ ├── card-example │ │ │ │ │ ├── card-example.component.html │ │ │ │ │ ├── card-example.component.scss │ │ │ │ │ ├── card-example.component.ts │ │ │ │ │ └── examples │ │ │ │ │ │ ├── background-image.scss │ │ │ │ │ │ ├── background-image.ts │ │ │ │ │ │ ├── card-example-variant.scss │ │ │ │ │ │ ├── card-example.shared.scss │ │ │ │ │ │ ├── color.ts │ │ │ │ │ │ ├── disclosure.ts │ │ │ │ │ │ ├── flag.ts │ │ │ │ │ │ └── variant.ts │ │ │ │ ├── charts-example │ │ │ │ │ ├── charts-example.component.html │ │ │ │ │ ├── charts-example.component.scss │ │ │ │ │ ├── charts-example.component.ts │ │ │ │ │ └── examples │ │ │ │ │ │ ├── chart-example-accessibility.component.ts │ │ │ │ │ │ ├── chart-example-annotations.component.ts │ │ │ │ │ │ ├── chart-example-area-line.component.ts │ │ │ │ │ │ ├── chart-example-bar.component.ts │ │ │ │ │ │ ├── chart-example-column-chart.component.ts │ │ │ │ │ │ ├── chart-example-column-stacked.component.ts │ │ │ │ │ │ ├── chart-example-interaction.component.ts │ │ │ │ │ │ ├── chart-example-line.component.ts │ │ │ │ │ │ ├── chart-example-multiple-datasets.component.ts │ │ │ │ │ │ ├── chart-example-simple-column-chart.component.ts │ │ │ │ │ │ └── config │ │ │ │ │ │ ├── bar-config │ │ │ │ │ │ └── chart-example-config-base-bar.component.ts │ │ │ │ │ │ ├── chart-config-example.ts │ │ │ │ │ │ └── stock-config │ │ │ │ │ │ ├── chart-example-config-base-stock.component.ts │ │ │ │ │ │ ├── chart-example-config-datalabels-stock.component.ts │ │ │ │ │ │ ├── chart-example-config-stock.component.ts │ │ │ │ │ │ └── chart-example-config-tooltip-stock.component.ts │ │ │ │ ├── checkbox-example │ │ │ │ │ ├── checkbox-example.component.html │ │ │ │ │ ├── checkbox-example.component.ts │ │ │ │ │ └── examples │ │ │ │ │ │ ├── confirm.ts │ │ │ │ │ │ ├── default.ts │ │ │ │ │ │ ├── events.ts │ │ │ │ │ │ ├── list-indeterminate.ts │ │ │ │ │ │ ├── list.ts │ │ │ │ │ │ ├── multiline.ts │ │ │ │ │ │ ├── reactive-forms.ts │ │ │ │ │ │ ├── sizes.ts │ │ │ │ │ │ └── states.ts │ │ │ │ ├── checkbox-radio-sizes-example.scss │ │ │ │ ├── data-table-example │ │ │ │ │ ├── data-table-example.component.html │ │ │ │ │ ├── data-table-example.component.ts │ │ │ │ │ ├── example-data.ts │ │ │ │ │ └── examples │ │ │ │ │ │ ├── card.ts │ │ │ │ │ │ ├── default.ts │ │ │ │ │ │ └── sortable.ts │ │ │ │ ├── divider-example │ │ │ │ │ ├── divider-example.component.html │ │ │ │ │ └── divider-example.component.ts │ │ │ │ ├── dropdown-example │ │ │ │ │ ├── dropdown-example-configuration-component │ │ │ │ │ │ ├── dropdown-example-configuration.component.html │ │ │ │ │ │ ├── dropdown-example-configuration.component.scss │ │ │ │ │ │ └── dropdown-example-configuration.component.ts │ │ │ │ │ ├── dropdown-example.component.html │ │ │ │ │ ├── dropdown-example.component.scss │ │ │ │ │ ├── dropdown-example.component.ts │ │ │ │ │ └── examples │ │ │ │ │ │ ├── attention-level.ts │ │ │ │ │ │ ├── custom-item-template.ts │ │ │ │ │ │ ├── default.ts │ │ │ │ │ │ ├── dropdown-examples.shared.scss │ │ │ │ │ │ ├── expand.ts │ │ │ │ │ │ ├── item-select.ts │ │ │ │ │ │ ├── ng-forms.ts │ │ │ │ │ │ ├── pre-selected.ts │ │ │ │ │ │ ├── right-aligned.ts │ │ │ │ │ │ └── scroll.ts │ │ │ │ ├── empty-state-example │ │ │ │ │ ├── empty-state-example.component.html │ │ │ │ │ ├── empty-state-example.component.scss │ │ │ │ │ ├── empty-state-example.component.ts │ │ │ │ │ └── examples │ │ │ │ │ │ ├── buttons.ts │ │ │ │ │ │ ├── empty-state-example.shared.scss │ │ │ │ │ │ ├── message-types.ts │ │ │ │ │ │ └── simple.ts │ │ │ │ ├── example-configuration-wrapper │ │ │ │ │ ├── example-configuration-wrapper.component.html │ │ │ │ │ ├── example-configuration-wrapper.component.scss │ │ │ │ │ └── example-configuration-wrapper.component.ts │ │ │ │ ├── examples-routing.module.ts │ │ │ │ ├── examples.component.html │ │ │ │ ├── examples.component.scss │ │ │ │ ├── examples.component.ts │ │ │ │ ├── examples.routes.ts │ │ │ │ ├── fab-sheet-example │ │ │ │ │ ├── fab-sheet-example.component.html │ │ │ │ │ └── fab-sheet-example.component.ts │ │ │ │ ├── flag-example │ │ │ │ │ ├── examples │ │ │ │ │ │ ├── colors.ts │ │ │ │ │ │ ├── flag-examples.shared.scss │ │ │ │ │ │ └── sizes.ts │ │ │ │ │ ├── flag-example.component.html │ │ │ │ │ ├── flag-example.component.scss │ │ │ │ │ └── flag-example.component.ts │ │ │ │ ├── fonts-example │ │ │ │ │ ├── fonts-example.component.html │ │ │ │ │ ├── fonts-example.component.scss │ │ │ │ │ └── fonts-example.component.ts │ │ │ │ ├── form-field-example │ │ │ │ │ ├── examples │ │ │ │ │ │ ├── input │ │ │ │ │ │ │ ├── affix.ts │ │ │ │ │ │ │ ├── borderless.ts │ │ │ │ │ │ │ ├── color.scss │ │ │ │ │ │ │ ├── color.ts │ │ │ │ │ │ │ ├── counter.ts │ │ │ │ │ │ │ ├── date-native.ts │ │ │ │ │ │ │ ├── date.ts │ │ │ │ │ │ │ ├── decimal-mask.ts │ │ │ │ │ │ │ ├── default.ts │ │ │ │ │ │ │ ├── disabled.ts │ │ │ │ │ │ │ ├── error.ts │ │ │ │ │ │ │ ├── focus.ts │ │ │ │ │ │ │ ├── label-message.ts │ │ │ │ │ │ │ ├── label.ts │ │ │ │ │ │ │ ├── numeric.ts │ │ │ │ │ │ │ └── reactive-forms.ts │ │ │ │ │ │ └── textarea │ │ │ │ │ │ │ ├── counter.ts │ │ │ │ │ │ │ ├── default.ts │ │ │ │ │ │ │ ├── label.ts │ │ │ │ │ │ │ └── reactive-forms.ts │ │ │ │ │ ├── form-field-example-configuration-component │ │ │ │ │ │ ├── form-field-example-configuration.component.html │ │ │ │ │ │ ├── form-field-example-configuration.component.scss │ │ │ │ │ │ └── form-field-example-configuration.component.ts │ │ │ │ │ ├── form-field-example.component.html │ │ │ │ │ ├── form-field-example.component.scss │ │ │ │ │ └── form-field-example.component.ts │ │ │ │ ├── grid-example │ │ │ │ │ ├── grid-example.component.html │ │ │ │ │ ├── grid-example.component.scss │ │ │ │ │ └── grid-example.component.ts │ │ │ │ ├── grid-layout-example │ │ │ │ │ ├── grid-layout-extended-example │ │ │ │ │ │ ├── grid-layout-extended-example.component.html │ │ │ │ │ │ ├── grid-layout-extended-example.component.scss │ │ │ │ │ │ └── grid-layout-extended-example.component.ts │ │ │ │ │ ├── grid-layout-multiple-containers-example │ │ │ │ │ │ ├── grid-layout-multiple-containers-example.component.html │ │ │ │ │ │ ├── grid-layout-multiple-containers-example.component.scss │ │ │ │ │ │ └── grid-layout-multiple-containers-example.component.ts │ │ │ │ │ └── grid-layout-single-container-example │ │ │ │ │ │ ├── grid-layout-single-container-example.component.html │ │ │ │ │ │ ├── grid-layout-single-container-example.component.scss │ │ │ │ │ │ └── grid-layout-single-container-example.component.ts │ │ │ │ ├── header-example │ │ │ │ │ ├── examples │ │ │ │ │ │ ├── action-group.ts │ │ │ │ │ │ ├── avatar.ts │ │ │ │ │ │ ├── combined.ts │ │ │ │ │ │ ├── custom-actions.ts │ │ │ │ │ │ ├── custom-flag.ts │ │ │ │ │ │ ├── custom-section.ts │ │ │ │ │ │ ├── default.ts │ │ │ │ │ │ ├── emphasize-actions.ts │ │ │ │ │ │ ├── flag.ts │ │ │ │ │ │ ├── interactive-title.ts │ │ │ │ │ │ ├── progress-circle-with-avatar.ts │ │ │ │ │ │ ├── subtitles.ts │ │ │ │ │ │ ├── title-scaling.ts │ │ │ │ │ │ └── value.ts │ │ │ │ │ ├── header-example.component.html │ │ │ │ │ ├── header-example.component.scss │ │ │ │ │ └── header-example.component.ts │ │ │ │ ├── icon-example │ │ │ │ │ ├── examples │ │ │ │ │ │ ├── custom.ts │ │ │ │ │ │ ├── default.ts │ │ │ │ │ │ ├── shared.scss │ │ │ │ │ │ └── sizes.ts │ │ │ │ │ ├── icon-example.component.html │ │ │ │ │ ├── icon-example.component.scss │ │ │ │ │ └── icon-example.component.ts │ │ │ │ ├── item-example │ │ │ │ │ ├── examples │ │ │ │ │ │ ├── _shared.scss │ │ │ │ │ │ ├── complex-labels.ts │ │ │ │ │ │ ├── disabled-controls.ts │ │ │ │ │ │ ├── disabled.ts │ │ │ │ │ │ ├── disclosure-animation.ts │ │ │ │ │ │ ├── nested-controls.ts │ │ │ │ │ │ ├── selectable.ts │ │ │ │ │ │ ├── sizes.ts │ │ │ │ │ │ ├── slots.ts │ │ │ │ │ │ ├── text-vertically-stacked.ts │ │ │ │ │ │ └── text.ts │ │ │ │ │ ├── item-example.component.html │ │ │ │ │ ├── item-example.component.scss │ │ │ │ │ └── item-example.component.ts │ │ │ │ ├── item-group-example │ │ │ │ │ ├── examples │ │ │ │ │ │ ├── simple.ts │ │ │ │ │ │ └── with-header.ts │ │ │ │ │ ├── item-group-example.component.html │ │ │ │ │ └── item-group-example.component.ts │ │ │ │ ├── item-sliding-example │ │ │ │ │ ├── examples │ │ │ │ │ │ ├── item-sliding-conditional-example.component.ts │ │ │ │ │ │ └── item-sliding-simple-example.component.ts │ │ │ │ │ └── item-sliding-example.component.ts │ │ │ │ ├── link-example │ │ │ │ │ ├── examples │ │ │ │ │ │ ├── default.ts │ │ │ │ │ │ ├── link-examples.shared.scss │ │ │ │ │ │ ├── new-tab.ts │ │ │ │ │ │ └── trailing-icon.ts │ │ │ │ │ ├── link-example.component.html │ │ │ │ │ └── link-example.component.ts │ │ │ │ ├── list-example │ │ │ │ │ ├── examples │ │ │ │ │ │ ├── colored-items.ts │ │ │ │ │ │ ├── header-and-footer.ts │ │ │ │ │ │ ├── items-no-dividers.ts │ │ │ │ │ │ ├── items.ts │ │ │ │ │ │ ├── sections-and-colored-items.ts │ │ │ │ │ │ ├── sections-with-standalone.ts │ │ │ │ │ │ ├── sections.ts │ │ │ │ │ │ ├── selectable-items.ts │ │ │ │ │ │ └── stand-alone.ts │ │ │ │ │ ├── list-example.component.html │ │ │ │ │ ├── list-example.component.scss │ │ │ │ │ └── list-example.component.ts │ │ │ │ ├── list-experimental-example │ │ │ │ │ ├── examples │ │ │ │ │ │ ├── item-sliding.ts │ │ │ │ │ │ └── item.ts │ │ │ │ │ ├── list-experimental-example.component.html │ │ │ │ │ ├── list-experimental-example.component.scss │ │ │ │ │ └── list-experimental-example.component.ts │ │ │ │ ├── list-load-on-demand-example │ │ │ │ │ └── list-load-on-demand-example.component.ts │ │ │ │ ├── list-no-shape-example │ │ │ │ │ ├── base-list-no-shape.ts │ │ │ │ │ ├── examples │ │ │ │ │ │ ├── detailed-card-with-list-no-shape.ts │ │ │ │ │ │ ├── multi-card-list-no-shape.ts │ │ │ │ │ │ └── simple-list-no-shape.ts │ │ │ │ │ ├── list-no-shape-example.component.html │ │ │ │ │ ├── list-no-shape-example.component.scss │ │ │ │ │ └── list-no-shape-example.component.ts │ │ │ │ ├── list-shared │ │ │ │ │ └── base-list.component.ts │ │ │ │ ├── list-swipe-example │ │ │ │ │ ├── list-swipe-example.component.html │ │ │ │ │ ├── list-swipe-example.component.scss │ │ │ │ │ └── list-swipe-example.component.ts │ │ │ │ ├── loading-overlay-example │ │ │ │ │ ├── loading-overlay-example.component.html │ │ │ │ │ ├── loading-overlay-example.component.scss │ │ │ │ │ ├── loading-overlay-example.component.ts │ │ │ │ │ └── service │ │ │ │ │ │ ├── loading-overlay-service-example.component.html │ │ │ │ │ │ ├── loading-overlay-service-example.component.ts │ │ │ │ │ │ └── loading-overlay-service-example.ts │ │ │ │ ├── menu-example │ │ │ │ │ ├── examples │ │ │ │ │ │ ├── advanced.ts │ │ │ │ │ │ ├── customButton.ts │ │ │ │ │ │ ├── customPlacement.ts │ │ │ │ │ │ ├── portal-in-list-wrapper.ts │ │ │ │ │ │ ├── portal.ts │ │ │ │ │ │ ├── portalConfig.ts │ │ │ │ │ │ ├── portalOutletConfig.ts │ │ │ │ │ │ └── selectable.ts │ │ │ │ │ ├── menu-example.component.html │ │ │ │ │ └── menu-example.component.ts │ │ │ │ ├── modal-example │ │ │ │ │ ├── alert-example │ │ │ │ │ │ ├── modal-example-alert-with-guard-stepper.component.ts │ │ │ │ │ │ └── modal-example-embedded-alert.component.ts │ │ │ │ │ ├── compact-example │ │ │ │ │ │ ├── modal-compact-example.component.html │ │ │ │ │ │ └── modal-compact-example.component.ts │ │ │ │ │ ├── embedded-modal-example │ │ │ │ │ │ ├── embedded-modal-example.component.html │ │ │ │ │ │ ├── embedded-modal-example.component.scss │ │ │ │ │ │ └── embedded-modal-example.component.ts │ │ │ │ │ ├── modal-component-example.component.scss │ │ │ │ │ ├── modal-component-example.component.ts │ │ │ │ │ ├── modal-example-advanced.component.scss │ │ │ │ │ ├── modal-example-advanced.component.ts │ │ │ │ │ ├── modal-example-alert-with-guard.component.ts │ │ │ │ │ ├── modal-example-alert.component.ts │ │ │ │ │ ├── modal-example-configuration │ │ │ │ │ │ ├── modal-example-configuration.component.html │ │ │ │ │ │ ├── modal-example-configuration.component.scss │ │ │ │ │ │ ├── modal-example-configuration.component.ts │ │ │ │ │ │ ├── modal-example-size-selector.component.html │ │ │ │ │ │ └── modal-example-size-selector.component.ts │ │ │ │ │ ├── modal-example-outlet.component.scss │ │ │ │ │ ├── modal-example-outlet.component.ts │ │ │ │ │ ├── modal-example-simple.component.scss │ │ │ │ │ ├── modal-example-simple.component.ts │ │ │ │ │ ├── modal-example.component.ts │ │ │ │ │ └── modal-route-example │ │ │ │ │ │ ├── modal-route-page1-example.component.ts │ │ │ │ │ │ └── modal-route-page2-example.component.ts │ │ │ │ ├── ng-forms.shared.scss │ │ │ │ ├── page-example │ │ │ │ │ ├── advanced │ │ │ │ │ │ ├── page-advanced-example.component.ts │ │ │ │ │ │ └── page-custom-title-example.component.ts │ │ │ │ │ ├── alignment-and-toolbar-title │ │ │ │ │ │ └── page-alignment-and-toolbar-title-example.component.ts │ │ │ │ │ ├── base-page-example.component.ts │ │ │ │ │ ├── content-width │ │ │ │ │ │ └── page-content-width-example.component.ts │ │ │ │ │ ├── fit-heading │ │ │ │ │ │ └── fit-heading-example.component.ts │ │ │ │ │ ├── fixed-footer-tabs │ │ │ │ │ │ ├── fixed-footer-tabs-example.component.scss │ │ │ │ │ │ ├── fixed-footer-tabs-example.component.ts │ │ │ │ │ │ └── tab │ │ │ │ │ │ │ └── fixed-footer-tab-example.component.ts │ │ │ │ │ ├── fixed-title-and-actions │ │ │ │ │ │ └── page-fixed-title-and-actions-example.component.ts │ │ │ │ │ ├── pull-to-refresh │ │ │ │ │ │ └── page-pull-to-refresh-example.component.ts │ │ │ │ │ └── simple │ │ │ │ │ │ └── page-simple-example.component.ts │ │ │ │ ├── progress-circle-example │ │ │ │ │ ├── examples │ │ │ │ │ │ ├── animated.ts │ │ │ │ │ │ ├── avatar.ts │ │ │ │ │ │ ├── card.ts │ │ │ │ │ │ ├── content-percent.ts │ │ │ │ │ │ ├── content-steps.ts │ │ │ │ │ │ ├── default.ts │ │ │ │ │ │ └── sizes.ts │ │ │ │ │ ├── progress-circle-example.component.html │ │ │ │ │ ├── progress-circle-example.component.scss │ │ │ │ │ └── progress-circle-example.component.ts │ │ │ │ ├── radio-example │ │ │ │ │ ├── examples │ │ │ │ │ │ ├── binding.ts │ │ │ │ │ │ ├── custom.ts │ │ │ │ │ │ ├── default.ts │ │ │ │ │ │ ├── in-form-field.ts │ │ │ │ │ │ ├── in-item.ts │ │ │ │ │ │ ├── multiline.ts │ │ │ │ │ │ ├── reactive-forms.ts │ │ │ │ │ │ ├── sizes.ts │ │ │ │ │ │ ├── states.ts │ │ │ │ │ │ └── template-driven-forms.ts │ │ │ │ │ ├── radio-example.component.html │ │ │ │ │ ├── radio-example.component.scss │ │ │ │ │ └── radio-example.component.ts │ │ │ │ ├── range-example │ │ │ │ │ ├── examples │ │ │ │ │ │ ├── default.component.ts │ │ │ │ │ │ ├── disabled.component.ts │ │ │ │ │ │ ├── pin.component.ts │ │ │ │ │ │ └── step.component.ts │ │ │ │ │ ├── range-example.component.html │ │ │ │ │ └── range-example.component.ts │ │ │ │ ├── reactive-form-state │ │ │ │ │ ├── reactive-form-state.component.html │ │ │ │ │ ├── reactive-form-state.component.scss │ │ │ │ │ └── reactive-form-state.component.ts │ │ │ │ ├── reorder-list-example │ │ │ │ │ ├── reorder-list-example.component.html │ │ │ │ │ ├── reorder-list-example.component.scss │ │ │ │ │ └── reorder-list-example.component.ts │ │ │ │ ├── section-header-example │ │ │ │ │ ├── examples │ │ │ │ │ │ ├── header-with-card.ts │ │ │ │ │ │ ├── heading-with-label.ts │ │ │ │ │ │ ├── heading-with-multiline-label.ts │ │ │ │ │ │ └── label-and-detail.ts │ │ │ │ │ ├── section-header-example.component.html │ │ │ │ │ ├── section-header-example.component.scss │ │ │ │ │ └── section-header-example.component.ts │ │ │ │ ├── segmented-control-example │ │ │ │ │ ├── color │ │ │ │ │ │ ├── color.scss │ │ │ │ │ │ └── color.ts │ │ │ │ │ ├── default │ │ │ │ │ │ └── default.ts │ │ │ │ │ ├── grouped │ │ │ │ │ │ └── grouped.ts │ │ │ │ │ ├── modes │ │ │ │ │ │ └── modes.ts │ │ │ │ │ ├── reactive-forms │ │ │ │ │ │ └── reactive-forms.ts │ │ │ │ │ ├── segmented-control-example-base.ts │ │ │ │ │ ├── segmented-control-example.component.html │ │ │ │ │ ├── segmented-control-example.component.scss │ │ │ │ │ ├── segmented-control-example.component.ts │ │ │ │ │ ├── segmented-control-examples.shared.scss │ │ │ │ │ ├── sizes │ │ │ │ │ │ └── sizes.ts │ │ │ │ │ └── with-badge │ │ │ │ │ │ └── with-badge.ts │ │ │ │ ├── slide-button-example │ │ │ │ │ ├── slide-button-example.component.html │ │ │ │ │ └── slide-button-example.component.ts │ │ │ │ ├── slides-example │ │ │ │ │ ├── slides-advanced-example │ │ │ │ │ │ ├── slides-advanced-example.component.html │ │ │ │ │ │ └── slides-advanced-example.component.ts │ │ │ │ │ ├── slides-code-snippets.ts │ │ │ │ │ ├── slides-example.shared.scss │ │ │ │ │ ├── slides-height-example │ │ │ │ │ │ ├── slides-height-example.component.html │ │ │ │ │ │ └── slides-height-example.component.ts │ │ │ │ │ └── slides-simple-example │ │ │ │ │ │ ├── slides-simple-example.component.html │ │ │ │ │ │ └── slides-simple-example.component.ts │ │ │ │ ├── spinner-example │ │ │ │ │ ├── spinner-example.component.html │ │ │ │ │ └── spinner-example.component.ts │ │ │ │ ├── stock-chart-example │ │ │ │ │ ├── example │ │ │ │ │ │ ├── comparison.ts │ │ │ │ │ │ └── simple-dataset.ts │ │ │ │ │ ├── stock-chart-example.component.html │ │ │ │ │ ├── stock-chart-example.component.scss │ │ │ │ │ └── stock-chart-example.component.ts │ │ │ │ ├── styling-html-lists-example │ │ │ │ │ ├── styling-html-lists-example.component.html │ │ │ │ │ ├── styling-html-lists-example.component.scss │ │ │ │ │ └── styling-html-lists-example.component.ts │ │ │ │ ├── tab-navigation-example │ │ │ │ │ └── tab-navigation-example.component.ts │ │ │ │ ├── tabs-example │ │ │ │ │ ├── tab │ │ │ │ │ │ ├── tab-example-menu.component.ts │ │ │ │ │ │ └── tab-example.component.ts │ │ │ │ │ ├── tabs-example.component.html │ │ │ │ │ ├── tabs-example.component.scss │ │ │ │ │ └── tabs-example.component.ts │ │ │ │ ├── toast-example │ │ │ │ │ ├── toast-example.component.html │ │ │ │ │ └── toast-example.component.ts │ │ │ │ ├── toggle-button-example │ │ │ │ │ ├── examples │ │ │ │ │ │ ├── _shared.scss │ │ │ │ │ │ ├── default.ts │ │ │ │ │ │ ├── disabled.ts │ │ │ │ │ │ ├── reactive-forms.ts │ │ │ │ │ │ └── theme-color.ts │ │ │ │ │ ├── toggle-button-example.component.html │ │ │ │ │ ├── toggle-button-example.component.scss │ │ │ │ │ └── toggle-button-example.component.ts │ │ │ │ ├── toggle-example │ │ │ │ │ ├── examples │ │ │ │ │ │ ├── default.ts │ │ │ │ │ │ ├── reactive-forms.ts │ │ │ │ │ │ └── toggle-examples.shared.scss │ │ │ │ │ ├── toggle-example.component.html │ │ │ │ │ ├── toggle-example.component.scss │ │ │ │ │ └── toggle-example.component.ts │ │ │ │ └── virtual-scroll-example │ │ │ │ │ └── virtual-scroll-list-example │ │ │ │ │ ├── virtual-scroll-list-example.component.html │ │ │ │ │ ├── virtual-scroll-list-example.component.scss │ │ │ │ │ └── virtual-scroll-list-example.component.ts │ │ │ ├── extensions │ │ │ │ ├── extensions-landing-page.component.html │ │ │ │ └── extensions-landing-page.component.ts │ │ │ ├── guides │ │ │ │ ├── chart-config-guide │ │ │ │ │ ├── chart-config-guide.component.html │ │ │ │ │ └── chart-config-guide.component.ts │ │ │ │ ├── grid-layout │ │ │ │ │ ├── grid-layout-extended │ │ │ │ │ │ ├── grid-layout-extended.component.html │ │ │ │ │ │ └── grid-layout-extended.component.ts │ │ │ │ │ ├── grid-layout-multiple-containers │ │ │ │ │ │ ├── grid-layout-multiple-containers.component.html │ │ │ │ │ │ └── grid-layout-multiple-containers.component.ts │ │ │ │ │ └── grid-layout-single-container │ │ │ │ │ │ ├── grid-layout-single-container.component.html │ │ │ │ │ │ └── grid-layout-single-container.component.ts │ │ │ │ ├── guides.component.html │ │ │ │ ├── guides.component.scss │ │ │ │ ├── guides.component.ts │ │ │ │ ├── guides.routes.ts │ │ │ │ └── virtual-scroll │ │ │ │ │ └── virtual-scroll-list │ │ │ │ │ ├── virtual-scroll-list.component.html │ │ │ │ │ └── virtual-scroll-list.component.ts │ │ │ ├── home │ │ │ │ ├── home.component.html │ │ │ │ ├── home.component.scss │ │ │ │ └── home.component.ts │ │ │ ├── intro │ │ │ │ ├── intro.component.html │ │ │ │ ├── intro.component.scss │ │ │ │ └── intro.component.ts │ │ │ ├── iphone │ │ │ │ ├── iphone.component.html │ │ │ │ ├── iphone.component.scss │ │ │ │ └── iphone.component.ts │ │ │ ├── kirby-christmas │ │ │ │ ├── kirby-christmas.component.html │ │ │ │ ├── kirby-christmas.component.scss │ │ │ │ └── kirby-christmas.component.ts │ │ │ ├── localization │ │ │ │ ├── locale-provider │ │ │ │ │ ├── da-locale-provider.component.ts │ │ │ │ │ ├── de-locale-provider.component.ts │ │ │ │ │ └── en-locale-provider.component.ts │ │ │ │ ├── localization.component.html │ │ │ │ ├── localization.component.scss │ │ │ │ └── localization.component.ts │ │ │ ├── page │ │ │ │ ├── footer │ │ │ │ │ ├── footer.component.html │ │ │ │ │ ├── footer.component.scss │ │ │ │ │ └── footer.component.ts │ │ │ │ ├── header │ │ │ │ │ ├── header.component.html │ │ │ │ │ ├── header.component.scss │ │ │ │ │ └── header.component.ts │ │ │ │ └── side-nav │ │ │ │ │ ├── side-nav.component.html │ │ │ │ │ ├── side-nav.component.scss │ │ │ │ │ └── side-nav.component.ts │ │ │ ├── shared │ │ │ │ ├── _mini-toast.scss │ │ │ │ ├── api-description │ │ │ │ │ ├── api-description-events │ │ │ │ │ │ ├── api-description-events.component.html │ │ │ │ │ │ └── api-description-events.component.ts │ │ │ │ │ ├── api-description-methods │ │ │ │ │ │ ├── api-description-methods.component.html │ │ │ │ │ │ └── api-description-methods.component.ts │ │ │ │ │ ├── api-description-properties │ │ │ │ │ │ ├── api-description-properties.component.html │ │ │ │ │ │ └── api-description-properties.component.ts │ │ │ │ │ └── api-description.shared.scss │ │ │ │ ├── code-viewer │ │ │ │ │ ├── code-viewer.component.html │ │ │ │ │ ├── code-viewer.component.scss │ │ │ │ │ └── code-viewer.component.ts │ │ │ │ ├── color │ │ │ │ │ └── color.service.ts │ │ │ │ └── example-viewer │ │ │ │ │ ├── example-viewer.component.html │ │ │ │ │ ├── example-viewer.component.scss │ │ │ │ │ └── example-viewer.component.ts │ │ │ └── showcase │ │ │ │ ├── _showcase.shared.scss │ │ │ │ ├── accordion-showcase │ │ │ │ ├── accordion-showcase.component.html │ │ │ │ ├── accordion-showcase.component.scss │ │ │ │ └── accordion-showcase.component.ts │ │ │ │ ├── action-sheet-showcase │ │ │ │ ├── action-sheet-showcase.component.html │ │ │ │ └── action-sheet-showcase.component.ts │ │ │ │ ├── alert-showcase │ │ │ │ ├── alert-showcase.component.html │ │ │ │ └── alert-showcase.component.ts │ │ │ │ ├── avatar-showcase │ │ │ │ ├── avatar-showcase.component.html │ │ │ │ ├── avatar-showcase.component.scss │ │ │ │ └── avatar-showcase.component.ts │ │ │ │ ├── badge-showcase │ │ │ │ ├── badge-showcase.component.html │ │ │ │ └── badge-showcase.component.ts │ │ │ │ ├── button-showcase │ │ │ │ ├── button-showcase.component.html │ │ │ │ ├── button-showcase.component.scss │ │ │ │ └── button-showcase.component.ts │ │ │ │ ├── calendar-showcase │ │ │ │ ├── calendar-showcase.component.html │ │ │ │ ├── calendar-showcase.component.scss │ │ │ │ └── calendar-showcase.component.ts │ │ │ │ ├── card-showcase │ │ │ │ ├── card-showcase.component.html │ │ │ │ ├── card-showcase.component.scss │ │ │ │ └── card-showcase.component.ts │ │ │ │ ├── chart-config-showcase │ │ │ │ ├── bar │ │ │ │ │ ├── chart-config-bar-showcase.component.html │ │ │ │ │ └── chart-config-bar-showcase.component.ts │ │ │ │ └── stock │ │ │ │ │ ├── chart-config-stock-showcase.component.html │ │ │ │ │ └── chart-config-stock-showcase.component.ts │ │ │ │ ├── chart-showcase │ │ │ │ ├── base-chart-api.ts │ │ │ │ ├── chart-showcase.component.html │ │ │ │ └── chart-showcase.component.ts │ │ │ │ ├── checkbox-showcase │ │ │ │ ├── checkbox-showcase.component.html │ │ │ │ ├── checkbox-showcase.component.scss │ │ │ │ └── checkbox-showcase.component.ts │ │ │ │ ├── colors-showcase │ │ │ │ ├── colors-showcase.component.html │ │ │ │ ├── colors-showcase.component.scss │ │ │ │ └── colors-showcase.component.ts │ │ │ │ ├── data-table-showcase │ │ │ │ ├── data-table-api.ts │ │ │ │ ├── data-table-showcase.component.html │ │ │ │ ├── data-table-showcase.component.scss │ │ │ │ └── data-table-showcase.component.ts │ │ │ │ ├── divider-showcase │ │ │ │ ├── divider-showcase.component.html │ │ │ │ └── divider-showcase.component.ts │ │ │ │ ├── dropdown-showcase │ │ │ │ ├── dropdown-showcase.component.html │ │ │ │ ├── dropdown-showcase.component.scss │ │ │ │ └── dropdown-showcase.component.ts │ │ │ │ ├── empty-state-showcase │ │ │ │ ├── empty-state-showcase.component.html │ │ │ │ ├── empty-state-showcase.component.scss │ │ │ │ └── empty-state-showcase.component.ts │ │ │ │ ├── fab-sheet-showcase │ │ │ │ ├── fab-sheet-showcase.component.html │ │ │ │ ├── fab-sheet-showcase.component.scss │ │ │ │ └── fab-sheet-showcase.component.ts │ │ │ │ ├── flag-showcase │ │ │ │ ├── flag-showcase.component.html │ │ │ │ ├── flag-showcase.component.scss │ │ │ │ └── flag-showcase.component.ts │ │ │ │ ├── fonts-showcase │ │ │ │ ├── fonts-showcase.component.html │ │ │ │ ├── fonts-showcase.component.scss │ │ │ │ └── fonts-showcase.component.ts │ │ │ │ ├── form-field-showcase │ │ │ │ ├── form-field-showcase.component.html │ │ │ │ ├── form-field-showcase.component.scss │ │ │ │ └── form-field-showcase.component.ts │ │ │ │ ├── grid-showcase │ │ │ │ ├── grid-showcase.component.html │ │ │ │ └── grid-showcase.component.ts │ │ │ │ ├── header-showcase │ │ │ │ ├── header-showcase.component.html │ │ │ │ ├── header-showcase.component.scss │ │ │ │ └── header-showcase.component.ts │ │ │ │ ├── icon-showcase │ │ │ │ ├── icon-showcase.component.html │ │ │ │ ├── icon-showcase.component.scss │ │ │ │ └── icon-showcase.component.ts │ │ │ │ ├── item-group-showcase │ │ │ │ ├── item-group-showcase.component.html │ │ │ │ └── item-group-showcase.component.ts │ │ │ │ ├── item-showcase │ │ │ │ ├── item-showcase.component.html │ │ │ │ ├── item-showcase.component.scss │ │ │ │ └── item-showcase.component.ts │ │ │ │ ├── item-sliding-showcase │ │ │ │ ├── item-sliding-showcase.component.html │ │ │ │ └── item-sliding-showcase.component.ts │ │ │ │ ├── link-showcase │ │ │ │ ├── link-showcase.component.html │ │ │ │ └── link-showcase.component.ts │ │ │ │ ├── list-experimental-showcase │ │ │ │ ├── list-experimental-showcase.component.html │ │ │ │ ├── list-experimental-showcase.component.scss │ │ │ │ └── list-experimental-showcase.component.ts │ │ │ │ ├── list-load-on-demand-showcase │ │ │ │ ├── list-load-on-demand-showcase.component.html │ │ │ │ ├── list-load-on-demand-showcase.component.scss │ │ │ │ └── list-load-on-demand-showcase.component.ts │ │ │ │ ├── list-no-shape-showcase │ │ │ │ ├── list-no-shape-showcase.component.html │ │ │ │ ├── list-no-shape-showcase.component.scss │ │ │ │ └── list-no-shape-showcase.component.ts │ │ │ │ ├── list-showcase │ │ │ │ ├── list-showcase.component.html │ │ │ │ ├── list-showcase.component.scss │ │ │ │ └── list-showcase.component.ts │ │ │ │ ├── list-swipe-showcase │ │ │ │ ├── list-swipe-showcase.component.html │ │ │ │ └── list-swipe-showcase.component.ts │ │ │ │ ├── loading-overlay-showcase │ │ │ │ ├── loading-overlay-showcase.component.html │ │ │ │ ├── loading-overlay-showcase.component.scss │ │ │ │ └── loading-overlay-showcase.component.ts │ │ │ │ ├── menu-showcase │ │ │ │ ├── menu-showcase.component.html │ │ │ │ ├── menu-showcase.component.scss │ │ │ │ └── menu-showcase.component.ts │ │ │ │ ├── modal-showcase │ │ │ │ ├── modal-showcase.component.html │ │ │ │ ├── modal-showcase.component.scss │ │ │ │ └── modal-showcase.component.ts │ │ │ │ ├── page-showcase │ │ │ │ ├── page-showcase.component.html │ │ │ │ ├── page-showcase.component.scss │ │ │ │ └── page-showcase.component.ts │ │ │ │ ├── page-tab-navigation-showcase │ │ │ │ ├── tab-navigation-showcase.component.html │ │ │ │ ├── tab-navigation-showcase.component.scss │ │ │ │ └── tab-navigation-showcase.component.ts │ │ │ │ ├── progress-circle-showcase │ │ │ │ ├── progress-circle-showcase.component.html │ │ │ │ ├── progress-circle-showcase.component.scss │ │ │ │ └── progress-circle-showcase.component.ts │ │ │ │ ├── radio-showcase │ │ │ │ ├── radio-showcase.component.html │ │ │ │ ├── radio-showcase.component.scss │ │ │ │ └── radio-showcase.component.ts │ │ │ │ ├── range-showcase │ │ │ │ ├── range-showcase.component.html │ │ │ │ ├── range-showcase.component.scss │ │ │ │ └── range-showcase.component.ts │ │ │ │ ├── reorder-list-showcase │ │ │ │ ├── reorder-list-showcase.component.html │ │ │ │ ├── reorder-list-showcase.component.scss │ │ │ │ └── reorder-list-showcase.component.ts │ │ │ │ ├── section-header-showcase │ │ │ │ ├── section-header-showcase.component.html │ │ │ │ ├── section-header-showcase.component.scss │ │ │ │ └── section-header-showcase.component.ts │ │ │ │ ├── segmented-control-showcase │ │ │ │ ├── segmented-control-showcase.component.html │ │ │ │ ├── segmented-control-showcase.component.scss │ │ │ │ └── segmented-control-showcase.component.ts │ │ │ │ ├── showcase.component.html │ │ │ │ ├── showcase.component.scss │ │ │ │ ├── showcase.component.ts │ │ │ │ ├── showcase.routes.ts │ │ │ │ ├── slide-button-showcase │ │ │ │ ├── slide-button-showcase.component.html │ │ │ │ └── slide-button-showcase.component.ts │ │ │ │ ├── slides-showcase │ │ │ │ ├── slides-showcase.component.html │ │ │ │ └── slides-showcase.component.ts │ │ │ │ ├── spinner-showcase │ │ │ │ ├── spinner-showcase.component.html │ │ │ │ └── spinner-showcase.component.ts │ │ │ │ ├── stock-chart-showcase │ │ │ │ ├── stock-chart-showcase.component.html │ │ │ │ └── stock-chart-showcase.component.ts │ │ │ │ ├── styling-html-lists │ │ │ │ ├── styling-html-lists-showcase.html │ │ │ │ └── styling-html-lists-showcase.ts │ │ │ │ ├── tabs-showcase │ │ │ │ ├── tabs-showcase.component.html │ │ │ │ ├── tabs-showcase.component.scss │ │ │ │ └── tabs-showcase.component.ts │ │ │ │ ├── toast-showcase │ │ │ │ ├── toast-showcase.component.html │ │ │ │ ├── toast-showcase.component.scss │ │ │ │ └── toast-showcase.component.ts │ │ │ │ ├── toggle-button-showcase │ │ │ │ ├── toggle-button-showcase.component.html │ │ │ │ ├── toggle-button-showcase.component.scss │ │ │ │ └── toggle-button-showcase.component.ts │ │ │ │ ├── toggle-showcase │ │ │ │ ├── toggle-showcase.component.html │ │ │ │ ├── toggle-showcase.component.scss │ │ │ │ └── toggle-showcase.component.ts │ │ │ │ └── toolbar-showcase │ │ │ │ ├── toolbar-showcase.component.html │ │ │ │ └── toolbar-showcase.component.ts │ │ ├── assets │ │ │ ├── .gitkeep │ │ │ ├── component-svg │ │ │ │ ├── Accordion-Kirby-Component-Overview.svg │ │ │ │ ├── Action-Sheet-Kirby-Component-Overview.svg │ │ │ │ ├── Alert-Kirby-Component-Overview.svg │ │ │ │ ├── Avatar-Kirby-Component-Overview.svg │ │ │ │ ├── Badge-Kirby-Component-Overview.svg │ │ │ │ ├── Button-Kirby-Component-Overview.svg │ │ │ │ ├── Calendar-Kirby-Component-Overview.svg │ │ │ │ ├── Card-Kirby-Component-Overview.svg │ │ │ │ ├── Chart-Kirby-Component-Overview.svg │ │ │ │ ├── Chart-Stock-Kirby-Component-Overview.svg │ │ │ │ ├── Checkbox-Kirby-Component-Overview.svg │ │ │ │ ├── Colors-Kirby-Component-Overview.svg │ │ │ │ ├── Data-Table-Kirby-Component-Overview.svg │ │ │ │ ├── Divider-Kirby-Component-Overview.svg │ │ │ │ ├── Dropdown-Kirby-Component-Overview.svg │ │ │ │ ├── Empty-State-Kirby-Component-Overview.svg │ │ │ │ ├── FAB-Kirby-Component-Overview.svg │ │ │ │ ├── Flag-Kirby-Component-Overview.svg │ │ │ │ ├── Fonts-Kirby-Component-Overview.svg │ │ │ │ ├── Form-Field-Kirby-Component-Overview.svg │ │ │ │ ├── Header-Kirby-Component-Overview.svg │ │ │ │ ├── Icons-Kirby-Component-Overview.svg │ │ │ │ ├── Item-Kirby-Component-Overview.svg │ │ │ │ ├── Menu-Kirby-Component-Overview.svg │ │ │ │ ├── Page-Kirby-Component-Overview.svg │ │ │ │ ├── Progress-Circle-Kirby-Component-Overview.svg │ │ │ │ ├── Radio-Buttons-Kirby-Component-Overview.svg │ │ │ │ ├── Range-Slider-Kirby-Component-Overview.svg │ │ │ │ ├── Segmented-Control-Kirby-Component-Overview.svg │ │ │ │ ├── Slide-Button-Kirby-Component-Overview.svg │ │ │ │ ├── Slides-Kirby-Component-Overview.svg │ │ │ │ ├── Spinner-Kirby-Component-Overview.svg │ │ │ │ ├── Toast-Kirby-Component-Overview.svg │ │ │ │ └── Toggle-Kirby-Component-Overview.svg │ │ │ ├── icons │ │ │ │ ├── arrow-back.svg │ │ │ │ ├── football.svg │ │ │ │ ├── icon-sprite.svg │ │ │ │ └── umbrella.svg │ │ │ ├── images │ │ │ │ ├── arrow-back.png │ │ │ │ ├── avatar-not-found.png │ │ │ │ ├── de.svg │ │ │ │ ├── dk.svg │ │ │ │ ├── gb.svg │ │ │ │ ├── kirby-components-w1020.png │ │ │ │ ├── kirby-components-w375.png │ │ │ │ ├── kirby-components-w700.png │ │ │ │ ├── kirby-components-w800.png │ │ │ │ └── woman.png │ │ │ └── kirby │ │ │ │ └── backgrounds │ │ │ │ └── kirby-card.png │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── fonts │ │ │ └── ionicons.ttf │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.scss │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ └── tsconfig.spec.json └── flows │ ├── android │ ├── .gitignore │ ├── app │ │ ├── .gitignore │ │ ├── build.gradle │ │ ├── capacitor.build.gradle │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── androidTest │ │ │ └── java │ │ │ │ └── com │ │ │ │ └── getcapacitor │ │ │ │ └── myapp │ │ │ │ └── ExampleInstrumentedTest.java │ │ │ ├── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ │ └── io │ │ │ │ │ └── ionic │ │ │ │ │ └── starter │ │ │ │ │ └── MainActivity.java │ │ │ └── res │ │ │ │ ├── drawable-land-hdpi │ │ │ │ └── splash.png │ │ │ │ ├── drawable-land-mdpi │ │ │ │ └── splash.png │ │ │ │ ├── drawable-land-xhdpi │ │ │ │ └── splash.png │ │ │ │ ├── drawable-land-xxhdpi │ │ │ │ └── splash.png │ │ │ │ ├── drawable-land-xxxhdpi │ │ │ │ └── splash.png │ │ │ │ ├── drawable-port-hdpi │ │ │ │ └── splash.png │ │ │ │ ├── drawable-port-mdpi │ │ │ │ └── splash.png │ │ │ │ ├── drawable-port-xhdpi │ │ │ │ └── splash.png │ │ │ │ ├── drawable-port-xxhdpi │ │ │ │ └── splash.png │ │ │ │ ├── drawable-port-xxxhdpi │ │ │ │ └── splash.png │ │ │ │ ├── drawable-v24 │ │ │ │ └── ic_launcher_foreground.xml │ │ │ │ ├── drawable │ │ │ │ ├── ic_launcher_background.xml │ │ │ │ └── splash.png │ │ │ │ ├── layout │ │ │ │ └── activity_main.xml │ │ │ │ ├── mipmap-anydpi-v26 │ │ │ │ ├── ic_launcher.xml │ │ │ │ └── ic_launcher_round.xml │ │ │ │ ├── mipmap-hdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ ├── ic_launcher_foreground.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ ├── ic_launcher_foreground.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ ├── ic_launcher_foreground.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ ├── ic_launcher_foreground.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ ├── ic_launcher_foreground.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── values │ │ │ │ ├── ic_launcher_background.xml │ │ │ │ ├── strings.xml │ │ │ │ └── styles.xml │ │ │ │ └── xml │ │ │ │ └── file_paths.xml │ │ │ └── test │ │ │ └── java │ │ │ └── com │ │ │ └── getcapacitor │ │ │ └── myapp │ │ │ └── ExampleUnitTest.java │ ├── build.gradle │ ├── capacitor.settings.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ ├── settings.gradle │ └── variables.gradle │ ├── ios │ ├── .gitignore │ └── App │ │ ├── App.xcodeproj │ │ ├── project.pbxproj │ │ └── project.xcworkspace │ │ │ └── contents.xcworkspacedata │ │ ├── App.xcworkspace │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata │ │ │ └── IDEWorkspaceChecks.plist │ │ ├── App │ │ ├── AppDelegate.swift │ │ ├── Assets.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ ├── AppIcon-20x20@1x.png │ │ │ │ ├── AppIcon-20x20@2x-1.png │ │ │ │ ├── AppIcon-20x20@2x.png │ │ │ │ ├── AppIcon-20x20@3x.png │ │ │ │ ├── AppIcon-29x29@1x.png │ │ │ │ ├── AppIcon-29x29@2x-1.png │ │ │ │ ├── AppIcon-29x29@2x.png │ │ │ │ ├── AppIcon-29x29@3x.png │ │ │ │ ├── AppIcon-40x40@1x.png │ │ │ │ ├── AppIcon-40x40@2x-1.png │ │ │ │ ├── AppIcon-40x40@2x.png │ │ │ │ ├── AppIcon-40x40@3x.png │ │ │ │ ├── AppIcon-512@2x.png │ │ │ │ ├── AppIcon-60x60@2x.png │ │ │ │ ├── AppIcon-60x60@3x.png │ │ │ │ ├── AppIcon-76x76@1x.png │ │ │ │ ├── AppIcon-76x76@2x.png │ │ │ │ ├── AppIcon-83.5x83.5@2x.png │ │ │ │ └── Contents.json │ │ │ ├── Contents.json │ │ │ └── Splash.imageset │ │ │ │ ├── Contents.json │ │ │ │ ├── splash-2732x2732-1.png │ │ │ │ ├── splash-2732x2732-2.png │ │ │ │ └── splash-2732x2732.png │ │ ├── Base.lproj │ │ │ ├── LaunchScreen.storyboard │ │ │ └── Main.storyboard │ │ └── Info.plist │ │ └── Podfile │ ├── package.json │ ├── project.json │ ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── home │ │ │ ├── home.component.html │ │ │ ├── home.component.scss │ │ │ └── home.component.ts │ │ ├── long-list-flow │ │ │ ├── list-item │ │ │ │ ├── list-item.component.html │ │ │ │ └── list-item.component.ts │ │ │ ├── long-list-flow.component.html │ │ │ ├── long-list-flow.component.ts │ │ │ └── long-list │ │ │ │ ├── long-list.component.html │ │ │ │ ├── long-list.component.scss │ │ │ │ └── long-list.component.ts │ │ ├── transaction-details-flow │ │ │ ├── account │ │ │ │ ├── account.component.html │ │ │ │ └── account.component.ts │ │ │ ├── for-you │ │ │ │ ├── for-you.component.html │ │ │ │ ├── for-you.component.scss │ │ │ │ └── for-you.component.ts │ │ │ ├── transaction-details-flow.component.html │ │ │ ├── transaction-details-flow.component.ts │ │ │ ├── transaction-details │ │ │ │ ├── transaction-details.component.html │ │ │ │ ├── transaction-details.component.scss │ │ │ │ └── transaction-details.component.ts │ │ │ └── transactions │ │ │ │ ├── transactions.component.html │ │ │ │ ├── transactions.component.scss │ │ │ │ └── transactions.component.ts │ │ ├── transaction.ts │ │ ├── transactions-data.json │ │ └── transfer-and-pay-flow │ │ │ ├── account.model.ts │ │ │ ├── choose-date │ │ │ ├── choose-date.component.html │ │ │ ├── choose-date.component.scss │ │ │ └── choose-date.component.ts │ │ │ ├── choose-own-account │ │ │ ├── choose-own-account.component.html │ │ │ └── choose-own-account.component.ts │ │ │ ├── choose-receiver │ │ │ ├── choose-receiver.component.html │ │ │ ├── choose-receiver.component.scss │ │ │ └── choose-receiver.component.ts │ │ │ ├── choose-text-and-message │ │ │ ├── choose-text-and-message.component.html │ │ │ ├── choose-text-and-message.component.scss │ │ │ └── choose-text-and-message.component.ts │ │ │ ├── detail.model.ts │ │ │ ├── details │ │ │ ├── details.component.html │ │ │ ├── details.component.scss │ │ │ └── details.component.ts │ │ │ ├── home-page │ │ │ ├── home-page.component.html │ │ │ ├── home-page.component.scss │ │ │ └── home-page.component.ts │ │ │ ├── other-page │ │ │ ├── other-page.component.html │ │ │ ├── other-page.component.scss │ │ │ └── other-page.component.ts │ │ │ ├── other.model.ts │ │ │ ├── other.service.ts │ │ │ ├── own-account-page │ │ │ ├── own-account-page.component.html │ │ │ └── own-account-page.component.ts │ │ │ ├── own-account.model.ts │ │ │ ├── own-account.service.ts │ │ │ ├── text-and-date.service.ts │ │ │ ├── transfer-and-pay-flow.component.html │ │ │ ├── transfer-and-pay-flow.component.ts │ │ │ ├── transfer-and-pay-modal │ │ │ ├── transfer-and-pay-modal.component.html │ │ │ ├── transfer-and-pay-modal.component.scss │ │ │ └── transfer-and-pay-modal.component.ts │ │ │ ├── transfer-registered │ │ │ ├── transfer-registered.component.html │ │ │ ├── transfer-registered.component.scss │ │ │ └── transfer-registered.component.ts │ │ │ ├── transfer.model.ts │ │ │ └── verify.service.ts │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.svg │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ └── styles.scss │ ├── tsconfig.app.json │ ├── tsconfig.editor.json │ ├── tsconfig.json │ └── tsconfig.spec.json ├── capacitor.config.json ├── custom-elements-manifest.config.mjs ├── eslint.config.mjs ├── jest.config.ts ├── karma.conf.js ├── libs ├── .gitkeep ├── angular │ ├── .lintstagedrc │ ├── README.md │ ├── badge │ │ ├── ng-package.json │ │ └── src │ │ │ ├── badge.component.spec.ts.todo │ │ │ ├── badge.component.ts │ │ │ └── public_api.ts │ ├── eslint.config.mjs │ ├── index.ts │ ├── ng-package.json │ ├── package.json │ ├── project.json │ ├── spinner │ │ ├── ng-package.json │ │ └── src │ │ │ ├── public_api.ts │ │ │ └── spinner.component.ts │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── tsconfig.lib.prod.json ├── core │ ├── index.ts │ ├── package.json │ ├── project.json │ ├── src │ │ ├── badge │ │ │ ├── badge.element.styles.ts │ │ │ ├── badge.element.ts │ │ │ └── index.ts │ │ ├── helpers │ │ │ ├── _sass-to-ts.scss │ │ │ ├── color-helper.scss │ │ │ ├── color-helper.ts │ │ │ ├── css-classes-helper.ts │ │ │ ├── design-token-helper.scss │ │ │ ├── design-token-helper.ts │ │ │ ├── index.ts │ │ │ ├── string-helper.ts │ │ │ └── theme-color.type.ts │ │ ├── index.ts │ │ ├── internal │ │ │ └── kirby-element.ts │ │ ├── scss │ │ │ ├── _global-styles.scss │ │ │ ├── _utils.scss │ │ │ ├── base │ │ │ │ ├── _design-tokens.scss │ │ │ │ ├── _functions.scss │ │ │ │ ├── _html-list.scss │ │ │ │ ├── _html-table.scss │ │ │ │ ├── _include-media.scss │ │ │ │ ├── _ionic.scss │ │ │ │ ├── _item-typography.scss │ │ │ │ ├── _line-clamp.scss │ │ │ │ ├── _link.scss │ │ │ │ ├── _list.scss │ │ │ │ ├── _typography.scss │ │ │ │ └── _variables.scss │ │ │ ├── components │ │ │ │ └── _grid.scss │ │ │ ├── interaction-state │ │ │ │ ├── README.md │ │ │ │ ├── _active.scss │ │ │ │ ├── _focus.scss │ │ │ │ ├── _hover.scss │ │ │ │ ├── _index.scss │ │ │ │ ├── _interaction-state.utilities.scss │ │ │ │ └── _layer.scss │ │ │ ├── opt-out │ │ │ │ ├── _index.scss │ │ │ │ └── _link.scss │ │ │ ├── print │ │ │ │ ├── _index.scss │ │ │ │ ├── components │ │ │ │ │ ├── _index.scss │ │ │ │ │ ├── _kirby-app.scss │ │ │ │ │ ├── _kirby-fab-sheet.scss │ │ │ │ │ ├── _kirby-list.scss │ │ │ │ │ ├── _kirby-modal-wrapper.scss │ │ │ │ │ ├── _kirby-page.scss │ │ │ │ │ ├── _kirby-router-outlet.scss │ │ │ │ │ └── _kirby-tab-bar.scss │ │ │ │ ├── elements │ │ │ │ │ ├── _button.scss │ │ │ │ │ ├── _index.scss │ │ │ │ │ ├── _page.scss │ │ │ │ │ └── _preformatted-text.scss │ │ │ │ └── generic │ │ │ │ │ ├── _colors.scss │ │ │ │ │ ├── _index.scss │ │ │ │ │ ├── _page.scss │ │ │ │ │ ├── _reset.scss │ │ │ │ │ └── _typography.scss │ │ │ └── themes │ │ │ │ ├── _colors.scss │ │ │ │ ├── _component-themes.scss │ │ │ │ ├── _index.scss │ │ │ │ ├── _item-sliding.scss │ │ │ │ └── design-tokens.scss │ │ ├── spinner │ │ │ ├── index.ts │ │ │ ├── spinner.element.styles.ts │ │ │ └── spinner.element.ts │ │ └── styles │ │ │ └── element.base.styles.ts │ └── tsconfig.json ├── designsystem │ ├── .lintstagedrc │ ├── .storybook │ │ ├── main.ts │ │ ├── preview-head.html │ │ ├── preview.ts │ │ ├── styles.css │ │ └── tsconfig.json │ ├── README.md │ ├── accordion │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── accordion-item.component.html │ │ │ ├── accordion-item.component.scss │ │ │ ├── accordion-item.component.spec.ts │ │ │ ├── accordion-item.component.stories.ts │ │ │ ├── accordion-item.component.ts │ │ │ ├── accordion.directive.ts │ │ │ ├── accordion.module.ts │ │ │ ├── index.ts │ │ │ └── public_api.ts │ ├── action-group │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── action-group.component.html │ │ │ ├── action-group.component.scss │ │ │ ├── action-group.component.spec.ts │ │ │ ├── action-group.component.stories.ts │ │ │ ├── action-group.component.ts │ │ │ ├── index.ts │ │ │ └── public_api.ts │ ├── avatar │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── avatar.component.html │ │ │ ├── avatar.component.scss │ │ │ ├── avatar.component.spec.ts │ │ │ ├── avatar.component.stories.ts │ │ │ ├── avatar.component.ts │ │ │ ├── index.ts │ │ │ └── public_api.ts │ ├── badge │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── badge.component.html │ │ │ ├── badge.component.scss │ │ │ ├── badge.component.spec.ts │ │ │ ├── badge.component.stories.ts │ │ │ ├── badge.component.ts │ │ │ ├── index.ts │ │ │ └── public_api.ts │ ├── button │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── button.component.html │ │ │ ├── button.component.integration.spec.ts │ │ │ ├── button.component.scss │ │ │ ├── button.component.spec.ts │ │ │ ├── button.component.stories.ts │ │ │ ├── button.component.ts │ │ │ ├── index.ts │ │ │ └── public_api.ts │ ├── calendar │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── calendar.component.html │ │ │ ├── calendar.component.initialization.spec.ts │ │ │ ├── calendar.component.scss │ │ │ ├── calendar.component.spec.ts │ │ │ ├── calendar.component.stories.ts │ │ │ ├── calendar.component.ts │ │ │ ├── index.ts │ │ │ ├── interfaces │ │ │ ├── calendar-day.ts │ │ │ ├── calendar-options.ts │ │ │ └── calendar-year-navigator-config.ts │ │ │ └── public_api.ts │ ├── card │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── card-as-button │ │ │ ├── card-as-button.directive.spec.ts │ │ │ └── card-as-button.directive.ts │ │ │ ├── card-flag-level.ts │ │ │ ├── card-footer │ │ │ ├── card-footer.component.html │ │ │ ├── card-footer.component.scss │ │ │ ├── card-footer.component.stories.ts │ │ │ └── card-footer.component.ts │ │ │ ├── card-header │ │ │ ├── card-header.component.html │ │ │ ├── card-header.component.scss │ │ │ ├── card-header.component.stories.ts │ │ │ └── card-header.component.ts │ │ │ ├── card.component.html │ │ │ ├── card.component.scss │ │ │ ├── card.component.spec.ts │ │ │ ├── card.component.stories.ts │ │ │ ├── card.component.ts │ │ │ ├── card.module.ts │ │ │ ├── index.ts │ │ │ └── public_api.ts │ ├── chart │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── chart-config │ │ │ ├── chart-bar-config │ │ │ │ └── chart-bar-config.ts │ │ │ ├── chart-base-config.ts │ │ │ ├── chart-stock-config │ │ │ │ ├── chart-stock-config.spec.ts │ │ │ │ ├── chart-stock-config.ts │ │ │ │ ├── data-label-position │ │ │ │ │ └── data-label-position.ts │ │ │ │ └── vertical-line-plugin │ │ │ │ │ ├── vertical-line-plugin.model.ts │ │ │ │ │ └── vertical-line-plugin.ts │ │ │ └── index.ts │ │ │ ├── chart-options │ │ │ ├── chart-base-options.ts │ │ │ └── chart-stock-options.ts │ │ │ ├── chart │ │ │ ├── chart.component.spec.ts │ │ │ ├── chart.component.stories.ts │ │ │ ├── chart.component.ts │ │ │ └── index.ts │ │ │ ├── charts.module.ts │ │ │ ├── public_api.ts │ │ │ ├── shared │ │ │ ├── base-chart │ │ │ │ ├── base-chart.component.html │ │ │ │ ├── base-chart.component.scss │ │ │ │ ├── base-chart.component.ts │ │ │ │ └── index.ts │ │ │ ├── chart-config-service │ │ │ │ ├── chart-config.service.spec.ts │ │ │ │ ├── chart-config.service.ts │ │ │ │ ├── configs │ │ │ │ │ ├── annotations.config.ts │ │ │ │ │ ├── global-defaults.config.ts │ │ │ │ │ ├── interaction-functions-extensions.config.ts │ │ │ │ │ └── type.config.ts │ │ │ │ └── index.ts │ │ │ ├── chart-js-service │ │ │ │ ├── annotations.delegate.ts │ │ │ │ ├── chart-js.service.integration.spec.ts │ │ │ │ ├── chart-js.service.spec.ts │ │ │ │ ├── chart-js.service.ts │ │ │ │ ├── chartjs-plugin-marker │ │ │ │ │ └── chartjs-plugin-marker.ts │ │ │ │ ├── configured-chart-js.ts │ │ │ │ ├── index.ts │ │ │ │ └── test-utils.ts │ │ │ ├── charts.types.ts │ │ │ └── index.ts │ │ │ └── stock-chart │ │ │ ├── index.ts │ │ │ ├── stock-chart-js.service.integration.spec.ts │ │ │ ├── stock-chart-js.service.spec.ts │ │ │ ├── stock-chart-js.service.ts │ │ │ ├── stock-chart.component.stories.ts │ │ │ └── stock-chart.component.ts │ ├── checkbox │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── checkbox.component.html │ │ │ ├── checkbox.component.integration.spec.ts │ │ │ ├── checkbox.component.scss │ │ │ ├── checkbox.component.spec.ts │ │ │ ├── checkbox.component.stories.ts │ │ │ ├── checkbox.component.ts │ │ │ ├── index.ts │ │ │ └── public_api.ts │ ├── config │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── index.ts │ │ │ ├── provide-kirby.ts │ │ │ └── public_api.ts │ ├── data-table │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── data-table.module.ts │ │ │ ├── data-table.stories.ts │ │ │ ├── index.ts │ │ │ ├── public_api.ts │ │ │ └── sortable │ │ │ ├── sortable.component.html │ │ │ ├── sortable.component.spec.ts │ │ │ └── sortable.component.ts │ ├── divider │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── divider.component.html │ │ │ ├── divider.component.scss │ │ │ ├── divider.component.spec.ts │ │ │ ├── divider.component.stories.ts │ │ │ ├── divider.component.ts │ │ │ ├── index.ts │ │ │ └── public_api.ts │ ├── dropdown │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── dropdown-popover.component.integration.spec.ts │ │ │ ├── dropdown-popover.component.spec.ts │ │ │ ├── dropdown.component.html │ │ │ ├── dropdown.component.scss │ │ │ ├── dropdown.component.spec.ts │ │ │ ├── dropdown.component.stories.ts │ │ │ ├── dropdown.component.ts │ │ │ ├── dropdown.module.ts │ │ │ ├── dropdown.types.ts │ │ │ ├── index.ts │ │ │ ├── keyboard-handler.service.ts │ │ │ └── public_api.ts │ ├── empty-state │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── empty-state.component.html │ │ │ ├── empty-state.component.integration.spec.ts │ │ │ ├── empty-state.component.scss │ │ │ ├── empty-state.component.spec.ts │ │ │ ├── empty-state.component.stories.ts │ │ │ ├── empty-state.component.ts │ │ │ ├── empty-state.module.ts │ │ │ ├── index.ts │ │ │ └── public_api.ts │ ├── eslint.config.mjs │ ├── fab-sheet │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── fab-sheet.component.html │ │ │ ├── fab-sheet.component.scss │ │ │ ├── fab-sheet.component.spec.ts │ │ │ ├── fab-sheet.component.stories.ts │ │ │ ├── fab-sheet.component.ts │ │ │ ├── index.ts │ │ │ └── public_api.ts │ ├── flag │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── flag.component.scss │ │ │ ├── flag.component.spec.ts │ │ │ ├── flag.component.stories.ts │ │ │ ├── flag.component.ts │ │ │ ├── index.ts │ │ │ └── public_api.ts │ ├── form-field │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── _form-field-inputs.shared.scss │ │ │ ├── directives │ │ │ ├── affix │ │ │ │ └── affix.directive.ts │ │ │ ├── date │ │ │ │ ├── date-input.directive.spec.ts │ │ │ │ └── date-input.directive.ts │ │ │ └── decimal-mask │ │ │ │ ├── decimal-mask.directive.spec.ts │ │ │ │ └── decimal-mask.directive.ts │ │ │ ├── form-field-message │ │ │ ├── form-field-message.component.html │ │ │ ├── form-field-message.component.scss │ │ │ └── form-field-message.component.ts │ │ │ ├── form-field.component.html │ │ │ ├── form-field.component.scss │ │ │ ├── form-field.component.spec.ts │ │ │ ├── form-field.component.stories.ts │ │ │ ├── form-field.component.ts │ │ │ ├── form-field.module.ts │ │ │ ├── index.ts │ │ │ ├── input-counter │ │ │ ├── input-counter.component.html │ │ │ ├── input-counter.component.spec.ts │ │ │ └── input-counter.component.ts │ │ │ ├── input │ │ │ ├── input.component.integration.spec.ts │ │ │ ├── input.component.scss │ │ │ ├── input.component.spec.ts │ │ │ ├── input.component.stories.ts │ │ │ └── input.component.ts │ │ │ ├── public_api.ts │ │ │ └── textarea │ │ │ ├── textarea.component.html │ │ │ ├── textarea.component.scss │ │ │ ├── textarea.component.spec.ts │ │ │ ├── textarea.component.stories.ts │ │ │ └── textarea.component.ts │ ├── header │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── header.component.html │ │ │ ├── header.component.scss │ │ │ ├── header.component.spec.ts │ │ │ ├── header.component.stories.ts │ │ │ ├── header.component.ts │ │ │ ├── header.module.ts │ │ │ ├── index.ts │ │ │ └── public_api.ts │ ├── helpers │ │ ├── index.ts │ │ ├── ng-package.json │ │ ├── scss │ │ │ ├── index.ts │ │ │ ├── ng-package.json │ │ │ └── src │ │ │ │ ├── index.ts │ │ │ │ ├── link.spec.ts │ │ │ │ ├── public_api.ts │ │ │ │ ├── scss-helper.ts │ │ │ │ └── typography.spec.ts │ │ └── src │ │ │ ├── chart-config-has-type.ts │ │ │ ├── color-helper.ts │ │ │ ├── content-mutation-observer.spec.ts │ │ │ ├── content-mutation-observer.ts │ │ │ ├── deep-copy.ts │ │ │ ├── design-token-helper.ts │ │ │ ├── element-ancestor-utils.ts │ │ │ ├── index.ts │ │ │ ├── ionic-element-part-helper.ts │ │ │ ├── kirby-animation.ts │ │ │ ├── line-clamp-helper.ts │ │ │ ├── merge-deep.spec.ts │ │ │ ├── merge-deep.ts │ │ │ ├── platform.service.ts │ │ │ ├── public_api.ts │ │ │ ├── string-helper.spec.ts │ │ │ ├── string-helper.ts │ │ │ ├── theme-color.type.ts │ │ │ ├── unique-id-generator.helper.spec.ts │ │ │ └── unique-id-generator.helper.ts │ ├── icon │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── icon-registry.service.spec.ts │ │ │ ├── icon-registry.service.ts │ │ │ ├── icon-settings.ts │ │ │ ├── icon.component.html │ │ │ ├── icon.component.integration.spec.ts │ │ │ ├── icon.component.scss │ │ │ ├── icon.component.spec.ts │ │ │ ├── icon.component.stories.ts │ │ │ ├── icon.component.ts │ │ │ ├── icon.module.ts │ │ │ ├── icons │ │ │ └── svg │ │ │ │ ├── QR.svg │ │ │ │ ├── accident.svg │ │ │ │ ├── accounts-outline.svg │ │ │ │ ├── accounts.svg │ │ │ │ ├── add-bank.svg │ │ │ │ ├── add.svg │ │ │ │ ├── adjust.svg │ │ │ │ ├── agreement.svg │ │ │ │ ├── air-balloon.svg │ │ │ │ ├── arrow-back.svg │ │ │ │ ├── arrow-down-fill.svg │ │ │ │ ├── arrow-down.svg │ │ │ │ ├── arrow-more.svg │ │ │ │ ├── arrow-up-fill.svg │ │ │ │ ├── arrow-up.svg │ │ │ │ ├── attach.svg │ │ │ │ ├── backspace.svg │ │ │ │ ├── banknotes.svg │ │ │ │ ├── basket.svg │ │ │ │ ├── bs-logo.svg │ │ │ │ ├── budget.svg │ │ │ │ ├── business.svg │ │ │ │ ├── calculator.svg │ │ │ │ ├── calendar-end.svg │ │ │ │ ├── calendar-start.svg │ │ │ │ ├── calendar.svg │ │ │ │ ├── camera.svg │ │ │ │ ├── car.svg │ │ │ │ ├── chat.svg │ │ │ │ ├── checkbox-outline.svg │ │ │ │ ├── checkbox.svg │ │ │ │ ├── checkmark-selected.svg │ │ │ │ ├── clock.svg │ │ │ │ ├── close.svg │ │ │ │ ├── cog.svg │ │ │ │ ├── coinstack.svg │ │ │ │ ├── common.svg │ │ │ │ ├── company.svg │ │ │ │ ├── contact.svg │ │ │ │ ├── contract.svg │ │ │ │ ├── copy.svg │ │ │ │ ├── crossedeye.svg │ │ │ │ ├── document.svg │ │ │ │ ├── dot.svg │ │ │ │ ├── download.svg │ │ │ │ ├── drag-drop.svg │ │ │ │ ├── edit.svg │ │ │ │ ├── expand.svg │ │ │ │ ├── expense.svg │ │ │ │ ├── feedback.svg │ │ │ │ ├── fees.svg │ │ │ │ ├── filter.svg │ │ │ │ ├── flag.svg │ │ │ │ ├── flash-off.svg │ │ │ │ ├── flash.svg │ │ │ │ ├── flower.svg │ │ │ │ ├── foreign-payment.svg │ │ │ │ ├── globe-transfer.svg │ │ │ │ ├── grid.svg │ │ │ │ ├── health.svg │ │ │ │ ├── help-decoration.svg │ │ │ │ ├── help.svg │ │ │ │ ├── history.svg │ │ │ │ ├── home.svg │ │ │ │ ├── house.svg │ │ │ │ ├── illness.svg │ │ │ │ ├── inbox-outline.svg │ │ │ │ ├── inbox.svg │ │ │ │ ├── incapacity.svg │ │ │ │ ├── income.svg │ │ │ │ ├── information-decoration.svg │ │ │ │ ├── information.svg │ │ │ │ ├── insurance.svg │ │ │ │ ├── investment.svg │ │ │ │ ├── keyboard.svg │ │ │ │ ├── kirby.svg │ │ │ │ ├── life.svg │ │ │ │ ├── link.svg │ │ │ │ ├── list.svg │ │ │ │ ├── lock.svg │ │ │ │ ├── log-out.svg │ │ │ │ ├── menu-no-decoration.svg │ │ │ │ ├── menu-outline.svg │ │ │ │ ├── menu.svg │ │ │ │ ├── misc.svg │ │ │ │ ├── moneybag.svg │ │ │ │ ├── more.svg │ │ │ │ ├── move.svg │ │ │ │ ├── navigation.svg │ │ │ │ ├── notification-fill.svg │ │ │ │ ├── notification.svg │ │ │ │ ├── overview-outline.svg │ │ │ │ ├── overview.svg │ │ │ │ ├── participants.svg │ │ │ │ ├── payment-card.svg │ │ │ │ ├── payment.svg │ │ │ │ ├── pension.svg │ │ │ │ ├── person-outline.svg │ │ │ │ ├── person.svg │ │ │ │ ├── phone-device.svg │ │ │ │ ├── piggybank.svg │ │ │ │ ├── recurring.svg │ │ │ │ ├── remove.svg │ │ │ │ ├── reorder.svg │ │ │ │ ├── revert.svg │ │ │ │ ├── salary.svg │ │ │ │ ├── search.svg │ │ │ │ ├── see.svg │ │ │ │ ├── share.svg │ │ │ │ ├── signed-document.svg │ │ │ │ ├── sort.svg │ │ │ │ ├── star-fill.svg │ │ │ │ ├── star.svg │ │ │ │ ├── sunshine.svg │ │ │ │ ├── support.svg │ │ │ │ ├── swap.svg │ │ │ │ ├── tractor.svg │ │ │ │ ├── transfer-ownership.svg │ │ │ │ ├── trash.svg │ │ │ │ ├── unsubscribe.svg │ │ │ │ ├── update.svg │ │ │ │ ├── upload.svg │ │ │ │ ├── user-blocked.svg │ │ │ │ ├── verify.svg │ │ │ │ ├── warning-decoration.svg │ │ │ │ ├── warning.svg │ │ │ │ └── write-message.svg │ │ │ ├── index.ts │ │ │ ├── kirby-icon-settings.ts │ │ │ ├── public_api.ts │ │ │ ├── readme.md │ │ │ └── selection.json │ ├── item-group │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── index.ts │ │ │ ├── item-group.component.html │ │ │ ├── item-group.component.scss │ │ │ ├── item-group.component.spec.ts │ │ │ ├── item-group.component.ts │ │ │ └── public_api.ts │ ├── item-sliding │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── index.ts │ │ │ ├── item-sliding.component.html │ │ │ ├── item-sliding.component.scss │ │ │ ├── item-sliding.component.spec.ts │ │ │ ├── item-sliding.component.stories.ts │ │ │ ├── item-sliding.component.ts │ │ │ ├── item-sliding.shared.scss │ │ │ ├── item-sliding.types.ts │ │ │ └── public_api.ts │ ├── item │ │ ├── index.ts │ │ ├── item-in-menu.integration.spec.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── _item.utils.scss │ │ │ ├── index.ts │ │ │ ├── item.component.html │ │ │ ├── item.component.integration.spec.ts │ │ │ ├── item.component.scss │ │ │ ├── item.component.spec.ts │ │ │ ├── item.component.stories.ts │ │ │ ├── item.component.ts │ │ │ ├── item.module.ts │ │ │ ├── label │ │ │ ├── label.component.html │ │ │ ├── label.component.scss │ │ │ ├── label.component.spec.ts │ │ │ ├── label.component.stories.ts │ │ │ └── label.component.ts │ │ │ └── public_api.ts │ ├── karma.conf.js │ ├── kirby-app │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── index.ts │ │ │ ├── kirby-app.component.html │ │ │ ├── kirby-app.component.scss │ │ │ ├── kirby-app.component.spec.ts │ │ │ ├── kirby-app.component.ts │ │ │ ├── kirby-app.module.ts │ │ │ └── public_api.ts │ ├── list │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── directives │ │ │ ├── index.ts │ │ │ ├── infinite-scroll.directive.spec.ts │ │ │ ├── infinite-scroll.directive.ts │ │ │ ├── list-item-color.directive.ts │ │ │ └── scroll.model.ts │ │ │ ├── helpers │ │ │ ├── index.ts │ │ │ ├── list-helper.spec.ts │ │ │ └── list-helper.ts │ │ │ ├── index.ts │ │ │ ├── list-experimental │ │ │ ├── index.ts │ │ │ ├── list-experimental.component.html │ │ │ ├── list-experimental.component.scss │ │ │ ├── list-experimental.component.spec.ts │ │ │ └── list-experimental.component.ts │ │ │ ├── list-header │ │ │ ├── index.ts │ │ │ ├── list-header.component.html │ │ │ ├── list-header.component.scss │ │ │ ├── list-header.component.spec.ts │ │ │ └── list-header.component.ts │ │ │ ├── list-item │ │ │ ├── index.ts │ │ │ ├── list-item.component.html │ │ │ ├── list-item.component.scss │ │ │ └── list-item.component.ts │ │ │ ├── list-section-header │ │ │ ├── index.ts │ │ │ ├── list-section-header.component.html │ │ │ ├── list-section-header.component.spec.ts │ │ │ └── list-section-header.component.ts │ │ │ ├── list-swipe-action.ts │ │ │ ├── list-swipe-action.type.ts │ │ │ ├── list.component.html │ │ │ ├── list.component.integration.spec.ts │ │ │ ├── list.component.scss │ │ │ ├── list.component.spec.ts │ │ │ ├── list.component.stories.ts │ │ │ ├── list.component.ts │ │ │ ├── list.directive.ts │ │ │ ├── list.event.ts │ │ │ ├── list.module.ts │ │ │ └── public_api.ts │ ├── loading-overlay │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── index.ts │ │ │ ├── loading-overlay.component.html │ │ │ ├── loading-overlay.component.scss │ │ │ ├── loading-overlay.component.stories.ts │ │ │ ├── loading-overlay.component.ts │ │ │ ├── loading-overlay.service.ts │ │ │ └── public_api.ts │ ├── menu │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── index.ts │ │ │ ├── menu.component.html │ │ │ ├── menu.component.scss │ │ │ ├── menu.component.spec.ts │ │ │ ├── menu.component.stories.ts │ │ │ ├── menu.component.ts │ │ │ └── public_api.ts │ ├── modal │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── index.ts │ │ │ ├── modal-navigation.service.spec.ts │ │ │ ├── modal-navigation.service.ts │ │ │ ├── modal-wrapper │ │ │ ├── compact │ │ │ │ ├── index.ts │ │ │ │ ├── modal-compact-wrapper.component.html │ │ │ │ ├── modal-compact-wrapper.component.scss │ │ │ │ ├── modal-compact-wrapper.component.stories.ts │ │ │ │ └── modal-compact-wrapper.component.ts │ │ │ ├── config │ │ │ │ ├── drawer-supplementary-action.ts │ │ │ │ ├── index.ts │ │ │ │ ├── modal-config.helper.ts │ │ │ │ └── modal-config.ts │ │ │ ├── index.ts │ │ │ ├── modal-elements-mover.delegate.ts │ │ │ ├── modal-wrapper.component.html │ │ │ ├── modal-wrapper.component.integration.spec.ts │ │ │ ├── modal-wrapper.component.scss │ │ │ ├── modal-wrapper.component.spec.ts │ │ │ ├── modal-wrapper.component.ts │ │ │ └── modal-wrapper.testbuilder.ts │ │ │ ├── modal.interfaces.ts │ │ │ ├── modal │ │ │ ├── action-sheet │ │ │ │ ├── action-sheet.component.html │ │ │ │ ├── action-sheet.component.scss │ │ │ │ ├── action-sheet.component.spec.ts │ │ │ │ ├── action-sheet.component.stories.ts │ │ │ │ ├── action-sheet.component.ts │ │ │ │ ├── config │ │ │ │ │ ├── action-sheet-config.ts │ │ │ │ │ └── action-sheet-item.ts │ │ │ │ └── index.ts │ │ │ ├── alert │ │ │ │ ├── alert.component.html │ │ │ │ ├── alert.component.scss │ │ │ │ ├── alert.component.spec.ts │ │ │ │ ├── alert.component.stories.ts │ │ │ │ ├── alert.component.ts │ │ │ │ ├── config │ │ │ │ │ └── alert-config.ts │ │ │ │ └── index.ts │ │ │ ├── footer │ │ │ │ ├── modal-footer.component.html │ │ │ │ ├── modal-footer.component.scss │ │ │ │ ├── modal-footer.component.spec.ts │ │ │ │ ├── modal-footer.component.stories.ts │ │ │ │ └── modal-footer.component.ts │ │ │ ├── index.ts │ │ │ ├── modal-component │ │ │ │ ├── modal.component.html │ │ │ │ ├── modal.component.spec.ts │ │ │ │ └── modal.component.ts │ │ │ └── services │ │ │ │ ├── action-sheet.helper.spec.ts │ │ │ │ ├── action-sheet.helper.ts │ │ │ │ ├── alert.helper.spec.ts │ │ │ │ ├── alert.helper.ts │ │ │ │ ├── can-dismiss-modal-guard.ts │ │ │ │ ├── can-dismiss.helper.spec.ts │ │ │ │ ├── can-dismiss.helper.ts │ │ │ │ ├── index.ts │ │ │ │ ├── modal-animation-builder.service.ts │ │ │ │ ├── modal.controller.spec.ts │ │ │ │ ├── modal.controller.ts │ │ │ │ ├── modal.helper.spec.ts │ │ │ │ └── modal.helper.ts │ │ │ └── public_api.ts │ ├── ng-package.json │ ├── ngcc.config.js │ ├── package.json │ ├── page │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── index.ts │ │ │ ├── page-footer │ │ │ ├── page-footer.component.html │ │ │ ├── page-footer.component.scss │ │ │ ├── page-footer.component.spec.ts │ │ │ └── page-footer.component.ts │ │ │ ├── page.component.html │ │ │ ├── page.component.scss │ │ │ ├── page.component.spec.ts │ │ │ ├── page.component.stories.ts │ │ │ ├── page.component.ts │ │ │ ├── page.module.ts │ │ │ └── public_api.ts │ ├── popover │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── index.ts │ │ │ ├── popover.component.scss │ │ │ ├── popover.component.spec.ts │ │ │ ├── popover.component.ts │ │ │ └── public_api.ts │ ├── progress-circle │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── index.ts │ │ │ ├── progress-circle-ring.component.html │ │ │ ├── progress-circle-ring.component.scss │ │ │ ├── progress-circle-ring.component.spec.ts │ │ │ ├── progress-circle-ring.component.ts │ │ │ ├── progress-circle.component.html │ │ │ ├── progress-circle.component.scss │ │ │ ├── progress-circle.component.spec.ts │ │ │ ├── progress-circle.component.stories.ts │ │ │ ├── progress-circle.component.ts │ │ │ └── public_api.ts │ ├── project.json │ ├── radio │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── index.ts │ │ │ ├── public_api.ts │ │ │ ├── radio-group │ │ │ ├── radio-group.component.html │ │ │ ├── radio-group.component.spec.ts │ │ │ ├── radio-group.component.stories.ts │ │ │ └── radio-group.component.ts │ │ │ ├── radio-module.ts │ │ │ ├── radio.component.html │ │ │ ├── radio.component.integration.spec.ts │ │ │ ├── radio.component.scss │ │ │ ├── radio.component.spec.ts │ │ │ └── radio.component.ts │ ├── range │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── index.ts │ │ │ ├── public_api.ts │ │ │ ├── range.component.html │ │ │ ├── range.component.scss │ │ │ ├── range.component.spec.ts │ │ │ ├── range.component.stories.ts │ │ │ └── range.component.ts │ ├── reorder-list │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── index.ts │ │ │ ├── public_api.ts │ │ │ ├── reorder-event.ts │ │ │ ├── reorder-list.component.html │ │ │ ├── reorder-list.component.scss │ │ │ ├── reorder-list.component.spec.ts │ │ │ ├── reorder-list.component.stories.ts │ │ │ └── reorder-list.component.ts │ ├── router-outlet │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── index.ts │ │ │ ├── public_api.ts │ │ │ ├── router-outlet.component.html │ │ │ ├── router-outlet.component.scss │ │ │ ├── router-outlet.component.spec.ts │ │ │ ├── router-outlet.component.ts │ │ │ ├── router-outlet.integration.spec.ts │ │ │ └── router-outlet.module.ts │ ├── secondary-entry.md │ ├── section-header │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── _section-header.utils.scss │ │ │ ├── index.ts │ │ │ ├── public_api.ts │ │ │ ├── section-header.component.html │ │ │ ├── section-header.component.scss │ │ │ ├── section-header.component.spec.ts │ │ │ ├── section-header.component.stories.ts │ │ │ ├── section-header.component.ts │ │ │ └── section-header.integration.spec.ts │ ├── shared │ │ ├── floating │ │ │ ├── index.ts │ │ │ ├── ng-package.json │ │ │ └── src │ │ │ │ ├── floating.directive.spec.ts │ │ │ │ ├── floating.directive.ts │ │ │ │ ├── index.ts │ │ │ │ └── public_api.ts │ │ ├── index.ts │ │ ├── ng-package.json │ │ ├── portal │ │ │ ├── index.ts │ │ │ ├── ng-package.json │ │ │ └── src │ │ │ │ ├── index.ts │ │ │ │ ├── portal.directive.spec.ts │ │ │ │ ├── portal.directive.ts │ │ │ │ └── public_api.ts │ │ └── src │ │ │ ├── component-configuration.ts │ │ │ ├── component-loader.directive.ts │ │ │ ├── controls │ │ │ ├── label-helpers.spec.ts │ │ │ └── label-helpers.ts │ │ │ ├── dynamic-component.ts │ │ │ ├── fit-heading │ │ │ ├── fit-heading.directive.ts │ │ │ └── index.ts │ │ │ ├── index.ts │ │ │ ├── public_api.ts │ │ │ ├── resize-observer │ │ │ ├── resize-observer.factory.ts │ │ │ └── resize-observer.service.ts │ │ │ ├── theme-color │ │ │ ├── theme-color.directive.integration.spec.ts │ │ │ └── theme-color.directive.ts │ │ │ └── translation │ │ │ ├── translation.interface.ts │ │ │ ├── translation.service.spec.ts │ │ │ ├── translation.service.ts │ │ │ └── translations │ │ │ ├── da.ts │ │ │ ├── de.ts │ │ │ └── en.ts │ ├── slide-button │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── index.ts │ │ │ ├── public_api.ts │ │ │ ├── slide-button.component.html │ │ │ ├── slide-button.component.scss │ │ │ ├── slide-button.component.spec.ts │ │ │ ├── slide-button.component.stories.ts │ │ │ └── slide-button.component.ts │ ├── slide │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── index.ts │ │ │ ├── public_api.ts │ │ │ ├── slide-stretch-height.directive.ts │ │ │ ├── slide.directive.ts │ │ │ ├── slide.module.ts │ │ │ ├── slides.component.html │ │ │ ├── slides.component.scss │ │ │ ├── slides.component.spec.ts │ │ │ ├── slides.component.stories.ts │ │ │ └── slides.component.ts │ ├── spinner │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── index.ts │ │ │ ├── public_api.ts │ │ │ ├── spinner.component.html │ │ │ ├── spinner.component.scss │ │ │ ├── spinner.component.stories.ts │ │ │ ├── spinner.component.ts │ │ │ └── spinner.module.ts │ ├── src │ │ ├── index.ts │ │ ├── lib │ │ │ ├── components │ │ │ │ ├── index.ts │ │ │ │ └── segmented-control │ │ │ │ │ ├── segment-item.ts │ │ │ │ │ ├── segmented-control.component.html │ │ │ │ │ ├── segmented-control.component.scss │ │ │ │ │ ├── segmented-control.component.spec.ts │ │ │ │ │ ├── segmented-control.component.stories.ts │ │ │ │ │ └── segmented-control.component.ts │ │ │ ├── directives │ │ │ │ ├── index.ts │ │ │ │ ├── key-handler │ │ │ │ │ └── key-handler.directive.ts │ │ │ │ └── modal-router-link │ │ │ │ │ └── modal-router-link.directive.ts │ │ │ ├── index.ts │ │ │ ├── kirby.module.spec.ts │ │ │ └── kirby.module.ts │ │ └── public-api.ts │ ├── tab-navigation │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── index.ts │ │ │ ├── public_api.ts │ │ │ ├── tab-navigation-item │ │ │ ├── tab-navigation-item.component.html │ │ │ ├── tab-navigation-item.component.scss │ │ │ ├── tab-navigation-item.component.spec.ts │ │ │ └── tab-navigation-item.component.ts │ │ │ ├── tab-navigation.module.ts │ │ │ └── tab-navigation │ │ │ ├── tab-navigation.component.html │ │ │ ├── tab-navigation.component.scss │ │ │ ├── tab-navigation.component.spec.ts │ │ │ ├── tab-navigation.component.stories.ts │ │ │ └── tab-navigation.component.ts │ ├── tabs │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── index.ts │ │ │ ├── public_api.ts │ │ │ ├── tab-button │ │ │ ├── tab-button.component.html │ │ │ ├── tab-button.component.scss │ │ │ ├── tab-button.component.spec.ts │ │ │ ├── tab-button.component.ts │ │ │ └── tab-button.events.ts │ │ │ ├── tabs.component.html │ │ │ ├── tabs.component.scss │ │ │ ├── tabs.component.spec.ts │ │ │ ├── tabs.component.ts │ │ │ ├── tabs.module.ts │ │ │ └── tabs.service.ts │ ├── test.ts │ ├── testing-base │ │ ├── ng-package.json │ │ ├── src │ │ │ ├── lib │ │ │ │ ├── components │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── mock.accordion-item.component.ts │ │ │ │ │ ├── mock.action-group.component.ts │ │ │ │ │ ├── mock.action-sheet.component.ts │ │ │ │ │ ├── mock.alert.component.ts │ │ │ │ │ ├── mock.avatar.component.ts │ │ │ │ │ ├── mock.badge.component.ts │ │ │ │ │ ├── mock.base-chart.component.ts │ │ │ │ │ ├── mock.button.component.ts │ │ │ │ │ ├── mock.calendar.component.ts │ │ │ │ │ ├── mock.card-footer.component.ts │ │ │ │ │ ├── mock.card-header.component.ts │ │ │ │ │ ├── mock.card.component.ts │ │ │ │ │ ├── mock.chart.component.ts │ │ │ │ │ ├── mock.checkbox.component.ts │ │ │ │ │ ├── mock.divider.component.ts │ │ │ │ │ ├── mock.dropdown.component.ts │ │ │ │ │ ├── mock.empty-state.component.ts │ │ │ │ │ ├── mock.fab-sheet.component.ts │ │ │ │ │ ├── mock.flag.component.ts │ │ │ │ │ ├── mock.form-field-message.component.ts │ │ │ │ │ ├── mock.form-field.component.ts │ │ │ │ │ ├── mock.header.component.ts │ │ │ │ │ ├── mock.icon.component.ts │ │ │ │ │ ├── mock.input-counter.component.ts │ │ │ │ │ ├── mock.input.component.ts │ │ │ │ │ ├── mock.item-group.component.ts │ │ │ │ │ ├── mock.item-sliding.component.ts │ │ │ │ │ ├── mock.item.component.ts │ │ │ │ │ ├── mock.kirby-app.component.ts │ │ │ │ │ ├── mock.label.component.ts │ │ │ │ │ ├── mock.list-experimental.component.ts │ │ │ │ │ ├── mock.list-header.component.ts │ │ │ │ │ ├── mock.list-item.component.ts │ │ │ │ │ ├── mock.list-section-header.component.ts │ │ │ │ │ ├── mock.list.component.ts │ │ │ │ │ ├── mock.loading-overlay.component.ts │ │ │ │ │ ├── mock.menu.component.ts │ │ │ │ │ ├── mock.modal-compact-wrapper.component.ts │ │ │ │ │ ├── mock.modal-footer.component.ts │ │ │ │ │ ├── mock.modal-wrapper.component.ts │ │ │ │ │ ├── mock.page-footer.component.ts │ │ │ │ │ ├── mock.page.component.ts │ │ │ │ │ ├── mock.popover.component.ts │ │ │ │ │ ├── mock.progress-circle-ring.component.ts │ │ │ │ │ ├── mock.progress-circle.component.ts │ │ │ │ │ ├── mock.radio-group.component.ts │ │ │ │ │ ├── mock.radio.component.ts │ │ │ │ │ ├── mock.range.component.ts │ │ │ │ │ ├── mock.reorder-list.component.ts │ │ │ │ │ ├── mock.router-outlet.component.ts │ │ │ │ │ ├── mock.section-header.component.ts │ │ │ │ │ ├── mock.segmented-control.component.ts │ │ │ │ │ ├── mock.slide-button.component.ts │ │ │ │ │ ├── mock.slides.component.ts │ │ │ │ │ ├── mock.spinner.component.ts │ │ │ │ │ ├── mock.stock-chart.component.ts │ │ │ │ │ ├── mock.tab-button.component.ts │ │ │ │ │ ├── mock.tab-navigation-item.component.ts │ │ │ │ │ ├── mock.tab-navigation.component.ts │ │ │ │ │ ├── mock.tabs.component.ts │ │ │ │ │ ├── mock.textarea.component.ts │ │ │ │ │ ├── mock.toggle-button.component.ts │ │ │ │ │ └── mock.toggle.component.ts │ │ │ │ ├── directives │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── mock.accordion.directive.ts │ │ │ │ │ ├── mock.affix.directive.ts │ │ │ │ │ ├── mock.card-as-button.directive.ts │ │ │ │ │ ├── mock.component-loader.directive.ts │ │ │ │ │ ├── mock.date-input.directive.ts │ │ │ │ │ ├── mock.decimal-mask.directive.ts │ │ │ │ │ ├── mock.fit-heading.directive.ts │ │ │ │ │ ├── mock.floating.directive.ts │ │ │ │ │ ├── mock.infinite-scroll.directive.ts │ │ │ │ │ ├── mock.key-handler.directive.ts │ │ │ │ │ ├── mock.list-item-color.directive.ts │ │ │ │ │ ├── mock.list.directive.ts │ │ │ │ │ ├── mock.modal-router-link.directive.ts │ │ │ │ │ ├── mock.portal.directive.ts │ │ │ │ │ ├── mock.slide.directive.ts │ │ │ │ │ └── mock.theme-color.directive.ts │ │ │ │ ├── index.ts │ │ │ │ ├── kirby-testing-base.module.ts │ │ │ │ ├── mock-components.ts │ │ │ │ └── mock-directives.ts │ │ │ ├── public_api.ts │ │ │ └── tsconfig.json │ │ └── testing-jasmine │ │ │ └── src │ │ │ └── tsconfig.json │ ├── testing-jasmine │ │ ├── ng-package.json │ │ └── src │ │ │ ├── lib │ │ │ ├── kirby-testing.module.ts │ │ │ └── mock-providers.ts │ │ │ ├── public_api.ts │ │ │ └── tsconfig.json │ ├── testing-jest │ │ ├── ng-package.json │ │ └── src │ │ │ ├── lib │ │ │ ├── kirby-testing.module.ts │ │ │ └── mock-providers.ts │ │ │ ├── public_api.ts │ │ │ └── tsconfig.json │ ├── testing │ │ ├── images │ │ │ └── woman.png │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── element-css-custom-matchers.d.ts │ │ │ ├── element-css-custom-matchers.ts │ │ │ ├── index.ts │ │ │ ├── public_api.ts │ │ │ ├── styles.scss │ │ │ └── test-helper.ts │ ├── toast │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── config │ │ │ └── toast-config.ts │ │ │ ├── index.ts │ │ │ ├── public_api.ts │ │ │ └── services │ │ │ ├── indexs.ts │ │ │ ├── toast.controller.ts │ │ │ ├── toast.helper.spec.ts │ │ │ └── toast.helper.ts │ ├── toggle-button │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── index.ts │ │ │ ├── public_api.ts │ │ │ ├── toggle-button.component.html │ │ │ ├── toggle-button.component.spec.ts │ │ │ ├── toggle-button.component.stories.ts │ │ │ ├── toggle-button.component.ts │ │ │ └── toggle-button.module.ts │ ├── toggle │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ │ ├── index.ts │ │ │ ├── public_api.ts │ │ │ ├── toggle.component.html │ │ │ ├── toggle.component.scss │ │ │ ├── toggle.component.spec.ts │ │ │ ├── toggle.component.stories.ts │ │ │ └── toggle.component.ts │ ├── tsconfig.json │ ├── tsconfig.lib.json │ ├── tsconfig.spec.json │ └── types │ │ ├── index.ts │ │ ├── ng-package.json │ │ └── src │ │ ├── event-listener-dispose-fn.ts │ │ ├── form-field-control.ts │ │ ├── index.ts │ │ ├── public_api.ts │ │ ├── unobserve-fn.ts │ │ └── window-ref.ts └── extensions │ └── angular │ ├── .eslintrc.config.mjs │ ├── .lintstagedrc │ ├── .storybook │ ├── main.ts │ ├── preview-head.html │ ├── preview.ts │ ├── styles.css │ ├── tsconfig.compodoc.json │ └── tsconfig.json │ ├── CONTRIBUTING.md │ ├── README.md │ ├── docs │ ├── Introduction.mdx │ └── assets │ │ ├── leaves.jpg │ │ └── not-found.png │ ├── image-banner │ ├── ng-package.json │ └── src │ │ ├── image-banner-height.directive.ts │ │ ├── image-banner.component.html │ │ ├── image-banner.component.scss │ │ ├── image-banner.component.spec.ts │ │ ├── image-banner.component.stories.ts │ │ ├── image-banner.component.ts │ │ └── index.ts │ ├── index.ts │ ├── jest.config.ts │ ├── jest.preset.js │ ├── localization │ ├── ng-package.json │ └── src │ │ ├── account-number │ │ ├── account-number-service-formatter.ts │ │ ├── account-number.model.ts │ │ ├── account-number.pipe.spec.ts │ │ ├── account-number.pipe.ts │ │ ├── account-number.stories.ts │ │ └── index.ts │ │ ├── amount │ │ ├── amount-service-formatter.ts │ │ ├── amount.model.ts │ │ ├── amount.pipe.spec.ts │ │ ├── amount.pipe.ts │ │ ├── amount.service.spec.ts │ │ ├── amount.service.ts │ │ ├── amount.stories.ts │ │ └── index.ts │ │ ├── date-time │ │ ├── abstract-timezone-compensating.pipe.ts │ │ ├── date-formats.ts │ │ ├── date-only │ │ │ ├── date-only.pipe.spec.ts │ │ │ ├── date-only.pipe.ts │ │ │ └── date-only.stories.ts │ │ ├── index.ts │ │ ├── time-only │ │ │ ├── time-only.pipe.spec.ts │ │ │ ├── time-only.pipe.ts │ │ │ └── time-only.stories.ts │ │ └── time-or-date │ │ │ ├── time-or-date.pipe.spec.ts │ │ │ ├── time-or-date.pipe.ts │ │ │ └── time-or-date.stories.ts │ │ ├── di-tokens.ts │ │ ├── formatting-pipes.mdx │ │ ├── index.ts │ │ ├── number │ │ ├── format-number.pipe.ts │ │ ├── format-number.service.spec.ts │ │ ├── format-number.service.ts │ │ ├── format-number.stories.ts │ │ └── index.ts │ │ └── phone-number │ │ ├── index.ts │ │ ├── phone-number.pipe.ts │ │ ├── phone-number.service.spec.ts │ │ ├── phone-number.service.ts │ │ ├── phone-number.stories.ts │ │ └── phone-number.ts │ ├── ng-package.json │ ├── package.json │ ├── project.json │ ├── skeleton-loader │ ├── ng-package.json │ └── src │ │ ├── index.ts │ │ ├── skeleton-loader.component.html │ │ ├── skeleton-loader.component.scss │ │ ├── skeleton-loader.component.spec.ts │ │ ├── skeleton-loader.component.stories.ts │ │ └── skeleton-loader.component.ts │ ├── test-setup.ts │ ├── tsconfig.json │ ├── tsconfig.lib.json │ ├── tsconfig.lib.prod.json │ └── tsconfig.spec.json ├── nx.json ├── package-lock.json ├── package.json ├── readme.md ├── scripts ├── dns.pl ├── forward-scss-files.js ├── generate-mocks.js ├── publish.js ├── sass-extract-to-ts.js └── sync-node-version.js ├── tools ├── eslint-config │ ├── angular.json │ ├── base.json │ └── package.json ├── generate-mocks │ ├── generate-mocks.ts │ └── tsconfig.json ├── generate-proxies │ ├── .eslintrc.json │ ├── generate-angular-proxies.ts │ └── utils │ │ ├── cem-helper-functions.ts │ │ ├── index.ts │ │ └── types.ts ├── sass-to-ts │ ├── package.json │ ├── sass-to-ts-webpack.plugin.ts │ ├── sass-to-ts.engine.ts │ ├── schema.ts │ ├── tsconfig.json │ └── webpack.sass-to-ts.config.ts ├── storybook-config │ └── shared-config.ts └── tsconfig.tools.json └── tsconfig.base.json /.browserslistrc: -------------------------------------------------------------------------------- 1 | Safari >= 15 2 | ios_saf >= 15 3 | Firefox >= 105 4 | Edge >= 105 5 | Chrome >= 105 6 | Android >= 105 7 | and_chr >= 105 8 | not dead -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | *.scss @jkaltoft 2 | -------------------------------------------------------------------------------- /.github/release.yml: -------------------------------------------------------------------------------- 1 | changelog: 2 | exclude: 3 | labels: 4 | - ignore-for-release 5 | authors: 6 | - dependabot 7 | categories: 8 | - title: Breaking Changes 🛠 9 | labels: 10 | - breaking-change 11 | - title: New Features 🎉 12 | labels: 13 | - feature 14 | - title: Bug Fixes 🐛 15 | labels: 16 | - fix 17 | - title: Everything else 18 | labels: 19 | - "*" 20 | -------------------------------------------------------------------------------- /.lintstagedrc: -------------------------------------------------------------------------------- 1 | { 2 | "*.{ts,json,md,scss,html}": [ 3 | "prettier --write" 4 | ], 5 | "*.ts": [ 6 | "eslint --fix" 7 | ], 8 | "*.scss": [ 9 | "stylelint --fix" 10 | ] 11 | } -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict = true 2 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 22 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | /.github/ 2 | libs/designsystem/header/src/header.component.html 3 | /libs/core/dist/** 4 | /libs/core/loader/** 5 | /libs/core/component-docs.d.ts 6 | /libs/core/component-docs.json 7 | /libs/core/src/components.d.ts 8 | /libs/**/readme.md 9 | /node_modules/ 10 | 11 | /.nx/cache 12 | .angular 13 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "always", 3 | "bracketSpacing": true, 4 | "printWidth": 100, 5 | "semi": true, 6 | "singleQuote": true, 7 | "trailingComma": "es5", 8 | "jsxSingleQuote": true, 9 | "htmlWhitespaceSensitivity": "ignore" 10 | } 11 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | libs/core/scss/** 2 | /.github/ 3 | /libs/core/dist/** 4 | /libs/core/loader/** 5 | /libs/core/component-docs.d.ts 6 | /libs/core/component-docs.json 7 | /libs/core/src/components.d.ts 8 | /libs/**/readme.md 9 | /node_modules/ 10 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "nrwl.angular-console", 4 | "esbenp.prettier-vscode", 5 | "angular.ng-template", 6 | "firsttris.vscode-jest-runner", 7 | "dbaeumer.vscode-eslint" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM nginx 2 | COPY dist/apps/cookbook /usr/share/nginx/html 3 | COPY nginx.conf /etc/nginx/nginx.conf 4 | -------------------------------------------------------------------------------- /apps/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /apps/cookbook/.lintstagedrc: -------------------------------------------------------------------------------- 1 | { 2 | "*.{ts,json,md,scss,html}": [ 3 | "prettier --write", 4 | "git add" 5 | ], 6 | "*.ts": [ 7 | "eslint --fix", 8 | "git add" 9 | ], 10 | "*.scss": [ 11 | "stylelint --fix", 12 | "git add" 13 | ] 14 | } -------------------------------------------------------------------------------- /apps/cookbook/resource-imports.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*?raw' { 2 | const content: string; 3 | export default content; 4 | } 5 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/accessibility/accessibility-guidelines.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'cookbook-accessibility-guidelines', 5 | templateUrl: './accessibility-guidelines.html', 6 | }) 7 | export class AccessibilityGuidelinesComponent {} 8 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { KirbyAppModule } from '@kirbydesign/designsystem/kirby-app'; 3 | import { RouterOutlet } from '@angular/router'; 4 | 5 | @Component({ 6 | selector: 'cookbook-root', 7 | templateUrl: './app.component.html', 8 | imports: [KirbyAppModule, RouterOutlet], 9 | }) 10 | export class AppComponent { 11 | title = 'Kirby design system'; 12 | } 13 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/component-overview/component-display/component-display.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 |

{{ title }}

7 |

8 | {{ paragraph }} 9 |

10 |
11 |
12 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/component-overview/component-overview.component.scss: -------------------------------------------------------------------------------- 1 | .grid { 2 | padding-top: 35px; 3 | display: grid; 4 | grid-template-columns: repeat(auto-fit, 237px); 5 | gap: 35px 24px; 6 | justify-content: space-around; 7 | } 8 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/component-overview/display.ts: -------------------------------------------------------------------------------- 1 | export interface Display { 2 | title: string; 3 | paragraph: string; 4 | svgPath: string; 5 | route: string; 6 | } 7 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/_modal-playground.shared.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: grid; 3 | place-content: center; 4 | overflow-y: auto; 5 | 6 | > button { 7 | min-width: 15rem; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/accordion-example/accordion-example.component.scss: -------------------------------------------------------------------------------- 1 | @use '../examples.shared'; 2 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/action-sheet-example/action-sheet-example.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/avatar-example/avatar-example.component.scss: -------------------------------------------------------------------------------- 1 | @use '../examples.shared'; 2 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/avatar-example/examples/badge.scss: -------------------------------------------------------------------------------- 1 | @use 'avatar-examples.shared'; 2 | @use '@kirbydesign/core/src/scss/utils'; 3 | 4 | :host { 5 | padding: utils.size('l'); 6 | } 7 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/badge-example/examples/badge-example-shared.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | :host { 4 | kirby-badge + kirby-badge { 5 | margin-left: utils.size('s'); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/button-example/examples/_grid-layout.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | :host { 4 | display: inline-grid; 5 | grid-template-columns: repeat(4, auto); 6 | place-items: center center; 7 | gap: utils.size('s'); 8 | } 9 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/button-example/examples/_responsive-grid-layout.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | @use './grid-layout'; 4 | 5 | :host { 6 | @include utils.media('=medium') { 10 | flex-direction: row; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/calendar-example/calendar-example.component.html: -------------------------------------------------------------------------------- 1 |

Calendar in card

2 | 3 | 4 |

Calendar with year navigator

5 | 6 | 7 |

Calendar without background

8 | 9 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/calendar-example/calendar-example.component.scss: -------------------------------------------------------------------------------- 1 | @use '../examples.shared'; 2 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/calendar-example/examples/_shared.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | max-width: 320px; 4 | margin: 0 auto; 5 | } 6 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/calendar-example/examples/in-card.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | @use './shared'; 3 | 4 | kirby-card:has(.buttons) { 5 | margin-top: utils.size(xxs); 6 | 7 | .buttons { 8 | display: flex; 9 | justify-content: space-around; 10 | } 11 | 12 | p { 13 | margin: 0; 14 | margin-top: utils.size(xs); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/calendar-example/examples/locales.ts: -------------------------------------------------------------------------------- 1 | export const moduleProviderExample = ` 2 | import { LOCALE_ID, NgModule } from '@angular/core'; 3 | 4 | @NgModule({ 5 | ... 6 | providers: [ 7 | { provide: LOCALE_ID, useValue: 'da' }, 8 | ], 9 | ... 10 | }) 11 | export class AppModule {} 12 | `; 13 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/card-example/card-example.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/card-example/card-example.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | @use '../examples.shared'; 3 | 4 | :host > :not(:last-child) { 5 | margin-bottom: utils.size('s'); 6 | } 7 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/data-table-example/data-table-example.component.html: -------------------------------------------------------------------------------- 1 |

Simple data table

2 | 3 | 4 |

Additional styling and interactions

5 | 6 | 7 |

Sortable table

8 | 9 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/divider-example/divider-example.component.html: -------------------------------------------------------------------------------- 1 |

Divider on background

2 | 3 |

Some text below divider

4 | 5 | 6 |

Divider on card

7 | 8 |

Some text below divider

9 |
10 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/dropdown-example/dropdown-example-configuration-component/dropdown-example-configuration.component.scss: -------------------------------------------------------------------------------- 1 | fieldset { 2 | display: inline-block; 3 | } 4 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/dropdown-example/examples/dropdown-examples.shared.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use '@kirbydesign/core/src/scss/utils'; 3 | 4 | kirby-card { 5 | margin-block: utils.size('m'); 6 | 7 | &.attention-levels { 8 | max-width: map.get(utils.$breakpoints, 'xsmall'); 9 | } 10 | 11 | kirby-dropdown + kirby-dropdown { 12 | margin-top: utils.size('s'); 13 | } 14 | } 15 | 16 | p { 17 | margin-top: utils.size('s'); 18 | } 19 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/empty-state-example/empty-state-example.component.html: -------------------------------------------------------------------------------- 1 |

Message Types

2 | 3 | 4 |

Simple

5 | 6 | 7 |

Buttons

8 | 9 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/empty-state-example/empty-state-example.component.scss: -------------------------------------------------------------------------------- 1 | @use '../examples.shared'; 2 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/examples-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { KirbyModule } from '@kirbydesign/designsystem'; 4 | import { EXAMPLE_ROUTES } from './examples.routes'; 5 | 6 | @NgModule({ 7 | imports: [RouterModule.forChild(EXAMPLE_ROUTES), KirbyModule], 8 | exports: [RouterModule], 9 | }) 10 | export class ExamplesRoutingModule {} 11 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/examples.component.html: -------------------------------------------------------------------------------- 1 |
6 |
7 |
8 |
9 |
10 |
11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/fab-sheet-example/fab-sheet-example.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/flag-example/flag-example.component.html: -------------------------------------------------------------------------------- 1 |

Colors

2 | 3 | 4 |

Sizes

5 | 6 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/flag-example/flag-example.component.scss: -------------------------------------------------------------------------------- 1 | @use '../examples.shared'; 2 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/fonts-example/fonts-example.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | :host { 4 | display: block; 5 | height: 100%; 6 | overflow-x: hidden; 7 | background: utils.get-color('background-color'); 8 | padding: utils.size('s'); 9 | box-sizing: border-box; 10 | 11 | @include utils.media('>=medium') { 12 | padding: utils.size('l'); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/fonts-example/fonts-example.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'cookbook-fonts-example', 5 | styleUrls: ['./fonts-example.component.scss'], 6 | templateUrl: './fonts-example.component.html', 7 | }) 8 | export class FontsExampleComponent {} 9 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/form-field-example/form-field-example-configuration-component/form-field-example-configuration.component.scss: -------------------------------------------------------------------------------- 1 | fieldset { 2 | display: inline-block; 3 | } 4 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/form-field-example/form-field-example.component.scss: -------------------------------------------------------------------------------- 1 | @use '../examples.shared'; 2 | 3 | kirby-card { 4 | --kirby-card-width: min(500px, 100%); 5 | 6 | margin: 1rem auto; 7 | } 8 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/grid-example/grid-example.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | .grid-example-container { 4 | margin-bottom: utils.size('l'); 5 | } 6 | 7 | fieldset { 8 | margin: utils.size('m') 0; 9 | width: 300px; 10 | 11 | legend { 12 | display: flex; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/header-example/header-example.component.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @use '@kirbydesign/core/src/scss/utils'; 3 | @use '../examples.shared'; 4 | 5 | .header-example-container { 6 | margin: utils.size('l') auto; 7 | max-width: map.get(utils.$breakpoints, medium); 8 | } 9 | 10 | .header-example { 11 | margin-bottom: utils.size('l'); 12 | border: 1px solid utils.get-color('medium'); 13 | border-radius: utils.size('xs'); 14 | } 15 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/icon-example/icon-example.component.html: -------------------------------------------------------------------------------- 1 |

Icon Examples

2 |

Default Icons

3 | 4 | 5 |

Sizes

6 | 7 | 8 |

Custom Icons

9 | 10 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/icon-example/icon-example.component.scss: -------------------------------------------------------------------------------- 1 | @use '../examples.shared'; 2 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/item-example/examples/_shared.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | kirby-item:not(:last-child) { 4 | margin-bottom: var(--kirby-spacing-xxs); 5 | } 6 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/item-example/item-example.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | @use '../examples.shared'; 3 | 4 | cookbook-item-example-simple-sm, 5 | cookbook-item-example-simple-xs { 6 | display: block; 7 | margin-block-start: utils.size('xs'); 8 | } 9 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/item-group-example/item-group-example.component.html: -------------------------------------------------------------------------------- 1 |

Item Group

2 | 3 | 4 |

Section Header in Item Group

5 | 6 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/link-example/examples/link-examples.shared.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | :host { 4 | display: block; 5 | margin-bottom: utils.size('s'); 6 | 7 | a { 8 | margin-right: utils.size('s'); 9 | } 10 | } 11 | 12 | .trailing-icon-example { 13 | @include utils.trailing-icon('navigation'); 14 | } 15 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/link-example/link-example.component.html: -------------------------------------------------------------------------------- 1 |

Sizes

2 | 3 | 4 |

New tab

5 | 6 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/list-example/list-example.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/list-experimental-example/list-experimental-example.component.html: -------------------------------------------------------------------------------- 1 |
2 |

List with items and section

3 | 4 |
5 |
6 |

List with sliding items

7 | 8 |
9 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/list-no-shape-example/list-no-shape-example.component.scss: -------------------------------------------------------------------------------- 1 | @use '../examples.shared'; 2 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/loading-overlay-example/loading-overlay-example.component.scss: -------------------------------------------------------------------------------- 1 | @use '../examples.shared'; 2 | 3 | button[kirby-button] { 4 | margin-left: 0; 5 | margin-right: 0; 6 | } 7 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/menu-example/examples/portalOutletConfig.ts: -------------------------------------------------------------------------------- 1 | export const portalOutletConfigExampleHTML = ` 2 |
3 | `; 4 | 5 | export const portalOutletConfigExampleTS = `const outletConfig: PortalOutletConfig = { 6 | selector: 'id', 7 | value: 'target-div' 8 | } 9 | `; 10 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/modal-example/compact-example/modal-compact-example.component.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/modal-example/modal-component-example.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | @use '../examples.shared'; 3 | @use '../modal-playground.shared'; 4 | 5 | kirby-card { 6 | margin-top: utils.size('l'); 7 | 8 | kirby-card-header { 9 | em { 10 | font-size: smaller; 11 | } 12 | } 13 | } 14 | 15 | cookbook-modal-example-size-selector { 16 | margin-bottom: utils.size('m'); 17 | } 18 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/modal-example/modal-example-advanced.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | @use '../examples.shared'; 3 | @use '../modal-playground.shared'; 4 | 5 | kirby-card { 6 | --kirby-card-width: fit-content; 7 | } 8 | 9 | .dummy-text-section { 10 | position: absolute; 11 | top: 90vh; 12 | } 13 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/modal-example/modal-example-configuration/modal-example-configuration.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | kirby-checkbox { 4 | &:not(:first-of-type) { 5 | margin-top: utils.size('xxxs'); 6 | } 7 | 8 | &.indent { 9 | margin-left: utils.size('l'); 10 | margin-top: utils.size('xxxs'); 11 | } 12 | } 13 | 14 | p { 15 | margin: 0; 16 | font-size: utils.font-size('s'); 17 | } 18 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/modal-example/modal-example-configuration/modal-example-size-selector.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ option.text }} 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/modal-example/modal-example-outlet.component.scss: -------------------------------------------------------------------------------- 1 | @use '../examples.shared'; 2 | @use '../modal-playground.shared'; 3 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/modal-example/modal-example-simple.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | @use '../examples.shared'; 3 | @use '../modal-playground.shared'; 4 | 5 | kirby-card { 6 | margin-top: utils.size('l'); 7 | 8 | kirby-card-header { 9 | em { 10 | font-size: smaller; 11 | } 12 | } 13 | } 14 | 15 | cookbook-modal-example-size-selector { 16 | margin-bottom: utils.size('m'); 17 | } 18 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/radio-example/radio-example.component.scss: -------------------------------------------------------------------------------- 1 | @use '../examples.shared'; 2 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/reorder-list-example/reorder-list-example.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | .section-header { 4 | padding: 0 utils.size('s') utils.size('xxs') utils.size('xxs'); 5 | display: flex; 6 | justify-content: flex-end; 7 | 8 | span { 9 | padding-left: utils.size('s'); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/section-header-example/section-header-example.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | :host { 4 | display: block; 5 | height: 100%; 6 | background: utils.get-color('background-color'); 7 | padding: utils.size('m'); 8 | 9 | h2 { 10 | &:not(:first-child) { 11 | margin-top: utils.size('l'); 12 | } 13 | 14 | border-bottom: 1px dotted utils.get-color('medium'); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/segmented-control-example/segmented-control-examples.shared.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | :host { 4 | display: block; 5 | } 6 | 7 | kirby-card, 8 | kirby-segmented-control { 9 | margin-bottom: utils.size('s'); 10 | } 11 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/slide-button-example/slide-button-example.component.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/spinner-example/spinner-example.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/spinner-example/spinner-example.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SpinnerModule } from '@kirbydesign/designsystem/spinner'; 3 | 4 | @Component({ 5 | selector: 'cookbook-spinner-example', 6 | templateUrl: './spinner-example.component.html', 7 | imports: [SpinnerModule], 8 | }) 9 | export class SpinnerExampleComponent {} 10 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/stock-chart-example/stock-chart-example.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/styling-html-lists-example/styling-html-lists-example.component.scss: -------------------------------------------------------------------------------- 1 | div { 2 | display: grid; 3 | gap: 2rem; 4 | grid-template-columns: repeat(auto-fill, minmax(40ch, 1fr)); 5 | } 6 | 7 | h2 { 8 | grid-column: 1 / -1; 9 | } 10 | 11 | kirby-card { 12 | padding: 2rem; 13 | 14 | :last-child { 15 | margin-block-end: 0; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/toast-example/toast-example.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/toggle-button-example/examples/_shared.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/toggle-button-example/toggle-button-example.component.scss: -------------------------------------------------------------------------------- 1 | @use '../examples.shared'; 2 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/toggle-example/examples/toggle-examples.shared.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | :host { 4 | display: flex; 5 | flex-direction: column; 6 | gap: utils.size('s'); 7 | 8 | @include utils.media('>=medium') { 9 | flex-direction: row; 10 | gap: utils.size('xl'); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/toggle-example/toggle-example.component.html: -------------------------------------------------------------------------------- 1 |

Default

2 | 3 |

Angular Forms

4 | 5 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/toggle-example/toggle-example.component.scss: -------------------------------------------------------------------------------- 1 | @use '../examples.shared'; 2 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/examples/virtual-scroll-example/virtual-scroll-list-example/virtual-scroll-list-example.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | :host { 4 | display: block; 5 | height: 100%; 6 | background-color: utils.get-color('background-color'); 7 | } 8 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/extensions/extensions-landing-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'cookbook-extensions-landing-page', 5 | templateUrl: './extensions-landing-page.component.html', 6 | standalone: false, 7 | }) 8 | export class ExtensionsLandingPageComponent {} 9 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/guides/grid-layout/grid-layout-extended/grid-layout-extended.component.html: -------------------------------------------------------------------------------- 1 |

Grid Layout - extended

2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/guides/grid-layout/grid-layout-multiple-containers/grid-layout-multiple-containers.component.html: -------------------------------------------------------------------------------- 1 |

Grid Layout - multiple grid containers

2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/guides/grid-layout/grid-layout-single-container/grid-layout-single-container.component.html: -------------------------------------------------------------------------------- 1 |

Grid Layout - single grid container

2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/guides/guides.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { RouterLink } from '@angular/router'; 3 | 4 | @Component({ 5 | selector: 'cookbook-guides', 6 | templateUrl: './guides.component.html', 7 | styleUrls: ['./guides.component.scss'], 8 | imports: [RouterLink], 9 | }) 10 | export class GuidesComponent {} 11 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/guides/virtual-scroll/virtual-scroll-list/virtual-scroll-list.component.html: -------------------------------------------------------------------------------- 1 |

Virtual Scroll - List

2 | 3 | 4 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/home/home.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 |
8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/intro/intro.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | img { 4 | max-width: 100%; 5 | display: block; 6 | margin: 0 auto; 7 | margin-bottom: utils.size('xxl'); 8 | } 9 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/intro/intro.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'cookbook-intro', 5 | templateUrl: './intro.component.html', 6 | styleUrls: ['./intro.component.scss'], 7 | }) 8 | export class IntroComponent {} 9 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/page/footer/footer.component.html: -------------------------------------------------------------------------------- 1 |

Kirby Design System™️

2 |

Ⓒ{{ year }}

3 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/page/footer/footer.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | :host { 4 | grid-area: footer; 5 | background-color: utils.get-color('white'); 6 | text-align: center; 7 | padding: utils.size('xl') 0; 8 | 9 | p { 10 | margin: 0; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/page/footer/footer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'cookbook-footer', 5 | templateUrl: './footer.component.html', 6 | styleUrls: ['./footer.component.scss'], 7 | }) 8 | export class FooterComponent { 9 | year: string = new Date(Date.now()).getFullYear().toString(); 10 | } 11 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/shared/code-viewer/code-viewer.component.html: -------------------------------------------------------------------------------- 1 |

{{ languageTitle }}:

2 |
{{code}}{{ languageTitle }}
3 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/shared/example-viewer/example-viewer.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | button[kirby-button] { 6 | display: block; 7 | } 8 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/accordion-showcase/accordion-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | h2:not(:first-child) { 4 | margin-top: utils.size('l'); 5 | } 6 | 7 | cookbook-example-viewer > *:first-child { 8 | display: block; 9 | margin-bottom: utils.size('s'); 10 | max-width: 550px; 11 | } 12 | 13 | h3 { 14 | margin-top: utils.size('l'); 15 | border-bottom: none; 16 | } 17 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/avatar-showcase/avatar-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '../showcase.shared'; 2 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/button-showcase/button-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '../showcase.shared'; 2 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/calendar-showcase/calendar-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '../showcase.shared'; 2 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/card-showcase/card-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | @use '../showcase.shared'; 3 | 4 | h4 { 5 | padding-top: utils.size('s'); 6 | } 7 | 8 | .card-grid { 9 | display: grid; 10 | grid-template-columns: repeat(1, 1fr); 11 | grid-gap: utils.size('s'); 12 | 13 | @include utils.media('>=medium') { 14 | grid-template-columns: repeat(2, 1fr); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/checkbox-showcase/checkbox-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '../showcase.shared'; 2 | @use '@kirbydesign/core/src/scss/utils'; 3 | 4 | h3 { 5 | margin-top: utils.size('l'); 6 | border-bottom: none; 7 | } 8 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/data-table-showcase/data-table-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '../showcase.shared'; 2 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/dropdown-showcase/dropdown-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | h2:not(:first-child) { 4 | margin-top: utils.size('l'); 5 | } 6 | 7 | h3 { 8 | border-bottom: 1px dotted utils.get-color('medium'); 9 | } 10 | 11 | cookbook-example-viewer { 12 | margin-bottom: utils.size('l'); 13 | } 14 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/empty-state-showcase/empty-state-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '../showcase.shared'; 2 | 3 | kirby-flag { 4 | margin-bottom: var(--kirby-spacing-xxs); 5 | } 6 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/fab-sheet-showcase/fab-sheet-showcase.component.scss: -------------------------------------------------------------------------------- 1 | fieldset { 2 | display: inline-block; 3 | } 4 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/flag-showcase/flag-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '../showcase.shared'; 2 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/form-field-showcase/form-field-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | h2:not(:first-child) { 4 | margin-top: utils.size('l'); 5 | } 6 | 7 | h3 { 8 | border-bottom: 1px dotted utils.get-color('medium'); 9 | } 10 | 11 | h4 { 12 | margin-top: utils.size('s'); 13 | } 14 | 15 | cookbook-example-viewer { 16 | margin-bottom: utils.size('l'); 17 | } 18 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/header-showcase/header-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | @use '../showcase.shared'; 3 | 4 | .header-example-container { 5 | margin-bottom: utils.size('l'); 6 | } 7 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/icon-showcase/icon-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '../showcase.shared'; 2 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/item-showcase/item-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | @use '../showcase.shared'; 3 | 4 | .item-illustration { 5 | display: flex; 6 | justify-content: center; 7 | margin: utils.size('m'); 8 | 9 | svg { 10 | max-width: 600px; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/list-experimental-showcase/list-experimental-showcase.component.scss: -------------------------------------------------------------------------------- 1 | .examples { 2 | display: grid; 3 | gap: 3rem; 4 | grid-template-columns: repeat(auto-fill, minmax(40ch, 1fr)); 5 | margin: 2rem 0; 6 | } 7 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/list-load-on-demand-showcase/list-load-on-demand-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '../showcase.shared'; 2 | @use '@kirbydesign/core/src/scss/utils'; 3 | 4 | .example-wrapper { 5 | display: flex; 6 | justify-content: space-between; 7 | margin-top: utils.size('xl'); 8 | margin-bottom: utils.size('xl'); 9 | } 10 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/list-no-shape-showcase/list-no-shape-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | h2:not(:first-child) { 4 | margin-top: utils.size('l'); 5 | } 6 | 7 | cookbook-example-viewer > *:first-child { 8 | display: block; 9 | margin-bottom: utils.size('s'); 10 | max-width: 550px; 11 | } 12 | 13 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/list-showcase/list-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | .page-example { 4 | display: flex; 5 | justify-content: space-between; 6 | margin-top: utils.size('xl'); 7 | margin-bottom: utils.size('xl'); 8 | } 9 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/list-swipe-showcase/list-swipe-showcase.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/loading-overlay-showcase/loading-overlay-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '../showcase.shared'; 2 | 3 | cookbook-loading-overlay-example { 4 | padding: 0; 5 | } 6 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/menu-showcase/menu-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '../showcase.shared'; 2 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/modal-showcase/modal-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '../showcase.shared'; 2 | @use '@kirbydesign/core/src/scss/utils'; 3 | 4 | .large-example { 5 | --docs-demo-device-height: 750px; 6 | } 7 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/page-showcase/page-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | @use '../showcase.shared'; 3 | 4 | .page-example { 5 | display: flex; 6 | margin-top: utils.size('xl'); 7 | margin-bottom: utils.size('xl'); 8 | } 9 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/page-tab-navigation-showcase/tab-navigation-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | @use '../showcase.shared'; 3 | 4 | .example-container { 5 | margin-bottom: utils.size('l'); 6 | } 7 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/radio-showcase/radio-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '../showcase.shared'; 2 | @use '@kirbydesign/core/src/scss/utils'; 3 | 4 | h3 { 5 | margin-top: utils.size('l'); 6 | border-bottom: none; 7 | } 8 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/range-showcase/range-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | @use '../showcase.shared'; 3 | 4 | cookbook-example-viewer { 5 | margin-bottom: utils.size('l'); 6 | background: #fff; 7 | padding: utils.size('s'); 8 | } 9 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/reorder-list-showcase/reorder-list-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | .example-wrapper { 4 | display: flex; 5 | justify-content: space-between; 6 | margin-top: utils.size('xl'); 7 | margin-bottom: utils.size('xl'); 8 | } 9 | 10 | h2 { 11 | margin-top: utils.size('l'); 12 | } 13 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/segmented-control-showcase/segmented-control-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '../showcase.shared'; 2 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/slide-button-showcase/slide-button-showcase.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 7 |
8 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/spinner-showcase/spinner-showcase.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/tabs-showcase/tabs-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | .tabs-example { 4 | display: flex; 5 | margin-top: utils.size('xl'); 6 | margin-bottom: utils.size('xl'); 7 | } 8 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/toast-showcase/toast-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '../showcase.shared'; 2 | @use '@kirbydesign/core/src/scss/utils'; 3 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/toggle-button-showcase/toggle-button-showcase.component.scss: -------------------------------------------------------------------------------- 1 | @use '../showcase.shared'; 2 | @use '@kirbydesign/core/src/scss/utils'; 3 | 4 | cookbook-toggle-button-example { 5 | padding: 0; 6 | margin-bottom: utils.size('s'); 7 | } 8 | -------------------------------------------------------------------------------- /apps/cookbook/src/app/showcase/toolbar-showcase/toolbar-showcase.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'cookbook-toolbar-showcase', 5 | templateUrl: './toolbar-showcase.component.html', 6 | }) 7 | export class ToolbarShowcaseComponent {} 8 | -------------------------------------------------------------------------------- /apps/cookbook/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/cookbook/src/assets/.gitkeep -------------------------------------------------------------------------------- /apps/cookbook/src/assets/component-svg/Card-Kirby-Component-Overview.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/cookbook/src/assets/component-svg/FAB-Kirby-Component-Overview.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/cookbook/src/assets/images/arrow-back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/cookbook/src/assets/images/arrow-back.png -------------------------------------------------------------------------------- /apps/cookbook/src/assets/images/avatar-not-found.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/cookbook/src/assets/images/avatar-not-found.png -------------------------------------------------------------------------------- /apps/cookbook/src/assets/images/de.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/cookbook/src/assets/images/dk.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/cookbook/src/assets/images/kirby-components-w1020.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/cookbook/src/assets/images/kirby-components-w1020.png -------------------------------------------------------------------------------- /apps/cookbook/src/assets/images/kirby-components-w375.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/cookbook/src/assets/images/kirby-components-w375.png -------------------------------------------------------------------------------- /apps/cookbook/src/assets/images/kirby-components-w700.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/cookbook/src/assets/images/kirby-components-w700.png -------------------------------------------------------------------------------- /apps/cookbook/src/assets/images/kirby-components-w800.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/cookbook/src/assets/images/kirby-components-w800.png -------------------------------------------------------------------------------- /apps/cookbook/src/assets/images/woman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/cookbook/src/assets/images/woman.png -------------------------------------------------------------------------------- /apps/cookbook/src/assets/kirby/backgrounds/kirby-card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/cookbook/src/assets/kirby/backgrounds/kirby-card.png -------------------------------------------------------------------------------- /apps/cookbook/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | }; 4 | -------------------------------------------------------------------------------- /apps/cookbook/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/cookbook/src/favicon.ico -------------------------------------------------------------------------------- /apps/cookbook/src/fonts/ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/cookbook/src/fonts/ionicons.ttf -------------------------------------------------------------------------------- /apps/cookbook/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Kirby Design System 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /apps/cookbook/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "types": ["node"] 6 | }, 7 | "files": ["src/main.ts", "src/polyfills.ts"], 8 | "include": ["**/*.ts"], 9 | "exclude": ["src/test.ts", "**/*.spec.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /apps/cookbook/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "types": ["jasmine"], 5 | "allowSyntheticDefaultImports": true, 6 | "esModuleInterop": true, 7 | "skipLibCheck": true 8 | }, 9 | "include": [], 10 | "files": [], 11 | "references": [ 12 | { 13 | "path": "./tsconfig.app.json" 14 | }, 15 | { 16 | "path": "./tsconfig.spec.json" 17 | } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /apps/cookbook/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "types": ["jasmine", "node"] 6 | }, 7 | "files": ["src/test.ts", "src/polyfills.ts"], 8 | "include": ["**/*.spec.ts", "**/*.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /apps/flows/android/app/.gitignore: -------------------------------------------------------------------------------- 1 | /build/* 2 | !/build/.npmkeep 3 | -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/java/io/ionic/starter/MainActivity.java: -------------------------------------------------------------------------------- 1 | package io.ionic.starter; 2 | 3 | import com.getcapacitor.BridgeActivity; 4 | 5 | public class MainActivity extends BridgeActivity {} 6 | -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/drawable-land-hdpi/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/drawable-land-hdpi/splash.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/drawable-land-mdpi/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/drawable-land-mdpi/splash.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/drawable-land-xhdpi/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/drawable-land-xhdpi/splash.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/drawable-land-xxhdpi/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/drawable-land-xxhdpi/splash.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/drawable-land-xxxhdpi/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/drawable-land-xxxhdpi/splash.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/drawable-port-hdpi/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/drawable-port-hdpi/splash.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/drawable-port-mdpi/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/drawable-port-mdpi/splash.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/drawable-port-xhdpi/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/drawable-port-xhdpi/splash.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/drawable-port-xxhdpi/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/drawable-port-xxhdpi/splash.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/drawable-port-xxxhdpi/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/drawable-port-xxxhdpi/splash.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/drawable/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/drawable/splash.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/values/ic_launcher_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #FFFFFF 4 | -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | flows-app 4 | flows-app 5 | io.ionic.starter 6 | io.ionic.starter 7 | 8 | -------------------------------------------------------------------------------- /apps/flows/android/app/src/main/res/xml/file_paths.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /apps/flows/android/capacitor.settings.gradle: -------------------------------------------------------------------------------- 1 | // DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN 2 | include ':capacitor-android' 3 | project(':capacitor-android').projectDir = new File('../../../node_modules/@capacitor/android/capacitor') 4 | 5 | include ':capacitor-status-bar' 6 | project(':capacitor-status-bar').projectDir = new File('../../../node_modules/@capacitor/status-bar/android') 7 | -------------------------------------------------------------------------------- /apps/flows/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /apps/flows/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-7.4.2-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /apps/flows/android/settings.gradle: -------------------------------------------------------------------------------- 1 | include ':app' 2 | include ':capacitor-cordova-android-plugins' 3 | project(':capacitor-cordova-android-plugins').projectDir = new File('./capacitor-cordova-android-plugins/') 4 | 5 | apply from: 'capacitor.settings.gradle' -------------------------------------------------------------------------------- /apps/flows/ios/.gitignore: -------------------------------------------------------------------------------- 1 | App/build 2 | App/Pods 3 | App/Podfile.lock 4 | App/App/public 5 | DerivedData 6 | xcuserdata 7 | 8 | # Cordova plugins for Capacitor 9 | capacitor-cordova-ios-plugins 10 | 11 | # Generated Config files 12 | App/App/capacitor.config.json 13 | App/App/config.xml 14 | -------------------------------------------------------------------------------- /apps/flows/ios/App/App.xcodeproj/project.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/flows/ios/App/App.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /apps/flows/ios/App/App.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-20x20@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-20x20@1x.png -------------------------------------------------------------------------------- /apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-20x20@2x-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-20x20@2x-1.png -------------------------------------------------------------------------------- /apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-20x20@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-20x20@2x.png -------------------------------------------------------------------------------- /apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-20x20@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-20x20@3x.png -------------------------------------------------------------------------------- /apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-29x29@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-29x29@1x.png -------------------------------------------------------------------------------- /apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-29x29@2x-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-29x29@2x-1.png -------------------------------------------------------------------------------- /apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-29x29@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-29x29@2x.png -------------------------------------------------------------------------------- /apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-29x29@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-29x29@3x.png -------------------------------------------------------------------------------- /apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-40x40@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-40x40@1x.png -------------------------------------------------------------------------------- /apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-40x40@2x-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-40x40@2x-1.png -------------------------------------------------------------------------------- /apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-40x40@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-40x40@2x.png -------------------------------------------------------------------------------- /apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-40x40@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-40x40@3x.png -------------------------------------------------------------------------------- /apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png -------------------------------------------------------------------------------- /apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-60x60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-60x60@2x.png -------------------------------------------------------------------------------- /apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-60x60@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-60x60@3x.png -------------------------------------------------------------------------------- /apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-76x76@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-76x76@1x.png -------------------------------------------------------------------------------- /apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-76x76@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-76x76@2x.png -------------------------------------------------------------------------------- /apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-83.5x83.5@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-83.5x83.5@2x.png -------------------------------------------------------------------------------- /apps/flows/ios/App/App/Assets.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info": { 3 | "version": 1, 4 | "author": "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /apps/flows/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png -------------------------------------------------------------------------------- /apps/flows/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png -------------------------------------------------------------------------------- /apps/flows/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732.png -------------------------------------------------------------------------------- /apps/flows/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /apps/flows/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { StatusBar, Style } from '@capacitor/status-bar'; 3 | 4 | @Component({ 5 | selector: 'flows-root', 6 | templateUrl: './app.component.html', 7 | standalone: false, 8 | }) 9 | export class AppComponent implements OnInit { 10 | title = 'flows'; 11 | 12 | ngOnInit() { 13 | StatusBar.setStyle({ style: Style.Light }); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /apps/flows/src/app/long-list-flow/list-item/list-item.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | import { Transaction } from '../../transaction'; 4 | 5 | @Component({ 6 | selector: 'list-item', 7 | templateUrl: './list-item.component.html', 8 | standalone: false, 9 | }) 10 | export class ListItemComponent { 11 | @Input() transaction: Transaction; 12 | } 13 | -------------------------------------------------------------------------------- /apps/flows/src/app/long-list-flow/long-list-flow.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /apps/flows/src/app/long-list-flow/long-list-flow.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'long-list-flow', 5 | templateUrl: './long-list-flow.component.html', 6 | standalone: false, 7 | }) 8 | export class LongListFlowComponent {} 9 | -------------------------------------------------------------------------------- /apps/flows/src/app/long-list-flow/long-list/long-list.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | position: absolute; 3 | inset: 0; 4 | } 5 | 6 | kirby-list-experimental + kirby-list-experimental { 7 | margin-top: 2em; 8 | } 9 | -------------------------------------------------------------------------------- /apps/flows/src/app/transaction-details-flow/transaction-details-flow.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'kirbydesign-transaction-details-flow', 5 | templateUrl: './transaction-details-flow.component.html', 6 | standalone: false, 7 | }) 8 | export class TransactionDetailsFlowComponent {} 9 | -------------------------------------------------------------------------------- /apps/flows/src/app/transaction-details-flow/transaction-details/transaction-details.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | .spacing { 4 | margin-block: utils.size('s'); 5 | } 6 | -------------------------------------------------------------------------------- /apps/flows/src/app/transaction-details-flow/transactions/transactions.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | position: absolute; 3 | inset: 0; 4 | } 5 | -------------------------------------------------------------------------------- /apps/flows/src/app/transaction.ts: -------------------------------------------------------------------------------- 1 | export interface Transaction { 2 | id: string; 3 | text: string; 4 | amount: { 5 | amount: number; 6 | currencyCode: string; 7 | }; 8 | iconName: string; 9 | date: { 10 | epoch: number; 11 | utc: string; 12 | }; 13 | category: { 14 | id: string; 15 | }; 16 | balance: { 17 | amount: number; 18 | }; 19 | balanced: boolean; 20 | } 21 | -------------------------------------------------------------------------------- /apps/flows/src/app/transfer-and-pay-flow/account.model.ts: -------------------------------------------------------------------------------- 1 | export interface Account { 2 | id: number; 3 | name: string; 4 | } 5 | -------------------------------------------------------------------------------- /apps/flows/src/app/transfer-and-pay-flow/choose-date/choose-date.component.html: -------------------------------------------------------------------------------- 1 | Choose date 2 | 3 | 8 | 9 | 10 |
11 | 12 |
13 | -------------------------------------------------------------------------------- /apps/flows/src/app/transfer-and-pay-flow/choose-date/choose-date.component.scss: -------------------------------------------------------------------------------- 1 | .button-save-center { 2 | display: flex; 3 | justify-content: center; 4 | padding-top: 1em; 5 | } 6 | -------------------------------------------------------------------------------- /apps/flows/src/app/transfer-and-pay-flow/choose-receiver/choose-receiver.component.scss: -------------------------------------------------------------------------------- 1 | .segmented-control { 2 | padding-bottom: 2em; 3 | } 4 | -------------------------------------------------------------------------------- /apps/flows/src/app/transfer-and-pay-flow/choose-text-and-message/choose-text-and-message.component.scss: -------------------------------------------------------------------------------- 1 | .ok-button { 2 | display: flex; 3 | justify-content: center; 4 | } 5 | -------------------------------------------------------------------------------- /apps/flows/src/app/transfer-and-pay-flow/detail.model.ts: -------------------------------------------------------------------------------- 1 | import { Transfer } from './transfer.model'; 2 | export interface Detail extends Transfer { 3 | amount: string; 4 | from: string; 5 | receiver: string; 6 | text: string; 7 | message: string; 8 | date: string; 9 | } 10 | -------------------------------------------------------------------------------- /apps/flows/src/app/transfer-and-pay-flow/details/details.component.scss: -------------------------------------------------------------------------------- 1 | .center-button { 2 | display: flex; 3 | justify-content: center; 4 | padding-top: 1em; 5 | } 6 | -------------------------------------------------------------------------------- /apps/flows/src/app/transfer-and-pay-flow/home-page/home-page.component.scss: -------------------------------------------------------------------------------- 1 | .align-text-center { 2 | text-align: center; 3 | } 4 | 5 | .container-middle { 6 | width: 10rem; 7 | height: 5rem; 8 | position: absolute; 9 | inset: 0; 10 | margin: auto; 11 | } 12 | -------------------------------------------------------------------------------- /apps/flows/src/app/transfer-and-pay-flow/other-page/other-page.component.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | justify-content: space-between; 4 | gap: 2em; 5 | white-space: nowrap; 6 | } 7 | 8 | .padding-title { 9 | padding-bottom: 1em; 10 | padding-top: 1em; 11 | } 12 | -------------------------------------------------------------------------------- /apps/flows/src/app/transfer-and-pay-flow/other.model.ts: -------------------------------------------------------------------------------- 1 | import { Account } from './account.model'; 2 | 3 | export interface Other extends Account { 4 | registerNumber: string; 5 | accountNumber: string; 6 | } 7 | -------------------------------------------------------------------------------- /apps/flows/src/app/transfer-and-pay-flow/own-account.model.ts: -------------------------------------------------------------------------------- 1 | import { Account } from './account.model'; 2 | 3 | export interface OwnAccount extends Account { 4 | balance: number; 5 | selected: boolean; 6 | } 7 | -------------------------------------------------------------------------------- /apps/flows/src/app/transfer-and-pay-flow/transfer-and-pay-flow.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | For you 5 | 6 | 7 | 8 | 9 | Account 10 | 11 | 12 | -------------------------------------------------------------------------------- /apps/flows/src/app/transfer-and-pay-flow/transfer-registered/transfer-registered.component.scss: -------------------------------------------------------------------------------- 1 | .center { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | padding-bottom: 1em; 6 | } 7 | -------------------------------------------------------------------------------- /apps/flows/src/app/transfer-and-pay-flow/transfer.model.ts: -------------------------------------------------------------------------------- 1 | export interface Transfer { 2 | detailAreVerified: false; 3 | } 4 | -------------------------------------------------------------------------------- /apps/flows/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/apps/flows/src/assets/.gitkeep -------------------------------------------------------------------------------- /apps/flows/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | }; 4 | -------------------------------------------------------------------------------- /apps/flows/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic() 12 | .bootstrapModule(AppModule) 13 | .catch((err) => console.error(err)); 14 | -------------------------------------------------------------------------------- /apps/flows/src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | 3 | @use '@kirbydesign/core/src/scss/global-styles'; 4 | @use '@kirbydesign/core/src/scss/utils'; 5 | 6 | html { 7 | background-color: var(--kirby-background-color); 8 | } 9 | -------------------------------------------------------------------------------- /apps/flows/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "types": [] 6 | }, 7 | "files": ["src/main.ts", "src/polyfills.ts"], 8 | "include": ["src/**/*.d.ts"], 9 | "exclude": ["**/*.test.ts", "**/*.spec.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /apps/flows/tsconfig.editor.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "include": ["**/*.ts"], 4 | "compilerOptions": { 5 | "types": ["jasmine", "node"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /apps/flows/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "types": ["jasmine", "node"] 6 | }, 7 | "files": ["src/test.ts", "src/polyfills.ts"], 8 | "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "flows-app", 4 | "webDir": "./dist/apps/flows", 5 | "bundledWebRuntime": false, 6 | "ios": { 7 | "path": "./apps/flows/ios" 8 | }, 9 | "android": { 10 | "path": "./apps/flows/android" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /jest.config.ts: -------------------------------------------------------------------------------- 1 | import { getJestProjectsAsync } from '@nx/jest'; 2 | 3 | export default async () => ({ 4 | projects: await getJestProjectsAsync(), 5 | }); 6 | -------------------------------------------------------------------------------- /libs/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/libs/.gitkeep -------------------------------------------------------------------------------- /libs/angular/.lintstagedrc: -------------------------------------------------------------------------------- 1 | { 2 | "*.{ts,json,md,scss,html}": [ 3 | "prettier --write", 4 | "git add" 5 | ], 6 | "*.ts": [ 7 | "eslint --fix", 8 | "git add" 9 | ], 10 | "*.scss": [ 11 | "stylelint --fix", 12 | "git add" 13 | ] 14 | } -------------------------------------------------------------------------------- /libs/angular/badge/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/angular/badge/src/public_api.ts: -------------------------------------------------------------------------------- 1 | // AUTO-GENERATED - PLEASE DON'T EDIT THIS FILE MANUALLY. 2 | import { KirbyBadgeElement } from '@kirbydesign/core/badge.element'; 3 | export * from './badge.component'; 4 | KirbyBadgeElement.define(); 5 | -------------------------------------------------------------------------------- /libs/angular/index.ts: -------------------------------------------------------------------------------- 1 | // All components should be imported through their individual entry-points. 2 | // This file and empty export is needed to satisfy ng_packagr. 3 | // This workaround is inspired by Material Design https://github.com/angular/components/blob/main/src/material/index.ts 4 | export default {}; 5 | -------------------------------------------------------------------------------- /libs/angular/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "dist/", 4 | "lib": { 5 | "entryFile": "index.ts" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /libs/angular/spinner/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/angular/spinner/src/public_api.ts: -------------------------------------------------------------------------------- 1 | // AUTO-GENERATED - PLEASE DON'T EDIT THIS FILE MANUALLY. 2 | import { KirbySpinnerElement } from '@kirbydesign/core/spinner.element'; 3 | export * from './spinner.component'; 4 | KirbySpinnerElement.define(); 5 | -------------------------------------------------------------------------------- /libs/angular/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "declaration": true, 5 | "declarationMap": true, 6 | "inlineSources": true, 7 | "sourceMap": true, 8 | "types": [] 9 | }, 10 | "include": ["**/*.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /libs/angular/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.lib.json", 3 | "compilerOptions": { 4 | "declarationMap": false 5 | }, 6 | "angularCompilerOptions": { 7 | "compilationMode": "partial" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /libs/core/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src'; 2 | -------------------------------------------------------------------------------- /libs/core/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "core", 3 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 4 | "sourceRoot": "libs/core/src", 5 | "projectType": "library" 6 | } 7 | -------------------------------------------------------------------------------- /libs/core/src/badge/index.ts: -------------------------------------------------------------------------------- 1 | import { KirbyBadgeElement } from './badge.element'; 2 | 3 | export * from './badge.element'; 4 | 5 | KirbyBadgeElement.define(); 6 | 7 | declare global { 8 | interface HTMLElementTagNameMap { 9 | 'kirby-badge': KirbyBadgeElement; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /libs/core/src/helpers/color-helper.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:meta'; 2 | @use 'sass-to-ts'; 3 | @use '../scss/themes/colors'; 4 | 5 | @include sass-to-ts.output-styles(meta.module-variables('colors')); 6 | -------------------------------------------------------------------------------- /libs/core/src/helpers/index.ts: -------------------------------------------------------------------------------- 1 | export * from './color-helper'; 2 | export * from './design-token-helper'; 3 | export * from './theme-color.type'; 4 | export * from './string-helper'; 5 | -------------------------------------------------------------------------------- /libs/core/src/helpers/theme-color.type.ts: -------------------------------------------------------------------------------- 1 | export type ThemeColor = 2 | | 'primary' 3 | | 'secondary' 4 | | 'tertiary' 5 | | 'success' 6 | | 'warning' 7 | | 'danger' 8 | | 'light' 9 | | 'medium' 10 | | 'dark' 11 | | 'white'; 12 | -------------------------------------------------------------------------------- /libs/core/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './helpers'; 2 | -------------------------------------------------------------------------------- /libs/core/src/scss/base/_html-list.scss: -------------------------------------------------------------------------------- 1 | ul, 2 | ol { 3 | margin-inline-start: 0.25em; 4 | padding-inline-start: 1em; 5 | line-height: 1.5; 6 | } 7 | 8 | li li, 9 | li + li { 10 | margin-block-start: 0.5em; 11 | } 12 | -------------------------------------------------------------------------------- /libs/core/src/scss/base/_item-typography.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:list'; 2 | 3 | $slotted-text-elements-base: h1, h2, h3, h4, h5, h6, data; 4 | $slotted-text-elements: list.append($slotted-text-elements-base, p); 5 | -------------------------------------------------------------------------------- /libs/core/src/scss/base/_line-clamp.scss: -------------------------------------------------------------------------------- 1 | .kirby-line-clamp { 2 | /* stylelint-disable value-no-vendor-prefix */ 3 | display: -webkit-box; 4 | -webkit-line-clamp: var(--line-clamp, none); 5 | -webkit-box-orient: vertical; 6 | overflow: hidden; 7 | } 8 | -------------------------------------------------------------------------------- /libs/core/src/scss/interaction-state/README.md: -------------------------------------------------------------------------------- 1 | # Interaction State 2 | 3 | Visual indicators for UI states on non-touch devices. 4 | 5 | ## Hover 6 | 7 | TBD 8 | 9 | ### State layer solution 10 | 11 | TBD 12 | 13 | ### Custom solutions for Ionic components 14 | 15 | TBD 16 | 17 | ## Active/pressed 18 | 19 | TBD 20 | 21 | ## Focus 22 | 23 | TBD 24 | 25 | ## Disabled 26 | 27 | TBD 28 | -------------------------------------------------------------------------------- /libs/core/src/scss/interaction-state/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'active'; 2 | @forward 'focus'; 3 | @forward 'hover'; 4 | @forward 'layer' hide apply-state; 5 | @forward 'interaction-state.utilities'; 6 | -------------------------------------------------------------------------------- /libs/core/src/scss/opt-out/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'link'; 2 | -------------------------------------------------------------------------------- /libs/core/src/scss/opt-out/_link.scss: -------------------------------------------------------------------------------- 1 | @mixin link { 2 | text-decoration: revert; 3 | } 4 | -------------------------------------------------------------------------------- /libs/core/src/scss/print/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'generic'; 2 | @forward 'elements'; 3 | @forward 'components'; 4 | -------------------------------------------------------------------------------- /libs/core/src/scss/print/components/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'kirby-app'; 2 | @forward 'kirby-fab-sheet'; 3 | @forward 'kirby-list'; 4 | @forward 'kirby-modal-wrapper'; 5 | @forward 'kirby-page'; 6 | @forward 'kirby-router-outlet'; 7 | @forward 'kirby-tab-bar'; 8 | -------------------------------------------------------------------------------- /libs/core/src/scss/print/components/_kirby-fab-sheet.scss: -------------------------------------------------------------------------------- 1 | @media print { 2 | kirby-fab-sheet { 3 | display: none !important; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /libs/core/src/scss/print/components/_kirby-page.scss: -------------------------------------------------------------------------------- 1 | @media print { 2 | kirby-page-actions { 3 | display: none !important; 4 | } 5 | 6 | ion-header { 7 | display: none !important; 8 | } 9 | 10 | ion-content { 11 | padding: initial !important; 12 | } 13 | 14 | .page-title { 15 | margin: initial !important; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /libs/core/src/scss/print/components/_kirby-router-outlet.scss: -------------------------------------------------------------------------------- 1 | @media print { 2 | kirby-router-outlet { 3 | // Part of making sure you can print more than a single page 4 | display: contents !important; 5 | 6 | // Part of making sure you can print more than a single page 7 | ion-router-outlet { 8 | display: contents !important; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /libs/core/src/scss/print/elements/_button.scss: -------------------------------------------------------------------------------- 1 | @media print { 2 | // Buttons do not make much sense on print, but this may be too far reaching 3 | button { 4 | display: none !important; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /libs/core/src/scss/print/elements/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'button'; 2 | @forward 'page'; 3 | @forward 'preformatted-text'; 4 | -------------------------------------------------------------------------------- /libs/core/src/scss/print/elements/_page.scss: -------------------------------------------------------------------------------- 1 | @media print { 2 | html, 3 | body { 4 | height: auto !important; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /libs/core/src/scss/print/elements/_preformatted-text.scss: -------------------------------------------------------------------------------- 1 | @media print { 2 | pre { 3 | width: max-content !important; 4 | margin: auto !important; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /libs/core/src/scss/print/generic/_colors.scss: -------------------------------------------------------------------------------- 1 | @media print { 2 | *, 3 | ::before, 4 | ::after { 5 | color: #000 !important; 6 | background-color: transparent !important; 7 | 8 | --background: transparent !important; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /libs/core/src/scss/print/generic/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'colors'; 2 | @forward 'page'; 3 | @forward 'reset'; 4 | @forward 'typography'; 5 | -------------------------------------------------------------------------------- /libs/core/src/scss/print/generic/_reset.scss: -------------------------------------------------------------------------------- 1 | // Generic reset 2 | // This targets *all* elements so be careful which declarations are made 3 | @media print { 4 | *, 5 | *::before, 6 | *::after { 7 | box-shadow: none !important; 8 | max-width: none !important; 9 | border-radius: 0 !important; 10 | contain: initial !important; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /libs/core/src/scss/themes/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'component-themes'; 2 | @forward 'item-sliding'; 3 | -------------------------------------------------------------------------------- /libs/core/src/scss/themes/design-tokens.scss: -------------------------------------------------------------------------------- 1 | @use '../utils'; 2 | 3 | :root, 4 | :host { 5 | @include utils.tokens-all; 6 | } 7 | -------------------------------------------------------------------------------- /libs/core/src/spinner/index.ts: -------------------------------------------------------------------------------- 1 | import { KirbySpinnerElement } from './spinner.element'; 2 | 3 | export * from './spinner.element'; 4 | 5 | KirbySpinnerElement.define(); 6 | 7 | declare global { 8 | interface HTMLElementTagNameMap { 9 | 'kirby-spinner': KirbySpinnerElement; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /libs/core/src/styles/element.base.styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from 'lit'; 2 | 3 | export default css` 4 | :host { 5 | box-sizing: border-box; 6 | } 7 | 8 | :host *, 9 | :host *::before, 10 | :host *::after { 11 | box-sizing: inherit; 12 | } 13 | 14 | [hidden] { 15 | display: none !important; 16 | } 17 | `; 18 | -------------------------------------------------------------------------------- /libs/core/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "./dist", 5 | "rootDir": "src", 6 | "skipLibCheck": true, 7 | "declaration": true, 8 | "declarationDir": "./dist/types" 9 | }, 10 | "include": ["src"], 11 | "exclude": ["src/**/*.spec.ts", "../../node_modules"] 12 | } 13 | -------------------------------------------------------------------------------- /libs/designsystem/.lintstagedrc: -------------------------------------------------------------------------------- 1 | { 2 | "*.{ts,json,md,scss,html}": [ 3 | "prettier --write", 4 | "git add" 5 | ], 6 | "*.ts": [ 7 | "eslint --fix", 8 | "git add" 9 | ], 10 | "*.scss": [ 11 | "stylelint --fix", 12 | "git add" 13 | ] 14 | } -------------------------------------------------------------------------------- /libs/designsystem/.storybook/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/libs/designsystem/.storybook/styles.css -------------------------------------------------------------------------------- /libs/designsystem/.storybook/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "emitDecoratorMetadata": true, 5 | "skipLibCheck": true 6 | }, 7 | "exclude": ["../**/*.spec.ts", "../testing*/**"], 8 | "include": ["../**/*.stories.ts", "../**/*.mdx", "*.js", "*.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /libs/designsystem/README.md: -------------------------------------------------------------------------------- 1 | # designsystem 2 | 3 | This library was generated with [Nx](https://nx.dev). 4 | 5 | ## Running unit tests 6 | 7 | Run `nx test designsystem` to execute the unit tests. 8 | -------------------------------------------------------------------------------- /libs/designsystem/accordion/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/accordion/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/accordion/src/accordion.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[kirbyAccordion], kirby-accordion', 5 | exportAs: 'kirby-accordion', 6 | standalone: false, 7 | }) 8 | export class AccordionDirective {} 9 | -------------------------------------------------------------------------------- /libs/designsystem/accordion/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/accordion/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './accordion.directive'; 2 | export * from './accordion-item.component'; 3 | export * from './accordion.module'; 4 | -------------------------------------------------------------------------------- /libs/designsystem/action-group/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/action-group/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/action-group/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/action-group/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export { 2 | ActionGroupComponent, 3 | ActionGroupConfig, 4 | ACTIONGROUP_CONFIG, 5 | } from './action-group.component'; 6 | -------------------------------------------------------------------------------- /libs/designsystem/avatar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/avatar/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/avatar/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/avatar/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './avatar.component'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/badge/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/badge/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/badge/src/badge.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ text }} 5 | 6 | -------------------------------------------------------------------------------- /libs/designsystem/badge/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/badge/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export { BadgeSize, BadgeComponent } from './badge.component'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/button/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/button/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/button/src/button.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /libs/designsystem/button/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/button/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export { ButtonComponent, ButtonSize, AttentionLevel } from './button.component'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/calendar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/calendar/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/calendar/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/calendar/src/interfaces/calendar-options.ts: -------------------------------------------------------------------------------- 1 | import { CalendarDay } from './calendar-day'; 2 | 3 | export interface CalendarOptions { 4 | canNavigateBack: boolean; 5 | canNavigateForward: boolean; 6 | year: string; 7 | monthName: string; 8 | weekDays: string[]; 9 | month: CalendarDay[][]; 10 | } 11 | -------------------------------------------------------------------------------- /libs/designsystem/calendar/src/interfaces/calendar-year-navigator-config.ts: -------------------------------------------------------------------------------- 1 | export type CalendarYearNavigatorConfig = { 2 | from: number | Date; 3 | to: number | Date; 4 | }; 5 | -------------------------------------------------------------------------------- /libs/designsystem/calendar/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export { CalendarComponent, Locale } from './calendar.component'; 2 | export { CalendarYearNavigatorConfig } from './interfaces/calendar-year-navigator-config'; 3 | -------------------------------------------------------------------------------- /libs/designsystem/card/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/card/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/card/src/card-flag-level.ts: -------------------------------------------------------------------------------- 1 | import { NotificationColor } from '@kirbydesign/designsystem/helpers'; 2 | 3 | export type CardFlagLevel = NotificationColor | 'info' | null; 4 | -------------------------------------------------------------------------------- /libs/designsystem/card/src/card-footer/card-footer.component.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /libs/designsystem/card/src/card-header/card-header.component.html: -------------------------------------------------------------------------------- 1 |

{{ title }}

2 |

{{ subtitle }}

3 | 4 | -------------------------------------------------------------------------------- /libs/designsystem/card/src/card.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 |
5 | 6 |
7 | 8 |
9 | -------------------------------------------------------------------------------- /libs/designsystem/card/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/card/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './card-footer/card-footer.component'; 2 | export * from './card-header/card-header.component'; 3 | 4 | export * from './card-as-button/card-as-button.directive'; 5 | 6 | export * from './card-flag-level'; 7 | export * from './card.component'; 8 | export * from './card.module'; 9 | -------------------------------------------------------------------------------- /libs/designsystem/chart/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/chart/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/chart/src/chart-config/chart-base-config.ts: -------------------------------------------------------------------------------- 1 | import { ChartConfiguration, ChartType, TooltipOptions } from 'chart.js'; 2 | 3 | export class ChartBaseConfig { 4 | public static baseConfig: ChartConfiguration; 5 | public static tooltipPlugin: Partial>; 6 | public static registerPlugins = () => {}; 7 | } 8 | -------------------------------------------------------------------------------- /libs/designsystem/chart/src/chart-config/chart-stock-config/vertical-line-plugin/vertical-line-plugin.model.ts: -------------------------------------------------------------------------------- 1 | import { Plugin } from 'chart.js'; 2 | 3 | export interface VerticalLinePlugin extends Plugin { 4 | id: string; 5 | drawTime: string; 6 | line?: { 7 | color: string; 8 | }; 9 | defaults?: { 10 | width: number; 11 | color: string; 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /libs/designsystem/chart/src/chart-config/index.ts: -------------------------------------------------------------------------------- 1 | export * from './chart-stock-config/chart-stock-config'; 2 | export * from './chart-bar-config/chart-bar-config'; 3 | -------------------------------------------------------------------------------- /libs/designsystem/chart/src/chart/index.ts: -------------------------------------------------------------------------------- 1 | export { ChartComponent } from './chart.component'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/chart/src/charts.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { ChartComponent } from './chart'; 4 | import { ChartConfigService } from './shared'; 5 | import { StockChartComponent } from './stock-chart'; 6 | 7 | @NgModule({ 8 | declarations: [ChartComponent, StockChartComponent], 9 | exports: [ChartComponent, StockChartComponent], 10 | providers: [ChartConfigService], 11 | }) 12 | export class ChartsModule {} 13 | -------------------------------------------------------------------------------- /libs/designsystem/chart/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './chart'; 2 | export * from './stock-chart'; 3 | export * from './shared'; 4 | 5 | export { ChartsModule } from './charts.module'; 6 | 7 | export * from './chart-config/chart-bar-config/chart-bar-config'; 8 | export * from './chart-config/chart-stock-config/chart-stock-config'; 9 | -------------------------------------------------------------------------------- /libs/designsystem/chart/src/shared/base-chart/base-chart.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 5 | 6 | 7 |
8 | -------------------------------------------------------------------------------- /libs/designsystem/chart/src/shared/base-chart/base-chart.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | div { 3 | height: var(--kirby-chart-height, 300px); 4 | position: relative; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /libs/designsystem/chart/src/shared/base-chart/index.ts: -------------------------------------------------------------------------------- 1 | export { BaseChartComponent } from './base-chart.component'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/chart/src/shared/chart-config-service/index.ts: -------------------------------------------------------------------------------- 1 | export { ChartConfigService } from './chart-config.service'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/chart/src/shared/chart-js-service/index.ts: -------------------------------------------------------------------------------- 1 | export { ChartJSService } from './chart-js.service'; 2 | export * from './test-utils'; 3 | -------------------------------------------------------------------------------- /libs/designsystem/chart/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export * from './charts.types'; 2 | export * from './base-chart'; 3 | export * from './chart-js-service'; 4 | export * from './chart-config-service'; 5 | -------------------------------------------------------------------------------- /libs/designsystem/chart/src/stock-chart/index.ts: -------------------------------------------------------------------------------- 1 | export * from './stock-chart.component'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/checkbox/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/checkbox/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/checkbox/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './checkbox.component'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/config/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/config/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/config/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/config/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './provide-kirby'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/data-table/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/data-table/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/data-table/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/data-table/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './data-table.module'; 2 | export * from './sortable/sortable.component'; 3 | -------------------------------------------------------------------------------- /libs/designsystem/divider/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/divider/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/divider/src/divider.component.html: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /libs/designsystem/divider/src/divider.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | hr { 4 | margin-top: utils.size('xxs'); 5 | margin-bottom: utils.size('xxs'); 6 | border: 0; 7 | border-top: 1px solid var(--kirby-divider-color, utils.get-color('medium')); 8 | 9 | &.no-margin { 10 | margin-top: 0; 11 | margin-bottom: 0; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /libs/designsystem/divider/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/divider/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './divider.component'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/dropdown/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/dropdown/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/dropdown/src/dropdown.types.ts: -------------------------------------------------------------------------------- 1 | export enum OpenState { 2 | closed, 3 | opening, 4 | open, 5 | } 6 | 7 | export enum VerticalDirection { 8 | up, 9 | down, 10 | } 11 | -------------------------------------------------------------------------------- /libs/designsystem/dropdown/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/dropdown/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './dropdown.component'; 2 | export * from './dropdown.module'; 3 | export * from './dropdown.types'; 4 | export * from './keyboard-handler.service'; 5 | export * from './dropdown.module'; 6 | -------------------------------------------------------------------------------- /libs/designsystem/empty-state/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/empty-state/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/empty-state/src/empty-state.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 | {{ title }} 6 |

{{ subtitle }}

7 |
8 | 9 |
10 |
11 | -------------------------------------------------------------------------------- /libs/designsystem/empty-state/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/empty-state/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './empty-state.component'; 2 | export * from './empty-state.module'; 3 | -------------------------------------------------------------------------------- /libs/designsystem/fab-sheet/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/fab-sheet/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/fab-sheet/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/fab-sheet/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './fab-sheet.component'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/flag/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/flag/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/flag/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/flag/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './flag.component'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/form-field/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/form-field/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/form-field/src/directives/affix/affix.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, Input } from '@angular/core'; 2 | 3 | @Directive({ 4 | standalone: true, 5 | // eslint-disable-next-line 6 | selector: '[kirby-affix]', 7 | }) 8 | export class AffixDirective { 9 | @Input('kirby-affix') type: 'prefix' | 'suffix'; 10 | constructor(public el: ElementRef) {} 11 | } 12 | -------------------------------------------------------------------------------- /libs/designsystem/form-field/src/form-field-message/form-field-message.component.html: -------------------------------------------------------------------------------- 1 | {{ text }} 2 | 3 | -------------------------------------------------------------------------------- /libs/designsystem/form-field/src/form-field-message/form-field-message.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | :host { 4 | font-style: italic; 5 | font-size: utils.font-size('xs'); 6 | font-weight: utils.font-weight('normal'); 7 | font-stretch: normal; 8 | line-height: utils.line-height('xs'); 9 | min-height: utils.line-height('xs'); 10 | letter-spacing: normal; 11 | color: utils.get-text-color('black'); 12 | } 13 | -------------------------------------------------------------------------------- /libs/designsystem/form-field/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/form-field/src/input-counter/input-counter.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /libs/designsystem/form-field/src/textarea/textarea.component.html: -------------------------------------------------------------------------------- 1 | 2 | {{ value }} 3 | -------------------------------------------------------------------------------- /libs/designsystem/header/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/header/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/header/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/header/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export { 2 | HeaderComponent, 3 | HeaderActionsDirective, 4 | HeaderCustomFlagDirective, 5 | HeaderCustomSectionDirective, 6 | HeaderTitleActionIconDirective, 7 | } from './header.component'; 8 | 9 | export { HeaderModule } from './header.module'; 10 | -------------------------------------------------------------------------------- /libs/designsystem/helpers/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/helpers/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/helpers/scss/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/helpers/scss/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/helpers/scss/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/helpers/scss/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './scss-helper'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/helpers/scss/src/scss-helper.ts: -------------------------------------------------------------------------------- 1 | // TODO TRM/JEO Parse from scss files instead!!1!! 2 | export class ScssHelper { 3 | // Breakpoints 4 | public static BREAKPOINT_SCREEN_L = 720; 5 | public static BREAKPOINT_CARD_S = 320; 6 | public static BREAKPOINT_CARD_M = 460; 7 | public static BREAKPOINT_CARD_L = 820; 8 | } 9 | -------------------------------------------------------------------------------- /libs/designsystem/helpers/src/color-helper.ts: -------------------------------------------------------------------------------- 1 | export { ColorHelper, Color, BrandColor, KirbyColor, NotificationColor } from '@kirbydesign/core'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/helpers/src/design-token-helper.ts: -------------------------------------------------------------------------------- 1 | export { 2 | DesignTokenHelper, 3 | ThemeColorDefinition, 4 | ThemeColorExtended, 5 | ThemeColorVariant, 6 | } from '@kirbydesign/core'; 7 | -------------------------------------------------------------------------------- /libs/designsystem/helpers/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/helpers/src/string-helper.ts: -------------------------------------------------------------------------------- 1 | export { 2 | kebabToCamelCase, 3 | kebabToTitleCase, 4 | camelToKebabCase, 5 | capitalizeFirstLetter, 6 | } from '@kirbydesign/core'; 7 | -------------------------------------------------------------------------------- /libs/designsystem/helpers/src/theme-color.type.ts: -------------------------------------------------------------------------------- 1 | export { ThemeColor } from '@kirbydesign/core'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/icon/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/icon/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/icon/src/icon-settings.ts: -------------------------------------------------------------------------------- 1 | export interface Icon { 2 | name: string; 3 | svg?: string; 4 | } 5 | 6 | export interface IconSettings { 7 | icons: Icon[]; 8 | } 9 | -------------------------------------------------------------------------------- /libs/designsystem/icon/src/icon.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /libs/designsystem/icon/src/icons/svg/checkmark-selected.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /libs/designsystem/icon/src/icons/svg/dot.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /libs/designsystem/icon/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/icon/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './icon-registry.service'; 2 | export * from './icon-settings'; 3 | export * from './icon.component'; 4 | export * from './icon.module'; 5 | export * from './kirby-icon-settings'; 6 | -------------------------------------------------------------------------------- /libs/designsystem/item-group/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/item-group/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/item-group/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/item-group/src/item-group.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /libs/designsystem/item-group/src/item-group.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /libs/designsystem/item-group/src/item-group.component.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { Component, HostBinding } from '@angular/core'; 3 | 4 | @Component({ 5 | imports: [CommonModule], 6 | selector: 'kirby-item-group', 7 | templateUrl: './item-group.component.html', 8 | styleUrls: ['./item-group.component.scss'], 9 | }) 10 | export class ItemGroupComponent { 11 | @HostBinding('attr.role') role: string = 'group'; 12 | } 13 | -------------------------------------------------------------------------------- /libs/designsystem/item-group/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './item-group.component'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/item-sliding/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/item-sliding/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/item-sliding/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/item-sliding/src/item-sliding.component.scss: -------------------------------------------------------------------------------- 1 | @use './item-sliding.shared'; 2 | 3 | :host { 4 | display: block; 5 | } 6 | 7 | ion-item-option { 8 | min-width: 92px; 9 | } 10 | -------------------------------------------------------------------------------- /libs/designsystem/item-sliding/src/item-sliding.types.ts: -------------------------------------------------------------------------------- 1 | export type ItemSlidingSide = 'left' | 'right'; 2 | 3 | export type ItemSwipeActionType = 'success' | 'warning' | 'danger'; 4 | 5 | export type ItemSwipeActionSlots = 'start' | 'end'; 6 | 7 | export type ItemSwipeAction = { 8 | title: string; 9 | onSelected: () => void; 10 | icon?: string; 11 | type?: ItemSwipeActionType; 12 | isDisabled?: boolean; 13 | }; 14 | -------------------------------------------------------------------------------- /libs/designsystem/item-sliding/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './item-sliding.types'; 2 | export * from './item-sliding.component'; 3 | -------------------------------------------------------------------------------- /libs/designsystem/item/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/item/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/item/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/item/src/label/label.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /libs/designsystem/item/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export { ItemComponent, ItemSize } from './item.component'; 2 | export { ItemModule } from './item.module'; 3 | export { LabelComponent } from './label/label.component'; 4 | -------------------------------------------------------------------------------- /libs/designsystem/kirby-app/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/kirby-app/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/kirby-app/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/kirby-app/src/kirby-app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /libs/designsystem/kirby-app/src/kirby-app.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | inset: 0; 3 | position: absolute; 4 | contain: size layout style; 5 | z-index: 0; 6 | overflow: hidden; 7 | } 8 | -------------------------------------------------------------------------------- /libs/designsystem/kirby-app/src/kirby-app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { IonApp } from '@ionic/angular/standalone'; 4 | import { AppComponent as KirbyAppComponent } from './kirby-app.component'; 5 | 6 | @NgModule({ 7 | declarations: [KirbyAppComponent], 8 | imports: [CommonModule, IonApp], 9 | exports: [KirbyAppComponent], 10 | }) 11 | export class KirbyAppModule {} 12 | -------------------------------------------------------------------------------- /libs/designsystem/kirby-app/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export { AppComponent } from './kirby-app.component'; 2 | export { KirbyAppModule } from './kirby-app.module'; 3 | -------------------------------------------------------------------------------- /libs/designsystem/list/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/list/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/list/src/directives/index.ts: -------------------------------------------------------------------------------- 1 | export * from './infinite-scroll.directive'; 2 | export * from './list-item-color.directive'; 3 | export * from './scroll.model'; 4 | -------------------------------------------------------------------------------- /libs/designsystem/list/src/directives/scroll.model.ts: -------------------------------------------------------------------------------- 1 | export interface Scroll { 2 | distanceToViewBottom: number; 3 | elementHeight: number; 4 | viewHeight: number; 5 | } 6 | -------------------------------------------------------------------------------- /libs/designsystem/list/src/helpers/index.ts: -------------------------------------------------------------------------------- 1 | export * from './list-helper'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/list/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/list/src/list-experimental/index.ts: -------------------------------------------------------------------------------- 1 | export * from './list-experimental.component'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/list/src/list-experimental/list-experimental.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 |
5 | -------------------------------------------------------------------------------- /libs/designsystem/list/src/list-experimental/list-experimental.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | @use '@kirbydesign/core/src/scss/base/list'; 3 | 4 | :host { 5 | display: block; 6 | } 7 | -------------------------------------------------------------------------------- /libs/designsystem/list/src/list-header/index.ts: -------------------------------------------------------------------------------- 1 | export * from './list-header.component'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/list/src/list-header/list-header.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /libs/designsystem/list/src/list-header/list-header.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | :host { 4 | background-color: transparent; 5 | display: flex; 6 | flex-direction: row; 7 | justify-content: space-between; 8 | width: 100%; 9 | padding: utils.size('m'); 10 | } 11 | -------------------------------------------------------------------------------- /libs/designsystem/list/src/list-header/list-header.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'kirby-list-header', 5 | templateUrl: './list-header.component.html', 6 | styleUrls: ['./list-header.component.scss'], 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false, 9 | }) 10 | export class ListHeaderComponent { 11 | constructor() {} 12 | } 13 | -------------------------------------------------------------------------------- /libs/designsystem/list/src/list-item/index.ts: -------------------------------------------------------------------------------- 1 | export * from './list-item.component'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/list/src/list-item/list-item.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | $divider-color: var(--kirby-list-item-border-color, #{utils.get-color('background-color')}); 4 | 5 | :host { 6 | overflow: hidden; 7 | } 8 | 9 | :host-context(.has-divider) { 10 | ion-item-sliding:not(.last) { 11 | border-bottom: 1px solid $divider-color; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /libs/designsystem/list/src/list-section-header/index.ts: -------------------------------------------------------------------------------- 1 | export * from './list-section-header.component'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/list/src/list-section-header/list-section-header.component.html: -------------------------------------------------------------------------------- 1 |
2 | {{ title }} 3 |
4 | -------------------------------------------------------------------------------- /libs/designsystem/list/src/list-section-header/list-section-header.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'kirby-list-section-header', 5 | templateUrl: './list-section-header.component.html', 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | standalone: false, 8 | }) 9 | export class ListSectionHeaderComponent { 10 | @Input() title: string; 11 | } 12 | -------------------------------------------------------------------------------- /libs/designsystem/list/src/list-swipe-action.ts: -------------------------------------------------------------------------------- 1 | /* Re-export for backwards compatibility */ 2 | export { ListSwipeAction } from './list-swipe-action.type'; 3 | -------------------------------------------------------------------------------- /libs/designsystem/list/src/list.event.ts: -------------------------------------------------------------------------------- 1 | export interface LoadOnDemandEvent { 2 | complete: (disableLoadOnDemand?: boolean) => void; 3 | } 4 | 5 | export interface LoadOnDemandEventData { 6 | object: any; 7 | returnValue: any; 8 | } 9 | -------------------------------------------------------------------------------- /libs/designsystem/list/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './directives'; 2 | export * from './helpers'; 3 | export * from './list-experimental'; 4 | export * from './list-header'; 5 | export * from './list-item'; 6 | export * from './list-section-header'; 7 | 8 | export * from './list-swipe-action'; 9 | 10 | export * from './list.component'; 11 | export * from './list.directive'; 12 | export * from './list.event'; 13 | export * from './list.module'; 14 | -------------------------------------------------------------------------------- /libs/designsystem/loading-overlay/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/loading-overlay/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/loading-overlay/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/loading-overlay/src/loading-overlay.component.html: -------------------------------------------------------------------------------- 1 |
2 |
10 | 11 |
12 |
13 | 14 |
15 |
16 | -------------------------------------------------------------------------------- /libs/designsystem/loading-overlay/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export { LoadingOverlayService } from './loading-overlay.service'; 2 | export { LoadingOverlayComponent } from './loading-overlay.component'; 3 | -------------------------------------------------------------------------------- /libs/designsystem/menu/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/menu/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/menu/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/menu/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export { MenuComponent } from './menu.component'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/modal/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/modal/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/modal/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/modal/src/modal-wrapper/compact/index.ts: -------------------------------------------------------------------------------- 1 | export * from './modal-compact-wrapper.component'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/modal/src/modal-wrapper/compact/modal-compact-wrapper.component.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /libs/designsystem/modal/src/modal-wrapper/compact/modal-compact-wrapper.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | // Global modal styling can be found at scss/base/_ionic.scss 4 | 5 | :host { 6 | display: block; 7 | padding: utils.size('m') utils.size('s'); 8 | } 9 | -------------------------------------------------------------------------------- /libs/designsystem/modal/src/modal-wrapper/config/drawer-supplementary-action.ts: -------------------------------------------------------------------------------- 1 | export class DrawerSupplementaryAction { 2 | iconName: string; 3 | // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type 4 | action: Function; 5 | } 6 | -------------------------------------------------------------------------------- /libs/designsystem/modal/src/modal-wrapper/config/index.ts: -------------------------------------------------------------------------------- 1 | export * from './drawer-supplementary-action'; 2 | export * from './modal-config'; 3 | export * from './modal-config.helper'; 4 | -------------------------------------------------------------------------------- /libs/designsystem/modal/src/modal-wrapper/config/modal-config.helper.ts: -------------------------------------------------------------------------------- 1 | import { InjectionToken } from '@angular/core'; 2 | 3 | export const COMPONENT_PROPS = new InjectionToken('componentProps'); 4 | -------------------------------------------------------------------------------- /libs/designsystem/modal/src/modal-wrapper/index.ts: -------------------------------------------------------------------------------- 1 | export * from './modal-wrapper.component'; 2 | export * from './config/index'; 3 | export * from './compact/index'; 4 | -------------------------------------------------------------------------------- /libs/designsystem/modal/src/modal/action-sheet/config/action-sheet-config.ts: -------------------------------------------------------------------------------- 1 | import { ActionSheetItem } from './action-sheet-item'; 2 | 3 | export interface ActionSheetConfig { 4 | header?: string; 5 | subheader?: string; 6 | items: Array; 7 | cancelButtonText?: string; 8 | } 9 | -------------------------------------------------------------------------------- /libs/designsystem/modal/src/modal/action-sheet/config/action-sheet-item.ts: -------------------------------------------------------------------------------- 1 | export interface ActionSheetItem { 2 | id: string; 3 | text: string; 4 | } 5 | -------------------------------------------------------------------------------- /libs/designsystem/modal/src/modal/action-sheet/index.ts: -------------------------------------------------------------------------------- 1 | export * from './action-sheet.component'; 2 | export * from './config/action-sheet-config'; 3 | export * from './config/action-sheet-item'; 4 | -------------------------------------------------------------------------------- /libs/designsystem/modal/src/modal/alert/index.ts: -------------------------------------------------------------------------------- 1 | export * from './alert.component'; 2 | export * from './config/alert-config'; 3 | -------------------------------------------------------------------------------- /libs/designsystem/modal/src/modal/footer/modal-footer.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /libs/designsystem/modal/src/modal/index.ts: -------------------------------------------------------------------------------- 1 | export { ModalController } from './services/modal.controller'; 2 | export { ModalComponent } from './modal-component/modal.component'; 3 | export { ModalFooterComponent } from './footer/modal-footer.component'; 4 | export * from './action-sheet'; 5 | export * from './alert'; 6 | export * from './services'; 7 | -------------------------------------------------------------------------------- /libs/designsystem/modal/src/modal/services/index.ts: -------------------------------------------------------------------------------- 1 | export * from './modal.helper'; 2 | export * from './action-sheet.helper'; 3 | export * from './alert.helper'; 4 | export * from './modal.controller'; 5 | export * from './can-dismiss.helper'; 6 | export * from './can-dismiss-modal-guard'; 7 | -------------------------------------------------------------------------------- /libs/designsystem/modal/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './modal/index'; 2 | export * from './modal.interfaces'; 3 | export * from './modal-navigation.service'; 4 | export * from './modal-wrapper/index'; 5 | -------------------------------------------------------------------------------- /libs/designsystem/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "dist", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | }, 7 | "allowedNonPeerDependencies": [ 8 | "@fontsource/roboto", 9 | "@ionic/angular", 10 | "@kirbydesign/core", 11 | "@floating-ui/dom", 12 | "@angular/cdk", 13 | "inputmask" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /libs/designsystem/ngcc.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | ignorableDeepImportMatchers: [/inputmask\//], 3 | }; 4 | -------------------------------------------------------------------------------- /libs/designsystem/page/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/page/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/page/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/page/src/page-footer/page-footer.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /libs/designsystem/popover/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/popover/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/popover/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/popover/src/popover.component.spec.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/libs/designsystem/popover/src/popover.component.spec.ts -------------------------------------------------------------------------------- /libs/designsystem/popover/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './popover.component'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/progress-circle/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/progress-circle/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/progress-circle/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/progress-circle/src/progress-circle.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 11 | -------------------------------------------------------------------------------- /libs/designsystem/progress-circle/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './progress-circle.component'; 2 | export * from './progress-circle-ring.component'; 3 | -------------------------------------------------------------------------------- /libs/designsystem/radio/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/radio/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/radio/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/radio/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export { RadioComponent } from './radio.component'; 2 | export { RadioGroupComponent } from './radio-group/radio-group.component'; 3 | export * from './radio-module'; 4 | -------------------------------------------------------------------------------- /libs/designsystem/range/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/range/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/range/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/range/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './range.component'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/reorder-list/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/reorder-list/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/reorder-list/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/reorder-list/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export { ReorderListComponent } from './reorder-list.component'; 2 | 3 | export { ReorderEvent } from './reorder-event'; 4 | -------------------------------------------------------------------------------- /libs/designsystem/router-outlet/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/router-outlet/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/router-outlet/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/router-outlet/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export { RouterOutletComponent } from './router-outlet.component'; 2 | export { RouterOutletModule } from './router-outlet.module'; 3 | /* NavController allows consumers to navigate with correct 4 | animations when using the router outlet */ 5 | export { NavController } from '@ionic/angular/standalone'; 6 | -------------------------------------------------------------------------------- /libs/designsystem/router-outlet/src/router-outlet.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /libs/designsystem/router-outlet/src/router-outlet.component.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/utils'; 2 | 3 | :host { 4 | inset: 0; 5 | position: absolute; 6 | contain: size layout style; 7 | z-index: 0; 8 | overflow: hidden; 9 | background-color: utils.get-color('background-color'); 10 | } 11 | -------------------------------------------------------------------------------- /libs/designsystem/section-header/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/section-header/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/section-header/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/section-header/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './section-header.component'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/section-header/src/section-header.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /libs/designsystem/shared/floating/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/shared/floating/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/shared/floating/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/shared/floating/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export { 2 | FloatingDirective, 3 | TriggerEvent, 4 | FloatingOffset, 5 | PortalOutletConfig, 6 | OutletSelector, 7 | } from './floating.directive'; 8 | -------------------------------------------------------------------------------- /libs/designsystem/shared/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/shared/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/shared/portal/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/shared/portal/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/shared/portal/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/shared/portal/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export { PortalDirective } from './portal.directive'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/shared/src/component-configuration.ts: -------------------------------------------------------------------------------- 1 | import { Type } from '@angular/core'; 2 | 3 | export interface ComponentConfiguration { 4 | component: Type; 5 | data: any; 6 | } 7 | -------------------------------------------------------------------------------- /libs/designsystem/shared/src/dynamic-component.ts: -------------------------------------------------------------------------------- 1 | export interface DynamicComponent { 2 | data: any; 3 | } 4 | -------------------------------------------------------------------------------- /libs/designsystem/shared/src/fit-heading/index.ts: -------------------------------------------------------------------------------- 1 | export * from './fit-heading.directive'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/shared/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/shared/src/translation/translation.interface.ts: -------------------------------------------------------------------------------- 1 | export interface Translation { 2 | $code: string; 3 | back: string; 4 | close: string; 5 | nextMonth: string; 6 | nextSlide: string; 7 | previousMonth: string; 8 | previousSlide: string; 9 | selectYear: string; 10 | readMore: string; 11 | more: string; 12 | } 13 | -------------------------------------------------------------------------------- /libs/designsystem/shared/src/translation/translations/da.ts: -------------------------------------------------------------------------------- 1 | import { Translation } from '../translation.interface'; 2 | 3 | export const da: Translation = { 4 | $code: 'da', 5 | back: 'Tilbage', 6 | close: 'Luk', 7 | nextMonth: 'Næste måned', 8 | nextSlide: 'Næste slide', 9 | previousMonth: 'Forrige måned', 10 | previousSlide: 'Forrige slide', 11 | selectYear: 'Vælg år', 12 | readMore: 'Læs mere', 13 | more: 'Mere', 14 | }; 15 | -------------------------------------------------------------------------------- /libs/designsystem/shared/src/translation/translations/en.ts: -------------------------------------------------------------------------------- 1 | import { Translation } from '../translation.interface'; 2 | 3 | export const en: Translation = { 4 | $code: 'en', 5 | back: 'Back', 6 | close: 'Close', 7 | nextMonth: 'Next month', 8 | nextSlide: 'Next slide', 9 | previousMonth: 'Previous month', 10 | previousSlide: 'Previous slide', 11 | selectYear: 'Select year', 12 | readMore: 'Read more', 13 | more: 'More', 14 | }; 15 | -------------------------------------------------------------------------------- /libs/designsystem/slide-button/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/slide-button/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/slide-button/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/slide-button/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './slide-button.component'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/slide/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/slide/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/slide/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/slide/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export { SlidesComponent, KirbySwiperOptions, SelectedSlide } from './slides.component'; 2 | export { SlideDirective } from './slide.directive'; 3 | export { SlideStretchHeightDirective } from './slide-stretch-height.directive'; 4 | export { SlideModule } from './slide.module'; 5 | -------------------------------------------------------------------------------- /libs/designsystem/slide/src/slide.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[kirbySlide]', 5 | standalone: false, 6 | }) 7 | export class SlideDirective {} 8 | -------------------------------------------------------------------------------- /libs/designsystem/spinner/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/spinner/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/spinner/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/spinner/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export { SpinnerComponent } from './spinner.component'; 2 | export { SpinnerModule } from './spinner.module'; 3 | -------------------------------------------------------------------------------- /libs/designsystem/spinner/src/spinner.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | -------------------------------------------------------------------------------- /libs/designsystem/spinner/src/spinner.component.stories.ts: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from '@storybook/angular'; 2 | 3 | import { SpinnerComponent } from '@kirbydesign/designsystem/spinner'; 4 | 5 | const meta: Meta = { 6 | component: SpinnerComponent, 7 | title: 'Components / Spinner', 8 | }; 9 | export default meta; 10 | type Story = StoryObj; 11 | 12 | export const Spinner: Story = { 13 | args: {}, 14 | }; 15 | -------------------------------------------------------------------------------- /libs/designsystem/spinner/src/spinner.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'kirby-spinner', 5 | templateUrl: './spinner.component.html', 6 | styleUrls: ['./spinner.component.scss'], 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false, 9 | }) 10 | export class SpinnerComponent {} 11 | -------------------------------------------------------------------------------- /libs/designsystem/spinner/src/spinner.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { SpinnerComponent } from './spinner.component'; 5 | 6 | @NgModule({ 7 | declarations: [SpinnerComponent], 8 | imports: [CommonModule], 9 | exports: [SpinnerComponent], 10 | providers: [], 11 | }) 12 | export class SpinnerModule {} 13 | -------------------------------------------------------------------------------- /libs/designsystem/src/index.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/libs/designsystem/src/index.ts -------------------------------------------------------------------------------- /libs/designsystem/src/lib/components/index.ts: -------------------------------------------------------------------------------- 1 | /* prettier-ignore */ 2 | export { SegmentedControlComponent, SegmentedControlMode} from './segmented-control/segmented-control.component'; // See issue #1555 for prettier-ignore explanation 3 | export { SegmentItem } from './segmented-control/segment-item'; 4 | -------------------------------------------------------------------------------- /libs/designsystem/src/lib/components/segmented-control/segment-item.ts: -------------------------------------------------------------------------------- 1 | import { ThemeColor } from '@kirbydesign/core'; 2 | 3 | type SegmentItemBadge = { 4 | content?: string; 5 | icon?: string; 6 | description?: string; 7 | themeColor: ThemeColor; 8 | }; 9 | export interface SegmentItem { 10 | id: string; 11 | text: string; 12 | badge?: SegmentItemBadge; 13 | } 14 | -------------------------------------------------------------------------------- /libs/designsystem/src/lib/directives/index.ts: -------------------------------------------------------------------------------- 1 | export { KeyHandlerDirective } from './key-handler/key-handler.directive'; 2 | 3 | export { ModalRouterLinkDirective } from './modal-router-link/modal-router-link.directive'; 4 | -------------------------------------------------------------------------------- /libs/designsystem/src/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './lib/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/tab-navigation/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/tab-navigation/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/tab-navigation/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/tab-navigation/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export { TabNavigationComponent } from './tab-navigation/tab-navigation.component'; 2 | export { TabNavigationItemComponent } from './tab-navigation-item/tab-navigation-item.component'; 3 | export { TabNavigationModule } from './tab-navigation.module'; 4 | -------------------------------------------------------------------------------- /libs/designsystem/tab-navigation/src/tab-navigation-item/tab-navigation-item.component.html: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /libs/designsystem/tab-navigation/src/tab-navigation/tab-navigation.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /libs/designsystem/tabs/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/tabs/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/tabs/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/tabs/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export { TabsComponent } from './tabs.component'; 2 | export { TabButtonComponent } from './tab-button/tab-button.component'; 3 | export { selectedTabClickEvent } from './tab-button/tab-button.events'; 4 | export { TabsModule } from './tabs.module'; 5 | export { TabsService, IonRouterOutlet } from './tabs.service'; 6 | -------------------------------------------------------------------------------- /libs/designsystem/tabs/src/tab-button/tab-button.events.ts: -------------------------------------------------------------------------------- 1 | export const selectedTabClickEvent = 'kirbySelectedTabClick'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/tabs/src/tabs.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /libs/designsystem/testing-base/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/testing-base/src/lib/index.ts: -------------------------------------------------------------------------------- 1 | export * from './components'; 2 | export * from './directives'; 3 | 4 | export { KirbyTestingBaseModule } from './kirby-testing-base.module'; 5 | -------------------------------------------------------------------------------- /libs/designsystem/testing-base/src/lib/kirby-testing-base.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { MOCK_COMPONENTS } from './mock-components'; 4 | import { MOCK_DIRECTIVES } from './mock-directives'; 5 | 6 | @NgModule({ 7 | imports: [MOCK_COMPONENTS, MOCK_DIRECTIVES], 8 | exports: [MOCK_COMPONENTS, MOCK_DIRECTIVES], 9 | }) 10 | export class KirbyTestingBaseModule {} 11 | -------------------------------------------------------------------------------- /libs/designsystem/testing-base/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './lib/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/testing-base/src/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["../../**/*.ts"] 4 | } 5 | -------------------------------------------------------------------------------- /libs/designsystem/testing-base/testing-jasmine/src/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "paths": { 5 | "@kirbydesign/designsystem": ["libs/designsystem/src/index.ts"], 6 | "@kirbydesign/designsystem/testing-base": ["libs/designsystem/testing-base/src/public_api.ts"] 7 | } 8 | }, 9 | "include": ["../../**/*.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /libs/designsystem/testing-jasmine/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json" 3 | } 4 | -------------------------------------------------------------------------------- /libs/designsystem/testing-jasmine/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './lib/kirby-testing.module'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/testing-jasmine/src/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "paths": { 5 | "@kirbydesign/designsystem": ["libs/designsystem/src/index.ts"], 6 | "@kirbydesign/designsystem/testing-base": ["libs/designsystem/testing-base/src/public_api.ts"] 7 | } 8 | }, 9 | "include": ["../../**/*.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /libs/designsystem/testing-jest/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json" 3 | } 4 | -------------------------------------------------------------------------------- /libs/designsystem/testing-jest/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './lib/kirby-testing.module'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/testing-jest/src/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "paths": { 5 | "@kirbydesign/designsystem": ["libs/designsystem/src/index.ts"], 6 | "@kirbydesign/designsystem/testing-base": ["libs/designsystem/testing-base/src/public_api.ts"] 7 | } 8 | }, 9 | "include": ["../../**/*.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /libs/designsystem/testing/images/woman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/libs/designsystem/testing/images/woman.png -------------------------------------------------------------------------------- /libs/designsystem/testing/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/testing/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/testing/src/element-css-custom-matchers.d.ts: -------------------------------------------------------------------------------- 1 | declare namespace jasmine { 2 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 3 | interface Matchers { 4 | toHaveComputedStyle( 5 | styles: { 6 | [cssProperty: string]: 7 | | string 8 | | import('@kirbydesign/designsystem/helpers').ThemeColorDefinition; 9 | }, 10 | pseudoElt?: string 11 | ): boolean; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /libs/designsystem/testing/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/testing/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './element-css-custom-matchers'; 2 | 3 | export * from './test-helper'; 4 | -------------------------------------------------------------------------------- /libs/designsystem/testing/src/styles.scss: -------------------------------------------------------------------------------- 1 | @use '@kirbydesign/core/src/scss/global-styles'; 2 | 3 | // Ensure height of test window for modal viewport resize observer to work: 4 | body, 5 | html { 6 | height: 100vh; 7 | } 8 | 9 | // Hide svg's from Karma that has to be included as 'dom' filetype 10 | // See: https://github.com/karma-runner/karma/issues/3271#issuecomment-465622874 11 | body > svg { 12 | display: none; 13 | } 14 | -------------------------------------------------------------------------------- /libs/designsystem/toast/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/toast/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/toast/src/config/toast-config.ts: -------------------------------------------------------------------------------- 1 | export interface ToastConfig { 2 | message: string; 3 | messageType: MessageType; 4 | durationInMs?: number; 5 | animated?: boolean; 6 | } 7 | 8 | export type MessageType = 'success' | 'warning'; 9 | -------------------------------------------------------------------------------- /libs/designsystem/toast/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/toast/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './config/toast-config'; 2 | export { ToastController } from './services/toast.controller'; 3 | 4 | export * from './services/indexs'; 5 | -------------------------------------------------------------------------------- /libs/designsystem/toast/src/services/indexs.ts: -------------------------------------------------------------------------------- 1 | export * from './toast.helper'; 2 | export * from './toast.controller'; 3 | -------------------------------------------------------------------------------- /libs/designsystem/toggle-button/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/toggle-button/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/toggle-button/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/toggle-button/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export { ToggleButtonComponent } from './toggle-button.component'; 2 | export { ToggleButtonModule } from './toggle-button.module'; 3 | -------------------------------------------------------------------------------- /libs/designsystem/toggle-button/src/toggle-button.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /libs/designsystem/toggle-button/src/toggle-button.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { ToggleButtonComponent } from './toggle-button.component'; 5 | 6 | const DECLARATIONS = [ToggleButtonComponent]; 7 | 8 | @NgModule({ 9 | declarations: [...DECLARATIONS], 10 | imports: [CommonModule], 11 | exports: [...DECLARATIONS], 12 | }) 13 | export class ToggleButtonModule {} 14 | -------------------------------------------------------------------------------- /libs/designsystem/toggle/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/toggle/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/toggle/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/toggle/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './toggle.component'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "skipLibCheck": true, 5 | "esModuleInterop": true 6 | }, 7 | "references": [ 8 | { 9 | "path": "./tsconfig.lib.json" 10 | }, 11 | { 12 | "path": "./tsconfig.spec.json" 13 | }, 14 | { 15 | "path": "./.storybook/tsconfig.json" 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /libs/designsystem/types/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/index'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/types/ng-package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /libs/designsystem/types/src/event-listener-dispose-fn.ts: -------------------------------------------------------------------------------- 1 | export type EventListenerDisposeFn = () => void; 2 | -------------------------------------------------------------------------------- /libs/designsystem/types/src/form-field-control.ts: -------------------------------------------------------------------------------- 1 | import { EventEmitter } from '@angular/core'; 2 | 3 | export interface FormFieldControl { 4 | hasError: boolean; 5 | hasErrorChange: EventEmitter; 6 | } 7 | -------------------------------------------------------------------------------- /libs/designsystem/types/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /libs/designsystem/types/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './window-ref'; 2 | export * from './event-listener-dispose-fn'; 3 | export * from './unobserve-fn'; 4 | export * from './form-field-control'; 5 | -------------------------------------------------------------------------------- /libs/designsystem/types/src/unobserve-fn.ts: -------------------------------------------------------------------------------- 1 | export type UnobserveFn = () => void; 2 | -------------------------------------------------------------------------------- /libs/designsystem/types/src/window-ref.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root', 5 | }) 6 | export class WindowRef { 7 | get nativeWindow(): any { 8 | return window; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /libs/extensions/angular/.lintstagedrc: -------------------------------------------------------------------------------- 1 | { 2 | "*.{ts,json,md,scss,html}": [ 3 | "prettier --write", 4 | "git add" 5 | ], 6 | "*.ts": [ 7 | "eslint --fix", 8 | "git add" 9 | ], 10 | "*.scss": [ 11 | "stylelint --fix", 12 | "git add" 13 | ] 14 | } -------------------------------------------------------------------------------- /libs/extensions/angular/.storybook/styles.css: -------------------------------------------------------------------------------- 1 | .canvas { 2 | background-color: var(--kirby-background-color) !important; 3 | } 4 | -------------------------------------------------------------------------------- /libs/extensions/angular/.storybook/tsconfig.compodoc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "include": ["../**/*.stories.ts", "../**/*.component.ts", "*.ts"] 4 | } 5 | -------------------------------------------------------------------------------- /libs/extensions/angular/.storybook/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "emitDecoratorMetadata": true, 5 | "allowSyntheticDefaultImports": true 6 | }, 7 | "exclude": ["../**/*.spec.ts"], 8 | "include": ["../**/*.stories.ts", "../**/*.mdx", "*.js", "*.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /libs/extensions/angular/docs/Introduction.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Markdown } from '@storybook/blocks'; 2 | import Readme from "../README.md?raw"; 3 | 4 | Looking for the Kirby Design core components? Check out our [documentation site](https://cookbook.kirby.design/#/home/intro), or [Github repo](https://github.com/kirbydesign/designsystem/) for more info. 5 | 6 | 7 | 8 | {Readme} -------------------------------------------------------------------------------- /libs/extensions/angular/docs/assets/leaves.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/libs/extensions/angular/docs/assets/leaves.jpg -------------------------------------------------------------------------------- /libs/extensions/angular/docs/assets/not-found.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kirbydesign/designsystem/7f03a66641739cc7b898c231b6397f4e1e731b51/libs/extensions/angular/docs/assets/not-found.png -------------------------------------------------------------------------------- /libs/extensions/angular/image-banner/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "src/index.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /libs/extensions/angular/image-banner/src/index.ts: -------------------------------------------------------------------------------- 1 | export { ImageBannerComponent } from './image-banner.component'; 2 | export { ImageBannerHeightDirective } from './image-banner-height.directive'; 3 | -------------------------------------------------------------------------------- /libs/extensions/angular/index.ts: -------------------------------------------------------------------------------- 1 | // All components should be imported through their individual entry-points. 2 | // This file and empty export is needed to satisfy ng_packagr. 3 | // This workaround is inspired by Material Design https://github.com/angular/components/blob/main/src/material/index.ts 4 | export default {}; 5 | -------------------------------------------------------------------------------- /libs/extensions/angular/jest.preset.js: -------------------------------------------------------------------------------- 1 | const nxPreset = require('@nx/jest/preset').default; 2 | 3 | module.exports = { ...nxPreset }; 4 | -------------------------------------------------------------------------------- /libs/extensions/angular/localization/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "src/index.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /libs/extensions/angular/localization/src/account-number/account-number-service-formatter.ts: -------------------------------------------------------------------------------- 1 | import { AccountNumber } from './account-number.model'; 2 | 3 | export function formatAccountNumber(value: AccountNumber): string { 4 | return `${value.regNo.padStart(4, '0')} ${value.accountNo.replace(/^0+/, '')}`; 5 | } 6 | -------------------------------------------------------------------------------- /libs/extensions/angular/localization/src/account-number/account-number.model.ts: -------------------------------------------------------------------------------- 1 | export interface AccountNumber { 2 | regNo: string; 3 | accountNo: string; 4 | } 5 | -------------------------------------------------------------------------------- /libs/extensions/angular/localization/src/account-number/index.ts: -------------------------------------------------------------------------------- 1 | export * from './account-number.model'; 2 | export * from './account-number.pipe'; 3 | export * from './account-number-service-formatter'; 4 | -------------------------------------------------------------------------------- /libs/extensions/angular/localization/src/amount/amount.model.ts: -------------------------------------------------------------------------------- 1 | export interface Amount { 2 | /** 3 | * The monetary value 4 | * @min -999999999 5 | * @max 999999999 6 | * @example [100] 7 | */ 8 | amount: number; 9 | 10 | /** 11 | * The currency in which the value is denominated 12 | * @example [DKK] 13 | */ 14 | currencyCode: string; 15 | } 16 | -------------------------------------------------------------------------------- /libs/extensions/angular/localization/src/amount/index.ts: -------------------------------------------------------------------------------- 1 | export * from './amount.model'; 2 | export * from './amount.pipe'; 3 | export * from './amount.service'; 4 | export * from './amount-service-formatter'; 5 | -------------------------------------------------------------------------------- /libs/extensions/angular/localization/src/date-time/index.ts: -------------------------------------------------------------------------------- 1 | export * from './date-formats'; 2 | export * from './date-only/date-only.pipe'; 3 | export * from './time-only/time-only.pipe'; 4 | export * from './time-or-date/time-or-date.pipe'; 5 | -------------------------------------------------------------------------------- /libs/extensions/angular/localization/src/number/index.ts: -------------------------------------------------------------------------------- 1 | export * from './format-number.pipe'; 2 | export * from './format-number.service'; 3 | -------------------------------------------------------------------------------- /libs/extensions/angular/localization/src/phone-number/index.ts: -------------------------------------------------------------------------------- 1 | export * from './phone-number'; 2 | export * from './phone-number.pipe'; 3 | export * from './phone-number.service'; 4 | -------------------------------------------------------------------------------- /libs/extensions/angular/localization/src/phone-number/phone-number.ts: -------------------------------------------------------------------------------- 1 | export interface PhoneNumber { 2 | countryCode: string; 3 | number: string; 4 | } 5 | -------------------------------------------------------------------------------- /libs/extensions/angular/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "dist/", 4 | "lib": { 5 | "entryFile": "index.ts" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /libs/extensions/angular/skeleton-loader/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "src/index.ts" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /libs/extensions/angular/skeleton-loader/src/index.ts: -------------------------------------------------------------------------------- 1 | export { SkeletonLoaderComponent } from './skeleton-loader.component'; 2 | -------------------------------------------------------------------------------- /libs/extensions/angular/skeleton-loader/src/skeleton-loader.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /libs/extensions/angular/test-setup.ts: -------------------------------------------------------------------------------- 1 | import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone'; 2 | 3 | setupZoneTestEnv(); 4 | 5 | // @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment 6 | globalThis.ngJest = { 7 | testEnvironmentOptions: { 8 | errorOnUnknownElements: true, 9 | errorOnUnknownProperties: true, 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /libs/extensions/angular/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.lib.json", 3 | "compilerOptions": { 4 | "declarationMap": false 5 | }, 6 | "angularCompilerOptions": { 7 | "compilationMode": "partial" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /libs/extensions/angular/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "module": "commonjs", 5 | "types": ["jest", "node"], 6 | "resolveJsonModule": true 7 | }, 8 | "files": ["test-setup.ts"], 9 | "include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /tools/generate-mocks/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "types": ["node"], 5 | "lib": ["es2017"], 6 | "skipLibCheck": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /tools/generate-proxies/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@repo/eslint-config/base.json"] 3 | } 4 | -------------------------------------------------------------------------------- /tools/generate-proxies/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from './cem-helper-functions'; 2 | export * from './types'; 3 | -------------------------------------------------------------------------------- /tools/generate-proxies/utils/types.ts: -------------------------------------------------------------------------------- 1 | import { ClassField, CustomElement } from 'custom-elements-manifest/schema'; 2 | 3 | export interface LitCustomElement extends CustomElement { 4 | path: string; 5 | tagName: string; 6 | tagNameWithoutPrefix: string; 7 | properties?: ReactiveProperty[]; 8 | } 9 | 10 | export type ReactiveProperty = ClassField & { 11 | attribute?: string; 12 | deprecated?: string; 13 | }; 14 | -------------------------------------------------------------------------------- /tools/sass-to-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@repo/sass-to-ts", 3 | "version": "0.0.0", 4 | "private": true, 5 | "description": "Tool for converting sass design tokens to ts.", 6 | "devDependencies": { 7 | "@angular-builders/custom-webpack": "^19.0.0", 8 | "chokidar": "^3.3.1", 9 | "webpack": "^5.98.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /tools/sass-to-ts/schema.ts: -------------------------------------------------------------------------------- 1 | // schema for options object 2 | export const SCHEMA = { 3 | type: 'object' as const, 4 | properties: { 5 | watchGlob: { 6 | type: 'array' as const, 7 | }, 8 | transform: { 9 | type: 'array' as const, 10 | }, 11 | }, 12 | }; 13 | 14 | export interface SassToTsWebpackPluginOptions { 15 | watchGlob: string[]; 16 | transform: string[]; 17 | } 18 | -------------------------------------------------------------------------------- /tools/sass-to-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "types": ["node"], 5 | "lib": ["es2017", "dom"], 6 | "esModuleInterop": true, 7 | "skipLibCheck": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /tools/tsconfig.tools.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "../dist/out-tsc/tools", 5 | "rootDir": ".", 6 | "module": "commonjs", 7 | "types": ["node"] 8 | }, 9 | "include": ["**/*.ts"] 10 | } 11 | --------------------------------------------------------------------------------