Bootstrap accordions are deprecated and will soon be removed.
-- For a similar behavior, check out our new - - post-accordion component - - . -
-- For the JavaScript accordion to work properly, you need to import collapse.js from Bootstrap - into your component. -
-
- This is the first item's accordion body.
- It is shown by default, until the collapse plugin adds the appropriate classes that we use
- to style each element. These classes control the overall appearance, as well as the
- showing and hiding via CSS transitions. You can modify any of this with custom CSS or
- overriding our default variables. It's also worth noting that just about any HTML can go
- within the
- .accordion-body
- , though the transition does limit overflow.
-
- This is the second item's accordion body.
- It is hidden by default, until the collapse plugin adds the appropriate classes that we
- use to style each element. These classes control the overall appearance, as well as the
- showing and hiding via CSS transitions. You can modify any of this with custom CSS or
- overriding our default variables. It's also worth noting that just about any HTML can go
- within the
- .accordion-body
- , though the transition does limit overflow.
-
- This is the third item's accordion body.
- It is hidden by default, until the collapse plugin adds the appropriate classes that we
- use to style each element. These classes control the overall appearance, as well as the
- showing and hiding via CSS transitions. You can modify any of this with custom CSS or
- overriding our default variables. It's also worth noting that just about any HTML can go
- within the
- .accordion-body
- , though the transition does limit overflow.
-
Sie haben eine neue Nachricht von Paula erhalten.
-Sie erhalten das Paket neu unter einer geänderten Adresse.
-- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor - invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et - justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem - ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. -
-- Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel - illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui - blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem - ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat. -
-- The following two color variants are deprecated and will be removed in the next major version of - the styles package: -
-alert-error
- becomes
- alert-danger
- alert-notification
- becomes
- alert-primary
- toast-notification
- becomes
- toast-primary
-
- There already exists a
-
- web component
-
- post-alert
- that will handle dissmissible alerts. HTML alerts should only be used for static alerts.
-
- The markup for alerts differs from the basic bootstrap implementation, to secure - cross-browser compatibility! -
-- While all bootstrap classes related to alerts are still available and functional, there are - some changes to their HTMs-Markup. -
-For Toasts, the bootstrap classes are not yet available!
-- These are not meant to be put on a page directly, they should only be used overlaying the site - content. It should always close the toast when you click on it. -
-A simple primary alert—check it out!
-A simple success alert—check it out!
-- A simple danger alert with - an example link - . Give it a click if you like. -
-A simple warning alert—check it out!
-A simple info alert—check it out!
-Only needs the corresponding "pi"-class added to the alert.
-Icon needs to be extended in sass.
-- Aww yeah, you successfully read this important alert message. This example text is going to - run a bit longer so that you can see how spacing within an alert works with this kind of - content. -
-Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
-Holy guacamole! You should check in on some of those fields below.
-Example with only one line of text.
-- We use cookies to improve your user experience. Depending on - your settings - , we also use cookies for analysis purposes and to provide you with personalized content and - relevant advertising. You can find more information in our - data protection declaration - . -
-- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt - ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo - dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor - sit amet. -
-- Screen reader output is a little better if the close button is disabled (alert messages can still - be closed by clicking on them). Pass the following option to disable the close button: -
-- All these background-color classes automatically use the appropriate font color meeting the - accessibility guidelines. When setting opacity, the contrast ratio cannot be guaranteed and should - be checked individually. -
- -- - -
-- - -
-- - -
-.bg-{{ color }}
-
- -- -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
-
-- -- Simple with q html tag. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere - erat a ante. --
--Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
-
--- Blockquote with a longer text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed - diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea - takimata sanctus est Lorem ipsum dolor sit amet. -
-
-
- Blockquote with a different language. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Integer posuere erat a ante.
-
-
diff --git a/packages/demo/src/app/bootstrap/components/blockquotes/blockquotes-demo/blockquotes-demo.component.ts b/packages/demo/src/app/bootstrap/components/blockquotes/blockquotes-demo/blockquotes-demo.component.ts
deleted file mode 100644
index 82fae132ce..0000000000
--- a/packages/demo/src/app/bootstrap/components/blockquotes/blockquotes-demo/blockquotes-demo.component.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-blockquotes-demo',
- templateUrl: './blockquotes-demo.component.html',
-})
-export class BlockquotesDemoComponent {}
diff --git a/packages/demo/src/app/bootstrap/components/blockquotes/nested-blockquotes-demo/nested-blockquotes-demo.component.html b/packages/demo/src/app/bootstrap/components/blockquotes/nested-blockquotes-demo/nested-blockquotes-demo.component.html
deleted file mode 100644
index 4aaab069ad..0000000000
--- a/packages/demo/src/app/bootstrap/components/blockquotes/nested-blockquotes-demo/nested-blockquotes-demo.component.html
+++ /dev/null
@@ -1,26 +0,0 @@
--- -- Nested quotes, consectetur adipiscing elit. --I'm nested!- Integer posuere erat a ante. -
-
- It also works with a different language! Lorem ipsum dolor sit amet, consectetur adipiscing
- elit.
- I'm nested!
- Integer posuere erat a ante.
-
-
-
---Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.-
Just quotes- -
Just quotes with a different language
-
-- Long quotes, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod - tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. -- -
- Long quotes with nested inside, Lorem ipsum dolor sit amet, -diff --git a/packages/demo/src/app/bootstrap/components/blockquotes/quotes-demo/quotes-demo.component.ts b/packages/demo/src/app/bootstrap/components/blockquotes/quotes-demo/quotes-demo.component.ts deleted file mode 100644 index cfa0fdf64b..0000000000 --- a/packages/demo/src/app/bootstrap/components/blockquotes/quotes-demo/quotes-demo.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-quotes-demo', - templateUrl: './quotes-demo.component.html', -}) -export class QuotesDemoComponent {} diff --git a/packages/demo/src/app/bootstrap/components/bootstrap-components.module.ts b/packages/demo/src/app/bootstrap/components/bootstrap-components.module.ts deleted file mode 100644 index 5614a0d323..0000000000 --- a/packages/demo/src/app/bootstrap/components/bootstrap-components.module.ts +++ /dev/null @@ -1,175 +0,0 @@ -import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { RouterModule } from '@angular/router'; -import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; - -import { HighlightModule } from 'ngx-highlightjs'; -import { HighlightProvider } from '../../common/highlight.provider'; - -import { AccordionDemoComponent } from './accordion/accordion-demo/accordion-demo.component'; -import { AccordionDemoPageComponent } from './accordion/accordion-demo-page/accordion-demo-page.component'; -import { AlertDemoComponent } from './alert/alert-demo/alert-demo.component'; -import { AlertDemoPageComponent } from './alert/alert-demo-page/alert-demo-page.component'; -import { BadgeDemoPageComponent } from './badge/badge-demo-page/badge-demo-page.component'; -import { BadgeDemoComponent } from './badge/badge-demo/badge-demo.component'; -import { BadgeNestedDemoComponent } from './badge/badge-nested-demo/badge-nested-demo.component'; -import { BadgeInteractiveDemoComponent } from './badge/badge-interactive-demo/badge-interactive-demo.component'; -import { ButtonGroupCheckboxDemoComponent } from './button-group/button-group-checkbox-demo/button-group-checkbox-demo.component'; -import { ButtonGroupDemoPageComponent } from './button-group/button-group-demo-page/button-group-demo-page.component'; -import { ButtonGroupRadioDemoComponent } from './button-group/button-group-radio-demo/button-group-radio-demo.component'; -import { ButtonGroupReactiveCheckboxDemoComponent } from './button-group/button-group-reactive-checkbox-demo/button-group-reactive-checkbox-demo.component'; -import { ButtonGroupReactiveRadioDemoComponent } from './button-group/button-group-reactive-radio-demo/button-group-reactive-radio-demo.component'; -import { ButtonsDemoComponent } from './buttons/buttons-demo/buttons-demo.component'; -import { ButtonsDemoPageComponent } from './buttons/buttons-demo-page/buttons-demo-page.component'; -import { BlockquotesDemoComponent } from './blockquotes/blockquotes-demo/blockquotes-demo.component'; -import { NestedBlockquotesDemoComponent } from './blockquotes/nested-blockquotes-demo/nested-blockquotes-demo.component'; -import { BlockquotesDemoPageComponent } from './blockquotes/blockquotes-demo-page/blockquotes-demo-page.component'; -import { FormSwitchDemoPageComponent } from './form-switch/form-switch-demo-page/form-switch-demo-page.component'; -import { FormSwitchDemoComponent } from './form-switch/form-switch-demo/form-switch-demo.component'; -import { TablesDemoComponent } from './tables/tables-demo/tables-demo.component'; -import { TablesDemoPageComponent } from './tables/tables-demo-page/tables-demo-page.component'; -import { TypographyDemoComponent } from './typography/typography-demo/typography-demo.component'; -import { TypographyDemoPageComponent } from './typography/typography-demo-page/typography-demo-page.component'; -import { FormsDemoComponent } from './forms/forms-demo/forms-demo.component'; -import { FormsDemoPageComponent } from './forms/forms-demo-page/forms-demo-page.component'; -import { FormSelectDemoComponent } from './form-select/form-select-demo/form-select-demo.component'; -import { FormSelectDemoPageComponent } from './form-select/form-select-demo-page/form-select-demo-page.component'; -import { FormSelectMultipleDemoComponent } from './form-select-multiple/form-select-multiple-demo/form-select-multiple-demo.component'; -import { FormSelectMultipleDemoPageComponent } from './form-select-multiple/form-select-multiple-demo-page/form-select-multiple-demo-page.component'; -import { FormTextareaDemoComponent } from './form-textarea/form-textarea-demo/form-textarea-demo.component'; -import { FormTextareaDemoPageComponent } from './form-textarea/form-textarea-demo-page/form-textarea-demo-page.component'; -import { FormControlDemoComponent } from './form-control/form-control-demo/form-control-demo.component'; -import { FormControlDemoPageComponent } from './form-control/form-control-demo-page/form-control-demo-page.component'; -import { FormRangeDemoComponent } from './form-range/form-range-demo/form-range-demo.component'; -import { FormRangeCustomDemoModule } from './form-range/form-range-custom-demo/form-range-custom-demo.module'; -import { FormRangeDemoPageComponent } from './form-range/form-range-demo-page/form-range-demo-page.component'; -import { FormRadioDemoComponent } from './form-radio/form-radio-demo/form-radio-demo.component'; -import { FormRadioDemoPageComponent } from './form-radio/form-radio-demo-page/form-radio-demo-page.component'; -import { FormCheckDemoComponent } from './form-check/form-check-demo/form-check-demo.component'; -import { FormCheckDemoPageComponent } from './form-check/form-check-demo-page/form-check-demo-page.component'; -import { BackgroundDemoPageComponent } from './background/background-demo-page/background-demo-page.component'; -import { BackgroundDemoComponent } from './background/background-demo/background-demo.component'; -import { ToastDemoComponent } from './alert/toast-demo/toast-demo.component'; -import { ActionAlertDemoComponent } from './alert/action-alert-demo/action-alert-demo.component'; -import { OverlayNotificationDemoComponent } from './alert/overlay-notification-demo/overlay-notification-demo.component'; -import { DotNotificationDemoComponent } from './alert/dot-notification-demo/dot-notification-demo.component'; -import { ButtonNotificationDemoComponent } from './alert/button-notification-demo/button-notification-demo.component'; -import { FormFileDemoComponent } from './form-file/form-file-demo/form-file-demo.component'; -import { FormFileDemoPageComponent } from './form-file/form-file-demo-page/form-file-demo-page.component'; -import { CardDemoComponent } from './card/card-demo/card-demo.component'; -import { CardDemoPageComponent } from './card/card-demo-page/card-demo-page.component'; -import { ComplexCardDemoComponent } from './card/complex-card-demo/complex-card-demo.component'; -import { PostCardDemoComponent } from './card/post-card-demo/post-card-demo.component'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { PostCommonModule } from 'src/app/common/post-common.module'; -import { QuotesDemoComponent } from './blockquotes/quotes-demo/quotes-demo.component'; -import { DefaultButtonsComponent } from './buttons/buttons-demo/default-buttons/default-buttons.component'; -import { ButtonTagsComponent } from './buttons/buttons-demo/button-tags/button-tags.component'; -import { ButtonSizesComponent } from './buttons/buttons-demo/button-sizes/button-sizes.component'; -import { IconButtonsComponent } from './buttons/buttons-demo/icon-buttons/icon-buttons.component'; -import { IconButtonsTextComponent } from './buttons/buttons-demo/icon-buttons-text/icon-buttons-text.component'; -import { AnimatedButtonsComponent } from './buttons/buttons-demo/animated-buttons/animated-buttons.component'; -import { AccentButtonsComponent } from './buttons/buttons-demo/accent-buttons/accent-buttons.component'; -import { InvertedButtonsComponent } from './buttons/buttons-demo/inverted-buttons/inverted-buttons.component'; -import { ContextualButtonsComponent } from './buttons/buttons-demo/contextual-buttons/contextual-buttons.component'; -import { ButtonDisabledComponent } from './buttons/buttons-demo/button-disabled/button-disabled.component'; - -@NgModule({ - imports: [ - CommonModule, - RouterModule, - NgbModule, - BrowserAnimationsModule, - FormsModule, - ReactiveFormsModule, - PostCommonModule, - HighlightModule, - FormRangeCustomDemoModule, - ], - schemas: [CUSTOM_ELEMENTS_SCHEMA], - declarations: [ - AccordionDemoComponent, - AccordionDemoPageComponent, - AlertDemoComponent, - AlertDemoPageComponent, - BadgeDemoPageComponent, - BadgeDemoComponent, - BadgeNestedDemoComponent, - BadgeInteractiveDemoComponent, - ButtonsDemoComponent, - ButtonsDemoPageComponent, - ButtonGroupCheckboxDemoComponent, - ButtonGroupReactiveCheckboxDemoComponent, - ButtonGroupRadioDemoComponent, - ButtonGroupReactiveRadioDemoComponent, - ButtonGroupDemoPageComponent, - BlockquotesDemoComponent, - NestedBlockquotesDemoComponent, - BlockquotesDemoPageComponent, - TablesDemoComponent, - TablesDemoPageComponent, - TypographyDemoComponent, - TypographyDemoPageComponent, - FormsDemoComponent, - FormsDemoPageComponent, - FormSelectDemoComponent, - FormSelectDemoPageComponent, - FormSelectMultipleDemoComponent, - FormSelectMultipleDemoPageComponent, - FormTextareaDemoComponent, - FormTextareaDemoPageComponent, - FormControlDemoComponent, - FormControlDemoPageComponent, - FormRangeDemoComponent, - FormRangeDemoPageComponent, - FormFileDemoComponent, - FormFileDemoPageComponent, - FormRadioDemoComponent, - FormRadioDemoPageComponent, - FormCheckDemoComponent, - FormCheckDemoPageComponent, - FormSwitchDemoComponent, - FormSwitchDemoPageComponent, - BackgroundDemoPageComponent, - BackgroundDemoComponent, - ToastDemoComponent, - ActionAlertDemoComponent, - OverlayNotificationDemoComponent, - DotNotificationDemoComponent, - ButtonNotificationDemoComponent, - CardDemoComponent, - CardDemoPageComponent, - ComplexCardDemoComponent, - PostCardDemoComponent, - QuotesDemoComponent, - DefaultButtonsComponent, - ButtonTagsComponent, - ButtonSizesComponent, - IconButtonsComponent, - IconButtonsTextComponent, - AnimatedButtonsComponent, - AccentButtonsComponent, - InvertedButtonsComponent, - ContextualButtonsComponent, - ButtonDisabledComponent, - ], - exports: [ - AlertDemoComponent, - AlertDemoPageComponent, - BadgeDemoPageComponent, - BadgeDemoComponent, - ButtonsDemoComponent, - ButtonsDemoPageComponent, - ButtonGroupDemoPageComponent, - BlockquotesDemoComponent, - BlockquotesDemoPageComponent, - TablesDemoComponent, - TablesDemoPageComponent, - TypographyDemoComponent, - TypographyDemoPageComponent, - CardDemoPageComponent, - ], - providers: [HighlightProvider.Config], -}) -export class BootstrapComponentsModule {} diff --git a/packages/demo/src/app/bootstrap/components/button-group/button-group-checkbox-demo/button-group-checkbox-demo.component.html b/packages/demo/src/app/bootstrap/components/button-group/button-group-checkbox-demo/button-group-checkbox-demo.component.html deleted file mode 100644 index 4ca3d8bbfa..0000000000 --- a/packages/demo/src/app/bootstrap/components/button-group/button-group-checkbox-demo/button-group-checkbox-demo.component.html +++ /dev/null @@ -1,38 +0,0 @@ - diff --git a/packages/demo/src/app/bootstrap/components/button-group/button-group-checkbox-demo/button-group-checkbox-demo.component.ts b/packages/demo/src/app/bootstrap/components/button-group/button-group-checkbox-demo/button-group-checkbox-demo.component.ts deleted file mode 100644 index 8ae23d5376..0000000000 --- a/packages/demo/src/app/bootstrap/components/button-group/button-group-checkbox-demo/button-group-checkbox-demo.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-button-group-checkbox-demo', - templateUrl: './button-group-checkbox-demo.component.html', -}) -export class ButtonGroupCheckboxDemoComponent { - checkboxes = { - one: true, - two: false, - three: true, - four: false, - }; -} diff --git a/packages/demo/src/app/bootstrap/components/button-group/button-group-demo-page/button-group-demo-page.component.html b/packages/demo/src/app/bootstrap/components/button-group/button-group-demo-page/button-group-demo-page.component.html deleted file mode 100644 index 320f1e97fe..0000000000 --- a/packages/demo/src/app/bootstrap/components/button-group/button-group-demo-page/button-group-demo-page.component.html +++ /dev/null @@ -1,128 +0,0 @@ -consetetur sadipscing elitr- , sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, voluptua. -
- The only supported button variant for button groups is
- .btn-secondary
- .
-
- Use these buttons in most situations. If you don't want the animation, you can leave out the
- .btn-animated
- class.
-
Disabled controls are an accessibility anti-pattern for various reasons:
-- Try to avoid disabled buttons by displaying an error message for invalid forms or hiding the - control if a user cannot perform a certain action. -
-The animated buttons need a span around the text!
- Icon buttons with text should not have the class
- .btn-icon
- , otherwise the horizontal padding is not correct.
-
- Inverted buttons don't need special classes anymore, just use any of the - background classes - to set the background and you're done for the day. -
-These are only allowed for intranet applications! The link button cannot be animated.
-- - - - -
-- - - - -
diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/icon-buttons-text/icon-buttons-text.component.spec.ts b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/icon-buttons-text/icon-buttons-text.component.spec.ts deleted file mode 100644 index b12343ea76..0000000000 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/icon-buttons-text/icon-buttons-text.component.spec.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { IconButtonsTextComponent } from './icon-buttons-text.component'; - -describe('IconButtonsTextComponent', () => { - let component: IconButtonsTextComponent; - let fixture: ComponentFixtureFor more information on those examples, check the bootstrap doc.
-- To use background-color utilities which span the entire viewport, you need to use a container - nested within a container fluid! Make sure you are not setting up a container around the entire - content. -
-- Some quick example text to build on the card title and make up the bulk of the card's - content. -
- Go somewhere -- Some quick example text to build on the card title and make up the bulk of the card's - content. -
- Card link - Another link -- Some quick example text to build on the card title and make up the bulk of the card's - content. -
-- Some quick example text to build on the card title and make up the bulk of the card's - content. -
-- With supporting text below as a natural lead-in to additional content. -
- Go somewhere -- With supporting text below as a natural lead-in to additional content. -
- Go somewhere ---- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a - ante. -
-
- With supporting text below as a natural lead-in to additional content. -
- Go somewhere -- The bootstrap sizing utilities & contextual classes can be used as shown on the bootstrap - documentation. -
-The nav's (tabs or pills) can't be used inside the card-header with our implementation.
- -- This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. -
-Last updated 3 mins ago
-- This is a wider card with supporting text below as a natural lead-in to additional - content. This content is a little bit longer. -
-Last updated 3 mins ago
-Card groups do not work correctly with images in IE.
-- This is a wider card with supporting text below as a natural lead-in to additional content. - This content is a little bit longer. -
-Last updated 3 mins ago
-- This card has supporting text below as a natural lead-in to additional content. -
-Last updated 3 mins ago
-- This is a wider card with supporting text below as a natural lead-in to additional content. - This card has even longer content than the first to show that equal height action. -
-Last updated 3 mins ago
-- This is a wider card with supporting text below as a natural lead-in to additional content. - This content is a little bit longer. -
-- This card has supporting text below as a natural lead-in to additional content. -
-- This is a wider card with supporting text below as a natural lead-in to additional content. - This card has even longer content than the first to show that equal height action. -
-Card columns can be checked out in the Swiss Post example below.
- -
- Default
- column-count: 2
- , breakpoint md and smaller
- column-count: 1
- . This can be adjusted as necessary.
-
079 000 00 00
- nicht bestätigt -076 111 11 11
-Error message
-Success message (optional)
-Error message
-Success message (optional)
-Error message
-Success message (optional)
-.form-control-rg
- and
- .form-control-md
- are deprecated and will be removed in the next major version.
- Error message
-Success message (optional)
-.form-control-rg
- and
- .form-control-md
- are deprecated and will be removed in the next major version.
- Error message
-Success message (optional)
-Error message
-Success message (optional)
-Error message
-Success message (optional)
-Error message
-Success message (optional)
-Error message
- - - -Success message (optional)
diff --git a/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.component.scss b/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.component.scss deleted file mode 100644 index 5c3d8d744b..0000000000 --- a/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.component.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '@swisspost/design-system-styles/core' as post; - -label { - margin-top: post.$size-regular; -} diff --git a/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.component.ts b/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.component.ts deleted file mode 100644 index 76ab1411d5..0000000000 --- a/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.component.ts +++ /dev/null @@ -1,22 +0,0 @@ -/* - * Copyright 2021 by Swiss Post, Information Technology - */ - -import { Component } from '@angular/core'; -import { UntypedFormControl } from '@angular/forms'; - -@Component({ - selector: 'app-form-range-custom', - templateUrl: 'form-range-custom-demo.component.html', - styleUrls: ['form-range-custom-demo.component.scss'], -}) -export class FormRangeCustomDemoComponent { - templateDrivenValue = 67; - displayedValue = 54; - controlledValue = 28; - reactiveValue: UntypedFormControl; - - constructor() { - this.reactiveValue = new UntypedFormControl('31'); - } -} diff --git a/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.module.ts b/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.module.ts deleted file mode 100644 index 9d86948c6a..0000000000 --- a/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.module.ts +++ /dev/null @@ -1,15 +0,0 @@ -/* - * Copyright 2021 by Swiss Post, Information Technology - */ - -import { NgModule } from '@angular/core'; -import { FormRangeCustomDemoComponent } from './form-range-custom-demo.component'; -import { CommonModule } from '@angular/common'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; - -@NgModule({ - declarations: [FormRangeCustomDemoComponent], - exports: [FormRangeCustomDemoComponent], - imports: [CommonModule, FormsModule, ReactiveFormsModule], -}) -export class FormRangeCustomDemoModule {} diff --git a/packages/demo/src/app/bootstrap/components/form-range/form-range-demo-page/form-range-demo-page.component.html b/packages/demo/src/app/bootstrap/components/form-range/form-range-demo-page/form-range-demo-page.component.html deleted file mode 100644 index ce2aec41d9..0000000000 --- a/packages/demo/src/app/bootstrap/components/form-range/form-range-demo-page/form-range-demo-page.component.html +++ /dev/null @@ -1,24 +0,0 @@ -Range inputs can still work without the directive:
-.form-select-rg
- and
- .form-select-md
- are deprecated and will be removed in the next major version.
- multiple
- attribute
-size
- attribute
-- In Safari on macOS, the size attribute only works as expected from 4+. This is a - - known issue - - . -
-Error message
-Success message (optional)
-.form-select-rg
- and
- .form-select-md
- are deprecated and will be removed in the next major version.
- - Check out our example of - custom select - . -
-Error message
-Success message (optional)
-Error message
-Success message (optional)
-.form-control-rg
- and
- .form-control-md
- are deprecated and will be removed in the next major version.
- Error message
-Success message (optional)
-.form-control-rg
- and
- .form-control-md
- are deprecated and will be removed in the next major version.
- | # | -First | -Last | -Handle | -
|---|---|---|---|
| 1 | -Mark | -Otto | -@mdo | -
| 2 | -Jacob | -Thornton | -@fat | -
| 3 | -Larry the Bird | -||
- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi voluptatibus laborum atque - explicabo consequuntur esse, ab debitis facere obcaecati aperiam suscipit officiis ut amet - quasi optio porro odit maxime placeat. -
-- Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut iste pariatur laboriosam - possimus suscipit, ullam nemo, laborum minima itaque sed obcaecati. Neque officia, non - similique eius repudiandae sequi totam nihil? -
-- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi voluptatibus laborum atque - explicabo consequuntur esse, ab debitis facere obcaecati aperiam suscipit officiis ut amet - quasi optio porro odit maxime placeat. -
-- Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut iste pariatur laboriosam - possimus suscipit, ullam nemo, laborum minima itaque sed obcaecati. Neque officia, non - similique eius repudiandae sequi totam nihil? -
-- Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut iste pariatur laboriosam - possimus suscipit, ullam nemo, laborum minima itaque sed obcaecati. Neque officia, non - similique eius repudiandae sequi totam nihil? -
-Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi voluptatibus laborum atque explicabo consequuntur esse, ab debitis facere obcaecati aperiam suscipit officiis ut amet quasi optio porro odit maxime placeat.
-Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut iste pariatur laboriosam possimus suscipit, ullam nemo, laborum minima itaque sed obcaecati. Neque officia, non similique eius repudiandae sequi totam nihil?
-Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi voluptatibus laborum atque explicabo consequuntur esse, ab debitis facere obcaecati aperiam suscipit officiis ut amet quasi optio porro odit maxime placeat.
-Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut iste pariatur laboriosam possimus suscipit, ullam nemo, laborum minima itaque sed obcaecati. Neque officia, non similique eius repudiandae sequi totam nihil?
-Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut iste pariatur laboriosam possimus suscipit, ullam nemo, laborum minima itaque sed obcaecati. Neque officia, non similique eius repudiandae sequi totam nihil?
`; -} diff --git a/packages/demo/src/app/common/copy-to-clipboard.directive.ts b/packages/demo/src/app/common/copy-to-clipboard.directive.ts deleted file mode 100644 index 01403abd3f..0000000000 --- a/packages/demo/src/app/common/copy-to-clipboard.directive.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { Directive, ElementRef, HostListener } from '@angular/core'; -import { Clipboard } from '@angular/cdk/clipboard'; -import { forkJoin, fromEvent, take, timer } from 'rxjs'; - -@Directive({ - selector: 'code[appCopyToClipboard]', -}) -export class CopyToClipboardDirective { - constructor( - private readonly el: ElementRef- Some ng-bootstrap components contain static English text that does not appear on screen but is - used in aria attributes needed for accessibility. -
- -
- The internationalization of this content is done using the
- @angular/localize
- package. To do this, make sure to add
- import '@angular/localize/init';
- to your
- polyfills.ts
- file, then use the implementation below to enable translations:
-
- This app uses Angular {{ getVersion(angularVersion, 'M') }} and therefore does not support - IE11. Please update your browser. -
-- -
-- The Swiss Post Design System pattern library for a unified and accessible user experience - across the web platform. -
-- @swisspost/design-system-styles: - {{ getVersion(stylesVersion) }} -
-- @angular/cli: - {{ getVersion(angularVersion) }} -
-- bootstrap: - {{ getVersion(bootstrapVersion) }} -
-- @ng-bootstrap/ng-bootstrap: - {{ getVersion(ngBootstrapVersion) }} -
-- ngx-toastr: - {{ getVersion(ngxToastrVersion) }} -
-- Since it is still a beta version it is not yet complete, but in general the new storybook - version gives you a much better overview of the components and their possible states. -
- -- If you have any inquiries about this change, feel free to contact us via our - - Support channel - - in Teams. -
-List of compatible version numbers with external dependencies.
- -| Version | -Bootstrap | -Angular | -Ng-Bootstrap | -
|---|---|---|---|
| 5.x | -5.0 | -14.x | -13.x | -
| 6.2 | -5.2 | -15.x | -14.x | -
| 6.4 | -5.3 | -16.x | -15.x | -
| Version | -Bootstrap | -Angular | -Ng-Bootstrap | -
|---|---|---|---|
| 4.x | -4.6 | -12.x | -9.x | -
- If your project is currently using the @******/common-web-frontend package, start by - migrating to version 5 - . -
-- Use - - https://update.angular.io/ - - to update Angular to version 16 -
-
- Update Bootstrap to version
-
- 5.3.x
-
-
-
- Update Design System style package to version 6:
-
-
- If you are migrating an Angular application, you can take advantage of our migration - schematics. -
-- Changes flagged with the ⚙️ symbol should be automatically migrated with our migration - tool. -
-- The markup of the - stepper - component has been changed in order to be more accessible. -
-
- The
- ngbButton
- and
- ngbButtonLabel
- directives are no longer a part of ng-bootstrap.
-
- The markup and styles have changed and everything now works with CSS Bootstrap
- classes only.
-
- See the - documentation - for more detailed information. -
-- The following Sass variables have been removed because they are not being used - anymore. -
-$table-head-bg- Create a branch and commit all changes to have a clean, reversible starting point. If - you like to upgrade from a Design System version lower than 4.0.0, it might be necessary - to upgrade to v4 first. -
-Uninstall the old styles and the old intranet header packages.
-
-
- If you are migrating an Angular application, you can take advantage of our migration - schematics. -
-- Changes flagged with the ⚙️ symbol should be automatically migrated with our migration - tool. -
- -
- Dropped jQuery dependency
-
-
- Replace all jQuery components with the given one or integrate jQuery by your own
- (not recommended).
-
-
- The - Custom-Select - component has been marked as deprecated. - - For the moment there is only the alternative to use the - Form-Select - component instead. An alternative is being implemented. - -
-
- Some changes cannot be migrated automatically.
-
- Check the list of changes below and apply the transformations manually if your
- application is affected.
-
- See the - documentation - for more detailed information. -
-- See the - documentation - for more detailed information. -
-- See the - documentation - for more detailed information. -
-- See the - documentation - for more detailed information. -
-- See the - documentation - for more detailed information. -
-- See the - documentation - for more detailed information. -
-- See the - documentation - for more detailed information. -
-- See the - documentation - for more detailed information. -
-- See the - documentation - for more detailed information. -
-- The - switch - component has been moved to the - Bootstrap - section since Bootstrap version 5.x now provides such a component. - - If you import this component manually, you need to update to the new file - path. - -
- -- See the - documentation - for more detailed information. -
-- See the - documentation - for more detailed information. -
-- See the - documentation - for more detailed information. -
-- See the - documentation - for more detailed information. -
-- See the - documentation - for more detailed information. -
-- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor - invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et - accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata - sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing - elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed - diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd - gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit - amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et - dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores - et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit - amet. -
-- The Intranet Header is an - Angular - component and as such, only works with Angular projects. -
-| Intranet-header | -Bootstrap | -Angular | -Ng-Bootstrap | -
|---|---|---|---|
| 3.x | -4.x | -14.x | -13.x | -
| 4.x | -5.2 | -15.x | -14.x | -
| 5.x | -5.2 | -16.x | -15.x | -
Install the latest version of the Intranet Header with:
-
- Or specify the version you need:
-
- In your
- app.module.ts
- , add the header to your imports:
-
- On your layout page; create a container (e.g.
- <div>
- or
- <section>
- - or use the
- body
- container) and apply the following css classes:
-
layout-containerheader-big
- - if you are using the top with the navbar
- header-small
- - if you are using the top without the navbar
- with-searchbar
- - if you are using the top with the searchbar
-
- Inside, add the
- post-intranet-header
- component, with the applicable options (see below).
-
- If you are using the navbar, add the list-items for the navigation directly inside the tag. - (see example "With top navigation, without sidenav") -
-
- If you are using a side-nav, adjust your markup accordingly. (See examples "Without top
- navigation, with sidenav" and "Intranet-Header "postweb"").
-
- Make sure that you have the
- openedMenu
- Property in your angular app and that you apply the same classes to the markup as shown in the
- mentioned examples.
-
| Property | -Type | -Default | -Description | -
|---|---|---|---|
- additionalInfo
- |
-
- string
- |
-
- ''
- |
-
- Additional information about the user, shown as item in the user-dropdown.
- - By default, the item will not be rendered. - |
-
- currentUserId
- |
-
- string
- |
-
- ''
- |
-
- The user ID of the currently logged on user.
- - Used to show the users profile image. - - The default value of - 'user'
- is used to show the fallback-image.
- |
-
- displayName
- |
-
- string
- |
-
- ''
- |
-
- The name of the logged on user, shown as item in the user-dropdown.
- - By default, the item will not be rendered. - |
-
- hasNavbar
- |
-
- boolean
- |
-
- true
- |
- Whether the navigation is rendered or not. | -
- languages
- |
-
- string
- |
-
- 'de,fr,it,en'
- |
-
- A comma-separated string that specifies the languages available to the language-selector
- shown as items in the user-dropdown.
- - Possible language values are: - de
- ,
- fr
- ,
- it
- and
- en
- |
-
- logoUrl
- |
-
- string
- |
-
- ''
- |
-
- The url which is used for the
- href
- attribute on the logo.
- |
-
- optionDropdownContent
- |
- TemplateRef<any> |
- null |
-
- Represents an embedded angular template that can be used to instantiate embedded views.
- - Shown as item in the user-dropdown. - - By default, the item will not be rendered. - |
-
- optionHeaderContent
- |
- TemplateRef<any> |
- null |
-
- Represents an embedded angular template that can be used to instantiate embedded views.
- - Shown as custom content before the user-dropdown. - - By default, the item will not be rendered. - |
-
- searchUrl
- |
-
- string
- |
-
- ''
- |
-
- Used as the form
- action
- attribute on the search form.
- - If - showIntranetSearch
- is set to
- true
- the
- searchUrl
- must be set as well.
- |
-
- showIntranetSearch
- |
- boolean |
- false |
- Whether the search is rendered or not. | -
- siteTitle
- |
-
- string
- |
-
- ''
- |
- The website/application name, shown next to the Logo. | -
- Add
-
- <main role="main"> <!-- Site Content / Router-Outlet --> </main>
-
- beneath.
-
Top navigation links must be maintained by the application!
-
- {{ angularVersion.format('x.x') }}
- 
- {{ bootstrapVersion.format('x.x') }}
- 
- {{ ngBootstrapVersion.format('x.x') }}
- - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad - squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck - quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it - squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, - craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur - butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth - nesciunt you probably haven't heard of them accusamus labore sustainable VHS. -
- -- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad - squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck - quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it - squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, - craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur - butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth - nesciunt you probably haven't heard of them accusamus labore sustainable VHS. -
-- The following two color variants are deprecated and will be removed in the next major version of - the styles package: -
-alert-error
- becomes
- alert-danger
- alert-notification
- becomes
- alert-primary
- - For more information about available alerts/notifications, check the - - Alert/Notification page under the "Bootstrap" Menu - - . -
-{{ alert.message }}
-- -
diff --git a/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo/alert-demo.component.scss b/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo/alert-demo.component.scss deleted file mode 100644 index 26d483e06f..0000000000 --- a/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo/alert-demo.component.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '@swisspost/design-system-styles/core' as post; - -.pi-2063-white { - @include post.pi(2063, 'white'); -} diff --git a/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo/alert-demo.component.ts b/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo/alert-demo.component.ts deleted file mode 100644 index 6678bf5550..0000000000 --- a/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo/alert-demo.component.ts +++ /dev/null @@ -1,101 +0,0 @@ -import { Component, Input, Output, EventEmitter } from '@angular/core'; - -@Component({ - selector: 'app-ngb-alert-demo', - templateUrl: './alert-demo.component.html', - styleUrls: ['./alert-demo.component.scss'], -}) -export class NgbAlertDemoComponent { - @Input() - public alerts: Array
- Nulla vitae elit libero, a pharetra augue mollis interdum.
- -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- -
- Praesent commodo cursus magna, vel scelerisque nisl consectetur.
- -
- Nulla vitae elit libero, a pharetra augue mollis interdum.
- -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- -
- Praesent commodo cursus magna, vel scelerisque nisl consectetur.
- -- -
-
- The
- .pi-calendar
- class previously used to display the calendar icon in the datepicker button has been deprecated
- in favor of the
- .pi-3203
- class which shows the same icon.
-
Choose a language:
- - - -- If you use internationalization, check out the custom - datepicker internationalization service - below -
-- The datepicker requires additional translations for months and days of the week. These can be - configured using the service below: -
- -Valid feedback
-Invalid feedback
-Valid feedback
-Invalid feedback
-Hello, World!
-- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempor nisi quis velit efficitur - scelerisque. In convallis dui non molestie vestibulum. Maecenas tempor lorem sit amet augue - tincidunt, non ornare diam semper. Curabitur tempus feugiat orci vitae suscipit. Nam - sollicitudin varius leo, sed ultrices nisl suscipit eget. Quisque libero ipsum, blandit in - vestibulum sed, ultricies maximus purus. Cras tempus lorem leo, venenatis varius dui pharetra - sed. Proin et dignissim nunc. Cras et tristique ante. Integer faucibus magna felis, eget - viverra turpis aliquet ut. Etiam dictum eleifend magna. Praesent hendrerit commodo massa, quis - suscipit libero convallis a. -
-- Fusce maximus tempor semper. Donec gravida volutpat odio, in iaculis leo vehicula nec. - Praesent vel dui et ligula cursus efficitur. Duis vitae diam nibh. Donec convallis, nisi at - lobortis placerat, risus diam egestas lorem, et malesuada libero urna mattis orci. Integer - bibendum odio laoreet convallis pretium. Nunc tortor lorem, eleifend at ante quis, molestie - pellentesque augue. Aenean fringilla risus est, eu posuere velit condimentum sed. Ut in felis - id sapien dictum scelerisque. Curabitur scelerisque velit pulvinar magna bibendum dictum. Nunc - fringilla leo semper dolor consequat rhoncus. Vivamus sit amet elit et enim finibus semper. - Sed et lobortis mi, sed gravida nisl. Donec et risus laoreet, condimentum orci eget, vehicula - arcu. Pellentesque in semper purus, et porta urna. -
-- Fusce ultrices viverra eros a convallis. Cras et tempor mauris. Fusce tincidunt libero sit - amet odio euismod, non placerat massa semper. Vivamus aliquet dolor eget justo posuere luctus. - Aliquam id risus ante. Nulla urna felis, accumsan sed purus nec, dignissim scelerisque nisl. - Aliquam at magna quis dolor mollis vestibulum non sit amet augue. Sed velit justo, - pellentesque sit amet blandit sed, gravida at ante. Nulla sed mi erat. Proin at orci eu justo - dapibus dapibus. Morbi ac mattis tellus. Phasellus fringilla elementum magna at finibus. - Curabitur tempor consequat varius. Ut sit amet orci arcu. Curabitur dignissim libero ut - bibendum venenatis. -
-- Morbi consequat rhoncus risus, in placerat diam mattis vitae. Ut vitae elementum nisl. Nullam - sed ullamcorper nulla. Morbi ut justo odio. Suspendisse congue lectus et nisl iaculis, - sagittis consequat leo tempus. Morbi a nisl dignissim, sollicitudin nisi vitae, convallis - diam. Pellentesque nec cursus risus. Sed vestibulum augue vel nunc eleifend pulvinar. Aenean - ut lobortis enim. Praesent lorem diam, iaculis vitae tellus ac, luctus hendrerit ex. Quisque - vestibulum nibh ac euismod lacinia. -
-- Donec suscipit congue metus sed tristique. Nunc sagittis auctor ex vitae tristique. Integer - lectus magna, pretium non purus eget, fringilla vulputate dolor. Lorem ipsum dolor sit amet, - consectetur adipiscing elit. Phasellus mollis nunc nec velit dignissim, eu faucibus metus - lobortis. Fusce lacus nibh, varius ultrices dignissim nec, gravida vitae enim. In blandit - pretium ligula. Nulla imperdiet malesuada dui in fermentum. Mauris nisi augue, luctus nec - ullamcorper ut, consectetur nec dolor. Aliquam at diam dolor. -
-
- To manually remove the focus styles on close button in modal, you will need to add
- ngbAutofocus tabindex="-1"
- to the title with class modal-title. For advanced focus management (focus the [X] button, focus
- the [OK] button), please refer to
-
- https://ng-bootstrap.github.io/#/components/modal/examples#focus
-
- .
-
When the modal is too long for the viewport, its body becomes scrollable.
- -Current page: {{ page }}
diff --git a/packages/demo/src/app/ng-bootstrap/components/pagination/pagination-demo/pagination-demo.component.ts b/packages/demo/src/app/ng-bootstrap/components/pagination/pagination-demo/pagination-demo.component.ts
deleted file mode 100644
index fd96dc720f..0000000000
--- a/packages/demo/src/app/ng-bootstrap/components/pagination/pagination-demo/pagination-demo.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-ngb-pagination-demo',
- templateUrl: './pagination-demo.component.html',
-})
-export class NgbPaginationDemoComponent {
- page = 4;
-}
diff --git a/packages/demo/src/app/ng-bootstrap/components/popover/popover-demo-page/popover-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/popover/popover-demo-page/popover-demo-page.component.html
deleted file mode 100644
index ac3b480710..0000000000
--- a/packages/demo/src/app/ng-bootstrap/components/popover/popover-demo-page/popover-demo-page.component.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
- The progress bar also requires an
- ariaLabel
- attribute which provides context to the current progress. See the example above for how to use
- it.
-
Rate: {{currentRate}}
-
- The tabs pattern is designed to be used outside of a
- .container
- context to spread the background and lines to the edge of the viewport. However, the tabs
- can be used in another context as well (see at the bottom). In this case, notice the missing
- .container
- classes in the template.
-
- Notice the three
- bg-*
- classes to see how to fine-tune the background colors.
-
.container
- context
- 
- - Inside Job - is a 2010 American - documentary film - , directed by - - Charles Ferguson - - , about the - - late-2000s financial crisis - - . Ferguson, who began researching in 2008, - [3] - says the film is about "the systemic corruption of the United States by the - - financial services - - industry and the consequences of that systemic corruption". - [4] - In five parts, the film explores how changes in the policy environment and banking - practices helped create the financial crisis. -
-- Inside Job - was acclaimed by film critics, who praised its pacing, research and exposition of - complex material. It screened at the - - 2010 Cannes Film Festival - - in May and won the 2010 - - Academy Award for Best Documentary Feature - - . -
-
- - Inside Out - is a 2015 American - - computer-animated - - comedy film - produced by - - Pixar Animation Studios - - and released by - - Walt Disney Pictures - - . The film was directed by - Pete Docter - and co-directed by - Ronnie del Carmen - , with a screenplay written by Docter, - Meg LeFauve - , and - Josh Cooley - , adapted from a story by Docter and del Carmen. The film is set in the mind of a - young girl named Riley ( - Kaitlyn Dias - ), where five personified - emotions - —Joy ( - Amy Poehler - ), Sadness ( - Phyllis Smith - ), Anger ( - Lewis Black - ), Fear ( - Bill Hader - ), and Disgust ( - Mindy Kaling - )—try to lead her through life as she and her parents ( - Diane Lane - and - Kyle MacLachlan - ) adjust to their new surroundings after moving from - Minnesota - to - San Francisco - . -
-- Docter first began developing - Inside Out - in 2010, after noticing changes in his daughter's personality as she grew older. - The film's producers consulted numerous - psychologists - including - Dacher Keltner - from the - - University of California, Berkeley - - , - - [5] - - who helped revise the story by emphasizing the - - neuropsychological - - findings that human - emotions - affect - - interpersonal relationships - - and can be significantly moderated by them. - - [6] - -
-- After premiering at the - - 68th Cannes Film Festival - - on May 18, 2015, - Inside Out - was released in North America on June 19, 2015, accompanied by the short film - Lava - . The film was praised for its concept, screenplay, subject matter, - Michael Giacchino - 's musical score, and the vocal performances (particularly those of Poehler, - Smith, Black, and - Richard Kind - ). The film grossed $90.4 million in its first weekend, making it the highest - opening for an original title at the time, - - [7] - - accumulating over $857 million in worldwide box office revenue in 2015, making it - the - - seventh-highest-grossing film of 2015 - - . The film received several awards, including a - - BAFTA Award - - , - - Golden Globe Award - - , - - Critics' Choice Award - - , - - Annie Award - - , - - Satellite Award - - , and - - Academy Award for Best Animated Feature - - . -
-
- Notice the
- .container
- around all the tabs and the missing
- .container
- classes on the tabs itself.
-
- - Mantis shrimps - , or - stomatopods - , are - - carnivorous - - - marine - - - crustaceans - - of the - - order - - Stomatopoda - , - - branching - - from other members of the class - - Malacostraca - - around 340 million years ago. - [2] - Mantis shrimps typically grow to around 10 cm (3.9 in) in length, while a - few can reach up to 38 cm (15 in). - - [3] - - The largest mantis shrimp ever caught had a length of 46 cm (18 in); it - was caught in the - - Indian River - - near - - Fort Pierce, Florida - - , in the - - United States - - . - - [4] - - A mantis shrimp's - carapace - (the bony, thick shell that covers crustaceans and some other species) covers only - the rear part of the head and the first four segments of the - thorax - . Varieties range in color from shades of brown to vivid colors, with more than 450 - species of mantis shrimps being known. They are among the most important - - predators - - in many shallow, - tropical - and - - subtropical - - marine - habitats - . However, despite being common, they are poorly understood, as many species spend - most of their lives tucked away in burrows and holes. - [5] -
-- Called "sea locusts" by - ancient - - Assyrians - - , "prawn killers" in Australia, - [6] - and now sometimes referred to as "thumb splitters" — because of the animal's ability - to inflict painful wounds if handled incautiously - [7] - — mantis shrimps have powerful - raptorials - that are used to attack and kill prey either by spearing, stunning, or - - dismembering - - . Some mantis shrimp species have specialised calcified "clubs" that can strike with - great power, while others have sharp forelimbs used to seize the prey (hence the - term "mantis" in its - - common name - - ). -
-
- - Tardigrades - ( - - - - / - - ˈ - t - ɑːr - d - ɪ - ɡ - r - eɪ - d - - / - - - - ), known colloquially as - water bears - or - moss piglets - , - - [1] - - - [2] - - [3] - [4] - are a - phylum - of eight-legged - - segmented - - - micro-animals - - . - - [1] - - [5] - They were first described by the German zoologist - - Johann August Ephraim Goeze - - in 1773, who called them - little water bears - . In 1777, the Italian biologist - - Lazzaro Spallanzani - - named them - Tardigrada - - - - / - - t - ɑːr - ˈ - d - ɪ - ɡ - r - ə - d - ə - - / - - - - , which means "slow steppers". - - [6] - -
-- They have been found everywhere, from mountaintops to the - deep sea - and - - mud volcanoes - - , - [7] - and from - - tropical rainforests - - to the - Antarctic - . - [8] - Tardigrades are among the most resilient animals known, - - [9] - - - [10] - - with individual species able to survive extreme conditions—such as exposure to - extreme temperatures, extreme - - pressures - - (both high and low), air deprivation, - radiation - , - - dehydration - - , and - starvation - —that would quickly kill most other known forms of - life - . - [11] - Tardigrades have survived exposure to - - outer space - - . - [12] - [13] - There are about 1,300 known species - [14] - in the - phylum - Tardigrada, a part of the superphylum - Ecdysozoa - consisting of animals that grow by - ecdysis - such as - arthropods - and - nematodes - . The earliest known true members of the group are known from Cretaceous amber in - North America, but are essentially modern forms, and therefore likely have a - significantly earlier origin, as they diverged from their closest relatives in the - Cambrian - , over 500 million years ago. -
-- Tardigrades are usually about 0.5 mm (0.02 in) long when fully grown. - - [1] - - They are short and plump, with four pairs of legs, each ending in claws (usually - four to eight) or suction disks. - - [1] - - - [15] - - Tardigrades are prevalent in - mosses - and - lichens - and feed on plant cells, algae, and small invertebrates. When collected, they may be - viewed under a low-power - microscope - , making them accessible to students and amateur scientists. - [16] -
-
- - Turritopsis dohrnii - , also known as the - immortal jellyfish - , is a - species - of small, - - biologically immortal - - jellyfish - [2] - - [3] - - found worldwide in temperate to tropic waters. It is one of the few known cases of - animals - capable of reverting completely to a sexually immature, colonial stage after having - reached sexual maturity as a solitary individual. Others include the jellyfish - - - Laodicea undulata - - - - [4] - and species of the genus - - - Aurelia - - - . - [5] -
-- Like most other - - hydrozoans - - , - T. dohrnii - begin their life as tiny, free-swimming - larvae - known as - planulae - . As a planula settles down, it gives rise to a colony of - - polyps - - that are attached to the - sea-floor - . All the polyps and jellyfish arising from a single planula are genetically - identical clones. - [6] - The polyps form into an extensively branched form, which is not commonly seen in - most jellyfish. Jellyfish, also known as medusae, then bud off these polyps and - continue their life in a free-swimming form, eventually becoming sexually mature. - When sexually mature, they have been known to prey on other jellyfish species at a - rapid pace. If a - T. dohrnii - jellyfish is exposed to environmental stress, physical assault, or is sick or old, - it can revert to the polyp stage, forming a new polyp colony. - - [7] - - It does this through the cell development process of - - transdifferentiation - - , which alters the - - differentiated state of the cells - - and transforms them into new types of cells. -
-- Theoretically, this process can go on indefinitely, effectively rendering the - jellyfish biologically immortal, - - [3] - - - [8] - - although in practice individuals can still die. In nature, most - Turritopsis - dohrnii - are likely to succumb to predation or disease in the medusa stage without reverting - to the polyp form. - - [9] - -
-- The capability of biological immortality with no maximum lifespan makes - T. dohrnii - an important target of basic biological, - aging - and - - pharmaceutical - - research. - - [10] - -
-
- - The - platypus - ( - Ornithorhynchus anatinus - ), sometimes referred to as the - duck-billed platypus - , is a - - semiaquatic - - egg-laying - mammal - - endemic - - to - - eastern Australia - - , including - Tasmania - . The platypus is the sole living representative of its - - family - - ( - - Ornithorhynchidae - - ) and - genus - ( - Ornithorhynchus - ), though a number of - - related species - - appear in the fossil record. -
-- Together with the four species of - echidna - , it is one of the five - - extant - - species of - monotremes - , the only mammals that lay - - eggs - - instead of giving birth to live young. Like other monotremes, it senses prey through - - electrolocation - - . It is one of the few species of - - venomous mammals - - , as the male platypus has a - - spur - - on the hind foot that delivers a - - venom - - capable of causing severe pain to humans. The unusual appearance of this egg-laying, - duck - -billed, - beaver - -tailed, - otter - -footed mammal baffled European naturalists when they first encountered it, and the - first scientists to examine a preserved platypus body (in 1799) judged it a fake, - made of several animals sewn together. -
-- The unique features of the platypus make it an important subject in the study of - - evolutionary biology - - , and a recognisable and iconic symbol of - Australia - . It is culturally significant to several - - Aboriginal peoples of Australia - - , who also used to hunt the animal for food. It has appeared as a mascot at national - events and features on the - - reverse - - of the - - Australian twenty-cent coin - - , and the platypus is the animal emblem of the state of - - New South Wales - - . Until the early 20th century humans hunted the platypus for its fur, but it is now - protected throughout its range. Although - - captive-breeding - - programs have had only limited success, and the platypus is vulnerable to the - effects of pollution, it is not under any immediate threat. -
-- As of 2020 - - - [update] - - - , the platypus is a legally - - protected species - - in all states where it occurs, but it only listed as an - - endangered species - - in - - South Australia - - . The species is classified as a - - near-threatened species - - by the - - IUCN - - , but a November 2020 report has recommended that it is upgraded to - - threatened species - - under the federal - - - EPBC Act - - - , due to habitat destruction and declining numbers in all states. -
-Selected time: {{time | json}}
-
-- By default, the timepicker component only supports 3 different sizes: - sm - , - md - , and - lg - . -
-
- To use one of these predefined sizes, simply set the
- [size]
- entry as defined in the
-
- component api
-
- .
-
- To use the timpicker in regular size, remove the
- [size]
- input and use the class
- .timepicker-rg
- instead.
-
The time is right.
-Time is too early.
-Time is too late.
-This field is required.
-
- Using
- placement="[position] auto"
- allows the tooltip to be displayed in another location if there is no room for the initial
- placement location.
-
Custom HTML Tooltip on top
-- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus nisi iusto cupiditate - optio perferendis iure ipsa vitae assumenda! Consequuntur, pariatur necessitatibus nesciunt - architecto quidem a unde rerum vero praesentium cum. -
- -string[]
-debounceTime
- operator
- Model: {{ model | json }}
diff --git a/packages/demo/src/app/ng-bootstrap/components/typeahead/typeahead-demo/typeahead-demo.component.ts b/packages/demo/src/app/ng-bootstrap/components/typeahead/typeahead-demo/typeahead-demo.component.ts
deleted file mode 100644
index 03f345011c..0000000000
--- a/packages/demo/src/app/ng-bootstrap/components/typeahead/typeahead-demo/typeahead-demo.component.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Component } from '@angular/core';
-import { Observable } from 'rxjs/internal/Observable';
-import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
-
-const states = [
- 'Alabama',
- 'Alaska',
- 'American Samoa',
- 'Arizona',
- 'Arkansas',
- 'California',
- 'Colorado',
- 'Connecticut',
- 'Delaware',
- 'District Of Columbia',
- 'Federated States Of Micronesia',
- 'Florida',
- 'Georgia',
- 'Guam',
- 'Hawaii',
- 'Idaho',
- 'Illinois',
- 'Indiana',
- 'Iowa',
- 'Kansas',
- 'Kentucky',
- 'Louisiana',
- 'Maine',
- 'Marshall Islands',
- 'Maryland',
- 'Massachusetts',
- 'Michigan',
- 'Minnesota',
- 'Mississippi',
- 'Missouri',
- 'Montana',
- 'Nebraska',
- 'Nevada',
- 'New Hampshire',
- 'New Jersey',
- 'New Mexico',
- 'New York',
- 'North Carolina',
- 'North Dakota',
- 'Northern Mariana Islands',
- 'Ohio',
- 'Oklahoma',
- 'Oregon',
- 'Palau',
- 'Pennsylvania',
- 'Puerto Rico',
- 'Rhode Island',
- 'South Carolina',
- 'South Dakota',
- 'Tennessee',
- 'Texas',
- 'Utah',
- 'Vermont',
- 'Virgin Islands',
- 'Virginia',
- 'Washington',
- 'West Virginia',
- 'Wisconsin',
- 'Wyoming',
-];
-
-@Component({
- selector: 'app-ngb-typeahead-demo',
- templateUrl: './typeahead-demo.component.html',
-})
-export class NgbTypeaheadDemoComponent {
- public model: any;
-
- search = (text$: ObservableIt will be removed in the next major version.
-custom-select-with-floating-label.component.html
-custom-select.component.html
-custom-select.component.ts
-- The datatable offered by the ngx-datatable package does not meet the required accessibility - standards, therefore it should be avoided in Internet applications. -
-datatable-demo.component.html
-datatable-demo.component.ts
-datatable-paginated-demo.component.html
-datatable-editable-demo.component.html
-datatable-loading-demo.component.html
-- All things need to be contained inside a container. The container limits the size of the content - and centers it on the page. -
-- For accessibility reasons, form fields should always have a label linked via the id/for - attributes. Screen-readers will announce the label when the input gets the focus. If there is no - label, screen-reader users have no idea what the input should be, even if there is other text - next to the field. -
-- To add space between input, you can use - margin utilities - . -
-- If you want a form field to span the whole available width, you don't need a row nor a col. You - only need those, if you want to place two things next to each other. -
-
- Simply use
- .row
- and
- .col
- to have the width distributed evenly between all inputs. To make it responsive, you can add
- .row-cols-*
- classes to the row (
- Bootstrap Row Columns
- ).
-
- For finer adjustment, you can also use the
- .col-*
- classes (
-
- Bootstrap Columns
-
- ) on your columns. For example for a 2/1 ratio, given that a row has twelve columns in total,
- just add
- .col-8
- and
- .col-4
- to you two columns respectively.
-
- Some fields may not fit into the twelve row schema, they need a custom width. The PLZ field may
- be one of those cases. Two
- .col
- next to each other will have equal width. If one of the cols has the
- .col-auto
- class, this col is sized based on it's content. The other row is stretched to the container
- width. With this setup, we can define a max-width on the input field to shrink it.
-
- Buttons, often at the end of the form are right aligned. We can achieve this with the classes
- d-flex flex-row-reverse
- . This will ensure that the primary button is focused first (because of the markup order) but is
- still aligned to the right. To get some margin between the button we can use the
- .gap-8
- class. Note that for the buttons, we don't need any row/col structure. Read more about gap
- classes at
- Bootstrap Gaps
- .
-
- For internet applications, bigger input fields with floating labels are the Post way of creating
- forms. The particularity of these fields, is that the
- <label>
- and
- <input>
- elements are inverted and wrapped in a
- .form-floating
- div. In addition, the input field needs a placeholder attribute, preferably equal to a single
- space.
-
- Validation messages are placed directly after the
- <input>
- (or after the
- <label>
- in the case of floating label). Showing and hiding of these messages is typically controlled by
- adding and removing validation classes on the input:
-
.invalid-feedback/.valid-feedback
- ,
- .was-validated
- . With this class you can manage when to display errors. Usually, errors should not be
- shown on untouched fields.
- .is-invalid/.is-valid
- ,
-
- Hints can help users better understand the type of information they need to provide. Hints, like
- validation messages, must be placed after the
- <input>
- (or
- <label>
- in the case of floating label) and after validation messages if there are some.
-
- Hints use the class
- .form-text
- .
-
- To enable screen-readers to detect and read your hints, link the
- <input>
- with the aria-labelledby attribute to the hint via id.
-
- The usage of icons as base64 encoded background images in CSS will soon be deprecated. You can
- switch to the brand new icon component
- post-icon
- today. Go ahead and have a look at the
-
- brand new icons documentation
-
- featuring a search and over 800 icons.
-
- To avoid an unnecessarily big css file, all icons except the default black ones have to be - explicitly declared in your scss file. -
-<i class="pi pi-1000" aria-hidden="true"></i>
- // No additional SASS necessary
- <i class="pi pi-1000-warning" aria-hidden="true"></i>
-
- {{ cwfImport }}
-
- .pi-1000-warning {
-
- @include post.pi(1000, "warning");
-
- }
-
- <i class="pi pi-heart" aria-hidden="true"></i>
-
- {{ cwfImport }}
-
- .pi-heart {
-
- @include post.pi("2063", #FF0080);
-
- }
-
- <i class="pi pi-heart-coral pi-border" aria-hidden="true"></i>
-
- @use "sass:map";
-
- {{ cwfImport }}
-
- .pi-heart-coral {
-
- @include post.pi(2063, map.get(post.$background-colors, "coral"));
-
- }
-
- - Available placeholders for: Primary, White, Info, Danger, Success (Note: Named icons can not be - colored.) -
-
- <i class="pi" [class]="'pi-1000-' + color" aria-hidden="true"></i>
-
-
- {{ cwfImport }}
-
- .pi-1000-{{ color }} { @include post.pi(1000, "{{ color }}"); }
-
-
- {{ cwfImport }}
-
- @each $color, $value in post.$contextual-colors {
-
- .pi-1000-#{$color} {
-
- @include post.pi(1000, $color);
-
- }
-
- }
-
-
- @use "sass:map";
- {{ cwfImport }}
-
- @each $name, $path in post.$svg-icon-map {
-
- .pi-#{$name} {
-
- @include post.pi($name, map.get(post.$accent-colors, "nightblue"));
-
- }
-
- }
-
- <i class="pi pi-border pi-1000"></i>
- <i class="pi pi-small pi-1000"></i>
- <i class="pi pi-2x pi-1000"></i>
- <i class="pi pi-3x pi-1000"></i>
- <i class="pi pi-4x pi-1000" aria-hidden="true"></i>
- - If you need the digital post logo, please discuss your need with - CorpDesign, K21 [E-Mail Request] - . -
-pi-{{ iconName }}
- pi-{{ nr }}
- Bitte prüfen Sie Ihre Angaben
-Einige Angaben zur Rückseite fehlen oder sind unvollständig.
-Wenn Sie bestätigen wir die WebStamp möglicherweise unvollständig erstellt.
-- Some javascript is needed to sync the height between the "table-cells" while still keep them - mobile-friendly and semantic. -
-140 x 90 mm bis B5 (250 x 176 mm)
-140 x 90 mm bis B5 (250 x 176 mm)
-140 x 90 mm bis B5 (250 x 176 mm)
-- -
-- -
-140 x 90 mm bis B5 (250 x 176 mm)
-140 x 90 mm bis B5 (250 x 176 mm)
-140 x 90 mm bis B5 (250 x 176 mm)
-- -
-- -
-- The square below has a "Big" padding from the large (lg) breakpoint and a "Regular" padding - below. -
-- The square below has a "Large" responsive padding, which means the padding size automatically - changes based on the breakpoint but remains visually consistent. -
-Resize the browser window to see changes.
diff --git a/packages/demo/src/app/post-sample/components/sizing/responsive-sizing-demo/responsive-sizing-demo.component.ts b/packages/demo/src/app/post-sample/components/sizing/responsive-sizing-demo/responsive-sizing-demo.component.ts deleted file mode 100644 index 6b46043ea2..0000000000 --- a/packages/demo/src/app/post-sample/components/sizing/responsive-sizing-demo/responsive-sizing-demo.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -/* - * Copyright 2021 by Swiss Post, Information Technology - */ - -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-responsive-sizing-demo', - templateUrl: 'responsive-sizing-demo.component.html', -}) -export class ResponsiveSizingDemoComponent { - get highlightManualDemo(): string { - return ``; - } - - get highlightAutomaticDemo(): string { - return ``; - } -} diff --git a/packages/demo/src/app/post-sample/components/sizing/sizing-demo-page/sizing-demo-page-class-display.pipe.ts b/packages/demo/src/app/post-sample/components/sizing/sizing-demo-page/sizing-demo-page-class-display.pipe.ts deleted file mode 100644 index 3801195f08..0000000000 --- a/packages/demo/src/app/post-sample/components/sizing/sizing-demo-page/sizing-demo-page-class-display.pipe.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Pipe, PipeTransform } from '@angular/core'; - -@Pipe({ name: 'replaceHyphen' }) -export class ReplaceHyphenPipe implements PipeTransform { - transform(value: string): string { - return value.replace('-', ' '); - } -} -@Pipe({ name: 'removeSpaces' }) -export class RemoveSpacesPipe implements PipeTransform { - transform(value: string): string { - return value.replace(' ', ''); - } -} diff --git a/packages/demo/src/app/post-sample/components/sizing/sizing-demo-page/sizing-demo-page.component.html b/packages/demo/src/app/post-sample/components/sizing/sizing-demo-page/sizing-demo-page.component.html deleted file mode 100644 index ee0cf53065..0000000000 --- a/packages/demo/src/app/post-sample/components/sizing/sizing-demo-page/sizing-demo-page.component.html +++ /dev/null @@ -1,209 +0,0 @@ -- The current set of the post-specific sizing variables is deprecated in favour of a new naming system that is - consistent with the Design. For further information, please read the - discussion on sizing variables on GitHub - and have a look at the - implementation in Figma. -
-| Size name | -Size name in classes | -Size in pixels (approx.) | -Size in rem | -Effective size used in css | -Bootstrap size equivalent | -
|---|---|---|---|---|---|
| {{ size.name | replaceHyphen | titlecase | removeSpaces }} | -{{ '*-' + size.name }} | -{{ size.size_pixel }} px | -{{ size.size_rem }} rem | -- {{ - size.implemented === postSizeImplementationPixel - ? size.size_pixel + 'px' - : size.size_rem + 'rem' - }} - | -{{ size.equivalent > 0 ? '*-' + size.equivalent : 'none' }} | -
- Height and width can be set using - h-* - and - w-* - prefixes, max-height and max-width can be set using prefixes - mh-* - and - mw-* - . -
- -- Bootstrap offers sizing classes with the following number suffixes: - *-25 - , - *-50 - , - *-75 - , - *-100 - . They allow you to set a height / width as a percentage (see "Bootstrap Sizing" link above for - reference). -
-- Post sizes can be used in the same way: by adding the name of the desired size to a prefix (to - find out which size name to use, see the "Size name in classes" column in the reference table - above or use the demo below). -
- -- Padding and margin can be set using - p* - and - m* - prefixes. -
-- You can apply the desired margin / padding all around an element using the prefix alone ( - m-* - / - p-* - ), or you can specify a position (ex: - pt- - , - pb- - , - pe- - , - ps- - respectively for a padding at top, bottom, right and left). You can also set a margin/padding - along the horizontal axis (i.e. right and left) using - px- - / - mx- - or along the vertical axis (i.e. top and bottom) using - py- - / - my- - . -
-- Bootstrap offers spacing classes with suffixes going from 0 to 5 ( - *-0 - , - *-1 - , - *-2 - , ...) (see "Bootstrap Spacing" link above for reference). -
-- Post sizes can be used in the same way: by adding the name of the desired size to a prefix (to - find out which size name to use, see the "Size name in classes" column in the reference table - above or use the demo below). -
- -By default, the above classes apply to all breakpoints.
-- If you need to change the size or spacing of an element based on the breakpoint, you should - mention it in the class name using one of the following infixes: - *-sm-* - , - *-rg-* - , - *-md-* - , - *-lg-* - , - *-xl-* - , - *-xxl-* - . When a breakpoint is specified, the size applies to that breakpoint and to all those that are - larger. -
-- Another way to define a responsive size is to use the - *-r - suffix. It allows to obtain a size which updates automatically and consistently depending on the - breakpoint, without having to specify anything manually. -
-sizing-demo.component.html
-spacing-demo.component.html
-The spinner components requires an element with position: relative as a parent.
-Regular spinner. Usage: Page-Loads. Blocking entire site.
-
- There is some continous text here as an example. Lorem ipsum dolor sit amet, consetetur
- sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
- erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-
- - Small spinner. Usage: Loading asynchronous data for components like lists, tables, etc. Blocking - only component. -
-
- There is some continous text here as an example. Lorem ipsum dolor sit amet, consetetur
- sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
- erat, sed diam voluptua.
-
- XS spinner. Usage: On button, inline with text, ...; when waiting for a response.
-
- If you use multiple topic teasers on one page, each topic teaser must have a different
- background.
-
- Only use "
- Extended Swiss Post backgrounds
- " or "bg-light" as background.
-