├── .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 |
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 |
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 |
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 |
6 |
--------------------------------------------------------------------------------
/apps/cookbook/src/assets/images/dk.svg:
--------------------------------------------------------------------------------
1 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
--------------------------------------------------------------------------------