├── .nvmrc ├── .bazelversion ├── tools ├── bazel │ └── BUILD.bazel ├── dgeni │ ├── templates │ │ ├── common.template.html │ │ ├── BUILD.bazel │ │ ├── method-list.template.html │ │ ├── macros.html │ │ └── property-list.template.html │ └── common │ │ └── compute-api-url.ts ├── tsconfig-test.json ├── region-parser │ ├── README.md │ ├── region-matchers │ │ ├── html.ts │ │ ├── inline-c.ts │ │ └── block-c.ts │ └── BUILD.bazel ├── example-module │ └── tsconfig.json ├── highlight-files │ ├── tsconfig.json │ └── highlight-code-block.ts ├── tslint-rules │ ├── tsconfig.json │ └── tsLoaderRule.js ├── sass │ └── BUILD.bazel ├── tsconfig.json ├── schematics │ └── bazel │ │ ├── files │ │ └── ngPackageExamples │ │ │ └── config.bzl.template │ │ └── bazel-genrule-resolver.ts └── stack-blitz-module-template │ └── BUILD.bazel ├── .bazel_fix_commands.json ├── .husky ├── pre-commit └── commit-msg ├── docs ├── src │ ├── assets │ │ ├── stack-blitz │ │ │ ├── src │ │ │ │ ├── assets │ │ │ │ │ └── .gitkeep │ │ │ │ ├── environments │ │ │ │ │ └── environment.prod.ts │ │ │ │ ├── favicon.ico │ │ │ │ ├── styles.css │ │ │ │ └── index.html │ │ │ ├── .npmrc │ │ │ ├── tsconfig.app.json │ │ │ └── tsconfig.spec.json │ │ ├── sbb-logo.png │ │ ├── websites.jpg │ │ ├── journey-maps.jpg │ │ ├── source-code-button-hint.png │ │ └── icons │ │ │ └── code.svg │ ├── app │ │ ├── howtoupdate │ │ │ └── how-to-update.component.scss │ │ ├── shared │ │ │ ├── component-viewer │ │ │ │ ├── html-viewer │ │ │ │ │ └── html-viewer.component.scss │ │ │ │ ├── example-list-viewer │ │ │ │ │ ├── example-list-viewer.component.scss │ │ │ │ │ └── example-list-viewer.component.html │ │ │ │ └── component-viewer │ │ │ │ │ ├── component-viewer.component.scss │ │ │ │ │ └── component-viewer.component.html │ │ │ ├── markdown-viewer │ │ │ │ └── markdown-viewer.component.scss │ │ │ └── html-loader.service.ts │ │ ├── angular │ │ │ └── icon-overview │ │ │ │ ├── icon-overview.component.scss │ │ │ │ ├── icon-overview.component.html │ │ │ │ └── cdn-icon-list │ │ │ │ └── cdn-icon │ │ │ │ └── cdn-icon.component.html │ │ ├── app.component.scss │ │ └── introduction │ │ │ └── introduction.component.ts │ └── environments │ │ └── environment.prod.ts ├── tsconfig.app.json └── tsconfig.spec.json ├── src ├── journey-maps │ ├── esri-plugin │ │ ├── esri-plugin.html │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── esri-plugin.module.ts │ │ └── services │ │ │ └── maplibre-util.service.ts │ ├── index.ts │ ├── angular │ │ ├── index.ts │ │ ├── services │ │ │ ├── map │ │ │ │ ├── util │ │ │ │ │ ├── poi-details.ts │ │ │ │ │ ├── feature-collection-util.ts │ │ │ │ │ ├── array-utils.ts │ │ │ │ │ ├── style-version-lookup.ts │ │ │ │ │ └── array-utils.spec.ts │ │ │ │ ├── map-leit-poi-service.spec.ts │ │ │ │ └── map-config.ts │ │ │ └── test-data.ts │ │ ├── style │ │ │ └── _variables.scss │ │ ├── components │ │ │ ├── leit-poi │ │ │ │ ├── model │ │ │ │ │ ├── leit-poi-placement.ts │ │ │ │ │ └── leit-poi-feature.ts │ │ │ │ └── leit-poi.html │ │ │ ├── basemap-switch │ │ │ │ ├── basemap-switch.scss │ │ │ │ └── basemap-switch.html │ │ │ ├── compass-button │ │ │ │ └── compass-button.scss │ │ │ ├── geolocate-button │ │ │ │ ├── geolocate-button.scss │ │ │ │ └── geolocate-button.html │ │ │ ├── home-button │ │ │ │ ├── home-button.scss │ │ │ │ └── home-button.html │ │ │ └── popup │ │ │ │ └── popup.html │ │ ├── model │ │ │ ├── marker-category-mapping.ts │ │ │ └── marker-priority.ts │ │ ├── public-api.ts │ │ └── types.d.ts │ ├── public-api.ts │ └── tsconfig.json ├── journey-maps-wc │ ├── src │ │ ├── bootstrap │ │ │ └── bootstrap.prod.ts │ │ ├── main.ts │ │ └── environments │ │ │ └── environment.prod.ts │ ├── index.d.ts │ ├── tsconfig.app.json │ └── tsconfig.spec.json ├── package.json ├── angular │ ├── _index.scss │ ├── fullfont.scss │ ├── tag │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── tags.html │ │ ├── tag-link.html │ │ └── tag.module.ts │ ├── alert │ │ ├── index.ts │ │ ├── public-api.ts │ │ └── alert.module.ts │ ├── badge │ │ ├── index.ts │ │ ├── public-api.ts │ │ └── badge.module.ts │ ├── button │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── button.html │ │ └── button.module.ts │ ├── captcha │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── captcha │ │ │ └── windowref.service.ts │ │ └── captcha.module.ts │ ├── checkbox │ │ ├── index.ts │ │ ├── public-api.ts │ │ └── checkbox.module.ts │ ├── chips │ │ ├── index.ts │ │ └── public-api.ts │ ├── core │ │ ├── index.ts │ │ ├── testing │ │ │ ├── index.ts │ │ │ ├── lean-polyfill │ │ │ │ ├── index.ts │ │ │ │ ├── public-api.ts │ │ │ │ └── BUILD.bazel │ │ │ ├── wrapped-error-message.ts │ │ │ ├── public-api.ts │ │ │ ├── month-constants.ts │ │ │ └── BUILD.bazel │ │ ├── version.ts │ │ ├── option │ │ │ ├── optgroup.html │ │ │ ├── option.html │ │ │ ├── option.scss │ │ │ ├── option-hint.ts │ │ │ ├── pseudo-checkbox.html │ │ │ ├── option.module.ts │ │ │ └── option-parent.ts │ │ ├── datetime │ │ │ ├── date-pipe-date-formats.ts │ │ │ ├── date-formats.ts │ │ │ ├── datepicker-token.ts │ │ │ └── native-date-adapter-provider.ts │ │ └── common-behaviors │ │ │ └── constructor.ts │ ├── dialog │ │ ├── index.ts │ │ ├── dialog-container.html │ │ └── public-api.ts │ ├── i18n │ │ ├── index.ts │ │ └── public-api.ts │ ├── icon │ │ ├── index.ts │ │ ├── testing │ │ │ ├── index.ts │ │ │ ├── public-api.ts │ │ │ └── BUILD.bazel │ │ ├── public-api.ts │ │ └── icon.module.ts │ ├── input │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── input-errors.ts │ │ └── input-value-accessor.ts │ ├── lightbox │ │ ├── index.ts │ │ ├── lightbox-container.html │ │ └── public-api.ts │ ├── menu │ │ ├── index.ts │ │ ├── menu-positions.ts │ │ ├── menu-item.html │ │ ├── public-api.ts │ │ └── menu-dynamic-trigger.ts │ ├── search │ │ ├── index.ts │ │ ├── search-error.ts │ │ ├── public-api.ts │ │ └── search.html │ ├── select │ │ ├── index.ts │ │ └── public-api.ts │ ├── sidebar │ │ ├── index.ts │ │ ├── icon-sidebar │ │ │ ├── icon-sidebar-item.html │ │ │ ├── icon-sidebar-container.html │ │ │ └── icon-sidebar-item.ts │ │ ├── sidebar │ │ │ ├── sidebar-link.html │ │ │ └── sidebar-link.ts │ │ └── public-api.ts │ ├── status │ │ ├── index.ts │ │ ├── public-api.ts │ │ └── status.module.ts │ ├── table │ │ ├── index.ts │ │ ├── sort │ │ │ └── sort-direction.ts │ │ └── public-api.ts │ ├── tabs │ │ ├── index.ts │ │ ├── Tabs Pagination.png │ │ ├── tab.html │ │ ├── tab-body.html │ │ └── tab-header.scss │ ├── textarea │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── textarea.module.ts │ │ └── textarea │ │ │ └── textarea.html │ ├── toggle │ │ ├── index.ts │ │ ├── public-api.ts │ │ └── toggle-directives.ts │ ├── tooltip │ │ ├── index.ts │ │ └── public-api.ts │ ├── typography.scss │ ├── usermenu │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── usermenu-icon.ts │ │ └── usermenu.module.ts │ ├── accordion │ │ ├── index.ts │ │ ├── accordion-token.ts │ │ ├── public-api.ts │ │ └── expansion-panel.html │ ├── autocomplete │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── autocomplete.scss │ │ ├── autocomplete.html │ │ └── autocomplete-origin.ts │ ├── breadcrumb │ │ ├── index.ts │ │ ├── breadcrumb-root.html │ │ ├── breadcrumb.ts │ │ ├── public-api.ts │ │ ├── breadcrumb-root.ts │ │ └── breadcrumbs.html │ ├── datepicker │ │ ├── index.ts │ │ ├── date-range.ts │ │ ├── datepicker-token.ts │ │ ├── datepicker-errors.ts │ │ ├── datepicker-toggle │ │ │ └── datepicker-toggle.html │ │ └── public-api.ts │ ├── file-selector │ │ ├── index.ts │ │ ├── public-api.ts │ │ └── file-selector.module.ts │ ├── form-field │ │ ├── index.ts │ │ ├── form-field-errors.ts │ │ ├── label.ts │ │ ├── public-api.ts │ │ └── form-field.module.ts │ ├── header-lean │ │ ├── index.ts │ │ ├── app-chooser-section.html │ │ ├── header-token.ts │ │ ├── header-menu-trigger.html │ │ └── public-api.ts │ ├── notification │ │ ├── index.ts │ │ ├── notification-directives.ts │ │ ├── public-api.ts │ │ └── notification.module.ts │ ├── pagination │ │ ├── index.ts │ │ ├── public-api.ts │ │ └── pagination.module.ts │ ├── processflow │ │ ├── index.ts │ │ ├── step.html │ │ ├── step-label.ts │ │ ├── public-api.ts │ │ └── step-content.ts │ ├── radio-button │ │ ├── index.ts │ │ ├── public-api.ts │ │ └── radio-button.module.ts │ ├── textexpand │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── textexpand-errors.ts │ │ ├── textexpand-expanded.ts │ │ ├── textexpand-collapsed.ts │ │ ├── textexpand.html │ │ └── textexpand.module.ts │ ├── time-input │ │ ├── index.ts │ │ ├── public-api.ts │ │ └── time-input.module.ts │ ├── checkbox-panel │ │ ├── index.ts │ │ └── public-api.ts │ ├── loading-indicator │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── loading-indicator.html │ │ └── loading-indicator.module.ts │ ├── notification-toast │ │ ├── index.ts │ │ ├── simple-notification.html │ │ ├── public-api.ts │ │ └── notification-toast-container.html │ ├── radio-button-panel │ │ ├── index.ts │ │ └── public-api.ts │ ├── schematics │ │ ├── package.json │ │ ├── tsconfig-test.json │ │ ├── ng-update │ │ │ └── data │ │ │ │ ├── class-names.ts │ │ │ │ ├── input-names.ts │ │ │ │ ├── output-names.ts │ │ │ │ ├── method-call-checks.ts │ │ │ │ ├── property-names.ts │ │ │ │ ├── symbol-removal.ts │ │ │ │ ├── element-selectors.ts │ │ │ │ ├── attribute-selectors.ts │ │ │ │ ├── index.ts │ │ │ │ └── constructor-checks.ts │ │ ├── migration.json │ │ ├── paths.ts │ │ └── ng-add │ │ │ └── schema.ts │ ├── styles │ │ ├── _index.scss │ │ ├── BUILD.bazel │ │ └── cdk │ │ │ └── _index.scss │ ├── tsconfig.json │ └── index.ts ├── components-examples │ ├── index.ts │ ├── angular-experimental │ │ └── example │ │ │ ├── basic │ │ │ ├── basic-example.html │ │ │ ├── basic-example.css │ │ │ └── basic-example.ts │ │ │ └── index.ts │ ├── angular │ │ ├── time-input │ │ │ ├── simple-time-input │ │ │ │ ├── simple-time-input-example.html │ │ │ │ └── simple-time-input-example.ts │ │ │ ├── time-input-forms │ │ │ │ └── time-input-forms-example.html │ │ │ └── index.ts │ │ ├── icon │ │ │ ├── index.ts │ │ │ └── icon-simple │ │ │ │ ├── icon-simple-example.html │ │ │ │ └── icon-simple-example.ts │ │ ├── pagination │ │ │ ├── paginator │ │ │ │ └── paginator-example.css │ │ │ ├── navigation │ │ │ │ ├── navigation-example.css │ │ │ │ └── navigation-example.html │ │ │ └── index.ts │ │ ├── captcha │ │ │ ├── captcha-simple │ │ │ │ ├── captcha-simple-example.css │ │ │ │ └── captcha-simple-example.html │ │ │ ├── captcha-reactive-forms │ │ │ │ ├── captcha-reactive-forms-example.css │ │ │ │ └── captcha-reactive-forms-example.html │ │ │ ├── captcha-template-driven-forms │ │ │ │ ├── captcha-template-driven-forms-example.css │ │ │ │ └── captcha-template-driven-forms-example.html │ │ │ └── index.ts │ │ ├── textexpand │ │ │ ├── index.ts │ │ │ └── textexpand │ │ │ │ └── textexpand-example.ts │ │ ├── accordion │ │ │ ├── accordion-wizard │ │ │ │ └── accordion-wizard-example.css │ │ │ ├── accordion-custom-html │ │ │ │ └── accordion-custom-html-example.css │ │ │ ├── accordion-basic │ │ │ │ └── accordion-basic-example.css │ │ │ ├── index.ts │ │ │ └── accordion-simple-panel │ │ │ │ └── accordion-simple-panel-example.ts │ │ ├── badge │ │ │ ├── index.ts │ │ │ └── badge-overview │ │ │ │ └── badge-overview-example.html │ │ ├── dialog │ │ │ ├── dialog-animations │ │ │ │ ├── dialog-animations-example.css │ │ │ │ └── dialog-animations-example.html │ │ │ ├── component-data-dialog │ │ │ │ └── component-data-dialog-example.html │ │ │ └── index.ts │ │ ├── lightbox │ │ │ ├── lightbox-animations │ │ │ │ ├── lightbox-animations-example.css │ │ │ │ └── lightbox-animations-example.html │ │ │ ├── lightbox-component │ │ │ │ └── lightbox-component-example.html │ │ │ ├── lightbox-confirmation │ │ │ │ └── lightbox-confirmation-example.html │ │ │ └── lightbox │ │ │ │ └── lightbox-example.html │ │ ├── textarea │ │ │ ├── textarea-forms │ │ │ │ └── textarea-forms-example.css │ │ │ ├── textarea-reactive-forms-with-sbb-form-field │ │ │ │ └── textarea-reactive-forms-with-sbb-form-field-example.css │ │ │ ├── textarea-native │ │ │ │ └── textarea-native-example.html │ │ │ └── index.ts │ │ ├── table │ │ │ ├── sticky-table │ │ │ │ └── sticky-table-example.css │ │ │ ├── filter-sort-paginator-table │ │ │ │ └── filter-sort-paginator-table-example.css │ │ │ └── expandable-table │ │ │ │ └── expandable-table-example.css │ │ ├── tabs │ │ │ ├── tab-group-custom-label │ │ │ │ └── tab-group-custom-label-example.css │ │ │ ├── tab-nav-bar-basic │ │ │ │ └── tab-nav-bar-basic-example.css │ │ │ ├── tab-group-basic │ │ │ │ ├── tab-group-basic-example.html │ │ │ │ └── tab-group-basic-example.ts │ │ │ ├── tab-group-dynamic │ │ │ │ └── tab-group-dynamic-example.css │ │ │ ├── tab-group-dynamic-height │ │ │ │ ├── tab-group-dynamic-height-example.html │ │ │ │ ├── tab-group-dynamic-height-example.css │ │ │ │ └── tab-group-dynamic-height-example.ts │ │ │ ├── tab-group-async │ │ │ │ └── tab-group-async-example.html │ │ │ ├── tab-group-badge │ │ │ │ └── tab-group-badge-example.ts │ │ │ └── tab-group-preserve-content │ │ │ │ └── tab-group-preserve-content-example.ts │ │ ├── search │ │ │ ├── search-historic-railway-pictures │ │ │ │ └── search-historic-railway-pictures-example.css │ │ │ ├── search-simple-header-mode │ │ │ │ └── search-simple-header-mode-example.html │ │ │ ├── search-simple-reactive-forms │ │ │ │ └── search-simple-reactive-forms-example.html │ │ │ ├── search-autocomplete │ │ │ │ └── search-autocomplete-example.html │ │ │ └── search-header-autocomplete │ │ │ │ └── search-header-autocomplete-example.html │ │ ├── notification │ │ │ ├── simple-notification │ │ │ │ ├── simple-notification-example.css │ │ │ │ ├── simple-notification-example.html │ │ │ │ └── simple-notification-example.ts │ │ │ ├── custom-icon-notification │ │ │ │ ├── custom-icon-notification-example.html │ │ │ │ └── custom-icon-notification-example.ts │ │ │ ├── jumpmark-notification │ │ │ │ └── jumpmark-notification-example.html │ │ │ ├── closable-notification │ │ │ │ └── closable-notification-example.html │ │ │ └── index.ts │ │ ├── alert │ │ │ ├── alert-simple │ │ │ │ ├── alert-simple-example.html │ │ │ │ └── alert-simple-example.ts │ │ │ ├── alert-external-link │ │ │ │ ├── alert-external-link-example.html │ │ │ │ └── alert-external-link-example.ts │ │ │ ├── alert-router-link │ │ │ │ ├── alert-router-link-example.html │ │ │ │ └── alert-router-link-example.ts │ │ │ ├── alert-outlet │ │ │ │ └── alert-outlet-example.html │ │ │ └── index.ts │ │ ├── button │ │ │ ├── button-with-icon │ │ │ │ ├── button-with-icon-example.css │ │ │ │ ├── button-with-icon-example.html │ │ │ │ └── button-with-icon-example.ts │ │ │ ├── link │ │ │ │ ├── link-example.html │ │ │ │ └── link-example.ts │ │ │ ├── link-group │ │ │ │ ├── link-group-example.html │ │ │ │ └── link-group-example.ts │ │ │ └── index.ts │ │ ├── input │ │ │ ├── input-errors │ │ │ │ └── input-errors-example.css │ │ │ ├── input-overview │ │ │ │ ├── input-overview-example.css │ │ │ │ └── input-overview-example.html │ │ │ ├── input-error-state-matcher │ │ │ │ └── input-error-state-matcher-example.css │ │ │ └── index.ts │ │ ├── notification-toast │ │ │ ├── notification-toast-duration │ │ │ │ ├── notification-toast-duration-example.css │ │ │ │ └── notification-toast-duration-example.html │ │ │ ├── simple-notification-toast │ │ │ │ └── simple-notification-toast-example.css │ │ │ ├── notification-toast-component │ │ │ │ └── notification-toast-component-example.html │ │ │ ├── notification-toast-template │ │ │ │ └── notification-toast-template-example.html │ │ │ └── index.ts │ │ ├── tag │ │ │ ├── tag-link │ │ │ │ ├── tag-link-example.html │ │ │ │ └── tag-link-example.ts │ │ │ ├── tag-reactive-forms │ │ │ │ └── tag-reactive-forms-example.html │ │ │ ├── tag-template-forms │ │ │ │ └── tag-template-forms-example.html │ │ │ ├── index.ts │ │ │ └── tag-with-icon │ │ │ │ └── tag-with-icon-example.ts │ │ ├── processflow │ │ │ ├── processflow-editable │ │ │ │ └── processflow-editable-example.css │ │ │ ├── processflow-overview │ │ │ │ └── processflow-overview-example.css │ │ │ └── index.ts │ │ ├── tooltip │ │ │ ├── tooltip-custom-icon │ │ │ │ ├── tooltip-custom-icon-example.html │ │ │ │ └── tooltip-custom-icon-example.ts │ │ │ ├── index.ts │ │ │ └── tooltip-custom-content │ │ │ │ ├── tooltip-custom-content-example.html │ │ │ │ └── tooltip-custom-content-example.ts │ │ ├── form-field │ │ │ ├── form-field-time-input │ │ │ │ └── form-field-time-input-example.html │ │ │ ├── form-field-textarea-tooltip │ │ │ │ └── form-field-textarea-tooltip-example.html │ │ │ ├── form-field-datepicker │ │ │ │ └── form-field-datepicker-example.html │ │ │ ├── form-field-select │ │ │ │ └── form-field-select-example.html │ │ │ └── form-field-sbb-select │ │ │ │ └── form-field-sbb-select-example.html │ │ ├── status │ │ │ ├── index.ts │ │ │ ├── status │ │ │ │ ├── status-example.html │ │ │ │ └── status-example.ts │ │ │ └── status-with-message │ │ │ │ ├── status-with-message-example.html │ │ │ │ └── status-with-message-example.ts │ │ ├── loading-indicator │ │ │ ├── loading-indicator-inline │ │ │ │ ├── loading-indicator-inline-example.html │ │ │ │ └── loading-indicator-inline-example.ts │ │ │ ├── loading-indicator-simple │ │ │ │ ├── loading-indicator-simple-example.css │ │ │ │ └── loading-indicator-simple-example.html │ │ │ ├── index.ts │ │ │ └── loading-indicator-fullbox │ │ │ │ └── loading-indicator-fullbox-example.html │ │ ├── datepicker │ │ │ ├── calendar-configuration │ │ │ │ └── calendar-configuration-example.css │ │ │ ├── datepicker-lean-date-adapter │ │ │ │ └── datepicker-lean-date-adapter-example.html │ │ │ ├── datepicker-standalone-forms │ │ │ │ └── datepicker-standalone-forms-example.html │ │ │ └── datepicker-date-filter │ │ │ │ └── datepicker-date-filter-example.html │ │ ├── checkbox-panel │ │ │ ├── checkbox-panel-simple │ │ │ │ └── checkbox-panel-simple-example.html │ │ │ ├── checkbox-panel-content │ │ │ │ ├── checkbox-panel-content-example.css │ │ │ │ └── checkbox-panel-content-example.html │ │ │ ├── checkbox-panel-group │ │ │ │ └── checkbox-panel-group-example.css │ │ │ ├── index.ts │ │ │ └── checkbox-panel-icon │ │ │ │ └── checkbox-panel-icon-example.ts │ │ ├── file-selector │ │ │ ├── simple-file-selector │ │ │ │ └── simple-file-selector-example.html │ │ │ ├── multiple-mode-default-file-selector │ │ │ │ └── multiple-mode-default-file-selector-example.html │ │ │ ├── index.ts │ │ │ └── multiple-mode-persistent-file-selector │ │ │ │ └── multiple-mode-persistent-file-selector-example.html │ │ ├── sidebar │ │ │ ├── sidebar │ │ │ │ └── sidebar-example.css │ │ │ ├── icon-sidebar │ │ │ │ └── icon-sidebar-example.css │ │ │ ├── multiple-sidebars │ │ │ │ └── multiple-sidebars-example.css │ │ │ ├── index.ts │ │ │ └── collapsible-sidebar │ │ │ │ └── collapsible-sidebar-example.css │ │ ├── radio-button-panel │ │ │ ├── radio-button-panel-group │ │ │ │ └── radio-button-panel-group-example.css │ │ │ ├── radio-button-panel-simple │ │ │ │ └── radio-button-panel-simple-example.html │ │ │ └── index.ts │ │ ├── checkbox │ │ │ ├── checkbox │ │ │ │ └── checkbox-example.html │ │ │ ├── checkbox-group-horizontal │ │ │ │ └── checkbox-group-horizontal-example.html │ │ │ ├── checkbox-group-reactive-forms-vertical │ │ │ │ └── checkbox-group-reactive-forms-vertical-example.html │ │ │ └── index.ts │ │ ├── chips │ │ │ └── chips-drag-drop │ │ │ │ ├── chips-drag-drop-example.css │ │ │ │ └── chips-drag-drop-example.html │ │ ├── menu │ │ │ ├── menu-overview │ │ │ │ ├── menu-overview-example.html │ │ │ │ └── menu-overview-example.ts │ │ │ ├── menu-nested │ │ │ │ └── menu-nested-example.ts │ │ │ ├── index.ts │ │ │ ├── menu-grouping │ │ │ │ └── menu-grouping-example.ts │ │ │ ├── menu-lazy-rendering │ │ │ │ └── menu-lazy-rendering-example.ts │ │ │ └── menu-icons │ │ │ │ ├── menu-icons-example.ts │ │ │ │ └── menu-icons-example.html │ │ ├── breadcrumb │ │ │ ├── index.ts │ │ │ └── breadcrumb │ │ │ │ ├── breadcrumb-example.ts │ │ │ │ └── breadcrumb-example.html │ │ ├── radio-button │ │ │ ├── index.ts │ │ │ ├── radio-button │ │ │ │ └── radio-button-example.html │ │ │ ├── radio-button-group-horizontal │ │ │ │ └── radio-button-group-horizontal-example.html │ │ │ └── radio-button-group-reactive-forms-vertical │ │ │ │ └── radio-button-group-reactive-forms-vertical-example.html │ │ ├── toggle │ │ │ ├── index.ts │ │ │ └── toggle-without-form │ │ │ │ └── toggle-without-form-example.html │ │ ├── usermenu │ │ │ ├── usermenu-custom-image │ │ │ │ └── usermenu-custom-image-example.html │ │ │ └── index.ts │ │ └── autocomplete │ │ │ ├── autocomplete-reactive-forms │ │ │ └── autocomplete-reactive-forms-example.html │ │ │ ├── autocomplete-display-with │ │ │ └── autocomplete-display-with-example.html │ │ │ └── autocomplete-forms │ │ │ └── autocomplete-forms-example.html │ ├── public-api.ts │ └── journey-maps │ │ ├── esri-plugin │ │ └── esri-plugin │ │ │ ├── esri-plugin-example.css │ │ │ └── esri-plugin-example.html │ │ └── angular │ │ ├── journey-maps-basic │ │ ├── journey-maps-basic-example.css │ │ └── journey-maps-basic-example.html │ │ └── journey-maps-ui-options │ │ └── journey-maps-ui-options-example.css ├── angular-experimental │ ├── example │ │ ├── index.ts │ │ ├── public-api.ts │ │ ├── example.ts │ │ └── example.md │ ├── index.ts │ └── tsconfig.json ├── dev-mode-types.d.ts ├── README.md ├── esbuild-linked.config.mjs └── bazel-tsconfig-test.json ├── scripts ├── ngssc.sh ├── jasmine-helper.js ├── tsconfig.json └── find-major-versions.sh ├── .ng-dev ├── config.mts └── github.mts ├── .gitattributes ├── test └── tsconfig.json ├── .github ├── Dockerfile.regenerate ├── CODEOWNERS └── Dockerfile.regenerate.ngssc ├── docker-compose.yml ├── .bazelignore ├── .editorconfig ├── t9n-xlf.json ├── t9n-xlf2.json ├── scss-bundle.config.json ├── .prettierignore ├── sonar-project.properties └── .vscode └── settings.json /.nvmrc: -------------------------------------------------------------------------------- 1 | 22.21.1 2 | -------------------------------------------------------------------------------- /.bazelversion: -------------------------------------------------------------------------------- 1 | 7.6.1 2 | -------------------------------------------------------------------------------- /tools/bazel/BUILD.bazel: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.bazel_fix_commands.json: -------------------------------------------------------------------------------- 1 | [] 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | pnpm lint-staged 2 | -------------------------------------------------------------------------------- /docs/src/assets/stack-blitz/src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/journey-maps/esri-plugin/esri-plugin.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | pnpm commitlint --edit "$1" 2 | -------------------------------------------------------------------------------- /scripts/ngssc.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | ngssc insert --nginx -------------------------------------------------------------------------------- /src/journey-maps-wc/src/bootstrap/bootstrap.prod.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "module" 3 | } 4 | -------------------------------------------------------------------------------- /src/angular/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './styles/index'; 2 | -------------------------------------------------------------------------------- /src/angular/fullfont.scss: -------------------------------------------------------------------------------- 1 | @use './styles/fullfont'; 2 | -------------------------------------------------------------------------------- /src/angular/tag/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/alert/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/badge/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/button/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/captcha/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/chips/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/core/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/dialog/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/i18n/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/icon/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/input/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/lightbox/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/menu/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/search/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/select/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/sidebar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/status/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/table/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/tabs/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/textarea/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/toggle/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/tooltip/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/typography.scss: -------------------------------------------------------------------------------- 1 | @use './styles/typography'; 2 | -------------------------------------------------------------------------------- /src/angular/usermenu/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/journey-maps/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/accordion/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/autocomplete/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/breadcrumb/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/core/testing/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/datepicker/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/file-selector/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/form-field/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/header-lean/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/i18n/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './sbb-ch-patch'; 2 | -------------------------------------------------------------------------------- /src/angular/icon/testing/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/notification/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/pagination/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/processflow/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/radio-button/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/textexpand/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/time-input/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/components-examples/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/journey-maps/angular/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/checkbox-panel/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/loading-indicator/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/notification-toast/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/radio-button-panel/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/schematics/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "commonjs" 3 | } 4 | -------------------------------------------------------------------------------- /src/journey-maps/esri-plugin/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /docs/src/assets/stack-blitz/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org 2 | -------------------------------------------------------------------------------- /src/angular-experimental/example/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular-experimental/example/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './example'; 2 | -------------------------------------------------------------------------------- /src/angular/core/testing/lean-polyfill/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/angular/icon/testing/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './fake-icon-registry'; 2 | -------------------------------------------------------------------------------- /.ng-dev/config.mts: -------------------------------------------------------------------------------- 1 | import {github} from './github.mjs'; 2 | 3 | export {github}; 4 | -------------------------------------------------------------------------------- /src/angular/dialog/dialog-container.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /tools/dgeni/templates/common.template.html: -------------------------------------------------------------------------------- 1 | ## {$ doc.name $} ({$ doc.docType $}) 2 | -------------------------------------------------------------------------------- /docs/src/app/howtoupdate/how-to-update.component.scss: -------------------------------------------------------------------------------- 1 | pre { 2 | user-select: all; 3 | } 4 | -------------------------------------------------------------------------------- /src/angular/breadcrumb/breadcrumb-root.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/angular/lightbox/lightbox-container.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/angular/notification-toast/simple-notification.html: -------------------------------------------------------------------------------- 1 | {{ data.message }} 2 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | #Auto detect text files and perform LF normalization 2 | * text=auto eol=lf 3 | -------------------------------------------------------------------------------- /src/angular/badge/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './badge.module'; 2 | export * from './badge'; 3 | -------------------------------------------------------------------------------- /src/angular/table/sort/sort-direction.ts: -------------------------------------------------------------------------------- 1 | export type SbbSortDirection = 'asc' | 'desc' | ''; 2 | -------------------------------------------------------------------------------- /src/angular/button/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './button.module'; 2 | export * from './button'; 3 | -------------------------------------------------------------------------------- /src/angular/status/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './status'; 2 | export * from './status.module'; 3 | -------------------------------------------------------------------------------- /src/angular/time-input/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './time-input.module'; 2 | export * from './time-input'; 3 | -------------------------------------------------------------------------------- /docs/src/app/shared/component-viewer/html-viewer/html-viewer.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /src/angular/radio-button/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './radio-button.module'; 2 | export * from './radio-button'; 3 | -------------------------------------------------------------------------------- /src/angular/textarea/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './textarea.module'; 2 | export * from './textarea/textarea'; 3 | -------------------------------------------------------------------------------- /src/components-examples/angular-experimental/example/basic/basic-example.html: -------------------------------------------------------------------------------- 1 | Example 2 | -------------------------------------------------------------------------------- /src/components-examples/angular/time-input/simple-time-input/simple-time-input-example.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/journey-maps/angular/services/map/util/poi-details.ts: -------------------------------------------------------------------------------- 1 | export interface PoiDetails { 2 | id: string; 3 | } 4 | -------------------------------------------------------------------------------- /docs/src/assets/sbb-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbb-design-systems/sbb-angular/HEAD/docs/src/assets/sbb-logo.png -------------------------------------------------------------------------------- /docs/src/assets/websites.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbb-design-systems/sbb-angular/HEAD/docs/src/assets/websites.jpg -------------------------------------------------------------------------------- /src/components-examples/angular/icon/index.ts: -------------------------------------------------------------------------------- 1 | export { IconSimpleExample } from './icon-simple/icon-simple-example'; 2 | -------------------------------------------------------------------------------- /src/components-examples/angular/pagination/paginator/paginator-example.css: -------------------------------------------------------------------------------- 1 | sbb-form-field { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /docs/src/assets/stack-blitz/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/captcha/captcha-simple/captcha-simple-example.css: -------------------------------------------------------------------------------- 1 | pre { 2 | word-break: break-all; 3 | } 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/pagination/navigation/navigation-example.css: -------------------------------------------------------------------------------- 1 | sbb-form-field { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/textexpand/index.ts: -------------------------------------------------------------------------------- 1 | export { TextexpandExample } from './textexpand/textexpand-example'; 2 | -------------------------------------------------------------------------------- /docs/src/app/shared/component-viewer/example-list-viewer/example-list-viewer.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /docs/src/assets/journey-maps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbb-design-systems/sbb-angular/HEAD/docs/src/assets/journey-maps.jpg -------------------------------------------------------------------------------- /src/angular/loading-indicator/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './loading-indicator.module'; 2 | export * from './loading-indicator'; 3 | -------------------------------------------------------------------------------- /src/components-examples/angular/accordion/accordion-wizard/accordion-wizard-example.css: -------------------------------------------------------------------------------- 1 | .panel-text { 2 | margin: 0 1em; 3 | } 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/badge/index.ts: -------------------------------------------------------------------------------- 1 | export { BadgeOverviewExample } from './badge-overview/badge-overview-example'; 2 | -------------------------------------------------------------------------------- /src/components-examples/angular/dialog/dialog-animations/dialog-animations-example.css: -------------------------------------------------------------------------------- 1 | button { 2 | margin-right: 8px; 3 | } 4 | -------------------------------------------------------------------------------- /src/angular/header-lean/app-chooser-section.html: -------------------------------------------------------------------------------- 1 | {{ label }} 2 | -------------------------------------------------------------------------------- /src/angular/tabs/Tabs Pagination.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbb-design-systems/sbb-angular/HEAD/src/angular/tabs/Tabs Pagination.png -------------------------------------------------------------------------------- /src/components-examples/angular-experimental/example/basic/basic-example.css: -------------------------------------------------------------------------------- 1 | .example { 2 | background-color: rebeccapurple; 3 | } 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/lightbox/lightbox-animations/lightbox-animations-example.css: -------------------------------------------------------------------------------- 1 | button { 2 | margin-right: 8px; 3 | } 4 | -------------------------------------------------------------------------------- /src/angular/input/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './input.module'; 2 | export * from './input-value-accessor'; 3 | export * from './input'; 4 | -------------------------------------------------------------------------------- /src/angular/tooltip/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './tooltip.module'; 2 | export * from './tooltip'; 3 | export * from './tooltip-wrapper'; 4 | -------------------------------------------------------------------------------- /src/angular/usermenu/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './usermenu.module'; 2 | export * from './usermenu'; 3 | export * from './usermenu-icon'; 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/captcha/captcha-reactive-forms/captcha-reactive-forms-example.css: -------------------------------------------------------------------------------- 1 | pre { 2 | word-break: break-all; 3 | } 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/textarea/textarea-forms/textarea-forms-example.css: -------------------------------------------------------------------------------- 1 | .sbb-textarea { 2 | min-height: 6rem !important; 3 | } 4 | -------------------------------------------------------------------------------- /src/angular/checkbox/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './checkbox-config'; 2 | export * from './checkbox'; 3 | export * from './checkbox.module'; 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/table/sticky-table/sticky-table-example.css: -------------------------------------------------------------------------------- 1 | .table-wrapper { 2 | min-height: 400px; 3 | height: 30vh; 4 | } 5 | -------------------------------------------------------------------------------- /src/components-examples/angular/tabs/tab-group-custom-label/tab-group-custom-label-example.css: -------------------------------------------------------------------------------- 1 | .example-tab-icon { 2 | margin-left: 8px; 3 | } 4 | -------------------------------------------------------------------------------- /docs/src/app/shared/component-viewer/component-viewer/component-viewer.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | padding: 3rem 1.5rem; 4 | } 5 | -------------------------------------------------------------------------------- /docs/src/assets/source-code-button-hint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbb-design-systems/sbb-angular/HEAD/docs/src/assets/source-code-button-hint.png -------------------------------------------------------------------------------- /docs/src/assets/stack-blitz/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbb-design-systems/sbb-angular/HEAD/docs/src/assets/stack-blitz/src/favicon.ico -------------------------------------------------------------------------------- /src/components-examples/angular/search/search-historic-railway-pictures/search-historic-railway-pictures-example.css: -------------------------------------------------------------------------------- 1 | img { 2 | padding: 2px; 3 | } 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/captcha/captcha-template-driven-forms/captcha-template-driven-forms-example.css: -------------------------------------------------------------------------------- 1 | pre { 2 | word-break: break-all; 3 | } 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/notification/simple-notification/simple-notification-example.css: -------------------------------------------------------------------------------- 1 | sbb-notification { 2 | margin-bottom: 0.5rem; 3 | } 4 | -------------------------------------------------------------------------------- /docs/src/app/shared/markdown-viewer/markdown-viewer.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | overflow-y: hidden; 4 | padding: 3rem 1.5rem; 5 | } 6 | -------------------------------------------------------------------------------- /src/angular/datepicker/date-range.ts: -------------------------------------------------------------------------------- 1 | export class SbbDateRange { 2 | constructor( 3 | readonly start: D, 4 | readonly end: D, 5 | ) {} 6 | } 7 | -------------------------------------------------------------------------------- /src/components-examples/angular/alert/alert-simple/alert-simple-example.html: -------------------------------------------------------------------------------- 1 | This is a simple message with a simple Link 2 | -------------------------------------------------------------------------------- /src/components-examples/angular/button/button-with-icon/button-with-icon-example.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | gap: var(--sbb-divider-thin); 4 | } 5 | -------------------------------------------------------------------------------- /src/journey-maps/angular/style/_variables.scss: -------------------------------------------------------------------------------- 1 | $controlsWidth: 48px; 2 | $controlsMargin: 16px; 3 | $controlsWidthSmall: 32px; 4 | $controlsMarginSmall: 6px; 5 | -------------------------------------------------------------------------------- /src/journey-maps/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of journey-maps-client 3 | */ 4 | export * from './angular'; 5 | export * from './esri-plugin'; 6 | -------------------------------------------------------------------------------- /test/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // TODO(devversion): move bazel tsconfig up, or this folder into `src/`. 3 | "extends": "../src/bazel-tsconfig-build.json" 4 | } 5 | -------------------------------------------------------------------------------- /src/angular/processflow/step.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/angular/styles/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './cdk'; 2 | @forward './variables'; 3 | @forward './functions'; 4 | @forward './mediaqueries'; 5 | @forward './mixins'; 6 | -------------------------------------------------------------------------------- /src/components-examples/angular/input/input-errors/input-errors-example.css: -------------------------------------------------------------------------------- 1 | .example-form { 2 | min-width: 150px; 3 | max-width: 500px; 4 | width: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /src/components-examples/angular/notification-toast/notification-toast-duration/notification-toast-duration-example.css: -------------------------------------------------------------------------------- 1 | .sbb-form-field { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/notification-toast/simple-notification-toast/simple-notification-toast-example.css: -------------------------------------------------------------------------------- 1 | .sbb-form-field { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/table/filter-sort-paginator-table/filter-sort-paginator-table-example.css: -------------------------------------------------------------------------------- 1 | .sbb-column-filter-category { 2 | max-width: 0; 3 | } 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.css: -------------------------------------------------------------------------------- 1 | .example-action-button { 2 | margin-top: 8px; 3 | margin-right: 8px; 4 | } 5 | -------------------------------------------------------------------------------- /src/components-examples/angular/tag/tag-link/tag-link-example.html: -------------------------------------------------------------------------------- 1 | Trains 2 | -------------------------------------------------------------------------------- /src/dev-mode-types.d.ts: -------------------------------------------------------------------------------- 1 | /** Variable replaced at build time that indicates whether the app is in development mode. */ 2 | declare const ngDevMode: object | null; 3 | -------------------------------------------------------------------------------- /src/journey-maps/angular/components/leit-poi/model/leit-poi-placement.ts: -------------------------------------------------------------------------------- 1 | export type SbbLeitPoiPlacement = 'northeast' | 'southeast' | 'southwest' | 'northwest'; 2 | -------------------------------------------------------------------------------- /tools/tsconfig-test.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "types": ["node", "jasmine"] 5 | }, 6 | "exclude": [] 7 | } 8 | -------------------------------------------------------------------------------- /src/angular/checkbox-panel/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './checkbox-panel-directives'; 2 | export * from './checkbox-panel'; 3 | export * from './checkbox-panel.module'; 4 | -------------------------------------------------------------------------------- /src/angular/menu/menu-positions.ts: -------------------------------------------------------------------------------- 1 | export type SbbMenuPositionX = 'before' | 'after' | undefined; 2 | 3 | export type SbbMenuPositionY = 'above' | 'below' | undefined; 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/icon/icon-simple/icon-simple-example.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components-examples/angular/input/input-overview/input-overview-example.css: -------------------------------------------------------------------------------- 1 | .example-form { 2 | min-width: 150px; 3 | max-width: 500px; 4 | width: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /src/components-examples/angular/processflow/processflow-editable/processflow-editable-example.css: -------------------------------------------------------------------------------- 1 | .sbb-processflow, 2 | .sbb-form-field { 3 | margin-top: 1rem; 4 | } 5 | -------------------------------------------------------------------------------- /src/components-examples/angular/processflow/processflow-overview/processflow-overview-example.css: -------------------------------------------------------------------------------- 1 | .sbb-processflow, 2 | .sbb-form-field { 3 | margin-top: 1rem; 4 | } 5 | -------------------------------------------------------------------------------- /src/angular-experimental/example/example.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root', 5 | }) 6 | export class SbbExample {} 7 | -------------------------------------------------------------------------------- /src/angular/datepicker/datepicker-token.ts: -------------------------------------------------------------------------------- 1 | import { InjectionToken } from '@angular/core'; 2 | 3 | export const SBB_DATEPICKER = new InjectionToken('SBB_DATEPICKER'); 4 | -------------------------------------------------------------------------------- /src/angular/select/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './select.module'; 2 | export * from './select'; 3 | export * from './select-animations'; 4 | export * from './select-errors'; 5 | -------------------------------------------------------------------------------- /src/angular/usermenu/usermenu-icon.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[sbbIcon]', 5 | }) 6 | export class SbbUsermenuIcon {} 7 | -------------------------------------------------------------------------------- /tools/dgeni/templates/BUILD.bazel: -------------------------------------------------------------------------------- 1 | package(default_visibility = ["//visibility:public"]) 2 | 3 | filegroup( 4 | name = "templates", 5 | srcs = glob(["*.html"]), 6 | ) 7 | -------------------------------------------------------------------------------- /src/angular/schematics/tsconfig-test.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "types": ["jasmine", "node"] 5 | }, 6 | "exclude": [] 7 | } 8 | -------------------------------------------------------------------------------- /src/components-examples/angular/tooltip/tooltip-custom-icon/tooltip-custom-icon-example.html: -------------------------------------------------------------------------------- 1 | This is a tooltip with a custom icon. 2 | -------------------------------------------------------------------------------- /docs/src/app/angular/icon-overview/icon-overview.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | padding: 3rem 1.5rem; 4 | } 5 | 6 | sbb-cdn-icon-list { 7 | display: block; 8 | } 9 | -------------------------------------------------------------------------------- /src/angular/core/version.ts: -------------------------------------------------------------------------------- 1 | import { Version } from '@angular/core'; 2 | 3 | /** Current version of @sbb-esta/angular. */ 4 | export const VERSION = new Version('0.0.0-PLACEHOLDER'); 5 | -------------------------------------------------------------------------------- /src/angular/radio-button-panel/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './radio-button-panel-directives'; 2 | export * from './radio-button-panel.module'; 3 | export * from './radio-button-panel'; 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/lightbox/lightbox-component/lightbox-component-example.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.github/Dockerfile.regenerate: -------------------------------------------------------------------------------- 1 | # For version 11 + 12 2 | FROM nginxinc/nginx-unprivileged:stable 3 | 4 | COPY default.conf /etc/nginx/conf.d/default.conf 5 | COPY html /usr/share/nginx/html 6 | -------------------------------------------------------------------------------- /src/angular/datepicker/datepicker-errors.ts: -------------------------------------------------------------------------------- 1 | export function createMissingDateImplError(provider: string) { 2 | return Error(`SbbDatepicker: No provider found for ${provider}.`); 3 | } 4 | -------------------------------------------------------------------------------- /src/angular/search/search-error.ts: -------------------------------------------------------------------------------- 1 | /** @docs-private */ 2 | export function getSbbInputRequiredError(): Error { 3 | return Error('sbb-search requires an element.'); 4 | } 5 | -------------------------------------------------------------------------------- /src/angular/textexpand/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './textexpand'; 2 | export * from './textexpand-expanded'; 3 | export * from './textexpand-collapsed'; 4 | export * from './textexpand.module'; 5 | -------------------------------------------------------------------------------- /src/angular/textexpand/textexpand-errors.ts: -------------------------------------------------------------------------------- 1 | /** @docs-private */ 2 | export function getSbbTextexpandInvalidError(): Error { 3 | return Error('Collapsed and expanded must be defined!'); 4 | } 5 | -------------------------------------------------------------------------------- /src/components-examples/angular/input/input-error-state-matcher/input-error-state-matcher-example.css: -------------------------------------------------------------------------------- 1 | .example-form { 2 | min-width: 150px; 3 | max-width: 500px; 4 | width: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /src/components-examples/angular/pagination/index.ts: -------------------------------------------------------------------------------- 1 | export { NavigationExample } from './navigation/navigation-example'; 2 | export { PaginatorExample } from './paginator/paginator-example'; 3 | -------------------------------------------------------------------------------- /src/components-examples/angular/lightbox/lightbox-confirmation/lightbox-confirmation-example.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components-examples/angular/notification/custom-icon-notification/custom-icon-notification-example.html: -------------------------------------------------------------------------------- 1 | New timezone saved successfully 2 | -------------------------------------------------------------------------------- /src/components-examples/angular/textarea/textarea-reactive-forms-with-sbb-form-field/textarea-reactive-forms-with-sbb-form-field-example.css: -------------------------------------------------------------------------------- 1 | .sbb-textarea { 2 | min-height: 6rem !important; 3 | } 4 | -------------------------------------------------------------------------------- /tools/region-parser/README.md: -------------------------------------------------------------------------------- 1 | The implementation of `region-parser` is copied from the `angular/angular` repo. 2 | It has been adapted from JavaScript to Typescript along with a few minor changes. 3 | -------------------------------------------------------------------------------- /src/angular/autocomplete/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './autocomplete.module'; 2 | export * from './autocomplete'; 3 | export * from './autocomplete-origin'; 4 | export * from './autocomplete-trigger'; 5 | -------------------------------------------------------------------------------- /src/angular/notification/notification-directives.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: 'sbb-notification-icon', 5 | }) 6 | export class SbbNotificationIcon {} 7 | -------------------------------------------------------------------------------- /src/components-examples/angular/form-field/form-field-time-input/form-field-time-input-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/status/index.ts: -------------------------------------------------------------------------------- 1 | export { StatusWithMessageExample } from './status-with-message/status-with-message-example'; 2 | export { StatusExample } from './status/status-example'; 3 | -------------------------------------------------------------------------------- /src/angular/file-selector/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './file-selector.module'; 2 | export * from './file-selector-base'; 3 | export * from './file-selector-types.service'; 4 | export * from './file-selector'; 5 | -------------------------------------------------------------------------------- /src/angular/input/input-errors.ts: -------------------------------------------------------------------------------- 1 | /** @docs-private */ 2 | export function getSbbInputUnsupportedTypeError(type: string): Error { 3 | return Error(`Input type "${type}" isn't supported by sbbInput.`); 4 | } 5 | -------------------------------------------------------------------------------- /src/angular/notification/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './notification.module'; 2 | export * from './notification'; 3 | export * from './notification-animations'; 4 | export * from './notification-directives'; 5 | -------------------------------------------------------------------------------- /src/angular/schematics/ng-update/data/class-names.ts: -------------------------------------------------------------------------------- 1 | import { ClassNameUpgradeData, VersionChanges } from '@angular/cdk/schematics'; 2 | 3 | export const classNames: VersionChanges = {}; 4 | -------------------------------------------------------------------------------- /src/angular/schematics/ng-update/data/input-names.ts: -------------------------------------------------------------------------------- 1 | import { InputNameUpgradeData, VersionChanges } from '@angular/cdk/schematics'; 2 | 3 | export const inputNames: VersionChanges = {}; 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/button/link/link-example.html: -------------------------------------------------------------------------------- 1 |

a Link

2 | Example Link 3 | 4 |

button Link

5 | 6 | -------------------------------------------------------------------------------- /src/angular/form-field/form-field-errors.ts: -------------------------------------------------------------------------------- 1 | /** @docs-private */ 2 | export function getSbbFormFieldMissingControlError(): Error { 3 | return Error('sbb-form-field must contain a SbbFormFieldControl.'); 4 | } 5 | -------------------------------------------------------------------------------- /src/angular/schematics/ng-update/data/output-names.ts: -------------------------------------------------------------------------------- 1 | import { OutputNameUpgradeData, VersionChanges } from '@angular/cdk/schematics'; 2 | 3 | export const outputNames: VersionChanges = {}; 4 | -------------------------------------------------------------------------------- /src/angular/toggle/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './toggle.module'; 2 | export * from './toggle'; 3 | export * from './toggle-directives'; 4 | export * from './toggle-option'; 5 | export * from './toggle-animations'; 6 | -------------------------------------------------------------------------------- /src/components-examples/angular/alert/alert-external-link/alert-external-link-example.html: -------------------------------------------------------------------------------- 1 | This is a alert which links to an external website. 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/loading-indicator/loading-indicator-inline/loading-indicator-inline-example.html: -------------------------------------------------------------------------------- 1 | I am an inline loading indicator: 2 | 3 | -------------------------------------------------------------------------------- /src/components-examples/angular/loading-indicator/loading-indicator-simple/loading-indicator-simple-example.css: -------------------------------------------------------------------------------- 1 | h4 { 2 | margin-top: 1em; 3 | padding-bottom: 1em; 4 | border-bottom: 1px solid #dcdcdc; 5 | } 6 | -------------------------------------------------------------------------------- /src/components-examples/angular/notification-toast/notification-toast-component/notification-toast-component-example.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/angular-experimental/example/example.md: -------------------------------------------------------------------------------- 1 | Example description. 2 | 3 | ### Accessibility 4 | 5 | Section about accessibility. What needs to be considered to ensure this 6 | module can be used by people with disabilities. 7 | -------------------------------------------------------------------------------- /src/angular/form-field/label.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: 'sbb-label', 5 | host: { 6 | class: 'sbb-label', 7 | }, 8 | }) 9 | export class SbbLabel {} 10 | -------------------------------------------------------------------------------- /src/angular/menu/menu-item.html: -------------------------------------------------------------------------------- 1 | 2 | @if (_triggersSubmenu) { 3 | 7 | } 8 | -------------------------------------------------------------------------------- /src/angular/schematics/ng-update/data/method-call-checks.ts: -------------------------------------------------------------------------------- 1 | import { MethodCallUpgradeData, VersionChanges } from '@angular/cdk/schematics'; 2 | 3 | export const methodCallChecks: VersionChanges = {}; 4 | -------------------------------------------------------------------------------- /src/angular/schematics/ng-update/data/property-names.ts: -------------------------------------------------------------------------------- 1 | import { PropertyNameUpgradeData, VersionChanges } from '@angular/cdk/schematics'; 2 | 3 | export const propertyNames: VersionChanges = {}; 4 | -------------------------------------------------------------------------------- /src/angular/schematics/ng-update/data/symbol-removal.ts: -------------------------------------------------------------------------------- 1 | import { SymbolRemovalUpgradeData, VersionChanges } from '@angular/cdk/schematics'; 2 | 3 | export const symbolRemoval: VersionChanges = {}; 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/alert/alert-router-link/alert-router-link-example.html: -------------------------------------------------------------------------------- 1 | This alert links to an app internal route. 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/notification/jumpmark-notification/jumpmark-notification-example.html: -------------------------------------------------------------------------------- 1 | Please correct the following inputs 4 | -------------------------------------------------------------------------------- /src/journey-maps-wc/index.d.ts: -------------------------------------------------------------------------------- 1 | import type { SbbJourneyMaps } from './bundle'; 2 | 3 | export type { SbbJourneyMaps, SbbMarker } from './bundle'; 4 | 5 | export type SbbJourneyMapsElement = HTMLElement & SbbJourneyMaps; 6 | -------------------------------------------------------------------------------- /src/journey-maps/esri-plugin/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of esri-plugin 3 | */ 4 | 5 | export * from './esri-plugin'; 6 | export * from './esri-plugin.module'; 7 | export * from './esri-plugin.interface'; 8 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3.5' 2 | services: 3 | docs: 4 | build: . 5 | ports: 6 | - "8080:8080" 7 | environment: 8 | - JM_API_KEY 9 | - LEGACY_VERSIONS 10 | - ENVIRONMENT_BANNER_TEXT -------------------------------------------------------------------------------- /docs/src/app/angular/icon-overview/icon-overview.component.html: -------------------------------------------------------------------------------- 1 | @if (cdnIcons()) { 2 | 3 | } @else { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /src/angular/header-lean/header-token.ts: -------------------------------------------------------------------------------- 1 | import { InjectionToken } from '@angular/core'; 2 | 3 | import type { SbbHeaderLean } from './header'; 4 | 5 | export const SBB_HEADER = new InjectionToken('SBB_HEADER'); 6 | -------------------------------------------------------------------------------- /src/angular/sidebar/icon-sidebar/icon-sidebar-item.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ label }} 5 | -------------------------------------------------------------------------------- /src/journey-maps/angular/model/marker-category-mapping.ts: -------------------------------------------------------------------------------- 1 | export interface SbbMarkerCategoryMapping { 2 | category: string; 3 | source: string; 4 | layer: string; 5 | layerSelected: string; 6 | popupOffset: any; 7 | } 8 | -------------------------------------------------------------------------------- /docs/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": ["src/main.ts"], 8 | "include": ["src/**/*.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /src/angular/schematics/ng-update/data/element-selectors.ts: -------------------------------------------------------------------------------- 1 | import { ElementSelectorUpgradeData, VersionChanges } from '@angular/cdk/schematics'; 2 | 3 | export const elementSelectors: VersionChanges = {}; 4 | -------------------------------------------------------------------------------- /src/angular/tag/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './tag.module'; 2 | export * from './tag'; 3 | export * from './tags'; 4 | export * from './tag-link'; 5 | export { SbbCheckboxChange as SbbTagChange } from '@sbb-esta/angular/checkbox'; 6 | -------------------------------------------------------------------------------- /src/components-examples/angular/datepicker/calendar-configuration/calendar-configuration-example.css: -------------------------------------------------------------------------------- 1 | button.example-custom-date-class .sbb-calendar-body-cell-content { 2 | color: #0079c7 !important; 3 | font-weight: bold; 4 | } 5 | -------------------------------------------------------------------------------- /src/journey-maps/angular/components/basemap-switch/basemap-switch.scss: -------------------------------------------------------------------------------- 1 | @use './../../style/functions' as f; 2 | 3 | @include f.map-controls-shared; 4 | @include f.map-control-icon; 5 | @include f.map-control-icon-button('layers'); 6 | -------------------------------------------------------------------------------- /src/journey-maps/angular/components/compass-button/compass-button.scss: -------------------------------------------------------------------------------- 1 | @use './../../style/functions' as f; 2 | 3 | @include f.map-controls-shared; 4 | @include f.map-control-icon; 5 | @include f.map-control-icon-button('compass'); 6 | -------------------------------------------------------------------------------- /src/journey-maps/angular/components/geolocate-button/geolocate-button.scss: -------------------------------------------------------------------------------- 1 | @use './../../style/functions' as f; 2 | 3 | @include f.map-controls-shared; 4 | @include f.map-control-icon; 5 | @include f.map-control-icon-button('gps'); 6 | -------------------------------------------------------------------------------- /src/journey-maps/angular/components/home-button/home-button.scss: -------------------------------------------------------------------------------- 1 | @use './../../style/functions' as f; 2 | 3 | @include f.map-controls-shared; 4 | @include f.map-control-icon; 5 | @include f.map-control-icon-button('switzerland'); 6 | -------------------------------------------------------------------------------- /scripts/jasmine-helper.js: -------------------------------------------------------------------------------- 1 | const { compilerOptions } = require('../tools/schematics/tsconfig.json'); 2 | 3 | require('ts-node').register({ 4 | typeCheck: true, 5 | compilerOptions: { ...compilerOptions, module: 'commonjs' }, 6 | }); 7 | -------------------------------------------------------------------------------- /src/README.md: -------------------------------------------------------------------------------- 1 | # SBB Components and Design for Angular 2 | 3 | This is the repository for the Angular component library for SBB. 4 | 5 | [Documentation](https://angular.app.sbb.ch/) 6 | 7 | [Design Specification](https://digital.sbb.ch/) 8 | -------------------------------------------------------------------------------- /src/angular/chips/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './chips.module'; 2 | export * from './chip-list'; 3 | export * from './chip'; 4 | export * from './chip-input'; 5 | export * from './chip-default-options'; 6 | export * from './chip-tokens'; 7 | -------------------------------------------------------------------------------- /tools/dgeni/templates/method-list.template.html: -------------------------------------------------------------------------------- 1 | {%- if methodList.length -%} 2 |
Methods
3 | {% for m in methodList %} 4 | {$ method(m) $} 5 | {% endfor %} 6 | {%- endif -%} 7 | -------------------------------------------------------------------------------- /src/angular/schematics/ng-update/data/attribute-selectors.ts: -------------------------------------------------------------------------------- 1 | import { AttributeSelectorUpgradeData, VersionChanges } from '@angular/cdk/schematics'; 2 | 3 | export const attributeSelectors: VersionChanges = {}; 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/checkbox-panel/checkbox-panel-simple/checkbox-panel-simple-example.html: -------------------------------------------------------------------------------- 1 | Oranges 2 | 3 |

Model

4 | 
{{ checked.value | json }}
5 | -------------------------------------------------------------------------------- /docs/src/assets/stack-blitz/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 30px; 4 | } 5 | 6 | html, body { 7 | height: 100%; 8 | } 9 | 10 | .version-info { 11 | font-size: 8pt; 12 | float: right; 13 | margin: 8px; 14 | } 15 | -------------------------------------------------------------------------------- /src/angular/form-field/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './form-field.module'; 2 | export * from './form-field'; 3 | export * from './error'; 4 | export * from './label'; 5 | export * from './form-field-errors'; 6 | export * from './form-field-control'; 7 | -------------------------------------------------------------------------------- /src/angular/loading-indicator/loading-indicator.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | -------------------------------------------------------------------------------- /src/angular/tag/tags.html: -------------------------------------------------------------------------------- 1 | {{ _labelAllTag }} 8 | 9 | -------------------------------------------------------------------------------- /src/journey-maps-wc/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": ["src/main.ts"], 8 | "include": ["src/**/*.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /.bazelignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | 4 | docs/node_modules 5 | src/angular-experimental/node_modules 6 | src/angular/node_modules 7 | src/components-examples/node_modules 8 | src/journey-maps/node_modules 9 | src/journey-maps-wc/node_modules 10 | -------------------------------------------------------------------------------- /src/angular/processflow/step-label.ts: -------------------------------------------------------------------------------- 1 | import { CdkStepLabel } from '@angular/cdk/stepper'; 2 | import { Directive } from '@angular/core'; 3 | 4 | @Directive({ 5 | selector: '[sbbStepLabel]', 6 | }) 7 | export class SbbStepLabel extends CdkStepLabel {} 8 | -------------------------------------------------------------------------------- /src/components-examples/angular/file-selector/simple-file-selector/simple-file-selector-example.html: -------------------------------------------------------------------------------- 1 | 2 |

Model

3 | 
{{ beautifyFileList(filesList) | json }}
4 | -------------------------------------------------------------------------------- /src/components-examples/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './example-data'; 2 | 3 | // The example-module file will be auto-generated. As soon as the 4 | // examples are being compiled, the module file will be generated. 5 | export * from './example-module'; 6 | -------------------------------------------------------------------------------- /src/angular/captcha/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './captcha.module'; 2 | export * from './captcha/captcha-settings'; 3 | export * from './captcha/windowref.service'; 4 | export * from './captcha/captcha-loader.service'; 5 | export * from './captcha/captcha'; 6 | -------------------------------------------------------------------------------- /src/angular/core/option/optgroup.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/angular/header-lean/header-menu-trigger.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components-examples/angular/accordion/accordion-custom-html/accordion-custom-html-example.css: -------------------------------------------------------------------------------- 1 | .accordion-example-custom-html-panel { 2 | margin: 0; 3 | } 4 | 5 | .accordion-example-panel-button { 6 | flex: 1 0 auto; 7 | text-align: right; 8 | } 9 | -------------------------------------------------------------------------------- /src/components-examples/angular/time-input/time-input-forms/time-input-forms-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

Model

6 | 
{{ value }}
7 | -------------------------------------------------------------------------------- /src/angular/core/testing/lean-polyfill/public-api.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | // tslint:disable:no-var-keyword prefer-const 4 | (function () { 5 | if (typeof document !== 'undefined') { 6 | document.documentElement.classList.add('sbb-lean'); 7 | } 8 | })(); 9 | -------------------------------------------------------------------------------- /src/components-examples/angular/captcha/captcha-reactive-forms/captcha-reactive-forms-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Captcha response

4 | 
{{ this.formControl.value | json }}
5 | -------------------------------------------------------------------------------- /tools/region-parser/region-matchers/html.ts: -------------------------------------------------------------------------------- 1 | // These kind of comments are used in HTML 2 | export const html = { 3 | regionStartMatcher: /^\s*)?\s*$/, 4 | regionEndMatcher: /^\s*\s*$/, 5 | }; 6 | -------------------------------------------------------------------------------- /src/angular/styles/BUILD.bazel: -------------------------------------------------------------------------------- 1 | load( 2 | "//tools:defaults.bzl", 3 | "sass_library", 4 | ) 5 | 6 | package(default_visibility = ["//visibility:public"]) 7 | 8 | sass_library( 9 | name = "scss_lib", 10 | srcs = glob(["**/_*.scss"]), 11 | ) 12 | -------------------------------------------------------------------------------- /src/components-examples/angular/notification-toast/notification-toast-template/notification-toast-template-example.html: -------------------------------------------------------------------------------- 1 | 2 | Template content 3 | -------------------------------------------------------------------------------- /src/components-examples/angular/tabs/tab-group-basic/tab-group-basic-example.html: -------------------------------------------------------------------------------- 1 | 2 | Content 1 3 | Content 2 4 | Content 3 5 | 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | end_of_line = lf 11 | 12 | [*.md] -------------------------------------------------------------------------------- /docs/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": ["jasmine", "node"] 6 | }, 7 | "files": ["src/test.ts"], 8 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /src/angular/alert/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './alert.module'; 2 | export * from './alert-animations'; 3 | export * from './alert-config'; 4 | export * from './alert-outlet'; 5 | export * from './alert-ref'; 6 | export * from './alert-service'; 7 | export * from './alert'; 8 | -------------------------------------------------------------------------------- /src/angular/sidebar/sidebar/sidebar-link.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | -------------------------------------------------------------------------------- /src/components-examples/angular/captcha/captcha-template-driven-forms/captcha-template-driven-forms-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Captcha response

4 | 
{{ this.captcha | json }}
5 | -------------------------------------------------------------------------------- /src/journey-maps/angular/model/marker-priority.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * The Priority of a {@link Marker}. 3 | * It can be used to customize the styling of clustered markers. 4 | */ 5 | export enum SbbMarkerPriority { 6 | LOW = 1, 7 | REGULAR = 2, 8 | HIGH = 3, 9 | } 10 | -------------------------------------------------------------------------------- /src/journey-maps/angular/services/map/util/feature-collection-util.ts: -------------------------------------------------------------------------------- 1 | import { Feature, FeatureCollection } from 'geojson'; 2 | 3 | export const toFeatureCollection = (features: Feature[]): FeatureCollection => ({ 4 | type: 'FeatureCollection', 5 | features, 6 | }); 7 | -------------------------------------------------------------------------------- /t9n-xlf.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://raw.githubusercontent.com/kyubisation/angular-t9n/master/t9n.schema.json", 3 | "translationFile": "src/angular/i18n/xlf/messages.xlf", 4 | "targetTranslationPath": "", 5 | "includeContextInTarget": false, 6 | "port": 4300 7 | } 8 | -------------------------------------------------------------------------------- /t9n-xlf2.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://raw.githubusercontent.com/kyubisation/angular-t9n/master/t9n.schema.json", 3 | "translationFile": "src/angular/i18n/xlf2/messages.xlf", 4 | "targetTranslationPath": "", 5 | "includeContextInTarget": false, 6 | "port": 4400 7 | } 8 | -------------------------------------------------------------------------------- /tools/region-parser/BUILD.bazel: -------------------------------------------------------------------------------- 1 | load("//tools:defaults.bzl", "ts_project") 2 | 3 | package(default_visibility = ["//visibility:public"]) 4 | 5 | ts_project( 6 | name = "region-parser", 7 | srcs = glob(["**/*.ts"]), 8 | tsconfig = "//tools:tsconfig", 9 | ) 10 | -------------------------------------------------------------------------------- /scss-bundle.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "*1": "scss-bundle requires a config file in the Bazel execroot.", 3 | "*2": "The config is used in the src/angular:styles_bundle target", 4 | "bundlerOptions": { 5 | "logLevel": "error", 6 | "dedupeGlobs": ["./src/**/*.scss"] 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/angular/icon/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './icon.module'; 2 | 3 | // To avoid colliding name exports in bundles, don't use star export here 4 | export { SbbIcon, SBB_ICON_LOCATION, SBB_ICON_LOCATION_FACTORY, SbbIconLocation } from './icon'; 5 | export * from './icon-registry'; 6 | -------------------------------------------------------------------------------- /src/components-examples/angular/checkbox-panel/checkbox-panel-content/checkbox-panel-content-example.css: -------------------------------------------------------------------------------- 1 | .panel-content { 2 | display: flex; 3 | } 4 | 5 | .panel-content span { 6 | flex: 0 0 auto; 7 | } 8 | 9 | .panel-content .separator { 10 | flex: 1 1 auto; 11 | } 12 | -------------------------------------------------------------------------------- /src/components-examples/angular/sidebar/sidebar/sidebar-example.css: -------------------------------------------------------------------------------- 1 | .sidebar-frame { 2 | display: block; 3 | height: 400px; 4 | width: 500px; 5 | position: relative; 6 | border: 1px solid #b7b7b7; 7 | } 8 | 9 | sbb-sidebar-content { 10 | padding: 15px; 11 | } 12 | -------------------------------------------------------------------------------- /src/components-examples/angular/textarea/textarea-native/textarea-native-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

Model

6 | 
{{ textarea | json }}
7 | -------------------------------------------------------------------------------- /tools/region-parser/region-matchers/inline-c.ts: -------------------------------------------------------------------------------- 1 | // This comment type is used in C like languages such as JS, TS, Dart, etc 2 | export const inlineC = { 3 | regionStartMatcher: /^\s*\/\/\s*#docregion\s*(.*)\s*$/, 4 | regionEndMatcher: /^\s*\/\/\s*#enddocregion\s*(.*)\s*$/, 5 | }; 6 | -------------------------------------------------------------------------------- /src/angular/core/datetime/date-pipe-date-formats.ts: -------------------------------------------------------------------------------- 1 | import { SbbDateFormats } from './date-formats'; 2 | 3 | export const SBB_DATE_PIPE_DATE_FORMATS: SbbDateFormats = { 4 | dateInput: 'EEEEEE, dd.MM.yyyy', 5 | dateInputPure: 'dd.MM.yyyy', 6 | dateA11yLabel: 'dd MM yyyy', 7 | }; 8 | -------------------------------------------------------------------------------- /src/angular/sidebar/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './sidebar.module'; 2 | export * from './sidebar-base'; 3 | export * from './icon-sidebar/icon-sidebar'; 4 | export * from './icon-sidebar/icon-sidebar-item'; 5 | export * from './sidebar/sidebar'; 6 | export * from './sidebar/sidebar-link'; 7 | -------------------------------------------------------------------------------- /src/components-examples/angular/table/expandable-table/expandable-table-example.css: -------------------------------------------------------------------------------- 1 | td.detail { 2 | font-style: italic; 3 | } 4 | 5 | td:not(.detail) { 6 | cursor: pointer; 7 | } 8 | 9 | td.detail .sbb-icon { 10 | vertical-align: middle; 11 | margin-right: 10px; 12 | } 13 | -------------------------------------------------------------------------------- /src/journey-maps-wc/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": ["jasmine", "node"] 6 | }, 7 | "files": ["src/test.ts"], 8 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /src/components-examples/angular/checkbox-panel/checkbox-panel-group/checkbox-panel-group-example.css: -------------------------------------------------------------------------------- 1 | .configuration { 2 | display: flex; 3 | flex-wrap: wrap; 4 | } 5 | 6 | .configuration sbb-form-field { 7 | margin-right: 1rem; 8 | } 9 | 10 | pre { 11 | user-select: all; 12 | } 13 | -------------------------------------------------------------------------------- /src/components-examples/angular/sidebar/icon-sidebar/icon-sidebar-example.css: -------------------------------------------------------------------------------- 1 | .sidebar-frame { 2 | display: block; 3 | height: 400px; 4 | width: 500px; 5 | position: relative; 6 | border: 1px solid #b7b7b7; 7 | } 8 | 9 | sbb-icon-sidebar-content { 10 | padding: 15px; 11 | } 12 | -------------------------------------------------------------------------------- /docs/src/app/shared/component-viewer/example-list-viewer/example-list-viewer.component.html: -------------------------------------------------------------------------------- 1 | @if (examples | async; as _examples) { 2 | @for (exampleData of _examples; track exampleData) { 3 | 4 | } 5 | } @else { 6 | No Examples found 7 | } 8 | -------------------------------------------------------------------------------- /src/angular/tabs/tab.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/components-examples/angular/dialog/dialog-animations/dialog-animations-example.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | -------------------------------------------------------------------------------- /src/components-examples/angular/sidebar/multiple-sidebars/multiple-sidebars-example.css: -------------------------------------------------------------------------------- 1 | .sidebar-frame { 2 | display: block; 3 | height: 400px; 4 | width: 800px; 5 | position: relative; 6 | border: 1px solid #b7b7b7; 7 | } 8 | 9 | sbb-sidebar-content { 10 | padding: 15px; 11 | } 12 | -------------------------------------------------------------------------------- /src/components-examples/angular/form-field/form-field-textarea-tooltip/form-field-textarea-tooltip-example.html: -------------------------------------------------------------------------------- 1 | 2 | Message (optional)Tell us more about you! 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/journey-maps-wc/src/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowser } from '@angular/platform-browser'; 2 | 3 | import { AppModule } from './app/app.module'; 4 | import './bootstrap/bootstrap'; 5 | 6 | platformBrowser() 7 | .bootstrapModule(AppModule, { ngZone: 'noop' }) 8 | .catch((err) => console.log(err)); 9 | -------------------------------------------------------------------------------- /src/angular/sidebar/icon-sidebar/icon-sidebar-container.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | @if (!_content) { 5 | 6 | 7 | 8 | } 9 | -------------------------------------------------------------------------------- /src/components-examples/angular/radio-button-panel/radio-button-panel-group/radio-button-panel-group-example.css: -------------------------------------------------------------------------------- 1 | .configuration { 2 | display: flex; 3 | flex-wrap: wrap; 4 | } 5 | 6 | .configuration sbb-form-field { 7 | margin-right: 1rem; 8 | } 9 | 10 | pre { 11 | user-select: all; 12 | } 13 | -------------------------------------------------------------------------------- /docs/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.dev/license 7 | */ 8 | 9 | export const environment = {}; 10 | -------------------------------------------------------------------------------- /src/angular/breadcrumb/breadcrumb.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: 'sbb-breadcrumb', 5 | exportAs: 'sbbBreadcrumb', 6 | host: { 7 | class: 'sbb-breadcrumb sbb-icon-fit', 8 | role: 'listitem', 9 | }, 10 | }) 11 | export class SbbBreadcrumb {} 12 | -------------------------------------------------------------------------------- /src/angular/breadcrumb/public-api.ts: -------------------------------------------------------------------------------- 1 | // To avoid colliding name exports in bundles, don't use star export here 2 | export { SbbBreadcrumbs, _sbbBreadcrumbMenuInheritedTriggerContext } from './breadcrumbs'; 3 | export * from './breadcrumb'; 4 | export * from './breadcrumb-root'; 5 | export * from './breadcrumb.module'; 6 | -------------------------------------------------------------------------------- /src/angular/core/datetime/date-formats.ts: -------------------------------------------------------------------------------- 1 | import { InjectionToken } from '@angular/core'; 2 | 3 | export interface SbbDateFormats { 4 | dateInput: any; 5 | dateInputPure: any; 6 | dateA11yLabel: any; 7 | } 8 | 9 | export const SBB_DATE_FORMATS = new InjectionToken('sbb-date-formats'); 10 | -------------------------------------------------------------------------------- /src/angular/dialog/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './dialog.module'; 2 | export * from './dialog'; 3 | export * from './dialog-container'; 4 | export * from './dialog-content-directives'; 5 | export * from './dialog-config'; 6 | export * from './dialog-ref'; 7 | export { sbbDialogAnimations } from './dialog-animations'; 8 | -------------------------------------------------------------------------------- /src/components-examples/angular/tabs/tab-group-dynamic/tab-group-dynamic-example.css: -------------------------------------------------------------------------------- 1 | .example-input-label, 2 | .example-delete-tab-button { 3 | margin: 8px; 4 | } 5 | 6 | .example-add-tab-button { 7 | margin-right: 1rem; 8 | } 9 | 10 | .add-tab { 11 | display: flex; 12 | align-items: center; 13 | } 14 | -------------------------------------------------------------------------------- /tools/region-parser/region-matchers/block-c.ts: -------------------------------------------------------------------------------- 1 | // These kind of comments are used CSS and other languages that do not support inline comments 2 | export const blockC = { 3 | regionStartMatcher: /^\s*\/\*\s*#docregion\s*(.*)\s*\*\/\s*$/, 4 | regionEndMatcher: /^\s*\/\*\s*#enddocregion\s*(.*)\s*\*\/\s*$/, 5 | }; 6 | -------------------------------------------------------------------------------- /src/angular/core/common-behaviors/constructor.ts: -------------------------------------------------------------------------------- 1 | /** @docs-private */ 2 | export type Constructor = new (...args: any[]) => T; 3 | 4 | /** 5 | * This is a permissive type for abstract class constructors. 6 | * @docs-private 7 | */ 8 | export type AbstractConstructor = abstract new (...args: any[]) => T; 9 | -------------------------------------------------------------------------------- /src/angular/icon/icon.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { SbbCommonModule } from '@sbb-esta/angular/core'; 3 | 4 | import { SbbIcon } from './icon'; 5 | 6 | @NgModule({ 7 | imports: [SbbCommonModule, SbbIcon], 8 | exports: [SbbIcon], 9 | }) 10 | export class SbbIconModule {} 11 | -------------------------------------------------------------------------------- /src/components-examples/angular/alert/alert-outlet/alert-outlet-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Actions

4 |

5 | 6 |

7 |

8 | 9 |

10 | -------------------------------------------------------------------------------- /src/components-examples/angular/lightbox/lightbox-animations/lightbox-animations-example.html: -------------------------------------------------------------------------------- 1 | 4 | 7 | -------------------------------------------------------------------------------- /src/journey-maps-wc/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.dev/license 7 | */ 8 | 9 | export const environment = {}; 10 | -------------------------------------------------------------------------------- /docs/src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | @use '@sbb-esta/angular' as sbb; 2 | 3 | :host { 4 | display: block; 5 | } 6 | 7 | .sbb-icon-sidebar.sbb-icon-sidebar-expanded { 8 | width: sbb.pxToEm(260); 9 | } 10 | 11 | .sbb-select { 12 | min-width: 150px; 13 | } 14 | 15 | .additional-header-content { 16 | display: flex; 17 | } 18 | -------------------------------------------------------------------------------- /src/angular/header-lean/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './app-chooser-section'; 2 | export * from './header'; 3 | export * from './header-directives'; 4 | export * from './header-menu-item'; 5 | export * from './header-menu-trigger'; 6 | export * from './header-menu'; 7 | export * from './header-token'; 8 | export * from './header.module'; 9 | -------------------------------------------------------------------------------- /src/components-examples/angular/notification-toast/notification-toast-duration/notification-toast-duration-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components-examples/angular/time-input/index.ts: -------------------------------------------------------------------------------- 1 | export { SimpleTimeInputExample } from './simple-time-input/simple-time-input-example'; 2 | export { TimeInputFormsExample } from './time-input-forms/time-input-forms-example'; 3 | export { TimeInputReactiveFormsExample } from './time-input-reactive-forms/time-input-reactive-forms-example'; 4 | -------------------------------------------------------------------------------- /tools/example-module/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["es2020"], 4 | "module": "commonjs", 5 | "esModuleInterop": true, 6 | "target": "es2020", 7 | "sourceMap": true, 8 | "types": ["node"] 9 | }, 10 | "bazelOptions": { 11 | "suppressTsconfigOverrideWarnings": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/components-examples/angular/checkbox/checkbox/checkbox-example.html: -------------------------------------------------------------------------------- 1 | 2 | Test label 3 | 4 | 5 |

Properties

6 | Disabled 7 |

Change Counter: {{ changeCounter }}

8 | -------------------------------------------------------------------------------- /tools/highlight-files/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["es2020"], 4 | "module": "commonjs", 5 | "esModuleInterop": true, 6 | "target": "es2020", 7 | "sourceMap": true, 8 | "types": ["node"] 9 | }, 10 | "bazelOptions": { 11 | "suppressTsconfigOverrideWarnings": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/angular/schematics/migration.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json", 3 | "schematics": { 4 | "migration-v21": { 5 | "version": "21.0-0", 6 | "description": "Updates SBB Angular to v21", 7 | "factory": "./ng-update/index#updateToV21" 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/angular/tag/tag-link.html: -------------------------------------------------------------------------------- 1 | @if (svgIcon) { 2 | 3 | } 4 | 5 | 10 | -------------------------------------------------------------------------------- /tools/dgeni/templates/macros.html: -------------------------------------------------------------------------------- 1 | {% macro deprecationTitle(doc) %} 2 | {%- if doc.breakingChange and doc.deprecatedMessage -%} 3 | deprecated-message="{$ doc.deprecatedMessage $} Will be removed in v{$ doc.breakingChange $} or later." 4 | {% else %} 5 | deprecated-message="{$ doc.deprecatedMessage $}" 6 | {%- endif -%} 7 | {% endmacro %} 8 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # These owners will be the default owners for everything in 2 | # the repo. Unless a later match takes precedence, 3 | # global owners will be requested for 4 | # review when someone opens a pull request. 5 | * @kyubisation @jeripeierSBB @mhaertwig 6 | 7 | # @sbb-esta/journey-maps maintainers 8 | src/journey-maps @swiss-chris @mstankala 9 | -------------------------------------------------------------------------------- /src/angular/processflow/public-api.ts: -------------------------------------------------------------------------------- 1 | export { StepState } from '@angular/cdk/stepper'; 2 | export * from './processflow.module'; 3 | export * from './step-label'; 4 | export * from './processflow'; 5 | export * from './processflow-button'; 6 | export * from './step-header'; 7 | export * from './processflow-animations'; 8 | export * from './step-content'; 9 | -------------------------------------------------------------------------------- /src/angular/schematics/paths.ts: -------------------------------------------------------------------------------- 1 | import { join } from 'path'; 2 | 3 | /** Path to the schematic collection for non-migration schematics. */ 4 | export const COLLECTION_PATH = join(__dirname, 'collection.json'); 5 | 6 | /** Path to the schematic collection that includes the migrations. */ 7 | export const MIGRATION_PATH = join(__dirname, 'migration.json'); 8 | -------------------------------------------------------------------------------- /src/angular/time-input/time-input.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { SbbCommonModule } from '@sbb-esta/angular/core'; 3 | 4 | import { SbbTimeInput } from './time-input'; 5 | 6 | @NgModule({ 7 | imports: [SbbCommonModule, SbbTimeInput], 8 | exports: [SbbTimeInput], 9 | }) 10 | export class SbbTimeInputModule {} 11 | -------------------------------------------------------------------------------- /src/components-examples/angular/accordion/accordion-basic/accordion-basic-example.css: -------------------------------------------------------------------------------- 1 | .accordion-example-open-state { 2 | margin: 0 0 0 1rem; 3 | align-self: center; 4 | } 5 | 6 | .accordion-example-open-close-buttons { 7 | margin: 1rem 0 0 0; 8 | } 9 | 10 | .accordion-example-open-close-buttons button { 11 | margin-right: 0.5rem; 12 | } 13 | -------------------------------------------------------------------------------- /src/components-examples/angular/captcha/index.ts: -------------------------------------------------------------------------------- 1 | export { CaptchaReactiveFormsExample } from './captcha-reactive-forms/captcha-reactive-forms-example'; 2 | export { CaptchaSimpleExample } from './captcha-simple/captcha-simple-example'; 3 | export { CaptchaTemplateDrivenFormsExample } from './captcha-template-driven-forms/captcha-template-driven-forms-example'; 4 | -------------------------------------------------------------------------------- /src/angular/core/testing/wrapped-error-message.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Gets a RegExp used to detect an angular wrapped error message. 3 | * See https://github.com/angular/angular/issues/8348 4 | */ 5 | export function wrappedErrorMessage(e: Error) { 6 | const escapedMessage = e.message.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&'); 7 | return new RegExp(escapedMessage); 8 | } 9 | -------------------------------------------------------------------------------- /src/components-examples/angular/button/link-group/link-group-example.html: -------------------------------------------------------------------------------- 1 |
2 | Navigation 1 3 | 4 | Download 1 5 | 6 |
7 | -------------------------------------------------------------------------------- /src/components-examples/angular/processflow/index.ts: -------------------------------------------------------------------------------- 1 | export { ProcessflowEditableExample } from './processflow-editable/processflow-editable-example'; 2 | export { ProcessflowLazyContentExample } from './processflow-lazy-content/processflow-lazy-content-example'; 3 | export { ProcessflowOverviewExample } from './processflow-overview/processflow-overview-example'; 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/tabs/tab-group-dynamic-height/tab-group-dynamic-height-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
Small content
4 | 5 | 6 |
Large content
7 | 8 | 9 | -------------------------------------------------------------------------------- /src/angular/core/datetime/datepicker-token.ts: -------------------------------------------------------------------------------- 1 | import { InjectionToken } from '@angular/core'; 2 | 3 | export const SBB_DATEPICKER_2DIGIT_YEAR_PIVOT = new InjectionToken( 4 | 'SBB_DATEPICKER_2DIGIT_YEAR_PIVOT', 5 | ); 6 | 7 | export const SBB_DATEPICKER_PREVENT_OVERFLOW = new InjectionToken( 8 | 'SBB_DATEPICKER_PREVENT_OVERFLOW', 9 | ); 10 | -------------------------------------------------------------------------------- /src/angular/pagination/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './pagination.module'; 2 | export * from './navigation/navigation'; 3 | 4 | // To avoid colliding name exports in bundles, don't use star export here 5 | export { 6 | SbbPageEvent, 7 | SbbPaginator, 8 | SBB_PAGINATOR_DEFAULT_OPTIONS, 9 | SbbPaginatorDefaultOptions, 10 | } from './paginator/paginator'; 11 | -------------------------------------------------------------------------------- /src/components-examples/angular-experimental/example/basic/basic-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | /** 4 | * @title Simple Example 5 | * @order 10 6 | */ 7 | @Component({ 8 | selector: 'sbb-basic-example', 9 | templateUrl: 'basic-example.html', 10 | styleUrls: ['basic-example.css'], 11 | }) 12 | export class BasicExample {} 13 | -------------------------------------------------------------------------------- /src/components-examples/angular/badge/badge-overview/badge-overview-example.html: -------------------------------------------------------------------------------- 1 |

Text with a badge

2 | 3 |

Icon with a badge

4 |

5 | 6 |

7 | 8 | 9 | -------------------------------------------------------------------------------- /src/components-examples/angular/checkbox/checkbox-group-horizontal/checkbox-group-horizontal-example.html: -------------------------------------------------------------------------------- 1 |
2 | @for (option of checkboxOptions; track option) { 3 | {{ option.name }} 4 | } 5 |
6 |

Model

7 | 
{{ checkboxOptions | json }}
8 | -------------------------------------------------------------------------------- /docs/src/assets/icons/code.svg: -------------------------------------------------------------------------------- 1 | 7 | 8 | 11 | 12 | -------------------------------------------------------------------------------- /src/angular/button/button.html: -------------------------------------------------------------------------------- 1 | @if ((_leftIconVisible | async) && svgIcon) { 2 | 3 | } 4 | 5 | @if ((_rightIconVisible | async) && svgIcon) { 6 | 7 | } 8 | -------------------------------------------------------------------------------- /src/angular/search/public-api.ts: -------------------------------------------------------------------------------- 1 | // To avoid colliding name exports in bundles, don't use star export here 2 | export { 3 | SbbHeaderSearch, 4 | SBB_SEARCH_SCROLL_STRATEGY, 5 | SBB_SEARCH_SCROLL_STRATEGY_PROVIDER, 6 | SBB_SEARCH_SCROLL_STRATEGY_PROVIDER_FACTORY, 7 | } from './header-search'; 8 | export * from './search'; 9 | export * from './search.module'; 10 | -------------------------------------------------------------------------------- /src/components-examples/angular/chips/chips-drag-drop/chips-drag-drop-example.css: -------------------------------------------------------------------------------- 1 | .example-chip.cdk-drag-animating { 2 | transition: transform var(--sbb-transition-duration-fast) cubic-bezier(0, 0, 0.2, 1); 3 | } 4 | 5 | .example-chip-list .cdk-drop-list-dragging { 6 | transition: transform transform var(--sbb-transition-duration-fast) cubic-bezier(0, 0, 0.2, 1); 7 | } 8 | -------------------------------------------------------------------------------- /src/components-examples/angular/sidebar/index.ts: -------------------------------------------------------------------------------- 1 | export { MultipleSidebarsExample } from './multiple-sidebars/multiple-sidebars-example'; 2 | export { IconSidebarExample } from './icon-sidebar/icon-sidebar-example'; 3 | export { SidebarExample } from './sidebar/sidebar-example'; 4 | export { CollapsibleSidebarExample } from './collapsible-sidebar/collapsible-sidebar-example'; 5 | -------------------------------------------------------------------------------- /src/components-examples/angular/status/status/status-example.html: -------------------------------------------------------------------------------- 1 |

Valid

2 | 3 |

Warning

4 | 5 |

Invalid

6 | 7 | -------------------------------------------------------------------------------- /src/components-examples/angular/form-field/form-field-datepicker/form-field-datepicker-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | @if (date.touched && date.errors?.['required']) { 6 | Date is required! 7 | } 8 | 9 | -------------------------------------------------------------------------------- /src/components-examples/angular/textarea/index.ts: -------------------------------------------------------------------------------- 1 | export { TextareaFormsExample } from './textarea-forms/textarea-forms-example'; 2 | export { TextareaNativeExample } from './textarea-native/textarea-native-example'; 3 | export { TextareaReactiveFormsWithSbbFormFieldExample } from './textarea-reactive-forms-with-sbb-form-field/textarea-reactive-forms-with-sbb-form-field-example'; 4 | -------------------------------------------------------------------------------- /src/components-examples/journey-maps/esri-plugin/esri-plugin/esri-plugin-example.css: -------------------------------------------------------------------------------- 1 | @import 'https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css'; 2 | 3 | sbb-notification.api-key-info { 4 | margin-bottom: 30px; 5 | } 6 | 7 | .web-map { 8 | width: 100%; 9 | height: 500px; 10 | min-height: 500px; 11 | box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.15); 12 | } 13 | -------------------------------------------------------------------------------- /src/journey-maps/angular/services/map/util/array-utils.ts: -------------------------------------------------------------------------------- 1 | export const groupBy = ( 2 | array: T[], 3 | groupKeyAccessor: (element: T) => any, 4 | ): { [key in any]: T[] } => 5 | array.reduce( 6 | (res: any, curr: T) => ({ 7 | ...res, 8 | [groupKeyAccessor(curr)]: [...(res[groupKeyAccessor(curr)] || []), curr], 9 | }), 10 | {}, 11 | ); 12 | -------------------------------------------------------------------------------- /.ng-dev/github.mts: -------------------------------------------------------------------------------- 1 | import {GithubConfig} from '@angular/ng-dev'; 2 | 3 | /** 4 | * Github configuration for the ng-dev command. This repository is 5 | * uses as remote for the merge script. 6 | */ 7 | export const github: GithubConfig = { 8 | owner: 'sbb-design-systems', 9 | name: 'sbb-angular', 10 | mainBranchName: 'main', 11 | useNgDevAuthService: false, 12 | }; 13 | -------------------------------------------------------------------------------- /src/components-examples/angular/alert/index.ts: -------------------------------------------------------------------------------- 1 | export { AlertExternalLinkExample } from './alert-external-link/alert-external-link-example'; 2 | export { AlertOutletExample } from './alert-outlet/alert-outlet-example'; 3 | export { AlertRouterLinkExample } from './alert-router-link/alert-router-link-example'; 4 | export { AlertSimpleExample } from './alert-simple/alert-simple-example'; 5 | -------------------------------------------------------------------------------- /src/components-examples/angular/captcha/captcha-simple/captcha-simple-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 |

Captcha response

8 | 
{{ basicCaptchaResponse | json }}
9 | -------------------------------------------------------------------------------- /.github/Dockerfile.regenerate.ngssc: -------------------------------------------------------------------------------- 1 | # For versions 13+ 2 | FROM nginxinc/nginx-unprivileged:stable 3 | 4 | COPY default.conf /etc/nginx/conf.d/default.conf 5 | COPY html /usr/share/nginx/html 6 | USER root 7 | COPY ngssc /usr/sbin/ngssc 8 | RUN chmod +x /usr/sbin/ngssc 9 | COPY ngssc.sh /docker-entrypoint.d/ngssc.sh 10 | RUN chmod +x /docker-entrypoint.d/ngssc.sh 11 | USER $UID 12 | -------------------------------------------------------------------------------- /src/angular/badge/badge.module.ts: -------------------------------------------------------------------------------- 1 | import { A11yModule } from '@angular/cdk/a11y'; 2 | import { NgModule } from '@angular/core'; 3 | import { SbbCommonModule } from '@sbb-esta/angular/core'; 4 | 5 | import { SbbBadge } from './badge'; 6 | 7 | @NgModule({ 8 | imports: [A11yModule, SbbCommonModule, SbbBadge], 9 | exports: [SbbBadge], 10 | }) 11 | export class SbbBadgeModule {} 12 | -------------------------------------------------------------------------------- /src/angular/core/testing/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './breakpoint-observer'; 2 | export * from './dispatch-events'; 3 | export * from './element-focus'; 4 | export * from './event-objects'; 5 | export * from './mock-ng-zone'; 6 | export * from './month-constants'; 7 | export * from './type-in-element'; 8 | export * from './variant'; 9 | export * from './wrapped-error-message'; 10 | -------------------------------------------------------------------------------- /src/components-examples/angular/input/index.ts: -------------------------------------------------------------------------------- 1 | export { InputErrorStateMatcherExample } from './input-error-state-matcher/input-error-state-matcher-example'; 2 | export { InputErrorsExample } from './input-errors/input-errors-example'; 3 | export { InputFormExample } from './input-form/input-form-example'; 4 | export { InputOverviewExample } from './input-overview/input-overview-example'; 5 | -------------------------------------------------------------------------------- /src/components-examples/angular/status/status-with-message/status-with-message-example.html: -------------------------------------------------------------------------------- 1 |

Valid

2 | 3 |

Warning

4 | 5 |

Invalid

6 | 7 | -------------------------------------------------------------------------------- /src/components-examples/journey-maps/angular/journey-maps-basic/journey-maps-basic-example.css: -------------------------------------------------------------------------------- 1 | @import 'https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css'; 2 | 3 | sbb-notification.api-key-info { 4 | margin-bottom: 30px; 5 | } 6 | 7 | .web-map { 8 | width: 100%; 9 | height: 500px; 10 | min-height: 500px; 11 | box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.15); 12 | } 13 | -------------------------------------------------------------------------------- /tools/tslint-rules/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "../dist/tools", 4 | "target": "es2020", 5 | "module": "commonjs", 6 | "moduleResolution": "node", 7 | "esModuleInterop": true, 8 | "lib": ["es2020"], 9 | "skipLibCheck": true 10 | }, 11 | "bazelOptions": { 12 | "suppressTsconfigOverrideWarnings": true 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /scripts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "../dist/dev-infra-scripts", 4 | "module": "Node16", 5 | "esModuleInterop": true, 6 | "allowSyntheticDefaultImports": true, 7 | "target": "es2020", 8 | "lib": ["es2020"], 9 | "strict": true, 10 | "erasableSyntaxOnly": true, 11 | "rewriteRelativeImportExtensions": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/angular/lightbox/public-api.ts: -------------------------------------------------------------------------------- 1 | export { SbbDialogRole } from '@sbb-esta/angular/dialog'; 2 | export * from './lightbox.module'; 3 | export * from './lightbox'; 4 | export * from './lightbox-container'; 5 | export * from './lightbox-content-directives'; 6 | export * from './lightbox-config'; 7 | export * from './lightbox-ref'; 8 | export { sbbLightboxAnimations } from './lightbox-animations'; 9 | -------------------------------------------------------------------------------- /src/angular/menu/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './contextmenu-trigger'; 2 | export * from './menu'; 3 | export * from './menu-dynamic-trigger'; 4 | export * from './menu-errors'; 5 | export * from './menu-item'; 6 | export * from './menu-trigger'; 7 | export * from './menu-panel'; 8 | export * from './menu.module'; 9 | export * from './menu-content'; 10 | export * from './menu-positions'; 11 | -------------------------------------------------------------------------------- /src/components-examples/angular/loading-indicator/index.ts: -------------------------------------------------------------------------------- 1 | export { LoadingIndicatorFullboxExample } from './loading-indicator-fullbox/loading-indicator-fullbox-example'; 2 | export { LoadingIndicatorInlineExample } from './loading-indicator-inline/loading-indicator-inline-example'; 3 | export { LoadingIndicatorSimpleExample } from './loading-indicator-simple/loading-indicator-simple-example'; 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/tabs/tab-group-async/tab-group-async-example.html: -------------------------------------------------------------------------------- 1 | @if ((asyncTabs | async) === null) { 2 | Loading tabs... 3 | } 4 | 5 | 6 | @for (tab of asyncTabs | async; track tab) { 7 | 8 | {{ tab.label }} 9 | {{ tab.content }} 10 | 11 | } 12 | 13 | -------------------------------------------------------------------------------- /docs/src/assets/stack-blitz/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /src/angular/loading-indicator/loading-indicator.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { SbbCommonModule } from '@sbb-esta/angular/core'; 3 | 4 | import { SbbLoadingIndicator } from './loading-indicator'; 5 | 6 | @NgModule({ 7 | imports: [SbbCommonModule, SbbLoadingIndicator], 8 | exports: [SbbLoadingIndicator], 9 | }) 10 | export class SbbLoadingIndicatorModule {} 11 | -------------------------------------------------------------------------------- /src/components-examples/angular/datepicker/datepicker-lean-date-adapter/datepicker-lean-date-adapter-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

The LeanDateAdapter enables parsing of dates like '010120' or '01012020'.

6 | 7 |

Properties

8 | 
model: {{ date | date: 'mediumDate' }}
9 | -------------------------------------------------------------------------------- /src/components-examples/angular/datepicker/datepicker-standalone-forms/datepicker-standalone-forms-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

Properties

6 | 
model: {{ date | date: 'mediumDate' }}
7 | 
form control validity: {{ input.valid }}
8 | -------------------------------------------------------------------------------- /src/components-examples/angular/menu/menu-overview/menu-overview-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | -------------------------------------------------------------------------------- /src/journey-maps/angular/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of journey-maps-client 3 | */ 4 | 5 | export * from './journey-maps.module'; 6 | export * from './journey-maps'; 7 | export * from './journey-maps.interfaces'; 8 | export * from './model/marker'; 9 | export * from './model/marker-category'; 10 | export * from './model/marker-priority'; 11 | export * from './services/constants'; 12 | -------------------------------------------------------------------------------- /src/angular/datepicker/datepicker-toggle/datepicker-toggle.html: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /src/angular/status/status.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { SbbCommonModule } from '@sbb-esta/angular/core'; 3 | import { SbbIconModule } from '@sbb-esta/angular/icon'; 4 | 5 | import { SbbStatus } from './status'; 6 | 7 | @NgModule({ 8 | imports: [SbbCommonModule, SbbIconModule, SbbStatus], 9 | exports: [SbbStatus], 10 | }) 11 | export class SbbStatusModule {} 12 | -------------------------------------------------------------------------------- /src/components-examples/angular/breadcrumb/index.ts: -------------------------------------------------------------------------------- 1 | export { BreadcrumbCustomRootExample } from './breadcrumb-custom-root/breadcrumb-custom-root-example'; 2 | export { BreadcrumbDynamicExample } from './breadcrumb-dynamic/breadcrumb-dynamic-example'; 3 | export { BreadcrumbMenuExample } from './breadcrumb-menu/breadcrumb-menu-example'; 4 | export { BreadcrumbExample } from './breadcrumb/breadcrumb-example'; 5 | -------------------------------------------------------------------------------- /src/components-examples/angular/button/link/link-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbButtonModule } from '@sbb-esta/angular/button'; 3 | 4 | /** 5 | * @title Link Example 6 | * @order 30 7 | */ 8 | @Component({ 9 | selector: 'sbb-link-example', 10 | templateUrl: 'link-example.html', 11 | imports: [SbbButtonModule], 12 | }) 13 | export class LinkExample {} 14 | -------------------------------------------------------------------------------- /src/components-examples/angular/sidebar/collapsible-sidebar/collapsible-sidebar-example.css: -------------------------------------------------------------------------------- 1 | .sbb-icon-sidebar-item.sbb-active { 2 | pointer-events: unset; 3 | cursor: pointer; 4 | } 5 | 6 | .sidebar-frame { 7 | display: block; 8 | height: 400px; 9 | width: 500px; 10 | position: relative; 11 | border: 1px solid #b7b7b7; 12 | } 13 | 14 | sbb-sidebar-content { 15 | padding: 15px; 16 | } 17 | -------------------------------------------------------------------------------- /src/components-examples/angular/tooltip/index.ts: -------------------------------------------------------------------------------- 1 | export { TooltipCustomContentExample } from './tooltip-custom-content/tooltip-custom-content-example'; 2 | export { TooltipCustomIconExample } from './tooltip-custom-icon/tooltip-custom-icon-example'; 3 | export { TooltipHoverExample } from './tooltip-hover/tooltip-hover-example'; 4 | export { TooltipSimpleExample } from './tooltip-simple/tooltip-simple-example'; 5 | -------------------------------------------------------------------------------- /src/journey-maps/angular/types.d.ts: -------------------------------------------------------------------------------- 1 | // Due to the way ts_library works, scoped types packages (e.g. @mapbox/point-geometry => @types/mapbox__point-geometry) 2 | // do not resolve properly. 3 | // Workaround from : https://github.com/bazelbuild/rules_nodejs/issues/1033#issuecomment-601138246 4 | 5 | declare module '@mapbox/point-geometry' { 6 | export { default } from '@types/mapbox__point-geometry'; 7 | } 8 | -------------------------------------------------------------------------------- /tools/sass/BUILD.bazel: -------------------------------------------------------------------------------- 1 | load("//tools:defaults.bzl", "ts_project") 2 | 3 | package(default_visibility = ["//visibility:public"]) 4 | 5 | ts_project( 6 | name = "sass_lib", 7 | srcs = [ 8 | "local-sass-importer.ts", 9 | ], 10 | tsconfig = "//tools:tsconfig", 11 | deps = [ 12 | "//:node_modules/@types/node", 13 | "//:node_modules/sass", 14 | ], 15 | ) 16 | -------------------------------------------------------------------------------- /src/angular/radio-button/radio-button.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { SbbCommonModule } from '@sbb-esta/angular/core'; 3 | 4 | import { SbbRadioButton, SbbRadioGroup } from './radio-button'; 5 | 6 | @NgModule({ 7 | imports: [SbbCommonModule, SbbRadioButton, SbbRadioGroup], 8 | exports: [SbbRadioButton, SbbRadioGroup], 9 | }) 10 | export class SbbRadioButtonModule {} 11 | -------------------------------------------------------------------------------- /src/components-examples/angular/radio-button/index.ts: -------------------------------------------------------------------------------- 1 | export { RadioButtonGroupHorizontalExample } from './radio-button-group-horizontal/radio-button-group-horizontal-example'; 2 | export { RadioButtonGroupReactiveFormsVerticalExample } from './radio-button-group-reactive-forms-vertical/radio-button-group-reactive-forms-vertical-example'; 3 | export { RadioButtonExample } from './radio-button/radio-button-example'; 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/search/search-simple-header-mode/search-simple-header-mode-example.html: -------------------------------------------------------------------------------- 1 | 6 | 7 |

Results

8 | 
{{ searchValues | json }}
9 | -------------------------------------------------------------------------------- /src/components-examples/angular/search/search-simple-reactive-forms/search-simple-reactive-forms-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

Model

6 | 
{{ searchControl.value }}
7 | 8 |

Results

9 | 
{{ searchValues | json }}
10 | -------------------------------------------------------------------------------- /src/components-examples/angular/status/status/status-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbStatusModule } from '@sbb-esta/angular/status'; 3 | 4 | /** 5 | * @title Status 6 | * @order 10 7 | */ 8 | @Component({ 9 | selector: 'sbb-status-example', 10 | templateUrl: 'status-example.html', 11 | imports: [SbbStatusModule], 12 | }) 13 | export class StatusExample {} 14 | -------------------------------------------------------------------------------- /src/components-examples/angular/toggle/index.ts: -------------------------------------------------------------------------------- 1 | export { ToggleReactiveExample } from './toggle-reactive/toggle-reactive-example'; 2 | export { ToggleTemplateDrivenExample } from './toggle-template-driven/toggle-template-driven-example'; 3 | export { ToggleTripleExample } from './toggle-triple/toggle-triple-example'; 4 | export { ToggleWithoutFormExample } from './toggle-without-form/toggle-without-form-example'; 5 | -------------------------------------------------------------------------------- /src/journey-maps/tsconfig.json: -------------------------------------------------------------------------------- 1 | // Configuration for IDEs only. 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "rootDir": "..", 6 | "baseUrl": ".", 7 | "paths": { 8 | "@sbb-esta/angular": ["../angular"], 9 | "@sbb-esta/angular/*": ["../angular/*"], 10 | "@sbb-esta/journey-maps/*": ["./*"] 11 | } 12 | }, 13 | "include": ["./**/*.ts"] 14 | } 15 | -------------------------------------------------------------------------------- /src/angular/schematics/ng-add/schema.ts: -------------------------------------------------------------------------------- 1 | export interface Schema { 2 | /** Name of the project. */ 3 | project: string; 4 | 5 | /** Whether the Angular browser animations module should be included and enabled. */ 6 | animations: 'enabled' | 'disabled' | 'excluded'; 7 | 8 | /** Design variant. */ 9 | variant: 'standard (previously known as public)' | 'lean (previously known as business)'; 10 | } 11 | -------------------------------------------------------------------------------- /src/components-examples/angular/button/index.ts: -------------------------------------------------------------------------------- 1 | export { ButtonOverviewExample } from './button-overview/button-overview-example'; 2 | export { ButtonWithIconExample } from './button-with-icon/button-with-icon-example'; 3 | export { IconButtonExample } from './icon-button/icon-button-example'; 4 | export { LinkGroupExample } from './link-group/link-group-example'; 5 | export { LinkExample } from './link/link-example'; 6 | -------------------------------------------------------------------------------- /src/components-examples/angular/file-selector/multiple-mode-default-file-selector/multiple-mode-default-file-selector-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Properties

4 | Disabled 5 |

Model

6 | 
{{ beautifyFileList(filesList) | json }}
7 | -------------------------------------------------------------------------------- /src/components-examples/angular/radio-button/radio-button/radio-button-example.html: -------------------------------------------------------------------------------- 1 | Test label 7 | 8 | 9 |

Properties

10 | Disabled 11 | 12 |

Value

13 | 
{{ value | json }}
14 | -------------------------------------------------------------------------------- /src/components-examples/angular/tag/tag-reactive-forms/tag-reactive-forms-example.html: -------------------------------------------------------------------------------- 1 | 2 | Trains 3 | Cars 4 | Bicycles 5 | 6 | 7 |

Model

8 | 
{{ formGroup.getRawValue() | json }}
9 | -------------------------------------------------------------------------------- /src/angular/accordion/accordion-token.ts: -------------------------------------------------------------------------------- 1 | import { InjectionToken } from '@angular/core'; 2 | 3 | import type { SbbAccordion } from './accordion'; 4 | 5 | /** 6 | * Token used to provide a `SbbAccordion` to `SbbExpansionPanel`. 7 | * Used primarily to avoid circular imports between `SbbAccordion` and `SbbExpansionPanel`. 8 | */ 9 | export const SBB_ACCORDION = new InjectionToken('SBB_ACCORDION'); 10 | -------------------------------------------------------------------------------- /src/angular/checkbox/checkbox.module.ts: -------------------------------------------------------------------------------- 1 | import { ObserversModule } from '@angular/cdk/observers'; 2 | import { NgModule } from '@angular/core'; 3 | import { SbbCommonModule } from '@sbb-esta/angular/core'; 4 | 5 | import { SbbCheckbox } from './checkbox'; 6 | 7 | @NgModule({ 8 | imports: [ObserversModule, SbbCommonModule, SbbCheckbox], 9 | exports: [SbbCheckbox], 10 | }) 11 | export class SbbCheckboxModule {} 12 | -------------------------------------------------------------------------------- /src/components-examples/angular/loading-indicator/loading-indicator-fullbox/loading-indicator-fullbox-example.html: -------------------------------------------------------------------------------- 1 |
2 | @if (showSpinner) { 3 | 4 | } 5 |
6 |

Covers the parent element.

7 | 8 | -------------------------------------------------------------------------------- /src/components-examples/angular/radio-button-panel/radio-button-panel-simple/radio-button-panel-simple-example.html: -------------------------------------------------------------------------------- 1 | 2 | Apples 3 | Bananas 4 | 5 | 6 |

Model

7 | 
{{ value.value | json }}
8 | -------------------------------------------------------------------------------- /src/components-examples/angular/radio-button/radio-button-group-horizontal/radio-button-group-horizontal-example.html: -------------------------------------------------------------------------------- 1 | 2 | @for (option of radioOptions; track option) { 3 | {{ option.name }} 4 | } 5 | 6 | 7 |

Model

8 | 
{{ modelValue }}
9 | -------------------------------------------------------------------------------- /src/journey-maps/angular/services/map/map-leit-poi-service.spec.ts: -------------------------------------------------------------------------------- 1 | import { SbbMapLeitPoiService } from './map-leit-poi-service'; 2 | 3 | describe('MapLeitPoiService', () => { 4 | let service: SbbMapLeitPoiService; 5 | 6 | beforeEach(() => { 7 | service = new SbbMapLeitPoiService({} as any); 8 | }); 9 | 10 | it('should be created', () => { 11 | expect(service).toBeTruthy(); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /src/angular/core/option/option.html: -------------------------------------------------------------------------------- 1 | @if (multiple) { 2 | 6 | } 7 | 8 | 9 | 10 | @if (group && group._inert) { 11 | ({{ group.label }}) 12 | } 13 | -------------------------------------------------------------------------------- /src/angular/textarea/textarea.module.ts: -------------------------------------------------------------------------------- 1 | import { TextFieldModule } from '@angular/cdk/text-field'; 2 | import { NgModule } from '@angular/core'; 3 | import { SbbCommonModule } from '@sbb-esta/angular/core'; 4 | 5 | import { SbbTextarea } from './textarea/textarea'; 6 | 7 | @NgModule({ 8 | imports: [TextFieldModule, SbbCommonModule, SbbTextarea], 9 | exports: [SbbTextarea], 10 | }) 11 | export class SbbTextareaModule {} 12 | -------------------------------------------------------------------------------- /src/components-examples/angular/form-field/form-field-select/form-field-select-example.html: -------------------------------------------------------------------------------- 1 | 2 | 8 | @if (select.errors?.['required']) { 9 | Number is required! 10 | } 11 | 12 | -------------------------------------------------------------------------------- /src/components-examples/angular/notification/closable-notification/closable-notification-example.html: -------------------------------------------------------------------------------- 1 |

Notification can only be dismissed in lean design.

2 | 3 | Success 4 | 5 |

To prevent a notification from being dismissed, add the readonly attribute.

6 | 7 | Error 8 | -------------------------------------------------------------------------------- /src/angular/accordion/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './accordion.module'; 2 | export * from './accordion'; 3 | export * from './accordion-token'; 4 | // To avoid colliding name exports in bundles, don't use star export here 5 | export { SbbExpansionPanelState, SbbExpansionPanel } from './expansion-panel'; 6 | export * from './expansion-panel-header'; 7 | export * from './expansion-panel-content'; 8 | export * from './expansion-panel-base'; 9 | -------------------------------------------------------------------------------- /src/angular/button/button.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { SbbCommonModule } from '@sbb-esta/angular/core'; 3 | import { SbbIconModule } from '@sbb-esta/angular/icon'; 4 | 5 | import { SbbAnchor, SbbButton } from './button'; 6 | 7 | @NgModule({ 8 | imports: [SbbCommonModule, SbbIconModule, SbbButton, SbbAnchor], 9 | exports: [SbbButton, SbbAnchor], 10 | }) 11 | export class SbbButtonModule {} 12 | -------------------------------------------------------------------------------- /src/angular/schematics/ng-update/data/index.ts: -------------------------------------------------------------------------------- 1 | export * from './attribute-selectors'; 2 | export * from './class-names'; 3 | export * from './constructor-checks'; 4 | export * from './css-selectors'; 5 | export * from './element-selectors'; 6 | export * from './input-names'; 7 | export * from './method-call-checks'; 8 | export * from './output-names'; 9 | export * from './property-names'; 10 | export * from './symbol-removal'; 11 | -------------------------------------------------------------------------------- /src/components-examples/angular/checkbox/checkbox-group-reactive-forms-vertical/checkbox-group-reactive-forms-vertical-example.html: -------------------------------------------------------------------------------- 1 |
2 | @for (formControl of form.controls | keyvalue; track formControl) { 3 | {{ formControl.key }} 4 | } 5 |
6 | 7 |

Model

8 | 
{{ form.value | json }}
9 | -------------------------------------------------------------------------------- /src/components-examples/angular/menu/menu-nested/menu-nested-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbMenuModule } from '@sbb-esta/angular/menu'; 3 | 4 | /** 5 | * @title Nested Contextmenu 6 | * @order 30 7 | */ 8 | @Component({ 9 | selector: 'sbb-menu-nested-example', 10 | templateUrl: 'menu-nested-example.html', 11 | imports: [SbbMenuModule], 12 | }) 13 | export class MenuNestedExample {} 14 | -------------------------------------------------------------------------------- /src/components-examples/angular/tag/tag-template-forms/tag-template-forms-example.html: -------------------------------------------------------------------------------- 1 | 2 | Trains 3 | Cars 4 | Bicycles 5 | 6 | 7 |

Model

8 | 
 9 | Trains: {{ trains }}
10 | Cars: {{ cars }}
11 | Bicycles: {{ bicycles }}
12 |
13 | -------------------------------------------------------------------------------- /src/components-examples/angular/usermenu/usermenu-custom-image/usermenu-custom-image-example.html: -------------------------------------------------------------------------------- 1 | 2 | SBB Logo 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/angular/notification-toast/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './notification-toast'; 2 | export * from './notification-toast-animations'; 3 | export * from './notification-toast-config'; 4 | export * from './notification-toast-container'; 5 | export * from './notification-toast-ref'; 6 | export * from './notification-toast.module'; 7 | export * from './simple-notification'; 8 | export { SbbNotificationType } from '@sbb-esta/angular/notification'; 9 | -------------------------------------------------------------------------------- /src/components-examples/angular/alert/alert-simple/alert-simple-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbAlertModule } from '@sbb-esta/angular/alert'; 3 | 4 | /** 5 | * @title Simple Alert 6 | * @order 10 7 | */ 8 | @Component({ 9 | selector: 'sbb-alert-simple-example', 10 | templateUrl: 'alert-simple-example.html', 11 | imports: [SbbAlertModule], 12 | }) 13 | export class AlertSimpleExample {} 14 | -------------------------------------------------------------------------------- /src/components-examples/angular/button/link-group/link-group-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbButtonModule } from '@sbb-esta/angular/button'; 3 | 4 | /** 5 | * @title Link Group Example 6 | * @order 40 7 | */ 8 | @Component({ 9 | selector: 'sbb-link-group-example', 10 | templateUrl: 'link-group-example.html', 11 | imports: [SbbButtonModule], 12 | }) 13 | export class LinkGroupExample {} 14 | -------------------------------------------------------------------------------- /src/components-examples/angular/file-selector/index.ts: -------------------------------------------------------------------------------- 1 | export { MultipleModeDefaultFileSelectorExample } from './multiple-mode-default-file-selector/multiple-mode-default-file-selector-example'; 2 | export { MultipleModePersistentFileSelectorExample } from './multiple-mode-persistent-file-selector/multiple-mode-persistent-file-selector-example'; 3 | export { SimpleFileSelectorExample } from './simple-file-selector/simple-file-selector-example'; 4 | -------------------------------------------------------------------------------- /src/components-examples/angular/menu/index.ts: -------------------------------------------------------------------------------- 1 | export { MenuGroupingExample } from './menu-grouping/menu-grouping-example'; 2 | export { MenuIconsExample } from './menu-icons/menu-icons-example'; 3 | export { MenuLazyRenderingExample } from './menu-lazy-rendering/menu-lazy-rendering-example'; 4 | export { MenuNestedExample } from './menu-nested/menu-nested-example'; 5 | export { MenuOverviewExample } from './menu-overview/menu-overview-example'; 6 | -------------------------------------------------------------------------------- /src/esbuild-linked.config.mjs: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.dev/license 7 | */ 8 | 9 | export default { 10 | conditions: ['ng-linked', 'module'], 11 | tsconfig: import.meta.dirname + '/bazel-tsconfig-build.json', 12 | resolveExtensions: ['.js'], 13 | }; 14 | -------------------------------------------------------------------------------- /src/journey-maps/angular/services/test-data.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | import { SbbMarker } from '../model/marker'; 4 | 5 | @Injectable({ 6 | providedIn: 'root', 7 | }) 8 | export class SbbTestData { 9 | createMarker(): SbbMarker { 10 | return { 11 | id: 'work', 12 | title: 'Office', 13 | position: [7.44645, 46.961409], 14 | category: 'WARNING', 15 | }; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/angular/processflow/step-content.ts: -------------------------------------------------------------------------------- 1 | import { Directive, inject, TemplateRef } from '@angular/core'; 2 | 3 | /** 4 | * Content for a `sbb-step` that will be rendered lazily. 5 | */ 6 | @Directive({ 7 | selector: 'ng-template[sbbStepContent]', 8 | }) 9 | export class SbbStepContent { 10 | _template: TemplateRef = inject>(TemplateRef); 11 | 12 | constructor(...args: unknown[]); 13 | constructor() {} 14 | } 15 | -------------------------------------------------------------------------------- /src/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | // Configuration for IDEs only. 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "rootDir": "..", 6 | "baseUrl": ".", 7 | "paths": { 8 | "@sbb-esta/angular/*": ["./*"], 9 | "@sbb-esta/journey-maps": ["../journey-maps"], 10 | "@sbb-esta/journey-maps/*": ["../journey-maps/*"] 11 | } 12 | }, 13 | "include": ["./**/*.ts", "../dev-mode-types.d.ts"] 14 | } 15 | -------------------------------------------------------------------------------- /src/components-examples/angular/menu/menu-overview/menu-overview-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbMenuModule } from '@sbb-esta/angular/menu'; 3 | 4 | /** 5 | * @title Basic Contextmenu 6 | * @order 10 7 | */ 8 | @Component({ 9 | selector: 'sbb-menu-overview-example', 10 | templateUrl: 'menu-overview-example.html', 11 | imports: [SbbMenuModule], 12 | }) 13 | export class MenuOverviewExample {} 14 | -------------------------------------------------------------------------------- /src/components-examples/angular/notification/simple-notification/simple-notification-example.html: -------------------------------------------------------------------------------- 1 | Success 2 | Info 3 | 4 | Info-Light (same style as info in lean design) 5 | 6 | Warn 7 | Error 8 | -------------------------------------------------------------------------------- /src/components-examples/angular/radio-button/radio-button-group-reactive-forms-vertical/radio-button-group-reactive-forms-vertical-example.html: -------------------------------------------------------------------------------- 1 | 2 | @for (option of radioOptions; track option) { 3 | {{ option.name }} 4 | } 5 | 6 | 7 |

Model

8 | 
{{ radioGroup.value }}
9 | -------------------------------------------------------------------------------- /src/components-examples/angular/tag/index.ts: -------------------------------------------------------------------------------- 1 | export { TagAdvancedExample } from './tag-advanced/tag-advanced-example'; 2 | export { TagLinkExample } from './tag-link/tag-link-example'; 3 | export { TagReactiveFormsExample } from './tag-reactive-forms/tag-reactive-forms-example'; 4 | export { TagTemplateFormsExample } from './tag-template-forms/tag-template-forms-example'; 5 | export { TagWithIconExample } from './tag-with-icon/tag-with-icon-example'; 6 | -------------------------------------------------------------------------------- /src/angular/file-selector/file-selector.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { SbbCommonModule } from '@sbb-esta/angular/core'; 3 | import { SbbIconModule } from '@sbb-esta/angular/icon'; 4 | 5 | import { SbbFileSelector } from './file-selector'; 6 | 7 | @NgModule({ 8 | imports: [SbbCommonModule, SbbIconModule, SbbFileSelector], 9 | exports: [SbbFileSelector], 10 | }) 11 | export class SbbFileSelectorModule {} 12 | -------------------------------------------------------------------------------- /src/angular/textexpand/textexpand-expanded.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: 'sbb-textexpand-expanded', 5 | host: { 6 | class: 'sbb-textexpand-expanded', 7 | '[attr.hidden]': '_hidden ? true : null', 8 | }, 9 | }) 10 | export class SbbTextexpandExpanded { 11 | /** Describes if textexpand-expanded is hidden or not. Initially it is hidden. */ 12 | _hidden: boolean = true; 13 | } 14 | -------------------------------------------------------------------------------- /src/components-examples/angular/textexpand/textexpand/textexpand-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbTextexpandModule } from '@sbb-esta/angular/textexpand'; 3 | 4 | /** 5 | * @title Textexpand 6 | * @order 10 7 | */ 8 | @Component({ 9 | selector: 'sbb-textexpand-example', 10 | templateUrl: 'textexpand-example.html', 11 | imports: [SbbTextexpandModule], 12 | }) 13 | export class TextexpandExample {} 14 | -------------------------------------------------------------------------------- /src/angular/textexpand/textexpand-collapsed.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: 'sbb-textexpand-collapsed', 5 | host: { 6 | class: 'sbb-textexpand-collapsed', 7 | '[attr.hidden]': '_hidden ? true : null', 8 | }, 9 | }) 10 | export class SbbTextexpandCollapsed { 11 | /** Describes if textexpand-collapsed is hidden or not. Initially it isn't hidden. */ 12 | _hidden: boolean = false; 13 | } 14 | -------------------------------------------------------------------------------- /src/components-examples/angular/checkbox-panel/index.ts: -------------------------------------------------------------------------------- 1 | export { CheckboxPanelContentExample } from './checkbox-panel-content/checkbox-panel-content-example'; 2 | export { CheckboxPanelGroupExample } from './checkbox-panel-group/checkbox-panel-group-example'; 3 | export { CheckboxPanelIconExample } from './checkbox-panel-icon/checkbox-panel-icon-example'; 4 | export { CheckboxPanelSimpleExample } from './checkbox-panel-simple/checkbox-panel-simple-example'; 5 | -------------------------------------------------------------------------------- /src/components-examples/angular/menu/menu-grouping/menu-grouping-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbMenuModule } from '@sbb-esta/angular/menu'; 3 | 4 | /** 5 | * @title Contextmenu with grouping 6 | * @order 50 7 | */ 8 | @Component({ 9 | selector: 'sbb-menu-grouping-example', 10 | templateUrl: 'menu-grouping-example.html', 11 | imports: [SbbMenuModule], 12 | }) 13 | export class MenuGroupingExample {} 14 | -------------------------------------------------------------------------------- /tools/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./**/*.ts"], 3 | "compilerOptions": { 4 | "target": "es2020", 5 | "module": "Node16", 6 | "strict": true, 7 | "sourceMap": true, 8 | "declaration": true, 9 | "esModuleInterop": true, 10 | "lib": ["es2020"], 11 | "skipLibCheck": true, 12 | "downlevelIteration": true, 13 | "types": ["node"] 14 | }, 15 | "exclude": ["**/*.spec.ts", "adev-api-extraction/**"] 16 | } 17 | -------------------------------------------------------------------------------- /docs/src/assets/stack-blitz/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /src/components-examples/angular/chips/chips-drag-drop/chips-drag-drop-example.html: -------------------------------------------------------------------------------- 1 | 8 | @for (fruit of fruits; track fruit) { 9 | {{ fruit.name }} 10 | } 11 | 12 | -------------------------------------------------------------------------------- /src/components-examples/angular/dialog/component-data-dialog/component-data-dialog-example.html: -------------------------------------------------------------------------------- 1 |

2 | This dialog loads its content from a component and shows custom content inside the header, 3 | scrollable content and footer. Additionally it makes use of the configuration options to set a 4 | fixed width, height and top offset. 5 |

6 | 9 | -------------------------------------------------------------------------------- /src/components-examples/angular/loading-indicator/loading-indicator-simple/loading-indicator-simple-example.html: -------------------------------------------------------------------------------- 1 |

Tiny

2 | 3 | 4 |

Small

5 | 6 | 7 |

Medium

8 | 9 | 10 |

Big

11 | 12 | -------------------------------------------------------------------------------- /src/components-examples/angular/pagination/navigation/navigation-example.html: -------------------------------------------------------------------------------- 1 | 6 | 7 |

Properties

8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist 2 | .github/* 3 | .vscode/* 4 | src/*/schematics/*/*/files 5 | src/*/schematics/*/test-cases/**/*_input.ts 6 | src/*/schematics/*/test-cases/**/*_expected_output.ts 7 | tools/dgeni/templates/*.html 8 | tools/schematics/*/index.js 9 | tools/schematics/*/files 10 | coverage 11 | **/*.properties 12 | CHANGELOG.md 13 | CONTRIBUTING.md 14 | *.bazel 15 | *.bzl 16 | WORKSPACE 17 | docs/src/assets/stack-blitz/* 18 | bazel-out 19 | pnpm-lock.yaml 20 | -------------------------------------------------------------------------------- /src/angular/table/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './table.module'; 2 | 3 | export * from './table/table-data-source'; 4 | export * from './table/table'; 5 | export * from './table/table-wrapper'; 6 | export * from './sort/sort-direction'; 7 | export * from './sort/sort-header'; 8 | export * from './sort/sort'; 9 | export * from './sort/sort-animations'; 10 | export * from './table/text-column'; 11 | export * from './table/cell'; 12 | export * from './table/row'; 13 | -------------------------------------------------------------------------------- /src/angular/tabs/tab-body.html: -------------------------------------------------------------------------------- 1 |
12 | 13 |
14 | -------------------------------------------------------------------------------- /src/components-examples/angular/notification/index.ts: -------------------------------------------------------------------------------- 1 | export { ClosableNotificationExample } from './closable-notification/closable-notification-example'; 2 | export { CustomIconNotificationExample } from './custom-icon-notification/custom-icon-notification-example'; 3 | export { JumpmarkNotificationExample } from './jumpmark-notification/jumpmark-notification-example'; 4 | export { SimpleNotificationExample } from './simple-notification/simple-notification-example'; 5 | -------------------------------------------------------------------------------- /src/components-examples/angular/tabs/tab-group-basic/tab-group-basic-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbTabsModule } from '@sbb-esta/angular/tabs'; 3 | 4 | /** 5 | * @title Basic use of the tab group 6 | * @order 10 7 | */ 8 | @Component({ 9 | selector: 'sbb-tab-group-basic-example', 10 | templateUrl: 'tab-group-basic-example.html', 11 | imports: [SbbTabsModule], 12 | }) 13 | export class TabGroupBasicExample {} 14 | -------------------------------------------------------------------------------- /src/angular/core/testing/lean-polyfill/BUILD.bazel: -------------------------------------------------------------------------------- 1 | load( 2 | "//tools:defaults.bzl", 3 | "ng_project", 4 | ) 5 | 6 | package(default_visibility = ["//visibility:public"]) 7 | 8 | ng_project( 9 | name = "lean-polyfill", 10 | srcs = glob( 11 | ["**/*.ts"], 12 | exclude = ["**/*.spec.ts"], 13 | ), 14 | deps = [ 15 | ], 16 | ) 17 | 18 | filegroup( 19 | name = "source-files", 20 | srcs = glob(["**/*.ts"]), 21 | ) 22 | -------------------------------------------------------------------------------- /src/angular/index.ts: -------------------------------------------------------------------------------- 1 | // primary entry-point which is empty as of version 13. All components should 2 | // be imported through their individual entry-points. This file is needed to 3 | // satisfy the "ng_package" bazel rule which also requires a primary entry-point. 4 | 5 | // Workaround for: https://github.com/microsoft/rushstack/issues/2806. 6 | // This is a private export that can be removed at any time. 7 | export const ɵɵtsModuleIndicatorApiExtractorWorkaround = true; 8 | -------------------------------------------------------------------------------- /src/angular/tabs/tab-header.scss: -------------------------------------------------------------------------------- 1 | @use './tabs'; 2 | 3 | @include tabs.paginated-tab-header-shadows; 4 | @include tabs.paginated-tab-header; 5 | 6 | .sbb-tab-labels { 7 | @include tabs.paginated-tab-header-item-wrapper('.sbb-tab-header'); 8 | } 9 | 10 | .sbb-tab-label-container { 11 | @include tabs.paginated-tab-header-container; 12 | } 13 | 14 | // Wraps each tab label 15 | .sbb-tab-label { 16 | position: relative; 17 | @include tabs.tab-label; 18 | } 19 | -------------------------------------------------------------------------------- /src/components-examples/angular/tag/tag-link/tag-link-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { RouterLink } from '@angular/router'; 3 | import { SbbTagModule } from '@sbb-esta/angular/tag'; 4 | 5 | /** 6 | * @title Tag Link 7 | * @order 40 8 | */ 9 | @Component({ 10 | selector: 'sbb-tag-link-example', 11 | templateUrl: 'tag-link-example.html', 12 | imports: [SbbTagModule, RouterLink], 13 | }) 14 | export class TagLinkExample {} 15 | -------------------------------------------------------------------------------- /src/journey-maps/angular/components/home-button/home-button.html: -------------------------------------------------------------------------------- 1 |
7 |
8 | 14 |
15 |
16 | -------------------------------------------------------------------------------- /src/journey-maps/angular/services/map/map-config.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | // TODO cdi move this code to map-marker-service.ts ? 4 | @Injectable({ providedIn: 'root' }) 5 | export class SbbMapConfig { 6 | private _popup: boolean | undefined; 7 | 8 | updateConfigs(popup: boolean | undefined): void { 9 | this._popup = popup; 10 | } 11 | 12 | get popup(): boolean | undefined { 13 | return this._popup; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/angular/core/option/option.scss: -------------------------------------------------------------------------------- 1 | @use '@sbb-esta/angular' as sbb; 2 | 3 | .sbb-option.sbb-menu-item { 4 | cursor: default; 5 | } 6 | 7 | .sbb-pseudo-checkbox { 8 | display: inline-block; 9 | margin-right: calc(#{sbb.pxToRem(8)} * var(--sbb-scaling-factor)); 10 | margin-bottom: calc(#{sbb.pxToRem(-4.5)} * var(--sbb-scaling-factor)); 11 | overflow: hidden; 12 | line-height: 0; 13 | 14 | .sbb-selection-container { 15 | margin: 0; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/angular/core/testing/month-constants.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * When constructing a Date, the month is zero-based. This can be confusing, since people are 3 | * used to seeing them one-based. So we create these aliases to make writing the tests easier. 4 | * @docs-private 5 | */ 6 | export const JAN = 0, 7 | FEB = 1, 8 | MAR = 2, 9 | APR = 3, 10 | MAY = 4, 11 | JUN = 5, 12 | JUL = 6, 13 | AUG = 7, 14 | SEP = 8, 15 | OCT = 9, 16 | NOV = 10, 17 | DEC = 11; 18 | -------------------------------------------------------------------------------- /src/angular/datepicker/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './datepicker.module'; 2 | export * from './datepicker/datepicker'; 3 | export * from './datepicker-content/datepicker-content'; 4 | export * from './datepicker-toggle/datepicker-toggle'; 5 | export * from './date-input/date-input.directive'; 6 | export * from './calendar/calendar'; 7 | export * from './calendar-body/calendar-body'; 8 | export * from './month-view/month-view'; 9 | export * from './datepicker-token'; 10 | -------------------------------------------------------------------------------- /src/angular/form-field/form-field.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { SbbCommonModule } from '@sbb-esta/angular/core'; 3 | 4 | import { SbbError } from './error'; 5 | import { SbbFormField } from './form-field'; 6 | import { SbbLabel } from './label'; 7 | 8 | @NgModule({ 9 | imports: [SbbCommonModule, SbbFormField, SbbError, SbbLabel], 10 | exports: [SbbFormField, SbbError, SbbLabel], 11 | }) 12 | export class SbbFormFieldModule {} 13 | -------------------------------------------------------------------------------- /src/angular/styles/cdk/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './overlay' show overlay, $overlay-container-z-index, $overlay-z-index, 2 | $overlay-backdrop-z-index, $overlay-backdrop-color; 3 | @forward './a11y' show a11y-visually-hidden, high-contrast; 4 | @forward './text-field' show text-field-autosize, text-field-autofill, text-field-autofill-color, 5 | // `text-field` is deprecated, but we have to export it 6 | // here in order for the theming API schematic to work. 7 | text-field; 8 | -------------------------------------------------------------------------------- /src/journey-maps/angular/components/basemap-switch/basemap-switch.html: -------------------------------------------------------------------------------- 1 |
7 |
8 | 14 |
15 |
16 | -------------------------------------------------------------------------------- /src/components-examples/angular/file-selector/multiple-mode-persistent-file-selector/multiple-mode-persistent-file-selector-example.html: -------------------------------------------------------------------------------- 1 | 7 |

Properties

8 | Disabled 9 |

Model

10 | 
{{ beautifyFileList(filesList) | json }}
11 | -------------------------------------------------------------------------------- /src/angular-experimental/index.ts: -------------------------------------------------------------------------------- 1 | // primary entry-point which is empty as of version 13. All components should 2 | // be imported through their individual entry-points. This file is needed to 3 | // satisfy the "ng_package" bazel rule which also requires a primary entry-point. 4 | 5 | // Workaround for: https://github.com/microsoft/rushstack/issues/2806. 6 | // This is a private export that can be removed at any time. 7 | export const ɵɵtsModuleIndicatorApiExtractorWorkaround = true; 8 | -------------------------------------------------------------------------------- /src/angular/autocomplete/autocomplete.scss: -------------------------------------------------------------------------------- 1 | @use '@sbb-esta/angular' as sbb; 2 | 3 | .sbb-autocomplete-visible { 4 | visibility: visible; 5 | } 6 | 7 | .sbb-autocomplete-hidden { 8 | visibility: hidden; 9 | padding: 0 !important; // Overwrite sbb-panel-padded styles 10 | } 11 | 12 | .sbb-autocomplete-panel .sbb-menu-group .sbb-menu-item { 13 | :where(html:not(.sbb-lean)) & { 14 | padding-left: calc(#{sbb.pxToRem(14)} * var(--sbb-scaling-factor)); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/angular/schematics/ng-update/data/constructor-checks.ts: -------------------------------------------------------------------------------- 1 | import { ConstructorChecksUpgradeData, VersionChanges } from '@angular/cdk/schematics'; 2 | 3 | /** 4 | * List of class names for which the constructor signature has been changed. The new constructor 5 | * signature types don't need to be stored here because the signature will be determined 6 | * automatically through type checking. 7 | */ 8 | export const constructorChecks: VersionChanges = {}; 9 | -------------------------------------------------------------------------------- /src/angular/search/search.html: -------------------------------------------------------------------------------- 1 | 2 | 13 | -------------------------------------------------------------------------------- /src/components-examples/angular/alert/alert-external-link/alert-external-link-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbAlertModule } from '@sbb-esta/angular/alert'; 3 | 4 | /** 5 | * @title Alert with external link 6 | * @order 30 7 | */ 8 | @Component({ 9 | selector: 'sbb-alert-external-link-example', 10 | templateUrl: 'alert-external-link-example.html', 11 | imports: [SbbAlertModule], 12 | }) 13 | export class AlertExternalLinkExample {} 14 | -------------------------------------------------------------------------------- /src/components-examples/angular/status/status-with-message/status-with-message-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbStatusModule } from '@sbb-esta/angular/status'; 3 | 4 | /** 5 | * @title Status With Message 6 | * @order 20 7 | */ 8 | @Component({ 9 | selector: 'sbb-status-with-message-example', 10 | templateUrl: 'status-with-message-example.html', 11 | imports: [SbbStatusModule], 12 | }) 13 | export class StatusWithMessageExample {} 14 | -------------------------------------------------------------------------------- /src/components-examples/angular/time-input/simple-time-input/simple-time-input-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbTimeInputModule } from '@sbb-esta/angular/time-input'; 3 | 4 | /** 5 | * @title Simple Time Input 6 | * @order 10 7 | */ 8 | @Component({ 9 | selector: 'sbb-simple-time-input-example', 10 | templateUrl: 'simple-time-input-example.html', 11 | imports: [SbbTimeInputModule], 12 | }) 13 | export class SimpleTimeInputExample {} 14 | -------------------------------------------------------------------------------- /src/components-examples/angular/tooltip/tooltip-custom-content/tooltip-custom-content-example.html: -------------------------------------------------------------------------------- 1 |

2 | 3 |

This is a tooltip with a button inside.
4 | 5 | 6 |

7 |

8 | 9 |

This is another tooltip with a custom link.
10 | I'm a link 11 | 12 |

13 | -------------------------------------------------------------------------------- /src/components-examples/angular/tooltip/tooltip-custom-icon/tooltip-custom-icon-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbTooltipModule } from '@sbb-esta/angular/tooltip'; 3 | 4 | /** 5 | * @title Tooltip Custom Icon 6 | * @order 20 7 | */ 8 | @Component({ 9 | selector: 'sbb-tooltip-custom-icon-example', 10 | templateUrl: 'tooltip-custom-icon-example.html', 11 | imports: [SbbTooltipModule], 12 | }) 13 | export class TooltipCustomIconExample {} 14 | -------------------------------------------------------------------------------- /src/journey-maps/angular/components/geolocate-button/geolocate-button.html: -------------------------------------------------------------------------------- 1 |
7 |
8 | 14 |
15 |
16 | -------------------------------------------------------------------------------- /src/journey-maps/angular/components/popup/popup.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | 10 | 11 |
12 | 13 | -------------------------------------------------------------------------------- /src/components-examples/angular/button/button-with-icon/button-with-icon-example.html: -------------------------------------------------------------------------------- 1 | 5 | 9 | 13 | -------------------------------------------------------------------------------- /src/journey-maps/angular/components/leit-poi/leit-poi.html: -------------------------------------------------------------------------------- 1 |
2 |
 
3 |
 
4 |
{{ this.feature.destinationLevel }}
5 |
 
6 |
 
7 |
8 | -------------------------------------------------------------------------------- /docs/src/assets/stack-blitz/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ${title} 6 | 7 | 8 | 9 | 10 | 11 | 12 |
Current build: ${version}
13 | 14 | 15 | -------------------------------------------------------------------------------- /sonar-project.properties: -------------------------------------------------------------------------------- 1 | sonar.organization=sbb 2 | sonar.sources=./src/angular 3 | sonar.sourceEncoding=UTF-8 4 | sonar.exclusions=**/node_modules/**,**/*.module.ts 5 | sonar.tests=./src/angular 6 | sonar.test.inclusions=**/*.spec.ts 7 | sonar.typescript.lcov.reportPaths=./coverage/sbb-esta/angular/lcov.info 8 | sonar.typescript.tslint.reportPaths=./lint/angular.json 9 | sonar.typescript.tsconfigPath=./tsconfig.json 10 | sonar.testExecutionReportPaths=./coverage/sbb-esta/angular/sonarqube.xml 11 | -------------------------------------------------------------------------------- /src/angular/core/option/option-hint.ts: -------------------------------------------------------------------------------- 1 | import { _IdGenerator } from '@angular/cdk/a11y'; 2 | import { Directive, inject } from '@angular/core'; 3 | 4 | @Directive({ 5 | selector: 'sbb-option-hint', 6 | host: { 7 | class: 'sbb-option-hint sbb-label', 8 | '[attr.id]': 'id', 9 | }, 10 | }) 11 | export class SbbOptionHint { 12 | /** Unique ID to be used by autocomplete trigger's "aria-controls" property. */ 13 | id: string = inject(_IdGenerator).getId('sbb-option-hint-'); 14 | } 15 | -------------------------------------------------------------------------------- /src/components-examples/angular/autocomplete/autocomplete-reactive-forms/autocomplete-reactive-forms-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | @for (option of filteredOptions; track option) { 6 | {{ option }} 7 | } 8 | 9 | 
{{ myControl.value | json }}
10 | -------------------------------------------------------------------------------- /src/components-examples/angular/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | export { CheckboxGroupHorizontalExample } from './checkbox-group-horizontal/checkbox-group-horizontal-example'; 2 | export { CheckboxGroupReactiveFormsVerticalExample } from './checkbox-group-reactive-forms-vertical/checkbox-group-reactive-forms-vertical-example'; 3 | export { CheckboxIndeterminateStateExample } from './checkbox-indeterminate-state/checkbox-indeterminate-state-example'; 4 | export { CheckboxExample } from './checkbox/checkbox-example'; 5 | -------------------------------------------------------------------------------- /src/components-examples/angular/form-field/form-field-sbb-select/form-field-sbb-select-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | @for (value of [1, 2, 3]; track value) { 4 | Variant {{ value }} 5 | } 6 | 7 | @if (select.touched && select.errors?.['required']) { 8 | Variant is required! 9 | } 10 | 11 | -------------------------------------------------------------------------------- /src/components-examples/angular/menu/menu-lazy-rendering/menu-lazy-rendering-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbMenuModule } from '@sbb-esta/angular/menu'; 3 | 4 | /** 5 | * @title Lazy rendering Contextmenu with passed data 6 | * @order 40 7 | */ 8 | @Component({ 9 | selector: 'sbb-menu-lazy-rendering-example', 10 | templateUrl: 'menu-lazy-rendering-example.html', 11 | imports: [SbbMenuModule], 12 | }) 13 | export class MenuLazyRenderingExample {} 14 | -------------------------------------------------------------------------------- /src/components-examples/angular/radio-button-panel/index.ts: -------------------------------------------------------------------------------- 1 | export { RadioButtonPanelContentExample } from './radio-button-panel-content/radio-button-panel-content-example'; 2 | export { RadioButtonPanelGroupExample } from './radio-button-panel-group/radio-button-panel-group-example'; 3 | export { RadioButtonPanelIconExample } from './radio-button-panel-icon/radio-button-panel-icon-example'; 4 | export { RadioButtonPanelSimpleExample } from './radio-button-panel-simple/radio-button-panel-simple-example'; 5 | -------------------------------------------------------------------------------- /src/journey-maps/angular/components/leit-poi/model/leit-poi-feature.ts: -------------------------------------------------------------------------------- 1 | import { LngLatLike } from 'maplibre-gl'; 2 | 3 | import { SbbLeitPoiPlacement } from './leit-poi-placement'; 4 | 5 | export interface SbbLeitPoiFeature { 6 | travelType: 'default' | 'stairs' | 'lift' | 'ramp' | 'escalator'; 7 | travelDirection: 'default' | 'upstairs' | 'downstairs'; 8 | placement: SbbLeitPoiPlacement; 9 | sourceLevel: number; 10 | location: LngLatLike; 11 | destinationLevel: number; 12 | } 13 | -------------------------------------------------------------------------------- /src/journey-maps/angular/services/map/util/style-version-lookup.ts: -------------------------------------------------------------------------------- 1 | import { Map as MaplibreMap } from 'maplibre-gl'; 2 | 3 | import { SBB_POI_FIRST_LAYER, SBB_ROKAS_WALK_SOURCE } from '../../constants'; 4 | 5 | export const isV1Style = (map: MaplibreMap): boolean => { 6 | return !!map.getStyle().sources[SBB_ROKAS_WALK_SOURCE]; 7 | }; 8 | 9 | export const isV3Style = (map: MaplibreMap): boolean => { 10 | return !!map.getStyle().layers.find((ly) => ly.id === SBB_POI_FIRST_LAYER); 11 | }; 12 | -------------------------------------------------------------------------------- /scripts/find-major-versions.sh: -------------------------------------------------------------------------------- 1 | set -e 2 | 3 | if [ -z "${START_VERSION}" ]; then 4 | echo "Missing START_VERSION variable" 5 | exit 1 6 | fi 7 | 8 | majorVersion=$START_VERSION 9 | versions=() 10 | 11 | while : ; do 12 | version=$(git tag --sort=v:refname -l "$majorVersion.*.*" | tail -1) 13 | [[ "$version" != "" ]] || break 14 | versions+=("$version") 15 | majorVersion=$((majorVersion+1)) 16 | done 17 | 18 | printf -v joined '"%s", ' "${versions[@]}" 19 | echo "versions=[${joined::-2}]" -------------------------------------------------------------------------------- /src/angular/toggle/toggle-directives.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: 'sbb-toggle-icon', 5 | }) 6 | export class SbbToggleIcon {} 7 | 8 | @Directive({ 9 | selector: 'sbb-toggle-label', 10 | }) 11 | export class SbbToggleLabel {} 12 | 13 | @Directive({ 14 | selector: 'sbb-toggle-subtitle', 15 | }) 16 | export class SbbToggleSubtitle {} 17 | 18 | @Directive({ 19 | selector: 'sbb-toggle-details', 20 | }) 21 | export class SbbToggleDetails {} 22 | -------------------------------------------------------------------------------- /src/components-examples/angular/icon/icon-simple/icon-simple-example.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { SbbIconModule } from '@sbb-esta/angular/icon'; 3 | 4 | /** 5 | * @title Icon 6 | * @order 10 7 | */ 8 | @Component({ 9 | selector: 'sbb-icon-simple-example', 10 | templateUrl: 'icon-simple-example.html', 11 | imports: [SbbIconModule], 12 | changeDetection: ChangeDetectionStrategy.OnPush, 13 | }) 14 | export class IconSimpleExample {} 15 | -------------------------------------------------------------------------------- /src/components-examples/angular/tabs/tab-group-dynamic-height/tab-group-dynamic-height-example.css: -------------------------------------------------------------------------------- 1 | .example-small-box, 2 | .example-large-box { 3 | display: flex; 4 | align-items: center; 5 | justify-content: center; 6 | margin: 16px; 7 | padding: 16px; 8 | } 9 | 10 | .example-small-box { 11 | height: 100px; 12 | width: 100px; 13 | border: 1px solid #767676; 14 | } 15 | 16 | .example-large-box { 17 | height: 300px; 18 | width: 300px; 19 | border: 1px solid #767676; 20 | } 21 | -------------------------------------------------------------------------------- /tools/dgeni/templates/property-list.template.html: -------------------------------------------------------------------------------- 1 | {%- if propertyList.length -%} 2 |
Properties
3 | 4 | 5 | 6 | 7 | 8 | {% for p in propertyList %} 9 | {$ property(p) $} 10 | {% endfor %} 11 |
NameDescription
12 | {%- endif -%} 13 | -------------------------------------------------------------------------------- /src/angular/captcha/captcha/windowref.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | function _window(): any { 4 | // return the global native browser window object 5 | return window; 6 | } 7 | 8 | @Injectable() 9 | export class SbbWindowRef { 10 | /** The global native browser window object. */ 11 | get nativeWindow(): any { 12 | return _window(); 13 | } 14 | } 15 | 16 | declare global { 17 | interface Window { 18 | ng2recaptchaloaded: () => void; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/angular/tag/tag.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { SbbBadgeModule } from '@sbb-esta/angular/badge'; 3 | import { SbbCommonModule } from '@sbb-esta/angular/core'; 4 | 5 | import { SbbTag } from './tag'; 6 | import { SbbTagLink } from './tag-link'; 7 | import { SbbTags } from './tags'; 8 | 9 | @NgModule({ 10 | imports: [SbbCommonModule, SbbBadgeModule, SbbTag, SbbTags, SbbTagLink], 11 | exports: [SbbTag, SbbTags, SbbTagLink], 12 | }) 13 | export class SbbTagModule {} 14 | -------------------------------------------------------------------------------- /src/components-examples/angular/menu/menu-icons/menu-icons-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbIconModule } from '@sbb-esta/angular/icon'; 3 | import { SbbMenuModule } from '@sbb-esta/angular/menu'; 4 | 5 | /** 6 | * @title Contextmenu with icons 7 | * @order 20 8 | */ 9 | @Component({ 10 | selector: 'sbb-menu-icons-example', 11 | templateUrl: 'menu-icons-example.html', 12 | imports: [SbbMenuModule, SbbIconModule], 13 | }) 14 | export class MenuIconsExample {} 15 | -------------------------------------------------------------------------------- /src/components-examples/journey-maps/angular/journey-maps-basic/journey-maps-basic-example.html: -------------------------------------------------------------------------------- 1 | This example uses a test API key, that might be disabled at any time. 3 | 4 |
5 | 6 |
7 |
8 |

Zoom map with scroll wheel or hold to move / pan.

9 |

On a touch device: move / pan map with one finger.

10 |
11 | -------------------------------------------------------------------------------- /tools/schematics/bazel/files/ngPackageExamples/config.bzl.template: -------------------------------------------------------------------------------- 1 | """ 2 | Entry points list for <%= shortName %>. 3 | """ 4 | 5 | ALL_EXAMPLES = [ 6 | # TODO(devversion): try to have for each entry-point a bazel package so that 7 | # we can automate this using the "package.bzl" variables. Currently generated 8 | # with "bazel query 'kind("ng_project", //src/components-examples/...:*)' --output="label"<% for (let module of exampleModules) { %> 9 | "/<%= module.path %>",<% } %> 10 | ] 11 | -------------------------------------------------------------------------------- /docs/src/app/angular/icon-overview/cdn-icon-list/cdn-icon/cdn-icon.component.html: -------------------------------------------------------------------------------- 1 | 10 | {{ cdnIconPath }} 11 | -------------------------------------------------------------------------------- /src/angular/breadcrumb/breadcrumb-root.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core'; 2 | import { SbbIconModule } from '@sbb-esta/angular/icon'; 3 | 4 | @Component({ 5 | selector: '[sbb-breadcrumb-root]', 6 | exportAs: 'sbbBreadcrumbRoot', 7 | templateUrl: './breadcrumb-root.html', 8 | encapsulation: ViewEncapsulation.None, 9 | changeDetection: ChangeDetectionStrategy.OnPush, 10 | imports: [SbbIconModule], 11 | }) 12 | export class SbbBreadcrumbRoot {} 13 | -------------------------------------------------------------------------------- /src/components-examples/angular/input/input-overview/input-overview-example.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | Favorite food 4 | 5 | 6 | 7 | 8 | Leave a comment 9 | 10 | 11 |
12 | -------------------------------------------------------------------------------- /src/journey-maps/esri-plugin/esri-plugin.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { HttpClient, HttpClientModule } from '@angular/common/http'; 3 | import { NgModule } from '@angular/core'; 4 | 5 | import { EsriPluginComponent } from './esri-plugin'; 6 | 7 | @NgModule({ 8 | declarations: [EsriPluginComponent], 9 | imports: [CommonModule, HttpClientModule], 10 | providers: [HttpClient], 11 | exports: [EsriPluginComponent], 12 | }) 13 | export class SbbEsriPluginModule {} 14 | -------------------------------------------------------------------------------- /src/angular/sidebar/sidebar/sidebar-link.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core'; 2 | import { SbbIcon } from '@sbb-esta/angular/icon'; 3 | 4 | @Component({ 5 | selector: 'a[sbbSidebarLink]', 6 | templateUrl: './sidebar-link.html', 7 | encapsulation: ViewEncapsulation.None, 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | host: { 10 | class: 'sbb-sidebar-link', 11 | }, 12 | imports: [SbbIcon], 13 | }) 14 | export class SbbSidebarLink {} 15 | -------------------------------------------------------------------------------- /src/angular/textexpand/textexpand.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 17 | -------------------------------------------------------------------------------- /src/components-examples/angular/datepicker/datepicker-date-filter/datepicker-date-filter-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Properties

8 | 
model: {{ date.value | date: 'mediumDate' }}
9 | 
form control validity: {{ date.valid }}
10 | 
form control errors: {{ date.errors | json }}
11 | -------------------------------------------------------------------------------- /src/components-examples/angular/search/search-autocomplete/search-autocomplete-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | @for (option of options; track option) { 6 | {{ option }} 7 | } 8 | 9 | 10 |

Results

11 | 
{{ searchValues | json }}
12 | -------------------------------------------------------------------------------- /src/components-examples/angular/tag/tag-with-icon/tag-with-icon-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbButtonModule } from '@sbb-esta/angular/button'; 3 | import { SbbTagModule } from '@sbb-esta/angular/tag'; 4 | 5 | /** 6 | * @title Tag With Icon 7 | * @order 50 8 | */ 9 | @Component({ 10 | selector: 'sbb-tag-with-icon-example', 11 | templateUrl: 'tag-with-icon-example.html', 12 | imports: [SbbTagModule, SbbButtonModule], 13 | }) 14 | export class TagWithIconExample {} 15 | -------------------------------------------------------------------------------- /src/journey-maps/esri-plugin/services/maplibre-util.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | import { SbbEsriFeatureLayer } from '../esri-plugin.interface'; 4 | 5 | @Injectable({ 6 | providedIn: 'root', 7 | }) 8 | export class MaplibreUtilService { 9 | getLayerId(layer: SbbEsriFeatureLayer): string { 10 | return layer.url.replace(/\W/g, '_'); 11 | } 12 | 13 | getSourceId(layer: SbbEsriFeatureLayer): string { 14 | return `${this.getLayerId(layer)}-source`; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/components-examples/angular/tabs/tab-group-badge/tab-group-badge-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbBadgeModule } from '@sbb-esta/angular/badge'; 3 | import { SbbTabsModule } from '@sbb-esta/angular/tabs'; 4 | 5 | /** 6 | * @title Tabs with badge 7 | * @order 40 8 | */ 9 | @Component({ 10 | selector: 'sbb-tab-group-badge-example', 11 | templateUrl: 'tab-group-badge-example.html', 12 | imports: [SbbTabsModule, SbbBadgeModule], 13 | }) 14 | export class TabGroupBadgeExample {} 15 | -------------------------------------------------------------------------------- /docs/src/app/shared/html-loader.service.ts: -------------------------------------------------------------------------------- 1 | import { HttpClient } from '@angular/common/http'; 2 | import { Injectable } from '@angular/core'; 3 | 4 | import { LoaderBuilder } from './loader-builder'; 5 | import { ModuleParams } from './module-params'; 6 | 7 | @Injectable({ 8 | providedIn: 'root', 9 | }) 10 | export class HtmlLoader { 11 | constructor(private _http: HttpClient) {} 12 | 13 | withParams(moduleParams: ModuleParams): LoaderBuilder { 14 | return new LoaderBuilder(this._http, moduleParams); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/components-examples/angular/alert/alert-router-link/alert-router-link-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { RouterLink } from '@angular/router'; 3 | import { SbbAlertModule } from '@sbb-esta/angular/alert'; 4 | 5 | /** 6 | * @title Alert with Router link 7 | * @order 20 8 | */ 9 | @Component({ 10 | selector: 'sbb-alert-router-link-example', 11 | templateUrl: 'alert-router-link-example.html', 12 | imports: [SbbAlertModule, RouterLink], 13 | }) 14 | export class AlertRouterLinkExample {} 15 | -------------------------------------------------------------------------------- /src/components-examples/angular/lightbox/lightbox/lightbox-example.html: -------------------------------------------------------------------------------- 1 |

Share data with the Lightbox

2 | 3 | 4 | 5 |

6 | 7 |

8 | @if (animal) { 9 | You chose: {{ animal }} 12 | } 13 | 14 |

Description

15 |

This implementation shows how to share data between parent and the lightbox.

16 | -------------------------------------------------------------------------------- /src/angular/core/option/pseudo-checkbox.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 10 | 17 | 18 | 19 |
20 | -------------------------------------------------------------------------------- /src/angular/notification-toast/notification-toast-container.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 |
7 | 8 | 15 | -------------------------------------------------------------------------------- /src/components-examples/angular/autocomplete/autocomplete-display-with/autocomplete-display-with-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | @for (option of filteredOptions | async; track option) { 6 | {{ option.label }} 7 | } 8 | 9 | 
{{ myControl.value | json }}
10 | -------------------------------------------------------------------------------- /src/components-examples/angular/checkbox-panel/checkbox-panel-content/checkbox-panel-content-example.html: -------------------------------------------------------------------------------- 1 | 2 | Zürich HB - Basel SBB 3 | Valid: Mo, 01.03.2021 4 | Reservation not possible 5 | CHF 250.00 6 | 7 | 8 |

Properties

9 | Disabled 10 | -------------------------------------------------------------------------------- /src/components-examples/angular/notification/custom-icon-notification/custom-icon-notification-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbNotificationModule } from '@sbb-esta/angular/notification'; 3 | 4 | /** 5 | * @title Custom Icon Notification 6 | * @order 20 7 | */ 8 | @Component({ 9 | selector: 'sbb-custom-icon-notification-example', 10 | templateUrl: 'custom-icon-notification-example.html', 11 | imports: [SbbNotificationModule], 12 | }) 13 | export class CustomIconNotificationExample {} 14 | -------------------------------------------------------------------------------- /tools/tslint-rules/tsLoaderRule.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const Lint = require('tslint'); 3 | 4 | // Custom rule that registers all of the custom rules, written in TypeScript, with ts-node. 5 | // This is necessary, because `tslint` and IDEs won't execute any rules that aren't in a .js file. 6 | require('ts-node').register({ project: path.join(__dirname, './tsconfig.json') }); 7 | 8 | // Add a noop rule so tslint doesn't complain. 9 | exports.Rule = class Rule extends Lint.Rules.AbstractRule { 10 | apply() {} 11 | }; 12 | -------------------------------------------------------------------------------- /src/angular/captcha/captcha.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { SbbCommonModule } from '@sbb-esta/angular/core'; 3 | 4 | import { SbbCaptcha } from './captcha/captcha'; 5 | import { SbbCaptchaLoaderService } from './captcha/captcha-loader.service'; 6 | import { SbbWindowRef } from './captcha/windowref.service'; 7 | 8 | @NgModule({ 9 | imports: [SbbCommonModule, SbbCaptcha], 10 | exports: [SbbCaptcha], 11 | providers: [SbbCaptchaLoaderService, SbbWindowRef], 12 | }) 13 | export class SbbCaptchaModule {} 14 | -------------------------------------------------------------------------------- /src/components-examples/angular/breadcrumb/breadcrumb/breadcrumb-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { RouterLink, RouterLinkActive } from '@angular/router'; 3 | import { SbbBreadcrumbModule } from '@sbb-esta/angular/breadcrumb'; 4 | 5 | /** 6 | * @title Breadcrumb 7 | * @order 10 8 | */ 9 | @Component({ 10 | selector: 'sbb-breadcrumb-example', 11 | templateUrl: 'breadcrumb-example.html', 12 | imports: [SbbBreadcrumbModule, RouterLink, RouterLinkActive], 13 | }) 14 | export class BreadcrumbExample {} 15 | -------------------------------------------------------------------------------- /src/components-examples/angular/loading-indicator/loading-indicator-inline/loading-indicator-inline-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbLoadingIndicatorModule } from '@sbb-esta/angular/loading-indicator'; 3 | 4 | /** 5 | * @title Inline Loading 6 | * @order 40 7 | */ 8 | @Component({ 9 | selector: 'sbb-loading-indicator-inline-example', 10 | templateUrl: 'loading-indicator-inline-example.html', 11 | imports: [SbbLoadingIndicatorModule], 12 | }) 13 | export class LoadingIndicatorInlineExample {} 14 | -------------------------------------------------------------------------------- /src/angular/alert/alert.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { SbbCommonModule } from '@sbb-esta/angular/core'; 4 | import { SbbIconModule } from '@sbb-esta/angular/icon'; 5 | 6 | import { SbbAlert } from './alert'; 7 | import { SbbAlertOutlet } from './alert-outlet'; 8 | 9 | @NgModule({ 10 | imports: [RouterModule, SbbCommonModule, SbbIconModule, SbbAlert, SbbAlertOutlet], 11 | exports: [SbbAlert, SbbAlertOutlet], 12 | }) 13 | export class SbbAlertModule {} 14 | -------------------------------------------------------------------------------- /src/angular/breadcrumb/breadcrumbs.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | -------------------------------------------------------------------------------- /src/bazel-tsconfig-test.json: -------------------------------------------------------------------------------- 1 | // TypeScript configuration that will be used to build the test sources for entry-points 2 | // of the CDK. To avoid duplicate logic, we decided to just have one package-wide tsconfig 3 | // file that will be used by Bazel to build the test sources for an entry-point. 4 | { 5 | "extends": "./bazel-tsconfig-build.json", 6 | "compilerOptions": { 7 | "importHelpers": true, 8 | "types": ["jasmine", "node"] 9 | }, 10 | "bazelOptions": { 11 | "suppressTsconfigOverrideWarnings": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/components-examples/angular-experimental/example/index.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 4 | 5 | import { BasicExample } from './basic/basic-example'; 6 | 7 | export { BasicExample }; 8 | 9 | const EXAMPLES = [BasicExample]; 10 | 11 | @NgModule({ 12 | imports: [CommonModule, FormsModule, ReactiveFormsModule, ...EXAMPLES], 13 | exports: EXAMPLES, 14 | }) 15 | export class AccordionExamplesModule {} 16 | -------------------------------------------------------------------------------- /src/components-examples/angular/menu/menu-icons/menu-icons-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 |
8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/src/app/shared/component-viewer/component-viewer/component-viewer.component.html: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/angular/notification/notification.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { SbbCommonModule } from '@sbb-esta/angular/core'; 3 | import { SbbIconModule } from '@sbb-esta/angular/icon'; 4 | 5 | import { SbbNotification } from './notification'; 6 | import { SbbNotificationIcon } from './notification-directives'; 7 | 8 | @NgModule({ 9 | imports: [SbbCommonModule, SbbIconModule, SbbNotification, SbbNotificationIcon], 10 | exports: [SbbNotification, SbbNotificationIcon], 11 | }) 12 | export class SbbNotificationModule {} 13 | -------------------------------------------------------------------------------- /src/components-examples/angular/autocomplete/autocomplete-forms/autocomplete-forms-example.html: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | 11 | @for (option of filteredOptions; track option) { 12 | {{ option }} 13 | } 14 | 15 | 
{{ value | json }}
16 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "bazel.buildifierFixOnFormat": true, 3 | "typescript.tsdk": "node_modules\\typescript\\lib", 4 | "remote.WSL.fileWatcher.polling": true, 5 | "files.watcherExclude": { 6 | "**/.git/objects/**": true, 7 | "**/.git/subtree-cache/**": true, 8 | "**/node_modules/**": true, 9 | "**/bazel-out/**": true, 10 | "**/dist/**": true, 11 | }, 12 | "search.exclude": { 13 | "**/node_modules": true, 14 | "**/bower_components": true, 15 | "**/bazel-out": true, 16 | "**/dist": true, 17 | }, 18 | } -------------------------------------------------------------------------------- /src/angular/autocomplete/autocomplete.html: -------------------------------------------------------------------------------- 1 | 2 |
13 | 14 |
15 | 16 | -------------------------------------------------------------------------------- /src/components-examples/angular/tabs/tab-group-preserve-content/tab-group-preserve-content-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbTabsModule } from '@sbb-esta/angular/tabs'; 3 | 4 | /** 5 | * @title Tab group that keeps its content inside the DOM when it's off-screen. 6 | * @order 90 7 | */ 8 | @Component({ 9 | selector: 'sbb-tab-group-preserve-content-example', 10 | templateUrl: 'tab-group-preserve-content-example.html', 11 | imports: [SbbTabsModule], 12 | }) 13 | export class TabGroupPreserveContentExample {} 14 | -------------------------------------------------------------------------------- /src/components-examples/angular/toggle/toggle-without-form/toggle-without-form-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 1st class 6 | + CHF 39.00 7 | 8 | 9 | 10 |

Model

11 | {{ toggleValues | json }} 12 | -------------------------------------------------------------------------------- /src/angular/autocomplete/autocomplete-origin.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, inject } from '@angular/core'; 2 | 3 | /** 4 | * Directive applied to an element to make it usable 5 | * as a connection point for an autocomplete panel. 6 | */ 7 | @Directive({ 8 | selector: '[sbbAutocompleteOrigin]', 9 | exportAs: 'sbbAutocompleteOrigin', 10 | }) 11 | export class SbbAutocompleteOrigin { 12 | elementRef: ElementRef = inject>(ElementRef); 13 | 14 | constructor(...args: unknown[]); 15 | constructor() {} 16 | } 17 | -------------------------------------------------------------------------------- /src/angular/icon/testing/BUILD.bazel: -------------------------------------------------------------------------------- 1 | load( 2 | "//tools:defaults.bzl", 3 | "ng_project", 4 | ) 5 | 6 | package(default_visibility = ["//visibility:public"]) 7 | 8 | ng_project( 9 | name = "testing", 10 | srcs = glob( 11 | ["**/*.ts"], 12 | exclude = ["**/*.spec.ts"], 13 | ), 14 | deps = [ 15 | "//:node_modules/@angular/core", 16 | "//:node_modules/rxjs", 17 | "//src/angular/icon", 18 | ], 19 | ) 20 | 21 | filegroup( 22 | name = "source-files", 23 | srcs = glob(["**/*.ts"]), 24 | ) 25 | -------------------------------------------------------------------------------- /src/angular/sidebar/icon-sidebar/icon-sidebar-item.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'a[sbbIconSidebarItem]', 5 | templateUrl: './icon-sidebar-item.html', 6 | encapsulation: ViewEncapsulation.None, 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | host: { 9 | class: 'sbb-icon-sidebar-item sbb-icon-scaled', 10 | }, 11 | }) 12 | export class SbbIconSidebarItem { 13 | /** Label of the icon */ 14 | @Input() 15 | label: string; 16 | } 17 | -------------------------------------------------------------------------------- /src/components-examples/angular/notification/simple-notification/simple-notification-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbNotificationModule } from '@sbb-esta/angular/notification'; 3 | 4 | /** 5 | * @title Simple Notification 6 | * @order 10 7 | */ 8 | @Component({ 9 | selector: 'sbb-simple-notification-example', 10 | templateUrl: 'simple-notification-example.html', 11 | styleUrls: ['simple-notification-example.css'], 12 | imports: [SbbNotificationModule], 13 | }) 14 | export class SimpleNotificationExample {} 15 | -------------------------------------------------------------------------------- /tools/stack-blitz-module-template/BUILD.bazel: -------------------------------------------------------------------------------- 1 | load("@aspect_rules_js//js:defs.bzl", "js_binary") 2 | load("//tools:defaults.bzl", "ts_project") 3 | 4 | package(default_visibility = ["//visibility:public"]) 5 | 6 | js_binary( 7 | name = "bazel-bin", 8 | data = [ 9 | ":sources", 10 | ], 11 | entry_point = ":bazel-bin.ts", 12 | ) 13 | 14 | ts_project( 15 | name = "sources", 16 | srcs = glob( 17 | ["**/*.ts"], 18 | exclude = ["sbb-module.template.ts"], 19 | ), 20 | tsconfig = "//tools:tsconfig", 21 | ) 22 | -------------------------------------------------------------------------------- /src/components-examples/angular/accordion/index.ts: -------------------------------------------------------------------------------- 1 | export { AccordionBasicExample } from './accordion-basic/accordion-basic-example'; 2 | export { AccordionCustomHtmlExample } from './accordion-custom-html/accordion-custom-html-example'; 3 | export { AccordionNestedPanelLazyContentExample } from './accordion-nested-panel-lazy-content/accordion-nested-panel-lazy-content-example'; 4 | export { AccordionSimplePanelExample } from './accordion-simple-panel/accordion-simple-panel-example'; 5 | export { AccordionWizardExample } from './accordion-wizard/accordion-wizard-example'; 6 | -------------------------------------------------------------------------------- /src/components-examples/angular/dialog/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | ComponentDataDialogComponent, 3 | ComponentDataDialogExample, 4 | } from './component-data-dialog/component-data-dialog-example'; 5 | export { 6 | DialogAnimationsExample, 7 | DialogAnimationsExampleDialog, 8 | } from './dialog-animations/dialog-animations-example'; 9 | export { 10 | SharedDataDialogComponent, 11 | SharedDataDialogExample, 12 | } from './shared-data-dialog/shared-data-dialog-example'; 13 | export { TemplateDialogExample } from './template-dialog/template-dialog-example'; 14 | -------------------------------------------------------------------------------- /src/components-examples/journey-maps/esri-plugin/esri-plugin/esri-plugin-example.html: -------------------------------------------------------------------------------- 1 | This example uses a test API key, that might be disabled at any time. 3 | 4 |
5 | 6 | 12 |
13 | -------------------------------------------------------------------------------- /tools/highlight-files/highlight-code-block.ts: -------------------------------------------------------------------------------- 1 | import highlightJs from 'highlight.js'; 2 | 3 | /** 4 | * Transforms a given code block into its corresponding HTML output. We do this using 5 | * highlight.js because it allows us to show colored code blocks in our documentation. 6 | */ 7 | export function highlightCodeBlock(code: string, language: string) { 8 | if (language) { 9 | return highlightJs.highlight(code, { 10 | language: language.toLowerCase() === 'ts' ? 'typescript' : language, 11 | }).value; 12 | } 13 | 14 | return code; 15 | } 16 | -------------------------------------------------------------------------------- /src/angular-experimental/tsconfig.json: -------------------------------------------------------------------------------- 1 | // Configuration for IDEs only. 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "rootDir": "..", 6 | "baseUrl": ".", 7 | "paths": { 8 | "@sbb-esta/angular": ["../angular"], 9 | "@sbb-esta/angular/*": ["../angular/*"], 10 | "@sbb-esta/angular-experimental/*": ["./*"], 11 | "@sbb-esta/journey-maps": ["../journey-maps"], 12 | "@sbb-esta/journey-maps/*": ["../journey-maps/*"] 13 | } 14 | }, 15 | "include": ["./**/*.ts", "../dev-mode-types.d.ts"] 16 | } 17 | -------------------------------------------------------------------------------- /src/angular/core/testing/BUILD.bazel: -------------------------------------------------------------------------------- 1 | load( 2 | "//tools:defaults.bzl", 3 | "ng_project", 4 | ) 5 | 6 | package(default_visibility = ["//visibility:public"]) 7 | 8 | ng_project( 9 | name = "testing", 10 | srcs = glob( 11 | ["**/*.ts"], 12 | exclude = ["**/*.spec.ts"], 13 | ), 14 | deps = [ 15 | "//:node_modules/@angular/cdk", 16 | "//:node_modules/@angular/core", 17 | "//src/angular/core", 18 | ], 19 | ) 20 | 21 | filegroup( 22 | name = "source-files", 23 | srcs = glob(["**/*.ts"]), 24 | ) 25 | -------------------------------------------------------------------------------- /src/components-examples/angular/notification-toast/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | ExampleToastComponent, 3 | NotificationToastComponentExample, 4 | } from './notification-toast-component/notification-toast-component-example'; 5 | export { NotificationToastDurationExample } from './notification-toast-duration/notification-toast-duration-example'; 6 | export { NotificationToastTemplateExample } from './notification-toast-template/notification-toast-template-example'; 7 | export { SimpleNotificationToastExample } from './simple-notification-toast/simple-notification-toast-example'; 8 | -------------------------------------------------------------------------------- /src/angular/textarea/textarea/textarea.html: -------------------------------------------------------------------------------- 1 | 14 | @if (maxlength && !disabled) { 15 |
{{ _labelCharactersRemaining }}
16 | } 17 | -------------------------------------------------------------------------------- /src/components-examples/angular/search/search-header-autocomplete/search-header-autocomplete-example.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | @for (option of options; track option) { 8 | {{ option }} 9 | } 10 | 11 | 12 |

Results

13 | 
{{ searchValues | json }}
14 | -------------------------------------------------------------------------------- /src/angular/textexpand/textexpand.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { SbbCommonModule } from '@sbb-esta/angular/core'; 3 | 4 | import { SbbTextexpand } from './textexpand'; 5 | import { SbbTextexpandCollapsed } from './textexpand-collapsed'; 6 | import { SbbTextexpandExpanded } from './textexpand-expanded'; 7 | 8 | @NgModule({ 9 | imports: [SbbCommonModule, SbbTextexpand, SbbTextexpandCollapsed, SbbTextexpandExpanded], 10 | exports: [SbbTextexpand, SbbTextexpandCollapsed, SbbTextexpandExpanded], 11 | }) 12 | export class SbbTextexpandModule {} 13 | -------------------------------------------------------------------------------- /src/angular/usermenu/usermenu.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { SbbCommonModule } from '@sbb-esta/angular/core'; 3 | import { SbbIconModule } from '@sbb-esta/angular/icon'; 4 | import { SbbMenuModule } from '@sbb-esta/angular/menu'; 5 | 6 | import { SbbUsermenu } from './usermenu'; 7 | import { SbbUsermenuIcon } from './usermenu-icon'; 8 | 9 | @NgModule({ 10 | imports: [SbbCommonModule, SbbIconModule, SbbMenuModule, SbbUsermenu, SbbUsermenuIcon], 11 | exports: [SbbUsermenu, SbbUsermenuIcon], 12 | }) 13 | export class SbbUsermenuModule {} 14 | -------------------------------------------------------------------------------- /src/components-examples/angular/accordion/accordion-simple-panel/accordion-simple-panel-example.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { SbbAccordionModule } from '@sbb-esta/angular/accordion'; 3 | 4 | /** 5 | * @title Simple Panel 6 | * @order 10 7 | */ 8 | @Component({ 9 | selector: 'sbb-accordion-simple-panel-example', 10 | templateUrl: 'accordion-simple-panel-example.html', 11 | imports: [SbbAccordionModule], 12 | changeDetection: ChangeDetectionStrategy.OnPush, 13 | }) 14 | export class AccordionSimplePanelExample {} 15 | -------------------------------------------------------------------------------- /src/components-examples/angular/breadcrumb/breadcrumb/breadcrumb-example.html: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | Level 1 10 | 11 | 12 | Level 2 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/components-examples/angular/usermenu/index.ts: -------------------------------------------------------------------------------- 1 | export { UsermenuCustomIconExample } from './usermenu-custom-icon/usermenu-custom-icon-example'; 2 | export { UsermenuCustomImageExample } from './usermenu-custom-image/usermenu-custom-image-example'; 3 | export { UsermenuDisplayNameAndUserNameExample } from './usermenu-display-name-and-user-name/usermenu-display-name-and-user-name-example'; 4 | export { UsermenuDisplayNameExample } from './usermenu-display-name/usermenu-display-name-example'; 5 | export { UsermenuUserNameExample } from './usermenu-user-name/usermenu-user-name-example'; 6 | -------------------------------------------------------------------------------- /docs/src/app/introduction/introduction.component.ts: -------------------------------------------------------------------------------- 1 | // tslint:disable:require-property-typedef 2 | import { KeyValuePipe } from '@angular/common'; 3 | import { Component } from '@angular/core'; 4 | import { RouterLink } from '@angular/router'; 5 | 6 | import { PACKAGES } from '../shared/meta'; 7 | 8 | @Component({ 9 | selector: 'sbb-introduction', 10 | templateUrl: './introduction.component.html', 11 | styleUrls: ['./introduction.component.scss'], 12 | imports: [RouterLink, KeyValuePipe], 13 | }) 14 | export class IntroductionComponent { 15 | packages = PACKAGES; 16 | } 17 | -------------------------------------------------------------------------------- /src/angular/input/input-value-accessor.ts: -------------------------------------------------------------------------------- 1 | import { InjectionToken, WritableSignal } from '@angular/core'; 2 | 3 | /** 4 | * This token is used to inject the object whose value should be set into `InputDirective`. 5 | * If none is provided, the native `HTMLInputElement` is used. Directives can provide 6 | * themselves for this token, in order to make `InputDirective` delegate the getting and setting of the 7 | * value to them. 8 | */ 9 | export const SBB_INPUT_VALUE_ACCESSOR = new InjectionToken<{ value: any | WritableSignal }>( 10 | 'SBB_INPUT_VALUE_ACCESSOR', 11 | ); 12 | -------------------------------------------------------------------------------- /src/components-examples/angular/checkbox-panel/checkbox-panel-icon/checkbox-panel-icon-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbCheckboxPanelModule } from '@sbb-esta/angular/checkbox-panel'; 3 | import { SbbIconModule } from '@sbb-esta/angular/icon'; 4 | 5 | /** 6 | * @title Checkbox Panel Icon 7 | * @order 40 8 | */ 9 | @Component({ 10 | selector: 'sbb-checkbox-panel-icon-example', 11 | templateUrl: 'checkbox-panel-icon-example.html', 12 | imports: [SbbCheckboxPanelModule, SbbIconModule], 13 | }) 14 | export class CheckboxPanelIconExample {} 15 | -------------------------------------------------------------------------------- /src/components-examples/angular/tabs/tab-group-dynamic-height/tab-group-dynamic-height-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbTabsModule } from '@sbb-esta/angular/tabs'; 3 | 4 | /** 5 | * @title Tab group with dynamic height based on tab contents 6 | * @order 70 7 | */ 8 | @Component({ 9 | selector: 'sbb-tab-group-dynamic-height-example', 10 | templateUrl: 'tab-group-dynamic-height-example.html', 11 | styleUrls: ['tab-group-dynamic-height-example.css'], 12 | imports: [SbbTabsModule], 13 | }) 14 | export class TabGroupDynamicHeightExample {} 15 | -------------------------------------------------------------------------------- /src/components-examples/angular/tooltip/tooltip-custom-content/tooltip-custom-content-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbButtonModule } from '@sbb-esta/angular/button'; 3 | import { SbbTooltipModule } from '@sbb-esta/angular/tooltip'; 4 | 5 | /** 6 | * @title Tooltip Custom Content 7 | * @order 30 8 | */ 9 | @Component({ 10 | selector: 'sbb-tooltip-custom-content-example', 11 | templateUrl: 'tooltip-custom-content-example.html', 12 | imports: [SbbTooltipModule, SbbButtonModule], 13 | }) 14 | export class TooltipCustomContentExample {} 15 | -------------------------------------------------------------------------------- /src/components-examples/journey-maps/angular/journey-maps-ui-options/journey-maps-ui-options-example.css: -------------------------------------------------------------------------------- 1 | @import 'https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css'; 2 | 3 | sbb-notification.api-key-info { 4 | margin-bottom: 30px; 5 | } 6 | 7 | .web-map { 8 | width: 100%; 9 | height: 500px; 10 | min-height: 500px; 11 | box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.15); 12 | } 13 | 14 | form { 15 | display: flex; 16 | flex-direction: row; 17 | justify-content: space-around; 18 | padding: 20px 0; 19 | } 20 | 21 | sbb-checkbox { 22 | margin: 8px 0; 23 | } 24 | -------------------------------------------------------------------------------- /tools/dgeni/common/compute-api-url.ts: -------------------------------------------------------------------------------- 1 | import { Document } from 'dgeni'; 2 | 3 | import { ModuleInfo } from '../processors/entry-point-grouper'; 4 | 5 | /** 6 | * Computes an URL that refers to the given API document in the docs. Note that this logic 7 | * needs to be kept in sync with the routes from the sbb-angular project. 8 | */ 9 | export function computeApiDocumentUrl(apiDoc: Document, moduleInfo: ModuleInfo): string { 10 | const baseUrl = moduleInfo.packageName.split('-')[1]; 11 | return `${baseUrl}/components/${moduleInfo.entryPointName}/api#${apiDoc.name}`; 12 | } 13 | -------------------------------------------------------------------------------- /src/angular/core/datetime/native-date-adapter-provider.ts: -------------------------------------------------------------------------------- 1 | import { Provider } from '@angular/core'; 2 | 3 | import { SbbDateAdapter } from './date-adapter'; 4 | import { SBB_DATE_FORMATS } from './date-formats'; 5 | import { SBB_DATE_PIPE_DATE_FORMATS } from './date-pipe-date-formats'; 6 | import { SbbNativeDateAdapter } from './native-date-adapter'; 7 | export function provideNativeDateAdapter(): Provider[] { 8 | return [ 9 | { provide: SbbDateAdapter, useClass: SbbNativeDateAdapter }, 10 | { provide: SBB_DATE_FORMATS, useValue: SBB_DATE_PIPE_DATE_FORMATS }, 11 | ]; 12 | } 13 | -------------------------------------------------------------------------------- /src/angular/pagination/pagination.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { SbbCommonModule } from '@sbb-esta/angular/core'; 4 | import { SbbIconModule } from '@sbb-esta/angular/icon'; 5 | 6 | import { SbbNavigation } from './navigation/navigation'; 7 | import { SbbPaginator } from './paginator/paginator'; 8 | 9 | @NgModule({ 10 | imports: [RouterModule, SbbCommonModule, SbbIconModule, SbbNavigation, SbbPaginator], 11 | exports: [SbbNavigation, SbbPaginator], 12 | }) 13 | export class SbbPaginationModule {} 14 | -------------------------------------------------------------------------------- /tools/schematics/bazel/bazel-genrule-resolver.ts: -------------------------------------------------------------------------------- 1 | import { fragment } from '@angular-devkit/core'; 2 | import { DirEntry } from '@angular-devkit/schematics'; 3 | 4 | export class BazelGenruleResolver { 5 | private readonly _buildFile = fragment('BUILD.bazel'); 6 | 7 | resolveGenrule(dir: DirEntry): string[] { 8 | if (!dir.subfiles.includes(this._buildFile)) { 9 | return []; 10 | } 11 | 12 | return ( 13 | dir 14 | .file(this._buildFile)! 15 | .content.toString() 16 | .match(/\ngenrule\([\w\W]+?\n\)/gm) || [] 17 | ); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/angular/core/option/option.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { SbbCommonModule } from '../common-behaviors/common.module'; 4 | 5 | import { SbbOptgroup } from './optgroup'; 6 | import { SbbOption } from './option'; 7 | import { SbbOptionHint } from './option-hint'; 8 | import { SbbPseudoCheckbox } from './pseudo-checkbox'; 9 | 10 | @NgModule({ 11 | imports: [SbbCommonModule, SbbOption, SbbOptionHint, SbbOptgroup, SbbPseudoCheckbox], 12 | exports: [SbbOption, SbbOptionHint, SbbOptgroup, SbbPseudoCheckbox], 13 | }) 14 | export class SbbOptionModule {} 15 | -------------------------------------------------------------------------------- /src/components-examples/angular/button/button-with-icon/button-with-icon-example.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { SbbButtonModule } from '@sbb-esta/angular/button'; 3 | import { SbbIconModule } from '@sbb-esta/angular/icon'; 4 | 5 | /** 6 | * @title Button With Icon Example 7 | * @order 20 8 | */ 9 | @Component({ 10 | selector: 'sbb-button-with-icon-example', 11 | templateUrl: 'button-with-icon-example.html', 12 | styleUrls: ['button-with-icon-example.css'], 13 | imports: [SbbButtonModule, SbbIconModule], 14 | }) 15 | export class ButtonWithIconExample {} 16 | -------------------------------------------------------------------------------- /src/journey-maps/angular/services/map/util/array-utils.spec.ts: -------------------------------------------------------------------------------- 1 | import { groupBy } from './array-utils'; 2 | 3 | describe('groupBy()', () => { 4 | it('returns the expected result', () => { 5 | const a1 = { key1: { key2: 'a' } }; 6 | const b1 = { key1: { key2: 'b' } }; 7 | const c1 = { key1: { key2: 'c' } }; 8 | const a2 = { key1: { key2: 'a' } }; 9 | const array = [a1, b1, c1, a2]; 10 | const result = groupBy(array, (o) => o.key1.key2); 11 | expect(result).toEqual({ 12 | a: [a1, a2], 13 | b: [b1], 14 | c: [c1], 15 | }); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /src/angular/accordion/expansion-panel.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
10 |
11 | 12 | 13 |
14 |
15 |
16 | -------------------------------------------------------------------------------- /src/angular/core/option/option-parent.ts: -------------------------------------------------------------------------------- 1 | import { InjectionToken } from '@angular/core'; 2 | 3 | /** 4 | * Describes a parent component that manages a list of options. 5 | * Contains properties that the options can inherit. 6 | * @docs-private 7 | */ 8 | export interface SbbOptionParentComponent { 9 | multiple?: boolean; 10 | inertGroups?: boolean; 11 | } 12 | 13 | /** 14 | * Injection token used to provide the parent component to options. 15 | */ 16 | export const SBB_OPTION_PARENT_COMPONENT = new InjectionToken( 17 | 'SBB_OPTION_PARENT_COMPONENT', 18 | ); 19 | -------------------------------------------------------------------------------- /src/angular/menu/menu-dynamic-trigger.ts: -------------------------------------------------------------------------------- 1 | import { Directive, inject, TemplateRef, ViewContainerRef } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: `[sbbMenuDynamicTrigger]`, 5 | exportAs: 'sbbMenuDynamicTrigger', 6 | }) 7 | export class SbbMenuDynamicTrigger { 8 | readonly _templateRef = inject>(TemplateRef); 9 | 10 | constructor(...args: unknown[]); 11 | constructor() { 12 | const _templateRef = this._templateRef; 13 | const viewContainerRef = inject(ViewContainerRef); 14 | 15 | viewContainerRef.createEmbeddedView(_templateRef); 16 | } 17 | } 18 | --------------------------------------------------------------------------------