diff --git a/.gitignore b/.gitignore index 703add3e63..a5b4d2e7dc 100644 --- a/.gitignore +++ b/.gitignore @@ -6,9 +6,6 @@ bower_components/ package-lock.json yarn.lock -# IDEs and editors -.idea/ - # Log files .pnpm-debug.log lerna-debug.log diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000000..13566b81b0 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml new file mode 100644 index 0000000000..e96d2b9eb3 --- /dev/null +++ b/.idea/codeStyles/Project.xml @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml new file mode 100644 index 0000000000..79ee123c2b --- /dev/null +++ b/.idea/codeStyles/codeStyleConfig.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/.idea/design-system.iml b/.idea/design-system.iml new file mode 100644 index 0000000000..a812c2132c --- /dev/null +++ b/.idea/design-system.iml @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000000..03d9549ea8 --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml new file mode 100644 index 0000000000..cc3da93f8b --- /dev/null +++ b/.idea/jsLibraryMappings.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/jsLinters/eslint.xml b/.idea/jsLinters/eslint.xml new file mode 100644 index 0000000000..b4d792c66f --- /dev/null +++ b/.idea/jsLinters/eslint.xml @@ -0,0 +1,7 @@ + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000000..639900d13c --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000000..ac5ff323f6 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/prettier.xml b/.idea/prettier.xml new file mode 100644 index 0000000000..459e2b9a5b --- /dev/null +++ b/.idea/prettier.xml @@ -0,0 +1,9 @@ + + + + + diff --git a/.idea/stylesheetLinters/stylelint.xml b/.idea/stylesheetLinters/stylelint.xml new file mode 100644 index 0000000000..ee31ed6865 --- /dev/null +++ b/.idea/stylesheetLinters/stylelint.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/templateLanguages.xml b/.idea/templateLanguages.xml new file mode 100644 index 0000000000..0cbd425dc6 --- /dev/null +++ b/.idea/templateLanguages.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000000..35eb1ddfbb --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.prettierrc b/.prettierrc index 0f7db6f0e9..eb45e8eabd 100644 --- a/.prettierrc +++ b/.prettierrc @@ -8,8 +8,7 @@ "jsxSingleQuote": false, "trailingComma": "all", "bracketSpacing": true, - "bracketLine": false, - "jsxBracketSameLine": false, + "bracketSameLine": false, "arrowParens": "avoid", "insertPragma": false, "proseWrap": "preserve", diff --git a/.vscode/settings.json b/.vscode/settings.json index 2c63c08510..71682566a6 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,2 +1,9 @@ { + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "[mdx]": { + "editor.defaultFormatter": null, + "editor.formatOnSave": false + }, + "files.eol": "\n" } diff --git a/packages/components/cypress/e2e/tabs.cy.ts b/packages/components/cypress/e2e/tabs.cy.ts index 6f8c2904e2..33048ff560 100644 --- a/packages/components/cypress/e2e/tabs.cy.ts +++ b/packages/components/cypress/e2e/tabs.cy.ts @@ -15,16 +15,21 @@ describe('tabs', () => { it('should only show the first tab header as active', () => { cy.get('@headers').each(($header, index) => { - cy.wrap($header).find('.active').should(index === 0 ? 'exist' : 'not.exist'); + cy.wrap($header) + .find('.active') + .should(index === 0 ? 'exist' : 'not.exist'); }); }); it('should only show the tab panel associated with the first tab header', () => { cy.get('post-tab-panel:visible').as('panel'); cy.get('@panel').should('have.length', 1); - cy.get('@headers').first().invoke('attr', 'panel').then(panel => { - cy.get('@panel').invoke('attr', 'name').should('equal', panel); - }); + cy.get('@headers') + .first() + .invoke('attr', 'panel') + .then(panel => { + cy.get('@panel').invoke('attr', 'name').should('equal', panel); + }); }); it('should activate a clicked tab header and deactivate the tab header that was previously activated', () => { @@ -42,9 +47,12 @@ describe('tabs', () => { cy.get('post-tab-panel:visible').as('panel'); cy.get('@panel').should('have.length', 1); - cy.get('@headers').last().invoke('attr', 'panel').then(panel => { - cy.get('@panel').invoke('attr', 'name').should('equal', panel); - }); + cy.get('@headers') + .last() + .invoke('attr', 'panel') + .then(panel => { + cy.get('@panel').invoke('attr', 'name').should('equal', panel); + }); }); }); @@ -57,19 +65,27 @@ describe('tabs', () => { it('should only show the requested active tab panel', () => { cy.get('@panel').should('have.length', 1); - cy.get('@tabs').invoke('attr', 'active-panel').then(activePanel => { - cy.get('@panel').invoke('attr', 'name').should('equal', activePanel); - }); + cy.get('@tabs') + .invoke('attr', 'active-panel') + .then(activePanel => { + cy.get('@panel').invoke('attr', 'name').should('equal', activePanel); + }); }); it('should show as active only the tab header associated with the requested active tab panel', () => { - cy.get('@tabs').invoke('attr', 'active-panel').then(activePanel => { - cy.get('@headers').each($header => { - cy.wrap($header).invoke('attr', 'panel').then(panel => { - cy.wrap($header).find('.active').should(panel === activePanel ? 'exist' : 'not.exist'); + cy.get('@tabs') + .invoke('attr', 'active-panel') + .then(activePanel => { + cy.get('@headers').each($header => { + cy.wrap($header) + .invoke('attr', 'panel') + .then(panel => { + cy.wrap($header) + .find('.active') + .should(panel === activePanel ? 'exist' : 'not.exist'); + }); }); }); - }); }); }); @@ -89,9 +105,12 @@ describe('tabs', () => { cy.get('post-tab-panel:visible').as('panel'); cy.get('@panel').should('have.length', 1); - cy.get('@headers').first().invoke('attr', 'panel').then(panel => { - cy.get('@panel').invoke('attr', 'name').should('equal', panel); - }); + cy.get('@headers') + .first() + .invoke('attr', 'panel') + .then(panel => { + cy.get('@panel').invoke('attr', 'name').should('equal', panel); + }); }); it('should activate the newly added tab header after clicking on it', () => { @@ -115,9 +134,11 @@ describe('tabs', () => { cy.get('post-tab-panel:visible').as('panel'); cy.get('@panel').should('have.length', 1); - cy.get('@new-panel').invoke('attr', 'panel').then(panel => { - cy.get('@panel').invoke('attr', 'name').should('equal', panel); - }); + cy.get('@new-panel') + .invoke('attr', 'panel') + .then(panel => { + cy.get('@panel').invoke('attr', 'name').should('equal', panel); + }); }); it('should remove a tab header', () => { diff --git a/packages/components/src/utils/property-checkers/tests/check-pattern.spec.ts b/packages/components/src/utils/property-checkers/tests/check-pattern.spec.ts index 25e525203b..c114584019 100644 --- a/packages/components/src/utils/property-checkers/tests/check-pattern.spec.ts +++ b/packages/components/src/utils/property-checkers/tests/check-pattern.spec.ts @@ -10,7 +10,18 @@ describe('checkPattern', () => { }); it('should throw the provided error if the value is not a string', () => { - [undefined, null, NaN, 1, true, {}, [], () => {/* empty */}].forEach(notString => { + [ + undefined, + null, + NaN, + 1, + true, + {}, + [], + () => { + /* empty */ + }, + ].forEach(notString => { expect(runCheckForValue(notString)).toThrow(error); }); }); diff --git a/packages/components/src/utils/property-checkers/tests/check-type.spec.ts b/packages/components/src/utils/property-checkers/tests/check-type.spec.ts index 74911f0150..7cada76a34 100644 --- a/packages/components/src/utils/property-checkers/tests/check-type.spec.ts +++ b/packages/components/src/utils/property-checkers/tests/check-type.spec.ts @@ -18,7 +18,18 @@ describe('checkType', () => { }); it('should throw an error if the value is not a boolean', () => { - [undefined, null, 42, NaN, 'string', [], {}, () => {/* empty */}].forEach(nonBoolean => { + [ + undefined, + null, + 42, + NaN, + 'string', + [], + {}, + () => { + /* empty */ + }, + ].forEach(nonBoolean => { expect(runCheckForValue(nonBoolean)).toThrow(error); }); }); @@ -31,13 +42,23 @@ describe('checkType', () => { }); it('should not throw an error if the value is a number', () => { - [ 42, 4.2, 4_200, 2.4434634e9, NaN ].forEach(number => { + [42, 4.2, 4_200, 2.4434634e9, NaN].forEach(number => { expect(runCheckForValue(number)).not.toThrow(); }); }); it('should throw an error if the value is not a number', () => { - [undefined, null, true, 'string', [], {}, () => {/* empty */}].forEach(nonNumber => { + [ + undefined, + null, + true, + 'string', + [], + {}, + () => { + /* empty */ + }, + ].forEach(nonNumber => { expect(runCheckForValue(nonNumber)).toThrow(error); }); }); @@ -56,7 +77,18 @@ describe('checkType', () => { }); it('should throw an error if the value is not string', () => { - [undefined, null, true, 42, NaN, [], {}, () => {/* empty */}].forEach(nonString => { + [ + undefined, + null, + true, + 42, + NaN, + [], + {}, + () => { + /* empty */ + }, + ].forEach(nonString => { expect(runCheckForValue(nonString)).toThrow(error); }); }); @@ -75,7 +107,18 @@ describe('checkType', () => { }); it('should throw an error if the value is not an array', () => { - [undefined, null, true, 42, NaN, 'string', {}, () => {/* empty */}].forEach(nonArray => { + [ + undefined, + null, + true, + 42, + NaN, + 'string', + {}, + () => { + /* empty */ + }, + ].forEach(nonArray => { expect(runCheckForValue(nonArray)).toThrow(error); }); }); @@ -94,7 +137,16 @@ describe('checkType', () => { }); it('should throw an error if the value is not an object', () => { - [undefined, true, 42, NaN, 'string', () => {/* empty */}].forEach(nonObject => { + [ + undefined, + true, + 42, + NaN, + 'string', + () => { + /* empty */ + }, + ].forEach(nonObject => { expect(runCheckForValue(nonObject)).toThrow(error); }); }); @@ -107,7 +159,14 @@ describe('checkType', () => { }); it('should not throw an error if the value is a function', () => { - [function () {/* empty */}, () => {/* empty */}].forEach(fn => { + [ + function () { + /* empty */ + }, + () => { + /* empty */ + }, + ].forEach(fn => { expect(runCheckForValue(fn)).not.toThrow(); }); }); diff --git a/packages/components/src/utils/property-checkers/tests/empty-or.spec.ts b/packages/components/src/utils/property-checkers/tests/empty-or.spec.ts index b6072abfb6..ef2328f0e3 100644 --- a/packages/components/src/utils/property-checkers/tests/empty-or.spec.ts +++ b/packages/components/src/utils/property-checkers/tests/empty-or.spec.ts @@ -12,14 +12,24 @@ describe('emptyOr', () => { }); it('should run the check if the provided value is not empty', () => { - [0, NaN, ' ', false, [], {}, () => {/* empty */}].forEach((nonEmptyValue, index) => { + [ + 0, + NaN, + ' ', + false, + [], + {}, + () => { + /* empty */ + }, + ].forEach((nonEmptyValue, index) => { mockEmptyOrCheck(nonEmptyValue); expect(mockCheck).toHaveBeenCalledTimes(index + 1); }); }); it('should pass all provided arguments to the nested check function', () => { - const args = ['non empty value', true, false, ['arg in an array'], {arg: 'in an object'}]; + const args = ['non empty value', true, false, ['arg in an array'], { arg: 'in an object' }]; mockEmptyOrCheck(...args); expect(mockCheck).toHaveBeenCalledWith(...args); }); diff --git a/packages/demo/src/app/app-routing.module.ts b/packages/demo/src/app/app-routing.module.ts index f35fb5d034..71440d3bb9 100644 --- a/packages/demo/src/app/app-routing.module.ts +++ b/packages/demo/src/app/app-routing.module.ts @@ -1,142 +1,142 @@ /* tslint:disable:max-line-length */ -import { FormSwitchDemoPageComponent } from "./bootstrap/components/form-switch/form-switch-demo-page/form-switch-demo-page.component"; -import { TopicTeaserDemoPageComponent } from "./post-sample/components/topic-teaser/topic-teaser-demo-page/topic-teaser-demo-page.component"; -import { NgModule } from "@angular/core"; -import { RouterModule, Routes } from "@angular/router"; -import { IntranetLayoutComponent } from "./intranet-layout/intranet-layout.component"; -import { AccordionDemoPageComponent } from "./bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component"; -import { AlertDemoPageComponent } from "./bootstrap/components/alert/alert-demo-page/alert-demo-page.component"; -import { BadgeDemoPageComponent } from "./bootstrap/components/badge/badge-demo-page/badge-demo-page.component"; -import { ButtonsDemoPageComponent } from "./bootstrap/components/buttons/buttons-demo-page/buttons-demo-page.component"; +import { FormSwitchDemoPageComponent } from './bootstrap/components/form-switch/form-switch-demo-page/form-switch-demo-page.component'; +import { TopicTeaserDemoPageComponent } from './post-sample/components/topic-teaser/topic-teaser-demo-page/topic-teaser-demo-page.component'; +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { IntranetLayoutComponent } from './intranet-layout/intranet-layout.component'; +import { AccordionDemoPageComponent } from './bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component'; +import { AlertDemoPageComponent } from './bootstrap/components/alert/alert-demo-page/alert-demo-page.component'; +import { BadgeDemoPageComponent } from './bootstrap/components/badge/badge-demo-page/badge-demo-page.component'; +import { ButtonsDemoPageComponent } from './bootstrap/components/buttons/buttons-demo-page/buttons-demo-page.component'; import { ButtonGroupDemoPageComponent } from './bootstrap/components/button-group/button-group-demo-page/button-group-demo-page.component'; -import { BlockquotesDemoPageComponent } from "./bootstrap/components/blockquotes/blockquotes-demo-page/blockquotes-demo-page.component"; -import { TablesDemoPageComponent } from "./bootstrap/components/tables/tables-demo-page/tables-demo-page.component"; -import { TypographyDemoPageComponent } from "./bootstrap/components/typography/typography-demo-page/typography-demo-page.component"; -import { FormsDemoPageComponent as BootstrapFormDemoPageComponent } from "./bootstrap/components/forms/forms-demo-page/forms-demo-page.component"; -import { NgbAlertDemoPageComponent } from "./ng-bootstrap/components/alert/alert-demo-page/alert-demo-page.component"; -import { NgbAccordionDemoPageComponent } from "./ng-bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component"; -import { NgbDatepickerDemoPageComponent } from "./ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component"; -import { NgbDropdownDemoPageComponent } from "./ng-bootstrap/components/dropdown/dropdown-demo-page/dropdown-demo-page.component"; -import { NgbPopoverDemoPageComponent } from "./ng-bootstrap/components/popover/popover-demo-page/popover-demo-page.component"; -import { NgbRatingDemoPageComponent } from "./ng-bootstrap/components/rating/rating-demo-page/rating-demo-page.component"; -import { NgbModalDemoPageComponent } from "./ng-bootstrap/components/modal/modal-demo-page/modal-demo-page.component"; -import { NgbCarouselDemoPageComponent } from "./ng-bootstrap/components/carousel/carousel-demo-page/carousel-demo-page.component"; -import { NgbTimepickerDemoPageComponent } from "./ng-bootstrap/components/timepicker/timepicker-demo-page/timepicker-demo-page.component"; -import { NgbPaginationDemoPageComponent } from "./ng-bootstrap/components/pagination/pagination-demo-page/pagination-demo-page.component"; -import { NgbCollapseDemoPageComponent } from "./ng-bootstrap/components/collapse/collapse-demo-page/collapse-demo-page.component"; -import { NgbProgressbarDemoPageComponent } from "./ng-bootstrap/components/progressbar/progressbar-demo-page/progressbar-demo-page.component"; -import { NgbTabsDemoPageComponent } from "./ng-bootstrap/components/tabs/tabs-demo-page/tabs-demo-page.component"; -import { NgbTooltipDemoPageComponent } from "./ng-bootstrap/components/tooltip/tooltip-demo-page/tooltip-demo-page.component"; -import { NgbTypeaheadDemoPageComponent } from "./ng-bootstrap/components/typeahead/typeahead-demo-page/typeahead-demo-page.component"; -import { FormRangeDemoPageComponent } from "./bootstrap/components/form-range/form-range-demo-page/form-range-demo-page.component"; -import { FormSelectDemoPageComponent } from "./bootstrap/components/form-select/form-select-demo-page/form-select-demo-page.component"; -import { FormSelectMultipleDemoPageComponent } from "./bootstrap/components/form-select-multiple/form-select-multiple-demo-page/form-select-multiple-demo-page.component"; -import { FormTextareaDemoPageComponent } from "./bootstrap/components/form-textarea/form-textarea-demo-page/form-textarea-demo-page.component"; -import { FormControlDemoPageComponent } from "./bootstrap/components/form-control/form-control-demo-page/form-control-demo-page.component"; -import { FormRadioDemoPageComponent } from "./bootstrap/components/form-radio/form-radio-demo-page/form-radio-demo-page.component"; -import { FormCheckDemoPageComponent } from "./bootstrap/components/form-check/form-check-demo-page/form-check-demo-page.component"; -import { FeedbackDemoPageComponent } from "./post-sample/components/feedback/feedback-demo-page/feedback-demo-page.component"; -import { IconsDemoPageComponent } from "./post-sample/components/icons/icons-demo-page/icons-demo-page.component"; -import { SpinnerDemoPageComponent } from "./post-sample/components/spinner/spinner-demo-page/spinner-demo-page.component"; -import { BackgroundDemoPageComponent } from "./bootstrap/components/background/background-demo-page/background-demo-page.component"; -import { SizingDemoPageComponent } from "./post-sample/components/sizing/sizing-demo-page/sizing-demo-page.component"; -import { NotificationOverlayPageComponent } from "./post-sample/components/notification-overlay/notification-overlay-demo-page/notification-overlay-page.component"; -import { SubnavigationDemoPageComponent } from "./post-sample/components/subnavigation/subnavigation-demo-page/subnavigation-demo-page.component"; -import { HomeComponent } from "./home/home.component"; -import { FormFileDemoPageComponent } from "./bootstrap/components/form-file/form-file-demo-page/form-file-demo-page.component"; -import { CardDemoPageComponent } from "./bootstrap/components/card/card-demo-page/card-demo-page.component"; -import { CustomSelectDemoPageComponent } from "./post-sample/components/custom-select/custom-select-demo-page/custom-select-demo-page.component"; -import { StepperDemoPageComponent } from "./post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component"; -import { DatatableDemoPageComponent } from "./post-sample/components/datatable/datatable-demo-page/datatable-demo-page.component"; -import { FormsDemoPageComponent } from "./post-sample/components/forms/forms-demo-page/forms-demo-page.component"; -import { PostCardsDemoPageComponent } from "./post-sample/components/post-cards/post-cards-demo-page/post-cards-demo-page.component"; +import { BlockquotesDemoPageComponent } from './bootstrap/components/blockquotes/blockquotes-demo-page/blockquotes-demo-page.component'; +import { TablesDemoPageComponent } from './bootstrap/components/tables/tables-demo-page/tables-demo-page.component'; +import { TypographyDemoPageComponent } from './bootstrap/components/typography/typography-demo-page/typography-demo-page.component'; +import { FormsDemoPageComponent as BootstrapFormDemoPageComponent } from './bootstrap/components/forms/forms-demo-page/forms-demo-page.component'; +import { NgbAlertDemoPageComponent } from './ng-bootstrap/components/alert/alert-demo-page/alert-demo-page.component'; +import { NgbAccordionDemoPageComponent } from './ng-bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component'; +import { NgbDatepickerDemoPageComponent } from './ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component'; +import { NgbDropdownDemoPageComponent } from './ng-bootstrap/components/dropdown/dropdown-demo-page/dropdown-demo-page.component'; +import { NgbPopoverDemoPageComponent } from './ng-bootstrap/components/popover/popover-demo-page/popover-demo-page.component'; +import { NgbRatingDemoPageComponent } from './ng-bootstrap/components/rating/rating-demo-page/rating-demo-page.component'; +import { NgbModalDemoPageComponent } from './ng-bootstrap/components/modal/modal-demo-page/modal-demo-page.component'; +import { NgbCarouselDemoPageComponent } from './ng-bootstrap/components/carousel/carousel-demo-page/carousel-demo-page.component'; +import { NgbTimepickerDemoPageComponent } from './ng-bootstrap/components/timepicker/timepicker-demo-page/timepicker-demo-page.component'; +import { NgbPaginationDemoPageComponent } from './ng-bootstrap/components/pagination/pagination-demo-page/pagination-demo-page.component'; +import { NgbCollapseDemoPageComponent } from './ng-bootstrap/components/collapse/collapse-demo-page/collapse-demo-page.component'; +import { NgbProgressbarDemoPageComponent } from './ng-bootstrap/components/progressbar/progressbar-demo-page/progressbar-demo-page.component'; +import { NgbTabsDemoPageComponent } from './ng-bootstrap/components/tabs/tabs-demo-page/tabs-demo-page.component'; +import { NgbTooltipDemoPageComponent } from './ng-bootstrap/components/tooltip/tooltip-demo-page/tooltip-demo-page.component'; +import { NgbTypeaheadDemoPageComponent } from './ng-bootstrap/components/typeahead/typeahead-demo-page/typeahead-demo-page.component'; +import { FormRangeDemoPageComponent } from './bootstrap/components/form-range/form-range-demo-page/form-range-demo-page.component'; +import { FormSelectDemoPageComponent } from './bootstrap/components/form-select/form-select-demo-page/form-select-demo-page.component'; +import { FormSelectMultipleDemoPageComponent } from './bootstrap/components/form-select-multiple/form-select-multiple-demo-page/form-select-multiple-demo-page.component'; +import { FormTextareaDemoPageComponent } from './bootstrap/components/form-textarea/form-textarea-demo-page/form-textarea-demo-page.component'; +import { FormControlDemoPageComponent } from './bootstrap/components/form-control/form-control-demo-page/form-control-demo-page.component'; +import { FormRadioDemoPageComponent } from './bootstrap/components/form-radio/form-radio-demo-page/form-radio-demo-page.component'; +import { FormCheckDemoPageComponent } from './bootstrap/components/form-check/form-check-demo-page/form-check-demo-page.component'; +import { FeedbackDemoPageComponent } from './post-sample/components/feedback/feedback-demo-page/feedback-demo-page.component'; +import { IconsDemoPageComponent } from './post-sample/components/icons/icons-demo-page/icons-demo-page.component'; +import { SpinnerDemoPageComponent } from './post-sample/components/spinner/spinner-demo-page/spinner-demo-page.component'; +import { BackgroundDemoPageComponent } from './bootstrap/components/background/background-demo-page/background-demo-page.component'; +import { SizingDemoPageComponent } from './post-sample/components/sizing/sizing-demo-page/sizing-demo-page.component'; +import { NotificationOverlayPageComponent } from './post-sample/components/notification-overlay/notification-overlay-demo-page/notification-overlay-page.component'; +import { SubnavigationDemoPageComponent } from './post-sample/components/subnavigation/subnavigation-demo-page/subnavigation-demo-page.component'; +import { HomeComponent } from './home/home.component'; +import { FormFileDemoPageComponent } from './bootstrap/components/form-file/form-file-demo-page/form-file-demo-page.component'; +import { CardDemoPageComponent } from './bootstrap/components/card/card-demo-page/card-demo-page.component'; +import { CustomSelectDemoPageComponent } from './post-sample/components/custom-select/custom-select-demo-page/custom-select-demo-page.component'; +import { StepperDemoPageComponent } from './post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component'; +import { DatatableDemoPageComponent } from './post-sample/components/datatable/datatable-demo-page/datatable-demo-page.component'; +import { FormsDemoPageComponent } from './post-sample/components/forms/forms-demo-page/forms-demo-page.component'; +import { PostCardsDemoPageComponent } from './post-sample/components/post-cards/post-cards-demo-page/post-cards-demo-page.component'; /* tslint:enable:max-line-length */ const routes: Routes = [ - { path: "", redirectTo: "home", pathMatch: "full" }, - { path: "home", component: HomeComponent, data: { fullWidth: true } }, + { path: '', redirectTo: 'home', pathMatch: 'full' }, + { path: 'home', component: HomeComponent, data: { fullWidth: true } }, { - path: "bootstrap-samples", + path: 'bootstrap-samples', children: [ - { path: "accordion", component: AccordionDemoPageComponent }, - { path: "alerts", component: AlertDemoPageComponent }, - { path: "background", component: BackgroundDemoPageComponent }, - { path: "badge", component: BadgeDemoPageComponent }, - { path: "blockquotes", component: BlockquotesDemoPageComponent }, - { path: "buttons", component: ButtonsDemoPageComponent }, - { path: "button-group", component: ButtonGroupDemoPageComponent }, - { path: "tables", component: TablesDemoPageComponent }, - { path: "typography", component: TypographyDemoPageComponent }, - { path: "forms", component: BootstrapFormDemoPageComponent }, - { path: "form-select", component: FormSelectDemoPageComponent }, + { path: 'accordion', component: AccordionDemoPageComponent }, + { path: 'alerts', component: AlertDemoPageComponent }, + { path: 'background', component: BackgroundDemoPageComponent }, + { path: 'badge', component: BadgeDemoPageComponent }, + { path: 'blockquotes', component: BlockquotesDemoPageComponent }, + { path: 'buttons', component: ButtonsDemoPageComponent }, + { path: 'button-group', component: ButtonGroupDemoPageComponent }, + { path: 'tables', component: TablesDemoPageComponent }, + { path: 'typography', component: TypographyDemoPageComponent }, + { path: 'forms', component: BootstrapFormDemoPageComponent }, + { path: 'form-select', component: FormSelectDemoPageComponent }, { - path: "form-multiple-select", + path: 'form-multiple-select', component: FormSelectMultipleDemoPageComponent, }, - { path: "form-textarea", component: FormTextareaDemoPageComponent }, - { path: "form-control", component: FormControlDemoPageComponent }, - { path: "form-range", component: FormRangeDemoPageComponent }, - { path: "form-file", component: FormFileDemoPageComponent }, - { path: "form-radio", component: FormRadioDemoPageComponent }, - { path: "form-check", component: FormCheckDemoPageComponent }, - { path: "form-switch", component: FormSwitchDemoPageComponent }, + { path: 'form-textarea', component: FormTextareaDemoPageComponent }, + { path: 'form-control', component: FormControlDemoPageComponent }, + { path: 'form-range', component: FormRangeDemoPageComponent }, + { path: 'form-file', component: FormFileDemoPageComponent }, + { path: 'form-radio', component: FormRadioDemoPageComponent }, + { path: 'form-check', component: FormCheckDemoPageComponent }, + { path: 'form-switch', component: FormSwitchDemoPageComponent }, { - path: "card", + path: 'card', component: CardDemoPageComponent, data: { fullWidth: true }, }, ], }, { - path: "ng-bootstrap-samples", + path: 'ng-bootstrap-samples', children: [ - { path: "accordion", component: NgbAccordionDemoPageComponent }, - { path: "rating", component: NgbRatingDemoPageComponent }, - { path: "modal", component: NgbModalDemoPageComponent }, - { path: "progressbar", component: NgbProgressbarDemoPageComponent }, - { path: "alert", component: NgbAlertDemoPageComponent }, - { path: "carousel", component: NgbCarouselDemoPageComponent }, - { path: "popover", component: NgbPopoverDemoPageComponent }, - { path: "collapse", component: NgbCollapseDemoPageComponent }, - { path: "datepicker", component: NgbDatepickerDemoPageComponent }, - { path: "dropdown", component: NgbDropdownDemoPageComponent }, - { path: "pagination", component: NgbPaginationDemoPageComponent }, + { path: 'accordion', component: NgbAccordionDemoPageComponent }, + { path: 'rating', component: NgbRatingDemoPageComponent }, + { path: 'modal', component: NgbModalDemoPageComponent }, + { path: 'progressbar', component: NgbProgressbarDemoPageComponent }, + { path: 'alert', component: NgbAlertDemoPageComponent }, + { path: 'carousel', component: NgbCarouselDemoPageComponent }, + { path: 'popover', component: NgbPopoverDemoPageComponent }, + { path: 'collapse', component: NgbCollapseDemoPageComponent }, + { path: 'datepicker', component: NgbDatepickerDemoPageComponent }, + { path: 'dropdown', component: NgbDropdownDemoPageComponent }, + { path: 'pagination', component: NgbPaginationDemoPageComponent }, { - path: "tabs", + path: 'tabs', component: NgbTabsDemoPageComponent, data: { fullWidth: true }, }, - { path: "timepicker", component: NgbTimepickerDemoPageComponent }, - { path: "tooltip", component: NgbTooltipDemoPageComponent }, - { path: "typeahead", component: NgbTypeaheadDemoPageComponent }, + { path: 'timepicker', component: NgbTimepickerDemoPageComponent }, + { path: 'tooltip', component: NgbTooltipDemoPageComponent }, + { path: 'typeahead', component: NgbTypeaheadDemoPageComponent }, ], }, { - path: "post-samples", + path: 'post-samples', children: [ - { path: "accordion", component: AccordionDemoPageComponent }, - { path: "datatable", component: DatatableDemoPageComponent }, - { path: "icons", component: IconsDemoPageComponent }, - { path: "feedback", component: FeedbackDemoPageComponent }, - { path: "spinner", component: SpinnerDemoPageComponent }, - { path: "sizing", component: SizingDemoPageComponent }, - { path: "card", component: PostCardsDemoPageComponent }, + { path: 'accordion', component: AccordionDemoPageComponent }, + { path: 'datatable', component: DatatableDemoPageComponent }, + { path: 'icons', component: IconsDemoPageComponent }, + { path: 'feedback', component: FeedbackDemoPageComponent }, + { path: 'spinner', component: SpinnerDemoPageComponent }, + { path: 'sizing', component: SizingDemoPageComponent }, + { path: 'card', component: PostCardsDemoPageComponent }, { - path: "notification-overlay", + path: 'notification-overlay', component: NotificationOverlayPageComponent, }, - { path: "subnavigation", component: SubnavigationDemoPageComponent }, + { path: 'subnavigation', component: SubnavigationDemoPageComponent }, { - path: "topic-teaser", + path: 'topic-teaser', component: TopicTeaserDemoPageComponent, data: { fullWidth: true }, }, - { path: "custom-select", component: CustomSelectDemoPageComponent }, - { path: "stepper", component: StepperDemoPageComponent }, - { path: "forms", component: FormsDemoPageComponent }, + { path: 'custom-select', component: CustomSelectDemoPageComponent }, + { path: 'stepper', component: StepperDemoPageComponent }, + { path: 'forms', component: FormsDemoPageComponent }, { - path: "intranet-layout", + path: 'intranet-layout', component: IntranetLayoutComponent, data: { fullWidth: true }, }, @@ -150,7 +150,7 @@ const routes: Routes = [ useHash: true, scrollPositionRestoration: 'enabled', anchorScrolling: 'enabled', - scrollOffset: [0, 150] + scrollOffset: [0, 150], }), ], exports: [RouterModule], diff --git a/packages/demo/src/app/app.component.html b/packages/demo/src/app/app.component.html index 246122d158..79e8655b13 100644 --- a/packages/demo/src/app/app.component.html +++ b/packages/demo/src/app/app.component.html @@ -8,20 +8,32 @@ {{ (currentVersion$ | async)?.title }}
- + {{ version.title }}
- + Angular Logo {{ angularVersion.format('x.x') }} - + Bootstrap Logo {{ bootstrapVersion.format('x.x') }} - + ng-bootstrap Logo {{ ngBootstrapVersion.format('x.x') }} @@ -31,240 +43,418 @@
- +
  • - + Home
  • -
    - + Accordion - + Alerts / Notifications - + Background - + Badge - + Blockquotes - + Buttons - + Button Group - + Cards - + Forms - + Form checkbox - + Form control - + Form file - + Form radio button - + Form range - + Form select - + Form select multiple - + Form switch - + Form textarea - + Tables - + Typography
  • -
    - + Accordion - + Alerts - + Carousel - + Collapse - + Datepicker - + Dropdown - + Modal - + Pagination - + Popover - + Progressbar - + Rating - + Tabs - + Timepicker - + Tooltip - + Typeahead
  • -
    - + Custom select - + Datatable - + Feedback - + Forms - + Icons - + Internet header - + Intranet header - + Notification overlay - + Post cards - + Sizing - + Spinner - + Stepper - + Subnavigation - + Topic teaser
    • -
    -
    +
    + " + >
    diff --git a/packages/demo/src/app/app.component.spec.ts b/packages/demo/src/app/app.component.spec.ts index 667c0c8c41..b7214d1946 100644 --- a/packages/demo/src/app/app.component.spec.ts +++ b/packages/demo/src/app/app.component.spec.ts @@ -1,14 +1,12 @@ import { TestBed, waitForAsync } from '@angular/core/testing'; import { AppComponent } from './app.component'; -import {RouterTestingModule} from '@angular/router/testing'; +import { RouterTestingModule } from '@angular/router/testing'; describe('AppComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [ RouterTestingModule], - declarations: [ - AppComponent - ], + imports: [RouterTestingModule], + declarations: [AppComponent], }).compileComponents(); })); it('should create the app', waitForAsync(() => { diff --git a/packages/demo/src/app/bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component.ts b/packages/demo/src/app/bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component.ts index b43d5a4894..53b2accf34 100644 --- a/packages/demo/src/app/bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component.ts +++ b/packages/demo/src/app/bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component.ts @@ -1,12 +1,14 @@ import { Component } from '@angular/core'; -const codeTemplate = require('!!raw-loader!../accordion-demo/accordion-demo.component.html').default; -const codeController = require('!!raw-loader!../accordion-demo/accordion-demo.component.ts').default; +const codeTemplate = + require('!!raw-loader!../accordion-demo/accordion-demo.component.html').default; +const codeController = + require('!!raw-loader!../accordion-demo/accordion-demo.component.ts').default; @Component({ selector: 'app-accordion-demo-page', - templateUrl: './accordion-demo-page.component.html' + templateUrl: './accordion-demo-page.component.html', }) -export class AccordionDemoPageComponent { +export class AccordionDemoPageComponent { codeTemplate = codeTemplate; codeController = codeController; } diff --git a/packages/demo/src/app/bootstrap/components/accordion/accordion-demo/accordion-demo.component.html b/packages/demo/src/app/bootstrap/components/accordion/accordion-demo/accordion-demo.component.html index 888be386b7..a60f08a1d9 100644 --- a/packages/demo/src/app/bootstrap/components/accordion/accordion-demo/accordion-demo.component.html +++ b/packages/demo/src/app/bootstrap/components/accordion/accordion-demo/accordion-demo.component.html @@ -1,37 +1,97 @@

    -

    -
    +
    - 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 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 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. + 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.
    diff --git a/packages/demo/src/app/bootstrap/components/accordion/accordion-demo/accordion-demo.component.ts b/packages/demo/src/app/bootstrap/components/accordion/accordion-demo/accordion-demo.component.ts index 60f1d99d77..3d4256b193 100644 --- a/packages/demo/src/app/bootstrap/components/accordion/accordion-demo/accordion-demo.component.ts +++ b/packages/demo/src/app/bootstrap/components/accordion/accordion-demo/accordion-demo.component.ts @@ -1,10 +1,8 @@ import { Component } from '@angular/core'; -import 'bootstrap/js/dist/collapse'; // collapse.js is required for the accordion to work properly +import 'bootstrap/js/dist/collapse'; // collapse.js is required for the accordion to work properly @Component({ selector: 'app-accordion-demo', - templateUrl: './accordion-demo.component.html' + templateUrl: './accordion-demo.component.html', }) -export class AccordionDemoComponent { -} - +export class AccordionDemoComponent {} diff --git a/packages/demo/src/app/bootstrap/components/alert/action-alert-demo/action-alert-demo.component.html b/packages/demo/src/app/bootstrap/components/alert/action-alert-demo/action-alert-demo.component.html index b8f6d689ca..5063d58adb 100644 --- a/packages/demo/src/app/bootstrap/components/alert/action-alert-demo/action-alert-demo.component.html +++ b/packages/demo/src/app/bootstrap/components/alert/action-alert-demo/action-alert-demo.component.html @@ -7,52 +7,54 @@ diff --git a/packages/demo/src/app/bootstrap/components/alert/action-alert-demo/action-alert-demo.component.ts b/packages/demo/src/app/bootstrap/components/alert/action-alert-demo/action-alert-demo.component.ts index 076031cba0..9927836b28 100644 --- a/packages/demo/src/app/bootstrap/components/alert/action-alert-demo/action-alert-demo.component.ts +++ b/packages/demo/src/app/bootstrap/components/alert/action-alert-demo/action-alert-demo.component.ts @@ -3,15 +3,15 @@ import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core'; @Component({ selector: 'app-action-alert-demo', templateUrl: './action-alert-demo.component.html', - styleUrls: ['./action-alert-demo.component.scss'] + styleUrls: ['./action-alert-demo.component.scss'], }) export class ActionAlertDemoComponent implements AfterViewInit { - @ViewChild("ex1", { static: true }) ex1: ElementRef; - @ViewChild("ex2", { static: true }) ex2: ElementRef; - @ViewChild("ex3", { static: true }) ex3: ElementRef; - @ViewChild("ex1btn", { static: true }) ex1btnTxt: ElementRef; - @ViewChild("ex2btn", { static: true }) ex2btnTxt: ElementRef; - @ViewChild("ex3btn", { static: true }) ex3btnTxt: ElementRef; + @ViewChild('ex1', { static: true }) ex1: ElementRef; + @ViewChild('ex2', { static: true }) ex2: ElementRef; + @ViewChild('ex3', { static: true }) ex3: ElementRef; + @ViewChild('ex1btn', { static: true }) ex1btnTxt: ElementRef; + @ViewChild('ex2btn', { static: true }) ex2btnTxt: ElementRef; + @ViewChild('ex3btn', { static: true }) ex3btnTxt: ElementRef; ngAfterViewInit(): void { this.toggleEx1(); @@ -22,12 +22,12 @@ export class ActionAlertDemoComponent implements AfterViewInit { toggleEx1() { if (this.ex1 != undefined) { const displayStyle = this.ex1.nativeElement.style.display; - if (displayStyle != "none") { - this.ex1.nativeElement.style.display = "none"; - this.setButtonText("Show Ex. 1", this.ex1btnTxt); + if (displayStyle != 'none') { + this.ex1.nativeElement.style.display = 'none'; + this.setButtonText('Show Ex. 1', this.ex1btnTxt); } else { - this.ex1.nativeElement.style.display = ""; - this.setButtonText("Hide Ex. 1", this.ex1btnTxt); + this.ex1.nativeElement.style.display = ''; + this.setButtonText('Hide Ex. 1', this.ex1btnTxt); } } } @@ -35,12 +35,12 @@ export class ActionAlertDemoComponent implements AfterViewInit { toggleEx2() { if (this.ex2 != undefined) { const displayStyle = this.ex2.nativeElement.style.display; - if (displayStyle != "none") { - this.ex2.nativeElement.style.display = "none"; - this.setButtonText("Show Ex. 2", this.ex2btnTxt); + if (displayStyle != 'none') { + this.ex2.nativeElement.style.display = 'none'; + this.setButtonText('Show Ex. 2', this.ex2btnTxt); } else { - this.ex2.nativeElement.style.display = ""; - this.setButtonText("Hide Ex. 2", this.ex2btnTxt); + this.ex2.nativeElement.style.display = ''; + this.setButtonText('Hide Ex. 2', this.ex2btnTxt); } } } @@ -48,12 +48,12 @@ export class ActionAlertDemoComponent implements AfterViewInit { toggleEx3() { if (this.ex3 != undefined) { const displayStyle = this.ex3.nativeElement.style.display; - if (displayStyle != "none") { - this.ex3.nativeElement.style.display = "none"; - this.setButtonText("Show Ex. 3", this.ex3btnTxt); + if (displayStyle != 'none') { + this.ex3.nativeElement.style.display = 'none'; + this.setButtonText('Show Ex. 3', this.ex3btnTxt); } else { - this.ex3.nativeElement.style.display = ""; - this.setButtonText("Hide Ex. 3", this.ex3btnTxt); + this.ex3.nativeElement.style.display = ''; + this.setButtonText('Hide Ex. 3', this.ex3btnTxt); } } } diff --git a/packages/demo/src/app/bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html b/packages/demo/src/app/bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html index caf12dd95a..3a592c3611 100644 --- a/packages/demo/src/app/bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html +++ b/packages/demo/src/app/bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html @@ -5,8 +5,8 @@

    Alerts / Notifications

    - The following two color variants are deprecated and will be removed in the next major version - of the styles package: + The following two color variants are deprecated and will be removed in the next major version of + the styles package:

    • diff --git a/packages/demo/src/app/bootstrap/components/alert/alert-demo-page/alert-demo-page.component.ts b/packages/demo/src/app/bootstrap/components/alert/alert-demo-page/alert-demo-page.component.ts index d2415d11b9..e529ddc191 100644 --- a/packages/demo/src/app/bootstrap/components/alert/alert-demo-page/alert-demo-page.component.ts +++ b/packages/demo/src/app/bootstrap/components/alert/alert-demo-page/alert-demo-page.component.ts @@ -1,16 +1,20 @@ import { Component } from '@angular/core'; -const codeTemplateToast = require('!!raw-loader!../toast-demo/toast-demo.component.html').default -const codeTemplateAlert = require('!!raw-loader!../alert-demo/alert-demo.component.html').default -const codeTemplateAction = require('!!raw-loader!../action-alert-demo/action-alert-demo.component.html').default -const codeTemplateButton = require('!!raw-loader!../button-notification-demo/button-notification-demo.component.html').default -const codeTemplateOverlay = require('!!raw-loader!../overlay-notification-demo/overlay-notification-demo.component.html').default -const codeTemplateDot = require('!!raw-loader!../dot-notification-demo/dot-notification-demo.component.html').default +const codeTemplateToast = require('!!raw-loader!../toast-demo/toast-demo.component.html').default; +const codeTemplateAlert = require('!!raw-loader!../alert-demo/alert-demo.component.html').default; +const codeTemplateAction = + require('!!raw-loader!../action-alert-demo/action-alert-demo.component.html').default; +const codeTemplateButton = + require('!!raw-loader!../button-notification-demo/button-notification-demo.component.html').default; +const codeTemplateOverlay = + require('!!raw-loader!../overlay-notification-demo/overlay-notification-demo.component.html').default; +const codeTemplateDot = + require('!!raw-loader!../dot-notification-demo/dot-notification-demo.component.html').default; @Component({ selector: 'app-alert-demo-page', - templateUrl: './alert-demo-page.component.html' + templateUrl: './alert-demo-page.component.html', }) -export class AlertDemoPageComponent { +export class AlertDemoPageComponent { codeTemplateToast = codeTemplateToast; codeTemplateAlert = codeTemplateAlert; codeTemplateAction = codeTemplateAction; diff --git a/packages/demo/src/app/bootstrap/components/alert/alert-demo/alert-demo.component.html b/packages/demo/src/app/bootstrap/components/alert/alert-demo/alert-demo.component.html index cd1b1f2c4b..2965bef9c7 100644 --- a/packages/demo/src/app/bootstrap/components/alert/alert-demo/alert-demo.component.html +++ b/packages/demo/src/app/bootstrap/components/alert/alert-demo/alert-demo.component.html @@ -56,7 +56,14 @@

      Example for dismissible alert

      @@ -31,17 +39,25 @@
      - +
      Special Icons (Black)
      -
      Example with custom icon. Only needs the corresponding "pi"-class added to the toast.
      +
      + Example with custom icon. Only needs the corresponding "pi"-class added to the toast. +
      - +
      Special Icons (White)
      Example with white icon. Icon needs to be extended in sass.
      - +
      Example without an icon
      Add class "no-icon" to the toast.
      @@ -51,13 +67,32 @@

      Examples of ngx-toastr

      - ngx-toastr Documentation - ngx-toastr Demo + + ngx-toastr Documentation + + + ngx-toastr Demo +
      -

      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:

      - +

      + 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: +

      +
      -
      diff --git a/packages/demo/src/app/bootstrap/components/alert/toast-demo/toast-demo.component.ts b/packages/demo/src/app/bootstrap/components/alert/toast-demo/toast-demo.component.ts index 722b38826d..a0d9283eef 100644 --- a/packages/demo/src/app/bootstrap/components/alert/toast-demo/toast-demo.component.ts +++ b/packages/demo/src/app/bootstrap/components/alert/toast-demo/toast-demo.component.ts @@ -1,32 +1,31 @@ import { Component } from '@angular/core'; -import {ToastrService} from "ngx-toastr"; +import { ToastrService } from 'ngx-toastr'; @Component({ selector: 'app-toast-demo', templateUrl: './toast-demo.component.html', - styleUrls: ['./toast-demo.component.scss'] + styleUrls: ['./toast-demo.component.scss'], }) export class ToastDemoComponent { toastOptions = { closeButton: false, timeOut: 5000, - extendedTimeOut: 1000 - } + extendedTimeOut: 1000, + }; JSON = JSON; - constructor(private toastr: ToastrService) { } + constructor(private toastr: ToastrService) {} - showError(){ - this.toastr.error(null, "Error w/o message", this.toastOptions); + showError() { + this.toastr.error(null, 'Error w/o message', this.toastOptions); } - showInfo(){ - this.toastr.info("Information w/o title", '', this.toastOptions); + showInfo() { + this.toastr.info('Information w/o title', '', this.toastOptions); } - showSuccess(){ - this.toastr.success("w/ message", "Success", this.toastOptions); + showSuccess() { + this.toastr.success('w/ message', 'Success', this.toastOptions); } - showWarning(){ - this.toastr.warning("w/ message", "Warning", this.toastOptions); + showWarning() { + this.toastr.warning('w/ message', 'Warning', this.toastOptions); } - } diff --git a/packages/demo/src/app/bootstrap/components/background/background-demo-page/background-demo-page.component.html b/packages/demo/src/app/bootstrap/components/background/background-demo-page/background-demo-page.component.html index 602ce6e981..3efbe736c2 100644 --- a/packages/demo/src/app/bootstrap/components/background/background-demo-page/background-demo-page.component.html +++ b/packages/demo/src/app/bootstrap/components/background/background-demo-page/background-demo-page.component.html @@ -5,46 +5,106 @@

      Custom Post Backgrounds

      Infos

      - 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. + 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.

      Default backgrounds

      - - + +

      - +
      - +
      - +

      Thematic backgrounds

      - - + +

      - +
      - +
      @@ -52,19 +112,33 @@

      Thematic backgrounds

      Contextual backgrounds (Intranet only)

      - - + +

      - +
      - +
      diff --git a/packages/demo/src/app/bootstrap/components/background/background-demo-page/background-demo-page.component.ts b/packages/demo/src/app/bootstrap/components/background/background-demo-page/background-demo-page.component.ts index ad00cf0e49..6dcb77e0c9 100644 --- a/packages/demo/src/app/bootstrap/components/background/background-demo-page/background-demo-page.component.ts +++ b/packages/demo/src/app/bootstrap/components/background/background-demo-page/background-demo-page.component.ts @@ -1,10 +1,11 @@ import { Component } from '@angular/core'; -const codeTemplate = require('!!raw-loader!../background-demo/background-demo.component.html').default +const codeTemplate = + require('!!raw-loader!../background-demo/background-demo.component.html').default; @Component({ selector: 'app-background-demo-page', templateUrl: './background-demo-page.component.html', - styleUrls: ['./background-demo-page.component.scss'] + styleUrls: ['./background-demo-page.component.scss'], }) export class BackgroundDemoPageComponent { codeTemplate = codeTemplate; diff --git a/packages/demo/src/app/bootstrap/components/background/background-demo/background-demo.component.ts b/packages/demo/src/app/bootstrap/components/background/background-demo/background-demo.component.ts index 9beb875082..680c28c533 100644 --- a/packages/demo/src/app/bootstrap/components/background/background-demo/background-demo.component.ts +++ b/packages/demo/src/app/bootstrap/components/background/background-demo/background-demo.component.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'app-background-demo', - templateUrl: './background-demo.component.html' + templateUrl: './background-demo.component.html', }) export class BackgroundDemoComponent { @Input() colorArray: string[]; diff --git a/packages/demo/src/app/bootstrap/components/badge/badge-demo-page/badge-demo-page.component.html b/packages/demo/src/app/bootstrap/components/badge/badge-demo-page/badge-demo-page.component.html index 12aacef41f..0b50c8fb78 100644 --- a/packages/demo/src/app/bootstrap/components/badge/badge-demo-page/badge-demo-page.component.html +++ b/packages/demo/src/app/bootstrap/components/badge/badge-demo-page/badge-demo-page.component.html @@ -3,7 +3,6 @@

      Badge

      -

      Default badges

      @@ -19,5 +18,9 @@

      Nested badges

      Interactive badges

      - +
      diff --git a/packages/demo/src/app/bootstrap/components/badge/badge-demo-page/badge-demo-page.component.ts b/packages/demo/src/app/bootstrap/components/badge/badge-demo-page/badge-demo-page.component.ts index 8f3100c96f..e2b3bb7a40 100644 --- a/packages/demo/src/app/bootstrap/components/badge/badge-demo-page/badge-demo-page.component.ts +++ b/packages/demo/src/app/bootstrap/components/badge/badge-demo-page/badge-demo-page.component.ts @@ -1,13 +1,15 @@ import { Component } from '@angular/core'; -const badgeTemplate = require('!!raw-loader!../badge-demo/badge-demo.component.html').default; -const badgeNestedTemplate = require('!!raw-loader!../badge-nested-demo/badge-nested-demo.component.html').default; -const badgeInteractiveTemplate = require('!!raw-loader!../badge-interactive-demo/badge-interactive-demo.component.html').default; +const badgeTemplate = require('!!raw-loader!../badge-demo/badge-demo.component.html').default; +const badgeNestedTemplate = + require('!!raw-loader!../badge-nested-demo/badge-nested-demo.component.html').default; +const badgeInteractiveTemplate = + require('!!raw-loader!../badge-interactive-demo/badge-interactive-demo.component.html').default; @Component({ selector: 'app-badge-demo-page', - templateUrl: './badge-demo-page.component.html' + templateUrl: './badge-demo-page.component.html', }) -export class BadgeDemoPageComponent { +export class BadgeDemoPageComponent { badgeTemplate = badgeTemplate; badgeNestedTemplate = badgeNestedTemplate; badgeInteractiveTemplate = badgeInteractiveTemplate; diff --git a/packages/demo/src/app/bootstrap/components/badge/badge-demo/badge-demo.component.ts b/packages/demo/src/app/bootstrap/components/badge/badge-demo/badge-demo.component.ts index 9b27d0098c..0f43f4eee4 100644 --- a/packages/demo/src/app/bootstrap/components/badge/badge-demo/badge-demo.component.ts +++ b/packages/demo/src/app/bootstrap/components/badge/badge-demo/badge-demo.component.ts @@ -3,7 +3,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-badge-demo', templateUrl: './badge-demo.component.html', - styleUrls: ['./badge-demo.component.scss'] + styleUrls: ['./badge-demo.component.scss'], }) -export class BadgeDemoComponent { -} +export class BadgeDemoComponent {} diff --git a/packages/demo/src/app/bootstrap/components/badge/badge-interactive-demo/badge-interactive-demo.component.html b/packages/demo/src/app/bootstrap/components/badge/badge-interactive-demo/badge-interactive-demo.component.html index 26ea9244fa..a93b8e158d 100644 --- a/packages/demo/src/app/bootstrap/components/badge/badge-interactive-demo/badge-interactive-demo.component.html +++ b/packages/demo/src/app/bootstrap/components/badge/badge-interactive-demo/badge-interactive-demo.component.html @@ -55,47 +55,69 @@

      Buttons

      Checkable

      - +
      - +
      - - + +
      - - + +
      - +
      - +
      - +
      - +
      @@ -53,8 +65,12 @@

      Radio buttons

      - - + +
      @@ -89,13 +105,21 @@

      Radio buttons

      - +

      Bad example

      -

      The only supported button variant for button groups is .btn-secondary.

      +

      + The only supported button variant for button groups is + .btn-secondary + . +

      diff --git a/packages/demo/src/app/bootstrap/components/button-group/button-group-demo-page/button-group-demo-page.component.ts b/packages/demo/src/app/bootstrap/components/button-group/button-group-demo-page/button-group-demo-page.component.ts index 1adb3f9a31..50c27c3021 100644 --- a/packages/demo/src/app/bootstrap/components/button-group/button-group-demo-page/button-group-demo-page.component.ts +++ b/packages/demo/src/app/bootstrap/components/button-group/button-group-demo-page/button-group-demo-page.component.ts @@ -1,12 +1,20 @@ import { Component } from '@angular/core'; -const checkboxTemplate = require('!!raw-loader!../button-group-checkbox-demo/button-group-checkbox-demo.component.html').default; -const checkboxController = require('!!raw-loader!../button-group-checkbox-demo/button-group-checkbox-demo.component.ts').default; -const reactiveCheckboxTemplate = require('!!raw-loader!../button-group-reactive-checkbox-demo/button-group-reactive-checkbox-demo.component.html').default; -const reactiveCheckboxController = require('!!raw-loader!../button-group-reactive-checkbox-demo/button-group-reactive-checkbox-demo.component.ts').default; -const radioTemplate = require('!!raw-loader!../button-group-radio-demo/button-group-radio-demo.component.html').default; -const radioController = require('!!raw-loader!../button-group-radio-demo/button-group-radio-demo.component.ts').default; -const reactiveRadioTemplate = require('!!raw-loader!../button-group-reactive-radio-demo/button-group-reactive-radio-demo.component.html').default; -const reactiveRadioController = require('!!raw-loader!../button-group-reactive-radio-demo/button-group-reactive-radio-demo.component.ts').default; +const checkboxTemplate = + require('!!raw-loader!../button-group-checkbox-demo/button-group-checkbox-demo.component.html').default; +const checkboxController = + require('!!raw-loader!../button-group-checkbox-demo/button-group-checkbox-demo.component.ts').default; +const reactiveCheckboxTemplate = + require('!!raw-loader!../button-group-reactive-checkbox-demo/button-group-reactive-checkbox-demo.component.html').default; +const reactiveCheckboxController = + require('!!raw-loader!../button-group-reactive-checkbox-demo/button-group-reactive-checkbox-demo.component.ts').default; +const radioTemplate = + require('!!raw-loader!../button-group-radio-demo/button-group-radio-demo.component.html').default; +const radioController = + require('!!raw-loader!../button-group-radio-demo/button-group-radio-demo.component.ts').default; +const reactiveRadioTemplate = + require('!!raw-loader!../button-group-reactive-radio-demo/button-group-reactive-radio-demo.component.html').default; +const reactiveRadioController = + require('!!raw-loader!../button-group-reactive-radio-demo/button-group-reactive-radio-demo.component.ts').default; enum FormType { TemplateDriven, @@ -15,7 +23,7 @@ enum FormType { @Component({ selector: 'app-button-group-demo-page', - templateUrl: './button-group-demo-page.component.html' + templateUrl: './button-group-demo-page.component.html', }) export class ButtonGroupDemoPageComponent { readonly FormType = FormType; diff --git a/packages/demo/src/app/bootstrap/components/button-group/button-group-radio-demo/button-group-radio-demo.component.html b/packages/demo/src/app/bootstrap/components/button-group/button-group-radio-demo/button-group-radio-demo.component.html index 65bbe3c0d2..dafc6451ea 100644 --- a/packages/demo/src/app/bootstrap/components/button-group/button-group-radio-demo/button-group-radio-demo.component.html +++ b/packages/demo/src/app/bootstrap/components/button-group/button-group-radio-demo/button-group-radio-demo.component.html @@ -1,13 +1,47 @@
      - + - + - + - +
      diff --git a/packages/demo/src/app/bootstrap/components/button-group/button-group-radio-demo/button-group-radio-demo.component.ts b/packages/demo/src/app/bootstrap/components/button-group/button-group-radio-demo/button-group-radio-demo.component.ts index 9ecff09196..b52b7bfc55 100644 --- a/packages/demo/src/app/bootstrap/components/button-group/button-group-radio-demo/button-group-radio-demo.component.ts +++ b/packages/demo/src/app/bootstrap/components/button-group/button-group-radio-demo/button-group-radio-demo.component.ts @@ -1,6 +1,11 @@ import { Component } from '@angular/core'; -enum Choice { One, Two, Three, Four } +enum Choice { + One, + Two, + Three, + Four, +} @Component({ selector: 'app-button-group-radio-demo', diff --git a/packages/demo/src/app/bootstrap/components/button-group/button-group-reactive-checkbox-demo/button-group-reactive-checkbox-demo.component.html b/packages/demo/src/app/bootstrap/components/button-group/button-group-reactive-checkbox-demo/button-group-reactive-checkbox-demo.component.html index 0470ee6509..74d27d6c81 100644 --- a/packages/demo/src/app/bootstrap/components/button-group/button-group-reactive-checkbox-demo/button-group-reactive-checkbox-demo.component.html +++ b/packages/demo/src/app/bootstrap/components/button-group/button-group-reactive-checkbox-demo/button-group-reactive-checkbox-demo.component.html @@ -1,13 +1,42 @@ -
      - +
      + - + - + - +
      diff --git a/packages/demo/src/app/bootstrap/components/button-group/button-group-reactive-checkbox-demo/button-group-reactive-checkbox-demo.component.ts b/packages/demo/src/app/bootstrap/components/button-group/button-group-reactive-checkbox-demo/button-group-reactive-checkbox-demo.component.ts index d096a9569a..0636f8d15a 100644 --- a/packages/demo/src/app/bootstrap/components/button-group/button-group-reactive-checkbox-demo/button-group-reactive-checkbox-demo.component.ts +++ b/packages/demo/src/app/bootstrap/components/button-group/button-group-reactive-checkbox-demo/button-group-reactive-checkbox-demo.component.ts @@ -13,7 +13,7 @@ export class ButtonGroupReactiveCheckboxDemoComponent { one: true, two: false, three: true, - four: {value: false, disabled: true}, + four: { value: false, disabled: true }, }); } } diff --git a/packages/demo/src/app/bootstrap/components/button-group/button-group-reactive-radio-demo/button-group-reactive-radio-demo.component.html b/packages/demo/src/app/bootstrap/components/button-group/button-group-reactive-radio-demo/button-group-reactive-radio-demo.component.html index 6d9a2b22d0..003c6c7413 100644 --- a/packages/demo/src/app/bootstrap/components/button-group/button-group-reactive-radio-demo/button-group-reactive-radio-demo.component.html +++ b/packages/demo/src/app/bootstrap/components/button-group/button-group-reactive-radio-demo/button-group-reactive-radio-demo.component.html @@ -1,13 +1,42 @@
      - + - + - + - +
      diff --git a/packages/demo/src/app/bootstrap/components/button-group/button-group-reactive-radio-demo/button-group-reactive-radio-demo.component.ts b/packages/demo/src/app/bootstrap/components/button-group/button-group-reactive-radio-demo/button-group-reactive-radio-demo.component.ts index 3127ea7b2a..8e168b0873 100644 --- a/packages/demo/src/app/bootstrap/components/button-group/button-group-reactive-radio-demo/button-group-reactive-radio-demo.component.ts +++ b/packages/demo/src/app/bootstrap/components/button-group/button-group-reactive-radio-demo/button-group-reactive-radio-demo.component.ts @@ -1,7 +1,12 @@ import { Component } from '@angular/core'; import { FormControl } from '@angular/forms'; -enum Choice { One, Two, Three, Four} +enum Choice { + One, + Two, + Three, + Four, +} @Component({ selector: 'app-button-group-reactive-radio-demo', diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/accent-buttons/accent-buttons.component.html b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/accent-buttons/accent-buttons.component.html index 83d14ac2ae..3792de311a 100644 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/accent-buttons/accent-buttons.component.html +++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/accent-buttons/accent-buttons.component.html @@ -1,12 +1,20 @@ - + - + - + - + diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/accent-buttons/accent-buttons.component.spec.ts b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/accent-buttons/accent-buttons.component.spec.ts index db8289f730..905da8f52b 100644 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/accent-buttons/accent-buttons.component.spec.ts +++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/accent-buttons/accent-buttons.component.spec.ts @@ -8,9 +8,8 @@ describe('AccentButtonsComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ AccentButtonsComponent ] - }) - .compileComponents(); + declarations: [AccentButtonsComponent], + }).compileComponents(); }); beforeEach(() => { diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/accent-buttons/accent-buttons.component.ts b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/accent-buttons/accent-buttons.component.ts index 56b8f69003..fe9995db44 100644 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/accent-buttons/accent-buttons.component.ts +++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/accent-buttons/accent-buttons.component.ts @@ -2,7 +2,7 @@ import { Component, ElementRef } from '@angular/core'; @Component({ selector: 'app-accent-buttons', - templateUrl: './accent-buttons.component.html' + templateUrl: './accent-buttons.component.html', }) export class AccentButtonsComponent { elementRef: ElementRef; diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/animated-buttons/animated-buttons.component.html b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/animated-buttons/animated-buttons.component.html index 841c3f3b90..e8ad0bd36c 100644 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/animated-buttons/animated-buttons.component.html +++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/animated-buttons/animated-buttons.component.html @@ -1,4 +1,8 @@ - - + + diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/animated-buttons/animated-buttons.component.spec.ts b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/animated-buttons/animated-buttons.component.spec.ts index 6b40ed933a..34e719ec87 100644 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/animated-buttons/animated-buttons.component.spec.ts +++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/animated-buttons/animated-buttons.component.spec.ts @@ -8,9 +8,8 @@ describe('AnimatedButtonsComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ AnimatedButtonsComponent ] - }) - .compileComponents(); + declarations: [AnimatedButtonsComponent], + }).compileComponents(); }); beforeEach(() => { diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/animated-buttons/animated-buttons.component.ts b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/animated-buttons/animated-buttons.component.ts index 79d3eb6da4..9bf9a79fd9 100644 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/animated-buttons/animated-buttons.component.ts +++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/animated-buttons/animated-buttons.component.ts @@ -2,10 +2,9 @@ import { Component, ElementRef } from '@angular/core'; @Component({ selector: 'app-animated-buttons', - templateUrl: './animated-buttons.component.html' + templateUrl: './animated-buttons.component.html', }) export class AnimatedButtonsComponent { - elementRef: ElementRef; constructor(elementRef: ElementRef) { diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/button-disabled/button-disabled.component.ts b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/button-disabled/button-disabled.component.ts index 3acd991d55..4d1d9d396c 100644 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/button-disabled/button-disabled.component.ts +++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/button-disabled/button-disabled.component.ts @@ -2,7 +2,7 @@ import { Component, ElementRef } from '@angular/core'; @Component({ selector: 'app-button-disabled', - templateUrl: './button-disabled.component.html' + templateUrl: './button-disabled.component.html', }) export class ButtonDisabledComponent { elementRef: ElementRef; diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/button-sizes/button-sizes.component.spec.ts b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/button-sizes/button-sizes.component.spec.ts index 632d74eda4..142f3ec960 100644 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/button-sizes/button-sizes.component.spec.ts +++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/button-sizes/button-sizes.component.spec.ts @@ -8,9 +8,8 @@ describe('ButtonSizesComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ ButtonSizesComponent ] - }) - .compileComponents(); + declarations: [ButtonSizesComponent], + }).compileComponents(); }); beforeEach(() => { diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/button-sizes/button-sizes.component.ts b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/button-sizes/button-sizes.component.ts index b7134ce1a6..39357bc439 100644 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/button-sizes/button-sizes.component.ts +++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/button-sizes/button-sizes.component.ts @@ -5,7 +5,6 @@ import { Component, ElementRef } from '@angular/core'; templateUrl: './button-sizes.component.html', }) export class ButtonSizesComponent { - elementRef: ElementRef; constructor(elementRef: ElementRef) { diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/button-tags/button-tags.component.html b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/button-tags/button-tags.component.html index 18e204ce3d..5b746b82c2 100644 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/button-tags/button-tags.component.html +++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/button-tags/button-tags.component.html @@ -1,5 +1,5 @@ Link - - - + + + diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/button-tags/button-tags.component.ts b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/button-tags/button-tags.component.ts index f141aea4d1..9015309b9d 100644 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/button-tags/button-tags.component.ts +++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/button-tags/button-tags.component.ts @@ -2,7 +2,7 @@ import { Component, ElementRef } from '@angular/core'; @Component({ selector: 'app-button-tags', - templateUrl: './button-tags.component.html' + templateUrl: './button-tags.component.html', }) export class ButtonTagsComponent { elementRef: ElementRef; diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/buttons-demo.component.html b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/buttons-demo.component.html index 68eae4b456..bef49b7623 100644 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/buttons-demo.component.html +++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/buttons-demo.component.html @@ -1,77 +1,155 @@

      Default buttons

      -

      Use these buttons in most situations. If you don't want the animation, you can leave out the .btn-animated class.

      +

      + Use these buttons in most situations. If you don't want the animation, you can leave out the + .btn-animated + class. +

      - +

      Disabled buttons

      -
      -

      Accessibility

      -

      Disabled controls are an accessibility anti-pattern for various reasons:

      -
        -
      1. They are not focussable, screen reader users or keyboard users cannot focus the button and might miss information that is hidden e.g. in a tooltip.
        2. -
      2. The color contrast of disabled button is very low.
        3. -
      -

      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.

      -
      - - +
      +

      Accessibility

      +

      Disabled controls are an accessibility anti-pattern for various reasons:

      +
        +
      1. + They are not focussable, screen reader users or keyboard users cannot focus the button and + might miss information that is hidden e.g. in a tooltip. +
        2. +
      2. The color contrast of disabled button is very low.
        3. +
      +

      + 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. +

      +
      + +

      Animated

      The animated buttons need a span around the text!

      - - + +

      Supported button tags

      - +

      Sizes

      - - + +

      Icon buttons

      - - + +

      Icon buttons with text

      -

      Icon buttons with text should not have the class .btn-icon, otherwise the horizontal padding is not correct.

      +

      + Icon buttons with text should not have the class + .btn-icon + , otherwise the horizontal padding is not correct. +

      - +

      Accent colors

      - +

      Inverted buttons

      -

      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.

      +

      + 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. +

      - +
      - +

      Contextual Buttons

      -

      These are only allowed for intranet applications! The link button cannot be animated.

      +
      +

      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/buttons-demo.component.ts b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/buttons-demo.component.ts index 3713a59474..29c98d6984 100644 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/buttons-demo.component.ts +++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/buttons-demo.component.ts @@ -2,6 +2,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-buttons-demo', - templateUrl: './buttons-demo.component.html' + templateUrl: './buttons-demo.component.html', }) export class ButtonsDemoComponent {} diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/buttons-demo.style.scss b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/buttons-demo.style.scss index 8c13bcec73..34d274aa81 100644 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/buttons-demo.style.scss +++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/buttons-demo.style.scss @@ -1,10 +1,10 @@ section { - .btn + .btn { - margin-left: 1rem; - } + .btn + .btn { + margin-left: 1rem; + } } .pi-3193-white { - background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23FFF' d='M26 1.067l-23.067 23.067-1.6 6.533 6.533-1.6 23.067-23.067-4.933-4.933zM29.067 6l-1.733 1.733-3.067-3.067 1.733-1.733 3.067 3.067zM26.4 8.667l-18.267 18.267-3.067-3.067 18.267-18.267 3.067 3.067zM3.067 28.933l1.067-4 3.067 3.067-4.133 0.933z'%3E%3C/path%3E%3C/svg%3E"); - border-color: #FFF; -} \ No newline at end of file + background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23FFF' d='M26 1.067l-23.067 23.067-1.6 6.533 6.533-1.6 23.067-23.067-4.933-4.933zM29.067 6l-1.733 1.733-3.067-3.067 1.733-1.733 3.067 3.067zM26.4 8.667l-18.267 18.267-3.067-3.067 18.267-18.267 3.067 3.067zM3.067 28.933l1.067-4 3.067 3.067-4.133 0.933z'%3E%3C/path%3E%3C/svg%3E"); + border-color: #fff; +} diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/contextual-buttons/contextual-buttons.component.spec.ts b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/contextual-buttons/contextual-buttons.component.spec.ts index 4bdaf73adc..dc1fdfa52e 100644 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/contextual-buttons/contextual-buttons.component.spec.ts +++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/contextual-buttons/contextual-buttons.component.spec.ts @@ -8,9 +8,8 @@ describe('ContextualButtonsComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ ContextualButtonsComponent ] - }) - .compileComponents(); + declarations: [ContextualButtonsComponent], + }).compileComponents(); }); beforeEach(() => { diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/contextual-buttons/contextual-buttons.component.ts b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/contextual-buttons/contextual-buttons.component.ts index ff0ed2b234..9b1ef94ee5 100644 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/contextual-buttons/contextual-buttons.component.ts +++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/contextual-buttons/contextual-buttons.component.ts @@ -2,10 +2,9 @@ import { Component, ElementRef } from '@angular/core'; @Component({ selector: 'app-contextual-buttons', - templateUrl: './contextual-buttons.component.html' + templateUrl: './contextual-buttons.component.html', }) export class ContextualButtonsComponent { - elementRef: ElementRef; constructor(elementRef: ElementRef) { diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/default-buttons/default-buttons.component.ts b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/default-buttons/default-buttons.component.ts index 6aaf0262f6..fed20cc587 100644 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/default-buttons/default-buttons.component.ts +++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/default-buttons/default-buttons.component.ts @@ -14,5 +14,4 @@ export class DefaultButtonsComponent { get templateString() { return this.elementRef.nativeElement.innerHTML; } - } diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/icon-buttons-text/icon-buttons-text.component.html b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/icon-buttons-text/icon-buttons-text.component.html index 41948c02e1..bf52fd1ffe 100644 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/icon-buttons-text/icon-buttons-text.component.html +++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/icon-buttons-text/icon-buttons-text.component.html @@ -1,12 +1,36 @@

      - - - - + + + +

      - - - - + + + +

      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 index 125918b2fb..b12343ea76 100644 --- 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 @@ -8,9 +8,8 @@ describe('IconButtonsTextComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ IconButtonsTextComponent ] - }) - .compileComponents(); + declarations: [IconButtonsTextComponent], + }).compileComponents(); }); beforeEach(() => { diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/icon-buttons-text/icon-buttons-text.component.ts b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/icon-buttons-text/icon-buttons-text.component.ts index ecf6856b21..17423616b1 100644 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/icon-buttons-text/icon-buttons-text.component.ts +++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/icon-buttons-text/icon-buttons-text.component.ts @@ -2,10 +2,9 @@ import { Component, ElementRef } from '@angular/core'; @Component({ selector: 'app-icon-buttons-text', - templateUrl: './icon-buttons-text.component.html' + templateUrl: './icon-buttons-text.component.html', }) export class IconButtonsTextComponent { - elementRef: ElementRef; constructor(elementRef: ElementRef) { diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/icon-buttons/icon-buttons.component.spec.ts b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/icon-buttons/icon-buttons.component.spec.ts index 618bd0cc78..a8412327b7 100644 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/icon-buttons/icon-buttons.component.spec.ts +++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/icon-buttons/icon-buttons.component.spec.ts @@ -8,9 +8,8 @@ describe('IconButtonsComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ IconButtonsComponent ] - }) - .compileComponents(); + declarations: [IconButtonsComponent], + }).compileComponents(); }); beforeEach(() => { diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/icon-buttons/icon-buttons.component.ts b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/icon-buttons/icon-buttons.component.ts index 6a4a01995a..4e23f559c1 100644 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/icon-buttons/icon-buttons.component.ts +++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/icon-buttons/icon-buttons.component.ts @@ -5,7 +5,6 @@ import { Component, ElementRef } from '@angular/core'; templateUrl: './icon-buttons.component.html', }) export class IconButtonsComponent { - elementRef: ElementRef; constructor(elementRef: ElementRef) { diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/inverted-buttons/inverted-buttons.component.html b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/inverted-buttons/inverted-buttons.component.html index 10fff282dd..94817e3b09 100644 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/inverted-buttons/inverted-buttons.component.html +++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/inverted-buttons/inverted-buttons.component.html @@ -1,6 +1,14 @@ - + - - - + + + diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/inverted-buttons/inverted-buttons.component.spec.ts b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/inverted-buttons/inverted-buttons.component.spec.ts index 9e32e4f99c..869400ba3c 100644 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/inverted-buttons/inverted-buttons.component.spec.ts +++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/inverted-buttons/inverted-buttons.component.spec.ts @@ -8,9 +8,8 @@ describe('InvertedButtonsComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ InvertedButtonsComponent ] - }) - .compileComponents(); + declarations: [InvertedButtonsComponent], + }).compileComponents(); }); beforeEach(() => { diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/inverted-buttons/inverted-buttons.component.ts b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/inverted-buttons/inverted-buttons.component.ts index f337975566..e17efe1392 100644 --- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/inverted-buttons/inverted-buttons.component.ts +++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/inverted-buttons/inverted-buttons.component.ts @@ -2,10 +2,9 @@ import { Component, ElementRef } from '@angular/core'; @Component({ selector: 'app-inverted-buttons', - templateUrl: './inverted-buttons.component.html' + templateUrl: './inverted-buttons.component.html', }) export class InvertedButtonsComponent { - elementRef: ElementRef; constructor(elementRef: ElementRef) { diff --git a/packages/demo/src/app/bootstrap/components/card/card-demo-page/card-demo-page.component.html b/packages/demo/src/app/bootstrap/components/card/card-demo-page/card-demo-page.component.html index 22d3561854..b694ea4078 100644 --- a/packages/demo/src/app/bootstrap/components/card/card-demo-page/card-demo-page.component.html +++ b/packages/demo/src/app/bootstrap/components/card/card-demo-page/card-demo-page.component.html @@ -7,18 +7,30 @@

      Cards

      Basic examples (Adopted from bootstrap website)

      For more information on those examples, check the bootstrap doc.

      - +

      Complex spacing examples (Adopted from bootstrap website)

      - +

      Post example (Actual use case)

      -

      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.

      +

      + 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. +

      - +
      diff --git a/packages/demo/src/app/bootstrap/components/card/card-demo-page/card-demo-page.component.spec.ts b/packages/demo/src/app/bootstrap/components/card/card-demo-page/card-demo-page.component.spec.ts index caf72c5758..33045066cc 100644 --- a/packages/demo/src/app/bootstrap/components/card/card-demo-page/card-demo-page.component.spec.ts +++ b/packages/demo/src/app/bootstrap/components/card/card-demo-page/card-demo-page.component.spec.ts @@ -8,9 +8,8 @@ describe('CardDemoPageComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ CardDemoPageComponent ] - }) - .compileComponents(); + declarations: [CardDemoPageComponent], + }).compileComponents(); })); beforeEach(() => { diff --git a/packages/demo/src/app/bootstrap/components/card/card-demo/card-demo.component.html b/packages/demo/src/app/bootstrap/components/card/card-demo/card-demo.component.html index 8b448a91c2..867bf9fde8 100644 --- a/packages/demo/src/app/bootstrap/components/card/card-demo/card-demo.component.html +++ b/packages/demo/src/app/bootstrap/components/card/card-demo/card-demo.component.html @@ -1,149 +1,159 @@
      -
      - Card image cap +
      + Card image cap
      Card title
      -

      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. +

      Go somewhere
      -
      -
      - This is some text within a card body. -
      -
      +
      +
      This is some text within a card body.
      +
      -
      -
      -
      Card title
      -
      Card subtitle
      -

      Some quick example text to build on the card title and make up the bulk of the card's content.

      - Card link - Another link -
      +
      +
      +
      Card title
      +
      Card subtitle
      +

      + Some quick example text to build on the card title and make up the bulk of the card's + content. +

      + Card link + Another link
      +
      -
      - Card image cap -
      -

      Some quick example text to build on the card title and make up the bulk of the card's content.

      -
      -
      +
      + Card image cap +
      +

      + Some quick example text to build on the card title and make up the bulk of the card's + content. +

      +
      +
      -
      -
        -
      • Cras justo odio
        • -
      • Dapibus ac facilisis in
        • -
      • Vestibulum at eros
        • -
      -
      +
      +
        +
      • Cras justo odio
        • +
      • Dapibus ac facilisis in
        • +
      • Vestibulum at eros
        • +
      +
      -
      -
      - Featured -
      -
        -
      • Cras justo odio
        • -
      • Dapibus ac facilisis in
        • -
      • Vestibulum at eros
        • -
      -
      +
      +
      Featured
      +
        +
      • Cras justo odio
        • +
      • Dapibus ac facilisis in
        • +
      • Vestibulum at eros
        • +
      +
      -
      - Card image cap -
      -
      Card title
      -

      Some quick example text to build on the card title and make up the bulk of the card's content.

      -
      -
        -
      • Cras justo odio
        • -
      • Dapibus ac facilisis in
        • -
      • Vestibulum at eros
        • -
      -
      - Card link - Another link -
      -
      +
      + Card image cap +
      +
      Card title
      +

      + Some quick example text to build on the card title and make up the bulk of the card's + content. +

      +
      +
        +
      • Cras justo odio
        • +
      • Dapibus ac facilisis in
        • +
      • Vestibulum at eros
        • +
      +
      + Card link + Another link +
      +
      -
      -
      - Featured -
      -
      -
      Special title treatment
      -

      With supporting text below as a natural lead-in to additional content.

      - Go somewhere -
      -
      +
      +
      Featured
      +
      +
      Special title treatment
      +

      + With supporting text below as a natural lead-in to additional content. +

      + Go somewhere +
      +
      -
      -
      Featured
      -
      -
      Special title treatment
      -

      With supporting text below as a natural lead-in to additional content.

      - Go somewhere -
      -
      +
      +
      Featured
      +
      +
      Special title treatment
      +

      + With supporting text below as a natural lead-in to additional content. +

      + Go somewhere +
      +
      -
      -
      - Quote -
      -
      -
      -
      -

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      -
      -
      - Someone famous in Source Title -
      -
      -
      -
      +
      +
      Quote
      +
      +
      +
      +

      + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a + ante. +

      +
      +
      + Someone famous in + Source Title +
      +
      +
      +
      -
      -
      - Featured -
      -
      -
      Special title treatment
      -

      With supporting text below as a natural lead-in to additional content.

      - Go somewhere -
      -
      - 2 days ago -
      -
      +
      +
      Featured
      +
      +
      Special title treatment
      +

      + With supporting text below as a natural lead-in to additional content. +

      + Go somewhere +
      +
      2 days ago
      +
      -
      -
      -

      Post-Example

      -
      -
      -
      Special title treatment
      -

      Example for white cards (set class: card card-white)

      - Go somewhere -
      -
      - Example Link A - Link B -
      -
      +
      +
      +

      Post-Example

      +
      +
      +
      Special title treatment
      +

      Example for white cards (set class: card card-white)

      + Go somewhere +
      +
      + Example Link A + Link B +
      +
      diff --git a/packages/demo/src/app/bootstrap/components/card/card-demo/card-demo.component.spec.ts b/packages/demo/src/app/bootstrap/components/card/card-demo/card-demo.component.spec.ts index b154c8d77d..348af8724b 100644 --- a/packages/demo/src/app/bootstrap/components/card/card-demo/card-demo.component.spec.ts +++ b/packages/demo/src/app/bootstrap/components/card/card-demo/card-demo.component.spec.ts @@ -8,9 +8,8 @@ describe('CardDemoComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ CardDemoComponent ] - }) - .compileComponents(); + declarations: [CardDemoComponent], + }).compileComponents(); })); beforeEach(() => { diff --git a/packages/demo/src/app/bootstrap/components/card/complex-card-demo/complex-card-demo.component.html b/packages/demo/src/app/bootstrap/components/card/complex-card-demo/complex-card-demo.component.html index 57a2698713..2c48d5536a 100644 --- a/packages/demo/src/app/bootstrap/components/card/complex-card-demo/complex-card-demo.component.html +++ b/packages/demo/src/app/bootstrap/components/card/complex-card-demo/complex-card-demo.component.html @@ -1,4 +1,7 @@ -

      The bootstrap sizing utilities & contextual classes can be used as shown on the bootstrap documentation.

      +

      + 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.

      Images in cards

      @@ -6,11 +9,13 @@

      Images in cards

      - Card image cap + Card image cap
      Card title
      -

      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 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

      @@ -19,26 +24,32 @@
      Card title
      Card title
      -

      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 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 image cap + Card image cap
      -

      Bad example

      -
      Don't use this in production. It's very difficult for content editors to always ensure that text is legible on an image for every browser size and all different languages.
      +
      + Don't use this in production. It's very difficult for content editors to always ensure that text + is legible on an image for every browser size and all different languages. +
      - Card image + Card image
      Card title
      -

      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 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

      @@ -54,62 +65,73 @@

      Card groups

      - Card image cap + Card image cap
      Card title
      -

      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 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 image cap + Card image cap
      Card title
      -

      This card has supporting text below as a natural lead-in to additional content.

      +

      + This card has supporting text below as a natural lead-in to additional content. +

      Last updated 3 mins ago

      - Card image cap + Card image cap
      Card title
      -

      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.

      +

      + 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

      -
      - Card image cap + Card image cap
      Card title
      -

      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 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 image cap + Card image cap
      Card title
      -

      This card has supporting text below as a natural lead-in to additional content.

      +

      + This card has supporting text below as a natural lead-in to additional content. +

      Last updated 3 mins ago
      - Card image cap + Card image cap
      Card title
      -

      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.

      +

      + 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 @@ -120,5 +142,10 @@
      Card title

      Card columns

      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.

      +

      + Default + column-count: 2 + , breakpoint md and smaller + column-count: 1 + . This can be adjusted as necessary. +

      diff --git a/packages/demo/src/app/bootstrap/components/card/complex-card-demo/complex-card-demo.component.spec.ts b/packages/demo/src/app/bootstrap/components/card/complex-card-demo/complex-card-demo.component.spec.ts index ee19284083..ac918c4358 100644 --- a/packages/demo/src/app/bootstrap/components/card/complex-card-demo/complex-card-demo.component.spec.ts +++ b/packages/demo/src/app/bootstrap/components/card/complex-card-demo/complex-card-demo.component.spec.ts @@ -8,9 +8,8 @@ describe('ComplexCardDemoComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ ComplexCardDemoComponent ] - }) - .compileComponents(); + declarations: [ComplexCardDemoComponent], + }).compileComponents(); })); beforeEach(() => { diff --git a/packages/demo/src/app/bootstrap/components/card/post-card-demo/post-card-demo.component.html b/packages/demo/src/app/bootstrap/components/card/post-card-demo/post-card-demo.component.html index 5988e416f4..322b42e7cd 100644 --- a/packages/demo/src/app/bootstrap/components/card/post-card-demo/post-card-demo.component.html +++ b/packages/demo/src/app/bootstrap/components/card/post-card-demo/post-card-demo.component.html @@ -2,14 +2,11 @@
      -
      -

      - Benutzerangaben -

      +

      Benutzerangaben

      @@ -19,10 +16,13 @@

      - Herr
      - Hans Muster
      + Herr +
      + Hans Muster +
      - Musterstrasse 1
      + Musterstrasse 1 +
      1234 Musterstadt
      @@ -30,7 +30,8 @@

      - Sprache: Deutsch + Sprache: + Deutsch

      @@ -44,9 +45,7 @@

      -

      - Telefonnummern -

      +

      Telefonnummern

      @@ -69,9 +68,7 @@

      -

      - Guthaben & Zahlungsmittel -

      +

      Guthaben & Zahlungsmittel

      @@ -83,7 +80,8 @@

      CHF 25.00

      - Debit Direct****** 346 + Debit Direct + ****** 346

      @@ -100,9 +98,7 @@

      CHF 25.00

      -

      - Login & Sicherheit -

      +

      Login & Sicherheit

      diff --git a/packages/demo/src/app/bootstrap/components/card/post-card-demo/post-card-demo.component.spec.ts b/packages/demo/src/app/bootstrap/components/card/post-card-demo/post-card-demo.component.spec.ts index 2e0b8921c2..4e1a9ffe39 100644 --- a/packages/demo/src/app/bootstrap/components/card/post-card-demo/post-card-demo.component.spec.ts +++ b/packages/demo/src/app/bootstrap/components/card/post-card-demo/post-card-demo.component.spec.ts @@ -8,9 +8,8 @@ describe('PostCardDemoComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ PostCardDemoComponent ] - }) - .compileComponents(); + declarations: [PostCardDemoComponent], + }).compileComponents(); })); beforeEach(() => { diff --git a/packages/demo/src/app/bootstrap/components/form-check/form-check-demo-page/form-check-demo-page.component.html b/packages/demo/src/app/bootstrap/components/form-check/form-check-demo-page/form-check-demo-page.component.html index aa4ace2292..3cac2201f7 100644 --- a/packages/demo/src/app/bootstrap/components/form-check/form-check-demo-page/form-check-demo-page.component.html +++ b/packages/demo/src/app/bootstrap/components/form-check/form-check-demo-page/form-check-demo-page.component.html @@ -6,5 +6,8 @@

      Forms checkbox

      - - + diff --git a/packages/demo/src/app/bootstrap/components/form-check/form-check-demo-page/form-check-demo-page.component.ts b/packages/demo/src/app/bootstrap/components/form-check/form-check-demo-page/form-check-demo-page.component.ts index 450212f797..6a6a955152 100644 --- a/packages/demo/src/app/bootstrap/components/form-check/form-check-demo-page/form-check-demo-page.component.ts +++ b/packages/demo/src/app/bootstrap/components/form-check/form-check-demo-page/form-check-demo-page.component.ts @@ -1,9 +1,10 @@ import { Component } from '@angular/core'; -const codeTemplate = require('!!raw-loader!../form-check-demo/form-check-demo.component.html').default; +const codeTemplate = + require('!!raw-loader!../form-check-demo/form-check-demo.component.html').default; @Component({ selector: 'app-form-check-demo-page', - templateUrl: './form-check-demo-page.component.html' + templateUrl: './form-check-demo-page.component.html', }) export class FormCheckDemoPageComponent { codeTemplate = codeTemplate; diff --git a/packages/demo/src/app/bootstrap/components/form-check/form-check-demo/form-check-demo.component.ts b/packages/demo/src/app/bootstrap/components/form-check/form-check-demo/form-check-demo.component.ts index c5d9544595..c7718bb8ef 100644 --- a/packages/demo/src/app/bootstrap/components/form-check/form-check-demo/form-check-demo.component.ts +++ b/packages/demo/src/app/bootstrap/components/form-check/form-check-demo/form-check-demo.component.ts @@ -1,13 +1,13 @@ -import {Component, ElementRef, ViewChildren, QueryList, AfterViewInit} from '@angular/core'; +import { Component, ElementRef, ViewChildren, QueryList, AfterViewInit } from '@angular/core'; @Component({ selector: 'app-form-check-demo', - templateUrl: './form-check-demo.component.html' + templateUrl: './form-check-demo.component.html', }) export class FormCheckDemoComponent implements AfterViewInit { @ViewChildren('indeterminate') indeterminateChecks: QueryList; ngAfterViewInit(): void { - this.indeterminateChecks.forEach(check => check.nativeElement.indeterminate = true); + this.indeterminateChecks.forEach(check => (check.nativeElement.indeterminate = true)); } } diff --git a/packages/demo/src/app/bootstrap/components/form-control/form-control-demo-page/form-control-demo-page.component.html b/packages/demo/src/app/bootstrap/components/form-control/form-control-demo-page/form-control-demo-page.component.html index 1d9fd53d19..1542f7feda 100644 --- a/packages/demo/src/app/bootstrap/components/form-control/form-control-demo-page/form-control-demo-page.component.html +++ b/packages/demo/src/app/bootstrap/components/form-control/form-control-demo-page/form-control-demo-page.component.html @@ -9,13 +9,20 @@

      This will make it easier to select the appropriate size variant: small for internal - applications, large for external applications.
      - .form-control-rg and .form-control-md are deprecated and will be removed - in the next major version. + applications, large for external applications. +
      + .form-control-rg + and + .form-control-md + are deprecated and will be removed in the next major version.
      - + diff --git a/packages/demo/src/app/bootstrap/components/form-control/form-control-demo/form-control-demo.component.ts b/packages/demo/src/app/bootstrap/components/form-control/form-control-demo/form-control-demo.component.ts index d6ef438b02..b6e0b5c200 100644 --- a/packages/demo/src/app/bootstrap/components/form-control/form-control-demo/form-control-demo.component.ts +++ b/packages/demo/src/app/bootstrap/components/form-control/form-control-demo/form-control-demo.component.ts @@ -3,8 +3,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-form-control-demo', templateUrl: './form-control-demo.component.html', - styleUrls: ['./form-control-demo.component.scss'] + styleUrls: ['./form-control-demo.component.scss'], }) -export class FormControlDemoComponent { - -} +export class FormControlDemoComponent {} diff --git a/packages/demo/src/app/bootstrap/components/form-file/form-file-demo-page/form-file-demo-page.component.html b/packages/demo/src/app/bootstrap/components/form-file/form-file-demo-page/form-file-demo-page.component.html index 75a6dbd3ee..2e931d406d 100644 --- a/packages/demo/src/app/bootstrap/components/form-file/form-file-demo-page/form-file-demo-page.component.html +++ b/packages/demo/src/app/bootstrap/components/form-file/form-file-demo-page/form-file-demo-page.component.html @@ -9,14 +9,20 @@

      This will make it easier to select the appropriate size variant: small for internal - applications, large for external applications.
      - .form-control-rg and .form-control-md are deprecated and will be removed - in the next major version. + applications, large for external applications. +
      + .form-control-rg + and + .form-control-md + are deprecated and will be removed in the next major version.
      - - + diff --git a/packages/demo/src/app/bootstrap/components/form-file/form-file-demo-page/form-file-demo-page.component.ts b/packages/demo/src/app/bootstrap/components/form-file/form-file-demo-page/form-file-demo-page.component.ts index 62d908003d..6df0edf652 100644 --- a/packages/demo/src/app/bootstrap/components/form-file/form-file-demo-page/form-file-demo-page.component.ts +++ b/packages/demo/src/app/bootstrap/components/form-file/form-file-demo-page/form-file-demo-page.component.ts @@ -1,10 +1,11 @@ import { Component } from '@angular/core'; -const codeTemplate = require('!!raw-loader!../form-file-demo/form-file-demo.component.html').default; +const codeTemplate = + require('!!raw-loader!../form-file-demo/form-file-demo.component.html').default; @Component({ selector: 'app-form-file-demo-page', - templateUrl: './form-file-demo-page.component.html' + templateUrl: './form-file-demo-page.component.html', }) -export class FormFileDemoPageComponent{ +export class FormFileDemoPageComponent { codeTemplate = codeTemplate; } diff --git a/packages/demo/src/app/bootstrap/components/form-file/form-file-demo/form-file-demo.component.ts b/packages/demo/src/app/bootstrap/components/form-file/form-file-demo/form-file-demo.component.ts index 25eeda0457..26a50d1ad7 100644 --- a/packages/demo/src/app/bootstrap/components/form-file/form-file-demo/form-file-demo.component.ts +++ b/packages/demo/src/app/bootstrap/components/form-file/form-file-demo/form-file-demo.component.ts @@ -3,8 +3,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-form-file-demo', templateUrl: './form-file-demo.component.html', - styleUrls: ['./form-file-demo.component.scss'] + styleUrls: ['./form-file-demo.component.scss'], }) -export class FormFileDemoComponent { - -} +export class FormFileDemoComponent {} diff --git a/packages/demo/src/app/bootstrap/components/form-radio/form-radio-demo-page/form-radio-demo-page.component.html b/packages/demo/src/app/bootstrap/components/form-radio/form-radio-demo-page/form-radio-demo-page.component.html index 8fc2872532..c47f190d76 100644 --- a/packages/demo/src/app/bootstrap/components/form-radio/form-radio-demo-page/form-radio-demo-page.component.html +++ b/packages/demo/src/app/bootstrap/components/form-radio/form-radio-demo-page/form-radio-demo-page.component.html @@ -6,5 +6,8 @@

      Form radio button

      - - + 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 index 6536cc1d67..ce5a000db6 100644 --- 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 @@ -6,19 +6,32 @@

      Form range

      Recommended form range

      -

      It is recommended to add the FormRangeDirective to your project so that the range inputs behavior is complete.

      +

      + It is recommended to add the + + FormRangeDirective + + to your project so that the range inputs behavior is complete. +

      - +

      Basic form range

      Range inputs can still work without the directive:

      - +
      diff --git a/packages/demo/src/app/bootstrap/components/form-range/form-range-demo-page/form-range-demo-page.component.ts b/packages/demo/src/app/bootstrap/components/form-range/form-range-demo-page/form-range-demo-page.component.ts index 29a1ae5f6b..dd63c1fd76 100644 --- a/packages/demo/src/app/bootstrap/components/form-range/form-range-demo-page/form-range-demo-page.component.ts +++ b/packages/demo/src/app/bootstrap/components/form-range/form-range-demo-page/form-range-demo-page.component.ts @@ -1,10 +1,12 @@ import { Component } from '@angular/core'; -const basicCodeTemplate = require('!!raw-loader!../form-range-demo/form-range-demo.component.html').default; -const customCodeTemplate = require('!!raw-loader!../form-range-custom-demo/form-range-custom-demo.component.html').default; +const basicCodeTemplate = + require('!!raw-loader!../form-range-demo/form-range-demo.component.html').default; +const customCodeTemplate = + require('!!raw-loader!../form-range-custom-demo/form-range-custom-demo.component.html').default; @Component({ selector: 'app-form-range-demo-page', - templateUrl: './form-range-demo-page.component.html' + templateUrl: './form-range-demo-page.component.html', }) export class FormRangeDemoPageComponent { basicCodeTemplate = basicCodeTemplate; diff --git a/packages/demo/src/app/bootstrap/components/form-range/form-range-demo/form-range-demo.component.html b/packages/demo/src/app/bootstrap/components/form-range/form-range-demo/form-range-demo.component.html index f2f9af6cc4..298997f815 100644 --- a/packages/demo/src/app/bootstrap/components/form-range/form-range-demo/form-range-demo.component.html +++ b/packages/demo/src/app/bootstrap/components/form-range/form-range-demo/form-range-demo.component.html @@ -1,2 +1,11 @@ - + diff --git a/packages/demo/src/app/bootstrap/components/form-select-multiple/form-select-multiple-demo-page/form-select-multiple-demo-page.component.html b/packages/demo/src/app/bootstrap/components/form-select-multiple/form-select-multiple-demo-page/form-select-multiple-demo-page.component.html index a7e8b2d943..86b9f5930c 100644 --- a/packages/demo/src/app/bootstrap/components/form-select-multiple/form-select-multiple-demo-page/form-select-multiple-demo-page.component.html +++ b/packages/demo/src/app/bootstrap/components/form-select-multiple/form-select-multiple-demo-page/form-select-multiple-demo-page.component.html @@ -9,13 +9,20 @@

      This will make it easier to select the appropriate size variant: small for internal - applications, large for external applications.
      - .form-select-rg and .form-select-md are deprecated and will be removed - in the next major version. + applications, large for external applications. +
      + .form-select-rg + and + .form-select-md + are deprecated and will be removed in the next major version.
      - + diff --git a/packages/demo/src/app/bootstrap/components/form-select-multiple/form-select-multiple-demo-page/form-select-multiple-demo-page.component.ts b/packages/demo/src/app/bootstrap/components/form-select-multiple/form-select-multiple-demo-page/form-select-multiple-demo-page.component.ts index e38f405dc6..e8d2439f52 100644 --- a/packages/demo/src/app/bootstrap/components/form-select-multiple/form-select-multiple-demo-page/form-select-multiple-demo-page.component.ts +++ b/packages/demo/src/app/bootstrap/components/form-select-multiple/form-select-multiple-demo-page/form-select-multiple-demo-page.component.ts @@ -1,10 +1,11 @@ import { Component } from '@angular/core'; -const codeTemplate = require('!!raw-loader!../form-select-multiple-demo/form-select-multiple-demo.component.html').default; +const codeTemplate = + require('!!raw-loader!../form-select-multiple-demo/form-select-multiple-demo.component.html').default; @Component({ selector: 'app-multiple-select-demo-page', - templateUrl: './form-select-multiple-demo-page.component.html' + templateUrl: './form-select-multiple-demo-page.component.html', }) export class FormSelectMultipleDemoPageComponent { - codeTemplate = codeTemplate; + codeTemplate = codeTemplate; } diff --git a/packages/demo/src/app/bootstrap/components/form-select-multiple/form-select-multiple-demo/form-select-multiple-demo.component.ts b/packages/demo/src/app/bootstrap/components/form-select-multiple/form-select-multiple-demo/form-select-multiple-demo.component.ts index 87b2645168..4d57702e97 100644 --- a/packages/demo/src/app/bootstrap/components/form-select-multiple/form-select-multiple-demo/form-select-multiple-demo.component.ts +++ b/packages/demo/src/app/bootstrap/components/form-select-multiple/form-select-multiple-demo/form-select-multiple-demo.component.ts @@ -2,8 +2,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-multiple-select-demo', - templateUrl: './form-select-multiple-demo.component.html' + templateUrl: './form-select-multiple-demo.component.html', }) -export class FormSelectMultipleDemoComponent { - -} +export class FormSelectMultipleDemoComponent {} diff --git a/packages/demo/src/app/bootstrap/components/form-select/form-select-demo-page/form-select-demo-page.component.html b/packages/demo/src/app/bootstrap/components/form-select/form-select-demo-page/form-select-demo-page.component.html index eed6efcf40..3cf688bb26 100644 --- a/packages/demo/src/app/bootstrap/components/form-select/form-select-demo-page/form-select-demo-page.component.html +++ b/packages/demo/src/app/bootstrap/components/form-select/form-select-demo-page/form-select-demo-page.component.html @@ -9,9 +9,12 @@

      This will make it easier to select the appropriate size variant: small for internal - applications, large for external applications.
      - .form-select-rg and .form-select-md are deprecated and will be removed - in the next major version. + applications, large for external applications. +
      + .form-select-rg + and + .form-select-md + are deprecated and will be removed in the next major version.
      @@ -21,8 +24,15 @@

      - - + diff --git a/packages/demo/src/app/bootstrap/components/form-select/form-select-demo-page/form-select-demo-page.component.ts b/packages/demo/src/app/bootstrap/components/form-select/form-select-demo-page/form-select-demo-page.component.ts index cc564c037e..26b94e6c74 100644 --- a/packages/demo/src/app/bootstrap/components/form-select/form-select-demo-page/form-select-demo-page.component.ts +++ b/packages/demo/src/app/bootstrap/components/form-select/form-select-demo-page/form-select-demo-page.component.ts @@ -1,10 +1,11 @@ import { Component } from '@angular/core'; -const codeTemplate = require('!!raw-loader!../form-select-demo/form-select-demo.component.html').default +const codeTemplate = + require('!!raw-loader!../form-select-demo/form-select-demo.component.html').default; @Component({ selector: 'app-select-demo-page', - templateUrl: './form-select-demo-page.component.html' + templateUrl: './form-select-demo-page.component.html', }) -export class FormSelectDemoPageComponent{ - codeTemplate = codeTemplate; +export class FormSelectDemoPageComponent { + codeTemplate = codeTemplate; } diff --git a/packages/demo/src/app/bootstrap/components/form-select/form-select-demo/form-select-demo.component.ts b/packages/demo/src/app/bootstrap/components/form-select/form-select-demo/form-select-demo.component.ts index 5ece60ff4d..ecc5069b13 100644 --- a/packages/demo/src/app/bootstrap/components/form-select/form-select-demo/form-select-demo.component.ts +++ b/packages/demo/src/app/bootstrap/components/form-select/form-select-demo/form-select-demo.component.ts @@ -3,6 +3,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-select-demo', templateUrl: './form-select-demo.component.html', - styleUrls: ['./form-select-demo.component.scss'] + styleUrls: ['./form-select-demo.component.scss'], }) export class FormSelectDemoComponent {} diff --git a/packages/demo/src/app/bootstrap/components/form-switch/form-switch-demo-page/form-switch-demo-page.component.html b/packages/demo/src/app/bootstrap/components/form-switch/form-switch-demo-page/form-switch-demo-page.component.html index e21b55b6a3..534bdde165 100644 --- a/packages/demo/src/app/bootstrap/components/form-switch/form-switch-demo-page/form-switch-demo-page.component.html +++ b/packages/demo/src/app/bootstrap/components/form-switch/form-switch-demo-page/form-switch-demo-page.component.html @@ -6,4 +6,8 @@

      Form switch

      - + diff --git a/packages/demo/src/app/bootstrap/components/form-switch/form-switch-demo-page/form-switch-demo-page.component.ts b/packages/demo/src/app/bootstrap/components/form-switch/form-switch-demo-page/form-switch-demo-page.component.ts index 3223ff5bb4..d4b2939ba5 100644 --- a/packages/demo/src/app/bootstrap/components/form-switch/form-switch-demo-page/form-switch-demo-page.component.ts +++ b/packages/demo/src/app/bootstrap/components/form-switch/form-switch-demo-page/form-switch-demo-page.component.ts @@ -1,8 +1,9 @@ -import {Component} from '@angular/core'; -const codeTemplate = require('!!raw-loader!../form-switch-demo/form-switch-demo.component.html').default; +import { Component } from '@angular/core'; +const codeTemplate = + require('!!raw-loader!../form-switch-demo/form-switch-demo.component.html').default; @Component({ - templateUrl: './form-switch-demo-page.component.html' + templateUrl: './form-switch-demo-page.component.html', }) export class FormSwitchDemoPageComponent { codeTemplate = codeTemplate; diff --git a/packages/demo/src/app/bootstrap/components/form-switch/form-switch-demo/form-switch-demo.component.ts b/packages/demo/src/app/bootstrap/components/form-switch/form-switch-demo/form-switch-demo.component.ts index f8e22e8cf6..dc8fdf0f02 100644 --- a/packages/demo/src/app/bootstrap/components/form-switch/form-switch-demo/form-switch-demo.component.ts +++ b/packages/demo/src/app/bootstrap/components/form-switch/form-switch-demo/form-switch-demo.component.ts @@ -2,12 +2,10 @@ * Copyright 2022 by Swiss Post, Information Technology */ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'app-switch-demo', - templateUrl: './form-switch-demo.component.html' + templateUrl: './form-switch-demo.component.html', }) -export class FormSwitchDemoComponent { - -} +export class FormSwitchDemoComponent {} diff --git a/packages/demo/src/app/bootstrap/components/form-textarea/form-textarea-demo-page/form-textarea-demo-page.component.html b/packages/demo/src/app/bootstrap/components/form-textarea/form-textarea-demo-page/form-textarea-demo-page.component.html index 03ad8982de..d54d60c6c5 100644 --- a/packages/demo/src/app/bootstrap/components/form-textarea/form-textarea-demo-page/form-textarea-demo-page.component.html +++ b/packages/demo/src/app/bootstrap/components/form-textarea/form-textarea-demo-page/form-textarea-demo-page.component.html @@ -4,18 +4,25 @@

      Form textarea

      -

      - We're deprecating the regular and medium sizes for text input, textarea and select. -

      -
      - This will make it easier to select the appropriate size variant: small for internal - applications, large for external applications.
      - .form-control-rg and .form-control-md are deprecated and will be removed - in the next major version. -
      +

      + We're deprecating the regular and medium sizes for text input, textarea and select. +

      +
      + This will make it easier to select the appropriate size variant: small for internal + applications, large for external applications. +
      + .form-control-rg + and + .form-control-md + are deprecated and will be removed in the next major version. +
      - + diff --git a/packages/demo/src/app/bootstrap/components/form-textarea/form-textarea-demo-page/form-textarea-demo-page.component.ts b/packages/demo/src/app/bootstrap/components/form-textarea/form-textarea-demo-page/form-textarea-demo-page.component.ts index a01854cb64..53b3cb6fec 100644 --- a/packages/demo/src/app/bootstrap/components/form-textarea/form-textarea-demo-page/form-textarea-demo-page.component.ts +++ b/packages/demo/src/app/bootstrap/components/form-textarea/form-textarea-demo-page/form-textarea-demo-page.component.ts @@ -1,9 +1,10 @@ import { Component } from '@angular/core'; -const codeTemplate = require('!!raw-loader!../form-textarea-demo/form-textarea-demo.component.html').default; +const codeTemplate = + require('!!raw-loader!../form-textarea-demo/form-textarea-demo.component.html').default; @Component({ selector: 'app-form-textarea-demo-page', - templateUrl: './form-textarea-demo-page.component.html' + templateUrl: './form-textarea-demo-page.component.html', }) export class FormTextareaDemoPageComponent { codeTemplate = codeTemplate; diff --git a/packages/demo/src/app/bootstrap/components/form-textarea/form-textarea-demo/form-textarea-demo.component.ts b/packages/demo/src/app/bootstrap/components/form-textarea/form-textarea-demo/form-textarea-demo.component.ts index 6295c80f1a..ca58ff55e6 100644 --- a/packages/demo/src/app/bootstrap/components/form-textarea/form-textarea-demo/form-textarea-demo.component.ts +++ b/packages/demo/src/app/bootstrap/components/form-textarea/form-textarea-demo/form-textarea-demo.component.ts @@ -1,10 +1,7 @@ import { Component } from '@angular/core'; - @Component({ selector: 'app-form-textarea-demo', - templateUrl: './form-textarea-demo.component.html' + templateUrl: './form-textarea-demo.component.html', }) -export class FormTextareaDemoComponent { - -} +export class FormTextareaDemoComponent {} diff --git a/packages/demo/src/app/bootstrap/components/forms/forms-demo-page/forms-demo-page.component.html b/packages/demo/src/app/bootstrap/components/forms/forms-demo-page/forms-demo-page.component.html index 5653beb65a..4e509cc2f3 100644 --- a/packages/demo/src/app/bootstrap/components/forms/forms-demo-page/forms-demo-page.component.html +++ b/packages/demo/src/app/bootstrap/components/forms/forms-demo-page/forms-demo-page.component.html @@ -9,13 +9,20 @@

      This will make it easier to select the appropriate size variant: small for internal - applications, large for external applications.
      - .form-control-rg and .form-control-md are deprecated and will be removed - in the next major version. + applications, large for external applications. +
      + .form-control-rg + and + .form-control-md + are deprecated and will be removed in the next major version.
      - + diff --git a/packages/demo/src/app/bootstrap/components/forms/forms-demo-page/forms-demo-page.component.ts b/packages/demo/src/app/bootstrap/components/forms/forms-demo-page/forms-demo-page.component.ts index a35515094c..4172f14051 100644 --- a/packages/demo/src/app/bootstrap/components/forms/forms-demo-page/forms-demo-page.component.ts +++ b/packages/demo/src/app/bootstrap/components/forms/forms-demo-page/forms-demo-page.component.ts @@ -1,8 +1,8 @@ import { Component } from '@angular/core'; -const codeTemplate = require('!!raw-loader!../forms-demo/forms-demo.component.html').default; +const codeTemplate = require('!!raw-loader!../forms-demo/forms-demo.component.html').default; @Component({ selector: 'app-forms-demo-page', - templateUrl: './forms-demo-page.component.html' + templateUrl: './forms-demo-page.component.html', }) export class FormsDemoPageComponent { codeTemplate = codeTemplate; diff --git a/packages/demo/src/app/bootstrap/components/forms/forms-demo/forms-demo.component.html b/packages/demo/src/app/bootstrap/components/forms/forms-demo/forms-demo.component.html index 9c14c9beec..48547c1ac9 100644 --- a/packages/demo/src/app/bootstrap/components/forms/forms-demo/forms-demo.component.html +++ b/packages/demo/src/app/bootstrap/components/forms/forms-demo/forms-demo.component.html @@ -1,16 +1,26 @@
      - +
      We'll never share your email with anyone else.
      - +
      - +
      diff --git a/packages/demo/src/app/bootstrap/components/forms/forms-demo/forms-demo.component.ts b/packages/demo/src/app/bootstrap/components/forms/forms-demo/forms-demo.component.ts index 87fd8fe72a..0dedb74f68 100644 --- a/packages/demo/src/app/bootstrap/components/forms/forms-demo/forms-demo.component.ts +++ b/packages/demo/src/app/bootstrap/components/forms/forms-demo/forms-demo.component.ts @@ -2,8 +2,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-forms-demo', - templateUrl: './forms-demo.component.html' + templateUrl: './forms-demo.component.html', }) -export class FormsDemoComponent { - -} +export class FormsDemoComponent {} diff --git a/packages/demo/src/app/bootstrap/components/tables/tables-demo-page/tables-demo-page.component.html b/packages/demo/src/app/bootstrap/components/tables/tables-demo-page/tables-demo-page.component.html index c73653b24f..907f3d1092 100644 --- a/packages/demo/src/app/bootstrap/components/tables/tables-demo-page/tables-demo-page.component.html +++ b/packages/demo/src/app/bootstrap/components/tables/tables-demo-page/tables-demo-page.component.html @@ -4,4 +4,8 @@

      Tables

      - + diff --git a/packages/demo/src/app/bootstrap/components/typography/typography-demo/typography-demo.component.html b/packages/demo/src/app/bootstrap/components/typography/typography-demo/typography-demo.component.html index 37d033502f..e6df0f558d 100644 --- a/packages/demo/src/app/bootstrap/components/typography/typography-demo/typography-demo.component.html +++ b/packages/demo/src/app/bootstrap/components/typography/typography-demo/typography-demo.component.html @@ -30,25 +30,43 @@

      Paragraphs

      -
      +

      Copy with lead (user-facing services)

      -

      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? +

      Default paragraph (internal usage)

      -

      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. Aut iste pariatur laboriosam + possimus suscipit, ullam nemo, laborum minima itaque sed obcaecati. Neque officia, non + similique eius repudiandae sequi totam nihil? +

      -
      -
      -
      -
      +
      +

      Lists

      diff --git a/packages/demo/src/app/common/copy-to-clipboard.directive.ts b/packages/demo/src/app/common/copy-to-clipboard.directive.ts index b4dd6bc558..01403abd3f 100644 --- a/packages/demo/src/app/common/copy-to-clipboard.directive.ts +++ b/packages/demo/src/app/common/copy-to-clipboard.directive.ts @@ -3,15 +3,15 @@ import { Clipboard } from '@angular/cdk/clipboard'; import { forkJoin, fromEvent, take, timer } from 'rxjs'; @Directive({ - selector: 'code[appCopyToClipboard]' + selector: 'code[appCopyToClipboard]', }) export class CopyToClipboardDirective { constructor( private readonly el: ElementRef, - private readonly clipboard: Clipboard + private readonly clipboard: Clipboard, ) {} - @HostListener('click', [ '$event' ]) + @HostListener('click', ['$event']) private copyToClipboard(event: MouseEvent) { event.preventDefault(); @@ -20,10 +20,7 @@ export class CopyToClipboardDirective { nativeElement.classList.add('copied'); - forkJoin([ - timer(1000), - fromEvent(nativeElement, 'mouseleave').pipe(take(1)) - ]).subscribe(() => { + forkJoin([timer(1000), fromEvent(nativeElement, 'mouseleave').pipe(take(1))]).subscribe(() => { nativeElement.classList.remove('copied'); }); } diff --git a/packages/demo/src/app/common/dependency-link/dependency-link.component.html b/packages/demo/src/app/common/dependency-link/dependency-link.component.html index d827a77fc7..60c19e8d42 100644 --- a/packages/demo/src/app/common/dependency-link/dependency-link.component.html +++ b/packages/demo/src/app/common/dependency-link/dependency-link.component.html @@ -2,15 +2,16 @@ ~ Copyright 2023 by Swiss Post, Information Technology --> -

      - Using {{ dependency }} v{{ dependencyVersion }} -

      +

      Using {{ dependency }} v{{ dependencyVersion }}

      @@ -18,18 +19,13 @@

      - + {{ label }} Documentation diff --git a/packages/demo/src/app/common/footer/footer.component.html b/packages/demo/src/app/common/footer/footer.component.html index 9a704ad7ed..c488c9c6d3 100644 --- a/packages/demo/src/app/common/footer/footer.component.html +++ b/packages/demo/src/app/common/footer/footer.component.html @@ -4,13 +4,13 @@

      Support

      -
      - -
      -

      {{ dev.name }}

      -

      {{ dev.title }}

      -
      -
      +
      + +
      +

      {{ dev.name }}

      +

      {{ dev.title }}

      +
      +
      diff --git a/packages/demo/src/app/common/footer/footer.component.spec.ts b/packages/demo/src/app/common/footer/footer.component.spec.ts index a3c4af95bf..36c31ab3d0 100644 --- a/packages/demo/src/app/common/footer/footer.component.spec.ts +++ b/packages/demo/src/app/common/footer/footer.component.spec.ts @@ -8,9 +8,8 @@ describe('FooterComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ FooterComponent ] - }) - .compileComponents(); + declarations: [FooterComponent], + }).compileComponents(); }); beforeEach(() => { diff --git a/packages/demo/src/app/common/footer/footer.component.ts b/packages/demo/src/app/common/footer/footer.component.ts index 49081f46e9..267bf2d52c 100644 --- a/packages/demo/src/app/common/footer/footer.component.ts +++ b/packages/demo/src/app/common/footer/footer.component.ts @@ -3,27 +3,26 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-footer', templateUrl: './footer.component.html', - styleUrls: ['./footer.component.scss'] + styleUrls: ['./footer.component.scss'], }) export class FooterComponent { - private devs = [ { name: 'Philipp Gfeller', title: 'Lead UI Developer', - avatar: 'https://avatars.githubusercontent.com/u/1659006?v=4' + avatar: 'https://avatars.githubusercontent.com/u/1659006?v=4', }, { name: 'Alizé Debray', title: 'UI Developer', - avatar: 'https://avatars.githubusercontent.com/u/33580481?v=4' + avatar: 'https://avatars.githubusercontent.com/u/33580481?v=4', }, { name: 'Oliver Schürch', title: 'UI Developer', - avatar: 'https://avatars.githubusercontent.com/u/9716662?v=4' - } - ] + avatar: 'https://avatars.githubusercontent.com/u/9716662?v=4', + }, + ]; public shuffledDevs; @@ -32,6 +31,6 @@ export class FooterComponent { } shuffleDevs() { - return this.devs.sort(() => Math.random() > 0.5 ? 1 : -1); + return this.devs.sort(() => (Math.random() > 0.5 ? 1 : -1)); } } diff --git a/packages/demo/src/app/common/format-code.pipe.ts b/packages/demo/src/app/common/format-code.pipe.ts index a522fb3d0c..6373963ad2 100644 --- a/packages/demo/src/app/common/format-code.pipe.ts +++ b/packages/demo/src/app/common/format-code.pipe.ts @@ -4,13 +4,20 @@ import htmlParser from 'prettier/parser-html'; import babelParser from 'prettier/parser-babel'; @Pipe({ - name: 'formatCode' + name: 'formatCode', }) export class FormatCodePipe implements PipeTransform { - - transform(value: string, parser: prettier.BuiltInParserName | prettier.CustomParser = 'html'): string { - if (!value || !value.length) { return value; } - return prettier.format(value, { parser, plugins: [htmlParser, babelParser], htmlWhitespaceSensitivity: 'ignore' }); + transform( + value: string, + parser: prettier.BuiltInParserName | prettier.CustomParser = 'html', + ): string { + if (!value || !value.length) { + return value; + } + return prettier.format(value, { + parser, + plugins: [htmlParser, babelParser], + htmlWhitespaceSensitivity: 'ignore', + }); } - } diff --git a/packages/demo/src/app/common/highlight.provider.ts b/packages/demo/src/app/common/highlight.provider.ts index 7d8a859248..dac9588f2b 100644 --- a/packages/demo/src/app/common/highlight.provider.ts +++ b/packages/demo/src/app/common/highlight.provider.ts @@ -3,12 +3,15 @@ import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs'; @Injectable() export class HighlightProvider { - public static Config = { - provide: HIGHLIGHT_OPTIONS, - useValue: { - fullLibraryLoader: () => import('highlight.js').then(lib => { + public static Config = { + provide: HIGHLIGHT_OPTIONS, + useValue: { + fullLibraryLoader: () => + import('highlight.js') + .then(lib => { return lib; - }).catch(e => console.log(e)), - } - }; -}; + }) + .catch(e => console.log(e)), + }, + }; +} diff --git a/packages/demo/src/app/common/post-common.module.ts b/packages/demo/src/app/common/post-common.module.ts index 8b09a13f36..9c60e994ee 100644 --- a/packages/demo/src/app/common/post-common.module.ts +++ b/packages/demo/src/app/common/post-common.module.ts @@ -1,4 +1,4 @@ -import {NgModule} from '@angular/core'; +import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; import { FormsModule } from '@angular/forms'; @@ -8,20 +8,8 @@ import { FooterComponent } from './footer/footer.component'; import { FormatCodePipe } from './format-code.pipe'; @NgModule({ - imports: [ - CommonModule, - RouterModule, - FormsModule - ], - declarations: [ - FooterComponent, - FormatCodePipe, - DependencyLinkComponent, - ], - exports: [ - FooterComponent, - FormatCodePipe, - DependencyLinkComponent, - ] + imports: [CommonModule, RouterModule, FormsModule], + declarations: [FooterComponent, FormatCodePipe, DependencyLinkComponent], + exports: [FooterComponent, FormatCodePipe, DependencyLinkComponent], }) -export class PostCommonModule { } +export class PostCommonModule {} diff --git a/packages/demo/src/app/home/home.component.html b/packages/demo/src/app/home/home.component.html index 66800c614b..806120afe6 100644 --- a/packages/demo/src/app/home/home.component.html +++ b/packages/demo/src/app/home/home.component.html @@ -53,13 +53,17 @@

      Design System

      @@ -135,10 +139,14 @@

      The Swiss Post Design System is now compatible with An

      Migration from v5 to v6

        @@ -157,13 +165,20 @@

        Package Update 🩺

      1. Update Bootstrap to version - + 5.3.x and ng-bootstrap to version - + 15.x.x @@ -172,7 +187,10 @@

        Package Update 🩺

        appCopyToClipboard class="d-block mt-1 p-3" [languages]="['bash']" - [highlight]="'npm install bootstrap@5.3' + (isMigratingAngular ? ' @ng-bootstrap/ng-bootstrap@15' : '')" + [highlight]=" + 'npm install bootstrap@5.3' + + (isMigratingAngular ? ' @ng-bootstrap/ng-bootstrap@15' : '') + " >

        2. @@ -192,7 +210,8 @@

        Package Update 🩺

      2. Automatic Migration ⚙️

        - If you are migrating an Angular application, you can take advantage of our migration schematics. + If you are migrating an Angular application, you can take advantage of our migration + schematics.

        1. Commit all the changes you have made so far
          2. @@ -223,20 +242,22 @@
          breaking

          - The markup of the stepper component has been changed in order to - be more accessible. + The markup of the + stepper + component has been changed in order to be more accessible.

          • - ⚙️ - The stepper container no longer has an aria-label attribute but contains a hidden header instead + ⚙️ + The stepper container no longer has an aria-label attribute but contains a hidden + header instead
          • - ⚙️ + ⚙️ The progress bar is hidden and no longer requires a type attribute
          • - ⚙️ + ⚙️ The stepper has a list role
          • Completed steps require an additional hidden "Completed: " text
            • @@ -256,8 +277,10 @@
            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. + 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 @@ -266,8 +289,14 @@

          • -
            Removed variables breaking
            -

            The following Sass variables have been removed because they are not being used anymore.

            +
            + Removed variables + breaking +
            +

            + The following Sass variables have been removed because they are not being used + anymore. +

            • $table-head-bg
            @@ -284,9 +313,9 @@

            Migration from v4 to v5

          • Clean Start 🧹

            - 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. + 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.

          • @@ -346,8 +375,11 @@

            Package Update 🩺

            and ng-bootstrap to version - + 12.x.x @@ -356,14 +388,18 @@

            Package Update 🩺

            appCopyToClipboard class="d-block mt-1 p-3" [languages]="['bash']" - [highlight]="'npm install bootstrap@5.1' + (isMigratingAngular ? ' @ng-bootstrap/ng-bootstrap@12' : '')" + [highlight]=" + 'npm install bootstrap@5.1' + + (isMigratingAngular ? ' @ng-bootstrap/ng-bootstrap@12' : '') + " >

          • Automatic Migration ⚙️

            - If you are migrating an Angular application, you can take advantage of our migration schematics. + If you are migrating an Angular application, you can take advantage of our migration + schematics.

            1. Commit all the changes you have made so far
              2. @@ -417,8 +453,8 @@
              Migrations list

              Some changes cannot be migrated automatically.
              - Check the list of changes below and apply the transformations manually if your application - is affected. + Check the list of changes below and apply the transformations manually if your + application is affected.

              @@ -475,7 +511,9 @@
              Paths & Files
              id="generalnaming_entryfiles" class="form-check-input" type="checkbox" - [(ngModel)]="migrationAccordionGroupedCheckboxes.general.naming_entryfiles" + [(ngModel)]=" + migrationAccordionGroupedCheckboxes.general.naming_entryfiles + " (change)="migrationAccordionGroupedCheckboxesChange()" />
      +

      diff --git a/packages/demo/src/app/intranet-layout/components/intranet-header-big/intranet-header-big.component.spec.ts b/packages/demo/src/app/intranet-layout/components/intranet-header-big/intranet-header-big.component.spec.ts index 8d1ff01eab..7c46feb6ba 100644 --- a/packages/demo/src/app/intranet-layout/components/intranet-header-big/intranet-header-big.component.spec.ts +++ b/packages/demo/src/app/intranet-layout/components/intranet-header-big/intranet-header-big.component.spec.ts @@ -1,8 +1,8 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { IntranetHeaderBigComponent } from './intranet-header-big.component'; -import {ErrorService} from '../../services/error.service'; -import {RouterTestingModule} from '@angular/router/testing'; +import { ErrorService } from '../../services/error.service'; +import { RouterTestingModule } from '@angular/router/testing'; describe('IntranetHeaderBigComponent', () => { let component: IntranetHeaderBigComponent; @@ -11,10 +11,9 @@ describe('IntranetHeaderBigComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [RouterTestingModule], - declarations: [ IntranetHeaderBigComponent ], - providers: [ErrorService] - }) - .compileComponents(); + declarations: [IntranetHeaderBigComponent], + providers: [ErrorService], + }).compileComponents(); })); beforeEach(() => { diff --git a/packages/demo/src/app/intranet-layout/components/intranet-header-big/intranet-header-big.component.ts b/packages/demo/src/app/intranet-layout/components/intranet-header-big/intranet-header-big.component.ts index 7c921ce158..8a33dd2678 100644 --- a/packages/demo/src/app/intranet-layout/components/intranet-header-big/intranet-header-big.component.ts +++ b/packages/demo/src/app/intranet-layout/components/intranet-header-big/intranet-header-big.component.ts @@ -1,37 +1,38 @@ -import {Component, Inject, LOCALE_ID} from '@angular/core'; -import {HttpErrorResponse} from '@angular/common/http'; -import {ErrorService} from '../../services/error.service'; -import {Location} from '@angular/common'; -import {Router} from '@angular/router'; +import { Component, Inject, LOCALE_ID } from '@angular/core'; +import { HttpErrorResponse } from '@angular/common/http'; +import { ErrorService } from '../../services/error.service'; +import { Location } from '@angular/common'; +import { Router } from '@angular/router'; @Component({ selector: 'app-intranet-header-big', templateUrl: './intranet-header-big.component.html', - styleUrls: ['../../intranet-layout.component.css'] + styleUrls: ['../../intranet-layout.component.css'], }) export class IntranetHeaderBigComponent { openedMenu = false; appTitle = 'testwebapp'; initialLanguage = 'de'; - constructor(@Inject(LOCALE_ID) public language: string, - private location: Location, + constructor( + @Inject(LOCALE_ID) public language: string, + private location: Location, - private errorService: ErrorService, - private router: Router) { - // handle language for ngx-translate and for angular PIPE - // Handle unexpected errors - this.errorService.unexpectedErrorEvent.subscribe((response: HttpErrorResponse) => { - console.error('Unexpected error', response); + private errorService: ErrorService, + private router: Router, + ) { + // handle language for ngx-translate and for angular PIPE + // Handle unexpected errors + this.errorService.unexpectedErrorEvent.subscribe((response: HttpErrorResponse) => { + console.error('Unexpected error', response); + }); - }); + router.events.subscribe(url => { + this.openedMenu = false; + }); + } - router.events.subscribe(url => { - this.openedMenu = false; - }); - } - - public toggleMenu() { - this.openedMenu = !this.openedMenu; - } + public toggleMenu() { + this.openedMenu = !this.openedMenu; + } } diff --git a/packages/demo/src/app/intranet-layout/components/intranet-header-small/intranet-header-small.component.html b/packages/demo/src/app/intranet-layout/components/intranet-header-small/intranet-header-small.component.html index 2325be25a8..59876b3bc7 100644 --- a/packages/demo/src/app/intranet-layout/components/intranet-header-small/intranet-header-small.component.html +++ b/packages/demo/src/app/intranet-layout/components/intranet-header-small/intranet-header-small.component.html @@ -1,54 +1,67 @@
      - +
      -
      • +
    +
    - -
    -

    Content

    -

    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.

    -
    -
    -
    + +
    + +
    +

    Content

    +

    + 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. +

    +
    +
    +
    diff --git a/packages/demo/src/app/intranet-layout/components/intranet-header-small/intranet-header-small.component.spec.ts b/packages/demo/src/app/intranet-layout/components/intranet-header-small/intranet-header-small.component.spec.ts index 8032185786..cd1841af8a 100644 --- a/packages/demo/src/app/intranet-layout/components/intranet-header-small/intranet-header-small.component.spec.ts +++ b/packages/demo/src/app/intranet-layout/components/intranet-header-small/intranet-header-small.component.spec.ts @@ -1,7 +1,7 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { IntranetHeaderSmallComponent } from './intranet-header-small.component'; -import {ErrorService} from '../../services/error.service'; +import { ErrorService } from '../../services/error.service'; describe('IntranetHeaderSmallComponent', () => { let component: IntranetHeaderSmallComponent; @@ -9,10 +9,9 @@ describe('IntranetHeaderSmallComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ IntranetHeaderSmallComponent ], - providers: [ErrorService] - }) - .compileComponents(); + declarations: [IntranetHeaderSmallComponent], + providers: [ErrorService], + }).compileComponents(); })); beforeEach(() => { diff --git a/packages/demo/src/app/intranet-layout/components/intranet-header-small/intranet-header-small.component.ts b/packages/demo/src/app/intranet-layout/components/intranet-header-small/intranet-header-small.component.ts index c5a30dc7bb..58ce34e158 100644 --- a/packages/demo/src/app/intranet-layout/components/intranet-header-small/intranet-header-small.component.ts +++ b/packages/demo/src/app/intranet-layout/components/intranet-header-small/intranet-header-small.component.ts @@ -1,22 +1,20 @@ -import {Component, Inject, LOCALE_ID} from '@angular/core'; -import {HttpErrorResponse} from "@angular/common/http"; -import {ErrorService} from '../../services/error.service'; +import { Component, Inject, LOCALE_ID } from '@angular/core'; +import { HttpErrorResponse } from '@angular/common/http'; +import { ErrorService } from '../../services/error.service'; @Component({ selector: 'app-intranet-header-small', templateUrl: './intranet-header-small.component.html', - styleUrls: ['../../intranet-layout.component.css'] + styleUrls: ['../../intranet-layout.component.css'], }) export class IntranetHeaderSmallComponent { openedMenu = false; - constructor(@Inject(LOCALE_ID) public language: string, - private errorService: ErrorService) { - // handle language for ngx-translate and for angular PIPE - // Handle unexpected errors - this.errorService.unexpectedErrorEvent.subscribe((response: HttpErrorResponse) => { - console.error('Unexpected error', response); - - }); - } + constructor(@Inject(LOCALE_ID) public language: string, private errorService: ErrorService) { + // handle language for ngx-translate and for angular PIPE + // Handle unexpected errors + this.errorService.unexpectedErrorEvent.subscribe((response: HttpErrorResponse) => { + console.error('Unexpected error', response); + }); + } } diff --git a/packages/demo/src/app/intranet-layout/intranet-components.module.ts b/packages/demo/src/app/intranet-layout/intranet-components.module.ts index e26246628d..4de10ef71b 100644 --- a/packages/demo/src/app/intranet-layout/intranet-components.module.ts +++ b/packages/demo/src/app/intranet-layout/intranet-components.module.ts @@ -9,26 +9,10 @@ import { HighlightModule } from 'ngx-highlightjs'; import { HighlightProvider } from '../common/highlight.provider'; @NgModule({ - imports: [ - CommonModule, - RouterModule, - NgbModule, - SwissPostIntranetHeaderModule, - HighlightModule - ], + imports: [CommonModule, RouterModule, NgbModule, SwissPostIntranetHeaderModule, HighlightModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], - declarations: [ - IntranetHeaderBigComponent, - IntranetHeaderSmallComponent - ], - exports: [ - IntranetHeaderBigComponent, - IntranetHeaderSmallComponent - ], - providers: [ - HighlightProvider.Config - ] + declarations: [IntranetHeaderBigComponent, IntranetHeaderSmallComponent], + exports: [IntranetHeaderBigComponent, IntranetHeaderSmallComponent], + providers: [HighlightProvider.Config], }) -export class IntranetComponentsModule { -} - +export class IntranetComponentsModule {} diff --git a/packages/demo/src/app/intranet-layout/intranet-layout.component.css b/packages/demo/src/app/intranet-layout/intranet-layout.component.css index 677bd5b9fe..c749c4e7d6 100644 --- a/packages/demo/src/app/intranet-layout/intranet-layout.component.css +++ b/packages/demo/src/app/intranet-layout/intranet-layout.component.css @@ -2,13 +2,13 @@ section.layout-container.preview { height: auto; } -section.layout-container.preview #sidebar .sidebar-sticky, -section.layout-container.preview header, +section.layout-container.preview #sidebar .sidebar-sticky, +section.layout-container.preview header, section.layout-container.preview header.navbar { position: relative; -} +} -section.layout-container.preview header, +section.layout-container.preview header, section.layout-container.preview header.navbar { z-index: 1010; } @@ -27,24 +27,24 @@ section.layout-container.preview .header-margin { margin-top: 0; } -@media all and (max-width:767.98px) { +@media all and (max-width: 767.98px) { section.layout-container.preview #sidebar { padding-right: 0; - } - + } + section.layout-container.preview #sidebar:not(.closed) { padding-bottom: 1rem; } section.layout-container.preview #sidebar + main { margin-top: 0; - } + } section.layout-container.preview #sidebar > div > ul > li:first-child { padding-top: 2rem; margin-right: 0px; } - + section.layout-container.preview .sidebar-sticky { width: 100%; margin-left: 0px; @@ -55,9 +55,9 @@ section.layout-container.preview .header-margin { } section.layout-container.preview #sidebar .sidebar-sticky { - max-width: none; - padding: 0; - width: calc(100% + 1rem); + max-width: none; + padding: 0; + width: calc(100% + 1rem); } } @@ -68,9 +68,9 @@ section.layout-container.preview .header-margin { .header-showcase-page { background: white; - box-shadow: 0 0 50px rgba(0,0,0,0.4); + box-shadow: 0 0 50px rgba(0, 0, 0, 0.4); } .header-showcase-container { - background: #F4F3F1; -} \ No newline at end of file + background: #f4f3f1; +} diff --git a/packages/demo/src/app/intranet-layout/intranet-layout.component.html b/packages/demo/src/app/intranet-layout/intranet-layout.component.html index 6060c24e9e..ccf9660a86 100644 --- a/packages/demo/src/app/intranet-layout/intranet-layout.component.html +++ b/packages/demo/src/app/intranet-layout/intranet-layout.component.html @@ -9,36 +9,32 @@

    Installation

    Angular component and as such, only works with Angular projects.

    -

    The supported Angular versions are:

    +

    The supported Angular versions are:

    - - - - + + + + - - - - - - - - + + + + + + + +
    Intranet HeaderAngular
    Intranet HeaderAngular
    4.x15.x
    5.x16.x
    4.x15.x
    5.x16.x
    -

    - Install the latest version of the Intranet Header with: -

    +

    Install the latest version of the Intranet Header with:

    -

    - Or specify the version you need: -

    +

    Or specify the version you need:

    Accordion
    - + diff --git a/packages/demo/src/app/ng-bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component.ts b/packages/demo/src/app/ng-bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component.ts index c99b2a4244..dbc2741085 100644 --- a/packages/demo/src/app/ng-bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component.ts +++ b/packages/demo/src/app/ng-bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component.ts @@ -1,9 +1,10 @@ import { Component } from '@angular/core'; -const codeTemplate = require('!!raw-loader!../accordion-demo/accordion-demo.component.html').default; +const codeTemplate = + require('!!raw-loader!../accordion-demo/accordion-demo.component.html').default; @Component({ selector: 'app-accordion-demo-page', - templateUrl: './accordion-demo-page.component.html' + templateUrl: './accordion-demo-page.component.html', }) export class NgbAccordionDemoPageComponent { codeTemplate = codeTemplate.toString(); diff --git a/packages/demo/src/app/ng-bootstrap/components/accordion/accordion-demo/accordion-demo.component.html b/packages/demo/src/app/ng-bootstrap/components/accordion/accordion-demo/accordion-demo.component.html index ae74dce90e..d81857aef7 100644 --- a/packages/demo/src/app/ng-bootstrap/components/accordion/accordion-demo/accordion-demo.component.html +++ b/packages/demo/src/app/ng-bootstrap/components/accordion/accordion-demo/accordion-demo.component.html @@ -1,35 +1,42 @@ - + - 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. - ★ Fancy title ★ + ★ + Fancy + title ★ - 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. - 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. - \ No newline at end of file + diff --git a/packages/demo/src/app/ng-bootstrap/components/accordion/accordion-demo/accordion-demo.component.ts b/packages/demo/src/app/ng-bootstrap/components/accordion/accordion-demo/accordion-demo.component.ts index c8173cc270..d6baa86fa8 100644 --- a/packages/demo/src/app/ng-bootstrap/components/accordion/accordion-demo/accordion-demo.component.ts +++ b/packages/demo/src/app/ng-bootstrap/components/accordion/accordion-demo/accordion-demo.component.ts @@ -2,8 +2,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-ngb-accordion-demo', - templateUrl: './accordion-demo.component.html' + templateUrl: './accordion-demo.component.html', }) -export class NgbAccordionDemoComponent { - -} +export class NgbAccordionDemoComponent {} diff --git a/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html index 5f3c4902c8..f82ca3dc10 100644 --- a/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html +++ b/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html @@ -5,8 +5,8 @@

    Alerts

    - The following two color variants are deprecated and will be removed in the next major version - of the styles package: + The following two color variants are deprecated and will be removed in the next major version of + the styles package:

    • @@ -22,9 +22,19 @@

      Alerts

    -

    For more information about available alerts/notifications, check the Alert/Notification page under the "Bootstrap" Menu.

    +

    + For more information about available alerts/notifications, check the + + Alert/Notification page under the "Bootstrap" Menu + + . +

    - + diff --git a/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo-page/alert-demo-page.component.ts b/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo-page/alert-demo-page.component.ts index 5d82b5719b..cbcb086d38 100644 --- a/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo-page/alert-demo-page.component.ts +++ b/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo-page/alert-demo-page.component.ts @@ -1,8 +1,8 @@ import { Component } from '@angular/core'; -const codeTemplate = require('!!raw-loader!../alert-demo/alert-demo.component.html').default +const codeTemplate = require('!!raw-loader!../alert-demo/alert-demo.component.html').default; @Component({ selector: 'app-ngb-alert-demo-page', - templateUrl: './alert-demo-page.component.html' + templateUrl: './alert-demo-page.component.html', }) export class NgbAlertDemoPageComponent { codeTemplate: string = codeTemplate.toString(); diff --git a/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo/alert-demo.component.html b/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo/alert-demo.component.html index 3359852711..5456c59521 100644 --- a/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo/alert-demo.component.html +++ b/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo/alert-demo.component.html @@ -1,9 +1,14 @@
    - +

    {{ alert.title }}

    {{ alert.message }}

    -

    \ No newline at end of file +

    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 index a8d725b1bb..6678bf5550 100644 --- 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 @@ -1,10 +1,9 @@ - -import {Component, Input, Output, EventEmitter } from '@angular/core'; +import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-ngb-alert-demo', templateUrl: './alert-demo.component.html', - styleUrls: ['./alert-demo.component.scss'] + styleUrls: ['./alert-demo.component.scss'], }) export class NgbAlertDemoComponent { @Input() @@ -17,58 +16,68 @@ export class NgbAlertDemoComponent { @Output() setArray: EventEmitter = new EventEmitter(); constructor() { - this.alerts.push({ - id: 1, - type: 'success', - title: 'Success', - message: 'This is an success alert', - class: '' - }, { - id: 2, - type: 'info', - title: 'This is an info alert', - class: '' - }, { - id: 3, - type: 'warning', - title: 'This is a warning alert', - class: '' - }, { - id: 4, - type: 'danger', - title: 'Danger', - message: 'This is a danger alert', - class: '' - },{ - id: 6, - type: 'primary', - title: 'Primary', - message: 'This is a primary alert', - class: '' - }, { - id: 8, - type: 'primary', - title: 'Alert without icon (added class "no-icon")', - class: 'no-icon' - }, { - id: 9, - type: 'primary', - title: 'With special icon', - message: 'Icon needs to be extended in sass.', - class: 'pi-2063-white' - }, { - id: 10, - type: 'info', - title: 'With special icon', - message: 'Just add the "pi"-class to the alert.', - class: 'pi-1001' - }, { - id: 11, - type: 'primary', - title: 'Fixed alert', - message: 'Alert that is fixed to the bottom of the page.', - class: 'alert-fixed-bottom' - }); + this.alerts.push( + { + id: 1, + type: 'success', + title: 'Success', + message: 'This is an success alert', + class: '', + }, + { + id: 2, + type: 'info', + title: 'This is an info alert', + class: '', + }, + { + id: 3, + type: 'warning', + title: 'This is a warning alert', + class: '', + }, + { + id: 4, + type: 'danger', + title: 'Danger', + message: 'This is a danger alert', + class: '', + }, + { + id: 6, + type: 'primary', + title: 'Primary', + message: 'This is a primary alert', + class: '', + }, + { + id: 8, + type: 'primary', + title: 'Alert without icon (added class "no-icon")', + class: 'no-icon', + }, + { + id: 9, + type: 'primary', + title: 'With special icon', + message: 'Icon needs to be extended in sass.', + class: 'pi-2063-white', + }, + { + id: 10, + type: 'info', + title: 'With special icon', + message: 'Just add the "pi"-class to the alert.', + class: 'pi-1001', + }, + { + id: 11, + type: 'primary', + title: 'Fixed alert', + message: 'Alert that is fixed to the bottom of the page.', + class: 'alert-fixed-bottom', + }, + ); this.backup = this.alerts.map((alert: IAlert) => Object.assign({}, alert)); } diff --git a/packages/demo/src/app/ng-bootstrap/components/collapse/collapse-demo-page/collapse-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/collapse/collapse-demo-page/collapse-demo-page.component.html index a81fdbea89..2ae70ec024 100644 --- a/packages/demo/src/app/ng-bootstrap/components/collapse/collapse-demo-page/collapse-demo-page.component.html +++ b/packages/demo/src/app/ng-bootstrap/components/collapse/collapse-demo-page/collapse-demo-page.component.html @@ -6,4 +6,8 @@

    Collapse

    - + diff --git a/packages/demo/src/app/ng-bootstrap/components/collapse/collapse-demo/collapse-demo.component.html b/packages/demo/src/app/ng-bootstrap/components/collapse/collapse-demo/collapse-demo.component.html index f7f019e610..900a33a155 100644 --- a/packages/demo/src/app/ng-bootstrap/components/collapse/collapse-demo/collapse-demo.component.html +++ b/packages/demo/src/app/ng-bootstrap/components/collapse/collapse-demo/collapse-demo.component.html @@ -1,13 +1,16 @@

    -

    -
    - You can collapse this card by clicking Toggle -
    +
    You can collapse this card by clicking Toggle
    diff --git a/packages/demo/src/app/ng-bootstrap/components/collapse/collapse-demo/collapse-demo.component.ts b/packages/demo/src/app/ng-bootstrap/components/collapse/collapse-demo/collapse-demo.component.ts index addc907dae..36a9661a1e 100644 --- a/packages/demo/src/app/ng-bootstrap/components/collapse/collapse-demo/collapse-demo.component.ts +++ b/packages/demo/src/app/ng-bootstrap/components/collapse/collapse-demo/collapse-demo.component.ts @@ -2,7 +2,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-ngb-collapse-demo', - templateUrl: './collapse-demo.component.html' + templateUrl: './collapse-demo.component.html', }) export class NgbCollapseDemoComponent { public isCollapsed = false; diff --git a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html index 2fee675f06..432a871b16 100644 --- a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html +++ b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html @@ -4,18 +4,20 @@

    Datepicker

    -

    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.

    +

    + 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:

    -
    +
    Datepicker
    @@ -68,14 +74,34 @@

    Simple datepicker

    - - + +
    - - + +
    @@ -87,8 +113,18 @@

    Simple datepicker

    datepicker.component.html

    - - + +

    datepicker-simple.component.ts

    @@ -98,27 +134,64 @@

    Datepicker with validation

    - - + +
    - - - + +

    datepicker.component.html

    - - + +

    datepicker-simple.component.ts

    - +
    -

    If you are using internationalization, add this service to your application for custom date translations.

    - +

    + If you are using internationalization, add this service to your application for custom date + translations. +

    +
    diff --git a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.ts b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.ts index 9e635056ae..803af71edb 100644 --- a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.ts +++ b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.ts @@ -1,17 +1,23 @@ import { Component, OnInit } from '@angular/core'; import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms'; import { I18n } from './datepicker-localization.service'; -const dpSimpleHtml = require('!!raw-loader!../datepicker-simple/datepicker-simple.component.html').default; -const dpSimpleHtmlLg = require('!!raw-loader!../datepicker-simple/datepicker-simple-lg.component.html').default; -const dpValidationHtml = require('!!raw-loader!../datepicker-validation/datepicker-validation.component.html').default; -const dpValidationHtmlLg = require('!!raw-loader!../datepicker-validation/datepicker-validation-lg.component.html').default; -const dpSimpleTs = require('!!raw-loader!../datepicker-simple/datepicker-simple-demo.component.ts').default; -const dpValidationTs = require('!!raw-loader!../datepicker-validation/datepicker-validation-demo.component.ts').default; +const dpSimpleHtml = + require('!!raw-loader!../datepicker-simple/datepicker-simple.component.html').default; +const dpSimpleHtmlLg = + require('!!raw-loader!../datepicker-simple/datepicker-simple-lg.component.html').default; +const dpValidationHtml = + require('!!raw-loader!../datepicker-validation/datepicker-validation.component.html').default; +const dpValidationHtmlLg = + require('!!raw-loader!../datepicker-validation/datepicker-validation-lg.component.html').default; +const dpSimpleTs = + require('!!raw-loader!../datepicker-simple/datepicker-simple-demo.component.ts').default; +const dpValidationTs = + require('!!raw-loader!../datepicker-validation/datepicker-validation-demo.component.ts').default; const localizationService = require('!!raw-loader!./datepicker-localization.service.ts').default; @Component({ selector: 'app-datepicker-demo-page', - templateUrl: './datepicker-demo-page.component.html' + templateUrl: './datepicker-demo-page.component.html', }) export class NgbDatepickerDemoPageComponent implements OnInit { dpSimpleHtml = dpSimpleHtml; @@ -25,10 +31,7 @@ export class NgbDatepickerDemoPageComponent implements OnInit { form: UntypedFormGroup; sizes = ['sm', 'rg', 'md', 'lg']; - constructor( - private _i18n: I18n, - private formBuilder: UntypedFormBuilder, - ) { } + constructor(private _i18n: I18n, private formBuilder: UntypedFormBuilder) {} ngOnInit() { this.form = this.formBuilder.group({ @@ -38,11 +41,21 @@ export class NgbDatepickerDemoPageComponent implements OnInit { }); } - get sizeRangeSimple() { return this.form.get('sizeRangeSimple'); } - get dpNavigation() { return this.form.get('dpNavigation'); } - get sizeRange() { return this.form.get('sizeRange'); } - get dpValidationSize() { return this.sizes[this.form.get('sizeRange').value]; } - get dpSimpleSize() { return this.sizes[this.form.get('sizeRangeSimple').value]; } + get sizeRangeSimple() { + return this.form.get('sizeRangeSimple'); + } + get dpNavigation() { + return this.form.get('dpNavigation'); + } + get sizeRange() { + return this.form.get('sizeRange'); + } + get dpValidationSize() { + return this.sizes[this.form.get('sizeRange').value]; + } + get dpSimpleSize() { + return this.sizes[this.form.get('sizeRangeSimple').value]; + } set language(language: string) { this._i18n.language = language; diff --git a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-localization.service.ts b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-localization.service.ts index 3de7dc6b99..ed8125fff4 100644 --- a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-localization.service.ts +++ b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-localization.service.ts @@ -1,28 +1,132 @@ -import {Injectable} from '@angular/core'; -import {NgbDatepickerI18n, NgbDateStruct} from '@ng-bootstrap/ng-bootstrap'; +import { Injectable } from '@angular/core'; +import { NgbDatepickerI18n, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap'; const I18N_VALUES = { - 'fr': { + fr: { weekdays: ['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di'], - months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'], - monthsShortName: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'], + months: [ + 'Janvier', + 'Février', + 'Mars', + 'Avril', + 'Mai', + 'Juin', + 'Juillet', + 'Août', + 'Septembre', + 'Octobre', + 'Novembre', + 'Décembre', + ], + monthsShortName: [ + 'Janv.', + 'Févr.', + 'Mars', + 'Avril', + 'Mai', + 'Juin', + 'Juil.', + 'Août', + 'Sept.', + 'Oct.', + 'Nov.', + 'Déc.', + ], }, - 'it': { + it: { weekdays: ['Lu', 'Ma', 'Me', 'Gi', 'Ve', 'Sa', 'Do'], - months: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'], - monthsShortName: ['Genn.', 'Febbr.', 'Mar.', 'Aprr', 'Magg.', 'Giugno', 'Luglio', 'Ag.', 'Sett.', 'Ott.', 'Nov.', 'Dic.'], + months: [ + 'Gennaio', + 'Febbraio', + 'Marzo', + 'Aprile', + 'Maggio', + 'Giugno', + 'Luglio', + 'Agosto', + 'Settembre', + 'Ottobre', + 'Novembre', + 'Dicembre', + ], + monthsShortName: [ + 'Genn.', + 'Febbr.', + 'Mar.', + 'Aprr', + 'Magg.', + 'Giugno', + 'Luglio', + 'Ag.', + 'Sett.', + 'Ott.', + 'Nov.', + 'Dic.', + ], }, - 'en': { + en: { weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], - months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], - monthsShortName: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'June', 'July', 'Aug.', 'Sept.', 'Oct.', 'Nov.', 'Dec.'], + months: [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'September', + 'October', + 'November', + 'December', + ], + monthsShortName: [ + 'Jan.', + 'Feb.', + 'Mar.', + 'Apr.', + 'May', + 'June', + 'July', + 'Aug.', + 'Sept.', + 'Oct.', + 'Nov.', + 'Dec.', + ], }, - 'de': { + de: { weekdays: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'], - months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'], - monthsShortName: ['Jan.', 'Feb.', 'März', 'Apr.', 'Mai', 'Juni', 'Juli', 'Aug.', 'Sept.', 'Okt.', 'Nov.', 'Dez.'], - } + months: [ + 'Januar', + 'Februar', + 'März', + 'April', + 'Mai', + 'Juni', + 'Juli', + 'August', + 'September', + 'Oktober', + 'November', + 'Dezember', + ], + monthsShortName: [ + 'Jan.', + 'Feb.', + 'März', + 'Apr.', + 'Mai', + 'Juni', + 'Juli', + 'Aug.', + 'Sept.', + 'Okt.', + 'Nov.', + 'Dez.', + ], + }, }; // Define a service holding the language. You probably already have one if your app is i18ned. Or you could also @@ -37,7 +141,6 @@ export class I18n { providedIn: 'root', }) export class CustomDatepickerI18n extends NgbDatepickerI18n { - constructor(private _i18n: I18n) { super(); } diff --git a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-simple/datepicker-simple-demo.component.ts b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-simple/datepicker-simple-demo.component.ts index f3ea40b259..be94182624 100644 --- a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-simple/datepicker-simple-demo.component.ts +++ b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-simple/datepicker-simple-demo.component.ts @@ -1,18 +1,16 @@ -import {Component, Input, OnInit} from '@angular/core'; -import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms'; -import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap'; -import {I18n} from '../datepicker-demo-page/datepicker-localization.service'; +import { Component, Input, OnInit } from '@angular/core'; +import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; +import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap'; +import { I18n } from '../datepicker-demo-page/datepicker-localization.service'; -@Component({template: ''}) +@Component({ template: '' }) export class DatepickerSimpleDemoComponent implements OnInit { form: UntypedFormGroup; @Input() inputSize: 'sm' | 'rg' | 'md' | 'lg'; @Input() navigation: 'arrows' | 'select'; - constructor(private _i18n: I18n, - private formBuilder: UntypedFormBuilder) { - } + constructor(private _i18n: I18n, private formBuilder: UntypedFormBuilder) {} @Input() set language(value: string) { this._i18n.language = value; @@ -24,7 +22,7 @@ export class DatepickerSimpleDemoComponent implements OnInit { ngOnInit() { this.form = this.formBuilder.group({ - simpleDatepicker: [null as NgbDateStruct] + simpleDatepicker: [null as NgbDateStruct], }); } } diff --git a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-simple/datepicker-simple-lg.component.html b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-simple/datepicker-simple-lg.component.html index b3e4e805a1..f390c388f3 100644 --- a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-simple/datepicker-simple-lg.component.html +++ b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-simple/datepicker-simple-lg.component.html @@ -1,13 +1,15 @@
    - + diff --git a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-simple/datepicker-simple.component.ts b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-simple/datepicker-simple.component.ts index 58d2ce3268..21c519a0a0 100644 --- a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-simple/datepicker-simple.component.ts +++ b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-simple/datepicker-simple.component.ts @@ -1,12 +1,14 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; import { NgbDatepickerI18n } from '@ng-bootstrap/ng-bootstrap'; -import { CustomDatepickerI18n, I18n } from '../datepicker-demo-page/datepicker-localization.service'; -import {DatepickerSimpleDemoComponent} from './datepicker-simple-demo.component'; +import { + CustomDatepickerI18n, + I18n, +} from '../datepicker-demo-page/datepicker-localization.service'; +import { DatepickerSimpleDemoComponent } from './datepicker-simple-demo.component'; @Component({ selector: 'app-datepicker-simple', templateUrl: './datepicker-simple.component.html', - providers: [I18n, {provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n}] + providers: [I18n, { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n }], }) -export class DatepickerSimpleComponent extends DatepickerSimpleDemoComponent { -} +export class DatepickerSimpleComponent extends DatepickerSimpleDemoComponent {} diff --git a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation-demo.component.ts b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation-demo.component.ts index d810f63368..9b5758063b 100644 --- a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation-demo.component.ts +++ b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation-demo.component.ts @@ -1,18 +1,16 @@ -import {Component, Input, OnInit} from '@angular/core'; -import {UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms'; -import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap'; -import {I18n} from '../datepicker-demo-page/datepicker-localization.service'; +import { Component, Input, OnInit } from '@angular/core'; +import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; +import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap'; +import { I18n } from '../datepicker-demo-page/datepicker-localization.service'; -@Component({template: ''}) +@Component({ template: '' }) export class DatepickerValidationDemoComponent implements OnInit { form: UntypedFormGroup; navigation = 'arrows'; @Input() inputSize: 'sm' | 'rg' | 'md' | 'lg'; - constructor(private _i18n: I18n, - private formBuilder: UntypedFormBuilder) { - } + constructor(private _i18n: I18n, private formBuilder: UntypedFormBuilder) {} @Input() set language(value: string) { this._i18n.language = value; diff --git a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation-lg.component.html b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation-lg.component.html index 59ecae5773..eb92eb6ed0 100644 --- a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation-lg.component.html +++ b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation-lg.component.html @@ -1,19 +1,26 @@
    - + - diff --git a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation-lg.component.ts b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation-lg.component.ts index c9a4e28939..c06c7eb058 100644 --- a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation-lg.component.ts +++ b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation-lg.component.ts @@ -1,12 +1,14 @@ import { Component } from '@angular/core'; import { NgbDatepickerI18n } from '@ng-bootstrap/ng-bootstrap'; -import { CustomDatepickerI18n, I18n } from '../datepicker-demo-page/datepicker-localization.service'; -import {DatepickerValidationDemoComponent} from './datepicker-validation-demo.component'; +import { + CustomDatepickerI18n, + I18n, +} from '../datepicker-demo-page/datepicker-localization.service'; +import { DatepickerValidationDemoComponent } from './datepicker-validation-demo.component'; @Component({ selector: 'app-datepicker-validation-lg', templateUrl: './datepicker-validation-lg.component.html', - providers: [I18n, {provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n}] + providers: [I18n, { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n }], }) -export class DatepickerValidationLgComponent extends DatepickerValidationDemoComponent { -} +export class DatepickerValidationLgComponent extends DatepickerValidationDemoComponent {} diff --git a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation.component.html b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation.component.html index 095b6b99c7..cce815c255 100644 --- a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation.component.html +++ b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation.component.html @@ -1,19 +1,26 @@
    - + - diff --git a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation.component.ts b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation.component.ts index 2516fe9124..5fb7faf263 100644 --- a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation.component.ts +++ b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation.component.ts @@ -1,12 +1,14 @@ import { Component } from '@angular/core'; import { NgbDatepickerI18n } from '@ng-bootstrap/ng-bootstrap'; -import { CustomDatepickerI18n, I18n } from '../datepicker-demo-page/datepicker-localization.service'; -import {DatepickerValidationDemoComponent} from './datepicker-validation-demo.component'; +import { + CustomDatepickerI18n, + I18n, +} from '../datepicker-demo-page/datepicker-localization.service'; +import { DatepickerValidationDemoComponent } from './datepicker-validation-demo.component'; @Component({ selector: 'app-datepicker-validation', templateUrl: './datepicker-validation.component.html', - providers: [I18n, {provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n}] + providers: [I18n, { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n }], }) -export class DatepickerValidationComponent extends DatepickerValidationDemoComponent { -} +export class DatepickerValidationComponent extends DatepickerValidationDemoComponent {} diff --git a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker.module.ts b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker.module.ts index bfdbcd19ed..3d9386c24e 100644 --- a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker.module.ts +++ b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker.module.ts @@ -1,19 +1,19 @@ -import {CommonModule} from '@angular/common'; -import {LOCALE_ID, NgModule} from '@angular/core'; -import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {RouterModule} from '@angular/router'; -import {NgbDatepickerI18n, NgbModule} from '@ng-bootstrap/ng-bootstrap'; -import {HighlightModule} from 'ngx-highlightjs'; -import {PostCommonModule} from '../../../common/post-common.module'; -import {HighlightProvider} from '../../../common/highlight.provider'; -import {NgbDatepickerDemoPageComponent} from './datepicker-demo-page/datepicker-demo-page.component'; -import {CustomDatepickerI18n, I18n} from './datepicker-demo-page/datepicker-localization.service'; -import {DatepickerSimpleDemoComponent} from './datepicker-simple/datepicker-simple-demo.component'; -import {DatepickerSimpleLgComponent} from './datepicker-simple/datepicker-simple-lg.component'; -import {DatepickerSimpleComponent} from './datepicker-simple/datepicker-simple.component'; -import {DatepickerValidationLgComponent} from './datepicker-validation/datepicker-validation-lg.component'; -import {DatepickerValidationComponent} from './datepicker-validation/datepicker-validation.component'; -import {DatepickerValidationDemoComponent} from './datepicker-validation/datepicker-validation-demo.component'; +import { CommonModule } from '@angular/common'; +import { LOCALE_ID, NgModule } from '@angular/core'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { RouterModule } from '@angular/router'; +import { NgbDatepickerI18n, NgbModule } from '@ng-bootstrap/ng-bootstrap'; +import { HighlightModule } from 'ngx-highlightjs'; +import { PostCommonModule } from '../../../common/post-common.module'; +import { HighlightProvider } from '../../../common/highlight.provider'; +import { NgbDatepickerDemoPageComponent } from './datepicker-demo-page/datepicker-demo-page.component'; +import { CustomDatepickerI18n, I18n } from './datepicker-demo-page/datepicker-localization.service'; +import { DatepickerSimpleDemoComponent } from './datepicker-simple/datepicker-simple-demo.component'; +import { DatepickerSimpleLgComponent } from './datepicker-simple/datepicker-simple-lg.component'; +import { DatepickerSimpleComponent } from './datepicker-simple/datepicker-simple.component'; +import { DatepickerValidationLgComponent } from './datepicker-validation/datepicker-validation-lg.component'; +import { DatepickerValidationComponent } from './datepicker-validation/datepicker-validation.component'; +import { DatepickerValidationDemoComponent } from './datepicker-validation/datepicker-validation-demo.component'; @NgModule({ imports: [ @@ -34,13 +34,12 @@ import {DatepickerValidationDemoComponent} from './datepicker-validation/datepic DatepickerValidationLgComponent, NgbDatepickerDemoPageComponent, ], - exports: [ - NgbDatepickerDemoPageComponent, - ], + exports: [NgbDatepickerDemoPageComponent], providers: [ - {provide: LOCALE_ID, useValue: 'de'}, + { provide: LOCALE_ID, useValue: 'de' }, HighlightProvider.Config, - I18n, {provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n}, + I18n, + { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n }, ], }) export class DatepickerModule {} diff --git a/packages/demo/src/app/ng-bootstrap/components/dropdown/dropdown-demo-page/dropdown-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/dropdown/dropdown-demo-page/dropdown-demo-page.component.html index 24de3b13ab..8dcbb51cf0 100644 --- a/packages/demo/src/app/ng-bootstrap/components/dropdown/dropdown-demo-page/dropdown-demo-page.component.html +++ b/packages/demo/src/app/ng-bootstrap/components/dropdown/dropdown-demo-page/dropdown-demo-page.component.html @@ -6,4 +6,8 @@

    Dropdown

    - + diff --git a/packages/demo/src/app/ng-bootstrap/components/dropdown/dropdown-demo/dropdown-demo.component.ts b/packages/demo/src/app/ng-bootstrap/components/dropdown/dropdown-demo/dropdown-demo.component.ts index 5b357bfba3..21be5a703d 100644 --- a/packages/demo/src/app/ng-bootstrap/components/dropdown/dropdown-demo/dropdown-demo.component.ts +++ b/packages/demo/src/app/ng-bootstrap/components/dropdown/dropdown-demo/dropdown-demo.component.ts @@ -2,8 +2,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-ngb-dropdown-demo', - templateUrl: './dropdown-demo.component.html' + templateUrl: './dropdown-demo.component.html', }) -export class NgbDropdownDemoComponent { - -} +export class NgbDropdownDemoComponent {} diff --git a/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo-content/modal-demo-content.component.ts b/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo-content/modal-demo-content.component.ts index a8d1616e13..43ef397b21 100644 --- a/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo-content/modal-demo-content.component.ts +++ b/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo-content/modal-demo-content.component.ts @@ -1,14 +1,12 @@ -import {Component, Input} from "@angular/core"; -import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap"; +import { Component, Input } from '@angular/core'; +import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'app-ngb-modal-content', templateUrl: './modal-demo.content.html', - }) export class NgbModalDemoContentComponent { @Input() showLongContent = false; constructor(public activeModal: NgbActiveModal) {} - } diff --git a/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo-content/modal-demo.content.html b/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo-content/modal-demo.content.html index 560fc5d99f..424b591cdf 100644 --- a/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo-content/modal-demo.content.html +++ b/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo-content/modal-demo.content.html @@ -1,17 +1,66 @@

    Hi there!

    - +

    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.

    +

    + 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. +

    - +
    diff --git a/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo-page/modal-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo-page/modal-demo-page.component.html index 191339b60e..b474646bd8 100644 --- a/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo-page/modal-demo-page.component.html +++ b/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo-page/modal-demo-page.component.html @@ -4,8 +4,16 @@

    Modal

    -

    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.

    +

    + 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 + + . +

    diff --git a/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo-page/modal-demo-page.component.ts b/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo-page/modal-demo-page.component.ts index 521a0036fd..dc2d6e78a5 100644 --- a/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo-page/modal-demo-page.component.ts +++ b/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo-page/modal-demo-page.component.ts @@ -1,12 +1,13 @@ import { Component } from '@angular/core'; const modalTemplate = require('!!raw-loader!../modal-demo-content/modal-demo.content.html').default; -const modalTsTemplate = require('!!raw-loader!../modal-demo-content/modal-demo-content.component.ts').default; +const modalTsTemplate = + require('!!raw-loader!../modal-demo-content/modal-demo-content.component.ts').default; const buttonsTemplate = require('!!raw-loader!../modal-demo/modal-demo.component.html').default; const tsTemplate = require('!!raw-loader!../modal-demo/modal-demo.component.ts').default; @Component({ selector: 'app-ngb-modal-demo-page', - templateUrl: './modal-demo-page.component.html' + templateUrl: './modal-demo-page.component.html', }) export class NgbModalDemoPageComponent { modalTemplate = modalTemplate; diff --git a/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo/modal-demo.component.html b/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo/modal-demo.component.html index a6b4542525..529e7b541e 100644 --- a/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo/modal-demo.component.html +++ b/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo/modal-demo.component.html @@ -1,17 +1,33 @@

    Default modal

    -
    +

    Sizes

    - - - -
    + + + +

    Long content

    When the modal is too long for the viewport, its body becomes scrollable.

    - -
    + +

    Trigger with a tooltip

    - + diff --git a/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo/modal-demo.component.ts b/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo/modal-demo.component.ts index 4989128c5c..5cfa60175c 100644 --- a/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo/modal-demo.component.ts +++ b/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo/modal-demo.component.ts @@ -1,10 +1,10 @@ -import { Component} from '@angular/core'; -import {NgbModal} from '@ng-bootstrap/ng-bootstrap'; -import {NgbModalDemoContentComponent} from "../modal-demo-content/modal-demo-content.component"; +import { Component } from '@angular/core'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { NgbModalDemoContentComponent } from '../modal-demo-content/modal-demo-content.component'; @Component({ selector: 'app-ngb-modal-demo', - templateUrl: './modal-demo.component.html' + templateUrl: './modal-demo.component.html', }) export class NgbModalDemoComponent { constructor(private modalService: NgbModal) {} diff --git a/packages/demo/src/app/ng-bootstrap/components/pagination/pagination-demo-page/pagination-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/pagination/pagination-demo-page/pagination-demo-page.component.html index 0ea9d107e3..4fb7c1dd11 100644 --- a/packages/demo/src/app/ng-bootstrap/components/pagination/pagination-demo-page/pagination-demo-page.component.html +++ b/packages/demo/src/app/ng-bootstrap/components/pagination/pagination-demo-page/pagination-demo-page.component.html @@ -6,4 +6,8 @@

    Pagination

    - + diff --git a/packages/demo/src/app/ng-bootstrap/components/pagination/pagination-demo/pagination-demo.component.html b/packages/demo/src/app/ng-bootstrap/components/pagination/pagination-demo/pagination-demo.component.html index 9080d31759..361fb4e783 100644 --- a/packages/demo/src/app/ng-bootstrap/components/pagination/pagination-demo/pagination-demo.component.html +++ b/packages/demo/src/app/ng-bootstrap/components/pagination/pagination-demo/pagination-demo.component.html @@ -1,8 +1,12 @@

    Pagination

    - - + -
    +
    -
    Current page: {{page}}
    \ No newline at end of file +
    Current page: {{ page }}
    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 index d9f69db054..b15ed30d3d 100644 --- 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 @@ -6,4 +6,8 @@

    Popover

    - + diff --git a/packages/demo/src/app/ng-bootstrap/components/popover/popover-demo-page/popover-demo-page.component.ts b/packages/demo/src/app/ng-bootstrap/components/popover/popover-demo-page/popover-demo-page.component.ts index c643239f4f..d4e23f7a38 100644 --- a/packages/demo/src/app/ng-bootstrap/components/popover/popover-demo-page/popover-demo-page.component.ts +++ b/packages/demo/src/app/ng-bootstrap/components/popover/popover-demo-page/popover-demo-page.component.ts @@ -3,8 +3,8 @@ const codeTemplate = require('!!raw-loader!../popover-demo/popover-demo.componen @Component({ selector: 'app-ngb-popover-demo-page', - templateUrl: './popover-demo-page.component.html' + templateUrl: './popover-demo-page.component.html', }) -export class NgbPopoverDemoPageComponent{ -codeTemplate = codeTemplate; +export class NgbPopoverDemoPageComponent { + codeTemplate = codeTemplate; } diff --git a/packages/demo/src/app/ng-bootstrap/components/popover/popover-demo/popover-demo.component.html b/packages/demo/src/app/ng-bootstrap/components/popover/popover-demo/popover-demo.component.html index c6144d2995..fb6c192bfe 100644 --- a/packages/demo/src/app/ng-bootstrap/components/popover/popover-demo/popover-demo.component.html +++ b/packages/demo/src/app/ng-bootstrap/components/popover/popover-demo/popover-demo.component.html @@ -1,24 +1,60 @@
    - - - - - Vivamus sagittis lacus vel augue laoreet rutrum link faucibus. - Popover with markup + + Vivamus sagittis lacus vel augue laoreet rutrum + link + faucibus. + + + Popover with + markup + -
    diff --git a/packages/demo/src/app/ng-bootstrap/components/popover/popover-demo/popover-demo.component.ts b/packages/demo/src/app/ng-bootstrap/components/popover/popover-demo/popover-demo.component.ts index 7a03e344e0..79d2a19f9c 100644 --- a/packages/demo/src/app/ng-bootstrap/components/popover/popover-demo/popover-demo.component.ts +++ b/packages/demo/src/app/ng-bootstrap/components/popover/popover-demo/popover-demo.component.ts @@ -2,12 +2,8 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-ngb-popover-demo', - templateUrl: './popover-demo.component.html' + templateUrl: './popover-demo.component.html', }) -export class NgbPopoverDemoComponent{ +export class NgbPopoverDemoComponent {} -} - - -export class NgbdPopoverBasic { -} +export class NgbdPopoverBasic {} diff --git a/packages/demo/src/app/ng-bootstrap/components/progressbar/progressbar-demo-page/progressbar-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/progressbar/progressbar-demo-page/progressbar-demo-page.component.html index 4953f555a0..15eb316fa0 100644 --- a/packages/demo/src/app/ng-bootstrap/components/progressbar/progressbar-demo-page/progressbar-demo-page.component.html +++ b/packages/demo/src/app/ng-bootstrap/components/progressbar/progressbar-demo-page/progressbar-demo-page.component.html @@ -6,4 +6,8 @@

    Progressbar

    - + diff --git a/packages/demo/src/app/ng-bootstrap/components/progressbar/progressbar-demo-page/progressbar-demo-page.component.ts b/packages/demo/src/app/ng-bootstrap/components/progressbar/progressbar-demo-page/progressbar-demo-page.component.ts index a6c34c0391..9eebbadc0f 100644 --- a/packages/demo/src/app/ng-bootstrap/components/progressbar/progressbar-demo-page/progressbar-demo-page.component.ts +++ b/packages/demo/src/app/ng-bootstrap/components/progressbar/progressbar-demo-page/progressbar-demo-page.component.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; -const codeTemplate = require('!!raw-loader!../progressbar-demo/progressbar-demo.component.html').default; +const codeTemplate = + require('!!raw-loader!../progressbar-demo/progressbar-demo.component.html').default; @Component({ selector: 'app-ngb-progressbar-demo-page', - templateUrl: './progressbar-demo-page.component.html' + templateUrl: './progressbar-demo-page.component.html', }) export class NgbProgressbarDemoPageComponent { - - codeTemplate = codeTemplate; + codeTemplate = codeTemplate; } diff --git a/packages/demo/src/app/ng-bootstrap/components/progressbar/progressbar-demo/progressbar-demo.component.html b/packages/demo/src/app/ng-bootstrap/components/progressbar/progressbar-demo/progressbar-demo.component.html index 0773a1c36b..efbf2aebd1 100644 --- a/packages/demo/src/app/ng-bootstrap/components/progressbar/progressbar-demo/progressbar-demo.component.html +++ b/packages/demo/src/app/ng-bootstrap/components/progressbar/progressbar-demo/progressbar-demo.component.html @@ -1,8 +1,18 @@ -

    -

    -

    +

    + +

    +

    + +

    +

    + +

    -

    +

    + +

    -

    -

    \ No newline at end of file +

    + +

    +

    diff --git a/packages/demo/src/app/ng-bootstrap/components/progressbar/progressbar-demo/progressbar-demo.component.ts b/packages/demo/src/app/ng-bootstrap/components/progressbar/progressbar-demo/progressbar-demo.component.ts index 5b1108906c..a2fe0acaab 100644 --- a/packages/demo/src/app/ng-bootstrap/components/progressbar/progressbar-demo/progressbar-demo.component.ts +++ b/packages/demo/src/app/ng-bootstrap/components/progressbar/progressbar-demo/progressbar-demo.component.ts @@ -2,8 +2,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-ngb-progressbar-demo', - templateUrl: './progressbar-demo.component.html' + templateUrl: './progressbar-demo.component.html', }) -export class NgbProgressbarDemoComponent { - -} +export class NgbProgressbarDemoComponent {} diff --git a/packages/demo/src/app/ng-bootstrap/components/rating/rating-demo-page/rating-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/rating/rating-demo-page/rating-demo-page.component.html index 8a52154a3b..55ded9ea97 100644 --- a/packages/demo/src/app/ng-bootstrap/components/rating/rating-demo-page/rating-demo-page.component.html +++ b/packages/demo/src/app/ng-bootstrap/components/rating/rating-demo-page/rating-demo-page.component.html @@ -6,4 +6,8 @@

    Rating

    - + diff --git a/packages/demo/src/app/ng-bootstrap/components/rating/rating-demo-page/rating-demo-page.component.ts b/packages/demo/src/app/ng-bootstrap/components/rating/rating-demo-page/rating-demo-page.component.ts index a50f74d2f8..2c3ca7e802 100644 --- a/packages/demo/src/app/ng-bootstrap/components/rating/rating-demo-page/rating-demo-page.component.ts +++ b/packages/demo/src/app/ng-bootstrap/components/rating/rating-demo-page/rating-demo-page.component.ts @@ -3,9 +3,8 @@ const codeTemplate = require('!!raw-loader!../rating-demo/rating-demo.component. @Component({ selector: 'app-ngb-rating-demo-page', - templateUrl: './rating-demo-page.component.html' + templateUrl: './rating-demo-page.component.html', }) export class NgbRatingDemoPageComponent { - -codeTemplate = codeTemplate; + codeTemplate = codeTemplate; } diff --git a/packages/demo/src/app/ng-bootstrap/components/rating/rating-demo/rating-demo.component.html b/packages/demo/src/app/ng-bootstrap/components/rating/rating-demo/rating-demo.component.html index 422499dc49..a1fedc83e4 100644 --- a/packages/demo/src/app/ng-bootstrap/components/rating/rating-demo/rating-demo.component.html +++ b/packages/demo/src/app/ng-bootstrap/components/rating/rating-demo/rating-demo.component.html @@ -1,6 +1,5 @@
    -
    + 
    Rate: {{currentRate}}
    - diff --git a/packages/demo/src/app/ng-bootstrap/components/rating/rating-demo/rating-demo.component.ts b/packages/demo/src/app/ng-bootstrap/components/rating/rating-demo/rating-demo.component.ts index 5a29357de6..996e2ba003 100644 --- a/packages/demo/src/app/ng-bootstrap/components/rating/rating-demo/rating-demo.component.ts +++ b/packages/demo/src/app/ng-bootstrap/components/rating/rating-demo/rating-demo.component.ts @@ -3,7 +3,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-ngb-rating-demo', templateUrl: './rating-demo.component.html', - }) export class NgbRatingDemoComponent { public currentRate; diff --git a/packages/demo/src/app/ng-bootstrap/components/tabs/tabs-demo-page/tabs-demo-page.component.scss b/packages/demo/src/app/ng-bootstrap/components/tabs/tabs-demo-page/tabs-demo-page.component.scss index 928f878454..b77f920baf 100644 --- a/packages/demo/src/app/ng-bootstrap/components/tabs/tabs-demo-page/tabs-demo-page.component.scss +++ b/packages/demo/src/app/ng-bootstrap/components/tabs/tabs-demo-page/tabs-demo-page.component.scss @@ -1,4 +1,4 @@ .negate-px-3 { margin-right: -1rem; margin-left: -1rem; -} \ No newline at end of file +} diff --git a/packages/demo/src/app/ng-bootstrap/components/tabs/tabs-demo-page/tabs-demo-page.component.ts b/packages/demo/src/app/ng-bootstrap/components/tabs/tabs-demo-page/tabs-demo-page.component.ts index ac70327ac0..b0f43ef181 100644 --- a/packages/demo/src/app/ng-bootstrap/components/tabs/tabs-demo-page/tabs-demo-page.component.ts +++ b/packages/demo/src/app/ng-bootstrap/components/tabs/tabs-demo-page/tabs-demo-page.component.ts @@ -8,7 +8,7 @@ const containerSnippet = require('!!raw-loader!../snippets/tabs-inside-container @Component({ selector: 'app-ngb-tabs-demo-page', templateUrl: './tabs-demo-page.component.html', - styleUrls: ['./tabs-demo-page.component.scss'] + styleUrls: ['./tabs-demo-page.component.scss'], }) export class NgbTabsDemoPageComponent { codeTemplate = codeTemplate; diff --git a/packages/demo/src/app/ng-bootstrap/components/tabs/tabs-demo/tabs-demo.component.html b/packages/demo/src/app/ng-bootstrap/components/tabs/tabs-demo/tabs-demo.component.html index e936715ee1..0c69481e48 100644 --- a/packages/demo/src/app/ng-bootstrap/components/tabs/tabs-demo/tabs-demo.component.html +++ b/packages/demo/src/app/ng-bootstrap/components/tabs/tabs-demo/tabs-demo.component.html @@ -8,65 +8,147 @@
    - Mantis Shrimp on the sea floor -
    Photo by Dorothea - OLDANI on Unsplash + Mantis Shrimp on the sea floor +
    + + Photo by + + Dorothea OLDANI + + on + + Unsplash + +

    Mantis shrimp

    The heaviest punch

    -

    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] +

    + 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). +

    + 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 + + ).

    @@ -77,82 +159,211 @@

    The heaviest punch

    - +

    Tardigrades

    The toughest guy

    -

    Tardigrades (/ˈtɑːrdɪɡreɪd/), known colloquially as water bears +

    + 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] + 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. +

    + 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] +

    + 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]

    @@ -163,57 +374,153 @@

    The toughest guy

    - Jellyfish in a black sea + Jellyfish in a black sea

    Turritopsis dohrnii

    The immortal

    -

    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 [sv][4] and species of the genus Aurelia.[5] +

    + 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 + + +  [ + + sv + + ] + + + [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. +

    + 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] +

    + 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 capability of biological immortality with no maximum lifespan makes + T. dohrnii + an important target of basic biological, + aging + and + + pharmaceutical + + research. + + [10] +

    @@ -224,63 +531,214 @@

    The immortal

    - Platypus on the forest floor + Platypus on the forest floor

    Platypus

    The patchwork animal

    -

    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. +

    + 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. +

    + 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. +

    + 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, 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. + href="https://en.wikipedia.org/w/index.php?title=Platypus&action=edit" + > + [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.

    @@ -293,4 +751,4 @@

    The patchwork animal

    -
    \ No newline at end of file +
    diff --git a/packages/demo/src/app/ng-bootstrap/components/tabs/tabs-demo/tabs-demo.component.ts b/packages/demo/src/app/ng-bootstrap/components/tabs/tabs-demo/tabs-demo.component.ts index e97fdd65eb..2b2505dee5 100644 --- a/packages/demo/src/app/ng-bootstrap/components/tabs/tabs-demo/tabs-demo.component.ts +++ b/packages/demo/src/app/ng-bootstrap/components/tabs/tabs-demo/tabs-demo.component.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'app-ngb-tabs-demo', - templateUrl: './tabs-demo.component.html' + templateUrl: './tabs-demo.component.html', }) export class NgbTabsDemoComponent { @Input() tabsBg: string; diff --git a/packages/demo/src/app/ng-bootstrap/components/timepicker/timepicker-demo-page/timepicker-demo-page.component.ts b/packages/demo/src/app/ng-bootstrap/components/timepicker/timepicker-demo-page/timepicker-demo-page.component.ts index 5ef7160c51..4ab3777ef1 100644 --- a/packages/demo/src/app/ng-bootstrap/components/timepicker/timepicker-demo-page/timepicker-demo-page.component.ts +++ b/packages/demo/src/app/ng-bootstrap/components/timepicker/timepicker-demo-page/timepicker-demo-page.component.ts @@ -1,8 +1,9 @@ import { Component } from '@angular/core'; -const codeTemplate = require('!!raw-loader!../timepicker-demo/timepicker-demo.component.html').default; +const codeTemplate = + require('!!raw-loader!../timepicker-demo/timepicker-demo.component.html').default; @Component({ selector: 'app-timepicker-demo-page', - templateUrl: './timepicker-demo-page.component.html' + templateUrl: './timepicker-demo-page.component.html', }) export class NgbTimepickerDemoPageComponent { codeTemplate = codeTemplate; diff --git a/packages/demo/src/app/ng-bootstrap/components/timepicker/timepicker-demo/timepicker-demo.component.html b/packages/demo/src/app/ng-bootstrap/components/timepicker/timepicker-demo/timepicker-demo.component.html index 9c52fd2b87..89540b5bbc 100644 --- a/packages/demo/src/app/ng-bootstrap/components/timepicker/timepicker-demo/timepicker-demo.component.html +++ b/packages/demo/src/app/ng-bootstrap/components/timepicker/timepicker-demo/timepicker-demo.component.html @@ -5,9 +5,28 @@

    Timepicker example

    Sizing

    -

    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. +

    + 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 + + .

    @@ -23,8 +42,13 @@

    Sizing


    -

    To use the timpicker in regular size, remove the [size] input and use the class - .timepicker-rg instead.

    +

    + To use the timpicker in regular size, remove the + [size] + input and use the class + .timepicker-rg + instead. +

    @@ -32,7 +56,12 @@

    Sizing

    Timepicker with validation

    - +

    The time is right.

    Time is too early.

    Time is too late.

    diff --git a/packages/demo/src/app/ng-bootstrap/components/typeahead/typeahead-demo-page/typeahead-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/typeahead/typeahead-demo-page/typeahead-demo-page.component.html index fa2798e361..2913321e82 100644 --- a/packages/demo/src/app/ng-bootstrap/components/typeahead/typeahead-demo-page/typeahead-demo-page.component.html +++ b/packages/demo/src/app/ng-bootstrap/components/typeahead/typeahead-demo-page/typeahead-demo-page.component.html @@ -6,4 +6,8 @@

    Typeahead

    - + diff --git a/packages/demo/src/app/ng-bootstrap/components/typeahead/typeahead-demo/typeahead-demo.component.html b/packages/demo/src/app/ng-bootstrap/components/typeahead/typeahead-demo/typeahead-demo.component.html index 59aded2932..255ae7ae0b 100644 --- a/packages/demo/src/app/ng-bootstrap/components/typeahead/typeahead-demo/typeahead-demo.component.html +++ b/packages/demo/src/app/ng-bootstrap/components/typeahead/typeahead-demo/typeahead-demo.component.html @@ -1,13 +1,24 @@ -A typeahead example that gets values from a static string[] +A typeahead example that gets values from a static +string[]
      -
    • debounceTime operator
      • +
    • + debounceTime + operator +
    • kicks in only if 2+ characters typed
    • limits to 10 results
    - +
    -
    +
    Model: {{ model | json }}
    diff --git a/packages/demo/src/app/post-sample/components/custom-select/custom-select-demo-page/custom-select-demo-page.component.ts b/packages/demo/src/app/post-sample/components/custom-select/custom-select-demo-page/custom-select-demo-page.component.ts index e719e8f7ad..f7ddc5af43 100644 --- a/packages/demo/src/app/post-sample/components/custom-select/custom-select-demo-page/custom-select-demo-page.component.ts +++ b/packages/demo/src/app/post-sample/components/custom-select/custom-select-demo-page/custom-select-demo-page.component.ts @@ -1,11 +1,14 @@ import { Component } from '@angular/core'; -const codeTemplate = require('!!raw-loader!../custom-select-demo/custom-select-demo.component.html').default; -const codeTemplateFloating = require('!!raw-loader!../custom-select-floating-demo/custom-select-floating-demo.component.html').default; -const codeComponent = require('!!raw-loader!../custom-select-demo/custom-select-demo.component.ts').default; +const codeTemplate = + require('!!raw-loader!../custom-select-demo/custom-select-demo.component.html').default; +const codeTemplateFloating = + require('!!raw-loader!../custom-select-floating-demo/custom-select-floating-demo.component.html').default; +const codeComponent = + require('!!raw-loader!../custom-select-demo/custom-select-demo.component.ts').default; @Component({ selector: 'app-custom-select-demo-page', - templateUrl: './custom-select-demo-page.component.html' + templateUrl: './custom-select-demo-page.component.html', }) export class CustomSelectDemoPageComponent { codeTemplate = codeTemplate; diff --git a/packages/demo/src/app/post-sample/components/custom-select/custom-select-demo/custom-select-demo.component.ts b/packages/demo/src/app/post-sample/components/custom-select/custom-select-demo/custom-select-demo.component.ts index eb5ee362da..38d1876ce5 100644 --- a/packages/demo/src/app/post-sample/components/custom-select/custom-select-demo/custom-select-demo.component.ts +++ b/packages/demo/src/app/post-sample/components/custom-select/custom-select-demo/custom-select-demo.component.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, QueryList, ViewChildren} from '@angular/core'; +import { Component, ElementRef, QueryList, ViewChildren } from '@angular/core'; interface IOption { label: string; @@ -8,10 +8,10 @@ interface IOption { @Component({ selector: 'app-custom-select-demo', - templateUrl: './custom-select-demo.component.html' + templateUrl: './custom-select-demo.component.html', }) export class CustomSelectDemoComponent { - @ViewChildren('option', {read: ElementRef}) private optionList: QueryList; + @ViewChildren('option', { read: ElementRef }) private optionList: QueryList; public options: IOption[]; public selectedOption: IOption; @@ -37,7 +37,7 @@ export class CustomSelectDemoComponent { } public setFocus(event: KeyboardEvent) { - const activeOptionIndex = Array.from(this.optionList).findIndex((option) => { + const activeOptionIndex = Array.from(this.optionList).findIndex(option => { return option.nativeElement.classList.contains('active'); }); @@ -57,5 +57,4 @@ export class CustomSelectDemoComponent { break; } } - } diff --git a/packages/demo/src/app/post-sample/components/custom-select/custom-select-floating-demo/custom-select-floating-demo.component.ts b/packages/demo/src/app/post-sample/components/custom-select/custom-select-floating-demo/custom-select-floating-demo.component.ts index de14b82d84..da69d9cf74 100644 --- a/packages/demo/src/app/post-sample/components/custom-select/custom-select-floating-demo/custom-select-floating-demo.component.ts +++ b/packages/demo/src/app/post-sample/components/custom-select/custom-select-floating-demo/custom-select-floating-demo.component.ts @@ -1,9 +1,9 @@ -import {Component, OnInit, Input} from '@angular/core'; -import {CustomSelectDemoComponent} from '../custom-select-demo/custom-select-demo.component'; +import { Component, OnInit, Input } from '@angular/core'; +import { CustomSelectDemoComponent } from '../custom-select-demo/custom-select-demo.component'; @Component({ selector: 'app-custom-select-floating-demo', - templateUrl: './custom-select-floating-demo.component.html' + templateUrl: './custom-select-floating-demo.component.html', }) export class CustomSelectFloatingDemoComponent extends CustomSelectDemoComponent implements OnInit { @Input() public noSelected: boolean = false; diff --git a/packages/demo/src/app/post-sample/components/datatable/datatable-demo-page/datatable-demo-page.component.html b/packages/demo/src/app/post-sample/components/datatable/datatable-demo-page/datatable-demo-page.component.html index 46b454c707..7414e2c100 100644 --- a/packages/demo/src/app/post-sample/components/datatable/datatable-demo-page/datatable-demo-page.component.html +++ b/packages/demo/src/app/post-sample/components/datatable/datatable-demo-page/datatable-demo-page.component.html @@ -1,19 +1,31 @@

    Datatable

    Using ngx-datatable 20.0.0

    - + Ngx-datatable documentation   - + Ngx-datatable demos
    @@ -37,12 +49,20 @@

    Basic datatable

    - - + +
    -
    +

    datatable-demo.component.html

    @@ -76,10 +96,9 @@

    Editable datatable

    -

    Datatable with loading indicator

    datatable-loading-demo.component.html

    -
    \ No newline at end of file + diff --git a/packages/demo/src/app/post-sample/components/datatable/datatable-demo/datatable-demo.component.html b/packages/demo/src/app/post-sample/components/datatable/datatable-demo/datatable-demo.component.html index f562da4f06..0711d00bac 100644 --- a/packages/demo/src/app/post-sample/components/datatable/datatable-demo/datatable-demo.component.html +++ b/packages/demo/src/app/post-sample/components/datatable/datatable-demo/datatable-demo.component.html @@ -26,7 +26,7 @@ - {{ value | date: 'MMM y':undefined:'en' }} + {{ value | date : 'MMM y' : undefined : 'en' }} diff --git a/packages/demo/src/app/post-sample/components/datatable/datatable-demo/datatable-demo.component.ts b/packages/demo/src/app/post-sample/components/datatable/datatable-demo/datatable-demo.component.ts index 7c436ec647..fe8729b3f0 100644 --- a/packages/demo/src/app/post-sample/components/datatable/datatable-demo/datatable-demo.component.ts +++ b/packages/demo/src/app/post-sample/components/datatable/datatable-demo/datatable-demo.component.ts @@ -1,4 +1,4 @@ -import {Component, Input} from '@angular/core'; +import { Component, Input } from '@angular/core'; interface IRecords { debtorId: number; @@ -12,7 +12,7 @@ interface IRecords { @Component({ selector: 'app-datatable-demo', - templateUrl: './datatable-demo.component.html' + templateUrl: './datatable-demo.component.html', }) export class DatatableDemoComponent { @Input() public headerColumn: boolean; @@ -29,7 +29,7 @@ export class DatatableDemoComponent { billingMonth: '2021-03-15T12:09:51-01:00', keyword: 'Economy', amount: 965.82, - status: 'inactive' + status: 'inactive', }, { debtorId: 40103991, @@ -38,7 +38,7 @@ export class DatatableDemoComponent { billingMonth: '2021-03-15T12:09:51-01:00', keyword: 'Economy', amount: 626.65, - status: 'active' + status: 'active', }, { debtorId: 40103967, @@ -47,7 +47,7 @@ export class DatatableDemoComponent { billingMonth: '2021-03-15T12:09:51-01:00', keyword: 'Dispobox', amount: 802.18, - status: 'active' + status: 'active', }, { debtorId: 40103986, @@ -56,7 +56,7 @@ export class DatatableDemoComponent { billingMonth: '2021-03-15T12:09:51-01:00', keyword: 'Express shipment', amount: 397.05, - status: 'inactive' + status: 'inactive', }, { debtorId: 40103967, @@ -65,8 +65,8 @@ export class DatatableDemoComponent { billingMonth: '2021-03-15T12:09:51-01:00', keyword: 'Express shipment', amount: 742.87, - status: 'active' - } + status: 'active', + }, ]; this.statuses = ['active', 'inactive', 'automatic', 'blocked']; diff --git a/packages/demo/src/app/post-sample/components/datatable/datatable-editable-demo/datatable-editable-demo.component.ts b/packages/demo/src/app/post-sample/components/datatable/datatable-editable-demo/datatable-editable-demo.component.ts index 481726a5a7..751bdab057 100644 --- a/packages/demo/src/app/post-sample/components/datatable/datatable-editable-demo/datatable-editable-demo.component.ts +++ b/packages/demo/src/app/post-sample/components/datatable/datatable-editable-demo/datatable-editable-demo.component.ts @@ -2,38 +2,38 @@ * Copyright 2021 by Swiss Post, Information Technology */ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'app-datatable-editable-demo', - templateUrl: 'datatable-editable-demo.component.html' + templateUrl: 'datatable-editable-demo.component.html', }) export class DatatableEditableDemoComponent { public readonly Object = Object; - public rows: {id: string, product: string, quantity: number}[]; + public rows: { id: string; product: string; quantity: number }[]; constructor() { this.rows = [ { id: '2b369518-e006-450f-a1fc-b1ca2e9b2a72', product: 'Laboris do aliqua pariatur consequat', - quantity: 65 + quantity: 65, }, { id: 'c12e968e-49c0-4e22-8f1c-2194f728b97f', product: 'Commodo culpa et culpa sit', - quantity: 76 + quantity: 76, }, { id: 'dcf8087a-3db0-4e5f-9357-eff67b7ce722', product: 'Irure mollit adipisicing voluptate pariatur', - quantity: 72 + quantity: 72, }, { id: '4de80e57-9b4e-4fbd-b245-5897c081e28b', product: 'In culpa est et commodo', - quantity: 100 - } + quantity: 100, + }, ]; } } diff --git a/packages/demo/src/app/post-sample/components/datatable/datatable-loading-demo/datatable-loading-demo.component.html b/packages/demo/src/app/post-sample/components/datatable/datatable-loading-demo/datatable-loading-demo.component.html index d2d2d2ccaf..aee08d6de4 100644 --- a/packages/demo/src/app/post-sample/components/datatable/datatable-loading-demo/datatable-loading-demo.component.html +++ b/packages/demo/src/app/post-sample/components/datatable/datatable-loading-demo/datatable-loading-demo.component.html @@ -1,11 +1,23 @@
    - +
    - + - \ No newline at end of file + diff --git a/packages/demo/src/app/post-sample/components/datatable/datatable-paginated-demo/datatable-paginated-demo.component.html b/packages/demo/src/app/post-sample/components/datatable/datatable-paginated-demo/datatable-paginated-demo.component.html index da4a9ad30f..79fb9cd35e 100644 --- a/packages/demo/src/app/post-sample/components/datatable/datatable-paginated-demo/datatable-paginated-demo.component.html +++ b/packages/demo/src/app/post-sample/components/datatable/datatable-paginated-demo/datatable-paginated-demo.component.html @@ -1,43 +1,65 @@ - - + - {{value === 0 ? 'Gratis' : 'CHF ' + value}} + {{ value === 0 ? 'Gratis' : 'CHF ' + value }} - -
    - +
    - - - + - -
    - diff --git a/packages/demo/src/app/post-sample/components/datatable/datatable-paginated-demo/datatable-paginated-demo.component.ts b/packages/demo/src/app/post-sample/components/datatable/datatable-paginated-demo/datatable-paginated-demo.component.ts index d4b3e11349..0d592ebf32 100644 --- a/packages/demo/src/app/post-sample/components/datatable/datatable-paginated-demo/datatable-paginated-demo.component.ts +++ b/packages/demo/src/app/post-sample/components/datatable/datatable-paginated-demo/datatable-paginated-demo.component.ts @@ -1,278 +1,272 @@ -import { - Component, - Input, - OnChanges, - OnInit, - SimpleChanges, -} from "@angular/core"; +import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; @Component({ - selector: "app-datatable-paginated-demo", - templateUrl: "./datatable-paginated-demo.component.html", + selector: 'app-datatable-paginated-demo', + templateUrl: './datatable-paginated-demo.component.html', }) export class DatatablePaginatedDemoComponent implements OnInit, OnChanges { - @Input() public paginationMode: "standard" | "loader" = "standard"; + @Input() public paginationMode: 'standard' | 'loader' = 'standard'; public page: number; public nbRowsPerPage: number; public loading: boolean; public readonly rows = [ { - name: "irure amet Lorem ex aute laboris sunt", + name: 'irure amet Lorem ex aute laboris sunt', price: 41.04, id: 2285160636, }, { - name: "amet minim esse dolore excepteur dolore ex", + name: 'amet minim esse dolore excepteur dolore ex', price: 65.71, id: 2864505807, }, { - name: "anim consectetur qui culpa eu eiusmod dolor", + name: 'anim consectetur qui culpa eu eiusmod dolor', price: 57.72, id: 2448670977, }, { - name: "minim tempor non do quis minim velit", + name: 'minim tempor non do quis minim velit', price: 38.13, id: 2411003894, }, { - name: "aliqua laboris enim veniam tempor magna nostrud", + name: 'aliqua laboris enim veniam tempor magna nostrud', price: 0, id: 2569769930, }, { - name: "veniam exercitation sunt enim et excepteur exercitation", + name: 'veniam exercitation sunt enim et excepteur exercitation', price: 93.26, id: 2709567646, }, { - name: "reprehenderit cillum commodo officia ad esse id", + name: 'reprehenderit cillum commodo officia ad esse id', price: 0, id: 2979592582, }, { - name: "occaecat ullamco commodo velit reprehenderit et enim", + name: 'occaecat ullamco commodo velit reprehenderit et enim', price: 47.46, id: 2879934487, }, { - name: "nisi reprehenderit non mollit ad fugiat commodo", + name: 'nisi reprehenderit non mollit ad fugiat commodo', price: 0, id: 2905345444, }, { - name: "consequat tempor ad nisi sunt non laboris", + name: 'consequat tempor ad nisi sunt non laboris', price: 51.57, id: 2138506913, }, { - name: "do magna laborum enim qui ea duis", + name: 'do magna laborum enim qui ea duis', price: 24.75, id: 2065606839, }, { - name: "adipisicing consectetur dolore dolore amet qui ex", + name: 'adipisicing consectetur dolore dolore amet qui ex', price: 14.79, id: 2189192197, }, { - name: "incididunt velit nostrud nostrud labore minim dolore", + name: 'incididunt velit nostrud nostrud labore minim dolore', price: 34.01, id: 2615450077, }, { - name: "ea enim do reprehenderit ex ad nostrud", + name: 'ea enim do reprehenderit ex ad nostrud', price: 34.41, id: 2852403903, }, { - name: "tempor do nulla non proident do ad", + name: 'tempor do nulla non proident do ad', price: 0, id: 2182009963, }, { - name: "occaecat voluptate laborum mollit ipsum magna laboris", + name: 'occaecat voluptate laborum mollit ipsum magna laboris', price: 19, id: 2359467106, }, { - name: "ut commodo Lorem anim laboris non consectetur", + name: 'ut commodo Lorem anim laboris non consectetur', price: 29.73, id: 2953678213, }, { - name: "sit ipsum pariatur amet nulla amet quis", + name: 'sit ipsum pariatur amet nulla amet quis', price: 0, id: 2066228843, }, { - name: "aliquip culpa ipsum culpa anim pariatur velit", + name: 'aliquip culpa ipsum culpa anim pariatur velit', price: 75.37, id: 2483151517, }, { - name: "veniam laboris deserunt sint dolor laboris qui", + name: 'veniam laboris deserunt sint dolor laboris qui', price: 0, id: 2238274828, }, { - name: "id tempor officia enim ullamco eiusmod minim", + name: 'id tempor officia enim ullamco eiusmod minim', price: 91.71, id: 2761638597, }, { - name: "in occaecat exercitation duis do quis deserunt", + name: 'in occaecat exercitation duis do quis deserunt', price: 88.02, id: 2270779156, }, { - name: "quis excepteur esse duis dolor elit ullamco", + name: 'quis excepteur esse duis dolor elit ullamco', price: 71.3, id: 2776587464, }, { - name: "eu consectetur cillum sint ipsum Lorem aliquip", + name: 'eu consectetur cillum sint ipsum Lorem aliquip', price: 51.59, id: 2259373011, }, { - name: "veniam ipsum exercitation adipisicing esse adipisicing eu", + name: 'veniam ipsum exercitation adipisicing esse adipisicing eu', price: 30.67, id: 2590368003, }, { - name: "pariatur dolor quis cillum sit minim non", + name: 'pariatur dolor quis cillum sit minim non', price: 0, id: 2026467457, }, { - name: "aute ipsum anim magna ut exercitation ea", + name: 'aute ipsum anim magna ut exercitation ea', price: 53.82, id: 2060166830, }, { - name: "anim pariatur adipisicing sunt excepteur eu qui", + name: 'anim pariatur adipisicing sunt excepteur eu qui', price: 6.49, id: 2895749904, }, { - name: "sit tempor exercitation dolore ad aliquip pariatur", + name: 'sit tempor exercitation dolore ad aliquip pariatur', price: 5.22, id: 2727224552, }, { - name: "incididunt consequat aute magna velit magna id", + name: 'incididunt consequat aute magna velit magna id', price: 16.86, id: 2300535944, }, { - name: "fugiat aute culpa ex officia velit incididunt", + name: 'fugiat aute culpa ex officia velit incididunt', price: 67.34, id: 2843481076, }, { - name: "culpa dolore qui Lorem in enim culpa", + name: 'culpa dolore qui Lorem in enim culpa', price: 18.04, id: 2638963606, }, { - name: "vehicula et, rutrum eu, ultrices sit", + name: 'vehicula et, rutrum eu, ultrices sit', price: 74.4, id: 2690008058, }, { - name: "Ut sagittis lobortis mauris. Suspendisse aliquet", + name: 'Ut sagittis lobortis mauris. Suspendisse aliquet', price: 85.21, id: 2104961564, }, { - name: "eget metus. In nec orci. Donec", + name: 'eget metus. In nec orci. Donec', price: 5.03, id: 2488973048, }, { - name: "lorem fringilla ornare placerat, orci lacus vestibulum", + name: 'lorem fringilla ornare placerat, orci lacus vestibulum', price: 12.82, id: 2068602240, }, { - name: "nulla. Integer urna. Vivamus molestie", + name: 'nulla. Integer urna. Vivamus molestie', price: 27.82, id: 2552576223, }, { - name: "dictum sapien. Aenean massa. Integer vitae nibh.", + name: 'dictum sapien. Aenean massa. Integer vitae nibh.', price: 55.41, id: 2490791690, }, { - name: "rutrum magna. Cras convallis convallis dolor. Quisque", + name: 'rutrum magna. Cras convallis convallis dolor. Quisque', price: 62.48, id: 2636742835, }, { - name: "pede. Cras vulputate velit eu", + name: 'pede. Cras vulputate velit eu', price: 56.58, id: 2014810358, }, { - name: "molestie pharetra nibh. Aliquam ornare,", + name: 'molestie pharetra nibh. Aliquam ornare,', price: 27.12, id: 2259658668, }, { - name: "sapien, gravida non, sollicitudin", + name: 'sapien, gravida non, sollicitudin', price: 12.5, id: 2132558847, }, { - name: "ipsum sodales purus, in molestie tortor nibh sit", + name: 'ipsum sodales purus, in molestie tortor nibh sit', price: 53.24, id: 2739597493, }, { - name: "vitae semper egestas, urna justo faucibus lectus,", + name: 'vitae semper egestas, urna justo faucibus lectus,', price: 53.25, id: 2002085100, }, { - name: "ligula. Nullam enim. Sed nulla", + name: 'ligula. Nullam enim. Sed nulla', price: 10.66, id: 2235245453, }, { - name: "per conubia nostra, per inceptos hymenaeos. Mauris", + name: 'per conubia nostra, per inceptos hymenaeos. Mauris', price: 4.47, id: 2562494730, }, { - name: "parturient montes, nascetur ridiculus mus. Proin", + name: 'parturient montes, nascetur ridiculus mus. Proin', price: 35.37, id: 2536109037, }, { - name: "dictum. Phasellus in felis. Nulla tempor", + name: 'dictum. Phasellus in felis. Nulla tempor', price: 49.19, id: 2300129128, }, { - name: "nec urna suscipit nonummy. Fusce fermentum", + name: 'nec urna suscipit nonummy. Fusce fermentum', price: 95.46, id: 2625971868, }, { - name: "mauris blandit mattis. Cras eget nisi dictum", + name: 'mauris blandit mattis. Cras eget nisi dictum', price: 36.82, id: 2635588432, }, { - name: "Mauris nulla. Integer urna. Vivamus molestie", + name: 'Mauris nulla. Integer urna. Vivamus molestie', price: 83.86, id: 2334831693, }, { - name: "Suspendisse commodo tincidunt nibh. Phasellus nulla.", + name: 'Suspendisse commodo tincidunt nibh. Phasellus nulla.', price: 26.12, id: 2405472012, }, diff --git a/packages/demo/src/app/post-sample/components/feedback/feedback-demo-page/feedback-demo-page.component.html b/packages/demo/src/app/post-sample/components/feedback/feedback-demo-page/feedback-demo-page.component.html index d3f50b348a..1d2d9c2c17 100644 --- a/packages/demo/src/app/post-sample/components/feedback/feedback-demo-page/feedback-demo-page.component.html +++ b/packages/demo/src/app/post-sample/components/feedback/feedback-demo-page/feedback-demo-page.component.html @@ -5,4 +5,8 @@

    Feedback

    - + diff --git a/packages/demo/src/app/post-sample/components/feedback/feedback-demo/feedback-demo.component.html b/packages/demo/src/app/post-sample/components/feedback/feedback-demo/feedback-demo.component.html index 1d2bacc98f..e7b73eb8b1 100644 --- a/packages/demo/src/app/post-sample/components/feedback/feedback-demo/feedback-demo.component.html +++ b/packages/demo/src/app/post-sample/components/feedback/feedback-demo/feedback-demo.component.html @@ -1,10 +1,10 @@ - +
    There is an error!
    - + - +
    Everything is fine.
    diff --git a/packages/demo/src/app/post-sample/components/forms/forms-demo-page/forms-demo-page.component.spec.ts b/packages/demo/src/app/post-sample/components/forms/forms-demo-page/forms-demo-page.component.spec.ts index 83f0450423..33aca67cb5 100644 --- a/packages/demo/src/app/post-sample/components/forms/forms-demo-page/forms-demo-page.component.spec.ts +++ b/packages/demo/src/app/post-sample/components/forms/forms-demo-page/forms-demo-page.component.spec.ts @@ -8,9 +8,8 @@ describe('FormsDemoPageComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ FormsDemoPageComponent ] - }) - .compileComponents(); + declarations: [FormsDemoPageComponent], + }).compileComponents(); }); beforeEach(() => { diff --git a/packages/demo/src/app/post-sample/components/icons/icons-demo-page/icons-demo-page.component.ts b/packages/demo/src/app/post-sample/components/icons/icons-demo-page/icons-demo-page.component.ts index 1d0256fbfa..dc7866fd27 100644 --- a/packages/demo/src/app/post-sample/components/icons/icons-demo-page/icons-demo-page.component.ts +++ b/packages/demo/src/app/post-sample/components/icons/icons-demo-page/icons-demo-page.component.ts @@ -1,7 +1,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-icons-demo-page', - templateUrl: './icons-demo-page.component.html' + templateUrl: './icons-demo-page.component.html', }) -export class IconsDemoPageComponent { -} +export class IconsDemoPageComponent {} diff --git a/packages/demo/src/app/post-sample/components/notification-overlay/notification-overlay-demo-page/notification-overlay-page.component.html b/packages/demo/src/app/post-sample/components/notification-overlay/notification-overlay-demo-page/notification-overlay-page.component.html index a3ded63642..e39e9ca624 100644 --- a/packages/demo/src/app/post-sample/components/notification-overlay/notification-overlay-demo-page/notification-overlay-page.component.html +++ b/packages/demo/src/app/post-sample/components/notification-overlay/notification-overlay-demo-page/notification-overlay-page.component.html @@ -2,10 +2,17 @@

    Notification overlay

    -
    This is just a simple to describe how to create an overlay notification only with bootstrap classes
    +
    + This is just a simple to describe how to create an overlay notification only with bootstrap + classes +
    - + diff --git a/packages/demo/src/app/post-sample/components/notification-overlay/notification-overlay/notification-overlay-demo.component.html b/packages/demo/src/app/post-sample/components/notification-overlay/notification-overlay/notification-overlay-demo.component.html index ac9fab3e61..b7803fb9a1 100644 --- a/packages/demo/src/app/post-sample/components/notification-overlay/notification-overlay/notification-overlay-demo.component.html +++ b/packages/demo/src/app/post-sample/components/notification-overlay/notification-overlay/notification-overlay-demo.component.html @@ -1 +1,3 @@ - + diff --git a/packages/demo/src/app/post-sample/components/post-cards/post-card-button/post-card-button.component.html b/packages/demo/src/app/post-sample/components/post-cards/post-card-button/post-card-button.component.html index 3db629da78..6db97f35e1 100644 --- a/packages/demo/src/app/post-sample/components/post-cards/post-card-button/post-card-button.component.html +++ b/packages/demo/src/app/post-sample/components/post-cards/post-card-button/post-card-button.component.html @@ -13,7 +13,7 @@
    Post zurückbehalten
    - +
    diff --git a/packages/demo/src/app/post-sample/components/post-cards/post-card-product-teaser/post-card-product-teaser.component.html b/packages/demo/src/app/post-sample/components/post-cards/post-card-product-teaser/post-card-product-teaser.component.html index 77876a2fc4..38627d953e 100644 --- a/packages/demo/src/app/post-sample/components/post-cards/post-card-product-teaser/post-card-product-teaser.component.html +++ b/packages/demo/src/app/post-sample/components/post-cards/post-card-product-teaser/post-card-product-teaser.component.html @@ -1,7 +1,10 @@

    Javascript needed!

    -

    Some javascript is needed to sync the height between the "table-cells" while still keep them mobile-friendly and semantic.

    +

    + Some javascript is needed to sync the height between the "table-cells" while still keep them + mobile-friendly and semantic. +

    @@ -10,7 +13,9 @@

    Javascript needed!

    Preiswert

    Sample Product

    -

    Mit SAMPLE PRODUCT kommen Ihre Briefe kostengünstig und zuverlässig ans Ziel.

    +

    + Mit SAMPLE PRODUCT kommen Ihre Briefe kostengünstig und zuverlässig ans Ziel. +

    -
    +
    Sample Product

    140 x 90 mm bis B5 (250 x 176 mm)

    -
    so zwischen ca. 5g
    bis ungefähr etwa 500 g
    +
    + so zwischen ca. 5g +
    + bis ungefähr etwa 500 g +
    1.20
    @@ -88,10 +97,14 @@
    Sample Product

    - +

    - +

    @@ -104,7 +117,11 @@
    Sample Product

    Schneller

    Sample Product

    -

    Lorem ipsum aafw ea aewfwe awef awfeaea awefa wawef waf wawefa ea dolor sit amet consectetur adipisicing elit. Iusto nulla laboriosam nesciunt. Unde velit dolores at fugiat dolorum nobis sit.

    +

    + Lorem ipsum aafw ea aewfwe awef awfeaea awefa wawef waf wawefa ea dolor sit amet + consectetur adipisicing elit. Iusto nulla laboriosam nesciunt. Unde velit dolores + at fugiat dolorum nobis sit. +

    @@ -139,7 +156,11 @@
    Sample Product

    140 x 90 mm bis B5 (250 x 176 mm)

    -
    so zwischen ca. 5g
    bis ungefähr etwa 500 g
    +
    + so zwischen ca. 5g +
    + bis ungefähr etwa 500 g +
    1.20
    @@ -174,10 +195,14 @@
    Sample Product

    - +

    - +

    diff --git a/packages/demo/src/app/post-sample/components/post-cards/post-cards-demo-page/post-cards-demo-page.component.html b/packages/demo/src/app/post-sample/components/post-cards/post-cards-demo-page/post-cards-demo-page.component.html index 431d85455c..ac95cf7860 100644 --- a/packages/demo/src/app/post-sample/components/post-cards/post-cards-demo-page/post-cards-demo-page.component.html +++ b/packages/demo/src/app/post-sample/components/post-cards/post-cards-demo-page/post-cards-demo-page.component.html @@ -6,13 +6,21 @@

    Product Cards

    Card Buttons

    - +

    Product navigation

    - +
    @@ -22,7 +30,15 @@

    Product teaser with prices

    component.html

    - +

    component.ts

    - + diff --git a/packages/demo/src/app/post-sample/components/sizing/responsive-sizing-demo/responsive-sizing-demo.component.html b/packages/demo/src/app/post-sample/components/sizing/responsive-sizing-demo/responsive-sizing-demo.component.html index 2344f9f352..0004ad0635 100644 --- a/packages/demo/src/app/post-sample/components/sizing/responsive-sizing-demo/responsive-sizing-demo.component.html +++ b/packages/demo/src/app/post-sample/components/sizing/responsive-sizing-demo/responsive-sizing-demo.component.html @@ -5,7 +5,10 @@
    Manually specifying breakpoints
    -

    The square below has a "Big" padding from the large (lg) breakpoint and a "Regular" padding below.

    +

    + The square below has a "Big" padding from the large (lg) breakpoint and a "Regular" padding + below. +

    @@ -15,13 +18,20 @@
    Manually specifying breakpoints
    Using automatic responsive behavior
    -

    The square below has a "Large" responsive padding, which means the padding size automatically changes based on the breakpoint but remains visually consistent.

    +

    + The square below has a "Large" responsive padding, which means the padding size automatically + changes based on the breakpoint but remains visually consistent. +

    - +
    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 index 4c60256d41..49b04f8994 100644 --- 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 @@ -2,7 +2,7 @@ * Copyright 2021 by Swiss Post, Information Technology */ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'app-responsive-sizing-demo', 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 index 189da986d2..3801195f08 100644 --- 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 @@ -1,14 +1,14 @@ import { Pipe, PipeTransform } from '@angular/core'; -@Pipe({name: 'replaceHyphen'}) +@Pipe({ name: 'replaceHyphen' }) export class ReplaceHyphenPipe implements PipeTransform { transform(value: string): string { - return value.replace("-", " "); + return value.replace('-', ' '); } } -@Pipe({name: 'removeSpaces'}) +@Pipe({ name: 'removeSpaces' }) export class RemoveSpacesPipe implements PipeTransform { transform(value: string): string { - return value.replace(" ", ""); + return value.replace(' ', ''); } -} \ No newline at end of file +} diff --git a/packages/demo/src/app/post-sample/components/sizing/sizing-demo-page/sizing-demo-page.component.ts b/packages/demo/src/app/post-sample/components/sizing/sizing-demo-page/sizing-demo-page.component.ts index 21dd2da3f5..43c9be9893 100644 --- a/packages/demo/src/app/post-sample/components/sizing/sizing-demo-page/sizing-demo-page.component.ts +++ b/packages/demo/src/app/post-sample/components/sizing/sizing-demo-page/sizing-demo-page.component.ts @@ -10,7 +10,7 @@ interface PostSize { enum PostSizeImplementation { Pixel, - Rem + Rem, } const heightWidth = `
    `; @@ -20,7 +20,7 @@ const paddingMargin = `
    @Component({ selector: 'app-sizing-demo-page', - templateUrl: './sizing-demo-page.component.html' + templateUrl: './sizing-demo-page.component.html', }) export class SizingDemoPageComponent { heightWidth = heightWidth; @@ -36,99 +36,99 @@ export class SizingDemoPageComponent { size_pixel: 1, size_rem: 0.0625, implemented: PostSizeImplementation.Pixel, - equivalent: 0 + equivalent: 0, }, { name: 'line', size_pixel: 2, size_rem: 0.125, implemented: PostSizeImplementation.Pixel, - equivalent: 0 + equivalent: 0, }, { name: 'micro', size_pixel: 4, size_rem: 0.25, implemented: PostSizeImplementation.Rem, - equivalent: 1 + equivalent: 1, }, { name: 'mini', size_pixel: 8, size_rem: 0.5, implemented: PostSizeImplementation.Rem, - equivalent: 2 + equivalent: 2, }, { name: 'small-regular', size_pixel: 12, size_rem: 0.75, implemented: PostSizeImplementation.Rem, - equivalent: 0 + equivalent: 0, }, { name: 'regular', size_pixel: 16, size_rem: 1, implemented: PostSizeImplementation.Rem, - equivalent: 3 + equivalent: 3, }, { name: 'small-large', size_pixel: 20, size_rem: 1.25, implemented: PostSizeImplementation.Rem, - equivalent: 0 + equivalent: 0, }, { name: 'large', size_pixel: 24, size_rem: 1.5, implemented: PostSizeImplementation.Rem, - equivalent: 4 + equivalent: 4, }, { name: 'big', size_pixel: 32, size_rem: 2, implemented: PostSizeImplementation.Rem, - equivalent: 0 + equivalent: 0, }, { name: 'bigger-big', size_pixel: 40, size_rem: 2.5, implemented: PostSizeImplementation.Rem, - equivalent: 0 + equivalent: 0, }, { name: 'small-huge', size_pixel: 48, size_rem: 3, implemented: PostSizeImplementation.Rem, - equivalent: 5 + equivalent: 5, }, { name: 'huge', size_pixel: 56, size_rem: 3.5, implemented: PostSizeImplementation.Rem, - equivalent: 0 + equivalent: 0, }, { name: 'giant', size_pixel: 80, size_rem: 5, implemented: PostSizeImplementation.Rem, - equivalent: 0 + equivalent: 0, }, { name: 'bigger-giant', size_pixel: 112, size_rem: 7, implemented: PostSizeImplementation.Rem, - equivalent: 0 - } + equivalent: 0, + }, ]; } } diff --git a/packages/demo/src/app/post-sample/components/sizing/sizing-demo/sizing-demo.component.ts b/packages/demo/src/app/post-sample/components/sizing/sizing-demo/sizing-demo.component.ts index 07016c2ef5..892792abe0 100644 --- a/packages/demo/src/app/post-sample/components/sizing/sizing-demo/sizing-demo.component.ts +++ b/packages/demo/src/app/post-sample/components/sizing/sizing-demo/sizing-demo.component.ts @@ -2,18 +2,18 @@ * Copyright 2021 by Swiss Post, Information Technology */ -import {Component, Input} from '@angular/core'; -import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms'; +import { Component, Input } from '@angular/core'; +import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; @Component({ selector: 'app-sizing-demo', - templateUrl: 'sizing-demo.component.html' + templateUrl: 'sizing-demo.component.html', }) export class SizingDemoComponent { @Input() sizes: unknown; demoForm: UntypedFormGroup; - bootstrapSizes: {value: string, name: string}[]; + bootstrapSizes: { value: string; name: string }[]; constructor(private fb: UntypedFormBuilder) { this.demoForm = fb.group({ @@ -32,15 +32,15 @@ export class SizingDemoComponent { 'max-height': fb.group({ prefix: ['mh-'], size: ['100'], - }) + }), }); this.bootstrapSizes = [ - {value: '25', name: '25%'}, - {value: '50', name: '50%'}, - {value: '75', name: '75%'}, - {value: '100', name: '100%'}, - {value: 'auto', name: 'Auto (default)'}, + { value: '25', name: '25%' }, + { value: '50', name: '50%' }, + { value: '75', name: '75%' }, + { value: '100', name: '100%' }, + { value: 'auto', name: 'Auto (default)' }, ]; } @@ -49,7 +49,9 @@ export class SizingDemoComponent { } get demoClass(): string { - return Object.keys(this.demoForm.value).map((prop) => this.getPrefix(prop) + this.getSize(prop)).join(' '); + return Object.keys(this.demoForm.value) + .map(prop => this.getPrefix(prop) + this.getSize(prop)) + .join(' '); } getPrefix(prop: string): string { diff --git a/packages/demo/src/app/post-sample/components/sizing/spacing-demo/spacing-demo.component.ts b/packages/demo/src/app/post-sample/components/sizing/spacing-demo/spacing-demo.component.ts index 77769abf54..d477fe7460 100644 --- a/packages/demo/src/app/post-sample/components/sizing/spacing-demo/spacing-demo.component.ts +++ b/packages/demo/src/app/post-sample/components/sizing/spacing-demo/spacing-demo.component.ts @@ -2,8 +2,8 @@ * Copyright 2021 by Swiss Post, Information Technology */ -import {Component, Input} from '@angular/core'; -import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms'; +import { Component, Input } from '@angular/core'; +import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; @Component({ selector: 'app-spacing-demo', @@ -13,8 +13,8 @@ export class SpacingDemoComponent { @Input() sizes: unknown; demoForm: UntypedFormGroup; - positions: {name: string, value: string}[]; - bootstrapSizes: {name: string, value: string}[]; + positions: { name: string; value: string }[]; + bootstrapSizes: { name: string; value: string }[]; constructor(private fb: UntypedFormBuilder) { this.demoForm = fb.group({ @@ -29,23 +29,23 @@ export class SpacingDemoComponent { }); this.positions = [ - {value: '', name: 'All around'}, - {value: 'x', name: 'Along the horizontal axis'}, - {value: 'y', name: 'Along the vertical axis'}, - {value: 't', name: 'At the top'}, - {value: 'b', name: 'At the bottom'}, - {value: 'r', name: 'To the right'}, - {value: 'l', name: 'To the left'}, + { value: '', name: 'All around' }, + { value: 'x', name: 'Along the horizontal axis' }, + { value: 'y', name: 'Along the vertical axis' }, + { value: 't', name: 'At the top' }, + { value: 'b', name: 'At the bottom' }, + { value: 'r', name: 'To the right' }, + { value: 'l', name: 'To the left' }, ]; this.bootstrapSizes = [ - {value: '0', name: '0'}, - {value: '1', name: '1'}, - {value: '2', name: '2'}, - {value: '3', name: '3'}, - {value: '4', name: '4'}, - {value: '5', name: '5'}, - {value: 'auto', name: 'Auto'}, + { value: '0', name: '0' }, + { value: '1', name: '1' }, + { value: '2', name: '2' }, + { value: '3', name: '3' }, + { value: '4', name: '4' }, + { value: '5', name: '5' }, + { value: 'auto', name: 'Auto' }, ]; } diff --git a/packages/demo/src/app/post-sample/components/spinner/spinner-demo-page/spinner-demo-page.component.html b/packages/demo/src/app/post-sample/components/spinner/spinner-demo-page/spinner-demo-page.component.html index 86a6a308a7..2c7f21a814 100644 --- a/packages/demo/src/app/post-sample/components/spinner/spinner-demo-page/spinner-demo-page.component.html +++ b/packages/demo/src/app/post-sample/components/spinner/spinner-demo-page/spinner-demo-page.component.html @@ -11,28 +11,49 @@

    Info for implementing

    - 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. + + 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.

    +

    + 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. + + 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.

    - + diff --git a/packages/demo/src/app/post-sample/components/spinner/spinner-demo/spinner-demo.component.html b/packages/demo/src/app/post-sample/components/spinner/spinner-demo/spinner-demo.component.html index 033b20ee91..5a24743ded 100644 --- a/packages/demo/src/app/post-sample/components/spinner/spinner-demo/spinner-demo.component.html +++ b/packages/demo/src/app/post-sample/components/spinner/spinner-demo/spinner-demo.component.html @@ -1,5 +1,5 @@ diff --git a/packages/demo/src/app/post-sample/components/spinner/spinner-demo/spinner-demo.component.ts b/packages/demo/src/app/post-sample/components/spinner/spinner-demo/spinner-demo.component.ts index c312ea4843..daf65f6bc4 100644 --- a/packages/demo/src/app/post-sample/components/spinner/spinner-demo/spinner-demo.component.ts +++ b/packages/demo/src/app/post-sample/components/spinner/spinner-demo/spinner-demo.component.ts @@ -1,9 +1,9 @@ -import {Component, Input} from '@angular/core'; +import { Component, Input } from '@angular/core'; @Component({ selector: 'app-spinner-demo', - templateUrl: './spinner-demo.component.html' + templateUrl: './spinner-demo.component.html', }) export class SpinnerDemoComponent { - @Input() small : boolean; + @Input() small: boolean; } diff --git a/packages/demo/src/app/post-sample/components/spinner/spinner-mini-demo/spinner-mini-demo.component.ts b/packages/demo/src/app/post-sample/components/spinner/spinner-mini-demo/spinner-mini-demo.component.ts index 7e29db0b2d..1c730d97fa 100644 --- a/packages/demo/src/app/post-sample/components/spinner/spinner-mini-demo/spinner-mini-demo.component.ts +++ b/packages/demo/src/app/post-sample/components/spinner/spinner-mini-demo/spinner-mini-demo.component.ts @@ -1,8 +1,7 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'app-spinner-mini-demo', - templateUrl: './spinner-mini-demo.component.html' + templateUrl: './spinner-mini-demo.component.html', }) -export class SpinnerMiniDemoComponent { -} +export class SpinnerMiniDemoComponent {} diff --git a/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.html b/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.html index 214dc9c1dc..25f03ff513 100644 --- a/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.html +++ b/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.html @@ -9,5 +9,9 @@

    Stepper

    - +
    diff --git a/packages/demo/src/app/post-sample/components/subnavigation/subnavigation-demo-page/subnavigation-demo-page.component.html b/packages/demo/src/app/post-sample/components/subnavigation/subnavigation-demo-page/subnavigation-demo-page.component.html index da7ba1c305..02f1ae20f8 100644 --- a/packages/demo/src/app/post-sample/components/subnavigation/subnavigation-demo-page/subnavigation-demo-page.component.html +++ b/packages/demo/src/app/post-sample/components/subnavigation/subnavigation-demo-page/subnavigation-demo-page.component.html @@ -5,4 +5,8 @@

    Subnavigation

    - + diff --git a/packages/demo/src/app/post-sample/components/subnavigation/subnavigation-demo-page/subnavigation-demo-page.component.spec.ts b/packages/demo/src/app/post-sample/components/subnavigation/subnavigation-demo-page/subnavigation-demo-page.component.spec.ts index 88621c6d72..375e392f38 100644 --- a/packages/demo/src/app/post-sample/components/subnavigation/subnavigation-demo-page/subnavigation-demo-page.component.spec.ts +++ b/packages/demo/src/app/post-sample/components/subnavigation/subnavigation-demo-page/subnavigation-demo-page.component.spec.ts @@ -8,9 +8,8 @@ describe('SubnavigationDemoPageComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ SubnavigationDemoPageComponent ] - }) - .compileComponents(); + declarations: [SubnavigationDemoPageComponent], + }).compileComponents(); })); beforeEach(() => { diff --git a/packages/demo/src/app/post-sample/components/subnavigation/subnavigation-demo/subnavigation-demo.component.html b/packages/demo/src/app/post-sample/components/subnavigation/subnavigation-demo/subnavigation-demo.component.html index b1bdcec5b6..b881c6a098 100644 --- a/packages/demo/src/app/post-sample/components/subnavigation/subnavigation-demo/subnavigation-demo.component.html +++ b/packages/demo/src/app/post-sample/components/subnavigation/subnavigation-demo/subnavigation-demo.component.html @@ -3,13 +3,13 @@
    @@ -22,13 +22,13 @@
    @@ -41,13 +41,13 @@
    @@ -60,15 +60,21 @@
    diff --git a/packages/demo/src/app/post-sample/components/subnavigation/subnavigation-demo/subnavigation-demo.component.spec.ts b/packages/demo/src/app/post-sample/components/subnavigation/subnavigation-demo/subnavigation-demo.component.spec.ts index f197b8920a..205b462b36 100644 --- a/packages/demo/src/app/post-sample/components/subnavigation/subnavigation-demo/subnavigation-demo.component.spec.ts +++ b/packages/demo/src/app/post-sample/components/subnavigation/subnavigation-demo/subnavigation-demo.component.spec.ts @@ -8,9 +8,8 @@ describe('SubnavigationDemoComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ SubnavigationDemoComponent ] - }) - .compileComponents(); + declarations: [SubnavigationDemoComponent], + }).compileComponents(); })); beforeEach(() => { diff --git a/packages/demo/src/app/post-sample/components/topic-teaser/topic-teaser-demo-page/topic-teaser-demo-page.component.html b/packages/demo/src/app/post-sample/components/topic-teaser/topic-teaser-demo-page/topic-teaser-demo-page.component.html index c331772478..58a07ad2d9 100644 --- a/packages/demo/src/app/post-sample/components/topic-teaser/topic-teaser-demo-page/topic-teaser-demo-page.component.html +++ b/packages/demo/src/app/post-sample/components/topic-teaser/topic-teaser-demo-page/topic-teaser-demo-page.component.html @@ -3,10 +3,14 @@

    Topic teaser

    -

    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.

    +

    + 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. +

    Basic example

    @@ -14,15 +18,21 @@

    Basic example

    - +

    Image on right side

    -
    + + [languages]="['html', 'scss', 'css', 'typescript', 'javascript']" + >
    diff --git a/packages/demo/src/app/post-sample/components/topic-teaser/topic-teaser-demo/topic-teaser-demo.component.html b/packages/demo/src/app/post-sample/components/topic-teaser/topic-teaser-demo/topic-teaser-demo.component.html index 6309dbec98..0bf6c7d8cb 100644 --- a/packages/demo/src/app/post-sample/components/topic-teaser/topic-teaser-demo/topic-teaser-demo.component.html +++ b/packages/demo/src/app/post-sample/components/topic-teaser/topic-teaser-demo/topic-teaser-demo.component.html @@ -2,9 +2,14 @@
    -
    - Test teaser image + Test teaser image
    @@ -13,14 +18,23 @@

    sit amet, consetetur sadipscing elitr

    -
    diff --git a/packages/demo/src/app/post-sample/components/topic-teaser/topic-teaser-right-demo/topic-teaser-right-demo.component.html b/packages/demo/src/app/post-sample/components/topic-teaser/topic-teaser-right-demo/topic-teaser-right-demo.component.html index 8289caac6f..a15ea213c3 100644 --- a/packages/demo/src/app/post-sample/components/topic-teaser/topic-teaser-right-demo/topic-teaser-right-demo.component.html +++ b/packages/demo/src/app/post-sample/components/topic-teaser/topic-teaser-right-demo/topic-teaser-right-demo.component.html @@ -2,25 +2,39 @@
    -

    Lorem ipsum sit amet, consetetur sadipscing elitr

    - Test teaser image + Test teaser image
    -
    diff --git a/packages/demo/src/environments/environment.prod.ts b/packages/demo/src/environments/environment.prod.ts index e3b2ab157e..bb1c3c3330 100644 --- a/packages/demo/src/environments/environment.prod.ts +++ b/packages/demo/src/environments/environment.prod.ts @@ -3,7 +3,7 @@ import packageJson from '../../package.json'; export const environment = { production: true, VERSION: packageJson.version, - ANGULAR_VERSION: packageJson.dependencies["@angular/core"], - NG_BOOTSTRAP_VERSION: packageJson.dependencies["@ng-bootstrap/ng-bootstrap"], - NGX_TOASTR: packageJson.dependencies["ngx-toastr"], + ANGULAR_VERSION: packageJson.dependencies['@angular/core'], + NG_BOOTSTRAP_VERSION: packageJson.dependencies['@ng-bootstrap/ng-bootstrap'], + NGX_TOASTR: packageJson.dependencies['ngx-toastr'], }; diff --git a/packages/demo/src/karma.conf.js b/packages/demo/src/karma.conf.js index d231f52e06..a952e0c055 100644 --- a/packages/demo/src/karma.conf.js +++ b/packages/demo/src/karma.conf.js @@ -10,15 +10,15 @@ module.exports = function (config) { require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage-istanbul-reporter'), - require('@angular-devkit/build-angular/plugins/karma') + require('@angular-devkit/build-angular/plugins/karma'), ], client: { - clearContext: false // leave Jasmine Spec Runner output visible in browser + clearContext: false, // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { dir: require('path').join(__dirname, '../coverage'), reports: ['html', 'lcovonly'], - fixWebpackSourcePaths: true + fixWebpackSourcePaths: true, }, reporters: ['progress', 'kjhtml'], port: 9876, @@ -27,6 +27,6 @@ module.exports = function (config) { autoWatch: true, browsers: ['Chrome'], singleRun: false, - restartOnFileChange: true + restartOnFileChange: true, }); }; diff --git a/packages/documentation/.storybook/blocks/header.tsx b/packages/documentation/.storybook/blocks/header.tsx index 301d4a5879..06e5032c5c 100644 --- a/packages/documentation/.storybook/blocks/header.tsx +++ b/packages/documentation/.storybook/blocks/header.tsx @@ -1,9 +1,13 @@ -import React from "react"; +import React from 'react'; export default () => (
    -

    Swiss Post
    Design System

    +

    + Swiss Post +
    + Design System +

    The Swiss Post Design System pattern library for a unified and accessible user experience across the web platform. diff --git a/packages/documentation/.storybook/constants.ts b/packages/documentation/.storybook/constants.ts index a3445e5670..3473600b34 100644 --- a/packages/documentation/.storybook/constants.ts +++ b/packages/documentation/.storybook/constants.ts @@ -3,4 +3,4 @@ export const BADGE = { STABLE: 'stable', NEEDS_REVISION: 'needs-revision', TODO: 'to-do', -} +}; diff --git a/packages/documentation/.storybook/helpers/open-full-screen-demo.ts b/packages/documentation/.storybook/helpers/open-full-screen-demo.ts index 26d9feff41..890aa1a08b 100644 --- a/packages/documentation/.storybook/helpers/open-full-screen-demo.ts +++ b/packages/documentation/.storybook/helpers/open-full-screen-demo.ts @@ -5,7 +5,7 @@ export const openFullScreenDemo = (e: Event) => { const iframeId = story?.id?.replace('story--', ''); if (iframeId) { - window.open(`/iframe.html?id=${iframeId}`,'_blank'); + window.open(`/iframe.html?id=${iframeId}`, '_blank'); } else { alert('The full screen demo is not available.'); } diff --git a/packages/documentation/.storybook/helpers/register-web-components.ts b/packages/documentation/.storybook/helpers/register-web-components.ts index c5963a748c..73e66befec 100644 --- a/packages/documentation/.storybook/helpers/register-web-components.ts +++ b/packages/documentation/.storybook/helpers/register-web-components.ts @@ -1,7 +1,10 @@ import { defineCustomElements as defineInternetHeader } from '@swisspost/internet-header/loader'; import { defineCustomElements as definePostComponent } from '@swisspost/design-system-components/loader'; import { setStencilDocJson } from '@pxtrn/storybook-addon-docs-stencil'; -import { StencilJsonDocs, StencilJsonDocsComponent } from '@pxtrn/storybook-addon-docs-stencil/dist/types'; +import { + StencilJsonDocs, + StencilJsonDocsComponent, +} from '@pxtrn/storybook-addon-docs-stencil/dist/types'; import postComponentsDocJson from '@swisspost/design-system-components/dist/docs.json'; import internetHeaderDocJson from '@swisspost/internet-header/dist/docs.json'; @@ -14,7 +17,7 @@ if (postComponentsDocJson && internetHeaderDocJson) { compiler: postComponentsDocJson.compiler, components: [ ...postComponentsDocJson.components, - ...internetHeaderDocJson.components + ...internetHeaderDocJson.components, ] as StencilJsonDocsComponent[], }; diff --git a/packages/documentation/.storybook/manager-head.html b/packages/documentation/.storybook/manager-head.html index b95d5f065b..24e633a8a5 100644 --- a/packages/documentation/.storybook/manager-head.html +++ b/packages/documentation/.storybook/manager-head.html @@ -7,12 +7,15 @@ prod: '%STORYBOOK_GTM_PAGE_CONTEXT_ENVIRONMENT_PROD%', }); - window?.gtm?.setConstant('ENVIRONMENT_FALLBACK', '%STORYBOOK_GTM_PAGE_CONTEXT_ENVIRONMENT_FALLBACK%'); + window?.gtm?.setConstant( + 'ENVIRONMENT_FALLBACK', + '%STORYBOOK_GTM_PAGE_CONTEXT_ENVIRONMENT_FALLBACK%', + ); - + diff --git a/packages/documentation/src/stories/internet-header/internet-header-cdn-lazy-loaded.sample.html b/packages/documentation/src/stories/internet-header/internet-header-cdn-lazy-loaded.sample.html index 849711c515..abb2a896ce 100644 --- a/packages/documentation/src/stories/internet-header/internet-header-cdn-lazy-loaded.sample.html +++ b/packages/documentation/src/stories/internet-header/internet-header-cdn-lazy-loaded.sample.html @@ -1,11 +1,11 @@ - - - - + defineCustomElements(); + diff --git a/packages/documentation/src/stories/internet-header/internet-header-fix-app-styles.sample.html b/packages/documentation/src/stories/internet-header/internet-header-fix-app-styles.sample.html index 969e18929d..2924b0697f 100644 --- a/packages/documentation/src/stories/internet-header/internet-header-fix-app-styles.sample.html +++ b/packages/documentation/src/stories/internet-header/internet-header-fix-app-styles.sample.html @@ -1,20 +1,20 @@ - - - + + + - - + + - -

    - -
    - + +
    + +
    + diff --git a/packages/documentation/src/stories/internet-header/internet-header-frameworks.sample.html b/packages/documentation/src/stories/internet-header/internet-header-frameworks.sample.html index e5a9d4a17f..6b73678b56 100644 --- a/packages/documentation/src/stories/internet-header/internet-header-frameworks.sample.html +++ b/packages/documentation/src/stories/internet-header/internet-header-frameworks.sample.html @@ -1,5 +1,5 @@ - -... + + ... diff --git a/packages/documentation/src/stories/internet-header/internet-header-install.sample.html b/packages/documentation/src/stories/internet-header/internet-header-install.sample.html index 129b079e83..74e8816588 100644 --- a/packages/documentation/src/stories/internet-header/internet-header-install.sample.html +++ b/packages/documentation/src/stories/internet-header/internet-header-install.sample.html @@ -1,29 +1,29 @@ - - - + + + - - + + - - - + + + - + -
    - -
    +
    + +
    - - + + diff --git a/packages/documentation/src/stories/internet-header/internet-header-old.sample.html b/packages/documentation/src/stories/internet-header/internet-header-old.sample.html index 0a91a54511..25a318e2e1 100644 --- a/packages/documentation/src/stories/internet-header/internet-header-old.sample.html +++ b/packages/documentation/src/stories/internet-header/internet-header-old.sample.html @@ -1,42 +1,42 @@ - - - + + + - + - - - + + + - -
    - -
    + +
    + +
    - - + + - - - + + + diff --git a/packages/documentation/src/stories/intranet-header/intranet-header-navigation-bar.sample.html b/packages/documentation/src/stories/intranet-header/intranet-header-navigation-bar.sample.html index 63d9c0fc45..62d9ef4b1b 100644 --- a/packages/documentation/src/stories/intranet-header/intranet-header-navigation-bar.sample.html +++ b/packages/documentation/src/stories/intranet-header/intranet-header-navigation-bar.sample.html @@ -16,9 +16,9 @@

    Content

    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. + 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.

    diff --git a/packages/documentation/src/stories/intranet-header/intranet-header-postweb.sample.html b/packages/documentation/src/stories/intranet-header/intranet-header-postweb.sample.html index abd9af6444..dab1acd195 100644 --- a/packages/documentation/src/stories/intranet-header/intranet-header-postweb.sample.html +++ b/packages/documentation/src/stories/intranet-header/intranet-header-postweb.sample.html @@ -17,11 +17,13 @@
    • - Active Page + + Active Page
    • Home
    • -
    • Menu Text +
    • + Menu Text
      • Link 1
      • Link 2
        • diff --git a/packages/documentation/src/stories/intranet-header/intranet-header-side-navigation.sample.html b/packages/documentation/src/stories/intranet-header/intranet-header-side-navigation.sample.html index 267408b624..07c7e306a6 100644 --- a/packages/documentation/src/stories/intranet-header/intranet-header-side-navigation.sample.html +++ b/packages/documentation/src/stories/intranet-header/intranet-header-side-navigation.sample.html @@ -11,11 +11,13 @@
        • - Active Page + + Active Page
        • Home
        • -
        • Menu Text +
        • + Menu Text
          • Link 1
          • Link 2
            • diff --git a/packages/documentation/src/stories/intranet-header/intranet-header.docs.mdx b/packages/documentation/src/stories/intranet-header/intranet-header.docs.mdx index f95878831f..80ba6b1bd9 100644 --- a/packages/documentation/src/stories/intranet-header/intranet-header.docs.mdx +++ b/packages/documentation/src/stories/intranet-header/intranet-header.docs.mdx @@ -12,7 +12,6 @@ import SamplePostweb from './intranet-header-postweb.sample.html?raw'; [![npm version](https://badge.fury.io/js/@swisspost%2Fdesign-system-intranet-header.svg)](https://badge.fury.io/js/@swisspost%2Fdesign-system-intranet-header) -{/* prettier-ignore */}

            Angular only component

            The intranet header is an Angular component, as such it only works diff --git a/packages/documentation/src/stories/intranet-header/intranet-header.stories.ts b/packages/documentation/src/stories/intranet-header/intranet-header.stories.ts index 8d0caee078..9f62d3a69c 100644 --- a/packages/documentation/src/stories/intranet-header/intranet-header.stories.ts +++ b/packages/documentation/src/stories/intranet-header/intranet-header.stories.ts @@ -25,7 +25,7 @@ const meta: Meta = { currentUserId: { name: 'currentUserId', description: - 'The ID of the currently logged-in user, used to display the user\'s profile picture.' + + "The ID of the currently logged-in user, used to display the user's profile picture." + '

            By default, a fallback image is displayed.

            ', control: 'text', table: { diff --git a/packages/documentation/src/stories/utilities/background/background.stories.ts b/packages/documentation/src/stories/utilities/background/background.stories.ts index 573676aa49..9a29e55d45 100644 --- a/packages/documentation/src/stories/utilities/background/background.stories.ts +++ b/packages/documentation/src/stories/utilities/background/background.stories.ts @@ -22,11 +22,17 @@ export const ColoredBackground: Story = { export const NestedBackgrounds: Story = { render: () => html`
            - Content in .bg-gray container. + Content in + .bg-gray + container.
            - Content in .bg-dark container. + Content in + .bg-dark + container.
            - Content in .bg-light container. + Content in + .bg-light + container.
            @@ -36,17 +42,9 @@ export const NestedBackgrounds: Story = { export const TranslucentBackgrounds: Story = { render: () => html`
            Container with default opacity (1).
            -
            - Container with opacity 0.8. -
            -
            - Container with opacity 0.6. -
            -
            - Container with opacity 0.4. -
            -
            - Container with opacity 0.2. -
            +
            Container with opacity 0.8.
            +
            Container with opacity 0.6.
            +
            Container with opacity 0.4.
            +
            Container with opacity 0.2.
            `, }; diff --git a/packages/documentation/src/stories/utilities/list/list.stories.ts b/packages/documentation/src/stories/utilities/list/list.stories.ts index bd1d527aa1..71edadcf10 100644 --- a/packages/documentation/src/stories/utilities/list/list.stories.ts +++ b/packages/documentation/src/stories/utilities/list/list.stories.ts @@ -18,9 +18,7 @@ export const UnorderedList: Story = {
            • This is an unordered list.
            • It appears in its default style.
              • -
            • - Therefore it is rendered with a bullet point in front of each list item. -
              • +
            • Therefore it is rendered with a bullet point in front of each list item.
            • Nested list:
                @@ -107,10 +105,10 @@ export const DescriptionListUsingGrid: Story = {

                This definition is long.

                You can use extra markup whenever you need.

                -
                Long term that overflows its parent column and is therefore truncated
                -
                - This can be useful when space is tight. Adds an ellipsis at the end. -
                +
                + Long term that overflows its parent column and is therefore truncated +
                +
                This can be useful when space is tight. Adds an ellipsis at the end.
                Nesting
                diff --git a/packages/documentation/src/stories/utilities/spacing/spacing.docs.mdx b/packages/documentation/src/stories/utilities/spacing/spacing.docs.mdx index b026b5f267..1e8773fb45 100644 --- a/packages/documentation/src/stories/utilities/spacing/spacing.docs.mdx +++ b/packages/documentation/src/stories/utilities/spacing/spacing.docs.mdx @@ -15,7 +15,6 @@ improve the overall user interface.
            -{/* prettier-ignore */}

            Sizing variables are deprecated

            The current set of the post-specific spacing utility 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.

            @@ -30,7 +29,6 @@ Our base spacing classes with suffixes going from 0 to 5 (`*-0`, `*-1`, ..., `*- Our custom sizes can be used in the same way: by adding the name of the desired size to a prefix. See our [sizing docs](/?path=/docs/utilities-sizing--docs) to find out which size names are available. -{/* prettier-ignore */}

            Do not use spacing classes on grid elements (i.e. `.row`, `.col`, `.col-*`).

            Our grid is built with negative margins and positive paddings on the x-axis. Therefore, use this spacing classes only if you know exactly what you are doing!

            diff --git a/packages/documentation/src/stories/utilities/spacing/spacing.module.scss b/packages/documentation/src/stories/utilities/spacing/spacing.module.scss index b34f445f8d..4f83ccb8c0 100644 --- a/packages/documentation/src/stories/utilities/spacing/spacing.module.scss +++ b/packages/documentation/src/stories/utilities/spacing/spacing.module.scss @@ -4,6 +4,6 @@ :export { @each $breakpoint in post.$grid-breakpoints-list { - #{$breakpoint} : $breakpoint + #{$breakpoint}: $breakpoint; } -} \ No newline at end of file +} diff --git a/packages/documentation/src/stories/utilities/spacing/spacing.styles.scss b/packages/documentation/src/stories/utilities/spacing/spacing.styles.scss index 5dad39f697..4e6328d3c1 100644 --- a/packages/documentation/src/stories/utilities/spacing/spacing.styles.scss +++ b/packages/documentation/src/stories/utilities/spacing/spacing.styles.scss @@ -21,4 +21,4 @@ border: 1px solid post.$gray-40; } } -} \ No newline at end of file +} diff --git a/packages/documentation/src/stories/utilities/text/text.module.scss b/packages/documentation/src/stories/utilities/text/text.module.scss index e8cc214234..77d9affad9 100644 --- a/packages/documentation/src/stories/utilities/text/text.module.scss +++ b/packages/documentation/src/stories/utilities/text/text.module.scss @@ -8,5 +8,5 @@ fontStyles: [('normal', 'italic')]; fixedLineHeights: [map.keys(post.$post-sizes)]; relativeLineHeights: [('1', 'base', 'sm', 'lg')]; - colors: [map.keys(post.$theme-colors)] + colors: [map.keys(post.$theme-colors)]; } diff --git a/packages/documentation/src/stories/utilities/text/text.stories.ts b/packages/documentation/src/stories/utilities/text/text.stories.ts index 943e94decb..716ecde558 100644 --- a/packages/documentation/src/stories/utilities/text/text.stories.ts +++ b/packages/documentation/src/stories/utilities/text/text.stories.ts @@ -46,10 +46,8 @@ export const LineHeight: Story = { export const TextColor: Story = { decorators: [ story => html` -
            e.preventDefault()}> - ${story()} -
            - ` +
            e.preventDefault()}>${story()}
            + `, ], render: () => html`

            This is colored text.

            @@ -60,14 +58,14 @@ export const TextColor: Story = { export const TextColorReset: Story = { decorators: [ story => html` -
            e.preventDefault()}> - ${story()} -
            - ` +
            e.preventDefault()}>${story()}
            + `, ], render: () => html`

            - This is colored text with a link of the same color. + This is colored text with a + link + of the same color.

            `, }; diff --git a/packages/icons/src/models/icon.model.ts b/packages/icons/src/models/icon.model.ts index cbb9245452..70d7f716f8 100644 --- a/packages/icons/src/models/icon.model.ts +++ b/packages/icons/src/models/icon.model.ts @@ -1,23 +1,29 @@ -import { Type, TypeFilter, VariantMIME, Businessfield, MediaSize } from './censhare-result-page.model'; +import { + Type, + TypeFilter, + VariantMIME, + Businessfield, + MediaSize, +} from './censhare-result-page.model'; export interface IIcon { - uuid: string, + uuid: string; id: number; type: Type; typeFilter: TypeFilter; meta: { downloadLink: string; - businessfield: Businessfield, - keywords: string[], - year?: string, - }, + businessfield: Businessfield; + keywords: string[]; + year?: string; + }; file: { mime: VariantMIME; - name: string, - basename: string, - ext: string, - size?: MediaSize, - }, + name: string; + basename: string; + ext: string; + size?: MediaSize; + }; createdAt: Date; modifiedAt: Date; errorMessage?: string; @@ -31,7 +37,7 @@ export interface IJSONReport { notFound: number; }; icons: IIcon[]; - wrongViewBox: IIcon[], + wrongViewBox: IIcon[]; noSVG: IIcon[]; errored: IIcon[]; version: string; diff --git a/packages/internet-header/.prettierrc.json b/packages/internet-header/.prettierrc.json index c47f741e66..128644da93 100644 --- a/packages/internet-header/.prettierrc.json +++ b/packages/internet-header/.prettierrc.json @@ -1,7 +1,7 @@ { "arrowParens": "avoid", "bracketSpacing": true, - "jsxBracketSameLine": false, + "bracketSameLine": false, "jsxSingleQuote": false, "quoteProps": "consistent", "printWidth": 100, diff --git a/packages/internet-header/cypress/e2e/skiplinks.cy.ts b/packages/internet-header/cypress/e2e/skiplinks.cy.ts index b6e6405b9d..b9292e67d9 100644 --- a/packages/internet-header/cypress/e2e/skiplinks.cy.ts +++ b/packages/internet-header/cypress/e2e/skiplinks.cy.ts @@ -3,7 +3,7 @@ import { prepare } from '../support/prepare-story'; describe('skiplinks', () => { beforeEach(() => { prepare('Internet Header/Header', 'Default'); - cy.changeArg('language', 'de') + cy.changeArg('language', 'de'); }); it(`adds and removes skiplinks control`, () => { diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/karma.conf.js b/packages/intranet-header-workspace/projects/intranet-header-showcase/karma.conf.js index 114852a361..be3dfa3767 100644 --- a/packages/intranet-header-workspace/projects/intranet-header-showcase/karma.conf.js +++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/karma.conf.js @@ -10,7 +10,7 @@ module.exports = function (config) { require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage'), - require('@angular-devkit/build-angular/plugins/karma') + require('@angular-devkit/build-angular/plugins/karma'), ], client: { jasmine: { @@ -19,18 +19,15 @@ module.exports = function (config) { // for example, you can disable the random execution with `random: false` // or set a specific seed with `seed: 4321` }, - clearContext: false // leave Jasmine Spec Runner output visible in browser + clearContext: false, // leave Jasmine Spec Runner output visible in browser }, jasmineHtmlReporter: { - suppressAll: true // removes the duplicated traces + suppressAll: true, // removes the duplicated traces }, coverageReporter: { dir: require('path').join(__dirname, '../../coverage/intranet-header-showcase'), subdir: '.', - reporters: [ - { type: 'html' }, - { type: 'text-summary' } - ] + reporters: [{ type: 'html' }, { type: 'text-summary' }], }, reporters: ['progress', 'kjhtml'], port: 9876, @@ -39,6 +36,6 @@ module.exports = function (config) { autoWatch: true, browsers: ['Chrome'], singleRun: false, - restartOnFileChange: true + restartOnFileChange: true, }); }; diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app/app.component.spec.ts b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app/app.component.spec.ts index 2e77193842..b85a2d0e47 100644 --- a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app/app.component.spec.ts +++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app/app.component.spec.ts @@ -4,9 +4,7 @@ import { AppComponent } from './app.component'; describe('AppComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ - AppComponent - ], + declarations: [AppComponent], }).compileComponents(); }); @@ -26,6 +24,8 @@ describe('AppComponent', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('.content span')?.textContent).toContain('intranet-header-showcase app is running!'); + expect(compiled.querySelector('.content span')?.textContent).toContain( + 'intranet-header-showcase app is running!', + ); }); }); diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app/app.component.ts b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app/app.component.ts index 94a163aefd..e60eaf1e8f 100644 --- a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app/app.component.ts +++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app/app.component.ts @@ -3,7 +3,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'] + styleUrls: ['./app.component.scss'], }) export class AppComponent { title = 'intranet-header-showcase'; diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/environments/environment.prod.ts b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/environments/environment.prod.ts index 3612073bc3..c9669790be 100644 --- a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/environments/environment.prod.ts +++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/environments/environment.prod.ts @@ -1,3 +1,3 @@ export const environment = { - production: true + production: true, }; diff --git a/packages/intranet-header-workspace/projects/intranet-header/karma.conf.js b/packages/intranet-header-workspace/projects/intranet-header/karma.conf.js index 111fec7f43..37548de40e 100644 --- a/packages/intranet-header-workspace/projects/intranet-header/karma.conf.js +++ b/packages/intranet-header-workspace/projects/intranet-header/karma.conf.js @@ -10,7 +10,7 @@ module.exports = function (config) { require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage'), - require('@angular-devkit/build-angular/plugins/karma') + require('@angular-devkit/build-angular/plugins/karma'), ], client: { jasmine: { @@ -19,18 +19,15 @@ module.exports = function (config) { // for example, you can disable the random execution with `random: false` // or set a specific seed with `seed: 4321` }, - clearContext: false // leave Jasmine Spec Runner output visible in browser + clearContext: false, // leave Jasmine Spec Runner output visible in browser }, jasmineHtmlReporter: { - suppressAll: true // removes the duplicated traces + suppressAll: true, // removes the duplicated traces }, coverageReporter: { dir: require('path').join(__dirname, '../../coverage/intranet-header'), subdir: '.', - reporters: [ - { type: 'html' }, - { type: 'text-summary' } - ] + reporters: [{ type: 'html' }, { type: 'text-summary' }], }, reporters: ['progress', 'kjhtml'], port: 9876, @@ -39,6 +36,6 @@ module.exports = function (config) { autoWatch: true, browsers: ['Chrome'], singleRun: false, - restartOnFileChange: true + restartOnFileChange: true, }); }; diff --git a/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.module.ts b/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.module.ts index e0832b3fe9..697323dbf5 100644 --- a/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.module.ts +++ b/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.module.ts @@ -7,12 +7,7 @@ import { SwissPostIntranetHeaderComponent } from './swisspost-intranet-header.co @NgModule({ declarations: [SwissPostIntranetHeaderComponent], - imports: [ - RouterModule, - CommonModule, - NgbModule - ], - exports: [SwissPostIntranetHeaderComponent] + imports: [RouterModule, CommonModule, NgbModule], + exports: [SwissPostIntranetHeaderComponent], }) -export class SwissPostIntranetHeaderModule { -} +export class SwissPostIntranetHeaderModule {} diff --git a/packages/styles/jest.config.js b/packages/styles/jest.config.js index f59ca8ad4f..bdf99a5fd9 100644 --- a/packages/styles/jest.config.js +++ b/packages/styles/jest.config.js @@ -1,11 +1,8 @@ module.exports = { testEnvironment: 'node', - moduleFileExtensions: [ - 'js', - 'scss' - ], + moduleFileExtensions: ['js', 'scss'], transform: { - '\\.scss$': './tests/jest-scss-transformer' + '\\.scss$': './tests/jest-scss-transformer', }, - testMatch: ['**/tests/**/*.test.scss'] -} \ No newline at end of file + testMatch: ['**/tests/**/*.test.scss'], +}; diff --git a/packages/styles/tests/components/alert.test.scss b/packages/styles/tests/components/alert.test.scss index 78c300bbda..afe7c2af1c 100644 --- a/packages/styles/tests/components/alert.test.scss +++ b/packages/styles/tests/components/alert.test.scss @@ -1,8 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/alert"; - +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/alert'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('alert'), 'font-base-path')); diff --git a/packages/styles/tests/components/badge.test.scss b/packages/styles/tests/components/badge.test.scss index 2ee8b8070f..62922cddf4 100644 --- a/packages/styles/tests/components/badge.test.scss +++ b/packages/styles/tests/components/badge.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/badge"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/badge'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('badge'), 'font-base-path')); diff --git a/packages/styles/tests/components/base.test.scss b/packages/styles/tests/components/base.test.scss index 139865158d..a0e2e852db 100644 --- a/packages/styles/tests/components/base.test.scss +++ b/packages/styles/tests/components/base.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/base"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/base'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('base'), 'font-base-path')); diff --git a/packages/styles/tests/components/breadcrumb.test.scss b/packages/styles/tests/components/breadcrumb.test.scss index 6ef4963d87..3fb65c287e 100644 --- a/packages/styles/tests/components/breadcrumb.test.scss +++ b/packages/styles/tests/components/breadcrumb.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/breadcrumb"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/breadcrumb'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('breadcrumb'), 'font-base-path')); diff --git a/packages/styles/tests/components/button.test.scss b/packages/styles/tests/components/button.test.scss index be52475186..6f1e3cc3df 100644 --- a/packages/styles/tests/components/button.test.scss +++ b/packages/styles/tests/components/button.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/button"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/button'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('button'), 'font-base-path')); diff --git a/packages/styles/tests/components/card.test.scss b/packages/styles/tests/components/card.test.scss index 7d8877fea1..5d811aa5bb 100644 --- a/packages/styles/tests/components/card.test.scss +++ b/packages/styles/tests/components/card.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/card"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/card'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('card'), 'font-base-path')); diff --git a/packages/styles/tests/components/carousel.test.scss b/packages/styles/tests/components/carousel.test.scss index 8a4b73e2fb..7762069bee 100644 --- a/packages/styles/tests/components/carousel.test.scss +++ b/packages/styles/tests/components/carousel.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/carousel"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/carousel'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('carousel'), 'font-base-path')); diff --git a/packages/styles/tests/components/datepicker.test.scss b/packages/styles/tests/components/datepicker.test.scss index 4eb7a759cf..af0e747aa4 100644 --- a/packages/styles/tests/components/datepicker.test.scss +++ b/packages/styles/tests/components/datepicker.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/datepicker"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/datepicker'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('datepicker'), 'font-base-path')); diff --git a/packages/styles/tests/components/dropdown.test.scss b/packages/styles/tests/components/dropdown.test.scss index 0fe7d9a9c5..1702bb9e8f 100644 --- a/packages/styles/tests/components/dropdown.test.scss +++ b/packages/styles/tests/components/dropdown.test.scss @@ -1,8 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/dropdown"; - +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/dropdown'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('dropdown'), 'font-base-path')); diff --git a/packages/styles/tests/components/fonts.test.scss b/packages/styles/tests/components/fonts.test.scss index 4e2926961f..f54b80d5d2 100644 --- a/packages/styles/tests/components/fonts.test.scss +++ b/packages/styles/tests/components/fonts.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/fonts"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/fonts'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('fonts'), 'font-base-path')); diff --git a/packages/styles/tests/components/form-feedback.test.scss b/packages/styles/tests/components/form-feedback.test.scss index dbdcc2810e..3ea903b90f 100644 --- a/packages/styles/tests/components/form-feedback.test.scss +++ b/packages/styles/tests/components/form-feedback.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/form-feedback"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/form-feedback'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('form-feedback'), 'font-base-path')); diff --git a/packages/styles/tests/components/forms.test.scss b/packages/styles/tests/components/forms.test.scss index c757a7b1c2..8b22f85f77 100644 --- a/packages/styles/tests/components/forms.test.scss +++ b/packages/styles/tests/components/forms.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/forms"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/forms'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('forms'), 'font-base-path')); diff --git a/packages/styles/tests/components/grid.test.scss b/packages/styles/tests/components/grid.test.scss index 9fa7be0983..9c7ba9a296 100644 --- a/packages/styles/tests/components/grid.test.scss +++ b/packages/styles/tests/components/grid.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/grid"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/grid'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('grid'), 'font-base-path')); diff --git a/packages/styles/tests/components/icons.test.scss b/packages/styles/tests/components/icons.test.scss index 8c9e75c915..e6de66e3cf 100644 --- a/packages/styles/tests/components/icons.test.scss +++ b/packages/styles/tests/components/icons.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/icons"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/icons'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('icons'), 'font-base-path')); diff --git a/packages/styles/tests/components/index.test.scss b/packages/styles/tests/components/index.test.scss index 59ffa79126..3cc3626c79 100644 --- a/packages/styles/tests/components/index.test.scss +++ b/packages/styles/tests/components/index.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('components'), 'font-base-path')); diff --git a/packages/styles/tests/components/intranet-header.test.scss b/packages/styles/tests/components/intranet-header.test.scss index b366e9f5f4..309b9a04f0 100644 --- a/packages/styles/tests/components/intranet-header.test.scss +++ b/packages/styles/tests/components/intranet-header.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/intranet-header"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/intranet-header'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('intranet-header'), 'font-base-path')); diff --git a/packages/styles/tests/components/list-group.test.scss b/packages/styles/tests/components/list-group.test.scss index c9379475c2..8a132ecc8b 100644 --- a/packages/styles/tests/components/list-group.test.scss +++ b/packages/styles/tests/components/list-group.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/list-group"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/list-group'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('list-group'), 'font-base-path')); diff --git a/packages/styles/tests/components/modal.test.scss b/packages/styles/tests/components/modal.test.scss index c588bde887..1a323fb98e 100644 --- a/packages/styles/tests/components/modal.test.scss +++ b/packages/styles/tests/components/modal.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/modal"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/modal'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('modal'), 'font-base-path')); diff --git a/packages/styles/tests/components/pagination.test.scss b/packages/styles/tests/components/pagination.test.scss index d53fa4874e..8cf9cdd7b6 100644 --- a/packages/styles/tests/components/pagination.test.scss +++ b/packages/styles/tests/components/pagination.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/pagination"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/pagination'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('pagination'), 'font-base-path')); diff --git a/packages/styles/tests/components/popover.test.scss b/packages/styles/tests/components/popover.test.scss index 6baca0fb94..2e91589414 100644 --- a/packages/styles/tests/components/popover.test.scss +++ b/packages/styles/tests/components/popover.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/popover"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/popover'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('popover'), 'font-base-path')); diff --git a/packages/styles/tests/components/progress.test.scss b/packages/styles/tests/components/progress.test.scss index 9c2a5e63a6..df0ed47fca 100644 --- a/packages/styles/tests/components/progress.test.scss +++ b/packages/styles/tests/components/progress.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/progress"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/progress'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('progress'), 'font-base-path')); diff --git a/packages/styles/tests/components/reboot.test.scss b/packages/styles/tests/components/reboot.test.scss index 94cd8a4489..9fe4cb30ca 100644 --- a/packages/styles/tests/components/reboot.test.scss +++ b/packages/styles/tests/components/reboot.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/reboot"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/reboot'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('reboot'), 'font-base-path')); diff --git a/packages/styles/tests/components/sizing.test.scss b/packages/styles/tests/components/sizing.test.scss index efb53376e8..9a85f8b91c 100644 --- a/packages/styles/tests/components/sizing.test.scss +++ b/packages/styles/tests/components/sizing.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/sizing"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/sizing'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('sizing'), 'font-base-path')); diff --git a/packages/styles/tests/components/spinner.test.scss b/packages/styles/tests/components/spinner.test.scss index 03bb53ae4e..0b4fee0867 100644 --- a/packages/styles/tests/components/spinner.test.scss +++ b/packages/styles/tests/components/spinner.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/spinner"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/spinner'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('spinner'), 'font-base-path')); diff --git a/packages/styles/tests/components/subnavigation.test.scss b/packages/styles/tests/components/subnavigation.test.scss index 9e16335fb7..fe48e5acd9 100644 --- a/packages/styles/tests/components/subnavigation.test.scss +++ b/packages/styles/tests/components/subnavigation.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/subnavigation"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/subnavigation'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('subnavigation'), 'font-base-path')); diff --git a/packages/styles/tests/components/tables.test.scss b/packages/styles/tests/components/tables.test.scss index 927d1addca..202f97afbc 100644 --- a/packages/styles/tests/components/tables.test.scss +++ b/packages/styles/tests/components/tables.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/tables"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/tables'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('tables'), 'font-base-path')); diff --git a/packages/styles/tests/components/tabs.test.scss b/packages/styles/tests/components/tabs.test.scss index ce3fd2c510..30e345a6b7 100644 --- a/packages/styles/tests/components/tabs.test.scss +++ b/packages/styles/tests/components/tabs.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/tabs"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/tabs'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('tabs'), 'font-base-path')); diff --git a/packages/styles/tests/components/toast.test.scss b/packages/styles/tests/components/toast.test.scss index 0f0f615d4d..2a4c586767 100644 --- a/packages/styles/tests/components/toast.test.scss +++ b/packages/styles/tests/components/toast.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/toast"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/toast'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('toast'), 'font-base-path')); diff --git a/packages/styles/tests/components/tooltip.test.scss b/packages/styles/tests/components/tooltip.test.scss index ecfdabbbe4..34aa504c94 100644 --- a/packages/styles/tests/components/tooltip.test.scss +++ b/packages/styles/tests/components/tooltip.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/tooltip"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/tooltip'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('tooltip'), 'font-base-path')); diff --git a/packages/styles/tests/components/topic-teaser.test.scss b/packages/styles/tests/components/topic-teaser.test.scss index 9c0fe9be57..b2e97a0243 100644 --- a/packages/styles/tests/components/topic-teaser.test.scss +++ b/packages/styles/tests/components/topic-teaser.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/topic-teaser"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/topic-teaser'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('topic-teaser'), 'font-base-path')); diff --git a/packages/styles/tests/components/type.test.scss b/packages/styles/tests/components/type.test.scss index 9be04d7f6c..f8c76b4ced 100644 --- a/packages/styles/tests/components/type.test.scss +++ b/packages/styles/tests/components/type.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/type"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/type'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('type'), 'font-base-path')); diff --git a/packages/styles/tests/components/utilities.test.scss b/packages/styles/tests/components/utilities.test.scss index f4fec68ce4..c6f8ac82dd 100644 --- a/packages/styles/tests/components/utilities.test.scss +++ b/packages/styles/tests/components/utilities.test.scss @@ -1,7 +1,7 @@ -@use "sass:map"; -@use "sass:meta"; -@use "tests/jest"; -@use "src/components/utilities"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'tests/jest'; +@use 'src/components/utilities'; // Check if component forwards options @include jest.true(map.has-key(meta.module-variables('utilities'), 'font-base-path')); diff --git a/packages/styles/tests/functions/color.test.scss b/packages/styles/tests/functions/color.test.scss index eafef055e1..c6f0b39381 100644 --- a/packages/styles/tests/functions/color.test.scss +++ b/packages/styles/tests/functions/color.test.scss @@ -1,5 +1,5 @@ -@use "tests/jest"; -@use "src/functions/color"; +@use 'tests/jest'; +@use 'src/functions/color'; @include jest.equal(gray, color.get-solid-color(rgba(black, 0.5))); @include jest.equal(maroon, color.get-solid-color(rgba(black, 0.5), red)); diff --git a/packages/styles/tests/functions/index.test.scss b/packages/styles/tests/functions/index.test.scss index 4440f65e97..35e6a69fc6 100644 --- a/packages/styles/tests/functions/index.test.scss +++ b/packages/styles/tests/functions/index.test.scss @@ -1,5 +1,5 @@ -@use "tests/jest"; -@use "src/functions/index" as functions; +@use 'tests/jest'; +@use 'src/functions/index' as functions; @include jest.equal(gray, functions.get-solid-color(rgba(black, 0.5))); @include jest.equal(maroon, functions.get-solid-color(rgba(black, 0.5), red)); @@ -20,7 +20,7 @@ $box-shadow: 0 0 5px 0 black; @include jest.equal(functions.line-height-calc($rem-value), 1.5); @include jest.equal(functions.calculate-inner-height(1rem, 1.5, 0.25rem), 2rem); -$text: "Surprise, motherfucker"; -$match: "Surprise"; +$text: 'Surprise, motherfucker'; +$match: 'Surprise'; @include jest.equal(functions.average(1, 2, 3), 2); @include jest.equal(functions.starts-with-any($text, $match), true); diff --git a/packages/styles/tests/functions/list.test.scss b/packages/styles/tests/functions/list.test.scss index 26a3ddce13..4462e9f943 100644 --- a/packages/styles/tests/functions/list.test.scss +++ b/packages/styles/tests/functions/list.test.scss @@ -1,5 +1,5 @@ -@use "tests/jest"; -@use "src/functions/list"; +@use 'tests/jest'; +@use 'src/functions/list'; $list: 0 1 2 3 4; diff --git a/packages/styles/tests/functions/sizing.test.scss b/packages/styles/tests/functions/sizing.test.scss index 9c795ec832..82ffd76bb2 100644 --- a/packages/styles/tests/functions/sizing.test.scss +++ b/packages/styles/tests/functions/sizing.test.scss @@ -1,6 +1,6 @@ -@use "tests/jest"; -@use "src/functions/sizing"; -@use "src/variables/commons"; +@use 'tests/jest'; +@use 'src/functions/sizing'; +@use 'src/variables/commons'; $value: 10px; $em-value: 1em; diff --git a/packages/styles/tests/functions/utilities.test.scss b/packages/styles/tests/functions/utilities.test.scss index 2d7da0328e..86d2b2f9e4 100644 --- a/packages/styles/tests/functions/utilities.test.scss +++ b/packages/styles/tests/functions/utilities.test.scss @@ -1,8 +1,8 @@ -@use "src/functions/utilities"; -@use "tests/jest"; +@use 'src/functions/utilities'; +@use 'tests/jest'; -$text: "Surprise, motherfucker"; -$match: "Surprise"; +$text: 'Surprise, motherfucker'; +$match: 'Surprise'; @include jest.equal(utilities.average(1, 2, 3), 2); @include jest.equal(utilities.starts-with-any($text, $match), true); diff --git a/packages/styles/tests/jest.test.scss b/packages/styles/tests/jest.test.scss index ca11284bb3..f63bdcc277 100644 --- a/packages/styles/tests/jest.test.scss +++ b/packages/styles/tests/jest.test.scss @@ -1,17 +1,14 @@ -@use "tests/jest"; +@use 'tests/jest'; $commalist: 1, 2, 3; @include jest.true(true); @include jest.false(false); @include jest.equal(1, 1); -@include jest.equal("Helvetica", Helvetica); // Weird, but ok +@include jest.equal('Helvetica', Helvetica); // Weird, but ok @include jest.equal((1 2 3), 1 2 3); // No need for braces @include jest.equal((1, 2, 3), $commalist); -@include jest.not-equal( - (1, 2, 3), - 1 2 3 -); // Commalists are not the same as whitespace lists -@include jest.not-equal(1, "1"); // Strings will be strings +@include jest.not-equal((1, 2, 3), 1 2 3); // Commalists are not the same as whitespace lists +@include jest.not-equal(1, '1'); // Strings will be strings @include jest.not-equal(1, 1px); @include jest.not-equal(1px, 1em); @@ -20,7 +17,7 @@ $commalist: 1, 2, 3; ( a: 1, b: 2, - c: 3 + c: 3, ) ); @include jest.is-descending(4 3 3 2 1); @@ -28,6 +25,6 @@ $commalist: 1, 2, 3; ( c: 3, b: 2, - a: 1 + a: 1, ) ); diff --git a/packages/styles/tests/layouts/portal/index.test.scss b/packages/styles/tests/layouts/portal/index.test.scss index 73d0c8afd7..477d1c3bf2 100644 --- a/packages/styles/tests/layouts/portal/index.test.scss +++ b/packages/styles/tests/layouts/portal/index.test.scss @@ -1 +1 @@ -@use "src/layouts/portal"; +@use 'src/layouts/portal'; diff --git a/packages/styles/tests/mixins/animation.test.scss b/packages/styles/tests/mixins/animation.test.scss index 0f55d3057e..636ba9c79f 100644 --- a/packages/styles/tests/mixins/animation.test.scss +++ b/packages/styles/tests/mixins/animation.test.scss @@ -1,6 +1,6 @@ -@use "src/mixins/animation"; +@use 'src/mixins/animation'; body { @include animation.hover-animation(10px, 500px, 500px); @include animation.hover-animation-svg-icon(red, 2021); -} \ No newline at end of file +} diff --git a/packages/styles/tests/mixins/forms.test.scss b/packages/styles/tests/mixins/forms.test.scss index e69cc3f65d..562667c3b9 100644 --- a/packages/styles/tests/mixins/forms.test.scss +++ b/packages/styles/tests/mixins/forms.test.scss @@ -1,8 +1,7 @@ -@use "src/mixins/forms"; - +@use 'src/mixins/forms'; body { - @include forms.form-validation-state("error", red, ""); + @include forms.form-validation-state('error', red, ''); @include forms.placeholder() { color: red; } diff --git a/packages/styles/tests/mixins/icons.test.scss b/packages/styles/tests/mixins/icons.test.scss index eb03b65c49..6343e18ce4 100644 --- a/packages/styles/tests/mixins/icons.test.scss +++ b/packages/styles/tests/mixins/icons.test.scss @@ -1,49 +1,49 @@ -@use "src/mixins/icons"; +@use 'src/mixins/icons'; .t1 { - @include icons.pi(1000); + @include icons.pi(1000); } .t1-a { - @include icons.pi("1000"); + @include icons.pi('1000'); } .t2 { - @include icons.pi(1000, #123412); + @include icons.pi(1000, #123412); } .t2-a { - @include icons.pi("1000", #123412); + @include icons.pi('1000', #123412); } .t3 { - @include icons.pi(1000, "danger"); + @include icons.pi(1000, 'danger'); } .t4 { - @include icons.pi(1000, rgba(12,20,30)); + @include icons.pi(1000, rgba(12, 20, 30)); } .t5 { - @include icons.pi(1000, midnightblue); + @include icons.pi(1000, midnightblue); } .t6 { - @include icons.pi(1000, rgba(12,20,30, 0.2)); + @include icons.pi(1000, rgba(12, 20, 30, 0.2)); } .t1-fail { - //@include icons.pi(123); + //@include icons.pi(123); } .t2-fail { - //@include icons.pi(1000, "shoulderror"); + //@include icons.pi(1000, "shoulderror"); } .t3-fail { - //@include icons.pi(1000, "midnightblue"); + //@include icons.pi(1000, "midnightblue"); } .t4-fail { - //@include icons.pi(1000, 1234); -} \ No newline at end of file + //@include icons.pi(1000, 1234); +} diff --git a/packages/styles/tests/mixins/size.test.scss b/packages/styles/tests/mixins/size.test.scss index 5e24121122..3c96e1d58b 100644 --- a/packages/styles/tests/mixins/size.test.scss +++ b/packages/styles/tests/mixins/size.test.scss @@ -1,4 +1,4 @@ -@use "src/mixins/size"; +@use 'src/mixins/size'; body { @include size.bezel-small(); diff --git a/packages/styles/tests/mixins/utilities.test.scss b/packages/styles/tests/mixins/utilities.test.scss index 735a07562a..6201fbd524 100644 --- a/packages/styles/tests/mixins/utilities.test.scss +++ b/packages/styles/tests/mixins/utilities.test.scss @@ -1,4 +1,4 @@ -@use "src/mixins/utilities"; +@use 'src/mixins/utilities'; ul { @include utilities.reset-list(); diff --git a/packages/styles/tests/placeholders/dropdown.test.scss b/packages/styles/tests/placeholders/dropdown.test.scss index 8ddf584489..318a802bae 100644 --- a/packages/styles/tests/placeholders/dropdown.test.scss +++ b/packages/styles/tests/placeholders/dropdown.test.scss @@ -1,4 +1,4 @@ -@use "src/placeholders/dropdown"; +@use 'src/placeholders/dropdown'; .toggler-icon { @extend %toggler-icon; diff --git a/packages/styles/tests/placeholders/index.test.scss b/packages/styles/tests/placeholders/index.test.scss index 4df6468d18..df17d2da7b 100644 --- a/packages/styles/tests/placeholders/index.test.scss +++ b/packages/styles/tests/placeholders/index.test.scss @@ -1,4 +1,4 @@ -@use "src/placeholders"; +@use 'src/placeholders'; .toggler-icon { @extend %toggler-icon; diff --git a/packages/styles/tests/placeholders/notifications.test.scss b/packages/styles/tests/placeholders/notifications.test.scss index 9bb9029636..3a1fc37691 100644 --- a/packages/styles/tests/placeholders/notifications.test.scss +++ b/packages/styles/tests/placeholders/notifications.test.scss @@ -1,4 +1,4 @@ -@use "src/placeholders/notification"; +@use 'src/placeholders/notification'; .notification-container { } diff --git a/packages/styles/tests/placeholders/text.test.scss b/packages/styles/tests/placeholders/text.test.scss index ad7d968af7..9c0dbab3a0 100644 --- a/packages/styles/tests/placeholders/text.test.scss +++ b/packages/styles/tests/placeholders/text.test.scss @@ -1,4 +1,4 @@ -@use "src/placeholders/text"; +@use 'src/placeholders/text'; .list-adjustment { @extend %list-adjustment;